template-designer 0.1.5 → 0.1.7

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 (7) hide show
  1. package/README.md +111 -40
  2. package/dist/{lodop-3286f6f2.mjs → lodop-25ec3af8.mjs} +28 -10
  3. package/dist/{rfid-b42bad45.mjs → rfid-b84da009.mjs} +34 -12
  4. package/dist/style.css +1 -1
  5. package/dist/template-designer.es.js +2502 -2462
  6. package/dist/template-designer.umd.js +12 -12
  7. package/package.json +2 -3
package/README.md CHANGED
@@ -16,6 +16,46 @@
16
16
  - 🖼️ 模板预览导出
17
17
  - 🔧 **双重组件控制**
18
18
 
19
+ ## 安装和使用
20
+
21
+ ```bash
22
+ npm install template-designer
23
+ ```
24
+
25
+ ```vue
26
+ <template>
27
+ <TemplateDesigner
28
+ :templateData="templateData"
29
+ :config="config"
30
+ :options="{ fields }"
31
+ template-type="lodop"
32
+ />
33
+ </template>
34
+
35
+ <script setup>
36
+ import { TemplateDesigner } from 'template-designer'
37
+
38
+ const templateData = ref({
39
+ width: 100,
40
+ height: 30,
41
+ printWidth: 103,
42
+ printHeight: 40,
43
+ items: []
44
+ })
45
+
46
+ const config = ref({
47
+ // 组件显示配置
48
+ })
49
+
50
+ const fields = ref([
51
+ { label: '商品条码', value: 'goodsSn' },
52
+ { label: '商品名称', value: 'goodsName' }
53
+ ])
54
+ </script>
55
+ ```
56
+
57
+ ## 配置说明
58
+
19
59
  ## 双重组件控制功能
20
60
 
21
61
  ### 功能说明
@@ -25,6 +65,16 @@
25
65
  1. **通过config参数控制**
26
66
  2. **通过配置文件控制** 如果配置文件中没有某个组件的配置，则不展示该组件
27
67
 
68
+ ## 属性面板布局控制功能
69
+
70
+ ### 功能说明
71
+
72
+ 组件库现在支持通过配置文件控制属性面板的布局：
73
+
74
+ 1. **独占一行**（`layout: 'full'`）- 属性项占满整行宽度
75
+ 2. **占半行**（`layout: 'half'`）- 属性项占半行宽度，可以并排显示，自动换行
76
+ 3. **默认布局** - 根据属性类型自动判断布局方式
77
+
28
78
  ### 使用方法
29
79
 
30
80
  #### 1. 通过config参数控制
