From c53f658f91a2731d573b229c27e6c1435b77be63 Mon Sep 17 00:00:00 2001
From: lvfengfree <cooper_bt@163.com>
Date: Tue, 20 Jan 2026 18:15:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=A2=9E=E5=BC=BA=20-=20=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=88=9B=E5=BB=BAVue=E7=BB=84=E4=BB=B6=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

后端改进:
- MenuController 添加自动创建 Vue 组件文件功能
- 创建菜单时自动生成对应的 .vue 文件模板
- 修复路径处理逻辑，确保子菜单使用相对路径
- 添加菜单名称唯一性检查，自动添加时间戳避免重复
- 修复 ViewsPath 配置路径
- 修复文件写入编码为 UTF-8

前端改进:
- 添加创建目录/子菜单的帮助说明
- 子菜单自动生成组件路径（如果用户未填写）
- 添加 autoCreateComponent 参数支持
- 优化菜单类型判断逻辑
---
 adminSystem/src/api/system-manage.ts          |  53 +++++++
 adminSystem/src/views/system/menu/index.vue   | 134 +++++++++++++++---
 .../views/system/menu/modules/menu-dialog.vue |  31 +++-
 .../Controllers/MenuController.cs             | 122 +++++++++++++++-
 .../AmtScanner.Api/appsettings.json           |   3 +
 5 files changed, 320 insertions(+), 23 deletions(-)

diff --git a/adminSystem/src/api/system-manage.ts b/adminSystem/src/api/system-manage.ts
index f26678e..09949f0 100644
--- a/adminSystem/src/api/system-manage.ts
+++ b/adminSystem/src/api/system-manage.ts
@@ -64,3 +64,56 @@ export function fetchGetMenuList() {
     url: '/api/v3/system/menus/simple'
   })
 }
+
+// 创建菜单
+export function fetchCreateMenu(data: {
+  parentId?: number | null
+  name: string
+  path: string
+  component?: string
+  title: string
+  icon?: string
+  sort?: number
+  isHide?: boolean
+  keepAlive?: boolean
+  link?: string
+  isIframe?: boolean
+  roles?: string[]
+  autoCreateComponent?: boolean  // 是否自动创建组件文件
+}) {
+  return request.post({
+    url: '/api/menu',
+    params: data,
+    showSuccessMessage: true
+  })
+}
+
+// 更新菜单
+export function fetchUpdateMenu(id: number, data: {
+  parentId?: number | null
+  name?: string
+  path?: string
+  component?: string
+  title?: string
+  icon?: string
+  sort?: number
+  isHide?: boolean
+  keepAlive?: boolean
+  link?: string
+  isIframe?: boolean
+  roles?: string[]
+}) {
+  return request.put({
+    url: `/api/menu/${id}`,
+    params: data,
+    showSuccessMessage: true
+  })
+}
+
+// 删除菜单
+export function fetchDeleteMenu(id: number) {
+  return request.del({
+    url: `/api/menu/${id}`,
+    showSuccessMessage: true
+  })
+}
diff --git a/adminSystem/src/views/system/menu/index.vue b/adminSystem/src/views/system/menu/index.vue
index 973b1e7..1ffecf9 100644
--- a/adminSystem/src/views/system/menu/index.vue
+++ b/adminSystem/src/views/system/menu/index.vue
@@ -19,7 +19,7 @@
         @refresh="handleRefresh"
       >
         <template #left>
-          <ElButton v-auth="'add'" @click="handleAddMenu" v-ripple> 添加菜单 </ElButton>
+          <ElButton @click="handleAddDirectory" v-ripple> 添加目录 </ElButton>
           <ElButton @click="toggleExpand" v-ripple>
             {{ isExpanded ? '收起' : '展开' }}
           </ElButton>
@@ -43,6 +43,7 @@
         :type="dialogType"
         :editData="editData"
         :lockType="lockMenuType"
+        :isDirectory="currentParentId === null && !editData?.id"
         @submit="handleSubmit"
       />
     </ElCard>
@@ -55,7 +56,7 @@
   import { useTableColumns } from '@/hooks/core/useTableColumns'
   import type { AppRouteRecord } from '@/types/router'
   import MenuDialog from './modules/menu-dialog.vue'
