Skip to content

Commit dfb5f87

Browse files
author
githubnull
committed
fix(frontend): move refresh button next to reset button in TaskFilter
- Move refresh button from card title to TaskFilter component - Place refresh button horizontally after reset button - Add loading prop and refresh event to TaskFilter - Change reset button icon to pi-undo for better semantics
1 parent 5731f92 commit dfb5f87

2 files changed

Lines changed: 21 additions & 2 deletions

File tree

src/frontEnd/src/components/TaskFilter.vue

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,13 +97,22 @@
9797
<div class="filter-item action-item">
9898
<Button
9999
label="重置"
100-
icon="pi pi-refresh"
100+
icon="pi pi-undo"
101101
@click="resetFilters"
102102
severity="secondary"
103103
outlined
104104
size="small"
105105
class="reset-btn"
106106
/>
107+
<Button
108+
label="刷新"
109+
icon="pi pi-refresh"
110+
@click="emit('refresh')"
111+
severity="primary"
112+
:loading="props.loading"
113+
size="small"
114+
class="refresh-btn"
115+
/>
107116
</div>
108117
</div>
109118

@@ -126,10 +135,12 @@ interface Props {
126135
filters: TaskFilters
127136
filteredCount: number
128137
totalCount: number
138+
loading?: boolean
129139
}
130140
131141
interface Emits {
132142
(e: 'update:filters', filters: TaskFilters): void
143+
(e: 'refresh'): void
133144
}
134145
135146
const props = defineProps<Props>()
@@ -291,7 +302,9 @@ function resetFilters() {
291302
.action-item {
292303
flex: 0 0 auto;
293304
display: flex;
305+
flex-direction: row;
294306
align-items: flex-end;
307+
gap: 8px;
295308
}
296309
}
297310
@@ -328,6 +341,11 @@ function resetFilters() {
328341
font-size: 12px;
329342
}
330343
344+
.refresh-btn {
345+
height: 36px;
346+
font-size: 12px;
347+
}
348+
331349
.datepicker-footer {
332350
display: flex;
333351
justify-content: flex-end;

src/frontEnd/src/views/TaskList/index.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<template #title>
55
<div class="flex-between">
66
<span>任务列表</span>
7-
<Button label="刷新" icon="pi pi-refresh" @click="fetchTasks" :loading="taskStore.loading" />
87
</div>
98
</template>
109
<template #content>
@@ -13,7 +12,9 @@
1312
:filters="taskStore.filters"
1413
:filteredCount="taskStore.sortedTaskList.length"
1514
:totalCount="taskStore.taskList.length"
15+
:loading="taskStore.loading"
1616
@update:filters="handleFilterChange"
17+
@refresh="fetchTasks"
1718
/>
1819

1920
<!-- 批量操作栏 -->

0 commit comments

Comments
 (0)