rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
23cfd365a17f470f138c897e4f258f5eb4010b91
jiapuapp/docs/design/P00_页面结构与资产清单.md
T
rain 23cfd365a1 视觉审核完成30%
2026-07-16 18:13:03 +08:00

18 KiB
Raw Blame History

P00 页面结构与资产清单

状态覆盖：当前实际为 52 条活动路由、52 页全部 [~] 待审核、0 页冻结；A06 已封存且保留实现。页面状态以 docs/交接记录.md 与 docs/验收规划.md 为准。 目的：让页面、路由和资产都有唯一、可读、可审计的归属；本文件是 P-00 的执行清单。

1. 页面命名规则

最终页面文件遵循 <页面编号>-<语义名>.vue：

  • 账户：a01-entry.vue、a02-login.vue、a04-register.vue、a05-reset-password.vue、a06-auth-status.vue
  • 家谱：g01-my-genealogies.vue、g03-create-genealogy.vue
  • 世系：t01-tree-overview.vue、t03-member-profile.vue
  • 家族：f01-family-feed.vue、f02-publish-feed.vue
  • 消息：n01-message-center.vue
  • 我的：m01-profile-home.vue

尚未被全量设计确认、但为了保留现有功能骨架的通用页面，必须在文件名中使用 skeleton，不能使用含义不明的 index.vue、list.vue、detail.vue。

2. 首批 15 个路由的历史迁移映射

