From eada6b50059c35adf36470a7aae5a49e32ac1cf7 Mon Sep 17 00:00:00 2001
From: lishuang <ziclax@163.com>
Date: Sat, 20 Jun 2020 00:30:16 +0800
Subject: [PATCH] Ready to refine the whole frame.

---
 src/assets/css/global/variables.less | 29 +++++++++++++
 src/common/model/global/Moon.ts      |  3 ++
 src/pages/Frame.tsx                  |  7 +++-
 src/pages/layout/BottomLayout.less   | 60 +++++++++++++++++++++++++++
 src/pages/layout/BottomLayout.tsx    | 61 ++++++++++++++++++++++++++++
 5 files changed, 158 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/layout/BottomLayout.less
 create mode 100644 src/pages/layout/BottomLayout.tsx

diff --git a/src/assets/css/global/variables.less b/src/assets/css/global/variables.less
index 62cc592..29c5956 100644
--- a/src/assets/css/global/variables.less
+++ b/src/assets/css/global/variables.less
@@ -13,3 +13,32 @@
 
 //左侧的主题图标导航栏宽度。
 @subject-icon-bar-width: 50px;
+
+
+
+//Sidebar width
+@sidebar-width: 170px;
+
+// Boxed layout width
+@boxed-width: 1200px;
+
+//Border radius for buttons
+@btn-border-radius: 3px;
+
+//Navigation
+@nav-bg: #2F4050;
+@nav-text-color: #a7b1c2;
+
+
+@top-navigation-height: 45px;
+
+@app-color-title: #474747;
+@app-color-content: #8A8A8A;
+
+//上方导航栏高度
+@frame-header-height: 80px;
+
+//下方蓝眼云盘高度
+@power-footer-height: 40px;
+
+
diff --git a/src/common/model/global/Moon.ts b/src/common/model/global/Moon.ts
index b5e675c..be270f5 100644
--- a/src/common/model/global/Moon.ts
+++ b/src/common/model/global/Moon.ts
@@ -14,6 +14,9 @@ export default class Moon {
   //全局唯一的偏好设置
   preference: Preference = new Preference()
 
+  //当前使用的语言，默认中文
+  lang: string = "zh"
+
   //全局的一个store对象
   private static singleton: Moon | null = null
 
diff --git a/src/pages/Frame.tsx b/src/pages/Frame.tsx
index 8522ba4..15ca1c8 100644
--- a/src/pages/Frame.tsx
+++ b/src/pages/Frame.tsx
@@ -37,6 +37,7 @@ import Preference from "../common/model/preference/Preference";
 import {WebResultCode} from "../common/model/base/WebResultCode";
 import MessageBoxUtil from "../common/util/MessageBoxUtil";
 import ImageUtil from "../common/util/ImageUtil";
+import BottomLayout from "./layout/BottomLayout";
 
 const {Header, Content, Footer, Sider} = Layout;
 
@@ -134,7 +135,7 @@ class RawFrame extends TankComponent<IProps, IState> {
   //logo可以使用自定义的。
   logoUrl() {
     if (this.preference.logoUrl) {
-      return ImageUtil.handleImageUrl(this.preference.logoUrl,false,200,200)
+      return ImageUtil.handleImageUrl(this.preference.logoUrl, false, 200, 200)
 
     } else {
       return DefaultLogoPng
@@ -240,7 +241,9 @@ class RawFrame extends TankComponent<IProps, IState> {
               }
 
             </Content>
-            <Footer style={{textAlign: 'center'}}>Eyeblue ©2020 Copyright</Footer>
+            <Footer>
+              <BottomLayout/>
+            </Footer>
           </Layout>
         </Layout>
       )
diff --git a/src/pages/layout/BottomLayout.less b/src/pages/layout/BottomLayout.less
new file mode 100644
index 0000000..a7bfbc6
--- /dev/null
+++ b/src/pages/layout/BottomLayout.less
@@ -0,0 +1,60 @@
+@import "../../assets/css/global/variables";
+
+.layout-bottom {
+
+  text-align: center;
+
+  //大屏幕
+  @media (min-width: @screen-sm-min) {
+
+    position: fixed;
+    height: @power-footer-height;
+    line-height: @power-footer-height;
+    background-color: white;
+    bottom: 0;
+    right: 0;
+    left: @sidebar-width;
+    padding: 0 20px;
+    border-top: 1px solid #eee;
+    .item {
+      margin-right: 10px;
+    }
+
+  }
+  //小屏幕
+  @media (max-width: @screen-xs-max) {
+    .item {
+      display: block;
+    }
+  }
+
+  &.show-drawer {
+    //大屏幕
+    @media (min-width: @screen-sm-min) {
+      position: fixed;
+      height: @power-footer-height;
+      line-height: @power-footer-height;
+      background-color: white;
+      bottom: 0;
+      right: 0;
+      left: @sidebar-width;
+      padding: 0 20px;
+      border-top: 1px solid #eee;
+
+      .item {
+        margin-right: 10px;
+      }
+    }
+
+    //小屏幕
+    @media (max-width: @screen-xs-max) {
+      .item {
+        display: block;
+      }
+    }
+  }
+
+  .brand {
+  }
+
+}
diff --git a/src/pages/layout/BottomLayout.tsx b/src/pages/layout/BottomLayout.tsx
new file mode 100644
index 0000000..5182942
--- /dev/null
+++ b/src/pages/layout/BottomLayout.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import "./BottomLayout.less"
+import TankComponent from "../../common/component/TankComponent";
+import Preference from "../../common/model/preference/Preference";
+import Moon from "../../common/model/global/Moon";
+import DefaultLogoPng from '../../assets/image/logo.png';
+
+interface IProps {
+
+}
+
+interface IState {
+
+}
+
+export default class BottomLayout extends TankComponent <IProps, IState> {
+
+  constructor(props: IProps) {
+    super(props)
+    this.state = {}
+  }
+
+  componentDidMount() {
+
+  }
+
+  changeLang() {
+
+  }
+
+  render() {
+
+    let that = this
+
+    let preference: Preference = Moon.getSingleton().preference
+
+    return (
+      <div className="layout-bottom">
+        <span className="item">
+			<span>{preference.copyright}</span>
+		</span>
+        <span className="item">
+			<span>{preference.record}</span>
+		</span>
+        <span className="item">
+			<a href="javascript:void(0)" onClick={this.changeLang.bind(this)}>
+        {Moon.getSingleton().lang === 'zh' ? 'English' : '中文'}
+      </a>
+      </span>
+
+        {/*开源不易，请不要移除掉这里的代码，蓝眼云盘谢谢您 ^_^*/}
+        <span className="brand">
+			Powered by <a target="_blank" href="https://github.com/eyebluecn/tank">
+      <img alt="logo" className="w30" src={DefaultLogoPng}/>
+          蓝眼云盘</a>
+		</span>
+      </div>
+    )
+  }
+}
+