yg-yygl 0.0.1

package/dist/views/sys/sys-config/base-config/base-form.vue

@@ -0,0 +1,1066 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+import { Dialog, Icon } from '@udp/component-ui';
+import { preferences } from '@udp/preferences';
+import { useAccessStore, useSystemStore, useUserStore } from '@udp/stores';
+
+import dayjs from 'dayjs';
+import { ElMessage } from 'element-plus';
+import { Watermark } from 'watermark-js-plus'; // 引入水印插件
+
+import { baseList, updateBaseConfig } from '../../../../api/sys-config';
+import { getRequestClient } from '../../../../api/request';
+import { AvatarCropper } from '../../../../components/avatar-cropper';
+// import { UploadImg } from '../../../../components/upload-img'; // 已改用 UdpUpload + blob URL
+import { UdpUpload } from '@udp/ui';
+import type { FileInfo } from '@udp/ui';
+import { getWaterMarkOptions } from '../../../../utils';
+
+const watermark = ref();
+// 水印颜色
+let waterMarkTextColorStr = 'gray';
+// 水印密度
+let height = 100;
+
+const userStore = useUserStore();
+let contentStr = `${userStore.userInfo?.name}`;
+const NameStr = `${userStore.userInfo?.name}`;
+const userNameStr = `${userStore.accountInfo?.loginCode}`;
+const tenantNameStr = `${userStore.accountInfo?.tenantName}`;
+const ipStr = `${userStore.accountInfo?.ip}`;
+// 是否为平台管理员（租户ID为0），仅平台管理员可操作租户模式开关
+const isPlatformAdmin = userStore.accountInfo?.tenantId === '0';
+
+const fontOptions = [
+  { label: '微软雅黑', value: 'Microsoft YaHei' },
+  { label: '宋体', value: 'SimSun' },
+  { label: '黑体', value: 'SimHei' },
+  { label: '楷体', value: 'KaiTi' },
+  { label: '仿宋', value: 'FangSong' },
+  { label: '华文中宋', value: 'STZhongsong' },
+  { label: '华文楷体', value: 'STKaiti' },
+  { label: '华文黑体', value: 'STHeiti' },
+  { label: 'Arial', value: 'Arial' },
+  { label: 'Times New Roman', value: 'Times New Roman' },
+];
+
+const accessStore = useAccessStore();
+const menuTreeOptions = computed(() => accessStore.accessMenus);
+
+const addWatermarkPreview = () => {
+  watermark.value = new Watermark({
+    parent: '.waterReview',
+    fontSize: '16px',
+    fontColor: waterMarkTextColorStr,
+    content: contentStr,
+    contentType: 'text',
+    globalAlpha: 0.25,
+    gridLayoutOptions: {
+      cols: 2,
+      gap: [20, 20],
+      matrix: [
+        [1, 0],
+        [0, 1],
+      ],
+      rows: 2,
+    },
+    height,
+    layout: 'grid',
+    rotate: 30,
+    width: 160,
+  });
+
+  watermark.value.create(); // 添加水印
+};
+
+const delWatermarkPreview = () => {
+  watermark.value && watermark.value.destroy(); // 删除水印
+};
+
+// 组件状态
+const loading = ref(false);
+
+const systemStore = useSystemStore();
+
+export interface BaseConfig {
+  id?: string;
+  porLogoUrl?: string;
+  porProjectName?: string;
+  porVersion?: string;
+  homeRoute?: string;
+  waterMarkStatus?: string;
+  waterMarkText?: string;
+  waterMarkTextColor?: string;
+  waterMarkTextSize?: string;
+  avatar?: string;
+  topAvatar?: string; // 顶部菜单背景图片
+  mobileVersion?: string; // 移动端版本号
+  /**
+   * Logo文本颜色
+   */
+  porTextColor?: string;
+  /**
+   * Logo文本字体
+   */
+  porTextFontFormat?: string;
+  /**
+   * Logo文本字体大小
+   */
+  porTextFontSize?: number | string;
+  /**
+   * 顶部一级菜单文本颜色
+   */
+  topMenuTextColor?: string;
+  /**
+   * 顶部一级菜单文本字体
+   */
+  topMenuTextFontFormat?: string;
+  /**
+   * 创建时间
+   */
+  crateTime?: string;
+  /**
+   * 创建者ID
+   */
+  createUser?: string;
+  /**
+   * 0:未删除 1:删除
+   */
+  delFlag?: number;
+
+  /**
+   * 更新日期
+   */
+  updateUser?: string;
+  /**
+   * 更新者ID
+   */
+  updaterId?: string;
+  /**
+   * 租户模式状态 0：关闭 1：开启
+   */
+  tenantStatus?: string;
+  [property: string]: any;
+}
+
+const waterMarkTexOptions = [
+  { label: '账号', value: '1' },
+  { label: '姓名', value: '2' },
+  { label: 'IP', value: '3' },
+  { label: '当前时间', value: '4' },
+  { label: '租户名', value: '5' },
+];
+
+const waterMarkTextColorOptions = [
+  { label: '浅色', value: '1' },
+  { label: '标准', value: '2' },
+  { label: '深色', value: '3' },
+];
+
+const waterMarkTextSizeOptions = [
+  { label: '稀疏', value: '1' },
+  { label: '标准', value: '2' },
+  { label: '密集', value: '3' },
+];
+
+const data = ref<BaseConfig>([]);
+const originalData = ref<BaseConfig>({}); // 保存原始数据
+
+// ---- topAvatar blob URL 管理 ----
+const topAvatarBlobUrl = ref('');
+let currentTopAvatarId = '';
+
+async function fetchTopAvatarBlob(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(
+  () => data.value?.topAvatar,
+  async (newId) => {
+    if (!newId || newId.startsWith('data:') || newId.startsWith('http')) return;
+    if (newId === currentTopAvatarId && topAvatarBlobUrl.value) return;
+    if (topAvatarBlobUrl.value) URL.revokeObjectURL(topAvatarBlobUrl.value);
+    currentTopAvatarId = newId;
+    try {
+      topAvatarBlobUrl.value = await fetchTopAvatarBlob(newId);
+    } catch (e) {
+      console.error('获取顶部菜单背景图失败', e);
+      topAvatarBlobUrl.value = '';
+    }
+  },
+);
+
+onBeforeUnmount(() => {
+  if (topAvatarBlobUrl.value) URL.revokeObjectURL(topAvatarBlobUrl.value);
+});
+
+// UdpUpload 上传成功回调
+const handleTopAvatarSuccess = (fileInfo: FileInfo) => {
+  if (fileInfo?.id) {
+    data.value.topAvatar = fileInfo.id;
+  }
+};
+
+const handleRemoveTopAvatar = () => {
+  data.value.topAvatar = '';
+  if (topAvatarBlobUrl.value) URL.revokeObjectURL(topAvatarBlobUrl.value);
+  topAvatarBlobUrl.value = '';
+  currentTopAvatarId = '';
+};
+
+const topAvatarIsFileId = computed(() => {
+  const val = data.value?.topAvatar;
+  return !!val && !val.startsWith('data:') && !val.startsWith('http');
+});
+
+const topAvatarSrc = computed(() => {
+  if (topAvatarIsFileId.value) return topAvatarBlobUrl.value;
+  return data.value?.topAvatar || '';
+});
+// ---- END topAvatar blob URL 管理 ----
+
+const handleSubmit = async () => {
+  if (loading.value) return; // 防止重复点击
+
+  loading.value = true;
+  console.log(data.value, 1111);
+
+  // 验证必填字段，如果为空则使用原始数据
+  const submitData = { ...data.value };
+
+  if (!submitData.porTextColor) {
+    submitData.porTextColor = originalData.value.porTextColor || '';
+    ElMessage.warning('标题颜色为空，将使用之前的数据');
+  }
+
+  if (!submitData.porTextFontFormat?.trim()) {
+    submitData.porTextFontFormat = originalData.value.porTextFontFormat || '';
+    ElMessage.warning('标题字体为空，将使用之前的数据');
+  }
+
+  if (!submitData.porTextFontSize) {
+    submitData.porTextFontSize = originalData.value.porTextFontSize || 24;
+    ElMessage.warning('标题字体大小为空，将使用之前的数据');
+  }
+
+  try {
+    await updateBaseConfig(submitData);
+    ElMessage.success('修改配置成功');
+    initData();
+    window.location.reload();
+  } catch (error) {
+    console.error('提交失败:', error);
+    ElMessage.error('提交失败，请重试');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 初始化表单数据
+const initData = () => {
+  loading.value = true;
+  baseList({ tenantId: null })
+    .then((res) => {
+      loading.value = false;
+      if (res) {
+        data.value = res[0] || [];
+
+        // 设置 Logo 文本样式默认值
+        if (!data.value.porTextColor) {
+          data.value.porTextColor = '#000000';
+        }
+        if (!data.value.porTextFontSize) {
+          data.value.porTextFontSize = 24;
+        }
+        data.value.porTextFontSize = Number(data.value.porTextFontSize);
+        if (!data.value.porTextFontFormat) {
+          data.value.porTextFontFormat = 'Microsoft YaHei';
+        }
+        if (!data.value.topMenuTextColor) {
+          data.value.topMenuTextColor = '#333333';
+        }
+        if (!data.value.topMenuTextFontFormat) {
+          data.value.topMenuTextFontFormat = 'Microsoft YaHei';
+        }
+
+        // 保存原始数据用于验证
+        originalData.value = { ...data.value };
+        changeSystemState();
+        changeWaterTest(data.value.waterMarkText);
+        changewaterMarkTextColor(data.value.waterMarkTextColor);
+        changewaterMarkTextSize(data.value.waterMarkTextSize);
+        if (data.value.waterMarkStatus === '1') {
+          // 获取当前时间
+          addWatermarkPreview();
+        } else {
+          delWatermarkPreview();
+        }
+      } else {
+        ElMessage.error(res.msg || '登录配置列表获取失败');
+      }
+    })
+    .catch((error) => {
+      loading.value = false;
+      ElMessage.error(error || '登录配置列表收获失败');
+    });
+};
+
+const updateAvatarVisible = ref(false);
+const avatarCropperRef = ref();
+const isBaseLogo = ref(true);
+const handleOpenAvatarCropper = (_isBaseLogo: boolean = true) => {
+  updateAvatarVisible.value = true;
+  isBaseLogo.value = _isBaseLogo;
+};
+const updateAvatarCommit = async () => {
+  // 保留透明背景，使用base64格式
+  const base64 = await avatarCropperRef.value.getBase64();
+  console.log(112_233, base64);
+  if (isBaseLogo.value) {
+    data.value.avatar = base64;
+  } else {
+    data.value.parentLogoUrl = base64;
+  }
+  updateAvatarClose();
+};
+const updateAvatarClose = () => {
+  updateAvatarVisible.value = false;
+  isBaseLogo.value = true;
+};
+
+// 删除 LOGO
+const handleDeleteAvatar = (event: Event) => {
+  event.stopPropagation();
+  data.value.avatar = '';
+};
+
+// 删除父级LOGO
+const handleDeleteParentLogo = (event: Event) => {
+  event.stopPropagation();
+  data.value.parentLogoUrl = '';
+};
+
+const changeWaterMarkOpen = () => {
+  if (data.value.waterMarkStatus === '1') {
+    delWatermarkPreview();
+    addWatermarkPreview();
+  } else {
+    delWatermarkPreview();
+  }
+};
+
+const changeWaterTest = (value: any) => {
+  data.value.waterMarkText = value;
+  // 获取当前时间
+  const today = dayjs().format('YYYY-MM-DD');
+  // 获取主机ip
+  switch (value) {
+    case '1': {
+      contentStr = userNameStr;
+      break;
+    }
+    case '2': {
+      contentStr = NameStr;
+      break;
+    }
+    case '3': {
+      contentStr = ipStr;
+      break;
+    }
+    case '4': {
+      contentStr = `${today}`;
+      break;
+    }
+    case '5': {
+      contentStr = tenantNameStr;
+      break;
+    }
+    // No default
+  }
+  delWatermarkPreview();
+  addWatermarkPreview();
+};
+
+const changewaterMarkTextColor = (value: any) => {
+  data.value.waterMarkTextColor = value;
+  switch (value) {
+    case '1': {
+      waterMarkTextColorStr = '#C0C0C0';
+      break;
+    }
+    case '2': {
+      waterMarkTextColorStr = 'gray';
+      break;
+    }
+    case '3': {
+      waterMarkTextColorStr = 'black';
+      break;
+    }
+    // No default
+  }
+  delWatermarkPreview();
+  addWatermarkPreview();
+};
+
+const changewaterMarkTextSize = (value: any) => {
+  data.value.waterMarkTextSize = value;
+  switch (value) {
+    case '1': {
+      height = 250;
+      break;
+    }
+    case '2': {
+      height = 150;
+      break;
+    }
+    case '3': {
+      height = 100;
+      break;
+    }
+  }
+  delWatermarkPreview();
+  addWatermarkPreview();
+};
+
+const changeSystemState = () => {
+  // 设置系统名称、版本号、LOGO
+  systemStore.setSystemName(data.value.porProjectName || preferences.app.name);
+  systemStore.setSystemVersion(data.value.porVersion || '');
+  // Logo 不使用 fallback，空值保持空值（用户删除后不显示默认 logo）
+  systemStore.setSystemLogo(data.value.avatar || '');
+  systemStore.setParentLogo(data.value.parentLogoUrl || '');
+  systemStore.setTopMenuTextColor(data.value.topMenuTextColor || '#333333');
+  systemStore.setTopMenuTextFont(
+    data.value.topMenuTextFontFormat || 'Microsoft YaHei',
+  );
+  // 设置水印状态、选项
+  const { open, options } = getWaterMarkOptions(data.value);
+  systemStore.setOpenWaterMark(open);
+  systemStore.setWaterMarkOptions(options);
+};
+// 生命周期
+onMounted(() => {
+  initData();
+  console.log('表单组件已挂载');
+  // 初始化数据已在watch中处理
+  // nextTick(() => {
+  //   alert(data.value.waterMarkStatus)
+  //   if(data.value.waterMarkStatus === '1'){
+  //     addWatermarkPreview()
+  //   }else{
+  //     delWatermarkPreview()
+  //   }
+
+  // })
+});
+
+onBeforeUnmount(() => {
+  delWatermarkPreview();
+});
+
+defineExpose({
+  handleSubmit,
+  initData,
+});
+</script>
+
+<template>
+  <div class="base-config-page">
+    <section class="config-section">
+      <div class="config-section__header">
+        <div class="config-section__title">系统身份</div>
+      </div>
+      <div class="config-section__body">
+        <div v-if="isPlatformAdmin" class="field-row">
+          <div>
+            <div class="field-label">租户模式</div>
+            <div class="field-hint">
+              关闭后登录页将隐藏租户选择器，默认使用平台管理员租户，且租户管理菜单不展示
+            </div>
+          </div>
+          <el-switch
+            active-value="1"
+            inactive-value="0"
+            v-model="data.tenantStatus"
+          />
+        </div>
+
+        <div class="field-grid">
+          <div class="field-stack">
+            <div class="field-label">项目名称</div>
+            <el-input
+              v-model.trim="data.porProjectName"
+              placeholder="请输入项目名称"
+              clearable
+              show-word-limit
+              :maxlength="30"
+            />
+          </div>
+
+          <div class="field-stack field-stack--small">
+            <div class="field-label">版本号</div>
+            <el-input
+              v-model.trim="data.porVersion"
+              placeholder="请输入版本号"
+              clearable
+              show-word-limit
+              :maxlength="20"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="config-section">
+      <div class="config-section__header">
+        <div class="config-section__title">首页配置</div>
+      </div>
+      <div class="config-section__body">
+
+        <div class="field-grid field-grid--three">
+
+          <div class="field-stack">
+            <div class="field-label">
+              首页配置
+              <span class="text-red-500">*</span>
+            </div>
+            <el-tree-select
+              v-model="data.homeRoute"
+              placeholder="请选择首页菜单"
+              :data="menuTreeOptions"
+              :props="{
+                label: 'name',
+                value: 'path',
+                children: 'children',
+                disabled: 'disabled',
+              }"
+              filterable
+              clearable
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="config-section">
+      <div class="config-section__header">
+        <div class="config-section__title">品牌视觉</div>
+      </div>
+      <div class="config-section__body">
+        <div class="asset-grid">
+          <div class="field-stack">
+            <div class="field-label">父级LOGO</div>
+            <div
+              class="hover:border-primary group relative flex h-[90px] w-[250px] items-center justify-center rounded-[var(--radius)] border-[1px] border-dashed border-[var(--el-border-color-darker)] bg-[var(--el-fill-color-lighter)]"
+              @click="handleOpenAvatarCropper(false)"
+            >
+              <img
+                v-if="data.parentLogoUrl"
+                :src="data.parentLogoUrl"
+                class="h-full w-full rounded-[var(--radius)] object-contain"
+              />
+              <Icon
+                v-else
+                name="ep:plus"
+                class="group-hover:text-primary h-8 w-8"
+              />
+              <span
+                v-if="data.parentLogoUrl"
+                class="absolute right-1 top-1 z-10"
+                @click.stop="handleDeleteParentLogo($event)"
+              >
+                <Icon
+                  name="ep:circle-close-filled"
+                  class="h-4 w-4 cursor-pointer text-gray-500 opacity-0 group-hover:opacity-100 hover:text-gray-700 transition-opacity"
+                />
+              </span>
+            </div>
+            <div class="field-hint">限制图片格式为png, jpg, jpeg，不得超过2MB</div>
+          </div>
+
+          <div class="field-stack">
+            <div class="field-label">LOGO</div>
+            <div
+              class="hover:border-primary group relative flex h-[90px] w-[90px] items-center justify-center rounded-[var(--radius)] border-[1px] border-dashed border-[var(--el-border-color-darker)] bg-[var(--el-fill-color-lighter)]"
+              @click="handleOpenAvatarCropper(true)"
+            >
+              <img
+                v-if="data.avatar"
+                :src="data.avatar"
+                class="h-full w-full rounded-[var(--radius)] object-contain"
+              />
+              <Icon
+                v-else
+                name="ep:plus"
+                class="group-hover:text-primary h-8 w-8"
+              />
+              <span
+                v-if="data.avatar"
+                class="absolute right-1 top-1 z-10"
+                @click.stop="handleDeleteAvatar($event)"
+              >
+                <Icon
+                  name="ep:circle-close-filled"
+                  class="h-4 w-4 cursor-pointer text-gray-500 opacity-0 group-hover:opacity-100 hover:text-gray-700 transition-opacity"
+                />
+              </span>
+            </div>
+            <div class="field-hint">限制图片格式为png, jpg, jpeg，不得超过2MB</div>
+          </div>
+        </div>
+
+        <div class="field-grid field-grid--three">
+          <div class="field-stack">
+            <div class="field-label">
+              标题颜色
+              <span class="text-red-500">*</span>
+            </div>
+            <div class="field-inline">
+              <el-color-picker v-model="data.porTextColor" />
+              <el-input :model-value="data.porTextColor" readonly />
+            </div>
+          </div>
+
+          <div class="field-stack">
+            <div class="field-label">
+              标题字体
+              <span class="text-red-500">*</span>
+            </div>
+            <el-select v-model="data.porTextFontFormat" placeholder="请选择标题字体">
+              <el-option
+                v-for="item in fontOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                :style="{ fontFamily: item.value }"
+              />
+            </el-select>
+          </div>
+
+          <div class="field-stack">
+            <div class="field-label">
+              标题字体大小
+              <span class="text-red-500">*</span>
+            </div>
+            <span
+              class="font-preview"
+              :style="{
+                fontSize: data.porTextFontSize + 'px',
+                fontFamily: data.porTextFontFormat,
+                color: data.porTextColor,
+              }"
+            >
+              AaBbCc
+            </span>
+            <div class="field-inline field-inline--slider">
+              <el-slider
+                v-model="data.porTextFontSize"
+                :min="12"
+                :max="48"
+                :step="1"
+                :show-tooltip="false"
+              />
+              <span class="size-value">{{ data.porTextFontSize }}px</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="config-section">
+      <div class="config-section__header">
+        <div class="config-section__title">顶部导航</div>
+      </div>
+      <div class="config-section__body">
+        <div class="field-grid">
+          <div class="field-stack">
+            <div class="field-label">一级菜单标题颜色</div>
+            <div class="field-inline">
+              <el-color-picker v-model="data.topMenuTextColor" />
+              <el-input :model-value="data.topMenuTextColor" readonly />
+            </div>
+          </div>
+
+          <div class="field-stack">
+            <div class="field-label">一级菜单标题字体</div>
+            <el-select
+              v-model="data.topMenuTextFontFormat"
+              placeholder="请选择顶部一级菜单标题字体"
+            >
+              <el-option
+                v-for="item in fontOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                :style="{ fontFamily: item.value }"
+              />
+            </el-select>
+            <div
+              class="font-preview"
+              :style="{
+                color: data.topMenuTextColor,
+                fontFamily: data.topMenuTextFontFormat,
+              }"
+            >
+              后台管理
+            </div>
+          </div>
+        </div>
+
+        <div class="field-stack">
+          <div class="field-label">顶部菜单背景</div>
+          <div class="relative top-avatar-upload">
+            <UdpUpload
+              :accept="'image/png,image/jpg,image/jpeg'"
+              :max-size="2"
+              :show-file-list="false"
+              :show-success-message="true"
+              :request-fn="(url, data, config) => getRequestClient().post(url, data, config)"
+              @success="handleTopAvatarSuccess"
+            >
+              <div
+                class="hover:border-primary relative flex h-[120px] w-[500px] max-w-full items-center justify-center rounded border-[1px] border-dashed border-[var(--el-border-color-darker)] bg-[var(--el-fill-color-lighter)]"
+              >
+                <img
+                  v-if="topAvatarSrc"
+                  :src="topAvatarSrc"
+                  alt="顶部菜单背景"
+                  class="h-full w-full rounded object-cover"
+                />
+                <Icon v-else name="ep:plus" class="h-8 w-8 text-gray-400" />
+              </div>
+            </UdpUpload>
+            <span
+              v-if="topAvatarSrc"
+              class="absolute right-1 top-1 z-10 cursor-pointer"
+              @click="handleRemoveTopAvatar"
+            >
+              <Icon
+                name="ep:circle-close-filled"
+                class="h-4 w-4 text-gray-500 hover:text-gray-700"
+              />
+            </span>
+          </div>
+          <div class="field-hint">建议上传扁长图片，尺寸建议 800x200 像素以内，文件大小不超过 2MB</div>
+        </div>
+      </div>
+    </section>
+
+    <section class="config-section">
+      <div class="config-section__header">
+        <div class="config-section__title">全局水印</div>
+      </div>
+      <div class="config-section__body watermark-layout">
+        <div class="watermark-controls">
+          <div class="field-row">
+            <div>
+              <div class="field-label">启用水印</div>
+              <div class="field-hint">配置后将同步生效于租户内的所有用户</div>
+            </div>
+            <el-switch
+              active-value="1"
+              inactive-value="0"
+              v-model="data.waterMarkStatus"
+              @change="changeWaterMarkOpen()"
+            />
+          </div>
+
+          <div class="field-stack">
+            <div class="field-label">水印显示</div>
+            <div class="option-group">
+              <div
+                v-for="item in waterMarkTexOptions"
+                :key="item.value"
+                class="item-box"
+                :class="{
+                  '!text-primary !border-primary':
+                    item.value === data.waterMarkText,
+                }"
+                @click="changeWaterTest(item.value)"
+              >
+                {{ item.label }}
+              </div>
+            </div>
+          </div>
+
+          <div class="field-stack">
+            <div class="field-label">水印颜色</div>
+            <div class="option-group">
+              <div
+                v-for="item in waterMarkTextColorOptions"
+                :key="item.value"
+                class="item-box"
+                :class="{
+                  '!text-primary !border-primary':
+                    item.value === data.waterMarkTextColor,
+                }"
+                @click="changewaterMarkTextColor(item.value)"
+              >
+                {{ item.label }}
+              </div>
+            </div>
+          </div>
+
+          <div class="field-stack">
+            <div class="field-label">水印密度</div>
+            <div class="option-group">
+              <div
+                v-for="item in waterMarkTextSizeOptions"
+                :key="item.value"
+                class="item-box"
+                :class="{
+                  '!text-primary !border-primary':
+                    item.value === data.waterMarkTextSize,
+                }"
+                @click="changewaterMarkTextSize(item.value)"
+              >
+                {{ item.label }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="field-stack">
+          <div class="field-label">水印预览</div>
+          <div class="waterReview watermark-preview">
+            <img src="../../../../assets/imgs/home-bg.png" />
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="save-bar">
+      <el-button type="primary" :loading="loading" @click="handleSubmit">
+        保存
+      </el-button>
+    </div>
+  </div>
+  <Dialog
+    v-model="updateAvatarVisible"
+    title="修改logo"
+    icon="mdi:crop-rotate"
+    width="800px"
+    @confirm="updateAvatarCommit"
+    @closed="updateAvatarClose"
+  >
+    <AvatarCropper
+      v-if="isBaseLogo"
+      ref="avatarCropperRef"
+      :url="data.avatar || ''"
+    />
+    <AvatarCropper
+      v-else
+      ref="avatarCropperRef"
+      :url="data.parentLogoUrl || ''"
+      :crop-box-height="64"
+      :crop-box-width="240"
+    />
+  </Dialog>
+</template>
+
+<style scoped lang="scss">
+.base-config-page {
+  max-width: 1080px;
+  padding: 8px 0 24px;
+}
+
+.config-section {
+  padding: 24px 0 28px;
+  border-top: 1px solid var(--el-border-color-lighter);
+
+  &:first-child {
+    padding-top: 8px;
+    border-top: 0;
+  }
+}
+
+.config-section__header {
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+  margin-bottom: 16px;
+}
+
+.config-section__title {
+  position: relative;
+  padding-left: 10px;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 22px;
+  color: var(--el-text-color-primary);
+
+  &::before {
+    position: absolute;
+    top: 5px;
+    left: 0;
+    width: 3px;
+    height: 12px;
+    content: '';
+    background: var(--el-color-primary);
+    border-radius: 2px;
+  }
+}
+
+.config-section__body {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.field-grid {
+  display: grid;
+  grid-template-columns: minmax(280px, 520px) minmax(220px, 320px);
+  gap: 20px 28px;
+  align-items: start;
+
+  &--three {
+    grid-template-columns:
+      minmax(220px, 280px)
+      minmax(220px, 280px)
+      minmax(260px, 1fr);
+  }
+}
+
+.asset-grid {
+  display: grid;
+  grid-template-columns: 250px 90px;
+  gap: 24px 32px;
+  align-items: start;
+}
+
+.field-row {
+  display: flex;
+  gap: 24px;
+  align-items: flex-start;
+  justify-content: space-between;
+  max-width: 720px;
+}
+
+.field-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+
+  &--small {
+    max-width: 320px;
+  }
+}
+
+.field-label {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--el-text-color-primary);
+}
+
+.field-hint {
+  max-width: 520px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--el-text-color-secondary);
+}
+
+.field-inline {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  :deep(.el-input) {
+    width: 132px;
+  }
+
+  &--slider {
+    gap: 12px;
+
+    :deep(.el-slider) {
+      min-width: 180px;
+      max-width: 360px;
+    }
+  }
+}
+
+.font-preview {
+  display: inline-block;
+  min-height: 20px;
+  font-size: 14px;
+  line-height: 1.2;
+}
+
+.size-value {
+  flex: none;
+  width: 46px;
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+  text-align: right;
+}
+
+.top-avatar-upload {
+  width: min(100%, 500px);
+  height: 120px;
+}
+
+.watermark-layout {
+  display: grid;
+  grid-template-columns: minmax(320px, 420px) minmax(360px, 600px);
+  gap: 24px 36px;
+  align-items: start;
+}
+
+.watermark-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.option-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.watermark-preview {
+  position: relative;
+  width: min(100%, 600px);
+  aspect-ratio: 12 / 7;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.save-bar {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-start;
+  padding: 16px 0 4px;
+  background: var(--el-bg-color);
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.item-box {
+  @apply hover:border-primary hover:text-primary w-[80px] cursor-pointer rounded-[var(--radius)] border-[1px] border-gray-500 px-2 text-center text-sm leading-[30px];
+}
+
+@media (max-width: 1100px) {
+  .field-grid,
+  .field-grid--three,
+  .asset-grid,
+  .watermark-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .base-config-page {
+    max-width: 100%;
+  }
+}
+</style>