yg-yygl 0.0.1

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

@@ -0,0 +1,1001 @@
+<script setup lang="ts">
+import type { FormItemConfig } from '@udp/component-ui';
+
+import type {
+  AppMenu,
+  AppMenuCreateParams,
+  MenuExtendItem,
+  MenuLabelResponse,
+  MenuExtendValueItem,
+} from '../../../../api/app-menu/menuTypes';
+
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+
+import { Dialog, Form, Icon, IconButton } from '@udp/component-ui';
+import { UdpUpload } from '@udp/ui';
+
+import { ElButton, ElInput, ElMessage } from 'element-plus';
+
+import {
+  createAppMenu,
+  getAppMenuById,
+  getAppMenuTreeExclude,
+  updateAppMenu,
+} from '../../../../api/app-menu/menu';
+import { getRequestClient } from '../../../../api/request';
+
+import { ExpandAttribute } from '../../../../components/expand-attribute';
+import SelectIcon from '../components/select-icon.vue';
+import LabelSelector from './components/label-selector.vue';
+
+type Props = {
+  applicationId?: number | string;
+  editData?: AppMenu | null;
+  menuStyle?: number; // 菜单样式：0-Web菜单，1-App菜单
+  parentData?: AppMenu | null;
+  expandFields?: MenuExtendItem[]; // 扩展属性字段定义
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editData: undefined,
+  menuStyle: 0,
+  parentData: undefined,
+  expandFields: () => [],
+});
+
+// const currentTenantId = computed(() => {
+//   return useUserStore().accountInfo?.tenantId;
+// });
+
+// interface MenuTree extends Menu {
+//   disabled: boolean;
+// }
+
+// 组件状态
+const isEdit = computed(() => !!props.editData?.id);
+const loading = ref(false);
+const formRef = ref<any>();
+
+// 🎨 图片上传相关状态
+const maxImageSize = 2; // 最大图片大小（MB）
+const acceptImageTypes = '.jpg,.png,.jpeg,.gif,.svg';
+
+// 🖼️ 图标 blob URL（文件 ID 模式的图片预览）
+const iconBlobUrl = ref('');
+
+const isFileId = (icon: string) => {
+  return icon && !icon.startsWith('http') && !icon.startsWith('/') && !icon.startsWith('custom:') && !icon.includes(':');
+};
+
+// 🎨 图标选择器弹窗
+const showIconPicker = ref(false);
+
+// 表单数据
+const initialFormData = reactive({
+  parentId: '0',
+  menuName: '',
+  menuType: 1,
+  url: '',
+  icon: '',
+  permissionType: '',
+  orderBy: 1,
+  visual: 0,
+  target: '主窗口',
+  menuLabels: [] as MenuLabelResponse[],
+  remarks: '',
+  extendValues: [] as MenuExtendValueItem[],
+});
+
+const formValues = computed(() => formRef.value?.getValues());
+
+// 获取表单数据（用于扩展属性绑定）
+const menuFormData = computed({
+  get: () => formRef.value?.getValues() || initialFormData,
+  set: (value) => {
+    Object.assign(initialFormData, value);
+    formRef.value?.setValues(value);
+  },
+});
+
+// 菜单树选项
+const menuTreeOptions = ref<AppMenu[]>([]);
+
+// 标签选择器相关
+const showLabelSelector = ref(false);
+
+// 菜单类型选项
+const menuTypeOptions = [
+  { label: '分类', value: 0 },
+  { label: '菜单', value: 1 },
+  { label: '按钮', value: 2 },
+];
+
+// 权限类型选项
+const permissionTypeOptions = [
+  { label: '新增', value: 'add' },
+  { label: '删除', value: 'delete' },
+  { label: '修改', value: 'update' },
+  { label: '查询', value: 'query' },
+];
+
+// 是否可见选项
+const visualOptions = [
+  { label: '可见', value: 0 },
+  { label: '隐藏', value: 1 },
+];
+
+// 打开方式选项
+const targetOptions = [
+  { label: '主窗口', value: '主窗口' },
+  { label: '新窗口', value: '新窗口' },
+  { label: 'IFRAME', value: 'IFRAME' },
+];
+
+// ==================== 图片上传相关方法 ====================
+
+// UdpUpload 上传成功回调
+const handleUploadSuccess = (fileInfo: any) => {
+  if (fileInfo?.id) {
+    formRef.value?.setValue('icon', fileInfo.id);
+  }
+};
+
+// 🖼️ 监听 icon 变化，文件 ID → fetch blob URL
+watch(() => menuFormData.value.icon, async (icon) => {
+  if (iconBlobUrl.value.startsWith('blob:')) URL.revokeObjectURL(iconBlobUrl.value);
+  iconBlobUrl.value = '';
+  if (!isFileId(icon)) return;
+  try {
+    const res = await getRequestClient().get(`/api/common/preview/file?id=${encodeURIComponent(icon)}`, {
+      responseType: 'blob',
+      responseReturn: 'raw',
+    });
+    iconBlobUrl.value = URL.createObjectURL(res.data);
+  } catch { /* 不是文件 ID 或请求失败 */ }
+}, { immediate: true });
+
+onBeforeUnmount(() => {
+  if (iconBlobUrl.value.startsWith('blob:')) URL.revokeObjectURL(iconBlobUrl.value);
+});
+
+// ==================== 图标选择器相关方法 ====================
+
+// 🎨 打开图标选择器
+const handleOpenIconPicker = () => {
+  showIconPicker.value = true;
+};
+
+const selectIconRef = ref();
+
+// ✅ 图标选择器确认
+const handleConfirmIconPicker = () => {
+  const icon = selectIconRef.value?.getIcon();
+  formRef.value?.setValue('icon', icon);
+  showIconPicker.value = false;
+};
+
+// 🗑️ 删除图标/图片
+const handleRemoveIcon = () => {
+  formRef.value?.setValue('icon', '');
+  ElMessage.success('已删除');
+};
+
+// 表单配置
+const formItems = ref<FormItemConfig[]>([
+  {
+    prop: 'parentId',
+    label: '上级菜单',
+    type: 'tree-select',
+    placeholder: '请选择上级菜单',
+    condition: (values) => values.menuType !== 0,
+    data: menuTreeOptions,
+    props: {
+      props: {
+        label: 'menuName',
+        value: 'id',
+      },
+      checkStrictly: true,
+      emptyValues: [null, undefined, 0, '0'],
+    },
+  },
+  {
+    prop: 'menuType',
+    label: '菜单类型',
+    type: 'radio-button',
+    options: menuTypeOptions,
+    required: true,
+    props: {
+      disabled: isEdit.value,
+    },
+    rules: [
+      {
+        required: true,
+        message: '请选择菜单类型',
+        trigger: ['blur', 'change'],
+      },
+    ],
+  },
+  {
+    prop: 'menuName',
+    label: '分类名称',
+    type: 'input',
+    required: true,
+    placeholder: `请输入分类名称`,
+    trim: true,
+    condition: (values) => values.menuType === 0,
+    rules: [
+      {
+        required: true,
+        message: `请输入分类名称`,
+        trigger: ['blur', 'input'],
+      },
+      {
+        max: 20,
+        message: `分类名称不能超过20个字符`,
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'menuName',
+    label: '菜单名称',
+    type: 'input',
+    required: true,
+    placeholder: '请输入菜单名称',
+    trim: true,
+    condition: (values) => values.menuType === 1,
+    rules: [
+      {
+        required: true,
+        message: `请输入菜单名称`,
+        trigger: ['blur', 'input'],
+      },
+      {
+        max: 20,
+        message: '菜单名称不能超过20个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'menuName',
+    label: '按钮名称',
+    type: 'input',
+    required: true,
+    placeholder: '请输入按钮名称',
+    trim: true,
+    condition: (values) => values.menuType === 2,
+    rules: [
+      {
+        required: true,
+        message: `请输入按钮名称`,
+        trigger: ['blur', 'input'],
+      },
+      {
+        max: 20,
+        message: '按钮名称不能超过20个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'icon',
+    label: '菜单图片',
+    required: false, // 改为非必填
+    slot: 'icon',
+    condition: (values) => values.menuType === 0 || values.menuType === 1,
+    // 菜单类型为分类或菜单时显示菜单图片
+  },
+  {
+    prop: 'url',
+    label: '路由地址',
+    type: 'input',
+    condition: (values) => values.menuType === 1,
+    placeholder: '请输入路由地址',
+    trim: true,
+    rules: [
+      {
+        max: 200,
+        message: '路由地址不能超过200个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'permissionType',
+    label: '权限类型',
+    type: 'select',
+    placeholder: '请选择权限类型',
+    condition: (values) => values.menuType === 2,
+    options: permissionTypeOptions,
+  },
+  {
+    prop: 'orderBy',
+    label: '菜单排序',
+    type: 'number',
+    props: {
+      min: 1,
+      max: 999_999,
+    },
+  },
+  {
+    prop: 'visual',
+    label: '是否可见',
+    type: 'radio-button',
+    options: visualOptions,
+    condition: (values) => values.menuType === 1,
+  },
+  {
+    prop: 'target',
+    label: '打开方式',
+    type: 'radio-button',
+    options: targetOptions,
+    condition: (values) => values.menuType === 1,
+    tooltip: '新窗口和IFRAME两种方式只支持http或https开头地址',
+  },
+  {
+    prop: 'menuLabels',
+    label: '菜单标签',
+    slot: 'menuLabels',
+  },
+  {
+    prop: 'remarks',
+    label: '备注信息',
+    type: 'textarea',
+    placeholder: '请输入备注信息',
+    props: {
+      rows: 3,
+      maxlength: 100,
+      showWordLimit: true,
+    },
+    rules: [
+      {
+        max: 100,
+        message: '备注信息不能超过100个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+]);
+
+// 加载菜单树
+const loadMenuTree = async () => {
+  try {
+    const response = await getAppMenuTreeExclude({
+      menuStyle: props.menuStyle || 0, // 添加菜单样式参数
+      id: props.editData?.id || '',
+      applicationId: props.applicationId || '',
+    });
+    console.log('菜单:', response);
+    menuTreeOptions.value = response || [];
+  } catch (error) {
+    console.error('加载菜单树失败:', error);
+  }
+};
+
+// const formatDisabledTree = (tree: Menu[]): MenuTree[] => {
+//   return tree.map((item) => {
+//     return {
+//       ...item,
+//       disabled:
+//         currentTenantId.value !== '0' &&
+//         item.tenantId !== currentTenantId.value,
+//       children: item.children ? formatDisabledTree(item.children) : [],
+//     };
+//   });
+// };
+
+// 加载菜单详情数据
+const loadMenuDetail = async (id: string) => {
+  try {
+    loading.value = true;
+    const response = await getAppMenuById(id);
+    if (response) {
+      // 🔥 后端接口已返回 extendValues，处理 null 情况
+      const savedExtendValues = response.extendValues || [];
+
+      // 按照扩展字段定义重新构建 extendValues（对齐用户管理的实现）
+      const extendValues = props.expandFields?.length
+        ? props.expandFields.map((item) => ({
+            fieldsId: item.id,
+            fieldName: item.fieldName,
+            fieldValue:
+              savedExtendValues.find(
+                (_item: any) => String(_item.fieldsId) === String(item.id),
+              )?.fieldValue || '',
+            fieldOption: item.fieldOption,
+            fieldType: item.fieldType,
+          }))
+        : [];
+
+      const values = Object.assign(
+        {},
+        {
+          id: response.id || '',
+          parentId: response.parentId || '0',
+          menuName: response.menuName || '',
+          menuType: response.menuType,
+          url: response.url || '',
+          icon: response.icon || '',
+          permissionType: response.permissionType || '',
+          orderBy: response.orderBy || 1,
+          visual: response.visual === undefined ? 0 : response.visual,
+          target: response.target || '',
+          menuLabels: response.labels || [],
+          remarks: response.remarks || '',
+          extendValues,
+        },
+      );
+      formRef.value?.setValues(values);
+    }
+  } catch (error) {
+    console.error('加载菜单详情失败:', error);
+    ElMessage.error('加载菜单详情失败');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 初始化表单数据
+const initFormData = (data?: any) => {
+  if (data?.id) {
+    // 编辑模式 - 调用接口获取完整数据
+    loadMenuDetail(data.id);
+  } else {
+    // 新增模式 - 初始化扩展属性
+    if (props.expandFields?.length) {
+      initialFormData.extendValues = props.expandFields.map((item) => ({
+        fieldsId: item.id,
+        fieldName: item.fieldName,
+        fieldValue: '',
+        fieldOption: item.fieldOption,
+        fieldType: item.fieldType,
+      }));
+    } else {
+      initialFormData.extendValues = [];
+    }
+    formRef.value?.setValues(initialFormData);
+  }
+};
+
+// 监听编辑数据和父级数据变化
+watch(
+  () => props.editData,
+  (newEditData) => {
+    console.log('数据变化:', {
+      editData: newEditData,
+    });
+    // 对齐用户管理：总是调用 initFormData（包括新增模式）
+    initFormData(newEditData);
+  },
+  { immediate: true, deep: true },
+);
+
+watch(
+  () => props.parentData,
+  (newParentData) => {
+    console.log('父级数据变化:', newParentData);
+    initialFormData.parentId = newParentData?.id || '0';
+    formRef.value?.setValue('parentId', newParentData?.id || '0');
+  },
+  { immediate: true },
+);
+
+// 处理字段变化
+const handleFieldChange = (prop: string, value: any) => {
+  console.log('字段变化:', { prop, value });
+
+  // 处理菜单类型变化时的联动逻辑
+  if (prop === 'menuType') {
+    // 先设置字段值，再清除验证
+    switch (value) {
+      case 0: {
+        // 分类类型：重置 parentId 和 url，保留 icon（菜单图片分类也可用）
+        formRef.value?.setValue('parentId', '0');
+        formRef.value?.setValue('url', '');
+        break;
+      }
+      case 1: {
+        // 切换到菜单类型时，只在必要时清空权限相关字段
+        if (!formValues.value.icon) {
+          formRef.value?.setValue('icon', '');
+        }
+        if (!formValues.value.url) {
+          formRef.value?.setValue('url', '');
+        }
+        break;
+      }
+      case 2: {
+        // 切换到权限类型时，只在必要时清空菜单相关字段
+        if (!formValues.value.permissionType) {
+          formRef.value?.setValue('permissionType', '');
+        }
+        break;
+      }
+      // No default
+    }
+
+    // 使用多重nextTick和setTimeout确保DOM完全更新后再清除验证
+    nextTick(() => {
+      setTimeout(() => {
+        // 先清除所有验证
+        formRef.value?.clearValidate();
+
+        // 然后根据当前菜单类型清除特定字段的验证
+        switch (value) {
+          case 0: {
+            // 分类类型：清除菜单和权限相关字段的验证
+            formRef.value?.clearValidate(['icon', 'permissionType']);
+            break;
+          }
+          case 1: {
+            // 菜单类型：清除权限相关字段的验证
+            formRef.value?.clearValidate(['permissionType']);
+            break;
+          }
+          case 2: {
+            // 权限类型：清除菜单相关字段的验证
+            formRef.value?.clearValidate(['icon']);
+            break;
+          }
+          // No default
+        }
+
+        // 再次延迟清除，确保生效
+        setTimeout(() => {
+          switch (value) {
+            case 0: {
+              formRef.value?.clearValidate(['icon', 'permissionType']);
+              break;
+            }
+            case 1: {
+              formRef.value?.clearValidate(['permissionType']);
+              break;
+            }
+            case 2: {
+              formRef.value?.clearValidate(['icon']);
+              break;
+            }
+            // No default
+          }
+        }, 100);
+      }, 50); // 增加小延迟确保清除验证生效
+    });
+  }
+};
+
+// 表单验证
+const validate = () => {
+  if (!formValues.value.menuName?.trim()) {
+    ElMessage.error(
+      `请输入${formValues.value.menuType === 1 ? '菜单名称' : '按钮名称'}`,
+    );
+    return false;
+  }
+  // 去掉图标必填验证，图标改为可选
+  // if (formValues.value.menuType === 1 && !formValues.value.icon?.trim()) {
+  //   ElMessage.error('请选择菜单图标');
+  //   return false;
+  // }
+  return true;
+};
+
+// 表单提交
+const handleSubmit = async () => {
+  try {
+    loading.value = true;
+
+    // 表单验证
+    const valid = await formRef.value?.validate();
+    if (!valid) {
+      return false;
+    }
+
+    // 过滤掉没有值的扩展属性（对齐用户管理的实现）
+    const filteredExtendValues = formValues.value?.extendValues?.filter(
+      (item: any) => item.fieldValue,
+    ) || [];
+
+    // 构建提交数据，将menuLabels转换为labels字段
+    const submitData = {
+      ...formValues.value,
+      labels: formValues.value.menuLabels.map((label: MenuLabelResponse) =>
+        label.id.toString(),
+      ),
+      menuStyle: props.menuStyle || 0, // 添加菜单样式字段
+      applicationId: props.applicationId, // 添加应用ID字段
+      extendValues: filteredExtendValues, // 直接包含在提交数据中
+    };
+
+    // 移除menuLabels字段，避免传递给后端
+    if ('menuLabels' in submitData) {
+      delete (submitData as any).menuLabels;
+    }
+
+    console.log('提交的表单数据:', submitData);
+    console.log('当前模式:', isEdit.value ? '编辑' : '新增');
+
+    // 调用API保存菜单（包含扩展属性）
+    await (isEdit.value
+      ? updateAppMenu(submitData as unknown as AppMenu)
+      : createAppMenu(submitData as AppMenuCreateParams));
+
+    ElMessage.success(isEdit.value ? '更新成功!' : '创建成功!');
+    return true;
+  } catch {
+    return false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 重置表单
+const resetForm = () => {
+  // 重置表单数据
+  initFormData();
+
+  // 清除表单验证
+  nextTick(() => {
+    formRef.value?.clearValidate();
+  });
+};
+
+// 标签选择器组件引用
+const labelSelectorRef = ref();
+
+const handleLabelSelectorConfirm = () => {
+  showLabelSelector.value = false;
+  const labels = labelSelectorRef.value?.getSelectedLabels();
+  // 使用 Form 组件的 setValue 方法确保正确同步
+  formRef.value.setValue('menuLabels', [...labels]);
+
+  console.log('标签变化:', formValues.value.menuLabels);
+};
+
+// 处理对话框关闭事件（包括点击X按钮、ESC键等）
+const handleDialogClose = () => {
+  // 调用标签选择器的取消方法来重置状态
+  if (labelSelectorRef.value) {
+    labelSelectorRef.value.handleCancel();
+  }
+  showLabelSelector.value = false;
+};
+
+const removeLabelFromMenu = (label: MenuLabelResponse) => {
+  const labels = formValues.value.menuLabels;
+  const index = labels.findIndex((l: MenuLabelResponse) => l.id === label.id);
+  console.log('删除标签:', formValues);
+  if (index !== -1) {
+    labels.splice(index, 1);
+    // 使用 Form 组件的 setValue 方法确保正确同步
+    formRef.value.setValue('menuLabels', [...labels]);
+  }
+};
+
+// 生命周期
+onMounted(() => {
+  loadMenuTree();
+});
+
+defineExpose({
+  handleSubmit,
+  validate,
+  resetForm,
+  initFormData,
+});
+</script>
+
+<template>
+  <div class="relative h-full w-full">
+    <Form
+      ref="formRef"
+      :initial-values="initialFormData"
+      :items="formItems"
+      :show-actions="false"
+      label-width="auto"
+      @submit="handleSubmit"
+      @field-change="handleFieldChange"
+    >
+    <!-- ==================== 自定义图标/图片选择插槽 ==================== -->
+    <template #icon="{ model }">
+      <div class="menu-image-section">
+        <!-- 📥 输入区域 -->
+        <div class="image-input-wrapper">
+          <el-input
+            :model-value="model.icon || ''"
+            placeholder="请上传图片或选择图标"
+            disabled
+            class="image-url-input"
+          />
+
+          <!-- 上传图片按钮 -->
+          <UdpUpload
+            :request-fn="(url: any, data: any, config: any) => getRequestClient().post(url, data, config)"
+            :accept="acceptImageTypes"
+            :max-size="maxImageSize"
+            :show-file-list="false"
+            @success="handleUploadSuccess"
+          >
+            <IconButton type="primary" icon-type="upload">
+              上传图片
+            </IconButton>
+          </UdpUpload>
+
+          <!-- 选择图标按钮 -->
+          <el-button type="success" @click="handleOpenIconPicker">
+            选择图标
+          </el-button>
+        </div>
+
+        <!-- 🖼️ 预览区域 -->
+        <div v-if="model.icon" class="image-preview-wrapper">
+          <!-- blob URL（文件 ID 模式） -->
+          <template v-if="iconBlobUrl">
+            <img :src="iconBlobUrl" alt="菜单图片" class="preview-image" />
+          </template>
+          <!-- 兼容旧数据：http URL -->
+          <template
+            v-else-if="model.icon?.startsWith('http') || model.icon?.startsWith('/')"
+          >
+            <img :src="model.icon" alt="菜单图片" class="preview-image" />
+          </template>
+          <!-- 图标名称 -->
+          <template v-else>
+            <div class="icon-preview">
+              <Icon :name="model.icon" class="preview-icon" />
+              <span class="icon-name">{{ model.icon }}</span>
+            </div>
+          </template>
+
+          <!-- 删除按钮 -->
+          <el-button type="danger" link size="small" @click="handleRemoveIcon">
+            删除
+          </el-button>
+        </div>
+
+        <!-- 💡 提示文本 -->
+        <div class="image-upload-tip">
+          支持上传图片（jpg、png、jpeg、gif、svg，不超过{{
+            maxImageSize
+          }}MB）或选择图标
+        </div>
+      </div>
+    </template>
+
+    <!-- 自定义菜单标签插槽 -->
+    <template #menuLabels>
+      <div class="label-section">
+        <div class="selected-labels" v-if="formValues?.menuLabels?.length > 0">
+          <el-tooltip
+            v-for="label in formValues.menuLabels"
+            :key="label.id"
+            effect="dark"
+            placement="top"
+            :content="`#${label.labelName}`"
+          >
+            <el-tag
+              effect="light"
+              closable
+              :disable-transitions="false"
+              @close="removeLabelFromMenu(label)"
+              class="mb-1 mr-1"
+            >
+              <span class="label-text-truncate">#{{ label.labelName }}</span>
+            </el-tag>
+          </el-tooltip>
+        </div>
+        <div class="label-buttons">
+          <el-button
+            size="small"
+            type="primary"
+            @click="showLabelSelector = true"
+          >
+            {{ formValues?.menuLabels?.length > 0 ? '修改标签' : '选择标签' }}
+          </el-button>
+          <span v-if="formValues?.menuLabels?.length > 0" class="label-count">
+            已选择 {{ formValues?.menuLabels?.length }} 个标签
+          </span>
+        </div>
+      </div>
+    </template>
+  </Form>
+
+  <!-- 扩展属性折叠面板 -->
+  <ExpandAttribute
+    v-if="props.expandFields?.length > 0"
+    v-model="menuFormData.extendValues"
+  />
+
+  <!-- 🎨 图标选择器弹窗 -->
+  <Dialog
+    v-model="showIconPicker"
+    title="选择图标"
+    width="600px"
+    :close-on-click-modal="false"
+    @cancel="showIconPicker = false"
+    @confirm="handleConfirmIconPicker"
+  >
+    <!-- <IconPickerInput
+      :model-value="formRef?.getValues()?.icon || ''"
+      @select="handleIconSelect"
+    /> -->
+    <SelectIcon ref="selectIconRef" :icon="formValues.icon" />
+  </Dialog>
+
+  <!-- 标签选择器弹窗 -->
+  <Dialog
+    v-model="showLabelSelector"
+    title="选择标签"
+    width="800px"
+    :close-on-click-modal="false"
+    :before-close="handleDialogClose"
+    @confirm="handleLabelSelectorConfirm"
+  >
+    <LabelSelector
+      ref="labelSelectorRef"
+      :menu-labels="formValues?.menuLabels"
+      :menu-style="props.menuStyle || 0"
+      :application-id="props.applicationId"
+    />
+  </Dialog>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.menu-type-selector {
+  display: flex;
+  width: 320px;
+  overflow: hidden;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+
+.type-button {
+  flex: 1;
+  padding: 8px 16px;
+  font-size: 14px;
+  color: #606266;
+  cursor: pointer;
+  background: #fff;
+  border: none;
+  transition: all 0.3s;
+
+  &:first-child {
+    border-right: 1px solid #dcdfe6;
+  }
+
+  &.active {
+    color: #fff;
+    background: #409eff;
+  }
+
+  &:hover:not(.active) {
+    background: #f5f7fa;
+  }
+}
+
+.label-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.selected-labels {
+  margin-bottom: 8px;
+}
+
+.label-text-truncate {
+  display: inline-block;
+  max-width: 4em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.label-buttons {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.label-count {
+  font-size: 12px;
+  color: #909399;
+}
+
+.mb-1 {
+  margin-bottom: 4px;
+}
+
+.mr-1 {
+  margin-right: 4px;
+}
+
+.label-text {
+  font-size: 14px;
+  color: #606266;
+}
+
+.label-button {
+  color: #606266;
+  background: #f5f7fa;
+  border: 1px solid #dcdfe6;
+
+  &:hover {
+    color: #409eff;
+    background: #ecf5ff;
+    border-color: #b3d8ff;
+  }
+}
+
+.label-tag {
+  color: #606266;
+  background: #f5f7fa;
+  border: 1px solid #dcdfe6;
+
+  &:hover {
+    color: #409eff;
+    background: #ecf5ff;
+    border-color: #b3d8ff;
+  }
+}
+
+/* ==================== 图片上传区域样式 ==================== */
+.menu-image-section {
+  width: 100%;
+}
+
+.image-input-wrapper {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.image-url-input {
+  flex: 1;
+}
+
+/* 🖼️ 预览区域 */
+.image-preview-wrapper {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+  background: #f5f7fa;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.preview-image {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+
+.icon-preview {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.preview-icon {
+  font-size: 32px;
+}
+
+.icon-name {
+  font-size: 14px;
+  color: #606266;
+}
+
+/* 💡 提示文本 */
+.image-upload-tip {
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.5;
+}
+</style>