github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-24 02:00:25 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

style: menu adjustment

Browse Source
This commit is contained in:
vben 2020-10-11 23:48:25 +08:00
parent 52ee35c4be
commit 949db9639f
14 changed files with 425 additions and 369 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Menu/src/BasicMenu.tsx
View File

@ -209,7 +209,7 @@ export default defineComponent({
: {};
return (
<Menu
// forceSubMenuRender={true}
forceSubMenuRender={props.isAppMenu}
selectedKeys={selectedKeys}
defaultSelectedKeys={defaultSelectedKeys}
mode={mode}

15
src/layouts/default/index.less
View File

@ -1,11 +1,12 @@
@import (reference) '../../design/index.less';
.ant-menu-submenu .ant-menu-sub {
transition: background 0.1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s,
padding 0.1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s !important;
}
.default-layout {
.ant-menu-submenu .ant-menu-sub {
transition: none !important;
// transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s,
// padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s !important;
}
&__content {
position: relative;
@ -363,8 +364,8 @@
align-items: center;
img {
width: @logo-width;
height: @logo-width;
width: 32px;
height: 32px;
margin-right: 24px;
}

6
src/router/menus/index.ts
View File

@ -17,6 +17,9 @@ import compDemo from './modules/demo/comp';
import permissionDemo from './modules/demo/permission';
import featDemo from './modules/demo/feat';
import chartsDemo from './modules/demo/charts';
import tableDemo from './modules/demo/table';
import formDemo from './modules/demo/form';
import treeDemo from './modules/demo/tree';
const menuModules = [
dashboardDemo,
@ -26,6 +29,9 @@ const menuModules = [
compDemo,
permissionDemo,
chartsDemo,
tableDemo,
formDemo,
treeDemo,
];
// ===========================

123
src/router/menus/modules/demo/comp.ts
View File

@ -9,128 +9,7 @@ const menu: MenuModule = {
path: '/basic',
name: '基础组件',
},
{
path: '/icon',
name: '图标',
},
{
path: '/click-out-side',
name: 'ClickOutSide组件',
},
{
path: '/table',
name: '表格组件',
children: [
{
path: '/basic',
name: '基础表格',
},
{
path: '/treeTable',
name: '树形表格',
},
{
path: '/fetchTable',
name: '远程加载',
},
{
path: '/fixedColumn',
name: '固定列',
},
{
path: '/customerCell',
name: '自定义列',
},
{
path: '/formTable',
name: '开启搜索区域',
},
{
path: '/useTable',
name: 'UseTable',
},
{
path: '/refTable',
name: 'RefTable',
},
{
path: '/multipleHeader',
name: '多级表头',
},
{
path: '/mergeHeader',
name: '合并单元格',
},
{
path: '/expandTable',
name: '可展开表格',
},
{
path: '/fixedHeight',
name: '定高/头部自定义',
},
{
path: '/footerTable',
name: '表尾行合计',
},
{
path: '/editCellTable',
name: '可编辑单元格',
},
],
},
{
path: '/form',
name: '表单组件',
children: [
{
path: '/basic',
name: '基础表单',
},
{
path: '/useForm',
name: 'useForm',
},
{
path: '/refForm',
name: 'RefForm',
},
{
path: '/advancedForm',
name: '可收缩表单',
},
{
path: '/ruleForm',
name: '表单校验',
},
{
path: '/dynamicForm',
name: '动态表单',
},
{
path: '/customerForm',
name: '自定义组件',
},
],
},
{
path: '/tree',
name: '树组件',
children: [
{
path: 'basic',
name: '基础示例',
},
{
path: 'editTree',
name: '右键示例',
},
{
path: 'actionTree',
name: '函数操作示例',
},
],
},
{
path: '/scroll',
name: '滚动组件',

8
src/router/menus/modules/demo/feat.ts
View File

@ -5,6 +5,10 @@ const menu: MenuModule = {
name: '页面功能',
path: '/feat',
children: [
{
path: '/icon',
name: '图标',
},
{
path: '/tabs',
name: '标签页操作',
@ -13,6 +17,10 @@ const menu: MenuModule = {
path: '/context-menu',
name: '右键菜单',
},
{
path: '/click-out-side',
name: 'ClickOutSide',
},
{
path: '/img-preview',
name: '图片预览',

39
src/router/menus/modules/demo/form.ts Normal file
View File

@ -0,0 +1,39 @@
import type { MenuModule } from '/@/router/types.d';
const menu: MenuModule = {
orderNo: 40,
menu: {
path: '/form',
name: 'Form',
children: [
{
path: '/basic',
name: '基础表单',
},
{
path: '/useForm',
name: 'useForm',
},
{
path: '/refForm',
name: 'RefForm',
},
{
path: '/advancedForm',
name: '可收缩表单',
},
{
path: '/ruleForm',
name: '表单校验',
},
{
path: '/dynamicForm',
name: '动态表单',
},
{
path: '/customerForm',
name: '自定义组件',
},
],
},
};
export default menu;

67
src/router/menus/modules/demo/table.ts Normal file
View File

@ -0,0 +1,67 @@
import type { MenuModule } from '/@/router/types.d';
const menu: MenuModule = {
orderNo: 30,
menu: {
path: '/table',
name: 'Table',
children: [
{
path: '/basic',
name: '基础表格',
},
{
path: '/treeTable',
name: '树形表格',
},
{
path: '/fetchTable',
name: '远程加载',
},
{
path: '/fixedColumn',
name: '固定列',
},
{
path: '/customerCell',
name: '自定义列',
},
{
path: '/formTable',
name: '开启搜索区域',
},
{
path: '/useTable',
name: 'UseTable',
},
{
path: '/refTable',
name: 'RefTable',
},
{
path: '/multipleHeader',
name: '多级表头',
},
{
path: '/mergeHeader',
name: '合并单元格',
},
{
path: '/expandTable',
name: '可展开表格',
},
{
path: '/fixedHeight',
name: '定高/头部自定义',
},
{
path: '/footerTable',
name: '表尾行合计',
},
{
path: '/editCellTable',
name: '可编辑单元格',
},
],
},
};
export default menu;

23
src/router/menus/modules/demo/tree.ts Normal file
View File

@ -0,0 +1,23 @@
import type { MenuModule } from '/@/router/types.d';
const menu: MenuModule = {
orderNo: 50,
menu: {
path: '/tree',
name: 'Tree',
children: [
{
path: 'basic',
name: '基础示例',
},
{
path: 'editTree',
name: '右键示例',
},
{
path: 'actionTree',
name: '函数操作示例',
},
],
},
};
export default menu;

6
src/router/routes/index.ts
View File

@ -12,6 +12,9 @@ import compDemo from './modules/demo/comp';
import permissionDemo from './modules/demo/permission';
import featDemo from './modules/demo/feat';
import chartsDemo from './modules/demo/charts';
import tableDemo from './modules/demo/table';
import formDemo from './modules/demo/form';
import treeDemo from './modules/demo/tree';
const routeModuleList: AppRouteModule[] = [
exceptionDemo,
@ -21,6 +24,9 @@ const routeModuleList: AppRouteModule[] = [
featDemo,
permissionDemo,
chartsDemo,
tableDemo,
formDemo,
treeDemo,
];
export const asyncRoutes = [

241
src/router/routes/modules/demo/comp.ts
View File

@ -23,237 +23,7 @@ export default {
title: '基础组件',
},
},
{
path: '/icon',
name: 'IconDemo',
component: () => import('/@/views/demo/comp/icon/index.vue'),
meta: {
title: '图标',
},
},
// form
{
path: '/form',
name: 'FormDemo',
redirect: '/comp/form/basic',
meta: {
title: '表单组件',
},
children: [
{
path: 'basic',
name: 'FormBasicDemo',
component: () => import('/@/views/demo/form/index.vue'),
meta: {
title: '基础表单',
},
},
{
path: 'useForm',
name: 'UseFormDemo',
component: () => import('/@/views/demo/form/UseForm.vue'),
meta: {
title: 'useForm',
},
},
{
path: 'refForm',
name: 'RefFormDemo',
component: () => import('/@/views/demo/form/RefForm.vue'),
meta: {
title: 'RefForm',
},
},
{
path: 'advancedForm',
name: 'AdvancedFormDemo',
component: () => import('/@/views/demo/form/AdvancedForm.vue'),
meta: {
title: '可收缩表单',
},
},
{
path: 'ruleForm',
name: 'RuleFormDemo',
component: () => import('/@/views/demo/form/RuleForm.vue'),
meta: {
title: '表单验证',
},
},
{
path: 'dynamicForm',
name: 'DynamicFormDemo',
component: () => import('/@/views/demo/form/DynamicForm.vue'),
meta: {
title: '动态表单',
},
},
{
path: 'customerForm',
name: 'CustomerFormDemo',
component: () => import('/@/views/demo/form/CustomerForm.vue'),
meta: {
title: '自定义组件',
},
},
],
},
{
path: '/table',
name: 'TableDemo',
redirect: '/comp/table/basic',
meta: {
title: '表格组件',
},
children: [
{
path: 'basic',
name: 'TableBasicDemo',
component: () => import('/@/views/demo/table/Basic.vue'),
meta: {
title: '基础表格',
},
},
{
path: 'treeTable',
name: 'TreeTableDemo',
component: () => import('/@/views/demo/table/TreeTable.vue'),
meta: {
title: '树形表格',
},
},
{
path: 'fetchTable',
name: 'FetchTableDemo',
component: () => import('/@/views/demo/table/FetchTable.vue'),
meta: {
title: '远程加载示例',
},
},
{
path: 'fixedColumn',
name: 'FixedColumnDemo',
component: () => import('/@/views/demo/table/FixedColumn.vue'),
meta: {
title: '固定列',
},
},
{
path: 'customerCell',
name: 'CustomerCellDemo',
component: () => import('/@/views/demo/table/CustomerCell.vue'),
meta: {
title: '自定义列',
},
},
{
path: 'formTable',
name: 'FormTableDemo',
component: () => import('/@/views/demo/table/FormTable.vue'),
meta: {
title: '开启搜索区域',
},
},
{
path: 'useTable',
name: 'UseTableDemo',
component: () => import('/@/views/demo/table/UseTable.vue'),
meta: {
title: 'UseTable',
},
},
{
path: 'refTable',
name: 'RefTableDemo',
component: () => import('/@/views/demo/table/RefTable.vue'),
meta: {
title: 'RefTable',
},
},
{
path: 'multipleHeader',
name: 'MultipleHeaderDemo',
component: () => import('/@/views/demo/table/MultipleHeader.vue'),
meta: {
title: '多级表头',
},
},
{
path: 'mergeHeader',
name: 'MergeHeaderDemo',
component: () => import('/@/views/demo/table/MergeHeader.vue'),
meta: {
title: '合并单元格',
},
},
{
path: 'expandTable',
name: 'ExpandTableDemo',
component: () => import('/@/views/demo/table/ExpandTable.vue'),
meta: {
title: '可展开表格',
},
},
{
path: 'fixedHeight',
name: 'FixedHeightDemo',
component: () => import('/@/views/demo/table/FixedHeight.vue'),
meta: {
title: '定高/头部自定义',
},
},
{
path: 'footerTable',
name: 'FooterTableDemo',
component: () => import('/@/views/demo/table/FooterTable.vue'),
meta: {
title: '表尾行合计',
},
},
{
path: 'editCellTable',
name: 'EditCellTableDemo',
component: () => import('/@/views/demo/table/EditCellTable.vue'),
meta: {
title: '可编辑单元格',
},
},
],
},
{
path: '/tree',
name: 'TreeDemo',
redirect: '/comp/tree/basic',
meta: {
title: '树组件',
},
children: [
{
path: 'basic',
name: 'BasicTreeDemo',
component: () => import('/@/views/demo/tree/index.vue'),
meta: {
title: '基础树',
},
},
{
path: 'editTree',
name: 'EditTreeDemo',
component: () => import('/@/views/demo/tree/EditTree.vue'),
meta: {
title: '右键示例',
},
},
{
path: 'actionTree',
name: 'ActionTreeDemo',
component: () => import('/@/views/demo/tree/ActionTree.vue'),
meta: {
title: '函数操作示例',
},
},
],
},
{
path: '/scroll',
name: 'ScrollDemo',
@ -341,14 +111,7 @@ export default {
],
},
//
{
path: '/click-out-side',
name: 'ClickOutSideDemo',
component: () => import('/@/views/demo/comp/click-out-side/index.vue'),
meta: {
title: 'ClickOutSide组件',
},
},
{
path: '/qrcode',
name: 'QrCodeDemo',

16
src/router/routes/modules/demo/feat.ts
View File

@ -23,6 +23,14 @@ export default {
title: '标签页操作',
},
},
{
path: '/icon',
name: 'IconDemo',
component: () => import('/@/views/demo/comp/icon/index.vue'),
meta: {
title: '图标',
},
},
{
path: '/context-menu',
name: 'ContextMenuDemo',
@ -31,6 +39,14 @@ export default {
title: '右键菜单',
},
},
{
path: '/click-out-side',
name: 'ClickOutSideDemo',
component: () => import('/@/views/demo/comp/click-out-side/index.vue'),
meta: {
title: 'ClickOutSide组件',
},
},
{
path: '/img-preview',
name: 'ImgPreview',

75
src/router/routes/modules/demo/form.ts Normal file
View File

@ -0,0 +1,75 @@
import type { AppRouteModule } from '/@/router/types';
import { PAGE_LAYOUT_COMPONENT } from '/@/router/constant';
export default {
layout: {
path: '/form',
name: 'FormDemo',
component: PAGE_LAYOUT_COMPONENT,
redirect: '/form/basic',
meta: {
icon: 'ant-design:table-outlined',
title: 'Form',
},
},
routes: [
{
path: '/basic',
name: 'FormBasicDemo',
component: () => import('/@/views/demo/form/index.vue'),
meta: {
title: '基础表单',
},
},
{
path: '/useForm',
name: 'UseFormDemo',
component: () => import('/@/views/demo/form/UseForm.vue'),
meta: {
title: 'useForm',
},
},
{
path: '/refForm',
name: 'RefFormDemo',
component: () => import('/@/views/demo/form/RefForm.vue'),
meta: {
title: 'RefForm',
},
},
{
path: '/advancedForm',
name: 'AdvancedFormDemo',
component: () => import('/@/views/demo/form/AdvancedForm.vue'),
meta: {
title: '可收缩表单',
},
},
{
path: '/ruleForm',
name: 'RuleFormDemo',
component: () => import('/@/views/demo/form/RuleForm.vue'),
meta: {
title: '表单验证',
},
},
{
path: '/dynamicForm',
name: 'DynamicFormDemo',
component: () => import('/@/views/demo/form/DynamicForm.vue'),
meta: {
title: '动态表单',
},
},
{
path: '/customerForm',
name: 'CustomerFormDemo',
component: () => import('/@/views/demo/form/CustomerForm.vue'),
meta: {
title: '自定义组件',
},
},
],
} as AppRouteModule;

131
src/router/routes/modules/demo/table.ts Normal file
View File

@ -0,0 +1,131 @@
import type { AppRouteModule } from '/@/router/types';
import { PAGE_LAYOUT_COMPONENT } from '/@/router/constant';
export default {
layout: {
path: '/table',
name: 'TableDemo',
component: PAGE_LAYOUT_COMPONENT,
redirect: '/table/basic',
meta: {
icon: 'ant-design:table-outlined',
title: 'Table',
},
},
routes: [
{
path: '/basic',
name: 'TableBasicDemo',
component: () => import('/@/views/demo/table/Basic.vue'),
meta: {
title: '基础表格',
},
},
{
path: '/treeTable',
name: 'TreeTableDemo',
component: () => import('/@/views/demo/table/TreeTable.vue'),
meta: {
title: '树形表格',
},
},
{
path: '/fetchTable',
name: 'FetchTableDemo',
component: () => import('/@/views/demo/table/FetchTable.vue'),
meta: {
title: '远程加载示例',
},
},
{
path: '/fixedColumn',
name: 'FixedColumnDemo',
component: () => import('/@/views/demo/table/FixedColumn.vue'),
meta: {
title: '固定列',
},
},
{
path: '/customerCell',
name: 'CustomerCellDemo',
component: () => import('/@/views/demo/table/CustomerCell.vue'),
meta: {
title: '自定义列',
},
},
{
path: '/formTable',
name: 'FormTableDemo',
component: () => import('/@/views/demo/table/FormTable.vue'),
meta: {
title: '开启搜索区域',
},
},
{
path: '/useTable',
name: 'UseTableDemo',
component: () => import('/@/views/demo/table/UseTable.vue'),
meta: {
title: 'UseTable',
},
},
{
path: '/refTable',
name: 'RefTableDemo',
component: () => import('/@/views/demo/table/RefTable.vue'),
meta: {
title: 'RefTable',
},
},
{
path: '/multipleHeader',
name: 'MultipleHeaderDemo',
component: () => import('/@/views/demo/table/MultipleHeader.vue'),
meta: {
title: '多级表头',
},
},
{
path: '/mergeHeader',
name: 'MergeHeaderDemo',
component: () => import('/@/views/demo/table/MergeHeader.vue'),
meta: {
title: '合并单元格',
},
},
{
path: '/expandTable',
name: 'ExpandTableDemo',
component: () => import('/@/views/demo/table/ExpandTable.vue'),
meta: {
title: '可展开表格',
},
},
{
path: '/fixedHeight',
name: 'FixedHeightDemo',
component: () => import('/@/views/demo/table/FixedHeight.vue'),
meta: {
title: '定高/头部自定义',
},
},
{
path: '/footerTable',
name: 'FooterTableDemo',
component: () => import('/@/views/demo/table/FooterTable.vue'),
meta: {
title: '表尾行合计',
},
},
{
path: '/editCellTable',
name: 'EditCellTableDemo',
component: () => import('/@/views/demo/table/EditCellTable.vue'),
meta: {
title: '可编辑单元格',
},
},
],
} as AppRouteModule;

42
src/router/routes/modules/demo/tree.ts Normal file
View File

@ -0,0 +1,42 @@
import type { AppRouteModule } from '/@/router/types';
import { PAGE_LAYOUT_COMPONENT } from '/@/router/constant';
export default {
layout: {
path: '/tree',
name: 'TreeDemo',
component: PAGE_LAYOUT_COMPONENT,
redirect: '/tree/basic',
meta: {
icon: 'ant-design:table-outlined',
title: 'Tree',
},
},
routes: [
{
path: '/basic',
name: 'BasicTreeDemo',
component: () => import('/@/views/demo/tree/index.vue'),
meta: {
title: '基础树',
},
},
{
path: '/editTree',
name: 'EditTreeDemo',
component: () => import('/@/views/demo/tree/EditTree.vue'),
meta: {
title: '右键示例',
},
},
{
path: '/actionTree',
name: 'ActionTreeDemo',
component: () => import('/@/views/demo/tree/ActionTree.vue'),
meta: {
title: '函数操作示例',
},
},
],
} as AppRouteModule;