cbvirtua 1.0.49 → 1.0.51

package/drawingBoard-main/drawingBoard-main/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/drawingBoard-main/drawingBoard-main/src/App.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue';
+import App from './utils/App';
+import { Star } from 'leafer-ui';
+import { INITIAL_HEIGHT, INITIAL_WIDTH } from './utils/Tools';
+import LineSegmentBackgroundColorPlugin from './components/plugins/LineSegmentBackgroundColorPlugin';
+import FIVE_POINTED_STAR_ICON from './assets/wujiaoxing.svg'
+
+const fivePointedStar = {
+  icon: FIVE_POINTED_STAR_ICON,
+  name: 'fivePointedStar',
+  title: '五角星',
+  index: 1,
+  corners: 5,
+  innerRadius: 0.382,
+  fill: 'rgb(50,205,121)',
+  createdFactory(x, y) {
+    return new Star({
+      // 这个 name 需要和 config.toolbar 每一项中的 name 一致，否则 menuPlugins 出不来
+      name: 'fivePointedStar',
+      x,
+      y,
+      width: INITIAL_WIDTH,
+      height: INITIAL_HEIGHT,
+      corners: this.corners,
+      innerRadius: this.innerRadius,
+      fill: this.fill,
+      editable: true,
+    })
+  },
+
+  // 后续可自行扩展
+  menuPlugins: [LineSegmentBackgroundColorPlugin]
+}
+
+onMounted(() =>
+  App.init({
+    domId: 'drawing-board-container',
+    config: {
+      // 增加工具栏组件
+      toolbar: [
+        // 五角星组件
+        fivePointedStar
+      ]
+    },
+    onChange: json => {
+      console.log(json);
+    },
+  })
+);
+
+onUnmounted(() => App.destroy());
+</script>
+
+<template>
+  <div id="drawing-board-container"></div>
+</template>
+
+<style lang="scss" scoped>
+#drawing-board-container {
+  width: 100vw;
+  height: 100vh;
+}
+</style>

package/drawingBoard-main/drawingBoard-main/src/assets/huabi.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="192.48px" viewBox="0 0 1064 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#2c2c2c" d="M33.792 950.6816a53.248 53.248 0 0 0 61.76768 61.72672L372.736 963.1744 1030.22592 305.68448a53.248 53.248 0 0 0 0-75.28448L815.88224 16.05632a53.248 53.248 0 0 0-75.28448 0L83.1488 673.54624 33.792 950.6816zM952.07424 268.0832L372.736 847.33952 199.0656 673.54624 778.24 94.28992l173.79328 173.79328zM309.20704 899.60448l-197.71392 35.10272 35.2256-197.59104 162.48832 162.48832z"  /></svg>

package/drawingBoard-main/drawingBoard-main/src/assets/huabigongju-juxing.svg

@@ -0,0 +1 @@
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#2c2c2c" d="M799.5 179c24.6 0 44.5 20 44.5 44.5v575.9c0 24.6-20 44.5-44.5 44.5h-576c-24.6 0-44.5-20-44.5-44.5V223.5c0-24.6 20-44.5 44.5-44.5h576m0-120h-576C132.7 59 59 132.7 59 223.5v575.9C59 890.3 132.7 964 223.5 964h575.9c90.9 0 164.5-73.7 164.5-164.5v-576C964 132.7 890.3 59 799.5 59z" /></svg>

package/drawingBoard-main/drawingBoard-main/src/assets/huabigongju-tuoyuan.svg

