feat: 画笔添加黑板模式

src/components/WritingBoard.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="writing-board" ref="writingBoardRef">
+    <div class="blackboard" v-if="blackboard"></div>
+
     <canvas class="canvas" ref="canvasRef"
       @mousedown="$event => handleMousedown($event)"
       @mousemove="$event => handleMousemove($event)"
@@ -51,6 +53,10 @@ export default defineComponent({
       type: String as PropType<'pen' | 'eraser'>,
       default: 'pen',
     },
+    blackboard: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
     let ctx: CanvasRenderingContext2D | null = null
@@ -255,6 +261,18 @@ export default defineComponent({
   z-index: 8;
   cursor: none;
 }
+.blackboard {
+  width: 100%;
+  height: 100%;
+  background-color: #0f392b;
+}
+.canvas {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
 .eraser, .pen {
   pointer-events: none;
   position: fixed;

src/views/Screen/WritingBoardTool.vue

@@ -4,6 +4,7 @@
       <WritingBoard 
         ref="writingBoardRef" 
         :color="writingBoardColor" 
+        :blackboard="blackboard" 
         :model="writingBoardModel"
       />
     </teleport>
@@ -18,6 +19,9 @@
       <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" 
@@ -50,6 +54,7 @@ export default defineComponent({
     const writingBoardRef = ref()
     const writingBoardColor = ref('#e2534d')
     const writingBoardModel = ref('pen')
+    const blackboard = ref(false)
 
     // 切换到画笔状态
     const changePen = () => {
@@ -82,6 +87,7 @@ export default defineComponent({
       writingBoardColors,
       writingBoardColor,
       writingBoardModel,
+      blackboard,
       changePen,
       changeEraser,
       clearCanvas,