From 438c2af4a656b37a61cc5b102f9aab87b14bb6bd Mon Sep 17 00:00:00 2001
From: KAI <1373639299@qq.com>
Date: Fri, 13 Dec 2024 07:06:22 +0000
Subject: [PATCH] =?UTF-8?q?feat(menu):=20=E8=B7=AF=E7=94=B1=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E7=BB=84=E4=BB=B6=E8=B7=AF=E5=BE=84=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/modules/useComponentPaths.ts | 36 ++++++++++++++++++++++++++
 src/views/system/menu/MenuAddModal.vue | 12 ++++++---
 2 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 src/hooks/modules/useComponentPaths.ts

diff --git a/src/hooks/modules/useComponentPaths.ts b/src/hooks/modules/useComponentPaths.ts
new file mode 100644
index 00000000..ca7a4d39
--- /dev/null
+++ b/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,
+  }
+}
diff --git a/src/views/system/menu/MenuAddModal.vue b/src/views/system/menu/MenuAddModal.vue
index d24a8c51..bf19d580 100644
--- a/src/views/system/menu/MenuAddModal.vue
+++ b/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: '请输入菜单标题' }],