jvs-draw 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +113 -64
  2. package/dist/jvs-draw.css +1 -1
  3. package/dist/jvs-draw.es.js +2940 -2927
  4. package/dist/jvs-draw.umd.js +6 -6
  5. package/dist/store/index.d.ts +3 -0
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,66 +1,115 @@
1
- # JVS-Draw (Excalidraw Reconstruction)
2
-
3
- 本项目是对 [Excalidraw](https://github.com/excalidraw/excalidraw) 的重构，采用 **Vite + Vue 3 + TypeScript** 技术栈。
4
-
5
- ## 技术栈
6
-
7
- - **核心框架**: Vue 3 (Composition API)
8
- - **状态管理**: Pinia
9
- - **绘图引擎**: RoughJS
10
- - **构建工具**: Vite
11
- - **图标库**: Remix Icon
12
- - **样式**: CSS/SCSS
13
-
14
- ## 项目结构
15
-
16
- ```text
17
- jvs-draw/
18
- ├── src/
19
- │ ├── components/ # UI 组件 (Canvas, Toolbar, Properties 等)
20
- │ ├── core/ # 核心逻辑 (Renderer, Scene 管理)
21
- │ ├── store/ # 状态管理 (Pinia Store)
22
- │ ├── types/ # 类型定义
23
- │ ├── utils/ # 工具函数 (Math, Helper)
24
- │ └── App.vue # 主应用组件
25
- ├── public/ # 静态资源
26
- └── package.json # 依赖配置
1
+ # jvs-draw
2
+
3
+ `jvs-draw` 是一个基于 Vue 3 和 Element Plus 开发的轻量级虚拟白板（Virtual Whiteboard）组件。它可以轻松集成到您的 Vue 3 项目中，提供流程图绘制、草图绘制和自由书画等功能。
4
+
5
+ ## 📦 安装
6
+
7
+ 首先，在您的项目中安装 `jvs-draw` 以及它的依赖。由于 `jvs-draw` 具有一些同行依赖 (peerDependencies)，您还需要确保安装了 `vue`, `pinia` 和 `element-plus`。
8
+
9
+ ```bash
10
+ npm install jvs-draw
11
+ # 或使用 yarn
12
+ yarn add jvs-draw
13
+ # 或使用 pnpm
14
+ pnpm add jvs-draw
15
+ ```
16
+
17
+ 如果您尚未安装必需的同行依赖和样式库，请同时安装它们：
18
+
19
+ ```bash
20
+ npm install vue pinia element-plus jvs-picker-color-v3 remixicon
27
21
  ```
28
22
 
29
- ## 已实现功能
30
- - [x] Vue 3 + Vite 环境搭建
31
- - [x] 核心渲染引擎 (Rectangle, Ellipse, Diamond, Frame, Image)
32
- - [x] 基础 Toolbar UI (Hand, Selection, Shapes, Arrow, Line, Freedraw, Text, Image, Frame, Eraser)
33
- - [x] 响应式画布与手势支持 (Zoom, Pan)
34
- - [x] 元素的移动、缩放和旋转
35
- - [x] 线条与箭头 (支持自动吸附与动态绑定)
36
- - [x] 画框工具 (Frame) - 支持自动吸附与容器跟随
37
- - [x] 文本编辑 (双击编辑、自动换行、动态调整)
38
- - [x] 图片插入与渲染
39
- - [x] 右侧属性面板 (自定义颜色、边框样式、粗细、透明度、图层、对齐)
40
- - [x] 画布操作 (清除、锁定)
41
- - [x] 快捷键支持
42
-
43
- ## 环境要求
44
-
45
- - **Node.js**: v20.0.0 或更高版本 (推荐使用 v20.19.6)
46
- - **包管理器**: npm (或其他均可)
47
-
48
- ## 运行项目
49
-
50
- 1. 安装依赖:
51
- ```bash
52
- npm install
53
- ```
54
-
55
- 2. 启动开发服务器:
56
- ```bash
57
- npm run dev
58
- ```
59
-
60
- ## 后续计划
61
-
62
- - [ ] 实现连线和箭头逻辑
63
- - [ ] 实现自由绘制 (Freehand)
64
- - [ ] 实现文字编辑功能
65
- - [ ] 实现元素的移动、缩放和选择
66
- - [ ] 完善右侧属性面板 (颜色、边框、透明度等)
23
+ ## 🚀 快速上手
24
+
25
+ ### 1. 引入样式
26
+
27
+ 在项目的全局入口文件（通常是 `main.ts` 或 `main.js`）中引入必需的样式文件以及注册相关依赖。
28
+
29
+ ```typescript
30
+ // main.ts
31
+ import { createApp } from 'vue';
32
+ import { createPinia } from 'pinia';
33
+ import App from './App.vue';
34
+
35
+ // 引入 Element Plus
36
+ import ElementPlus from 'element-plus';
37
+ import 'element-plus/dist/index.css';
38
+
39
+ // 引入相关的图标和颜色选择器外部依赖样式
40
+ import 'remixicon/fonts/remixicon.css';
41
+ import jvsPickerColorV3 from 'jvs-picker-color-v3';
42
+ import 'jvs-picker-color-v3/lib/jvs-picker-color-v3.css';
43
+
44
+ // 引入 jvs-draw 的样式
45
+ import 'jvs-draw/dist/style.css';
46
+
47
+ const app = createApp(App);
48
+
49
+ app.use(createPinia()); // jvs-draw 依赖 Pinia 进行状态管理
50
+ app.use(ElementPlus);
51
+ app.use(jvsPickerColorV3);
52
+
53
+ app.mount('#app');
54
+ ```
55
+
56
+ ### 2. 作为全局组件使用 (可选)
57
+
58
+ 您可以在 `main.ts` 中全局注册它：
59
+
60
+ ```typescript
61
+ import { JvsDraw } from 'jvs-draw';
62
+
63
+ app.use(JvsDraw);
64
+ ```
65
+
66
+ 全局注册后，就可以在任何地方直接使用 `<JvsDraw />` 标签。
67
+
68
+ ### 3. 作为局部组件使用
69
+
70
+ 在您的 Vue 组件（比如 `App.vue` 或其他视图）中引入并使用该组件。由于该组件是一个完整的白板画布，推荐将容器高度和宽度设置为 `100%` 或 `100vh`/`100vw`。
71
+
72
+ ```vue
73
+ <template>
74
+ <div class="whiteboard-container">
75
+ <JvsDraw />
76
+ </div>
77
+ </template>
78
+
79
+ <script setup lang="ts">
80
+ import { JvsDraw } from 'jvs-draw';
81
+ </script>
82
+
83
+ <style scoped>
84
+ .whiteboard-container {
85
+ width: 100vw;
86
+ height: 100vh;
87
+ margin: 0;
88
+ padding: 0;
89
+ overflow: hidden; /* 防止页面出现原生滚动条 */
90
+ }
91
+ </style>
92
+ ```
93
+
94
+ ## 🛠️ API & 组件通信
95
+
96
+ `JvsDraw` 内部已经集成了完整的状态管理（基于 Pinia），画笔工具、撤销/重做、画布缩放及平移等均在组件内部完成闭环。
97
+
98
+ 如果想在外部获取画布数据，组件往 `window` 对象上挂载了获取方法（根据项目内部设定，可按需调用）：
99
+
100
+ ```javascript
101
+ // 获取当前画布内的所有元素和画板配置状态
102
+ const { elements, appState } = window.getExcalidrawCanvasData();
103
+ console.log(elements);
104
+ ```
105
+
106
+ *(注意：更高级的 API 传参和通信方式取决于后续对 `JvsDraw` 的进一步封装和 Prop 设计。)*
107
+
108
+ ## 🧩 依赖说明
109
+
110
+ - `vue` >= 3.x
111
+ - `pinia`: 状态管理
112
+ - `element-plus`: UI 组件库
113
+ - `roughjs`: 核心底层图形手绘风格渲染库
114
+ - `jvs-picker-color-v3`: 内部依赖的颜色取色器
115
+ - `remixicon`: 图标库
package/dist/jvs-draw.css CHANGED
@@ -1 +1 @@
1
- .toolbar[data-v-b6ea5f5c]{position:absolute;top:50%;left:24px;transform:translateY(-50%);display:flex;flex-direction:column;background:var(--color-bg-panel);padding:8px 4px;box-sizing:border-box;border-radius:var(--radius-md);box-shadow:0 0 15px #363b4c1a;z-index:100;align-items:center;width:56px}.tool-group[data-v-b6ea5f5c]{display:flex;flex-direction:column;gap:8px}.tool-group .tool-item[data-v-b6ea5f5c]{height:36px;width:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;position:relative}.tool-group .tool-item[data-v-b6ea5f5c]:hover{background:#eeeff0}.tool-group .tool-item .svg-icon[data-v-b6ea5f5c]{width:20px;height:20px}.tool-group .active[data-v-b6ea5f5c]{background:#1e6fff1f;color:var(--color-primary)}.tool-group .active[data-v-b6ea5f5c]:hover{background:#1e6fff1f}.tool-group .trand-line[data-v-b6ea5f5c]{height:1px;background:#e4e7eb;width:36px;cursor:default}.tool-group .trand-line[data-v-b6ea5f5c]:hover{background:#e4e7eb}.separator[data-v-b6ea5f5c]{width:20px;height:1px;background:var(--color-border);margin:8px 0}button[data-v-b6ea5f5c]{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);color:var(--color-text);position:relative;outline:none}button i[data-v-b6ea5f5c]{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shortcut[data-v-b6ea5f5c]{position:absolute;bottom:2px;right:2px;font-size:8px;font-weight:500;opacity:.6}button.destructive[data-v-b6ea5f5c]:hover{background:#fff0f0;color:#ff4d4f}.sub-tools-container[data-v-b6ea5f5c]{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.sub-tools-container .sub-tool-item[data-v-b6ea5f5c]{display:flex;justify-content:space-between;align-items:center;border-radius:4px;justify-content:center;font-size:13px;color:var(--color-text);transition:all .2s;cursor:pointer;width:36px;height:36px}.sub-tools-container .sub-tool-item .svg-icon[data-v-b6ea5f5c]{width:24px;height:24px;min-width:24px}.sub-tools-container .sub-tool-item[data-v-b6ea5f5c]:hover{background:var(--color-bg-hover, #f0f2f5)}.sub-tools-container .sub-tool-item.active[data-v-b6ea5f5c]{background:#1e6fff1f;color:var(--color-primary, #1e6fff)}.sub-tools-container .sub-tool-item .sub-tool-label[data-v-b6ea5f5c]{font-weight:500}.sub-tools-container .sub-tool-item .sub-tool-shortcut[data-v-b6ea5f5c]{font-size:12px;color:var(--color-text-secondary, #8c909e)}.fill-style-box[data-v-9356d2e1]{height:32px;min-height:32px;background:#f5f6f7;border-radius:4px;display:grid;padding:3px 8px;box-sizing:border-box;grid-template-columns:repeat(3,1fr);grid-column-gap:8px}.fill-style-box .fill-style-item[data-v-9356d2e1]{display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;height:26px}.fill-style-box .fill-style-item .svg-icon[data-v-9356d2e1]{min-width:24px;width:24px;height:16px}.fill-style-box .active[data-v-9356d2e1]{background:#fff}.fill-style-box[data-v-dcf857c8]{height:32px;min-height:32px;background:#f5f6f7;border-radius:4px;display:grid;padding:3px 8px;box-sizing:border-box;grid-template-columns:repeat(3,1fr);grid-column-gap:8px}.fill-style-box .fill-style-item[data-v-dcf857c8]{display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;height:26px}.fill-style-box .fill-style-item .svg-icon[data-v-dcf857c8]{min-width:24px;width:24px;height:16px}.fill-style-box .active[data-v-dcf857c8]{background:#fff}.fill-style-box[data-v-794ba895]{height:32px;min-height:32px;background:#f5f6f7;border-radius:4px;display:grid;padding:3px 8px;box-sizing:border-box;grid-template-columns:repeat(3,1fr);grid-column-gap:8px}.fill-style-box .fill-style-item[data-v-794ba895]{display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;height:26px}.fill-style-box .fill-style-item .svg-icon[data-v-794ba895]{min-width:24px;width:24px;height:16px}.fill-style-box .active[data-v-794ba895]{background:#fff}.fill-style-box[data-v-36600f47]{height:32px;min-height:32px;background:#f5f6f7;border-radius:4px;display:grid;padding:3px 8px;box-sizing:border-box;grid-template-columns:repeat(4,1fr);grid-column-gap:8px}.fill-style-box .fill-style-item[data-v-36600f47]{display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;height:26px}.fill-style-box .fill-style-item .svg-icon[data-v-36600f47]{min-width:16px;width:16px;height:16px}.fill-style-box .active[data-v-36600f47]{background:#fff}.fill-style-box[data-v-b408686c]{height:32px;min-height:32px;background:#f5f6f7;border-radius:4px;display:grid;padding:3px 8px;box-sizing:border-box;grid-template-columns:repeat(6,1fr);grid-column-gap:8px}.fill-style-box .fill-style-item[data-v-b408686c]{display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;height:26px}.fill-style-box .fill-style-item .svg-icon[data-v-b408686c]{min-width:16px;width:16px;height:16px}.fill-style-box .active[data-v-b408686c]{background:#fff}.no-vertical-align[data-v-b408686c]{grid-template-columns:repeat(3,1fr)}.fill-style-box[data-v-b56fafad]{height:32px;min-height:32px;background:#f5f6f7;border-radius:4px;display:grid;padding:3px 8px;box-sizing:border-box;grid-template-columns:repeat(2,1fr);grid-column-gap:8px}.fill-style-box .fill-style-item[data-v-b56fafad]{display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;height:26px}.fill-style-box .fill-style-item .svg-icon[data-v-b56fafad]{min-width:24px;width:24px;height:16px}.fill-style-box .active[data-v-b56fafad]{background:#fff}.properties-panel[data-v-00889af3]{position:absolute;top:0;right:0;bottom:0;width:320px;box-sizing:border-box;background:#fff;border-left:1px solid var(--color-border);box-shadow:var(--shadow-lg);z-index:90;display:flex;flex-direction:column;gap:16px;overflow-y:auto;border-radius:0}.properties-panel .el-slider[data-v-00889af3]{--el-slider-button-size: 16px;width:100%}.properties-panel .el-slider[data-v-00889af3] .el-input__wrapper,.properties-panel .el-slider[data-v-00889af3] .el-select__wrapper,.properties-panel .el-slider[data-v-00889af3] .el-textarea__inner{background:#f5f6f7;box-shadow:none}.properties-panel .el-slider[data-v-00889af3] .el-slider__button{border-width:1px}.properties-panel .el-slider[data-v-00889af3] .el-slider__runway.show-input{margin-right:20px}.properties-panel .el-slider[data-v-00889af3] .el-input__wrapper{padding-left:8px;padding-right:8px}.properties-panel .el-slider[data-v-00889af3] .el-input__wrapper .el-input__inner{text-align:left}.properties-panel .el-slider[data-v-00889af3] .el-slider__input{width:56px}.header[data-v-00889af3]{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 0}.header div[data-v-00889af3]{font-size:14px;color:#363b4c;font-weight:600}.header svg[data-v-00889af3]{width:14px;height:14px;fill:#363b4c;cursor:pointer}.content[data-v-00889af3]{display:flex;flex-direction:column;gap:16px;padding-top:2px}.shape-panel-box[data-v-00889af3]{display:flex;gap:8px;align-items:center;padding:0 16px;box-sizing:border-box}.shape-panel-row[data-v-00889af3]{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.shape-panel-row[data-v-00889af3] .el-input-number__decrease,.shape-panel-row[data-v-00889af3] .el-input-number__increase{display:none!important}.shape-panel-row .input-box[data-v-00889af3]{width:120px;display:flex;align-items:center;font-weight:400;font-size:12px;color:#6f7588;gap:8px;background:#f5f6f7;border-radius:4px;padding:0 8px;box-sizing:border-box;position:relative}.shape-panel-row .input-box .unit[data-v-00889af3]{font-size:16px;position:absolute;left:32px;top:50%;transform:translateY(-60%)}.shape-panel-row .input-box .icon[data-v-00889af3]{width:16px;font-size:14px;display:flex;align-items:center;justify-content:center}.shape-panel-row .input-box .svg-icon[data-v-00889af3]{width:16px;height:16px;min-width:16px}.shape-panel-row .input-box .el-input-number[data-v-00889af3]{width:100%}.shape-panel-row .input-box .el-input-number[data-v-00889af3] .el-input__wrapper{padding:0!important;box-shadow:none!important;background:transparent!important}.shape-panel-row .input-box .el-input-number[data-v-00889af3] .el-input__wrapper .el-input__inner{text-align:left}.shape-panel-row .btn-box[data-v-00889af3]{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;cursor:pointer}.shape-panel-row .btn-box .btn-item[data-v-00889af3]{display:flex;align-items:center;justify-content:center;cursor:pointer;width:100%;background:#f5f6f7;border-radius:4px}.shape-panel-row .btn-box .btn-item .svg-icon[data-v-00889af3]{width:16px;height:16px;min-width:16px}.shape-panel-row .input-box[data-v-00889af3]:has(.is-focus){box-shadow:0 0 0 1px #1e6fff}.not-bind-width-height .input-box[data-v-00889af3]{width:100%}.bind-box[data-v-00889af3]{width:32px;height:32px;cursor:pointer;background:#f5f6f7;border-radius:4px;display:flex;align-items:center;justify-content:center}.bind-box .svg-icon[data-v-00889af3]{width:16px;height:16px;min-width:16px}.bind-box.active[data-v-00889af3]{background-color:#1e6fff!important}.roundness-box[data-v-00889af3]{display:flex;align-items:center;gap:8px;padding:0 16px}.roundness-box .btn-box[data-v-00889af3]{cursor:pointer;width:32px;min-width:32px;height:32px;background:#f5f6f7;border-radius:4px;display:flex;align-items:center;justify-content:center}.roundness-box .btn-box .svg-icon[data-v-00889af3]{width:16px;height:16px;min-width:16px}.item-label[data-v-00889af3]{font-weight:400;font-size:14px;color:#6f7588;word-break:keep-all}.divider[data-v-00889af3]{width:100%;height:1px;background:#eeeff0}.type-item-title[data-v-00889af3]{padding:0 16px}.type-item-title .title[data-v-00889af3]{font-weight:700;font-size:14px}.style-item[data-v-00889af3]{display:flex;gap:8px;padding:0 16px}.style-item .title[data-v-00889af3]{width:80px;min-width:80px;font-weight:400;font-size:14px;color:#6f7588;height:32px;line-height:32px}.style-item .style-boxs[data-v-00889af3]{width:100%;gap:8px;display:grid}.style-item .style-boxs .style-boxs-item[data-v-00889af3]{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.style-item .style-boxs .style-boxs-item[data-v-00889af3] .el-select__wrapper{box-shadow:none!important;background:#f5f6f7!important;padding:0 8px}.style-item .style-boxs .style-boxs-item[data-v-00889af3] .el-select__wrapper:hover{background:#f5f6f7}.style-item .style-boxs .style-boxs-item[data-v-00889af3] .is-focused{box-shadow:0 0 0 1px #1e6fff!important}.style-item .style-boxs .style-boxs-item[data-v-00889af3] .el-input__inner{color:#666;font-size:14px;text-align:center}.style-item .style-boxs .style-boxs-item[data-v-00889af3] .el-input__wrapper{background:#f5f6f7;box-shadow:none}.style-item .style-boxs .style-boxs-item[data-v-00889af3] .el-input__wrapper .el-input__inner{text-align:left!important}.style-item .style-boxs .style-boxs-item[data-v-00889af3] .el-input__wrapper.is-focus{box-shadow:0 0 0 1px #1e6fff!important}.style-item .input-value-box[data-v-00889af3]{background:#f5f6f7;border-radius:4px;width:100%;height:32px;display:flex;align-items:center;padding:0 8px}.style-item .input-value-box .svg-icon[data-v-00889af3]{width:20px;height:20px;border-radius:4px}.style-item .input-value-box .color-box[data-v-00889af3]{width:19px;height:19px;border-radius:4px;border:1px solid #eeeff0}.style-item .input-value-box .color-text[data-v-00889af3]{height:20px;display:flex;align-items:center;margin-left:8px}.context-menu[data-v-22c72497]{position:fixed;z-index:1000;background:#fff;border-radius:4px;box-shadow:0 2px 10px #0003;padding:4px 0;min-width:200px;font-family:sans-serif;font-size:14px;color:#333}.context-menu ul[data-v-22c72497]{list-style:none;margin:0;padding:0}.context-menu li[data-v-22c72497]{padding:8px 16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.context-menu li[data-v-22c72497]:hover{background-color:#f0f0f0}.divider[data-v-22c72497]{height:1px;background-color:#e0e0e0;margin:8px 0}.delete[data-v-22c72497]{color:red}.shortcut[data-v-22c72497]{font-size:12px;color:#999;margin-left:16px}.excalidraw-container[data-v-b4198a57]{width:100%;height:100%;overflow:hidden;background-color:#fff;background-image:linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(90px,rgba(0,0,0,.03) 1px,transparent 1px);background-size:20px 20px}canvas[data-v-b4198a57]{display:block}.text-editor[data-v-b4198a57]{background:transparent;border:none;padding:4px;box-sizing:border-box;margin:0;resize:none;outline:none;overflow:hidden;z-index:50;font-family:Virgil,sans-serif;white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word;width:100%;text-align:center;vertical-align:center}.excalidraw-textContainer[data-v-b4198a57]{display:flex;align-items:center;position:absolute;background:transparent!important;cursor:text}.color-box[data-v-9b04b94a]{display:grid;grid-template-columns:repeat(8,1fr);grid-gap:6px}.color-box .color-item[data-v-9b04b94a]{width:20px;height:20px;border-radius:4px;cursor:pointer;border:1px solid #EEEFF0;position:relative}.color-box .active[data-v-9b04b94a]:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% + 2px);height:calc(100% + 2px);border-radius:6px;border:2px solid #B7D1FF}.color-box .trans-icon[data-v-9b04b94a]{width:22px;height:22px;position:relative;cursor:pointer}.color-box .trans-icon .svg-icon[data-v-9b04b94a]{width:22px;height:22px}.color-box .color-item-add[data-v-9b04b94a]{width:20px;height:20px;border-radius:4px;cursor:pointer;border:1px solid transparent}.color-box .color-item-add .svg-icon[data-v-9b04b94a]{width:20px;height:20px}.board-name-container[data-v-772e3fac]{position:absolute;top:24px;left:24px;height:44px;z-index:101;background:#ffffffe6;border-radius:4px;display:flex;align-items:center;box-shadow:0 2px 8px #363b4c26;padding:0 16px}.board-name-input[data-v-772e3fac]{height:44px;font-size:16px;color:#363b4c;border:none;padding:0 12px;font-family:inherit;outline:none;min-width:200px}.board-name-input[data-v-772e3fac] .el-input__wrapper{box-shadow:none;background-color:transparent!important}.board-name-input[data-v-772e3fac]:focus{box-shadow:0 2px 8px #363b4c40}.action-item[data-v-772e3fac]{width:32px;height:32px;min-width:32px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center}.action-item[data-v-772e3fac]:hover{background:#f5f6f7}.svg-icon[data-v-772e3fac]{width:20px;height:20px;cursor:pointer}.board-settings-popover,.preferences-popover{padding:8px 0!important}.menu-list[data-v-772e3fac]{display:flex;flex-direction:column}.menu-item[data-v-772e3fac]{height:36px;display:flex;align-items:center;justify-content:space-between;margin:0 8px;padding:0 8px;cursor:pointer;color:#363b4c;font-size:14px;transition:background .2s;border-radius:4px}.menu-item[data-v-772e3fac]:hover{background:#f5f6f7}.menu-item-content[data-v-772e3fac]{display:flex;align-items:center;gap:8px}.menu-icon[data-v-772e3fac]{font-size:16px;width:16px;height:16px;color:#8c909e}.menu-arrow[data-v-772e3fac]{font-size:16px;color:#8c909e}.preferences-list[data-v-772e3fac]{display:flex;flex-direction:column;gap:8px}.preferences-list .line[data-v-772e3fac]{width:100%;height:1px;background:#eeeff0}.preferences-list .grid-item[data-v-772e3fac]{display:flex;align-items:center;padding:8px 16px;gap:8px;cursor:pointer;border-radius:4px}.preferences-list .grid-item .svg-icon[data-v-772e3fac]{width:16px;height:16px}.preferences-list .grid-item[data-v-772e3fac]:hover{background:#f5f6f7}.preferences-list .active[data-v-772e3fac]{background:#d2e2ff!important;color:#1e6fff}.preference-item[data-v-772e3fac]{display:flex;align-items:center;justify-content:space-between;padding:8px 16px}.preference-info[data-v-772e3fac]{display:flex;flex-direction:column;gap:4px;width:100%}.preference-title[data-v-772e3fac]{font-size:14px;color:#363b4c;display:flex;align-items:center;justify-content:space-between}.preference-desc[data-v-772e3fac]{font-size:12px;color:#8c909e}.board-settings-popover{transform:translate(-10px)!important}.preferences-popover{transform:translate(6px)}.sub-preferences-popover{padding:0!important;transform:translate(6px)}.sub-preferences-popover .preferences-list{padding:16px!important;gap:8px}.sub-preferences-popover .preferences-list .title{font-weight:400;font-size:14px;color:#6f7588}.sub-preferences-popover .grid-list{padding:8px!important}.footer-controls[data-v-06dd6954]{position:absolute;bottom:24px;right:24px;display:flex;gap:12px;z-index:100;transition:right .3s ease}.zoom-controls[data-v-06dd6954],.history-controls[data-v-06dd6954],.help-controls[data-v-06dd6954]{display:flex;align-items:center;padding:4px;box-sizing:border-box;border-radius:var(--radius-md);box-shadow:var(--shadow-md);height:44px;gap:4px;border:0px}.tool-item[data-v-06dd6954]{cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}.tool-item[data-v-06dd6954]:hover{background:#f5f6f7}.tool-item .svg-icon[data-v-06dd6954]{width:24px;height:24px}.disabled[data-v-06dd6954]{cursor:not-allowed}.disabled[data-v-06dd6954]:hover{background-color:transparent}.separator[data-v-06dd6954]{width:1px;height:20px;background:var(--color-border);margin:0 4px}button[data-v-06dd6954]{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--color-text);font-size:16px;border:none;background:transparent;cursor:pointer}button[data-v-06dd6954]:hover:not(:disabled){background:#0000000d}button[data-v-06dd6954]:disabled{opacity:.3;cursor:not-allowed}.active[data-v-06dd6954]{background:#1e6fff1f!important;color:var(--color-primary)}button.destructive[data-v-06dd6954]:hover{background:#fff0f0;color:#ff4d4f}span[data-v-06dd6954]{font-size:12px;font-weight:500;color:var(--color-text);min-width:40px;text-align:center;-webkit-user-select:none;user-select:none}.modal-overlay[data-v-0caac542]{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0006;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1000;display:flex;align-items:center;justify-content:center}.help-dialog[data-v-0caac542]{width:800px;max-width:90vw;max-height:85vh;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;overflow:hidden}.header[data-v-0caac542]{padding:16px 24px;border-bottom:1px solid rgba(0,0,0,.1);display:flex;justify-content:space-between;align-items:center}.header h2[data-v-0caac542]{margin:0;font-size:18px;font-weight:600}.close-btn[data-v-0caac542]{background:none;border:none;font-size:24px;cursor:pointer;color:var(--color-text-muted);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}.close-btn[data-v-0caac542]:hover{background:#0000000d;color:var(--color-text)}.content[data-v-0caac542]{padding:24px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:40px}.column[data-v-0caac542]{display:flex;flex-direction:column;gap:24px}h3[data-v-0caac542]{margin:0;font-size:14px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase}.shortcut-list[data-v-0caac542]{display:flex;flex-direction:column;gap:8px}.item[data-v-0caac542]{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--color-text);padding:4px 0}.keys[data-v-0caac542]{display:flex;gap:4px;align-items:center}kbd[data-v-0caac542]{background:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;padding:2px 6px;font-family:monospace;font-size:12px;box-shadow:0 1px #0000001a;min-width:20px;text-align:center}.popovers-container[data-v-1fe4c384]{display:flex;align-items:center;gap:4px}.settings-btn[data-v-1fe4c384]{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;width:32px;height:32px;transition:all .2s;border-radius:4px}.settings-btn .svg-icon[data-v-1fe4c384]{width:20px;height:20px;border-radius:4px}.settings-btn .color-box[data-v-1fe4c384]{width:19px;height:19px;border-radius:4px;border:1px solid #eeeff0}.settings-btn .border-box[data-v-1fe4c384]{width:16px;height:16px;border-radius:4px;border:2px solid #eeeff0}.settings-btn[data-v-1fe4c384]:hover{background:#f5f6f7;color:var(--color-primary, #4b9fff)}.popover-content[data-v-1fe4c384]{display:flex;flex-direction:column;gap:8px}.popover-content .title[data-v-1fe4c384]{font-weight:400;font-size:14px;color:#6f7588;display:flex;align-items:center;justify-content:space-between}.popover-content .el-slider[data-v-1fe4c384]{--el-slider-button-size: 16px;width:100%}.popover-content .el-slider[data-v-1fe4c384] .el-input__wrapper,.popover-content .el-slider[data-v-1fe4c384] .el-select__wrapper,.popover-content .el-slider[data-v-1fe4c384] .el-textarea__inner{background:#f5f6f7;box-shadow:none}.popover-content .el-slider[data-v-1fe4c384] .el-slider__button{border-width:1px}.popover-content .el-slider[data-v-1fe4c384] .el-slider__runway.show-input{margin-right:20px}.popover-content .el-slider[data-v-1fe4c384] .el-input__wrapper{padding-left:8px;padding-right:8px}.popover-content .el-slider[data-v-1fe4c384] .el-input__wrapper .el-input__inner{text-align:left}.popover-content .el-slider[data-v-1fe4c384] .el-slider__input{width:56px}.separator[data-v-1fe4c384]{height:12px}.separator-horizontal[data-v-1fe4c384]{width:100%;height:1px;background-color:var(--color-border, #e0e0e0);margin:4px 0}.popover-title[data-v-1fe4c384]{font-size:12px;font-weight:500;color:var(--color-text, #333)}.font-size-select[data-v-1fe4c384]{display:flex;align-items:center;margin:0 4px}.font-size-select[data-v-1fe4c384] .el-select__wrapper{box-shadow:none!important;background:#f5f6f7!important;padding:0 8px}.font-size-select[data-v-1fe4c384] .el-select__wrapper:hover{background:#f5f6f7}.font-size-select[data-v-1fe4c384] .is-focused{box-shadow:0 0 0 1px #1e6fff!important}.font-size-select[data-v-1fe4c384] .el-input__inner{color:#666;font-size:14px;text-align:center}.button-group[data-v-1fe4c384]{display:flex;gap:4px}.button-group button[data-v-1fe4c384]{flex:1;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:#0000000a;color:var(--color-text, #333);border:1px solid transparent;cursor:pointer;transition:all .2s}.button-group button[data-v-1fe4c384]:hover{background:#f5f6f7}.button-group button.active[data-v-1fe4c384]{background:#f5f6f7;color:var(--color-primary, #4b9fff)}.button-group button i[data-v-1fe4c384]{font-size:18px}.divider[data-v-1fe4c384]{width:1px;height:20px;background:#e4e7eb}.sub-tools-container[data-v-1fe4c384]{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.sub-tools-container .sub-tool-item[data-v-1fe4c384]{display:flex;justify-content:space-between;align-items:center;border-radius:4px;justify-content:center;font-size:13px;color:var(--color-text);transition:all .2s;cursor:pointer;width:36px;height:36px}.sub-tools-container .sub-tool-item .svg-icon[data-v-1fe4c384]{width:24px;height:24px;min-width:24px}.sub-tools-container .sub-tool-item[data-v-1fe4c384]:hover{background:var(--color-bg-hover, #f0f2f5)}.sub-tools-container .sub-tool-item.active[data-v-1fe4c384]{background:#1e6fff1f;color:var(--color-primary, #1e6fff)}.sub-tools-container .sub-tool-item .sub-tool-label[data-v-1fe4c384]{font-weight:500}.sub-tools-container .sub-tool-item .sub-tool-shortcut[data-v-1fe4c384]{font-size:12px;color:var(--color-text-secondary, #8c909e)}.custom-toolbar-popover{border-radius:4px!important;padding:16px!important;box-shadow:0 4px 20px #00000026!important;border:1px solid rgba(0,0,0,.1)!important}.floating-toolbar[data-v-206d2632]{position:absolute;height:40px;background:#ffffffe6;border-radius:8px;box-shadow:0 4px 12px #00000026;display:flex;align-items:center;padding:0 8px;gap:8px;z-index:100;border:1px solid var(--color-border);-webkit-user-select:none;user-select:none}.drag-handle[data-v-206d2632]{cursor:grab;display:flex;align-items:center;justify-content:center;color:#666;width:24px;height:24px;border-radius:4px}.drag-handle .svg-icon[data-v-206d2632]{width:16px;height:16px}.drag-handle[data-v-206d2632]:active{cursor:grabbing}.divider[data-v-206d2632]{width:1px;height:20px;background:#e4e7eb}.settings-btn[data-v-206d2632]{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;width:32px;height:32px;border-radius:4px;transition:all .2s}.settings-btn .svg-icon[data-v-206d2632]{width:20px;height:20px}.settings-btn[data-v-206d2632]:hover{background:#0000000d;color:var(--color-primary)}.settings-btn i[data-v-206d2632]{font-size:18px}body{margin:0;padding:0;overflow:hidden;font-family:Inter,sans-serif}.app-container{width:100vw;height:100vh;position:relative}
1
+ .toolbar[data-v-b6ea5f5c]{position:absolute;top:50%;left:24px;transform:translateY(-50%);display:flex;flex-direction:column;background:var(--color-bg-panel);padding:8px 4px;box-sizing:border-box;border-radius:var(--radius-md);box-shadow:0 0 15px #363b4c1a;z-index:100;align-items:center;width:56px}.tool-group[data-v-b6ea5f5c]{display:flex;flex-direction:column;gap:8px}.tool-group .tool-item[data-v-b6ea5f5c]{height:36px;width:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;position:relative}.tool-group .tool-item[data-v-b6ea5f5c]:hover{background:#eeeff0}.tool-group .tool-item .svg-icon[data-v-b6ea5f5c]{width:20px;height:20px}.tool-group .active[data-v-b6ea5f5c]{background:#1e6fff1f;color:var(--color-primary)}.tool-group .active[data-v-b6ea5f5c]:hover{background:#1e6fff1f}.tool-group .trand-line[data-v-b6ea5f5c]{height:1px;background:#e4e7eb;width:36px;cursor:default}.tool-group .trand-line[data-v-b6ea5f5c]:hover{background:#e4e7eb}.separator[data-v-b6ea5f5c]{width:20px;height:1px;background:var(--color-border);margin:8px 0}button[data-v-b6ea5f5c]{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);color:var(--color-text);position:relative;outline:none}button i[data-v-b6ea5f5c]{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shortcut[data-v-b6ea5f5c]{position:absolute;bottom:2px;right:2px;font-size:8px;font-weight:500;opacity:.6}button.destructive[data-v-b6ea5f5c]:hover{background:#fff0f0;color:#ff4d4f}.sub-tools-container[data-v-b6ea5f5c]{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.sub-tools-container .sub-tool-item[data-v-b6ea5f5c]{display:flex;justify-content:space-between;align-items:center;border-radius:4px;justify-content:center;font-size:13px;color:var(--color-text);transition:all .2s;cursor:pointer;width:36px;height:36px}.sub-tools-container .sub-tool-item .svg-icon[data-v-b6ea5f5c]{width:24px;height:24px;min-width:24px}.sub-tools-container .sub-tool-item[data-v-b6ea5f5c]:hover{background:var(--color-bg-hover, #f0f2f5)}.sub-tools-container .sub-tool-item.active[data-v-b6ea5f5c]{background:#1e6fff1f;color:var(--color-primary, #1e6fff)}.sub-tools-container .sub-tool-item .sub-tool-label[data-v-b6ea5f5c]{font-weight:500}.sub-tools-container .sub-tool-item .sub-tool-shortcut[data-v-b6ea5f5c]{font-size:12px;color:var(--color-text-secondary, #8c909e)}.fill-style-box[data-v-9356d2e1]{height:32px;min-height:32px;background:#f5f6f7;border-radius:4px;display:grid;padding:3px 8px;box-sizing:border-box;grid-template-columns:repeat(3,1fr);grid-column-gap:8px}.fill-style-box .fill-style-item[data-v-9356d2e1]{display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;height:26px}.fill-style-box .fill-style-item .svg-icon[data-v-9356d2e1]{min-width:24px;width:24px;height:16px}.fill-style-box .active[data-v-9356d2e1]{background:#fff}.fill-style-box[data-v-dcf857c8]{height:32px;min-height:32px;background:#f5f6f7;border-radius:4px;display:grid;padding:3px 8px;box-sizing:border-box;grid-template-columns:repeat(3,1fr);grid-column-gap:8px}.fill-style-box .fill-style-item[data-v-dcf857c8]{display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;height:26px}.fill-style-box .fill-style-item .svg-icon[data-v-dcf857c8]{min-width:24px;width:24px;height:16px}.fill-style-box .active[data-v-dcf857c8]{background:#fff}.fill-style-box[data-v-794ba895]{height:32px;min-height:32px;background:#f5f6f7;border-radius:4px;display:grid;padding:3px 8px;box-sizing:border-box;grid-template-columns:repeat(3,1fr);grid-column-gap:8px}.fill-style-box .fill-style-item[data-v-794ba895]{display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;height:26px}.fill-style-box .fill-style-item .svg-icon[data-v-794ba895]{min-width:24px;width:24px;height:16px}.fill-style-box .active[data-v-794ba895]{background:#fff}.fill-style-box[data-v-36600f47]{height:32px;min-height:32px;background:#f5f6f7;border-radius:4px;display:grid;padding:3px 8px;box-sizing:border-box;grid-template-columns:repeat(4,1fr);grid-column-gap:8px}.fill-style-box .fill-style-item[data-v-36600f47]{display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;height:26px}.fill-style-box .fill-style-item .svg-icon[data-v-36600f47]{min-width:16px;width:16px;height:16px}.fill-style-box .active[data-v-36600f47]{background:#fff}.fill-style-box[data-v-b408686c]{height:32px;min-height:32px;background:#f5f6f7;border-radius:4px;display:grid;padding:3px 8px;box-sizing:border-box;grid-template-columns:repeat(6,1fr);grid-column-gap:8px}.fill-style-box .fill-style-item[data-v-b408686c]{display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;height:26px}.fill-style-box .fill-style-item .svg-icon[data-v-b408686c]{min-width:16px;width:16px;height:16px}.fill-style-box .active[data-v-b408686c]{background:#fff}.no-vertical-align[data-v-b408686c]{grid-template-columns:repeat(3,1fr)}.fill-style-box[data-v-b56fafad]{height:32px;min-height:32px;background:#f5f6f7;border-radius:4px;display:grid;padding:3px 8px;box-sizing:border-box;grid-template-columns:repeat(2,1fr);grid-column-gap:8px}.fill-style-box .fill-style-item[data-v-b56fafad]{display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;height:26px}.fill-style-box .fill-style-item .svg-icon[data-v-b56fafad]{min-width:24px;width:24px;height:16px}.fill-style-box .active[data-v-b56fafad]{background:#fff}.properties-panel[data-v-00889af3]{position:absolute;top:0;right:0;bottom:0;width:320px;box-sizing:border-box;background:#fff;border-left:1px solid var(--color-border);box-shadow:var(--shadow-lg);z-index:90;display:flex;flex-direction:column;gap:16px;overflow-y:auto;border-radius:0}.properties-panel .el-slider[data-v-00889af3]{--el-slider-button-size: 16px;width:100%}.properties-panel .el-slider[data-v-00889af3] .el-input__wrapper,.properties-panel .el-slider[data-v-00889af3] .el-select__wrapper,.properties-panel .el-slider[data-v-00889af3] .el-textarea__inner{background:#f5f6f7;box-shadow:none}.properties-panel .el-slider[data-v-00889af3] .el-slider__button{border-width:1px}.properties-panel .el-slider[data-v-00889af3] .el-slider__runway.show-input{margin-right:20px}.properties-panel .el-slider[data-v-00889af3] .el-input__wrapper{padding-left:8px;padding-right:8px}.properties-panel .el-slider[data-v-00889af3] .el-input__wrapper .el-input__inner{text-align:left}.properties-panel .el-slider[data-v-00889af3] .el-slider__input{width:56px}.header[data-v-00889af3]{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 0}.header div[data-v-00889af3]{font-size:14px;color:#363b4c;font-weight:600}.header svg[data-v-00889af3]{width:14px;height:14px;fill:#363b4c;cursor:pointer}.content[data-v-00889af3]{display:flex;flex-direction:column;gap:16px;padding-top:2px}.shape-panel-box[data-v-00889af3]{display:flex;gap:8px;align-items:center;padding:0 16px;box-sizing:border-box}.shape-panel-row[data-v-00889af3]{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.shape-panel-row[data-v-00889af3] .el-input-number__decrease,.shape-panel-row[data-v-00889af3] .el-input-number__increase{display:none!important}.shape-panel-row .input-box[data-v-00889af3]{width:120px;display:flex;align-items:center;font-weight:400;font-size:12px;color:#6f7588;gap:8px;background:#f5f6f7;border-radius:4px;padding:0 8px;box-sizing:border-box;position:relative}.shape-panel-row .input-box .unit[data-v-00889af3]{font-size:16px;position:absolute;left:32px;top:50%;transform:translateY(-60%)}.shape-panel-row .input-box .icon[data-v-00889af3]{width:16px;font-size:14px;display:flex;align-items:center;justify-content:center}.shape-panel-row .input-box .svg-icon[data-v-00889af3]{width:16px;height:16px;min-width:16px}.shape-panel-row .input-box .el-input-number[data-v-00889af3]{width:100%}.shape-panel-row .input-box .el-input-number[data-v-00889af3] .el-input__wrapper{padding:0!important;box-shadow:none!important;background:transparent!important}.shape-panel-row .input-box .el-input-number[data-v-00889af3] .el-input__wrapper .el-input__inner{text-align:left}.shape-panel-row .btn-box[data-v-00889af3]{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;cursor:pointer}.shape-panel-row .btn-box .btn-item[data-v-00889af3]{display:flex;align-items:center;justify-content:center;cursor:pointer;width:100%;background:#f5f6f7;border-radius:4px}.shape-panel-row .btn-box .btn-item .svg-icon[data-v-00889af3]{width:16px;height:16px;min-width:16px}.shape-panel-row .input-box[data-v-00889af3]:has(.is-focus){box-shadow:0 0 0 1px #1e6fff}.not-bind-width-height .input-box[data-v-00889af3]{width:100%}.bind-box[data-v-00889af3]{width:32px;height:32px;cursor:pointer;background:#f5f6f7;border-radius:4px;display:flex;align-items:center;justify-content:center}.bind-box .svg-icon[data-v-00889af3]{width:16px;height:16px;min-width:16px}.bind-box.active[data-v-00889af3]{background-color:#1e6fff!important}.roundness-box[data-v-00889af3]{display:flex;align-items:center;gap:8px;padding:0 16px}.roundness-box .btn-box[data-v-00889af3]{cursor:pointer;width:32px;min-width:32px;height:32px;background:#f5f6f7;border-radius:4px;display:flex;align-items:center;justify-content:center}.roundness-box .btn-box .svg-icon[data-v-00889af3]{width:16px;height:16px;min-width:16px}.item-label[data-v-00889af3]{font-weight:400;font-size:14px;color:#6f7588;word-break:keep-all}.divider[data-v-00889af3]{width:100%;height:1px;background:#eeeff0}.type-item-title[data-v-00889af3]{padding:0 16px}.type-item-title .title[data-v-00889af3]{font-weight:700;font-size:14px}.style-item[data-v-00889af3]{display:flex;gap:8px;padding:0 16px}.style-item .title[data-v-00889af3]{width:80px;min-width:80px;font-weight:400;font-size:14px;color:#6f7588;height:32px;line-height:32px}.style-item .style-boxs[data-v-00889af3]{width:100%;gap:8px;display:grid}.style-item .style-boxs .style-boxs-item[data-v-00889af3]{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.style-item .style-boxs .style-boxs-item[data-v-00889af3] .el-select__wrapper{box-shadow:none!important;background:#f5f6f7!important;padding:0 8px}.style-item .style-boxs .style-boxs-item[data-v-00889af3] .el-select__wrapper:hover{background:#f5f6f7}.style-item .style-boxs .style-boxs-item[data-v-00889af3] .is-focused{box-shadow:0 0 0 1px #1e6fff!important}.style-item .style-boxs .style-boxs-item[data-v-00889af3] .el-input__inner{color:#666;font-size:14px;text-align:center}.style-item .style-boxs .style-boxs-item[data-v-00889af3] .el-input__wrapper{background:#f5f6f7;box-shadow:none}.style-item .style-boxs .style-boxs-item[data-v-00889af3] .el-input__wrapper .el-input__inner{text-align:left!important}.style-item .style-boxs .style-boxs-item[data-v-00889af3] .el-input__wrapper.is-focus{box-shadow:0 0 0 1px #1e6fff!important}.style-item .input-value-box[data-v-00889af3]{background:#f5f6f7;border-radius:4px;width:100%;height:32px;display:flex;align-items:center;padding:0 8px}.style-item .input-value-box .svg-icon[data-v-00889af3]{width:20px;height:20px;border-radius:4px}.style-item .input-value-box .color-box[data-v-00889af3]{width:19px;height:19px;border-radius:4px;border:1px solid #eeeff0}.style-item .input-value-box .color-text[data-v-00889af3]{height:20px;display:flex;align-items:center;margin-left:8px}.context-menu[data-v-22c72497]{position:fixed;z-index:1000;background:#fff;border-radius:4px;box-shadow:0 2px 10px #0003;padding:4px 0;min-width:200px;font-family:sans-serif;font-size:14px;color:#333}.context-menu ul[data-v-22c72497]{list-style:none;margin:0;padding:0}.context-menu li[data-v-22c72497]{padding:8px 16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.context-menu li[data-v-22c72497]:hover{background-color:#f0f0f0}.divider[data-v-22c72497]{height:1px;background-color:#e0e0e0;margin:8px 0}.delete[data-v-22c72497]{color:red}.shortcut[data-v-22c72497]{font-size:12px;color:#999;margin-left:16px}.excalidraw-container[data-v-77c7eaaa]{width:100%;height:100%;overflow:hidden;background-color:#fff;background-image:linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(90px,rgba(0,0,0,.03) 1px,transparent 1px);background-size:20px 20px}canvas[data-v-77c7eaaa]{display:block}.text-editor[data-v-77c7eaaa]{background:transparent;border:none;padding:4px;box-sizing:border-box;margin:0;resize:none;outline:none;overflow:hidden;z-index:50;font-family:Virgil,sans-serif;white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word;width:100%;text-align:center;vertical-align:center}.excalidraw-textContainer[data-v-77c7eaaa]{display:flex;align-items:center;position:absolute;background:transparent!important;cursor:text}.color-box[data-v-9b04b94a]{display:grid;grid-template-columns:repeat(8,1fr);grid-gap:6px}.color-box .color-item[data-v-9b04b94a]{width:20px;height:20px;border-radius:4px;cursor:pointer;border:1px solid #EEEFF0;position:relative}.color-box .active[data-v-9b04b94a]:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% + 2px);height:calc(100% + 2px);border-radius:6px;border:2px solid #B7D1FF}.color-box .trans-icon[data-v-9b04b94a]{width:22px;height:22px;position:relative;cursor:pointer}.color-box .trans-icon .svg-icon[data-v-9b04b94a]{width:22px;height:22px}.color-box .color-item-add[data-v-9b04b94a]{width:20px;height:20px;border-radius:4px;cursor:pointer;border:1px solid transparent}.color-box .color-item-add .svg-icon[data-v-9b04b94a]{width:20px;height:20px}.board-name-container[data-v-59262e76]{position:absolute;top:24px;left:24px;height:44px;z-index:101;background:#ffffffe6;border-radius:4px;display:flex;align-items:center;box-shadow:0 2px 8px #363b4c26;padding:0 16px}.board-name-input[data-v-59262e76]{height:44px;font-size:16px;color:#363b4c;border:none;padding:0 12px;font-family:inherit;outline:none;min-width:200px;display:flex;align-items:center}.board-name-input[data-v-59262e76] .el-input__wrapper{box-shadow:none;background-color:transparent!important}.board-name-input[data-v-59262e76]:focus{box-shadow:0 2px 8px #363b4c40}.board-name-input.is-disabled[data-v-59262e76]{cursor:text!important}.board-name-input.is-disabled[data-v-59262e76] .el-input__wrapper{box-shadow:none!important;cursor:text!important}.board-name-input.is-disabled[data-v-59262e76] .el-input__inner{cursor:text!important}.action-item[data-v-59262e76]{width:32px;height:32px;min-width:32px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center}.action-item[data-v-59262e76]:hover{background:#f5f6f7}.svg-icon[data-v-59262e76]{width:20px;height:20px;cursor:pointer}.board-settings-popover,.preferences-popover{padding:8px 0!important}.menu-list[data-v-59262e76]{display:flex;flex-direction:column}.menu-item[data-v-59262e76]{height:36px;display:flex;align-items:center;justify-content:space-between;margin:0 8px;padding:0 8px;cursor:pointer;color:#363b4c;font-size:14px;transition:background .2s;border-radius:4px}.menu-item[data-v-59262e76]:hover{background:#f5f6f7}.menu-item-content[data-v-59262e76]{display:flex;align-items:center;gap:8px}.menu-icon[data-v-59262e76]{font-size:16px;width:16px;height:16px;color:#8c909e}.menu-arrow[data-v-59262e76]{font-size:16px;color:#8c909e}.preferences-list[data-v-59262e76]{display:flex;flex-direction:column;gap:8px}.preferences-list .line[data-v-59262e76]{width:100%;height:1px;background:#eeeff0}.preferences-list .grid-item[data-v-59262e76]{display:flex;align-items:center;padding:8px 16px;gap:8px;cursor:pointer;border-radius:4px}.preferences-list .grid-item .svg-icon[data-v-59262e76]{width:16px;height:16px}.preferences-list .grid-item[data-v-59262e76]:hover{background:#f5f6f7}.preferences-list .active[data-v-59262e76]{background:#d2e2ff!important;color:#1e6fff}.preference-item[data-v-59262e76]{display:flex;align-items:center;justify-content:space-between;padding:8px 16px}.preference-info[data-v-59262e76]{display:flex;flex-direction:column;gap:4px;width:100%}.preference-title[data-v-59262e76]{font-size:14px;color:#363b4c;display:flex;align-items:center;justify-content:space-between}.preference-desc[data-v-59262e76]{font-size:12px;color:#8c909e}.board-settings-popover{transform:translate(-10px)!important}.preferences-popover{transform:translate(6px)}.sub-preferences-popover{padding:0!important;transform:translate(6px)}.sub-preferences-popover .preferences-list{padding:16px!important;gap:8px}.sub-preferences-popover .preferences-list .title{font-weight:400;font-size:14px;color:#6f7588}.sub-preferences-popover .grid-list{padding:8px!important}.footer-controls[data-v-06dd6954]{position:absolute;bottom:24px;right:24px;display:flex;gap:12px;z-index:100;transition:right .3s ease}.zoom-controls[data-v-06dd6954],.history-controls[data-v-06dd6954],.help-controls[data-v-06dd6954]{display:flex;align-items:center;padding:4px;box-sizing:border-box;border-radius:var(--radius-md);box-shadow:var(--shadow-md);height:44px;gap:4px;border:0px}.tool-item[data-v-06dd6954]{cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}.tool-item[data-v-06dd6954]:hover{background:#f5f6f7}.tool-item .svg-icon[data-v-06dd6954]{width:24px;height:24px}.disabled[data-v-06dd6954]{cursor:not-allowed}.disabled[data-v-06dd6954]:hover{background-color:transparent}.separator[data-v-06dd6954]{width:1px;height:20px;background:var(--color-border);margin:0 4px}button[data-v-06dd6954]{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--color-text);font-size:16px;border:none;background:transparent;cursor:pointer}button[data-v-06dd6954]:hover:not(:disabled){background:#0000000d}button[data-v-06dd6954]:disabled{opacity:.3;cursor:not-allowed}.active[data-v-06dd6954]{background:#1e6fff1f!important;color:var(--color-primary)}button.destructive[data-v-06dd6954]:hover{background:#fff0f0;color:#ff4d4f}span[data-v-06dd6954]{font-size:12px;font-weight:500;color:var(--color-text);min-width:40px;text-align:center;-webkit-user-select:none;user-select:none}.modal-overlay[data-v-0caac542]{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0006;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1000;display:flex;align-items:center;justify-content:center}.help-dialog[data-v-0caac542]{width:800px;max-width:90vw;max-height:85vh;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;overflow:hidden}.header[data-v-0caac542]{padding:16px 24px;border-bottom:1px solid rgba(0,0,0,.1);display:flex;justify-content:space-between;align-items:center}.header h2[data-v-0caac542]{margin:0;font-size:18px;font-weight:600}.close-btn[data-v-0caac542]{background:none;border:none;font-size:24px;cursor:pointer;color:var(--color-text-muted);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}.close-btn[data-v-0caac542]:hover{background:#0000000d;color:var(--color-text)}.content[data-v-0caac542]{padding:24px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:40px}.column[data-v-0caac542]{display:flex;flex-direction:column;gap:24px}h3[data-v-0caac542]{margin:0;font-size:14px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase}.shortcut-list[data-v-0caac542]{display:flex;flex-direction:column;gap:8px}.item[data-v-0caac542]{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--color-text);padding:4px 0}.keys[data-v-0caac542]{display:flex;gap:4px;align-items:center}kbd[data-v-0caac542]{background:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;padding:2px 6px;font-family:monospace;font-size:12px;box-shadow:0 1px #0000001a;min-width:20px;text-align:center}.popovers-container[data-v-1fe4c384]{display:flex;align-items:center;gap:4px}.settings-btn[data-v-1fe4c384]{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;width:32px;height:32px;transition:all .2s;border-radius:4px}.settings-btn .svg-icon[data-v-1fe4c384]{width:20px;height:20px;border-radius:4px}.settings-btn .color-box[data-v-1fe4c384]{width:19px;height:19px;border-radius:4px;border:1px solid #eeeff0}.settings-btn .border-box[data-v-1fe4c384]{width:16px;height:16px;border-radius:4px;border:2px solid #eeeff0}.settings-btn[data-v-1fe4c384]:hover{background:#f5f6f7;color:var(--color-primary, #4b9fff)}.popover-content[data-v-1fe4c384]{display:flex;flex-direction:column;gap:8px}.popover-content .title[data-v-1fe4c384]{font-weight:400;font-size:14px;color:#6f7588;display:flex;align-items:center;justify-content:space-between}.popover-content .el-slider[data-v-1fe4c384]{--el-slider-button-size: 16px;width:100%}.popover-content .el-slider[data-v-1fe4c384] .el-input__wrapper,.popover-content .el-slider[data-v-1fe4c384] .el-select__wrapper,.popover-content .el-slider[data-v-1fe4c384] .el-textarea__inner{background:#f5f6f7;box-shadow:none}.popover-content .el-slider[data-v-1fe4c384] .el-slider__button{border-width:1px}.popover-content .el-slider[data-v-1fe4c384] .el-slider__runway.show-input{margin-right:20px}.popover-content .el-slider[data-v-1fe4c384] .el-input__wrapper{padding-left:8px;padding-right:8px}.popover-content .el-slider[data-v-1fe4c384] .el-input__wrapper .el-input__inner{text-align:left}.popover-content .el-slider[data-v-1fe4c384] .el-slider__input{width:56px}.separator[data-v-1fe4c384]{height:12px}.separator-horizontal[data-v-1fe4c384]{width:100%;height:1px;background-color:var(--color-border, #e0e0e0);margin:4px 0}.popover-title[data-v-1fe4c384]{font-size:12px;font-weight:500;color:var(--color-text, #333)}.font-size-select[data-v-1fe4c384]{display:flex;align-items:center;margin:0 4px}.font-size-select[data-v-1fe4c384] .el-select__wrapper{box-shadow:none!important;background:#f5f6f7!important;padding:0 8px}.font-size-select[data-v-1fe4c384] .el-select__wrapper:hover{background:#f5f6f7}.font-size-select[data-v-1fe4c384] .is-focused{box-shadow:0 0 0 1px #1e6fff!important}.font-size-select[data-v-1fe4c384] .el-input__inner{color:#666;font-size:14px;text-align:center}.button-group[data-v-1fe4c384]{display:flex;gap:4px}.button-group button[data-v-1fe4c384]{flex:1;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:#0000000a;color:var(--color-text, #333);border:1px solid transparent;cursor:pointer;transition:all .2s}.button-group button[data-v-1fe4c384]:hover{background:#f5f6f7}.button-group button.active[data-v-1fe4c384]{background:#f5f6f7;color:var(--color-primary, #4b9fff)}.button-group button i[data-v-1fe4c384]{font-size:18px}.divider[data-v-1fe4c384]{width:1px;height:20px;background:#e4e7eb}.sub-tools-container[data-v-1fe4c384]{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.sub-tools-container .sub-tool-item[data-v-1fe4c384]{display:flex;justify-content:space-between;align-items:center;border-radius:4px;justify-content:center;font-size:13px;color:var(--color-text);transition:all .2s;cursor:pointer;width:36px;height:36px}.sub-tools-container .sub-tool-item .svg-icon[data-v-1fe4c384]{width:24px;height:24px;min-width:24px}.sub-tools-container .sub-tool-item[data-v-1fe4c384]:hover{background:var(--color-bg-hover, #f0f2f5)}.sub-tools-container .sub-tool-item.active[data-v-1fe4c384]{background:#1e6fff1f;color:var(--color-primary, #1e6fff)}.sub-tools-container .sub-tool-item .sub-tool-label[data-v-1fe4c384]{font-weight:500}.sub-tools-container .sub-tool-item .sub-tool-shortcut[data-v-1fe4c384]{font-size:12px;color:var(--color-text-secondary, #8c909e)}.custom-toolbar-popover{border-radius:4px!important;padding:16px!important;box-shadow:0 4px 20px #00000026!important;border:1px solid rgba(0,0,0,.1)!important}.floating-toolbar[data-v-206d2632]{position:absolute;height:40px;background:#ffffffe6;border-radius:8px;box-shadow:0 4px 12px #00000026;display:flex;align-items:center;padding:0 8px;gap:8px;z-index:100;border:1px solid var(--color-border);-webkit-user-select:none;user-select:none}.drag-handle[data-v-206d2632]{cursor:grab;display:flex;align-items:center;justify-content:center;color:#666;width:24px;height:24px;border-radius:4px}.drag-handle .svg-icon[data-v-206d2632]{width:16px;height:16px}.drag-handle[data-v-206d2632]:active{cursor:grabbing}.divider[data-v-206d2632]{width:1px;height:20px;background:#e4e7eb}.settings-btn[data-v-206d2632]{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;width:32px;height:32px;border-radius:4px;transition:all .2s}.settings-btn .svg-icon[data-v-206d2632]{width:20px;height:20px}.settings-btn[data-v-206d2632]:hover{background:#0000000d;color:var(--color-primary)}.settings-btn i[data-v-206d2632]{font-size:18px}body{margin:0;padding:0;overflow:hidden;font-family:Inter,sans-serif}.app-container{width:100vw;height:100vh;position:relative}