Skip to content

Commit 1fd1e55

Browse files
l246804l246804
committed
chore: 优化 Toolbar 组件样式
1 parent 937e1da commit 1fd1e55

File tree

3 files changed

+409
-17
lines changed

3 files changed

+409
-17
lines changed

‎playground/src/pages/shared/toolbar.vue‎

Lines changed: 392 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,392 @@
1+
<script setup lang="ts">
2+
import { reactive } from 'vue'
3+
import { SectionItem, SectionLayout, SectionMain, Toolbar } from '@/shared'
4+
5+
// 配置选项
6+
const config = reactive({
7+
showTitle: true,
8+
showContent: true,
9+
showExtra: true,
10+
useSlots: false,
11+
customStyle: false,
12+
})
13+
14+
// 自定义样式
15+
const customStyles = reactive({
16+
titleStyle: { color: '#409eff', fontWeight: 'bold' },
17+
contentStyle: { color: '#67c23a' },
18+
extraStyle: { color: '#e6a23c' },
19+
})
20+
21+
// 搜索表单
22+
const searchForm = reactive({
23+
keyword: '',
24+
status: '',
25+
date: '',
26+
})
27+
28+
// 状态选项
29+
const statusOptions = [
30+
{ label: '全部', value: '' },
31+
{ label: '进行中', value: 'active' },
32+
{ label: '已完成', value: 'completed' },
33+
{ label: '已取消', value: 'cancelled' },
34+
]
35+
</script>
36+
37+
<template>
38+
<SectionLayout height="100%">
39+
<!-- 配置区域 -->
40+
<SectionItem card>
41+
<div style="padding: 16px">
42+
<ElSpace
43+
direction="vertical"
44+
style="width: 100%"
45+
fill
46+
>
47+
<ElText tag="b">
48+
Toolbar 组件配置
49+
</ElText>
50+
51+
<ElSpace wrap>
52+
<ElCheckbox v-model="config.showTitle">
53+
显示标题
54+
</ElCheckbox>
55+
<ElCheckbox v-model="config.showContent">
56+
显示内容
57+
</ElCheckbox>
58+
<ElCheckbox v-model="config.showExtra">
59+
显示额外区域
60+
</ElCheckbox>
61+
<ElCheckbox v-model="config.useSlots">
62+
使用插槽
63+
</ElCheckbox>
64+
<ElCheckbox v-model="config.customStyle">
65+
自定义样式
66+
</ElCheckbox>
67+
</ElSpace>
68+
</ElSpace>
69+
</div>
70+
</SectionItem>
71+
72+
<!-- 示例区域 -->
73+
<SectionMain card>
74+
<div style="padding: 16px">
75+
<ElSpace
76+
direction="vertical"
77+
style="width: 100%"
78+
:size="24"
79+
fill
80+
>
81+
<!-- 基础示例 -->
82+
<div>
83+
<ElText
84+
tag="b"
85+
size="large"
86+
>
87+
1. 基础用法
88+
</ElText>
89+
<ElDivider style="margin: 12px 0" />
90+
<div style="padding: 16px; background: #f5f7fa; border-radius: 4px">
91+
<Toolbar
92+
:title="config.showTitle ? '页面标题' : undefined"
93+
:title-style="
94+
config.customStyle ? customStyles.titleStyle : undefined
95+
"
96+
:content-style="
97+
config.customStyle ? customStyles.contentStyle : undefined
98+
"
99+
:extra-style="
100+
config.customStyle ? customStyles.extraStyle : undefined
101+
"
102+
>
103+
<template
104+
v-if="config.useSlots && config.showTitle"
105+
#title
106+
>
107+
<span>📄 自定义标题插槽</span>
108+
</template>
109+
110+
<template
111+
v-if="config.showContent"
112+
#default
113+
>
114+
<ElButton size="small">
115+
新增
116+
</ElButton>
117+
<ElButton size="small">
118+
编辑
119+
</ElButton>
120+
<ElButton size="small">
121+
删除
122+
</ElButton>
123+
</template>
124+
125+
<template
126+
v-if="config.showExtra"
127+
#extra
128+
>
129+
<ElButton size="small">
130+
刷新
131+
</ElButton>
132+
<ElButton size="small">
133+
设置
134+
</ElButton>
135+
</template>
136+
</Toolbar>
137+
</div>
138+
</div>
139+
140+
<!-- 搜索工具栏示例 -->
141+
<div>
142+
<ElText
143+
tag="b"
144+
size="large"
145+
>
146+
2. 搜索工具栏
147+
</ElText>
148+
<ElDivider style="margin: 12px 0" />
149+
<div style="padding: 16px; background: #f5f7fa; border-radius: 4px">
150+
<Toolbar title="数据列表">
151+
<ElInput
152+
v-model="searchForm.keyword"
153+
placeholder="请输入关键词"
154+
style="width: 200px"
155+
size="small"
156+
clearable
157+
/>
158+
159+
<ElSelect
160+
v-model="searchForm.status"
161+
placeholder="状态"
162+
style="width: 120px"
163+
size="small"
164+
clearable
165+
>
166+
<ElOption
167+
v-for="item in statusOptions"
168+
:key="item.value"
169+
:label="item.label"
170+
:value="item.value"
171+
/>
172+
</ElSelect>
173+
174+
<ElDatePicker
175+
v-model="searchForm.date"
176+
type="date"
177+
placeholder="选择日期"
178+
style="width: 160px"
179+
size="small"
180+
/>
181+
182+
<ElButton
183+
type="primary"
184+
size="small"
185+
>
186+
搜索
187+
</ElButton>
188+
189+
<ElButton size="small">
190+
重置
191+
</ElButton>
192+
193+
<template #extra>
194+
<ElButton
195+
type="primary"
196+
size="small"
197+
>
198+
新增
199+
</ElButton>
200+
<ElButton size="small">
201+
导出
202+
</ElButton>
203+
</template>
204+
</Toolbar>
205+
</div>
206+
</div>
207+
208+
<!-- 仅标题和额外操作 -->
209+
<div>
210+
<ElText
211+
tag="b"
212+
size="large"
213+
>
214+
3. 仅标题和额外操作
215+
</ElText>
216+
<ElDivider style="margin: 12px 0" />
217+
<div style="padding: 16px; background: #f5f7fa; border-radius: 4px">
218+
<Toolbar title="用户管理">
219+
<template #extra>
220+
<ElButton
221+
type="primary"
222+
size="small"
223+
>
224+
添加用户
225+
</ElButton>
226+
<ElButton
227+
size="small"
228+
circle
229+
>
230+
⋯
231+
</ElButton>
232+
</template>
233+
</Toolbar>
234+
</div>
235+
</div>
236+
237+
<!-- 仅内容区域 -->
238+
<div>
239+
<ElText
240+
tag="b"
241+
size="large"
242+
>
243+
4. 仅内容区域（无标题）
244+
</ElText>
245+
<ElDivider style="margin: 12px 0" />
246+
<div style="padding: 16px; background: #f5f7fa; border-radius: 4px">
247+
<Toolbar>
248+
<ElRadioGroup
249+
model-value="all"
250+
size="small"
251+
>
252+
<ElRadioButton value="all">
253+
全部
254+
</ElRadioButton>
255+
<ElRadioButton value="pending">
256+
待处理
257+
</ElRadioButton>
258+
<ElRadioButton value="processing">
259+
处理中
260+
</ElRadioButton>
261+
<ElRadioButton value="completed">
262+
已完成
263+
</ElRadioButton>
264+
</ElRadioGroup>
265+
266+
<template #extra>
267+
<ElButton
268+
size="small"
269+
circle
270+
>
271+
↻
272+
</ElButton>
273+
</template>
274+
</Toolbar>
275+
</div>
276+
</div>
277+
278+
<!-- 复杂示例 -->
279+
<div>
280+
<ElText
281+
tag="b"
282+
size="large"
283+
>
284+
5. 复杂工具栏
285+
</ElText>
286+
<ElDivider style="margin: 12px 0" />
287+
<div style="padding: 16px; background: #f5f7fa; border-radius: 4px">
288+
<Toolbar>
289+
<template #title>
290+
<ElBreadcrumb separator="/">
291+
<ElBreadcrumbItem :to="{ path: '/' }">
292+
首页
293+
</ElBreadcrumbItem>
294+
<ElBreadcrumbItem>
295+
<a href="/">活动管理</a>
296+
</ElBreadcrumbItem>
297+
<ElBreadcrumbItem>活动列表</ElBreadcrumbItem>
298+
</ElBreadcrumb>
299+
</template>
300+
301+
<ElButtonGroup size="small">
302+
<ElButton>☰ 列表</ElButton>
303+
<ElButton>⊞ 网格</ElButton>
304+
</ElButtonGroup>
305+
306+
<ElInput
307+
placeholder="快速搜索..."
308+
style="width: 200px"
309+
size="small"
310+
clearable
311+
/>
312+
313+
<template #extra>
314+
<ElDropdown size="small">
315+
<ElButton size="small">
316+
批量操作 ▼
317+
</ElButton>
318+
<template #dropdown>
319+
<ElDropdownMenu>
320+
<ElDropdownItem>批量删除</ElDropdownItem>
321+
<ElDropdownItem>批量导出</ElDropdownItem>
322+
<ElDropdownItem>批量审核</ElDropdownItem>
323+
</ElDropdownMenu>
324+
</template>
325+
</ElDropdown>
326+
327+
<ElButton
328+
type="primary"
329+
size="small"
330+
>
331+
+ 新建活动
332+
</ElButton>
333+
</template>
334+
</Toolbar>
335+
</div>
336+
</div>
337+
338+
<!-- 组件说明 -->
339+
<div>
340+
<ElAlert
341+
type="info"
342+
:closable="false"
343+
show-icon
344+
>
345+
<template #title>
346+
<ElText tag="b">
347+
Toolbar 组件说明
348+
</ElText>
349+
</template>
350+
<div style="margin-top: 8px">
351+
<ul style="margin: 0; padding-left: 20px">
352+
<li>
353+
<ElText>
354+
<b>title 插槽/属性：</b>左侧标题区域，支持字符串或自定义内容
355+
</ElText>
356+
</li>
357+
<li>
358+
<ElText>
359+
<b>默认插槽：</b>中间内容区域，通常放置操作按钮、筛选条件等
360+
</ElText>
361+
</li>
362+
<li>
363+
<ElText>
364+
<b>extra 插槽：</b>右侧额外操作区域，通常放置主要操作按钮
365+
</ElText>
366+
</li>
367+
<li>
368+
<ElText>
369+
<b>样式定制：</b>支持通过
370+
titleStyle、contentStyle、extraStyle 自定义样式
371+
</ElText>
372+
</li>
373+
<li>
374+
<ElText>
375+
<b>自动分隔：</b>标题和内容之间会自动显示分隔线，当任一为空时自动隐藏
376+
</ElText>
377+
</li>
378+
</ul>
379+
</div>
380+
</ElAlert>
381+
</div>
382+
</ElSpace>
383+
</div>
384+
</SectionMain>
385+
</SectionLayout>
386+
</template>
387+
388+
<style scoped>
389+
:deep(.el-card__body) {
390+
padding: 16px;
391+
}
392+
</style>

0 commit comments

Comments
 (0)