@@ -0,0 +1 @@
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#2c2c2c" d="M512.5 146c47.9 0 94.3 9.4 137.9 27.8 42.2 17.8 80.1 43.4 112.7 76 32.6 32.6 58.2 70.5 76 112.7 18.5 43.6 27.8 90 27.8 138s-9.4 94.3-27.8 138c-17.8 42.2-43.4 80.1-76 112.7-32.6 32.6-70.5 58.2-112.7 76-43.6 18.5-90 27.8-137.9 27.8-47.9 0-94.3-9.4-138-27.8-42.2-17.8-80.1-43.4-112.7-76-32.6-32.6-58.2-70.5-76-112.7-18.5-43.6-27.8-90-27.8-138s9.4-94.3 27.8-138c17.8-42.2 43.4-80.1 76-112.7 32.6-32.6 70.5-58.2 112.7-76 43.7-18.4 90.1-27.8 138-27.8m0-120C250.4 26 38 238.4 38 500.5S250.4 975 512.5 975 987 762.6 987 500.5 774.6 26 512.5 26z" /></svg>

package/drawingBoard-main/drawingBoard-main/src/assets/huabigongju-wenben.svg

@@ -0,0 +1 @@
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#2c2c2c" d="M187.3 81.2h685.5c35.5 0 64.3 28.8 64.3 64.3s-28.8 64.3-64.3 64.3H187.3c-35.5 0-64.3-28.8-64.3-64.3s28.8-64.3 64.3-64.3zM530 124c35.5 0 64.3 28.8 64.3 64.3v728.3c0 35.5-28.8 64.3-64.3 64.3s-64.3-28.8-64.3-64.3V188.3c0-35.5 28.8-64.3 64.3-64.3z" /></svg>

package/drawingBoard-main/drawingBoard-main/src/assets/jiantougongju-hover.svg

@@ -0,0 +1 @@
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#2c2c2c" d="M571.904 196.266667L169.813333 303.900444A63.146667 63.146667 0 1 1 137.102222 181.873778L637.724444 47.729778a113.777778 113.777778 0 0 1 139.377778 80.440889l134.144 500.622222a63.146667 63.146667 0 0 1-122.083555 32.768L681.415111 259.413333 265.102222 980.48a63.203556 63.203556 0 1 1-109.454222-63.203556L571.904 196.209778z"  /></svg>

package/drawingBoard-main/drawingBoard-main/src/assets/layer.svg

@@ -0,0 +1 @@
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#2c2c2c" d="M942.933333 311.466667l-384-192c-25.6-17.066667-55.466667-17.066667-81.066666 0l-384 192c0 4.266667-4.266667 8.533333-8.533334 8.533333-4.266667 17.066667 0 34.133333 12.8 38.4L234.666667 426.666667l-115.2 59.733333c-12.8 8.533333-21.333333 21.333333-21.333334 34.133333 0 12.8 8.533333 29.866667 21.333334 34.133334l98.133333 51.2-98.133333 51.2c-12.8 8.533333-21.333333 21.333333-21.333334 34.133333 0 12.8 8.533333 29.866667 21.333334 34.133333l358.4 179.2c12.8 8.533333 25.6 12.8 38.4 12.8 12.8 0 29.866667-4.266667 42.666666-12.8l358.4-179.2c12.8-8.533333 21.333333-21.333333 21.333334-34.133333 0-12.8-8.533333-29.866667-21.333334-34.133333l-98.133333-51.2 98.133333-51.2c12.8-8.533333 21.333333-21.333333 21.333334-34.133334 0-12.8-8.533333-29.866667-21.333334-34.133333L806.4 426.666667l136.533333-68.266667c4.266667-4.266667 8.533333-4.266667 8.533334-8.533333 4.266667-17.066667 0-34.133333-8.533334-38.4z m-81.066666 379.733333l-328.533334 166.4c-8.533333 4.266667-17.066667 4.266667-25.6 0l-328.533333-166.4 106.666667-55.466667 196.266666 98.133334c12.8 8.533333 25.6 12.8 38.4 12.8 12.8 0 29.866667-4.266667 42.666667-12.8l196.266667-98.133334 102.4 55.466667z m0-170.666667l-106.666667 55.466667-64 29.866667-162.133333 81.066666c-8.533333 4.266667-17.066667 4.266667-25.6 0L341.333333 605.866667l-64-29.866667L170.666667 520.533333l128-64 183.466666 93.866667c25.6 17.066667 55.466667 17.066667 81.066667 0l183.466667-93.866667 115.2 64z" /></svg>