-  import { fetchGetMenuList } from '@/api/system-manage'
+  import { fetchGetMenuList, fetchCreateMenu, fetchUpdateMenu, fetchDeleteMenu } from '@/api/system-manage'
   import { ElTag, ElMessageBox } from 'element-plus'
 
   defineOptions({ name: 'Menus' })
@@ -124,7 +125,8 @@
     row: AppRouteRecord
   ): 'primary' | 'success' | 'warning' | 'info' | 'danger' => {
     if (row.meta?.isAuthButton) return 'danger'
-    if (row.children?.length) return 'info'
+    // 目录判断：有子菜单 或者 component 为 /index/index 且路径以 / 开头
+    if (row.children?.length || (row.component === '/index/index' && row.path?.startsWith('/'))) return 'info'
     if (row.meta?.link && row.meta?.isIframe) return 'success'
     if (row.path) return 'primary'
     if (row.meta?.link) return 'warning'
@@ -138,7 +140,8 @@
    */
   const getMenuTypeText = (row: AppRouteRecord): string => {
     if (row.meta?.isAuthButton) return '按钮'
-    if (row.children?.length) return '目录'
+    // 目录判断：有子菜单 或者 component 为 /index/index 且没有父级
+    if (row.children?.length || (row.component === '/index/index' && row.path?.startsWith('/'))) return '目录'
     if (row.meta?.link && row.meta?.isIframe) return '内嵌'
     if (row.path) return '菜单'
     if (row.meta?.link) return '外链'
@@ -213,8 +216,8 @@
         return h('div', buttonStyle, [
           h(ArtButtonTable, {
             type: 'add',
-            onClick: () => handleAddAuth(),
-            title: '新增权限'
+            onClick: () => handleAddChildMenu(row),
+            title: '新增菜单'
           }),
           h(ArtButtonTable, {
             type: 'edit',
@@ -222,7 +225,7 @@
           }),
           h(ArtButtonTable, {
             type: 'delete',
-            onClick: () => handleDeleteMenu()
+            onClick: () => handleDeleteMenu(row)
           })
         ])
       }
@@ -351,12 +354,28 @@
     return convertAuthListToChildren(searchedData)
   })
 
+  // 当前正在创建子菜单的父级ID
+  const currentParentId = ref<number | null>(null)
+
   /**
-   * 添加菜单
+   * 添加目录（顶级菜单，parentId=null）
    */
-  const handleAddMenu = (): void => {
+  const handleAddDirectory = (): void => {
     dialogType.value = 'menu'
     editData.value = null
+    currentParentId.value = null  // 顶级目录，无父级
+    lockMenuType.value = true
+    dialogVisible.value = true
+  }
+
+  /**
+   * 添加子菜单（在目录下创建，parentId=父级id）
+   * @param parentRow 父级目录
+   */
+  const handleAddChildMenu = (parentRow: AppRouteRecord): void => {
+    dialogType.value = 'menu'
+    editData.value = null  // 新建模式，不传editData
+    currentParentId.value = parentRow.id || null  // 保存父级ID
     lockMenuType.value = true
     dialogVisible.value = true
   }
@@ -406,6 +425,11 @@
     icon?: string
     roles?: string[]
     sort?: number
+    label?: string
+    isHide?: boolean
+    keepAlive?: boolean
+    link?: string
+    isIframe?: boolean
     [key: string]: any
   }
 
@@ -413,27 +437,99 @@
    * 提交表单数据
    * @param formData 表单数据
    */
