1

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 世系谱：真机回归
 
 ## 对比对象

pages/tree/t01-tree-overview.vue

@@ -156,47 +156,122 @@
       </scroll-view>
     </view>
 
-    <AppDialog
-      :visible="memberActionPanelVisible"
-      eyebrow="人物操作"
-      :title="selected ? `管理${selected.name}` : '管理人物'"
-      message="仅展示当前人物可达的操作。未具备可靠后端合同的写入会明确说明，且不会创建本地假数据。"
-      confirm-text="关闭"
-      @confirm="memberActionPanelVisible = false"
-      @cancel="memberActionPanelVisible = false"
+    <view
+      v-if="memberActionPanelVisible"
+      class="member-action-panel-layer"
+      @click="closeMemberActionPanel"
     >
       <view
-        v-if="selected"
-        class="member-action-profile"
-        role="button"
-        :aria-label="`查看${selected.name}的资料`"
-        @click="toMember"
+        class="member-action-panel"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="selected ? `管理${selected.name}` : '管理人物'"
+        @click.stop
       >
         <image
-          class="member-action-profile__avatar"
-          src="/static/assets/foundation/transparent/tab-profile.png"
-          mode="aspectFit"
+          class="member-action-panel__paper"
+          src="/static/assets/modules/tree/transparent/t01-action-panel-paper-v3.png"
+          mode="scaleToFill"
         />
-        <view class="member-action-profile__copy">
-          <text>{{ selected.name }}</text>
-          <text
-            >第 {{ selected.generation }} 世 · {{ selected.relation }} ·
-            {{ selected.branch }}</text
+        <view class="member-action-panel__head">
+          <view
+            v-if="selected"
+            class="member-action-profile"
+            role="button"
+            :aria-label="`查看${selected.name}的资料`"
+            @click="toMember"
           >
-          <text>点击头像查看资料</text>
+            <image
+              class="member-action-profile__avatar"
+              src="/static/assets/modules/tree/transparent/t01-member-medallion-v2.png"
+              mode="aspectFit"
+            />
+            <view class="member-action-profile__copy">
+              <text>{{ selected.name }}</text>
+              <text>第 {{ selected.generation }} 世 · {{ selected.relation }}</text>
+              <text>点击查看人物资料</text>
+            </view>
+          </view>
+          <view
+            class="member-action-panel__close-button"
+            role="button"
+            aria-label="关闭人物操作"
+            @click="closeMemberActionPanel"
+          >
+            <image
+              class="member-action-panel__close"
+              src="/static/assets/modules/tree/transparent/t01-action-close-v2.png"
+              mode="aspectFit"
+            />
+          </view>
         </view>
+        <scroll-view class="member-action-panel__content" scroll-y>
+          <view class="member-action-panel__scroll-body">
+            <image
+              class="member-action-panel__relationship-divider"
+              src="/static/assets/modules/genealogy/transparent/section-divider.png"
+              mode="scaleToFill"
+            />
+            <view class="member-action-map">
+              <image
+                class="member-action-map__graph"
+                src="/static/assets/modules/tree/transparent/t01-relation-map-v5.png"
+                mode="scaleToFill"
+              />
+              <view
+                v-for="action in relationActions"
+                :key="action.key"
+                class="member-action-map__item"
+                :class="`member-action-map__item--${action.slot}`"
+                role="button"
+                :aria-label="action.label"
+                @click="openMemberAction(action)"
+              >
+                <image
+                  class="member-action-map__item-frame"
+                  src="/static/assets/modules/tree/transparent/t01-relation-button-frame-v4.png"
+                  mode="scaleToFill"
+                />
+                <image
+                  src="/static/assets/modules/tree/transparent/t01-relation-marker-v2.png"
+                  mode="aspectFit"
+                />
+                <text>{{ action.shortLabel }}</text>
+                <image
+                  class="member-action-map__arrow"
+                  src="/static/assets/modules/tree/transparent/t01-action-arrow-v2.png"
+                  mode="aspectFit"
+                />
+              </view>
+            </view>
+            <view class="member-action-grid">
+              <view
+                v-for="action in managementActions"
+                :key="action.key"
+                class="member-action-grid__item"
+                role="button"
+                :aria-label="action.label"
+                @click="openMemberAction(action)"
+              >
+                <image
+                  src="/static/assets/modules/tree/transparent/t01-management-marker-v2.png"
+                  mode="aspectFit"
+                />
+                <text>{{ action.label }}</text>
+                <image
+                  class="member-action-grid__arrow"
+                  src="/static/assets/modules/tree/transparent/t01-action-arrow-v2.png"
+                  mode="aspectFit"
+                />
+              </view>
+            </view>
+            <text class="member-action-panel__hint"
+              >所有操作都将作用于当前人物</text
+            >
+          </view>
+        </scroll-view>
       </view>
-      <view class="member-action-grid">
-        <AppButton
-          v-for="action in memberActions"
-          :key="action.key"
-          type="secondary"
-          compact
-          :label="action.label"
-          @click="openMemberAction(action)"
-        />
-      </view>
-    </AppDialog>
+    </view>
 
     <AppDialog
       :visible="unavailableActionVisible"
@@ -215,7 +290,6 @@
 <script setup>
 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) {

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) =>',
-  '<AppDialog',
+  'class="member-action-panel-layer"',
+  'class="member-action-panel"',
+  'closeMemberActionPanel',
   'member-action-grid',
   'unavailableActionVisible',
   'BIND_INVITE'
@@ -29,6 +31,24 @@ foreach ($actionKey in @(
   }
 }
 
+foreach ($asset in @(
+  'static/assets/modules/tree/transparent/t01-action-panel-paper-v3.png',
+  'static/assets/modules/tree/transparent/t01-action-arrow-v2.png',
+  'static/assets/modules/tree/transparent/t01-action-close-v2.png',
+  'static/assets/modules/tree/transparent/t01-management-marker-v2.png',
+  'static/assets/modules/tree/transparent/t01-member-medallion-v2.png',
+  'static/assets/modules/tree/transparent/t01-relation-marker-v2.png',
+  'static/assets/modules/tree/transparent/t01-relation-button-frame-v4.png',
+  'static/assets/modules/tree/transparent/t01-relation-map-v5.png'
+)) {
+  if (-not $tree.Contains(('/' + $asset))) {
+    throw "T01 人物操作面板缺少资产引用：$asset"
+  }
+  if (-not (Test-Path -LiteralPath (Join-Path $root $asset))) {
+    throw "T01 人物操作面板资产不存在：$asset"
+  }
+}
+
 foreach ($required in @(
   'const openMemberProfile = (member) =>',
   'const openMemberDetail = async (member) =>',