yg-yygl 0.0.1

package/dist/views/sys/sys-config/mobile-config/index.vue

@@ -0,0 +1,997 @@
+<script setup lang="ts">
+import type { FormItemConfig } from '@udp/component-ui';
+
+import type { LaunchPageRequest } from '../../../../api/launchpage';
+
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, toRaw, watch } from 'vue';
+
+import { Dialog, Form } from '@udp/component-ui';
+import { UdpUpload } from '@udp/ui';
+import type { FileInfo } from '@udp/ui';
+// import { useAppConfig } from '@udp/hooks'; // 已改用 blob URL，不再需要 apiURL
+import { useAccessStore } from '@udp/stores';
+
+import { Delete, Plus } from '@element-plus/icons-vue';
+import { useDebounceFn } from '@vueuse/core';
+import { ElButton, ElIcon, ElMessage } from 'element-plus';
+
+import {
+  createLaunchPage,
+  deleteLaunchPage,
+  disableLaunchPage,
+  enableLaunchPage,
+  pageLaunchPage,
+  updateLaunchPage,
+} from '../../../../api/launchpage';
+import { baseList, updateBaseConfig } from '../../../../api/sys-config';
+import { getRequestClient } from '../../../../api/request';
+import { Tag } from '../../../../components/custom-tags';
+
+import ImportFile from './components/import-file.vue';
+
+// 启动页接口定义
+export interface LaunchPage {
+  id?: string;
+  name: string;
+  status: number;
+  displayFlag: number;
+  startTime?: string;
+  endTime?: string;
+  launchPageUrl: string;
+  createUser?: string;
+  createTime?: string;
+  updateTime?: string;
+}
+
+// 图片预览相关
+const previewVisible = ref(false);
+const previewImageUrl = ref('');
+
+// 旧方式：直接拼 apiURL + /api/msg/upLoadImage，已改用 blob URL
+// const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
+// const accessStore = useAccessStore();
+// const accessToken = computed(() => accessStore.accessToken || '');
+
+// 表单引用
+const formRef = ref();
+
+// 组件状态
+const loading = ref(false);
+const loadingText = ref('');
+
+// 启动页相关状态
+const launchPages = ref<LaunchPage[]>([]);
+const launchPageLoading = ref(false);
+const dialogVisible = ref(false);
+const editLaunchPage = ref<LaunchPage | null>(null);
+const newLaunchPage = reactive<LaunchPage>({
+  name: '',
+  status: 0,
+  displayFlag: 0,
+  launchPageUrl: '',
+  startTime: undefined,
+  endTime: undefined,
+});
+
+// 表单配置项
+const formItems = computed<FormItemConfig[]>(() => [
+  {
+    prop: 'name',
+    label: '标题',
+    type: 'input' as const,
+    gridCols: 1,
+    // required: true,
+    placeholder: '请输入标题名称',
+    // rules: [
+    //   { required: true, message: '请输入标题名称', trigger: ['blur', 'input'] },
+    //   {
+    //     min: 2,
+    //     max: 60,
+    //     message: '标题长度应在 2-60 个字符',
+    //     trigger: ['blur', 'input'],
+    //   },
+    // ],
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    type: 'radio' as const,
+    gridCols: 1,
+    required: true,
+    options: [
+      { label: '启用', value: 0 },
+      { label: '停用', value: 1 },
+    ],
+  },
+  {
+    prop: 'displayFlag',
+    label: '生效时间',
+    type: 'radio',
+    gridCols: 1,
+    required: true,
+    options: [
+      { label: '常驻', value: 0 },
+      { label: '指定时间段', value: 1 },
+    ],
+  },
+  {
+    prop: 'startTime',
+    label: '',
+    type: 'datetime',
+    placeholder: '请选择开始时间',
+    condition: (formData: any) => formData.displayFlag === 1,
+    props: {
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    prop: 'endTime',
+    label: '',
+    type: 'datetime',
+    placeholder: '请选择结束时间',
+    condition: (formData: any) => formData.displayFlag === 1,
+    props: {
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    prop: 'launchPageUrl',
+    label: '上传启动页',
+    required: false,
+    gridCols: 1,
+    slot: 'launchPageUrl',
+  },
+]);
+
+// 获取启动页列表
+const getLaunchPages = () => {
+  launchPageLoading.value = true;
+  pageLaunchPage({ current: -1, model: {} })
+    .then((res) => {
+      launchPageLoading.value = false;
+      if (res && res.records) {
+        launchPages.value = res.records;
+      } else {
+        ElMessage.error('获取启动页列表失败');
+      }
+    })
+    .catch((error) => {
+      launchPageLoading.value = false;
+      ElMessage.error('获取启动页列表失败');
+      console.error('获取启动页列表失败:', error);
+    });
+};
+
+// 打开编辑对话框
+const openEditDialog = (page?: LaunchPage) => {
+  console.log('打开编辑对话框，传入的页面数据:', page);
+
+  // 先关闭对话框，确保重新初始化
+  dialogVisible.value = false;
+
+  if (page) {
+    // 创建深拷贝以确保数据正确绑定（使用 toRaw 解除 Proxy 包装后再克隆）
+    const pageCopy = structuredClone(toRaw(page));
+    console.log('深拷贝后的数据:', pageCopy);
+
+    // 确保所有必要的字段都存在
+    const defaultLaunchPage: LaunchPage = {
+      name: '',
+      status: 0,
+      displayFlag: 0,
+      launchPageUrl: '',
+      ...pageCopy,
+    };
+
+    editLaunchPage.value = defaultLaunchPage;
+    console.log('设置editLaunchPage后的数据:', editLaunchPage.value);
+  } else {
+    editLaunchPage.value = null;
+    Object.assign(newLaunchPage, {
+      name: '',
+      status: 0,
+      displayFlag: 0,
+      launchPageUrl: '',
+      startTime: undefined,
+      endTime: undefined,
+    });
+    console.log('新增模式 - 重置newLaunchPage:', newLaunchPage);
+  }
+
+  // 使用nextTick确保数据更新后再显示对话框
+  nextTick(() => {
+    console.log('nextTick中，准备显示对话框');
+    dialogVisible.value = true;
+
+    // 再次使用nextTick确保对话框完全渲染后
+    nextTick(() => {
+      // 对话框显示后，不要调用resetFields()避免清除已设置的数据
+      if (formRef.value) {
+        const currentData = editLaunchPage.value || newLaunchPage;
+        console.log('对话框显示后的数据:', currentData);
+        // 不重置表单，确保数据正确显示
+      } else {
+        console.error('formRef未获取到');
+      }
+    });
+  });
+};
+
+// 关闭编辑对话框
+const closeEditDialog = () => {
+  console.log('关闭编辑对话框，重置状态');
+  dialogVisible.value = false;
+
+  // 使用nextTick确保对话框关闭后再重置数据
+  nextTick(() => {
+    editLaunchPage.value = null;
+    // 重置newLaunchPage
+    Object.assign(newLaunchPage, {
+      name: '',
+      status: 0,
+      displayFlag: 0,
+      launchPageUrl: '',
+      startTime: undefined,
+      endTime: undefined,
+    });
+
+    // 重置表单引用
+    if (formRef.value) {
+      formRef.value.resetFields();
+    }
+    console.log('对话框状态已重置');
+  });
+};
+
+// 旧的上传处理（已改用 UdpUpload + blob URL）
+// const handleThumbnailSuccess = (response: any, file: any) => { ... };
+// const handleThumbnailError = (error: any, file: any) => { ... };
+// const beforeThumbnailUpload = (file: any) => { ... };
+
+// 表单绑定的数据对象
+const formData = computed({
+  get() {
+    return editLaunchPage.value || newLaunchPage;
+  },
+  set(value) {
+    // 确保value对象存在
+    if (!value) return;
+
+    // 根据当前模式决定更新哪个对象
+    if (editLaunchPage.value) {
+      // 编辑模式：更新editLaunchPage
+      Object.assign(editLaunchPage.value, value);
+    } else {
+      // 新增模式：更新newLaunchPage
+      Object.assign(newLaunchPage, value);
+    }
+  },
+});
+
+// ---- blob URL 管理 ----
+// 列表图片 blob 缓存
+const imageBlobMap = ref<Record<string, string>>({});
+
+async function loadImageBlob(imageId: string): Promise<string> {
+  if (imageBlobMap.value[imageId]) return imageBlobMap.value[imageId];
+  const res = await getRequestClient().get(
+    `/api/common/preview/file?id=${encodeURIComponent(imageId)}`,
+    { responseType: 'blob', responseReturn: 'raw' },
+  );
+  const blobUrl = URL.createObjectURL(res.data);
+  imageBlobMap.value[imageId] = blobUrl;
+  return blobUrl;
+}
+
+watch(launchPages, async (pages) => {
+  if (!pages) return;
+  const ids = pages
+    .map((p) => p.launchPageUrl)
+    .filter((id): id is string => !!id && !id.startsWith('http'))
+    .filter((id) => !imageBlobMap.value[id]);
+  await Promise.allSettled(ids.map((id) => loadImageBlob(id)));
+}, { immediate: true });
+
+// 弹窗内图片 blob URL
+const launchPageBlobUrl = ref('');
+let currentLaunchPageId = '';
+
+async function fetchLaunchPageBlob(imageId: string): Promise<string> {
+  const res = await getRequestClient().get(
+    `/api/common/preview/file?id=${encodeURIComponent(imageId)}`,
+    { responseType: 'blob', responseReturn: 'raw' },
+  );
+  return URL.createObjectURL(res.data);
+}
+
+watch(
+  () => formData.value?.launchPageUrl,
+  async (newId) => {
+    if (!newId || newId.startsWith('http')) return;
+    if (newId === currentLaunchPageId && launchPageBlobUrl.value) return;
+    if (launchPageBlobUrl.value) URL.revokeObjectURL(launchPageBlobUrl.value);
+    currentLaunchPageId = newId;
+    try {
+      launchPageBlobUrl.value = await fetchLaunchPageBlob(newId);
+    } catch (e) {
+      console.error('获取启动页图片失败', e);
+      launchPageBlobUrl.value = '';
+    }
+  },
+);
+
+const launchPageSrc = computed(() => {
+  const val = formData.value?.launchPageUrl;
+  if (!val) return '';
+  if (val.startsWith('http')) return val; // 兼容旧 URL 数据
+  return launchPageBlobUrl.value;
+});
+
+// UdpUpload 上传成功回调
+const handleLaunchPageUploadSuccess = (fileInfo: FileInfo) => {
+  if (fileInfo?.id) {
+    if (editLaunchPage.value) {
+      editLaunchPage.value.launchPageUrl = fileInfo.id;
+    } else {
+      newLaunchPage.launchPageUrl = fileInfo.id;
+    }
+    nextTick(() => {
+      if (formRef.value) {
+        formRef.value.clearValidate('launchPageUrl');
+      }
+    });
+  }
+};
+// ---- END blob URL 管理 ----
+
+// 处理预览图片点击
+const handlePreviewImage = () => {
+  const src = launchPageSrc.value;
+  if (src) {
+    previewImageUrl.value = src;
+    previewVisible.value = true;
+  }
+};
+
+// 删除图片
+const handleRemoveImage = () => {
+  if (editLaunchPage.value) {
+    editLaunchPage.value.launchPageUrl = '';
+  } else {
+    newLaunchPage.launchPageUrl = '';
+  }
+  if (launchPageBlobUrl.value) URL.revokeObjectURL(launchPageBlobUrl.value);
+  launchPageBlobUrl.value = '';
+  currentLaunchPageId = '';
+  nextTick(() => {
+    if (formRef.value) {
+      formRef.value.clearValidate('launchPageUrl');
+    }
+  });
+};
+
+// 保存启动页
+const saveLaunchPage = async () => {
+  try {
+    // 表单验证
+    const valid = await formRef.value?.validate();
+    if (!valid) {
+      console.log('表单验证失败');
+      return false;
+    }
+
+    const pageData = editLaunchPage.value || newLaunchPage;
+    console.log('当前页面数据:', pageData);
+
+    const submitData: LaunchPageRequest = {
+      name: pageData.name,
+      status: pageData.status,
+      displayFlag: pageData.displayFlag,
+      startTime: pageData.displayFlag === 1 ? pageData.startTime : '',
+      endTime: pageData.displayFlag === 1 ? pageData.endTime : '',
+      launchPageUrl: pageData.launchPageUrl,
+    };
+
+    console.log('提交数据:', submitData);
+
+    if (editLaunchPage.value && editLaunchPage.value.id) {
+      submitData.id = editLaunchPage.value.id.toString();
+      console.log('执行更新操作，ID:', submitData.id);
+      await updateLaunchPage(submitData);
+    } else {
+      console.log('执行创建操作');
+      await createLaunchPage(submitData);
+    }
+
+    // 只有API调用成功后才执行以下操作
+    closeEditDialog();
+    getLaunchPages();
+    return true;
+  } catch (error: any) {
+    console.error('保存启动页失败:', error);
+    // 添加更详细的错误信息输出
+    if (error.response) {
+      console.error('API响应错误:', error.response.data);
+      ElMessage.error(
+        `保存失败: ${error.response.data?.message || '服务器错误'}`,
+      );
+    } else if (error.request) {
+      console.error('请求发送失败:', error.request);
+      ElMessage.error('网络请求失败，请检查网络连接');
+    } else {
+      ElMessage.error('保存失败，请重试');
+    }
+    return false;
+  }
+};
+
+// 启用启动页
+const handleEnableLaunchPage = async (id: string) => {
+  try {
+    await enableLaunchPage(id);
+    ElMessage.success('启动页已启用');
+    getLaunchPages();
+  } catch (error: any) {
+    console.error('启用启动页失败:', error);
+    ElMessage.error('启用失败，请重试');
+  }
+};
+
+// 禁用启动页
+const handleDisableLaunchPage = async (id: string) => {
+  try {
+    await disableLaunchPage(id);
+    ElMessage.success('启动页已禁用');
+    getLaunchPages();
+  } catch (error: any) {
+    console.error('禁用启动页失败:', error);
+    ElMessage.error('禁用失败，请重试');
+  }
+};
+
+// 删除启动页
+
+// 处理对话框确认事件
+const handleConfirm = async () => {
+  try {
+    const result = await saveLaunchPage();
+    if (result) {
+      ElMessage.success(
+        editLaunchPage.value ? '启动页更新成功' : '启动页创建成功',
+      );
+    } else {
+      ElMessage.error('保存失败，请重试');
+    }
+    return result;
+  } catch (error: any) {
+    console.error('处理确认事件失败:', error);
+    ElMessage.error('保存失败，请重试');
+    return false;
+  }
+};
+
+// 删除启动页
+const handleDeleteLaunchPage = async (id: string) => {
+  try {
+    await deleteLaunchPage(id);
+    ElMessage.success('启动页已删除');
+    getLaunchPages();
+  } catch (error: any) {
+    console.error('删除启动页失败:', error);
+    ElMessage.error('删除失败，请重试');
+  }
+};
+
+export interface MobileConfig {
+  id?: string;
+  mobileVersion?: string;
+  mobileVersionCode?: string;
+  disableScreenshot?: number;
+  immersiveNavBar?: number;
+  letterSort?: number;
+  letterSort?: number;
+  configType?: number;
+  /**
+   * 创建时间
+   */
+  crateTime?: string;
+  /**
+   * 创建者ID
+   */
+  createUser?: string;
+  /**
+   * 0:未删除 1:删除
+   */
+  delFlag?: number;
+  /**
+   * 更新日期
+   */
+  updateUser?: string;
+  /**
+   * 更新者ID
+   */
+  updaterId?: string;
+  [property: string]: any;
+}
+
+const importApkRef = ref<typeof ImportFile>();
+
+const data = ref<MobileConfig>({} as MobileConfig);
+const handleSubmit = useDebounceFn(async () => {
+  console.log(data.value, 'Mobile config data');
+  try {
+    loading.value = true;
+    loadingText.value = '正在保存...';
+
+    // 创建符合MobileConfig类型的对象，包含id和需要更新的三个字段
+    const updateData = {} as MobileConfig;
+    updateData.id = data.value.id;
+    updateData.mobileVersion = data.value.mobileVersion;
+    updateData.mobileVersionCode = data.value.mobileVersionCode;
+    updateData.disableScreenshot = Number(data.value.disableScreenshot);
+    updateData.immersiveNavBar = Number(data.value.immersiveNavBar);
+    updateData.letterSort = Number(data.value.letterSort);
+    updateData.letterSort = Number(data.value.letterSort);
+    updateData.configType = 1;
+
+    // 上传安装包
+    loadingText.value = '正在上传安装包...';
+    const url = await importApkRef.value?.submit();
+    if (!url) {
+      return false;
+    }
+    data.value.apkDownloadUrl = url;
+    updateData.apkDownloadUrl = url;
+    loadingText.value = '正在保存...';
+
+    await updateBaseConfig(updateData);
+    ElMessage.success('修改移动端配置成功');
+    initData();
+  } catch (error: any) {
+    console.error('提交失败:', error);
+    ElMessage.error('提交失败，请重试');
+    return false;
+  } finally {
+    loading.value = false;
+    loadingText.value = '';
+  }
+}, 500);
+
+// 初始化表单数据
+const initData = () => {
+  loading.value = true;
+  baseList({ tenantId: null })
+    .then((res) => {
+      loading.value = false;
+      if (res) {
+        data.value = res[0] || [];
+        // 确保开关状态正确初始化
+        if (data.value.disableScreenshot === undefined) {
+          data.value.disableScreenshot = 0;
+        }
+        if (data.value.immersiveNavBar === undefined) {
+          data.value.immersiveNavBar = 0;
+        }
+        if (data.value.letterSort === undefined) {
+          data.value.letterSort = 0;
+        }
+        if (data.value.letterSort === undefined) {
+          data.value.letterSort = 0;
+        }
+      } else {
+        ElMessage.error(res.msg || '移动端配置获取失败');
+      }
+    })
+    .catch((error: any) => {
+      loading.value = false;
+      ElMessage.error(error || '移动端配置获取失败');
+    });
+};
+
+// 生命周期
+onMounted(() => {
+  initData();
+  getLaunchPages();
+  console.log('移动端配置组件已挂载');
+});
+
+onBeforeUnmount(() => {
+  Object.values(imageBlobMap.value).forEach(url => URL.revokeObjectURL(url));
+  if (launchPageBlobUrl.value) URL.revokeObjectURL(launchPageBlobUrl.value);
+});
+
+defineExpose({
+  handleSubmit,
+  initData,
+});
+</script>
+
+<template>
+  <div
+    v-loading="loading"
+    :element-loading-text="loadingText"
+    class="mobile-config-container"
+  >
+    <!-- 移动端版本号 -->
+    <div style="margin-top: 15px">
+      <div class="mb-1 text-sm">移动端版本号</div>
+      <el-input
+        v-model.trim="data.mobileVersion"
+        placeholder="请输入移动端版本号"
+        clearable
+        class="!flex-1"
+        :maxlength="100"
+        style="width: 25%; margin-top: 8px"
+      />
+      <div class="mt-2 text-xs text-gray-500">
+        当前应用的移动端版本号，用于版本控制和更新提示
+      </div>
+    </div>
+
+    <!-- 移动端版本编号 -->
+    <div style="margin-top: 15px">
+      <div class="mb-1 text-sm">移动端版本编号</div>
+      <el-input
+        v-model.trim="data.mobileVersionCode"
+        placeholder="移动端版本编号"
+        clearable
+        class="!flex-1"
+        :maxlength="100"
+        style="width: 25%; margin-top: 8px"
+      />
+      <div class="mt-2 text-xs text-gray-500">
+        当前应用的移动端版本号，用于版本控制和更新提示
+      </div>
+    </div>
+
+    <!-- 移动端安装包  apkDownloadUrl -->
+    <div style="margin-top: 15px">
+      <div class="mb-1 text-sm">移动端安装包</div>
+      <ImportFile
+        ref="importApkRef"
+        :file="data.apkDownloadUrl"
+        :show-template-download="false"
+        accept=".apk"
+        file-name="移动端安装包.apk"
+        upload-tip="仅允许上传apk格式文件"
+        :show-upload-tip="false"
+      />
+      <div class="mt-2 text-xs text-gray-500">
+        当前应用的移动端安装包，用于移动端用户下载安装
+      </div>
+    </div>
+
+    <!-- 禁止截屏 -->
+    <div style="margin-top: 15px">
+      <div class="mb-1 text-sm">
+        禁止截屏
+        <span class="mb-1 text-xs" :style="{ color: 'gray' }">
+          开启后，移动端应用将禁止用户截屏，提高应用安全性
+        </span>
+      </div>
+      <el-switch
+        class="mr-[30px]"
+        :active-value="1"
+        :inactive-value="0"
+        v-model="data.disableScreenshot"
+      />
+    </div>
+
+    <!-- 沉浸式导航栏 -->
+    <div style="margin-top: 15px">
+      <div class="mb-1 text-sm">
+        沉浸式导航栏
+        <span class="mb-1 text-xs" :style="{ color: 'gray' }">
+          开启后，移动端应用将使用沉浸式导航栏，提供更好的视觉体验
+        </span>
+      </div>
+      <el-switch
+        class="mr-[30px]"
+        :active-value="1"
+        :inactive-value="0"
+        v-model="data.immersiveNavBar"
+      />
+    </div>
+
+    <!-- 字母排序 -->
+    <div style="margin-top: 15px">
+      <div class="mb-1 text-sm">
+        字母排序
+        <span class="mb-1 text-xs" :style="{ color: 'gray' }">
+          开启后，移动端通讯录将使用字母排序，提供更好的视觉体验
+        </span>
+      </div>
+      <el-switch
+        class="mr-[30px]"
+        :active-value="1"
+        :inactive-value="0"
+        v-model="data.letterSort"
+      />
+    </div>
+
+    <!-- APP启动页配置 -->
+    <div style="margin-top: 15px">
+      <div class="mb-1 text-sm">APP启动页配置</div>
+      <div style="margin-top: 15px; display: flex; flex-wrap: wrap; gap: 15px">
+        <!-- +号上传按钮 -->
+        <div
+          class="launchpage-upload-item"
+          @click="openEditDialog()"
+          :style="{
+            border: '1px dashed #dcdfe6',
+            borderRadius: '4px',
+            width: '200px',
+            height: '250px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: 'pointer',
+            transition: 'all 0.3s',
+          }"
+        >
+          <ElButton
+            type="primary"
+            :icon="Plus"
+            circle
+            style="margin-bottom: 8px"
+          />
+          <span class="text-xs text-gray-500">添加启动页</span>
+        </div>
+
+        <!-- 启动页列表 -->
+        <div v-for="page in launchPages" :key="page.id" class="launchpage-item">
+          <div class="launchpage-content">
+            <!-- 旧方式：:src="page.launchPageUrl" 直接拼 URL -->
+            <img
+              v-if="page.launchPageUrl && (page.launchPageUrl.startsWith('http') || imageBlobMap[page.launchPageUrl])"
+              :src="page.launchPageUrl.startsWith('http') ? page.launchPageUrl : imageBlobMap[page.launchPageUrl]"
+              alt="启动页图片"
+              class="launchpage-image"
+            />
+            <div v-else class="launchpage-image flex items-center justify-center bg-gray-100 text-gray-400 text-xs">
+              无图片
+            </div>
+            <div class="launchpage-info">
+              <div class="launchpage-name">{{ page.name }}</div>
+              <div class="launchpage-status">
+                <Tag
+                  :value="page.status"
+                  :options="[
+                    { label: '启用', value: 0, type: 'success' },
+                    { label: '禁用', value: 1, type: 'danger' },
+                  ]"
+                />
+              </div>
+              <div class="launchpage-time">{{ page.createTime }}</div>
+            </div>
+          </div>
+          <div class="launchpage-actions">
+            <ElButton
+              type="primary"
+              link
+              size="small"
+              @click="openEditDialog(page)"
+            >
+              编辑
+            </ElButton>
+            <ElButton
+              v-if="page.status === 1"
+              type="success"
+              link
+              size="small"
+              @click="handleEnableLaunchPage(page.id as string)"
+            >
+              启用
+            </ElButton>
+            <ElButton
+              v-if="page.status === 0"
+              type="warning"
+              link
+              size="small"
+              @click="handleDisableLaunchPage(page.id as string)"
+            >
+              禁用
+            </ElButton>
+            <ElButton
+              type="danger"
+              link
+              size="small"
+              @click="handleDeleteLaunchPage(page.id as string)"
+            >
+              删除
+            </ElButton>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex items-center" style="margin-top: 15px">
+      <el-button type="primary" @click="handleSubmit"> 保存 </el-button>
+    </div>
+
+    <!-- 启动页编辑对话框 -->
+    <Dialog
+      v-model="dialogVisible"
+      :title="editLaunchPage ? '编辑启动页' : '新增启动页'"
+      width="600px"
+      @confirm="handleConfirm"
+      @closed="closeEditDialog"
+    >
+      <Form
+        ref="formRef"
+        :items="formItems"
+        v-model="formData"
+        :show-actions="false"
+        label-width="auto"
+        :use-grid="true"
+        :grid-cols="2"
+        :grid-gutter="10"
+      >
+        <template #launchPageUrl>
+          <!-- 旧方式：el-upload :action="`${apiURL}/api/msg/upLoadImage`" -->
+          <div class="relative" style="width: 120px; height: 120px">
+            <UdpUpload
+              :accept="'image/*'"
+              :max-size="20"
+              :show-file-list="false"
+              :show-success-message="true"
+              :request-fn="(url, data, config) => getRequestClient().post(url, data, config)"
+              @success="handleLaunchPageUploadSuccess"
+            >
+              <div class="upload-thumbnail">
+                <img
+                  v-if="launchPageSrc"
+                  :src="launchPageSrc"
+                  class="thumbnail-image"
+                  @click="handlePreviewImage"
+                />
+                <el-icon v-else class="thumbnail-placeholder">
+                  <Plus />
+                </el-icon>
+              </div>
+            </UdpUpload>
+            <!-- 悬浮删除按钮 -->
+            <div v-if="launchPageSrc" class="avatar-overlay" @click.stop="handleRemoveImage">
+              <el-icon class="action-btn"><Delete /></el-icon>
+            </div>
+          </div>
+        </template>
+      </Form>
+    </Dialog>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.mobile-config-container {
+  background-color: var(--el-bg-color);
+  border-radius: var(--radius);
+}
+
+/* 启动页样式 */
+.launchpage-upload-item:hover {
+  border-color: var(--el-color-primary);
+  color: var(--el-color-primary);
+}
+
+.launchpage-item {
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  width: 200px;
+  overflow: hidden;
+}
+
+.launchpage-content {
+  padding: 10px;
+}
+
+.launchpage-image {
+  width: 100%;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.launchpage-info {
+  margin-top: 8px;
+}
+
+.launchpage-name {
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.launchpage-status {
+  margin-top: 4px;
+}
+
+.launchpage-time {
+  font-size: 11px;
+  color: #909399;
+  margin-top: 4px;
+}
+
+.launchpage-actions {
+  border-top: 1px solid #e4e7ed;
+  padding: 8px;
+  display: flex;
+  justify-content: space-around;
+}
+
+/* 缩略图上传容器 */
+.upload-thumbnail {
+  @apply relative cursor-pointer overflow-hidden rounded-md border border-dashed border-gray-300 transition-all duration-200;
+  width: 120px;
+  height: 120px;
+
+  &:hover {
+    @apply border-primary;
+  }
+}
+
+/* 缩略图图片 */
+.thumbnail-image {
+  @apply block cursor-pointer object-cover;
+  width: 120px;
+  height: 120px;
+}
+
+/* 缩略图占位符 */
+.thumbnail-placeholder {
+  @apply flex items-center justify-center text-center text-2xl text-gray-500;
+  width: 120px;
+  height: 120px;
+}
+
+/* 悬浮操作蒙版 */
+.avatar-overlay {
+  @apply absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0;
+  transition: opacity 0.3s ease;
+}
+
+.upload-thumbnail:hover .avatar-overlay {
+  @apply opacity-100;
+}
+
+.action-btn {
+  @apply flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-white bg-opacity-80 text-gray-800;
+  transition: all 0.3s ease;
+
+  &:hover {
+    @apply scale-110 transform bg-white;
+  }
+
+  .el-icon {
+    @apply text-base;
+  }
+}
+
+/* 确保所有表单元素可见 */
+:deep(.el-input) {
+  width: 100%;
+}
+
+:deep(.el-date-editor) {
+  width: 100%;
+}
+
+/* 修复可能的定位问题 */
+.el-dialog__body {
+  overflow: visible;
+}
+
+/* 确保表单样式一致性 */
+:deep(.udp-form-item) {
+  margin-bottom: 16px;
+}
+
+:deep(.udp-form-label) {
+  color: #606266;
+  font-weight: 500;
+}
+</style>