Skip to content

Commit f4b922f

Browse files
xuanlidxuanlid
authored
feat: Modify router select configurator ,add tab-bar configurator and add navigation component (opentiny#1617)
1 parent e87cd08 commit f4b922f

File tree

12 files changed

+509
-212
lines changed

12 files changed

+509
-212
lines changed

‎docs/api/frontend-api/material-api.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,7 @@ export default {
5151
'Slot', // 插槽（区块插槽需要）
5252
'RouterView', // 路由视图（子页面需要，不建议隐藏）
5353
'RouterLink', // 路由链接
54-
'Navigation', // 导航条
55-
'NavigationV', // 纵向导航条
54+
'CanvasNavigation', // 导航条
5655
'Collection' // 数据源容器（数据源功能依赖，不建议隐藏）
5756
]
5857
}

‎packages/builtinComponent/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export { default as CanvasRow } from './src/components/CanvasRow.vue'
33
export { default as CanvasRowColContainer } from './src/components/CanvasRowColContainer.vue'
44
export { default as CanvasFlexBox } from './src/components/CanvasFlexBox.vue'
55
export { default as CanvasSection } from './src/components/CanvasSection.vue'
6+
export { default as CanvasNavigation } from './src/components/CanvasNavigation.vue'
67
export { default as FormModel } from './src/components/BaseForm.vue'
78
export { default as TableModel } from './src/components/BaseTable.vue'
89
export { default as PageModel } from './src/components/BasePage.vue'

‎packages/builtinComponent/src/components/CanvasNavigation.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<div
3+
:class="[
4+
'canvas-navigate',
5+
{ 'canvas-navigate-horizontal': type === 'horizontal' },
6+
{ 'canvas-navigate-vertical': type === 'vertical' }
7+
]"
8+
>
9+
<slot> </slot>
10+
</div>
11+
</template>
12+
13+
<script setup lang="ts">
14+
import { defineProps } from 'vue'
15+
16+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
17+
const props = defineProps({
18+
type: {
19+
type: String,
20+
default: 'horizontal'
21+
}
22+
})
23+
</script>
24+
25+
<style lang="less" scoped>
26+
.canvas-navigate {
27+
display: flex;
28+
padding: 8px 12px;
29+
&-horizontal {
30+
align-items: center;
31+
justify-content: center;
32+
}
33+
&-vertical {
34+
flex-direction: column;
35+
}
36+
}
37+
</style>

