@ebiz/designer-components 0.1.46 → 0.1.48
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/dist/designer-components.css +1 -1
- package/dist/index.mjs +8481 -8403
- package/package.json +1 -1
- package/src/components/EbizDetailItem.vue +216 -90
- package/src/components/EbizDetailView.vue +84 -36
- package/src/components/EbizDiv.vue +8 -1
- package/src/views/EbizDetailViewDemo.vue +221 -10
|
@@ -19,6 +19,78 @@
|
|
|
19
19
|
</div>
|
|
20
20
|
|
|
21
21
|
|
|
22
|
+
<div class="demo-section">
|
|
23
|
+
<h2>TDesign栅格布局 - span功能和响应式</h2>
|
|
24
|
+
<div class="demo-description">
|
|
25
|
+
<p><strong>功能升级：</strong>现已使用 <a href="https://tdesign.tencent.com/vue-next/components/grid" target="_blank">TDesign栅格系统</a>，提供更强大的响应式支持！</p>
|
|
26
|
+
<p><strong>核心优势：</strong></p>
|
|
27
|
+
<ul>
|
|
28
|
+
<li>基于24栅格系统，更灵活的布局控制</li>
|
|
29
|
+
<li>内置响应式断点(xs/sm/md/lg/xl/xxl)</li>
|
|
30
|
+
<li>更好的浏览器兼容性（基于flexbox）</li>
|
|
31
|
+
<li>自动处理移动端适配，无需手动CSS</li>
|
|
32
|
+
</ul>
|
|
33
|
+
<p><strong>配置示例：</strong></p>
|
|
34
|
+
<pre><code>// 字段配置
|
|
35
|
+
{
|
|
36
|
+
key: 'description',
|
|
37
|
+
label: '个人描述',
|
|
38
|
+
type: 'html',
|
|
39
|
+
span: 4 // 跨越4列
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// 响应式配置
|
|
43
|
+
responsive: {
|
|
44
|
+
xs: 1, // <576px 单列
|
|
45
|
+
sm: 1, // ≥576px 单列
|
|
46
|
+
md: 2, // ≥768px 双列
|
|
47
|
+
lg: 2, // ≥992px 双列
|
|
48
|
+
xl: 3, // ≥1200px 三列
|
|
49
|
+
xxl: 4 // ≥1400px 四列
|
|
50
|
+
}</code></pre>
|
|
51
|
+
</div>
|
|
52
|
+
<EbizDetailView
|
|
53
|
+
:data="staticData"
|
|
54
|
+
:fields="spanFields"
|
|
55
|
+
:columns="4"
|
|
56
|
+
layout="horizontal"
|
|
57
|
+
:labelWidth="80"
|
|
58
|
+
labelColor="#666666"
|
|
59
|
+
/>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div class="demo-section">
|
|
63
|
+
<h2>响应式测试</h2>
|
|
64
|
+
<div class="demo-description">
|
|
65
|
+
<p><strong>测试说明：</strong>调整浏览器窗口大小，观察布局自动适配效果。</p>
|
|
66
|
+
<p><strong>断点说明：</strong></p>
|
|
67
|
+
<ul>
|
|
68
|
+
<li>xs: <576px - 显示1列</li>
|
|
69
|
+
<li>sm: ≥576px - 显示2列</li>
|
|
70
|
+
<li>md: ≥768px - 显示2列</li>
|
|
71
|
+
<li>lg: ≥992px - 显示3列</li>
|
|
72
|
+
<li>xl: ≥1200px - 显示4列</li>
|
|
73
|
+
<li>xxl: ≥1400px - 显示4列</li>
|
|
74
|
+
</ul>
|
|
75
|
+
</div>
|
|
76
|
+
<EbizDetailView
|
|
77
|
+
:data="staticData"
|
|
78
|
+
:fields="basicFields"
|
|
79
|
+
layout="horizontal"
|
|
80
|
+
:gap="24"
|
|
81
|
+
:labelWidth="100"
|
|
82
|
+
labelColor="#333"
|
|
83
|
+
:responsive="{
|
|
84
|
+
xs: 1,
|
|
85
|
+
sm: 2,
|
|
86
|
+
md: 2,
|
|
87
|
+
lg: 3,
|
|
88
|
+
xl: 4,
|
|
89
|
+
xxl: 4
|
|
90
|
+
}"
|
|
91
|
+
/>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
22
94
|
<div class="demo-section">
|
|
23
95
|
<h2>自定义字段 - 使用slot</h2>
|
|
24
96
|
<EbizDetailView :dataId="10" :apiConfig="{
|
|
@@ -26,16 +98,84 @@
|
|
|
26
98
|
key: 'release_note_detail'
|
|
27
99
|
}" :columns="3" layout="horizontal" :gap="16" :labelWidth="50" labelColor="#666666">
|
|
28
100
|
<template #default="{data}">
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
101
|
+
<EbizDetailItem label="姓名" type="text" :value="data.visitors" />
|
|
102
|
+
<EbizDetailItem label="邮箱" type="text" :value="staticData.email" />
|
|
103
|
+
<EbizDetailItem label="部门" type="text" :value="staticData.department" />
|
|
104
|
+
<EbizDetailItem label="状态" type="status" :value="staticData.status" />
|
|
105
|
+
<EbizDetailItem label="负责人" type="user" :value="staticData.manager" @user-click="handleUserClick" />
|
|
106
|
+
<EbizDetailItem label="标签" type="tags" :value="staticData.tags" />
|
|
107
|
+
<EbizDetailItem label="入职日期" type="date" :value="data.release_time" />
|
|
108
|
+
<EbizDetailItem label="薪资" type="currency" :value="staticData.salary" />
|
|
109
|
+
<EbizDetailItem label="附件" type="file" :value="staticData.files" @download-file="handleDownloadFile" />
|
|
110
|
+
<EbizDetailItem label="个人主页" type="link" :value="staticData.website" @link-click="handleLinkClick" />
|
|
111
|
+
</template>
|
|
112
|
+
</EbizDetailView>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<div class="demo-section">
|
|
116
|
+
<h2>增强的Slot支持 - 使用wrapItem函数</h2>
|
|
117
|
+
<div class="demo-description">
|
|
118
|
+
<p><strong>新增功能：</strong></p>
|
|
119
|
+
<ul>
|
|
120
|
+
<li><strong>内置栅格：</strong>EbizDetailItem 内部已集成 TDesign 栅格布局</li>
|
|
121
|
+
<li><strong>简化使用：</strong>直接在 EbizDetailItem 上设置 span 等属性</li>
|
|
122
|
+
<li><strong>响应式支持：</strong>支持 xs/sm/md/lg/xl/xxl 断点配置</li>
|
|
123
|
+
<li><strong>更好封装：</strong>组件更独立，无需外层包装</li>
|
|
124
|
+
</ul>
|
|
125
|
+
<p><strong>使用示例：</strong></p>
|
|
126
|
+
<pre><code><EbizDetailItem
|
|
127
|
+
label="标题"
|
|
128
|
+
:value="content"
|
|
129
|
+
:span="2" // 默认跨2列
|
|
130
|
+
:xs="4" // 超小屏跨4列
|
|
131
|
+
:md="3" /> // 中等屏跨3列</code></pre>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<EbizDetailView :data="staticData" :columns="4" layout="horizontal" :gap="20" :labelWidth="80">
|
|
135
|
+
<template #default="{data}">
|
|
136
|
+
<!-- 现在直接使用EbizDetailItem，无需外层包装 -->
|
|
137
|
+
<EbizDetailItem
|
|
138
|
+
label="姓名"
|
|
139
|
+
type="text"
|
|
140
|
+
:value="data.name"
|
|
141
|
+
:required="true"
|
|
142
|
+
:span="4" />
|
|
143
|
+
|
|
144
|
+
<EbizDetailItem
|
|
145
|
+
label="邮箱"
|
|
146
|
+
type="text"
|
|
147
|
+
:value="data.email"
|
|
148
|
+
:span="6" />
|
|
149
|
+
|
|
150
|
+
<EbizDetailItem
|
|
151
|
+
label="个人网站"
|
|
152
|
+
type="link"
|
|
153
|
+
:value="data.website"
|
|
154
|
+
:span="4"
|
|
155
|
+
@link-click="handleLinkClick" />
|
|
156
|
+
|
|
157
|
+
<!-- 响应式配置示例 -->
|
|
158
|
+
<EbizDetailItem
|
|
159
|
+
label="技能标签"
|
|
160
|
+
type="tags"
|
|
161
|
+
:value="data.tags"
|
|
162
|
+
:span="4"
|
|
163
|
+
:lg="12" />
|
|
164
|
+
|
|
165
|
+
<EbizDetailItem
|
|
166
|
+
label="状态"
|
|
167
|
+
type="status"
|
|
168
|
+
:value="data.status"
|
|
169
|
+
:span="4" />
|
|
170
|
+
|
|
171
|
+
<!-- 跨列的详细描述 -->
|
|
172
|
+
<EbizDetailItem
|
|
173
|
+
label="详细描述"
|
|
174
|
+
layout="vertical"
|
|
175
|
+
type="html"
|
|
176
|
+
:value="data.description"
|
|
177
|
+
:span="12"
|
|
178
|
+
:xs="12" />
|
|
39
179
|
</template>
|
|
40
180
|
</EbizDetailView>
|
|
41
181
|
</div>
|
|
@@ -116,6 +256,19 @@ const basicFields = ref([
|
|
|
116
256
|
{ key: 'tags', label: '标签', type: 'tags' }
|
|
117
257
|
])
|
|
118
258
|
|
|
259
|
+
// 列跨度演示字段配置
|
|
260
|
+
const spanFields = ref([
|
|
261
|
+
{ key: 'name', label: '姓名', type: 'text', span: 1 },
|
|
262
|
+
{ key: 'email', label: '邮箱', type: 'text', span: 1 },
|
|
263
|
+
{ key: 'department', label: '部门', type: 'text', span: 1 },
|
|
264
|
+
{ key: 'status', label: '状态', type: 'status', span: 1 },
|
|
265
|
+
{ key: 'description', label: '个人描述', type: 'html', span: 4 },
|
|
266
|
+
{ key: 'manager', label: '负责人', type: 'user', span: 2 },
|
|
267
|
+
{ key: 'tags', label: '技能标签', type: 'tags', span: 2 },
|
|
268
|
+
{ key: 'experience', label: '工作经验', type: 'text', span: 3 },
|
|
269
|
+
{ key: 'skillScore', label: '技能分数', type: 'number', span: 1 }
|
|
270
|
+
])
|
|
271
|
+
|
|
119
272
|
// 事件处理函数
|
|
120
273
|
const handleUserClick = (user) => {
|
|
121
274
|
eventLogs.value.unshift(`用户点击: ${user.name} (${user.department})`)
|
|
@@ -199,4 +352,62 @@ h1 {
|
|
|
199
352
|
.event-log li:last-child {
|
|
200
353
|
border-bottom: none;
|
|
201
354
|
}
|
|
355
|
+
|
|
356
|
+
.demo-description {
|
|
357
|
+
margin-bottom: 20px;
|
|
358
|
+
padding: 15px;
|
|
359
|
+
background: #f8f9fa;
|
|
360
|
+
border-radius: 6px;
|
|
361
|
+
border-left: 4px solid #0052d9;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.demo-description p {
|
|
365
|
+
margin: 8px 0;
|
|
366
|
+
font-size: 14px;
|
|
367
|
+
line-height: 1.5;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.demo-description code {
|
|
371
|
+
padding: 2px 6px;
|
|
372
|
+
background: #e9ecef;
|
|
373
|
+
border-radius: 3px;
|
|
374
|
+
font-size: 12px;
|
|
375
|
+
color: #d63384;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.demo-description pre {
|
|
379
|
+
margin: 10px 0;
|
|
380
|
+
padding: 12px;
|
|
381
|
+
background: #2d3748;
|
|
382
|
+
color: #e2e8f0;
|
|
383
|
+
border-radius: 4px;
|
|
384
|
+
overflow-x: auto;
|
|
385
|
+
font-size: 12px;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.demo-description pre code {
|
|
389
|
+
background: none;
|
|
390
|
+
color: inherit;
|
|
391
|
+
padding: 0;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.demo-description ul {
|
|
395
|
+
margin: 10px 0;
|
|
396
|
+
padding-left: 20px;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.demo-description li {
|
|
400
|
+
margin: 4px 0;
|
|
401
|
+
font-size: 14px;
|
|
402
|
+
line-height: 1.5;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
.demo-description a {
|
|
406
|
+
color: #0052d9;
|
|
407
|
+
text-decoration: none;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.demo-description a:hover {
|
|
411
|
+
text-decoration: underline;
|
|
412
|
+
}
|
|
202
413
|
</style>
|