保存视觉审核与文档流迁移进度
This commit is contained in:
rain
@@ -0,0 +1,73 @@
|
||||
# 全项目文档流迁移实施计划
|
||||
|
||||
> **执行要求：** 使用 `superpowers:executing-plans` 当前会话内联执行。用户禁止多代理、worktree 及全部 Git 写操作；不执行提交步骤。
|
||||
|
||||
**目标：** 除用户指定 fixed 的顶部/底部导航与真实弹层外，清除全项目页面内容的脱离文档流定位，并保持现有业务状态与视觉语言。
|
||||
|
||||
**架构：** 以一个静态合同和精确 JSON 白名单为单一规则所有者；先完成 R02 样板，再迁移共享组件和模块页面。每批通过现有 CDP smoke、四档响应式及同尺寸截图后进入下一批。
|
||||
|
||||
**技术栈：** uni-app Vue 3、SCSS、PowerShell、Node.js、Chrome CDP。
|
||||
|
||||
## 全局约束
|
||||
|
||||
- 禁止普通内容使用 `absolute/fixed/sticky`、负外边距或以位移 transform 承担布局；按钮按压等不改变排版的交互微动效可以保留。
|
||||
- 允许定位的职责为固定顶部/底部导航、独立视口背景、真实弹层，以及受明确父容器约束的纯装饰、角标、红点和关系线，必须精确白名单。
|
||||
- 不删除或重绘现有资产；装饰图优先改作 background/border-image，只有确需局部叠放时保留 absolute。
|
||||
- 四档为 320×568、360×640、360×800、412×915。
|
||||
- 每次只修改当前批次，验证失败立即停止扩散。
|
||||
|
||||
---
|
||||
|
||||
### 任务 1：建立全项目失败合同
|
||||
|
||||
**文件：**
|
||||
- 新建：`tests/document-flow-position-allowlist.json`
|
||||
- 新建：`tests/document-flow-position-contract.ps1`
|
||||
|
||||
- [ ] 白名单先登记 `PageHeader.vue` 的固定顶部栏、`AppTabbar.vue` 的固定底部栏、`AppDialog.vue` 的弹窗层／皮肤和 `AppToast.vue` 的 Toast；其他页面本地弹层在迁移到对应批次时逐项审计后登记。
|
||||
- [ ] 合同扫描 `pages/**/*.vue` 与 `components/**/*.vue` 的 style 块，报告不在精确文件+选择器白名单内的 `absolute/fixed/sticky`。
|
||||
- [ ] 合同同时禁止普通选择器出现负 margin 和 `transform: translate(...)` 布局。
|
||||
- [ ] 运行合同并保存初始 37 文件违规清单；预期 FAIL，不放宽规则。
|
||||
|
||||
### 任务 2：R02 文档流样板
|
||||
|
||||
**文件：**
|
||||
- 修改：`pages/records/r02-person-detail.vue`
|
||||
- 修改：`tests/r02-person-detail-contract.ps1`
|
||||
- 修改：`tests/r02-person-detail-runtime-smoke.js`
|
||||
|
||||
- [ ] 先扩展 R02 合同，禁止文件内 `absolute/fixed/sticky` 并要求题签、卡片、短字段、长字段和状态卡使用 background + flex/grid。
|
||||
- [ ] 运行确认 RED。
|
||||
- [ ] 删除装饰 `<image>` 叠层；对应容器使用 records 资产作为背景。
|
||||
- [ ] 题签 copy、字段 label/input、textarea、状态文案全部使用文档流；容器高度由内容和 min-height 控制。
|
||||
- [ ] 运行 R02 合同、入口交互 smoke、四档 smoke，捕获 412×915 详情和编辑态供复核。
|
||||
|
||||
### 任务 3：共享基础组件
|
||||
|
||||
**文件：** `components/AppButton.vue`、`PageHeader.vue`、`AppTabbar.vue`、`ModulePageBackground.vue`、`GenealogyPageBackground.vue`、`GenealogyCard.vue`
|
||||
|
||||
- [ ] 每个组件先新增聚焦合同并确认 RED。
|
||||
- [ ] PageHeader 与 AppTabbar 保留 fixed，并分别提供正常流顶部占位和页面底部避让；按钮/Header 的局部装饰、角标与红点逐项判断，能用背景则转背景，必须叠放则精确白名单；独立视口背景层可保留 fixed。
|
||||
- [ ] GenealogyCard 内容改 flex/grid，皮肤转背景。
|
||||
- [ ] 对 G01、T07、F01、R01、N01、M01 六基准做四档和同尺寸回归。
|
||||
|
||||
### 任务 4：通用 ModulePage
|
||||
|
||||
**文件：** `components/ModulePage.vue` 及其聚焦测试
|
||||
|
||||
- [ ] 合同禁止普通表单、列表、详情、时间轴、设置和状态卡定位。
|
||||
- [ ] 装饰图转背景；字段用 grid；卡片内容自然撑高。
|
||||
- [ ] 执行全部消费 ModulePage 的路由 smoke 和四档回归。
|
||||
|
||||
### 任务 5：模块分批迁移
|
||||
|
||||
- [ ] R → N → M → F：每页先合同 RED，再改文档流，再跑模块四档。
|
||||
- [ ] G：保留真实弹层白名单，页面卡片、表单、Header、背景全部文档流。
|
||||
- [ ] T：目录和表单使用 grid/flex；T01 世系节点和关系线用 grid/border 重做。
|
||||
- [ ] A：登录、注册、重置和封存 A06 的普通内容文档流；验证弹窗／Toast 保留精确白名单。
|
||||
|
||||
### 任务 6：最终收敛
|
||||
|
||||
- [ ] `tests/document-flow-position-contract.ps1` 最终 PASS，输出零普通内容违规。
|
||||
- [ ] 运行活动路由转换、关键交互 smoke、四档响应式和 `git diff --check`。
|
||||
- [ ] 更新验收规划与交接记录，逐一说明冻结页是否保留 `[x]`；没有截图或用户确认不得宣称视觉冻结完成。
|
||||
@@ -1,53 +0,0 @@
|
||||
# T01 纵向世系轴基准 Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking。
|
||||
|
||||
**Goal:** 将 T01 重构为纵向分代、关系线清晰、节点可选择的世系树基准页。
|
||||
|
||||
**Architecture:** 页面继续由 `treeState` 管理加载、树、阅读提示、空和失败状态。树态使用固定的三代模拟数据和绝对定位关系线，透明真实资产承载节点、状态卡和成员信息栏，横向滚动只服务同代分支扩展。
|
||||
|
||||
**Tech Stack:** uni-app、Vue 3、SCSS、现有 PNG 资产、PowerShell 静态契约、Chrome CDP 运行时验证。
|
||||
|
||||
## Global Constraints
|
||||
|
||||
- 只修改 T01 及其聚焦测试、设计文档和复制到 tree 命名空间的资产。
|
||||
- 不接 API，不新增路由，不使用系统弹窗或加载。
|
||||
- 不执行 Git add、commit、push、reset、checkout，不使用 worktree 或多代理。
|
||||
- 不删除或覆盖现有修改、测试、文档、截图与资产。
|
||||
|
||||
### Task 1: 新视觉契约（RED）
|
||||
|
||||
**Files:**
|
||||
- Modify: `tests/t01-tree-state-contract.ps1`
|
||||
- Modify: `tests/t01-all-states-visual-contract.ps1`
|
||||
|
||||
- [ ] 要求 `lineage-connector`、三代横向标签、透明节点／状态／信息栏资产和现有四条路由。
|
||||
- [ ] 明确禁止 T01 继续引用三个旧不透明表面资产。
|
||||
- [ ] 运行两个契约，确认因页面尚未实现新结构而失败。
|
||||
|
||||
### Task 2: 透明资产与纵向树（GREEN）
|
||||
|
||||
**Files:**
|
||||
- Create: `static/assets/modules/tree/transparent/t01-member-node.png`
|
||||
- Create: `static/assets/modules/tree/transparent/t01-member-node-selected.png`
|
||||
- Create: `static/assets/modules/tree/transparent/t01-state-panel.png`
|
||||
- Create: `static/assets/modules/tree/transparent/t01-member-drawer.png`
|
||||
- Modify: `pages/tree/t01-tree-overview.vue`
|
||||
|
||||
- [ ] 复制经过检查的现有透明资产到 tree 模块命名空间，不改动来源文件。
|
||||
- [ ] 重排三代节点，加入祖先到子代的垂直／水平关系线和明确世代带。
|
||||
- [ ] 实现红色选中节点、底部透明成员栏和同代横向阅读提示。
|
||||
- [ ] 保留 `AppLoading`、查询状态和 T03/T04/T06/T07 导航。
|
||||
- [ ] 运行聚焦契约并修至通过。
|
||||
|
||||
### Task 3: 运行时与视觉复核
|
||||
|
||||
**Files:**
|
||||
- Modify only if necessary: `tests/t01-tree-state-runtime-smoke.js`
|
||||
- Create/update evidence under: `docs/design/screens/runtime/2026-07-20/t01-baseline/`
|
||||
|
||||
- [ ] 运行 T01 运行时 smoke，检查各状态和人物资料跳转。
|
||||
- [ ] 在既有 Chrome 标签页检查四档响应式尺寸，重点排除节点裁切、断线和底栏遮挡。
|
||||
- [ ] 对同一 `412×915` 状态做前后视觉对照并修复可见的 P0/P1/P2 问题。
|
||||
- [ ] 只向用户展示正常树态，等待明确审批后再切下一状态；审批前不标记 `[x]`。
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
# 全项目文档流迁移设计
|
||||
|
||||
## 目标
|
||||
|
||||
把项目中除固定顶部导航栏、固定底部导航栏、真实弹窗、Toast、遮罩、底部弹层和全屏预览外的页面结构全部改为正常文档流，消除正常文字、输入框、按钮、卡片和背景依赖 `absolute`、`fixed` 或 `sticky` 的布局风险。迁移覆盖 `pages/`、`components/`、活动页面和封存的 A06 源码，不接接口、不删除资产。
|
||||
|
||||
## 当前证据
|
||||
|
||||
只读审计发现 37 个 Vue 文件包含 `position: absolute|fixed|sticky`。用法混合了正常内容、装饰图层、页面背景、Tabbar、世系关系线和真实弹层，不能机械删除。R02 已证明普通文字、字段标签和输入框也被定位到装饰图之上，系统字体、长文案、键盘或尺寸变化时存在重叠风险。
|
||||
|
||||
## 单一合同
|
||||
|
||||
- 正常页面内容只允许块级流、flex、grid、gap、padding、margin 和内容自然撑高。
|
||||
- 禁止用 `absolute`、`fixed`、`sticky`、负外边距或位移 transform 摆放普通文字、输入、按钮、卡片、页面背景或世系节点。
|
||||
- `position: relative` 虽不脱离文档流，但普通内容无明确必要时不使用；不得以它作为重新叠放内容的前置手段。
|
||||
- 装饰框优先使用 `background-image`、`border-image` 或九宫格背景；确实需要叠在明确局部容器内的纯装饰图层、角标和红点可以使用 `absolute`，但不得承担正文排版。
|
||||
- 世系节点使用 grid/flex 文档流；关系线属于节点间局部绘制层，可按实际结构使用 grid 边框或受父容器约束的 `absolute`，不得用定位摆放节点正文。
|
||||
- 允许定位的职责只有：固定顶部/底部导航、独立视口背景层、真实弹窗、Toast、遮罩、底部弹层、全屏预览，以及受明确父容器约束的纯装饰/角标/关系线。顶部、底部导航使用 `position: fixed`，页面内容通过正常流占位和安全区 padding 避让。每条例外必须进入精确白名单，记录文件、选择器和用途，不允许按模糊类名放行。
|
||||
- 合同所有者为 `tests/document-flow-position-contract.ps1`，白名单为 `tests/document-flow-position-allowlist.json`。合同必须扫描所有 `position` 声明，包括 `relative`；普通容器不得因叠层或 z-index 习惯而残留无意义定位。运行代码、文档和其他测试不得重新定义第二套例外规则。
|
||||
|
||||
## 迁移顺序
|
||||
|
||||
1. 建立合同、精确白名单和 37 文件初始清单，测试先失败并输出全部违规位置。
|
||||
2. R02 作为第一张页面样板：人物题签、档案卡、表单、状态卡全部改为背景 + flex/grid 文档流。
|
||||
3. 迁移共享控件：AppButton、PageHeader、AppTabbar、ModulePageBackground、GenealogyPageBackground、GenealogyCard；PageHeader 与 AppTabbar 保留用户指定的 fixed 白名单，清除其内部普通内容和装饰定位；弹层组件保留白名单定位。
|
||||
4. 迁移 `ModulePage`，让普通 F/R/N/M 页面共享文档流结构。
|
||||
5. 按 R → N → M → F → G → T → A 迁移专属页面；A06 源码也纳入静态合同。
|
||||
6. 每批执行聚焦合同、现有交互 smoke、四档响应式、真实截图和 `git diff --check`。
|
||||
|
||||
## 冻结页
|
||||
|
||||
当前冻结页不自动取消 `[x]`。每次共享组件或页面迁移后进行同尺寸前后对比：无可见变化且四档通过则保留；有任何可见变化则退回 `[~]` 等待用户复核。不得用自动化通过替代用户确认。
|
||||
|
||||
## 验收门槛
|
||||
|
||||
- 全项目合同最终为零违规，白名单只含固定顶部/底部导航和真实弹层。
|
||||
- 52 条活动路由和封存 A06 源码均被扫描。
|
||||
- 四档固定为 320×568、360×640、360×800、412×915。
|
||||
- 长文案、约 1.3 倍字号、输入校验和键盘场景不重叠，操作区可滚动到达。
|
||||
- 5173 和唯一 9222 Chrome 标签继续复用；不声明 Android 已完成。
|
||||
|
||||
## 边界
|
||||
|
||||
不执行多代理、worktree、git add/commit/push/reset/checkout；不删除、覆盖或清理现有修改、未跟踪文件、测试、文档、截图、母版和候选资产。已知仓库治理失败不通过放宽阈值或删除文件处理。
|
||||
@@ -1,38 +0,0 @@
|
||||
# T01 纵向世系轴基准设计
|
||||
|
||||
## 目标
|
||||
|
||||
将 T01 从“横向大画布上的独立成员卡”调整为可直接读懂亲缘关系的纵向世系轴，并作为后续世系树页面的视觉基准。本轮仅使用页面内模拟数据，不接接口。
|
||||
|
||||
## 已确认方向
|
||||
|
||||
- 始祖置于顶部中央，后代按世代向下分层。
|
||||
- 同一世代横向排列；只有分支超过当前宽度时才横向拖动。
|
||||
- 首屏必须完整看到始祖和主要下一代，不能以裁切节点暗示结构。
|
||||
- 祖先到子代之间显示连续、清晰的关系线；选中成员以红色节点框和文字强调。
|
||||
- 世代标题采用横向分层标签，不再使用分散的竖排小字。
|
||||
- 选中成员信息放在底部透明信息栏中，保留“查看资料”“添加亲属”。
|
||||
- 加载、阅读提示、空、失败继续由 T01 同页状态承载。
|
||||
|
||||
## 视觉资产
|
||||
|
||||
- 页面背景继续使用 T 系列 `ModulePageBackground`。
|
||||
- 成员节点复用现有透明卷框资产，树状态面板与底部信息栏复用现有透明金线框资产，并复制到 tree 模块命名空间。
|
||||
- 移除 T01 对 `g03-create-flow-panel.png`、`g06-search-input-wide.png`、`application-status-card.png` 三个不透明表面资产的引用。
|
||||
- 关系线属于数据关系可视化，可由布局元素绘制；不使用 CSS 仿造装饰图案、SVG 或表情符号。
|
||||
|
||||
## 状态与交互
|
||||
|
||||
- `loading`：保留 `AppLoading` 动画。
|
||||
- `tree`：展示纵向三代世系，默认选中始祖；点击节点更新底部信息栏。
|
||||
- `landscape`：说明“上下看世代、左右看同代分支”，操作后回到树态。
|
||||
- `empty`：引导录入首代成员并跳转 T04。
|
||||
- `error`：说明读取失败，重试后回到树态。
|
||||
- 保留 T03、T04、T06、T07 路由入口。
|
||||
|
||||
## 响应式与验收
|
||||
|
||||
- 内部检查 `320×568`、`360×640`、`360×800`、`412×915`，不把响应式尺寸逐档交给用户确认。
|
||||
- `412×915` 作为当前正常树态的首个视觉审批证据。
|
||||
- H5 截图仅作内部候选；Android/HBuilderX 真机或模拟器验证仍未完成。
|
||||
|
||||
Reference in New Issue
Block a user