From 41f8a35ce80d15d256b60b0913d934cef841350f Mon Sep 17 00:00:00 2001
From: buqiyuan <1743369777@qq.com>
Date: Sun, 14 Apr 2024 23:09:45 +0800
Subject: [PATCH] perf: use route path as unique route name

fix: #178
---
 package.json                                  |  4 +-
 pnpm-lock.yaml                                | 38 +++++++++----------
 .../table-settings/search-setting.vue         |  4 +-
 .../core/schema-form/src/schema-form.ts       |  2 +-
 src/router/helper/routeHelper.tsx             | 13 +++++--
 src/views/demos/form/basic-form/index.vue     | 21 +++++++++-
 src/views/system/dict-type/columns.tsx        |  2 +-
 7 files changed, 53 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index d19373195..767b32cc9 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "tinymce": "^6.8.3",
     "vue": "~3.4.21",
     "vue-echarts": "^6.6.9",
-    "vue-i18n": "9.12.0",
+    "vue-i18n": "9.12.1",
     "vue-router": "~4.3.0",
     "vue-types": "~5.1.1",
     "vue-virtual-scroller": "2.0.0-beta.8",
@@ -98,7 +98,7 @@
     "eslint-plugin-import": "~2.29.1",
     "eslint-plugin-prettier": "~5.1.3",
     "eslint-plugin-unused-imports": "^3.1.0",
-    "eslint-plugin-vue": "~9.24.1",
+    "eslint-plugin-vue": "~9.25.0",
     "husky": "~9.0.11",
     "less": "~4.2.0",
     "lint-staged": "~15.2.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5587b52a3..4f90f61b7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -72,8 +72,8 @@ importers:
         specifier: ^6.6.9
         version: 6.6.9(echarts@5.5.0)(vue@3.4.21)
       vue-i18n:
-        specifier: 9.12.0
-        version: 9.12.0(vue@3.4.21)
+        specifier: 9.12.1
+        version: 9.12.1(vue@3.4.21)
       vue-router:
         specifier: ~4.3.0
         version: 4.3.0(vue@3.4.21)
@@ -178,8 +178,8 @@ importers:
         specifier: ^3.1.0
         version: 3.1.0(@typescript-eslint/eslint-plugin@7.6.0)(eslint@8.57.0)
       eslint-plugin-vue:
-        specifier: ~9.24.1
-        version: 9.24.1(eslint@8.57.0)
+        specifier: ~9.25.0
+        version: 9.25.0(eslint@8.57.0)
       husky:
         specifier: ~9.0.11
         version: 9.0.11
@@ -2649,24 +2649,24 @@ packages:
     resolution: {integrity: sha512-xwMfkPAxeo8Ji/IxfUSqzRi0/+F2GIqJmpc5/thelgMGsjNZcjDDRBO9TLXT1s/hdx/mK5QbVIvgoLIFgXhTMQ==}
     engines: {node: '>=18'}
 
-  /@intlify/core-base@9.12.0:
-    resolution: {integrity: sha512-6EnWQXHnCh2bMiXT5N/IWwkcYQXjmF8nnEZ3YhTm23h1ZfOylz83D7pJYhcU8CsTiEdgbGiNdqyZPKwrHw03Ng==}
+  /@intlify/core-base@9.12.1:
+    resolution: {integrity: sha512-l7djJEmXLAR44PdtKDEBev/TN9tREQz967/+jvN3WtICqFoy2Cz8kPtjDfvZctqPNzOonp+ESsDCUm+rjHsmdA==}
     engines: {node: '>= 16'}
     dependencies:
-      '@intlify/message-compiler': 9.12.0
-      '@intlify/shared': 9.12.0
+      '@intlify/message-compiler': 9.12.1
+      '@intlify/shared': 9.12.1
     dev: false
 
-  /@intlify/message-compiler@9.12.0:
-    resolution: {integrity: sha512-2c6VwhvVJ1nur+2cN2NjdrmrV6vXjvyxYVvtUYMXKsWSUwoNURHGds0xJVJmWxbF8qV9oGepcVV6xl9bvadEIg==}
+  /@intlify/message-compiler@9.12.1:
+    resolution: {integrity: sha512-6QrMGdqKUJSkctyg56nvE+h86tjQZTjYFEfx3ghQAXKPXUd1v5josZXrwnSbIEWWeAentlwtB5qW1FE5r2S8AQ==}
     engines: {node: '>= 16'}
     dependencies:
-      '@intlify/shared': 9.12.0
+      '@intlify/shared': 9.12.1
       source-map-js: 1.2.0
     dev: false
 
-  /@intlify/shared@9.12.0:
-    resolution: {integrity: sha512-uBcH55x5CfZynnerWHQxrXbT6yD6j6T7Nt+R2+dHAOAneoMd6BoGvfEzfYscE94rgmjoDqdr+PdGDBLk5I5EjA==}
+  /@intlify/shared@9.12.1:
+    resolution: {integrity: sha512-xAAAxaMS7yUCkwXwqUVQmGCPbXSm6oHqMzcqr2IrxJQmC0DmuqoaW0yBeWyd/pG03PPXqGtWhJLnefsiVElzAQ==}
     engines: {node: '>= 16'}
     dev: false
 
@@ -6216,8 +6216,8 @@ packages:
       eslint-rule-composer: 0.3.0
     dev: true
 
-  /eslint-plugin-vue@9.24.1(eslint@8.57.0):
-    resolution: {integrity: sha512-wk3SuwmS1pZdcuJlokGYEi/buDOwD6KltvhIZyOnpJ/378dcQ4zchu9PAMbbLAaydCz1iYc5AozszcOOgZIIOg==}
+  /eslint-plugin-vue@9.25.0(eslint@8.57.0):
+    resolution: {integrity: sha512-tDWlx14bVe6Bs+Nnh3IGrD+hb11kf2nukfm6jLsmJIhmiRQ1SUaksvwY9U5MvPB0pcrg0QK0xapQkfITs3RKOA==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
@@ -11931,14 +11931,14 @@ packages:
       - supports-color
     dev: true
 
-  /vue-i18n@9.12.0(vue@3.4.21):
-    resolution: {integrity: sha512-rUxCKTws8NH3XP98W71GA7btAQdAuO7j6BC5y5s1bTNQYo/CIgZQf+p7d1Zo5bo/3v8TIq9aSUMDjpfgKsC3Uw==}
+  /vue-i18n@9.12.1(vue@3.4.21):
+    resolution: {integrity: sha512-cqkBt10YzxF3tNGA7/95VMfFdk8nEoguzB7K7R9rldiSnHyWeokq6GOWMThfK/siTr2lLfM9nqolD/er//t4Iw==}
     engines: {node: '>= 16'}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
-      '@intlify/core-base': 9.12.0
-      '@intlify/shared': 9.12.0
+      '@intlify/core-base': 9.12.1
+      '@intlify/shared': 9.12.1
       '@vue/devtools-api': 6.6.1
       vue: 3.4.21(typescript@5.4.5)
     dev: false
diff --git a/src/components/core/dynamic-table/src/components/table-settings/search-setting.vue b/src/components/core/dynamic-table/src/components/table-settings/search-setting.vue
index ec85e7c69..569f1067a 100644
--- a/src/components/core/dynamic-table/src/components/table-settings/search-setting.vue
+++ b/src/components/core/dynamic-table/src/components/table-settings/search-setting.vue
@@ -1,5 +1,5 @@
 <template>
-  <template v-if="getFormProps?.schemas?.length && search">
+  <template v-if="formSchemas?.length && search">
     <Tooltip placement="top">
       <template #title>
         <span>{{ getProps.search ? '隐藏搜索' : '显示搜索' }}</span>
@@ -13,7 +13,7 @@
   import { Tooltip } from 'ant-design-vue';
   import { useTableContext } from '../../hooks/useTableContext';
 
-  const { getProps, setProps, getFormProps, search } = useTableContext();
+  const { getProps, setProps, formSchemas, search } = useTableContext();
 
   function toggle() {
     setProps({
diff --git a/src/components/core/schema-form/src/schema-form.ts b/src/components/core/schema-form/src/schema-form.ts
index 77a3c2ee4..951c25b04 100644
--- a/src/components/core/schema-form/src/schema-form.ts
+++ b/src/components/core/schema-form/src/schema-form.ts
@@ -21,7 +21,7 @@ export const schemaFormProps = {
   },
   // 标签宽度  固定宽度
   labelWidth: {
-    type: [Number, String] as PropType<number | string>,
+    type: [Number, String] as PropType<number | string | null>,
     default: 0,
   },
   fieldMapToTime: {
diff --git a/src/router/helper/routeHelper.tsx b/src/router/helper/routeHelper.tsx
index b95d7ff4f..4944de7eb 100644
--- a/src/router/helper/routeHelper.tsx
+++ b/src/router/helper/routeHelper.tsx
@@ -20,6 +20,14 @@ export const transformMenuToRoutes = (
     // 是否在菜单中隐藏
     route.meta.hideInMenu ??= !show;
 
+    // 规范化路由路径
+    route.path = route.path.startsWith('/') ? route.path : `/${route.path}`;
+    if (parentRoute?.path && !route.path.startsWith(parentRoute.path)) {
+      route.path = uniqueSlash(`${parentRoute.path}/${route.path}`);
+    }
+    // 以路由路径作为唯一的路由名称
+    route.name = route.path;
+
     if (type === 0) {
       route.component = null;
       if (route.children?.length) {
@@ -37,10 +45,6 @@ export const transformMenuToRoutes = (
         route.path = route.path.replace(new RegExp('://'), '/');
       } else if (compPath) {
         route.component = asyncRoutes[compPath];
-        if (typeof parentRoute?.name === 'string') {
-          // 避免重名
-          route.name = `${parentRoute.name}_${route.name as string}`;
-        }
         // 前端 src/views 目录下无对应路由组件
         if (!route.component) {
           route.component = () => import('@/views/error/comp-not-found.vue');
@@ -62,6 +66,7 @@ export const generateDynamicRoutes = (menus: RouteRecordRaw[]) => {
   genNamePathForRoutes(allRoute);
   rootRoute.children = allRoute;
   router.addRoute(rootRoute);
+  console.log('routes', router.getRoutes());
   return routes;
 };
 
diff --git a/src/views/demos/form/basic-form/index.vue b/src/views/demos/form/basic-form/index.vue
index 66ed5ffcc..47899647c 100644
--- a/src/views/demos/form/basic-form/index.vue
+++ b/src/views/demos/form/basic-form/index.vue
@@ -12,6 +12,10 @@
       </template>
     </Alert>
     <a-card>
+      <a-radio-group v-model:value="layout">
+        <a-radio-button value="horizontal">Horizontal</a-radio-button>
+        <a-radio-button value="vertical">Vertical</a-radio-button>
+      </a-radio-group>
       <SchemaForm @submit="handleSubmit">
         <template #selectA="{ formModel, field }">
           <Select
@@ -59,7 +63,7 @@
 </template>
 
 <script lang="tsx" setup>
-  import { computed, ref, unref } from 'vue';
+  import { computed, ref, unref, watch } from 'vue';
   import { cloneDeep } from 'lodash-es';
   import { Alert, message, Select } from 'ant-design-vue';
   import { schemas } from './form-schema';
@@ -70,7 +74,7 @@
     name: 'DemosFormBasicForm',
   });
 
-  const [SchemaForm] = useForm({
+  const [SchemaForm, SchemaFormInstance] = useForm({
     labelWidth: 200,
     schemas,
     actionColOptions: {
@@ -79,6 +83,7 @@
   });
 
   const keyword = ref<string>('');
+  const layout = ref('horizontal');
 
   const valueSelectA = ref<string[]>([]);
   const valueSelectB = ref<string[]>([]);
@@ -102,6 +107,18 @@
     return { keyword: unref(keyword) };
   });
 
+  watch(layout, (val) => {
+    if (val === 'vertical') {
+      SchemaFormInstance.setSchemaFormProps({
+        layout: val,
+        rowProps: { gutter: 20 },
+        labelWidth: null,
+      });
+    } else {
+      SchemaFormInstance.setSchemaFormProps({ layout: val, labelWidth: 200 });
+    }
+  });
+
   function onSearch(value: string) {
     keyword.value = value;
   }
diff --git a/src/views/system/dict-type/columns.tsx b/src/views/system/dict-type/columns.tsx
index e28a5e3dc..ed2f5d1e1 100644
--- a/src/views/system/dict-type/columns.tsx
+++ b/src/views/system/dict-type/columns.tsx
@@ -9,7 +9,7 @@ import router from '@/router';
 export type TableListItem = API.DictTypeEntity;
 export type TableColumnItem = TableColumn<TableListItem>;
 
-export const dictItemRouteName = '字典项管理';
+export const dictItemRouteName = '/system/dict-item/:id';
 
 const DictCodeRender: FunctionalComponent<TableListItem> = (props) => {
   if (!router.hasRoute(dictItemRouteName)) {