package/drawingBoard-main/drawingBoard-main/src/assets/layer_1.svg

@@ -0,0 +1 @@
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#2c2c2c" d="M81.066667 712.533333l384 192c25.6 17.066667 55.466667 17.066667 81.06666599 0l384.00000001-192c0-4.266667 4.266667-8.533333 8.533334-8.533333 4.266667-17.066667 0-34.133333-12.8-38.4L789.333333 597.333333l115.2-59.733333c12.8-8.533333 21.333333-21.333333 21.333334-34.133333 0-12.8-8.533333-29.866667-21.333334-34.133334l-98.133333-51.2 98.13333301-51.2c12.8-8.533333 21.333333-21.333333 21.33333399-34.133333 0-12.8-8.533333-29.866667-21.333334-34.133333l-358.40000001-179.2c-12.8-8.533333-25.6-12.8-38.39999998-12.8-12.8 0-29.866667 4.266667-42.66666601 12.8l-358.4 179.2c-12.8 8.533333-21.333333 21.333333-21.333334 34.133333 0 12.8 8.533333 29.866667 21.33333399 34.133333l98.13333301 51.2-98.133333 51.2c-12.8 8.533333-21.333333 21.333333-21.333334 34.133334 0 12.8 8.533333 29.866667 21.333334 34.133333L217.59999999 597.333333l-136.53333298 68.266667c-4.266667 4.266667-8.533333 4.266667-8.53333401 8.533333-4.266667 17.066667 0 34.133333 8.533334 38.4z m81.066666-379.733333l328.533334-166.4c8.533333-4.266667 17.066667-4.266667 25.6 0l328.533333 166.4-106.666667 55.466667-196.266666-98.133334c-12.8-8.533333-25.6-12.8-38.4-12.79999999-12.8 0-29.866667 4.266667-42.666667 12.79999999l-196.266667 98.133334-102.4-55.466667z m0 170.666667l106.666667-55.466667 64-29.866667 162.133333-81.066666c8.533333-4.266667 17.066667-4.266667 25.6 0L682.666667 418.133333l64 29.866667L853.333333 503.466667l-128 64-183.466666-93.866667c-25.6-17.066667-55.466667-17.066667-81.066667 0l-183.466667 93.866667-115.2-64z" /></svg>

package/drawingBoard-main/drawingBoard-main/src/assets/tuceng.svg

@@ -0,0 +1 @@
+<svg class="icon" width="200px" height="176.55px" viewBox="0 0 1160 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#2c2c2c" d="M75.093333 6.826667h791.893334c40.96 0 68.266667 27.306667 68.266666 68.266666v648.533334c0 40.96-27.306667 68.266667-68.266666 68.266666H75.093333c-40.96 0-68.266667-27.306667-68.266666-68.266666V75.093333c0-34.133333 34.133333-68.266667 68.266666-68.266666z"  /><path fill="#2c2c2c" d="M1044.48 1010.346667H402.773333c-40.96 0-68.266667-27.306667-68.266666-68.266667s27.306667-68.266667 68.266666-68.266667h614.4V402.773333c0-40.96 27.306667-68.266667 68.266667-68.266666s68.266667 27.306667 68.266667 68.266666v498.346667c0 61.44-47.786667 109.226667-109.226667 109.226667z"  /></svg>

package/drawingBoard-main/drawingBoard-main/src/assets/tuceng_1.svg

