From bec5b9505c70e9f3e7c6f1a78104547057672b34 Mon Sep 17 00:00:00 2001
From: jingchenxu <jingchenxu2015@gmail.com>
Date: Wed, 31 Jul 2019 11:15:15 +0800
Subject: [PATCH] =?UTF-8?q?(feature)=E8=B0=83=E6=95=B4=E4=BA=86=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mock/data/menu.json                       | 40 +++++++-
 src/myview/CopyRight/CopyRight.vue            | 10 +-
 src/router.js                                 |  4 +-
 src/store/app.js                              | 94 ++-----------------
 src/theme.less                                |  3 +-
 src/views/mis/MisContainer.vue                | 80 +++++++++-------
 .../MisHeaderItem/MisHeaderItem.vue           |  4 +-
 src/views/mis/components/MisMenu/MisMenu.vue  |  3 +-
 src/views/mis/components/MisTab/MisTab.vue    |  4 +-
 .../mis/components/MisTabNavi/MisTabNavi.vue  | 18 +++-
 src/views/mis/set/UserCenter.vue              |  3 +
 src/views/mis/set/UserSetting.vue             | 45 +++++++++
 src/views/mis/set/subpages/AcountBind.vue     |  0
 src/views/mis/set/subpages/BaseSetting.vue    | 28 ++++++
 src/views/mis/set/subpages/NewMessage.vue     |  0
 .../mis/set/subpages/SecuritySetting.vue      |  0
 src/views/mis/sys/SysPage2.vue                |  9 +-
 src/views/mis/workspace/Index.vue             |  3 +-
 .../BaseHistogram/BaseHistogram.vue           |  5 +-
 19 files changed, 209 insertions(+), 144 deletions(-)
 create mode 100644 src/views/mis/set/UserCenter.vue
 create mode 100644 src/views/mis/set/UserSetting.vue
 create mode 100644 src/views/mis/set/subpages/AcountBind.vue
 create mode 100644 src/views/mis/set/subpages/BaseSetting.vue
 create mode 100644 src/views/mis/set/subpages/NewMessage.vue
 create mode 100644 src/views/mis/set/subpages/SecuritySetting.vue

diff --git a/src/mock/data/menu.json b/src/mock/data/menu.json
index 6ce1c1c..45da7eb 100644
--- a/src/mock/data/menu.json
+++ b/src/mock/data/menu.json
@@ -3,7 +3,7 @@
     "mid": 1,
     "mkey": "workspace",
     "mname": "工作台",
-    "micon": "md app",
+    "micon": "md-apps",
     "mpath": "/workspace",
     "mtip": "工作台",
     "mrender": "default",
@@ -27,7 +27,7 @@
     "mid": 3,
     "mkey": "sys",
     "mname": "系统管理",
-    "micon": "md app",
+    "micon": "md-apps",
     "mpath": "/sys",
     "mtip": "系统管理",
     "mrender": "default",
@@ -58,5 +58,41 @@
     "mpid": 3,
     "mlevel": 2,
     "mstatus": 1
+  },
+  {
+    "mid": 6,
+    "mkey": "set",
+    "mname": "设置页面",
+    "micon": "md-settings",
+    "mpath": "/set",
+    "mtip": "设置页面",
+    "mrender": "default",
+    "mpid": 6,
+    "mlevel": 1,
+    "mstatus": 1
+  },
+  {
+    "mid": 7,
+    "mkey": "usercenter",
+    "mname": "个人中心",
+    "micon": "md app",
+    "mpath": "/usercenter",
+    "mtip": "个人中心",
+    "mrender": "default",
+    "mpid": 6,
+    "mlevel": 2,
+    "mstatus": 1
+  },
+  {
+    "mid": 8,
+    "mkey": "usersetting",
+    "mname": "个人设置",
+    "micon": "md app",
+    "mpath": "/usersetting",
+    "mtip": "个人设置",
+    "mrender": "default",
+    "mpid": 6,
+    "mlevel": 2,
+    "mstatus": 1
   }
 ]
\ No newline at end of file
diff --git a/src/myview/CopyRight/CopyRight.vue b/src/myview/CopyRight/CopyRight.vue
index 6255a51..f3f6f6b 100644
--- a/src/myview/CopyRight/CopyRight.vue
+++ b/src/myview/CopyRight/CopyRight.vue
@@ -1,13 +1,17 @@
 <template>
