feat: 画笔工具支持拖拽移动

src/components/MoveablePanel.vue

@@ -8,12 +8,18 @@
       top: y + 'px',
     }"
   >
-    <div class="header" @mousedown="$event => startMove($event)">
+    <template v-if="title">
-      <div class="title">{{title}}</div>
+      <div class="header" @mousedown="$event => startMove($event)">
-      <div class="close-btn" @click="emit('close')"><IconClose /></div>
+        <div class="title">{{title}}</div>
-    </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>

src/views/Screen/PresenterView.vue

@@ -33,10 +33,8 @@
         <WritingBoardTool 
           :slideWidth="slideWidth"
           :slideHeight="slideHeight"
-          :position="{
+          :left="75"
-            left: '75px',
+          :top="5"
-            top: '5px',
-          }"
           v-if="writingBoardToolVisible" 
           @close="writingBoardToolVisible = false" 
         />

src/views/Screen/WritingBoardTool.vue

@@ -15,41 +15,51 @@
       />
     </div>
 
-    <div class="tools" :style="position">
+    <MoveablePanel 
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="画笔">
+      class="tools-panel" 
-        <div class="btn" :class="{ 'active': writingBoardModel === 'pen' }" @click="changeModel('pen')"><IconWrite class="icon" /></div>
+      :width="520" 
-      </Tooltip>
+      :height="50"
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="荧光笔">
+      :left="left" 
-        <div class="btn" :class="{ 'active': writingBoardModel === 'mark' }" @click="changeModel('mark')"><IconHighLight class="icon" /></div>
+      :top="top"
-      </Tooltip>
+    >
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="橡皮擦">
+      <div class="tools">
-        <div class="btn" :class="{ 'active': writingBoardModel === 'eraser' }" @click="changeModel('eraser')"><IconErase class="icon" /></div>
+        <div class="tool-content">
-      </Tooltip>
+          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="画笔">
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="清除墨迹">
+            <div class="btn" :class="{ 'active': writingBoardModel === 'pen' }" @click="changeModel('pen')"><IconWrite class="icon" /></div>
-        <div class="btn" @click="clearCanvas()"><IconClear class="icon" /></div>
+          </Tooltip>
-      </Tooltip>
+          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="荧光笔">
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="黑板">
+            <div class="btn" :class="{ 'active': writingBoardModel === 'mark' }" @click="changeModel('mark')"><IconHighLight class="icon" /></div>
-        <div class="btn" :class="{ 'active': blackboard }" @click="blackboard = !blackboard"><IconFill class="icon" /></div>
+          </Tooltip>
-      </Tooltip>
+          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="橡皮擦">
-      <div class="colors">
+            <div class="btn" :class="{ 'active': writingBoardModel === 'eraser' }" @click="changeModel('eraser')"><IconErase class="icon" /></div>
-        <div 
+          </Tooltip>
-          class="color" 
+          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="清除墨迹">
-          :class="{ 'active': color === writingBoardColor }"
+            <div class="btn" @click="clearCanvas()"><IconClear class="icon" /></div>
-          v-for="color in writingBoardColors"
+          </Tooltip>
-          :key="color"
+          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="黑板">
-          :style="{ backgroundColor: color }"
+            <div class="btn" :class="{ 'active': blackboard }" @click="blackboard = !blackboard"><IconFill class="icon" /></div>
-          @click="changeColor(color)"
+          </Tooltip>
-        ></div>
+          <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="关闭画笔">
+    </MoveablePanel>
-        <div class="btn" @click="closeWritingBoard()"><IconClose class="icon" /></div>
-      </Tooltip>
-    </div>
   </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: {
+  left: {
-    type: Object as PropType<StyleValue>,
+    type: Number,
-    default: () => ({
+    default: -5,
-      right: '5px',
+  },
-      bottom: '5px',
+  top: {
-    })
+    type: Number,
+    default: -5,
   },
 })
 
@@ -141,12 +152,13 @@ const hanldeWritingEnd = () => {
   }
 
   .tools {
-    height: 50px;
+    width: 100%;
-    position: fixed;
+    height: 100%;
-    z-index: 11;
+    display: flex;
-    padding: 12px;
+    align-items: center;
-    background-color: #eee;
+    justify-content: space-between;
-    border-radius: $borderRadius;
+  }
+  .tool-content {
     display: flex;
     align-items: center;
   }