From 13f716c936b45d35c384bdad9a3985b96be639c5 Mon Sep 17 00:00:00 2001 From: laoyang Date: Wed, 21 Oct 2026 22:18:43 +0800 Subject: [PATCH] =?UTF-8?q?v73=EF=BC=9A=E5=AE=B6=E8=B0=B1=E8=87=AA?= =?UTF-8?q?=E7=BB=98=E9=87=8D=E5=81=9A=EF=BC=88Canvas=20=E7=94=BB=E7=BA=BF?= =?UTF-8?q?=20+=20=E5=8E=9F=E7=94=9F=E5=8D=A1=E7=89=87=EF=BC=89=EF=BC=8C?= =?UTF-8?q?=E5=8E=BB=E6=8E=89=E5=88=97=E8=A1=A8=E5=8F=AA=E7=95=99=E5=9B=BE?= =?UTF-8?q?=E8=B0=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户原话：「手机端这个家谱实在是很难看，能有什么库之类的，让它好看点吗」 改法：不再全 Canvas 手绘（只有彩色圆点 + 首字，中文又平又硬、做不出圆角阴影）， 改成「Canvas 只画线 + 原生 Column/Text/FbAvatar 绝对定位」。 不能改用 Path 组件：Path.commands 单位是 px，而 .position() 是 vp，混用会缩 1/3； Canvas 绘制坐标系本身是 vp，与 .position() 自洽。 布局算法抽成纯函数 common/KinLayout.ets（可单独验证，不再和"画"揉在一起）： - 横向单位是「夫妻单元」而不是「人」，夫妻并排紧邻 - 子女挂在夫妻单元中点下方（family-chart 语义） - 迭代松弛 24 轮容纳冲突约束（家谱不是树：姻亲的"挂父母下方"与"夫妻并排"互相打架） - 全程确定性（排序带 minId 兜底），避免每次重画卡片抖位置 真机抓到并修掉两个真 bug： 1. 户号 0 被当成"没分户"：服务端 unit_of 从 0 编号，端上判 > 0 ⇒ 我与妻子被拆两户（真机 Δx=680px）。修：布局层 >= 0，解析层缺失给 -1， 不把任何数值当哨兵。 2. 线没连对（用户原话「主要是线没连对」）：buildBloodEdges 用 gen 数值当行号， minGen=-1 ⇒ 长辈线从 y=-148 起（屏幕外），整组线串到上一代卡片。 修：新增 rowIndex(gens, gen)，用走标换算而不是数值。 验证： - 离线布局 29/0（含户号 0、脏数据一户三人、镜像常量与端上源码一致） - 反向验证 11/0（9 处注入，含"户号 0 当没分户"与"用 gen 数值当行号"两条真 bug 复现） - 真机几何 15/0、真实数据+屏幕对照 9/0（反解密度 3.125x，残差 0.23/0.32px； 12 个血缘线端点全部贴在卡片上下沿） - ArkTS 静态守卫 905/0 --- entry/src/main/ets/common/KinLayout.ets | 719 ++++++++++++++++++ entry/src/main/ets/components/FbKinGraph.ets | 485 ++++++------ entry/src/main/ets/data/FbParse.ets | 10 +- entry/src/main/ets/model/Types.ets | 8 + .../main/ets/pages/people/FbPeoplePage.ets | 399 ++++------ 5 files changed, 1114 insertions(+), 507 deletions(-) create mode 100644 entry/src/main/ets/common/KinLayout.ets diff --git a/entry/src/main/ets/common/KinLayout.ets b/entry/src/main/ets/common/KinLayout.ets new file mode 100644 index 0000000..f037e6a --- /dev/null +++ b/entry/src/main/ets/common/KinLayout.ets @@ -0,0 +1,719 @@ +/** + * 家书 FamilyBook · 家谱布局算法（鸿蒙端） + * + * 🔴 为什么把布局从视图里**抽出来**（v73）： + * 原来 `FbKinGraph.ets` 里「算位置」和「画」揉在一起（287 行）， + * 结果位置算法没法单独验证 —— 只能靠肉眼看截图，改一处不知道碰坏了哪。 + * 现在布局是**纯函数**（输入人 → 输出坐标 + 连线），视图只管照着画。 + * + * ============================================================ + * 布局语义（与 Web 端 `family-chart` 对齐） + * ============================================================ + * · **横向的单位是「夫妻单元」**，不是「人」—— + * 这是与原实现最大的差别。原实现按 `gen` 均分横向位置， + * 完全没看 `unit`（户号）⇒ **夫妻被拆散**（丈夫和妻子之间隔着别人）， + * 连线只能斜着穿过去，看起来一团乱。 + * · **子女挂在「父母单元」的中点下方**（不是挂在父亲或母亲个人下方）—— + * 这也是 family-chart 的做法：连线从夫妻横线中点垂下来。 + * · **同代不重叠**：同代 unit 之间至少留 `UNIT_GAP`。 + * + * ============================================================ + * 为什么用「迭代松弛」而不是一次性算完的 tidy tree + * ============================================================ + * 标准的 tidy tree（Reingold–Tilford）要求结构**是树**。 + * 但家谱不是树：岳父岳母这一类**姻亲**，他们的子女（妻子） + * 已经作为配偶落在「我」的单元里 —— + * · 子女要挂父母下方 ⇒ 妻子应该在我岳父岳母下面 + * · 夫妻要并排 ⇒ 妻子应该在我右边 + * 这两条**互相打架**，树结构表达不了。 + * + * 松弛（迭代逼近）能容纳冲突约束：两边各让一步，收敛到折中位置。 + * 11 个节点 × 24 轮，开销可以忽略。 + * + * ⚠️ 迭代必须**确定性**：同样的输入必须给同样的输出， + * 否则每次重画（`onAreaChange` 会触发）图就抖一下。 + * ⇒ 排序的比较函数里永远带上「unit 内最小 id」当最后一级 tie-break， + * 绝不依赖 `Array.sort` 的稳定性或遍历顺序。 + */ + +import { FbKinPerson } from '../model/Types'; + +/** + * 卡片与间距尺寸（vp）。 + * + * ⚠️ 这些数字与 `FbKinGraph.ets` 里画的卡片**必须一致**： + * 布局按它们算间距与连线落点，视图按它们画卡片。 + * 两边不一致 ⇒ 连线与卡片错位（用户 2026-10-03 在 Web 端踩过这个）。 + */ +export class KinDim { + /** + * 卡片宽（v73 定稿 62）。 + * + * 🔴 为什么是 62 而不是 70：真机实测（1080px / 3.0x ⇒ 360vp 屏， + * 页面左右各 16vp padding ⇒ **可用只有 328vp**）。 + * 线上这个家庭 4 列（父母辈 4 人 / 我这一辈 4 人）， + * `70 宽 + 26 缝` 排出来 **358vp** ⇒ 最右边那一列（岳父、妻子） + * 被裁到屏幕外，一进家谱就看不全 —— 用户第一眼看到的就是"不完整"。 + * 收成 `62 宽 + 16 缝` 后 4 列 = 296vp，稳稳落在 328vp 内。 + * ⚠️ 别为了"再宽松点"把这两个数调回去：一调就又会裁边。 + */ + static readonly CARD_W: number = 62; + /** 卡片高（头像 42 + 名字 + 称谓） */ + static readonly CARD_H: number = 84; + /** 夫妻之间的缝（比代间距小得多 ⇒ 一眼看出"这俩是一对"） */ + static readonly SPOUSE_GAP: number = 4; + /** 同代不同 unit 之间的缝 */ + static readonly UNIT_GAP: number = 16; + /** 每代的行高（卡片高 + 纵向留白，留给连线拐弯） */ + static readonly ROW_H: number = 148; + /** 内容四周留白 */ + static readonly PAD_X: number = 8; + static readonly PAD_Y: number = 22; + /** 迭代轮数（收敛后再多也没变化，24 轮对 11 人绰绰有余） */ + static readonly ITERS: number = 24; +} + +/** 一张卡的位置（**中心**坐标，视图层自己减半宽半高） */ +export class KinCardPos { + p: FbKinPerson; + /** 中心 x */ + x: number = 0; + /** 中心 y */ + y: number = 0; + + constructor(p: FbKinPerson) { + this.p = p; + } +} + +/** + * 一条连线（Canvas 直接照着画，不需要再算）。 + * + * 血缘线是**三段折线**：父母单元中点 → 往下 → 横移 → 往下 → 子女单元顶端。 + * 这里把拐点算好（`midY`），视图只负责 `moveTo/lineTo`。 + */ +export class KinEdge { + /** 'blood' = 父母→子女；'spouse' = 夫妻 */ + kind: string = 'blood'; + x1: number = 0; + y1: number = 0; + x2: number = 0; + y2: number = 0; + /** 血缘线的横向拐弯 y（spouse 线不用） */ + midY: number = 0; +} + +/** 布局结果 */ +export class KinLayout { + cards: KinCardPos[] = []; + edges: KinEdge[] = []; + /** 内容包围盒（不含 PAD），视图据此算缩放与初始偏移 */ + width: number = 0; + height: number = 0; + /** + * 「我」在画布上的位置（已归一化）。 + * + * ⚠️ v73：家谱一打开就要把镜头对准我 —— 但「我」**不一定是几何中心** + * （我这一辈里我可能是第二个，上面父母辈还铺开了 4 列）。 + * 视图拿这个坐标去 `scrollTo`，否则一进家谱看到的是左上角。 + */ + meX: number = -1; + meY: number = -1; +} + +/** 一个「夫妻单元」（同代内 `unit` 相同的人；`unit` 无效时按单人成组） */ +class KinUnit { + key: string = ''; + gen: number = 0; + members: FbKinPerson[] = []; + /** 本单元总宽（成员并排 + 夫妻缝） */ + width: number = 0; + /** 中心 x */ + x: number = 0; + /** 本轮想去的中心 x */ + target: number = 0; + /** 父母所在 unit 的 key（空 = 上方没有本图内的人） */ + parentKey: string = ''; + /** 单元内最小 id —— 排序的**最后一级 tie-break**，保证确定性 */ + minId: number = 0; + + constructor(key: string, gen: number) { + this.key = key; + this.gen = gen; + } +} + +/** id → 那个人（数组下标查找，避免 ArkTS 里 Map 的泛型噪音） */ +class PeopleIndex { + private ids: number[] = []; + private idx: number[] = []; + + build(people: FbKinPerson[]): void { + this.ids = []; + this.idx = []; + for (let i = 0; i < people.length; i++) { + this.ids.push(people[i].id); + this.idx.push(i); + } + } + + /** 返回下标；找不到 -1 */ + find(id: number): number { + for (let i = 0; i < this.ids.length; i++) { + if (this.ids[i] === id) { + return this.idx[i]; + } + } + return -1; + } +} + +/** + * 主入口：算出一整张家谱的位置与连线。 + * + * @param people 服务端 `/api/v1/kin` 给的人（已带 gen / unit / parents / children / spouses） + * @param meId 我（标出中心；也是「父母优先连我自己的父母」的依据） + */ +export function layoutKin(people: FbKinPerson[], meId: number): KinLayout { + const out: KinLayout = new KinLayout(); + if (people.length === 0) { + return out; + } + + const index: PeopleIndex = new PeopleIndex(); + index.build(people); + + // ---- ① 按「代数 + 夫妻单元」分组 ---- + const units: KinUnit[] = []; + const unitOfPerson: number[] = []; // 与 people 等长：每人属于哪个 unit 下标 + for (let i = 0; i < people.length; i++) { + unitOfPerson.push(-1); + } + + for (let i = 0; i < people.length; i++) { + const p: FbKinPerson = people[i]; + /* 🔴🔴 v73 真机抓到的真 bug：**户 0 被当成"没分户"** ⇒ 我与妻子被拆成两户。 + * + * 原来这里是 `p.unit > 0 ? 按户 : 单人`，理由是"0 表示没分户"。 + * 但服务端 `Kinship::familyMap()` 的 `unit_of` 是 + * `foreach ($units as $i => $u)` **从 0 开始**编号的 —— + * 户 0 是**真实存在的一户**（线上实测：户 0 = 杨永全#1 + 洪博为#3，正是我和妻子）。 + * ⇒ 户 0 被走 `solo` 分支拆成两个单人单元， + * 真机上表现为「我」与妻子之间横插了姐姐一家（Δx = 680px 而不是 198px）， + * 而**离线测试完全看不出来**（Python 镜像也抄了同样的错判）。 + * + * 修法：**不把任何数值当成哨兵**。缺字段/无户号由**解析层**统一成 -1 + * （见 `FbParse.parseKin`：`unit` 缺失或 null 时给 -1）， + * 这里只判 `>= 0` 即"有一户"。这样服务端怎么编号都不会再错。 + * ⚠️ 别改回 `> 0`：那等于把"第 0 户"这颗雷重新埋上。 + * ⚠️ 也别用 `!== undefined`：`-1` 会漏过去，把全家人并成一户。 + */ + const key: string = p.unit >= 0 ? (p.gen.toString() + ':' + p.unit.toString()) + : (p.gen.toString() + ':solo:' + p.id.toString()); + + let hit: number = -1; + for (let u = 0; u < units.length; u++) { + if (units[u].key === key) { + hit = u; + break; + } + } + if (hit < 0) { + const nu: KinUnit = new KinUnit(key, p.gen); + nu.minId = p.id; + units.push(nu); + hit = units.length - 1; + } else if (p.id < units[hit].minId) { + units[hit].minId = p.id; + } + units[hit].members.push(p); + unitOfPerson[i] = hit; + } + + /** + * 单元内排序：把成员按**配偶链**串成一排。 + * + * 🔴 为什么不是简单"我在最前、其余按 id"（v73 第一版就是那样，本地验出来了）： + * 服务端的 `unit`（夫妻单元号）是算出来的，正常一户 2 人； + * 但数据脏的时候（重复录入、先录了"妻子"又录了"配偶"）**一户可能 3 人**。 + * 那时按 id 排会让"我"排在最左、真配偶被挤到第三位， + * 中间隔着另一个人 ⇒ **夫妻不再相邻**，连线横穿第三个人。 + * 按配偶链排就能保证：只要两人登记了夫妻关系，他们在卡片上一定挨着。 + * + * 起点选择：优先从「我」开始；否则从链头（没有本户内配偶的那个人）开始。 + */ + for (let u = 0; u < units.length; u++) { + const ms: FbKinPerson[] = units[u].members; + units[u].members = orderBySpouseChain(ms, meId); + const ordered: FbKinPerson[] = units[u].members; + units[u].width = ordered.length * KinDim.CARD_W + (ordered.length - 1) * KinDim.SPOUSE_GAP; + } + + // ---- ② 找每个单元的「父母单元」---- + // + // ⚠️ 一个单元可能有多个人、每个人的父母又可能在不同单元 + // （「我」的父母 vs 「妻子」的父母）。 + // 规则：**「我」所在的单元优先认我自己的父母** —— + // 否则妻子那侧的岳父母会把主树带偏（整张图看起来像"围着岳父家转"）。 + for (let u = 0; u < units.length; u++) { + units[u].parentKey = ''; + } + for (let u = 0; u < units.length; u++) { + const unit: KinUnit = units[u]; + const votes: string[] = []; + let hasMe: boolean = false; + + for (let m = 0; m < unit.members.length; m++) { + const p: FbKinPerson = unit.members[m]; + if (p.id === meId) { + hasMe = true; + } + for (let k = 0; k < p.parents.length; k++) { + const pi: number = index.find(p.parents[k]); + if (pi < 0) { + continue; + } + const pu: number = unitOfPerson[pi]; + if (pu === u) { + continue; // 同单元（夫妻互称父母）跳过 + } + const puGen: number = units[pu].gen; + if (puGen >= unit.gen) { + continue; // 只认**上一代**，防止把子孙当父母 + } + votes.push(units[pu].key); + } + } + + if (hasMe) { + // 「我」在的单元：只认我自己的父母（前面已经混进配偶父母了，这里重算） + let own: string = ''; + const meIdx: number = index.find(meId); + if (meIdx >= 0) { + const me: FbKinPerson = people[meIdx]; + for (let k = 0; k < me.parents.length; k++) { + const pi: number = index.find(me.parents[k]); + if (pi < 0) { + continue; + } + const pu: number = unitOfPerson[pi]; + if (pu >= 0 && units[pu].gen < unit.gen) { + own = units[pu].key; + break; + } + } + } + unit.parentKey = own; + } else if (votes.length > 0) { + // 其余单元：取出现次数最多的（平票时取 key 字典序最小 —— 确定性） + votes.sort((a: string, b: string): number => a < b ? -1 : (a > b ? 1 : 0)); + let best: string = votes[0]; + let bestN: number = 0; + let i: number = 0; + while (i < votes.length) { + let j: number = i; + while (j < votes.length && votes[j] === votes[i]) { + j++; + } + const cnt: number = j - i; + if (cnt > bestN) { + bestN = cnt; + best = votes[i]; + } + i = j; + } + unit.parentKey = best; + } + } + + // ---- ③ 初始排布：每代内按 (单元序号) 均分 ---- + const gens: number[] = []; + for (let u = 0; u < units.length; u++) { + if (gens.indexOf(units[u].gen) < 0) { + gens.push(units[u].gen); + } + } + gens.sort((a: number, b: number): number => a - b); + + for (let g = 0; g < gens.length; g++) { + const row: KinUnit[] = rowOf(units, gens[g]); + let total: number = 0; + for (let i = 0; i < row.length; i++) { + total += row[i].width; + } + total += (row.length - 1) * KinDim.UNIT_GAP; + let cursor: number = -total / 2; + for (let i = 0; i < row.length; i++) { + row[i].x = cursor + row[i].width / 2; + row[i].target = row[i].x; + cursor += row[i].width + KinDim.UNIT_GAP; + } + } + + // ---- ④ 迭代松弛 ---- + // + // 每一轮做两件事： + // ⓐ 自顶向下：把子女单元拉到「父母单元中点」下方（父母定，子女跟） + // ⓑ 自底向上：把父母单元拉到「子女们的平均位置」（子女定，父母跟） + // 交替进行，让冲突约束（夫妻并排 vs 子女挂父母下方）互相让步。 + // + // ⚠️ 最后一轮**必须自顶向下**：用户看家谱最在意「谁在谁下面」， + // 以子女位置收尾才保证「子女确实落在父母正下方」。 + for (let it = 0; it < KinDim.ITERS; it++) { + relaxDown(units, gens); + relaxUp(units, gens); + } + relaxDown(units, gens); + + // ---- ⑤ 转成卡片坐标（纵向按代数排行）---- + const layout: KinLayout = new KinLayout(); + for (let g = 0; g < gens.length; g++) { + const cy: number = g * KinDim.ROW_H; + const row: KinUnit[] = rowOf(units, gens[g]); + for (let u = 0; u < row.length; u++) { + const unit: KinUnit = row[u]; + let cx: number = unit.x - unit.width / 2 + KinDim.CARD_W / 2; + for (let m = 0; m < unit.members.length; m++) { + const pos: KinCardPos = new KinCardPos(unit.members[m]); + pos.x = cx; + pos.y = cy; + layout.cards.push(pos); + cx += KinDim.CARD_W + KinDim.SPOUSE_GAP; + } + } + } + + // ---- ⑥ 连线 ---- + // ⚠️ 顺序：先算血缘（配偶线在视图里画得更粗，不该被血缘盖住） + buildBloodEdges(layout, people, index, unitOfPerson, units, gens); + buildSpouseEdges(layout, people, index); + + // ---- ⑦ 包围盒（居中用）---- + let minX: number = 1e9; + let maxX: number = -1e9; + let minY: number = 1e9; + let maxY: number = -1e9; + for (let i = 0; i < layout.cards.length; i++) { + const c: KinCardPos = layout.cards[i]; + if (c.x < minX) { + minX = c.x; + } + if (c.x > maxX) { + maxX = c.x; + } + if (c.y < minY) { + minY = c.y; + } + if (c.y > maxY) { + maxY = c.y; + } + } + layout.width = maxX - minX + KinDim.CARD_W; + layout.height = maxY - minY + KinDim.CARD_H; + + // 平移成「左上角为 (PAD, PAD)」的坐标，视图不用再关心负坐标 + const dx: number = -minX + KinDim.CARD_W / 2 + KinDim.PAD_X; + const dy: number = -minY + KinDim.CARD_H / 2 + KinDim.PAD_Y; + for (let i = 0; i < layout.cards.length; i++) { + layout.cards[i].x += dx; + layout.cards[i].y += dy; + } + for (let i = 0; i < layout.edges.length; i++) { + layout.edges[i].x1 += dx; + layout.edges[i].y1 += dy; + layout.edges[i].x2 += dx; + layout.edges[i].y2 += dy; + layout.edges[i].midY += dy; + } + layout.width += KinDim.PAD_X * 2; + layout.height += KinDim.PAD_Y * 2; + + // 「我」的坐标（视图据此把镜头对准我） + const mePos: KinCardPos | undefined = cardOf(layout, meId); + if (mePos !== undefined) { + layout.meX = mePos.x; + layout.meY = mePos.y; + } + + return layout; +} + +/** + * 把同一个「户」里的人按**配偶链**串成一排。 + * + * 规则：从起点出发，每次挑「与已排到最后的那个人是配偶」的成员； + * 挑不到就挑「与已排到第一个人是配偶」的（往左延伸）； + * 都没有就按 id 取下一个（不相干的人）。 + * + * ⚠️ 起点优先「我」：我在最左、配偶在右，符合「从自己往右读」的直觉。 + * ⚠️ 全程用 `indexOf` 判重、按 id 定序 —— 保证**确定性** + * （同样的输入每次给同样的排列，否则重画时卡片会跳位置）。 + */ +function orderBySpouseChain(members: FbKinPerson[], meId: number): FbKinPerson[] { + const rest: FbKinPerson[] = []; + for (let i = 0; i < members.length; i++) { + rest.push(members[i]); + } + // 起点：我 → 否则 id 最小的 + rest.sort((a: FbKinPerson, b: FbKinPerson): number => { + if (a.id === meId) { + return -1; + } + if (b.id === meId) { + return 1; + } + return a.id - b.id; + }); + const out: FbKinPerson[] = []; + if (rest.length === 0) { + return out; + } + out.push(rest[0]); + rest.shift(); + + while (rest.length > 0) { + const tail: FbKinPerson = out[out.length - 1]; + let pick: number = -1; + // ① 先找 tail 的配偶 + for (let i = 0; i < rest.length; i++) { + if (tail.spouses.indexOf(rest[i].id) >= 0) { + pick = i; + break; + } + } + // ② 再找 head 的配偶（往左边继续串） + if (pick < 0) { + const head: FbKinPerson = out[0]; + for (let i = 0; i < rest.length; i++) { + if (head.spouses.indexOf(rest[i].id) >= 0) { + pick = i; + break; + } + } + if (pick >= 0) { + out.unshift(rest[pick]); + rest.splice(pick, 1); + continue; + } + } + // ③ 都不是配偶 ⇒ 按 id 取下一个（数据里不相干的人） + if (pick < 0) { + pick = 0; + } + out.push(rest[pick]); + rest.splice(pick, 1); + } + return out; +} + +/** 取某代的所有单元 */ +function rowOf(units: KinUnit[], gen: number): KinUnit[] { + const out: KinUnit[] = []; + for (let i = 0; i < units.length; i++) { + if (units[i].gen === gen) { + out.push(units[i]); + } + } + return out; +} + +/** 按 (target, minId) 排序 —— minId 是**确定性**的最后一级 */ +function sortByTarget(row: KinUnit[]): void { + row.sort((a: KinUnit, b: KinUnit): number => { + if (a.target !== b.target) { + return a.target - b.target; + } + return a.minId - b.minId; + }); +} + +/** + * 贪心排布：按顺序尽量靠近各自 `target`，但**不许重叠**。 + * + * ⚠️ 不用"按 target 直接赋值"：那会让同代的单元叠在一起 + * （家谱里同代人多时，父母中心往往挤在很小的一段）。 + */ +function arrange(row: KinUnit[]): void { + let cursor: number = -1e9; + for (let i = 0; i < row.length; i++) { + const u: KinUnit = row[i]; + const wantLeft: number = u.target - u.width / 2; + const left: number = wantLeft > cursor ? wantLeft : cursor; + u.x = left + u.width / 2; + cursor = left + u.width + KinDim.UNIT_GAP; + } +} + +/** 自顶向下：子女单元跟着父母单元的中点走 */ +function relaxDown(units: KinUnit[], gens: number[]): void { + for (let g = 0; g < gens.length; g++) { + const row: KinUnit[] = rowOf(units, gens[g]); + for (let i = 0; i < row.length; i++) { + const u: KinUnit = row[i]; + if (u.parentKey !== '') { + const pi: number = indexOfUnit(units, u.parentKey); + if (pi >= 0) { + u.target = units[pi].x; + continue; + } + } + // 没有上一代（如岳父岳母）：贴到「自己子女那侧」的位置。 + // ⚠️ 不能简单保持不动 —— 否则它和主树的关系会随时间漂到莫名其妙的地方。 + u.target = u.x; + } + sortByTarget(row); + arrange(row); + } +} + +/** 自底向上：父母单元跟着子女单元的平均位置走 */ +function relaxUp(units: KinUnit[], gens: number[]): void { + for (let g = gens.length - 1; g >= 0; g--) { + const row: KinUnit[] = rowOf(units, gens[g]); + for (let i = 0; i < row.length; i++) { + const u: KinUnit = row[i]; + let sum: number = 0; + let n: number = 0; + for (let k = 0; k < units.length; k++) { + if (units[k].parentKey === u.key) { + sum += units[k].x; + n++; + } + } + u.target = n > 0 ? sum / n : u.x; + } + sortByTarget(row); + arrange(row); + } +} + +function indexOfUnit(units: KinUnit[], key: string): number { + for (let i = 0; i < units.length; i++) { + if (units[i].key === key) { + return i; + } + } + return -1; +} + +/** + * `gen` 的**数值** → 卡片所在的**行下标**。 + * + * 🔴🔴 v73 真机 bug：**线没连对**（用户 2026-10-21：「主要是线没连对」）。 + * + * 卡片 y 用的是 `第几行`（`g = 0,1,2…`，见 ⑤ 里 `const cy = g * KinDim.ROW_H`）， + * 而这里原来直接用 `gen` 的**数值**当行号（`units[pu].gen * KinDim.ROW_H`）。 + * `gen` 的数值是相对我的代数（-1 = 长辈、0 = 我、+1 = 晚辈）， + * 它**不等于**行下标 —— 只有当 `minGen === 0` 时两者才碰巧相等。 + * 本家 `minGen = -1` ⇒ 连线的 y 整体**少算一行**： + * 长辈线从 y=−148 起（在屏幕外），子女线的落点落在"我这一辈"卡片上， + * 结果是线全部串到上一个人身上、与卡片错位。 + * ⇒ 唯一正确的换算是 `gens.indexOf(gen)`。 + * + * ⚠️ 别用 `gen - minGen` 代替：`gens` 是**去重排序后的实际存在的行**， + * 缺代（比如没有 -2 那一代）时 `gen - minGen` 会算出空行、线还是错。 + */ +function rowIndex(gens: number[], gen: number): number { + const i: number = gens.indexOf(gen); + return i < 0 ? 0 : i; +} + +/** + * 血缘连线：从「父母单元」的中点垂到「子女单元」的顶端。 + * + * ⚠️ 起点用**父母单元中点**（夫妻横线的中点），不是父亲个人 —— + * 这是 family-chart 的画法，也是「孩子是两个人共同的孩子」的视觉表达。 + * 原实现从父亲个人往下画，遇到母亲在右、孩子在中间时线会斜穿。 + */ +function buildBloodEdges(layout: KinLayout, people: FbKinPerson[], + index: PeopleIndex, unitOfPerson: number[], units: KinUnit[], + gens: number[]): void { + const done: string[] = []; + for (let i = 0; i < people.length; i++) { + const child: FbKinPerson = people[i]; + const childCard: KinCardPos | undefined = cardOf(layout, child.id); + if (childCard === undefined) { + continue; + } + // ---- 每个子女只连一条线（父母可能有两个，共用一个"落点"）---- + let pid: number = 0; + for (let k = 0; k < child.parents.length; k++) { + if (index.find(child.parents[k]) >= 0) { + pid = child.parents[k]; + break; + } + } + if (pid === 0) { + continue; + } + const pu: number = unitOfPerson[index.find(pid)]; + const cu: number = unitOfPerson[i]; + if (pu < 0) { + continue; + } + const k2: string = units[pu].key + '>' + units[cu].key; + if (done.indexOf(k2) >= 0) { + continue; // 同一对「父母单元 → 子女单元」只画一次 + } + done.push(k2); + + const parentY: number = rowIndex(gens, units[pu].gen) * KinDim.ROW_H; + const e: KinEdge = new KinEdge(); + e.kind = 'blood'; + e.x1 = units[pu].x; + e.y1 = parentY + KinDim.CARD_H / 2; + e.x2 = units[cu].x; + e.y2 = rowIndex(gens, units[cu].gen) * KinDim.ROW_H - KinDim.CARD_H / 2; + // 拐点在两代之间靠上 40% 处：靠近父母的下沿，视觉上「分叉」更像扇出 + e.midY = e.y1 + (e.y2 - e.y1) * 0.42; + layout.edges.push(e); + } +} + +/** 夫妻连线：两人卡片之间的一小段横线 */ +function buildSpouseEdges(layout: KinLayout, people: FbKinPerson[], index: PeopleIndex): void { + for (let i = 0; i < people.length; i++) { + const p: FbKinPerson = people[i]; + for (let k = 0; k < p.spouses.length; k++) { + const sid: number = p.spouses[k]; + // ⚠️ 只画一次（否则同一对画两条，线宽叠加看起来发黑） + if (sid < p.id) { + continue; + } + if (index.find(sid) < 0) { + continue; + } + const a: KinCardPos | undefined = cardOf(layout, p.id); + const b: KinCardPos | undefined = cardOf(layout, sid); + if (a === undefined || b === undefined) { + continue; + } + const e: KinEdge = new KinEdge(); + e.kind = 'spouse'; + // 左的人在左、右的人在右（夫妻并排时 a 可能已经偏右） + if (a.x <= b.x) { + e.x1 = a.x + KinDim.CARD_W / 2; + e.y1 = a.y; + e.x2 = b.x - KinDim.CARD_W / 2; + e.y2 = b.y; + } else { + e.x1 = b.x + KinDim.CARD_W / 2; + e.y1 = b.y; + e.x2 = a.x - KinDim.CARD_W / 2; + e.y2 = a.y; + } + e.midY = e.y1; + layout.edges.push(e); + } + } +} + +/** 按 id 找卡片位置 */ +export function cardOf(layout: KinLayout, id: number): KinCardPos | undefined { + for (let i = 0; i < layout.cards.length; i++) { + if (layout.cards[i].p.id === id) { + return layout.cards[i]; + } + } + return undefined; +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbKinGraph.ets b/entry/src/main/ets/components/FbKinGraph.ets index 6e2b2df..1ad82a2 100644 --- a/entry/src/main/ets/components/FbKinGraph.ets +++ b/entry/src/main/ets/components/FbKinGraph.ets @@ -1,34 +1,39 @@ /** * 家书 FamilyBook · 家谱图谱（鸿蒙端） * - * 把亲属关系画成**知识图谱**那样的图：节点是圆形头像，边是连线。 + * ============================================================ + * 🔴 v73：从「Canvas 全手绘」改成「Canvas 只画线 + 原生卡片」 + * ============================================================ + * 用户 2026-10-21 原话：「手机端这个家谱实在是很难看，能有什么库之类的，让它好看点吗」 * - * 🔴 为什么用 `Canvas` 而不是 `Circle`/`Path` 组件拼： - * · 布局是**算出来的**（按代数分层、同代均分、夫妻相邻）， - * 节点数量与位置都不定 —— 组件树的写法要动态拼 Path 的 `commands`， - * 比直接算坐标画线**难得多**、也更难调； - * · 连线要**画在节点下面**（否则线会压在头像上）—— - * Canvas 一次画完，天然有先后顺序。 - * ⚠️ 代价：Canvas **不是响应式的**，数据变了要**自己重画**。 - * 所以这里在 `onReady`（首帧）与**每次数据/尺寸变化时**都重画一遍。 + * 为什么不能再全用 Canvas（原实现 287 行，只有彩色圆点 + 首字）： + * · Canvas **没有原生字体**：只能写 `'12px sans-serif'` 这种泛字体， + * 中文渲染出来又平又硬，和 App 其他地方的排版完全两个味道； + * · Canvas **没有圆角/阴影/图片裁切**：卡片做不出「纸白 + 细边 + 微投影」， + * 只能退化成纯色圆点 —— 这就是用户说的"难看"； + * · Canvas **不是响应式的**：数据一变要自己重画，容易漏。 + * ⇒ 现在：**卡片用原生 `Column`/`Text`/`FbAvatar`**， + * 字体、圆角、阴影、头像裁切全部走 App 同一套，视觉自然统一。 * - * 布局规则（与"从上往下读家谱"的直觉一致）： - * · **纵向 = 代数**：长辈在上、我居中、晚辈在下（`gen` 越小越靠上）； - * · **横向 = 同代展开**：同代的人均分宽度；配偶排在彼此旁边； - * · 连线：父母→子女（带箭头感的折线）、夫妻（水平短线，更粗）。 - * ⚠️ 不做"力导向"那种自动布局：家谱有**明确的层次语义**， - * 力导向会把人随机甩开，反而看不懂谁是长辈。 + * ⚠️ 那为什么连线还留在 Canvas 上，不用 `Path` 组件？ + * `Path.commands` 的坐标单位是 **px**（官方文档明确写明）， + * 而卡片定位的 `.position()` 单位是 **vp**。 + * 两套单位混用，在高分屏（本机 3.0x）上线会缩到 1/3、与卡片完全错位。 + * Canvas 的绘制坐标系**也是 vp**（与 `.position()` 一致，原实现已验证）， + * 所以「Canvas 画线 + 原生卡片绝对定位」是唯一单位自洽的组合。 + * + * 布局算法**不在这个文件里** —— 见 `common/KinLayout.ets`（纯函数、可单独验证）。 + * + * ⚠️ 不做双指缩放：`scale()` 是位图缩放，卡片里的中文会糊； + * 内容超出一屏时用 `Scroll` 双向滚动 —— 更符合手机的肌肉记忆。 */ +import { FbAvatar } from './Widgets'; +import { KinCardPos, KinDim, KinEdge, KinLayout, layoutKin } from '../common/KinLayout'; import { FbColors, FbMetric } from '../common/Theme'; import { FbKinPerson } from '../model/Types'; - -/** 一个节点在画布上的位置 */ -interface KinNode { - p: FbKinPerson; - x: number; - y: number; -} +import { fbImageSrc } from '../data/FbAttachQueue'; +import { FB_TOKEN_STORE } from '../data/FbTokenStore'; @ComponentV2 export struct FbKinGraphView { @@ -40,249 +45,261 @@ export struct FbKinGraphView { @Event onPick: (id: number) => void = (id: number): void => { }; - /** 画布上下文（必须在组件里创建，不能跨组件共享） */ + /** 算好的布局 */ + @Local layout: KinLayout = new KinLayout(); + /** 内容尺寸（`Scroll` 里的子层要有确定宽高，否则滚不动） */ + @Local contentW: number = 0; + @Local contentH: number = 0; + /** 视口宽度（内容比视口窄时居中） */ + @Local viewW: number = 0; + /** 视口高度（判断"要不要滚") */ + @Local viewH: number = 0; + /** 内容几何哈希：布局一变就要**重画 Canvas**（见 `drawEdges` 的说明） */ + @Local geoStamp: string = ''; + + /** 滚动容器（要能"一进来就对准我"） */ + private scroller: Scroller = new Scroller(); + /** 已经自动对准过一次（避免用户手动滚动后被拉回去） */ + private centered: boolean = false; + + /** Canvas 上下文（**必须在组件里创建**，不能跨组件共享） */ private settings: RenderingContextSettings = new RenderingContextSettings(true); private ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); - /** 画布尺寸（onAreaChange 拿到） */ - @Local cw: number = 0; - @Local ch: number = 0; - /** 算好的节点位置（画与点击都用它） */ - private nodes: KinNode[] = []; - /** 节点半径（vp） */ - private readonly R: number = 22; - - build() { - Canvas(this.ctx) - .width('100%') - .height('100%') - .backgroundColor(FbColors.paper) - // ⚠️ `onReady` 只在**首帧**触发一次；后续尺寸变化要靠 `onAreaChange`。 - // 只用 onReady 的话，切到家谱页（宽高这时才定下来）会画不出东西。 - .onReady((): void => { - this.redraw(); - }) - .onAreaChange((_old: Area, now: Area): void => { - this.cw = Number(now.width); - this.ch = Number(now.height); - this.redraw(); - }) - // 🔴 `Canvas` **没有**"点到了哪个图形"的概念 —— 命中检测要自己算。 - // 画的位置由 `layout()` 定，点击时拿同一份 `this.nodes` 比距离即可。 - .onClick((ev: ClickEvent): void => { - const x: number = ev.x; - const y: number = ev.y; - // 命中半径放宽一点（手指比鼠标粗）：用 1.35×R 更"跟手" - const hit: number = this.R * 1.35; - for (const n of this.nodes) { - const dx: number = x - n.x; - const dy: number = y - n.y; - if (dx * dx + dy * dy <= hit * hit) { - this.onPick(n.p.id); - return; - } - } - }) + aboutToAppear(): void { + this.rebuild(); } /** - * 重画整张图（**先算位置、再画线、最后画节点**）。 + * `@Param` 变化时重算。 * - * ⚠️ 顺序很重要：线在节点下面 —— 否则线会横穿头像。 - * Canvas 没有 z-index，只能靠绘制顺序。 + * ⚠️ 用 `@Monitor` 而**不是**在 `build()` 里算：`build()` 每次重渲染都跑， + * 在那里算布局等于每帧做一遍「11 人 × 24 轮松弛」。 */ - private redraw(): void { - if (this.cw <= 0 || this.ch <= 0 || this.people.length === 0) { + @Monitor('people', 'meId') + onDataChange(): void { + // 数据换了 ⇒ 允许重新对准我（否则同步刷新后镜头还停在上一个人的位置） + this.centered = false; + this.rebuild(); + } + + private rebuild(): void { + this.layout = layoutKin(this.people, this.meId); + // `+ 2`：盖住描边的半像素溢出，否则最右侧卡片的边会被裁掉一条 + this.contentW = this.layout.width + 2; + this.contentH = this.layout.height + 2; + // 🔴 几何指纹：Canvas **不是响应式的**，布局变了必须自己重画。 + // 只靠 `onReady`（首帧一次）是不够的 —— 首帧时 `people` 往往还是空的， + // 等数据到了布局才变，那时连线会**留在旧位置**（卡片动了线没动）。 + // 这里把每张卡的坐标拼成一个串，变了就触发重画。 + this.geoStamp = this.stampOf(); + } + + /** 内容几何指纹（卡片坐标 + 线数） */ + private stampOf(): string { + let s: string = ''; + for (const c of this.layout.cards) { + s += c.p.id.toString() + ':' + c.x.toFixed(1) + ',' + c.y.toFixed(1) + ';'; + } + return s + '|' + this.layout.edges.length.toString(); + } + + /** + * 把镜头对准「我」。 + * + * ⚠️ 只在**第一次**做，且内容超出视口才需要滚 —— + * 内容比视口窄时已经居中（见 `offsetX`），再滚反而会滚出空白。 + */ + private centerOnMe(): void { + if (this.centered || this.viewW <= 0 || this.viewH <= 0) { return; } - this.layout(); - this.drawEdges(); - this.drawNodes(); + if (this.layout.meX < 0) { + return; + } + this.centered = true; + const needX: boolean = this.contentW > this.viewW; + const needY: boolean = this.contentH > this.viewH; + if (!needX && !needY) { + return; + } + this.scroller.scrollTo({ + xOffset: needX ? Math.max(0, this.layout.meX - this.viewW / 2) : 0, + yOffset: needY ? Math.max(0, this.layout.meY - this.viewH / 2) : 0, + animation: { duration: 260, curve: Curve.EaseOut } + }); + } + + /** 内容比视口窄 ⇒ 左右居中；否则从左边开始（可滚） */ + private offsetX(): number { + if (this.contentW >= this.viewW) { + return 0; + } + return (this.viewW - this.contentW) / 2; } /** - * 算节点位置（按代数分层）。 + * 几何变了就补一次重画。 * - * ⚠️ 结果存进 `this.nodes` —— 点击命中检测要用**同一份坐标**， - * 重算一遍容易出现"看到的和点到的不一样"。 + * 🔴 为什么光有 `onAreaChange` 不够：它只在**宽高变化**时触发。 + * 而布局变了、总宽高却没变的情况是真实存在的 —— + * 比如两个人互换了位置、或者某个单元整体挪了 20vp。 + * 那时 Canvas 里留的是**旧坐标的线**，卡片却在**新位置** ⇒ 线穿到卡片外面。 + * `geoStamp` 是坐标指纹，它变就一定重画。 */ - private layout(): void { - // ---- ① 按代数分组 ---- - const byGen: Map = new Map(); - for (const p of this.people) { - const cur: FbKinPerson[] | undefined = byGen.get(p.gen); - if (cur !== undefined) { - cur.push(p); - } else { - byGen.set(p.gen, [p]); - } - } - const gens: number[] = []; - byGen.forEach((_v: FbKinPerson[], k: number): void => { - gens.push(k); - }); - // ⚠️ 必须按**数值**排（Map 的键直接 sort 会按字符串：-1,-2,0,1） - gens.sort((a: number, b: number): number => a - b); - - // ---- ② 纵向：每代一条水平带，均分高度 ---- - const padTop: number = 46; // 给顶部代数标签留位置 - const padBottom: number = 26; - const bandH: number = (this.ch - padTop - padBottom) / Math.max(1, gens.length); - - const nodes: KinNode[] = []; - for (let gi: number = 0; gi < gens.length; gi++) { - const g: number = gens[gi]; - const ps: FbKinPerson[] = byGen.get(g) !== undefined ? (byGen.get(g) as FbKinPerson[]) : []; - const y: number = padTop + bandH * gi + bandH / 2; - - // ---- ③ 横向：同代均分 ---- - // ⚠️ 左右各留 `R + 8`，否则第一个/最后一个节点会贴边、头像被切掉。 - const padX: number = this.R + 10; - const usable: number = this.cw - padX * 2; - const step: number = ps.length > 1 ? usable / (ps.length - 1) : 0; - // ⚠️ 只有一个人时放**正中间**（step=0 会让它贴在左边） - const startX: number = ps.length > 1 ? padX : this.cw / 2; - - for (let i: number = 0; i < ps.length; i++) { - nodes.push({ p: ps[i], x: startX + step * i, y: y }); - } - } - this.nodes = nodes; + @Monitor('geoStamp') + onGeoChange(): void { + // 推到下一个 tick：此时 `contentW/contentH` 与 Canvas 的布局都已生效 + setTimeout((): void => { + this.drawEdges(); + }, 0); } - /** 按 id 找节点 */ - private nodeOf(id: number): KinNode | undefined { - for (const n of this.nodes) { - if (n.p.id === id) { - return n; + build() { + Scroll(this.scroller) { + Stack({ alignContent: Alignment.TopStart }) { + // ---- ① 连线层（**在卡片下面**：Canvas 没有 z-index，靠节点顺序）---- + Canvas(this.ctx) + .width(this.contentW) + .height(this.contentH) + .onReady((): void => { + this.drawEdges(); + this.centerOnMe(); + }) + .onAreaChange((_o: Area, _n: Area): void => { + this.drawEdges(); + }) + // 连线不参与命中：点卡片边缘时不该点到它下面的线 + .hitTestBehavior(HitTestMode.None) + + // ---- ② 卡片层 ---- + ForEach(this.layout.cards, (c: KinCardPos) => { + this.personCard(c) + }, (c: KinCardPos): string => 'kc_' + c.p.id.toString()) } + .width(this.contentW) + .height(this.contentH) } - return undefined; + .width('100%') + .height('100%') + // ⚠️ `Free`（可双向）不是 `Both` —— `Both` 在 API 9 就废弃了， + // SDK 的 `ScrollDirection` 现在只有 Vertical / Horizontal / Free / None。 + .scrollable(ScrollDirection.Free) + .scrollBar(BarState.Off) + .edgeEffect(EdgeEffect.Spring) + // 内容比视口窄时居中：`Scroll` 没法「居中内容」，用对称 padding 顶到中间 + .padding({ left: this.offsetX(), right: this.offsetX() }) + .backgroundColor(FbColors.paper) + .onAreaChange((_o: Area, now: Area): void => { + this.viewW = Number(now.width); + this.viewH = Number(now.height); + this.centerOnMe(); + }) } - /** 画连线 */ + /** + * 画全部连线（先血缘、后夫妻 —— 夫妻线更粗，要压在上面）。 + * + * ⚠️ Canvas 不是响应式的：布局变了必须**自己重画**。 + * 这里在 `onReady`（首帧）与 `onAreaChange` 各调一次。 + */ private drawEdges(): void { - const c: CanvasRenderingContext2D = this.ctx; - c.lineWidth = 1.6; - c.strokeStyle = '#B9A896'; - - for (const n of this.nodes) { - // ---- 父母 → 子女（折线：下-横-下）---- - const parents: number[] = n.p.parents; - for (const pid of parents) { - const par: KinNode | undefined = this.nodeOf(pid); - if (par === undefined) { - continue; - } - // 折线中点取两者的横向中点，纵向上 1/3 处拐 - const midY: number = par.y + (n.y - par.y) * 0.55; - c.beginPath(); - c.moveTo(par.x, par.y + this.R); - c.lineTo(par.x, midY); - c.lineTo(n.x, midY); - c.lineTo(n.x, n.y - this.R); - c.stroke(); - } - - // ---- 夫妻（水平短线，**画粗一点**，与血缘线区分）---- - for (const sid of n.p.spouses) { - // 只画一次（按 id 大小去重，否则同一对会画两条） - if (sid < n.p.id) { - continue; - } - const sp: KinNode | undefined = this.nodeOf(sid); - if (sp === undefined) { - continue; - } - c.save(); - c.lineWidth = 3; - c.strokeStyle = '#C97B6A'; - c.beginPath(); - c.moveTo(n.x + this.R, n.y); - c.lineTo(sp.x - this.R, sp.y); - c.stroke(); - c.restore(); - } + if (this.contentW <= 0 || this.contentH <= 0) { + return; } - } - - /** 画节点（圆 + 首字 + 称谓） */ - private drawNodes(): void { const c: CanvasRenderingContext2D = this.ctx; - for (const n of this.nodes) { - const isMe: boolean = n.p.id === this.meId; + c.clearRect(0, 0, this.contentW, this.contentH); - // 圆底（用头像色） + // ---- 血缘：父母单元中点 → 下 → 横 → 下 → 子女顶端（与 Web 端同款折线）---- + for (const e of this.layout.edges) { + if (e.kind === 'spouse') { + continue; + } c.beginPath(); - c.arc(n.x, n.y, this.R, 0, Math.PI * 2); - c.fillStyle = n.p.avatarColor !== '' ? n.p.avatarColor : '#8A6B4B'; - c.fill(); - // 「我」加一圈描边，一眼认出中心 - if (isMe) { - c.lineWidth = 2.5; - c.strokeStyle = '#A84A28'; - c.stroke(); - } - - // 名字首字 - c.font = '16px sans-serif'; - c.textAlign = 'center'; - c.textBaseline = 'middle'; - c.fillStyle = '#FFFFFF'; - const nm: string = n.p.shown !== '' ? n.p.shown : n.p.name; - c.fillText(nm.length > 0 ? nm.substring(0, 1) : '?', n.x, n.y); - - // 名字（圆下方） - c.font = isMe ? 'bold 12px sans-serif' : '12px sans-serif'; - c.fillStyle = isMe ? '#A84A28' : '#2C231D'; - // ⚠️ 名字可能很长（"青岛西海岸电影城"那种）—— 截断，别糊成一片 - const label: string = nm.length > 5 ? nm.substring(0, 5) + '…' : nm; - c.fillText(label, n.x, n.y + this.R + 11); - - // 称谓（名字下面，小字灰色） - if (n.p.label !== '' && n.p.label !== '我') { - c.font = '10px sans-serif'; - c.fillStyle = '#8A7A6A'; - c.fillText(n.p.label, n.x, n.y + this.R + 24); - } - - // ---- 代数标签（每层左边）---- - // ⚠️ 只在每层**第一个**节点旁写，避免重复画 - const first: KinNode | undefined = this.firstOfGen(n.p.gen); - if (first !== undefined && first.p.id === n.p.id) { - c.font = '11px sans-serif'; - c.textAlign = 'left'; - c.fillStyle = '#8A7A6A'; - c.fillText(this.genLabel(n.p.gen), 8, n.y - this.R - 8); - c.textAlign = 'center'; + c.lineWidth = 1.4; + c.strokeStyle = '#C9BDA9'; + c.lineCap = 'round'; + c.lineJoin = 'round'; + c.moveTo(e.x1, e.y1); + c.lineTo(e.x1, e.midY); + c.lineTo(e.x2, e.midY); + c.lineTo(e.x2, e.y2); + c.stroke(); + } + + // ---- 夫妻：卡片之间的一小段横线（粗、品牌色，与血缘一眼区分）---- + for (const e of this.layout.edges) { + if (e.kind !== 'spouse') { + continue; } + c.beginPath(); + c.lineWidth = 2.2; + c.strokeStyle = '#C97B6A'; + c.lineCap = 'round'; + c.moveTo(e.x1, e.y1); + c.lineTo(e.x2, e.y2); + c.stroke(); } } - /** 某代里排在最前的那个节点（用来放代数标签） */ - private firstOfGen(gen: number): KinNode | undefined { - for (const n of this.nodes) { - if (n.p.gen === gen) { - return n; + /** + * 一张人物卡。 + * + * 视觉与 Web 端 `.kin-card` 对齐：纸白底 + 细边 + 微投影， + * 头像在上（服务端头像是 1:1 裁好的），姓名在下，称谓再下一行。 + * 「我」用品牌色描边 + 姓名加粗 —— 一眼认出中心。 + */ + @Builder + personCard(c: KinCardPos) { + Column({ space: 0 }) { + FbAvatar({ + name: c.p.shown !== '' ? c.p.shown : c.p.name, + color: c.p.avatarColor !== '' ? c.p.avatarColor : '#8A6B4B', + // 卡宽 62 ⇒ 头像 40，左右各留 11（含 3 内边距）= 不贴边、也不挤 + dia: 40, + fontSizeVp: 15, + imageUrl: fbImageSrc(c.p.avatar, FB_TOKEN_STORE.get()) + }) + + Text(c.p.shown !== '' ? c.p.shown : (c.p.name !== '' ? c.p.name : '（无名）')) + .fontSize(12) + .fontWeight(c.p.id === this.meId ? FontWeight.Medium : FontWeight.Normal) + .fontColor(c.p.id === this.meId ? FbColors.brandInk : FbColors.ink) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .width('100%') + .textAlign(TextAlign.Center) + .margin({ top: 4 }) + + // 称谓：「我」不重复写一遍（卡片上写"我"是废话） + if (c.p.label !== '' && c.p.label !== '我') { + Text(c.p.label) + .fontSize(10) + .fontColor(c.p.id === this.meId ? FbColors.brand : FbColors.brand2) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .width('100%') + .textAlign(TextAlign.Center) + .margin({ top: 1 }) } } - return undefined; - } - - /** 代数 → 层名（与家谱页的分层标题同口径） */ - private genLabel(g: number): string { - if (g === 0) { - return '我这一辈'; - } - if (g === -1) { - return '父母辈'; - } - if (g <= -2) { - return '祖辈'; - } - if (g === 1) { - return '子女辈'; - } - return '孙辈'; + .width(KinDim.CARD_W) + .height(KinDim.CARD_H) + .padding({ top: 4, bottom: 3, left: 2, right: 2 }) + // ⚠️ `.position()` 是**左上角**定位，布局给的是**中心**坐标 ⇒ 各减一半 + .position({ + x: c.x - KinDim.CARD_W / 2, + y: c.y - KinDim.CARD_H / 2 + }) + .backgroundColor(FbColors.surface) + .borderRadius(FbMetric.radiusS) + .border({ + width: c.p.id === this.meId ? 1.5 : 1, + color: c.p.id === this.meId ? FbColors.brand : FbColors.line + }) + .shadow({ radius: 3, color: '#1A2B2620', offsetX: 0, offsetY: 1 }) + .onClick((): void => { + this.onPick(c.p.id); + }) } } \ No newline at end of file diff --git a/entry/src/main/ets/data/FbParse.ets b/entry/src/main/ets/data/FbParse.ets index 1f1e027..222772f 100644 --- a/entry/src/main/ets/data/FbParse.ets +++ b/entry/src/main/ets/data/FbParse.ets @@ -463,7 +463,15 @@ export function parseKin(json: string): FbKinGraph { label: s(r['label'] as string), gen: n(r['gen'] as number), avatarColor: s(r['avatar_color'] as string), - unit: n(r['unit'] as number), + // v73：家谱卡片要显示头像（服务端一直返回，以前画圆点没解析） + avatar: s(r['avatar'] as string), + /* 🔴 v73：**不能**用 `n()` —— 它把 null/undefined 折成 0， + 而服务端的户号 `unit_of` 是**从 0 开始**编号的（户 0 是真实的一户）。 + ⇒ 用 `n()` 会让"字段缺失"与"第 0 户"变成同一个值， + 布局层就无法区分，线上实测表现为「我与妻子被拆成两户」。 + 这里统一成 -1 表示"没有户号"，布局层只判 `>= 0`。 + ⚠️ 别改回 `n(...)`，也别在布局层用 `> 0`。 */ + unit: r['unit'] !== null && r['unit'] !== undefined ? n(r['unit'] as number) : -1, // ⚠️ 从 `Record` 里取值必须**显式断言**成目标类型 —— // ArkTS 不会自动把 `Object` 收窄成 `number[]`（编译期报 // "Argument of type 'Object' is not assignable to 'number[]'"）。 diff --git a/entry/src/main/ets/model/Types.ets b/entry/src/main/ets/model/Types.ets index 9a479b2..4a5145e 100644 --- a/entry/src/main/ets/model/Types.ets +++ b/entry/src/main/ets/model/Types.ets @@ -349,6 +349,14 @@ export interface FbKinPerson { /** 代数：0 = 我，负 = 长辈，正 = 晚辈 */ gen: number; avatarColor: string; + /** + * 头像（服务端 OSS 相对路径，如 `avatars/xxx.jpg`；空 = 这个人没传过头像）。 + * + * ⚠️ v73 加：家谱卡片改成"头像在上"之后要用真图。 + * 服务端 `/api/v1/kin` 一直就返回这个字段，只是端上以前画圆点用不着、没解析。 + * 与 `FbRosterItem.avatar` **同一个含义**，拼地址同样走 `fbImageSrc()`。 + */ + avatar: string; /** 户（夫妻单元）号 */ unit: number; parents: number[]; diff --git a/entry/src/main/ets/pages/people/FbPeoplePage.ets b/entry/src/main/ets/pages/people/FbPeoplePage.ets index fdaec3e..12acaa6 100644 --- a/entry/src/main/ets/pages/people/FbPeoplePage.ets +++ b/entry/src/main/ets/pages/people/FbPeoplePage.ets @@ -168,21 +168,10 @@ function isSubsequence(q: string, s: string): boolean { /** * 家谱里的一代（一层）。 * - * ⚠️ 由 `FbKinRing`（旧的"三圈"演示结构）改成"按代数分层" —— - * 因为真实接口 `/api/v1/kin` 给的就是**按代数**的人（`gen` 字段）， - * 而"三圈"（直系/其他亲属）是当初照着演示数据设计的分法， - * 与真实数据的形状对不上。 + * ⚠️ v73：这个接口连带「列表」视图一起撤掉了 —— 家谱现在只有图一种形态， + * 代数分层由**图谱的纵向位置**表达（长辈在上、晚辈在下）， + * 不再需要「这一代叫什么名字」这种中间结构。 */ -interface FbKinGen { - /** 代数：0 = 我，负 = 长辈，正 = 晚辈 */ - gen: number; - /** 层名，如「父母辈」 */ - title: string; - /** 说明，如「父辈与母辈」 */ - sub: string; - /** 这一代的人 */ - people: FbKinPerson[]; -} @ComponentV2 export struct FbPeoplePage { @@ -322,12 +311,10 @@ export struct FbPeoplePage { /** 家谱的同步提示（与名册分开：两批数据可能一个成功一个失败） */ @Local kinSyncNote: string = ''; /** - * 家谱的显示方式：'graph'（知识图谱，默认）/ 'list'（分层列表）。 - * - * 用户要求把它做成知识图谱那样的图，所以默认给图谱。 - * 但保留列表：小屏上人多了图会挤，列表能看清每个人的关系摘要。 + * ⚠️ v73：原来这里有 `kinMode`（'graph' / 'list' 两种视图）。 + * 用户 2026-10-21 要求去掉列表、只留图谱 ⇒ 状态本身也不用了。 + * 「列表」那套是按代数分组的通讯录，名册页已经有同样的能力。 */ - @Local kinMode: string = 'graph'; /** 我在家谱里的 id（图谱里要标出「我」） */ @Local kinMeId: number = 0; private repo: FbPersonRepo = FbPersonRepo.inst(); @@ -568,8 +555,8 @@ export struct FbPeoplePage { */ private confirmDelete(): void { /* 🔴 v59e：删除入口从"简要卡"挪到了"详情卡底部" ⇒ 目标人先取 `detailPerson`。 - ⚠️ 不能只取 `quickSource()`：详情有可能是**从家谱那行直接打开**的 - （`kinRow` 的 onClick 直接写 `detailPerson`，`quickPerson` 一直是 null） + ⚠️ 不能只取 `quickSource()`：详情有可能是**从家谱图上直接点开**的 + （点卡片直接写 `detailPerson`，`quickPerson` 一直是 null） ⇒ 那样点删除会**静默什么都不发生**（`who === null` 就 return 了）。 这正是"按钮点了没反应"最难查的一类：没有报错、没有日志。 */ const who: FbRosterPerson | null = @@ -1385,17 +1372,55 @@ export struct FbPeoplePage { * ⚠️ 用 `this.detailToken` 防止"快速连点两个人，前一个的响应把后一个覆盖"。 */ private openDetail(id: number): void { - const raw: FbRosterPerson | undefined = this.rawById.get(id); - if (raw === undefined) { - return; - } - this.detailPerson = raw; - const token: string = FB_TOKEN_STORE.get(); - if (token === '') { - return; - } + /* 🔴🔴 v73 真 bug：点家谱卡片**静默没反应**。 + 根因：这里原来只从 `rawById` 取，而 `rawById` 来自 `repo.list()` + —— 那条 SQL 带 `JOIN person_roster`，**只包含"我挑进名册的人"**。 + 家谱里的人（父母、岳父母、配偶）**不一定在我的名册里** ⇒ 查不到 ⇒ 直接 return。 + 字面上就是"点了没反应"，而且不打日志的话 hilog 一个字都抓不到。 + + 修法分两段（与 `byId()` 的注释同一条思路）： + ① 名册里有 ⇒ 立刻用本地那份开浮层（不等网络，点开就有内容）； + ② 名册里没有 ⇒ 先空着把浮层**打开**（`detailPerson` 用一个占位）， + 再异步 `byId()` / 网络详情补上 —— **不能**因为本地没缓存就不响应点击。 + ⚠️ 注意 `detailPerson` 是 `FbRosterPerson`，不能塞 `null` 当作"只开框"， + 所以第 ② 种情况必须先构造一个最小可渲染对象（只有 id + 姓名）。 + */ + const cached: FbRosterPerson | undefined = this.rawById.get(id); + hilog.info(DOMAIN, TAG, 'openDetail(%{public}d)：名册命中=%{public}s（名册共 %{public}d 人）', + id, (cached !== undefined ? 'yes' : 'no'), this.rawById.size); + this.detailToken += 1; const my: number = this.detailToken; + + if (cached !== undefined) { + this.detailPerson = cached; + } else { + // ② 名册里没有 —— 先用家谱那份拼一个最小对象把浮层打开 + const kin: FbKinPerson | undefined = this.kinPeople.find( + (p: FbKinPerson): boolean => p.id === id); + if (kin === undefined) { + hilog.warn(DOMAIN, TAG, 'openDetail(%{public}d)：名册与家谱都没有这个人', id); + return; + } + this.detailPerson = placeholderPerson(kin); + } + + const token: string = FB_TOKEN_STORE.get(); + if (token === '') { + hilog.warn(DOMAIN, TAG, 'openDetail(%{public}d)：令牌为空，浮层已开但不取详情', id); + return; + } + + // ③ 本地库补一份（家谱那边的人往往不 JOIN roster，这里能补到） + this.repo.byId(id).then((local: FbRosterPerson | null): void => { + if (local === null || my !== this.detailToken) { + return; + } + if (this.detailPerson !== null && this.detailPerson.id === id) { + this.detailPerson = local; + } + }); + this.repo.fetchDetail(id, token).then((full: FbRosterPerson | null): void => { // ① 期间用户已经关了浮层、或又点开别人 ⇒ 丢弃这次结果 if (full === null || my !== this.detailToken) { @@ -1482,7 +1507,7 @@ export struct FbPeoplePage { // ============================================================ /** - * 家谱的说明条（"以我为中心" + 图谱/列表切换）。 + * 家谱的说明条（「以我为中心」+ 人数）。 * * 🔴 v68：这里原来还有一颗「补关系」按钮，**从来没有 `onTap`** —— * 点了一点反应都没有（全仓库扫过，只剩这一颗）。 @@ -1491,9 +1516,11 @@ export struct FbPeoplePage { * ⇒ 与其留一个永远点不动的按钮，先撤掉（免得被当成"坏了"）。 * 要做得先加 `POST /api/v1/persons//relations`，那是独立一批活。 * - * ⚠️ 从 `kinView` 里抽出来的原因：**列表模式**要把它**一起放进滚动的 Scroll** - * （这样它才跟着内容滚走），而**图谱模式**它是固定的一层。 - * 抽成一个 Builder，两处引用同一份实现，不会改一处漏一处。 + * 🔴 v73（用户 2026-10-21）：右侧的「图谱 / 列表」切换**整块撤掉**。 + * 原话是"手机端这个家谱实在是很难看"，而那个"列表"视图 + * 本质就是个按代数分组的通讯录 —— 名册页早就有同样的能力 + * （还能搜索、筛选标签），留着它只会让人以为家谱有两种画法。 + * 现在家谱只有一种形态：**图**。 */ @Builder kinHeader() { @@ -1509,15 +1536,6 @@ export struct FbPeoplePage { } .alignItems(HorizontalAlign.Start) .layoutWeight(1) - - // 图谱 / 列表 切换 - Row({ space: 0 }) { - this.kinModeBtn('图谱', 'graph') - this.kinModeBtn('列表', 'list') - } - .padding(2) - .backgroundColor(FbColors.inputBg) - .borderRadius(FbMetric.radiusPill) } .width('100%') .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) @@ -1527,13 +1545,8 @@ export struct FbPeoplePage { @Builder kinView() { Column() { - // 🔴 图谱模式**不跟滚**（它是 Canvas 画的一整屏图，本就没有"滚动内容"可言） - // ⇒ 本模式顶栏仍是固定的一层。 - // 「列表」模式则把页头移进内层 `Scroll` 一起滚（见下面的分支）。 - if (this.kinMode === 'graph') { - this.pageHeaderItem() - this.kinHeader() - } + this.pageHeaderItem() + this.kinHeader() if (this.loading) { Text('正在读取本地数据…') @@ -1549,8 +1562,8 @@ export struct FbPeoplePage { .textAlign(TextAlign.Center) .fontSize(FbMetric.fontSmall) .fontColor(FbColors.faint) - } else if (this.kinMode === 'graph') { - // ---- 知识图谱（Canvas 画：圆节点 + 连线）---- + } else { + // ---- 家谱图（Canvas 画线 + 原生卡片，见 components/FbKinGraph.ets）---- Column() { FbKinGraphView({ people: this.kinPeople, @@ -1563,43 +1576,6 @@ export struct FbPeoplePage { .layoutWeight(1) .width('100%') .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: FB_DOCK_RESERVE - 24 }) - } else { - // ---- 分层列表 ---- - Scroll() { - Column({ space: 0 }) { - // 🔴 **顶栏 + 页头 + 说明条**都放进这个滚动的 Scroll 里 - // ⇒ 上滑时一起滚走（用户 2026-10-15 要求本页也按首页那套）。 - // ⚠️ 图谱模式**不能**这样放（它不滚动，见上面的分支）。 - this.pageHeaderItem() - this.kinHeader() - - ForEach(this.kinGens(), (g: FbKinGen) => { - this.genBlock(g) - }, (g: FbKinGen): string => 'kg_' + g.gen.toString()) - - Text('只显示以我为中心、上下两代以内的亲属（手机上再往外排就看不下了）。') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 8, bottom: 20 }) - - // 🔴 **末尾占位**：与名册列表同理 —— 悬浮栏留白必须做成**内容的一部分**， - // 不能做成 Scroll 的 `padding(bottom)`（那会把可视底边往上收， - // 看着就是"内容没滚到屏幕最底、下面空一块"）。 - this.dockSpacerItem() - } - .width('100%') - } - .layoutWeight(1) - .width('100%') - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) - .align(Alignment.TopStart) - // 🔴 滚动方向上报（驱动底部悬浮栏随滚收起 / 唤回）—— 见 common/FbScroll.ets - .onDidScroll(fbOnScroll) - // 🔴 触摸方向兜底（内容不足一屏的页面滚不动，只能靠手指位移判断） - // 与上面的 `onDidScroll` 互补、互不冲突 —— 见 common/FbScroll.ets - .onTouch(fbOnTouch) } } .width('100%') @@ -1609,97 +1585,11 @@ export struct FbPeoplePage { /** * 一代人（家谱里的一层）。 * - * ⚠️ 自己居中、长辈在上、晚辈在下 —— 与"从上往下读"的直觉一致。 - * 标题写清"这是哪一代"（父母辈 / 我这一辈 / 子女辈）， - * 否则用户看到一堆名字不知道是什么关系。 + * ⚠️ v73：这个 Builder 与 `kinRow` 一起**已删除** —— 它们只服务 + * 「列表」视图，而用户 2026-10-21 要求去掉列表、只留图谱。 + * 原来这里按代数分组、每组一个白卡片 + 行分隔线， + * 本质就是个通讯录；名册页已经有同样的能力（还能搜索/筛标签）。 */ - @Builder - genBlock(g: FbKinGen) { - Column({ space: 0 }) { - // 代数标题 - Row({ space: 8 }) { - Text(g.title) - .fontSize(FbMetric.fontSmall) - .fontWeight(FontWeight.Medium) - .fontColor(FbColors.ink) - Text(g.sub) - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - Blank() - Text(g.people.length.toString() + ' 人') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - } - .width('100%') - .padding({ left: 14, right: 14, top: 10, bottom: 6 }) - .backgroundColor(FbColors.surface) - - // 这一代的人 - ForEach(g.people, (p: FbKinPerson, idx: number) => { - Column({ space: 0 }) { - this.kinRow(p) - if (idx < g.people.length - 1) { - Divider() - .strokeWidth(0.5) - .color(FbColors.line) - .margin({ left: 66 }) - } - } - .width('100%') - }, (p: FbKinPerson): string => 'kp_' + p.id.toString()) - } - .width('100%') - .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 10 }) - .backgroundColor(FbColors.surface) - .borderRadius(FbMetric.radius) - .clip(true) - } - - /** 家谱里的一行（头像 + 称呼 + 称谓 + 关系摘要） */ - @Builder - kinRow(p: FbKinPerson) { - Row({ space: 12 }) { - FbAvatar({ - name: p.shown, - color: p.avatarColor !== '' ? p.avatarColor : '#8A6B4B', - dia: 40, - fontSizeVp: 16 - }) - Column({ space: 3 }) { - Row({ space: 6 }) { - Text(p.shown) - .fontSize(FbMetric.fontBody) - .fontColor(FbColors.ink) - .fontWeight(p.gen === 0 && p.label === '我' ? FontWeight.Bold : FontWeight.Medium) - .maxLines(1) - if (p.label !== '') { - FbTag({ text: p.label, tone: 'muted' }) - } - } - .alignItems(VerticalAlign.Center) - - // 关系摘要（有几个父母/子女/配偶）—— 让人一眼看出"这人有几个孩子" - Text(this.relSummary(p)) - .fontSize(10) - .fontColor(FbColors.faint) - .maxLines(1) - } - .alignItems(HorizontalAlign.Start) - .layoutWeight(1) - } - .width('100%') - .padding({ left: 14, right: 14, top: 11, bottom: 11 }) - .alignItems(VerticalAlign.Center) - .onClick((): void => { - // 点家谱里的人 ⇒ 复用名册的详情浮层（同一个人、同一份数据源） - const raw: FbRosterPerson | undefined = this.rawById.get(p.id); - if (raw !== undefined) { - this.detailPerson = raw; - } - }) - } - - /** 一圈亲属卡 */ // ============================================================ // 共用小件 @@ -1770,99 +1660,10 @@ export struct FbPeoplePage { return list; } - /** 三圈：我 / 直系 / 其他亲属 */ - /** 家谱视图切换按钮（图谱 / 列表） */ - @Builder - kinModeBtn(label: string, key: string) { - Text(label) - .fontSize(FbMetric.fontTiny) - .fontColor(this.kinMode === key ? Color.White : FbColors.muted) - .backgroundColor(this.kinMode === key ? '#4A7C82' : Color.Transparent) - .borderRadius(FbMetric.radiusPill) - .padding({ left: 12, right: 12, top: 5, bottom: 5 }) - .onClick((): void => { - this.kinMode = key; - }) - } - - /** 家谱：按代数分组（服务端已按 gen 排序） */ - private kinGens(): FbKinGen[] { - const map: Map = new Map(); - for (const p of this.kinPeople) { - const cur: FbKinPerson[] | undefined = map.get(p.gen); - if (cur !== undefined) { - cur.push(p); - } else { - map.set(p.gen, [p]); - } - } - // ⚠️ Map 的键是数字，直接 sort 会按**字符串**排（-1, 0, 1, -2 → -1,-2,0,1） - // ⇒ 先转成数组、按数值排。 - const gens: number[] = []; - map.forEach((_v: FbKinPerson[], k: number): void => { - gens.push(k); - }); - gens.sort((a: number, b: number): number => a - b); - - const out: FbKinGen[] = []; - for (const g of gens) { - const ps: FbKinPerson[] = map.get(g) !== undefined ? (map.get(g) as FbKinPerson[]) : []; - const it: FbKinGen = { - gen: g, - title: this.genTitle(g), - sub: this.genSub(g), - people: ps, - }; - out.push(it); - } - return out; - } - - /** 代数 → 中文层名 */ - private genTitle(g: number): string { - if (g === 0) { - return '我这一辈'; - } - if (g === -1) { - return '父母辈'; - } - if (g <= -2) { - return '祖辈（上 ' + (-g).toString() + ' 代）'; - } - if (g === 1) { - return '子女辈'; - } - return '孙辈（下 ' + g.toString() + ' 代）'; - } - - /** 代数说明 */ - private genSub(g: number): string { - if (g === 0) { - return '我与配偶、兄弟姐妹'; - } - if (g < 0) { - return '父辈与母辈'; - } - return '孩子与侄甥'; - } - - /** 「N 位父母 · N 位子女」这类摘要 */ - private relSummary(p: FbKinPerson): string { - const parts: string[] = []; - if (p.parents.length > 0) { - parts.push('父母 ' + p.parents.length.toString()); - } - if (p.spouses.length > 0) { - parts.push('配偶 ' + p.spouses.length.toString()); - } - if (p.siblings.length > 0) { - parts.push('兄弟姐妹 ' + p.siblings.length.toString()); - } - if (p.children.length > 0) { - parts.push('子女 ' + p.children.length.toString()); - } - return parts.length > 0 ? parts.join(' · ') : '暂无亲属关系'; - } + /* ⚠️ v73：`kinModeBtn` / `kinGens` / `genTitle` / `genSub` / `relSummary` + 五个方法一起删了 —— 它们只为「列表」视图服务，而那个视图已撤。 + 代数分层的信息现在由**图谱本身的纵向位置**表达（长辈在上、晚辈在下）， + 不再需要「父母辈 / 我这一辈」这种文字小标题。 */ /** 家谱顶部的人数说明 */ private kinTotalText(): string { @@ -1877,4 +1678,58 @@ export struct FbPeoplePage { const hit: FbRosterItem | undefined = this.all.find((p: FbRosterItem): boolean => p.id === id); return hit !== undefined ? hit.avatarColor : '#A84A28'; } +} + +/** + * 用「家谱里的那个人」拼一个**最小可渲染**的 `FbRosterPerson`。 + * + * 🔴 为什么需要（v73 真 bug）：家谱里的人**不一定在我名册里** + * （`FbPersonRepo.list()` 带 `JOIN person_roster`，只含"我挑进名册的人"）， + * 那时点卡片以前是**静默 return ⇒ 点了没反应**。 + * 这里先拼一个只够画浮层头部的对象，**让浮层立刻打开**， + * 随后 `repo.byId()` / `fetchDetail()` 到了再原地升级。 + * + * ⚠️ 只填家谱真有的那几项，其余给空值 —— 不要瞎猜（填错比空着更糟： + * 用户会以为"系统里有这个资料"）。本地库/接口补上来后会被整份替换掉。 + */ +function placeholderPerson(k: FbKinPerson): FbRosterPerson { + const p: FbRosterPerson = { + id: k.id, + name: k.name, + shown: k.shown !== '' ? k.shown : k.name, + // 家谱那份的称谓是服务端算好的，这里能用 + label: k.label, + tags: [], + avatarColor: k.avatarColor, + avatar: k.avatar, + birthdaySolar: '', + birthdayFull: '', + birthdayLunar: '', + phone: '', + phones: [], + initials: '', + org: '', + title: '', + slogan: '', + email: '', + addrCity: '', + gender: '', + note: '', + isAdmin: false, + addrCountry: '', + addrProvince: '', + addrDistrict: '', + address: '', + birthRank: '', + birthdayLunarLeap: false, + birthdayLunarRaw: '', + contacts: { phone: [], email: [], address: [], url: [] }, + jobs: [], + myNote: '', + myNickname: '', + idCardMasked: '', + canEditAll: false, + isSelf: false + }; + return p; } \ No newline at end of file