Skip to content

B
basic-vue-admin
提交 949db963 作者: vben
操作

style: menu adjustment

上级 52ee35c4
正在显示 包含 425 行增加 和 369 行删除
src/components/Menu/src/BasicMenu.tsx
...@@ -209,7 +209,7 @@ export default defineComponent({ ...@@ -209,7 +209,7 @@ export default defineComponent({
: {}; : {};
return ( return (
<Menu <Menu
// forceSubMenuRender={true} forceSubMenuRender={props.isAppMenu}
selectedKeys={selectedKeys} selectedKeys={selectedKeys}
defaultSelectedKeys={defaultSelectedKeys} defaultSelectedKeys={defaultSelectedKeys}
mode={mode} mode={mode}
......
src/layouts/default/index.less
@import (reference) '../../design/index.less'; @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 { .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 { &__content {
position: relative; position: relative;
...@@ -363,8 +364,8 @@ ...@@ -363,8 +364,8 @@
align-items: center; align-items: center;
img { img {
width: @logo-width; width: 32px;
height: @logo-width; height: 32px;
margin-right: 24px; margin-right: 24px;
} }
......
src/router/menus/index.ts
...@@ -17,6 +17,9 @@ import compDemo from './modules/demo/comp'; ...@@ -17,6 +17,9 @@ import compDemo from './modules/demo/comp';
import permissionDemo from './modules/demo/permission'; import permissionDemo from './modules/demo/permission';
import featDemo from './modules/demo/feat'; import featDemo from './modules/demo/feat';
import chartsDemo from './modules/demo/charts'; 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 = [ const menuModules = [
dashboardDemo, dashboardDemo,
...@@ -26,6 +29,9 @@ const menuModules = [ ...@@ -26,6 +29,9 @@ const menuModules = [
compDemo, compDemo,
permissionDemo, permissionDemo,
chartsDemo, chartsDemo,
tableDemo,
formDemo,
treeDemo,
]; ];
// =========================== // ===========================
......
src/router/menus/modules/demo/comp.ts
...@@ -9,128 +9,7 @@ const menu: MenuModule = { ...@@ -9,128 +9,7 @@ const menu: MenuModule = {
path: '/basic', path: '/basic',
name: '基础组件', 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', path: '/scroll',
name: '滚动组件', name: '滚动组件',
......
src/router/menus/modules/demo/feat.ts
...@@ -6,6 +6,10 @@ const menu: MenuModule = { ...@@ -6,6 +6,10 @@ const menu: MenuModule = {
path: '/feat', path: '/feat',
children: [ children: [
{ {
path: '/icon',
name: '图标',
},
{
path: '/tabs', path: '/tabs',
name: '标签页操作', name: '标签页操作',
}, },
...@@ -14,6 +18,10 @@ const menu: MenuModule = { ...@@ -14,6 +18,10 @@ const menu: MenuModule = {
name: '右键菜单', name: '右键菜单',
}, },
{ {
path: '/click-out-side',
name: 'ClickOutSide',
},
{
path: '/img-preview', path: '/img-preview',
name: '图片预览', name: '图片预览',
}, },
......
src/router/menus/modules/demo/form.ts 0 → 100644
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;
src/router/menus/modules/demo/table.ts 0 → 100644
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;
src/router/menus/modules/demo/tree.ts 0 → 100644
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;
src/router/routes/index.ts
...@@ -12,6 +12,9 @@ import compDemo from './modules/demo/comp'; ...@@ -12,6 +12,9 @@ import compDemo from './modules/demo/comp';
import permissionDemo from './modules/demo/permission'; import permissionDemo from './modules/demo/permission';
import featDemo from './modules/demo/feat'; import featDemo from './modules/demo/feat';
import chartsDemo from './modules/demo/charts'; 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[] = [ const routeModuleList: AppRouteModule[] = [
exceptionDemo, exceptionDemo,
...@@ -21,6 +24,9 @@ const routeModuleList: AppRouteModule[] = [ ...@@ -21,6 +24,9 @@ const routeModuleList: AppRouteModule[] = [
featDemo, featDemo,
permissionDemo, permissionDemo,
chartsDemo, chartsDemo,
tableDemo,
formDemo,
treeDemo,
]; ];
export const asyncRoutes = [ export const asyncRoutes = [
......
src/router/routes/modules/demo/comp.ts
...@@ -23,237 +23,7 @@ export default { ...@@ -23,237 +23,7 @@ export default {
title: '基础组件', 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', path: '/scroll',
name: 'ScrollDemo', name: 'ScrollDemo',
...@@ -341,14 +111,7 @@ export default { ...@@ -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', path: '/qrcode',
name: 'QrCodeDemo', name: 'QrCodeDemo',
......
src/router/routes/modules/demo/feat.ts
...@@ -24,6 +24,14 @@ export default { ...@@ -24,6 +24,14 @@ export default {
}, },
}, },
{ {
path: '/icon',
name: 'IconDemo',
component: () => import('/@/views/demo/comp/icon/index.vue'),
meta: {
title: '图标',
},
},
{
path: '/context-menu', path: '/context-menu',
name: 'ContextMenuDemo', name: 'ContextMenuDemo',
component: () => import('/@/views/demo/feat/context-menu/index.vue'), component: () => import('/@/views/demo/feat/context-menu/index.vue'),
...@@ -32,6 +40,14 @@ export default { ...@@ -32,6 +40,14 @@ export default {
}, },
}, },
{ {
path: '/click-out-side',
name: 'ClickOutSideDemo',
component: () => import('/@/views/demo/comp/click-out-side/index.vue'),
meta: {
title: 'ClickOutSide组件',
},
},
{
path: '/img-preview', path: '/img-preview',
name: 'ImgPreview', name: 'ImgPreview',
component: () => import('/@/views/demo/feat/img-preview/index.vue'), component: () => import('/@/views/demo/feat/img-preview/index.vue'),
......
src/router/routes/modules/demo/form.ts 0 → 100644
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;
src/router/routes/modules/demo/table.ts 0 → 100644
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;
src/router/routes/modules/demo/tree.ts 0 → 100644
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;
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论