74 lines
2.7 KiB
Markdown
74 lines
2.7 KiB
Markdown
# G01 Loading State 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:** 将 G01 的空心金圈加载态替换为项目统一的 `AppLoading` 朱砂“谱”印加载视觉。
|
||
|
||
**Architecture:** `AppLoading.vue` 继续作为加载视觉的唯一维护入口；G01 只导入组件、传入“正在整理家谱”文案并保留现有辅助说明。旧 `loading-seal` 模板和样式在同一轮移除。
|
||
|
||
**Tech Stack:** uni-app、Vue 3、SCSS、PowerShell 契约测试、Chrome H5。
|
||
|
||
## Global Constraints
|
||
|
||
- 只修改 G01 加载分支及其契约，不改变正常、空、失败状态。
|
||
- 不生成新资产，不修改 `AppLoading.vue` 的全局样式。
|
||
- 不使用多代理、worktree 或 Git 写操作。
|
||
- H5 证据不代表 Android/HBuilderX 或 G01 整页正式验收。
|
||
|
||
---
|
||
|
||
### Task 1: G01 统一加载态
|
||
|
||
**Files:**
|
||
- Create: `tests/g01-loading-state-contract.ps1`
|
||
- Modify: `pages/genealogy/g01-my-genealogies.vue`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `AppLoading.vue` 的 `text: String` 属性。
|
||
- Produces: G01 `state=loading` 下的 `.state-panel--loading .app-loading` 运行结构。
|
||
|
||
- [ ] **Step 1: 写入失败契约**
|
||
|
||
契约必须断言 G01 导入并渲染 `<AppLoading text="正在整理家谱" />`，保留辅助说明，同时不存在 `loading-seal`。
|
||
|
||
- [ ] **Step 2: 验证契约失败**
|
||
|
||
Run: `powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-loading-state-contract.ps1`
|
||
|
||
Expected: FAIL，指出 G01 尚未使用 `AppLoading`。
|
||
|
||
- [ ] **Step 3: 实施最小修改**
|
||
|
||
```vue
|
||
<view v-if="isLoading" class="state-panel state-panel--loading">
|
||
<AppLoading text="正在整理家谱" />
|
||
<text class="state-copy state-copy--loading">请稍候，家族记忆正在归卷。</text>
|
||
</view>
|
||
```
|
||
|
||
并加入：
|
||
|
||
```js
|
||
import AppLoading from "@/components/AppLoading.vue";
|
||
```
|
||
|
||
删除 `.loading-seal` 样式；仅为加载辅助说明设置不重复全局 Loading 的间距。
|
||
|
||
- [ ] **Step 4: 验证**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-loading-state-contract.ps1
|
||
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-empty-state-contract.ps1
|
||
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-visual-contract.ps1
|
||
powershell -NoProfile -ExecutionPolicy Bypass -File tests/compile-audit.ps1
|
||
node tests/g01-empty-state-runtime-smoke.js http://localhost:5173
|
||
```
|
||
|
||
Expected: 全部 PASS。
|
||
|
||
- [ ] **Step 5: 视觉复核**
|
||
|
||
在 412×900 与 320×568 捕获 `state=loading`，确认朱砂谱印清晰、内容居中、长背景连续、底栏不遮挡且没有横向溢出。
|