perf: use route path as unique route name

fix: #178

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",

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({

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: {

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

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

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)) {