-  const handleSubmit = (formData: MenuFormData): void => {
-    console.log('提交数据:', formData)
-    // TODO: 调用API保存数据
-    getMenuList()
+  const handleSubmit = async (formData: MenuFormData): Promise<void> => {
+    try {
+      // 判断是否是编辑模式（有id）
+      const isEdit = editData.value?.id
+      
+      if (isEdit) {
+        // 更新菜单
+        await fetchUpdateMenu(editData.value.id, {
+          name: formData.label || formData.name,
+          path: formData.path,
+          component: formData.component,
+          title: formData.name,
+          icon: formData.icon,
+          sort: formData.sort,
+          isHide: formData.isHide,
+          keepAlive: formData.keepAlive,
+          link: formData.link,
+          isIframe: formData.isIframe,
+          roles: formData.roles
+        })
+      } else {
+        // 创建菜单/目录
+        // currentParentId.value=null 表示顶级目录，有值表示子菜单
+        const isDirectory = currentParentId.value === null
+        
+        // 处理路径：子菜单路径不能以 / 开头，需要是相对路径
+        let menuPath = formData.path
+        if (!isDirectory && menuPath.startsWith('/')) {
+          // 子菜单：去掉开头的 /，只保留最后一段路径
+          const pathParts = menuPath.split('/').filter(Boolean)
+          menuPath = pathParts[pathParts.length - 1] || menuPath.replace(/^\//, '')
+        }
+        
+        // 目录路径必须以 / 开头
+        if (isDirectory && !menuPath.startsWith('/')) {
+          menuPath = '/' + menuPath
+        }
+        
+        // 子菜单必须有组件路径，如果没有填写则自动生成
+        let componentPath = formData.component
+        if (!isDirectory && !componentPath) {
+          // 获取父级目录的路径，生成组件路径
+          const parentMenu = tableData.value.find(m => m.id === currentParentId.value)
+          const parentPath = parentMenu?.path?.replace(/^\//, '') || 'pages'
+          componentPath = `/${parentPath}/${menuPath}`
+          console.log('自动生成组件路径:', componentPath)
+        }
+        
+        const requestData = {
+          parentId: currentParentId.value,  // null 表示顶级目录
+          name: formData.label || formData.name,
+          path: menuPath,
+          component: isDirectory ? '/index/index' : componentPath,  // 目录用 /index/index
+          title: formData.name,
+          icon: formData.icon,
+          sort: formData.sort || 0,
+          isHide: formData.isHide || false,
+          keepAlive: formData.keepAlive || false,
+          link: formData.link,
+          isIframe: formData.isIframe || false,
+          roles: formData.roles,
+          autoCreateComponent: !isDirectory  // 子菜单自动创建组件文件
+        }
+        
+        console.log('创建菜单请求数据:', requestData, 'isDirectory:', isDirectory, 'currentParentId:', currentParentId.value)
+        
+        await fetchCreateMenu(requestData)
+      }
+      dialogVisible.value = false
+      getMenuList()
+    } catch (error) {
+      console.error('保存失败:', error)
+    }
   }
 
   /**
    * 删除菜单
+   * @param row 菜单行数据
    */
-  const handleDeleteMenu = async (): Promise<void> => {
+  const handleDeleteMenu = async (row: AppRouteRecord): Promise<void> => {
     try {
       await ElMessageBox.confirm('确定要删除该菜单吗？删除后无法恢复', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       })
-      ElMessage.success('删除成功')
-      getMenuList()
-    } catch (error) {
-      if (error !== 'cancel') {
-        ElMessage.error('删除失败')
+      if (row.id) {
+        await fetchDeleteMenu(row.id)
+        getMenuList()
+      }
+    } catch (error: any) {
+      if (error !== 'cancel' && error?.message !== 'cancel') {
+        // 错误已由 http 工具处理
       }
     }
   }
diff --git a/adminSystem/src/views/system/menu/modules/menu-dialog.vue b/adminSystem/src/views/system/menu/modules/menu-dialog.vue
index f512301..ddea93e 100644
--- a/adminSystem/src/views/system/menu/modules/menu-dialog.vue
+++ b/adminSystem/src/views/system/menu/modules/menu-dialog.vue
@@ -8,6 +8,31 @@
     class="menu-dialog"
     @closed="handleClosed"
   >
+    <!-- 填写说明 -->
+    <ElAlert
+      v-if="!isEdit && form.menuType === 'menu'"
+      :title="isDirectory ? '创建目录说明' : '创建子菜单说明'"
+      type="info"
+      :closable="false"
+      show-icon
+      style="margin-bottom: 16px"
+    >
+      <template #default>
+        <div v-if="isDirectory" style="line-height: 1.8">
+          <div><strong>菜单名称：</strong>显示在侧边栏的名称，如"设备管理"</div>
+          <div><strong>路由地址：</strong>必须以 / 开头，如 /device</div>
+          <div><strong>权限标识：</strong>唯一标识，如 Device（不能与现有的重复）</div>
+          <div><strong>组件路径：</strong>留空即可，系统会自动设置</div>
+        </div>
+        <div v-else style="line-height: 1.8">
+          <div><strong>菜单名称：</strong>显示在侧边栏的名称，如"设备列表"</div>
+          <div><strong>路由地址：</strong>相对路径，不要以 / 开头，如 list</div>
+          <div><strong>权限标识：</strong>唯一标识，如 DeviceList（不能与现有的重复）</div>
+          <div><strong>组件路径：</strong>对应 views 目录下的组件，如 /device/list</div>
+        </div>
+      </template>
+    </ElAlert>
+
     <ArtForm
       ref="formRef"
       v-model="form"
@@ -38,7 +63,7 @@
 
 <script setup lang="ts">
   import type { FormRules } from 'element-plus'
-  import { ElIcon, ElTooltip } from 'element-plus'
+  import { ElIcon, ElTooltip, ElAlert } from 'element-plus'
   import { QuestionFilled } from '@element-plus/icons-vue'
   import { formatMenuTitle } from '@/utils/router'
   import type { AppRouteRecord } from '@/types/router'
@@ -101,6 +126,7 @@
     editData?: AppRouteRecord | any
     type?: 'menu' | 'button'
     lockType?: boolean
+    isDirectory?: boolean  // 是否是创建目录模式
   }
 
   interface Emits {
@@ -111,7 +137,8 @@
   const props = withDefaults(defineProps<Props>(), {
     visible: false,
     type: 'menu',
-    lockType: false
+    lockType: false,
+    isDirectory: false
   })
 
   const emit = defineEmits<Emits>()
diff --git a/backend-csharp/AmtScanner.Api/Controllers/MenuController.cs b/backend-csharp/AmtScanner.Api/Controllers/MenuController.cs
index 9cbaf51..4b9ff71 100644
--- a/backend-csharp/AmtScanner.Api/Controllers/MenuController.cs
+++ b/backend-csharp/AmtScanner.Api/Controllers/MenuController.cs
@@ -57,11 +57,39 @@ public class MenuController : ControllerBase
     [HttpPost("api/menu")]
     public async Task<ActionResult<ApiResponse<Menu>>> CreateMenu([FromBody] CreateMenuRequest request)
     {
+        Console.WriteLine($"[CreateMenu] 收到请求: ParentId={request.ParentId}, Name={request.Name}, Path={request.Path}, Component={request.Component}");
+        
+        // 处理路径：子菜单（有 ParentId）的路径不能以 / 开头
+        var menuPath = request.Path;
+        if (request.ParentId.HasValue && menuPath.StartsWith("/"))
+        {
+            // 子菜单：取最后一段路径作为相对路径
+            var pathParts = menuPath.Split('/', StringSplitOptions.RemoveEmptyEntries);
+            menuPath = pathParts.Length > 0 ? pathParts[^1] : menuPath.TrimStart('/');
+            Console.WriteLine($"[CreateMenu] 子菜单路径已修正: {request.Path} -> {menuPath}");
+        }
+        
+        // 目录（无 ParentId）的路径必须以 / 开头
+        if (!request.ParentId.HasValue && !menuPath.StartsWith("/"))
+        {
+            menuPath = "/" + menuPath;
+            Console.WriteLine($"[CreateMenu] 目录路径已修正: {request.Path} -> {menuPath}");
+        }
+        
+        // 检查 Name 是否唯一，如果重复则自动生成唯一名称
+        var menuName = request.Name;
+        if (await _context.Menus.AnyAsync(m => m.Name == menuName))
+        {
+            // 生成唯一名称：原名称 + 时间戳
+            menuName = $"{request.Name}_{DateTime.Now:yyyyMMddHHmmss}";
+            Console.WriteLine($"[CreateMenu] 菜单名称已修正（避免重复）: {request.Name} -> {menuName}");
+        }
+        
         var menu = new Menu
         {
             ParentId = request.ParentId,
-            Name = request.Name,
-            Path = request.Path,
+            Name = menuName,
+            Path = menuPath,
             Component = request.Component,
             Title = request.Title,
             Icon = request.Icon,
@@ -75,9 +103,98 @@ public class MenuController : ControllerBase
 
         _context.Menus.Add(menu);
         await _context.SaveChangesAsync();
+        
+        Console.WriteLine($"[CreateMenu] 菜单已创建: Id={menu.Id}, ParentId={menu.ParentId}");
+        
+        // 如果有组件路径且不是目录组件，自动创建 Vue 组件文件
+        if (!string.IsNullOrEmpty(request.Component) && 
+            request.Component != "/index/index" && 
+            request.AutoCreateComponent)
+        {
+            try
+            {
+                await CreateVueComponentAsync(request.Component, request.Title ?? request.Name);
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine($"[CreateMenu] 创建组件文件失败: {ex.Message}");
+                // 不影响菜单创建，只是记录日志
+            }
+        }
 
         return Ok(ApiResponse<Menu>.Success(menu, "菜单创建成功"));
     }
+    
+    /// <summary>
+    /// 创建 Vue 组件文件
+    /// </summary>
+    private async Task CreateVueComponentAsync(string componentPath, string title)
+    {
+        var configuration = HttpContext.RequestServices.GetRequiredService<IConfiguration>();
+        var viewsPath = configuration["Frontend:ViewsPath"] ?? "../adminSystem/src/views";
+        
+        // 组件路径格式: /test/page -> test/page.vue
+        // 统一使用正斜杠，然后转换为系统路径分隔符
+        var relativePath = componentPath.TrimStart('/').Replace('\\', '/');
+        
+        // 构建完整路径，确保路径分隔符正确
+        var fullPath = Path.GetFullPath(Path.Combine(viewsPath, $"{relativePath}.vue"));
+        var directory = Path.GetDirectoryName(fullPath);
+        
+        Console.WriteLine($"[CreateVueComponent] viewsPath: {viewsPath}");
+        Console.WriteLine($"[CreateVueComponent] relativePath: {relativePath}");
+        Console.WriteLine($"[CreateVueComponent] fullPath: {fullPath}");
+        Console.WriteLine($"[CreateVueComponent] directory: {directory}");
+        
+        // 如果文件已存在，不覆盖
+        if (System.IO.File.Exists(fullPath))
+        {
+            Console.WriteLine($"[CreateVueComponent] 组件文件已存在: {fullPath}");
+            return;
+        }
+        
+        // 创建目录
+        if (!string.IsNullOrEmpty(directory) && !Directory.Exists(directory))
+        {
+            Console.WriteLine($"[CreateVueComponent] 创建目录: {directory}");
+            Directory.CreateDirectory(directory);
+        }
+        
+        // 生成组件名称 (PascalCase)
+        var componentName = string.Join("", relativePath.Split('/', '-', '_')
+            .Where(s => !string.IsNullOrEmpty(s))
+            .Select(s => char.ToUpper(s[0]) + s.Substring(1)));
+        
+        // 用于 CSS 类名的路径（使用连字符）
+        var cssClassName = relativePath.Replace('/', '-').Replace('_', '-');
+        
+        // 生成 Vue 组件模板
+        var template = $@"<template>
+  <div class=""{cssClassName}-page"">
+    <ElCard>
+      <template #header>
+        <span>{title}</span>
+      </template>
+      <p>这是 {title} 页面</p>
+      <p>组件路径：{componentPath}</p>
+    </ElCard>
+  </div>
+</template>
+
+<script setup lang=""ts"">
+defineOptions({{ name: '{componentName}' }})
+</script>
+
+<style scoped>
+.{cssClassName}-page {{
+  padding: 20px;
+}}
+</style>
+";
+        
+        await System.IO.File.WriteAllTextAsync(fullPath, template, System.Text.Encoding.UTF8);
+        Console.WriteLine($"[CreateVueComponent] 组件文件已创建: {fullPath}");
+    }
 
     /// <summary>
     /// 更新菜单
@@ -221,6 +338,7 @@ public class CreateMenuRequest
     public string? Link { get; set; }
     public bool IsIframe { get; set; }
     public List<string>? Roles { get; set; }
+    public bool AutoCreateComponent { get; set; } = true;  // 是否自动创建组件文件
 }
 
 /// <summary>
diff --git a/backend-csharp/AmtScanner.Api/appsettings.json b/backend-csharp/AmtScanner.Api/appsettings.json
index 9c424d3..88aba17 100644
--- a/backend-csharp/AmtScanner.Api/appsettings.json
+++ b/backend-csharp/AmtScanner.Api/appsettings.json
@@ -28,5 +28,8 @@
     "Audience": "AmtScannerClient",
     "AccessTokenExpirationMinutes": 60,
     "RefreshTokenExpirationDays": 7
+  },
+  "Frontend": {
+    "ViewsPath": "../../adminSystem/src/views"
   }
 }