@@ -109,46 +159,6 @@ const changeTemplateType = (type) => {
109
159
  - **LODOP配置**：显示所有组件（text, barcode, qrcode, image, rectangle, horline）
110
160
  - **RFID配置**：显示所有组件（text, barcode, qrcode）
111
161
 
112
- ## 安装和使用
113
-
114
- ```bash
115
- npm install template-designer
116
- ```
117
-
118
- ```vue
119
- <template>
120
- <TemplateDesigner
121
- :templateData="templateData"
122
- :config="config"
123
- :options="{ fields }"
124
- template-type="lodop"
125
- />
126
- </template>
127
-
128
- <script setup>
129
- import { TemplateDesigner } from 'template-designer'
130
-
131
- const templateData = ref({
132
- width: 100,
133
- height: 30,
134
- printWidth: 103,
135
- printHeight: 40,
136
- items: []
137
- })
138
-
139
- const config = ref({
140
- // 组件显示配置
141
- })
142
-
143
- const fields = ref([
144
- { label: '商品条码', value: 'goodsSn' },
145
- { label: '商品名称', value: 'goodsName' }
146
- ])
147
- </script>
148
- ```
149
-
150
- ## 配置说明
151
-
152
162
  ### 支持的模板类型
153
163
 
154
164
  - `lodop` - 默认配置，包含所有组件（对应 `lodop.js`）
@@ -164,6 +174,67 @@ const fields = ref([
164
174
  - `rectangle` - 矩形框组件
165
175
  - `horline` - 线段组件
166
176
 
177
+ ## 属性面板布局控制功能
178
+
179
+ ### 功能说明
180
+
181
+ 组件库现在支持通过配置文件控制属性面板的布局：
182
+
183
+ 1. **独占一行**（`layout: 'full'`）- 属性项占满整行宽度
184
+ 2. **占半行**（`layout: 'half'`）- 属性项占半行宽度，可以并排显示，自动换行
185
+ 3. **默认布局** - 根据属性类型自动判断布局方式
186
+
187
+ ### 使用方法
188
+
189
+ #### 1. 在配置文件中设置布局
190
+
191
+ ```javascript
192
+ // src/js/config/props/rfid.js
193
+ export default {
194
+ text: {
195
+ propertyPanel: [
196
+ {
197
+ prop: 'Title',
198
+ label: '标题',
199
+ default: '',
200
+ layout: 'full' // 独占一行
201
+ },
202
+ {
203
+ prop: 'FontName',
204
+ label: '字体名称',
205
+ type: 'select',
206
+ options: [...],
207
+ default: '黑体',
208
+ layout: 'half' // 占半行
209
+ },
210
+ {
211
+ prop: 'FontSize',
212
+ label: '字体大小',
213
+ type: 'number',
214
+ min: 1,
215
+ max: 100,
216
+ default: 10,
217
+ layout: 'half' // 占半行
218
+ }
219
+ ]
220
+ }
221
+ }
222
+ ```
223
+
224
+ #### 2. 布局类型说明
225
+
226
+ - **`layout: 'full'`** - 属性项独占一行，适合文本输入、文件上传等需要更多空间的属性
227
+ - **`layout: 'half'`** - 属性项占半行，适合下拉选择、数字输入等紧凑型属性
228
+ - **不设置layout** - 系统根据属性类型自动判断：
229
+ - `text`、`file`、`textarea` 类型默认独占一行
230
+ - 其他类型默认占半行
231
+
232
+ #### 3. 布局效果
233
+
234
+ - **独占一行**：属性项占满整行宽度，垂直排列
235
+ - **占半行**：两个属性项并排显示，自动换行，形成网格布局
236
+ - **响应式**：在不同屏幕尺寸下自动调整布局
237
+
167
238
  ## 开发
168
239
 
169
240
  ```bash
package/dist/{lodop-3286f6f2.mjs → lodop-25ec3af8.mjs} RENAMED
@@ -12,19 +12,25 @@ const e = {
12
12
  {
13
13
  prop: "Title",
14
14
  label: "标题",
15
- default: ""
15
+ default: "",
16
+ layout: "full"
17
+ // 独占一行
16
18
  },
17
19
  {
18
20
  prop: "FieldName",
19
21
  label: "字段名称",
20
22
  type: "select",
21
23
  optionsKey: "fields",
22
- default: ""
24
+ default: "",
25
+ layout: "full"
26
+ // 独占一行
23
27
  },
24
28
  {
25
29
  prop: "Text",
26
30
  label: "测试数据",
27
- default: "测试文本"
31
+ default: "测试文本",
32
+ layout: "full"
33
+ // 独占一行
28
34
  },
29
35
  {
30
36
  prop: "FontName",
@@ -35,7 +41,9 @@ const e = {
35
41
  { label: "楷体", value: "楷体", cssValue: "KaiTi" },
36
42
  { label: "宋体", value: "宋体", cssValue: "SimSun" }
37
43
  ],
38
- default: "黑体"
44
+ default: "黑体",
45
+ layout: "half"
46
+ // 占半行
39
47
  },
40
48
  {
41
49
  prop: "FontSize",
@@ -43,14 +51,18 @@ const e = {
43
51
  type: "number",
44
52
  min: 1,
45
53
  max: 100,
46
- default: 10
54
+ default: 10,
55
+ layout: "half"
56
+ // 占半行
47
57
  },
48
58
  {
49
59
  prop: "FontColor",
50
60
  label: "字体颜色",
51
61
  type: "color",
52
62
  hide: !0,
53
- default: "#000000"
63
+ default: "#000000",
64
+ layout: "half"
65
+ // 占半行
54
66
  },
55
67
  {
56
68
  prop: "Bold",
@@ -60,7 +72,9 @@ const e = {
60
72
  { label: "加粗", value: 1 },
61
73
  { label: "不加粗", value: 0 }
62
74
  ],
63
- default: 0
75
+ default: 0,
76
+ layout: "half"
77
+ // 占半行
64
78
  },
65
79
  {
66
80
  prop: "Italic",
@@ -70,7 +84,9 @@ const e = {
70
84
  { label: "是", value: 1 },
71
85
  { label: "否", value: 0 }
72
86
  ],
73
- default: 0
87
+ default: 0,
88
+ layout: "half"
89
+ // 占半行
74
90
  },
75
91
  {
76
92
  prop: "Underline",
@@ -203,7 +219,8 @@ const e = {
203
219
  label: "字段名称",
204
220
  type: "select",
205
221
  optionsKey: "fields",
206
- default: "goodsSn"
222
+ default: "goodsSn",
223
+ layout: "full"
207
224
  },
208
225
  {
209
226
  prop: "BarcodeValue",
@@ -260,7 +277,8 @@ const e = {
260
277
  label: "字段名称",
261
278
  type: "select",
262
279
  optionsKey: "fields",
263
- default: ""
280
+ default: "",
281
+ layout: "full"
264
282
  },
265
283
  {
266
284
  prop: "QRCodeValue",
package/dist/{rfid-b42bad45.mjs → rfid-b84da009.mjs} RENAMED
@@ -27,19 +27,25 @@ const e = {
27
27
  {
28
28
  prop: "Title",
29
29
  label: "标题",
30
- default: ""
30
+ default: "",
31
+ layout: "full"
32
+ // 独占一行
31
33
  },
32
34
  {
33
35
  prop: "FieldName",
34
36
  label: "字段名称",
35
37
  type: "select",
36
38
  optionsKey: "fields",
37
- default: ""
39
+ default: "",
40
+ layout: "full"
41
+ // 独占一行
38
42
  },
39
43
  {
40
44
  prop: "Text",
41
45
  label: "测试数据",
42
- default: "测试文本"
46
+ default: "测试文本",
47
+ layout: "full"
48
+ // 独占一行
43
49
  },
44
50
  {
45
51
  prop: "FontName",
@@ -50,7 +56,9 @@ const e = {
50
56
  { label: "楷体", value: "楷体", cssValue: "KaiTi" },
51
57
  { label: "宋体", value: "宋体", cssValue: "SimSun" }
52
58
  ],
53
- default: "黑体"
59
+ default: "黑体",
60
+ layout: "half"
61
+ // 占半行
54
62
  },
55
63
  {
56
64
  prop: "FontSize",
@@ -58,14 +66,18 @@ const e = {
58
66
  type: "number",
59
67
  min: 1,
60
68
  max: 100,
61
- default: 10
69
+ default: 10,
70
+ layout: "half"
71
+ // 占半行
62
72
  },
63
73
  {
64
74
  prop: "FontColor",
65
75
  label: "字体颜色",
66
76
  type: "color",
67
77
  hide: !0,
68
- default: "#000000"
78
+ default: "#000000",
79
+ layout: "half"
80
+ // 占半行
69
81
  },
70
82
  {
71
83
  prop: "Bold",
@@ -75,7 +87,9 @@ const e = {
75
87
  { label: "加粗", value: 1 },
76
88
  { label: "不加粗", value: 0 }
77
89
  ],
78
- default: 0
90
+ default: 0,
91
+ layout: "half"
92
+ // 占半行
79
93
  },
80
94
  {
81
95
  prop: "Italic",
@@ -85,7 +99,9 @@ const e = {
85
99
  { label: "是", value: 1 },
86
100
  { label: "否", value: 0 }
87
101
  ],
88
- default: 0
102
+ default: 0,
103
+ layout: "half"
104
+ // 占半行
89
105
  },
90
106
  {
91
107
  prop: "Alignment",
@@ -96,7 +112,9 @@ const e = {
96
112
  { label: "居中", value: 2 },
97
113
  { label: "居右", value: 3 }
98
114
  ],
99
- default: 2
115
+ default: 2,
116
+ layout: "half"
117
+ // 占半行
100
118
  },
101
119
  {
102
120
  prop: "TextWrap",
@@ -107,7 +125,9 @@ const e = {
107
125
  { label: "不换行&省略", value: 2 },
108
126
  { label: "不换行&隐藏", value: 3 }
109
127
  ],
110
- default: 1
128
+ default: 1,
129
+ layout: "half"
130
+ // 占半行
111
131
  }
112
132
  ]
113
133
  },
@@ -128,7 +148,8 @@ const e = {
128
148
  label: "字段名称",
129
149
  type: "select",
130
150
  optionsKey: "fields",
131
- default: "goodsSn"
151
+ default: "goodsSn",
152
+ layout: "full"
132
153
  },
133
154
  {
134
155
  prop: "BarcodeValue",
@@ -191,7 +212,8 @@ const e = {
191
212
  label: "字段名称",
192
213
  type: "select",
193
214
  optionsKey: "fields",
194
- default: ""
215
+ default: "",
216
+ layout: "full"
195
217
  },
196
218
  {
197
219
  prop: "QRCodeValue",
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .td-text-component{width:100%;height:100%;position:relative;display:flex;align-items:center;overflow:hidden;box-sizing:border-box}.td-text-content{width:100%;min-width:0;box-sizing:border-box}.label[data-v-a7fa57c5]{display:flex;align-items:center;justify-content:flex-start}.property-item[data-v-a7fa57c5]{display:flex;flex-direction:column;gap:4px}.property-item label[data-v-a7fa57c5]{font-size:14px;color:#666}.property-item input[data-v-a7fa57c5],.property-item select[data-v-a7fa57c5]{padding:4px 8px;border:1px solid #ddd;border-radius:4px}.property-item input[type=color][data-v-a7fa57c5]{height:32px;padding:2px}.property-item input[type=checkbox][data-v-a7fa57c5]{width:16px;height:16px}.file-input-container[data-v-a7fa57c5]{position:relative;display:flex;align-items:center;gap:8px}.file-input-container input[data-v-a7fa57c5]{height:100%!important}.file-url-input[data-v-a7fa57c5]{flex:1;padding:4px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px}.file-url-input[data-v-a7fa57c5]:disabled{background-color:#f5f5f5;cursor:not-allowed}.file-input[data-v-a7fa57c5]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.file-select-btn[data-v-a7fa57c5]{padding:4px 12px;border:1px solid #ddd;border-radius:4px;background:var(--el-color-primary);color:#fff;cursor:pointer;font-size:12px;white-space:nowrap;display:flex;align-items:center;gap:4px}.file-select-btn[data-v-a7fa57c5]:hover:not(:disabled){background:var(--el-color-primary-dark-2);border-color:var(--el-color-primary-dark-2)}.file-select-btn[data-v-a7fa57c5]:disabled{background:#ccc;cursor:not-allowed}.file-info[data-v-a7fa57c5]{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background-color:#f5f5f5;border-radius:4px;margin-top:4px}.file-name[data-v-a7fa57c5]{font-size:12px;color:#666;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clear-btn[data-v-a7fa57c5]{background:none;border:none;color:#ff4d4f;cursor:pointer;font-size:12px;padding:2px 6px;border-radius:2px}.clear-btn[data-v-a7fa57c5]:hover{background-color:#fff2f0}.property-panel[data-v-f70859fd]{padding:16px;background:#fff;border-left:1px solid #e4e7ed;overflow-y:auto;height:100%}.property-group[data-v-f70859fd]{margin-bottom:16px}.property-group-title[data-v-f70859fd]{font-size:14px;font-weight:500;color:#303133;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid #ebeef5}.property-item[data-v-f70859fd]{margin-bottom:12px}.text-property-panel .property-item[data-v-f70859fd]:last-child,.barcode-property-panel .property-item[data-v-f70859fd]:last-child,.qrcode-property-panel .property-item[data-v-f70859fd]:last-child,.image-property-panel .property-item[data-v-f70859fd]:last-child,.rectangle-property-panel .property-item[data-v-f70859fd]:last-child,.horline-property-panel .property-item[data-v-f70859fd]:last-child,.verline-property-panel .property-item[data-v-f70859fd]:last-child{margin-bottom:0}.barcode-component{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box}.barcode-component svg{width:100%!important;height:100%!important;max-width:100%;max-height:100%;display:block}.qrcode-component[data-v-6e726fcb]{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box}.qrcode-canvas-fixed[data-v-6e726fcb]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0;margin:0}.qrcode-image[data-v-6e726fcb]{display:block;width:100%!important;height:100%!important;padding:0;margin:0;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-crisp-edges;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;filter:none;-webkit-filter:none;object-fit:cover;object-position:center}.component-selection-overlay[data-v-6e726fcb]{position:absolute;border:2px dashed #1890ff;pointer-events:none;box-sizing:border-box;z-index:1000}.qrcode-property-panel[data-v-cce393d5]{display:flex;flex-direction:column;gap:12px}.property-item[data-v-cce393d5]{display:flex;flex-direction:column;gap:4px}.property-item label[data-v-cce393d5]{font-size:14px;color:#666}.property-item input[data-v-cce393d5],.property-item select[data-v-cce393d5]{padding:4px 8px;border:1px solid #ddd;border-radius:4px}.property-item input[type=color][data-v-cce393d5]{height:32px;padding:2px}.image-component[data-v-6edf2c8f]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background-color:#fafafa}.image-placeholder[data-v-6edf2c8f]{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#999;font-size:12px;gap:8px}.image-loading-overlay[data-v-6edf2c8f]{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.6);z-index:5}.image-content[data-v-6edf2c8f]{display:block;max-width:100%;max-height:100%;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-crisp-edges;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.component-selection-overlay[data-v-6edf2c8f]{position:absolute;border:2px dashed #1890ff;pointer-events:none;box-sizing:border-box;z-index:1000}.image-property-panel[data-v-462c8b63]{display:flex;flex-direction:column;gap:12px}.property-item[data-v-462c8b63]{display:flex;flex-direction:column;gap:4px}.property-item label[data-v-462c8b63]{font-size:14px;color:#666}.property-item input[data-v-462c8b63],.property-item select[data-v-462c8b63]{padding:4px 8px;border:1px solid #ddd;border-radius:4px}.property-item input[type=color][data-v-462c8b63]{height:32px;padding:2px}.rectangle-component{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible;box-sizing:border-box}.rectangle-content{width:100%;height:100%;box-sizing:border-box;position:relative}.hairline-edge{position:absolute;pointer-events:none}.component-selection-overlay{position:absolute;border:2px dashed #1890ff;pointer-events:none;box-sizing:border-box;z-index:1000}.rectangle-property-panel[data-v-e06ed44e]{display:flex;flex-direction:column;gap:12px}.horline-component{position:relative;display:flex;align-items:center;justify-content:center;overflow:visible;box-sizing:border-box}.line-selection-outline{position:absolute;left:0;top:0;border:2px dashed #1890ff;pointer-events:none;box-sizing:border-box;z-index:1000}.component-list[data-v-29028fa4]{background:#fff;display:flex;flex-direction:column;gap:20px}.component-group[data-v-29028fa4]{display:flex;flex-direction:column;gap:8px}.group-title[data-v-29028fa4]{font-size:14px;font-weight:600;color:#333;padding:8px 12px;border-left:4px solid var(--el-color-primary);background:linear-gradient(135deg,var(--el-color-primary-light-9) 0%,var(--el-color-primary-light-8) 100%);border-radius:0 6px 6px 0;margin-bottom:4px;box-shadow:0 1px 3px #0000001a}.group-content[data-v-29028fa4]{display:grid;grid-template-columns:1fr 1fr;grid-row-gap:8px;grid-column-gap:8px}.component-item[data-v-29028fa4]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 0;border:1px solid #ddd;border-radius:4px;cursor:grab;font-size:13px;color:#555;transition:all .2s ease;width:100%;height:70px;background:#fff;box-shadow:0 1px 3px #0000001a}.component-item[data-v-29028fa4]:hover{background-color:var(--el-color-primary-light-9);border-color:var(--el-color-primary);color:var(--el-color-primary);box-shadow:0 2px 8px #00000014}.component-item i[data-v-29028fa4]{font-size:24px;margin-bottom:8px;color:var(--el-color-primary)}.component-item span[data-v-29028fa4]{font-size:12px;text-align:center;color:#333}.component-item:hover i[data-v-29028fa4],.component-item:hover span[data-v-29028fa4]{color:var(--el-color-primary)!important}.ruler[data-v-3635eba4]{position:absolute;z-index:1}.ruler.horizontal[data-v-3635eba4]{left:20px;top:0;width:calc(100% - 40px);height:20px;border-bottom:none}.ruler.vertical[data-v-3635eba4]{top:20px;left:0;width:20px;height:calc(100% - 40px);border-right:none}.ruler-unit[data-v-3635eba4]{position:absolute}.ruler.horizontal .ruler-unit[data-v-3635eba4]{height:100%}.ruler.vertical .ruler-unit[data-v-3635eba4]{width:100%}.ruler-mark[data-v-3635eba4]{position:absolute;background:#999}.ruler.horizontal .ruler-mark[data-v-3635eba4]{bottom:0}.ruler.vertical .ruler-mark[data-v-3635eba4]{right:0}.ruler-text[data-v-3635eba4]{position:absolute;font-size:8px;color:#666;white-space:nowrap}.ruler.horizontal .ruler-text[data-v-3635eba4]{bottom:8px;transform:translate(-50%)}.ruler.vertical .ruler-text[data-v-3635eba4]{right:8px;transform:translateY(-50%) rotate(-90deg)}.add-btn[data-v-a4b90b63]{margin:10px 0}.tg-title[data-v-a4b90b63]{display:flex;align-items:center}.tg-title p[data-v-a4b90b63]{font-size:18px;font-weight:700}.tge-main[data-v-a4b90b63]{max-height:82vh;padding:0}.tge-text[data-v-a4b90b63]{font-size:14px;line-height:26px}.tge-content[data-v-a4b90b63]{display:flex;width:100%}.tge-block[data-v-a4b90b63]{display:flex;flex-direction:column;flex:1}.tge-title[data-v-a4b90b63]{padding:6px 0;font-size:14px;color:var(--el-color-primary)}.tge-img[data-v-a4b90b63]{width:100%;height:auto}.table-container[data-v-a4b90b63]{width:100%;border:1px dashed #ddd;border-radius:4px}.empty-placeholder[data-v-a4b90b63]{display:flex;align-items:center;justify-content:center;color:#999;padding:20px;border-radius:4px;min-height:80px}.graph-table[data-v-a4b90b63]{margin-top:10px}.tge-divider[data-v-a4b90b63]{width:1px;background:var(--el-border-color);margin:0 10px}.graph-table .el-table__header,.graph-table .el-table__body{width:100%!important}.graph-table .el-table__body{margin-bottom:10px!important}.graph-table .el-form-item__error{position:static!important;top:0!important}.graph-table .el-input-number{width:auto}.graph-table .el-input-number.is-without-controls .el-input__wrapper{padding-left:4px;padding-right:4px}button[data-v-e684cfd3]{display:flex;align-items:center;justify-content:center}.label-designer[data-v-e684cfd3]{display:flex;height:100%}.toolbar[data-v-e684cfd3]{width:200px;background:#fff;border-right:1px solid #e0e0e0;padding:16px;display:flex;flex-direction:column;gap:16px}.zoom-controls span[data-v-e684cfd3]{width:44px;text-align:center}.zoom-controls[data-v-e684cfd3]{display:flex;align-items:center;gap:8px;background:#f5f5f5;border-radius:4px;padding:4px 8px}.zoom-controls button[data-v-e684cfd3]{width:24px;height:24px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer}.zoom-controls button[data-v-e684cfd3]:disabled{opacity:.5;cursor:not-allowed}.center-container[data-v-e684cfd3]{display:flex;flex-direction:column;flex:1;overflow:hidden;height:100%}.center-toolbar[data-v-e684cfd3]{display:flex;align-items:center;justify-content:flex-end;padding:16px 16px 0;background:rgba(0,0,0,.05)}.canvas-container[data-v-e684cfd3]{width:100%;flex:1;padding:0 16px 16px;overflow:auto;background:rgba(0,0,0,.05);position:relative;display:flex;flex-direction:column}.canvas-wrapper[data-v-e684cfd3]{position:relative;transform-origin:0 0;overflow:visible;width:fit-content;height:fit-content;margin-top:20px;transition:all .2s ease;transform:translateZ(0);will-change:transform}.ruler-horizontal[data-v-e684cfd3]{position:absolute;left:0;top:0;right:0;height:24px;z-index:10;pointer-events:none}.ruler-vertical[data-v-e684cfd3]{position:absolute;left:0;top:0;bottom:0;width:24px;z-index:10;pointer-events:none}.canvas[data-v-e684cfd3]{position:relative;overflow:visible;z-index:1;position:absolute;left:21px;top:21px}.property-panel[data-v-e684cfd3]{width:260px;background:#fff;border-left:1px solid #ddd;padding:0 16px 16px;display:flex;flex-direction:column;gap:16px;position:relative;z-index:100;overflow-y:auto}.property-panel-title[data-v-e684cfd3]{position:sticky;top:0;left:0;right:0;background:#fff;z-index:100;display:flex;align-items:center;justify-content:flex-start;margin:10px 0 0}.position-controls[data-v-e684cfd3]{display:flex;flex-direction:column;gap:12px;padding:12px;background:#f5f5f5;border-radius:4px}.control-group[data-v-e684cfd3]{display:flex;align-items:center;justify-content:space-between;gap:4px}.control-group label[data-v-e684cfd3]{width:80px;font-size:14px;color:#666;text-align:end}.number-input[data-v-e684cfd3]{display:flex;align-items:center;gap:4px}.number-input input[data-v-e684cfd3]{width:90px;padding:4px;border:1px solid #ddd;border-radius:4px;text-align:center}.number-input button[data-v-e684cfd3]{width:24px;height:24px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer}.canvas-item[data-v-e684cfd3]{position:absolute;cursor:move;-webkit-user-select:none;user-select:none;z-index:10;transform:translateZ(0);will-change:transform;left:0;top:0}.resize-handle[data-v-e684cfd3]{position:absolute;width:6px;height:6px;background:#1890ff;border:1px solid #fff;box-shadow:0 0 3px #0000004d;cursor:pointer;z-index:1001;transition:all .2s ease;border-radius:1px;display:block!important;visibility:visible!important;opacity:1!important;transform:translateZ(0);will-change:transform;font-size:16px!important;line-height:1!important}.resize-handle[data-v-e684cfd3]:hover{background:#40a9ff;box-shadow:0 0 4px #0006}.resize-handle.top-left[data-v-e684cfd3]{top:-4px;left:-4px;background:#52c41a}.resize-handle.top-left[data-v-e684cfd3]:hover{background:#73d13d}.resize-handle.top-left[data-v-e684cfd3]:active{background:#389e0d}.resize-handle.top[data-v-e684cfd3]{top:-4px;left:50%;transform:translate(-50%)}.resize-handle.top[data-v-e684cfd3]:hover,.resize-handle.top[data-v-e684cfd3]:active{transform:translate(-50%)}.resize-handle.top-right[data-v-e684cfd3]{top:-4px;right:-4px;background:#52c41a}.resize-handle.top-right[data-v-e684cfd3]:hover{background:#73d13d}.resize-handle.top-right[data-v-e684cfd3]:active{background:#389e0d}.resize-handle.right[data-v-e684cfd3]{top:50%;right:-4px;transform:translateY(-50%)}.resize-handle.right[data-v-e684cfd3]:hover,.resize-handle.right[data-v-e684cfd3]:active{transform:translateY(-50%)}.resize-handle.bottom-right[data-v-e684cfd3]{bottom:-4px;right:-4px;background:#52c41a;z-index:1001}.resize-handle.bottom-right[data-v-e684cfd3]:hover{background:#73d13d}.resize-handle.bottom-right[data-v-e684cfd3]:active{background:#389e0d}.resize-handle.bottom[data-v-e684cfd3]{bottom:-4px;left:50%;transform:translate(-50%)}.resize-handle.bottom[data-v-e684cfd3]:hover,.resize-handle.bottom[data-v-e684cfd3]:active{transform:translate(-50%)}.resize-handle.bottom-left[data-v-e684cfd3]{bottom:-4px;left:-4px;background:#52c41a}.resize-handle.bottom-left[data-v-e684cfd3]:hover{background:#73d13d}.resize-handle.bottom-left[data-v-e684cfd3]:active{background:#389e0d}.resize-handle.left[data-v-e684cfd3]{top:50%;left:-4px;transform:translateY(-50%)}.resize-handle.left[data-v-e684cfd3]:hover,.resize-handle.left[data-v-e684cfd3]:active{transform:translateY(-50%)}.rotate-handle[data-v-e684cfd3]{position:absolute;top:-5px;left:50%;transform:translate(-50%);width:10px;height:10px;background:#1890ff;color:#fff;border-radius:50%;cursor:grab;z-index:1002;display:flex;align-items:center;justify-content:center}.size-label[data-v-e684cfd3]{display:flex;justify-content:center;flex-wrap:nowrap;white-space:nowrap;position:absolute;top:-14px;left:-4px;width:auto;min-width:70px;height:auto;background:rgba(255,34,34,.8);color:#fff;font-size:7px;border-radius:6px;z-index:20;line-height:1.2;box-shadow:0 2px 8px #00000014;pointer-events:none;padding:1px 8px 0}.delete-btn[data-v-e684cfd3]{position:absolute;top:-5px;right:-5px;width:10px;height:10px;background:#ff4d4f;color:#fff;border:none;border-radius:50%;cursor:pointer;z-index:1003;display:flex;align-items:center;justify-content:center}.drag-extend-lines[data-v-e684cfd3]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.drag-extend-line[data-v-e684cfd3]{position:absolute;pointer-events:none;z-index:998}.drag-extend-line.horizontal[data-v-e684cfd3]{width:100%;height:0;left:0;border-top:1px dashed rgb(177,179,184)}.drag-extend-line.vertical[data-v-e684cfd3]{width:0;height:100%;top:0;border-left:1px dashed rgb(177,179,184)}.drag-extend-line.rotated[data-v-e684cfd3]{position:absolute;border:1px dashed #1890ff;pointer-events:none;z-index:998}.alignment-guides[data-v-e684cfd3]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}.alignment-guide[data-v-e684cfd3]{background-color:transparent;pointer-events:none;z-index:9999}.alignment-guide.horizontal[data-v-e684cfd3]{position:absolute;left:0;right:0;height:1px;background:linear-gradient(to right,#ff4d4f 0%,#ff4d4f 50%,transparent 50%,transparent 100%);background-size:6px 1px;background-repeat:repeat-x;transform:translateZ(0);will-change:auto}.alignment-guide.vertical[data-v-e684cfd3]{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,#ff4d4f 0%,#ff4d4f 50%,transparent 50%,transparent 100%);background-size:1px 6px;background-repeat:repeat-y;transform:translateZ(0);will-change:auto}.number-input input[type=number][data-v-e684cfd3]::-webkit-inner-spin-button,.number-input input[type=number][data-v-e684cfd3]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.switch-input[data-v-e684cfd3]{display:flex;align-items:center}.switch-input input[type=checkbox][data-v-e684cfd3]{width:20px;height:20px;cursor:pointer;accent-color:#1890ff}.component-selected[data-v-e684cfd3],.component-current[data-v-e684cfd3]{outline:1px dashed #1890ff!important;outline-offset:0!important}.component-selected[data-v-e684cfd3],.component-current[data-v-e684cfd3]{box-sizing:border-box}.no-outline.component-selected[data-v-e684cfd3],.no-outline.component-current[data-v-e684cfd3]{outline:none!important}.component-config-missing[data-v-e684cfd3]{display:flex;align-items:center;justify-content:center;background:#fff3cd;border:1px dashed #ffc107;border-radius:4px;color:#856404;font-size:12px}.missing-config-tip[data-v-e684cfd3]{display:flex;align-items:center;gap:4px;padding:8px}.missing-config-tip .el-icon[data-v-e684cfd3]{font-size:14px;color:#ffc107}.template-designer[data-v-82f858e6]{overflow-y:hidden}.template-designer-border-top[data-v-82f858e6]{border-top:1px solid #e0e0e0}
1
+ .td-text-component{width:100%;height:100%;position:relative;display:flex;align-items:center;overflow:hidden;box-sizing:border-box}.td-text-content{width:100%;min-width:0;box-sizing:border-box}.label[data-v-a7fa57c5]{display:flex;align-items:center;justify-content:flex-start}.property-item[data-v-a7fa57c5]{display:flex;flex-direction:column;gap:4px}.property-item label[data-v-a7fa57c5]{font-size:14px;color:#666}.property-item input[data-v-a7fa57c5],.property-item select[data-v-a7fa57c5]{padding:4px 8px;border:1px solid #ddd;border-radius:4px}.property-item input[type=color][data-v-a7fa57c5]{height:32px;padding:2px}.property-item input[type=checkbox][data-v-a7fa57c5]{width:16px;height:16px}.file-input-container[data-v-a7fa57c5]{position:relative;display:flex;align-items:center;gap:8px}.file-input-container input[data-v-a7fa57c5]{height:100%!important}.file-url-input[data-v-a7fa57c5]{flex:1;padding:4px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px}.file-url-input[data-v-a7fa57c5]:disabled{background-color:#f5f5f5;cursor:not-allowed}.file-input[data-v-a7fa57c5]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.file-select-btn[data-v-a7fa57c5]{padding:4px 12px;border:1px solid #ddd;border-radius:4px;background:var(--el-color-primary);color:#fff;cursor:pointer;font-size:12px;white-space:nowrap;display:flex;align-items:center;gap:4px}.file-select-btn[data-v-a7fa57c5]:hover:not(:disabled){background:var(--el-color-primary-dark-2);border-color:var(--el-color-primary-dark-2)}.file-select-btn[data-v-a7fa57c5]:disabled{background:#ccc;cursor:not-allowed}.file-info[data-v-a7fa57c5]{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background-color:#f5f5f5;border-radius:4px;margin-top:4px}.file-name[data-v-a7fa57c5]{font-size:12px;color:#666;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clear-btn[data-v-a7fa57c5]{background:none;border:none;color:#ff4d4f;cursor:pointer;font-size:12px;padding:2px 6px;border-radius:2px}.clear-btn[data-v-a7fa57c5]:hover{background-color:#fff2f0}.property-panel[data-v-349b9d4a]{padding:16px;background:#fff;border-left:1px solid #e4e7ed;overflow-y:auto;height:100%}.property-group[data-v-349b9d4a]{margin-bottom:16px}.property-group-title[data-v-349b9d4a]{font-size:14px;font-weight:500;color:#303133;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid #ebeef5}.property-item[data-v-349b9d4a]{margin-bottom:12px}.text-property-panel .property-item[data-v-349b9d4a]:last-child,.barcode-property-panel .property-item[data-v-349b9d4a]:last-child,.qrcode-property-panel .property-item[data-v-349b9d4a]:last-child,.image-property-panel .property-item[data-v-349b9d4a]:last-child,.rectangle-property-panel .property-item[data-v-349b9d4a]:last-child,.horline-property-panel .property-item[data-v-349b9d4a]:last-child,.verline-property-panel .property-item[data-v-349b9d4a]:last-child{margin-bottom:0}.property-layout-container[data-v-349b9d4a]{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.property-item-wrapper[data-v-349b9d4a]{margin-bottom:0}.property-item-wrapper.full-width[data-v-349b9d4a]{width:100%;flex-basis:100%}.property-item-wrapper.half-width[data-v-349b9d4a]{width:calc(50% - 6px);flex-basis:calc(50% - 6px)}.property-item-wrapper.default-width[data-v-349b9d4a]{width:100%;flex-basis:100%}.property-item-wrapper .property-item[data-v-349b9d4a]{margin-bottom:0;width:100%}.barcode-component{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box}.barcode-component svg{width:100%!important;height:100%!important;max-width:100%;max-height:100%;display:block}.qrcode-component[data-v-6e726fcb]{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box}.qrcode-canvas-fixed[data-v-6e726fcb]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0;margin:0}.qrcode-image[data-v-6e726fcb]{display:block;width:100%!important;height:100%!important;padding:0;margin:0;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-crisp-edges;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;filter:none;-webkit-filter:none;object-fit:cover;object-position:center}.component-selection-overlay[data-v-6e726fcb]{position:absolute;border:2px dashed #1890ff;pointer-events:none;box-sizing:border-box;z-index:1000}.qrcode-property-panel[data-v-cce393d5]{display:flex;flex-direction:column;gap:12px}.property-item[data-v-cce393d5]{display:flex;flex-direction:column;gap:4px}.property-item label[data-v-cce393d5]{font-size:14px;color:#666}.property-item input[data-v-cce393d5],.property-item select[data-v-cce393d5]{padding:4px 8px;border:1px solid #ddd;border-radius:4px}.property-item input[type=color][data-v-cce393d5]{height:32px;padding:2px}.image-component[data-v-6edf2c8f]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background-color:#fafafa}.image-placeholder[data-v-6edf2c8f]{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#999;font-size:12px;gap:8px}.image-loading-overlay[data-v-6edf2c8f]{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.6);z-index:5}.image-content[data-v-6edf2c8f]{display:block;max-width:100%;max-height:100%;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-crisp-edges;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.component-selection-overlay[data-v-6edf2c8f]{position:absolute;border:2px dashed #1890ff;pointer-events:none;box-sizing:border-box;z-index:1000}.image-property-panel[data-v-462c8b63]{display:flex;flex-direction:column;gap:12px}.property-item[data-v-462c8b63]{display:flex;flex-direction:column;gap:4px}.property-item label[data-v-462c8b63]{font-size:14px;color:#666}.property-item input[data-v-462c8b63],.property-item select[data-v-462c8b63]{padding:4px 8px;border:1px solid #ddd;border-radius:4px}.property-item input[type=color][data-v-462c8b63]{height:32px;padding:2px}.rectangle-component{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible;box-sizing:border-box}.rectangle-content{width:100%;height:100%;box-sizing:border-box;position:relative}.hairline-edge{position:absolute;pointer-events:none}.component-selection-overlay{position:absolute;border:2px dashed #1890ff;pointer-events:none;box-sizing:border-box;z-index:1000}.rectangle-property-panel[data-v-e06ed44e]{display:flex;flex-direction:column;gap:12px}.horline-component{position:relative;display:flex;align-items:center;justify-content:center;overflow:visible;box-sizing:border-box}.line-selection-outline{position:absolute;left:0;top:0;border:2px dashed #1890ff;pointer-events:none;box-sizing:border-box;z-index:1000}.component-list[data-v-29028fa4]{background:#fff;display:flex;flex-direction:column;gap:20px}.component-group[data-v-29028fa4]{display:flex;flex-direction:column;gap:8px}.group-title[data-v-29028fa4]{font-size:14px;font-weight:600;color:#333;padding:8px 12px;border-left:4px solid var(--el-color-primary);background:linear-gradient(135deg,var(--el-color-primary-light-9) 0%,var(--el-color-primary-light-8) 100%);border-radius:0 6px 6px 0;margin-bottom:4px;box-shadow:0 1px 3px #0000001a}.group-content[data-v-29028fa4]{display:grid;grid-template-columns:1fr 1fr;grid-row-gap:8px;grid-column-gap:8px}.component-item[data-v-29028fa4]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 0;border:1px solid #ddd;border-radius:4px;cursor:grab;font-size:13px;color:#555;transition:all .2s ease;width:100%;height:70px;background:#fff;box-shadow:0 1px 3px #0000001a}.component-item[data-v-29028fa4]:hover{background-color:var(--el-color-primary-light-9);border-color:var(--el-color-primary);color:var(--el-color-primary);box-shadow:0 2px 8px #00000014}.component-item i[data-v-29028fa4]{font-size:24px;margin-bottom:8px;color:var(--el-color-primary)}.component-item span[data-v-29028fa4]{font-size:12px;text-align:center;color:#333}.component-item:hover i[data-v-29028fa4],.component-item:hover span[data-v-29028fa4]{color:var(--el-color-primary)!important}.ruler[data-v-3635eba4]{position:absolute;z-index:1}.ruler.horizontal[data-v-3635eba4]{left:20px;top:0;width:calc(100% - 40px);height:20px;border-bottom:none}.ruler.vertical[data-v-3635eba4]{top:20px;left:0;width:20px;height:calc(100% - 40px);border-right:none}.ruler-unit[data-v-3635eba4]{position:absolute}.ruler.horizontal .ruler-unit[data-v-3635eba4]{height:100%}.ruler.vertical .ruler-unit[data-v-3635eba4]{width:100%}.ruler-mark[data-v-3635eba4]{position:absolute;background:#999}.ruler.horizontal .ruler-mark[data-v-3635eba4]{bottom:0}.ruler.vertical .ruler-mark[data-v-3635eba4]{right:0}.ruler-text[data-v-3635eba4]{position:absolute;font-size:8px;color:#666;white-space:nowrap}.ruler.horizontal .ruler-text[data-v-3635eba4]{bottom:8px;transform:translate(-50%)}.ruler.vertical .ruler-text[data-v-3635eba4]{right:8px;transform:translateY(-50%) rotate(-90deg)}.add-btn[data-v-a4b90b63]{margin:10px 0}.tg-title[data-v-a4b90b63]{display:flex;align-items:center}.tg-title p[data-v-a4b90b63]{font-size:18px;font-weight:700}.tge-main[data-v-a4b90b63]{max-height:82vh;padding:0}.tge-text[data-v-a4b90b63]{font-size:14px;line-height:26px}.tge-content[data-v-a4b90b63]{display:flex;width:100%}.tge-block[data-v-a4b90b63]{display:flex;flex-direction:column;flex:1}.tge-title[data-v-a4b90b63]{padding:6px 0;font-size:14px;color:var(--el-color-primary)}.tge-img[data-v-a4b90b63]{width:100%;height:auto}.table-container[data-v-a4b90b63]{width:100%;border:1px dashed #ddd;border-radius:4px}.empty-placeholder[data-v-a4b90b63]{display:flex;align-items:center;justify-content:center;color:#999;padding:20px;border-radius:4px;min-height:80px}.graph-table[data-v-a4b90b63]{margin-top:10px}.tge-divider[data-v-a4b90b63]{width:1px;background:var(--el-border-color);margin:0 10px}.graph-table .el-table__header,.graph-table .el-table__body{width:100%!important}.graph-table .el-table__body{margin-bottom:10px!important}.graph-table .el-form-item__error{position:static!important;top:0!important}.graph-table .el-input-number{width:auto}.graph-table .el-input-number.is-without-controls .el-input__wrapper{padding-left:4px;padding-right:4px}button[data-v-e684cfd3]{display:flex;align-items:center;justify-content:center}.label-designer[data-v-e684cfd3]{display:flex;height:100%}.toolbar[data-v-e684cfd3]{width:200px;background:#fff;border-right:1px solid #e0e0e0;padding:16px;display:flex;flex-direction:column;gap:16px}.zoom-controls span[data-v-e684cfd3]{width:44px;text-align:center}.zoom-controls[data-v-e684cfd3]{display:flex;align-items:center;gap:8px;background:#f5f5f5;border-radius:4px;padding:4px 8px}.zoom-controls button[data-v-e684cfd3]{width:24px;height:24px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer}.zoom-controls button[data-v-e684cfd3]:disabled{opacity:.5;cursor:not-allowed}.center-container[data-v-e684cfd3]{display:flex;flex-direction:column;flex:1;overflow:hidden;height:100%}.center-toolbar[data-v-e684cfd3]{display:flex;align-items:center;justify-content:flex-end;padding:16px 16px 0;background:rgba(0,0,0,.05)}.canvas-container[data-v-e684cfd3]{width:100%;flex:1;padding:0 16px 16px;overflow:auto;background:rgba(0,0,0,.05);position:relative;display:flex;flex-direction:column}.canvas-wrapper[data-v-e684cfd3]{position:relative;transform-origin:0 0;overflow:visible;width:fit-content;height:fit-content;margin-top:20px;transition:all .2s ease;transform:translateZ(0);will-change:transform}.ruler-horizontal[data-v-e684cfd3]{position:absolute;left:0;top:0;right:0;height:24px;z-index:10;pointer-events:none}.ruler-vertical[data-v-e684cfd3]{position:absolute;left:0;top:0;bottom:0;width:24px;z-index:10;pointer-events:none}.canvas[data-v-e684cfd3]{position:relative;overflow:visible;z-index:1;position:absolute;left:21px;top:21px}.property-panel[data-v-e684cfd3]{width:260px;background:#fff;border-left:1px solid #ddd;padding:0 16px 16px;display:flex;flex-direction:column;gap:16px;position:relative;z-index:100;overflow-y:auto}.property-panel-title[data-v-e684cfd3]{position:sticky;top:0;left:0;right:0;background:#fff;z-index:100;display:flex;align-items:center;justify-content:flex-start;margin:10px 0 0}.position-controls[data-v-e684cfd3]{display:flex;flex-direction:column;gap:12px;padding:12px;background:#f5f5f5;border-radius:4px}.control-group[data-v-e684cfd3]{display:flex;align-items:center;justify-content:space-between;gap:4px}.control-group label[data-v-e684cfd3]{width:80px;font-size:14px;color:#666;text-align:end}.number-input[data-v-e684cfd3]{display:flex;align-items:center;gap:4px}.number-input input[data-v-e684cfd3]{width:90px;padding:4px;border:1px solid #ddd;border-radius:4px;text-align:center}.number-input button[data-v-e684cfd3]{width:24px;height:24px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer}.canvas-item[data-v-e684cfd3]{position:absolute;cursor:move;-webkit-user-select:none;user-select:none;z-index:10;transform:translateZ(0);will-change:transform;left:0;top:0}.resize-handle[data-v-e684cfd3]{position:absolute;width:6px;height:6px;background:#1890ff;border:1px solid #fff;box-shadow:0 0 3px #0000004d;cursor:pointer;z-index:1001;transition:all .2s ease;border-radius:1px;display:block!important;visibility:visible!important;opacity:1!important;transform:translateZ(0);will-change:transform;font-size:16px!important;line-height:1!important}.resize-handle[data-v-e684cfd3]:hover{background:#40a9ff;box-shadow:0 0 4px #0006}.resize-handle.top-left[data-v-e684cfd3]{top:-4px;left:-4px;background:#52c41a}.resize-handle.top-left[data-v-e684cfd3]:hover{background:#73d13d}.resize-handle.top-left[data-v-e684cfd3]:active{background:#389e0d}.resize-handle.top[data-v-e684cfd3]{top:-4px;left:50%;transform:translate(-50%)}.resize-handle.top[data-v-e684cfd3]:hover,.resize-handle.top[data-v-e684cfd3]:active{transform:translate(-50%)}.resize-handle.top-right[data-v-e684cfd3]{top:-4px;right:-4px;background:#52c41a}.resize-handle.top-right[data-v-e684cfd3]:hover{background:#73d13d}.resize-handle.top-right[data-v-e684cfd3]:active{background:#389e0d}.resize-handle.right[data-v-e684cfd3]{top:50%;right:-4px;transform:translateY(-50%)}.resize-handle.right[data-v-e684cfd3]:hover,.resize-handle.right[data-v-e684cfd3]:active{transform:translateY(-50%)}.resize-handle.bottom-right[data-v-e684cfd3]{bottom:-4px;right:-4px;background:#52c41a;z-index:1001}.resize-handle.bottom-right[data-v-e684cfd3]:hover{background:#73d13d}.resize-handle.bottom-right[data-v-e684cfd3]:active{background:#389e0d}.resize-handle.bottom[data-v-e684cfd3]{bottom:-4px;left:50%;transform:translate(-50%)}.resize-handle.bottom[data-v-e684cfd3]:hover,.resize-handle.bottom[data-v-e684cfd3]:active{transform:translate(-50%)}.resize-handle.bottom-left[data-v-e684cfd3]{bottom:-4px;left:-4px;background:#52c41a}.resize-handle.bottom-left[data-v-e684cfd3]:hover{background:#73d13d}.resize-handle.bottom-left[data-v-e684cfd3]:active{background:#389e0d}.resize-handle.left[data-v-e684cfd3]{top:50%;left:-4px;transform:translateY(-50%)}.resize-handle.left[data-v-e684cfd3]:hover,.resize-handle.left[data-v-e684cfd3]:active{transform:translateY(-50%)}.rotate-handle[data-v-e684cfd3]{position:absolute;top:-5px;left:50%;transform:translate(-50%);width:10px;height:10px;background:#1890ff;color:#fff;border-radius:50%;cursor:grab;z-index:1002;display:flex;align-items:center;justify-content:center}.size-label[data-v-e684cfd3]{display:flex;justify-content:center;flex-wrap:nowrap;white-space:nowrap;position:absolute;top:-14px;left:-4px;width:auto;min-width:70px;height:auto;background:rgba(255,34,34,.8);color:#fff;font-size:7px;border-radius:6px;z-index:20;line-height:1.2;box-shadow:0 2px 8px #00000014;pointer-events:none;padding:1px 8px 0}.delete-btn[data-v-e684cfd3]{position:absolute;top:-5px;right:-5px;width:10px;height:10px;background:#ff4d4f;color:#fff;border:none;border-radius:50%;cursor:pointer;z-index:1003;display:flex;align-items:center;justify-content:center}.drag-extend-lines[data-v-e684cfd3]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.drag-extend-line[data-v-e684cfd3]{position:absolute;pointer-events:none;z-index:998}.drag-extend-line.horizontal[data-v-e684cfd3]{width:100%;height:0;left:0;border-top:1px dashed rgb(177,179,184)}.drag-extend-line.vertical[data-v-e684cfd3]{width:0;height:100%;top:0;border-left:1px dashed rgb(177,179,184)}.drag-extend-line.rotated[data-v-e684cfd3]{position:absolute;border:1px dashed #1890ff;pointer-events:none;z-index:998}.alignment-guides[data-v-e684cfd3]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}.alignment-guide[data-v-e684cfd3]{background-color:transparent;pointer-events:none;z-index:9999}.alignment-guide.horizontal[data-v-e684cfd3]{position:absolute;left:0;right:0;height:1px;background:linear-gradient(to right,#ff4d4f 0%,#ff4d4f 50%,transparent 50%,transparent 100%);background-size:6px 1px;background-repeat:repeat-x;transform:translateZ(0);will-change:auto}.alignment-guide.vertical[data-v-e684cfd3]{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,#ff4d4f 0%,#ff4d4f 50%,transparent 50%,transparent 100%);background-size:1px 6px;background-repeat:repeat-y;transform:translateZ(0);will-change:auto}.number-input input[type=number][data-v-e684cfd3]::-webkit-inner-spin-button,.number-input input[type=number][data-v-e684cfd3]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.switch-input[data-v-e684cfd3]{display:flex;align-items:center}.switch-input input[type=checkbox][data-v-e684cfd3]{width:20px;height:20px;cursor:pointer;accent-color:#1890ff}.component-selected[data-v-e684cfd3],.component-current[data-v-e684cfd3]{outline:1px dashed #1890ff!important;outline-offset:0!important}.component-selected[data-v-e684cfd3],.component-current[data-v-e684cfd3]{box-sizing:border-box}.no-outline.component-selected[data-v-e684cfd3],.no-outline.component-current[data-v-e684cfd3]{outline:none!important}.component-config-missing[data-v-e684cfd3]{display:flex;align-items:center;justify-content:center;background:#fff3cd;border:1px dashed #ffc107;border-radius:4px;color:#856404;font-size:12px}.missing-config-tip[data-v-e684cfd3]{display:flex;align-items:center;gap:4px;padding:8px}.missing-config-tip .el-icon[data-v-e684cfd3]{font-size:14px;color:#ffc107}.template-designer[data-v-a48e3842]{overflow-y:hidden}.template-designer-border-top[data-v-a48e3842]{border-top:1px solid #e0e0e0}