当前路由 当前可确认用途 目标文件 处理状态
pages/auth/a01-entry A01 启动／登录引导 pages/auth/a01-entry.vue 7 类非滑动验证视觉状态已获用户确认；真实滑动验证用接口组件自带样式，待接入审核；Android 复核前保持 [~]
pages/auth/a04-register A04 注册账号 pages/auth/a04-register.vue 当前 8 类 H5 视觉状态已获用户确认；真实滑动验证、接口结果态与 Android/HBuilderX 待审核；保持 [~]
pages/auth/a05-reset-password A05 重置密码 pages/auth/a05-reset-password.vue 当前 7 类 H5 视觉状态已获用户确认；接口回流手机号/焦点、真实滑动验证与 Android/HBuilderX 待审核；保持 [~]
（已从 pages.json 移除） A06 登录阻断状态（封存） pages/auth/a06-auth-status.vue 用户确认当前样式没有问题，但当前流程暂时不用；源码、测试和证据保留，不计入活动验收统计，恢复时重新接入真实入口并审核
pages/auth/a02-login A02 账号登录 pages/auth/a02-login.vue 已迁移；已验收，视觉冻结
pages/genealogy/g01-my-genealogies G01 我的家谱 pages/genealogy/g01-my-genealogies.vue 已迁移；视觉冻结
pages/genealogy/g03-create-genealogy G03 创建家谱／始祖录入 pages/genealogy/g03-create-genealogy.vue `step=create
pages/genealogy/g05-genealogy-overview G05 家谱总览 pages/genealogy/g05-genealogy-overview.vue `loading
pages/genealogy/g06-search-genealogies G06 公开家谱搜索／结果／无结果 pages/genealogy/g06-search-genealogies.vue 已收敛 G07；朱砂题签三态候选已截图，待集中审美确认
pages/genealogy/g08-join-application G08 申请加入家谱 pages/genealogy/g08-join-application.vue `form
pages/genealogy/g09-my-applications G09 我的申请 pages/genealogy/g09-my-applications.vue `loading
pages/genealogy/g10-application-review G10 管理员入谱审核 pages/genealogy/g10-application-review.vue `loading
pages/tree/t01-tree-overview T01 世系树总览 pages/tree/t01-tree-overview.vue 已收敛 T02 四态；视觉候选待审
pages/tree/t03-member-profile T03 成员档案 pages/tree/t03-member-profile.vue 详情／失败候选待审
pages/family/f01-family-feed F01 家族动态 pages/family/f01-family-feed.vue 已迁移；未验收
pages/family/f02-publish-feed F02 发布动态 pages/family/f02-publish-feed.vue 已迁移；未验收
pages/notification/n01-message-center N01 消息中心 pages/notification/n01-message-center.vue 已迁移；未验收
pages/profile/m01-profile-home M01 我的首页 pages/profile/m01-profile-home.vue 已迁移；未验收

上述表仅保留首批迁移的历史背景；当前最终 54 路由、文件存在性和中文编号注释的唯一合同是 tests/full-page-visual-contract.ps1。临时 content-list-skeleton 已由谱文、相册、礼仪、备忘录和字辈诗最终页面替代并移除。

迁移要求：同一轮更新页面文件、pages.json、所有跳转路径、测试和中文文件头注释；未完成全部引用更新时，不得删除旧路径。

3. 最终资产目录

static/assets/
  foundation/
    opaque/
      page-paper.jpg
      auth-page-paper.jpg
      auth-header.png
      a01-primary-button.png
      a01-secondary-button.png
      root-header-cinnabar.jpg
    transparent/
      brand-seal.png
      auth-title-cloud.png
      auth-divider-knot.png
      ...
  modules/
    auth/
      opaque/
        a02-login-panel.png
      transparent/
        a02-agreement-unchecked.png
        a02-agreement-checked.png
    genealogy/
      opaque/
        g01-empty-panel.png
        g03-create-flow-panel.png
        g05-overview-surface.png
        g06-search-title-strip.png
        g06-search-input-wide.png
        g06-search-button.png
        application-record-card.png
        application-status-card.png
      transparent/
    tree/
      opaque/
      transparent/
    family/
      opaque/
      transparent/

当前已迁入的资产以第 4 节台账为准。A01 已引用版本化的卷轴祥云四件套 v3：主／次按钮与弹窗使用 aspectFit，Toast 使用固定切片的 border-image；文字和交互由代码承载。旧资产与 v2 试点资产保留，不覆盖、不删除。v3 已通过本机自动质量门和 H5 四尺寸检查，但尚未获得 Android 与用户验收。

4. 当前资产台账

以下为当前唯一可用资产路径。尺寸为原始像素；页面中的显示尺寸仍以组件／页面样式为准。

路径 属性／尺寸 用途 引用位置 状态
foundation/opaque/auth-page-paper.jpg opaque / 750×1334 认证页纸纹底色 A01、A02、A04、A05、A06 保留
foundation/opaque/auth-header.png opaque / 750×196 认证页红色页头 A01、A02、A04、A05、A06 保留
foundation/opaque/page-paper.jpg opaque / 852×1846 根页宣纸底图 G、T、F、R、N、M 非认证页面 保留
foundation/opaque/root-header-cinnabar.jpg opaque / 720×184 根页朱砂页头 PageHeader 保留
foundation/transparent/auth-ink-scenery.png transparent / 750×1334 认证页淡墨叠层 A01、A02、A04、A05、A06 保留
foundation/transparent/auth-title-cloud.png transparent / 200×120 认证标题右侧云纹 A01、A02、A04、A05、A06 保留
foundation/transparent/auth-divider-knot.png transparent / 160×96 认证标题与正文结饰 A01、A04、A05、A06 保留
foundation/opaque/a01-primary-button.png opaque / 1877×418 旧朱砂主按钮皮肤 其他仍实际引用的模块页面 暂时保留；A01、A04、A05、A06 已停止引用，其他页面需逐页迁移
foundation/opaque/a01-secondary-button.png opaque / 1881×419 旧宣纸次按钮皮肤 其他仍实际引用的页面 暂时保留；A01 可见按钮和 Toast 已停止引用，其他页面未逐页迁移
foundation/transparent/a01-primary-button-v2.png transparent / 1866×276 A01 固定槽位主按钮历史试点 当前 A01 已停止引用 保留，不覆盖、不删除
foundation/transparent/a01-secondary-button-v2.png transparent / 1866×300 A01 固定槽位次按钮历史试点 当前 A01 已停止引用 保留，不覆盖、不删除
foundation/transparent/a01-scroll-primary-v3.png transparent / 1866×276 卷轴祥云朱砂主按钮皮肤 A01 登录、A04 注册、A05 重设、A06 恢复入口及弹层按钮 A01/A04/A05 当前 H5 状态已获用户确认；A06 待逐态审核；均待 Android 复核
foundation/transparent/a01-scroll-secondary-v3.png transparent / 1866×300 卷轴祥云宣纸次按钮皮肤 A01 微信按钮 用户 H5 视觉审核通过；待 Android 复核
foundation/transparent/a01-scroll-toast-v3.png transparent / 1770×246 卷轴祥云 Toast 可切片表面 A01、A04、A05 自定义反馈 Toast A01/A04 用户 H5 审核通过；A05 待逐态审核；均待 Android 复核
modules/auth/transparent/a01-scroll-dialog-v3.png transparent indexed PNG / 1860×1560 卷轴祥云对话容器 A01 历史验证占位、A05 成功结果、A06 恢复说明 A01 不得用于最终滑动验证；A05/A06 仅用于本地结果或说明候选
modules/auth/opaque/a02-login-panel.png opaque / 940×1672 旧认证完整卷轴面板 当前认证页无引用 历史保留，不覆盖、不删除
modules/auth/transparent/a02-agreement-unchecked.png transparent / 96×96 认证未同意协议图标 A01、A04 协议确认行 保留；A01/A04 用户 H5 审核通过
modules/auth/transparent/a02-agreement-checked.png transparent / 96×96 认证已同意协议图标 A01、A04 协议确认行 保留；A01/A04 用户 H5 审核通过
foundation/transparent/auth-login-outline.png transparent / 96×96 登录／状态图标 A01、A06 保留
foundation/transparent/auth-wechat.png transparent / 96×96 微信图标 A01 保留
foundation/transparent/brand-seal.png transparent / 240×288 品牌谱印 A01、A02、A04、A05、A06、G06、PageHeader 保留
foundation/transparent/root-header-hall.png transparent / 750×300 根页祠堂线稿 PageHeader 保留
foundation/transparent/footer-mountain-bamboo.png transparent / 750×360 根页底部山水竹影 G01、G06 保留
foundation/transparent/notice.png transparent / 96×96 通知图标 PageHeader 保留
foundation/transparent/chevron-right.png transparent / 96×96 返回与列表箭头 A02、A04、A05、A06、GenealogyCard 保留
docs/design/assets/g01-background/masters/g01-list-background-direction-a-chroma-master.png candidate master / 1024×1536 G01 列表背景 A，绿幕透明候选 G01 待选 母版保留；未接入页面
docs/design/assets/g01-background/masters/g01-list-background-direction-b-chroma-master.png candidate master / 1024×1536 G01 列表背景 B，绿幕透明候选 G01 待选 母版保留；未接入页面
docs/design/assets/g01-background/masters/g01-list-background-direction-c-paper-master.png candidate master / 1024×1536 G01 列表背景 C，完整宣纸候选 G01 待选 母版保留；未接入页面
modules/genealogy/opaque/g01-empty-panel.png opaque / 1122×1402 无家谱空态完整宣纸卡，双金线、角饰、云纹与下沿山水 G01 state=empty 保留；由 ImageGen 生成，已获用户验收
modules/genealogy/opaque/g03-create-flow-panel.png opaque / 1122×1500 完整宣纸任务面板，双金线、回纹角饰、云纹与下沿淡墨山水 G03、G08、G11、G12、T01、T03 至 T06、T08、F/R/N/M 表单／详情／设置／状态 保留；由 ImageGen 生成，G03 已获用户验收，复用页待审
modules/genealogy/opaque/g05-overview-surface.png opaque / 1122×1506 家谱总览完整视觉表面，含墨蓝谱名区、四宫格宣纸槽、金线近况分隔与底部访问说明面 G05 `loading ready
modules/genealogy/opaque/g06-search-title-strip.png opaque / 1122×220 朱砂题签完整视觉面，含古金边饰与云纹，不烘焙文字或印玺 G06 顶部检索题签 保留；用户选定 ImageGen 第 3 稿方向，Vue 叠放真实 brand-seal.png 与标题文字
modules/genealogy/opaque/g06-search-input-wide.png opaque / 1120×248 宽版独立宣纸字段完整皮肤，含古金双线与角饰 G、T 与 F/R/N/M 输入、详情段落、设置行 保留；真实文字与控件叠放其上
modules/genealogy/opaque/g06-search-input.png opaque / 720×248 早期窄版输入框完整皮肤 当前无引用 已停用；仅因用户要求停止工作而保留，恢复工作后需在引用扫描通过且用户允许时删除
modules/genealogy/opaque/g06-search-button.png opaque / 300×132 独立朱砂搜索按钮完整皮肤，含古金双线与角饰 G06 真实搜索点击控件底层 保留；由 ImageGen 生成，真实点击控件与文本叠放其上
modules/genealogy/opaque/application-record-card.png opaque / 1050×360 带右下双审核槽的完整申请记录卡 G10 待审核申请 保留；由 ImageGen 参考 G09/G10 改前截图生成，按钮另用完整位图叠放
modules/genealogy/opaque/application-status-card.png opaque / 1050×360 无按钮槽的完整信息状态卡 G09/G10、T01/T07/T08、F/R/N/M 列表／时间轴／通知／状态 保留；由 ImageGen 精确移除审核槽，避免无操作状态出现假按钮
foundation/transparent/meta-location.png transparent / 96×96 地点元信息 G01、GenealogyCard 保留
foundation/transparent/meta-member.png transparent / 96×96 成员元信息 G01、GenealogyCard 保留
foundation/transparent/meta-admin.png transparent / 96×96 管理员元信息 G01 保留
foundation/transparent/tab-genealogy.png transparent / 96×96 家谱 Tab 默认态 AppTabbar 保留
foundation/transparent/tab-genealogy-active.png transparent / 96×96 家谱 Tab 选中态 AppTabbar 保留
foundation/transparent/tab-family.png transparent / 96×96 家族 Tab 默认态 AppTabbar 保留
foundation/transparent/tab-family-active.png transparent / 96×96 家族 Tab 选中态 AppTabbar 保留
foundation/transparent/tab-profile.png transparent / 96×96 我的 Tab 默认态 AppTabbar 保留
foundation/transparent/tab-profile-active.png transparent / 96×96 我的 Tab 选中态 AppTabbar 保留
modules/genealogy/transparent/current-slip-frame.png transparent / 720×272 当前家谱题签框 G01 保留
modules/genealogy/transparent/list-slip-frame.png transparent / 720×144 家谱列表题签框 GenealogyCard 保留
modules/genealogy/transparent/section-divider.png transparent / 720×30 G01 分区金线 G01 保留
modules/genealogy/transparent/current-seal-frame.png transparent / 144×208 当前家谱谱印框 G01 保留
modules/genealogy/transparent/row-seal-frame.png transparent / 112×160 列表谱印框 GenealogyCard 保留
modules/genealogy/transparent/create-cloud.png transparent / 192×96 新建／搜索状态云纹 G01、G06 保留
modules/genealogy/transparent/add.png transparent / 96×96 新建入口加号 G01 保留
modules/genealogy/transparent/shortcut-tree.png transparent / 96×96 世系图入口 G01 保留
modules/genealogy/transparent/shortcut-members.png transparent / 96×96 成员入口 G01 保留
modules/genealogy/transparent/shortcut-generation-poem.png transparent / 96×96 字辈诗入口 G01 保留
modules/genealogy/transparent/shortcut-application.png transparent / 96×96 审核入口 G01 保留

