新增: 列表分页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:
@@ -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)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user