refactor(timerConfig): 调整计时器配置界面的字段映射和颜色选择器格式

- 将计时器配置中的字体颜色字段从 midSpecialTextFontColor 和 midSpecialNumberFontColor
  更改为 midTopFontColor 和 midDownFontColor
- 移除暂停和同步界面预览中的计时器显示元素
- 将所有颜色选择器的颜色格式从 rgb 统一更改为 hex 格式
- 清理预定义颜色数组，移除不规范的颜色格式
- 添加新的 CSS 类用于上传预览图片和特殊预览框的样式

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

@@ -71,7 +71,7 @@
             <span v-else></span>
           </template>
         </el-table-column>
-        <el-table-column label="计时器图片" align="center" width="90">
+<!--        <el-table-column label="计时器图片" align="center" width="90">
           <template #default="scope">
             <el-image
               v-if="scope.row.timerBgPicture"
@@ -83,7 +83,7 @@
             />
             <span v-else></span>
           </template>
-        </el-table-column>
+        </el-table-column>-->
         <el-table-column label="赛事时间" align="center" width="300">
           <template #default="scope">
             <span>
@@ -153,7 +153,6 @@
             <el-tooltip content="修改" placement="top">
               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['physical:leagueTournament:edit']"></el-button>
             </el-tooltip>
-
             <!-- 删除按钮 -->
             <el-tooltip content="删除" placement="top">
               <el-button
@@ -217,7 +216,7 @@
             </el-upload>
           </div>
         </el-form-item>
-        <el-form-item label="计时器背景图" prop="timerBgPicture">
+<!--        <el-form-item label="计时器背景图" prop="timerBgPicture">
           <div class="upload-container">
             <el-upload
               class="upload-icon"
@@ -251,7 +250,7 @@
               </template>
             </el-upload>
           </div>
-        </el-form-item>
+        </el-form-item>-->
         <el-form-item label="赛事开始时间" prop="startTime">
           <el-date-picker clearable v-model="form.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择赛事开始时间">
           </el-date-picker>

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

@@ -49,8 +49,8 @@
               <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 :style="{ color: form.midTopFontColor }">当前预置分</div>
+                  <div class="text-xl font-bold" :style="{ color: form.midDownFontColor }">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">
@@ -58,8 +58,8 @@
                 </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 :style="{ color: form.midTopFontColor }">下级预置分</div>
+                  <div class="text-xl font-bold" :style="{ color: form.midDownFontColor }">XX/XX</div>
                 </div>
               </div>
 
@@ -95,7 +95,7 @@
                 :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 class="text-6xl font-bold mt-2" :style="{ color: form.pauseTimerNumColor }">50:45</div>-->
               </div>
             </el-col>
             <!-- 比赛结束界面预览 -->
@@ -118,7 +118,7 @@
                 :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 class="text-6xl font-bold" :style="{ color: form.timerRunningColor }">59:32</div>-->
               </div>
             </el-col>
             <!-- 暂停倒计时界面预览 -->
@@ -167,7 +167,7 @@
             <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" />
+                <el-color-picker v-model="form.topFontColor" show-alpha color-format="hex" :predefine="predefineColors" />
                 <span class="color-value-text">{{ form.topFontColor }}</span>
               </div>
             </div>
@@ -200,13 +200,13 @@
             <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" />
+                  <el-color-picker v-model="form.midTopFontColor" show-alpha color-format="hex" :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" />
+                  <el-color-picker v-model="form.midDownFontColor" show-alpha color-format="hex" :predefine="predefineColors" />
                   <div class="text-xs text-gray-400">数值字体颜色配置</div>
                 </el-form-item>
               </el-col>
@@ -215,13 +215,13 @@
             <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" />
+                  <el-color-picker v-model="form.midSpecialTextFontColor" show-alpha color-format="hex" :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" />
+                  <el-color-picker v-model="form.midSpecialNumberFontColor" show-alpha color-format="hex" :predefine="predefineColors" />
                   <div class="text-xs text-gray-400">预置分数值颜色</div>
                 </el-form-item>
               </el-col>
@@ -232,36 +232,36 @@
           <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-color-picker v-model="form.timerRunningColor" show-alpha color-format="hex" :predefine="predefineColors" />
             </el-form-item>
             <el-form-item label="休息/暂停计时颜色">
-              <el-color-picker v-model="form.timerBreakColor" show-alpha color-format="rgb" :predefine="predefineColors" />
+              <el-color-picker v-model="form.timerBreakColor" show-alpha color-format="hex" :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" />
+                  <el-color-picker v-model="form.statusAcceptBg" show-alpha color-format="hex" title="背景" :predefine="predefineColors" />
+                  <el-color-picker v-model="form.statusAcceptText" show-alpha color-format="hex" 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" />
+                  <el-color-picker v-model="form.statusStopBg" show-alpha color-format="hex" :predefine="predefineColors" />
+                  <el-color-picker v-model="form.statusStopText" show-alpha color-format="hex" :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" />
+                  <el-color-picker v-model="form.statusShortlistBg" show-alpha color-format="hex" :predefine="predefineColors" />
+                  <el-color-picker v-model="form.statusShortlistText" show-alpha color-format="hex" :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" />
+                  <el-color-picker v-model="form.statusQueueBg" show-alpha color-format="hex" :predefine="predefineColors" />
+                  <el-color-picker v-model="form.statusQueueText" show-alpha color-format="hex" :predefine="predefineColors" />
                 </div>
               </el-form-item>
             </div>
@@ -273,12 +273,12 @@
             <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-color-picker v-model="form.bottomBgColor" show-alpha color-format="hex" :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-color-picker v-model="form.bottomFontColor" show-alpha color-format="hex" :predefine="predefineColors" />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -297,12 +297,12 @@
             <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-color-picker v-model="form.pauseBgColor" show-alpha color-format="hex" :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-color-picker v-model="form.pauseFontColor" show-alpha color-format="hex" :predefine="predefineColors" />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -314,12 +314,12 @@
             <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-color-picker v-model="form.finishBgColor" show-alpha color-format="hex" :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-color-picker v-model="form.finishFontColor" show-alpha color-format="hex" :predefine="predefineColors" />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -331,12 +331,12 @@
             <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-color-picker v-model="form.syncBgColor" show-alpha color-format="hex" :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-color-picker v-model="form.syncFontColor" show-alpha color-format="hex" :predefine="predefineColors" />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -346,18 +346,18 @@
           <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-color-picker v-model="form.pauseTimerBgColor" show-alpha color-format="hex" :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" />
+                  <el-color-picker v-model="form.pauseTimerTextColor" show-alpha color-format="hex" :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" />
+                  <el-color-picker v-model="form.pauseTimerNumColor" show-alpha color-format="hex" :predefine="predefineColors" />
                   <div class="text-xs text-gray-400">大大的数字</div>
                 </el-form-item>
               </el-col>
@@ -431,10 +431,6 @@ const predefineColors = ref([
   '#00ced1',
   '#1e90ff',
   '#c71585',
-  'rgba(255, 69, 0, 0.68)',
-  'rgb(255, 120, 0)',
-  'hsv(51, 100, 98)',
-  'hsva(120, 40, 94, 0.5)',
   '#ffffff'
 ]);
 
@@ -566,4 +562,16 @@ onMounted(() => {
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
   flex-shrink: 0;
 }
+.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;
+}
+
+.special-preview-box {
+  height: 120px;
+}
 </style>