template-designer 0.1.4 → 0.1.5
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.
- package/README.md +129 -88
- package/dist/rfid-b42bad45.mjs +255 -0
- package/dist/style.css +1 -1
- package/dist/template-designer.es.js +2829 -2812
- package/dist/template-designer.umd.js +12 -12
- package/package.json +1 -1
- package/dist/rfid-9c251163.mjs +0 -95
package/README.md
CHANGED
|
@@ -1,135 +1,176 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 模板设计器组件库
|
|
2
2
|
|
|
3
|
-
一个基于
|
|
3
|
+
一个基于Vue 3的可视化模板设计器组件库，支持拖拽、缩放、旋转等操作。
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## 功能特性
|
|
6
6
|
|
|
7
|
-
- 🎨
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
7
|
+
- 🎨 可视化模板设计
|
|
8
|
+
- 📝 文本组件
|
|
9
|
+
- 📊 条形码组件
|
|
10
|
+
- 🔲 二维码组件
|
|
11
|
+
- 🖼️ 图片组件（支持上传）
|
|
12
|
+
- 📐 矩形框组件
|
|
13
|
+
- ➖ 线段组件
|
|
14
|
+
- 🎯 组件拖拽、缩放、旋转
|
|
15
|
+
- 📋 属性面板配置
|
|
16
|
+
- 🖼️ 模板预览导出
|
|
17
|
+
- 🔧 **双重组件控制**
|
|
13
18
|
|
|
14
|
-
##
|
|
19
|
+
## 双重组件控制功能
|
|
15
20
|
|
|
16
|
-
|
|
17
|
-
npm install template-designer
|
|
18
|
-
```
|
|
21
|
+
### 功能说明
|
|
19
22
|
|
|
20
|
-
|
|
23
|
+
组件库现在支持双重控制来隐藏/显示组件：
|
|
21
24
|
|
|
22
|
-
|
|
25
|
+
1. **通过config参数控制**
|
|
26
|
+
2. **通过配置文件控制** 如果配置文件中没有某个组件的配置，则不展示该组件
|
|
23
27
|
|
|
24
|
-
|
|
25
|
-
...
|
|
26
|
-
import 'template-designer/dist/style.css'
|
|
27
|
-
...
|
|
28
|
-
```
|
|
28
|
+
### 使用方法
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
#### 1. 通过config参数控制
|
|
31
31
|
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
...
|
|
32
|
+
```javascript
|
|
33
|
+
// 隐藏特定组件
|
|
34
|
+
const config = {
|
|
35
|
+
text: { hidden: true }, // 隐藏文本组件
|
|
36
|
+
barcode: { hidden: true }, // 隐藏一维码组件
|
|
37
|
+
image: { hidden: true }, // 隐藏图片组件
|
|
38
|
+
rectangle: { hidden: true } // 隐藏矩形框组件
|
|
41
39
|
}
|
|
40
|
+
|
|
41
|
+
// 使用组件
|
|
42
|
+
<TemplateDesigner :config="config" />
|
|
42
43
|
```
|
|
43
44
|
|
|
44
|
-
|
|
45
|
+
#### 2. 通过配置文件控制
|
|
45
46
|
|
|
46
|
-
|
|
47
|
+
在 `src/js/config/props/` 目录下创建配置文件，只包含需要显示的组件：
|
|
47
48
|
|
|
48
|
-
```
|
|
49
|
-
|
|
49
|
+
```javascript
|
|
50
|
+
// src/js/config/props/xxx.js
|
|
51
|
+
export default {
|
|
52
|
+
text: {
|
|
53
|
+
// 文本组件配置
|
|
54
|
+
},
|
|
55
|
+
barcode: {
|
|
56
|
+
// 一维码组件配置
|
|
57
|
+
}
|
|
58
|
+
...
|
|
59
|
+
}
|
|
50
60
|
```
|
|
51
61
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
## 使用
|
|
55
|
-
|
|
56
|
-
### 全局注册
|
|
62
|
+
系统会自动根据 `template-type` 动态加载对应的配置文件：
|
|
57
63
|
|
|
58
64
|
```javascript
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
65
|
+
// src/js/config/index.js
|
|
66
|
+
export async function getPropsConfig(type) {
|
|
67
|
+
try {
|
|
68
|
+
// 直接通过type对应文件名动态导入
|
|
69
|
+
const config = await import(`./props/${type}.js`)
|
|
70
|
+
return config.default
|
|
71
|
+
} catch (error) {
|
|
72
|
+
// 如果指定的配置文件不存在，返回lodop配置作为默认值
|
|
73
|
+
const defaultConfig = await import('./props/lodop.js')
|
|
74
|
+
return defaultConfig.default
|
|
75
|
+
}
|
|
76
|
+
}
|
|
63
77
|
```
|
|
64
78
|
|
|
65
|
-
|
|
79
|
+
#### 3. 双重控制示例
|
|
66
80
|
|
|
67
81
|
```vue
|
|
68
82
|
<template>
|
|
69
|
-
<
|
|
70
|
-
|
|
71
|
-
|
|
83
|
+
<TemplateDesigner
|
|
84
|
+
:template-type="currentTemplateType"
|
|
85
|
+
:config="componentConfig"
|
|
86
|
+
/>
|
|
72
87
|
</template>
|
|
73
88
|
|
|
74
89
|
<script setup>
|
|
75
|
-
import
|
|
76
|
-
|
|
77
|
-
const templateData = {
|
|
78
|
-
// 你的模板数据
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
// options传入的结构须为{[optionsKey(config下配置文件中对应optionsKey)]: [{label: xx: value: xx}, ...]，因为考虑实际使用场景，就没有加自定义key支持
|
|
82
|
-
const options = {
|
|
83
|
-
// 属性选项值
|
|
84
|
-
}
|
|
90
|
+
import { ref } from 'vue'
|
|
85
91
|
|
|
86
|
-
//
|
|
87
|
-
const showGraphConfig = true
|
|
92
|
+
const currentTemplateType = ref('rfid') // 使用rfid配置文件
|
|
88
93
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
image: { hidden: true, request: () => {图片上传} }, // 隐藏图片组件
|
|
95
|
-
rectangle: { hidden: true }, // 隐藏矩形框组件
|
|
96
|
-
horline: { hidden: true } // 隐藏线段组件
|
|
94
|
+
const componentConfig = ref({
|
|
95
|
+
text: { hidden: false }, // 显示文本组件
|
|
96
|
+
barcode: { hidden: true }, // 隐藏一维码组件
|
|
97
|
+
// 注意：即使config中设置了显示，如果配置文件中没有该组件，仍然不会显示
|
|
98
|
+
})
|
|
97
99
|
|
|
100
|
+
// 切换模板类型
|
|
101
|
+
const changeTemplateType = (type) => {
|
|
102
|
+
currentTemplateType.value = type
|
|
98
103
|
}
|
|
99
104
|
</script>
|
|
100
105
|
```
|
|
101
106
|
|
|
102
|
-
|
|
107
|
+
### 实际效果
|
|
103
108
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
npm install
|
|
109
|
+
- **LODOP配置**：显示所有组件（text, barcode, qrcode, image, rectangle, horline）
|
|
110
|
+
- **RFID配置**：显示所有组件（text, barcode, qrcode）
|
|
107
111
|
|
|
108
|
-
|
|
109
|
-
npm run dev
|
|
112
|
+
## 安装和使用
|
|
110
113
|
|
|
111
|
-
|
|
112
|
-
npm
|
|
114
|
+
```bash
|
|
115
|
+
npm install template-designer
|
|
113
116
|
```
|
|
114
117
|
|
|
115
|
-
|
|
118
|
+
```vue
|
|
119
|
+
<template>
|
|
120
|
+
<TemplateDesigner
|
|
121
|
+
:templateData="templateData"
|
|
122
|
+
:config="config"
|
|
123
|
+
:options="{ fields }"
|
|
124
|
+
template-type="lodop"
|
|
125
|
+
/>
|
|
126
|
+
</template>
|
|
116
127
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
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>
|
|
120
148
|
```
|
|
121
149
|
|
|
122
|
-
##
|
|
150
|
+
## 配置说明
|
|
151
|
+
|
|
152
|
+
### 支持的模板类型
|
|
153
|
+
|
|
154
|
+
- `lodop` - 默认配置，包含所有组件（对应 `lodop.js`）
|
|
155
|
+
- `rfid` - RFID标签配置，包含所有组件（对应 `rfid.js`）
|
|
156
|
+
- 其他任何类型 - 系统会尝试加载 `./props/{type}.js` 文件，如果不存在则使用lodop配置作为默认值
|
|
157
|
+
|
|
158
|
+
### 组件类型
|
|
159
|
+
|
|
160
|
+
- `text` - 文本组件
|
|
161
|
+
- `barcode` - 一维码组件
|
|
162
|
+
- `qrcode` - 二维码组件
|
|
163
|
+
- `image` - 图片组件
|
|
164
|
+
- `rectangle` - 矩形框组件
|
|
165
|
+
- `horline` - 线段组件
|
|
166
|
+
|
|
167
|
+
## 开发
|
|
123
168
|
|
|
124
169
|
```bash
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
├── js/ # 工具函数和钩子
|
|
128
|
-
├── assets/ # 静态资源
|
|
129
|
-
├── style/ # 样式文件
|
|
130
|
-
└── index.vue # 主组件
|
|
170
|
+
npm run dev
|
|
171
|
+
npm run build
|
|
131
172
|
```
|
|
132
173
|
|
|
133
|
-
##
|
|
174
|
+
## 许可证
|
|
134
175
|
|
|
135
|
-
|
|
176
|
+
MIT
|
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
const e = {
|
|
2
|
+
text: {
|
|
3
|
+
x: 0,
|
|
4
|
+
y: 0,
|
|
5
|
+
width: 20,
|
|
6
|
+
height: 4.2,
|
|
7
|
+
rotation: 0,
|
|
8
|
+
Title: "",
|
|
9
|
+
FieldName: "",
|
|
10
|
+
Text: "测试文本",
|
|
11
|
+
FontName: "黑体",
|
|
12
|
+
FontSize: 10,
|
|
13
|
+
FontColor: "#000000",
|
|
14
|
+
Bold: 0,
|
|
15
|
+
Italic: 0,
|
|
16
|
+
Underline: 0,
|
|
17
|
+
Alignment: 2,
|
|
18
|
+
TextWrap: 1,
|
|
19
|
+
HOrient: 0,
|
|
20
|
+
VOrient: 0,
|
|
21
|
+
PenWidth: 0,
|
|
22
|
+
PenStyle: 0,
|
|
23
|
+
Stretch: 1,
|
|
24
|
+
PreviewOnly: 0,
|
|
25
|
+
ReadOnly: 0,
|
|
26
|
+
propertyPanel: [
|
|
27
|
+
{
|
|
28
|
+
prop: "Title",
|
|
29
|
+
label: "标题",
|
|
30
|
+
default: ""
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
prop: "FieldName",
|
|
34
|
+
label: "字段名称",
|
|
35
|
+
type: "select",
|
|
36
|
+
optionsKey: "fields",
|
|
37
|
+
default: ""
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
prop: "Text",
|
|
41
|
+
label: "测试数据",
|
|
42
|
+
default: "测试文本"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
prop: "FontName",
|
|
46
|
+
label: "字体名称",
|
|
47
|
+
type: "select",
|
|
48
|
+
options: [
|
|
49
|
+
{ label: "黑体", value: "黑体", cssValue: "SimHei" },
|
|
50
|
+
{ label: "楷体", value: "楷体", cssValue: "KaiTi" },
|
|
51
|
+
{ label: "宋体", value: "宋体", cssValue: "SimSun" }
|
|
52
|
+
],
|
|
53
|
+
default: "黑体"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
prop: "FontSize",
|
|
57
|
+
label: "字体大小",
|
|
58
|
+
type: "number",
|
|
59
|
+
min: 1,
|
|
60
|
+
max: 100,
|
|
61
|
+
default: 10
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
prop: "FontColor",
|
|
65
|
+
label: "字体颜色",
|
|
66
|
+
type: "color",
|
|
67
|
+
hide: !0,
|
|
68
|
+
default: "#000000"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
prop: "Bold",
|
|
72
|
+
label: "字体加粗",
|
|
73
|
+
type: "select",
|
|
74
|
+
options: [
|
|
75
|
+
{ label: "加粗", value: 1 },
|
|
76
|
+
{ label: "不加粗", value: 0 }
|
|
77
|
+
],
|
|
78
|
+
default: 0
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
prop: "Italic",
|
|
82
|
+
label: "是否斜体",
|
|
83
|
+
type: "select",
|
|
84
|
+
options: [
|
|
85
|
+
{ label: "是", value: 1 },
|
|
86
|
+
{ label: "否", value: 0 }
|
|
87
|
+
],
|
|
88
|
+
default: 0
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
prop: "Alignment",
|
|
92
|
+
label: "对齐方式",
|
|
93
|
+
type: "select",
|
|
94
|
+
options: [
|
|
95
|
+
{ label: "居左", value: 1 },
|
|
96
|
+
{ label: "居中", value: 2 },
|
|
97
|
+
{ label: "居右", value: 3 }
|
|
98
|
+
],
|
|
99
|
+
default: 2
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
prop: "TextWrap",
|
|
103
|
+
label: "文本换行",
|
|
104
|
+
type: "select",
|
|
105
|
+
options: [
|
|
106
|
+
{ label: "换行", value: 1 },
|
|
107
|
+
{ label: "不换行&省略", value: 2 },
|
|
108
|
+
{ label: "不换行&隐藏", value: 3 }
|
|
109
|
+
],
|
|
110
|
+
default: 1
|
|
111
|
+
}
|
|
112
|
+
]
|
|
113
|
+
},
|
|
114
|
+
barcode: {
|
|
115
|
+
x: 0,
|
|
116
|
+
y: 0,
|
|
117
|
+
width: 20,
|
|
118
|
+
height: 6,
|
|
119
|
+
rotation: 0,
|
|
120
|
+
FieldName: "goodsSn",
|
|
121
|
+
BarcodeValue: "1234567890",
|
|
122
|
+
CodeType: "128Auto",
|
|
123
|
+
AlignJustify: 0,
|
|
124
|
+
LineColor: "#000000",
|
|
125
|
+
propertyPanel: [
|
|
126
|
+
{
|
|
127
|
+
prop: "FieldName",
|
|
128
|
+
label: "字段名称",
|
|
129
|
+
type: "select",
|
|
130
|
+
optionsKey: "fields",
|
|
131
|
+
default: "goodsSn"
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
prop: "BarcodeValue",
|
|
135
|
+
label: "测试数据",
|
|
136
|
+
type: "text",
|
|
137
|
+
default: "1234567890"
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
prop: "CodeType",
|
|
141
|
+
label: "条码类型",
|
|
142
|
+
type: "select",
|
|
143
|
+
options: [
|
|
144
|
+
{ label: "CODE128", value: "128Auto", compValue: "CODE128" },
|
|
145
|
+
{ label: "CODE39", value: "Code39", compValue: "CODE39" },
|
|
146
|
+
{ label: "EAN13", value: "EAN13", compValue: "EAN13" }
|
|
147
|
+
],
|
|
148
|
+
hide: !0,
|
|
149
|
+
default: "128Auto"
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
prop: "AlignJustify",
|
|
153
|
+
label: "对齐方式",
|
|
154
|
+
type: "select",
|
|
155
|
+
options: [
|
|
156
|
+
{ label: "两端对齐", value: 0 },
|
|
157
|
+
{ label: "左", value: 1 },
|
|
158
|
+
{ label: "中", value: 2 },
|
|
159
|
+
{ label: "右", value: 3 }
|
|
160
|
+
],
|
|
161
|
+
hide: !0,
|
|
162
|
+
default: 0
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
prop: "LineColor",
|
|
166
|
+
label: "条形码颜色",
|
|
167
|
+
type: "color",
|
|
168
|
+
hide: !0,
|
|
169
|
+
default: "#000000"
|
|
170
|
+
}
|
|
171
|
+
]
|
|
172
|
+
},
|
|
173
|
+
qrcode: {
|
|
174
|
+
x: 0,
|
|
175
|
+
y: 0,
|
|
176
|
+
width: 10,
|
|
177
|
+
height: 10,
|
|
178
|
+
rotation: 0,
|
|
179
|
+
FieldName: "",
|
|
180
|
+
QRCodeValue: "FB-GOLD",
|
|
181
|
+
QRCodeVersion: 7,
|
|
182
|
+
QRCodeErrorLevel: "Q",
|
|
183
|
+
QRCodeEncodeMode: "B",
|
|
184
|
+
QRCodeForeground: "#000000",
|
|
185
|
+
QRCodeBackground: "transparent",
|
|
186
|
+
LockAspectRatio: !0,
|
|
187
|
+
lockAspectRatio: !0,
|
|
188
|
+
propertyPanel: [
|
|
189
|
+
{
|
|
190
|
+
prop: "FieldName",
|
|
191
|
+
label: "字段名称",
|
|
192
|
+
type: "select",
|
|
193
|
+
optionsKey: "fields",
|
|
194
|
+
default: ""
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
prop: "QRCodeValue",
|
|
198
|
+
label: "测试数据",
|
|
199
|
+
type: "text",
|
|
200
|
+
default: "FB-GOLD"
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
prop: "QRCodeVersion",
|
|
204
|
+
label: "二维码版本",
|
|
205
|
+
type: "number",
|
|
206
|
+
min: 1,
|
|
207
|
+
max: 40,
|
|
208
|
+
hide: !0,
|
|
209
|
+
default: 7
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
prop: "QRCodeErrorLevel",
|
|
213
|
+
label: "纠错级别",
|
|
214
|
+
type: "select",
|
|
215
|
+
options: [
|
|
216
|
+
{ label: "L (7%)", value: "L" },
|
|
217
|
+
{ label: "M (15%)", value: "M" },
|
|
218
|
+
{ label: "Q (25%)", value: "Q" },
|
|
219
|
+
{ label: "H (30%)", value: "H" }
|
|
220
|
+
],
|
|
221
|
+
hide: !0,
|
|
222
|
+
default: "Q"
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
prop: "QRCodeEncodeMode",
|
|
226
|
+
label: "编码模式",
|
|
227
|
+
type: "select",
|
|
228
|
+
options: [
|
|
229
|
+
{ label: "数字", value: "N" },
|
|
230
|
+
{ label: "二进制或汉语", value: "B" },
|
|
231
|
+
{ label: "英文字母", value: "A" }
|
|
232
|
+
],
|
|
233
|
+
hide: !0,
|
|
234
|
+
default: "B"
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
prop: "QRCodeForeground",
|
|
238
|
+
label: "前景色",
|
|
239
|
+
type: "color",
|
|
240
|
+
hide: !0,
|
|
241
|
+
default: "#000000"
|
|
242
|
+
},
|
|
243
|
+
{
|
|
244
|
+
prop: "QRCodeBackground",
|
|
245
|
+
label: "背景景色",
|
|
246
|
+
type: "color",
|
|
247
|
+
hide: !0,
|
|
248
|
+
default: "transparent"
|
|
249
|
+
}
|
|
250
|
+
]
|
|
251
|
+
}
|
|
252
|
+
};
|
|
253
|
+
export {
|
|
254
|
+
e as default
|
|
255
|
+
};
|
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-3ab62635]{background:#fff;display:flex;flex-direction:column;gap:20px}.component-group[data-v-3ab62635]{display:flex;flex-direction:column;gap:8px}.group-title[data-v-3ab62635]{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-3ab62635]{display:grid;grid-template-columns:1fr 1fr;grid-row-gap:8px;grid-column-gap:8px}.component-item[data-v-3ab62635]{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-3ab62635]: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-3ab62635]{font-size:24px;margin-bottom:8px;color:var(--el-color-primary)}.component-item span[data-v-3ab62635]{font-size:12px;text-align:center;color:#333}.component-item:hover i[data-v-3ab62635],.component-item:hover span[data-v-3ab62635]{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-fd4d9530]{display:flex;align-items:center;justify-content:center}.label-designer[data-v-fd4d9530]{display:flex;height:100%}.toolbar[data-v-fd4d9530]{width:200px;background:#fff;border-right:1px solid #e0e0e0;padding:16px;display:flex;flex-direction:column;gap:16px}.zoom-controls span[data-v-fd4d9530]{width:44px;text-align:center}.zoom-controls[data-v-fd4d9530]{display:flex;align-items:center;gap:8px;background:#f5f5f5;border-radius:4px;padding:4px 8px}.zoom-controls button[data-v-fd4d9530]{width:24px;height:24px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer}.zoom-controls button[data-v-fd4d9530]:disabled{opacity:.5;cursor:not-allowed}.center-container[data-v-fd4d9530]{display:flex;flex-direction:column;flex:1;overflow:hidden;height:100%}.center-toolbar[data-v-fd4d9530]{display:flex;align-items:center;justify-content:flex-end;padding:16px 16px 0;background:rgba(0,0,0,.05)}.canvas-container[data-v-fd4d9530]{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-fd4d9530]{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-fd4d9530]{position:absolute;left:0;top:0;right:0;height:24px;z-index:10;pointer-events:none}.ruler-vertical[data-v-fd4d9530]{position:absolute;left:0;top:0;bottom:0;width:24px;z-index:10;pointer-events:none}.canvas[data-v-fd4d9530]{position:relative;overflow:visible;z-index:1;position:absolute;left:21px;top:21px}.property-panel[data-v-fd4d9530]{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-fd4d9530]{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-fd4d9530]{display:flex;flex-direction:column;gap:12px;padding:12px;background:#f5f5f5;border-radius:4px}.control-group[data-v-fd4d9530]{display:flex;align-items:center;justify-content:space-between;gap:4px}.control-group label[data-v-fd4d9530]{width:80px;font-size:14px;color:#666;text-align:end}.number-input[data-v-fd4d9530]{display:flex;align-items:center;gap:4px}.number-input input[data-v-fd4d9530]{width:90px;padding:4px;border:1px solid #ddd;border-radius:4px;text-align:center}.number-input button[data-v-fd4d9530]{width:24px;height:24px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer}.canvas-item[data-v-fd4d9530]{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-fd4d9530]{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-fd4d9530]:hover{background:#40a9ff;box-shadow:0 0 4px #0006}.resize-handle.top-left[data-v-fd4d9530]{top:-4px;left:-4px;background:#52c41a}.resize-handle.top-left[data-v-fd4d9530]:hover{background:#73d13d}.resize-handle.top-left[data-v-fd4d9530]:active{background:#389e0d}.resize-handle.top[data-v-fd4d9530]{top:-4px;left:50%;transform:translate(-50%)}.resize-handle.top[data-v-fd4d9530]:hover,.resize-handle.top[data-v-fd4d9530]:active{transform:translate(-50%)}.resize-handle.top-right[data-v-fd4d9530]{top:-4px;right:-4px;background:#52c41a}.resize-handle.top-right[data-v-fd4d9530]:hover{background:#73d13d}.resize-handle.top-right[data-v-fd4d9530]:active{background:#389e0d}.resize-handle.right[data-v-fd4d9530]{top:50%;right:-4px;transform:translateY(-50%)}.resize-handle.right[data-v-fd4d9530]:hover,.resize-handle.right[data-v-fd4d9530]:active{transform:translateY(-50%)}.resize-handle.bottom-right[data-v-fd4d9530]{bottom:-4px;right:-4px;background:#52c41a;z-index:1001}.resize-handle.bottom-right[data-v-fd4d9530]:hover{background:#73d13d}.resize-handle.bottom-right[data-v-fd4d9530]:active{background:#389e0d}.resize-handle.bottom[data-v-fd4d9530]{bottom:-4px;left:50%;transform:translate(-50%)}.resize-handle.bottom[data-v-fd4d9530]:hover,.resize-handle.bottom[data-v-fd4d9530]:active{transform:translate(-50%)}.resize-handle.bottom-left[data-v-fd4d9530]{bottom:-4px;left:-4px;background:#52c41a}.resize-handle.bottom-left[data-v-fd4d9530]:hover{background:#73d13d}.resize-handle.bottom-left[data-v-fd4d9530]:active{background:#389e0d}.resize-handle.left[data-v-fd4d9530]{top:50%;left:-4px;transform:translateY(-50%)}.resize-handle.left[data-v-fd4d9530]:hover,.resize-handle.left[data-v-fd4d9530]:active{transform:translateY(-50%)}.rotate-handle[data-v-fd4d9530]{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-fd4d9530]{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-fd4d9530]{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-fd4d9530]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.drag-extend-line[data-v-fd4d9530]{position:absolute;pointer-events:none;z-index:998}.drag-extend-line.horizontal[data-v-fd4d9530]{width:100%;height:0;left:0;border-top:1px dashed rgb(177,179,184)}.drag-extend-line.vertical[data-v-fd4d9530]{width:0;height:100%;top:0;border-left:1px dashed rgb(177,179,184)}.drag-extend-line.rotated[data-v-fd4d9530]{position:absolute;border:1px dashed #1890ff;pointer-events:none;z-index:998}.alignment-guides[data-v-fd4d9530]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}.alignment-guide[data-v-fd4d9530]{background-color:transparent;pointer-events:none;z-index:9999}.alignment-guide.horizontal[data-v-fd4d9530]{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-fd4d9530]{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-fd4d9530]::-webkit-inner-spin-button,.number-input input[type=number][data-v-fd4d9530]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.switch-input[data-v-fd4d9530]{display:flex;align-items:center}.switch-input input[type=checkbox][data-v-fd4d9530]{width:20px;height:20px;cursor:pointer;accent-color:#1890ff}.component-selected[data-v-fd4d9530],.component-current[data-v-fd4d9530]{outline:1px dashed #1890ff!important;outline-offset:0!important}.component-selected[data-v-fd4d9530],.component-current[data-v-fd4d9530]{box-sizing:border-box}.no-outline.component-selected[data-v-fd4d9530],.no-outline.component-current[data-v-fd4d9530]{outline:none!important}.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-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}
|