‎packages/builtinComponent/src/meta/CanvasNavigation.json‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
{
2+
"component": {
3+
"icon": "navigation",
4+
"name": {
5+
"zh_CN": "导航条"
6+
},
7+
"component": "CanvasNavigation",
8+
"schema": {
9+
"slots": {},
10+
"properties": [
11+
{
12+
"label": {
13+
"zh_CN": "基础信息"
14+
},
15+
"description": {
16+
"zh_CN": "基础信息"
17+
},
18+
"collapse": {
19+
"number": 6,
20+
"text": {
21+
"zh_CN": "显示更多"
22+
}
23+
},
24+
"content": [
25+
{
26+
"property": "type",
27+
"label": {
28+
"text": {
29+
"zh_CN": "类型"
30+
}
31+
},
32+
"description": {
33+
"zh_CN": "类型"
34+
},
35+
"cols": 12,
36+
"labelPosition": "left",
37+
"type": "string",
38+
"defaultValue": "horizontal",
39+
"widget": {
40+
"component": "SelectConfigurator",
41+
"props": {
42+
"options": [
43+
{
44+
"label": "horizontal",
45+
"value": "horizontal"
46+
},
47+
{
48+
"label": "vertical",
49+
"value": "vertical"
50+
}
51+
]
52+
}
53+
}
54+
},
55+
{
56+
"property": "tabs",
57+
"label": {
58+
"text": {
59+
"zh_CN": "选项卡"
60+
}
61+
},
62+
"required": true,
63+
"readOnly": false,
64+
"disabled": false,
65+
"defaultValue": "",
66+
"cols": 12,
67+
"bindState": false,
68+
"widget": {
69+
"component": "TabBarConfigurator",
70+
"props": {}
71+
},
72+
"description": {
73+
"zh_CN": "tabs 选项卡"
74+
},
75+
"labelPosition": "none"
76+
}
77+
]
78+
}
79+
],
80+
"events": {
81+
"onClick": {
82+
"label": {
83+
"zh_CN": "点击事件"
84+
},
85+
"description": {
86+
"zh_CN": "点击时触发的回调函数"
87+
},
88+
"type": "event",
89+
"functionInfo": {
90+
"params": [],
91+
"returns": {}
92+
},
93+
"defaultValue": ""
94+
}
95+
},
96+
"shortcuts": {
97+
"properties": []
98+
},
99+
"contentMenu": {
100+
"actions": []
101+
}
102+
},
103+
"configure": {
104+
"loop": true,
105+
"isContainer": true,
106+
"nestingRule": {
107+
"childWhitelist": [],
108+
"descendantBlacklist": []
109+
}
110+
}
111+
},
112+
"snippet": {
113+
"name": {
114+
"zh_CN": "导航条"
115+
},
116+
"snippetName": "CanvasNavigation",
117+
"icon": "navigation",
118+
"schema": {
119+
"componentName": "CanvasNavigation",
120+
"props": {
121+
"style": "text-align: center; padding: 8px 12px; box-shadow: 0 0 4px #0003;"
122+
},
123+
"children": [
124+
{
125+
"componentName": "RouterLink",
126+
"props": {
127+
"to": "",
128+
"style": "display: inline-flex; gap: 8px; padding: 10px 20px; color: inherit; text-decoration: none;"
129+
},
130+
"children": [
131+
{
132+
"componentName": "Icon",
133+
"props": {
134+
"name": "IconPublicHome",
135+
"style": "margin-top: 3px;"
136+
}
137+
},
138+
{
139+
"componentName": "Text",
140+
"props": {
141+
"text": "首页"
142+
}
143+
}
144+
]
145+
},
146+
{
147+
"componentName": "RouterLink",
148+
"props": {
149+
"to": "",
150+
"style": "display: inline-flex; gap: 8px; padding: 10px 20px; color: inherit; text-decoration: none;"
151+
},
152+
"children": [
153+
{
154+
"componentName": "Icon",
155+
"props": {
156+
"name": "IconTaskCooperation",
157+
"style": "margin-top: 3px;"
158+
}
159+
},
160+
{
161+
"componentName": "Text",
162+
"props": {
163+
"text": "介绍"
164+
}
165+
}
166+
]
167+
},
168+
{
169+
"componentName": "RouterLink",
170+
"props": {
171+
"to": "",
172+
"style": "display: flex; gap: 8px; padding: 10px 20px; color: inherit; text-decoration: none;"
173+
},
174+
"children": [
175+
{
176+
"componentName": "Icon",
177+
"props": {
178+
"name": "IconText",
179+
"style": "margin-top: 3px;"
180+
}
181+
},
182+
{
183+
"componentName": "Text",
184+
"props": {
185+
"text": "文档"
186+
}
187+
}
188+
]
189+
}
190+
]
191+
}
192+
}
193+
}

‎packages/builtinComponent/src/meta/index.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import CanvasRow from './CanvasRow.json'
33
import CanvasRowColContainer from './CanvasRowColContainer.json'
44
import CanvasFlexBox from './CanvasFlexBox.json'
55
import CanvasSection from './CanvasSection.json'
6+
import CanvasNavigation from './CanvasNavigation.json'
67
import BaseForm from './BaseForm.json'
78
import BaseTable from './BaseTable.json'
89
import BasePage from './BasePage.json'
@@ -14,6 +15,7 @@ export default {
1415
CanvasRowColContainer.component,
1516
CanvasFlexBox.component,
1617
CanvasSection.component,
18+
CanvasNavigation.component,
1719
BaseForm.component,
1820
BaseTable.component,
1921
BasePage.component
@@ -26,6 +28,13 @@ export default {
2628
},
2729
children: [CanvasRowColContainer.snippet, CanvasFlexBox.snippet, CanvasSection.snippet]
2830
},
31+
{
32+
group: 'advanced',
33+
label: {
34+
zh_CN: '高级元素'
35+
},
36+
children: [CanvasNavigation.snippet]
37+
},
2938
{
3039
group: 'model',
3140
label: {

0 commit comments

Comments
 (0)