@@ -0,0 +1 @@
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#2c2c2c" d="M875.76 751.32H771.98c-18.75 0-33.96-15.2-33.96-33.96s15.2-33.96 33.96-33.96h103.78c8.3 0 15.31-8.21 15.31-17.93V190.71c0-9.72-7.01-17.93-15.31-17.93H301.29c-8.3 0-15.31 8.21-15.31 17.93v115.93c0 18.75-15.2 33.96-33.96 33.96s-33.96-15.2-33.96-33.96V190.71c0-47.34 37.34-85.85 83.23-85.85h574.47c45.89 0 83.23 38.51 83.23 85.85v474.76c0 47.34-37.34 85.85-83.23 85.85z"  /><path fill="#2c2c2c" d="M722.71 919.14H148.24c-45.89 0-83.23-38.51-83.23-85.85V358.53c0-47.34 37.34-85.85 83.23-85.85h574.47c45.89 0 83.23 38.51 83.23 85.85v474.76c0 47.34-37.34 85.85-83.23 85.85zM148.24 340.6c-8.3 0-15.31 8.21-15.31 17.93v474.76c0 9.72 7.01 17.93 15.31 17.93h574.47c8.3 0 15.31-8.21 15.31-17.93V358.53c0-9.72-7.01-17.93-15.31-17.93H148.24z"  /></svg>

package/drawingBoard-main/drawingBoard-main/src/assets/wujiaoxing.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M959.008 406.016l-308-47.008L512 64 372.992 359.008l-308 47.008 223.008 228-52.992 324L512 805.024l276.992 152.992-52.992-324zM512 740L304 856.992l40-235.008-179.008-182.016 242.016-32 104.992-224 104 224 240.992 34.016L680 622.976l36.992 235.008z" /></svg>

package/drawingBoard-main/drawingBoard-main/src/assets/xiangpigongju.svg

@@ -0,0 +1 @@
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#2c2c2c" d="M668.475077 0L327.561846 340.913231 0 668.475077 355.524923 1024 1024 355.524923 668.475077 0zM103.069538 676.627692l280.300308-280.260923 142.611692 142.572308 101.651693 101.691077-280.300308 280.300308-244.263385-244.263385z m344.65477 265.452308h573.44v78.651077H368.64l79.084308-78.651077z"  /></svg>

package/drawingBoard-main/drawingBoard-main/src/assets/xuanzegongju.svg

@@ -0,0 +1 @@
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#2c2c2c" d="M158.249312 479.384104h355.828639a30.245434 30.245434 0 0 1 29.652387 30.146594v355.828638L926.542649 97.560207z m355.828639 544.615501a32.321101 32.321101 0 0 1-6.91889-0.790731 29.652387 29.652387 0 0 1-23.227703-29.652386V539.677291H30.348685a30.146593 30.146593 0 0 1-13.640098-57.130265L980.213468 3.660982a29.652387 29.652387 0 0 1 40.228405 40.327246l-478.886044 963.208358a29.652387 29.652387 0 0 1-26.88483 16.803019z"  /></svg>

package/drawingBoard-main/drawingBoard-main/src/assets/zhixiangongju.svg

@@ -0,0 +1 @@
+<svg class="icon" width="200px" height="186.69px" viewBox="0 0 1097 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#2c2c2c" d="M1039.945143 98.230857L134.802286 1003.373714l-77.531429-77.604571L962.267429 20.626286z"  /></svg>

package/drawingBoard-main/drawingBoard-main/src/components/plugins/LayerOptions.tsx

