style: menu adjustment

src/components/Menu/src/BasicMenu.tsx

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

src/layouts/default/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 {
+  .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;
   }
 

src/router/menus/index.ts

@@ -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,
 ];
 
 // ===========================

src/router/menus/modules/demo/comp.ts

@@ -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: '滚动组件',

src/router/menus/modules/demo/feat.ts

@@ -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: '图片预览',

src/router/menus/modules/demo/form.ts

+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

+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

+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';
 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 = [

src/router/routes/modules/demo/comp.ts

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

src/router/routes/modules/demo/feat.ts

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

src/router/routes/modules/demo/form.ts

+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

+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

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