Skip to content

Commit d59b0ea

Browse files
wuyiping0628wuyiping0628
authored
feat(tree-menu): [tree-menu] Add static data and unused topic variables for rectification (#2803)
* feat(tree-menu): [tree-menu] Add static data and unused topic variables for rectification * feat(tree-menu): [tree-menu] Add static data and unused topic variables for rectification
1 parent 312dbcf commit d59b0ea

File tree

10 files changed

+399
-60
lines changed

10 files changed

+399
-60
lines changed

‎examples/sites/demos/apis/menu.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default {
2121
type: 'Array',
2222
defaultValue: '',
2323
desc: {
24-
'zh-CN': '数据源',
24+
'zh-CN': '服务端数据',
2525
'en-US': ''
2626
},
2727
mode: ['mobile-first'],

‎examples/sites/demos/pc/app/tree-menu/basic-usage-composition-api.vue‎

Lines changed: 168 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,174 @@
11
<template>
2-
<tiny-tree-menu placeholder="输入关键字搜索"></tiny-tree-menu>
2+
<tiny-tree-menu placeholder="输入关键字搜索" :data="treeData"></tiny-tree-menu>
33
</template>
44

55
<script setup>
66
import { TinyTreeMenu } from '@opentiny/vue'
7+
import { ref } from 'vue'
8+
9+
const treeData = ref([
10+
{
11+
id: 100,
12+
label: '组件总览'
13+
},
14+
{
15+
id: 200,
16+
label: '使用指南',
17+
children: [
18+
{
19+
id: 201,
20+
label: '更新日志'
21+
},
22+
{ id: 202, label: '环境准备' },
23+
{ id: 203, label: '安装' },
24+
{
25+
id: 204,
26+
label: '引入组件',
27+
children: [
28+
{ id: 20401, label: '按需引入' },
29+
{ id: 20402, label: '完整引入' }
30+
]
31+
},
32+
{ id: 205, label: '开发示例' },
33+
{ id: 206, label: '国际化' },
34+
{ id: 207, label: '主题配置' },
35+
{ id: 208, label: '表单校验配置' },
36+
{ id: 209, label: '常见问题' }
37+
]
38+
},
39+
{
40+
id: 300,
41+
label: '框架风格',
42+
children: [
43+
{
44+
id: 301,
45+
label: 'Color 色彩'
46+
},
47+
{ id: 302, label: 'Container 版型' },
48+
{ id: 303, label: 'Font 字体' },
49+
{ id: 304, label: 'Icon 图标' },
50+
{ id: 305, label: 'Layout 布局' }
51+
]
52+
},
53+
{
54+
id: 400,
55+
label: '导航组件',
56+
children: [
57+
{
58+
id: 401,
59+
label: 'Anchor 锚点'
60+
},
61+
{ id: 402, label: 'Guide 引导' },
62+
{ id: 403, label: 'Breadcrumb 面包屑' }
63+
]
64+
},
65+
{
66+
id: 500,
67+
label: '容器组件',
68+
children: [
69+
{
70+
id: 501,
71+
label: 'Carousel 走马灯'
72+
},
73+
{ id: 502, label: 'Collapse 折叠面板' },
74+
{ id: 503, label: 'DialogBox 对话框' }
75+
]
76+
},
77+
{
78+
id: 600,
79+
label: '表单组件',
80+
children: [
81+
{
82+
id: 60101,
83+
label: 'Button 按钮',
84+
url: 'button'
85+
},
86+
{
87+
id: 60102,
88+
label: 'DatePicker 日期选择器',
89+
url: 'date-picker'
90+
},
91+
{
92+
id: 60103,
93+
label: 'Select 选择器',
94+
url: 'select'
95+
},
96+
{
97+
id: 60104,
98+
label: 'DropTimes 下拉时间',
99+
url: 'drop-times'
100+
},
101+
{
102+
id: 60105,
103+
label: 'Input 输入框',
104+
url: 'input'
105+
}
106+
]
107+
},
108+
{
109+
id: 700,
110+
label: '业务组件',
111+
children: [
112+
{
113+
id: 701,
114+
label: 'Amount 金额'
115+
},
116+
{ id: 702, label: 'Area 片区' },
117+
{ id: 703, label: 'Company 公司' }
118+
]
119+
},
120+
{
121+
id: 800,
122+
label: '其他组件',
123+
children: [
124+
{
125+
id: 801,
126+
label: '废弃组件',
127+
children: [
128+
{
129+
id: 80101,
130+
label: 'CreditCardForm 信用卡表单',
131+
url: 'credit-card-form'
132+
},
133+
{
134+
id: 80102,
135+
label: 'DetailPage 表头详情栏',
136+
url: 'detail-page'
137+
}
138+
]
139+
},
140+
{
141+
id: 802,
142+
label: '新增组件',
143+
children: [
144+
{
145+
id: 80201,
146+
label: 'QrCode 二维码',
147+
url: 'qr-code'
148+
},
149+
{
150+
id: 80202,
151+
label: 'Watermark 水印',
152+
url: 'watermark'
153+
},
154+
{
155+
id: 80203,
156+
label: 'MindMap 脑图',
157+
url: 'mind-map'
158+
},
159+
{
160+
id: 80204,
161+
label: 'Skeleton 骨架屏',
162+
url: 'skeleton'
163+
}
164+
]
165+
},
166+
{
167+
id: 803,
168+
label: 'BulletinBoard 公告牌'
169+
},
170+
{ id: 804, label: 'Calendar 日历' }
171+
]
172+
}
173+
])
7174
</script>

‎examples/sites/demos/pc/app/tree-menu/basic-usage.spec.ts‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,26 @@
11
import { test, expect } from '@playwright/test'
22

3-
test('基本使用，无数据场景', async ({ page }) => {
3+
test('静态数据', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('tree-menu#basic-usage')
66

77
const wrap = page.locator('#basic-usage')
88
const treeMenu = wrap.locator('.tiny-tree-menu')
9+
const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
10+
const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
911

10-
await expect(treeMenu.locator('.tiny-input__inner')).toBeVisible()
12+
await expect(treeNode.filter({ hasText: /^环境准备$/ })).toBeHidden()
13+
await treeNodeContent.filter({ hasText: /^使用指南$/ }).click()
14+
await expect(treeNode.filter({ hasText: /^环境准备$/ })).toBeVisible()
15+
await treeNode.filter({ hasText: /^环境准备$/ }).click()
16+
await expect(treeNode.filter({ hasText: /^环境准备$/ })).toHaveClass(/is-current/)
17+
await treeNodeContent.filter({ hasText: /^使用指南$/ }).click()
18+
await expect(treeNode.filter({ hasText: /^环境准备$/ })).toBeHidden()
19+
20+
// 过滤功能
21+
await treeMenu.locator('.tiny-input__inner').fill('新增组件')
22+
await expect(page.getByTitle('新增组件')).toBeVisible()
23+
await expect(treeNodeContent.filter({ hasText: /^使用指南$/ })).toBeHidden()
24+
await treeMenu.locator('.tiny-input__inner').clear()
25+
await expect(treeNodeContent.filter({ hasText: /^使用指南$/ })).toBeVisible()
1126
})

‎examples/sites/demos/pc/app/tree-menu/basic-usage.vue‎

Lines changed: 170 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<tiny-tree-menu placeholder="输入关键字搜索"></tiny-tree-menu>
2+
<tiny-tree-menu placeholder="输入关键字搜索" :data="treeData"></tiny-tree-menu>
33
</template>
44

55
<script>
@@ -8,6 +8,175 @@ import { TinyTreeMenu } from '@opentiny/vue'
88
export default {
99
components: {
1010
TinyTreeMenu
11+
},
12+
data() {
13+
return {
14+
treeData: [
15+
{
16+
id: 100,
17+
label: '组件总览'
18+
},
19+
{
20+
id: 200,
21+
label: '使用指南',
22+
children: [
23+
{
24+
id: 201,
25+
label: '更新日志'
26+
},
27+
{ id: 202, label: '环境准备' },
28+
{ id: 203, label: '安装' },
29+
{
30+
id: 204,
31+
label: '引入组件',
32+
children: [
33+
{ id: 20401, label: '按需引入' },
34+
{ id: 20402, label: '完整引入' }
35+
]
36+
},
37+
{ id: 205, label: '开发示例' },
38+
{ id: 206, label: '国际化' },
39+
{ id: 207, label: '主题配置' },
40+
{ id: 208, label: '表单校验配置' },
41+
{ id: 209, label: '常见问题' }
42+
]
43+
},
44+
{
45+
id: 300,
46+
label: '框架风格',
47+
children: [
48+
{
49+
id: 301,
50+
label: 'Color 色彩'
51+
},
52+
{ id: 302, label: 'Container 版型' },
53+
{ id: 303, label: 'Font 字体' },
54+
{ id: 304, label: 'Icon 图标' },
55+
{ id: 305, label: 'Layout 布局' }
56+
]
57+
},
58+
{
59+
id: 400,
60+
label: '导航组件',
61+
children: [
62+
{
63+
id: 401,
64+
label: 'Anchor 锚点'
65+
},
66+
{ id: 402, label: 'Guide 引导' },
67+
{ id: 403, label: 'Breadcrumb 面包屑' }
68+
]
69+
},
70+
{
71+
id: 500,
72+
label: '容器组件',
73+
children: [
74+
{
75+
id: 501,
76+
label: 'Carousel 走马灯'
77+
},
78+
{ id: 502, label: 'Collapse 折叠面板' },
79+
{ id: 503, label: 'DialogBox 对话框' }
80+
]
81+
},
82+
{
83+
id: 600,
84+
label: '表单组件',
85+
children: [
86+
{
87+
id: 60101,
88+
label: 'Button 按钮',
89+
url: 'button'
90+
},
91+
{
92+
id: 60102,
93+
label: 'DatePicker 日期选择器',
94+
url: 'date-picker'
95+
},
96+
{
97+
id: 60103,
98+
label: 'Select 选择器',
99+
url: 'select'
100+
},
101+
{
102+
id: 60104,
103+
label: 'DropTimes 下拉时间',
104+
url: 'drop-times'
105+
},
106+
{
107+
id: 60105,
108+
label: 'Input 输入框',
109+
url: 'input'
110+
}
111+
]
112+
},
113+
{
114+
id: 700,
115+
label: '业务组件',
116+
children: [
117+
{
118+
id: 701,
119+
label: 'Amount 金额'
120+
},
121+
{ id: 702, label: 'Area 片区' },
122+
{ id: 703, label: 'Company 公司' }
123+
]
124+
},
125+
{
126+
id: 800,
127+
label: '其他组件',
128+
children: [
129+
{
130+
id: 801,
131+
label: '废弃组件',
132+
children: [
133+
{
134+
id: 80101,
135+
label: 'CreditCardForm 信用卡表单',
136+
url: 'credit-card-form'
137+
},
138+
{
139+
id: 80102,
140+
label: 'DetailPage 表头详情栏',
141+
url: 'detail-page'
142+
}
143+
]
144+
},
145+
{
146+
id: 802,
147+
label: '新增组件',
148+
children: [
149+
{
150+
id: 80201,
151+
label: 'QrCode 二维码',
152+
url: 'qr-code'
153+
},
154+
{
155+
id: 80202,
156+
label: 'Watermark 水印',
157+
url: 'watermark'
158+
},
159+
{
160+
id: 80203,
161+
label: 'MindMap 脑图',
162+
url: 'mind-map'
163+
},
164+
{
165+
id: 80204,
166+
label: 'Skeleton 骨架屏',
167+
url: 'skeleton'
168+
}
169+
]
170+
},
171+
{
172+
id: 803,
173+
label: 'BulletinBoard 公告牌'
174+
},
175+
{ id: 804, label: 'Calendar 日历' }
176+
]
177+
}
178+
]
179+
}
11180
}
12181
}
13182
</script>

0 commit comments

Comments
 (0)