refine

src/components/Hamburger/index.vue

@@ -1,6 +1,15 @@
 <template>
     <div>
-        <svg t="1492500959545" @click="toggleClick" class="svg-icon hamburger" :class="{'is-active':isActive}"  style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z" p-id="1692"></path><path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z" p-id="1693"></path><path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z" p-id="1694"></path></svg>
+        <svg t="1492500959545" @click="toggleClick" class="svg-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
+            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64"
+            height="64">
+            <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
+                p-id="1692"></path>
+            <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
+                p-id="1693"></path>
+            <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
+                p-id="1694"></path>
+        </svg>
     </div>
 </template>
 
@@ -30,6 +39,7 @@
     transition: .38s;
     transform-origin: 50% 50%;
 }
+
 .hamburger.is-active {
     transform: rotate(90deg);
 }

src/router/index.js

@@ -1,8 +1,7 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 const _import = require('./_import_' + process.env.NODE_ENV);
-// in development env not use Lazy Loading,because Lazy Loading large page will cause webpack hot update too slow
+// in development env not use Lazy Loading,because Lazy Loading large page will cause webpack hot update too slow.so only in production use Lazy Loading
-// so only in production use Lazy Loading
 
 /* layout */
 import Layout from '../views/layout/Layout';
@@ -16,6 +15,7 @@ const dashboard = _import('dashboard/index');
 /* error page */
 const Err404 = _import('404');
 
+/* demo page */
 const Form = _import('page/form');
 const Table = _import('table/index');
 
@@ -23,10 +23,10 @@ Vue.use(Router);
 
  /**
   * icon : the icon show in the sidebar
-  * hidden : if hidden:true will not show in the sidebar
+  * hidden : if `hidden:true` will not show in the sidebar
-  * redirect : if redirect:noredirect will not redirct in the levelbar
+  * redirect : if `redirect:noredirect` will not redirct in the levelbar
-  * noDropdown : if noDropdown:true will not has submenu
+  * noDropdown : if `noDropdown:true` will not has submenu in the sidebar
-  * meta : { role: ['admin'] }  will control the page role
+  * meta : `{ role: ['admin'] }`  will control the page role
   **/
 export const constantRouterMap = [
   { path: '/login', component: Login, hidden: true },
@@ -35,7 +35,7 @@ export const constantRouterMap = [
     path: '/',
     component: Layout,
     redirect: '/dashboard',
-    name: '首页',
+    name: 'Home',
     hidden: true,
     children: [{ path: 'dashboard', component: dashboard }]
   }
@@ -58,6 +58,7 @@ export const asyncRouterMap = [
       { path: 'index', component: Form, name: 'Form', icon: 'zonghe' }
     ]
   },
+
   {
     path: '/table',
     component: Layout,
@@ -67,5 +68,6 @@ export const asyncRouterMap = [
     noDropdown: true,
     children: [{ path: 'index', component: Table, name: 'Table', meta: { role: ['admin'] } }]
   },
+
   { path: '*', redirect: '/404', hidden: true }
 ];

src/store/modules/user.js

@@ -56,21 +56,6 @@ const user = {
       });
     },
 
-    // 第三方验证登录
-    LoginByThirdparty({ commit, state }, code) {
-      return new Promise((resolve, reject) => {
-        commit('SET_CODE', code);
-        loginByThirdparty(state.status, state.email, state.code, state.auth_type).then(response => {
-          commit('SET_TOKEN', response.data.token);
-          Cookies.set('Admin-Token', response.data.token);
-          resolve();
-        }).catch(error => {
-          reject(error);
-        });
-      });
-    },
-
-
     // 登出
     LogOut({ commit, state }) {
       return new Promise((resolve, reject) => {
@@ -92,16 +77,6 @@ const user = {
         Cookies.remove('Admin-Token');
         resolve();
       });
-    },
-
-    // 动态修改权限
-    ChangeRole({ commit }, role) {
-      return new Promise(resolve => {
-        commit('SET_ROLES', [role]);
-        commit('SET_TOKEN', role);
-        Cookies.set('Admin-Token', role);
-        resolve();
-      })
     }
   }
 };

src/utils/fetch.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { Message } from 'element-ui';
 import store from '../store';