@@ -0,0 +1,67 @@
+import { IPluginProps } from 'src/utils/types';
+import Top from '../../assets/layer.svg'
+import Bottom from '../../assets/layer_1.svg'
+import With from '../../assets/tuceng.svg'
+import Next from '../../assets/tuceng_1.svg'
+
+import { ElIcon } from 'element-plus';
+
+const LAYER_LIST = [
+    { icon: Top, title: '置于顶层', type: 'top' },
+    { icon: With, title: '置于上一层', type: 'next' },
+    { icon: Next, title: '置于下一层', type: 'with' },
+    { icon: Bottom, title: '置于底层', type: 'bottom' },
+]
+
+const Index = ({ drawingBoard }: IPluginProps) => {
+    const graphics = drawingBoard.getSelectedGraphics();
+
+    const getActiveLayer = (type) => {
+        const zIndex = graphics.value['zIndex']
+
+        if (zIndex >= 999 && type === 'top') {
+            return 'on'
+        } else if (zIndex <= -999 && type === 'bottom') {
+            return 'on'
+        }
+
+        return ''
+    }
+
+    return (
+        <div className="toolbarMenuLayer">
+            {
+                LAYER_LIST.map(Layer => {
+                    return (
+                        <span
+                            className={getActiveLayer(Layer.type)}
+                            key={Layer.type}
+                            title={Layer.title}
+                            onClick={() => {
+                                switch (Layer.type) {
+                                    case 'top':
+                                        graphics.value['zIndex'] = 999
+                                        break;
+                                    case 'next':
+                                        graphics.value['zIndex'] += 1
+                                        break;
+                                    case 'with':
+                                        graphics.value['zIndex'] -= 1
+                                        break;
+                                    case 'bottom':
+                                        graphics.value['zIndex'] = -999
+                                        break;
+                                }
+                            }}>
+                            <ElIcon>
+                                <Layer.icon />
+                            </ElIcon>
+                        </span>
+                    )
+                })
+            }
+        </div>
+    )
+};
+
+export default Index;

package/drawingBoard-main/drawingBoard-main/src/components/plugins/LineSegmentBackgroundColorPlugin.tsx

@@ -0,0 +1,25 @@
+import { IPluginProps } from '../../utils/types'
+import { ElRow, ElCol, ElColorPicker } from 'element-plus'
+const LineSegmentBackgroundColorPlugin = ({ drawingBoard }: IPluginProps) => {
+    const graphics = drawingBoard.getSelectedGraphics()
+
+    return (
+        <ElRow>
+            <ElCol span={24}>
+                <p class="text">填充颜色</p>
+            </ElCol>
+
+            <ElCol span={24} >
+                <ElColorPicker
+                    show-alpha
+                    modelValue={graphics.value['fill']}
+                    onUpdate:modelValue={(val) => {
+                        graphics.value['fill'] = val
+                    }}
+                />
+            </ElCol>
+        </ElRow >
+    )
+}
+
+export default LineSegmentBackgroundColorPlugin

package/drawingBoard-main/drawingBoard-main/src/components/plugins/LineSegmentColorPlugin.tsx

@@ -0,0 +1,25 @@
+import { ElRow, ElCol, ElColorPicker } from 'element-plus'
+import { IPluginProps } from '../../utils/types'
+const LineSegmentColorPlugin = ({ drawingBoard }: IPluginProps) => {
+    const graphics = drawingBoard.getSelectedGraphics()
+
+    return (
+        <ElRow>
+            <ElCol span={24}>
+                <p class="text">线段颜色</p>
+            </ElCol>
+
+            <ElCol span={24} >
+                <ElColorPicker
+                    show-alpha
+                    modelValue={graphics.value['stroke']}
+                    onUpdate:modelValue={(val) => {
+                        graphics.value['stroke'] = val
+                    }}
+                />
+            </ElCol>
+        </ElRow >
+    )
+}
+
+export default LineSegmentColorPlugin

package/drawingBoard-main/drawingBoard-main/src/components/plugins/LineSegmentSizePlugin.tsx

@@ -0,0 +1,26 @@
+import { IPluginProps } from '../../utils/types'
+import { ElRow, ElCol, ElSlider } from 'element-plus'
+const LineSegmentPlugin = ({ drawingBoard }: IPluginProps) => {
+    const graphics = drawingBoard.getSelectedGraphics()
+
+    return (
+        <ElRow>
+            <ElCol span={24}>
+                <p class="text">线段粗细</p>
+            </ElCol>
+
+            <ElCol span={24} >
+                <ElSlider
+                    modelValue={graphics.value['strokeWidth']}
+                    onUpdate:modelValue={(val) => {
+                        graphics.value['strokeWidth'] = val
+                    }}
+                    max={20}
+                    min={1}
+                />
+            </ElCol>
+        </ElRow >
+    )
+}
+
+export default LineSegmentPlugin

