ow

2026-09-16 15:02:36 +08:00
1 parent 57201f2860
commit 554a5a4a2c
@@ -37,19 +37,22 @@
            @click.stop="toggleSelect(record)"
          />
        </div>
-        <!-- 状态角标：右上角 -->
+        <!-- 状态角标：右上角（加锁/开锁仅目录有意义，文件不显示锁图标） -->
        <div class="file-status-badge">
-          <LockOutlined
-            v-if="record.PermissionIndc === 'N'"
-            class="badge-lock"
-          />
-          <template v-if="record.PermissionIndc === 'Y'">
-            <UnlockOutlined class="badge-unlock" />
-            <ShareAltOutlined
-              v-if="record.FavoriteIndc === 'Y'"
-              class="badge-share"
+          <template v-if="record.IsDirectoryIndc == 'Y'">
+            <LockOutlined
+              v-if="record.PermissionIndc === 'N'"
+              class="badge-lock"
+            />
+            <UnlockOutlined
+              v-else-if="record.PermissionIndc === 'Y'"
+              class="badge-unlock"
            />
          </template>
+          <ShareAltOutlined
+            v-if="record.PermissionIndc === 'Y' && record.FavoriteIndc === 'Y'"
+            class="badge-share"
+          />
        </div>
        <div class="file-content">
          <template v-if="record.IsDirectoryIndc == 'Y'">
@@ -150,17 +153,20 @@
            record.OrgFileName
          }}</span>
          <span class="list-status-icon">
-            <LockOutlined
-              v-if="record.PermissionIndc === 'N'"
-              class="icon-lock"
-            />
-            <template v-if="record.PermissionIndc === 'Y'">
-              <UnlockOutlined class="icon-unlock" />
-              <ShareAltOutlined
-                v-if="record.FavoriteIndc === 'Y'"
-                class="icon-share"
+            <template v-if="record.IsDirectoryIndc == 'Y'">
+              <LockOutlined
+                v-if="record.PermissionIndc === 'N'"
+                class="icon-lock"
+              />
+              <UnlockOutlined
+                v-else-if="record.PermissionIndc === 'Y'"
+                class="icon-unlock"
              />
            </template>
+            <ShareAltOutlined
+              v-if="record.PermissionIndc === 'Y' && record.FavoriteIndc === 'Y'"
+              class="icon-share"
+            />
          </span>
        </div>
        <div class="list-size">{{ formatSize(record.FileSize) }}</div>
@@ -18,18 +18,12 @@
    <a-row :wrap="false">
      <!-- 大屏用 4 列占位把操作区推到右侧；中小屏占位列隐藏，内容列占满整行再靠右 -->
      <a-col :xs="0" :sm="0" :md="0" :lg="4"></a-col>
-      <a-col
-        style="display: flex; justify-content: flex-end; flex-wrap: wrap"
-        :xs="24"
-        :sm="24"
-        :md="24"
-        :lg="20"
-      >
+      <a-col class="sc-toolbar" :xs="24" :sm="24" :md="24" :lg="20">
        <a-input
          flex="none"
          readonly
          value="视图"
-          class="site-input-split"
+          class="site-input-split sc-view-label"
          style="
            width: 80px;
            border-radius: 0;
@@ -40,7 +34,7 @@
          "
        />
        <a-select
-          style="min-width: 200px"
+          class="sc-view-select"
          v-model:value="viewOption.Value"
          @select="onSelectColumn"
        >
@@ -52,11 +46,13 @@
          >
        </a-select>
        <a-button
+          class="sc-toolbar-btn"
          type="dashed"
          :icon="h(SettingTwoTone)"
          @click.prevent="onViewResult"
        ></a-button>
        <a-button
+          class="sc-toolbar-btn"
          type="dashed"
          :icon="h(PrinterTwoTone)"
          @click.prevent="onPrint"
@@ -85,21 +81,33 @@
            v-for="(record, index) in datas"
            :key="index"
            class="sc-card"
-            :class="{ 'sc-card-selected': isSelected(record) }"
-            @click="onCardClick($event, record)"
-            @dblclick="onCardDblclick($event, record)"
+            :class="{
+              'sc-card-selected': isSelected(record),
+              'sc-card-collapsed': !isExpanded(index),
+            }"
          >
-            <div class="sc-card-head">
-              <span class="sc-check">
+            <div
+              class="sc-card-head"
+              @click="onCardHeadClick($event, record, index)"
+              @dblclick="onCardDblclick($event, record)"
+            >
+              <span class="sc-check" @click.stop="onCardClick($event, record)">
                <a-checkbox v-if="isCheckbox" :checked="isSelected(record)" />
                <a-radio v-else :checked="isSelected(record)" />
              </span>
              <span class="sc-index">{{ getRowIndex(index) }}</span>