-  <div class="copy-right">
+  <footer class="copy-right">
     <span>myView Admin</span>
-  </div>
+    </br>
+    <span>Copyright © 2019 jingchenxu2015@gmail.com</span>
+  </footer>
 </template>
 
 <style lang="less" scoped>
 .copy-right {
-  min-height: 100px;
   background-color: transparent;
   text-align: center;
+  flex: 0 0 auto;
+  padding: 20px;
+  line-height: 30px;
 }
 </style>
diff --git a/src/router.js b/src/router.js
index 771e4e1..84bd75f 100644
--- a/src/router.js
+++ b/src/router.js
@@ -27,7 +27,9 @@ export default new Router({
     children: [
       { path: 'index', name: 'index', component: () => import('@/views/mis/workspace/Index') },
       { path: 'syspage1', name: 'syspage1', component: () => import('./views/mis/sys/SysPage1') },
-      { path: 'syspage2', name: 'syspage2', component: () => import('@/views/mis/sys/SysPage2') }
+      { path: 'syspage2', name: 'syspage2', component: () => import('@/views/mis/sys/SysPage2') },
+      { path: 'usercenter', name: 'usercenter', component: () => import('@/views/mis/set/UserCenter') },
+      { path: 'usersetting', name: 'usersetting', component: () => import('@/views/mis/set/UserSetting') }
     ]
   }
   ]
