# 全页长列表分页设计 — 2026-10-05

已按用户确认的预览方案接入现有页面，未发布。沿用现有墨绿强调色、表格、卡片与导航。

## 设计与范围

- 表格和普通列表默认每页 10 条；设备、故事卡片及长者名单默认 6 条；待办和版本详情默认 5 条；长聊天文字默认 20 条。
- 桌面显示数量、当前范围、每页条数、页码、省略号和跳页。窄栏及手机显示每页条数、上一页、当前页与下一页。短列表无需分页时不显示控件。
- 家庭端涵盖聊天、日常/故事记忆、长者、成员与家庭动态、陪伴设备、分享、数据请求、导出和服务用量。维护端涵盖设备、固件、模型、用量、价格版本与额度历史，同时覆盖已有配置、告警、诊断和内容质量组件中的动态列表。
- 菜单、固定授权选项、图表和少量概览不分页。各个业务列表独立保存页码，筛选、对象或所属范围改变时重置；删除导致页码越界时回到有效末页。
- 设备表跨页勾选保留；长者名单方向键、Home、End 可跨页选择并聚焦。

## 数据范围

沿用现有接口与数据请求，未修改后端。完整数组在前端分页；游标接口显示“已读取”数量，保留“读取后续记录”，新读取的数据也分页显示。不会将已读取数量当作后台总量。记忆搜索仍限于已读取内容；无匹配时仍可读取后续记录。

## 本地预览

- 家庭端：`http://127.0.0.1:5176/pagination-preview.html?state=pagination&section=members`
- 维护端：`http://127.0.0.1:5176/pagination-preview.html?state=pagination&screen=maintenance&area=devices`

预览使用仅 DEV 的示例数据。37 条成员/设备/模型/固件等记录，67 条聊天，120 条记忆；生产入口不加载预览代码。页面导航保留示例参数。

## 验证

TypeScript 与 Vite 生产构建通过，保留既有大包体积提示。浏览器操作验证设备末页 7 行、每页条数切换、跳页、搜索复位；记忆列表翻页、无搜索结果时继续读取、清空搜索复位、追加读取通过。手机尺寸下页码与跳页隐藏，显示紧凑翻页条；设备页 document.scrollWidth 与 clientWidth 相同。

初次预览的 Chrome 截图持续超时；确认实施后，内置浏览器截图可用，已补充设备分页截图并修正分页按钮被全局样式覆盖的问题。内置浏览器验证设备末页 7 行，以及勾选首行、翻到末页、返回首页后仍保持勾选。尚未完成所有页面的逐页截图对比，尚未部署到线上。

## 确认后的实施范围

确认后仅补充分页容器对原有 HTML 属性和列表标识的保留、维护账户切换组织时的页码复位，以及分页内部的当前页颜色区分。本次未编辑 API、认证入口或业务提交回调。

工作区含其他工作产生的家庭资料和隐私相关修改。批准预览的快照检查曾通过，随后整体哈希检查观察到这些文件变化；保留原有快照和检查结果，不将整个工作区的差异视为分页修改，也未回退其他工作。