perf: optimize settingDrawer code

CHANGELOG.zh_CN.md

@@ -4,6 +4,10 @@
 
 - 表单项的`componentsProps`支持函数类型
 
+### ⚡ Performance Improvements
+
+- 优化 settingDrawer 代码
+
 ### 🐛 Bug Fixes
 
 - 修复多个富文本编辑器只显示一个

index.html

@@ -30,8 +30,7 @@
       .app-loading {
         width: 100%;
         height: 100%;
-
-        /* background: #f0f2f5; */
+        background: #f0f2f5;
       }
 
       .app-loading .app-loading-wrap {

mock/demo/table-demo.ts

@@ -11,7 +11,7 @@ const demoList = (() => {
       address: '@city()',
       name: '@cname()',
       'no|100000-10000000': 100000,
-      'status|1': ['正常', '启用', '停用'],
+      'status|1': ['normal', 'enable', 'disable'],
     });
   }
   return result;

src/api/demo/error.ts

@@ -1,12 +1,12 @@
 import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
-  // 该地址不存在
+  // The address does not exist
   Error = '/error',
 }
 
 /**
- * @description: 触发ajax错误
+ * @description: Trigger ajax error
  */
 export function fireErrorApi() {
   return defHttp.request({

src/api/demo/model/tableModel.ts

@@ -1,6 +1,6 @@
 import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
 /**
- * @description: 请求列表接口参数
+ * @description: Request list interface parameters
  */
 export type DemoParams = BasicPageParams;
 
@@ -15,6 +15,6 @@ export interface DemoListItem {
 }
 
 /**
- * @description: 请求列表返回值
+ * @description: Request list return value
  */
 export type DemoListGetResultModel = BasicFetchResult<DemoListItem>;

src/api/demo/table.ts

@@ -6,7 +6,7 @@ enum Api {
 }
 
 /**
- * @description: 获取示例列表值
+ * @description: Get sample list value
  */
 export function demoListApi(params: DemoParams) {
   return defHttp.request<DemoListGetResultModel>({

src/components/Form/src/types/index.ts

@@ -89,7 +89,6 @@ export type ComponentType =
   | 'InputNumber'
   | 'InputCountDown'
   | 'Select'
-  | 'DictSelect'
   | 'SelectOptGroup'
   | 'SelectOption'
   | 'TreeSelect'

src/components/Menu/src/BasicMenu.tsx

@@ -52,7 +52,8 @@ export default defineComponent({
       toRef(props, 'items'),
       toRef(props, 'flatItems'),
       toRef(props, 'isAppMenu'),
-      toRef(props, 'mode')
+      toRef(props, 'mode'),
+      toRef(props, 'accordion')
     );
 
     const getOpenKeys = computed(() => {

src/components/Menu/src/props.ts

@@ -58,6 +58,10 @@ export const basicProps = {
     type: Boolean as PropType<boolean>,
     default: false,
   },
+  accordion: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
   beforeClickFn: {
     type: Function as PropType<Fn>,
     default: null,

src/components/Menu/src/useOpenKeys.ts

@@ -6,21 +6,31 @@ import type { Ref } from 'vue';
 import { unref } from 'vue';
 import { menuStore } from '/@/store/modules/menu';
 import { getAllParentPath } from '/@/utils/helper/menuHelper';
+import { es6Unique } from '/@/utils';
 
 export function useOpenKeys(
   menuState: MenuState,
   menus: Ref<MenuType[]>,
   flatMenusRef: Ref<MenuType[]>,
   isAppMenu: Ref<boolean>,
-  mode: Ref<MenuModeEnum>
+  mode: Ref<MenuModeEnum>,
+  accordion: Ref<boolean>
 ) {
   /**
    * @description:设置展开
    */
   function setOpenKeys(menu: MenuType) {
     const flatMenus = unref(flatMenusRef);
-    menuState.openKeys = getAllParentPath(flatMenus, menu.path);
+    if (!unref(accordion)) {
+      menuState.openKeys = es6Unique([
+        ...menuState.openKeys,
+        ...getAllParentPath(flatMenus, menu.path),
+      ]);
+    } else {
+      menuState.openKeys = getAllParentPath(flatMenus, menu.path);
+    }
   }
+
   /**
    * @description:  重置值
    */
@@ -30,7 +40,7 @@ export function useOpenKeys(
   }
 
   function handleOpenChange(openKeys: string[]) {
-    if (unref(mode) === MenuModeEnum.HORIZONTAL) {
+    if (unref(mode) === MenuModeEnum.HORIZONTAL || !unref(accordion)) {
       menuState.openKeys = openKeys;
     } else {
       const rootSubMenuKeys: string[] = [];

src/layouts/default/LayoutContent.tsx

@@ -2,11 +2,8 @@ import { defineComponent } from 'vue';
 import { Layout } from 'ant-design-vue';
 import { RouterView } from 'vue-router';
 
-// hooks
-
 import { ContentEnum } from '/@/enums/appEnum';
 import { appStore } from '/@/store/modules/app';
-// import PageLayout from '/@/layouts/page/index';
 export default defineComponent({
   name: 'DefaultLayoutContent',
   setup() {
@@ -17,7 +14,6 @@ export default defineComponent({
       return (
         <Layout.Content class={`layout-content ${wrapClass} `}>
           {() => <RouterView />}
-          {/* <PageLayout class={`layout-content ${wrapClass} `} /> */}
         </Layout.Content>
       );
     };

src/layouts/default/LayoutMenu.tsx

@@ -55,27 +55,25 @@ export default defineComponent({
     },
   },
   setup(props) {
+    // Menu array
     const menusRef = ref<Menu[]>([]);
+    // flat menu array
     const flatMenusRef = ref<Menu[]>([]);
     const { currentRoute, push } = useRouter();
-    // const { addTab } = useTabs();
 
+    // get app config
     const getProjectConfigRef = computed(() => {
       return appStore.getProjectConfig;
     });
 
+    // get is Horizontal
     const getIsHorizontalRef = computed(() => {
       return unref(getProjectConfigRef).menuSetting.mode === MenuModeEnum.HORIZONTAL;
     });
 
     const [throttleHandleSplitLeftMenu] = useThrottle(handleSplitLeftMenu, 50);
 
-    // watch(
-    //   () => menuStore.getCurrentTopSplitMenuPathState,
-    //   async (parentPath: string) => {
-    //     throttleHandleSplitLeftMenu(parentPath);
-    //   }
-    // );
+    // Route change split menu
     watch(
       [() => unref(currentRoute).path, () => props.splitType],
       async ([path, splitType]: [string, MenuSplitTyeEnum]) => {
@@ -88,23 +86,26 @@ export default defineComponent({
       }
     );
 
+    // Menu changes
     watch(
-      [() => permissionStore.getLastBuildMenuTimeState, permissionStore.getBackMenuListState],
+      [() => permissionStore.getLastBuildMenuTimeState, () => permissionStore.getBackMenuListState],
       () => {
         genMenus();
       }
     );
 
+    // split Menu changes
     watch([() => appStore.getProjectConfig.menuSetting.split], () => {
       if (props.splitType !== MenuSplitTyeEnum.LEFT && !unref(getIsHorizontalRef)) return;
       genMenus();
     });
 
+    // Handle left menu split
     async function handleSplitLeftMenu(parentPath: string) {
       const isSplitMenu = unref(getProjectConfigRef).menuSetting.split;
       if (!isSplitMenu) return;
       const { splitType } = props;
-      // 菜单分割模式-left
+      // spilt mode left
       if (splitType === MenuSplitTyeEnum.LEFT) {
         const children = await getChildrenMenus(parentPath);
         if (!children) {
@@ -128,19 +129,19 @@ export default defineComponent({
       }
     }
 
+    // get menus
     async function genMenus() {
       const isSplitMenu = unref(getProjectConfigRef).menuSetting.split;
 
-      // 普通模式
-
+      // normal mode
       const { splitType } = props;
       if (splitType === MenuSplitTyeEnum.NONE || !isSplitMenu) {
         flatMenusRef.value = await getFlatMenus();
         menusRef.value = await getMenus();
         return;
       }
 
-      // 菜单分割模式-top
+      // split-top
       if (splitType === MenuSplitTyeEnum.TOP) {
         const parentPath = await getCurrentParentPath(unref(currentRoute).path);
         menuStore.commitCurrentTopSplitMenuPathState(parentPath);
@@ -156,12 +157,11 @@ export default defineComponent({
       const { path } = menu;
       if (path) {
         const { splitType } = props;
-        // 菜单分割模式-top
+        // split mode top
         if (splitType === MenuSplitTyeEnum.TOP) {
           menuStore.commitCurrentTopSplitMenuPathState(path);
         }
         push(path);
-        // addTab(path as PageEnum, true);
       }
     }
 
@@ -205,6 +205,7 @@ export default defineComponent({
           collapsed,
           collapsedShowTitle,
           collapsedShowSearch,
+          accordion,
         },
       } = unref(getProjectConfigRef);
 
@@ -227,6 +228,7 @@ export default defineComponent({
           onClickSearchInput={handleClickSearchInput}
           appendClass={props.splitType === MenuSplitTyeEnum.TOP}
           isTop={props.isTop}
+          accordion={accordion}
         >
           {{
             header: () =>

src/layouts/default/LayoutSideBar.tsx

@@ -4,9 +4,6 @@ import { Layout } from 'ant-design-vue';
 import LayoutTrigger from './LayoutTrigger';
 import { menuStore } from '/@/store/modules/menu';
 
-// import darkMiniIMg from '/@/assets/images/sidebar/dark-mini.png';
-// import lightMiniImg from '/@/assets/images/sidebar/light-mini.png';
-// import lightImg from '/@/assets/images/sidebar/light.png';
 import { appStore } from '/@/store/modules/app';
 import { MenuModeEnum, MenuSplitTyeEnum, TriggerEnum } from '/@/enums/menuEnum';
 import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
@@ -44,7 +41,7 @@ export default defineComponent({
       initRef.value = true;
     }
 
-    // 菜单区域拖拽 - 鼠标移动
+    // Menu area drag and drop-mouse movement
     function handleMouseMove(ele: any, wrap: any, clientX: number) {
       document.onmousemove = function (innerE) {
         let iT = ele.left + ((innerE || event).clientX - clientX);
@@ -98,7 +95,6 @@ export default defineComponent({
       const side = unref(sideRef);
 
       const wrap = (side || {}).$el;
-      // const eleWidth = 6;
       ele &&
         (ele.onmousedown = (e: any) => {
           menuStore.commitDragStartState(true);

src/layouts/default/index.tsx

@@ -19,12 +19,11 @@ import './index.less';
 export default defineComponent({
   name: 'DefaultLayout',
   setup() {
-    // ! 在这里才注册全局组件
-    // ! 可以减少首屏代码体积
-    // default layout是在登录后才加载的。所以不会打包到首屏去
+    // ! Only register global components here
+    // ! Can reduce the size of the first screen code
+    // default layout It is loaded after login. So it won’t be packaged to the first screen
     registerGlobComp();
 
-    // 获取项目配置
     const { getFullContent } = useFullContent();
 
     const getProjectConfigRef = computed(() => {
@@ -56,8 +55,6 @@ export default defineComponent({
       return split || (show && mode !== MenuModeEnum.HORIZONTAL && !unref(getFullContent));
     });
 
-    // Get project configuration
-    // const { getFullContent } = useFullContent(currentRoute);
     function getTarget(): any {
       const {
         headerSetting: { fixed },