update

src/components/MoveablePanel2.vue

@@ -0,0 +1,220 @@
+<template>
+  <div 
+    class="moveable-panel"
+    ref="moveablePanelRef"
+    :style="{
+      width: w + 'px',
+      height: h ? h + 'px' : 'auto',
+      left: x + 'px',
+      top: y + 'px',
+    }"
+  >
+    <template v-if="title">
+      <div class="header" @mousedown="$event => startMove($event)">
+        <div class="title">{{title}}</div>
+        <div class="close-btn" @click="emit('close')"><IconClose /></div>
+      </div>
+
+      <div class="content">
+        <slot></slot>
+      </div>
+    </template>
+
+    <div v-else class="content" @mousedown="$event => startMove($event)">
+      <slot></slot>
+    </div>
+
+    <div class="resizer" v-if="resizeable" @mousedown="$event => startResize($event)"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, useTemplateRef } from 'vue'
+
+const props = withDefaults(defineProps<{
+  width: number
+  height: number
+  minWidth?: number
+  minHeight?: number
+  maxWidth?: number
+  maxHeight?: number
+  left?: number
+  top?: number
+  title?: string
+  moveable?: boolean
+  resizeable?: boolean
+}>(), {
+  minWidth: 20,
+  minHeight: 20,
+  maxWidth: 500,
+  maxHeight: 500,
+  left: 10,
+  top: 10,
+  title: '',
+  moveable: true,
+  resizeable: false,
+})
+
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
+
+const x = ref(0)
+const y = ref(0)
+const w = ref(0)
+const h = ref(0)
+const moveablePanelRef = useTemplateRef<HTMLElement>('moveablePanelRef')
+const realHeight = computed(() => {
+  if (!h.value) {
+    return moveablePanelRef.value?.clientHeight || 0
+  }
+  return h.value
+})
+
+onMounted(() => {
+  if (props.left >= 0) x.value = props.left
+  else x.value = document.body.clientWidth + props.left - props.width
+
+  if (props.top >= 0) y.value = props.top
+  else y.value = document.body.clientHeight + props.top - (props.height || realHeight.value)
+
+  w.value = props.width
+  h.value = props.height
+})
+
+const startMove = (e: MouseEvent) => {
+  if (!props.moveable) return
+
+  let isMouseDown = true
+
+  const windowWidth = document.body.clientWidth
+  const clientHeight = document.body.clientHeight
+
+  const startPageX = e.pageX
+  const startPageY = e.pageY
+
+  const originLeft = x.value
+  const originTop = y.value
+
+  document.onmousemove = e => {
+    if (!isMouseDown) return
+
+    const moveX = e.pageX - startPageX
+    const moveY = e.pageY - startPageY
+
+    let left = originLeft + moveX
+    let top = originTop + moveY
+
+    if (left < 0) left = 0
+    if (top < 0) top = 0
+    if (left + w.value > windowWidth) left = windowWidth - w.value
+    if (top + realHeight.value > clientHeight) top = clientHeight - realHeight.value
+
+    x.value = left
+    y.value = top
+  }
+  document.onmouseup = () => {
+    isMouseDown = false
+
+    document.onmousemove = null
+    document.onmouseup = null
+  }
+}
+
+const startResize = (e: MouseEvent) => {
+  if (!props.resizeable) return
+
+  let isMouseDown = true
+
+  const startPageX = e.pageX
+  const startPageY = e.pageY
+
+  const originWidth = w.value
+  const originHeight = h.value
+
+  document.onmousemove = e => {
+    if (!isMouseDown) return
+
+    const moveX = e.pageX - startPageX
+    const moveY = e.pageY - startPageY
+
+    let width = originWidth + moveX
+    let height = originHeight + moveY
+
+    if (width < props.minWidth) width = props.minWidth
+    if (height < props.minHeight) height = props.minHeight
+    if (width > props.maxWidth) width = props.maxWidth
+    if (height > props.maxHeight) height = props.maxHeight
+
+    w.value = width
+    h.value = height
+  }
+  document.onmouseup = () => {
+    isMouseDown = false
+
+    document.onmousemove = null
+    document.onmouseup = null
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.moveable-panel {
+  position: fixed;
+  background-color: #fff;
+  box-shadow: $boxShadow;
+  // border: 1px solid $borderColor;
+  border-radius: $borderRadius;
+  display: flex;
+  flex-direction: column;
+  z-index: 999;
+}
+.resizer {
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -4px;
+    right: -4px;
+    transform: rotate(45deg);
+    transform-origin: center;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-left-color: #e1e1e1;
+  }
+}
+.header {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: move;
+}
+.title {
+  flex: 1;
+  font-size: 13px;
+  padding-left: 10px;
+}
+.close-btn {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+  font-size: 13px;
+  cursor: pointer;
+}
+.content {
+  flex: 1;
+  padding: 10px;
+  overflow: auto;
+}
+</style>

src/views/Screen/CountdownTimer copy.vue

@@ -0,0 +1,223 @@
+<template>
+  <MoveablePanel 
+    class="countdown-timer" 
+    :width="180"
+    :height="110"
+    :left="left" 
+    :top="top"
+  >
+    <div class="header">
+      <span class="text-btn" @click="toggle()">{{ inTiming ? '暂停' : '开始'}}</span>
+      <span class="text-btn" @click="reset()">重置</span>
+      <span class="text-btn" @click="toggleCountdown()" :class="{ 'active': isCountdown }">倒计时</span>
+    </div>
+    <div class="content">
+      <div class="timer">
+        <input 
+          type="text"
+          :value="fillDigit(minute, 2)"
+          :maxlength="3" :disabled="inputEditable"
+          @mousedown.stop 
+          @blur="$event => changeTime($event, 'minute')"
+          @keydown.stop
+          @keydown.enter.stop="$event => changeTime($event, 'minute')"
+        >
+      </div>
+      <div class="colon">:</div>
+      <div class="timer">
+        <input 
+          type="text"
+          :value="fillDigit(second, 2)"
+          :maxlength="3" :disabled="inputEditable"
+          @mousedown.stop 
+          @blur="$event => changeTime($event, 'second')"
+          @keydown.stop
+          @keydown.enter.stop="$event => changeTime($event, 'second')"
+        >
+      </div>
+    </div>
+
+    <div class="close-btn" @click="emit('close')"><IconClose class="icon" /></div>
+  </MoveablePanel>
+</template>
+
+<script lang="ts" setup>
+import { computed, onUnmounted, ref } from 'vue'
+import { fillDigit } from '@/utils/common'
+
+import MoveablePanel from '@/components/MoveablePanel.vue'
+
+withDefaults(defineProps<{
+  left?: number
+  top?: number
+}>(), {
+  left: 5,
+  top: 5,
+})
+
+const emit = defineEmits<{
+  (event: 'close'): void
+  (event: 'timer-start', payload: { isCountdown: boolean; startAt: string; durationSec?: number }): void
+  (event: 'timer-pause', payload: { pausedAt: string }): void
+  (event: 'timer-reset'): void
+  (event: 'timer-stop'): void
+  (event: 'timer-finish'): void
+}>()
+
+const timer = ref<number | null>(null)
+const inTiming = ref(false)
+const isCountdown = ref(false)
+const time = ref(0)
+const minute = computed(() => Math.floor(time.value / 60))
+const second = computed(() => time.value % 60)
+
+const inputEditable = computed(() => {
+  return !isCountdown.value || inTiming.value
+})
+
+const clearTimer = () => {
+  if (timer.value !== null) {
+    clearInterval(timer.value)
+  }
+}
+
+onUnmounted(clearTimer)
+
+const pause = () => {
+  clearTimer()
+  inTiming.value = false
+  emit('timer-pause', { pausedAt: new Date().toISOString() })
+}
+
+const reset = () => {
+  clearTimer()
+  inTiming.value = false
+  
+  if (isCountdown.value) time.value = 600
+  else time.value = 0
+  emit('timer-reset')
+}
+
+const start = () => {
+  clearTimer()
+
+  if (isCountdown.value) {
+    timer.value = window.setInterval(() => {
+      time.value = time.value - 1
+
+      if (time.value <= 0) {
+        time.value = 0
+        clearTimer()
+        inTiming.value = false
+        emit('timer-finish')
+      }
+    }, 1000)
+  }
+  else {
+    timer.value = window.setInterval(() => {
+      time.value = time.value + 1
+
+      if (time.value > 36000) pause()
+    }, 1000)
+  }
+
+  inTiming.value = true
+  emit('timer-start', { isCountdown: isCountdown.value, startAt: new Date().toISOString(), durationSec: isCountdown.value ? time.value : undefined })
+}
+
+const toggle = () => {
+  if (inTiming.value) pause()
+  else start()
+}
+
+const toggleCountdown = () => {
+  isCountdown.value = !isCountdown.value
+  reset()
+}
+
+onUnmounted(() => {
+  emit('timer-stop')
+})
+
+const changeTime = (e: FocusEvent | KeyboardEvent, type: 'minute' | 'second') => {
+  const inputRef = e.target as HTMLInputElement
+  let value = inputRef.value
+  const isNumber = /^(\d)+$/.test(value)
+  if (isNumber) {
+    if (type === 'second' && +value >= 60) value = '59'
+    time.value = type === 'minute' ? (+value * 60 + second.value) : (+value + minute.value * 60)
+  }
+  else inputRef.value = type === 'minute' ? fillDigit(minute.value, 2) : fillDigit(second.value, 2)
+}
+</script>
+
+<style lang="scss" scoped>
+.countdown-timer {
+  user-select: none;
+}
+.header {
+  height: 16px;
+  font-size: 13px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+
+  .text-btn {
+    margin-right: 8px;
+    cursor: pointer;
+
+    &:hover, &.active {
+      color: $themeColor;
+    }
+  }
+}
+.content {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 5px;
+}
+.timer {
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  background-color: rgba($color: $themeColor, $alpha: .05);
+  overflow: hidden;
+
+  input {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    outline: 0;
+    background-color: transparent;
+    text-align: center;
+    font-size: 22px;
+  }
+}
+.colon {
+  height: 54px;
+  line-height: 54px;
+  font-size: 22px;
+}
+.icon-btn {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.pause, .play {
+  font-size: 17px;
+}
+.reset {
+  font-size: 12px;
+}
+.close-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 10px;
+  line-height: 1;
+  cursor: pointer;
+}
+</style>

src/views/Screen/CountdownTimer.vue

@@ -1,58 +1,75 @@
 <template>
   <MoveablePanel 
     class="countdown-timer" 
-    :width="180"
-    :height="110"
+    :width="250"
+    :height="170"
     :left="left" 
     :top="top"
   >
-    <div class="header">
-      <span class="text-btn" @click="toggle()">{{ inTiming ? '暂停' : '开始'}}</span>
-      <span class="text-btn" @click="reset()">重置</span>
-      <span class="text-btn" @click="toggleCountdown()" :class="{ 'active': isCountdown }">倒计时</span>
-    </div>
-    <div class="content">
-      <div class="timer">
-        <input 
-          type="text"
-          :value="fillDigit(minute, 2)"
-          :maxlength="3" :disabled="inputEditable"
-          @mousedown.stop 
-          @blur="$event => changeTime($event, 'minute')"
-          @keydown.stop
-          @keydown.enter.stop="$event => changeTime($event, 'minute')"
-        >
-      </div>
-      <div class="colon">:</div>
-      <div class="timer">
-        <input 
-          type="text"
-          :value="fillDigit(second, 2)"
-          :maxlength="3" :disabled="inputEditable"
-          @mousedown.stop 
-          @blur="$event => changeTime($event, 'second')"
-          @keydown.stop
-          @keydown.enter.stop="$event => changeTime($event, 'second')"
-        >
+    <div class="panel-body">
+      <div class="row time-row">
+        <div class="time-box">
+          <input 
+            ref="hourInputRef"
+            type="number" 
+            class="digit-input" 
+            v-model.number="hourInput" 
+            @blur="handleBlur"
+            @click="focusedInput = 'hour'"
+            @focus="handleFocus('hour')"
+            @keyup.enter="handleEnter"
+            min="0"
+          />
+          <span class="colon">:</span>
+          <input 
+            ref="minuteInputRef"
+            type="number" 
+            class="digit-input" 
+            v-model.number="minuteInput" 
+            @blur="handleBlur"
+            @click="focusedInput = 'minute'"
+            @focus="handleFocus('minute')"
+            @keyup.enter="handleEnter"
+            min="0"
+            max="59"
+          />
+          <span class="colon">:</span>
+          <input 
+            ref="secondInputRef"
+            type="number" 
+            class="digit-input" 
+            v-model.number="secondInput" 
+            @blur="handleBlur"
+            @click="focusedInput = 'second'"
+            @focus="handleFocus('second')"
+            @keyup.enter="handleEnter"
+            min="0"
+            max="59"
+          />
+        </div>
+        <div class="side-controls">
+          <button class="square-btn" @click="increment()">+</button>
+          <button class="square-btn" @click="decrement()" :disabled="time <= 0">−</button>
+        </div>
       </div>
+      <div class="divider"></div>
+      <button class="primary-btn" @click="toggle()">{{ inTiming ? '暂停' : '开始计时' }}</button>
     </div>
-
-    <div class="close-btn" @click="emit('close')"><IconClose class="icon" /></div>
+    <!-- <div class="close-btn" @click="emit('close')"><IconClose class="icon" /></div> -->
   </MoveablePanel>
 </template>
 
 <script lang="ts" setup>
-import { computed, onUnmounted, ref } from 'vue'
-import { fillDigit } from '@/utils/common'
+import { onUnmounted, ref, watch } from 'vue'
 
-import MoveablePanel from '@/components/MoveablePanel.vue'
+import MoveablePanel from '@/components/MoveablePanel2.vue'
 
 withDefaults(defineProps<{
   left?: number
   top?: number
 }>(), {
-  left: 5,
-  top: 5,
+  left: -200,
+  top: -100,
 })
 
 const emit = defineEmits<{
@@ -62,18 +79,95 @@ const emit = defineEmits<{
   (event: 'timer-reset'): void
   (event: 'timer-stop'): void
   (event: 'timer-finish'): void
+  (event: 'timer-update', payload: { durationSec: number }): void
 }>()
 
 const timer = ref<number | null>(null)
 const inTiming = ref(false)
-const isCountdown = ref(false)
-const time = ref(0)
-const minute = computed(() => Math.floor(time.value / 60))
-const second = computed(() => time.value % 60)
+// 仅倒计时模式，默认 03:00:00
+const time = ref(3 * 60 * 60)
 
-const inputEditable = computed(() => {
-  return !isCountdown.value || inTiming.value
-})
+// 可编辑的时分秒输入值
+const hourInput = ref(3)
+const minuteInput = ref(0)
+const secondInput = ref(0)
+
+// 输入框引用
+const hourInputRef = ref<HTMLInputElement | null>(null)
+const minuteInputRef = ref<HTMLInputElement | null>(null)
+const secondInputRef = ref<HTMLInputElement | null>(null)
+
+// 当前聚焦的输入框类型：'hour' | 'minute' | 'second' | null
+const focusedInput = ref<'hour' | 'minute' | 'second' | null>(null)
+// 当前正在编辑的输入框（有焦点）
+const editingInput = ref<'hour' | 'minute' | 'second' | null>(null)
+
+// 从 time 同步到输入框（如果输入框没有被编辑）
+watch(time, (newTime) => {
+  if (editingInput.value !== 'hour') {
+    hourInput.value = Math.floor(newTime / 3600)
+  }
+  if (editingInput.value !== 'minute') {
+    minuteInput.value = Math.floor((newTime % 3600) / 60)
+  }
+  if (editingInput.value !== 'second') {
+    secondInput.value = newTime % 60
+  }
+}, { immediate: true })
+
+// 处理输入框获得焦点
+const handleFocus = (type: 'hour' | 'minute' | 'second') => {
+  focusedInput.value = type
+  editingInput.value = type
+}
+
+// 处理输入框失焦
+const handleBlur = () => {
+  editingInput.value = null
+  updateTimeFromInputs()
+  // 不清除选中状态，保持用户选择的输入框，直到用户点击其他输入框
+}
+
+// 处理回车键
+const handleEnter = () => {
+  if (editingInput.value) {
+    editingInput.value = null
+    updateTimeFromInputs()
+    // 失焦当前输入框
+    if (hourInputRef.value && document.activeElement === hourInputRef.value) {
+      hourInputRef.value.blur()
+    }
+    else if (minuteInputRef.value && document.activeElement === minuteInputRef.value) {
+      minuteInputRef.value.blur()
+    }
+    else if (secondInputRef.value && document.activeElement === secondInputRef.value) {
+      secondInputRef.value.blur()
+    }
+  }
+}
+
+// 从输入框更新 time 值
+const updateTimeFromInputs = () => {
+  // 验证并限制输入范围
+  const h = Math.max(0, hourInput.value || 0)
+  const m = Math.max(0, Math.min(59, minuteInput.value || 0))
+  const s = Math.max(0, Math.min(59, secondInput.value || 0))
+  
+  // 更新输入值（确保显示正确）
+  hourInput.value = h
+  minuteInput.value = m
+  secondInput.value = s
+  
+  // 计算总秒数（不限制最大时间）
+  const newTime = h * 3600 + m * 60 + s
+  const oldTime = time.value
+  time.value = newTime
+  
+  // 如果正在计时且时间发生变化，重新开始计时
+  if (inTiming.value && newTime !== oldTime) {
+    restart()
+  }
+}
 
 const clearTimer = () => {
   if (timer.value !== null) {
@@ -89,40 +183,43 @@ const pause = () => {
   emit('timer-pause', { pausedAt: new Date().toISOString() })
 }
 
-const reset = () => {
-  clearTimer()
-  inTiming.value = false
-  
-  if (isCountdown.value) time.value = 600
-  else time.value = 0
-  emit('timer-reset')
-}
-
 const start = () => {
   clearTimer()
 
-  if (isCountdown.value) {
-    timer.value = window.setInterval(() => {
-      time.value = time.value - 1
-
-      if (time.value <= 0) {
-        time.value = 0
-        clearTimer()
-        inTiming.value = false
-        emit('timer-finish')
-      }
-    }, 1000)
-  }
-  else {
-    timer.value = window.setInterval(() => {
-      time.value = time.value + 1
+  // 倒计时
+  timer.value = window.setInterval(() => {
+    time.value = time.value - 1
 
-      if (time.value > 36000) pause()
-    }, 1000)
-  }
+    if (time.value <= 0) {
+      time.value = 0
+      clearTimer()
+      inTiming.value = false
+      emit('timer-finish')
+    }
+  }, 1000)
 
   inTiming.value = true
-  emit('timer-start', { isCountdown: isCountdown.value, startAt: new Date().toISOString(), durationSec: isCountdown.value ? time.value : undefined })
+  emit('timer-start', { isCountdown: true, startAt: new Date().toISOString(), durationSec: time.value })
+}
+
+// 重新开始计时（用于时间更新时重置）
+const restart = () => {
+  if (!inTiming.value) return
+  clearTimer()
+  
+  // 倒计时
+  timer.value = window.setInterval(() => {
+    time.value = time.value - 1
+
+    if (time.value <= 0) {
+      time.value = 0
+      clearTimer()
+      inTiming.value = false
+      emit('timer-finish')
+    }
+  }, 1000)
+  
+  emit('timer-start', { isCountdown: true, startAt: new Date().toISOString(), durationSec: time.value })
 }
 
 const toggle = () => {
@@ -130,87 +227,197 @@ const toggle = () => {
   else start()
 }
 
-const toggleCountdown = () => {
-  isCountdown.value = !isCountdown.value
-  reset()
-}
-
 onUnmounted(() => {
   emit('timer-stop')
 })
 
-const changeTime = (e: FocusEvent | KeyboardEvent, type: 'minute' | 'second') => {
-  const inputRef = e.target as HTMLInputElement
-  let value = inputRef.value
-  const isNumber = /^(\d)+$/.test(value)
-  if (isNumber) {
-    if (type === 'second' && +value >= 60) value = '59'
-    time.value = type === 'minute' ? (+value * 60 + second.value) : (+value + minute.value * 60)
+// 根据当前聚焦的输入框增加时间（默认操作秒）
+const increment = () => {
+  const currentFocus = focusedInput.value || 'second' // 默认操作秒
+  
+  if (currentFocus === 'hour') {
+    hourInput.value = Math.max(0, (hourInput.value || 0) + 1)
+  }
+  else if (currentFocus === 'minute') {
+    const newMinute = (minuteInput.value || 0) + 1
+    if (newMinute > 59) {
+      minuteInput.value = 0
+      hourInput.value = Math.max(0, (hourInput.value || 0) + 1)
+    }
+    else {
+      minuteInput.value = newMinute
+    }
+  }
+  else {
+    // 默认操作秒
+    const newSecond = (secondInput.value || 0) + 1
+    if (newSecond > 59) {
+      secondInput.value = 0
+      const newMinute = (minuteInput.value || 0) + 1
+      if (newMinute > 59) {
+        minuteInput.value = 0
+        hourInput.value = Math.max(0, (hourInput.value || 0) + 1)
+      }
+      else {
+        minuteInput.value = newMinute
+      }
+    }
+    else {
+      secondInput.value = newSecond
+    }
   }
-  else inputRef.value = type === 'minute' ? fillDigit(minute.value, 2) : fillDigit(second.value, 2)
+  
+  // 更新总时间
+  updateTimeFromInputs()
+}
+
+// 根据当前聚焦的输入框减少时间（默认操作秒）
+const decrement = () => {
+  const currentFocus = focusedInput.value || 'second' // 默认操作秒
+  
+  if (currentFocus === 'hour') {
+    hourInput.value = Math.max(0, (hourInput.value || 0) - 1)
+  }
+  else if (currentFocus === 'minute') {
+    const newMinute = (minuteInput.value || 0) - 1
+    if (newMinute < 0) {
+      if (hourInput.value > 0) {
+        minuteInput.value = 59
+        hourInput.value = Math.max(0, (hourInput.value || 0) - 1)
+      }
+      else {
+        minuteInput.value = 0
+      }
+    }
+    else {
+      minuteInput.value = newMinute
+    }
+  }
+  else {
+    // 默认操作秒
+    const newSecond = (secondInput.value || 0) - 1
+    if (newSecond < 0) {
+      if (minuteInput.value > 0 || hourInput.value > 0) {
+        secondInput.value = 59
+        const newMinute = (minuteInput.value || 0) - 1
+        if (newMinute < 0) {
+          if (hourInput.value > 0) {
+            minuteInput.value = 59
+            hourInput.value = Math.max(0, (hourInput.value || 0) - 1)
+          }
+          else {
+            minuteInput.value = 0
+          }
+        }
+        else {
+          minuteInput.value = newMinute
+        }
+      }
+      else {
+        secondInput.value = 0
+      }
+    }
+    else {
+      secondInput.value = newSecond
+    }
+  }
+  
+  // 更新总时间
+  updateTimeFromInputs()
 }
 </script>
 
 <style lang="scss" scoped>
 .countdown-timer {
   user-select: none;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+  /* padding: 14px; */
 }
-.header {
-  height: 16px;
-  font-size: 13px;
-  margin-bottom: 16px;
+.panel-body {
   display: flex;
-  align-items: center;
-
-  .text-btn {
-    margin-right: 8px;
-    cursor: pointer;
-
-    &:hover, &.active {
-      color: $themeColor;
-    }
-  }
+  flex-direction: column;
+  gap: 12px;
 }
-.content {
+.time-row {
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  padding: 0 5px;
-}
-.timer {
-  width: 54px;
-  height: 54px;
-  border-radius: 50%;
-  background-color: rgba($color: $themeColor, $alpha: .05);
-  overflow: hidden;
-
-  input {
-    width: 100%;
-    height: 100%;
-    border: 0;
-    outline: 0;
-    background-color: transparent;
-    text-align: center;
-    font-size: 22px;
-  }
 }
 .colon {
-  height: 54px;
-  line-height: 54px;
-  font-size: 22px;
+  margin: 0 6px;
+  color: #fff;
 }
-.icon-btn {
-  width: 20px;
-  height: 20px;
+.time-box {
   display: flex;
-  justify-content: center;
-  align-items: center;
+  align-items: baseline;
+}
+.digit-input {
+  width: 50px;
+  color: #fff;
+  font-size: 40px;
+  font-weight: 700;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  background: transparent;
+  border: none;
+  outline: none;
+  text-align: center;
+  padding: 0;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.digit-input::-webkit-outer-spin-button,
+.digit-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+.digit-input:disabled {
+  opacity: 1;
+  cursor: not-allowed;
+}
+.digit-input:focus {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+.side-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.square-btn {
+  width: 36px;
+  height: 32px;
+  border: 0;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.18);
+  color: #fff;
+  font-size: 16px;
   cursor: pointer;
 }
-.pause, .play {
-  font-size: 17px;
+.square-btn:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+.divider {
+  height: 1px;
+  background: rgba(255, 255, 255, 0.35);
+  margin: 2px 0;
+}
+.primary-btn {
+  width: 100%;
+  height: 44px;
+  border: 0;
+  border-radius: 8px;
+  background: #ffcc00;
+  color: #333;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
 }
-.reset {
-  font-size: 12px;
+.primary-btn:hover {
+  filter: brightness(0.98);
 }
 .close-btn {
   position: absolute;
@@ -219,5 +426,6 @@ const changeTime = (e: FocusEvent | KeyboardEvent, type: 'minute' | 'second') =>
   padding: 10px;
   line-height: 1;
   cursor: pointer;
+  color: #fff;
 }
 </style>

src/views/Student/index.vue

@@ -164,6 +164,7 @@
           @timer-reset="onTimerReset"
           @timer-stop="onTimerStop"
           @timer-finish="onTimerFinish"
+          @timer-update="onTimerUpdate"
         />
 
         <div v-if="isFullscreen && (!isFollowModeActive || props.type == '1')" class="tools-right" :class="{ 'visible': rightToolsVisible }"
@@ -2475,6 +2476,9 @@ const getMessages = (msgObj: any) => {
   if (msgObj.type === 'timer_finish' && msgObj.courseid === props.courseid) {
     applyTimerFinish()
   }
+  if (msgObj.type === 'timer_update' && msgObj.courseid === props.courseid) {
+    applyTimerUpdate(msgObj.payload)
+  }
 
   // 激光笔：老师广播的开关
   if (props.type == '2' && msgObj.type === 'laser_toggle' && msgObj.courseid === props.courseid) {
@@ -3029,6 +3033,43 @@ const onTimerFinish = () => {
     setTimerState({ ...snap, status: 'finished', finished: true, stopped: true, remainingBaseSec: 0 })
   }
 }
+const onTimerUpdate = (payload: { durationSec: number }) => {
+  if (isCreator.value && timerIndicator.value.visible && timerIndicator.value.isCountdown) {
+    // 重新设置开始时间，重置整个计时
+    const newStartAt = new Date().toISOString()
+    
+    // 更新本地状态
+    timerIndicator.value.startAt = newStartAt
+    timerIndicator.value.durationSec = payload.durationSec
+    timerIndicator.value.remainingSec = payload.durationSec
+    timerIndicator.value.finished = false
+    
+    // 重新开始本地计时
+    startLocalTick(true)
+    
+    // 更新 YMap 状态
+    const snap = getTimerState()
+    setTimerState({
+      ...snap,
+      status: 'running',
+      startAt: newStartAt,
+      durationSec: payload.durationSec,
+      remainingBaseSec: payload.durationSec,
+      finished: false,
+    })
+    
+    // 发送消息通知其他用户（使用 timer_start 消息重新开始计时）
+    sendMessage({ 
+      type: 'timer_start', 
+      courseid: props.courseid, 
+      payload: { 
+        isCountdown: true, 
+        startAt: newStartAt, 
+        durationSec: payload.durationSec 
+      } 
+    })
+  }
+}
 
 // 消息应用（任意端）
 const applyTimerStart = (payload: { isCountdown: boolean; startAt: string; durationSec?: number }) => {
@@ -3081,6 +3122,20 @@ const applyTimerFinish = () => {
     timerInterval.value = null
   }
 }
+const applyTimerUpdate = (payload: { durationSec: number; startAt?: string }) => {
+  if (timerIndicator.value.visible && timerIndicator.value.isCountdown) {
+    const newStartAt = payload.startAt || new Date().toISOString()
+    
+    // 更新状态
+    timerIndicator.value.startAt = newStartAt
+    timerIndicator.value.durationSec = payload.durationSec
+    timerIndicator.value.remainingSec = payload.durationSec
+    timerIndicator.value.finished = false
+    
+    // 重新开始本地计时
+    startLocalTick(true)
+  }
+}
 
 // 应用激光笔共享状态（任意端）
 const applyLaserStateSnapshot = (snap: any) => {