@ebiz/designer-components 0.0.18-beta.28 → 0.0.18-beta.29
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 +5791 -5694
- package/package.json +1 -1
- package/src/components/EbizRemoteSelect.vue +14 -6
- package/src/components/EbizTree.vue +10 -0
- package/src/components/EbizTreeSelector.vue +0 -4
- package/src/index.js +163 -160
- package/src/router/index.js +291 -285
- package/src/views/Home.vue +122 -121
package/src/views/Home.vue
CHANGED
@@ -1,122 +1,123 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="home">
|
3
|
-
<h1>Ebiz 组件库</h1>
|
4
|
-
<div class="component-list">
|
5
|
-
<div v-for="(item, index) in components" :key="index" class="component-item">
|
6
|
-
<router-link :to="item.path" class="component-link">
|
7
|
-
{{ item.title }}
|
8
|
-
</router-link>
|
9
|
-
</div>
|
10
|
-
|
11
|
-
<router-link to="/tree-demo" class="component-item">
|
12
|
-
<div class="component-title">树组件</div>
|
13
|
-
<div class="component-desc">用于展示层级结构和操作的组件</div>
|
14
|
-
</router-link>
|
15
|
-
|
16
|
-
<router-link to="/tree-selector-demo" class="component-item">
|
17
|
-
<div class="component-title">树形选择器</div>
|
18
|
-
<div class="component-desc">基于树组件的选择器,支持搜索和多选</div>
|
19
|
-
</router-link>
|
20
|
-
</div>
|
21
|
-
</div>
|
22
|
-
</template>
|
23
|
-
|
24
|
-
<script>
|
25
|
-
export default {
|
26
|
-
name: 'Home',
|
27
|
-
setup() {
|
28
|
-
const components = [
|
29
|
-
{ path: '/my-component', title: '基础组件示例' },
|
30
|
-
{ path: '/table', title: '表格组件示例' },
|
31
|
-
{ path: '/form', title: '表单组件示例' },
|
32
|
-
{ path: '/button', title: '按钮组件示例' },
|
33
|
-
{ path: '/tdesign-button', title: 'TDesign按钮组件示例' },
|
34
|
-
{ path: '/tdesign-icon', title: 'TDesign图标组件示例' },
|
35
|
-
{ path: '/tdesign-input', title: 'TDesign输入框组件示例' },
|
36
|
-
{ path: '/tdesign-select', title: 'TDesign选择器组件示例' },
|
37
|
-
{ path: '/tdesign-form', title: 'TDesign表单组件示例' },
|
38
|
-
{ path: '/tdesign-card', title: 'TDesign卡片组件示例' },
|
39
|
-
{ path: '/tdesign-date-picker', title: 'TDesign日期选择器示例' },
|
40
|
-
{ path: '/tdesign-image', title: 'TDesign图片组件示例' },
|
41
|
-
{ path: '/tdesign-image-viewer', title: 'TDesign图片查看器组件示例' },
|
42
|
-
{ path: '/data-container', title: '数据容器示例' },
|
43
|
-
{ path: '/title', title: '标题组件示例' },
|
44
|
-
{ path: '/okr-tree', title: 'OKR树形图示例' },
|
45
|
-
{ path: '/remote-select', title: '远程选择器示例' },
|
46
|
-
{ path: '/mindmap', title: '思维导图示例' },
|
47
|
-
{ path: '/tdesign-calendar', title: 'TDesign日历组件示例' },
|
48
|
-
{ path: '/tdesign-collapse', title: 'TDesign折叠面板组件示例' },
|
49
|
-
{ path: '/tdesign-tag', title: 'TDesign标签组件示例' },
|
50
|
-
{ path: '/ebiz-swiper', title: 'Ebiz轮播框组件示例' },
|
51
|
-
{ path: '/ebiz-space', title: 'Ebiz间距组件示例' },
|
52
|
-
{ path: '/pagination', title: 'EbizPagination分页组件示例' },
|
53
|
-
{ path: '/checkbox', title: 'Ebiz多选框组件示例' },
|
54
|
-
{ path: '/radio', title: 'Ebiz单选框组件示例' },
|
55
|
-
{ path: '/switch', title: 'Ebiz开关组件示例' },
|
56
|
-
{ path: '/textarea', title: 'Ebiz多行文本框组件示例' },
|
57
|
-
{ path: '/upload', title: 'TDesign上传组件示例' },
|
58
|
-
{ path: '/grid', title: 'TDesign栅格组件示例' },
|
59
|
-
{ path: '/tabs', title: 'Ebiz选项卡组件示例' },
|
60
|
-
{ path: '/statistic', title: 'Ebiz统计数值组件示例' },
|
61
|
-
{ path: '/timeline', title: 'Ebiz时间轴组件示例' },
|
62
|
-
{ path: '/watermark', title: 'TDesign水印组件示例' },
|
63
|
-
{ path: '/ebiz-avatar', title: 'Ebiz头像组件示例' },
|
64
|
-
{ path: '/ebiz-employee-info', title: 'Ebiz员工信息组件示例' },
|
65
|
-
{ path: '/tdesign-alert', title: 'TDesign提示组件示例' },
|
66
|
-
{ path: '/tdesign-dialog', title: 'TDesign对话框组件示例' },
|
67
|
-
{ path: '/table-demo', title: 'Ebiz表格组件示例' },
|
68
|
-
{ path: '/
|
69
|
-
{ path: '/table-
|
70
|
-
{ path: '/
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
}
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
font-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
1
|
+
<template>
|
2
|
+
<div class="home">
|
3
|
+
<h1>Ebiz 组件库</h1>
|
4
|
+
<div class="component-list">
|
5
|
+
<div v-for="(item, index) in components" :key="index" class="component-item">
|
6
|
+
<router-link :to="item.path" class="component-link">
|
7
|
+
{{ item.title }}
|
8
|
+
</router-link>
|
9
|
+
</div>
|
10
|
+
|
11
|
+
<router-link to="/tree-demo" class="component-item">
|
12
|
+
<div class="component-title">树组件</div>
|
13
|
+
<div class="component-desc">用于展示层级结构和操作的组件</div>
|
14
|
+
</router-link>
|
15
|
+
|
16
|
+
<router-link to="/tree-selector-demo" class="component-item">
|
17
|
+
<div class="component-title">树形选择器</div>
|
18
|
+
<div class="component-desc">基于树组件的选择器,支持搜索和多选</div>
|
19
|
+
</router-link>
|
20
|
+
</div>
|
21
|
+
</div>
|
22
|
+
</template>
|
23
|
+
|
24
|
+
<script>
|
25
|
+
export default {
|
26
|
+
name: 'Home',
|
27
|
+
setup() {
|
28
|
+
const components = [
|
29
|
+
{ path: '/my-component', title: '基础组件示例' },
|
30
|
+
{ path: '/table', title: '表格组件示例' },
|
31
|
+
{ path: '/form', title: '表单组件示例' },
|
32
|
+
{ path: '/button', title: '按钮组件示例' },
|
33
|
+
{ path: '/tdesign-button', title: 'TDesign按钮组件示例' },
|
34
|
+
{ path: '/tdesign-icon', title: 'TDesign图标组件示例' },
|
35
|
+
{ path: '/tdesign-input', title: 'TDesign输入框组件示例' },
|
36
|
+
{ path: '/tdesign-select', title: 'TDesign选择器组件示例' },
|
37
|
+
{ path: '/tdesign-form', title: 'TDesign表单组件示例' },
|
38
|
+
{ path: '/tdesign-card', title: 'TDesign卡片组件示例' },
|
39
|
+
{ path: '/tdesign-date-picker', title: 'TDesign日期选择器示例' },
|
40
|
+
{ path: '/tdesign-image', title: 'TDesign图片组件示例' },
|
41
|
+
{ path: '/tdesign-image-viewer', title: 'TDesign图片查看器组件示例' },
|
42
|
+
{ path: '/data-container', title: '数据容器示例' },
|
43
|
+
{ path: '/title', title: '标题组件示例' },
|
44
|
+
{ path: '/okr-tree', title: 'OKR树形图示例' },
|
45
|
+
{ path: '/remote-select', title: '远程选择器示例' },
|
46
|
+
{ path: '/mindmap', title: '思维导图示例' },
|
47
|
+
{ path: '/tdesign-calendar', title: 'TDesign日历组件示例' },
|
48
|
+
{ path: '/tdesign-collapse', title: 'TDesign折叠面板组件示例' },
|
49
|
+
{ path: '/tdesign-tag', title: 'TDesign标签组件示例' },
|
50
|
+
{ path: '/ebiz-swiper', title: 'Ebiz轮播框组件示例' },
|
51
|
+
{ path: '/ebiz-space', title: 'Ebiz间距组件示例' },
|
52
|
+
{ path: '/pagination', title: 'EbizPagination分页组件示例' },
|
53
|
+
{ path: '/checkbox', title: 'Ebiz多选框组件示例' },
|
54
|
+
{ path: '/radio', title: 'Ebiz单选框组件示例' },
|
55
|
+
{ path: '/switch', title: 'Ebiz开关组件示例' },
|
56
|
+
{ path: '/textarea', title: 'Ebiz多行文本框组件示例' },
|
57
|
+
{ path: '/upload', title: 'TDesign上传组件示例' },
|
58
|
+
{ path: '/grid', title: 'TDesign栅格组件示例' },
|
59
|
+
{ path: '/tabs', title: 'Ebiz选项卡组件示例' },
|
60
|
+
{ path: '/statistic', title: 'Ebiz统计数值组件示例' },
|
61
|
+
{ path: '/timeline', title: 'Ebiz时间轴组件示例' },
|
62
|
+
{ path: '/watermark', title: 'TDesign水印组件示例' },
|
63
|
+
{ path: '/ebiz-avatar', title: 'Ebiz头像组件示例' },
|
64
|
+
{ path: '/ebiz-employee-info', title: 'Ebiz员工信息组件示例' },
|
65
|
+
{ path: '/tdesign-alert', title: 'TDesign提示组件示例' },
|
66
|
+
{ path: '/tdesign-dialog', title: 'TDesign对话框组件示例' },
|
67
|
+
{ path: '/table-demo', title: 'Ebiz表格组件示例' },
|
68
|
+
{ path: '/ebiz-detail-block', title: 'Ebiz详情块组件示例' },
|
69
|
+
{ path: '/table-column', title: 'Ebiz表格列组件示例' },
|
70
|
+
{ path: '/table-sort', title: 'Ebiz表格排序组件示例' },
|
71
|
+
{ path: '/tree', title: 'Ebiz树组件示例' }
|
72
|
+
]
|
73
|
+
|
74
|
+
return {
|
75
|
+
components
|
76
|
+
}
|
77
|
+
}
|
78
|
+
}
|
79
|
+
</script>
|
80
|
+
|
81
|
+
<style scoped>
|
82
|
+
.home {
|
83
|
+
padding: 20px;
|
84
|
+
}
|
85
|
+
|
86
|
+
.component-list {
|
87
|
+
display: grid;
|
88
|
+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
89
|
+
gap: 20px;
|
90
|
+
margin-top: 20px;
|
91
|
+
}
|
92
|
+
|
93
|
+
.component-item {
|
94
|
+
background: #f5f5f5;
|
95
|
+
padding: 20px;
|
96
|
+
border-radius: 8px;
|
97
|
+
text-align: center;
|
98
|
+
}
|
99
|
+
|
100
|
+
.component-link {
|
101
|
+
color: #333;
|
102
|
+
text-decoration: none;
|
103
|
+
font-size: 16px;
|
104
|
+
}
|
105
|
+
|
106
|
+
.component-link:hover {
|
107
|
+
color: #1890ff;
|
108
|
+
}
|
109
|
+
|
110
|
+
.component-title {
|
111
|
+
font-size: 16px;
|
112
|
+
font-weight: bold;
|
113
|
+
margin-bottom: 10px;
|
114
|
+
}
|
115
|
+
|
116
|
+
.component-desc {
|
117
|
+
font-size: 14px;
|
118
|
+
}
|
119
|
+
|
120
|
+
.component-item:hover {
|
121
|
+
background-color: #e6e6e6;
|
122
|
+
}
|
122
123
|
</style>
|