Skip to content

Commit a5bc46f

Browse files
xingyan95xingyan95
authored
release v1.5.4 (#1601)
1 parent 228252a commit a5bc46f

File tree

18 files changed

+737
-52
lines changed

18 files changed

+737
-52
lines changed

‎packages/devui-vue/devui-cli/shared/constant.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ exports.VITEPRESS_SIDEBAR_FILE_EN = resolve(
2929
`config/${this.VITEPRESS_SIDEBAR_FILE_NAME_EN}`
3030
);
3131
// 这里的分类顺序将会影响最终生成的页面侧边栏顺序
32-
exports.VITEPRESS_SIDEBAR_CATEGORY = ['通用', '导航', '反馈', '数据录入', '数据展示', '布局'];
32+
exports.VITEPRESS_SIDEBAR_CATEGORY = ['通用', '导航', '反馈', '数据录入', '数据展示', '布局', '演进中'];
3333
exports.VITEPRESS_SIDEBAR_CATEGORY_EN = [
3434
'General',
3535
'Navigation',

‎packages/devui-vue/devui/action-timeline/index.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { App } from 'vue';
2+
import ActionTimeline from './src/action-timeline';
3+
export * from './src/action-timeline-types';
4+
5+
export { ActionTimeline };
6+
7+
export default {
8+
title: 'ActionTimeline 操作时间轴',
9+
category: '演进中',
10+
status: '100%',
11+
install(app: App): void {
12+
app.component(ActionTimeline.name, ActionTimeline);
13+
},
14+
};

‎packages/devui-vue/devui/action-timeline/src/action-timeline-types.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import type { ExtractPropTypes, PropType } from 'vue';
2+
3+
export interface ActionItem {
4+
action?: string;
5+
actionContent?: string;
6+
createdAt?: string;
7+
icon?: string;
8+
status?: 'color-none' | 'color-danger' | 'color-info' | 'color-success';
9+
[k: string]: unknown;
10+
}
11+
export interface ActionData {
12+
time?: string;
13+
actions?: ActionItem[];
14+
}
15+
export type TimelineLayout = 'horizontal' | 'vertical';
16+
export interface LoadMoreConfig {
17+
type?: string;
18+
loadMore?: boolean;
19+
isToTop?: boolean;
20+
loadMoreText?: string;
21+
toTopText?: string;
22+
}
23+
export const actionTimelineProps = {
24+
data: {
25+
type: Array as PropType<Array<ActionData>>,
26+
},
27+
layout: {
28+
type: String as PropType<TimelineLayout>,
29+
default: 'horizontal',
30+
},
31+
loadMoreConfig: {
32+
type: Object as PropType<LoadMoreConfig>,
33+
},
34+
showTailLine: {
35+
type: Boolean,
36+
default: true,
37+
},
38+
showStatusBgColor: {
39+
type: Boolean,
40+
default: false,
41+
},
42+
showStatusLineColor: {
43+
type: Boolean,
44+
default: false,
45+
},
46+
};
47+
export type ActionTimelineProps = ExtractPropTypes<typeof actionTimelineProps>;

‎packages/devui-vue/devui/action-timeline/src/action-timeline.scss‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
@import '../../styles-var/devui-var.scss';
2+
3+
.dp-action-timeline {
4+
background-color: $devui-base-bg;
5+
padding: 0 20px;
6+
position: relative;
7+
8+
.dp-action-timeline-title {
9+
font-size: $devui-font-size-sm;
10+
padding-top: 12px;
11+
12+
& > p {
13+
position: relative;
14+
z-index: 2;
15+
background-color: $devui-base-bg;
16+
padding: 8px 0;
17+
}
18+
}
19+
20+
.dp-action-timeline-item {
21+
display: flex;
22+
position: relative;
23+
padding: 12px 0;
24+
25+
&.list-last-item {
26+
&::before {
27+
content: '';
28+
position: absolute;
29+
top: 24px;
30+
height: calc(100% - 24px);
31+
left: 10px;
32+
border-left: 4px solid $devui-base-bg;
33+
z-index: 2;
34+
}
35+
}
36+
37+
.dp-action-timeline-list-icon {
38+
width: 24px;
39+
height: 24px;
40+
margin-right: 8px;
41+
border-radius: 50%;
42+
background-color: $devui-list-item-hover-bg;
43+
position: relative;
44+
z-index: 3;
45+
46+
&::before,
47+
&::after {
48+
content: '';
49+
position: absolute;
50+
height: 2px;
51+
width: 2px;
52+
left: 11px;
53+
background-color: $devui-base-bg;
54+
z-index: 3;
55+
}
56+
57+
&::before {
58+
top: -2px;
59+
}
60+
61+
&::after {
62+
bottom: -2px;
63+
}
64+
65+
&.item-empty-icon {
66+
background: none;
67+
68+
&::before {
69+
top: 7px;
70+
}
71+
72+
&::before {
73+
bottom: 7px;
74+
}
75+
76+
.list-empty-icon-dot {
77+
position: absolute;
78+
width: 6px;
79+
height: 6px;
80+
background-color: $devui-list-item-hover-bg;
81+
top: 9px;
82+
left: 9px;
83+
border-radius: 50%;
84+
}
85+
}
86+
87+
.icon {
88+
width: 24px;
89+
font-size: $devui-font-size-icon;
90+
color: $devui-icon-text;
91+
text-align: center;
92+
line-height: 24px;
93+
}
94+
95+
&.color-info {
96+
.icon {
97+
color: $devui-info;
98+
}
99+
}
100+
101+
&.color-danger {
102+
.icon {
103+
color: $devui-danger;
104+
}
105+
}
106+
107+
&.color-success {
108+
.icon {
109+
color: $devui-success;
110+
}
111+
}
112+
113+
&.color-warning {
114+
.icon {
115+
color: $devui-warning;
116+
}
117+
}
118+
}
119+
120+
.dp-action-timeline-list-data {
121+
flex: 1;
122+
word-break: break-all;
123+
}
124+
125+
.dp-action-timeline-item-date {
126+
font-size: $devui-font-size-sm;
127+
color: $devui-aide-text;
128+
}
129+
130+
.border-bottom {
131+
position: absolute;
132+
bottom: 0;
133+
width: calc(100% - 12px);
134+
height: 1px;
135+
margin-left: 12px;
136+
background-color: $devui-dividing-line;
137+
}
138+
139+
&.vertical-list-item {
140+
display: flex;
141+
flex-direction: column;
142+
143+
.vertical-list-item-top {
144+
display: flex;
145+
align-items: center;
146+
justify-content: space-between;
147+
148+
.vertical-list-item-top-left {
149+
display: flex;
150+
align-items: center;
151+
}
152+
}
153+
}
154+
}
155+
156+
.border-left {
157+
position: absolute;
158+
bottom: 0;
159+
left: 31px;
160+
width: 2px;
161+
height: 100%;
162+
background-color: $devui-dividing-line;
163+
z-index: 1;
164+
}
165+
166+
&:first-child .border-left {
167+
height: calc(100% - 26px);
168+
}
169+
}
170+
171+
.dp-action-timeline-operation-container {
172+
.dp-action-timeline-operation {
173+
margin: 0 18px;
174+
padding: 4px 0;
175+
height: 32px;
176+
font-size: $devui-font-size-lg;
177+
text-align: center;
178+
border: 1px solid $devui-form-control-line;
179+
background-color: $devui-base-bg;
180+
border-radius: 4px;
181+
cursor: pointer;
182+
transition:
183+
color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
184+
border-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
185+
186+
&:hover {
187+
color: $devui-brand-active;
188+
border-color: $devui-form-control-line-active;
189+
}
190+
}
191+
}
192+
193+
.dp-action-timeline-status-bg {
194+
.dp-action-timeline-list-icon {
195+
&.color-info {
196+
background-color: $devui-info-bg;
197+
}
198+
199+
&.color-danger {
200+
background-color: $devui-danger-bg;
201+
}
202+
203+
&.color-success {
204+
background-color: $devui-success-bg;
205+
}
206+
207+
&.color-warning {
208+
background-color: $devui-warning-bg;
209+
}
210+
}
211+
}
212+
213+
@mixin before-style {
214+
content: '';
215+
position: absolute;
216+
top: 40px;
217+
height: calc(100% - 40px);
218+
left: 11px;
219+
border-left: 2px solid transparent;
220+
z-index: 2;
221+
}
222+
223+
.dp-action-timeline-status-line {
224+
.border-left {
225+
display: none;
226+
}
227+
228+
.dp-action-timeline-item {
229+
&::before {
230+
@include before-style;
231+
232+
border-color: $devui-line;
233+
}
234+
235+
&.dp-action-timeline-item-info::before {
236+
@include before-style;
237+
238+
border-color: $devui-info-line;
239+
}
240+
241+
&.dp-action-timeline-item-danger::before {
242+
@include before-style;
243+
244+
border-color: $devui-danger-line;
245+
}
246+
247+
&.dp-action-timeline-item-success::before {
248+
@include before-style;
249+
250+
border-color: $devui-success-line;
251+
}
252+
253+
&.dp-action-timeline-item-warning::before {
254+
@include before-style;
255+
256+
border-color: $devui-warning-line;
257+
}
258+
259+
&.list-last-item::before {
260+
@include before-style;
261+
262+
border-color: $devui-base-bg;
263+
}
264+
}
265+
}

0 commit comments

Comments
 (0)