yg-yygl 0.0.1

package/dist/views/sys/app-menu/application/index.vue

@@ -0,0 +1,868 @@
+<script setup lang="ts">
+// 导入TableData类型
+import type {
+  BusinessFilterItem,
+  BusinessPageTabItem,
+  IconActionItem,
+  TableColumn,
+} from '@udp/component-ui';
+
+// 导入应用类型
+import type { App } from '../../../../api/app-menu/types';
+
+import {
+  computed,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from 'vue';
+
+import {
+  BusinessFilterBar,
+  BusinessPageTabs,
+  Drawer,
+  ExportButton,
+  Icon,
+  IconActionGroup,
+  IconButton,
+  Table,
+  useTable,
+} from '@udp/component-ui';
+
+import dayjs from 'dayjs';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import {
+  deleteApp,
+  exportAppList,
+  getAppList,
+  getApplicationExtendList,
+  getApplicationExtendValueList,
+  saveApp,
+  toggleAppStatus,
+} from '../../../../api/app-menu';
+import { getRequestClient } from '../../../../api/request';
+import { StatusTag, Tag } from '../../../../components/custom-tags';
+import { MainContainer } from '../../../../components/main-container';
+// 导入应用表单组件
+import AppForm from './app-form.vue';
+// 导入应用扩展属性管理组件
+import ApplicationExtendManage from './application-extend-manage.vue';
+
+const emits = defineEmits(['change-view']);
+
+const appFormVisible = ref(false);
+const currentApp = ref<Partial<App>>({});
+const appFormRef = ref();
+
+// 扩展属性管理抽屉
+const extendDrawerVisible = ref(false);
+
+// 扩展属性配置
+const extendFields = ref<any[]>([]);
+
+// 应用类型 Tab：0-Web端应用，1-移动端应用
+const activeAppTab = ref<0 | 1>(0);
+
+// 查询参数
+const searchParams = ref({
+  appName: '',
+  status: null,
+  mobileApplication: null,
+});
+
+// 定义搜索方法
+const handleSearch = () => {
+  // 使用从useTable获取的search方法，传入searchParams作为model
+  search({
+    current: 1, // 搜索时重置到第一页
+    model: searchParams.value,
+  });
+};
+
+// 定义重置方法
+const handleReset = () => {
+  // 清空搜索参数
+  searchParams.value = {
+    appName: '',
+    status: null,
+    mobileApplication: null,
+  };
+  // 重置到Web端tab
+  activeAppTab.value = 0;
+  // 调用从useTable获取的reset方法
+  reset();
+};
+
+// Tab 切换处理
+const handleAppTabChange = (tabValue: 0 | 1) => {
+  activeAppTab.value = tabValue;
+  // 切换tab时刷新数据
+  search({
+    current: 1,
+    model: searchParams.value,
+  });
+};
+
+// 搜索项配置
+const filterItems: BusinessFilterItem[] = [
+  {
+    prop: 'appName',
+    type: 'input',
+    width: 240,
+    placeholder: '请输入应用名称/编码',
+  },
+  {
+    label: '应用状态',
+    prop: 'status',
+    type: 'select',
+    options: [
+      { label: '已启用', value: 1 },
+      { label: '未启用', value: 0 },
+    ],
+  },
+];
+
+const appTabItems = computed<BusinessPageTabItem[]>(() => [
+  {
+    label: 'Web端应用',
+    value: 0,
+  },
+  {
+    label: '移动端应用',
+    value: 1,
+  },
+]);
+
+const tableRef = ref<InstanceType<typeof Table>>();
+
+// 表格基础列配置
+const baseColumns: TableColumn[] = [
+  {
+    prop: 'appName',
+    label: '应用名称',
+    minWidth: 150,
+    showOverflowTooltip: true,
+  },
+  {
+    prop: 'appCode',
+    label: '应用编码',
+    minWidth: 120,
+    showOverflowTooltip: true,
+  },
+  {
+    prop: 'icon',
+    label: '图标',
+    width: 80,
+    slot: 'icon',
+  },
+  {
+    prop: 'appType',
+    label: '类型',
+    width: 100,
+    render: ({ row }: { row: App }) =>
+      h(Tag, {
+        value: row.appType ?? 0,
+        options: [
+          { label: '系统内', value: 0, type: 'primary' },
+          { label: '系统外', value: 1, type: 'warning' },
+        ],
+      }),
+  },
+  {
+    prop: 'sort',
+    label: '排序',
+    width: 100,
+  },
+  {
+    prop: 'mobileApplication',
+    label: '通用',
+    width: 100,
+    render: ({ row }: { row: App }) =>
+      h(Tag, {
+        value: row.mobileApplication ?? 0,
+        options: [
+          { label: '否', value: 0, type: 'info' },
+          { label: '是', value: 1, type: 'success' },
+          { label: '通用', value: 2, type: 'warning' },
+        ],
+      }),
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    width: 90,
+    render: ({ row }: { row: App }) =>
+      h(StatusTag, {
+        value: row.status ?? 0,
+        activeValue: 1,
+        inactiveValue: 0,
+        activeText: '已启用',
+        inactiveText: '未启用',
+        activeType: 'primary',
+        inactiveType: 'info',
+      }),
+  },
+  {
+    prop: 'description',
+    label: '备注',
+    minWidth: 150,
+    showOverflowTooltip: true,
+  },
+  {
+    prop: 'createTime',
+    label: '创建时间',
+    width: 160,
+  },
+  {
+    prop: 'updateTime',
+    label: '更新时间',
+    width: 160,
+  },
+];
+
+// 动态生成列配置（包含扩展属性）
+const columns = computed<TableColumn[]>(() => {
+  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,
+        showOverflowTooltip: true,
+        render: ({ row }: { row: any }) =>
+          h('span', {}, getExtendValue(row, field.id) || '-'),
+      });
+    });
+
+  return dynamicColumns;
+});
+
+const cardOptions = ref({
+  title: 'appName',
+  icon: 'mdi:application-outline',
+  columns: [
+    { prop: 'appCode', label: '应用编码', className: 'w-full truncate' },
+    {
+      prop: 'appType',
+      label: '类型',
+      className: 'w-full truncate',
+      render: ({ row }: { row: App }) =>
+        h(Tag, {
+          value: row.appType ?? 0,
+          options: [
+            { label: '系统内', value: 0, type: 'primary' },
+            { label: '系统外', value: 1, type: 'warning' },
+          ],
+        }),
+    },
+    {
+      prop: 'mobileApplication',
+      label: '通用',
+      className: 'w-full truncate',
+      render: ({ row }: { row: App }) =>
+        h(Tag, {
+          value: row.mobileApplication ?? 0,
+          options: [
+            { label: '否', value: 0, type: 'info' },
+            { label: '是', value: 1, type: 'success' },
+            { label: '通用', value: 2, type: 'warning' },
+          ],
+        }),
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      className: 'w-full truncate',
+      render: ({ row }: { row: App }) =>
+        h(StatusTag, {
+          value: row.status ?? 0,
+          activeValue: 1,
+          inactiveValue: 0,
+          activeText: '已启用',
+          inactiveText: '未启用',
+          activeType: 'primary',
+          inactiveType: 'info',
+        }),
+    },
+    { prop: 'createTime', label: '创建时间', className: 'w-full truncate' },
+  ],
+  showActions: true,
+});
+
+// 抽屉类型
+const drawerType = ref<'add' | 'edit' | 'view'>('add');
+// 抽屉标题
+const formTitle = computed(() => {
+  if (drawerType.value === 'view') {
+    return '查看应用';
+  }
+  return currentApp.value.id ? '编辑应用' : '新增应用';
+});
+
+// 真实API
+const api = {
+  list: async (params: any) => {
+    // 构建查询参数，确保所有参数正确传递
+    let statusValue = null;
+    if (params.model?.status === undefined) {
+      statusValue =
+        searchParams.value.status === undefined
+          ? null
+          : searchParams.value.status;
+    } else {
+      statusValue = params.model.status;
+    }
+
+    let mobileApplicationValue = null;
+    if (params.model?.mobileApplication === undefined) {
+      mobileApplicationValue =
+        searchParams.value.mobileApplication === undefined
+          ? null
+          : searchParams.value.mobileApplication;
+    } else {
+      mobileApplicationValue = params.model.mobileApplication;
+    }
+
+    // 根据 Tab 确定 mobileApplication 参数传递给后端
+    // Web端应用 tab：传递 0（否），移动端应用 tab：传递 1（是）
+    // 通用应用（2）需要前端额外过滤显示
+    let tabMobileApplicationValue: number | null = null;
+    if (activeAppTab.value === 0) {
+      // Web端应用
+      tabMobileApplicationValue = 0;
+    } else {
+      // 移动端应用
+      tabMobileApplicationValue = 1;
+    }
+
+    const queryParams = {
+      // 如果是通过handleSearch方法调用，params.model已经包含了searchParams的值
+      // 如果是直接调用refresh，则从searchParams中获取值
+      appName: params.model?.appName || searchParams.value.appName || '',
+      // 使用 nullish 合并运算符 (??) 而不是逻辑或 (||)，这样当 status 为 0 时不会被替换
+      status: statusValue,
+      // 优先使用搜索条件中的 mobileApplication，否则使用 tab 对应的值
+      mobileApplication: mobileApplicationValue ?? tabMobileApplicationValue,
+    };
+    console.log('搜索参数:', queryParams);
+    // 调用后端接口获取数据（返回的是数组）
+    const result = (await getAppList(queryParams)) as unknown as App[];
+
+    // 根据当前 Tab 在前端额外过滤通用应用数据
+    // Web端应用：显示 mobileApplication = 0(否) 或 2(通用) 的数据
+    // 移动端应用：显示 mobileApplication = 1(是) 或 2(通用) 的数据
+    let filteredData: App[];
+    if (activeAppTab.value === 0) {
+      // Web端：显示"否"(0)和"通用"(2)
+      filteredData = result.filter(
+        (item: App) =>
+          item.mobileApplication === 0 || item.mobileApplication === 2,
+      );
+    } else {
+      // 移动端：显示"是"(1)和"通用"(2)
+      filteredData = result.filter(
+        (item: App) =>
+          item.mobileApplication === 1 || item.mobileApplication === 2,
+      );
+    }
+
+    // 处理后端返回的extendValues（可能为null）
+    const dataListWithExtendValues = filteredData.map((item: App) => ({
+      ...item,
+      extendValues: item.extendValues || [],
+    }));
+
+    // 返回符合 useTable 期望的数据格式
+    return {
+      records: dataListWithExtendValues,
+      total: dataListWithExtendValues.length,
+      current: 1,
+      size: dataListWithExtendValues.length,
+      pages: 1,
+    };
+  },
+  delete: async (id: string) => {
+    return deleteApp(id);
+  },
+};
+
+// 使用 Hook
+const {
+  loading,
+  data: tableData,
+  pagination,
+  refresh,
+  reset,
+  search,
+  handleSizeChange,
+  handleCurrentPageChange,
+  handleSelectionChange,
+} = useTable({
+  api: {
+    list: api.list,
+    delete: (id: string) => api.delete(id),
+  },
+  initParams: {},
+});
+
+const actionBtns: IconActionItem[] = [
+  {
+    key: 'edit',
+    label: '编辑',
+    icon: 'hx-line-built-in:edit-line',
+    show: (row: any) => String(row.id) !== '1',
+    onClick: (row: any) => handleEditApp(row as App),
+  },
+  {
+    key: 'enable',
+    label: '启用',
+    icon: 'mdi:play-circle-outline',
+    show: (row: any) => String(row.id) !== '1' && Number(row.status) !== 1,
+    onClick: (row: any) => handleToggleStatus(row as App),
+  },
+  {
+    key: 'disable',
+    label: '停用',
+    icon: 'mdi:pause-circle-outline',
+    type: 'danger',
+    show: (row: any) => String(row.id) !== '1' && Number(row.status) === 1,
+    onClick: (row: any) => handleToggleStatus(row as App),
+  },
+  {
+    key: 'menu',
+    label: '菜单',
+    icon: 'mdi:menu',
+    show: (row: any) => Number(row.appType) !== 1,
+    onClick: (row: any) => handleAppMenu(row as App, 'menu'),
+  },
+  {
+    key: 'config',
+    label: '配置',
+    icon: 'mdi:cog-outline',
+    show: (row: any) => String(row.id) !== '1' && Number(row.appType) === 1,
+    onClick: (row: any) => handleAppMenu(row as App, 'config'),
+  },
+  {
+    key: 'delete',
+    label: '删除',
+    icon: 'hx-line-built-in:delete-bin-6-line',
+    type: 'danger',
+    disabled: (row: any) => String(row.id) === '1',
+    show: (row: any) => String(row.id) !== '1',
+    onClick: (row: any) => handleDeleteApp(row as App),
+  },
+];
+
+// 方法
+const handleAddApp = () => {
+  currentApp.value = {
+    sort: 1,
+    status: 1, // 1-启用，0-停用
+    mobileApplication: 0, // 默认为否
+  };
+  appFormVisible.value = true;
+};
+
+const handleEditApp = async (row: App) => {
+  try {
+    // 获取扩展属性值
+    const extendValues = await getApplicationExtendValueList({
+      dataId: row.id!,
+    });
+    currentApp.value = {
+      ...row,
+      extendValues: extendValues || [],
+    };
+    appFormVisible.value = true;
+  } catch (error) {
+    console.error('获取应用扩展属性失败:', error);
+    // 即使获取扩展属性失败，也打开编辑窗口
+    currentApp.value = { ...row, extendValues: [] };
+    appFormVisible.value = true;
+  }
+};
+
+const handleCloseForm = () => {
+  // 先重置表单，确保清除验证状态
+  appFormRef.value?.resetForm();
+  // 然后清空当前应用数据
+  currentApp.value = {};
+};
+
+const handleSubmitApp = async (formData: Partial<App>) => {
+  try {
+    // 直接调用API保存数据
+    await saveApp(formData);
+    ElMessage.success(`${formData.id ? '编辑' : '新增'}应用成功`);
+    appFormVisible.value = false;
+    refresh();
+  } catch (error) {
+    console.error('保存应用失败', error);
+    ElMessage.error('保存应用失败');
+  }
+};
+
+const handleToggleStatus = async (row: App) => {
+  try {
+    const action = row.status === 1 ? '停用' : '启用';
+    await ElMessageBox.confirm(`确定要${action}这条数据吗？`, '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
+
+    // 调用API切换状态
+    await toggleAppStatus(row.status === 1 ? 0 : 1, row.id);
+    ElMessage.success(`${action}应用成功`);
+    refresh();
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('操作失败', error);
+      ElMessage.error('操作失败');
+    }
+  }
+};
+
+const handleAppMenu = (row: App, target: string) => {
+  // 切换到菜单管理页面
+  emits('change-view', row, target);
+};
+
+// 处理扩展属性管理
+const handleExtendManage = () => {
+  extendDrawerVisible.value = true;
+};
+
+// ==================== 扩展属性相关方法 ====================
+
+// 加载扩展属性配置
+const loadExtendFields = async () => {
+  try {
+    const res = await getApplicationExtendList();
+    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, fieldId: string) => {
+  if (!row.extendValues || !Array.isArray(row.extendValues)) {
+    return '';
+  }
+  const extendValue = row.extendValues.find(
+    (item: any) => String(item.fieldsId) === String(fieldId),
+  );
+
+  if (!extendValue) return '';
+
+  return resolveOptionValue(extendValue) ?? extendValue.fieldValue;
+};
+
+// 刷新扩展属性数据
+const refreshExtendData = async () => {
+  await loadExtendFields();
+  refresh();
+};
+
+const handleDeleteApp = (row: App) => {
+  // 检查是否为默认应用
+  if (row.id === '1') {
+    ElMessage.warning('默认应用不可删除');
+    return;
+  }
+
+  ElMessageBox.confirm(
+    `确定要删除应用"${row.appName}"吗？删除后将无法恢复。`,
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  )
+    .then(async () => {
+      try {
+        // 调用API删除应用
+        await deleteApp(row.id);
+        ElMessage.success('删除应用成功');
+        refresh();
+      } catch (error) {
+        console.error('删除应用失败', error);
+        ElMessage.error('删除应用失败');
+      }
+    })
+    .catch(() => {});
+};
+
+// 初始化加载扩展属性配置
+onMounted(async () => {
+  await loadExtendFields();
+});
+
+// 🖼️ 图标 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(':')
+  );
+};
+
+// 监听表格数据，预加载文件 ID 对应的 blob URL
+watch(
+  tableData,
+  async (rows) => {
+    const fetchTasks: Promise<void>[] = [];
+    for (const row of rows) {
+      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);
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => {
+  for (const url of Object.values(iconBlobUrlMap)) {
+    if (url.startsWith('blob:')) URL.revokeObjectURL(url);
+  }
+});
+
+// 计算导出参数
+const exportParams = computed(() => {
+  const normalizedColumns = tableRef.value?.normalizedColumns || [];
+
+  const selectedColumns = normalizedColumns
+    .filter(
+      (col: any) => col.prop && !col.hidden && !col.prop.startsWith('extend_'),
+    )
+    .map((col: any) => col.prop as string);
+
+  // 获取扩展属性字段ID列表（从以 extend_ 开头的列中提取ID）
+  const extendFieldIds = normalizedColumns
+    .filter(
+      (col: any) => col.prop && !col.hidden && col.prop.startsWith('extend_'),
+    )
+    .map((col: any) => col.prop.replace('extend_', ''));
+
+  return {
+    // 查询条件
+    queryCondition: {
+      appName: searchParams.value.appName,
+      status: searchParams.value.status,
+      mobileApplication: searchParams.value.mobileApplication,
+    },
+    // 选择导出的字段列表
+    selectedFields: selectedColumns,
+    // 扩展属性字段ID列表
+    extendFieldIds,
+    // 文件名
+    fileName: `应用列表_${dayjs().format('YYYYMMDD')}.xlsx`,
+    // 基础字段（保持兼容性）
+    columns: selectedColumns,
+    filter: {
+      appName: searchParams.value.appName,
+      status: searchParams.value.status,
+      mobileApplication: searchParams.value.mobileApplication,
+    },
+  };
+});
+
+const handleFilterSearch = (params: Record<string, any>) => {
+  searchParams.value = {
+    ...searchParams.value,
+    ...params,
+  };
+  handleSearch();
+};
+
+const handleFilterReset = () => {
+  handleReset();
+};
+</script>
+
+<template>
+  <!-- 应用菜单页面 -->
+  <MainContainer>
+    <div class="bg-background flex h-full w-full flex-col overflow-hidden">
+      <BusinessPageTabs
+        v-model="activeAppTab"
+        :items="appTabItems"
+        @change="handleAppTabChange"
+      />
+      <BusinessFilterBar
+        v-model="searchParams"
+        :items="filterItems"
+        :loading="loading"
+        @search="handleFilterSearch"
+        @reset="handleFilterReset"
+      />
+
+      <Table
+        ref="tableRef"
+        :data="tableData"
+        :columns="columns"
+        :card-options="cardOptions"
+        :loading="loading"
+        :pagination="pagination"
+        show-toolbar
+        show-top-actions
+        show-pagination
+        show-action
+        :show-layout="true"
+        layout-type="table"
+        action-width="140px"
+        @refresh="refresh"
+        @selection-change="handleSelectionChange"
+        @size-change="handleSizeChange"
+        @current-page-change="handleCurrentPageChange"
+      >
+        <template #top-actions>
+          <div class="flex flex-wrap items-center gap-2">
+            <IconButton type="primary" icon-type="add" @click="handleAddApp">
+              新增应用
+            </IconButton>
+            <ExportButton
+              :export-api="exportAppList"
+              :params="exportParams"
+              text="导出"
+              loading-type="progress"
+              :show-progress="true"
+              :min-loading-time="1200"
+              success-message="应用数据导出成功"
+              error-message="应用数据导出失败，请重试"
+            />
+            <IconButton icon-type="setting" @click="handleExtendManage">
+              扩展属性
+            </IconButton>
+          </div>
+        </template>
+
+        <!-- 图标列 -->
+        <template #icon="{ row }">
+          <!-- 文件 ID 模式：blob URL -->
+          <img
+            v-if="row.icon && iconBlobUrlMap[row.icon]"
+            :src="iconBlobUrlMap[row.icon]"
+            class="h-5 w-5 object-contain"
+            alt="应用图标"
+          />
+          <!-- 兼容旧数据：http URL -->
+          <img
+            v-else-if="
+              row.icon &&
+              (row.icon.startsWith('http') || row.icon.startsWith('/'))
+            "
+            :src="row.icon"
+            class="h-5 w-5 object-contain"
+            alt="应用图标"
+          />
+          <span v-else-if="row.icon && row.icon.startsWith('custom:')">
+            {{ row.icon }}
+          </span>
+          <Icon
+            v-else-if="row.icon"
+            :name="row.icon"
+            size="20"
+            color="#868686"
+          />
+        </template>
+
+        <template #action="{ row }">
+          <IconActionGroup :actions="actionBtns" :row="row" />
+        </template>
+        <template #card-actions="{ row }">
+          <IconActionGroup :actions="actionBtns" :row="row" />
+        </template>
+      </Table>
+    </div>
+
+    <!-- 新增/编辑应用抽屉 -->
+    <Drawer
+      v-model="appFormVisible"
+      :title="formTitle"
+      :type="drawerType"
+      width="600px"
+      :show-confirm-button="drawerType !== 'view'"
+      :cancel-text="drawerType === 'view' ? '关闭' : '取消'"
+      @confirm="appFormRef?.submitForm()"
+      @closed="handleCloseForm"
+    >
+      <AppForm
+        ref="appFormRef"
+        :form-data="currentApp"
+        :expand-fields="extendFields"
+        :type="drawerType"
+        @submit="handleSubmitApp"
+      />
+    </Drawer>
+
+    <!-- 扩展属性管理抽屉 -->
+    <Drawer
+      v-model="extendDrawerVisible"
+      title="应用扩展属性管理"
+      size="800px"
+      :show-confirm-button="false"
+    >
+      <ApplicationExtendManage @refresh="refreshExtendData" />
+    </Drawer>
+  </MainContainer>
+</template>
+
+<style scoped lang="scss"></style>