package/drawingBoard-main/drawingBoard-main/src/components/plugins/TextColor.tsx

@@ -0,0 +1,25 @@
+import { IPluginProps } from '../../utils/types'
+import { ElRow, ElCol, ElColorPicker } from 'element-plus'
+const TextColor = ({ drawingBoard }: IPluginProps) => {
+    const graphics = drawingBoard.getSelectedGraphics()
+
+    return (
+        <ElRow>
+            <ElCol span={24}>
+                <p class="text">文字颜色</p>
+            </ElCol>
+
+            <ElCol span={24} >
+                <ElColorPicker
+                    show-alpha
+                    modelValue={graphics.value['fill']}
+                    onUpdate:modelValue={(val) => {
+                        graphics.value['fill'] = val
+                    }}
+                />
+            </ElCol>
+        </ElRow >
+    )
+}
+
+export default TextColor

package/drawingBoard-main/drawingBoard-main/src/components/plugins/TextSize.tsx

@@ -0,0 +1,27 @@
+import { IPluginProps } from '../../utils/types'
+import { ElRow, ElCol, ElSlider } from 'element-plus'
+const TextSize = ({ drawingBoard }: IPluginProps) => {
+    const graphics = drawingBoard.getSelectedGraphics()
+
+    return (
+        <ElRow>
+            <ElCol span={24}>
+                <p class="text">文字大小</p>
+            </ElCol>
+
+            <ElCol span={24} >
+                <ElSlider
+                    show-alpha
+                    modelValue={graphics.value['fontSize']}
+                    onUpdate:modelValue={(val) => {
+                        graphics.value['fontSize'] = val
+                    }}
+                    max={100}
+                    min={12}
+                />
+            </ElCol>
+        </ElRow >
+    )
+}
+
+export default TextSize

package/drawingBoard-main/drawingBoard-main/src/components/tools/Menu.scss

@@ -0,0 +1,10 @@
+.appMenu {
+    position: absolute;
+    // width: 200px;
+    // height: 50px;
+    border: 1px solid #dcdfe6;
+    padding: 10px 10px;
+    border-radius: 10px;
+    bottom: 2%;
+    left: 1%;
+}

package/drawingBoard-main/drawingBoard-main/src/components/tools/Menu.tsx

@@ -0,0 +1,33 @@
+import './Menu.scss';
+
+import { defineComponent } from 'vue';
+import { ElTooltip, ElButton } from 'element-plus'
+import { ArrowLeft, ArrowRight, DeleteFilled, Download } from '@element-plus/icons-vue'
+
+import App from '../../utils/App'
+
+export default defineComponent({
+    name: 'appMenu',
+    setup() {
+
+        return () => (
+            <section class="appMenu">
+                <ElTooltip effect="dark" content="撤销" placement="top-start">
+                    <ElButton onClick={() => App.drawingBoardInstance.historyBack()} icon={ArrowLeft} circle></ElButton>
+                </ElTooltip>
+
+                <ElTooltip effect="dark" content="取消撤销" placement="top-start">
+                    <ElButton onClick={() => App.drawingBoardInstance.historyUnBack()} icon={ArrowRight} circle></ElButton>
+                </ElTooltip>
+
+                <ElTooltip effect="dark" content="清空白板" placement="top-start">
+                    <ElButton onClick={() => App.drawingBoardInstance.leaferInstanceReadonly.tree.clear()} icon={DeleteFilled} circle></ElButton>
+                </ElTooltip>
+
+                <ElTooltip effect="dark" content="导出为图片" placement="top-start">
+                    <ElButton onClick={() => App.drawingBoardInstance.leaferInstanceReadonly.export('画板.png')} icon={Download} circle></ElButton>
+                </ElTooltip>
+            </section >
+        )
+    }
+})