本轮已迁入 38 项在用资产，删除 24 项运行时零引用的旧副本。A01 的两张完整按钮皮肤与 G06 检索资产均由图像生成工具制作，不是设计图裁切；G06 不再使用大型检索面板，当前使用朱砂题签、宽版输入框与搜索按钮三张独立位图，页面只叠放真实品牌印、文字与交互控件。旧版设计记录中的历史路径不再是资产依据；后续只按本台账引用和维护。

5. 混合资产属性规则

完整生产、质量门和换机恢复方法以 docs/design/设计资产生产流水线规范.md 为准。P00 只登记最终资产归属，不重复维护算法和阈值。

类型 文件格式与内容 典型用途 页面使用规则
代码原生 Vue/SCSS，不产生图片 布局、文字、间距、普通分隔线、纯色和交互状态 不伪造复杂品牌装饰；普通内容保持正常布局流
固定比例位图 JPG、PNG 或 WebP；比例与槽位一致 宗祠、水墨背景、固定比例复杂视觉面 manifest 声明槽位和 uniform-only；禁止变形拉伸
透明叠加图 RGBA PNG/WebP；外缘透明、主体边界干净 Logo、图标、祥云、谱印、分隔纹 manifest 声明 Alpha 与边缘策略；禁止白边、绿边
可伸缩装饰框 九宫格或经过验证的等价组件资产 多宽度按钮框、卡片框、弹窗框 必须先验证 H5 与 Android；四角和边线不得被整体拉伸
平铺纹理 可无缝重复的小图 宣纸、无方向纹理 manifest 明确平铺/覆盖策略，不承担文字或边框

禁止项：整页截图、设计图局部页面裁切、半边边框、按钮角标拼接、临时 CSS／SVG 伪造复杂品牌装饰、未声明的 scaleToFill／fit: 'fill'、同一语义的多版本长期共存。

6. 资产清理登记规则

每项现有资产必须登记以下字段后才可以决定保留或删除：

字段 含义
当前路径 盘点时的真实文件路径
语义用途 它服务的视觉元素，而不是模糊类别
背景属性 opaque 或 transparent
代码引用 页面、组件、配置或测试中的引用位置
替代资产 若要迁移，写入唯一的新路径；无替代则留空
决定 保留、迁移后删除 或 无引用删除

执行顺序固定为：扫描引用 → 填写登记 → 迁移引用 → 编译与截图验证 → 删除旧资产 → 再次扫描确认零引用。任何一步失败都停止删除。

7. 中文注释约定

每个页面和组件文件以中文注释写清页面编号、用途和关键依赖；模板至少区分背景、页头、主体、操作、状态五类区域。资产图层、路由跳转、非直观状态和防回归样式要解释“为什么这样写”。显而易见的单行 CSS 不写噪声注释。

Reference in New Issue View Git Blame Copy Permalink