-              <span class="sc-title">{{ getTitle(record) }}</span>
+              <span class="sc-title"><slot
+                  name="cardTitle"
+                  v-bind="{ record: record, index: index }"
+                >{{ getTitle(record) }}</slot></span>
+              <RightOutlined
+                class="sc-arrow"
+                :class="{ 'sc-arrow-open': isExpanded(index) }"
+              />
            </div>
-            <div class="sc-card-body">
+            <div v-show="isExpanded(index)" class="sc-card-body">
              <div
-                v-for="column in getCardColumns(index)"
+                v-for="column in allColumns"
                :key="column.dataIndex"
                class="sc-field"
              >
@@ -122,21 +130,6 @@
                  }}</span></span>
              </div>
            </div>
-            <div v-if="canExpand" class="sc-card-more">
-              <a
-                class="sc-more-btn"
-                @click.stop="toggleExpand(index)"
-                @dblclick.stop="noop"
-              >
-                <span>{{
-                  isExpanded(index)
-                    ? "收起"
-                    : `展开全部（共 ${allColumns.length} 项）`
-                }}</span>
-                <UpOutlined v-if="isExpanded(index)" />
-                <DownOutlined v-else />
-              </a>
-            </div>
          </div>
        </div>
        <a-empty v-else class="sc-empty" description="暂无数据" />
@@ -183,8 +176,7 @@ import { SearchCriteriaResultData } from "@/data/auto/searchCriteriaResultData";
 import {
  SettingTwoTone,
  PrinterTwoTone,
-  UpOutlined,
-  DownOutlined,
+  RightOutlined,
 } from "@ant-design/icons-vue";
 import columnModal from "./ColumnModal.vue";
 import { useWindowSize } from "@vueuse/core";
