新增: 列表分页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:
@@ -77,6 +77,13 @@
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 分页器(F-260621-02 P3):pageSize=0 不分页(全量,等价旧行为);用户选 N 条触发客户端切片 -->
|
||||
<Paginator
|
||||
v-model:page="page"
|
||||
v-model:pageSize="pageSize"
|
||||
:total="store.tasks.length"
|
||||
/>
|
||||
|
||||
<!-- 新建任务模态框 -->
|
||||
<div class="modal-overlay" v-if="showCreateModal" @click.self="showCreateModal = false">
|
||||
<div class="modal-box">
|
||||
@@ -115,6 +122,7 @@ import { useProjectStore } from '@/stores/project'
|
||||
import { formatRelative } from '@/utils/time'
|
||||
import { taskStatusLabel as statusLabel, taskStatusClass, priorityLabel, priorityClass } from '../constants/project'
|
||||
import type { TaskRecord, TaskQuery } from '@/api/types'
|
||||
import Paginator from '../components/Paginator.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useProjectStore()
|
||||
@@ -125,6 +133,10 @@ const activeStatus = ref('all')
|
||||
// Y-2: 本视图加载态(loadTasks 不翻转全局 state.loading,故用局部 ref 精确反映任务加载)
|
||||
const loading = ref(false)
|
||||
|
||||
// 分页(F-260621-02 P3):pageSize=0 → 全量(向后兼容,等价改造前);用户选 N → 客户端切片
|
||||
const page = ref(1)
|
||||
const pageSize = ref(0)
|
||||
|
||||
// ── 新建任务模态框 ──
|
||||
const showCreateModal = ref(false)
|
||||
const newTaskProjectId = ref('')
|
||||
@@ -176,7 +188,12 @@ const projectIcons: Record<string, string> = {
|
||||
// 注:project 维度同样下沉后端(activeProject watch 构造 query),store.tasks 已按
|
||||
// project_id 过滤。groupMap 保留分组逻辑(展示按项目聚合),无需再 filter。
|
||||
const filteredGroups = computed(() => {
|
||||
const filtered = store.tasks
|
||||
// 分页(F-260621-02):pageSize=0 → 全量切片(等价改造前);否则取当前页窗口。
|
||||
// 先对扁平 store.tasks 切片,再分组(保持按项目聚合语义,分组在页窗口内)。
|
||||
const all = store.tasks
|
||||
const filtered = pageSize.value > 0
|
||||
? all.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)
|
||||
: all
|
||||
|
||||
const groupMap = new Map<string, TaskRecord[]>()
|
||||
for (const task of filtered) {
|
||||
@@ -254,6 +271,7 @@ async function confirmCreate() {
|
||||
// F-260621-02(P1 status 下沉):重载 query 同时含 project_id + status,前端不再 filter status
|
||||
watch(activeProject, () => {
|
||||
store.setActiveTaskProject(activeProject.value)
|
||||
page.value = 1
|
||||
loading.value = true
|
||||
store.loadTasks(buildTaskQuery()).finally(() => { loading.value = false })
|
||||
})
|
||||
@@ -262,6 +280,7 @@ watch(activeProject, () => {
|
||||
// 并登记到 store 供 AR-11 listener 复用同一筛选(保 B-29 契约)
|
||||
watch(activeStatus, (key) => {
|
||||
store.setActiveTaskStatus(key)
|
||||
page.value = 1
|
||||
loading.value = true
|
||||
store.loadTasks(buildTaskQuery()).finally(() => { loading.value = false })
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user