package/drawingBoard-main/drawingBoard-main/src/components/tools/Tips.scss

@@ -0,0 +1,16 @@
+.toolsTitle {
+    position: absolute;
+    display: flex;
+    bottom: 2%;
+    right: 1%;
+    border: 1px solid #dcdfe6;
+    border-radius: 10px;
+    padding: 20px;
+    cursor: pointer;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+    &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.3);
+    }
+}

package/drawingBoard-main/drawingBoard-main/src/components/tools/Tips.tsx

@@ -0,0 +1,5 @@
+import './Tips.scss';
+
+const Tips = (props) => <h2 className='toolsTitle'>{props.content}</h2>
+
+export default Tips;

package/drawingBoard-main/drawingBoard-main/src/components/tools/Toolbar.scss

@@ -0,0 +1,26 @@
+.toolbar {
+    position: absolute;
+    display: flex;
+    top: 5%;
+    // width: 300px;
+    height: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 1px solid #dcdfe6;
+    border-radius: 10px;
+    padding: 10px 20px;
+
+    &-item {
+        padding: 10px;
+        cursor: pointer;
+    }
+
+    .active {
+        background-color: #3f85ed;
+        border-radius: 5px;
+
+        path {
+            fill: #ffffff;
+        }
+    }
+}

package/drawingBoard-main/drawingBoard-main/src/components/tools/Toolbar.tsx

@@ -0,0 +1,39 @@
+import './Toolbar.scss';
+
+import { toolBarOptions } from '../../utils/Tools'
+import { ElIcon } from 'element-plus';
+import App from '../../utils/App';
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'Toolbar',
+  setup() {
+    const getClass = computed(() => (idx: number) => {
+      if (!App.drawingBoardInstance) return '';
+
+      return App.drawingBoardInstance?.tools?.toolbarActiveIndex.value === idx ? 'active' : ''
+    })
+
+    const clickHandler = (index: number) => {
+      if (App.drawingBoardInstance?.tools?.toolbarActiveIndex.value === index) return;
+
+      App.drawingBoardInstance.tools.toolbarActiveIndex.value = index;
+    }
+
+    return () => (
+      <section className="toolbar">
+        {
+          toolBarOptions.map((item, index) => {
+            return (
+              <div className={`toolbar-item ${getClass.value(index)}`} key={index} title={item.title} onClick={() => clickHandler(index)}>
+                <ElIcon>
+                  <item.icon />
+                </ElIcon>
+              </div>
+            )
+          })
+        }
+      </section>
+    )
+  }
+})

package/drawingBoard-main/drawingBoard-main/src/components/tools/ToolbarMenu.scss