-// import router from '../router';
+
 
 // 创建axios实例
 const service = axios.create({
@@ -11,9 +11,8 @@ const service = axios.create({
 
 // request拦截器
 service.interceptors.request.use(config => {
-  // Do something before request is sent
   if (store.getters.token) {
-    config.headers['X-Token'] = store.getters.token; // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
+    config.headers['X-Token'] = store.getters.token; // 让每个请求携带自定义token 请根据实际情况自行修改
   }
   return config;
 }, error => {
@@ -26,8 +25,7 @@ service.interceptors.request.use(config => {
 service.interceptors.response.use(
   response => {
   /**
-  * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
+  * code为非20000是抛错 可结合自己业务进行修改
-  * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
   */
     const res = response.data;
     if (res.code !== 20000) {
@@ -36,6 +34,7 @@ service.interceptors.response.use(
         type: 'error',
         duration: 5 * 1000
       });
+
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {

src/utils/index.js

@@ -56,15 +56,3 @@
      return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
    }
  }
-
- export function scrollTo(element, to, duration) {
-   if (duration <= 0) return;
-   const difference = to - element.scrollTop;
-   const perTick = difference / duration * 10;
-   setTimeout(() => {
-     console.log(new Date())
-     element.scrollTop = element.scrollTop + perTick;
-     if (element.scrollTop === to) return;
-     scrollTo(element, to, duration - 10);
-   }, 10);
- }

src/views/404.vue

@@ -225,4 +225,5 @@
     }
   }
 }
+
 </style>

src/views/layout/Navbar.vue

@@ -10,7 +10,7 @@
             <el-dropdown-menu class="user-dropdown" slot="dropdown">
                 <router-link class='inlineBlock' to="/">
                     <el-dropdown-item>
-                        首页
+                        Home
                     </el-dropdown-item>
                 </router-link>
                 <el-dropdown-item divided><span @click="logout" style="display:block;">退出登录</span></el-dropdown-item>
@@ -32,7 +32,6 @@
       computed: {
         ...mapGetters([
           'sidebar',
-          'name',
           'avatar'
         ])
       },

src/views/layout/Sidebar.vue

@@ -21,4 +21,5 @@
 .el-menu {
     min-height: 100%;
 }
+
 </style>

src/views/layout/SidebarItem.vue

@@ -24,7 +24,6 @@
 </template>
 
 <script>
-
     export default {
       name: 'SidebarItem',
       props: {

src/views/login/index.vue

@@ -1,22 +1,20 @@
 <template>
   <div class="login-container">
-        <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
+    <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
-                 label-width="0px"
       class="card-box login-form">
       <h3 class="title">系统登录</h3>
       <el-form-item prop="email">
         <span class="svg-container">
                   <icon-svg icon-class="jiedianyoujian"></icon-svg>
                 </span>
-                <el-input name="email" type="text" v-model="loginForm.email" autoComplete="on"
+        <el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
-                          placeholder="邮箱"></el-input>
       </el-form-item>
       <el-form-item prop="password">
         <span class="svg-container">
                   <icon-svg icon-class="mima" ></icon-svg>
                 </span>
-                <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password"
+        <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
-                          autoComplete="on" placeholder="密码"></el-input>
+          placeholder="密码"></el-input>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
@@ -52,7 +50,7 @@
         return {
           loginForm: {
             email: 'admin@wallstreetcn.com',
-            password: ''
+            password: '111111'
           },
           loginRules: {
             email: [
@@ -93,11 +91,11 @@
       color: #fff;
       margin-bottom: 5px;
     }
+
     .login-container {
       @include relative;
       height: 100vh;
       background-color: #2d3a4b;
-
       input:-webkit-autofill {
         -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
         -webkit-text-fill-color: #fff !important;
@@ -120,7 +118,6 @@
         padding: 6px 5px 6px 15px;
         color: #889aa4;
       }
-
       .title {
         font-size: 26px;
         font-weight: 400;
@@ -129,7 +126,6 @@
         text-align: center;
         font-weight: bold;
       }
-
       .login-form {
         position: absolute;
         left: 0;
@@ -138,17 +134,14 @@
         padding: 35px 35px 15px 35px;
         margin: 120px auto;
       }
-
       .el-form-item {
         border: 1px solid rgba(255, 255, 255, 0.1);
         background: rgba(0, 0, 0, 0.1);
         border-radius: 5px;
         color: #454545;
       }
-
       .forget-pwd {
         color: #fff;
       }
     }
-
 </style>

src/views/table/index.vue

@@ -34,6 +34,7 @@
 
 <script>
   import { getList } from '@/api/table';
+
   export default {
     data() {
       return {