(feature)调整了部分页面布局

jingchenxu · Jul 31, 2019 · bec5b95 · bec5b95
1 parent 5d5e463
commit bec5b95
Show file tree

Hide file tree

Showing 19 changed files with 209 additions and 144 deletions.
diff --git 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
   }
 ]
diff --git 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
@@ -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
@@ -1,89 +1,30 @@
 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
   }
 }
 
 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
@@ -4,4 +4,5 @@
 @border-radius-base     : 0;
 @border-radius-small    : 0;
 
-@default-grey-color     : #dadada;
+@default-grey-color     : #dadada;
+@default-gutter         : 20px;
diff --git 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,43 +92,34 @@ 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;
           vertical-align: middle;
           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
@@ -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
@@ -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>
-