@@ -0,0 +1,45 @@
+.toolbarMenu {
+    position: absolute;
+    width: 200px;
+    max-height: 500px;
+    overflow-y: auto;
+    border: 1px solid #dcdfe6;
+    padding: 10px 20px;
+    border-radius: 10px;
+    top: 20%;
+    right: 5%;
+
+    .toolbarMenuOption {
+        margin-top: 10px;
+    }
+
+    .toolbarMenuLayer {
+        margin: 20px 0 10px;
+        display: flex;
+        justify-content: center;
+        gap: 30px;
+
+        .on {
+            background-color: #3f85ed;
+            border-radius: 5px;
+
+            path {
+                fill: #ffffff;
+            }
+        }
+
+        .el-icon {
+            border: 1px dashed #409eff;
+            padding: 2px;
+            box-sizing: border-box;
+            cursor: pointer;
+            width: 25px;
+            height: 25px;
+
+            svg {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}

package/drawingBoard-main/drawingBoard-main/src/components/tools/ToolbarMenu.tsx

@@ -0,0 +1,61 @@
+import './ToolbarMenu.scss'
+
+import { computed, defineComponent } from 'vue';
+import App from '../../utils/App';
+import { toolBarOptions } from '../../utils/Tools'
+import LayerOptions from '../plugins/LayerOptions'
+
+export default defineComponent({
+    name: 'ToolbarMenu',
+    setup() {
+        const activeGraphics = computed(() => {
+            if (App.drawingBoardInstance.tools.toolbarActiveIndex.value) {
+                return toolBarOptions[App.drawingBoardInstance.tools.toolbarActiveIndex.value]
+            } else if (App.drawingBoardInstance.selectedGraphics.value) {
+                return toolBarOptions.find(v => {
+                    return v.name === App.drawingBoardInstance.selectedGraphics.value.name
+                })
+            }
+        })
+
+        // const changeGraphicsZIndex = (type: string) => {
+        //     const graphics = App.drawingBoardInstance.getSelectedGraphics();
+
+        //     graphics
+        // }
+
+        return () => (
+            <div>
+                {
+                    activeGraphics.value?.menuPlugins?.length ? < section className="toolbarMenu" >
+                        {
+                            activeGraphics.value?.menuPlugins?.map(menuPlugin => {
+                                return (
+                                    <div className="toolbarMenuOption">
+                                        <menuPlugin drawingBoard={App.drawingBoardInstance} />
+                                    </div>
+                                )
+                            })
+                        }
+
+                        <LayerOptions drawingBoard={App.drawingBoardInstance} />
+
+                        {/* <div className="toolbarMenuLayer">
+                            {
+                                LAYER_LIST.map(Layer => {
+                                    return (
+                                        <span title={Layer.title} onClick={() => changeGraphicsZIndex(Layer.type)} key={Layer.type}>
+                                            <ElIcon>
+                                                <Layer.icon />
+                                            </ElIcon>
+                                        </span>
+                                    )
+                                })
+                            }
+                        </div> */}
+                    </section > : null
+                }
+            </div>
+        )
+    }
+})

package/drawingBoard-main/drawingBoard-main/src/components/tools/index.tsx

@@ -0,0 +1,22 @@
+import App from "../../utils/App"
+import Toolbar from "./Toolbar"
+import ToolbarMenu from "./ToolbarMenu"
+import Menu from "./Menu"
+import Tips from "./Tips"
+
+const Index = () => {
+    return (
+        <div className="toolsIndex">
+            <Toolbar />
+
+            {
+                App.drawingBoardInstance?.tools?.toolbarActiveIndex ? <ToolbarMenu /> : null
+            }
+
+            <Menu />
+            <Tips content="HUY 画板" />
+        </div>
+    )
+}
+
+export default Index

package/drawingBoard-main/drawingBoard-main/src/main.scss

@@ -0,0 +1,4 @@
+* {
+    margin: 0;
+    padding: 0;
+}

package/drawingBoard-main/drawingBoard-main/src/main.ts

@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+
+import 'element-plus/dist/index.css'
+import './main.scss'
+
+createApp(App)
+    .use(ElementPlus, { locale: zhCn })
+    .mount('#app')

package/drawingBoard-main/drawingBoard-main/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/drawingBoard-main/drawingBoard-main/src/utils/App.ts

@@ -0,0 +1,24 @@
+import DrawingBoard from "./DrawingBoard";
+import { IAppProps } from "./types";
+
+class App {
+    static drawingBoardInstance: null | DrawingBoard = null;
+
+    static init = ({
+        domId,
+        onChange,
+        config = {}
+    }: IAppProps) => {
+        this.drawingBoardInstance = new DrawingBoard({
+            domId,
+            onChange,
+            config
+        });
+    }
+
+    static destroy() {
+        this.drawingBoardInstance && this.drawingBoardInstance.destroy();
+    }
+}
+
+export default App