refine

Author: PanJiaChen

package.json

@@ -32,6 +32,7 @@
     "vue-count-to": "1.0.5",
     "vue-multiselect": "2.0.2",
     "vue-router": "2.7.0",
+    "vue-splitpane": "^1.0.0",
     "vuedraggable": "2.14.1",
     "vuex": "2.3.1",
     "xlsx": "^0.10.8"

src/api/login.js

@@ -19,7 +19,7 @@ export function logout() {
   })
 }
 
-export function getInfo(token) {
+export function getUserInfo(token) {
   return fetch({
     url: '/user/info',
     method: 'get',

src/mock/index.js

@@ -11,7 +11,7 @@ Mock.setup({
 // 登录相关
 Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
 Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
-Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getInfo)
+Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getUserInfo)
 
 // 文章相关
 Mock.mock(/\/article\/list/, 'get', articleAPI.getList)

src/mock/login.js

@@ -29,7 +29,7 @@ export default {
     const { username } = JSON.parse(config.body)
     return userMap[username]
   },
-  getInfo: config => {
+  getUserInfo: config => {
     const { token } = param2Obj(config.url)
     if (userMap[token]) {
       return userMap[token]

src/permission.js

@@ -20,7 +20,7 @@ router.beforeEach((to, from, next) => {
       next({ path: '/' })
     } else {
       if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(res => { // 拉取user_info
+        store.dispatch('GetUserInfo').then(res => { // 拉取user_info
           const roles = res.data.role
           store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表

src/store/modules/app.js

@@ -5,8 +5,6 @@ const app = {
     sidebar: {
       opened: !+Cookies.get('sidebarStatus')
     },
-    theme: 'default',
-    livenewsChannels: Cookies.get('livenewsChannels') || '[]',
     visitedViews: []
   },
   mutations: {

src/store/modules/user.js

@@ -1,4 +1,4 @@
-import { loginByUsername, logout, getInfo } from 'api/login'
+import { loginByUsername, logout, getUserInfo } from 'api/login'
 import { getToken, setToken, removeToken } from 'utils/auth'
 
 const user = {
@@ -60,9 +60,9 @@ const user = {
     },
 
     // 获取用户信息
-    GetInfo({ commit, state }) {
+    GetUserInfo({ commit, state }) {
       return new Promise((resolve, reject) => {
-        getInfo(state.token).then(response => {
+        getUserInfo(state.token).then(response => {
           const data = response.data
           commit('SET_ROLES', data.role)
           commit('SET_NAME', data.name)
@@ -117,7 +117,7 @@ const user = {
       return new Promise(resolve => {
         commit('SET_TOKEN', role)
         setToken(role)
-        getInfo(role).then(response => {
+        getUserInfo(role).then(response => {
           const data = response.data
           commit('SET_ROLES', data.role)
           commit('SET_NAME', data.name)

src/styles/btn.scss

@@ -5,29 +5,27 @@ $pink: #E65D6E;
 $green: #30B08F;
 $tiffany: #4AB7BD;
 $yellow:#FEC171;
-
 $panGreen: #30B08F;
 
 @mixin colorBtn($color) {
   background: $color;
   &:hover {
     color: $color;
-    &:before, &:after {
+    &:before,
+    &:after {
       background: $color;
     }
   }
 }
 
-
 .blue-btn {
   @include colorBtn($blue)
 }
 
-.light-blue-btn{
+.light-blue-btn {
   @include colorBtn($light-blue)
 }
 
-
 .red-btn {
   @include colorBtn($red)
 }
@@ -40,12 +38,10 @@ $panGreen: #30B08F;
   @include colorBtn($green)
 }
 
-
 .tiffany-btn {
   @include colorBtn($tiffany)
 }
 
-
 .yellow-btn {
   @include colorBtn($yellow)
 }
@@ -63,12 +59,14 @@ $panGreen: #30B08F;
   display: inline-block;
   &:hover {
     background: #fff;
-    &:before, &:after {
+    &:before,
+    &:after {
       width: 100%;
       transition: 600ms ease all;
     }
   }
-  &:before, &:after {
+  &:before,
+  &:after {
     content: '';
     position: absolute;
     top: 0;
@@ -85,19 +83,20 @@ $panGreen: #30B08F;
   }
 }
 
-.custom-button{
-    display: inline-block;
-    line-height: 1;
-    white-space: nowrap;
-    cursor: pointer;
-    background: #fff;
-    color: #fff;
-    -webkit-appearance: none;
-    text-align: center;
-    box-sizing: border-box;
-    outline: 0;
-    margin: 0;
-    padding: 10px 15px;
-    font-size: 14px;
-    border-radius: 4px;
+.custom-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #fff;
+  color: #fff;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  padding: 10px 15px;
+  font-size: 14px;
+  border-radius: 4px;
 }
+

src/styles/index.scss

@@ -2,7 +2,6 @@
 @import './btn.scss';
 @import './element-ui.scss';
 @import './sidebar.scss';
-
 body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -98,15 +97,16 @@ code {
   opacity: 0;
 }
 
-
 //main-container全局样式
 .app-container {
   padding: 20px;
 }
+
 .components-container {
   margin: 30px 50px;
   position: relative;
 }
+
 .pagination-container {
   margin-top: 30px;
 }
@@ -115,9 +115,10 @@ code {
   height: 100%!important;
 }
 
-.text-center{
+.text-center {
   text-align: center
 }
+
 .svg-icon {
   width: 1em;
   height: 1em;
@@ -216,7 +217,6 @@ code {
   }
 }
 
-
 //refine vue-multiselect plugin
 .multiselect {
   line-height: 16px;
@@ -227,8 +227,9 @@ code {
 }
 
 //refine simplemde
-.simplemde-container{
-  .editor-toolbar.fullscreen,.CodeMirror-fullscreen{
+.simplemde-container {
+  .editor-toolbar.fullscreen,
+  .CodeMirror-fullscreen {
     z-index: 1003;
   }
 }

src/utils/fetch.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import { Message } from 'element-ui'
-import store from '../store'
-import { getToken } from 'utils/auth'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
 
 // 创建axios实例
 const service = axios.create({