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

<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.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">
                  <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.midTopFontColor }">下级预置分</div>
                  <div class="text-xl font-bold" :style="{ color: form.midDownFontColor }">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-card shadow="hover" class="mt-4">
          <template #header>
            <span class="font-bold">跑马灯内容</span>
          </template>
          <el-input
            v-model="form.marqueeText"
            type="textarea"
            :rows="4"
            placeholder="请输入大屏底部跑马灯滚动显示的文字"
            show-word-limit
            :maxlength="500"
          />
        </el-card>
      </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="hex" :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="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="hex" :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="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="hex" :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="hex" :predefine="predefineColors" />
            </el-form-item>
            <el-form-item label="休息/暂停计时颜色">
              <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="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="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="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="hex" :predefine="predefineColors" />
                  <el-color-picker v-model="form.statusQueueText" show-alpha color-format="hex" :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="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="hex" :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="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="hex" :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="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="hex" :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="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="hex" :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="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="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="hex" :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: '#F59A23',
  // 主体
  mainBgImage: '',
  // 中部普通
  midTopFontColor: '#FF9A82',
  midDownFontColor: '#F9A825',
  // 中部特殊 (预置分)
  midSpecialTextFontColor: '#FFFFFF',
  midSpecialNumberFontColor: '#FFFFFF',
  // 计时器
  timerRunningColor: '#FFFFFF',
  timerBreakColor: '#00FF4D',
  // 状态按钮
  statusAcceptBg: '#2E7D32',
  statusAcceptText: '#FFFFFF',
  statusStopBg: '#C62828',
  statusStopText: '#FFFFFF',

  statusShortlistBg: '#F59A23',
  statusShortlistText: '#FFFFFF',
  statusQueueBg: '#F57C00',
  statusQueueText: '#FFFFFF',

  // 底部
  bottomBgColor: '#2F375F',
  bottomFontColor: '#FFFFFF',
  // 特殊 - 暂停
  pauseBgColor: '#000000',
  pauseFontColor: '#FFFFFF',

  // 特殊 - 结束
  finishBgColor: '#000000',
  finishFontColor: '#FFFFFF',
  // 特殊 - 同步
  syncBgColor: '#000000',
  syncFontColor: '#FFFFFF',
  // 特殊 - 暂停倒计时
  pauseTimerBgColor: '#000000',
  pauseTimerTextColor: '#FFFFFF',
  pauseTimerNumColor: '#00FF4D',
  marqueeText: ''
};

const predefineColors = ref(['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', '#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;
}
.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>