新增: 列表分页UI(Paginator组件+三视图接入)

Paginator.vue复用组件(客户端切片,不发新IPC,数据量小前瞻基建)
Tasks/Ideas/Projects.vue接store列表切片(pagedProjects/pagedIdeas)
向后兼容铁律:pageSize=0整组件v-if隐藏+切片返全量,等价改造前行为
旧调用方(store.loadTasks等签名)零改动,分页状态纯前端ref
筛选/排序变化page重置1防越界空页;i18n双语pagination键齐备
This commit is contained in:
2026-06-22 01:24:50 +08:00
parent 82059bac4a
commit 83cee61476
6 changed files with 244 additions and 6 deletions

View File

@@ -140,9 +140,16 @@
<!-- 项目卡片网格(单卡片渲染抽至 components/project/ProjectCard.vue,删除走 emit 回父处理) -->
<div class="project-grid">
<ProjectCard v-for="project in store.projects" :key="project.id" :project="project" @delete="handleDelete" />
<ProjectCard v-for="project in pagedProjects" :key="project.id" :project="project" @delete="handleDelete" />
</div>
<!-- 分页器(F-260621-02 P3):pageSize=0 不分页(全量,等价旧行为);用户选 N 条触发客户端切片 -->
<Paginator
v-model:page="page"
v-model:pageSize="pageSize"
:total="store.projects.length"
/>
<!-- 空状态 -->
<div v-if="!store.loading && store.projects.length === 0" class="empty-state">
{{ $t('projects.empty') }}
@@ -165,6 +172,7 @@ import { projectApi } from '@/api'
import { formatDate } from '@/utils/time'
import ConfirmDialog from '@/components/ConfirmDialog.vue'
import ProjectCard from '@/components/project/ProjectCard.vue'
import Paginator from '@/components/Paginator.vue'
import { useConfirm } from '@/composables/useConfirm'
import type { ProjectRecord } from '@/api/types'
import type { ScannedProjectItem } from '@/api/project'
@@ -172,6 +180,17 @@ import type { ScannedProjectItem } from '@/api/project'
const store = useProjectStore()
const { t } = useI18n()
// 分页(F-260621-02 P3):pageSize=0 → 全量(向后兼容,等价改造前);用户选 N → 客户端切片
const page = ref(1)
const pageSize = ref(0)
// 分页视图:pageSize=0 → 全量;否则取当前页窗口
const pagedProjects = computed(() => {
if (pageSize.value <= 0) return store.projects
const start = (page.value - 1) * pageSize.value
return store.projects.slice(start, start + pageSize.value)
})
// 状态映射统一走 ../constants/project(与 ProjectDetail/Tasks/Dashboard 一致)
// formatDate 由 ../utils/time 提供(统一毫秒字符串解析,根治 Invalid Date