yg-yygl 0.0.1

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

@@ -0,0 +1,860 @@
+<script setup lang="ts">
+import type { FormItemConfig } from '@udp/component-ui';
+
+import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from 'vue';
+
+import { Form, Icon, IconButton, Dialog } from '@udp/component-ui';
+import { UdpUpload } from '@udp/ui';
+
+import { ElButton, ElInput, ElMessage } from 'element-plus';
+
+import {
+  checkAppCodeForCreate,
+  checkAppCodeForUpdate,
+  checkAppNameForCreate,
+  checkAppNameForUpdate,
+  generateAuthSecret,
+} from '../../../../api/app-menu';
+import { getRequestClient } from '../../../../api/request';
+
+import SelectIcon from '../components/select-icon.vue'
+import { ExpandAttribute } from '../../../../components/expand-attribute'
+
+interface AppForm {
+  id?: string; // 直接修改为string类型，与App接口保持一致
+  appName: string;
+  appCode: string;
+  icon: string;
+  url: string; // 改为必填
+  authSecret: string;
+  appType: number; // 0-系统内，1-系统外
+  mobileApplication: number; // 0-否，1-是，2-通用
+  sort: number;
+  status: number; // 1-启用，0-停用
+  description?: string;
+  accountSyncUrl?: string;
+  roleSyncUrl?: string;
+  orgSyncUrl?: string;
+  extendValues?: any[]; // 扩展属性值数组
+}
+
+const props = withDefaults(
+  defineProps<{
+    formData: Partial<AppForm>;
+    expandFields?: any[];
+    type?: 'add' | 'edit' | 'view';
+  }>(),
+  {
+    expandFields: () => [],
+    type: 'add',
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'submit', data: AppForm): void;
+}>();
+
+// 组件状态
+const loading = ref(false);
+const formRef = ref();
+const isEdit = computed(() => !!props.formData?.id);
+
+// 🎨 图片上传相关状态
+const maxImageSize = 2; // 最大图片大小（MB）
+const acceptImageTypes = '.jpg,.png,.jpeg,.gif,.svg';
+
+// 🎨 图标选择器弹窗
+const showIconPicker = ref(false);
+
+// 🖼️ 图标 blob URL（文件 ID 模式的图片预览）
+const iconBlobUrl = ref('');
+
+// 判断 icon 是否为文件 ID（非 URL、非图标名称）
+const isFileId = (icon: string) => {
+  return icon && !icon.startsWith('http') && !icon.startsWith('/') && !icon.startsWith('custom:') && !icon.includes(':');
+};
+
+// 初始表单数据
+const initFormData = reactive({
+  id: undefined,
+  appName: '',
+  appCode: '',
+  icon: '',
+  url: '',
+  authSecret: '',
+  appType: 0, // 默认为系统内(0)
+  mobileApplication: 0, // 默认为否(0)
+  sort: 1,
+  status: true,
+  description: '',
+  extendValues: [] as any[], // 扩展属性值数组
+});
+
+// 生成认证密钥
+const generateSecret = async () => {
+  try {
+    loading.value = true;
+    const res = await generateAuthSecret();
+    console.log('res', res);
+    // 使用正确的方法设置表单值
+    nextTick(() => {
+      formRef.value?.setValues({ authSecret: res });
+    });
+    ElMessage.success('认证密钥生成成功');
+  } catch (error) {
+    console.error('生成认证密钥失败:', error);
+    ElMessage.error('生成认证密钥失败，请重试');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// ==================== 图片上传相关方法 ====================
+
+// UdpUpload 上传成功回调
+const handleUploadSuccess = (fileInfo: any) => {
+  if (fileInfo?.id) {
+    formRef.value?.setValue('icon', fileInfo.id);
+  }
+};
+
+// ==================== 图标选择器相关方法 ====================
+
+// 🎨 打开图标选择器
+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 validateAuthSecret = (
+  _rule: any,
+  value: string,
+  callback: (error?: Error) => void,
+) => {
+  if (value && value.trim() === '') {
+    callback(new Error('认证密钥不能为空格'));
+    return;
+  }
+  if (value && value.length > 32) {
+    callback(new Error('认证密钥不能超过32个字符'));
+    return;
+  }
+  callback();
+};
+
+// 校验状态
+const validating = reactive({
+  appName: false,
+  appCode: false,
+});
+
+// 记录上一次校验的值和结果
+const lastValidatedValues = reactive({
+  appName: '',
+  appCode: '',
+});
+
+// 记录上一次校验的结果
+const lastValidationResults = reactive({
+  appName: { valid: true, errorMsg: '' },
+  appCode: { valid: true, errorMsg: '' },
+});
+
+// 🔥 从 formRef 获取当前表单值（与菜单管理保持一致）
+const appFormData = computed({
+  get: () => formRef.value?.getValues() || initFormData,
+  set: (value) => {
+    Object.assign(initFormData, value);
+    formRef.value?.setValues(value);
+  },
+});
+
+// 🖼️ 监听 icon 变化，文件 ID → fetch blob URL（必须在 appFormData 之后）
+watch(() => appFormData.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 validateAppName = (
+  _rule: any,
+  value: string,
+  callback: (error?: Error) => void,
+) => {
+  // 如果为空，直接通过，交给其他规则处理
+  if (!value) {
+    callback();
+    return;
+  }
+
+  // 如果值没有变化，返回上次的校验结果
+  if (value === lastValidatedValues.appName) {
+    if (lastValidationResults.appName.valid) {
+      callback();
+    } else {
+      callback(new Error(lastValidationResults.appName.errorMsg));
+    }
+    return;
+  }
+
+  // 如果已经在校验中，不重复校验
+  if (validating.appName) {
+    return;
+  }
+
+  validating.appName = true;
+  lastValidatedValues.appName = value;
+
+  // 根据是否为编辑模式选择不同的校验接口
+  const checkPromise =
+    isEdit.value && props.formData.id
+      ? checkAppNameForUpdate(props.formData.id, value)
+      : checkAppNameForCreate(value);
+
+  checkPromise
+    .then(() => {
+      // 记录成功的校验结果
+      lastValidationResults.appName = { valid: true, errorMsg: '' };
+      callback();
+    })
+    .catch((error: any) => {
+      // 记录失败的校验结果
+      const errorMsg = error.msg || '应用名称已存在';
+      lastValidationResults.appName = { valid: false, errorMsg };
+      // 直接使用callback返回错误，这样会在输入框下方显示错误信息
+      callback(new Error(errorMsg));
+    })
+    .finally(() => {
+      validating.appName = false;
+    });
+};
+
+const validateAppCode = (
+  _rule: any,
+  value: string,
+  callback: (error?: Error) => void,
+) => {
+  // 如果为空，直接通过，交给其他规则处理
+  if (!value) {
+    callback();
+    return;
+  }
+
+  // 如果值没有变化，返回上次的校验结果
+  if (value === lastValidatedValues.appCode) {
+    if (lastValidationResults.appCode.valid) {
+      callback();
+    } else {
+      callback(new Error(lastValidationResults.appCode.errorMsg));
+    }
+    return;
+  }
+
+  // 如果已经在校验中，不重复校验
+  if (validating.appCode) {
+    return;
+  }
+
+  validating.appCode = true;
+  lastValidatedValues.appCode = value;
+
+  // 根据是否为编辑模式选择不同的校验接口
+  const checkPromise =
+    isEdit.value && props.formData.id
+      ? checkAppCodeForUpdate(props.formData.id, value)
+      : checkAppCodeForCreate(value);
+
+  checkPromise
+    .then(() => {
+      // 记录成功的校验结果
+      lastValidationResults.appCode = { valid: true, errorMsg: '' };
+      callback();
+    })
+    .catch((error: any) => {
+      // 记录失败的校验结果
+      const errorMsg = error.msg || '应用编码已存在';
+      lastValidationResults.appCode = { valid: false, errorMsg };
+      // 直接使用callback返回错误，这样会在输入框下方显示错误信息
+      callback(new Error(errorMsg));
+    })
+    .finally(() => {
+      validating.appCode = false;
+    });
+};
+
+// 表单配置
+const formItems = computed(() => {
+  return [
+    {
+      prop: 'appName',
+      label: '名称',
+      type: 'input',
+      gridCols: 1,
+      required: true,
+      placeholder: '请输入名称',
+      rules: [
+        { required: true, message: '请输入名称', trigger: 'blur' },
+        {
+          max: 20,
+          message: '名称不能超过20个字符',
+          trigger: ['blur', 'input'],
+        },
+        { validator: validateAppName, trigger: 'blur' },
+      ],
+    },
+    {
+      prop: 'appCode',
+      label: '编码',
+      gridCols: 1,
+      type: 'input',
+      required: true,
+      placeholder: '请输入编码',
+      rules: [
+        { required: true, message: '请输入编码', trigger: 'blur' },
+        {
+          max: 20,
+          message: '编码不能超过20个字符',
+          trigger: ['blur', 'input'],
+        },
+        {
+          pattern: /^[\w-]+$/,
+          message: '编码不支持中文，只能包含字母、数字、下划线和连字符',
+          trigger: ['blur', 'input'],
+        },
+        { validator: validateAppCode, trigger: 'blur' },
+      ],
+    },
+    {
+      prop: 'icon',
+      label: '图标',
+      required: true,
+      slot: 'icon',
+      gridCols: 1, // 图标字段占据整行
+      rules: [
+        {
+          required: true,
+          message: '请选择图标或上传图片',
+          trigger: ['blur', 'change'],
+        },
+      ],
+    },
+    {
+      prop: 'url',
+      label: 'URL',
+      slot: 'url',
+      required: true,
+      gridCols: 1,
+      rules: [
+        { required: true, message: '请输入URL', trigger: ['blur', 'input'] },
+        { max: 200, message: 'URL不能超过200个字符', trigger: ['blur', 'input'] },
+      ],
+    },
+    {
+      prop: 'authSecret',
+      label: '认证密钥',
+      slot: 'authSecret',
+      gridCols: 1,
+      rules: [
+        { validator: validateAuthSecret, trigger: ['blur', 'input'] },
+        {
+          max: 32,
+          message: '认证密钥不能超过32个字符',
+          trigger: ['blur', 'input'],
+        },
+      ],
+    },
+    {
+      prop: 'appType',
+      label: '类型',
+      type: 'radio',
+      required: true,
+      gridCols: 1,
+      options: [
+        { label: '系统内', value: 0 },
+        { label: '系统外', value: 1 },
+      ],
+      tooltip:
+        '标识应用的访问路径，系统内是通过开发平台创建的应用；系统外是接入的三方应用。',
+    },
+    {
+      prop: 'mobileApplication',
+      label: '移动端',
+      type: 'radio',
+      gridCols: 1,
+      required: true,
+      options: [
+        { label: '否', value: 0 },
+        { label: '是', value: 1 },
+        { label: '通用', value: 2 },
+      ],
+      tooltip:
+        '标识应用是否为移动端应用，否表示仅web端，是表示仅移动端，通用表示web和移动端都支持。',
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      type: 'switch',
+      props: {
+        activeText: '开',
+        inactiveText: '关',
+      },
+    },
+    {
+      prop: 'sort',
+      label: '排序',
+      type: 'number',
+      props: {
+        min: 1,
+        max: 999,
+      },
+    },
+    {
+      prop: 'description',
+      label: '备注',
+      type: 'textarea',
+      placeholder: '请输入备注信息',
+      gridCols: 1, // 备注字段占据整行
+      props: {
+        rows: 3,
+        maxlength: 100,
+        showWordLimit: true,
+      },
+    },
+    {
+      prop: 'accountSyncUrl',
+      label: '账号同步地址',
+      gridCols: 1,
+      rules: [
+        { max: 200, message: '账号同步地址不能超过200个字符', trigger: ['blur', 'input'] },
+      ],
+      condition: (values) => values.appType === 1,
+    },
+    {
+      prop: 'roleSyncUrl',
+      label: '角色同步地址',
+      type: 'input',
+      gridCols: 1,
+      rules: [
+        { max: 200, message: '角色同步地址不能超过200个字符', trigger: ['blur', 'input'] },
+      ],
+      condition: (values) => values.appType === 1,
+    },
+    {
+      prop: 'orgSyncUrl',
+      label: '机构同步地址',
+      gridCols: 1,
+      type: 'input',
+      rules: [
+        { max: 200, message: '机构同步地址不能超过200个字符', trigger: ['blur', 'input'] },
+      ],
+      condition: (values) => values.appType === 1,
+    },
+  ] as FormItemConfig[];
+});
+
+// ==================== 扩展属性相关方法 ====================
+
+// 构建扩展属性值（编辑模式）
+const buildEditExtendValues = (newVal: any) => {
+  if (!props.expandFields?.length) return [] as any[];
+  return props.expandFields.map((item) => ({
+    fieldsId: item.id,
+    fieldName: item.fieldName,
+    fieldValue:
+      (newVal.extendValues || []).find((_item: any) => _item.fieldsId === item.id)
+        ?.fieldValue || '',
+    fieldOption: item.fieldOption,
+    fieldType: item.fieldType,
+  }));
+};
+
+// 构建扩展属性值（新增模式）
+const buildNewExtendValues = () => {
+  if (!props.expandFields?.length) return [] as any[];
+  return props.expandFields.map((field: any) => ({
+    fieldsId: field.id,
+    fieldName: field.fieldName,
+    fieldValue: '',
+    fieldOption: field.fieldOption,
+    fieldType: field.fieldType,
+  }));
+};
+
+// 监听props变化，初始化表单数据
+watch(
+  () => props.formData,
+  async (newVal) => {
+    if (!newVal) return;
+
+    const formValues = {
+      id: newVal.id || undefined,
+      appName: newVal.appName || '',
+      appCode: newVal.appCode || '',
+      icon: newVal.icon || '',
+      url: newVal.url || '',
+      authSecret: newVal.authSecret || '',
+      appType: newVal.appType === undefined ? 0 : newVal.appType,
+      mobileApplication:
+        newVal.mobileApplication === undefined ? 0 : newVal.mobileApplication,
+      sort: newVal.sort || 1,
+      status: newVal.status === undefined ? true : newVal.status === 1,
+      description: newVal.description || '',
+      accountSyncUrl: newVal.accountSyncUrl || '',
+      roleSyncUrl: newVal.roleSyncUrl || '',
+      orgSyncUrl: newVal.orgSyncUrl || '',
+      extendValues: newVal.id ? buildEditExtendValues(newVal) : buildNewExtendValues(),
+    };
+
+    console.log('设置表单值:', formValues);
+
+    // 🔥 使用表单实例的 setValues 方法更新表单数据（包含扩展属性）
+    nextTick(() => {
+      formRef.value?.setValues(formValues);
+    });
+  },
+  { immediate: true, deep: true },
+);
+
+// 字段变化处理
+const handleFieldChange = (
+  prop: string,
+  value: any,
+  values: Record<string, any>,
+) => {
+  console.log('字段变化:', { prop, value, values });
+};
+
+// 提交表单
+const handleSubmit = async () => {
+  try {
+    loading.value = true;
+
+    // 表单验证
+    const valid = await formRef.value?.validate();
+    if (!valid) {
+      ElMessage.error('请检查表单数据');
+      return false;
+    }
+
+    // 获取最新的表单数据
+    const currentData = formRef.value?.getValues();
+    if (!currentData) {
+      ElMessage.error('获取表单数据失败');
+      return false;
+    }
+
+    // 构建提交数据
+    const submitData = {
+      id: currentData.id,
+      appName: currentData.appName,
+      appCode: currentData.appCode,
+      icon: currentData.icon,
+      url: currentData.url,
+      authSecret: currentData.authSecret,
+      appType: currentData.appType, // 添加应用类型字段
+      mobileApplication: currentData.mobileApplication, // 添加移动端应用字段
+      sort: currentData.sort,
+      status: currentData.status ? 1 : 0, // true -> 1(启用), false -> 0(停用)
+      description: currentData.description,
+      accountSyncUrl: currentData.accountSyncUrl,
+      roleSyncUrl: currentData.roleSyncUrl,
+      orgSyncUrl: currentData.orgSyncUrl,
+      // 添加扩展属性值
+      extendValues: currentData.extendValues?.filter(
+        (item: any) => item.fieldValue
+      ) || [],
+    };
+
+    console.log('提交数据:', submitData);
+    emit('submit', submitData);
+    return true;
+  } catch (error) {
+    console.error('提交失败:', error);
+    ElMessage.error('提交失败，请重试');
+    return false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 重置表单
+const resetForm = () => {
+  // 先清除验证状态，避免触发验证
+  validating.appName = false;
+  validating.appCode = false;
+
+  // 清除上次验证的值
+  lastValidatedValues.appName = '';
+  lastValidatedValues.appCode = '';
+
+  // 重置校验结果
+  lastValidationResults.appName = { valid: true, errorMsg: '' };
+  lastValidationResults.appCode = { valid: true, errorMsg: '' };
+
+  // 清除表单验证
+  formRef.value?.clearValidate();
+
+  // 使用表单实例的 resetFields 方法重置表单
+  nextTick(() => {
+    formRef.value?.resetFields();
+  });
+};
+
+// 暴露方法
+defineExpose({
+  resetForm,
+  submitForm: handleSubmit,
+  getFormData: () => formRef.value?.getValues(),
+});
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    :items="formItems"
+    :initial-values="initFormData"
+    auto
+    :show-actions="false"
+    label-width="auto"
+    :use-grid="true"
+    :grid-cols="2"
+    :grid-gutter="20"
+    @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">
+          <!-- 文件 ID 模式：blob URL -->
+          <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>
+
+    <!-- 自定义URL输入插槽 -->
+    <template #url="{ model, setValue }">
+      <div class="form-item-container">
+        <el-input
+          :model-value="model.url"
+          placeholder="请输入URL"
+          class="full-width-input"
+          @input="(val: string) => setValue(val)"
+        />
+      </div>
+    </template>
+
+    <!-- 自定义认证密钥输入插槽 -->
+    <template #authSecret="{ model, setValue }">
+      <div class="form-item-container">
+        <el-input
+          :model-value="model.authSecret"
+          placeholder="请输入认证密钥"
+          class="full-width-input"
+          @input="(val: string) => setValue(val)"
+        >
+          <template #append>
+            <el-button
+              @click="generateSecret"
+              :loading="loading"
+              class="flex items-center justify-center"
+            >
+              生成
+            </el-button>
+          </template>
+        </el-input>
+      </div>
+    </template>
+  </Form>
+
+  <!-- 🔥 扩展属性 - 绑定 appFormData.extendValues（从 formRef 获取） -->
+  <ExpandAttribute
+    v-if="props.expandFields.length > 0 && appFormData.extendValues"
+    v-model="appFormData.extendValues"
+    :disabled="props.type === 'view'"
+  />
+
+  <!-- 🎨 图标选择器弹窗 -->
+  <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="appFormData.icon" />
+  </Dialog>
+</template>
+<style scoped>
+.form-item-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.full-width-input {
+  width: 100%;
+}
+
+/* 统一输入框宽度 */
+:deep(.el-input),
+:deep(.el-input-number),
+:deep(.el-select),
+:deep(.el-textarea) {
+  width: 100%;
+}
+
+.mt-2 {
+  margin-top: 8px;
+}
+
+/* 确保单选按钮组样式一致 */
+:deep(.el-radio-group) {
+  display: flex;
+  gap: 16px;
+}
+
+/* ==================== 图片上传区域样式 ==================== */
+.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;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  @apply bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-100;
+}
+
+.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;
+  @apply dark:text-gray-100;
+}
+
+/* 💡 提示文本 */
+.image-upload-tip {
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.5;
+}
+</style>