diff --git a/src/store/app.js b/src/store/app.js
index 842e1a3..a1281fe 100644
--- a/src/store/app.js
+++ b/src/store/app.js
@@ -1,55 +1,23 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-const indexNavi = {
-  mid: 9000,
-  mname: '首页',
-  mpid: 9000,
-  mgid: 90,
-  mgname: '工作台',
-  mdepth: 1,
-  mdisp: 9000,
-  mauth: 1,
-  mtip: 'index',
-  mfunction: '#/mis/workspace/index',
-  isline: false,
-  issub: false,
-  mnormalicon: ' iconfont mhome',
-  mhoticon: '',
-  mdisableicon: 'ios-radio-button-off',
-  isbase: false,
-  mcode: '9000',
-  mstatus: '1',
-  mstatusname: '',
-  mshortcut: 'ios-radio-button-off',
-  istab: true,
-  ismutil: false,
-  menukey: '',
-  auths: [] }
-
 Vue.use(Vuex)
 
 const state = {
+  currentPage: {},
   cachePages: [],
-  activePage: 'index',
-  openPages: [indexNavi],
-  currentMenu: {},
   expandMisMenu: false
 }
 
 const getters = {
-  getCachePages (state) {
-    let cachePages = state.openPages.map(menu => menu.mtip)
-    return cachePages
-  },
-  getActivePage (state) {
-    return state.activePage
+  getCurrentPage (state) {
+    return state.currentPage
   },
-  getOpenPages (state) {
-    return state.openPages
+  getCachePages (state) {
+    return state.cachePages
   },
-  getCurrentMenu (state) {
-    return state.currentMenu
+  getCachePagesKeys (state) {
+    // TODO 用于页面缓存
   },
   getExpandMisMenu (state) {
     return state.expandMisMenu
@@ -57,33 +25,6 @@ const getters = {
 }
 
 const mutations = {
-  updateCachePages (state, cachePages) {
-    state.cachePages = cachePages
-  },
-  updateActivePage (state, activePage) {
-    state.activePage = activePage
-  },
-  updateOpenPages (state, openPages) {
-    state.openPages = openPages
-  },
-  deleteOpenPagesByMenukey (state, menukey) {
-    let openPages = state.openPages.filter(menu => {
-      if (menu.mtip !== menukey) {
-        return menu
-      }
-    })
-    state.openPages = openPages
-  },
-  deleteOpenPages (state) {
-    state.openPages = [indexNavi]
-  },
-  deleteOtherOpenPages (state) {
-    let { currentMenu } = { ...state }
-    state.openPages = [indexNavi, currentMenu]
-  },
-  updateCurrentMenu (state, currentMenu) {
-    state.currentMenu = currentMenu
-  },
   changeExpandMisMenu (state) {
     let { expandMisMenu } = { ...state }
     state.expandMisMenu = !expandMisMenu
@@ -95,27 +36,6 @@ const mutations = {
  * @type {{UPDATECACHEPAGES(*, *=): void}}
  */
 const actions = {
-  UPDATECACHEPAGES (context, cachePages) {
-    context.commit('updateCachePages', cachePages)
-  },
-  UPDATEACTIVEPAGE (context, activePage) {
-    context.commit('updateActivePage', activePage)
-  },
-  UPDATEOPENPAGES (context, openPages) {
-    context.commit('updateOpenPages', openPages)
-  },
-  DELETEOPENPAGESBYMENUKEY (context, menukey) {
-    context.commit('deleteOpenPagesByMenukey', menukey)
-  },
-  DELETEOPENPAGES (context) {
-    context.commit('deleteOpenPages')
-  },
-  DELETEOTHEROPENPAGES (context) {
-    context.commit('deleteOtherOpenPages')
-  },
-  UPDATECURRENTMENU (context, currentMenu) {
-    context.commit('updateCurrentMenu', currentMenu)
-  },
   CHANGEEXPANDMISMENU (context) {
     context.commit('changeExpandMisMenu')
   }
diff --git a/src/theme.less b/src/theme.less
index 7a4d421..fc6335b 100644
--- a/src/theme.less
+++ b/src/theme.less
@@ -4,4 +4,5 @@
 @border-radius-base     : 0;
 @border-radius-small    : 0;
 
-@default-grey-color     : #dadada;
\ No newline at end of file
+@default-grey-color     : #dadada;
+@default-gutter         : 20px;
\ No newline at end of file
diff --git a/src/views/mis/MisContainer.vue b/src/views/mis/MisContainer.vue
index ae053c5..e730fac 100644
--- a/src/views/mis/MisContainer.vue
+++ b/src/views/mis/MisContainer.vue
@@ -6,9 +6,18 @@
       </el-aside>
       <el-container>
         <el-header>
-          <a type="text" class="sider-trigger-a">
+          <span class="sider-trigger">
             <Icon @click="handleSiderTrigger" style="font-size: 26px;" type="md-menu" />
-          </a>
+          </span>
+          <mis-header-item>
+            <Icon @click="handleSetting" style="font-size: 18px;" type="md-more" />
+            <Drawer :closable="true" v-model="showSetting">
+              <Divider>主题风格设置</Divider>
+              <p>Some contents...</p>
+              <p>Some contents...</p>
+              <p>Some contents...</p>
+            </Drawer>
+          </mis-header-item>
           <el-popover placement="bottom" trigger="hover">
             <mis-header-item slot="reference">
               <span class="header-avator"><img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="avatar"></span>
@@ -29,42 +38,50 @@
 </template>
 
 <script>
-import MisMenu from './components/MisMenu'
-import MisTabNavi from './components/MisTabNavi'
-import MisHeaderItem from './components/MisHeaderItem'
-import { mapGetters } from 'vuex'
+import MisMenu from "./components/MisMenu";
+import MisTabNavi from "./components/MisTabNavi";
+import MisHeaderItem from "./components/MisHeaderItem";
+import { mapGetters } from "vuex";
 
 export default {
-  name: 'MisContainer',
+  name: "MisContainer",
   components: {
     MisMenu,
     MisTabNavi,
     MisHeaderItem
   },
+  data() {
+    return {
+      showSetting: false
+    };
+  },
   computed: {
-    ...mapGetters(['getLogin', 'getExpandMisMenu'])
+    ...mapGetters(["getLogin", "getExpandMisMenu"])
   },
   methods: {
-    handleSiderTrigger () {
-      this.$store.dispatch('CHANGEEXPANDMISMENU')
+    handleSiderTrigger() {
+      this.$store.dispatch("CHANGEEXPANDMISMENU");
     },
-    handleExit () {
+    handleExit() {
       // TODO 调用退出接口
       this.$router.push({
-        name: 'login'
-      })
+        name: "login"
+      });
+    },
+    handleSetting() {
+      this.showSetting = true;
     }
   },
-  mounted () {
+  mounted() {
     if (!this.getLogin) {
-      this.$axios.get('/api/getonlineuser').then(res => {
+      this.$axios.get("/api/getonlineuser").then(res => {
         if (res.success) {
-          this.$store.dispatch('UPDATECURRENTUSER', res.data)
+          this.$store.dispatch("UPDATECURRENTUSER", res.data);
         }
-      })
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="less">
@@ -75,7 +92,8 @@ export default {
     height: 100%;
     .el-header {
       line-height: 60px;
-      box-shadow: 0 1px 4px rgba(0,21,41,.08);
+      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+      padding: 0;
       .header-avator {
         img {
           width: 40px;
@@ -83,35 +101,25 @@ export default {
           margin-right: 10px;
         }
       }
-      a {
-        color: #2d8cf0;
-        background: transparent;
-        text-decoration: none;
-        outline: none;
-        cursor: pointer;
-        -webkit-transition: color 0.2s ease;
-        transition: color 0.2s ease;
-      }
-      .sider-trigger-a {
-        padding: 6px;
-        width: 40px;
-        height: 40px;
+      .sider-trigger {
         display: inline-block;
+        width: 64px;
+        height: 64px;
         text-align: center;
-        color: #5c6b77;
-        margin-top: 12px;
+        cursor: pointer;
+        transition: all 0.2s ease-in-out;
       }
     }
 
     .el-aside {
       background: #001529;
       color: #333;
-      box-shadow: 2px 0 6px rgba(0,21,41,.35);
+      box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
       z-index: 1;
     }
 
     .el-main {
-      background-color: #e9eef3;
+      background-color: #f5f7f9;
       padding: 0;
     }
   }
diff --git a/src/views/mis/components/MisHeaderItem/MisHeaderItem.vue b/src/views/mis/components/MisHeaderItem/MisHeaderItem.vue
index a7c8e08..f069de8 100644
--- a/src/views/mis/components/MisHeaderItem/MisHeaderItem.vue
+++ b/src/views/mis/components/MisHeaderItem/MisHeaderItem.vue
@@ -6,13 +6,13 @@
 
 <style lang="less" scoped>
 .mis-header-item {
-  min-width: 50px;
+  min-width: 30px;
   height: 100%;
   background-color: transparent;
   float: right;
   padding: 0 10px;
 }
 .mis-header-item:hover {
-  background-color: grey;
+  background-color: #f5f7f9;
 }
 </style>
diff --git a/src/views/mis/components/MisMenu/MisMenu.vue b/src/views/mis/components/MisMenu/MisMenu.vue
index 891c60b..f090d0e 100644
--- a/src/views/mis/components/MisMenu/MisMenu.vue
+++ b/src/views/mis/components/MisMenu/MisMenu.vue
@@ -18,7 +18,7 @@
       :index="menu.mkey"
       :key="menu.mkey">
         <template slot="title">
-          <i class="el-icon-location"></i>
+          <Icon style="margin-right: 8px;" :type="menu.micon" />
           <span slot="title">{{menu.mname}}</span>
         </template>
         <!-- <el-menu-item-group> -->
@@ -91,4 +91,3 @@ export default {
   }
 }
 </style>
-
diff --git a/src/views/mis/components/MisTab/MisTab.vue b/src/views/mis/components/MisTab/MisTab.vue
index 703d135..67d214f 100644
--- a/src/views/mis/components/MisTab/MisTab.vue
+++ b/src/views/mis/components/MisTab/MisTab.vue
@@ -27,8 +27,8 @@ export default {
 
 <style lang="less" scoped>
 .mis-tab {
-  width: 100%;
-  padding: 15px;
+  padding: 0 15px;
+  min-height: 75vh;
   .list-container {
     width: 100%;
     background-color: white;
diff --git a/src/views/mis/components/MisTabNavi/MisTabNavi.vue b/src/views/mis/components/MisTabNavi/MisTabNavi.vue
index 829c604..be77c75 100644
--- a/src/views/mis/components/MisTabNavi/MisTabNavi.vue
+++ b/src/views/mis/components/MisTabNavi/MisTabNavi.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="mis-tab-navi">
-
+    <div class="tab-item">测试菜单1</div>
+    <div class="tab-item">测试菜单1</div>
+    <div class="tab-item">测试菜单1</div>
+    <div class="tab-item">测试菜单1</div>
+    <div class="tab-item">测试菜单1</div>
   </div>
 </template>
 
@@ -14,6 +18,16 @@ export default {
 .mis-tab-navi {
   width: 100%;
   height: 44px;
-  background-color: grey;
+  background-color: transparent;;
+  padding: 6px 10px;
+  .tab-item {
+    width: 100px;
+    margin-right: 10px;
+    height: 32px;
+    line-height: 32px;
+    background-color: white;
+    float: left;
+    padding: 0 10px;
+  }
 }
 </style>
diff --git a/src/views/mis/set/UserCenter.vue b/src/views/mis/set/UserCenter.vue
new file mode 100644
index 0000000..dd3b4df
--- /dev/null
+++ b/src/views/mis/set/UserCenter.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>UserCenter</h1>
+</template>
diff --git a/src/views/mis/set/UserSetting.vue b/src/views/mis/set/UserSetting.vue
new file mode 100644
index 0000000..0d643cb
--- /dev/null
+++ b/src/views/mis/set/UserSetting.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="user-setting">
+    <Row :gutter="20">
+      <Col span="8">
+      <Card :bordered="false">
+        <p slot="title"><Icon type="md-settings" />个人设置</p>
+        <CellGroup>
+          <Cell title="基本设置" label="个人账户信息设置" />
+          <Cell title="安全设置" label="密码、邮箱等设置" />
+          <Cell title="账号绑定" label="绑定第三方社交账户" />
+          <Cell title="新消息通知" label="各种通知的设置" />
+        </CellGroup>
+      </Card>
+      </Col>
+      <Col span="16">
+      <base-setting/>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import BaseSetting from './subpages/BaseSetting'
+
+export default {
+  name: "UserSetting",
+  components: {
+    BaseSetting
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../../theme.less";
+
+.user-setting {
+  min-height: 75vh;
+  padding: 0 @default-gutter;
+}
+</style>
+
+
diff --git a/src/views/mis/set/subpages/AcountBind.vue b/src/views/mis/set/subpages/AcountBind.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/mis/set/subpages/BaseSetting.vue b/src/views/mis/set/subpages/BaseSetting.vue
new file mode 100644
index 0000000..3d2d79a
--- /dev/null
+++ b/src/views/mis/set/subpages/BaseSetting.vue
@@ -0,0 +1,28 @@
+<template>
+  <Card :bordered="false">
+    <div>
+      <h3>新消息通知</h3>
+      <Row>
+        <Col span="24">
+        test
+        </Col>
+        <Divider />
+        <Col span="24">
+        test
+        </Col>
+        <Divider />
+        <Col span="24">
+        test
+        </Col>
+        <Divider />
+        <Col span="24">
+        test
+        </Col>
+        <Divider />
+        <Col span="24">
+        test
+        </Col>
+      </Row>
+    </div>
+  </Card>
+</template>
diff --git a/src/views/mis/set/subpages/NewMessage.vue b/src/views/mis/set/subpages/NewMessage.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/mis/set/subpages/SecuritySetting.vue b/src/views/mis/set/subpages/SecuritySetting.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/mis/sys/SysPage2.vue b/src/views/mis/sys/SysPage2.vue
index e315c9f..567e3cf 100644
--- a/src/views/mis/sys/SysPage2.vue
+++ b/src/views/mis/sys/SysPage2.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="sys-page2">
     <h1>SysPage2</h1>
   </div>
 </template>
@@ -9,3 +9,10 @@ export default {
   name: 'SysPage2'
 }
 </script>
+
+<style lang="less" scoped>
+.sys-page2 {
+  min-height: 75vh;
+}
+</style>
+
diff --git a/src/views/mis/workspace/Index.vue b/src/views/mis/workspace/Index.vue
index 281b985..d4bea63 100644
--- a/src/views/mis/workspace/Index.vue
+++ b/src/views/mis/workspace/Index.vue
@@ -67,6 +67,7 @@ export default {
 
 <style lang="less" scoped>
 .index-container {
-  padding: 15px;
+  padding: 0 15px;
+  min-height: 75vh;
 }
 </style>
diff --git a/src/views/mis/workspace/components/BaseHistogram/BaseHistogram.vue b/src/views/mis/workspace/components/BaseHistogram/BaseHistogram.vue
index 4c1a000..348f9e8 100644
--- a/src/views/mis/workspace/components/BaseHistogram/BaseHistogram.vue
+++ b/src/views/mis/workspace/components/BaseHistogram/BaseHistogram.vue
@@ -18,7 +18,6 @@ export default {
     drawArea () {
       // 绘制柱状图区域
       let svgContainer = document.getElementById('histogram')
-      
     }
   },
   mounted () {
@@ -31,8 +30,6 @@ export default {
 <style lang="less" scoped>
 .base-histogram {
   width: 100%;
-  min-height: 100px;  
+  min-height: 100px;
 }
 </style>
-
-