diff --git a/design-qa.md b/design-qa.md index 094479f..a41a095 100644 --- a/design-qa.md +++ b/design-qa.md @@ -55,6 +55,78 @@ final result: blocked --- +# T01 relationship-compass redesign: MuMu comparison rerun + +## Evidence + +- Source visual truth: `C:\Users\Rain\.codex\generated_images\019fad7d-b30e-7e42-b40a-586bade6fec2\exec-dce4de58-d938-4ab5-ad7f-dfdacb399de0.png` (853 × 1844 px). +- Accepted implementation capture: `tmp/t01-relationship-compass-round6.png` (MuMu Android, 900 × 1600 physical px; Chrome DevTools viewport 451 × 800 CSS px at 2× density). +- Full-view comparison: `tmp/t01-relationship-compass-round6-comparison.png`; the source and implementation were width-normalized to 853 px and placed side by side. +- State: T01 tree overview, selected member `真机联调始祖`, relationship-action sheet open. The capture was taken after native image assets had loaded; the earlier immediate capture was rejected because the images had not painted yet. + +## Comparison history + +1. Earlier comparison (`tmp/t01-relationship-compass-audit-compare.png`) found P1 gaps: no visible relationship connectors, a mismatched central graphic, generic rectangular relationship buttons, and inconsistent sheet hierarchy. + - Fix: generated and wired the paper panel, six-way relationship map, medallion, close, marker, and arrow assets; restored the independent sheet and removed the mismatched section labels. +2. First recovered MuMu capture (`tmp/t01-relationship-compass-round2-recovered.png`) confirmed the actual authorized T01 state was reachable, but showed P1 spacing and button-shape drift. + - Fix: generated the relation-button frame and a smaller, clean four-point compass asset; added the genuine divider asset; tightened the 9:16 layout so all four management actions stay in the viewport. +3. Final MuMu capture (`tmp/t01-relationship-compass-round6.png`) was compared in the same composite input. No actionable P0/P1/P2 mismatch remains. + +## Fidelity review + +- Typography and copy: the live member name and generation remain readable; relationship and management labels do not wrap. The selected member's live copy intentionally differs from the concept's sample name. +- Spacing and layout rhythm: on the actual 9:16 MuMu viewport, header, divider, six relationship actions, and four management actions form one complete, unobscured sheet. The source canvas is taller (853 × 1844), so its exact vertical crop is not reproduced; this is a P3 reference-canvas difference rather than an app overflow. +- Colors and tokens: warm ivory paper, antique gold, and cinnabar are consistent between the panel, graph, relationship actions, and management cards. +- Image quality and assets: visible non-standard artwork is PNG-backed (panel, compass, relationship frame, portrait medallion, markers, close, arrows, divider). No emoji, inline SVG, CSS-drawn icon, or placeholder was used in place of those assets. +- Residual P3 polish: the reference uses a sample portrait and individually drawn function icons; the running app keeps its neutral medallion and existing generated marker assets so the sheet does not imply an incorrect person identity or operation type. + +## Verification + +- Opened the selected T01 member in MuMu and accepted the delayed native capture. +- Passed: `tests/t01-person-action-panel-contract.ps1`, `tests/t01-relation-layout-contract.ps1`, `tests/t01-all-states-visual-contract.ps1`, and `tests/t01-tree-state-contract.ps1`. +- Passed: `git diff --check` (only existing CRLF conversion warnings). + +final result: passed + +--- + +# T01 人物操作面板：关系罗盘重设计核验 + +## 对比对象 + +- Source visual truth：本次会话选择的第 2 张「关系罗盘」设计图，`C:\Users\Rain\.codex\generated_images\019fad7d-b30e-7e42-b40a-586bade6fec2\exec-dce4de58-d938-4ab5-ad7f-dfdacb399de0.png`。 +- Implementation screenshot：`tmp/jiapu-t01-panel-mumu-final.png`，MuMu Android 真机运行时的面板打开状态（900 × 1600 px）。 +- 同画布对比：`tmp/t01-relationship-compass-reference-vs-mumu-final.png`；左侧为设计稿面板裁切，右侧为 MuMu 实现面板裁切，并将二者归一至 853 × 1254 px 的同一面板画布。 + +## 真机视觉对比 + +- 信息层级：实机的成员头部、6 个围绕罗盘的亲属入口及下方 2 × 2 人物管理区，与设计稿的阅读顺序一致；四个管理入口在 900 × 1600 实机截图中均完整可见。 +- 资产与对比：实机使用纸张底图、人物徽章、关系标记、管理标记、关闭图标、箭头及关系罗盘等生成 PNG 资产；罗盘和边框在真机上没有空白、拉伸或替代图形。 +- 有意保留的 P3 差异：设计稿为贴边并带拖拽把手的轻量面板；实现保留当前家谱页面的左右留白、纸张边框及更细密的罗盘插画，以和已存在的朱红/宣纸视觉系统一致。这不影响层级、可读性或操作入口。 + +## 真机交互验收 + +- 初次实机核验发现 `scroll-view` 与头部同层，关闭按钮会被内容层遮挡。已将 `.member-action-panel__head` 提升至 `z-index: 2`；MuMu WebView 点击关闭按钮后，面板节点已消失。 +- MuMu 点击第一个关系入口“父亲”后，已进入“新增亲属 / 为真机联调始祖添加父亲”页面，见 `tmp/jiapu-t01-father-flow.png`；未填写任何字段，并已放弃草稿返回世系图。 + +## Implementation Checklist + +- [x] 已落地选中设计的关系罗盘信息架构。 +- [x] 已生成并引用对应 PNG 资产，未用 emoji、内联 SVG 或 CSS 图形替代。 +- [x] 已捕获 MuMu 实现截图，并与源设计在同一画布中并排对比。 +- [x] 已验证关闭和“父亲”关系入口。 + +## 第二轮保真收敛（待真机复核） + +- 根据 `tmp/t01-relationship-compass-audit-compare.png` 的 P1 差异，已更换为生成的 `t01-action-panel-paper-v3.png` 宣纸面板和 `t01-relation-map-v3.png` 六向连接罗盘；同时移除与设计稿不符的两段区块标题，收紧头部，并将关系按钮与管理卡片改为米纸/朱红配色。 +- 已通过 T01 人物操作面板、文档流、全状态视觉、关系布局、树状态合同及编译审计；生成的透明罗盘与面板资产均已检查 alpha。 +- 复核阻塞：HBuilderX 热更新后 MuMu 返回 A01 登录页，`tmp/t01-relationship-compass-round2.png` 不是人物操作面板，不能用于设计比较。为避免访问或猜测测试账号凭据，本轮没有重新登录。 +- 解除条件：在 MuMu 恢复已授权测试会话后，打开 T01 人物操作面板并重新截图；随后必须与同一张源设计同画布比较，处理任何残留 P1/P2 后才能改回通过。 + +final result: blocked + +--- + # T01 树状图与 T02 世系谱：真机回归 ## 对比对象 diff --git a/pages/tree/t01-tree-overview.vue b/pages/tree/t01-tree-overview.vue index 1ea91e4..51aec84 100644 --- a/pages/tree/t01-tree-overview.vue +++ b/pages/tree/t01-tree-overview.vue @@ -156,47 +156,122 @@ - - - {{ selected.name }} - 第 {{ selected.generation }} 世 · {{ selected.relation }} · - {{ selected.branch }} + - 点击头像查看资料 + + + {{ selected.name }} + 第 {{ selected.generation }} 世 · {{ selected.relation }} + 点击查看人物资料 + + + + + + + + + + + + + + {{ action.shortLabel }} + + + + + + + {{ action.label }} + + + + 所有操作都将作用于当前人物 + + - - - - + import { computed, nextTick, ref } from "vue"; import { onLoad, onShow, onUnload } from "@dcloudio/uni-app"; -import AppButton from "@/components/AppButton.vue"; import AppDialog from "@/components/AppDialog.vue"; import AppLoading from "@/components/AppLoading.vue"; import ModulePageBackground from "@/components/ModulePageBackground.vue"; @@ -253,47 +327,93 @@ const GENERATION_GAP = 260; const members = ref([]); const memberActions = Object.freeze([ - { key: "VIEW_PROFILE", label: "查看资料", routeKey: "T03" }, + { + key: "VIEW_PROFILE", + label: "查看资料", + group: "MANAGEMENT", + routeKey: "T03", + }, { key: "ADD_FATHER", label: "添加父亲", + shortLabel: "父亲", + group: "RELATION", + slot: "top", routeKey: "T04", relationType: "FATHER", }, { key: "ADD_MOTHER", label: "添加母亲", + shortLabel: "母亲", + group: "RELATION", + slot: "left-top", routeKey: "T04", relationType: "MOTHER", }, { key: "ADD_SPOUSE", label: "添加配偶", + shortLabel: "配偶", + group: "RELATION", + slot: "right-top", routeKey: "T04", relationType: "SPOUSE", }, { key: "ADD_SIBLING", label: "添加兄弟姐妹", + shortLabel: "兄弟姐妹", + group: "RELATION", + slot: "left-bottom", routeKey: "T04", relationType: "SIBLING", }, - { key: "ADJUST_RANK", label: "调整排行", routeKey: "T06", mode: "rank" }, - { key: "ADD_SON", label: "添加儿子", routeKey: "T04", relationType: "SON" }, + { + key: "ADJUST_RANK", + label: "调整排行", + group: "MANAGEMENT", + routeKey: "T06", + mode: "rank", + }, + { + key: "ADD_SON", + label: "添加儿子", + shortLabel: "儿子", + group: "RELATION", + slot: "bottom", + routeKey: "T04", + relationType: "SON", + }, { key: "ADD_DAUGHTER", label: "添加女儿", + shortLabel: "女儿", + group: "RELATION", + slot: "right-bottom", routeKey: "T04", relationType: "DAUGHTER", }, { key: "BIND_INVITE", label: "邀请绑定", + group: "MANAGEMENT", unavailableCopy: "邀请签发、目标身份查找、绑定 mutation 和结果查询尚无可靠合同；当前不会借邀请码或普通入谱申请替代。", }, - { key: "EDIT_PROFILE", label: "编辑信息", routeKey: "T05" }, + { + key: "EDIT_PROFILE", + label: "编辑信息", + group: "MANAGEMENT", + routeKey: "T05", + }, ]); +const relationActions = computed(() => + memberActions.filter((action) => action.group === "RELATION"), +); +const managementActions = computed(() => + memberActions.filter((action) => action.group === "MANAGEMENT"), +); const snapToGrid = (value) => Math.ceil(value / GRID_UNIT) * GRID_UNIT; const nodeRelationText = (member) => { @@ -773,7 +893,7 @@ const handleStateAction = () => { }; const toMember = () => { if (!selected.value) return Promise.resolve(false); - memberActionPanelVisible.value = false; + closeMemberActionPanel(); return openPage( "T03", { genealogyId: genealogyId.value, personId: String(selected.value.id) }, @@ -800,9 +920,12 @@ const openMemberPanel = (member) => { selected.value = member; memberActionPanelVisible.value = true; }; +const closeMemberActionPanel = () => { + memberActionPanelVisible.value = false; +}; const openMemberAction = (action) => { if (!selected.value) return Promise.resolve(false); - memberActionPanelVisible.value = false; + closeMemberActionPanel(); if (!action.routeKey) { unavailableAction.value = action; unavailableActionVisible.value = true; @@ -1113,53 +1236,238 @@ const openMemberAction = (action) => { font-size: 24rpx; font-weight: 700; } -.member-action-profile { +.member-action-panel-layer { + position: fixed; + z-index: 80; + inset: 0; + display: flex; + align-items: flex-end; + justify-content: center; + box-sizing: border-box; + padding: calc(24rpx + env(safe-area-inset-top)) 0 0; + background: rgba(35, 18, 10, 0.62); +} +.member-action-panel { + position: relative; display: flex; width: 100%; + max-width: 100%; + height: 900rpx; + min-height: 0; + max-height: calc( + var(--app-viewport-height, 100vh) - 80rpx - env(safe-area-inset-top) - + env(safe-area-inset-bottom) + ); + flex-direction: column; + border-radius: 34rpx 34rpx 0 0; + background: #f8edda; + overflow: hidden; +} +.member-action-panel__paper { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + pointer-events: none; +} +.member-action-panel__head { + position: absolute; + top: 52rpx; + right: 36rpx; + left: 36rpx; + z-index: 2; + display: flex; align-items: center; - gap: 18rpx; - margin-top: 16rpx; - padding: 14rpx 18rpx; + justify-content: center; + box-sizing: border-box; + padding: 0; +} +.member-action-panel__close-button { + position: absolute; + top: 8rpx; + right: 0; + display: flex; + width: 72rpx; + height: 72rpx; + flex: 0 0 72rpx; + align-items: center; + justify-content: center; +} +.member-action-panel__close { + width: 62rpx; + height: 62rpx; +} +.member-action-panel__content { + z-index: 1; + min-height: 0; + flex: 1; + width: 100%; + box-sizing: border-box; +} +.member-action-panel__scroll-body { + padding: 160rpx 56rpx calc(24rpx + env(safe-area-inset-bottom)); +} +.member-action-panel__relationship-divider { + display: block; + width: 100%; + height: 18rpx; + margin-bottom: 20rpx; +} +.member-action-profile { + display: flex; + width: auto; + flex: 0 1 auto; + align-items: center; + gap: 16rpx; + justify-content: center; + padding: 0; box-sizing: border-box; } .member-action-profile__avatar { - width: 82rpx; + width: 92rpx; + height: 92rpx; aspect-ratio: 1; - flex: 0 0 82rpx; + flex: 0 0 92rpx; } .member-action-profile__copy { min-width: 0; - text-align: left; + text-align: center; } .member-action-profile__copy text { display: block; } .member-action-profile__copy text:first-child { - color: $ink; + color: #70261f; font-family: "STKaiti", "KaiTi", serif; - font-size: 30rpx; + font-size: 38rpx; font-weight: 700; } .member-action-profile__copy text:nth-child(2) { margin-top: 4rpx; - color: $ink-muted; - font-size: 21rpx; + color: #74533a; + font-size: 22rpx; } .member-action-profile__copy text:last-child { - margin-top: 4rpx; - color: $brand-red; - font-size: 21rpx; + display: none; +} +.member-action-map { + position: relative; + width: 100%; + height: 350rpx; +} +.member-action-map__graph { + position: absolute; + inset: 0; + z-index: 0; + width: 100%; + height: 100%; + pointer-events: none; +} +.member-action-map__item { + z-index: 1; + position: absolute; + display: flex; + width: 190rpx; + min-width: 0; + min-height: 60rpx; + align-items: center; + justify-content: center; + gap: 4rpx; + padding: 0 10rpx; + box-sizing: border-box; + border: 1rpx solid rgba(177, 126, 64, 0.48); + border-radius: 16rpx; + background: rgba(250, 236, 211, 0.9); + box-shadow: 0 3rpx 7rpx rgba(94, 56, 24, 0.08); +} +.member-action-map__item-frame { + position: absolute; + inset: 0; + z-index: 0; + width: 100%; + height: 100%; + filter: drop-shadow(0 3rpx 3rpx rgba(99, 57, 21, 0.12)); + pointer-events: none; +} +.member-action-map__item > image:not(.member-action-map__item-frame) { + z-index: 1; + width: 36rpx; + height: 36rpx; +} +.member-action-map__item .member-action-map__arrow { + z-index: 1; + width: 18rpx; + height: 18rpx; +} +.member-action-map__item text { + z-index: 1; + color: #672820; + font-size: 22rpx; + font-weight: 700; + white-space: nowrap; +} +.member-action-map__item--top { + top: 0; + left: 50%; + transform: translateX(-50%); +} +.member-action-map__item--left-top { + top: 66rpx; + left: 0; +} +.member-action-map__item--right-top { + top: 66rpx; + right: 0; +} +.member-action-map__item--left-bottom { + bottom: 106rpx; + left: 0; +} +.member-action-map__item--right-bottom { + right: 0; + bottom: 106rpx; +} +.member-action-map__item--bottom { + right: 50%; + bottom: 0; + transform: translateX(50%); } .member-action-grid { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12rpx; - margin-top: 20rpx; + gap: 18rpx; + margin-top: 34rpx; + padding-top: 30rpx; + border-top: 2rpx solid rgba(169, 117, 55, 0.68); } -.member-action-grid .app-button { - width: 100%; - min-height: 70rpx; +.member-action-grid__item { + display: flex; + min-height: 96rpx; + align-items: center; + gap: 14rpx; + padding: 0 20rpx; + box-sizing: border-box; + border: 2rpx solid rgba(160, 102, 47, 0.62); + border-radius: 10rpx; + background: rgba(249, 234, 204, 0.92); +} +.member-action-grid__item image { + width: 38rpx; + height: 38rpx; +} +.member-action-grid__item .member-action-grid__arrow { + width: 22rpx; + height: 22rpx; + margin-left: auto; +} +.member-action-grid__item text { + color: #672820; + font-size: 25rpx; + font-weight: 700; +} +.member-action-panel__hint { + display: none; } @media (max-width: 360px) { diff --git a/static/assets/modules/tree/transparent/t01-action-arrow-v2.png b/static/assets/modules/tree/transparent/t01-action-arrow-v2.png new file mode 100644 index 0000000..87f2409 Binary files /dev/null and b/static/assets/modules/tree/transparent/t01-action-arrow-v2.png differ diff --git a/static/assets/modules/tree/transparent/t01-action-close-v2.png b/static/assets/modules/tree/transparent/t01-action-close-v2.png new file mode 100644 index 0000000..caed41d Binary files /dev/null and b/static/assets/modules/tree/transparent/t01-action-close-v2.png differ diff --git a/static/assets/modules/tree/transparent/t01-action-panel-paper-v3.png b/static/assets/modules/tree/transparent/t01-action-panel-paper-v3.png new file mode 100644 index 0000000..cab8f19 Binary files /dev/null and b/static/assets/modules/tree/transparent/t01-action-panel-paper-v3.png differ diff --git a/static/assets/modules/tree/transparent/t01-management-marker-v2.png b/static/assets/modules/tree/transparent/t01-management-marker-v2.png new file mode 100644 index 0000000..dee181d Binary files /dev/null and b/static/assets/modules/tree/transparent/t01-management-marker-v2.png differ diff --git a/static/assets/modules/tree/transparent/t01-member-medallion-v2.png b/static/assets/modules/tree/transparent/t01-member-medallion-v2.png new file mode 100644 index 0000000..65eccb1 Binary files /dev/null and b/static/assets/modules/tree/transparent/t01-member-medallion-v2.png differ diff --git a/static/assets/modules/tree/transparent/t01-relation-button-frame-v4.png b/static/assets/modules/tree/transparent/t01-relation-button-frame-v4.png new file mode 100644 index 0000000..beebe6a Binary files /dev/null and b/static/assets/modules/tree/transparent/t01-relation-button-frame-v4.png differ diff --git a/static/assets/modules/tree/transparent/t01-relation-map-v5.png b/static/assets/modules/tree/transparent/t01-relation-map-v5.png new file mode 100644 index 0000000..be9e446 Binary files /dev/null and b/static/assets/modules/tree/transparent/t01-relation-map-v5.png differ diff --git a/static/assets/modules/tree/transparent/t01-relation-marker-v2.png b/static/assets/modules/tree/transparent/t01-relation-marker-v2.png new file mode 100644 index 0000000..0240e21 Binary files /dev/null and b/static/assets/modules/tree/transparent/t01-relation-marker-v2.png differ diff --git a/tests/t01-person-action-panel-contract.ps1 b/tests/t01-person-action-panel-contract.ps1 index a0ef956..b1c5f77 100644 --- a/tests/t01-person-action-panel-contract.ps1 +++ b/tests/t01-person-action-panel-contract.ps1 @@ -10,7 +10,9 @@ foreach ($required in @( 'const memberActionPanelVisible = ref(false)', 'const memberActions = Object.freeze([', 'const openMemberAction = (action) =>', - '', 'const openMemberDetail = async (member) =>',