yg-yygl 0.0.1

package/src/views/sys/app-menu/menu/index.vue

@@ -0,0 +1,1071 @@
+<script setup lang="ts">
+import type {
+  BusinessFilterItem,
+  BusinessPageTabItem,
+  MenuExportParams,
+} from '@udp/component-ui';
+
+import type { AppMenu, AppMenuFilterParams } from '../../../../api/app-menu/menuTypes';
+import type { App } from '../../../../api/app-menu/types';
+
+import { computed, h, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+
+import {
+  BusinessFilterBar,
+  BusinessPageTabs,
+  Drawer,
+  ExportButton,
+  Icon,
+  IconButton,
+  Table,
+} from '@udp/component-ui';
+import { useUserStore } from '@udp/stores';
+
+import { CollectionTag, Plus, Setting } from '@element-plus/icons-vue';
+import dayjs from 'dayjs';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import {
+  deleteAppMenu,
+  exportAppMenu,
+  getAppMenuChildren,
+  getMenuExtendList,
+  getMenuExtendValueList,
+  toggleAppMenuStatus,
+} from '../../../../api/app-menu/menu';
+import { getRequestClient } from '../../../../api/request';
+import { StatusTag } from '../../../../components/custom-tags';
+import { MainContainer } from '../../../../components/main-container';
+
+import MenuForm from './menu-form.vue';
+import MenuLabelManage from './menu-label-manage.vue';
+import MenuExtendManage from './menu-extend-manage.vue';
+
+// 定义组件属性
+const props = defineProps<{
+  application?: App;
+}>();
+
+const emit = defineEmits(['onBack']);
+
+// 查询参数
+const searchParams = ref<AppMenuFilterParams>({
+  applicationId: props?.application?.id,
+});
+// 菜单样式类型：0-Web菜单，1-App菜单
+const menuStyle = ref(0);
+const filterItems: BusinessFilterItem[] = [
+  {
+    prop: 'searchKeyword',
+    type: 'input',
+    width: 240,
+    placeholder: '请输入菜单名称/标签',
+  },
+];
+
+const menuTabItems = computed<BusinessPageTabItem[]>(() => [
+  { label: 'Web端菜单', value: 0 },
+  { label: '移动端菜单', value: 1 },
+]);
+
+// 🖼️ 图标 blob URL 缓存（文件 ID → blob URL）
+const iconBlobUrlMap = reactive<Record<string, string>>({});
+
+const isFileId = (icon: string) => {
+  return icon && !icon.startsWith('http') && !icon.startsWith('/') && !icon.startsWith('custom:') && !icon.includes(':');
+};
+
+const fetchIconBlobUrls = async (items: AppMenu[]) => {
+  const fetchTasks: Promise<void>[] = [];
+  for (const row of items) {
+    if (isFileId(row.icon) && !iconBlobUrlMap[row.icon]) {
+      const id = row.icon;
+      fetchTasks.push(
+        getRequestClient().get(`/api/common/preview/file?id=${encodeURIComponent(id)}`, {
+          responseType: 'blob',
+          responseReturn: 'raw',
+        }).then((res) => {
+          iconBlobUrlMap[id] = URL.createObjectURL(res.data);
+        }).catch(() => {}),
+      );
+    }
+  }
+  await Promise.all(fetchTasks);
+};
+
+onBeforeUnmount(() => {
+  for (const url of Object.values(iconBlobUrlMap)) {
+    if (url.startsWith('blob:')) URL.revokeObjectURL(url);
+  }
+});
+
+// 基础列配置
+const baseColumns = [
+  { prop: 'menuName', label: '菜单名称', minWidth: 150 },
+  {
+    prop: 'icon',
+    label: '菜单图标',
+    width: 80,
+    render: ({ row }: { row: any }) => {
+      if (!row.icon) return '';
+      // 文件 ID 模式：blob URL
+      if (iconBlobUrlMap[row.icon]) {
+        return h('img', {
+          src: iconBlobUrlMap[row.icon],
+          alt: '菜单图标',
+          class: 'w-5 h-5 object-contain',
+        });
+      }
+      // 兼容旧数据：http URL
+      if (row.icon.startsWith('http') || row.icon.startsWith('/')) {
+        return h('img', {
+          src: row.icon,
+          alt: '菜单图标',
+          class: 'w-5 h-5 object-contain',
+        });
+      }
+      // 图标名称
+      return h(Icon, {
+        name: row.icon,
+        size: 20,
+        color: '#868686',
+      });
+    },
+  },
+  { prop: 'url', label: '路由地址', minWidth: 150 },
+  { prop: 'menuType', label: '类型', slot: 'menuType', width: 90 },
+  // fjl modify 注释掉按钮类型列
+  // {
+  //   prop: 'permissionType',
+  //   label: '按钮类型',
+  //   slot: 'permissionType',
+  //   width: 90,
+  // },
+  { prop: 'orderBy', label: '排序', width: 80 },
+  {
+    prop: 'visual',
+    label: '是否可见',
+    width: 80,
+    render: ({ row }: { row: any }) =>
+      h(StatusTag, {
+        value: row.visual,
+        showDot: false,
+        activeValue: 0,
+        inactiveValue: 1,
+        activeText: '可见',
+        inactiveText: '隐藏',
+      }),
+  },
+  { prop: 'labels', label: '菜单标签', slot: 'labels', minWidth: 150 },
+  {
+    prop: 'stopUse',
+    label: '菜单状态',
+    width: 100,
+    render: ({ row }: { row: any }) =>
+      h(StatusTag, {
+        value: row.stopUse,
+        activeValue: 0,
+        inactiveValue: 1,
+      }),
+  },
+];
+
+// 动态生成列配置（包含扩展属性）
+const columns = computed(() => {
+  const dynamicColumns = [...baseColumns];
+
+  // 添加扩展属性列（只显示isShow为1的）
+  extendFields.value
+    .filter((field) => field.isShow === 1)
+    .forEach((field) => {
+      dynamicColumns.push({
+        prop: `extend_${field.id}`,
+        label: field.fieldName,
+        minWidth: 120,
+        slot: `extend_${field.id}`,
+      });
+    });
+
+  return dynamicColumns;
+});
+
+// 状态管理
+const loading = ref(false);
+const data = ref<AppMenu[]>([]);
+
+// 监听菜单数据变化，自动加载图标 blob URL
+watch(data, (items) => {
+  fetchIconBlobUrls(items);
+}, { immediate: true });
+const drawerVisible = ref(false);
+const labelDrawerVisible = ref(false);
+const extendDrawerVisible = ref(false);
+const editRow = ref<AppMenu | null>(null);
+const parentData = ref<AppMenu | null>(null);
+const menuFormRef = ref();
+const tableRef = ref<InstanceType<typeof Table>>();
+const tableShow = ref(true); // 控制表格组件显示隐藏，用于解决树型懒加载缓存问题
+
+// 扩展属性配置
+const extendFields = ref<any[]>([]);
+
+// 计算属性
+const isEdit = computed(() => !!editRow.value?.id);
+
+// 获取菜单类型标签类型
+const getTypeTagType = (menuType: number) => {
+  const typeMap: Record<number, string> = {
+    0: 'primary', // 分类
+    1: 'success', // 菜单
+    2: 'info', // 按钮
+  };
+  return typeMap[menuType] || 'info';
+};
+
+// 获取菜单类型文本
+const getTypeText = (menuType: number) => {
+  const typeMap: Record<number, string> = {
+    0: '分类',
+    1: '菜单',
+    2: '按钮',
+  };
+  return typeMap[menuType] || '-';
+};
+
+// 获取按钮类型文本
+const getPermissionTypeText = (permissionType: string) => {
+  const typeMap: Record<string, string> = {
+    add: '新增',
+    delete: '删除',
+    update: '修改',
+    query: '查询',
+  };
+  return typeMap[permissionType] || '-';
+};
+
+// 加载菜单根节点数据（懒加载）
+const loadData = async () => {
+  try {
+    loading.value = true;
+
+    // 初始加载时传入parentId为0，获取根节点
+    const queryParams = {
+      ...searchParams.value,
+      menuStyle: menuStyle.value,
+      applicationId: props.application?.id,
+    };
+    const response = await getAppMenuChildren(queryParams);
+
+    // 判断是否有搜索条件
+    const hasSearchCondition = !!searchParams.value?.searchKeyword;
+
+    data.value = response || [];
+
+    // 🔥 处理后端返回的 extendValues 为 null 的情况（与 loadChildren 保持一致）
+    if (data.value.length > 0) {
+      data.value.forEach((item) => {
+        if (item.extendValues === null || item.extendValues === undefined) {
+          item.extendValues = [];
+        }
+      });
+    }
+
+    // 如果有搜索条件，自动展开匹配的节点
+    if (hasSearchCondition) {
+      // 使用模拟点击方式自动展开
+      /*
+      setTimeout(() => {
+        simulateExpandClick();
+      }, 500);
+      */
+    }
+
+    // 加载完数据后显示表格
+    tableShow.value = true;
+  } catch (error) {
+    console.error('获取菜单数据失败:', error);
+    ElMessage.error('获取菜单数据失败');
+    tableShow.value = true; // 错误时也要显示表格
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 懒加载子菜单数据
+const loadChildren = async (row: AppMenu, treeNode: any, resolve: Function) => {
+  try {
+    // 合并搜索条件和父级ID
+    const queryParams = {
+      ...searchParams.value,
+      parentId: row.id,
+      menuStyle: menuStyle.value,
+      applicationId: props.application?.id,
+    };
+    const response = await getAppMenuChildren(queryParams);
+
+    // 🔥 处理后端返回的 extendValues 为 null 的情况
+    if (response && response.length > 0) {
+      response.forEach((item) => {
+        if (item.extendValues === null || item.extendValues === undefined) {
+          item.extendValues = [];
+        }
+      });
+    }
+
+    await fetchIconBlobUrls(response || [])
+
+
+    resolve(response || []);
+  } catch (error) {
+    console.error('获取子菜单数据失败:', error);
+    ElMessage.error('获取子菜单数据失败');
+    resolve([]);
+  }
+};
+
+// 搜索
+const search = () => {
+  // 使用v-if重建表格组件解决缓存问题
+  tableShow.value = false;
+  nextTick(() => {
+    loadData();
+  });
+};
+
+// 重置
+const reset = () => {
+  searchParams.value = {
+    applicationId: props?.application?.id,
+  };
+  tableShow.value = false;
+  nextTick(() => {
+    loadData();
+  });
+};
+
+// 刷新
+const refresh = () => {
+  tableShow.value = false;
+  nextTick(() => {
+    loadData();
+  });
+};
+
+// 切换菜单类型
+const handleMenuStyleChange = (value: number) => {
+  menuStyle.value = value;
+  loadData();
+  loadExtendFields();
+};
+
+// 新增菜单
+const handleAdd = () => {
+  editRow.value = null;
+  parentData.value = null;
+  drawerVisible.value = true;
+};
+
+// 新增子菜单
+const handleAddChild = (row: AppMenu) => {
+  editRow.value = null;
+  parentData.value = row;
+  drawerVisible.value = true;
+};
+
+// 编辑菜单
+const handleEdit = (row: AppMenu) => {
+  editRow.value = { ...row };
+  parentData.value = null;
+  drawerVisible.value = true;
+};
+
+// 启用停用菜单
+const handleToggleStatus = async (row: AppMenu) => {
+  try {
+    const action = row.stopUse === 0 ? '停用' : '启用';
+    await ElMessageBox.confirm(`确定要${action}这条数据吗？`, '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
+
+    await toggleAppMenuStatus(row.id);
+    ElMessage.success(`${action}成功`);
+    refresh();
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('操作失败:', error);
+      ElMessage.error('操作失败');
+    }
+  }
+};
+
+// 删除单个菜单
+const deleteRow = async (row: AppMenu) => {
+  try {
+    let deleteChildren = false;
+
+    // 如果菜单有子菜单，显示包含删除子菜单选项的确认框
+    // if (row.hasChildren) {
+    row.hasChildren
+      ? await ElMessageBox.confirm(
+          h('div', [
+            h(
+              'p',
+              {
+                style: 'margin-bottom: 16px; color: #606266; line-height: 1.5;',
+              },
+              `确定要删除菜单"${row.menuName}"吗？此操作不可恢复！`,
+            ),
+            h(
+              'div',
+              {
+                style:
+                  'display: flex; align-items: center; padding: 12px; background-color: #f5f7fa; border-radius: 4px; border-left: 4px solid #e6a23c; margin-top: 12px;',
+              },
+              [
+                h('input', {
+                  type: 'checkbox',
+                  id: 'deleteChildrenCheckbox',
+                  style: 'margin-right: 8px; transform: scale(1.1);',
+                  onChange: (e: Event) => {
+                    deleteChildren = (e.target as HTMLInputElement).checked;
+                  },
+                }),
+                h(
+                  'label',
+                  {
+                    for: 'deleteChildrenCheckbox',
+                    style:
+                      'cursor: pointer; font-weight: 500; user-select: none;',
+                  },
+                  '一键删除子菜单和按钮，勾选后删除该菜单及其子菜单和按钮',
+                ),
+              ],
+            ),
+          ]),
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+            dangerouslyUseHTMLString: false,
+            icon: h('Icon', {
+              name: 'fluent-color:warning-32',
+            }),
+          },
+        )
+      : await ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        });
+    // } else {
+    //   // 如果没有子菜单，显示简单的确认框
+    //   await ElMessageBox.confirm(
+    //     `确定要<b style="color: var(--el-color-danger);">删除</b>菜单"${row.menuName}"吗？此操作不可恢复！`,
+    //     '删除确认',
+    //     {
+    //       confirmButtonText: '确定',
+    //       cancelButtonText: '取消',
+    //       type: 'warning',
+    //       dangerouslyUseHTMLString: true,
+    //     },
+    //   );
+    // }
+
+    await deleteAppMenu(row.id, deleteChildren);
+    ElMessage.success('删除成功');
+    refresh();
+  } catch (error) {
+    // 用户取消操作时不显示错误信息
+    if (error !== 'cancel') {
+      console.error('删除菜单失败:', error);
+    }
+  }
+};
+
+// 取消操作
+const handleCancel = () => {
+  drawerVisible.value = false;
+};
+
+// 保存操作
+const handleSave = async () => {
+  try {
+    // await menuFormRef.value?.validate();
+    // 触发表单提交
+    const success = await menuFormRef.value?.handleSubmit();
+    if (success) {
+      handleCancel();
+      refresh();
+    }
+  } catch (error) {
+    console.error('表单验证失败:', error);
+  }
+};
+
+// 抽屉关闭
+const handleDrawerClosed = () => {
+  editRow.value = null;
+  parentData.value = null;
+};
+
+// 菜单标签管理
+const handleLabelManage = () => {
+  labelDrawerVisible.value = true;
+};
+
+// 菜单扩展属性管理
+const handleExtendManage = () => {
+  extendDrawerVisible.value = true;
+};
+
+// ==================== 扩展属性相关方法 ====================
+
+// 加载扩展属性配置
+const loadExtendFields = async () => {
+  try {
+    const res = await getMenuExtendList({
+      applicationId: props.application?.id,
+      menuStyle: menuStyle.value,
+    });
+    extendFields.value = res || [];
+  } catch (error) {
+    console.error('加载扩展属性配置失败:', error);
+  }
+};
+
+// 解析CHECKBOX类型的扩展属性值
+const resolveCheckboxValue = (extendValue: any, options: any[]): string => {
+  try {
+    const valueArray = JSON.parse(extendValue.fieldValue || '[]');
+    if (Array.isArray(valueArray) && valueArray.length > 0) {
+      const labels = valueArray.map(
+        (value) => options.find((opt: any) => opt.value === value)?.label || value,
+      );
+      return labels.join(', ');
+    }
+    return '';
+  } catch {
+    return extendValue.fieldValue;
+  }
+};
+
+// 解析带选项的扩展属性值
+const resolveOptionValue = (extendValue: any): string | undefined => {
+  if (!extendValue.fieldOption) return undefined;
+  try {
+    const options = JSON.parse(extendValue.fieldOption);
+    if (options.length <= 0) return undefined;
+    if (extendValue.fieldType === 'CHECKBOX') {
+      return resolveCheckboxValue(extendValue, options);
+    }
+    return options.find((item: any) => item.value === extendValue.fieldValue)?.label;
+  } catch {
+    return undefined;
+  }
+};
+
+// 获取扩展属性值
+const getExtendValue = (row: any, id: string) => {
+  if (!row.extendValues || !Array.isArray(row.extendValues)) {
+    return '';
+  }
+
+  const extendValue = row.extendValues.find(
+    (item: any) => String(item.fieldsId) === String(id),
+  );
+
+  if (!extendValue) {
+    return '';
+  }
+
+  return resolveOptionValue(extendValue) ?? extendValue.fieldValue;
+};
+
+/**
+ * 刷新扩展属性数据
+ */
+const refreshExtendData = async () => {
+  await loadExtendFields();
+  refresh();
+};
+
+// 计算导出参数
+const exportParams = computed<MenuExportParams>(() => {
+  const normalizedColumns = tableRef.value?.normalizedColumns || [];
+
+  // 获取基础字段（过滤掉扩展属性字段）
+  const selectedFields = normalizedColumns
+    .filter((item: any) => !item.hidden && !item.prop.startsWith('extend_'))
+    .map((item: any) => item.prop);
+
+  // 获取扩展属性字段ID列表（从以 extend_ 开头的列中提取ID）
+  const extendFieldIds = normalizedColumns
+    .filter((item: any) => !item.hidden && item.prop.startsWith('extend_'))
+    .map((item: any) => item.prop.replace('extend_', ''));
+
+  return {
+    queryCondition: {
+      ...searchParams.value,
+      menuStyle: menuStyle.value,
+      applicationId: props.application?.id,
+    },
+    selectedFields: [...selectedFields, 'menuStyle'],
+    extendFieldIds,
+    fileName: `菜单数据_${dayjs().format('YYYYMMDD')}.xlsx`,
+  };
+});
+
+const currentTenantId = computed(() => {
+  return useUserStore().accountInfo?.tenantId;
+});
+
+// 初始化
+onMounted(() => {
+  loadData();
+  loadExtendFields();
+});
+
+const handleFilterSearch = () => {
+  handleMenuStyleChange(menuStyle.value);
+};
+
+const handleFilterReset = () => {
+  reset();
+};
+</script>
+
+<template>
+  <MainContainer
+    showHeader
+    show-back
+    :headerTitle="`${application?.appName} - 菜单管理`"
+    @back="emit('onBack')"
+  >
+    <div class="flex h-full w-full flex-col overflow-hidden bg-background">
+      <BusinessPageTabs
+        v-model="menuStyle"
+        :items="menuTabItems"
+        @change="handleMenuStyleChange"
+      />
+      <BusinessFilterBar
+        v-model="searchParams"
+        :items="filterItems"
+        :loading="loading"
+        @search="handleFilterSearch"
+        @reset="handleFilterReset"
+      />
+
+      <Table
+        ref="tableRef"
+        :data="data"
+        :columns="columns"
+        :loading="loading"
+        v-if="tableShow"
+        show-toolbar
+        show-top-actions
+        show-action
+        :show-layout="false"
+        layout-type="table"
+        action-width="160px"
+        row-key="id"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        :load="loadChildren"
+        lazy
+        @refresh="refresh"
+        :on-edit="(row: any) => handleEdit(row as AppMenu)"
+        :on-delete="(row: any) => deleteRow(row as AppMenu)"
+      >
+        <template #top-actions>
+          <div class="flex flex-wrap items-center gap-2">
+            <IconButton type="primary" icon-type="add" @click="handleAdd">
+              新增菜单
+            </IconButton>
+            <IconButton icon="hx-line-built-in:bookmark-line" @click="handleLabelManage">
+              菜单标签
+            </IconButton>
+            <IconButton icon-type="setting" @click="handleExtendManage">
+              扩展属性
+            </IconButton>
+            <ExportButton
+              :export-api="exportAppMenu"
+              :params="exportParams"
+              text="导出"
+              loading-type="progress"
+              :show-progress="true"
+              :min-loading-time="1200"
+              success-message="菜单数据导出成功"
+              error-message="菜单数据导出失败，请重试"
+            />
+          </div>
+        </template>
+
+      <!-- 菜单名称列 -->
+      <template #menuName="{ row }">
+        <div class="flex items-center">
+          <el-icon v-if="row.icon" class="mr-2">
+            <component :is="row.icon" />
+          </el-icon>
+          <span>{{ row.menuName }}</span>
+        </div>
+      </template>
+
+      <!-- 菜单类型列 -->
+      <template #menuType="{ row }">
+        <el-tag :type="getTypeTagType(row.menuType)" size="small">
+          {{ getTypeText(row.menuType) }}
+        </el-tag>
+      </template>
+
+      <!-- 按钮类型列 -->
+      <template #permissionType="{ row }">
+        <span v-if="row.permissionType">
+          {{ getPermissionTypeText(row.permissionType) }}按钮
+        </span>
+        <span v-else></span>
+      </template>
+
+      <!-- 可见状态列 -->
+      <template #visual="{ row }">
+        <el-tag :type="row.visual === 1 ? 'success' : 'info'" size="small">
+          {{ row.visual === 0 ? '可见' : '隐藏' }}
+        </el-tag>
+      </template>
+
+      <!-- 菜单标签列 -->
+      <template #labels="{ row }">
+        <div class="flex gap-1">
+          <el-tag
+            v-for="label in row.labels"
+            :key="label.id"
+            size="small"
+            :color="label.color"
+            effect="light"
+            class="label-tag-limited"
+          >
+            <span class="label-text-truncate">#{{ label.labelName }}</span>
+          </el-tag>
+        </div>
+      </template>
+
+      <!-- 动态扩展属性插槽 -->
+      <template
+        v-for="field in extendFields.filter((f) => f.isShow === 1)"
+        :key="field.id"
+        #[`extend_${field.id}`]="{ row }"
+      >
+        <span>{{ getExtendValue(row, field.id) || '-' }}</span>
+      </template>
+
+      <!-- 自定义操作列 -->
+      <template #action="{ row }">
+        <el-button
+          type="primary"
+          link
+          :disabled="
+            currentTenantId !== '0' && currentTenantId !== row.tenantId
+          "
+          @click="handleEdit(row)"
+        >
+          编辑
+        </el-button>
+        <el-button
+          :type="row.stopUse === 0 ? 'danger' : 'primary'"
+          link
+          :disabled="
+            currentTenantId !== '0' && currentTenantId !== row.tenantId
+          "
+          @click="handleToggleStatus(row)"
+        >
+          {{ row.stopUse === 0 ? '停用' : '启用' }}
+        </el-button>
+        <el-popover
+          placement="bottom"
+          :width="100"
+          trigger="hover"
+          popper-style="min-width: 100px"
+        >
+          <template #reference>
+            <el-button type="primary" link>更多</el-button>
+          </template>
+          <div class="flex flex-col items-center gap-2">
+            <el-button
+              type="danger"
+              link
+              :disabled="
+                currentTenantId !== '0' && currentTenantId !== row.tenantId
+              "
+              @click="deleteRow(row)"
+            >
+              删除
+            </el-button>
+            <el-button
+              type="primary"
+              link
+              :disabled="
+                currentTenantId !== '0' && currentTenantId !== row.tenantId
+              "
+              @click="handleAddChild(row)"
+            >
+              新增下级
+            </el-button>
+          </div>
+        </el-popover>
+      </template>
+      </Table>
+    </div>
+    <!-- 菜单表单抽屉 -->
+    <Drawer
+      v-model="drawerVisible"
+      :title="isEdit ? '编辑菜单' : '新增菜单'"
+      :type="isEdit ? 'edit' : 'add'"
+      size="808px"
+      @confirm="handleSave"
+      @closed="handleDrawerClosed"
+    >
+      <MenuForm
+        ref="menuFormRef"
+        :edit-data="editRow"
+        :parent-data="parentData"
+        :menu-style="menuStyle"
+        :application-id="props.application?.id"
+        :expand-fields="extendFields"
+      />
+    </Drawer>
+
+    <!-- 菜单标签管理抽屉 -->
+    <Drawer
+      v-model="labelDrawerVisible"
+      title="菜单标签管理"
+      icon="icon-park-solid:tag"
+      size="800px"
+      @close="refresh"
+      :show-confirm-button="false"
+    >
+      <MenuLabelManage
+        @success="refresh"
+        :menu-style="menuStyle"
+        :application-id="props.application?.id"
+      />
+    </Drawer>
+
+    <!-- 菜单扩展属性管理抽屉 -->
+    <Drawer
+      v-model="extendDrawerVisible"
+      title="菜单扩展属性管理"
+      icon="fluent:extension-add-20-regular"
+      size="900px"
+      :show-confirm-button="false"
+    >
+      <MenuExtendManage
+        :application-id="props.application?.id"
+        :menu-style="menuStyle"
+        @refresh="refreshExtendData"
+      />
+    </Drawer>
+  </MainContainer>
+</template>
+
+<style scoped>
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.text-green-500 {
+  color: #10b981;
+}
+
+.text-red-500 {
+  color: #ef4444;
+}
+
+/* 菜单标签宽度限制 */
+.label-text-truncate {
+  display: inline-block;
+  max-width: 4em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+/* 菜单类型切换Tab样式 */
+.menu-style-tabs {
+  margin-bottom: 16px;
+  background: var(--background--deep);
+  border-radius: 8px;
+}
+
+.menu-style-tabs :deep(.el-tabs__header) {
+  margin: 0;
+  border-bottom: 1px solid var(--el-border-color-light);
+}
+
+.menu-style-tabs :deep(.el-tabs__nav-wrap) {
+  padding: 0 16px;
+}
+
+.menu-style-tabs :deep(.el-tabs__item) {
+  padding: 0 20px;
+  height: 48px;
+  line-height: 48px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--el-text-color-regular);
+  transition: all 0.3s ease;
+}
+
+.menu-style-tabs :deep(.el-tabs__item.is-active) {
+  color: var(--el-color-primary);
+  font-weight: 600;
+}
+
+.menu-style-tabs :deep(.el-tabs__active-bar) {
+  height: 3px;
+  border-radius: 2px;
+}
+/* 抽屉样式 */
+:deep(.menu-drawer) {
+  .el-drawer__header {
+    padding: 0;
+    margin-bottom: 0;
+    border-bottom: none;
+  }
+
+  .el-drawer__body {
+    padding: 0;
+  }
+}
+
+.drawer-header {
+  position: relative;
+  height: 80px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px 12px 0 0;
+}
+
+.header-background {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px 12px 0 0;
+}
+
+.header-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0 24px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.title-section {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.icon-wrapper {
+  position: relative;
+}
+
+.icon-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  background: rgb(255 255 255 / 20%);
+  border-radius: 50%;
+  transition: all 0.3s ease;
+}
+
+.icon-circle:hover {
+  background: rgb(255 255 255 / 30%);
+}
+
+.close-icon {
+  font-size: 16px;
+  color: white;
+}
+
+.drawer-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: white;
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.cancel-btn {
+  padding: 8px 16px;
+  font-size: 14px;
+  color: white;
+  background: transparent;
+  border: 1px solid rgb(255 255 255 / 30%);
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.cancel-btn:hover {
+  background: rgb(255 255 255 / 10%);
+  border-color: rgb(255 255 255 / 50%);
+}
+
+.save-btn {
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #667eea;
+  background: white;
+  border: none;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.save-btn:hover {
+  background: #f8f9ff;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  transform: translateY(-1px);
+}
+
+.drawer-body {
+  height: calc(100vh - 80px);
+  padding: 24px;
+  overflow-y: auto;
+}
+</style>