ipad 适配

WildXBird · Oct 15, 2021 · f770c5b · f770c5b
1 parent 71980f8
commit f770c5b
Show file tree

Hide file tree

Showing 9 changed files with 148 additions and 90 deletions.
diff --git a/src/components/AD/index.js b/src/components/AD/index.js
@@ -36,7 +36,7 @@ let MenuAD = function MenuAD(props) {
 let RightAD = function RightAD(props) {
   if (localStorage.disableAD === "true") {
     return ""
-  }
+  } 
   return (
     <div className={"rightAD"}>
       {"广告已关闭"}

diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js
@@ -54,7 +54,7 @@ Menu.SubMenu = class Menu_SubMenu extends PureComponent {
       return React.cloneElement(child, {
         ...child.props,
         selectedKey: props.selectedKey,
-        itemKey: child.key,
+        itemkey: child.key,
       });
     });
     let arrowStyle = {
@@ -95,7 +95,7 @@ Menu.SubMenu = class Menu_SubMenu extends PureComponent {
   }
 };
 Menu.Item = function Menu_Item(props) {
-  let actived = props.itemKey == props.selectedKey;
+  let actived = props.itemkey == props.selectedKey;
   let iconStyle = {
     height: '100%',
     width: '100%',

diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js
@@ -12,7 +12,7 @@ class Tabs extends PureComponent {
     const titleChildren = React.Children.map(props.children, (child) => {
       return React.cloneElement(child, {
         ...child.props,
-        itemKey: child.key,
+        itemkey: child.key,
         selectedKey: activeKey,
         onClick: (() => {
           console.log("onClick")
@@ -26,7 +26,7 @@ class Tabs extends PureComponent {
       return React.cloneElement(<div className={`outlooker-Tabs-content  ${child.key == activeKey ? 'outlooker-Tabs-content-actived' : ''}`} style={{}}>
         {child.props.children}
       </div>, {
-        itemKey: child.key,
+        itemkey: child.key,
         selectedKey: activeKey
       });
     });
@@ -60,7 +60,7 @@ Tabs.TabPane = class TabPane extends PureComponent {
     let props = this.props
     console.log("props", props)
     return (
-      <div className={`outlooker-Tabs-tab ${props.itemKey == props.selectedKey ? 'outlooker-Tabs-tab-actived' : ''}`} onClick={this.props.onClick}>
+      <div className={`outlooker-Tabs-tab ${props.itemkey == props.selectedKey ? 'outlooker-Tabs-tab-actived' : ''}`} onClick={this.props.onClick}>
         <div style={{ position: 'relative', top: 0 }}>{props.tab}</div>
         <div className={'outlooker-Tabs-tab-underline'} />
       </div>

diff --git a/src/components/global.less b/src/components/global.less
@@ -261,6 +261,7 @@ html {
 }
 
 .ant-layout-header {
+  overflow: hidden;
   .header-searchBox {
     .ant-input-affix-wrapper {
       background-color: var(--headerSearchBoxBackground);

diff --git a/src/components/header.jsx b/src/components/header.jsx
@@ -86,15 +86,15 @@ export default function IndexPage(props) {
             verticalAlign: 'top',
           }}
         >
-          <IconButton style={IconButtonStyle}>{''}</IconButton>
-          <IconButton style={IconButtonStyle}>{''}</IconButton>
-          <IconButton style={IconButtonStyle}>{''}</IconButton>
-          <IconButton style={IconButtonStyle}>{''}</IconButton>
+          <IconButton style={IconButtonStyle} onClick={props.openSettings}>{''}</IconButton>
+          <IconButton style={IconButtonStyle} onClick={props.openSettings}>{''}</IconButton>
+          <IconButton style={IconButtonStyle} onClick={props.openSettings}>{''}</IconButton>
+          <IconButton style={IconButtonStyle} onClick={props.openSettings}>{''}</IconButton>
           <IconButton style={IconButtonStyle} onClick={props.openSettings}>{''}</IconButton>
-          <IconButton style={IconButtonStyle}>{''}</IconButton>
-          <IconButton style={IconButtonStyle}>{''}</IconButton>
+          <IconButton style={IconButtonStyle} onClick={props.openSettings}>{''}</IconButton>
+          <IconButton style={IconButtonStyle} onClick={props.openSettings}>{''}</IconButton>
         </div>
-        <div style={{ display: 'inline-block', width: 48, height: '100%' }}>
+        <div style={{ display: 'inline-block', width: 48, height: '100%' }}  onClick={props.openSettings}>
           <IconButton style={IconButtonStyle}>
             <div
               style={{

diff --git a/src/components/interface.jsx b/src/components/interface.jsx
@@ -2,7 +2,7 @@ import styles from './global.less';
 import './global.less';
 import { Layout } from 'antd';
 import HeaderContent from './header';
-import LeftBar from './leftBar';
+import { LeftBar } from './leftBar';
 import { RightAD } from "../components/AD"
 import Settings from "../components/Settings"
 import React, { useState } from 'react';
@@ -13,6 +13,16 @@ export default function Interface(input) {
   const [settingDisplay, setSettingDisplay] = useState(0);
 
   const { Header, Footer, Content, Sider } = Layout;
+
+  let hideAD = false
+  if (typeof (localStorage.disableAD) !== "string") {
+    if (window.innerWidth < 1000) {
+      hideAD = true
+    }
+  }else{
+    hideAD = localStorage.disableAD === "true" 
+  }
+
   return (
     <>
       <Header
@@ -28,10 +38,10 @@ export default function Interface(input) {
         <HeaderContent openSettings={() => { setSettingDisplay(!settingDisplay) }} />
       </Header>
       <Content style={{ height: 'calc(100% - 48px)', width: "100%" }}>
-        <div style={{ width: `calc(100% - ${localStorage.disableAD === "true" ? "0px" : "305px"})`, height: "100%", display: "inline-block" }}>
+        <div style={{ width: `calc(100% - ${hideAD ? "0px" : "305px"})`, height: "100%", display: "inline-block" }}>
           <LeftBar>{props.children}</LeftBar>
         </div>
-        <div style={{ width: localStorage.disableAD === "true" ? 0 : "305px", height: "100%", display: "inline-block", verticalAlign: "top" }}>
+        <div style={{ width: hideAD ? 0 : "305px", height: "100%", display: "inline-block", verticalAlign: "top" }}>
           <RightAD />
           <Settings
             display={settingDisplay}

diff --git a/src/components/leftBar.jsx b/src/components/leftBar.jsx
@@ -1,69 +1,99 @@
+import React, { PureComponent} from 'react';
+
 import { LeftBarsButton } from '../components/Button';
 import { ReactComponent as WordLogo } from '../assets/picture/svg/word.svg';
 import { ReactComponent as ExcelLogo } from '../assets/picture/svg/excel.svg';
 import { ReactComponent as PowerPointLogo } from '../assets/picture/svg/powerPoint.svg';
 import { ReactComponent as OneNoteLogo } from '../assets/picture/svg/oneNote.svg';
 
-export default function IndexPage(props) {
-  let IconButtonStyle = {
-    height: 48,
-    width: 48,
-    fontFamily: 'ShellFabricMDL2IconsLite,ShellFabricMDL2Icons,controlIcons',
-    fontSize: 16,
-    verticalAlign: 'top',
-  };
-  return (
-    <div
-      className={'leftBar'}
-      style={{ width: '100%', height: '100%', verticalAlign: 'top' }}
-    >
+// export default function LeftBar(props) {
+export class LeftBar extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hideLeft: this.needHideLeft()
+    };
+  }
+  needHideLeft() {
+    return (window.innerWidth < 600) ? true : false
+  }
+  onResize(event) {
+    if (this.state.hideMenu !== this.needHideLeft()) {
+      this.setState({
+        hideLeft: this.needHideLeft()
+      })
+    }
+  }
+  componentDidMount() {
+    window.addEventListener("resize", this.onResize.bind(this))
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.onResize.bind(this))
+  }
+  render() {
+    let IconButtonStyle = {
+      height: 48,
+      width: 48,
+      fontFamily: 'ShellFabricMDL2IconsLite,ShellFabricMDL2Icons,controlIcons',
+      fontSize: 16,
+      verticalAlign: 'top',
+    };
+    const leftWidth = this.state.hideLeft ?0:48
+    return (
       <div
-        className={'leftBar-left'}
-        style={{
-          width: 48,
-          height: '100%',
-          display: 'inline-block',
-          verticalAlign: 'top',
-        }}
+        className={'leftBar'}
+        style={{ width: '100%', height: '100%', verticalAlign: 'top' }}
       >
-        <LeftBarsButton style={IconButtonStyle} active>
-          {''}
-        </LeftBarsButton>
-        <LeftBarsButton style={IconButtonStyle}>{''}</LeftBarsButton>
-        <LeftBarsButton style={IconButtonStyle}>{''}</LeftBarsButton>
-        <LeftBarsButton style={IconButtonStyle}>{''}</LeftBarsButton>
-        <LeftBarsButton style={IconButtonStyle}>{''}</LeftBarsButton>
-        <LeftBarsButton style={IconButtonStyle}>
-          <div className={'svgIcon'}>
-            <WordLogo />
-          </div>
-        </LeftBarsButton>
-        <LeftBarsButton style={IconButtonStyle}>
-          <div className={'svgIcon'}>
-            <ExcelLogo />
-          </div>
-        </LeftBarsButton>
-        <LeftBarsButton style={IconButtonStyle}>
-          <div className={'svgIcon'}>
-            <PowerPointLogo />
-          </div>
-        </LeftBarsButton>
-        <LeftBarsButton style={IconButtonStyle}>
-          <div className={'svgIcon'}>
-            <OneNoteLogo />
-          </div>
-        </LeftBarsButton>
+        <div
+          className={'leftBar-left'}
+          style={{
+            width:leftWidth,
+            height: '100%',
+            display: 'inline-block',
+            verticalAlign: 'top',
+            overflow:"hidden"
+          }}
+        >
+          <LeftBarsButton style={IconButtonStyle} active>
+            {''}
+          </LeftBarsButton>
+          <LeftBarsButton style={IconButtonStyle}>{''}</LeftBarsButton>
+          <LeftBarsButton style={IconButtonStyle}>{''}</LeftBarsButton>
+          <LeftBarsButton style={IconButtonStyle}>{''}</LeftBarsButton>
+          <LeftBarsButton style={IconButtonStyle}>{''}</LeftBarsButton>
+          <LeftBarsButton style={IconButtonStyle}>
+            <div className={'svgIcon'}>
+              <WordLogo />
+            </div>
+          </LeftBarsButton>
+          <LeftBarsButton style={IconButtonStyle}>
+            <div className={'svgIcon'}>
+              <ExcelLogo />
+            </div>
+          </LeftBarsButton>
+          <LeftBarsButton style={IconButtonStyle}>
+            <div className={'svgIcon'}>
+              <PowerPointLogo />
+            </div>
+          </LeftBarsButton>
+          <LeftBarsButton style={IconButtonStyle}>
+            <div className={'svgIcon'}>
+              <OneNoteLogo />
+            </div>
+          </LeftBarsButton>
+        </div>
+        <div
+          className={'leftBar-right'}
+          style={{
+            width: `calc(100% - ${leftWidth}px)`,
+            height: '100%',
+            display: 'inline-block',
+          }}
+        >
+          {this.props.children}
+        </div>
       </div>
-      <div
-        className={'leftBar-right'}
-        style={{
-          width: 'calc(100% - 48px)',
-          height: '100%',
-          display: 'inline-block',
-        }}
-      >
-        {props.children}
-      </div>
-    </div>
-  );
-}
+
+    );
+  }
+}
diff --git a/src/pages/mail/index.js b/src/pages/mail/index.js
@@ -9,10 +9,27 @@ import React, { PureComponent } from 'react';
 class IndexPage extends PureComponent {
   constructor(props) {
     super(props);
-    this.state = {};
+    // alert(window.innerWidth)
+
+    this.state = {
+      hideMenu: this.needHideMenu()
+    };
+  }
+  needHideMenu() {
+    return (window.innerWidth < 1000) ? true : false
+  }
+  onResize(event) {
+    if (this.state.hideMenu !== this.needHideMenu()) {
+      this.setState({
+        hideMenu: this.needHideMenu()
+      })
+    }
   }
   componentDidMount() {
-
+    window.addEventListener("resize", this.onResize.bind(this))
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.onResize.bind(this))
   }
   render() {
     let props = this.props

diff --git a/src/pages/mail/viewArticle/index.js b/src/pages/mail/viewArticle/index.js
@@ -40,7 +40,6 @@ class ViewArticle extends PureComponent {
       }
     }
     this.makeMail = (item, currentArticle = {}) => {
-      console.log("currentArticle",currentArticle)
       let title = "出错了",
         content = "",
         infobox = "",
@@ -58,6 +57,14 @@ class ViewArticle extends PureComponent {
           paddingTop: 8,
         };
         if (typeof (item.title) === "string") {
+          const openLink = () => {
+            if (item.link) {
+              window.open(item.link)
+            } else {
+              message.info(`无法打开`);
+
+            }
+          }
           title = item.title
           content = <div dangerouslySetInnerHTML={{ __html: item.safeHTML }} />
           infobox = <div className={"ViewArticle-content-infobox"}>
@@ -81,23 +88,16 @@ class ViewArticle extends PureComponent {
             </div>
             <div className={"ViewArticle-content-infobox-action"}>
               <div style={{ marginLeft: 0, paddingLeft: 10, height: '100%', display: 'inline-block', padding: '6px 4px', paddingRight: 2 }}>
-                <LightButton style={buttonStyle}>{''}</LightButton>
+                <LightButton style={buttonStyle} onClick={openLink}>{''}</LightButton>
               </div>
               <div style={{ marginLeft: 0, paddingLeft: 10, height: '100%', display: 'inline-block', padding: '6px 4px', paddingRight: 2 }}>
-                <LightButton style={buttonStyle}>{''}</LightButton>
+                <LightButton style={buttonStyle} onClick={openLink}>{''}</LightButton>
               </div>
               <div style={{ marginLeft: 0, paddingLeft: 10, height: '100%', display: 'inline-block', padding: '6px 4px', paddingRight: 2 }}>
-                <LightButton style={buttonStyle}>{''}</LightButton>
+                <LightButton style={buttonStyle} onClick={openLink}>{''}</LightButton>
               </div>
               <div style={{ marginLeft: 0, paddingLeft: 10, height: '100%', display: 'inline-block', padding: '6px 4px', paddingRight: 2 }}>
-                <LightButton style={buttonStyle} onClick={() => {
-                  if (item.link) {
-                    window.open(item.link)
-                  } else {
-                    message.info(`无法打开`);
-
-                  }
-                }}>{''}</LightButton>
+                <LightButton style={buttonStyle} onClick={openLink}>{''}</LightButton>
               </div>
 
             </div>