44 lines
2.2 KiB
Markdown
44 lines
2.2 KiB
Markdown
# 公共加载组件红金印牌重设计
|
||
|
||
## 目标
|
||
|
||
将 `components/AppLoading.vue` 当前的细红方框“谱”字替换为与浅色国风主题一致的红金家谱印牌，同时保持组件可在 G01 及其他已接入页面复用。
|
||
|
||
## 范围
|
||
|
||
- 只修改公共 `AppLoading` 的视觉表现及对应测试。
|
||
- G01 继续使用页面级加载形态，不改变状态判断、文案、页面背景、头部和底部导航。
|
||
- 已接入 `AppLoading` 的其他页面自动获得同一视觉体系，不改各页面业务逻辑。
|
||
- 不新增接口，不使用原生 Toast、Modal、Loading 或 ActionSheet。
|
||
|
||
## 视觉方案
|
||
|
||
- 加载主体使用已有真实资产 `/static/assets/foundation/transparent/brand-seal.png`。
|
||
- 页面级印牌宽高约 `132rpx × 136rpx`；区域级约 `88rpx × 90rpx`。
|
||
- 印牌下方使用已有真实资产 `/static/assets/foundation/transparent/auth-divider-knot.png`，作为轻量视觉连接，不新增 CSS 绘制图形。
|
||
- 主文案使用现有深墨色，保持约 `30rpx`，字重略加强。
|
||
- 说明文字保持约 `24rpx` 和现有克制色阶。
|
||
- 组件背景继续透明，不增加卡片、白底、边框或阴影。
|
||
|
||
## 动效
|
||
|
||
- 印牌使用约 `1.6s` 的轻呼吸动画。
|
||
- 缩放范围约为 `0.96` 至 `1`，透明度约为 `0.82` 至 `1`。
|
||
- 不旋转、不快速闪烁、不移动页面布局。
|
||
- 如意结只做轻微透明度呼吸，避免与印牌争抢注意力。
|
||
- 尊重 `prefers-reduced-motion: reduce`：关闭动画并保持最终清晰状态。
|
||
|
||
## 组件契约
|
||
|
||
- 保留 `variant="page"` 和 `variant="section"`。
|
||
- 保留 `text` 与 `description` 属性，不改变调用方式。
|
||
- 页面级与区域级仅在尺寸、间距和字号上区分，共用同一真实资产和动效语义。
|
||
|
||
## 验证
|
||
|
||
- 更新公共加载组件契约，确保使用 `brand-seal.png` 和 `auth-divider-knot.png`，并禁止旧的 CSS 方框标记回归。
|
||
- 运行公共加载组件、G01 加载状态、G 系列和其他模块加载契约。
|
||
- 运行编译审计和相关运行检查。
|
||
- 在同一个可控 Chrome 标签页检查 G01 `412×900`，并补查 `320×568`、`360×640`、`360×800`、`412×915`。
|
||
- H5 结果只作为内部候选证据；Android/HBuilderX 真机或模拟器复核仍然缺失。
|