feat(menu): 路由菜单组件路径新增下拉选择

src/hooks/modules/useComponentPaths.ts

@@ -0,0 +1,36 @@
+import { onMounted, ref } from 'vue'
+import { Message } from '@arco-design/web-vue'
+
+interface ComponentOption {
+  label: string
+  value: string
+}
+
+export const useComponentPaths = () => {
+  const componentOptions = ref<ComponentOption[]>([])
+
+  const loadComponentPaths = async () => {
+    try {
+      const modules = import.meta.glob('@/views/**/index.vue')
+      const paths = Object.keys(modules)
+      componentOptions.value = paths.map((path) => {
+        // 格式转化
+        path = path.replace('/src/views/', '')
+        const label = `@view/${path}`
+        const value = path.split('.vue')[0]
+        return { label, value }
+      })
+    } catch (error) {
+      Message.error('加载组件路径失败')
+      console.error('加载组件路径失败:', error)
+    }
+  }
+
+  onMounted(async () => {
+    await loadComponentPaths()
+  })
+
+  return {
+    componentOptions,
+  }
+}

src/views/system/menu/MenuAddModal.vue

@@ -51,10 +51,11 @@
       </a-form-item>
       <a-form-item v-if="form.type === 2" label="组件路径" field="component">
         <a-input v-if="form.isExternal" v-model.trim="form.component" placeholder="请输入组件路径" allow-clear />
-        <a-input v-else v-model.trim="form.component" placeholder="请输入组件路径" allow-clear>
-          <template #prepend>@/views/</template>
-          <template #append>.vue</template>
-        </a-input>
+        <a-select v-else v-model="form.component" placeholder="请选择组件路径" allow-clear allow-create :options="componentOptions">
+          <template #label="{ data }">
+            {{ data?.value }}
+          </template>
+        </a-select>
       </a-form-item>
       <a-form-item v-if="form.type === 3" label="权限标识" field="permission">
         <a-input v-model.trim="form.permission" placeholder="system:user:add" allow-clear />
@@ -121,6 +122,7 @@ import { mapTree } from 'xe-utils'
 import { type MenuResp, addMenu, getMenu, updateMenu } from '@/apis/system/menu'
 import { useResetReactive } from '@/hooks'
 import { filterTree, transformPathToName } from '@/utils'
+import { useComponentPaths } from '@/hooks/modules/useComponentPaths'
 
 interface Props {
   menus: MenuResp[]
@@ -152,6 +154,8 @@ const [form, resetForm] = useResetReactive({
 
 const componentName = computed(() => transformPathToName(form.path))
 
+const { componentOptions } = useComponentPaths()
+
 const rules: FormInstance['rules'] = {
   parentId: [{ required: true, message: '请选择上级菜单' }],
   title: [{ required: true, message: '请输入菜单标题' }],