From 42541f678d95da4d09e5f841e62062dad09e7e0f Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Wed, 5 Oct 2022 18:47:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=AE=A1=E6=97=B6?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=EF=BC=88#156=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                           |   2 +
 src/plugins/icon.ts                 |   2 +
 src/views/Screen/BaseView.vue       |  10 ++
 src/views/Screen/CountdownTimer.vue | 204 ++++++++++++++++++++++++++++
 src/views/Screen/PresenterView.vue  |   9 ++
 5 files changed, 227 insertions(+)
 create mode 100644 src/views/Screen/CountdownTimer.vue

diff --git a/README.md b/README.md
index e2e666fa..935eb93e 100644
--- a/README.md
+++ b/README.md
@@ -61,6 +61,7 @@ npm run serve
 - 幻灯片模板
 - 翻页动画
 - 元素动画（入场、退场、强调）
+- 选择面板（隐藏元素、层级排序、元素命名）
 ### 幻灯片元素编辑
 - 元素添加、删除
 - 元素复制粘贴
@@ -140,6 +141,7 @@ npm run serve
 ### 幻灯片放映
 - 全部幻灯片预览
 - 画笔、黑板工具
+- 计时器工具
 - 激光笔
 - 自动放映
 - 演讲者视图
diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index cdbabe6b..a123a83b 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -111,6 +111,7 @@ import {
   FormatBrush,
   PreviewOpen,
   PreviewClose,
+  StopwatchStart,
 } from '@icon-park/vue-next'
 
 export const icons = {
@@ -223,6 +224,7 @@ export const icons = {
   IconFormatBrush: FormatBrush,
   IconPreviewOpen: PreviewOpen,
   IconPreviewClose: PreviewClose,
+  IconStopwatchStart: StopwatchStart,
 }
 
 export default {
diff --git a/src/views/Screen/BaseView.vue b/src/views/Screen/BaseView.vue
index e2682557..7fe4ef9f 100644
--- a/src/views/Screen/BaseView.vue
+++ b/src/views/Screen/BaseView.vue
@@ -25,6 +25,11 @@
       @close="writingBoardToolVisible = false" 
     />
 
+    <CountdownTimer 
+      v-if="timerlVisible" 
+      @close="timerlVisible = false" 
+    />
+
     <div class="tools-left">
       <IconLeftTwo class="tool-btn" theme="two-tone" :fill="['#111', '#fff']" @click="execPrev()" />
       <IconRightTwo class="tool-btn" theme="two-tone" :fill="['#111', '#fff']" @click="execNext()" />
@@ -43,6 +48,9 @@
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="激光笔">
           <IconMagic class="tool-btn" :class="{ 'active': laserPen }" @click="laserPen = !laserPen" />
         </Tooltip>
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="计时器">
+          <IconStopwatchStart class="tool-btn" :class="{ 'active': timerlVisible }" @click="timerlVisible = !timerlVisible" />
+        </Tooltip>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="演讲者视图">
           <IconListView class="tool-btn" @click="changeViewMode('presenter')" />
         </Tooltip>
@@ -72,6 +80,7 @@ import useFullscreen from './hooks/useFullscreen'
 import ScreenSlideList from './ScreenSlideList.vue'
 import SlideThumbnails from './SlideThumbnails.vue'
 import WritingBoardTool from './WritingBoardTool.vue'
+import CountdownTimer from './CountdownTimer.vue'
 
 const props = defineProps({
   changeViewMode: {
@@ -104,6 +113,7 @@ const { fullscreenState, manualExitFullscreen } = useFullscreen()
 
 const rightToolsVisible = ref(false)
 const writingBoardToolVisible = ref(false)
+const timerlVisible = ref(false)
 const slideThumbnailModelVisible = ref(false)
 const laserPen = ref(false)
 
diff --git a/src/views/Screen/CountdownTimer.vue b/src/views/Screen/CountdownTimer.vue
new file mode 100644
index 00000000..199f6d1d
--- /dev/null
+++ b/src/views/Screen/CountdownTimer.vue
@@ -0,0 +1,204 @@
+<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'
+
+defineProps({
+  left: {
+    type: Number,
+    default: 5,
+  },
+  top: {
+    type: Number,
+    default: 5,
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'close'): 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) clearInterval(timer.value)
+}
+
+onUnmounted(clearTimer)
+
+const pause = () => {
+  clearTimer()
+  inTiming.value = false
+}
+
+const reset = () => {
+  clearTimer()
+  inTiming.value = false
+  
+  if (isCountdown.value) time.value = 600
+  else time.value = 0
+}
+
+const start = () => {
+  clearTimer()
+
+  if (isCountdown.value) {
+    timer.value = setInterval(() => {
+      time.value = time.value - 1
+
+      if (time.value <= 0) reset()
+    }, 1000)
+  }
+  else {
+    timer.value = setInterval(() => {
+      time.value = time.value + 1
+
+      if (time.value > 36000) pause()
+    }, 1000)
+  }
+
+  inTiming.value = true
+}
+
+const toggle = () => {
+  if (inTiming.value) pause()
+  else start()
+}
+
+const toggleCountdown = () => {
+  isCountdown.value = !isCountdown.value
+  reset()
+}
+
+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);
+  font-size: 22px;
+  overflow: hidden;
+
+  input {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    outline: 0;
+    background-color: transparent;
+    text-align: center;
+  }
+}
+.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;
+  cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Screen/PresenterView.vue b/src/views/Screen/PresenterView.vue
index 1c9fa711..e7db8022 100644
--- a/src/views/Screen/PresenterView.vue
+++ b/src/views/Screen/PresenterView.vue
@@ -4,6 +4,7 @@
       <div class="tool-btn" @click="changeViewMode('base')"><IconListView class="tool-icon" /><span>普通视图</span></div>
       <div class="tool-btn" :class="{ 'active': writingBoardToolVisible }" @click="writingBoardToolVisible = !writingBoardToolVisible"><IconWrite class="tool-icon" /><span>画笔</span></div>
       <div class="tool-btn" :class="{ 'active': laserPen }" @click="laserPen = !laserPen"><IconMagic class="tool-icon" /><span>激光笔</span></div>
+      <div class="tool-btn" :class="{ 'active': timerlVisible }" @click="timerlVisible = !timerlVisible"><IconStopwatchStart class="tool-icon" /><span>计时器</span></div>
       <div class="tool-btn" @click="() => fullscreenState ? manualExitFullscreen() : enterFullscreen()">
         <IconOffScreenOne class="tool-icon" v-if="fullscreenState" />
         <IconOffScreenOne class="tool-icon" v-else />
@@ -38,6 +39,12 @@
           v-if="writingBoardToolVisible" 
           @close="writingBoardToolVisible = false" 
         />
+
+        <CountdownTimer 
+          v-if="timerlVisible" 
+          :left="75" 
+          @close="timerlVisible = false" 
+        />
       </div>
       <div class="thumbnails"
         ref="thumbnailsRef"
@@ -85,6 +92,7 @@ import useFullscreen from './hooks/useFullscreen'
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import ScreenSlideList from './ScreenSlideList.vue'
 import WritingBoardTool from './WritingBoardTool.vue'
+import CountdownTimer from './CountdownTimer.vue'
 
 const props = defineProps({
   changeViewMode: {
@@ -98,6 +106,7 @@ const { slides, slideIndex, viewportRatio, currentSlide } = storeToRefs(useSlide
 const slideListWrapRef = ref<HTMLElement>()
 const thumbnailsRef = ref<HTMLElement>()
 const writingBoardToolVisible = ref(false)
+const timerlVisible = ref(false)
 const laserPen = ref(false)
 
 const {