chore: rename some layout components; 🐶

master
iczer 5 years ago
parent 2eafdef2f9
commit fc0101f4e3
  1. 6
      src/components/menu/SideMenu.vue
  2. 4
      src/components/setting/Setting.vue
  3. 3
      src/components/tool/Drawer.vue
  4. 34
      src/layouts/AdminLayout.vue
  5. 2
      src/layouts/BlankView.vue
  6. 37
      src/layouts/CommonLayout.vue
  7. 56
      src/layouts/TabsView.vue
  8. 2
      src/layouts/footer/PageFooter.vue
  9. 20
      src/layouts/header/AdminHeader.vue
  10. 0
      src/layouts/header/HeaderNotice.vue
  11. 0
      src/layouts/header/HeaderSearch.vue
  12. 0
      src/layouts/header/HeaderlAvatar.vue
  13. 2
      src/main.js
  14. 242
      src/pages/login/Login.vue
  15. 183
      src/router/index.js
  16. 204
      src/router/lazy.js

@ -1,5 +1,5 @@
<template>
<a-layout-sider :class="[theme, 'sider', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
<a-layout-sider :class="[theme, 'side', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
<div :class="['logo', theme]">
<router-link to="/dashboard/workplace">
<img src="@/assets/img/logo.png">
@ -14,7 +14,7 @@
import IMenu from './menu'
import {mapState, mapMutations} from 'vuex'
export default {
name: 'SiderMenu',
name: 'SideMenu',
components: {IMenu},
inject: ['menuI18n'],
props: {
@ -54,7 +54,7 @@ export default {
.shadow{
box-shadow: 2px 0 6px rgba(0,21,41,.35);
}
.sider{
.side{
z-index: 10;
&.light{
background-color: #fff;

@ -1,5 +1,5 @@
<template>
<a-layout-sider class="sider" width="300">
<a-layout-sider class="side" width="300">
<setting-item :title="$t('theme.title')">
<img-checkbox-group @change="values => setTheme(values[0])">
<img-checkbox :title="$t('theme.dark')" img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" value="dark"/>
@ -139,7 +139,7 @@ export default {
</script>
<style lang="less" scoped>
.sider{
.side{
background-color: #fff;
height: 100%;
padding: 24px;

@ -116,9 +116,6 @@ export default {
transform: translateX(100%);
}
}
.sider{
height: 100%;
}
}
.content{
display: inline-block;

@ -1,35 +1,35 @@
<template>
<a-layout :class="['global-layout', fixedSideBar ? 'fixed-side-bar' : '']">
<a-layout :class="['admin-layout', fixedSideBar ? 'fixed-side-bar' : '']">
<drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
<sider-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
<side-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
</drawer>
<sider-menu :theme="theme" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
<side-menu :theme="theme" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
<drawer :open-drawer="showSetting" placement="right" @change="onSettingDrawerChange">
<div class="setting" slot="handler">
<a-icon :type="showSetting ? 'close' : 'setting'"/>
</div>
<setting />
</drawer>
<a-layout class="global-layout-main beauty-scroll">
<global-header :style="headerStyle" :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
<a-layout class="admin-layout-main beauty-scroll">
<admin-header :style="headerStyle" :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
<a-layout-header v-if="fixedHeader"></a-layout-header>
<a-layout-content class="global-layout-content">
<a-layout-content class="admin-layout-content">
<div :style="`min-height: ${minHeight}px; position: relative`">
<slot></slot>
</div>
</a-layout-content>
<a-layout-footer style="padding: 0px">
<global-footer :link-list="footerLinks" :copyright="copyright" />
<page-footer :link-list="footerLinks" :copyright="copyright" />
</a-layout-footer>
</a-layout>
</a-layout>
</template>
<script>
import GlobalHeader from './GlobalHeader'
import GlobalFooter from './GlobalFooter'
import AdminHeader from './header/AdminHeader'
import PageFooter from './footer/PageFooter'
import Drawer from '../components/tool/Drawer'
import SiderMenu from '../components/menu/SiderMenu'
import SideMenu from '../components/menu/SideMenu'
import Setting from '../components/setting/Setting'
import {mapState} from 'vuex'
@ -38,8 +38,8 @@ const minHeight = window.innerHeight - 64 - 24 - 122
let menuData = []
export default {
name: 'GlobalLayout',
components: {Setting, SiderMenu, Drawer, GlobalFooter, GlobalHeader},
name: 'AdminLayout',
components: {Setting, SideMenu, Drawer, PageFooter, AdminHeader},
data () {
return {
minHeight: minHeight,
@ -87,20 +87,20 @@ export default {
</script>
<style lang="less" scoped>
.global-layout{
.admin-layout{
&.fixed-side-bar{
height: 100vh;
.global-layout-main{
.admin-layout-main{
overflow: scroll;
}
}
.global-layout-main{
.global-header{
.admin-layout-main{
.admin-header{
top: 0;
right: 0;
}
}
.global-layout-content{
.admin-layout-content{
padding: 24px 24px 0;
min-height: auto;
}

@ -12,7 +12,7 @@ import PageToggleTransition from '../components/transition/PageToggleTransition'
import {mapState} from 'vuex'
export default {
name: 'RouteView',
name: 'BlankView',
components: {PageToggleTransition},
computed: {
...mapState('setting', ['multiPage', 'animate'])

@ -0,0 +1,37 @@
<template>
<div class="common-layout">
<div class="content"><slot></slot></div>
<page-footer :link-list="footerLinks" :copyright="copyright"></page-footer>
</div>
</template>
<script>
import PageFooter from '@/layouts/footer/PageFooter'
import {mapState} from 'vuex'
export default {
name: 'CommonLayout',
components: {PageFooter},
computed: {
...mapState('setting', ['footerLinks', 'copyright'])
}
}
</script>
<style scoped lang="less">
.common-layout{
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
background: #f0f2f5 url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg') no-repeat center 110px;
background-size: 100%;
.content{
padding: 32px 0;
flex: 1;
@media (min-width: 768px){
padding: 112px 0 24px;
}
}
}
</style>

@ -1,39 +1,39 @@
<template>
<global-layout>
<contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
<a-tabs
@contextmenu.native="e => onContextmenu(e)"
v-if="multiPage"
:active-key="activePage"
:style="`margin: -16px auto 8px; ${layout == 'head' ? 'max-width: 1400px;' : ''}`"
:hide-add="true"
type="editable-card"
@change="changePage"
@edit="editPage">
<a-tab-pane :key="page.fullPath" v-for="page in pageList">
<span slot="tab" :pagekey="page.fullPath">{{page.name}}</span>
</a-tab-pane>
</a-tabs>
<div class="menu-view-content">
<page-toggle-transition :animate="animate.name" :direction="animate.direction">
<keep-alive v-if="multiPage">
<router-view />
</keep-alive>
<router-view v-else />
</page-toggle-transition>
</div>
</global-layout>
<admin-layout>
<contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
<a-tabs
@contextmenu.native="e => onContextmenu(e)"
v-if="multiPage"
:active-key="activePage"
:style="`margin: -16px auto 8px; ${layout == 'head' ? 'max-width: 1400px;' : ''}`"
:hide-add="true"
type="editable-card"
@change="changePage"
@edit="editPage">
<a-tab-pane :key="page.fullPath" v-for="page in pageList">
<span slot="tab" :pagekey="page.fullPath">{{page.name}}</span>
</a-tab-pane>
</a-tabs>
<div class="tabs-view-content">
<page-toggle-transition :animate="animate.name" :direction="animate.direction">
<keep-alive v-if="multiPage">
<router-view />
</keep-alive>
<router-view v-else />
</page-toggle-transition>
</div>
</admin-layout>
</template>
<script>
import GlobalLayout from './GlobalLayout'
import AdminLayout from './AdminLayout'
import Contextmenu from '../components/menu/Contextmenu'
import PageToggleTransition from '../components/transition/PageToggleTransition'
import {mapState} from 'vuex'
export default {
name: 'MenuView',
components: {PageToggleTransition, Contextmenu, GlobalLayout},
name: 'TabsView',
components: {PageToggleTransition, Contextmenu, AdminLayout},
data () {
return {
pageList: [],
@ -165,7 +165,7 @@ export default {
</script>
<style scoped lang="less">
.menu-view-content{
.tabs-view-content{
position: relative;
}
</style>

@ -13,7 +13,7 @@
<script>
export default {
name: 'GlobalFooter',
name: 'PageFooter',
props: ['copyright', 'linkList']
}
</script>

@ -1,16 +1,16 @@
<template>
<a-layout-header :class="[headerTheme, 'global-header']">
<div :class="['global-header-wide', layout]">
<a-layout-header :class="[headerTheme, 'admin-header']">
<div :class="['admin-header-wide', layout]">
<router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', headerTheme]">
<img width="32" src="@/assets/img/logo.png" />
<h1 v-if="!isMobile">{{systemName}}</h1>
</router-link>
<a-divider v-if="isMobile" type="vertical" />
<a-icon v-if="layout === 'side'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
<div v-if="layout == 'head' && !isMobile" class="global-header-menu">
<div v-if="layout == 'head' && !isMobile" class="admin-header-menu">
<i-menu style="height: 64px; line-height: 64px;" @i18nComplete="setRoutesI18n" :i18n="menuI18n" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
</div>
<div :class="['global-header-right', headerTheme]">
<div :class="['admin-header-right', headerTheme]">
<header-search class="header-item" />
<a-tooltip class="header-item" title="帮助文档" placement="bottom" >
<a>
@ -36,11 +36,11 @@
import HeaderSearch from './HeaderSearch'
import HeaderNotice from './HeaderNotice'
import HeaderAvatar from './HeaderlAvatar'
import IMenu from '../components/menu/menu'
import IMenu from '@/components/menu/menu'
import {mapState, mapMutations} from 'vuex'
export default {
name: 'GlobalHeader',
name: 'AdminHeader',
components: {IMenu, HeaderAvatar, HeaderNotice, HeaderSearch},
props: ['collapsed', 'menuData'],
inject: ['menuI18n'],
@ -86,7 +86,7 @@ export default {
color: #1890ff;
}
}
.global-header{
.admin-header{
padding: 0;
-webkit-box-shadow: 0 1px 4px rgba(0,21,41,.08);
box-shadow: 0 1px 4px rgba(0,21,41,.08);
@ -101,7 +101,7 @@ export default {
color: white;
}
}
.global-header-wide{
.admin-header-wide{
&.head{
max-width: 1400px;
margin: auto;
@ -132,10 +132,10 @@ export default {
color: #fff;
}
}
.global-header-menu{
.admin-header-menu{
display: inline-block;
}
.global-header-right{
.admin-header-right{
float: right;
display: flex;
&.dark{

@ -1,6 +1,6 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router/lazy'
import router from './router'
import './theme/index.less'
import Antd from 'ant-design-vue'
import Viser from 'viser-vue'

@ -1,82 +1,79 @@
<template>
<div class="container">
<div class="content">
<div class="top">
<div class="header">
<img alt="logo" class="logo" src="@/assets/img/logo.png" />
<span class="title">{{systemName}}</span>
</div>
<div class="desc">Ant Design 是西湖区最具影响力的 Web 设计规范</div>
<common-layout>
<div class="top">
<div class="header">
<img alt="logo" class="logo" src="@/assets/img/logo.png" />
<span class="title">{{systemName}}</span>
</div>
<div class="login">
<a-form @submit="onSubmit" :autoFormCreate="(form) => this.form = form">
<a-tabs size="large" :tabBarStyle="{textAlign: 'center'}" style="padding: 0 2px;">
<a-tab-pane tab="账户密码登录" key="1">
<a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;" />
<a-form-item
fieldDecoratorId="name"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入账户名', whitespace: true}]}"
>
<a-input size="large" placeholder="admin" >
<a-icon slot="prefix" type="user" />
</a-input>
</a-form-item>
<a-form-item
fieldDecoratorId="password"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入密码', whitespace: true}]}"
>
<a-input size="large" placeholder="888888" type="password">
<a-icon slot="prefix" type="lock" />
</a-input>
</a-form-item>
</a-tab-pane>
<a-tab-pane tab="手机号登录" key="2">
<a-form-item>
<a-input size="large" placeholder="mobile number" >
<a-icon slot="prefix" type="mobile" />
</a-input>
</a-form-item>
<a-form-item>
<a-row :gutter="8" style="margin: 0 -4px">
<a-col :span="16">
<a-input size="large" placeholder="captcha">
<div class="desc">Ant Design 是西湖区最具影响力的 Web 设计规范</div>
</div>
<div class="login">
<a-form @submit="onSubmit" :autoFormCreate="(form) => this.form = form">
<a-tabs size="large" :tabBarStyle="{textAlign: 'center'}" style="padding: 0 2px;">
<a-tab-pane tab="账户密码登录" key="1">
<a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;" />
<a-form-item
fieldDecoratorId="name"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入账户名', whitespace: true}]}"
>
<a-input size="large" placeholder="admin" >
<a-icon slot="prefix" type="user" />
</a-input>
</a-form-item>
<a-form-item
fieldDecoratorId="password"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入密码', whitespace: true}]}"
>
<a-input size="large" placeholder="888888" type="password">
<a-icon slot="prefix" type="lock" />
</a-input>
</a-form-item>
</a-tab-pane>
<a-tab-pane tab="手机号登录" key="2">
<a-form-item>
<a-input size="large" placeholder="mobile number" >
<a-icon slot="prefix" type="mobile" />
</a-input>
</a-form-item>
<a-form-item>
<a-row :gutter="8" style="margin: 0 -4px">
<a-col :span="16">
<a-input size="large" placeholder="captcha">
<a-icon slot="prefix" type="mail" />
</a-input>
</a-col>
<a-col :span="8" style="padding-left: 4px">
<a-button style="width: 100%" class="captcha-button" size="large">获取验证码</a-button>
</a-col>
</a-row>
</a-form-item>
</a-tab-pane>
</a-tabs>
<div>
<a-checkbox :checked="true" >自动登录</a-checkbox>
<a style="float: right">忘记密码</a>
</div>
<a-form-item>
<a-button :loading="logging" style="width: 100%;margin-top: 24px" size="large" htmlType="submit" type="primary">登录</a-button>
</a-form-item>
<div>
其他登录方式
<a-icon class="icon" type="alipay-circle" />
<a-icon class="icon" type="taobao-circle" />
<a-icon class="icon" type="weibo-circle" />
<router-link style="float: right" to="/dashboard/workplace" >注册账户</router-link>
</div>
</a-form>
</div>
</a-col>
<a-col :span="8" style="padding-left: 4px">
<a-button style="width: 100%" class="captcha-button" size="large">获取验证码</a-button>
</a-col>
</a-row>
</a-form-item>
</a-tab-pane>
</a-tabs>
<div>
<a-checkbox :checked="true" >自动登录</a-checkbox>
<a style="float: right">忘记密码</a>
</div>
<a-form-item>
<a-button :loading="logging" style="width: 100%;margin-top: 24px" size="large" htmlType="submit" type="primary">登录</a-button>
</a-form-item>
<div>
其他登录方式
<a-icon class="icon" type="alipay-circle" />
<a-icon class="icon" type="taobao-circle" />
<a-icon class="icon" type="weibo-circle" />
<router-link style="float: right" to="/dashboard/workplace" >注册账户</router-link>
</div>
</a-form>
</div>
<global-footer :link-list="linkList" :copyright="copyright" />
</div>
</common-layout>
</template>
<script>
import GlobalFooter from '../../layouts/GlobalFooter'
import CommonLayout from '@/layouts/CommonLayout'
export default {
name: 'Login',
components: {GlobalFooter},
components: {CommonLayout},
data () {
return {
logging: false,
@ -86,12 +83,6 @@ export default {
computed: {
systemName () {
return this.$store.state.setting.systemName
},
linkList () {
return this.$store.state.setting.footerLinks
},
copyright () {
return this.$store.state.setting.copyright
}
},
methods: {
@ -123,70 +114,57 @@ export default {
</script>
<style lang="less" scoped>
.container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
background: #f0f2f5 url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg') no-repeat center 110px;
background-size: 100%;
.content {
padding: 32px 0;
flex: 1;
@media (min-width: 768px){
padding: 112px 0 24px;
}
.top {
text-align: center;
.header {
.common-layout{
.top {
text-align: center;
.header {
height: 44px;
line-height: 44px;
a {
text-decoration: none;
}
.logo {
height: 44px;
line-height: 44px;
a {
text-decoration: none;
}
.logo {
height: 44px;
vertical-align: top;
margin-right: 16px;
}
.title {
font-size: 33px;
color: rgba(0,0,0,.85);
font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: 600;
position: relative;
top: 2px;
}
vertical-align: top;
margin-right: 16px;
}
.desc {
font-size: 14px;
color: rgba(0,0,0,.45);
margin-top: 12px;
margin-bottom: 40px;
.title {
font-size: 33px;
color: rgba(0,0,0,.85);
font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: 600;
position: relative;
top: 2px;
}
}
.login{
width: 368px;
margin: 0 auto;
@media screen and (max-width: 576px) {
width: 95%;
}
@media screen and (max-width: 320px) {
.captcha-button{
font-size: 14px;
}
.desc {
font-size: 14px;
color: rgba(0,0,0,.45);
margin-top: 12px;
margin-bottom: 40px;
}
}
.login{
width: 368px;
margin: 0 auto;
@media screen and (max-width: 576px) {
width: 95%;
}
@media screen and (max-width: 320px) {
.captcha-button{
font-size: 14px;
}
.icon {
font-size: 24px;
color: rgba(0, 0, 0, 0.2);
margin-left: 16px;
vertical-align: middle;
cursor: pointer;
transition: color 0.3s;
}
.icon {
font-size: 24px;
color: rgba(0, 0, 0, 0.2);
margin-left: 16px;
vertical-align: middle;
cursor: pointer;
transition: color 0.3s;
&:hover {
color: #1890ff;
}
&:hover {
color: #1890ff;
}
}
}

@ -1,30 +1,9 @@
import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from '@/pages/dashboard/analysis/Analysis'
import NotFound from '@/pages/exception/404'
import NotPermit from '@/pages/exception/403'
import ServerError from '@/pages/exception/500'
import PageView from '@/layouts/PageView'
import RouteView from '@/layouts/RouteView'
import MenuView from '@/layouts/MenuView'
import BasicForm from '@/pages/form/basic/BasicForm'
import StepForm from '@/pages/form/step/StepForm'
import AdvancedForm from '@/pages/form/advance/AdvancedForm'
import Success from '@/pages/result/Success'
import Error from '@/pages/result/Error'
import QueryList from '@/pages/list/QueryList'
import StandardList from '@/pages/list/StandardList'
import CardList from '@/pages/list/CardList'
import SearchLayout from '@/pages/list/search/SearchLayout'
import ArticleList from '@/pages/list/search/ArticleList'
import ApplicationList from '@/pages/list/search/ApplicationList'
import ProjectList from '@/pages/list/search/ProjectList'
import WorkPlace from '@/pages/dashboard/workplace/WorkPlace'
import BlankView from '@/layouts/BlankView'
import TabsView from '@/layouts/TabsView'
import Login from '@/pages/login/Login'
import BasicDetail from '@/pages/detail/BasicDetail'
import AdvancedDetail from '@/pages/detail/AdvancedDetail'
import TaskCard from '@/pages/components/TaskCard'
import ColorBox from '@/pages/components/Palette'
Vue.use(Router)
@ -39,193 +18,183 @@ export default new Router({
{
path: '/',
name: '首页',
component: MenuView,
component: TabsView,
redirect: '/login',
icon: 'none',
invisible: true,
children: [
{
path: '/dashboard',
path: 'dashboard',
name: 'Dashboard',
component: RouteView,
icon: 'dashboard',
meta: {
icon: 'dashboard'
},
component: BlankView,
children: [
{
path: '/dashboard/workplace',
path: 'workplace',
name: '工作台',
component: WorkPlace,
icon: 'none'
component: () => import('@/pages/dashboard/workplace/WorkPlace'),
},
{
path: '/dashboard/analysis',
path: 'analysis',
name: '分析页',
component: Dashboard,
icon: 'none'
component: () => import('@/pages/dashboard/analysis/Analysis'),
}
]
},
{
path: '/form',
path: 'form',
name: '表单页',
meta: {
icon: 'form',
},
component: PageView,
icon: 'form',
children: [
{
path: '/form/basic',
path: 'basic',
name: '基础表单',
component: BasicForm,
icon: 'none'
component: () => import('@/pages/form/basic/BasicForm'),
},
{
path: '/form/step',
path: 'step',
name: '分步表单',
component: StepForm,
icon: 'none'
component: () => import('@/pages/form/step/StepForm'),
},
{
path: '/form/advanced',
path: 'advance',
name: '高级表单',
component: AdvancedForm,
icon: 'none'
component: () => import('@/pages/form/advance/AdvancedForm'),
}
]
},
{
path: '/list',
path: 'list',
name: '列表页',
meta: {
icon: 'table'
},
component: PageView,
icon: 'table',
children: [
{
path: '/list/query',
path: 'query',
name: '查询表格',
component: QueryList,
icon: 'none'
component: () => import('@/pages/list/QueryList'),
},
{
path: '/list/primary',
path: 'primary',
name: '标准列表',
component: StandardList,
icon: 'none'
component: () => import('@/pages/list/StandardList'),
},
{
path: '/list/card',
path: 'card',
name: '卡片列表',
component: CardList,
icon: 'none'
component: () => import('@/pages/list/CardList'),
},
{
path: '/list/search',
path: 'search',
name: '搜索列表',
component: SearchLayout,
icon: 'none',
component: () => import('@/pages/list/search/SearchLayout'),
children: [
{
path: '/list/search/article',
path: 'article',
name: '文章',
component: ArticleList,
icon: 'none'
component: () => import('@/pages/list/search/ArticleList'),
},
{
path: '/list/search/application',
path: 'application',
name: '应用',
component: ApplicationList,
icon: 'none'
component: () => import('@/pages/list/search/ApplicationList'),
},
{
path: '/list/search/project',
path: 'project',
name: '项目',
component: ProjectList,
icon: 'none'
component: () => import('@/pages/list/search/ProjectList'),
}
]
}
]
},
{
path: '/detail',
path: 'details',
name: '详情页',
icon: 'profile',
component: RouteView,
meta: {
icon: 'profile'
},
component: BlankView,
children: [
{
path: '/detail/basic',
path: 'basic',
name: '基础详情页',
icon: 'none',
component: BasicDetail
component: () => import('@/pages/detail/BasicDetail')
},
{
path: '/detail/advanced',
path: 'advance',
name: '高级详情页',
icon: 'none',
component: AdvancedDetail
component: () => import('@/pages/detail/AdvancedDetail')
}
]
},
{
path: '/result',
path: 'result',
name: '结果页',
icon: 'check-circle-o',
meta: {
icon: 'check-circle-o',
},
component: PageView,
children: [
{
path: '/result/success',
path: 'success',
name: '成功',
icon: 'none',
component: Success
component: () => import('@/pages/result/Success')
},
{
path: '/result/error',
path: 'error',
name: '失败',
icon: 'none',
component: Error
component: () => import('@/pages/result/Error')
}
]
},
{
path: '/exception',
path: 'exception',
name: '异常页',
icon: 'warning',
component: RouteView,
meta: {
icon: 'warning',
},
component: BlankView,
children: [
{
path: '/exception/404',
path: '404',
name: '404',
icon: 'none',
component: NotFound
component: () => import('@/pages/exception/404')
},
{
path: '/exception/403',
path: '403',
name: '403',
icon: 'none',
component: NotPermit
component: () => import('@/pages/exception/403')
},
{
path: '/exception/500',
path: '500',
name: '500',
icon: 'none',
component: ServerError
component: () => import('@/pages/exception/500')
}
]
},
{
path: '/pages',
redirect: '/pages/taskcard',
path: 'components',
name: '小组件',
icon: 'appstore-o',
meta: {
icon: 'appstore-o'
},
component: PageView,
children: [
{
path: '/pages/taskcard',
path: 'taskCard',
name: '任务卡片',
icon: 'none',
component: TaskCard
component: () => import('@/pages/components/TaskCard')
},
{
path: '/pages/palette',
path: 'palette',
name: '颜色复选框',
icon: 'none',
component: ColorBox
component: () => import('@/pages/components/Palette')
}
]
}

@ -1,204 +0,0 @@
import Vue from 'vue'
import Router from 'vue-router'
import PageView from '@/layouts/PageView'
import RouteView from '@/layouts/RouteView'
import MenuView from '@/layouts/MenuView'
import Login from '@/pages/login/Login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/login',
name: '登录页',
component: Login,
invisible: true
},
{
path: '/',
name: '首页',
component: MenuView,
redirect: '/login',
children: [
{
path: 'dashboard',
name: 'Dashboard',
meta: {
icon: 'dashboard'
},
component: RouteView,
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: RouteView,
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: RouteView,
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')
}
]
}
]
}
]
})
Loading…
Cancel
Save