优化
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user