caoliancun
/
vue-antd-admin-skeleton
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: optimize the code of system layout; 🌟

Browse Source
master
chenghongxing 5 years ago
parent fd3c79493f
commit b78cf5c6e1
9 changed files with 233 additions and 224 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/layouts/PageLayout.vue
  2. 2
      src/layouts/tabs/TabsView.vue
  3. 5
      src/pages/exception/403.vue
  4. 8
      src/pages/exception/404.vue
  5. 5
      src/pages/exception/500.vue
  6. 215
      src/router/config.js
  7. 202
      src/router/index.js
  8. 10
      src/store/index.js
  9. 4
      src/store/modules/index.js

6
src/layouts/PageLayout.vue
Unescape View File

@ -1,6 +1,6 @@
<template>
<div class="page-layout">
<page-header :breadcrumb="breadcrumb" :title="pageTitle" :logo="logo" :avatar="avatar">
<page-header :style="`margin-top: ${multiPage ? 0 : -24}px`" :breadcrumb="breadcrumb" :title="pageTitle" :logo="logo" :avatar="avatar">
<slot name="action" slot="action"></slot>
<slot slot="content" name="headerContent"></slot>
<div slot="content" v-if="!this.$slots.headerContent && desc">
@ -40,7 +40,7 @@ export default {
this.page = this.$route.meta.page
},
computed: {
...mapState('setting', ['layout']),
...mapState('setting', ['layout', 'multiPage']),
pageTitle() {
let pageTitle = this.page && this.page.title
return this.title || this.$t(pageTitle) || this.routeName
@ -79,7 +79,7 @@ export default {
<style lang="less">
.page-header{
margin: -24px -24px 0;
margin: 0 -24px 0;
}
.link{
/*margin-top: 16px;*/

2
src/layouts/tabs/TabsView.vue
Unescape View File

@ -15,7 +15,7 @@
<span slot="tab" :pagekey="page.fullPath">{{pageName(page.path)}}</span>
</a-tab-pane>
</a-tabs>
<div class="tabs-view-content">
<div class="tabs-view-content" :style="`margin-top: ${multiPage ? -24 : 0}px`">
<page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
<keep-alive :exclude="dustbins" v-if="multiPage">
<router-view />

5
src/pages/exception/403.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<exception-page :style="`margin-top: ${marginTop}px; min-height: ${minHeight}px`" type="403" />
<exception-page :style="`min-height: ${minHeight}px`" type="403" />
</template>
<script>
@ -11,9 +11,6 @@ export default {
inject: ['layoutMinHeight'],
computed: {
...mapState('setting', ['multiPage']),
marginTop() {
return this.multiPage ? -24 : 0
},
minHeight() {
return this.multiPage ? this.layoutMinHeight - 32 : this.layoutMinHeight
}

8
src/pages/exception/404.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<exception-page :style="`margin-top: ${marginTop}px; min-height: ${minHeight}px`" type="404" />
<exception-page :style="`min-height: ${minHeight}px`" type="404" />
</template>
<script>
@ -11,11 +11,9 @@ export default {
inject: ['layoutMinHeight'],
computed: {
...mapState('setting', ['multiPage']),
marginTop() {
return this.multiPage ? -24 : 0
},
minHeight() {
return this.multiPage ? this.layoutMinHeight - 32 : this.layoutMinHeight
let layoutMinHeight = this.layoutMinHeight || window.innerHeight
return this.multiPage ? layoutMinHeight - 32 : layoutMinHeight
}
}
}

5
src/pages/exception/500.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<exception-page :style="`margin-top: ${marginTop}px; min-height: ${minHeight}px`" type="500" />
<exception-page :style="`min-height: ${minHeight}px`" type="500" />
</template>
<script>
@ -11,9 +11,6 @@ export default {
inject: ['layoutMinHeight'],
computed: {
...mapState('setting', ['multiPage']),
marginTop() {
return this.multiPage ? -24 : 0
},
minHeight() {
return this.multiPage ? this.layoutMinHeight - 24 : this.layoutMinHeight
}

215
src/router/config.js
Unescape View File

@ -0,0 +1,215 @@
import Login from '@/pages/login/Login'
import TabsView from '@/layouts/tabs/TabsView'
import BlankView from '@/layouts/BlankView'
import PageView from '@/layouts/PageView'
const options = {
routes: [
{
path: '/login',
name: '登录页',
component: Login
},
{
path: '/',
name: '首页',
component: TabsView,
redirect: '/login',
children: [
{
path: 'dashboard',
name: 'Dashboard',
meta: {
icon: 'dashboard'
},
component: BlankView,
children: [
{
path: 'workplace',
name: '工作台',
component: () => import('@/pages/dashboard/workplace/WorkPlace'),
},
{
path: 'analysis',
name: '分析页',
component: () => import('@/pages/dashboard/analysis/Analysis'),
}
]
},
{
path: 'form',
name: '表单页',
meta: {
icon: 'form',
},
component: PageView,
children: [
{
path: 'basic',
name: '基础表单',
component: () => import('@/pages/form/basic/BasicForm'),
},
{
path: 'step',
name: '分步表单',
component: () => import('@/pages/form/step/StepForm'),
},
{
path: 'advance',
name: '高级表单',
component: () => import('@/pages/form/advance/AdvancedForm'),
}
]
},
{
path: 'list',
name: '列表页',
meta: {
icon: 'table'
},
component: PageView,
children: [
{
path: 'query',
name: '查询表格',
component: () => import('@/pages/list/QueryList'),
},
{
path: 'primary',
name: '标准列表',
component: () => import('@/pages/list/StandardList'),
},
{
path: 'card',
name: '卡片列表',
component: () => import('@/pages/list/CardList'),
},
{
path: 'search',
name: '搜索列表',
component: () => import('@/pages/list/search/SearchLayout'),
children: [
{
path: 'article',
name: '文章',
component: () => import('@/pages/list/search/ArticleList'),
},
{
path: 'application',
name: '应用',
component: () => import('@/pages/list/search/ApplicationList'),
},
{
path: 'project',
name: '项目',
component: () => import('@/pages/list/search/ProjectList'),
}
]
}
]
},
{
path: 'details',
name: '详情页',
meta: {
icon: 'profile'
},
component: BlankView,
children: [
{
path: 'basic',
name: '基础详情页',
component: () => import('@/pages/detail/BasicDetail')
},
{
path: 'advance',
name: '高级详情页',
component: () => import('@/pages/detail/AdvancedDetail')
}
]
},
{
path: 'result',
name: '结果页',
meta: {
icon: 'check-circle-o',
},
component: PageView,
children: [
{
path: 'success',
name: '成功',
component: () => import('@/pages/result/Success')
},
{
path: 'error',
name: '失败',
component: () => import('@/pages/result/Error')
}
]
},
{
path: 'exception',
name: '异常页',
meta: {
icon: 'warning',
},
component: BlankView,
children: [
{
path: '404',
name: '404',
component: () => import('@/pages/exception/404')
},
{
path: '403',
name: '403',
component: () => import('@/pages/exception/403')
},
{
path: '500',
name: '500',
component: () => import('@/pages/exception/500')
}
]
},
{
path: 'components',
name: '小组件',
meta: {
icon: 'appstore-o'
},
component: PageView,
children: [
{
path: 'taskCard',
name: '任务卡片',
component: () => import('@/pages/components/TaskCard')
},
{
path: 'palette',
name: '颜色复选框',
component: () => import('@/pages/components/Palette')
}
]
}
]
}
]
}
// 不需要登录拦截的路由配置
const loginIgnore = {
names: ['404'], //根据路由名称匹配
paths: ['/login'], //根据路由fullPath匹配
/**
* 判断路由是否包含在该配置中
* @param route vue-router 的 route 对象
* @returns {boolean}
*/
includes(route) {
return this.names.includes(route.name) || this.paths.includes(route.path)
}
}
export {options, loginIgnore}

202
src/router/index.js
Unescape View File

@ -1,211 +1,15 @@
import Vue from 'vue'
import {checkAuthorization} from '@/utils/request'
import Router from 'vue-router'
import PageView from '@/layouts/PageView'
import BlankView from '@/layouts/BlankView'
import TabsView from '@/layouts/tabs/TabsView'
import Login from '@/pages/login/Login'
import {options, loginIgnore} from './config'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/login',
name: '登录页',
component: Login
},
{
path: '/',
name: '首页',
component: TabsView,
redirect: '/login',
children: [
{
path: 'dashboard',
name: 'Dashboard',
meta: {
icon: 'dashboard'
},
component: BlankView,
children: [
{
path: 'workplace',
name: '工作台',
component: () => import('@/pages/dashboard/workplace/WorkPlace'),
},
{
path: 'analysis',
name: '分析页',
component: () => import('@/pages/dashboard/analysis/Analysis'),
}
]
},
{
path: 'form',
name: '表单页',
meta: {
icon: 'form',
},
component: PageView,
children: [
{
path: 'basic',
name: '基础表单',
component: () => import('@/pages/form/basic/BasicForm'),
},
{
path: 'step',
name: '分步表单',
component: () => import('@/pages/form/step/StepForm'),
},
{
path: 'advance',
name: '高级表单',
component: () => import('@/pages/form/advance/AdvancedForm'),
}
]
},
{
path: 'list',
name: '列表页',
meta: {
icon: 'table'
},
component: PageView,
children: [
{
path: 'query',
name: '查询表格',
component: () => import('@/pages/list/QueryList'),
},
{
path: 'primary',
name: '标准列表',
component: () => import('@/pages/list/StandardList'),
},
{
path: 'card',
name: '卡片列表',
component: () => import('@/pages/list/CardList'),
},
{
path: 'search',
name: '搜索列表',
component: () => import('@/pages/list/search/SearchLayout'),
children: [
{
path: 'article',
name: '文章',
component: () => import('@/pages/list/search/ArticleList'),
},
{
path: 'application',
name: '应用',
component: () => import('@/pages/list/search/ApplicationList'),
},
{
path: 'project',
name: '项目',
component: () => import('@/pages/list/search/ProjectList'),
}
]
}
]
},
{
path: 'details',
name: '详情页',
meta: {
icon: 'profile'
},
component: BlankView,
children: [
{
path: 'basic',
name: '基础详情页',
component: () => import('@/pages/detail/BasicDetail')
},
{
path: 'advance',
name: '高级详情页',
component: () => import('@/pages/detail/AdvancedDetail')
}
]
},
{
path: 'result',
name: '结果页',
meta: {
icon: 'check-circle-o',
},
component: PageView,
children: [
{
path: 'success',
name: '成功',
component: () => import('@/pages/result/Success')
},
{
path: 'error',
name: '失败',
component: () => import('@/pages/result/Error')
}
]
},
{
path: 'exception',
name: '异常页',
meta: {
icon: 'warning',
},
component: BlankView,
children: [
{
path: '404',
name: '404',
component: () => import('@/pages/exception/404')
},
{
path: '403',
name: '403',
component: () => import('@/pages/exception/403')
},
{
path: '500',
name: '500',
component: () => import('@/pages/exception/500')
}
]
},
{
path: 'components',
name: '小组件',
meta: {
icon: 'appstore-o'
},
component: PageView,
children: [
{
path: 'taskCard',
name: '任务卡片',
component: () => import('@/pages/components/TaskCard')
},
{
path: 'palette',
name: '颜色复选框',
component: () => import('@/pages/components/Palette')
}
]
}
]
}
]
})
const router = new Router(options)
// 登录拦截
router.beforeEach((to, from, next) => {
if (to.path !== '/login' && !checkAuthorization()) {
if (!loginIgnore.includes(to) && !checkAuthorization()) {
next({path: '/login'})
} else {
next()

10
src/store/index.js
Unescape View File

@ -1,19 +1,13 @@
import Vue from 'vue'
import Vuex from 'vuex'
import account from './modules/account'
import setting from './modules/setting'
import modules from './modules'
import PouchDB from 'pouchdb'
const db = new PouchDB('adminDb')
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
account,
setting
}
})
const store = new Vuex.Store({modules})
// 读取用户信息
db.get('currUser')
.then(doc => store.commit('account/setUser', doc.user))

4
src/store/modules/index.js
Unescape View File

@ -0,0 +1,4 @@
import account from './account'
import setting from './setting'
export default {account, setting}
Write Preview
Loading…
Cancel
Save