From 09acb9a2d58b0fd1dc97d788c2c4c39a82b96e05 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sat, 1 Oct 2022 10:56:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=BB=E7=AC=94=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=8B=96=E6=8B=BD=E7=A7=BB=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MoveablePanel.vue      | 16 +++--
 src/views/Screen/PresenterView.vue    |  6 +-
 src/views/Screen/WritingBoardTool.vue | 96 +++++++++++++++------------
 3 files changed, 67 insertions(+), 51 deletions(-)

diff --git a/src/components/MoveablePanel.vue b/src/components/MoveablePanel.vue
index caa5e086..2743b703 100644
--- a/src/components/MoveablePanel.vue
+++ b/src/components/MoveablePanel.vue
@@ -8,12 +8,18 @@
       top: y + 'px',
     }"
   >
-    <div class="header" @mousedown="$event => startMove($event)">
-      <div class="title">{{title}}</div>
-      <div class="close-btn" @click="emit('close')"><IconClose /></div>
-    </div>
+    <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">
+      <div class="content">
+        <slot></slot>
+      </div>
+    </template>
+
+    <div v-else class="content" @mousedown="$event => startMove($event)">
       <slot></slot>
     </div>
   </div>
diff --git a/src/views/Screen/PresenterView.vue b/src/views/Screen/PresenterView.vue
index 306067fd..1c9fa711 100644
--- a/src/views/Screen/PresenterView.vue
+++ b/src/views/Screen/PresenterView.vue
@@ -33,10 +33,8 @@
         <WritingBoardTool 
           :slideWidth="slideWidth"
           :slideHeight="slideHeight"
-          :position="{
-            left: '75px',
-            top: '5px',
-          }"
+          :left="75"
+          :top="5"
           v-if="writingBoardToolVisible" 
           @close="writingBoardToolVisible = false" 
         />
diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue
index a66a680f..7f7b7040 100644
--- a/src/views/Screen/WritingBoardTool.vue
+++ b/src/views/Screen/WritingBoardTool.vue
@@ -15,41 +15,51 @@
       />
     </div>
 
-    <div class="tools" :style="position">
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="画笔">
-        <div class="btn" :class="{ 'active': writingBoardModel === 'pen' }" @click="changeModel('pen')"><IconWrite class="icon" /></div>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="荧光笔">
-        <div class="btn" :class="{ 'active': writingBoardModel === 'mark' }" @click="changeModel('mark')"><IconHighLight class="icon" /></div>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="橡皮擦">
-        <div class="btn" :class="{ 'active': writingBoardModel === 'eraser' }" @click="changeModel('eraser')"><IconErase class="icon" /></div>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="清除墨迹">
-        <div class="btn" @click="clearCanvas()"><IconClear class="icon" /></div>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="黑板">
-        <div class="btn" :class="{ 'active': blackboard }" @click="blackboard = !blackboard"><IconFill class="icon" /></div>
-      </Tooltip>
-      <div class="colors">
-        <div 
-          class="color" 
-          :class="{ 'active': color === writingBoardColor }"
-          v-for="color in writingBoardColors"
-          :key="color"
-          :style="{ backgroundColor: color }"
-          @click="changeColor(color)"
-        ></div>
+    <MoveablePanel 
+      class="tools-panel" 
+      :width="520" 
+      :height="50"
+      :left="left" 
+      :top="top"
+    >
+      <div class="tools">
+        <div class="tool-content">
+          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="画笔">
+            <div class="btn" :class="{ 'active': writingBoardModel === 'pen' }" @click="changeModel('pen')"><IconWrite class="icon" /></div>
+          </Tooltip>
+          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="荧光笔">
+            <div class="btn" :class="{ 'active': writingBoardModel === 'mark' }" @click="changeModel('mark')"><IconHighLight class="icon" /></div>
+          </Tooltip>
+          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="橡皮擦">
+            <div class="btn" :class="{ 'active': writingBoardModel === 'eraser' }" @click="changeModel('eraser')"><IconErase class="icon" /></div>
+          </Tooltip>
+          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="清除墨迹">
+            <div class="btn" @click="clearCanvas()"><IconClear class="icon" /></div>
+          </Tooltip>
+          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="黑板">
+            <div class="btn" :class="{ 'active': blackboard }" @click="blackboard = !blackboard"><IconFill class="icon" /></div>
+          </Tooltip>
+          <div class="colors">
+            <div 
+              class="color" 
+              :class="{ 'active': color === writingBoardColor }"
+              v-for="color in writingBoardColors"
+              :key="color"
+              :style="{ backgroundColor: color }"
+              @click="changeColor(color)"
+            ></div>
+          </div>
+        </div>
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="关闭画笔">
+          <div class="btn" @click="closeWritingBoard()"><IconClose class="icon" /></div>
+        </Tooltip>
       </div>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="关闭画笔">
-        <div class="btn" @click="closeWritingBoard()"><IconClose class="icon" /></div>
-      </Tooltip>
-    </div>
+    </MoveablePanel>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { PropType, ref, StyleValue, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { db } from '@/utils/database'
@@ -68,12 +78,13 @@ defineProps({
     type: Number,
     required: true,
   },
-  position: {
-    type: Object as PropType<StyleValue>,
-    default: () => ({
-      right: '5px',
-      bottom: '5px',
-    })
+  left: {
+    type: Number,
+    default: -5,
+  },
+  top: {
+    type: Number,
+    default: -5,
   },
 })
 
@@ -141,12 +152,13 @@ const hanldeWritingEnd = () => {
   }
 
   .tools {
-    height: 50px;
-    position: fixed;
-    z-index: 11;
-    padding: 12px;
-    background-color: #eee;
-    border-radius: $borderRadius;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .tool-content {
     display: flex;
     align-items: center;
   }