This commit is contained in:
2026-03-17 00:46:51 +08:00
parent 4a5fdd3961
commit f0ecab4350
20 changed files with 283 additions and 287 deletions

View File

@@ -174,43 +174,12 @@
</div>
<!-- 分页 -->
<div v-if="paginationConfig.total > 0" class="flex items-center justify-between py-4 border-t">
<span class="text-sm text-muted-foreground">
{{ paginationConfig.total }} 条记录
</span>
<Pagination
v-slot="{ page }"
:items-per-page="paginationConfig.pageSize"
:total="paginationConfig.total"
:sibling-count="1"
show-edges
:page="paginationConfig.current"
@update:page="handlePageChange"
>
<PaginationContent v-slot="{ items }">
<PaginationFirst @click="handlePageChange(1)" />
<PaginationPrevious @click="handlePageChange(paginationConfig.current - 1)" />
<template v-for="(item, index) in items" :key="index">
<PaginationItem
v-if="item.type === 'page'"
:value="item.value"
as-child
>
<Button
:variant="page === item.value ? 'default' : 'outline'"
size="icon-sm"
class="h-8 w-8"
>
{{ item.value }}
</Button>
</PaginationItem>
<PaginationEllipsis v-else :index="index" />
</template>
<PaginationNext @click="handlePageChange(paginationConfig.current + 1)" />
<PaginationLast @click="handlePageChange(Math.ceil(paginationConfig.total / paginationConfig.pageSize))" />
</PaginationContent>
</Pagination>
</div>
<TablePagination
:current="paginationConfig.current"
:page-size="paginationConfig.pageSize"
:total="paginationConfig.total"
@change="handlePageChange"
/>
</div>
</div>
@@ -249,16 +218,7 @@ import { Progress } from '@/components/ui/progress'
import { Alert } from '@/components/ui/alert'
import { Spinner } from '@/components/ui/spinner'
import { Checkbox } from '@/components/ui/checkbox'
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationFirst,
PaginationItem,
PaginationLast,
PaginationNext,
PaginationPrevious
} from '@/components/ui/pagination'
import { TablePagination } from '@/components/ui/pagination'
import {
AlertDialog,
AlertDialogAction,
@@ -396,7 +356,7 @@ onMounted(fetchList)
<style scoped lang="less">
.task-page {
padding: var(--space-4);
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
@@ -404,17 +364,20 @@ onMounted(fetchList)
}
.task-page__filters {
padding: var(--space-4);
background: var(--color-bg-card);
flex-shrink: 0;
padding: var(--space-5);
background: var(--card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.task-page__content {
flex: 1;
overflow: hidden;
background: var(--color-bg-card);
background: var(--card);
border-radius: var(--radius-lg);
padding: var(--space-4);
border: 1px solid var(--border);
padding: var(--space-5);
display: flex;
flex-direction: column;
}

View File

@@ -1,15 +1,15 @@
<template>
<div class="task-layout">
<!-- 顶部Tab栏 - 现代化设计 -->
<!-- 顶部Tab栏 -->
<div class="task-layout__header">
<div class="flex items-center justify-between">
<Tabs v-model:model-value="currentType" class="w-auto">
<TabsList class="h-11 bg-muted/50 p-1 gap-1">
<TabsList class="h-auto bg-transparent p-0 gap-2">
<TabsTrigger
v-for="item in NAV_ITEMS"
:key="item.type"
:value="item.type"
class="h-9 px-4 gap-2 rounded-md transition-all data-[state=active]:bg-background data-[state=active]:shadow-sm data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:text-foreground"
class="h-9 px-4 gap-2 rounded-lg bg-transparent transition-all data-[state=active]:bg-primary data-[state=active]:text-white data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:bg-muted focus-visible:ring-0 focus-visible:outline-none"
>
<Icon :icon="item.icon" class="size-4" />
<span class="font-medium">{{ item.label }}</span>
@@ -80,10 +80,9 @@ const currentComponent = computed(() => {
.task-layout__header {
flex-shrink: 0;
padding: var(--space-4) var(--space-6);
background: var(--card);
padding: 0 var(--space-4);
background: var(--color-bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.task-layout__content {

View File

@@ -22,7 +22,7 @@
<Icon icon="lucide:search" class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
<Input
v-model="filters.keyword"
placeholder="搜索标题"
placeholder="搜索任务名称"
class="pl-9"
@keyup.enter="handleFilterChange"
/>
@@ -63,30 +63,29 @@
<!-- 任务列表 -->
<div class="task-page__content">
<!-- 批量操作工具 -->
<div class="batch-toolbar flex items-center gap-3 pb-3 border-b">
<span v-if="selectedRowKeys.length > 0" class="text-sm">
已选择 <strong class="text-primary">{{ selectedRowKeys.length }}</strong>
</span>
<Button
:disabled="!hasDownloadableSelected"
:loading="batchDownloading"
size="sm"
class="text-white"
@click="handleBatchDownloadSelected"
>
<Icon icon="lucide:download" class="mr-1 size-4" />
批量下载 ({{ downloadableCount }})
</Button>
<Button
variant="destructive"
size="sm"
:disabled="selectedRowKeys.length === 0"
@click="handleBatchDeleteSelected"
>
<Icon icon="lucide:trash-2" class="mr-1 size-4" />
批量删除
</Button>
<!-- 批量操作栏 -->
<div v-if="selectedRowKeys.length > 0" class="batch-actions">
<Alert class="flex items-center justify-between">
<div class="flex items-center gap-2">
<Icon icon="lucide:info" class="size-4" />
<span>已选中 {{ selectedRowKeys.length }} </span>
</div>
<div class="flex items-center gap-2">
<Button
:disabled="!hasDownloadableSelected"
:loading="batchDownloading"
size="sm"
@click="handleBatchDownloadSelected"
>
<Icon icon="lucide:download" class="mr-1 size-4" />
批量下载 ({{ downloadableCount }})
</Button>
<Button variant="destructive" size="sm" @click="handleBatchDeleteSelected">
<Icon icon="lucide:trash-2" class="mr-1 size-4" />
批量删除
</Button>
</div>
</Alert>
</div>
<div class="relative min-h-[200px]">
@@ -251,43 +250,12 @@
</div>
<!-- 分页 -->
<div v-if="paginationConfig.total > 0" class="flex items-center justify-between py-4 border-t">
<span class="text-sm text-muted-foreground">
{{ paginationConfig.total }} 条记录
</span>
<Pagination
v-slot="{ page }"
:items-per-page="paginationConfig.pageSize"
:total="paginationConfig.total"
:sibling-count="1"
show-edges
:page="paginationConfig.current"
@update:page="handlePageChange"
>
<PaginationContent v-slot="{ items }">
<PaginationFirst @click="handlePageChange(1)" />
<PaginationPrevious @click="handlePageChange(paginationConfig.current - 1)" />
<template v-for="(item, index) in items" :key="index">
<PaginationItem
v-if="item.type === 'page'"
:value="item.value"
as-child
>
<Button
:variant="page === item.value ? 'default' : 'outline'"
size="icon-sm"
class="h-8 w-8"
>
{{ item.value }}
</Button>
</PaginationItem>
<PaginationEllipsis v-else :index="index" />
</template>
<PaginationNext @click="handlePageChange(paginationConfig.current + 1)" />
<PaginationLast @click="handlePageChange(Math.ceil(paginationConfig.total / paginationConfig.pageSize))" />
</PaginationContent>
</Pagination>
</div>
<TablePagination
:current="paginationConfig.current"
:page-size="paginationConfig.pageSize"
:total="paginationConfig.total"
@change="handlePageChange"
/>
</div>
</div>
@@ -363,16 +331,7 @@ import {
AlertDialogHeader,
AlertDialogTitle
} from '@/components/ui/alert-dialog'
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationFirst,
PaginationItem,
PaginationLast,
PaginationNext,
PaginationPrevious
} from '@/components/ui/pagination'
import { TablePagination } from '@/components/ui/pagination'
import { MixTaskService } from '@/api/mixTask'
import { formatDate } from '@/utils/file'
import { useTaskList } from '@/views/system/task-management/composables/useTaskList'
@@ -620,7 +579,7 @@ onMounted(fetchList)
<style scoped lang="less">
.task-page {
padding: 0;
padding: var(--space-4);
height: 100%;
display: flex;
flex-direction: column;
@@ -628,28 +587,22 @@ onMounted(fetchList)
}
.task-page__filters {
flex-shrink: 0;
padding: var(--space-5);
background: var(--card);
padding: var(--space-4);
background: var(--color-bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.task-page__content {
flex: 1;
overflow: hidden;
background: var(--card);
background: var(--color-bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
padding: var(--space-5);
padding: var(--space-4);
display: flex;
flex-direction: column;
}
.batch-toolbar {
flex-shrink: 0;
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border);
.batch-actions {
margin-bottom: var(--space-4);
}