From 1d0fbf2c74d79b4cc14dff583ed1f780178357d6 Mon Sep 17 00:00:00 2001
From: Gentle_Lijie <zljzljsweepy@qq.com>
Date: Tue, 11 Nov 2025 23:43:26 +0800
Subject: [PATCH 1/6] fix: make buttons look better

---
 src/components/screen/TimerConfigPanel.vue |  2 +-
 src/style/index.css                        | 78 ++++++++++++++++++++++
 2 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/src/components/screen/TimerConfigPanel.vue b/src/components/screen/TimerConfigPanel.vue
index 317fde1..a29f21c 100644
--- a/src/components/screen/TimerConfigPanel.vue
+++ b/src/components/screen/TimerConfigPanel.vue
@@ -222,7 +222,7 @@
 
       <div class="flex justify-end gap-2 mt-4 pt-4 border-t">
         <button class="btn btn-ghost" @click="emitClose">取消</button>
-        <button class="btn btn-primary" @click="handleSave">
+        <button class="btn btn-save" @click="handleSave">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
           </svg>
diff --git a/src/style/index.css b/src/style/index.css
index 19a97d6..7b292d1 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -27,3 +27,81 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+/* 按钮主题变量（可在此统一修改颜色） */
+:root {
+  --btn-primary: #1f6feb; /* 蓝色，未选中时用于文字与边框 */
+  --btn-primary-contrast: #ffffff; /* 选中后文字颜色 */
+
+  --btn-error: #ef4444; /* 删除按钮颜色 */
+  --btn-error-contrast: #ffffff;
+
+  --btn-radius: 0.5rem;
+}
+
+/* 使用 Tailwind 的 components layer 覆盖或补充 DaisyUI 的 .btn 样式 */
+@layer components {
+  /* 基本按钮：未选中 -> 透明背景 + 蓝色文字 + 蓝色边框 */
+  .btn {
+    background-color: transparent;
+    color: var(--btn-primary);
+    border: 1px solid var(--btn-primary);
+    border-radius: var(--btn-radius);
+    padding: .375rem .75rem; /* 与 btn-sm / btn-md 可叠加 */
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    white-space: nowrap; /* 确保含 svg + 文本的按钮不换行 */
+    transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
+  }
+
+  /* 选中/激活状态：蓝底白字 */
+  .btn.btn-active,
+  .btn:active,
+  .btn.selected {
+    background-color: var(--btn-primary) !important;
+    color: var(--btn-primary-contrast) !important;
+    border-color: var(--btn-primary) !important;
+  }
+
+  /* 删除按钮：未选中时透明红字红框，选中时红底白字 */
+  .btn.btn-error {
+    background-color: transparent;
+    color: var(--btn-error);
+    border: 1px solid var(--btn-error);
+  }
+
+  .btn.btn-error.btn-active,
+  .btn.btn-error:active,
+  .btn.btn-error.selected {
+    background-color: var(--btn-error) !important;
+    color: var(--btn-error-contrast) !important;
+    border-color: var(--btn-error) !important;
+  }
+
+  /* 保存按钮（语义类），行为与主按钮一致，方便在模板中使用 .btn.btn-save */
+  .btn.btn-save {
+    background-color: transparent;
+    color: var(--btn-primary);
+    border: 1px solid var(--btn-primary);
+  }
+
+  .btn.btn-save.btn-active,
+  .btn.btn-save:active,
+  .btn.btn-save.selected {
+    background-color: var(--btn-primary) !important;
+    color: var(--btn-primary-contrast) !important;
+    border-color: var(--btn-primary) !important;
+  }
+
+  /* 小圆按钮（保留 daisyui 的 btn-circle 语义，但确保颜色规则一致） */
+  .btn.btn-circle {
+    padding: .25rem;
+    width: 2rem;
+    height: 2rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+  }
+}

From 2c32b4d99d09b0450c5d021d5ef05256d097001a Mon Sep 17 00:00:00 2001
From: Gentle_Lijie <zljzljsweepy@qq.com>
Date: Wed, 12 Nov 2025 00:08:37 +0800
Subject: [PATCH 2/6] feat: update live editing for config files

---
 package.json                               |  2 +-
 src/components/screen/TimerConfigPanel.vue | 56 +++++++++++----
 src/style/index.css                        | 84 ++++++++++++++++++++++
 3 files changed, 126 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 191f5a2..3ca9a8d 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --config config/vite.config.ts",
+  "dev": "vite --config config/vite.config.ts --host",
     "build": "vue-tsc --project config/tsconfig.json && vite build --config config/vite.config.ts",
     "start": "vite preview --config config/vite.config.ts",
     "preview": "vite preview --config config/vite.config.ts",
diff --git a/src/components/screen/TimerConfigPanel.vue b/src/components/screen/TimerConfigPanel.vue
index a29f21c..e49d99b 100644
--- a/src/components/screen/TimerConfigPanel.vue
+++ b/src/components/screen/TimerConfigPanel.vue
@@ -1,12 +1,12 @@
 <template>
   <dialog ref="modalRef" class="modal">
-    <div class="modal-box max-w-7xl h-[90vh] flex flex-col">
+  <div class="modal-box w-[30vw] max-w-[1200px] h-[90vh] flex flex-col">
       <div class="flex items-center justify-between mb-4">
-        <h3 class="text-2xl font-bold">辩论计时器配置</h3>
+        <h3 class="text-2xl font-bold config-header">辩论计时器配置</h3>
         <div class="flex gap-2">
           <div class="tabs tabs-boxed">
-            <a class="tab" :class="{ 'tab-active': editMode === 'visual' }" @click="editMode = 'visual'">可视化编辑</a>
-            <a class="tab" :class="{ 'tab-active': editMode === 'json' }" @click="editMode = 'json'">JSON源码</a>
+            <button type="button" class="tab" :class="{ 'tab-active': editMode === 'visual' }" @click="editMode = 'visual'">可视化编辑</button>
+            <button type="button" class="tab" :class="{ 'tab-active': editMode === 'json' }" @click="editMode = 'json'">JSON源码</button>
           </div>
           <button class="btn btn-sm btn-circle btn-ghost" @click="emitClose">✕</button>
         </div>
@@ -221,13 +221,19 @@
       </div>
 
       <div class="flex justify-end gap-2 mt-4 pt-4 border-t">
-        <button class="btn btn-ghost" @click="emitClose">取消</button>
-        <button class="btn btn-save" @click="handleSave">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg>
-          保存配置
-        </button>
+        <div class="flex-1"></div>
+        <div class="flex flex-col items-end">
+          <div v-if="saveError" class="text-error text-sm mb-2">{{ saveError }}</div>
+          <div class="flex gap-2">
+            <button type="button" class="btn btn-ghost" @click="emitClose">取消</button>
+            <button type="button" class="btn btn-save" @click="handleSave">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+              </svg>
+              保存配置
+            </button>
+          </div>
+        </div>
       </div>
     </div>
     <form method="dialog" class="modal-backdrop">
@@ -263,6 +269,7 @@ const editMode = ref<'visual' | 'json'>('visual');
 const localStages = ref<TimerStage[]>([]);
 const jsonSource = ref('');
 const jsonError = ref('');