@@ -488,15 +480,7 @@ const titleColumns = computed(() => {
 // 卡片主体展示的列：完整展示全部字段列（含用于标题的列），保证不丢列
 const allColumns = computed(() => fieldColumns.value);

-// 折叠时展示的字段数量（手机端精简为 3 项，桌面端尽量全展示）
-const collapsedCount = computed(() => (isSM.value ? 3 : 9));
-
-// 是否需要"展开/收起"
-const canExpand = computed(
-  () => allColumns.value.length > collapsedCount.value,
-);
-
-// 展开状态（按列表序号记录）
+// 展开状态（按列表序号记录）：默认全部收起，只显示标题行
 const expandedSet = ref<Record<number, boolean>>({});

 const isExpanded = (index: number | string) =>
@@ -510,14 +494,11 @@ const toggleExpand = (index: number | string) => {
  };
 };

-// 当前卡片需要渲染的列：折叠时取前 N 项，展开时取全部
-const getCardColumns = (index: number | string) => {
-  if (!canExpand.value || isExpanded(index)) return allColumns.value;
-  return allColumns.value.slice(0, collapsedCount.value);
+// 点击标题行：仅切换字段明细的展开/收起，不改选中状态
+const onCardHeadClick = (event: any, record: any, index: number | string) => {
+  toggleExpand(index);
 };

-const noop = () => {};
-
 // 数据变化（查询/分页/排序）后重置展开状态
 watch(datas, () => {
  expandedSet.value = {};
@@ -644,6 +625,28 @@ const { run } = usePagination(queryData, {
  border-radius: 0;
 }

+/* 视图工具条：强制单行，下拉框自适应剩余宽度，按钮不被挤到下一行 */
+.setting .sc-toolbar {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+.setting .sc-toolbar .sc-view-label,
+.setting .sc-toolbar .sc-view-select,
+.setting .sc-toolbar .sc-toolbar-btn {
+  flex: 0 0 auto;
+}
+
+/* 下拉框吃掉中间的剩余宽度，窄屏也不会把按钮顶下去 */
+.setting .sc-toolbar .sc-view-select {
+  flex: 1 1 auto;
+  width: auto;
+  min-width: 120px;
+}
+
 .page-footer {
  z-index: 999;
  padding-left: 8px;
@@ -695,13 +698,40 @@ const { run } = usePagination(queryData, {
  border-bottom: 1px solid #eef0f4;
  border-radius: 12px 12px 0 0;
  background: #f7f9fc;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  /* 标题再长也不外溢，多余部分由标题自身省略 */
+  overflow: hidden;
 }

+/* 收起时：标题行独占整卡，隐藏与明细区的分割线 */
+.sc-card-collapsed .sc-card-head {
+  border-bottom-color: transparent;
+  border-radius: 12px;
+}
+
+/* 右侧展开箭头：展开后顺时针旋转 90 度 */
+.sc-arrow {
+  flex: 0 0 auto;
+  margin-left: 2px;
+  color: #98a1b0;
+  font-size: 12px;
+  transition:
+    transform 0.18s ease,
+    color 0.18s ease;
+}
+
+.sc-arrow-open {
+  transform: rotate(90deg);
+  color: #1677ff;
+}
+
+/* 勾选框单独可点：用于精确勾选/取消，不会带开合明细 */
 .sc-check {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
-  pointer-events: none;
+  cursor: pointer;
 }

 .sc-index {
@@ -720,8 +750,10 @@ const { run } = usePagination(queryData, {
 }

 .sc-title {
+  display: block;
  flex: 1 1 auto;
  min-width: 0;
+  max-width: 100%;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
@@ -730,6 +762,11 @@ const { run } = usePagination(queryData, {
  text-overflow: ellipsis;
 }

+/* 标题内的自定义内容（如图标 + 路径）：整段按行内文本参与省略号截断 */
+.sc-title .anticon {
+  vertical-align: -0.125em;
+}
+
 .sc-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
@@ -780,25 +817,6 @@ const { run } = usePagination(queryData, {
  display: none;
 }

-.sc-card-more {
-  padding: 0 12px 8px 12px;
-  text-align: right;
-  line-height: 1.4;
-}
-
-.sc-more-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  font-size: 12px;
-  color: #1677ff;
-  user-select: none;
-}
-
-.sc-more-btn:hover {
-  color: #4096ff;
-}
-
 .sc-empty {
  padding: 40px 0;
 }
@@ -9,7 +9,9 @@
                    <button class="ftc-zoom-btn" title="缩小" @click="zoomBy(-ZOOM_STEP)">－</button>
                    <button class="ftc-zoom-btn" title="适应画布" @click="fitGraph">⤢</button>
                    <button class="ftc-zoom-btn" :title="dirTitle" @click="toggleDirection">{{ layoutDir === "h" ? "⇄" : "⇅" }}</button>
+                    <button v-if="focusedPersonId" class="ftc-zoom-btn ftc-zoom-btn--focus" title="退出聚焦" @click="resetFocus">⨯</button>
                </div>
+                <div v-if="focusedPersonId" class="ftc-focus-hint">已聚焦：{{ focusedLabel }}（仅分支末端的卡片可双击切换，再次双击同一卡片退出）</div>
            </div>
            <a-empty v-else-if="!loading" :description="loadError ? `无法展示：${loadError}` : '暂无全族数据'" />
       
@@ -114,8 +116,10 @@ const renderCard = (d: any) => {
        ? `<div class="ftc-tag" style="color:#13c2c2; background:#13c2c21a;">${nd.expanded ? "点击折叠" : "点击展开"}</div>`
        : "";
    const clickable = nd.hasChildren ? "ftc-clickable" : "";
+    // 只有「每个分支的最后节点」可以双击聚焦，这里给出可双击的提示（是否响应由双击处理器统一把关）
+    const focusHint = nd.isBranchEnd ? ' title="双击：以该成员为中心查看"' : "";
    return `
-        <div class="ftc-card ${clickable}" style="border-top: 3px solid ${theme};">
+        <div class="ftc-card ${clickable}"${focusHint} style="border-top: 3px solid ${theme};">
            <div class="ftc-main">
                <div class="ftc-avatar-wrap" style="border-color:${theme};">
                    <span class="ftc-avatar-ph" style="color:${avatarColor};">${USER_ICON_SVG}</span>${avatar}
@@ -399,6 +403,255 @@ const buildHorizontalData = () => {
    return { nodes, edges };
 };

+/**
+ * 构建纵向"聚焦"布局图数据（双击卡片进入）。
+ *
+ * 设计（始终按"行 = 世代"摆放，任意两行的占用互不重叠）：
+ *  - 中心竖线（x = 0）：从始祖（根）一路到双击的人，直系父子全部对齐在这条竖线上，
+ *    父子之间就是一条竖直短线，最直观、也最不会"看起来断开"
+ *  - 中心竖线两侧：每一代"非直系"的子女（本人的兄弟姐妹、叔伯姑姨等）紧贴中心竖线左右交替排开，
+ *    每人只放本人 + 配偶，不再向下展开。于是每一行只占一条窄带：既不会与中心竖线、
+ *    其他世代、双击人的后代相互压盖，整棵树也不会被撑得又宽又散
+ *  - 双击人的全部后代：居中排在中心竖线正下方，按与纵向布局相同的"槽位"算法完整展开
+ *  - 布局结束后返回内容包围盒，由渲染层缩放到刚好装下、并把双击的卡片摆到视口正中
+ * 仅改变排列方式，卡片内容与样式不变。
+ */
+const buildFocusedVerticalData = (focusId: string) => {
+    const nodes: any[] = [];
+    const edges: any[] = [];
+    const placed = new Set<string>();
+
+    if (!focusId || !personMap.has(focusId)) return { nodes, edges, bounds: null };
+
+    const CARD_WIDTH = 220;
+    const CARD_HEIGHT = 120;
+    const SPOUSE_GAP = 24; // 配偶紧贴本人
+    const H_GAP = 40; // 相邻子树水平间隔
+    const AXIS_GAP = 80; // 中心竖线与侧支之间的间隔
+    const Y_STEP = CARD_HEIGHT + 40;
+
+    const personNodeId = (pid: string) => "n-" + pid;
+    const spouseNodeId = (pid: string, i: number) => "s-" + pid + "-" + i;
+
+    const primaryChildrenOf = (pid: string) =>
+        (childrenOf.get(pid) ?? []).filter((c: any) => primaryParentOf(c.id) === pid);
+
+    const spousesOfPerson = (pid: string) =>
+        [...(spousesOf.get(pid) ?? [])].sort((a: any, b: any) => (a.orderby ?? 0) - (b.orderby ?? 0));
+
+    /** 一张卡片 + 右侧配偶占据的总宽度（配偶恒在本人右侧依次紧贴） */
+    const coupleWidth = (pid: string) => CARD_WIDTH + spousesOfPerson(pid).length * (SPOUSE_GAP + CARD_WIDTH);
+
+    /** 在 (x, y) 处创建本人卡片（已创建则跳过），返回节点 id */
+    const createPersonNode = (pid: string, x: number, y: number, isFocusCard: boolean): string => {
+        const nodeId = personNodeId(pid);
+        if (placed.has(pid)) return nodeId;
+        const info = personMap.get(pid) ?? {};
+        nodes.push({
+            id: nodeId,
+            style: { x, y },
+            data: {
+                kind: isFocusCard ? "self" : "member",
+                personId: pid,
+                tag: isFocusCard ? "聚焦" : "族员",
+                name: (info.Surname ?? "") + (info.GenealogyName ?? ""),
+                commonName: info.CommonName,
+                gender: info.Gender,
+                avatarUrl: info.AvatarUrl ?? "",
+                // 聚焦态的展开/切换由"双击卡片重新聚焦"承担，这里不再给出点了没反应的"点击展开"假入口
+                hasChildren: false,
+                expanded: false,
+                loaded: true,
+            },
+        });
+        placed.add(pid);
+        return nodeId;
+    };
+
+    /**
+     * 把配偶作为简单卡片贴在本人右侧同一行（不展开配偶自己的后代，
+     * 避免侧支与中心竖线互相压盖）。返回整行最右边缘。
+     */
+    const placedSpouseIds = new Set<string>();
+    const placeSpouses = (pid: string, personNodeIdRef: string, personX: number, personY: number): number => {
+        let edge = personX + CARD_WIDTH / 2;
+        spousesOfPerson(pid).forEach((sp: any, i: number) => {
+            const nodeId = spouseNodeId(pid, i);
+            if (placedSpouseIds.has(nodeId)) return;
+            placedSpouseIds.add(nodeId);
+            const x = edge + SPOUSE_GAP + CARD_WIDTH / 2;
+            const info = personMap.get(sp.id) ?? {};
+            nodes.push({
+                id: nodeId,
+                style: { x, y: personY },
+                data: {
+                    kind: "spouse",
+                    personId: sp.id,
+                    tag: "配偶",
+                    name: sp.name ?? (info.Surname ?? "") + (info.GenealogyName ?? ""),
+                    commonName: sp.commonName ?? info.CommonName,
+                    gender: sp.gender ?? info.Gender,
+                    avatarUrl: info.AvatarUrl ?? "",
+                    hasChildren: false,
+                    expanded: false,
+                    loaded: true,
+                },
+            });
+            edges.push({ source: personNodeIdRef, target: nodeId, data: { kind: "spouse" } });
+            edge = x + CARD_WIDTH / 2;
+        });
+        return edge;
+    };
+
+    /**
+     * 父 → 子连线：父卡底部中心 → 两行之间的横向干线 → 子卡顶部中心。
+     * 父子同在中心竖线时两个折点重合，等价于一条竖直短线；
+     * 始终给满两个折点，和纵向布局里已经在用的写法完全一致（空数组会让 G6 走另一条端点推算分支）。
+     */
+    const parentEdge = (parentNodeId: string, childNodeId: string, parentX: number, childX: number, childRow: number) => {
+        const railY = (childRow - 0.5) * Y_STEP;
+        edges.push({
+            source: parentNodeId,
+            target: childNodeId,
+            data: { kind: "parent", points: [[parentX, railY], [childX, railY]] },
+        });
+    };
+
+    /**
+     * 槽位宽度：本人 + 同行配偶 与 孩子那一整行 取较大者（与纵向布局同一套算法）。
+     * 孩子行一定居中排在本槽位内，所以整棵子树天然不会互相压盖。
+     */
+    const slotWidth = (pid: string, depth = 0): number => {
+        if (depth > 60) return CARD_WIDTH;
+        const kids = primaryChildrenOf(pid);
+        const self = coupleWidth(pid);
+        if (!kids.length) return self;
+        const kidsWidth =
+            kids.reduce((a: number, c: any) => a + slotWidth(c.id, depth + 1), 0) + H_GAP * (kids.length - 1);
+        return Math.max(self, kidsWidth);
+    };
+
+    /** 以"槽位左上角"为基准，完整展开一棵子树（本人 + 右侧配偶 + 全部后代） */
+    const placeExpanded = (
+        pid: string,
+        row: number,
+        left: number,
+        parentNodeId: string | null,
+        parentX: number,
+        depth = 0
+    ) => {
+        const width = slotWidth(pid, depth);
+        const selfX = left + CARD_WIDTH / 2;
+        const nodeId = createPersonNode(pid, selfX, row * Y_STEP, false);
+        placeSpouses(pid, nodeId, selfX, row * Y_STEP);
+        if (parentNodeId) parentEdge(parentNodeId, nodeId, parentX, selfX, row);
+        if (depth > 60) return;
+
+        const kids = primaryChildrenOf(pid);
+        if (!kids.length) return;
+        const kidsWidth =
+            kids.reduce((a: number, c: any) => a + slotWidth(c.id, depth + 1), 0) + H_GAP * (kids.length - 1);
+        let cx = left + (width - kidsWidth) / 2;
+        kids.forEach((c: any) => {
+            placeExpanded(c.id, row + 1, cx, nodeId, selfX, depth + 1);
+            cx += slotWidth(c.id, depth + 1) + H_GAP;
+        });
+    };
+
+    // 1) 中心竖线：从双击的人沿主亲一路上溯再翻转 → 始祖在最上面，双击的人在竖线最下方
+    const chain: string[] = [];
+    {
+        const seen = new Set<string>();
+        let cur: string = focusId;
+        while (cur && !seen.has(cur)) {
+            seen.add(cur);
+            chain.push(cur);
+            cur = primaryParentOf(cur);
+        }
+        chain.reverse();
+    }
+    const focusRow = chain.length - 1;
+
+    // 2) 中心竖线：直系父子全部对齐在 x = 0，父子之间就是一条竖直短线
+    let axisRight = CARD_WIDTH / 2;
+    let prevSpineNodeId: string | null = null;
+    chain.forEach((pid, r) => {
+        const nodeId = createPersonNode(pid, 0, r * Y_STEP, r === focusRow);
+        axisRight = Math.max(axisRight, placeSpouses(pid, nodeId, 0, r * Y_STEP));
+        if (prevSpineNodeId) parentEdge(prevSpineNodeId, nodeId, 0, 0, r);
+        prevSpineNodeId = nodeId;
+    });
+
+    // 3) 每一代「非直系」的子女（本人的兄弟姐妹、叔伯姑姨等）：紧贴中心竖线左右交替排开，
+    //    每人只放本人 + 配偶，不向下展开。于是每一行只占一条窄带，彼此不会压盖，
+    //    中心竖线也始终清晰；想看某位旁支的后代，双击他重新聚焦即可。
+    //    左侧从卡片左边缘起算（竖线左边只有配偶之外的空位），右侧从整行最右边缘起算。
+    const sideRight = axisRight + AXIS_GAP;
+    const sideLeft = -(CARD_WIDTH / 2 + AXIS_GAP);
+    for (let r = 0; r < chain.length - 1; r++) {
+        const parentPid = chain[r];
+        const downPid = chain[r + 1];
+        const sideKids = primaryChildrenOf(parentPid).filter((c: any) => c.id !== downPid);
+        if (sideKids.length === 0) continue;
+
+        const parentNodeId = personNodeId(parentPid);
+        const childRow = r + 1;
+        const rightKids: any[] = [];
+        const leftKids: any[] = [];
+        // 兄弟按顺序交替分到两侧，先从右侧开始（离中心最近的排在最前）
+        sideKids.forEach((c: any, i: number) => (i % 2 === 0 ? rightKids : leftKids).push(c));
+
+        let edge = sideRight;
+        rightKids.forEach((c: any) => {
+            const selfX = edge + CARD_WIDTH / 2;
+            const nodeId = createPersonNode(c.id, selfX, childRow * Y_STEP, false);
+            parentEdge(parentNodeId, nodeId, 0, selfX, childRow);
+            edge = Math.max(placeSpouses(c.id, nodeId, selfX, childRow * Y_STEP), selfX + CARD_WIDTH / 2) + H_GAP;
+        });
+
+        edge = sideLeft;
+        leftKids.forEach((c: any) => {
+            const selfX = edge - coupleWidth(c.id) + CARD_WIDTH / 2;
+            const nodeId = createPersonNode(c.id, selfX, childRow * Y_STEP, false);
+            parentEdge(parentNodeId, nodeId, 0, selfX, childRow);
+            placeSpouses(c.id, nodeId, selfX, childRow * Y_STEP);
+            edge = selfX - CARD_WIDTH / 2 - H_GAP;
+        });
+    }
+
+    // 4) 双击人的全部后代：居中排在中心竖线正下方，完整展开
+    const focusKids = primaryChildrenOf(focusId);
+    if (focusKids.length > 0) {
+        const focusNodeId = personNodeId(focusId);
+        const widths = focusKids.map((c: any) => slotWidth(c.id));
+        const total = widths.reduce((a: number, w: number) => a + w, 0) + H_GAP * (focusKids.length - 1);
+        let cx = -total / 2;
+        focusKids.forEach((c: any, i: number) => {
+            placeExpanded(c.id, focusRow + 1, cx, focusNodeId, 0);
+            cx += widths[i] + H_GAP;
+        });
+    }
+
+    // 5) 内容包围盒：交给渲染层"缩放到刚好装下 + 把双击的卡片摆到视口正中"。
+    //    不要再往图里塞占位节点做左右配平 —— G6 取值是 options.node.type || datum.type，
+    //    图级 node.type 为真值时 datum 上的 type 会被短路，占位会被当成 html 卡片原样渲染出来，
+    //    既凭空多出一张没有任何连线的卡片，又把包围盒撑歪、导致另一侧被裁掉像"连了断线"。
+    let minX = Infinity;
+    let maxX = -Infinity;
+    let minY = Infinity;
+    let maxY = -Infinity;
+    nodes.forEach((n: any) => {
+        const x = n.style.x as number;
+        const y = n.style.y as number;
+        minX = Math.min(minX, x - CARD_WIDTH / 2);
+        maxX = Math.max(maxX, x + CARD_WIDTH / 2);
+        minY = Math.min(minY, y - CARD_HEIGHT / 2);
+        maxY = Math.max(maxY, y + CARD_HEIGHT / 2);
+    });
+
+    return { nodes, edges, bounds: nodes.length ? { minX, maxX, minY, maxY } : null };
+};
+
 /**
 * 构建纵向布局图数据：本人与配偶同行并排，孩子排在下一行并居中于各自父节点。
 * 仅改变排列方式，卡片内容与样式不变。
@@ -609,15 +862,55 @@ const buildVerticalData = () => {
 /** 布局方向：h=横向（深度向右），v=纵向（深度向下） */
 const layoutDir = ref<"h" | "v">("h");

-/** 按当前方向构建图数据 */
-const buildGraphData = () => (layoutDir.value === "v" ? buildVerticalData() : buildHorizontalData());
+/** 双击卡片后聚焦到该成员；非空时使用聚焦布局。聚焦模式仅在纵向有效 */
+const focusedPersonId = ref<string>("");
+
+/** 按当前方向构建图数据（纵向 + 已聚焦 → 走聚焦布局） */
+const buildGraphData = () => {
+    if (layoutDir.value === "v" && focusedPersonId.value && personMap.has(focusedPersonId.value)) {
+        return buildFocusedVerticalData(focusedPersonId.value);
+    }
+    return layoutDir.value === "v" ? buildVerticalData() : buildHorizontalData();
+};
+
+/** 聚焦 / 取消聚焦；非空时若当前是横向，自动切到纵向 */
+const setFocus = (pid: string) => {
+    if (focusedPersonId.value === pid) {
+        focusedPersonId.value = "";
+    } else {
+        focusedPersonId.value = pid;
+        if (layoutDir.value !== "v") layoutDir.value = "v";
+    }
+    initGraph();
+};
+
+/** 显式退出聚焦 */
+const resetFocus = () => {
+    if (!focusedPersonId.value) return;
+    focusedPersonId.value = "";
+    initGraph();
+};
+
+/** 聚焦人姓名（用于顶部提示） */
+const focusedLabel = computed(() => {
+    const pid = focusedPersonId.value;
+    if (!pid) return "";
+    const info = personMap.get(pid);
+    if (!info) return pid;
+    return (info.Surname ?? "") + (info.GenealogyName ?? "");
+});

 /** 方向按钮提示（按钮上的箭头表示当前方向） */
 const dirTitle = computed(() => (layoutDir.value === "h" ? "当前横向排列，点击切换为纵向" : "当前纵向排列，点击切换为横向"));

-/** 横向 / 纵向排列切换 */
+/** 横向 / 纵向排列切换：聚焦模式仅在纵向有效，切到横向时清掉 */
 const toggleDirection = () => {
-    layoutDir.value = layoutDir.value === "h" ? "v" : "h";
+    if (layoutDir.value === "v") {
+        layoutDir.value = "h";
+    } else {
+        layoutDir.value = "v";
+    }
+    if (layoutDir.value === "h" && focusedPersonId.value) focusedPersonId.value = "";
    initGraph();
 };

@@ -627,19 +920,60 @@ let graph: any = null;
 /** 卡片最小显示比例：世代过多时 fitView 会把整图缩得很小，卡片将看不清，低于该比例时放大 */
 const MIN_ZOOM = 0.4;

+/** 画布允许的最小比例：聚焦时需要缩得比 MIN_ZOOM 更小才能把整幅图放进视口，否则会被裁掉像连线断了 */
+const GRAPH_MIN_ZOOM = 0.05;
+
 /** 缩放按钮单次增量 */
 const ZOOM_STEP = 0.1;

+/** 聚焦布局的内容包围盒，供"适应画布"按钮复用 */
+let focusBounds: { minX: number; maxX: number; minY: number; maxY: number } | null = null;
+
+/**
+ * 当前图中「分支末端」的卡片：节点 id -> 该卡片代表的人员 id。
+ * 判定标准是"当前图上没有任何向下连线"，也就是每个分支的最后节点；
+ * 配偶之间是横向连线、不算子节点，计算时必须排除，否则已婚者会被误判成非末端。
+ * 只有这些卡片允许双击聚焦。
+ */
+let branchEndCards = new Map<string, string>();
+
+/** 双击 / 双击识别时间窗（毫秒）。G6 在触屏上不发 node:dblclick，改用两次 click 之间的间隔识别 */
+const DBLCLICK_MS = 300;
+/** 节点最近一次单击时间戳（毫秒），用于在 node:click 里识别"双击/双击" */
+let lastClickByNode = new Map<string, number>();
+
 /** 单击按钮放大/缩小一点点（按增量叠加并限制在 zoomRange 内） */
 const zoomBy = (delta: number) => {
    if (!graph) return;
    const next = graph.getZoom() + delta;
-    graph.zoomTo(Math.min(Math.max(next, MIN_ZOOM), 10));
+    graph.zoomTo(Math.min(Math.max(next, GRAPH_MIN_ZOOM), 10));
+};
+
+/**
+ * 聚焦态的视口：先"缩放到整幅图刚好装下"，再把双击的卡片平移到视口正中。
+ * 不依赖 autoFit —— autoFit / fitCenter 只保证整幅图的包围盒居中，一旦某一侧更宽，
+ * 另一侧就会被挤出视口，看起来既像"双击的卡片没居中"，又像有一侧的父子连线"掉了"。
+ */
+const focusViewport = async () => {
+    if (!graph || !focusBounds || !focusedPersonId.value) return;
+    const size = typeof graph.getSize === "function" ? graph.getSize() : [0, 0];
+    const [vw, vh] = Array.isArray(size) ? size : [0, 0];
+    const MARGIN = 40;
+    const bw = Math.max(focusBounds.maxX - focusBounds.minX, 1);
+    const bh = Math.max(focusBounds.maxY - focusBounds.minY, 1);
+    const fit = Math.min((vw - MARGIN * 2) / bw, (vh - MARGIN * 2) / bh, 1);
+    const scale = Number.isFinite(fit) && fit > 0 ? Math.max(fit, GRAPH_MIN_ZOOM) : 1;
+    await graph.zoomTo(scale);
+    await graph.focusElement("n-" + focusedPersonId.value);
 };

 /** 还原为适配整个画布（缩到最小比例以下的需重新居中，否则整图可能落在视口之外） */
 const fitGraph = async () => {
    if (!graph) return;
+    if (focusedPersonId.value && focusBounds) {
+        await focusViewport();
+        return;
+    }
    await graph.fitView();
    if (graph.getZoom() < MIN_ZOOM) {
        await graph.zoomTo(MIN_ZOOM);
@@ -654,20 +988,44 @@ const destroyGraph = () => {
    }
 };

+/** 并发调用 initGraph 时（例如单击展开 + 双击聚焦接连触发），只保留最新一次的结果，避免错位 */
+let initToken = 0;
 const initGraph = async () => {
+    const token = ++initToken;
    destroyGraph();
    await nextTick();
    await new Promise((r) => requestAnimationFrame(r));
-    if (!containerRef.value) return;
+    if (token !== initToken || !containerRef.value) return;

-    const { nodes, edges } = buildGraphData();
-    if (!nodes.length) return;
+    const graphData: any = buildGraphData();
+    const nodes: any[] = graphData.nodes ?? [];
+    const edges: any[] = graphData.edges ?? [];
+    focusBounds = graphData.bounds ?? null;
+
+    // 标出「每个分支的最后节点」：当前图上没有任何向下连线（子边）的人员卡片。
+    // 配偶之间是横向连线，不算子节点，必须排除，否则已婚者会被误判成非末端。
+    const nodeIdsWithChild = new Set<string>();
+    edges.forEach((e: any) => {
+        if (e?.data?.kind === "spouse") return;
+        nodeIdsWithChild.add(e.source);
+    });
+    branchEndCards = new Map<string, string>();
+    lastClickByNode.clear();
+    nodes.forEach((n: any) => {
+        const nd = n?.data ?? {};
+        if (nd.kind === "spouse" || !nd.personId || nodeIdsWithChild.has(n.id)) return;
+        branchEndCards.set(n.id, nd.personId);
+        // 供卡片渲染出"可双击"的提示（是否真的响应仍由双击处理器统一把关）
+        nd.isBranchEnd = true;
+    });
+
+    if (token !== initToken || !nodes.length) return;

    graph = new Graph({
        container: containerRef.value,
        // 内容小于视口时不缩放（卡片保持原始大小），内容溢出时才适配
        autoFit: { type: "view", options: { when: "overflow", direction: "both" } },
-        zoomRange: [MIN_ZOOM, 10],
+        zoomRange: [GRAPH_MIN_ZOOM, 10],
        data: { nodes, edges },
        node: {
            type: "html",
@@ -700,15 +1058,42 @@ const initGraph = async () => {
    });
    graph.on("node:click", (event: any) => {
        const id = event.target?.id ?? event.item?.getID?.();
-        if (typeof id !== "string" || !id.startsWith("n-")) return;
+        if (typeof id !== "string") return;
+        const now = Date.now();
+        const last = lastClickByNode.get(id) ?? 0;
+        lastClickByNode.set(id, now);
+
+        // 300ms 内同一节点再次点击 → 触发聚焦（取代原不可靠的 node:dblclick，手机触屏不发 dblclick）
+        if (now - last <= DBLCLICK_MS) {
+            // 重置时间戳，防止三连击再次误触发
+            lastClickByNode.set(id, 0);
+            // 只允许「每个分支的最后节点」双击聚焦；已聚焦的那张卡片可双击退出聚焦
+            const personId =
+                branchEndCards.get(id) ??
+                (id === "n-" + focusedPersonId.value ? focusedPersonId.value : "");
+            if (personId) setFocus(personId);
+            return;
+        }
+
+        // 单击：聚焦态不再切换展开态；非聚焦态且有孩子时延后展开，给双击检测留窗口（避免双击时先展开再聚焦的闪烁）
+        if (focusedPersonId.value) return;
+        if (!id.startsWith("n-")) return;
        const personId = id.slice(2);
        const children = childrenOf.get(personId) ?? [];
        if (children.length === 0) return;
-        toggleExpanded(personId);
+        setTimeout(() => {
+            // 期间已被新的点击覆盖（即被识别为双击）→ 不再展开
+            if ((lastClickByNode.get(id) ?? 0) !== now) return;
+            toggleExpanded(personId);
+        }, DBLCLICK_MS);
    });
    await graph.render();
-    // 世代过多导致 fitView 缩得太小时，放大到最小显示比例并重新居中，保证卡片可见可读
-    if (graph.getZoom() < MIN_ZOOM) {
+    if (token !== initToken) return;
+    if (focusedPersonId.value && focusBounds) {
+        // 聚焦态：整幅图缩放到刚好装下，并把双击的卡片摆到视口正中
+        await focusViewport();
+    } else if (graph.getZoom() < MIN_ZOOM) {
+        // 世代过多导致 fitView 缩得太小时，放大到最小显示比例并重新居中，保证卡片可见可读
        await graph.zoomTo(MIN_ZOOM);
        if (typeof graph.fitCenter === "function") await graph.fitCenter();
    }
@@ -772,12 +1157,22 @@ const loadTree = async () => {
 watch(visibleModel, async (v) => {
    if (v) {
        data.value = null;
+        focusedPersonId.value = ""; // 重新打开时清掉上次的聚焦
        await loadTree();
    } else {
+        focusedPersonId.value = "";
        destroyGraph();
    }
 });

+// treeId 变化时也清掉聚焦，避免指向已不在当前数据中的 personId
+watch(
+    () => props.treeId,
+    () => {
+        focusedPersonId.value = "";
+    }
+);
+
 onBeforeUnmount(() => destroyGraph());

 const onCancel = () => {
@@ -835,6 +1230,32 @@ const onCancel = () => {
    border-color: #1890ff;
 }

+/* 退出聚焦按钮：显眼一些 */
+.ftc-zoom-btn--focus {
+    color: #fa541c;
+    border-color: #fa541c;
+}
+.ftc-zoom-btn--focus:hover {
+    color: #fff;
+    background: #fa541c;
+    border-color: #fa541c;
+}
+
+/* 聚焦状态提示 */
+.ftc-focus-hint {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    z-index: 20;
+    padding: 4px 10px;
+    background: rgba(250, 84, 28, 0.08);
+    color: #fa541c;
+    border: 1px solid rgba(250, 84, 28, 0.3);
+    border-radius: 4px;
+    font-size: 12px;
+    pointer-events: none;
+}
+
 /* G6 HTML 节点卡片样式（与谱系图一致，使用独立前缀避免污染全局） */
 .ftc-card {
    box-sizing: border-box;