blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-06 03:49:22 +08:00
Code Issues Projects Releases Wiki Activity

chore: rename some layout components; 🐶

Browse Source
This commit is contained in:
iczer 2020-06-29 19:17:51 +08:00
parent 2eafdef2f9
commit fc0101f4e3
16 changed files with 286 additions and 509 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/menu/SiderMenu.vue → src/components/menu/SideMenu.vue
View File

@ -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;

4
src/components/setting/Setting.vue
View File

@ -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;

3
src/components/tool/Drawer.vue
View File

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

34
src/layouts/GlobalLayout.vue → src/layouts/AdminLayout.vue
View File

@ -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;
}

2
src/layouts/RouteView.vue → src/layouts/BlankView.vue
View File

@ -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'])

37
src/layouts/CommonLayout.vue Normal file
View File

@ -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>

14
src/layouts/MenuView.vue → src/layouts/TabsView.vue
View File

@ -1,5 +1,5 @@
<template>
<global-layout>
<admin-layout>
<contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
<a-tabs
@contextmenu.native="e => onContextmenu(e)"
@ -14,7 +14,7 @@
<span slot="tab" :pagekey="page.fullPath">{{page.name}}</span>
</a-tab-pane>
</a-tabs>
<div class="menu-view-content">
<div class="tabs-view-content">
<page-toggle-transition :animate="animate.name" :direction="animate.direction">
<keep-alive v-if="multiPage">
<router-view />
@ -22,18 +22,18 @@
<router-view v-else />
</page-toggle-transition>
</div>
</global-layout>
</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>

2
src/layouts/GlobalFooter.vue → src/layouts/footer/PageFooter.vue
View File

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

20
src/layouts/GlobalHeader.vue → src/layouts/header/AdminHeader.vue
View File

@ -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{

0
src/layouts/HeaderNotice.vue → src/layouts/header/HeaderNotice.vue
View File

0
src/layouts/HeaderSearch.vue → src/layouts/header/HeaderSearch.vue
View File

0
src/layouts/HeaderlAvatar.vue → src/layouts/header/HeaderlAvatar.vue
View File

2
src/main.js
View File

@ -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'

32
src/pages/login/Login.vue
View File

@ -1,6 +1,5 @@
<template>
<div class="container">
<div class="content">
<common-layout>
<div class="top">
<div class="header">
<img alt="logo" class="logo" src="@/assets/img/logo.png" />
@ -66,17 +65,15 @@
</div>
</a-form>
</div>
</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,19 +114,7 @@ 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;
}
.common-layout{
.top {
text-align: center;
.header {
@ -190,5 +169,4 @@ export default {
}
}
}
}
</style>

179
src/router/index.js
View File

@ -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: '表单页',
component: PageView,
meta: {
icon: 'form',
},
component: PageView,
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: '结果页',
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: '异常页',
meta: {
icon: 'warning',
component: RouteView,
},
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')
}
]
}

204
src/router/lazy.js
View File

@ -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')
}
]
}
]
}
]
})