+const saveError = ref('');
 
 const initialiseForm = () => {
   localStages.value = JSON.parse(JSON.stringify(props.stages)); // Deep copy
@@ -312,8 +319,8 @@ watch(editMode, newMode => {
 
 watch(
   localStages,
-  newStages => {
-    newStages.forEach(stage => {
+  (newStages: TimerStage[]) => {
+    newStages.forEach((stage: TimerStage) => {
       if (stage.isDualSide) {
         if (stage.sides.length === 1) {
           const firstSide = stage.sides[0];
@@ -415,41 +422,60 @@ const removeBell = (stageIndex: number, bellIndex: number) => {
 };
 
 const handleSave = () => {
+  saveError.value = '';
   if (editMode.value === 'json') {
     if (jsonError.value) {
+      saveError.value = 'JSON 格式错误，请修正后再保存';
       return;
     }
     syncFromJSON();
   }
 
   if (localStages.value.length === 0) {
+    saveError.value = '请至少添加一个阶段';
     return;
   }
 
   for (const stage of localStages.value) {
     if (!stage.stageName.trim()) {
+      saveError.value = '阶段名称不能为空';
       return;
     }
     if (stage.sides.length === 0) {
+      saveError.value = '阶段必须至少包含一个发言者';
       return;
     }
     for (const side of stage.sides) {
       if (!side.name.trim()) {
+        saveError.value = '发言者名称不能为空';
         return;
       }
       if (side.duration <= 0) {
+        saveError.value = '发言时长必须大于 0 秒';
         return;
       }
     }
   }
 
-  emit('save', {
+  const payload = {
     activityName: props.activityName,
     debateTitle: props.debateTitle,
     stages: localStages.value,
-  });
+  };
+
+  // 发出保存事件，通知父级更新数据
+  emit('save', payload);
+
+  // 立即把新的配置加载到当前页面（父组件通常会在收到 save 事件时更新传入的 props），
+  // 然后关闭右侧 modal，并通知父组件 modal 已关闭
+  saveError.value = '';
+  modalRef.value?.close();
+  emit('close');
 };
 </script>
+<script lang="ts">
+// non-setup script block left empty intentionally (style/ts hints)
+</script>
 
 <style scoped>
 .overflow-y-auto::-webkit-scrollbar {
diff --git a/src/style/index.css b/src/style/index.css
index 7b292d1..bc0cbd3 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -12,6 +12,56 @@
   font-display: swap;
 }
 
+/* Tabs: 模仿浏览器标签页的样式（底部细线，激活 tab 被上边框包住并抬起） */
+@layer components {
+  .tabs {
+    position: relative;
+    border-bottom: 1px solid rgba(31, 41, 55, 0.08); /* subtle divider */
+    padding-bottom: 0.25rem;
+  }
+
+  .tabs .tab {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    padding: .4rem .75rem;
+    margin-right: .25rem;
+    margin-bottom: 0;
+    background: transparent;
+    border: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+    border-top-left-radius: calc(var(--btn-radius) - 2px);
+    border-top-right-radius: calc(var(--btn-radius) - 2px);
+    color: var(--btn-primary);
+    transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .06s ease;
+  }
+
+  .tabs .tab:hover,
+  .tabs .tab:focus {
+    background-color: rgba(31, 99, 255, 0.06); /* subtle hover */
+    cursor: pointer;
+  }
+
+  /* Active tab: 抬起并在上方被边框包住，底部与容器的底线相连 */
+  .tabs .tab.tab-active,
+  .tabs .tab:active {
+    background-color: var(--btn-primary-contrast); /* white */
+    color: var(--btn-primary);
+    border-color: rgba(31, 41, 55, 0.12);
+    border-bottom-color: transparent;
+    position: relative;
+    top: 1px; /* 抬起视觉 */
+    box-shadow: 0 -1px 0 0 rgba(31, 41, 55, 0.04);
+    z-index: 10;
+  }
+
+  /* Make sure boxed tabs inside .tabs-boxed don't double-border */
+  .tabs.tabs-boxed .tab.tab-active {
+    border-left-width: 1px;
+    border-right-width: 1px;
+  }
+}
+
 .font-number {
   font-family: 'D-DIN', 'SF Pro', sans-serif;
 }
@@ -39,6 +89,10 @@
   --btn-radius: 0.5rem;
 }
 
+.config-header{
+  margin:10px;
+}
+
 /* 使用 Tailwind 的 components layer 覆盖或补充 DaisyUI 的 .btn 样式 */
 @layer components {
   /* 基本按钮：未选中 -> 透明背景 + 蓝色文字 + 蓝色边框 */
@@ -64,6 +118,16 @@
     border-color: var(--btn-primary) !important;
   }
 
+  /* 悬停与聚焦时高亮（鼠标移动到按钮上即显示选中样式） */
+  .btn:hover,
+  .btn:focus,
+  .btn:focus-visible {
+    background-color: var(--btn-primary) !important;
+    color: var(--btn-primary-contrast) !important;
+    border-color: var(--btn-primary) !important;
+    cursor: pointer;
+  }
+
   /* 删除按钮：未选中时透明红字红框，选中时红底白字 */
   .btn.btn-error {
     background-color: transparent;
@@ -79,6 +143,16 @@
     border-color: var(--btn-error) !important;
   }
 
+  /* 删除按钮悬停/聚焦高亮为红色 */
+  .btn.btn-error:hover,
+  .btn.btn-error:focus,
+  .btn.btn-error:focus-visible {
+    background-color: var(--btn-error) !important;
+    color: var(--btn-error-contrast) !important;
+    border-color: var(--btn-error) !important;
+    cursor: pointer;
+  }
+
   /* 保存按钮（语义类），行为与主按钮一致，方便在模板中使用 .btn.btn-save */
   .btn.btn-save {
     background-color: transparent;
@@ -94,6 +168,16 @@
     border-color: var(--btn-primary) !important;
   }
 
+  /* 保存按钮悬停/聚焦高亮 */
+  .btn.btn-save:hover,
+  .btn.btn-save:focus,
+  .btn.btn-save:focus-visible {
+    background-color: var(--btn-primary) !important;
+    color: var(--btn-primary-contrast) !important;
+    border-color: var(--btn-primary) !important;
+    cursor: pointer;
+  }
+
   /* 小圆按钮（保留 daisyui 的 btn-circle 语义，但确保颜色规则一致） */
   .btn.btn-circle {
     padding: .25rem;

From dda809e261604dc6fe4dc58a504bc9b559d318ef Mon Sep 17 00:00:00 2001
From: Gentle_Lijie <zljzljsweepy@qq.com>
Date: Wed, 12 Nov 2025 20:29:26 +0800
Subject: [PATCH 3/6] fix: reconstruct closeModal function

---
 config/vite.config.ts                      |   3 +
 src/components/screen/TimerConfigPanel.vue | 121 ++++++++++++++++-----
 src/components/screen/debateTimer.vue      |   5 +-
 src/shims-vue.d.ts                         |   7 ++
 src/style/index.css                        |  32 ++++++
 src/views/Screen.vue                       |  18 +++
 tsconfig.json                              |   4 +
 7 files changed, 162 insertions(+), 28 deletions(-)
 create mode 100644 src/shims-vue.d.ts
 create mode 100644 tsconfig.json

diff --git a/config/vite.config.ts b/config/vite.config.ts
index 3ed8c7b..acd240b 100644
--- a/config/vite.config.ts
+++ b/config/vite.config.ts
@@ -7,6 +7,9 @@ import { fileURLToPath, URL } from 'node:url';
 export default defineConfig(({ mode }) => ({
   base: mode === 'production' ? '/debate-timer/' : '/',
   plugins: [vue(), tailwindcss()],
+  server: {
+    host: true,
+  },
   css: {
     postcss: './config/postcss.config.js'
   },
diff --git a/src/components/screen/TimerConfigPanel.vue b/src/components/screen/TimerConfigPanel.vue
index e49d99b..5e8877a 100644
--- a/src/components/screen/TimerConfigPanel.vue
+++ b/src/components/screen/TimerConfigPanel.vue
@@ -1,6 +1,15 @@
 <template>
-  <dialog ref="modalRef" class="modal">
-  <div class="modal-box w-[30vw] max-w-[1200px] h-[90vh] flex flex-col">
+  <!-- use v-if driven wrapper instead of native <dialog> to avoid dialog API inconsistencies -->
+  <!-- fixed overlay that aligns the panel to the right with padding (margins) so it doesn't sit at the bottom -->
+  <div
+    ref="modalRef"
+    v-if="props.open"
+    role="dialog"
+    aria-modal="true"
+  class="fixed inset-0 z-50 flex items-start justify-start p-6 pointer-events-auto"
+    @click="onDialogClick"
+  >
+  <div class="modal-box bg-white w-[30vw] max-w-[1200px] h-[90vh] flex flex-col rounded-lg shadow-2xl">
       <div class="flex items-center justify-between mb-4">
         <h3 class="text-2xl font-bold config-header">辩论计时器配置</h3>
         <div class="flex gap-2">
@@ -8,7 +17,7 @@
             <button type="button" class="tab" :class="{ 'tab-active': editMode === 'visual' }" @click="editMode = 'visual'">可视化编辑</button>
             <button type="button" class="tab" :class="{ 'tab-active': editMode === 'json' }" @click="editMode = 'json'">JSON源码</button>
           </div>
-          <button class="btn btn-sm btn-circle btn-ghost" @click="emitClose">✕</button>
+          <button type="button" class="btn btn-sm btn-circle btn-ghost" @click="emitClose">✕</button>
         </div>
       </div>
 
@@ -19,7 +28,7 @@
               <div class="card-body p-4">
                 <div class="flex items-center justify-between mb-3">
                   <h4 class="font-bold text-lg">阶段 {{ index + 1 }}</h4>
-                  <button class="btn btn-sm btn-error btn-ghost" @click="removeStage(index)">
+                  <button type="button" class="btn btn-sm btn-error btn-ghost" @click="removeStage(index)">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       class="h-5 w-5"
@@ -93,6 +102,7 @@
                       />
                     </div>
                     <button
+                      type="button"
                       v-if="stage.sides.length > 1"
                       class="btn btn-sm btn-ghost btn-error"
                       @click="removeSide(index, sideIndex)"
@@ -114,6 +124,7 @@
                     </button>
                   </div>
                   <button
+                    type="button"
                     v-if="!stage.isDualSide || stage.sides.length < 2"
                     class="btn btn-sm btn-outline"
                     @click="addSide(index)"
@@ -156,7 +167,7 @@
                         <option value="end">结束铃</option>
                       </select>
                     </div>
-                    <button class="btn btn-sm btn-ghost btn-error" @click="removeBell(index, bellIndex)">
+                    <button type="button" class="btn btn-sm btn-ghost btn-error" @click="removeBell(index, bellIndex)">
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         class="h-4 w-4"
@@ -173,7 +184,7 @@
                       </svg>
                     </button>
                   </div>
-                  <button class="btn btn-sm btn-outline" @click="addBell(index)">
+                  <button type="button" class="btn btn-sm btn-outline" @click="addBell(index)">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       class="h-4 w-4"
@@ -189,7 +200,7 @@
               </div>
             </div>
 
-            <button class="btn btn-primary btn-block" @click="addStage">
+            <button type="button" class="btn btn-primary btn-block" @click="addStage">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="h-5 w-5"
@@ -220,7 +231,7 @@
         </div>
       </div>
 
-      <div class="flex justify-end gap-2 mt-4 pt-4 border-t">
+  <div class="flex justify-end gap-2 mt-4 pt-4 border-t modal-actions">
         <div class="flex-1"></div>
         <div class="flex flex-col items-end">
           <div v-if="saveError" class="text-error text-sm mb-2">{{ saveError }}</div>
@@ -236,14 +247,11 @@
         </div>
       </div>
     </div>
-    <form method="dialog" class="modal-backdrop">
-      <button>关闭</button>
-    </form>
-  </dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import type { TimerStage } from '@/types/screen';
 
 interface EmitPayload {
@@ -262,14 +270,17 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'close'): void;
   (e: 'save', payload: EmitPayload): void;
+  (e: 'update:open', value: boolean): void;
 }>();
 
-const modalRef = ref<HTMLDialogElement | null>(null);
+// use a generic HTMLElement ref; we no longer rely on native dialog API
+const modalRef = ref<HTMLElement | null>(null);
 const editMode = ref<'visual' | 'json'>('visual');
 const localStages = ref<TimerStage[]>([]);
 const jsonSource = ref('');
 const jsonError = ref('');
 const saveError = ref('');
+// child no longer shows alerts — parent will handle page-level alerts
 
 const initialiseForm = () => {
   localStages.value = JSON.parse(JSON.stringify(props.stages)); // Deep copy
@@ -342,18 +353,79 @@ watch(
   (open: boolean) => {
     if (open) {
       initialiseForm();
-      modalRef.value?.showModal();
     } else {
-      modalRef.value?.close();
+      // parent controls visibility via prop -> v-if; nothing else needed here
     }
   },
   { immediate: true },
 );
 
-const emitClose = () => {
+/**
+ * Close modal in a single place so all callers behave the same.
+ * This will close the native <dialog> (if open) and emit the 'close' event
+ * so the parent can update its `open` state.
+ */
+const closeModal = () => {
+  // eslint-disable-next-line no-console
+  console.debug('[TimerConfigPanel] closeModal called — before close', { modalRef: modalRef.value, propOpen: props.open });
+
+  try {
+    if (modalRef.value) {
+      // hide element as a defensive fallback in case parent state doesn't update immediately
+      try {
+        modalRef.value.style.display = 'none';
+      } catch (e) {
+        // ignore
+      }
+      try {
+        document.body.classList.remove('modal-open');
+      } catch (e) {
+        // ignore
+      }
+      // eslint-disable-next-line no-console
+      console.debug('[TimerConfigPanel] closeModal applied fallback hide');
+    }
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.debug('[TimerConfigPanel] closeModal fallback error', err);
+  }
+
+  // Notify parent that modal should be closed
   emit('close');
+  // also support v-model style update if parent uses it
+  emit('update:open', false);
+
+  // log after
+  // eslint-disable-next-line no-console
+  console.debug('[TimerConfigPanel] closeModal called — after close', { modalRef: modalRef.value, propOpen: props.open });
+};
+
+// kept for template compatibility (used by some buttons)
+const emitClose = () => closeModal();
+
+const onDialogClick = (e: MouseEvent) => {
+  // if click happened on the dialog backdrop (outside modal-box), close
+  if (e.target === modalRef.value) {
+    closeModal();
+  }
 };
 
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape' || e.key === 'Esc') {
+    if (props.open) {
+      closeModal();
+    }
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('keydown', onKeydown);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeydown);
+});
+
 const addStage = () => {
   localStages.value.push({
     stageName: '新阶段',
@@ -437,10 +509,7 @@ const handleSave = () => {
   }
 
   for (const stage of localStages.value) {
-    if (!stage.stageName.trim()) {
-      saveError.value = '阶段名称不能为空';
-      return;
-    }
+    // 阶段名称允许为空（按用户要求关闭“名称为空”校验）
     if (stage.sides.length === 0) {
       saveError.value = '阶段必须至少包含一个发言者';
       return;
@@ -464,13 +533,13 @@ const handleSave = () => {
   };
 
   // 发出保存事件，通知父级更新数据
+  // debug log: ensure handler is invoked
+  // eslint-disable-next-line no-console
+  console.debug('[TimerConfigPanel] emitting save', payload);
   emit('save', payload);
 
-  // 立即把新的配置加载到当前页面（父组件通常会在收到 save 事件时更新传入的 props），
-  // 然后关闭右侧 modal，并通知父组件 modal 已关闭
-  saveError.value = '';
-  modalRef.value?.close();
-  emit('close');
+  // 立即关闭 modal 并通知父组件；父组件将在 applyConfig 中显示页面级 alert
+  closeModal();
 };
 </script>
 <script lang="ts">
diff --git a/src/components/screen/debateTimer.vue b/src/components/screen/debateTimer.vue
index 16b958a..cf46c29 100644
--- a/src/components/screen/debateTimer.vue
+++ b/src/components/screen/debateTimer.vue
@@ -99,8 +99,9 @@
       <!-- Stage Navigation - Bottom Corners (Always visible) -->
     </div>
 
-    <!-- Stage Navigation - Bottom Corners (Always visible) -->
-    <div class="absolute bottom-4 left-4 right-4 flex justify-between items-end pointer-events-none">
+  <!-- Stage Navigation - Bottom Corners (Always visible) -->
+  <!-- Changed to fixed so it sticks to viewport corners regardless of container scroll/layout -->
+  <div class="fixed bottom-4 left-4 right-4 flex justify-between items-end pointer-events-none z-40">
       <!-- Previous Stage -->
       <div v-if="hasPreviousStage" class="flex flex-col items-start pointer-events-auto">
         <button class="btn btn-ghost btn-sm mb-2 opacity-70 hover:opacity-100" @click="navigateToPreviousStage">
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 0000000..d468240
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,7 @@
+/* eslint-disable */
+// Type declarations for Vue single-file components so TypeScript/IDE won't complain
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/src/style/index.css b/src/style/index.css
index bc0cbd3..9b763d7 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -14,6 +14,38 @@
 
 /* Tabs: 模仿浏览器标签页的样式（底部细线，激活 tab 被上边框包住并抬起） */
 @layer components {
+  /* Position modal as a right-side centered panel with rounded corners and drop shadow */
+  .modal {
+    display: flex;
+    align-items: center; /* vertical center */
+    justify-content: flex-end; /* align to right */
+    padding: 1.25rem; /* space from viewport edges */
+  }
+
+  /* Ensure modal-box looks like a floating panel with rounded corners and shadow */
+  .modal-box {
+    border-radius: .75rem; /* 12px */
+    box-shadow: 0 10px 30px rgba(2,6,23,0.12);
+    background-clip: padding-box;
+    overflow: hidden;
+    padding: 1rem; /* ensure inner spacing so buttons are away from edges */
+  }
+
+  /* Remove grey overlay/backdrop so main screen isn't dimmed */
+  .modal-backdrop {
+    background: transparent !important;
+  }
+
+  /* dialog backdrop (native) */
+  dialog::backdrop {
+    background: transparent !important;
+  }
+
+  /* Give cancel/save buttons a bit more breathing room */
+  .modal-actions .btn {
+    margin-left: 0.5rem;
+  }
+
   .tabs {
     position: relative;
     border-bottom: 1px solid rgba(31, 41, 55, 0.08); /* subtle divider */
diff --git a/src/views/Screen.vue b/src/views/Screen.vue
index 3a06a5a..24be741 100644
--- a/src/views/Screen.vue
+++ b/src/views/Screen.vue
@@ -21,6 +21,15 @@
     </div>
   </Transition>
 
+  <!-- page-level alert -->
+  <Transition name="fade">
+    <div v-if="pageAlert.show" class="absolute top-20 right-4 z-50">
+      <div :class="['alert', pageAlert.type === 'success' ? 'alert-success' : 'alert-error']">
+        <span>{{ pageAlert.message }}</span>
+      </div>
+    </div>
+  </Transition>
+
   <!-- Timer View -->
   <DebateTimer ref="debateTimerRef" :timer-data="timerData" @timer-end="handleTimerEnd" />
 
@@ -84,6 +93,7 @@ const timerData = ref<TimerData>({
 const debateTimerRef = ref<InstanceType<typeof DebateTimer> | null>(null);
 const showKeyboardHints = ref(false);
 const isConfigOpen = ref(false);
+const pageAlert = ref({ show: false, type: 'success', message: '' });
 
 const activityName = computed(() => timerData.value.activityName);
 const debateTitle = computed(() => timerData.value.debateTitle);
@@ -104,6 +114,10 @@ const closeConfig = () => {
 };
 
 const applyConfig = (payload: { activityName: string; debateTitle: string; stages: TimerStage[] }) => {
+  // debug log to confirm parent receives payload
+  // eslint-disable-next-line no-console
+  console.debug('[Screen] applyConfig', payload);
+
   timerData.value = {
     activityName: payload.activityName,
     debateTitle: payload.debateTitle,
@@ -117,6 +131,10 @@ const applyConfig = (payload: { activityName: string; debateTitle: string; stage
   setTimeout(() => {
     debateTimerRef.value?.handleReset?.();
   }, 100);
+
+  // show page-level success alert
+  pageAlert.value = { show: true, type: 'success', message: '配置已保存' };
+  setTimeout(() => (pageAlert.value.show = false), 2000);
 };
 </script>
 
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..d6ba0dc
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./config/tsconfig.app.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.d.ts"]
+}

From 47d62808d3f6fcc551ba3c64b102b1f15d9433d3 Mon Sep 17 00:00:00 2001
From: Gentle_Lijie <zljzljsweepy@qq.com>
Date: Thu, 13 Nov 2025 17:00:44 +0800
Subject: [PATCH 4/6] fix: uniform location of resources

---
 src/components/screen/TimerConfigPanel.vue |  2 +-
 src/components/screen/debateTimer.vue      |  2 +-
 src/style/index.css                        | 87 ++++++++++++++++++++++
 src/utils/timerDefaults.ts                 |  2 +-
 src/views/Screen.vue                       |  8 +-
 5 files changed, 94 insertions(+), 7 deletions(-)

diff --git a/src/components/screen/TimerConfigPanel.vue b/src/components/screen/TimerConfigPanel.vue
index 5e8877a..6620f33 100644
--- a/src/components/screen/TimerConfigPanel.vue
+++ b/src/components/screen/TimerConfigPanel.vue
@@ -252,7 +252,7 @@
 
 <script setup lang="ts">
 import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
-import type { TimerStage } from '@/types/screen';
+import type { TimerStage } from '../../types/screen';
 
 interface EmitPayload {
   activityName: string;
diff --git a/src/components/screen/debateTimer.vue b/src/components/screen/debateTimer.vue
index cf46c29..f40d8b2 100644
--- a/src/components/screen/debateTimer.vue
+++ b/src/components/screen/debateTimer.vue
@@ -134,7 +134,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import type { TimerData, TimerStage } from '@/types/screen';
+import type { TimerData, TimerStage } from '../../types/screen';
 
 const props = defineProps<{
   timerData: TimerData | null;
diff --git a/src/style/index.css b/src/style/index.css
index 9b763d7..f439175 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -221,3 +221,90 @@
     border-radius: 9999px;
   }
 }
+ 
+/* Card 组件样式：与现有风格一致，使用相同的圆角、阴影与主色变量 */
+@layer components {
+  .card {
+    background: var(--card-bg, #ffffff);
+    border-radius: var(--btn-radius);
+    border: 1px solid rgba(31, 41, 55, 0.06);
+    box-shadow: 0 6px 20px rgba(2, 6, 23, 0.06);
+    overflow: hidden;
+    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
+  }
+
+  /* 悬停时轻微抬起和加深阴影以提示可交互性 */
+  .card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.10);
+  }
+
+  /* 头部/主体/尾部的统一内边距和分割线 */
+  .card-header,
+  .card-footer {
+    padding: .75rem 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: .5rem;
+    background-clip: padding-box;
+  }
+
+  .card-header {
+    border-bottom: 1px solid rgba(31, 41, 55, 0.04);
+    background: linear-gradient(180deg, rgba(31, 99, 255, 0.02), transparent);
+  }
+
+  .card-title {
+    font-weight: 600;
+    color: var(--fallback-bc, #3270c7);
+    font-size: 1.5rem;
+    line-height: 1;
+  }
+
+  .card-subtitle {
+    font-size: .85rem;
+    color: rgba(31, 41, 55, 0.6);
+  }
+
+  .card-body {
+    padding: 1rem;
+    color: rgba(31, 41, 55, 0.9);
+  }
+
+  .card-footer {
+    border-top: 1px solid rgba(31, 41, 55, 0.04);
+    justify-content: flex-end;
+    background-color: transparent;
+  }
+
+  /* 侧重色条（例如用于表示状态或队伍颜色） */
+  .card.accent-left {
+    border-left: 4px solid var(--btn-primary);
+  }
+
+  /* 小尺寸/紧凑模式 */
+  .card.card-compact .card-header,
+  .card.card-compact .card-body,
+  .card.card-compact .card-footer {
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    padding-left: .75rem;
+    padding-right: .75rem;
+  }
+
+  /* 数字或计时器类文本，使用项目中已有的等宽风格 */
+  .card .num,
+  .card .time {
+    font-family: 'D-DIN', 'SF Pro', sans-serif;
+    font-weight: 600;
+    color: var(--btn-primary);
+  }
+
+  /* 响应式微调 */
+  @media (max-width: 640px) {
+    .card { border-radius: .5rem; }
+    .card-header, .card-footer { padding: .5rem; }
+    .card-body { padding: .75rem; }
+  }
+}
diff --git a/src/utils/timerDefaults.ts b/src/utils/timerDefaults.ts
index 44b2b01..98e696c 100644
--- a/src/utils/timerDefaults.ts
+++ b/src/utils/timerDefaults.ts
@@ -1,4 +1,4 @@
-import type { TimerStage } from '@/types/screen';
+import type { TimerStage } from '../types/screen';
 
 /**
  * Get default timer configuration stages
diff --git a/src/views/Screen.vue b/src/views/Screen.vue
index 24be741..c98f00c 100644
--- a/src/views/Screen.vue
+++ b/src/views/Screen.vue
@@ -78,10 +78,10 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import DebateTimer from '@/components/screen/debateTimer.vue';
-import TimerConfigPanel from '@/components/screen/TimerConfigPanel.vue';
-import type { TimerData, TimerStage } from '@/types/screen';
-import { getDefaultTimerStages } from '@/utils/timerDefaults';
+import DebateTimer from '../components/screen/debateTimer.vue';
+import TimerConfigPanel from '../components/screen/TimerConfigPanel.vue';
+import type { TimerData, TimerStage } from '../types/screen';
+import { getDefaultTimerStages } from '../utils/timerDefaults';
 
 const timerData = ref<TimerData>({
   activityName: '测试活动',

From 9b8230c2d965c946c14e6d3f0bb64bd6d21faecc Mon Sep 17 00:00:00 2001
From: Gentle_Lijie <zljzljsweepy@qq.com>
Date: Thu, 13 Nov 2025 17:05:35 +0800
Subject: [PATCH 5/6] fix: move stagecard outside of config panel

---
 src/components/screen/TimerConfigPanel.vue | 177 +-----------------
 src/views/StageCard.vue                    | 198 +++++++++++++++++++++
 2 files changed, 200 insertions(+), 175 deletions(-)
 create mode 100644 src/views/StageCard.vue

diff --git a/src/components/screen/TimerConfigPanel.vue b/src/components/screen/TimerConfigPanel.vue
index 6620f33..2c98da2 100644
--- a/src/components/screen/TimerConfigPanel.vue
+++ b/src/components/screen/TimerConfigPanel.vue
@@ -24,181 +24,7 @@
       <div class="flex-1 overflow-hidden">
         <div v-if="editMode === 'visual'" class="h-full overflow-y-auto pr-2">
           <div class="space-y-4">
-            <div v-for="(stage, index) in localStages" :key="index" class="card bg-base-200 shadow-sm">
-              <div class="card-body p-4">
-                <div class="flex items-center justify-between mb-3">
-                  <h4 class="font-bold text-lg">阶段 {{ index + 1 }}</h4>
-                  <button type="button" class="btn btn-sm btn-error btn-ghost" @click="removeStage(index)">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-5 w-5"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                      />
-                    </svg>
-                    删除阶段
-                  </button>
-                </div>
-
-                <div class="form-control mb-3">
-                  <label class="label">
-                    <span class="label-text font-medium">阶段名称</span>
-                  </label>
-                  <input
-                    v-model="stage.stageName"
-                    type="text"
-                    placeholder="例如：立论阶段 - 正方"
-                    class="input input-bordered"
-                  />
-                </div>
-
-                <div class="form-control mb-3">
-                  <label class="label cursor-pointer justify-start gap-2">
-                    <input v-model="stage.isDualSide" type="checkbox" class="checkbox" />
-                    <span class="label-text">双边计时（两个计时器交替使用）</span>
-                  </label>
-                </div>
-
-                <div class="form-control mb-3">
-                  <label class="label cursor-pointer justify-start gap-2">
-                    <input v-model="stage.hideTimer" type="checkbox" class="checkbox" />
-                    <span class="label-text">隐藏计时器（只显示发言者名称）</span>
-                  </label>
-                </div>
-
-                <div class="divider">发言者配置</div>
-                <div class="space-y-3">
-                  <div v-for="(side, sideIndex) in stage.sides" :key="sideIndex" class="flex gap-3 items-end">
-                    <div class="form-control flex-1">
-                      <label class="label">
-                        <span class="label-text">
-                          {{ stage.isDualSide ? (sideIndex === 0 ? '正方' : '反方') : '发言者' }} 名称
-                        </span>
-                      </label>
-                      <input
-                        v-model="side.name"
-                        type="text"
-                        placeholder="例如：正方一辩"
-                        class="input input-bordered input-sm"
-                      />
-                    </div>
-                    <div class="form-control w-32">
-                      <label class="label">
-                        <span class="label-text">时长（秒）</span>
-                      </label>
-                      <input
-                        v-model.number="side.duration"
-                        type="number"
-                        min="1"
-                        placeholder="180"
-                        class="input input-bordered input-sm"
-                      />
-                    </div>
-                    <button
-                      type="button"
-                      v-if="stage.sides.length > 1"
-                      class="btn btn-sm btn-ghost btn-error"
-                      @click="removeSide(index, sideIndex)"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-4 w-4"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M6 18L18 6M6 6l12 12"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                  <button
-                    type="button"
-                    v-if="!stage.isDualSide || stage.sides.length < 2"
-                    class="btn btn-sm btn-outline"
-                    @click="addSide(index)"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-4 w-4"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-                    </svg>
-                    添加发言者
-                  </button>
-                </div>
-
-                <div class="divider">响铃配置</div>
-                <div class="space-y-3">
-                  <div v-for="(bell, bellIndex) in stage.bellTimings" :key="bellIndex" class="flex gap-3 items-end">
-                    <div class="form-control flex-1">
-                      <label class="label">
-                        <span class="label-text">响铃时间（秒）</span>
-                      </label>
-                      <input
-                        v-model.number="bell.time"
-                        type="number"
-                        min="0"
-                        placeholder="从阶段开始计时"
-                        class="input input-bordered input-sm"
-                      />
-                    </div>
-                    <div class="form-control w-40">
-                      <label class="label">
-                        <span class="label-text">铃声类型</span>
-                      </label>
-                      <select v-model="bell.type" class="select select-bordered select-sm">
-                        <option value="start">开始铃</option>
-                        <option value="warning">提醒铃</option>
-                        <option value="end">结束铃</option>
-                      </select>
-                    </div>
-                    <button type="button" class="btn btn-sm btn-ghost btn-error" @click="removeBell(index, bellIndex)">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-4 w-4"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M6 18L18 6M6 6l12 12"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                  <button type="button" class="btn btn-sm btn-outline" @click="addBell(index)">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-4 w-4"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-                    </svg>
-                    添加响铃
-                  </button>
-                </div>
-              </div>
-            </div>
+            <StageCard v-for="(stage, index) in localStages" :key="index" :stage="stage" :index="index" @remove-stage="removeStage" @add-side="addSide" @remove-side="removeSide" @add-bell="addBell" @remove-bell="removeBell" />
 
             <button type="button" class="btn btn-primary btn-block" @click="addStage">
               <svg
@@ -253,6 +79,7 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import type { TimerStage } from '../../types/screen';
+import StageCard from '../../views/StageCard.vue';
 
 interface EmitPayload {
   activityName: string;
diff --git a/src/views/StageCard.vue b/src/views/StageCard.vue
new file mode 100644
index 0000000..852939a
--- /dev/null
+++ b/src/views/StageCard.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="card bg-base-200 shadow-sm">
+    <div class="card-body p-4">
+      <div class="flex items-center justify-between mb-3">
+        <h4 class="font-bold text-lg">阶段 {{ index + 1 }}</h4>
+        <button type="button" class="btn btn-sm btn-error btn-ghost" @click="$emit('remove-stage', index)">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+            />
+          </svg>
+          删除阶段
+        </button>
+      </div>
+
+      <div class="form-control mb-3">
+        <label class="label">
+          <span class="label-text font-medium">阶段名称</span>
+        </label>
+        <input
+          v-model="stage.stageName"
+          type="text"
+          placeholder="例如：立论阶段 - 正方"
+          class="input input-bordered"
+        />
+      </div>
+
+      <div class="form-control mb-3">
+        <label class="label cursor-pointer justify-start gap-2">
+          <input v-model="stage.isDualSide" type="checkbox" class="checkbox" />
+          <span class="label-text">双边计时（两个计时器交替使用）</span>
+        </label>
+      </div>
+
+      <div class="form-control mb-3">
+        <label class="label cursor-pointer justify-start gap-2">
+          <input v-model="stage.hideTimer" type="checkbox" class="checkbox" />
+          <span class="label-text">隐藏计时器（只显示发言者名称）</span>
+        </label>
+      </div>
+
+      <div class="divider">发言者配置</div>
+      <div class="space-y-3">
+        <div v-for="(side, sideIndex) in stage.sides" :key="sideIndex" class="flex gap-3 items-end">
+          <div class="form-control flex-1">
+            <label class="label">
+              <span class="label-text">
+                {{ stage.isDualSide ? (sideIndex === 0 ? '正方' : '反方') : '发言者' }} 名称
+              </span>
+            </label>
+            <input
+              v-model="side.name"
+              type="text"
+              placeholder="例如：正方一辩"
+              class="input input-bordered input-sm"
+            />
+          </div>
+          <div class="form-control w-32">
+            <label class="label">
+              <span class="label-text">时长（秒）</span>
+            </label>
+            <input
+              v-model.number="side.duration"
+              type="number"
+              min="1"
+              placeholder="180"
+              class="input input-bordered input-sm"
+            />
+          </div>
+          <button
+            type="button"
+            v-if="stage.sides.length > 1"
+            class="btn btn-sm btn-ghost btn-error"
+            @click="$emit('remove-side', index, sideIndex)"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+        <button
+          type="button"
+          v-if="!stage.isDualSide || stage.sides.length < 2"
+          class="btn btn-sm btn-outline"
+          @click="$emit('add-side', index)"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+          </svg>
+          添加发言者
+        </button>
+      </div>
+
+      <div class="divider">响铃配置</div>
+      <div class="space-y-3">
+        <div v-for="(bell, bellIndex) in stage.bellTimings" :key="bellIndex" class="flex gap-3 items-end">
+          <div class="form-control flex-1">
+            <label class="label">
+              <span class="label-text">响铃时间（秒）</span>
+            </label>
+            <input
+              v-model.number="bell.time"
+              type="number"
+              min="0"
+              placeholder="从阶段开始计时"
+              class="input input-bordered input-sm"
+            />
+          </div>
+          <div class="form-control w-40">
+            <label class="label">
+              <span class="label-text">铃声类型</span>
+            </label>
+            <select v-model="bell.type" class="select select-bordered select-sm">
+              <option value="start">开始铃</option>
+              <option value="warning">提醒铃</option>
+              <option value="end">结束铃</option>
+            </select>
+          </div>
+          <button type="button" class="btn btn-sm btn-ghost btn-error" @click="$emit('remove-bell', index, bellIndex)">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+        <button type="button" class="btn btn-sm btn-outline" @click="$emit('add-bell', index)">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+          </svg>
+          添加响铃
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TimerStage } from '../types/screen';
+
+const props = defineProps<{
+  stage: TimerStage;
+  index: number;
+}>();
+
+defineEmits<{
+  (e: 'remove-stage', index: number): void;
+  (e: 'add-side', stageIndex: number): void;
+  (e: 'remove-side', stageIndex: number, sideIndex: number): void;
+  (e: 'add-bell', stageIndex: number): void;
+  (e: 'remove-bell', stageIndex: number, bellIndex: number): void;
+}>();
+</script>
+
+<style scoped>
+/* 如果需要scoped样式，可以添加 */
+</style>
\ No newline at end of file

From 9e05c78cbce3c468df786a4317f8211f347e073a Mon Sep 17 00:00:00 2001
From: Gentle_Lijie <zljzljsweepy@qq.com>
Date: Thu, 13 Nov 2025 19:17:17 +0800
Subject: [PATCH 6/6] fix: uniformed the styles of cards

---
 src/components/screen/TimerConfigPanel.vue |  18 +-
 src/style/index.css                        | 271 +++++++++++++++++++--
 src/views/StageCard.vue                    | 229 +++++++----------
 3 files changed, 340 insertions(+), 178 deletions(-)

diff --git a/src/components/screen/TimerConfigPanel.vue b/src/components/screen/TimerConfigPanel.vue
index 2c98da2..3e5e558 100644
--- a/src/components/screen/TimerConfigPanel.vue
+++ b/src/components/screen/TimerConfigPanel.vue
@@ -9,7 +9,7 @@
   class="fixed inset-0 z-50 flex items-start justify-start p-6 pointer-events-auto"
     @click="onDialogClick"
   >
-  <div class="modal-box bg-white w-[30vw] max-w-[1200px] h-[90vh] flex flex-col rounded-lg shadow-2xl">
+  <div class="modal-box bg-white w-[45vw] max-w-[1200px] h-[90vh] flex flex-col rounded-lg shadow-2xl">
       <div class="flex items-center justify-between mb-4">
         <h3 class="text-2xl font-bold config-header">辩论计时器配置</h3>
         <div class="flex gap-2">
@@ -22,7 +22,7 @@
       </div>
 
       <div class="flex-1 overflow-hidden">
-        <div v-if="editMode === 'visual'" class="h-full overflow-y-auto pr-2">
+        <div v-if="editMode === 'visual'" class="h-full overflow-y-auto">
           <div class="space-y-4">
             <StageCard v-for="(stage, index) in localStages" :key="index" :stage="stage" :index="index" @remove-stage="removeStage" @add-side="addSide" @remove-side="removeSide" @add-bell="addBell" @remove-bell="removeBell" />
 
@@ -275,18 +275,8 @@ const removeStage = (index: number) => {
   }
 };
 
-const addSide = (stageIndex: number) => {
-  const stage = localStages.value[stageIndex];
-  if (!stage) return;
-
-  if (stage.isDualSide && stage.sides.length >= 2) {
-    return;
-  }
-
-  stage.sides.push({
-    name: stage.isDualSide ? (stage.sides.length === 0 ? '正方' : '反方') : '发言者',
-    duration: 180,
-  });
+const addSide = (_stageIndex: number) => {
+  // Note: Side is already added by StageCard component, just sync JSON
   syncToJSON();
 };
 
diff --git a/src/style/index.css b/src/style/index.css
index f439175..67a91c9 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -14,21 +14,27 @@
 
 /* Tabs: 模仿浏览器标签页的样式（底部细线，激活 tab 被上边框包住并抬起） */
 @layer components {
+
   /* Position modal as a right-side centered panel with rounded corners and drop shadow */
   .modal {
     display: flex;
-    align-items: center; /* vertical center */
-    justify-content: flex-end; /* align to right */
-    padding: 1.25rem; /* space from viewport edges */
+    align-items: center;
+    /* vertical center */
+    justify-content: flex-end;
+    /* align to right */
+    padding: 1.25rem;
+    /* space from viewport edges */
   }
 
   /* Ensure modal-box looks like a floating panel with rounded corners and shadow */
   .modal-box {
-    border-radius: .75rem; /* 12px */
-    box-shadow: 0 10px 30px rgba(2,6,23,0.12);
+    border-radius: .75rem;
+    /* 12px */
+    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.12);
     background-clip: padding-box;
     overflow: hidden;
-    padding: 1rem; /* ensure inner spacing so buttons are away from edges */
+    padding: 1rem;
+    /* ensure inner spacing so buttons are away from edges */
   }
 
   /* Remove grey overlay/backdrop so main screen isn't dimmed */
@@ -48,7 +54,8 @@
 
   .tabs {
     position: relative;
-    border-bottom: 1px solid rgba(31, 41, 55, 0.08); /* subtle divider */
+    border-bottom: 1px solid rgba(31, 41, 55, 0.08);
+    /* subtle divider */
     padding-bottom: 0.25rem;
   }
 
@@ -70,19 +77,22 @@
 
   .tabs .tab:hover,
   .tabs .tab:focus {
-    background-color: rgba(31, 99, 255, 0.06); /* subtle hover */
+    background-color: rgba(31, 99, 255, 0.06);
+    /* subtle hover */
     cursor: pointer;
   }
 
   /* Active tab: 抬起并在上方被边框包住，底部与容器的底线相连 */
   .tabs .tab.tab-active,
   .tabs .tab:active {
-    background-color: var(--btn-primary-contrast); /* white */
+    background-color: var(--btn-primary-contrast);
+    /* white */
     color: var(--btn-primary);
     border-color: rgba(31, 41, 55, 0.12);
     border-bottom-color: transparent;
     position: relative;
-    top: 1px; /* 抬起视觉 */
+    top: 1px;
+    /* 抬起视觉 */
     box-shadow: 0 -1px 0 0 rgba(31, 41, 55, 0.04);
     z-index: 10;
   }
@@ -112,32 +122,38 @@
 
 /* 按钮主题变量（可在此统一修改颜色） */
 :root {
-  --btn-primary: #1f6feb; /* 蓝色，未选中时用于文字与边框 */
-  --btn-primary-contrast: #ffffff; /* 选中后文字颜色 */
+  --btn-primary: #1f6feb;
+  /* 蓝色，未选中时用于文字与边框 */
+  --btn-primary-contrast: #ffffff;
+  /* 选中后文字颜色 */
 
-  --btn-error: #ef4444; /* 删除按钮颜色 */
+  --btn-error: #ef4444;
+  /* 删除按钮颜色 */
   --btn-error-contrast: #ffffff;
 
   --btn-radius: 0.5rem;
 }
 
-.config-header{
-  margin:10px;
+.config-header {
+  margin: 10px;
 }
 
 /* 使用 Tailwind 的 components layer 覆盖或补充 DaisyUI 的 .btn 样式 */
 @layer components {
+
   /* 基本按钮：未选中 -> 透明背景 + 蓝色文字 + 蓝色边框 */
   .btn {
     background-color: transparent;
     color: var(--btn-primary);
     border: 1px solid var(--btn-primary);
     border-radius: var(--btn-radius);
-    padding: .375rem .75rem; /* 与 btn-sm / btn-md 可叠加 */
+    padding: .375rem .75rem;
+    /* 与 btn-sm / btn-md 可叠加 */
     display: inline-flex;
     align-items: center;
     gap: .5rem;
-    white-space: nowrap; /* 确保含 svg + 文本的按钮不换行 */
+    white-space: nowrap;
+    /* 确保含 svg + 文本的按钮不换行 */
     transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
   }
 
@@ -220,8 +236,61 @@
     justify-content: center;
     border-radius: 9999px;
   }
+
+  /* 自定义checkbox样式，使用主色调并添加选中/取消动画 */
+  .checkbox {
+    appearance: none;
+    width: 1.2em;
+    height: 1.2em;
+    border: 2px solid var(--btn-primary);
+    border-radius: var(--btn-radius);
+    position: relative;
+    cursor: pointer;
+    background-color: transparent;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+    vertical-align: middle;
+  }
+
+  .checkbox:checked {
+    background-color: var(--btn-primary);
+    border-color: var(--btn-primary);
+  }
+
+  .checkbox::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    color: var(--btn-primary-contrast);
+    font-size: 0.8em;
+    opacity: 0;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+
+  .checkbox:checked::after {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  /* 确保input[type="number"]的上下箭头一直显示 */
+  input[type="number"] {
+    appearance: textfield;
+    -moz-appearance: textfield;
+  }
+
+  input[type="number"]::-webkit-outer-spin-button,
+  input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: auto;
+    opacity: 1;
+    margin: 0;
+    background-color: var(--btn-primary);
+    color: var(--btn-primary-contrast);
+    border: 1px solid var(--btn-primary);
+    border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
+  }
 }
- 
+
 /* Card 组件样式：与现有风格一致，使用相同的圆角、阴影与主色变量 */
 @layer components {
   .card {
@@ -234,10 +303,10 @@
   }
 
   /* 悬停时轻微抬起和加深阴影以提示可交互性 */
-  .card:hover {
+  /* .card:hover {
     transform: translateY(-4px);
     box-shadow: 0 14px 30px rgba(2, 6, 23, 0.10);
-  }
+  } */
 
   /* 头部/主体/尾部的统一内边距和分割线 */
   .card-header,
@@ -257,14 +326,129 @@
 
   .card-title {
     font-weight: 600;
-    color: var(--fallback-bc, #3270c7);
+    color: var(--btn-primary);
     font-size: 1.5rem;
     line-height: 1;
   }
 
+  .card-label {
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 1);
+    margin-right: .75rem;
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+  }
+
+  .card-choice{
+    font-size: 1rem;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 1);
+    margin-left: .75rem;
+    display: inline-flex;
+    align-items: center;
+    gap: .25rem;
+    vertical-align: middle;
+  }
+
+  .card-input {
+    background-color: transparent;
+    color: var(--btn-primary);
+    border: 1px solid var(--btn-primary);
+    border-radius: var(--btn-radius);
+    padding: .375rem .75rem;
+    font-family: inherit;
+    font-size: inherit;
+    transition: border-color .12s ease, box-shadow .12s ease;
+    align-self: flex-end;
+  }
+
+  .card-input:focus {
+    outline: none;
+    border-color: var(--btn-primary);
+    /* box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.1); */
+  }
+
+  .speaker {
+    border-radius: calc(1 * var(--btn-radius));
+    border: 2px solid var(--btn-primary);
+    border-collapse: collapse;
+    overflow: hidden;
+  }
+
+
+  .card-table thead {
+    height: 2em;
+    color: var(--btn-primary);
+    border-bottom: 1px solid var(--btn-primary);
+  }
+
+  .card-table td {
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  .card-table tr{
+    height: 3em;
+  }
+
+  .card-table-border-dual tr td{
+    border-right: 1px solid var(--btn-primary);
+    border-bottom: 1px solid var(--btn-primary);
+  }
+  
+  .card-table-border-dual tr:last-child td{
+    border-bottom: none;
+  }
+
+  .card-table td:last-child{
+    border-right: none;
+  }
+
+  .card-table-border-single tr td{
+    border-right: 1px solid var(--btn-primary);
+    border-bottom: 1px solid var(--btn-primary);
+  }
+
+  .card-table th {
+    height: 3em;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 1.33em;
+  }
+
+  .card-input-underline {
+    width: 50%;
+    text-align: center;
+    background-color: transparent;
+    color: var(--btn-primary);
+    border: none;
+    border-bottom: 2px solid var(--btn-primary);
+    border-radius: 0;
+    padding: .375rem 0;
+    font-family: inherit;
+    font-size: inherit;
+    transition: all .3s;
+  }
+
+
+
+  .card-input.speaker .card-input-underline.speaker {
+    font-weight: 500;
+    max-width: 70%;
+  }
+
+  .card-input.time .card-input-underline.time {
+    width: 80%;
+  }
+
   .card-subtitle {
-    font-size: .85rem;
-    color: rgba(31, 41, 55, 0.6);
+    margin: 10px 10px 10px 10px;
+    font-size: 1.3rem;
+    font-weight: bold;
+    color: rgba(31, 41, 55, 1);
+    width:fit-content;
   }
 
   .card-body {
@@ -278,6 +462,30 @@
     background-color: transparent;
   }
 
+  .add-speaker-row {
+    display: flex;
+    justify-content: center;
+    /* margin: 0 10px 10px 10px; */
+    /* margin-bottom: */
+  }
+
+  .add-speaker-row.single {
+    margin: 10px 10px 10px 10px;
+  }
+
+  .add-speaker-row.dual {
+    display: flex;
+    justify-content: center;
+    margin: none;
+  }
+
+  .add-speaker-button {
+    border: none;
+    justify-content: center;
+  }
+  .ring-header{
+    margin: 10px 0 10px 0;
+  }
   /* 侧重色条（例如用于表示状态或队伍颜色） */
   .card.accent-left {
     border-left: 4px solid var(--btn-primary);
@@ -303,8 +511,17 @@
 
   /* 响应式微调 */
   @media (max-width: 640px) {
-    .card { border-radius: .5rem; }
-    .card-header, .card-footer { padding: .5rem; }
-    .card-body { padding: .75rem; }
+    .card {
+      border-radius: .5rem;
+    }
+
+    .card-header,
+    .card-footer {
+      padding: .5rem;
+    }
+
+    .card-body {
+      padding: .75rem;
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/src/views/StageCard.vue b/src/views/StageCard.vue
index 852939a..1fae888 100644
--- a/src/views/StageCard.vue
+++ b/src/views/StageCard.vue
@@ -2,176 +2,126 @@
   <div class="card bg-base-200 shadow-sm">
     <div class="card-body p-4">
       <div class="flex items-center justify-between mb-3">
-        <h4 class="font-bold text-lg">阶段 {{ index + 1 }}</h4>
+        <h4 class="font-bold text-lg card-title">阶段 {{ index + 1 }}</h4>
         <button type="button" class="btn btn-sm btn-error btn-ghost" @click="$emit('remove-stage', index)">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-            />
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
           </svg>
           删除阶段
         </button>
       </div>
 
       <div class="form-control mb-3">
-        <label class="label">
+        <label class="card-label">
           <span class="label-text font-medium">阶段名称</span>
         </label>
-        <input
-          v-model="stage.stageName"
-          type="text"
-          placeholder="例如：立论阶段 - 正方"
-          class="input input-bordered"
-        />
+        <input v-model="stage.stageName" type="text" placeholder="例如：立论阶段 - 正方" class="card-input input-bordered self-end" />
       </div>
 
       <div class="form-control mb-3">
         <label class="label cursor-pointer justify-start gap-2">
           <input v-model="stage.isDualSide" type="checkbox" class="checkbox" />
-          <span class="label-text">双边计时（两个计时器交替使用）</span>
+          <span class="card-choice label-text">双边计时（两个计时器交替使用）</span>
         </label>
       </div>
 
       <div class="form-control mb-3">
         <label class="label cursor-pointer justify-start gap-2">
           <input v-model="stage.hideTimer" type="checkbox" class="checkbox" />
-          <span class="label-text">隐藏计时器（只显示发言者名称）</span>
+          <span class="card-choice label-text">隐藏计时器（只显示发言者名称）</span>
         </label>
       </div>
 
-      <div class="divider">发言者配置</div>
-      <div class="space-y-3">
-        <div v-for="(side, sideIndex) in stage.sides" :key="sideIndex" class="flex gap-3 items-end">
-          <div class="form-control flex-1">
-            <label class="label">
-              <span class="label-text">
-                {{ stage.isDualSide ? (sideIndex === 0 ? '正方' : '反方') : '发言者' }} 名称
-              </span>
-            </label>
-            <input
-              v-model="side.name"
-              type="text"
-              placeholder="例如：正方一辩"
-              class="input input-bordered input-sm"
-            />
-          </div>
-          <div class="form-control w-32">
-            <label class="label">
-              <span class="label-text">时长（秒）</span>
-            </label>
-            <input
-              v-model.number="side.duration"
-              type="number"
-              min="1"
-              placeholder="180"
-              class="input input-bordered input-sm"
-            />
-          </div>
-          <button
-            type="button"
-            v-if="stage.sides.length > 1"
-            class="btn btn-sm btn-ghost btn-error"
-            @click="$emit('remove-side', index, sideIndex)"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-4 w-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M6 18L18 6M6 6l12 12"
-              />
+      <div class="card-subtitle">发言者配置</div>
+      <div :key="stage.sides.length" class="speaker overflow-x-auto">
+        <table :class="stage.sides.length === 2 ? 'card-table-border-dual' : 'card-table-border-single'"
+          class="card-table table table-compact w-full card-table">
+          <thead>
+            <tr>
+              <th class="text-left">发言者名称</th>
+              <th class="text-left w-32">时长（秒）</th>
+              <th class="text-center w-20" v-if="stage.sides.length > 1">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(side, sideIndex) in stage.sides" :key="sideIndex">
+              <td>
+                <input v-model="side.name" type="text" placeholder="例如：正方一辩"
+                  class="card-input-underline speaker input-bordered input-sm w-full" />
+              </td>
+              <td>
+                <input v-model.number="side.duration" type="number" min="0" default="180" step="30" placeholder="180"
+                  class="card-input-underline time input-bordered input-sm w-full" />
+              </td>
+              <td v-if="stage.sides.length > 1" class="text-center">
+                <button type="button" class="btn btn-sm btn-ghost btn-error"
+                  @click="$emit('remove-side', index, sideIndex)">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div :class="stage.sides.length === 2 ? 'add-speaker-row dual' : 'add-speaker-row single'" class="">
+          <button type="button" v-if="stage.sides.length < 2" class="btn btn-sm btn-outline add-speaker-button"
+            @click="addSide">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
+              stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
             </svg>
+            添加发言者
           </button>
         </div>
-        <button
-          type="button"
-          v-if="!stage.isDualSide || stage.sides.length < 2"
-          class="btn btn-sm btn-outline"
-          @click="$emit('add-side', index)"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-          </svg>
-          添加发言者
-        </button>
       </div>
 
-      <div class="divider">响铃配置</div>
-      <div class="space-y-3">
-        <div v-for="(bell, bellIndex) in stage.bellTimings" :key="bellIndex" class="flex gap-3 items-end">
-          <div class="form-control flex-1">
-            <label class="label">
-              <span class="label-text">响铃时间（秒）</span>
-            </label>
-            <input
-              v-model.number="bell.time"
-              type="number"
-              min="0"
-              placeholder="从阶段开始计时"
-              class="input input-bordered input-sm"
-            />
-          </div>
-          <div class="form-control w-40">
-            <label class="label">
-              <span class="label-text">铃声类型</span>
-            </label>
-            <select v-model="bell.type" class="select select-bordered select-sm">
-              <option value="start">开始铃</option>
-              <option value="warning">提醒铃</option>
-              <option value="end">结束铃</option>
-            </select>
-          </div>
-          <button type="button" class="btn btn-sm btn-ghost btn-error" @click="$emit('remove-bell', index, bellIndex)">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-4 w-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
+      <div class="ring-header flex items-center justify-between mb-3">
+        <div class="card-subtitle">响铃配置</div>
         <button type="button" class="btn btn-sm btn-outline" @click="$emit('add-bell', index)">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
           </svg>
           添加响铃
         </button>
       </div>
+      <div class="speaker overflow-x-auto" v-if="stage.bellTimings.length > 0">
+        <table class="card-table table table-compact w-full card-table">
+          <thead>
+            <tr>
+              <th class="text-left">响铃时间（秒）</th>
+              <th class="text-left w-40">铃声类型</th>
+              <th class="text-center w-20">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(bell, bellIndex) in stage.bellTimings" :key="bellIndex">
+              <td>
+                <input v-model.number="bell.time" type="number" min="0" step="30" placeholder="从阶段开始计时"
+                  class="card-input-underline time input-bordered input-sm w-full" />
+              </td>
+              <td>
+                <select v-model="bell.type" class="card-input-underline input-bordered input-sm w-full">
+                  <option value="start">开始铃</option>
+                  <option value="warning">提醒铃</option>
+                  <option value="end">结束铃</option>
+                </select>
+              </td>
+              <td class="text-center">
+                <button type="button" class="btn btn-sm btn-ghost btn-error"
+                  @click="$emit('remove-bell', index, bellIndex)">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </template>
@@ -184,13 +134,18 @@ const props = defineProps<{
   index: number;
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'remove-stage', index: number): void;
   (e: 'add-side', stageIndex: number): void;
   (e: 'remove-side', stageIndex: number, sideIndex: number): void;
   (e: 'add-bell', stageIndex: number): void;
   (e: 'remove-bell', stageIndex: number, bellIndex: number): void;
 }>();
+
+const addSide = () => {
+  props.stage.sides.push({ name: '', duration: 180 });
+  emit('add-side', props.index);
+};
 </script>
 
 <style scoped>