feat(system): 添加计时器大屏配置功能

- 新增计时器配置相关的API接口文件，包括查询、新增、修改、删除等操作
- 创建计时器配置的数据类型定义，包含配置标识和配置数据等字段
- 实现计时器大屏配置页面，支持顶部、主体、中部、底部等多个区域的配置
- 添加实时预览功能，显示不同状态下的大屏效果（暂停、结束、同步等）
- 集成颜色选择器和图片上传功能，支持自定义界面样式
- 实现特殊界面配置弹窗，可单独配置暂停、结束、同步等界面的颜色和字体
- 完成配置数据的保存和加载功能，支持JSON格式的数据存储

src/api/system/physical/timerConfig/index.ts

@@ -0,0 +1,72 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { TimerConfigVO, TimerConfigForm, TimerConfigQuery } from '@/api/system/physical/timerConfig/types';
+
+/**
+ * 查询计时器配置 显示屏列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listTimerConfig = (query?: TimerConfigQuery): AxiosPromise<TimerConfigVO[]> => {
+  return request({
+    url: '/physical/timerConfig/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询计时器配置 显示屏详细
+ * @param id
+ */
+export const getTimerConfig = (id: string | number): AxiosPromise<TimerConfigVO> => {
+  return request({
+    url: '/physical/timerConfig/' + id,
+    method: 'get'
+  });
+};
+/**
+ * 根据配置标识查询计时器配置
+ * @param configKey 配置标识，如 timer_config
+ */
+export const getTimerConfigByKey = (configKey: string): AxiosPromise<TimerConfigVO> => {
+  return request({
+    url: '/physical/timerConfig/key/' + configKey,
+    method: 'get'
+  });
+};
+/**
+ * 新增计时器配置 显示屏
+ * @param data
+ */
+export const addTimerConfig = (data: TimerConfigForm) => {
+  return request({
+    url: '/physical/timerConfig',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改计时器配置 显示屏
+ * @param data
+ */
+export const updateTimerConfig = (data: TimerConfigForm) => {
+  return request({
+    url: '/physical/timerConfig',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除计时器配置 显示屏
+ * @param id
+ */
+export const delTimerConfig = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/physical/timerConfig/' + id,
+    method: 'delete'
+  });
+};

src/api/system/physical/timerConfig/types.ts

@@ -0,0 +1,65 @@
+export interface TimerConfigVO {
+  /**
+   *
+   */
+  id: string | number;
+
+  /**
+   * 配置标识，如 default_theme
+   */
+  configKey: string;
+
+  /**
+   * 核心：存储那28个字段的JSON
+   */
+  configData: string;
+
+  /**
+   *
+   */
+  updatedAt: string;
+}
+
+export interface TimerConfigForm extends BaseEntity {
+  /**
+   *
+   */
+  id?: string | number;
+
+  /**
+   * 配置标识，如 default_theme
+   */
+  configKey?: string;
+
+  /**
+   * 核心：存储那28个字段的JSON
+   */
+  configData?: string;
+
+  /**
+   *
+   */
+  updatedAt?: string;
+}
+
+export interface TimerConfigQuery extends PageQuery {
+  /**
+   * 配置标识，如 default_theme
+   */
+  configKey?: string;
+
+  /**
+   * 核心：存储那28个字段的JSON
+   */
+  configData?: string;
+
+  /**
+   *
+   */
+  updatedAt?: string;
+
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+}

src/views/system/physical/timerConfig/index.vue

@@ -0,0 +1,569 @@
+<template>
+  <div class="p-4 timer-config-container">
+    <!-- 顶部操作栏 -->
+    <el-card shadow="never" class="mb-4">
+      <div class="flex justify-between items-center">
+        <span class="text-lg font-bold">计时器大屏配置</span>
+        <el-button type="primary" size="large" :loading="buttonLoading" @click="submitForm">
+          <el-icon class="mr-1"><Check /></el-icon> 保存所有配置
+        </el-button>
+      </div>
+    </el-card>
+
+    <el-row :gutter="20">
+      <!-- ================= 左侧：大屏预览区 ================= -->
+      <el-col :span="14">
+        <el-card shadow="hover" class="preview-card">
+          <template #header>
+            <div class="font-bold">屏幕预览</div>
+          </template>
+          <div class="screen-mockup border rounded overflow-hidden relative flex flex-col" :style="{ backgroundColor: '#f0f2f5', height: '600px' }">
+            <!-- 1. 顶部区域 -->
+            <div
+              class="h-16 w-full flex items-center justify-center border-b relative"
+              :style="{ backgroundImage: form.topBgImage ? `url(${form.topBgImage})` : 'none', color: form.topFontColor }"
+            >
+              <span class="z-10 font-bold text-xl">顶部</span>
+              <div v-if="!form.topBgImage" class="absolute inset-0 flex items-center justify-center bg-gray-100 bg-opacity-50 text-gray-500 text-sm">
+                请上传顶部背景图
+              </div>
+            </div>
+
+            <!-- 2. 主体区域 -->
+            <div class="flex-1 p-4 flex flex-col gap-4 relative" :style="{ backgroundImage: form.mainBgImage ? `url(${form.mainBgImage})` : 'none' }">
+              <!-- 中部信息栏 4列 -->
+              <div class="grid grid-cols-4 gap-2 text-center">
+                <div
+                  class="border p-2 rounded bg-white bg-opacity-80"
+                  v-for="(item, index) in ['当前级别', '参赛人数', '下次休息', '平均记分']"
+                  :key="index"
+                >
+                  <div :style="{ color: form.midTopFontColor }">{{ item }}</div>
+                  <div class="text-xl font-bold" :style="{ color: form.midDownFontColor }">
+                    {{ index === 0 ? 'XX' : index === 1 ? 'XX/XX' : 'XXX' }}
+                  </div>
+                </div>
+              </div>
+
+              <!-- 预置分 + 计时器区域 -->
+              <div class="flex-1 flex items-center gap-4">
+                <!-- 当前预置分 -->
+                <div class="border p-4 rounded bg-white bg-opacity-80 text-center" style="width: 160px">
+                  <div :style="{ color: form.midSpecialTextFontColor }">当前预置分</div>
+                  <div class="text-xl font-bold" :style="{ color: form.midSpecialNumberFontColor }">XX/XX</div>
+                </div>
+                <!-- 计时器 -->
+                <div class="flex-1 flex items-center justify-center border border-dashed border-gray-300 rounded bg-white bg-opacity-50">
+                  <div class="text-8xl font-bold tracking-widest" :style="{ color: form.timerRunningColor }">50:45</div>
+                </div>
+                <!-- 下级预置分 -->
+                <div class="border p-4 rounded bg-white bg-opacity-80 text-center" style="width: 160px">
+                  <div :style="{ color: form.midSpecialTextFontColor }">下级预置分</div>
+                  <div class="text-xl font-bold" :style="{ color: form.midSpecialNumberFontColor }">XX/XX</div>
+                </div>
+              </div>
+
+              <!-- 状态栏 -->
+              <div class="flex gap-2 justify-center mt-2">
+                <el-tag :style="{ backgroundColor: form.statusAcceptBg, color: form.statusAcceptText, border: 'none' }">接受报名</el-tag>
+                <el-tag :style="{ backgroundColor: form.statusStopBg, color: form.statusStopText, border: 'none' }">截止报名</el-tag>
+                <el-tag :style="{ backgroundColor: form.statusShortlistBg, color: form.statusShortlistText, border: 'none' }">入围人数</el-tag>
+                <el-tag :style="{ backgroundColor: form.statusQueueBg, color: form.statusQueueText, border: 'none' }">排队人数</el-tag>
+              </div>
+            </div>
+
+            <!-- 3. 底部区域 -->
+            <div
+              class="h-12 w-full flex items-center justify-center border-t"
+              :style="{ backgroundColor: form.bottomBgColor, color: form.bottomFontColor }"
+            >
+              底部
+            </div>
+          </div>
+        </el-card>
+        <!-- ================= 特殊界面预览区 ================= -->
+        <el-card shadow="hover" class="mt-4">
+          <template #header>
+            <div class="font-bold">特殊界面预览</div>
+          </template>
+          <el-row :gutter="16">
+            <!-- 暂停界面预览 -->
+            <el-col :span="12">
+              <div class="text-sm text-gray-500 mb-2">暂停界面</div>
+              <div
+                class="special-preview-box rounded flex flex-col items-center justify-center"
+                :style="{ backgroundColor: form.pauseBgColor, color: form.pauseFontColor }"
+              >
+                <div class="text-5xl font-bold">暂停</div>
+                <div class="text-6xl font-bold mt-2" :style="{ color: form.pauseTimerNumColor }">50:45</div>
+              </div>
+            </el-col>
+            <!-- 比赛结束界面预览 -->
+            <el-col :span="12">
+              <div class="text-sm text-gray-500 mb-2">比赛结束界面</div>
+              <div
+                class="special-preview-box rounded flex flex-col items-center justify-center"
+                :style="{ backgroundColor: form.finishBgColor, color: form.finishFontColor }"
+              >
+                <div class="text-5xl font-bold">比赛结束</div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="16" class="mt-4">
+            <!-- 同步阶段界面预览 -->
+            <el-col :span="12">
+              <div class="text-sm text-gray-500 mb-2">同步阶段界面</div>
+              <div
+                class="special-preview-box rounded flex flex-col items-center justify-center"
+                :style="{ backgroundColor: form.syncBgColor, color: form.syncFontColor }"
+              >
+                <div class="text-lg mb-2">正在同步</div>
+                <div class="text-6xl font-bold" :style="{ color: form.timerRunningColor }">59:32</div>
+              </div>
+            </el-col>
+            <!-- 暂停倒计时界面预览 -->
+            <el-col :span="12">
+              <div class="text-sm text-gray-500 mb-2">暂停倒计时界面</div>
+              <div class="special-preview-box rounded flex flex-col items-center justify-center" :style="{ backgroundColor: form.pauseTimerBgColor }">
+                <div class="text-lg" :style="{ color: form.pauseTimerTextColor }">比赛暂停时间</div>
+                <div class="text-6xl font-bold mt-2" :style="{ color: form.pauseTimerNumColor }">01:36</div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <!-- E. 特殊配置入口 -->
+        <el-button type="warning" plain class="w-full py-4 text-lg dashed-border mt-4" @click="openSpecialDialog">
+          <el-icon class="mr-2"><Setting /></el-icon> 进入【特殊配置】 (暂停/结束/同步界面)
+        </el-button>
+      </el-col>
+
+      <!-- ================= 右侧：配置表单区 ================= -->
+      <el-col :span="10">
+        <el-form ref="formRef" :model="form" label-position="top" size="default">
+          <!-- A. 顶部与主体配置 -->
+          <el-card shadow="hover" class="mb-4">
+            <template #header><b>顶部与主体背景</b></template>
+            <el-form-item label="顶部背景图">
+              <div class="upload-preview-row">
+                <el-upload
+                  action="#"
+                  :auto-upload="false"
+                  accept="image/*"
+                  :on-change="(file) => handleImageChange(file, 'topBgImage')"
+                  :show-file-list="false"
+                >
+                  <el-button type="primary" plain icon="Upload">选择图片</el-button>
+                </el-upload>
+                <el-image
+                  v-if="form.topBgImage"
+                  :src="form.topBgImage"
+                  fit="cover"
+                  class="upload-preview-img"
+                  :preview-src-list="[form.topBgImage]"
+                />
+              </div>
+            </el-form-item>
+            <div class="config-row">
+              <label>顶部字体颜色</label>
+              <div class="color-picker-wrapper">
+                <el-color-picker v-model="form.topFontColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+                <span class="color-value-text">{{ form.topFontColor }}</span>
+              </div>
+            </div>
+            <el-divider />
+            <el-form-item label="主体背景图 (中间大图)">
+              <div class="upload-preview-row">
+                <el-upload
+                  action="#"
+                  :auto-upload="false"
+                  accept="image/*"
+                  :on-change="(file) => handleImageChange(file, 'mainBgImage')"
+                  :show-file-list="false"
+                >
+                  <el-button type="primary" plain icon="Upload">选择图片</el-button>
+                </el-upload>
+                <el-image
+                  v-if="form.mainBgImage"
+                  :src="form.mainBgImage"
+                  fit="cover"
+                  class="upload-preview-img"
+                  :preview-src-list="[form.mainBgImage]"
+                />
+              </div>
+            </el-form-item>
+          </el-card>
+
+          <!-- B. 中部字体颜色配置 -->
+          <el-card shadow="hover" class="mb-4">
+            <template #header><b>中部字体颜色</b></template>
+            <el-row :gutter="10">
+              <el-col :span="12">
+                <el-form-item label="普通文字颜色 (上)">
+                  <el-color-picker v-model="form.midTopFontColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+                  <div class="text-xs text-gray-400">当前级别、参赛人数、下次休息、平均记分等文字</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="普通数值颜色 (下)">
+                  <el-color-picker v-model="form.midDownFontColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+                  <div class="text-xs text-gray-400">数值字体颜色配置</div>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-divider content-position="left">特殊状态字体</el-divider>
+            <el-row :gutter="10">
+              <el-col :span="12">
+                <el-form-item label="特殊文字颜色">
+                  <el-color-picker v-model="form.midSpecialTextFontColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+                  <div class="text-xs text-gray-400">当前预置分、下级预置分等文字</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="特殊数值颜色">
+                  <el-color-picker v-model="form.midSpecialNumberFontColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+                  <div class="text-xs text-gray-400">预置分数值颜色</div>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-card>
+
+          <!-- C. 计时器与状态配置 -->
+          <el-card shadow="hover" class="mb-4">
+            <template #header><b>计时器与状态颜色</b></template>
+            <el-form-item label="正常计时颜色">
+              <el-color-picker v-model="form.timerRunningColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+            </el-form-item>
+            <el-form-item label="休息/暂停计时颜色">
+              <el-color-picker v-model="form.timerBreakColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+            </el-form-item>
+            <el-divider content-position="left">状态按钮样式</el-divider>
+            <div class="text-xs text-gray-400 mb-2">前者为背景颜色，后者为字体颜色</div>
+            <div class="grid grid-cols-2 gap-4">
+              <el-form-item label="接受报名">
+                <div class="flex items-center gap-2">
+                  <el-color-picker v-model="form.statusAcceptBg" show-alpha color-format="rgb" title="背景" :predefine="predefineColors" />
+                  <el-color-picker v-model="form.statusAcceptText" show-alpha color-format="rgb" title="文字" :predefine="predefineColors" />
+                </div>
+              </el-form-item>
+              <el-form-item label="截止报名">
+                <div class="flex items-center gap-2">
+                  <el-color-picker v-model="form.statusStopBg" show-alpha color-format="rgb" :predefine="predefineColors" />
+                  <el-color-picker v-model="form.statusStopText" show-alpha color-format="rgb" :predefine="predefineColors" />
+                </div>
+              </el-form-item>
+              <el-form-item label="入围人数">
+                <div class="flex items-center gap-2">
+                  <el-color-picker v-model="form.statusShortlistBg" show-alpha color-format="rgb" :predefine="predefineColors" />
+                  <el-color-picker v-model="form.statusShortlistText" show-alpha color-format="rgb" :predefine="predefineColors" />
+                </div>
+              </el-form-item>
+              <el-form-item label="排队人数">
+                <div class="flex items-center gap-2">
+                  <el-color-picker v-model="form.statusQueueBg" show-alpha color-format="rgb" :predefine="predefineColors" />
+                  <el-color-picker v-model="form.statusQueueText" show-alpha color-format="rgb" :predefine="predefineColors" />
+                </div>
+              </el-form-item>
+            </div>
+          </el-card>
+
+          <!-- D. 底部配置 -->
+          <el-card shadow="hover" class="mb-4">
+            <template #header><b>底部配置</b></template>
+            <el-row :gutter="10">
+              <el-col :span="12">
+                <el-form-item label="背景色">
+                  <el-color-picker v-model="form.bottomBgColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="字体色">
+                  <el-color-picker v-model="form.bottomFontColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-form>
+      </el-col>
+    </el-row>
+
+    <!-- ================= 模态框：特殊配置 ================= -->
+    <el-dialog v-model="specialDialogVisible" title="特殊界面配置" width="700px" destroy-on-close>
+      <el-scrollbar height="500px">
+        <el-form :model="form" label-position="top">
+          <!-- 1. 暂停界面 -->
+          <div class="config-section">
+            <div class="section-title">暂停界面</div>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="背景颜色">
+                  <el-color-picker v-model="form.pauseBgColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="字体颜色">
+                  <el-color-picker v-model="form.pauseFontColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+
+          <!-- 2. 比赛结束界面 -->
+          <div class="config-section">
+            <div class="section-title">比赛结束界面</div>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="背景颜色">
+                  <el-color-picker v-model="form.finishBgColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="字体颜色">
+                  <el-color-picker v-model="form.finishFontColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+
+          <!-- 3. 同步阶段界面 -->
+          <div class="config-section">
+            <div class="section-title">同步阶段界面</div>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="背景颜色">
+                  <el-color-picker v-model="form.syncBgColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="字体颜色">
+                  <el-color-picker v-model="form.syncFontColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+
+          <!-- 4. 暂停倒计时界面 -->
+          <div class="config-section">
+            <div class="section-title">暂停倒计时界面</div>
+            <el-form-item label="背景颜色">
+              <el-color-picker v-model="form.pauseTimerBgColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+            </el-form-item>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="普通说明文字颜色">
+                  <el-color-picker v-model="form.pauseTimerTextColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+                  <div class="text-xs text-gray-400">界面上的提示语</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="倒计时数字颜色">
+                  <el-color-picker v-model="form.pauseTimerNumColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+                  <div class="text-xs text-gray-400">大大的数字</div>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </el-form>
+      </el-scrollbar>
+      <template #footer>
+        <el-button @click="specialDialogVisible = false">关闭</el-button>
+        <el-button type="primary" @click="specialDialogVisible = false">确认配置</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Check, Setting } from '@element-plus/icons-vue';
+import { uploadTournament } from '@/api/system/business/tournaments';
+import { getTimerConfigByKey, updateTimerConfig, addTimerConfig } from '@/api/system/physical/timerConfig';
+
+// --- 1. 表单数据 (对应后端 TimerConfigBo) ---
+const initFormData = {
+  id: undefined,
+  // 顶部
+  topBgImage: '',
+  topFontColor: '#FF0000',
+  // 主体
+  mainBgImage: '',
+  // 中部普通
+  midTopFontColor: '#000000',
+  midDownFontColor: '#0000FF',
+  // 中部特殊 (预置分)
+  midSpecialTextFontColor: '#000000',
+  midSpecialNumberFontColor: '#0000FF',
+  // 计时器
+  timerRunningColor: '#FFA500',
+  timerBreakColor: '#008000',
+  // 状态按钮
+  statusAcceptBg: '#FFFFFF',
+  statusAcceptText: '#000000',
+  statusStopBg: '#FFFFFF',
+  statusStopText: '#000000',
+  statusShortlistBg: '#FFFFFF',
+  statusShortlistText: '#000000',
+  statusQueueBg: '#FFFFFF',
+  statusQueueText: '#000000',
+  // 底部
+  bottomBgColor: '#333333',
+  bottomFontColor: '#FFD700',
+  // 特殊 - 暂停
+  pauseBgColor: '#EEEEEE',
+  pauseFontColor: '#333333',
+  // 特殊 - 结束
+  finishBgColor: '#000000',
+  finishFontColor: '#FFFFFF',
+  // 特殊 - 同步
+  syncBgColor: '#FFFFFF',
+  syncFontColor: '#000000',
+  // 特殊 - 暂停倒计时
+  pauseTimerBgColor: '#F5F5F5',
+  pauseTimerTextColor: '#666666',
+  pauseTimerNumColor: '#FF0000'
+};
+
+const predefineColors = ref([
+  '#ff4500',
+  '#ff8c00',
+  '#ffd700',
+  '#90ee90',
+  '#00ced1',
+  '#1e90ff',
+  '#c71585',
+  'rgba(255, 69, 0, 0.68)',
+  'rgb(255, 120, 0)',
+  'hsv(51, 100, 98)',
+  'hsva(120, 40, 94, 0.5)',
+  '#ffffff'
+]);
+
+const form = reactive({ ...initFormData });
+const buttonLoading = ref(false);
+const specialDialogVisible = ref(false);
+
+// --- 2. 方法 ---
+
+// 上传图片
+const handleImageChange = async (file: any, field: string) => {
+  try {
+    const res = await uploadTournament(file.raw);
+    if (res.code === 200) {
+      form[field] = res.data.url;
+      ElMessage.success(`已上传: ${file.name}`);
+    } else {
+      ElMessage.error(res.msg || '上传失败');
+    }
+  } catch (error) {
+    console.error('上传图片失败:', error);
+    ElMessage.error('上传图片失败，请重试');
+  }
+};
+
+// 加载数据
+const loadData = async () => {
+  buttonLoading.value = true;
+  try {
+    const res = await getTimerConfigByKey('timer_config');
+    if (res.code === 200 && res.data) {
+      const configData = JSON.parse(res.data.configData);
+      Object.assign(form, configData);
+      if (res.data.id) {
+        form.id = res.data.id;
+      }
+    }
+  } catch (error) {
+    console.error('加载配置失败:', error);
+  } finally {
+    buttonLoading.value = false;
+  }
+};
+
+// 打开特殊配置弹窗
+const openSpecialDialog = () => {
+  specialDialogVisible.value = true;
+};
+
+// 提交保存
+const submitForm = async () => {
+  buttonLoading.value = true;
+  try {
+    const { id, ...rest } = form;
+    const data: any = {
+      configKey: 'timer_config',
+      configData: JSON.stringify(rest)
+    };
+    if (id) {
+      data.id = id;
+      await updateTimerConfig(data);
+    } else {
+      await addTimerConfig(data);
+    }
+    ElMessage.success('保存成功');
+    await loadData();
+  } catch (error) {
+    console.error('保存失败:', error);
+    ElMessage.error('保存失败，请重试');
+  } finally {
+    buttonLoading.value = false;
+  }
+};
+
+onMounted(() => {
+  loadData();
+});
+</script>
+<style scoped>
+.timer-config-container {
+  padding: 20px;
+  background-color: #f0f2f5;
+  min-height: 100vh;
+}
+
+.config-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.config-row label {
+  font-size: 13px;
+  color: #606266;
+}
+
+.color-value-text {
+  font-size: 12px;
+  color: #909399;
+  margin-left: 8px;
+}
+
+.dashed-border {
+  border-style: dashed;
+}
+
+.el-color-picker {
+  margin-left: 10px;
+}
+
+.config-section {
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px dashed #eee;
+}
+
+.section-title {
+  font-weight: bold;
+  font-size: 14px;
+  color: #303133;
+  margin-bottom: 12px;
+}
+.upload-preview-img {
+  width: 120px;
+  height: 60px;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  flex-shrink: 0;
+}
+</style>