Ready to refine the whole frame.

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;
+
+

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
 

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>
       )

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 {
+  }
+
+}

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>
+    )
+  }
+}
+