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;
@@ -1,4 +1,6 @@
 import "@/styles/main.css";
+import "@/styles/ft-shell.less";
+import "@/styles/ft-mobile.less";
 import "animate.css";
 import "animate.css/animate.compat.css";

@@ -0,0 +1,74 @@
+/* ==================== Operation 页面：桌面/通用外壳（与 FamilyTreeOperation 保持一致） ====================
+ * 使用方式：模板里写
+ *   <div class="page-container"> ... <div class="page-header"> ... </div>
+ *     <div class="page-main ft-page" :class="{ 'ft-readonly': !isEdit }" :style="{ height: resultH }">
+ *       ... <div class="ft-card"> ... </div> ...
+ *     </div>
+ *     <div class="page-footer"> ... </div>
+ *   </div>
+ * 仅放置“非 ft-*”的容器层规则；卡片、栅格、列表、详情、控件外观等由 ft-mobile.less 提供。
+ */
+
+.page-container {
+  margin-right: 0;
+}
+
+/* 顶部工具栏 */
+.page-header {
+  padding-top: 4px;
+  padding-bottom: 8px;
+  padding-right: 12px;
+  padding-left: 0;
+  border-bottom: 1px solid silver;
+  margin-left: 6px;
+}
+
+/* 顶部搜索框：左侧贴边、无圆角 */
+.page-header .ant-input-search .ant-input {
+  border-radius: 0;
+  border-left: 0;
+  text-align: left;
+}
+
+/* 主内容区（不带 ft-page 时是桌面布局；带 ft-page 时由 ft-mobile.less 提供 12/12/96/12 的移动端内边距） */
+.page-main {
+  overflow-y: auto;
+  padding-top: 24px;
+  padding-bottom: 4px;
+  padding-right: 32px;
+  padding-left: 12px;
+}
+
+/* 底部固定操作栏 */
+.page-footer {
+  z-index: 999;
+  padding-left: 8px;
+  padding-right: 18px;
+  padding-top: 8px;
+  width: 100%;
+  position: fixed;
+  bottom: 8px;
+  border-top: 1px solid silver;
+}
+
+/* 表格行高亮：成员/子级选中等场景，与 FamilyTreeOperation 保持一致 */
+.son-row-selected td,
+.parent-row-selected td {
+  border-top: 2px solid #1677ff !important;
+  border-bottom: 2px solid #1677ff !important;
+}
+
+.son-row-selected td:first-child,
+.parent-row-selected td:first-child {
+  border-left: 2px solid #1677ff !important;
+}
+
+.son-row-selected td:last-child,
+.parent-row-selected td:last-child {
+  border-right: 2px solid #1677ff !important;
+}
+
+.son-row-selected > td,
+.parent-row-selected > td {
+  background-color: #e6f4ff !important;
+}
@@ -1,24 +1,23 @@
 <template>
-    <search @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
+    <searchCard @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
        :is-modal="isModal" :loading="loading" :pagination="result" :rowSelectionType="selectionType"
        @on-select-change="onSelectChange">
-        <template #control>
-
+        <template #cardTitle="{ record }">
+          {{ record.FamilyLocalName }}
+          <span style="margin-left: 6px"><FolderOutlined style="margin-right: 2px" />{{ getSharePath(record) }}</span>
        </template>
        <template #bodyCell="{ column, record, index }">
-
+            <template v-if="column.dataIndex === FamilyFolderFavoriteViewEntity.TOP_FOLDER_LOCAL_NAME">
+              <FolderOutlined style="margin-right: 2px" /><span>{{ getSharePath(record) }}</span>
+            </template>
        </template>
-        <template #footer>
-
-        </template>
-    </search>
+    </searchCard>
 </template>
 <script setup lang="ts">
 import { reactive, inject, defineComponent, onMounted, ref, unref, provide, h } from "vue";
 import { BindOption } from "@/data/custom/bindOption";
 import { SelectOption } from "@/data/auto/selectOption";
-import search from "@/components/basic/Search.vue";
-import { DeleteOutlined, EditOutlined, FileAddOutlined, FileTextOutlined } from "@ant-design/icons-vue";
+import searchCard from "@/components/basic/SearchCard.vue";

 import { FamilyGroupResultData } from "@/data/auto/familyGroupResultData";
 import { FamilyFolderFavoriteViewEntity } from "@/data/auto/familyFolderFavoriteViewEntity";
@@ -41,6 +40,14 @@ import { title } from "process";
 import { enquiryMethodKey, searchCriteriaManagerKey, masterOperationToEnquiryMethodKey, MasterOperationToEnquiryModelOption, layoutProviderMethodKey } from "@/injections";
 import { useOrderedChildren } from "@/hooks/use-ordered-children";
 import { SearchCriteriaContext } from "@/injections";
+import {
+  HomeOutlined,
+  ArrowLeftOutlined,
+  ReloadOutlined,
+  LaptopOutlined,
+  FolderOutlined,
+  SearchOutlined,
+} from "@ant-design/icons-vue";
 //page from-----------------------------------------------------------------------------------------------------------------------------------
 //================inject================
 //报表名称
@@ -64,6 +71,15 @@ const canCreate = ref<boolean>(false);
 const route = useRoute();
 const router = useRouter();

+//共享路径展示：上级目录与当前目录同名时只显示一次，避免出现"ddd>ddd"
+const getSharePath = (record: any) => {
+    const top = record.TopFolderLocalName;
+    const folder = record.FolderLocalName;
+    if (!folder || folder === top) return top || '-';
+    if (!top) return folder;
+    return `${top}>${folder}`;
+};
+
 const columns = ref([
    {
        title: '序号',
@@ -899,43 +899,3 @@ const handleSelectUser = async () => {
  }
 };
 </script>
-<style lang="less">
-/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
-@import "../../styles/ft-mobile.less";
-
-.page-container {
-  margin-right: 0px;
-}
-
-.page-header {
-  padding-top: 4px;
-  padding-bottom: 8px;
-  padding-right: 12px;
-  border-bottom: 1px solid silver;
-}
-
-.page-header .ant-input-search .ant-input {
-  border-radius: 0;
-  border-left: 0;
-  text-align: left;
-}
-
-.page-main {
-  overflow-y: auto;
-  padding-top: 24px;
-  padding-bottom: 4px;
-  padding-right: 32px;
-  padding-left: 12px;
-}
-
-.page-footer {
-  z-index: 999;
-  padding-left: 8px;
-  padding-right: 18px;
-  padding-top: 8px;
-  width: 100%;
-  position: fixed;
-  bottom: 8px;
-  border-top: 1px solid silver;
-}
-</style>
@@ -38,84 +38,84 @@
          </a-col>
        </a-row>
      </div>
-      <div class="page-main" :class="{ 'fp-readonly': !isEdit }" :style="{ height: resultH }">
+      <div class="page-main ft-page" :class="{ 'ft-readonly': !isEdit }" :style="{ height: resultH }">
        <!-- 顶部：头像 / 姓名 / 编号 -->
-        <div class="fp-hero">
-          <FileUpload class="fp-hero-upload" accept="image/*" file-path="FamilyPersonAvatar"
+        <div class="ft-hero">
+          <FileUpload class="ft-hero-upload" accept="image/*" file-path="FamilyPersonAvatar"
            :disabled="!isEdit || avatarUploading" @start="onAvatarUploadStart" @progress="onAvatarUploadProgress"
            @success="onAvatarUploadSuccess" @error="onAvatarUploadError">
-            <div class="fp-hero-avatar-wrap" :class="{ 'is-editing': isEdit }">
-              <a-avatar class="fp-hero-avatar" :size="72" :src="avatarSrc">
+            <div class="ft-hero-avatar-wrap" :class="{ 'is-editing': isEdit }">
+              <a-avatar class="ft-hero-avatar" :size="72" :src="avatarSrc">
                <template #icon>
                  <UserOutlined />
                </template>
              </a-avatar>
-              <div v-if="isEdit" class="fp-hero-avatar-mask">
+              <div v-if="isEdit" class="ft-hero-avatar-mask">
                <span v-if="avatarUploading">{{ avatarUploadPercent }}%</span>
                <CameraOutlined v-else />
              </div>
            </div>
          </FileUpload>
-          <div class="fp-hero-main">
-            <div class="fp-hero-name">
+          <div class="ft-hero-main">
+            <div class="ft-hero-name">
              {{
                (data.FamilyPerson.Surname || "") +
                (data.FamilyPerson.GenealogyName || "") || "未填写姓名"
              }}
            </div>
-            <div class="fp-hero-meta">
-              <span class="fp-chip">编号 {{ data.FamilyPerson.PersonId || "-" }}</span>
+            <div class="ft-hero-meta">
+              <span class="ft-chip">编号 {{ data.FamilyPerson.PersonId || "-" }}</span>
            </div>
-            <div class="fp-hero-meta">
-              <span class="fp-chip">族谱编号 {{ data.FamilyPerson.TreeId || "-" }}</span>
+            <div class="ft-hero-meta">
+              <span class="ft-chip">族谱编号 {{ data.FamilyPerson.TreeId || "-" }}</span>
            </div>
          </div>
          <a-button v-if="
            isEdit &&
            (data.FamilyPerson.AvatarUrl || data.FamilyPerson.AvatarFilename)
-          " class="fp-hero-clear" type="text" size="small" @click.prevent="onClearAvatar">清除头像</a-button>
+          " class="ft-hero-clear" type="text" size="small" @click.prevent="onClearAvatar">清除头像</a-button>
        </div>
        <!-- 基本资料 -->
-        <div class="fp-card">
-          <div class="fp-card-title">基本资料</div>
-          <div class="fp-grid">
-            <div class="fp-field">
-              <div class="fp-label">姓氏<span class="fp-required">*</span></div>
+        <div class="ft-card">
+          <div class="ft-card-title">基本资料</div>
+          <div class="ft-grid">
+            <div class="ft-field">
+              <div class="ft-label">姓氏<span class="ft-required">*</span></div>
              <a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.Surname"
                placeholder="请输入姓氏" />
            </div>
-            <div class="fp-field">
-              <div class="fp-label">谱名<span class="fp-required">*</span></div>
+            <div class="ft-field">
+              <div class="ft-label">谱名<span class="ft-required">*</span></div>
              <a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.GenealogyName"
                placeholder="请输入谱名" />
            </div>
-            <div class="fp-field">
-              <div class="fp-label">常用名</div>
+            <div class="ft-field">
+              <div class="ft-label">常用名</div>
              <a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.CommonName"
                placeholder="请输入常用名" />
            </div>
-            <div class="fp-field">
-              <div class="fp-label">别名</div>
+            <div class="ft-field">
+              <div class="ft-label">别名</div>
              <a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.Alias"
                placeholder="请输入别名" />
            </div>
-            <div class="fp-field">
-              <div class="fp-label">字</div>
+            <div class="ft-field">
+              <div class="ft-label">字</div>
              <a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.Zi"
                placeholder="请输入字" />
            </div>
-            <div class="fp-field">
-              <div class="fp-label">号</div>
+            <div class="ft-field">
+              <div class="ft-label">号</div>
              <a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.Hao"
                placeholder="请输入号" />
            </div>
-            <div class="fp-field">
-              <div class="fp-label">行第</div>
+            <div class="ft-field">
+              <div class="ft-label">行第</div>
              <a-input size="large" :maxlength="32" :readonly="!isEdit" v-model:value="data.FamilyPerson.BirthOrder"
                placeholder="如：三" />
            </div>
-            <div class="fp-field">
-              <div class="fp-label">性别</div>
+            <div class="ft-field">
+              <div class="ft-label">性别</div>
              <a-select size="large" v-model:value="data.FamilyPerson.Gender" :disabled="!isEdit" style="width: 100%"
                placeholder="请选择性别" :options="genderSelectOptions">
              </a-select>
@@ -123,84 +123,84 @@
          </div>
        </div>
        <!-- 家庭与学业 -->
-        <div v-if="!readonlyBasicOnly" class="fp-card">
-          <div class="fp-card-title">家庭与学业</div>
-          <div class="fp-grid">
-            <div class="fp-field">
-              <div class="fp-label">婚姻</div>
+        <div v-if="!readonlyBasicOnly" class="ft-card">
+          <div class="ft-card-title">家庭与学业</div>
+          <div class="ft-grid">
+            <div class="ft-field">
+              <div class="ft-label">婚姻</div>
              <a-select size="large" v-model:value="data.FamilyPerson.MaritalStatus" :disabled="!isEdit"
                style="width: 100%" placeholder="请选择">
                <a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{ o.DisplayName }}</a-select-option>
              </a-select>
            </div>
-            <div class="fp-field">
-              <div class="fp-label">父亲姓名</div>
+            <div class="ft-field">
+              <div class="ft-label">父亲姓名</div>
              <a-input size="large" :maxlength="50" :readonly="!isEdit" v-model:value="data.FamilyPerson.FatherId"
                placeholder="请输入父亲姓名" />
            </div>
-            <div class="fp-field">
-              <div class="fp-label">母亲姓名</div>
+            <div class="ft-field">
+              <div class="ft-label">母亲姓名</div>
              <a-input size="large" :maxlength="100" :readonly="!isEdit" v-model:value="data.FamilyPerson.MotherName"
                placeholder="请输入母亲姓名" />
            </div>
-            <div class="fp-field">
-              <div class="fp-label">学校</div>
+            <div class="ft-field">
+              <div class="ft-label">学校</div>
              <a-input size="large" :maxlength="256" :readonly="!isEdit" v-model:value="data.FamilyPerson.School"
                placeholder="请输入毕业学校" />
            </div>
-            <div class="fp-field">
-              <div class="fp-label">专业</div>
+            <div class="ft-field">
+              <div class="ft-label">专业</div>
              <a-input size="large" :maxlength="256" :readonly="!isEdit" v-model:value="data.FamilyPerson.Major"
                placeholder="请输入所学专业" />
            </div>
-            <div class="fp-field">
-              <div class="fp-label">学历</div>
+            <div class="ft-field">
+              <div class="ft-label">学历</div>
              <a-input size="large" :maxlength="128" :readonly="!isEdit" v-model:value="data.FamilyPerson.Education"
                placeholder="请输入学历" />
            </div>
-            <div class="fp-field">
-              <div class="fp-label">毕业</div>
+            <div class="ft-field">
+              <div class="ft-label">毕业</div>
              <a-select size="large" v-model:value="data.FamilyPerson.GraduationStatus" :disabled="!isEdit"
                style="width: 100%" placeholder="请选择">
                <a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{ o.DisplayName }}</a-select-option>
              </a-select>
            </div>
-            <div class="fp-field">
-              <div class="fp-label">职务</div>
+            <div class="ft-field">
+              <div class="ft-label">职务</div>
              <a-input size="large" :maxlength="256" :readonly="!isEdit" v-model:value="data.FamilyPerson.Duty"
                placeholder="请输入职务" />
            </div>
          </div>
        </div>
        <!-- 任职与状态 -->
-        <div v-if="!readonlyBasicOnly" class="fp-card">
-          <div class="fp-card-title">任职与状态</div>
-          <div class="fp-grid">
-            <div class="fp-field">
-              <div class="fp-label">头衔</div>
+        <div v-if="!readonlyBasicOnly" class="ft-card">
+          <div class="ft-card-title">任职与状态</div>
+          <div class="ft-grid">
+            <div class="ft-field">
+              <div class="ft-label">头衔</div>
              <a-input size="large" :maxlength="256" :readonly="!isEdit" v-model:value="data.FamilyPerson.Title"
                placeholder="请输入头衔" />
            </div>
-            <div class="fp-field">
-              <div class="fp-label">公开</div>
+            <div class="ft-field">
+              <div class="ft-label">公开</div>
              <a-select size="large" v-model:value="data.FamilyPerson.Privacy" :disabled="!isEdit" style="width: 100%"
                placeholder="请选择">
                <a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{ o.DisplayName }}</a-select-option>
              </a-select>
            </div>
-            <div class="fp-field">
-              <div class="fp-label">状态</div>
+            <div class="ft-field">
+              <div class="ft-label">状态</div>
              <a-select size="large" v-model:value="data.FamilyPerson.LiveStatus" :disabled="!isEdit"
                style="width: 100%" placeholder="请选择">
                <a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{ o.DisplayName }}</a-select-option>
              </a-select>
            </div>
-            <div class="fp-field">
-              <div class="fp-label">绑定用户ID</div>
-              <div class="fp-inline">
-                <a-input class="fp-inline-main" size="large" :maxlength="50" :readonly="!isEdit"
+            <div class="ft-field">
+              <div class="ft-label">绑定用户ID</div>
+              <div class="ft-inline">
+                <a-input class="ft-inline-main" size="large" :maxlength="50" :readonly="!isEdit"
                  v-model:value="data.FamilyPerson.BindUserId" placeholder="请输入用户ID" />
-                <a-button class="fp-inline-btn" size="large" type="primary" ghost
+                <a-button class="ft-inline-btn" size="large" type="primary" ghost
                  :disabled="data.FamilyPerson.IsBindUser === 'Y'" @click.prevent="
                    data.FamilyPerson.IsBindUser =
                    data.FamilyPerson.IsBindUser === 'Y' ? 'N' : 'Y'
@@ -211,31 +211,31 @@
                </a-button>
              </div>
            </div>
-            <div class="fp-field">
-              <div class="fp-label">生于</div>
-              <div class="fp-inline">
-                <a-input class="fp-inline-main" size="large" :maxlength="128" :readonly="!isEdit"
+            <div class="ft-field">
+              <div class="ft-label">生于</div>
+              <div class="ft-inline">
+                <a-input class="ft-inline-main" size="large" :maxlength="128" :readonly="!isEdit"
                  v-model:value="data.FamilyPerson.BirthText" placeholder="如：乙丑年正月初一" />
-                <a-date-picker class="fp-inline-date" size="large" :disabled="!isEdit" v-model:value="birthDate"
+                <a-date-picker class="ft-inline-date" size="large" :disabled="!isEdit" v-model:value="birthDate"
                  placeholder="选择日期" />
              </div>
            </div>
-            <div class="fp-field">
-              <div class="fp-label">离世</div>
-              <div class="fp-inline">
-                <a-input class="fp-inline-main" size="large" :maxlength="128" :readonly="!isEdit"
+            <div class="ft-field">
+              <div class="ft-label">离世</div>
+              <div class="ft-inline">
+                <a-input class="ft-inline-main" size="large" :maxlength="128" :readonly="!isEdit"
                  v-model:value="data.FamilyPerson.DeathText" placeholder="如：戊辰年八月十五" />
-                <a-date-picker class="fp-inline-date" size="large" :disabled="!isEdit" v-model:value="deathDate"
+                <a-date-picker class="ft-inline-date" size="large" :disabled="!isEdit" v-model:value="deathDate"
                  placeholder="选择日期" />
              </div>
            </div>
          </div>
        </div>
        <!-- 生平简介 -->
-        <div v-if="!readonlyBasicOnly" class="fp-card">
-          <div class="fp-card-title">生平简介</div>
-          <div class="fp-field">
-            <div class="fp-label">简介</div>
+        <div v-if="!readonlyBasicOnly" class="ft-card">
+          <div class="ft-card-title">生平简介</div>
+          <div class="ft-field">
+            <div class="ft-label">简介</div>
            <a-textarea size="large" :auto-size="{ minRows: 4, maxRows: 8 }" :maxlength="3000" :readonly="!isEdit"
              v-model:value="data.FamilyPerson.Introduction" placeholder="请输入生平简介" />
          </div>
@@ -648,62 +648,26 @@ const handleSelect = async () => {
 };
 </script>
 <style lang="less" scoped>
-.page-container {
-  margin-right: 0px;
-}
-
-.page-header {
-  padding-top: 4px;
-  padding-bottom: 8px;
-  padding-right: 12px;
-  border-bottom: 1px solid silver;
-  margin-left: 6px;
-}
-
-.page-header :deep(.ant-input-search .ant-input) {
-  border-radius: 0;
-  border-left: 0;
-  text-align: left;
-}
-
-.page-main {
-  overflow-y: auto;
-  padding: 12px 12px 96px 12px;
-  -webkit-overflow-scrolling: touch;
-}
-
-/* ==================== 顶部信息卡 ==================== */
-.page-main .fp-hero {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 14px;
-  margin-bottom: 12px;
-  border: 1px solid #e8f1ff;
-  border-radius: 14px;
-  background: linear-gradient(135deg, #f2f8ff 0%, #ffffff 70%);
-  box-shadow: 0 2px 10px rgba(22, 119, 255, 0.06);
-}
-
-.page-main .fp-hero-avatar {
+/* ==================== 头像上传遮罩（FamilyPerson 独有） ==================== */
+.ft-hero-avatar {
  flex: 0 0 auto;
  border: 2px solid #fff;
  background: #1677ff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 }

-.page-main .fp-hero-upload {
+.ft-hero-upload {
  flex: 0 0 auto;
  cursor: pointer;
 }

-.page-main .fp-hero-avatar-wrap {
+.ft-hero-avatar-wrap {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
 }

-.page-main .fp-hero-avatar-mask {
+.ft-hero-avatar-mask {
  position: absolute;
  inset: 0;
  display: flex;
@@ -716,194 +680,20 @@ const handleSelect = async () => {
  transition: background 0.2s;
 }

-.page-main .fp-hero-avatar-wrap.is-editing:hover .fp-hero-avatar-mask {
+.ft-hero-avatar-wrap.is-editing:hover .ft-hero-avatar-mask {
  background: rgba(0, 0, 0, 0.55);
 }

-.page-main .fp-hero-main {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.page-main .fp-hero-name {
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.35;
-  color: #1f2329;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.page-main .fp-hero-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 6px;
-}
-
-.page-main .fp-chip {
-  display: inline-block;
-  padding: 1px 10px;
-  border-radius: 10px;
-  background: rgba(22, 119, 255, 0.08);
-  color: #1677ff;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.page-main .fp-hero-clear {
+/* 清除头像按钮 */
+.ft-hero-clear {
  flex: 0 0 auto;
  padding: 0 4px;
  color: #ff4d4f;
 }

-/* ==================== 分组卡片 ==================== */
-.page-main .fp-card {
-  padding: 12px 14px 14px;
-  margin-bottom: 12px;
-  border: 1px solid #eef0f4;
-  border-radius: 14px;
-  background: #fff;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
-}
-
-.page-main .fp-card-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding-bottom: 10px;
-  font-size: 14px;
-  font-weight: 600;
-  color: #1f2329;
-}
-
-.page-main .fp-card-title::before {
-  content: "";
-  width: 3px;
-  height: 14px;
-  border-radius: 2px;
-  background: #1677ff;
-}
-
-/* ============ 字段栅格：手机单列，宽屏自动多列 ============ */
-.page-main .fp-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 10px 16px;
-}
-
-@media (min-width: 576px) {
-  .page-main .fp-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (min-width: 1200px) {
-  .page-main .fp-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-.page-main .fp-field {
-  min-width: 0;
-}
-
-.page-main .fp-label {
-  margin-bottom: 4px;
-  font-size: 13px;
-  line-height: 20px;
-  color: #646a73;
-}
-
-.page-main .fp-required {
-  margin-left: 2px;
-  color: #ff4d4f;
-}
-
-.page-main .fp-inline {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.page-main .fp-inline .fp-inline-main {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.page-main .fp-inline .fp-inline-date {
+/* 日期框在 ft-inline 中限制最大宽度，避免两端日期横向撑爆 */
+.ft-inline .ft-inline-date {
  flex: 0 0 auto;
  max-width: 48%;
 }
-
-.page-main .fp-inline .fp-inline-btn {
-  flex: 0 0 auto;
-}
-
-/* ==================== 控件外观 ==================== */
-.page-main :deep(.ant-input),
-.page-main :deep(.ant-input-affix-wrapper),
-.page-main :deep(.ant-select-selector),
-.page-main :deep(.ant-picker),
-.page-main :deep(.ant-input-number) {
-  border-radius: 10px !important;
-}
-
-/* 查看态：弱化边框与底色，像纯文本一样易读 */
-.page-main.fp-readonly :deep(.ant-input),
-.page-main.fp-readonly :deep(textarea.ant-input),
-.page-main.fp-readonly :deep(.ant-input-affix-wrapper),
-.page-main.fp-readonly :deep(.ant-select-selector),
-.page-main.fp-readonly :deep(.ant-picker) {
-  border-color: #f0f1f3;
-  background: #fafbfc;
-  color: #1f2329;
-  box-shadow: none;
-}
-
-.page-main.fp-readonly :deep(.ant-input[readonly]),
-.page-main.fp-readonly :deep(.ant-input[disabled]) {
-  color: #1f2329;
-  cursor: default;
-}
-
-.page-main.fp-readonly :deep(.ant-select-disabled .ant-select-selector) {
-  color: #1f2329;
-}
-
-.page-main.fp-readonly :deep(.ant-select-disabled .ant-select-arrow),
-.page-main.fp-readonly :deep(.ant-picker-disabled .ant-picker-suffix) {
-  display: none;
-}
-
-/* ============ 底部操作栏（与 FamilyTreeOperation 保持一致） ============ */
-.page-footer {
-  z-index: 999;
-  padding-left: 8px;
-  padding-right: 18px;
-  padding-top: 8px;
-  width: 100%;
-  position: fixed;
-  bottom: 8px;
-  border-top: 1px solid silver;
-}
-
-/* ==================== 手机端 ==================== */
-@media (max-width: 575px) {
-  .page-main {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-
-  /* 16px 字号可避免 iOS 聚焦输入框时页面被自动放大 */
-  .page-main :deep(.ant-input),
-  .page-main :deep(.ant-input-affix-wrapper),
-  .page-main :deep(.ant-select-selector),
-  .page-main :deep(.ant-select-selection-item),
-  .page-main :deep(.ant-select-selection-placeholder),
-  .page-main :deep(.ant-picker) {
-    font-size: 16px;
-  }
-}
 </style>
@@ -1,37 +1,19 @@
 <template>
  <a-spin size="large" :spinning="loading">
-    <div class="page-container">
-      <div class="page-header">
-        <a-row :gutter="[16, 8]">
-          <a-col :lg="8" :sm="24">
-            <a-row :wrap="false">
-              <a-col flex="none">
-                <div style="padding: 0">
-                  <a-input flex="none" readonly value="族谱编号" class="site-input-split" style="
-                      width: 160px;
-                      border-radius: 0;
-                      border-top-left-radius: 5pt 5pt;
-                      border-bottom-left-radius: 5pt 5pt;
-                      pointer-events: none;
-                    " />
-                </div>
-              </a-col>
-              <a-col flex="auto">
-                <a-input-search :disabled="isEdit" v-model:value="treeId" flex="auto" @search="onModalSearch" />
-              </a-col>
-            </a-row>
-          </a-col>
-          <a-col :lg="12" :sm="24">
-            <a-space>
-              <a-button type="primary" :disabled="isEdit" :icon="h(FileSearchOutlined)"
-                @click.prevent="onSearch">查询</a-button>
-              <a-button type="primary" :disabled="isEdit" :icon="h(ClearOutlined)"
-                @click.prevent="onReset">重置</a-button>
-              <a-button type="primary" :disabled="isEdit" :icon="h(FileAddOutlined)"
-                @click.prevent="onCreate">新增</a-button>
-            </a-space>
-          </a-col>
-        </a-row>
+    <div class="page-container family-tree-op">
+      <div class="page-header fto-toolbar">
+        <div class="fto-search">
+          <span class="fto-search-label">族谱编号</span>
+          <a-input-search :disabled="isEdit" v-model:value="treeId" class="fto-search-input" placeholder="请输入族谱编号"
+            @search="onModalSearch" />
+        </div>
+        <div class="fto-actions">
+          <a-button type="primary" :disabled="isEdit" :icon="h(FileSearchOutlined)"
+            @click.prevent="onSearch">查询</a-button>
+          <a-button :disabled="isEdit" :icon="h(ClearOutlined)" @click.prevent="onReset">重置</a-button>
+          <a-button type="primary" :disabled="isEdit" :icon="h(FileAddOutlined)"
+            @click.prevent="onCreate">新增</a-button>
+        </div>
      </div>
      <div class="page-main ft-page" :class="{ 'ft-readonly': !isEdit }" :style="{ height: resultH }">
        <!-- 顶部信息卡 -->
@@ -89,9 +71,9 @@
              <div class="ft-label">祖先</div>
              <div class="ft-inline">
                <a-input-group compact class="ft-inline-main" style="display: flex; width: 100%">
-                  <a-input :disabled="true" v-model:value="data.FamilyTree.AncestorPersonGenealogyName"
+                  <a-input size="large" :disabled="true" v-model:value="data.FamilyTree.AncestorPersonGenealogyName"
                    placeholder="族谱名" style="width: 50%" />
-                  <a-input-search required :disabled="!isCreate" style="width: 50%"
+                  <a-input-search size="large" required :disabled="!isCreate" style="width: 50%"
                    v-model:value="data.FamilyTree.AncestorPersonId" @search="onModalPerson" />
                </a-input-group>
                <a-button class="ft-inline-btn" size="large" type="primary" :disabled="!hasData"
@@ -127,10 +109,10 @@
                placeholder="请输入族员" @search="onModalCurrentPerson" />
            </div>
            <div class="ft-field">
-              <div class="ft-inline">
-                <a-button class="ft-full-btn" size="large" type="primary" :disabled="!hasData"
+              <div class="ft-inline fto-btn-row">
+                <a-button class="fto-flex-btn" size="large" type="primary" :disabled="!hasData"
                  :icon="h(ApartmentOutlined)" @click.prevent="onShowChart">谱系图</a-button>
-                <a-button class="ft-inline-btn" size="large" type="primary" :disabled="!hasData"
+                <a-button class="fto-flex-btn" size="large" :disabled="!hasData || isEdit"
                  :icon="h(FileProtectOutlined)" @click.prevent="onRequestPermission">申请管理</a-button>
              </div>
            </div>
@@ -139,13 +121,19 @@
        <!-- 关系维护 -->
        <div class="ft-card">
          <div class="ft-card-title">关系维护</div>
-          <a-collapse v-model:activeKey="activeKey" class="ft-collapse">
-            <a-collapse-panel key="1" header="夫妻关系">
+          <a-collapse v-model:activeKey="activeKeyRelations" class="ft-collapse">
+            <a-collapse-panel key="1">
+              <template #header>
+                <span class="fto-panel-title">夫妻关系</span>
+                <span class="fto-panel-count">{{ data.CurrentPerson.FamilyTreeSpouseMaps?.length ?? 0 }}</span>
+              </template>
              <div class="ft-list">
                <div v-for="(record, index) in data.CurrentPerson
-                  .FamilyTreeSpouseMaps" :key="record.SpouseId || index" class="ft-item"
-                  :class="{ 'ft-item-selected': index === selectedParentIndex }">
-                  <div class="ft-item-head">
+                  .FamilyTreeSpouseMaps" :key="record.SpouseId || index" class="ft-item" :class="{
+                    'ft-item-selected': index === selectedParentIndex,
+                    'ft-item-collapsed': !isItemOpen(itemKey('sp', record.SpouseId, index)),
+                  }">
+                  <div class="ft-item-head" @click="toggleItem(itemKey('sp', record.SpouseId, index))">
                    <span class="ft-item-index">{{ index + 1 }}</span>
                    <div class="ft-item-title">
                      <span class="ft-item-name">
@@ -160,13 +148,15 @@
                        {{ getPolicyText(genderOptions, record.Gender) }}
                      </a-tag>
                    </div>
-                    <div v-if="isEdit" class="ft-item-actions">
+                    <div v-if="isEdit" class="ft-item-actions" @click.stop>
                      <UpSquareTwoTone class="ft-action" @click="upParent(index)" />
                      <DownSquareTwoTone class="ft-action" @click="downParent(index)" />
                      <DeleteOutlined class="ft-action ft-action-delete" @click="deleteParent(record.SpouseId)" />
                    </div>
+                    <RightOutlined class="ft-item-arrow"
+                      :class="{ 'ft-item-arrow-open': isItemOpen(itemKey('sp', record.SpouseId, index)) }" />
                  </div>
-                  <div class="ft-item-body">
+                  <div v-show="isItemOpen(itemKey('sp', record.SpouseId, index))" class="ft-item-body">
                    <div class="ft-item-field">
                      <span class="ft-item-label">结婚日期文本</span>
                      <a-input v-if="isEdit" size="large" v-model:value="record.MarryDateText" placeholder="结婚日期文本" />
@@ -234,12 +224,18 @@
                </a-button>
              </div>
            </a-collapse-panel>
-            <a-collapse-panel key="2" header="孩子关系">
+            <a-collapse-panel key="2">
+              <template #header>
+                <span class="fto-panel-title">孩子关系</span>
+                <span class="fto-panel-count">{{ data.CurrentPerson.FamilyTreeChildrenMaps?.length ?? 0 }}</span>
+              </template>
              <div class="ft-list">
                <div v-for="(record, index) in data.CurrentPerson
-                  .FamilyTreeChildrenMaps" :key="record.ChildrenId || index" class="ft-item"
-                  :class="{ 'ft-item-selected': index === selectedSonIndex }">
-                  <div class="ft-item-head">
+                  .FamilyTreeChildrenMaps" :key="record.ChildrenId || index" class="ft-item" :class="{
+                    'ft-item-selected': index === selectedSonIndex,
+                    'ft-item-collapsed': !isItemOpen(itemKey('ch', record.ChildrenId, index)),
+                  }">
+                  <div class="ft-item-head" @click="toggleItem(itemKey('ch', record.ChildrenId, index))">
                    <span class="ft-item-index">{{ index + 1 }}</span>
                    <div class="ft-item-title">
                      <span class="ft-item-name">
@@ -254,13 +250,15 @@
                        {{ getPolicyText(genderOptions, record.Gender) }}
                      </a-tag>
                    </div>
-                    <div v-if="isEdit" class="ft-item-actions">
+                    <div v-if="isEdit" class="ft-item-actions" @click.stop>
                      <UpSquareTwoTone class="ft-action" @click="upSon(index)" />
                      <DownSquareTwoTone class="ft-action" @click="downSon(index)" />
                      <DeleteOutlined class="ft-action ft-action-delete" @click="deleteSon(record.ChildrenId)" />
                    </div>
+                    <RightOutlined class="ft-item-arrow"
+                      :class="{ 'ft-item-arrow-open': isItemOpen(itemKey('ch', record.ChildrenId, index)) }" />
                  </div>
-                  <div class="ft-item-body">
+                  <div v-show="isItemOpen(itemKey('ch', record.ChildrenId, index))" class="ft-item-body">
                    <div class="ft-item-field">
                      <span class="ft-item-label">父母</span>
                      <a-select v-if="isEdit" size="large" style="width: 100%" allow-clear show-search
@@ -299,27 +297,34 @@
            </a-collapse-panel>
          </a-collapse>
        </div>
-        <!-- 待审核成员名单 -->
+        <!-- 权限维护 -->
        <div class="ft-card">
-          <a-collapse v-model:activeKey="activeKey" class="ft-collapse">
-            <a-collapse-panel key="3" header="待审核成员名单">
+          <div class="ft-card-title">权限维护</div>
+          <a-collapse v-model:activeKey="activeKeyPermissions" class="ft-collapse">
+            <a-collapse-panel key="3">
+              <template #header>
+                <span class="fto-panel-title">待审核成员名单</span>
+                <span class="fto-panel-count">{{ pendingPermissions.length }}</span>
+              </template>
              <div class="ft-list">
                <div v-for="(record, index) in pendingPermissions" :key="(record.UserName || '') + '-' + (record.PersonId || index)
-                  " class="ft-item">
-                  <div class="ft-item-head">
+                  " class="ft-item" :class="{ 'ft-item-collapsed': !isItemOpen(permItemKey('pd', record, index)) }">
+                  <div class="ft-item-head" @click="toggleItem(permItemKey('pd', record, index))">
                    <span class="ft-item-index">{{ index + 1 }}</span>
                    <div class="ft-item-title">
                      <span class="ft-item-name">
                        {{ record.UserLocalName || "未命名成员" }}
                      </span>
                    </div>
-                    <div v-if="data.IsManager && !isEdit" class="ft-item-actions">
+                    <div v-if="data.IsManager && !isEdit" class="ft-item-actions" @click.stop>
                      <CheckCircleTwoTone class="ft-action" @click="approvePermission(record, 'N')" />
                      <CrownOutlined class="ft-action" style="color: #faad14" @click="approvePermission(record, 'Y')" />
                      <CloseCircleOutlined class="ft-action ft-action-delete" @click="rejectPermission(record)" />
                    </div>
+                    <RightOutlined class="ft-item-arrow"
+                      :class="{ 'ft-item-arrow-open': isItemOpen(permItemKey('pd', record, index)) }" />
                  </div>
-                  <div class="ft-item-body">
+                  <div v-show="isItemOpen(permItemKey('pd', record, index))" class="ft-item-body">
                    <div class="ft-item-field">
                      <span class="ft-item-label">授权族员节点</span>
                      <span class="ft-item-text">{{ record.PersonLocalName || "-" }}</span>
@@ -335,16 +340,15 @@
                </div>
              </div>
            </a-collapse-panel>
-          </a-collapse>
-        </div>
-        <!-- 管理名单 -->
-        <div class="ft-card">
-          <a-collapse v-model:activeKey="activeKey" class="ft-collapse">
-            <a-collapse-panel key="4" header="管理名单">
+            <a-collapse-panel key="4">
+              <template #header>
+                <span class="fto-panel-title">管理名单</span>
+                <span class="fto-panel-count">{{ validPermissions.length }}</span>
+              </template>
              <div class="ft-list">
                <div v-for="(record, index) in validPermissions" :key="(record.UserName || '') + '-' + (record.PersonId || index)
-                  " class="ft-item">
-                  <div class="ft-item-head">
+                  " class="ft-item" :class="{ 'ft-item-collapsed': !isItemOpen(permItemKey('vd', record, index)) }">
+                  <div class="ft-item-head" @click="toggleItem(permItemKey('vd', record, index))">
                    <span class="ft-item-index">{{ index + 1 }}</span>
                    <div class="ft-item-title">
                      <span class="ft-item-name">
@@ -352,11 +356,13 @@
                      </span>
                      <a-tag v-if="record.ManagerIndc == 'Y'" class="ft-item-tag">管理员</a-tag>
                    </div>
-                    <div v-if="data.IsManager && !isEdit" class="ft-item-actions">
+                    <div v-if="data.IsManager && !isEdit" class="ft-item-actions" @click.stop>
                      <DeleteOutlined class="ft-action ft-action-delete" @click="rejectPermission(record)" />
                    </div>
+                    <RightOutlined class="ft-item-arrow"
+                      :class="{ 'ft-item-arrow-open': isItemOpen(permItemKey('vd', record, index)) }" />
                  </div>
-                  <div class="ft-item-body">
+                  <div v-show="isItemOpen(permItemKey('vd', record, index))" class="ft-item-body">
                    <div class="ft-item-field">
                      <span class="ft-item-label">授权族员节点</span>
                      <span class="ft-item-text">{{ record.PersonLocalName || "-" }}</span>
@@ -456,6 +462,7 @@ import {
  CheckCircleTwoTone,
  CloseCircleOutlined,
  CrownOutlined,
+  RightOutlined,
 } from "@ant-design/icons-vue";
 import {
  PermissionContext,
@@ -541,7 +548,37 @@ interface PersonEnquiry {
 const enquiry = ref<TreeEnquiry | null>(null);
 const personEnquiry = ref<PersonEnquiry | null>(null);

-const activeKey = ref(["1", "2"]);
+/**
+ * 两个折叠区各自维护开合状态（原先三个折叠区共用一个 activeKey，点一个会把别的也带走），默认全部展开：
+ * 关系维护（夫妻关系 / 孩子关系）、权限维护（待审核成员名单 / 管理名单）。
+ */
+const activeKeyRelations = ref(["1", "2"]);
+const activeKeyPermissions = ref(["3", "4"]);
+
+/**
+ * 成员卡片默认只显示标题行（序号 + 姓名 + 性别/标签 + 操作图标），
+ * 点标题行或右侧箭头才展开下面的字段内容；这里存的是"已展开"的卡片 key，空数组即全部收起。
+ */
+const openItemKeys = ref<string[]>([]);
+
+/** 生成卡片 key：优先用记录自身 Id，取不到时退回下标（与 v-for 的 :key 语义保持一致） */
+const itemKey = (prefix: string, id: unknown, index: number) =>
+  `${prefix}-${id || index}`;
+
+/** 权限卡片的 key（与 v-for 的 :key 写法一致，避免同一人多次申请时互相串开合状态） */
+const permItemKey = (
+  prefix: string,
+  record: { UserName?: string | null; PersonId?: string | null },
+  index: number,
+) => `${prefix}-${(record.UserName || "") + "-" + (record.PersonId || index)}`;
+
+const isItemOpen = (key: string) => openItemKeys.value.includes(key);
+
+const toggleItem = (key: string) => {
+  const at = openItemKeys.value.indexOf(key);
+  if (at >= 0) openItemKeys.value.splice(at, 1);
+  else openItemKeys.value.push(key);
+};

 const columnParents = ref([
  {
@@ -1752,4 +1789,298 @@ const onPersonQuickCreated = (person: FamilyPersonDisplayData) => {
  border-style: dashed;
  color: #1677ff;
 }
+
+/* ==================== 族谱设置：界面美化 ====================
+ * 全部规则收在根类 .family-tree-op 下，保证不影响其他 Operation 页面；
+ * 需要覆盖 ft-mobile.less 里带 !important 的规则时，靠更长的选择器提高优先级。
+ */
+.family-tree-op {
+  --fto-blue: #1677ff;
+  --fto-line: #eef1f6;
+  --fto-text: #1f2329;
+  --fto-sub: #646a73;
+}
+
+/* ---------- 顶部工具条 ---------- */
+.family-tree-op .page-header.fto-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 12px;
+  padding: 10px 12px;
+  margin: 0 0 12px;
+  border: 1px solid #e8f1ff;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #f5f9ff 0%, #ffffff 78%);
+  box-shadow: 0 2px 10px rgba(22, 119, 255, 0.06);
+}
+
+.family-tree-op .fto-search {
+  flex: 1 1 300px;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.family-tree-op .fto-search-label {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 9px;
+  background: rgba(22, 119, 255, 0.1);
+  color: var(--fto-blue);
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.family-tree-op .fto-search-input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* 查询框：外层统一圆角（后缀图标 / 附加按钮两种结构都覆盖） */
+.family-tree-op .page-header .fto-search-input .ant-input,
+.family-tree-op .page-header .fto-search-input .ant-input-affix-wrapper {
+  border-radius: 9px !important;
+  text-align: left;
+}
+
+.family-tree-op .page-header .fto-search-input .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled) {
+  border-color: #dbe5f5;
+  background: #fff;
+}
+
+.family-tree-op .page-header .fto-search-input .ant-input-group > .ant-input {
+  border-radius: 9px 0 0 9px !important;
+}
+
+.family-tree-op .page-header .fto-search-input .ant-input-group-addon .ant-input-search-button {
+  border-radius: 0 9px 9px 0 !important;
+}
+
+.family-tree-op .fto-actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.family-tree-op .fto-actions .ant-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 14px;
+  border-radius: 9px;
+  box-shadow: none;
+}
+
+/* ---------- 卡片与标题 ---------- */
+.family-tree-op .page-main.ft-page .ft-hero {
+  padding: 16px;
+  border-radius: 16px;
+}
+
+.family-tree-op .page-main.ft-page .ft-hero-name {
+  font-size: 19px;
+  letter-spacing: 0.2px;
+}
+
+.family-tree-op .page-main.ft-page .ft-card {
+  padding: 14px 16px 16px;
+  border-color: #edf0f5;
+  border-radius: 16px;
+  box-shadow:
+    0 1px 2px rgba(15, 23, 42, 0.03),
+    0 10px 30px -24px rgba(15, 23, 42, 0.45);
+}
+
+.family-tree-op .page-main.ft-page .ft-card-title {
+  padding-bottom: 12px;
+  font-size: 15px;
+}
+
+.family-tree-op .page-main.ft-page .ft-card-title::before {
+  width: 4px;
+  height: 15px;
+  border-radius: 3px;
+  background: linear-gradient(180deg, #1677ff 0%, #69b1ff 100%);
+}
+
+.family-tree-op .page-main.ft-page .ft-label {
+  color: #8a919f;
+  font-size: 12.5px;
+}
+
+/* 「祖先」行：两个输入框拼成一个整块，用外层圆角 + 裁切代替方块拼接 */
+.family-tree-op .page-main.ft-page .ft-inline-main.ant-input-group {
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.family-tree-op .page-main.ft-page .ft-inline-main.ant-input-group .ant-input,
+.family-tree-op .page-main.ft-page .ft-inline-main.ant-input-group .ant-input-affix-wrapper {
+  border-radius: 0 !important;
+}
+
+.family-tree-op .page-main.ft-page .ft-inline-main .ant-input-search .ant-input-affix-wrapper {
+  border-left: 0;
+}
+
+/* 「当前族员」两个按钮等宽 */
+.family-tree-op .page-main.ft-page .fto-btn-row {
+  gap: 10px;
+}
+
+.family-tree-op .page-main.ft-page .fto-btn-row .fto-flex-btn {
+  flex: 1 1 0;
+  min-width: 0;
+  border-radius: 10px;
+}
+
+/* ---------- 折叠面板标题 + 数量徽标 ---------- */
+.family-tree-op .page-main.ft-page .ft-collapse .ant-collapse-header {
+  align-items: center;
+}
+
+.family-tree-op .page-main.ft-page .ft-collapse .ant-collapse-header-text {
+  display: inline-flex;
+  align-items: center;
+}
+
+.family-tree-op .fto-panel-title {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  font-weight: 600;
+}
+
+.family-tree-op .fto-panel-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  margin-left: 8px;
+  padding: 0 7px;
+  border-radius: 10px;
+  background: #f0f5ff;
+  color: var(--fto-blue);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+/* ---------- 关系维护列表卡 ---------- */
+.family-tree-op .page-main.ft-page .ft-item {
+  border-color: #edf0f5;
+  border-radius: 14px;
+}
+
+.family-tree-op .page-main.ft-page .ft-item-head {
+  background: linear-gradient(180deg, #f9fbfe 0%, #f4f7fc 100%);
+}
+
+.family-tree-op .page-main.ft-page .ft-item-index {
+  background: linear-gradient(135deg, #1677ff 0%, #69b1ff 100%);
+  color: #fff;
+  box-shadow: 0 2px 6px rgba(22, 119, 255, 0.3);
+}
+
+.family-tree-op .page-main.ft-page .ft-item-selected {
+  border-color: var(--fto-blue);
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
+}
+
+.family-tree-op .page-main.ft-page .ft-action {
+  transition:
+    transform 0.16s ease,
+    opacity 0.16s ease;
+}
+
+.family-tree-op .page-main.ft-page .ft-action:hover {
+  transform: translateY(-1px);
+  opacity: 0.8;
+}
+
+/* 卡片默认只显示标题行，点标题行（或右侧箭头）展开/收起字段内容 */
+.family-tree-op .page-main.ft-page .ft-item-head {
+  cursor: pointer;
+  user-select: none;
+}
+
+.family-tree-op .page-main.ft-page .ft-item-head:hover {
+  background: #eef4ff;
+}
+
+.family-tree-op .page-main.ft-page .ft-item-collapsed .ft-item-head {
+  border-bottom-color: transparent;
+}
+
+.family-tree-op .page-main.ft-page .ft-item-arrow {
+  flex: 0 0 auto;
+  margin-left: 2px;
+  color: #98a1b0;
+  font-size: 12px;
+  transition:
+    transform 0.18s ease,
+    color 0.18s ease;
+}
+
+.family-tree-op .page-main.ft-page .ft-item-arrow-open {
+  transform: rotate(90deg);
+  color: var(--fto-blue);
+}
+
+/* ---------- 底部操作条：白色底 + 模糊，避免下方内容透出来 ---------- */
+.family-tree-op .page-footer {
+  padding: 10px 16px;
+  border-top: 1px solid var(--fto-line);
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  box-shadow: 0 -8px 24px -18px rgba(15, 23, 42, 0.5);
+}
+
+.family-tree-op .page-footer .ant-btn {
+  height: 38px;
+  padding: 0 18px;
+  border-radius: 10px;
+}
+
+/* ---------- 手机端 ---------- */
+@media (max-width: 575px) {
+  .family-tree-op .page-header.fto-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+    padding: 10px;
+  }
+
+  .family-tree-op .fto-search {
+    flex: 1 1 auto;
+  }
+
+  /* 手机端输入框字号变大后高度会变，让标签跟着撑满，保证与输入框齐平 */
+  .family-tree-op .fto-search-label {
+    align-self: stretch;
+    height: auto;
+  }
+
+  .family-tree-op .fto-actions .ant-btn {
+    flex: 1 1 0;
+    min-width: 0;
+    height: 38px;
+  }
+
+  .family-tree-op .page-footer .ant-btn {
+    flex: 1 1 0;
+  }
+}
 </style>
@@ -338,7 +338,7 @@ interface DmsFileEnquiry {

 const dmsFileEnquiry = ref<DmsFileEnquiry | null>(null)

-const activeKey = ref(['1', '2']);
+const activeKey = ref(['2', '3']);

 const columnDtls = ref([
    {
@@ -742,49 +742,4 @@ const columnFamilyGroups = ref([
 ]);


-</script>
-<style lang="less">
-/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
-@import "../../styles/ft-mobile.less";
-
-.page-container {
-    margin-right: 0px;
-
-}
-
-.page-header {
-    padding-top: 4px;
-    padding-bottom: 8px;
-    padding-right: 12px;
-    border-bottom: 1px solid silver;
-}
-
-.page-header .ant-input-search .ant-input {
-    border-radius: 0;
-    border-left: 0;
-    text-align: left
-}
-
-.page-main {
-    overflow-y: auto;
-    padding-top: 24px;
-    padding-bottom: 4px;
-    padding-right: 32px;
-    padding-left: 12px;
-}
-
-.page-footer {
-    z-index: 999;
-    padding-left: 8px;
-    padding-right: 18px;
-    padding-top: 8px;
-    width: 100%;
-    position: fixed;
-    bottom: 8px;
-    border-top: 1px solid silver;
-}
-
-.ant-collapse-content-box {
-    padding: 0 !important;
-}
-</style>
+</script>
@@ -464,7 +464,7 @@ interface FamilyGroupEnquiry {

 const groupEnquiry = ref<FamilyGroupEnquiry | null>(null);

-const activeKey = ref(["1", "2"]);
+const activeKey = ref(["2", "3"]);

 const columnDtls = ref([
  {
@@ -760,43 +760,3 @@ const columnFamilyGroups = ref([
  },
 ]);
 </script>
-<style lang="less">
-/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
-@import "../../styles/ft-mobile.less";
-
-.page-container {
-  margin-right: 0px;
-}
-
-.page-header {
-  padding-top: 4px;
-  padding-bottom: 8px;
-  padding-right: 12px;
-  border-bottom: 1px solid silver;
-}
-
-.page-header .ant-input-search .ant-input {
-  border-radius: 0;
-  border-left: 0;
-  text-align: left;
-}
-
-.page-main {
-  overflow-y: auto;
-  padding-top: 24px;
-  padding-bottom: 4px;
-  padding-right: 32px;
-  padding-left: 12px;
-}
-
-.page-footer {
-  z-index: 999;
-  padding-left: 8px;
-  padding-right: 18px;
-  padding-top: 8px;
-  width: 100%;
-  position: fixed;
-  bottom: 8px;
-  border-top: 1px solid silver;
-}
-</style>
@@ -312,7 +312,7 @@ interface DmsFileEnquiry {

 const dmsFileEnquiry = ref<DmsFileEnquiry | null>(null)

-const activeKey = ref(['1', '2']);
+const activeKey = ref(['2', '3']);

 const columnDtls = ref([
    {
@@ -717,49 +717,4 @@ const columnFamilyGroups = ref([
 ]);


-</script>
-<style lang="less">
-/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
-@import "../../styles/ft-mobile.less";
-
-.page-container {
-    margin-right: 0px;
-
-}
-
-.page-header {
-    padding-top: 4px;
-    padding-bottom: 8px;
-    padding-right: 12px;
-    border-bottom: 1px solid silver;
-}
-
-.page-header .ant-input-search .ant-input {
-    border-radius: 0;
-    border-left: 0;
-    text-align: left
-}
-
-.page-main {
-    overflow-y: auto;
-    padding-top: 24px;
-    padding-bottom: 4px;
-    padding-right: 32px;
-    padding-left: 12px;
-}
-
-.page-footer {
-    z-index: 999;
-    padding-left: 8px;
-    padding-right: 18px;
-    padding-top: 8px;
-    width: 100%;
-    position: fixed;
-    bottom: 8px;
-    border-top: 1px solid silver;
-}
-
-.ant-collapse-content-box {
-    padding: 0 !important;
-}
-</style>
+</script>
@@ -589,46 +589,4 @@ const onViewUserOperation = ((userName: string) => {
    router.push({ name: "UserOperation", params: { id: userName, mode: 'view' } });
 })

-</script>
-<style lang="less">
-/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
-@import "../../styles/ft-mobile.less";
-
-.page-container {
-    margin-right: 0px;
-
-}
-
-.page-header {
-    padding-top: 4px;
-    padding-bottom: 8px;
-    padding-right: 12px;
-    border-bottom: 1px solid silver;
-    margin-left: 6px;
-}
-
-.page-header .ant-input-search .ant-input {
-    border-radius: 0;
-    border-left: 0;
-    text-align: left
-}
-
-.page-main {
-    overflow-y: auto;
-    padding-top: 24px;
-    padding-bottom: 4px;
-    padding-right: 32px;
-    padding-left: 12px;
-}
-
-.page-footer {
-    z-index: 999;
-    padding-left: 8px;
-    padding-right: 18px;
-    padding-top: 8px;
-    width: 100%;
-    position: fixed;
-    bottom: 8px;
-    border-top: 1px solid silver;
-}
-</style>
+</script>
@@ -661,63 +661,4 @@ const handleSelectPermission = (async () => {
    }
 })

-</script>
-<style lang="less">
-/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
-@import "../../styles/ft-mobile.less";
-
-.page-container {
-    margin-right: 0px;
-
-}
-
-.page-header {
-    padding-top: 4px;
-    padding-bottom: 8px;
-    padding-right: 12px;
-    border-bottom: 1px solid silver;
-    margin-left: 6px;
-}
-
-.page-header .ant-input-search .ant-input {
-    border-radius: 0;
-    border-left: 0;
-    text-align: left
-}
-
-.page-main {
-    overflow-y: auto;
-    padding-top: 24px;
-    padding-bottom: 4px;
-    padding-right: 32px;
-    padding-left: 12px;
-}
-
-.page-footer {
-    z-index: 999;
-    padding-left: 8px;
-    padding-right: 18px;
-    padding-top: 8px;
-    width: 100%;
-    position: fixed;
-    bottom: 8px;
-    border-top: 1px solid silver;
-}
-
-.son-row-selected td {
-    border-top: 2px solid #1677ff !important;
-    border-bottom: 2px solid #1677ff !important;
-}
-
-.son-row-selected td:first-child {
-    border-left: 2px solid #1677ff !important;
-}
-
-.son-row-selected td:last-child {
-    border-right: 2px solid #1677ff !important;
-}
-
-.son-row-selected > td {
-    background-color: #e6f4ff !important;
-}
-</style>
+</script>
@@ -826,48 +826,7 @@ const onViewPermissionOperation = ((permissionName: string) => {


 </script>
-<style lang="less">
-/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
-@import "../../styles/ft-mobile.less";
-
-.page-container {
-    margin-right: 0px;
-
-}
-
-.page-header {
-    padding-top: 4px;
-    padding-bottom: 8px;
-    padding-right: 12px;
-    border-bottom: 1px solid silver;
-    margin-left: 6px;
-}
-
-.page-header .ant-input-search .ant-input {
-    border-radius: 0;
-    border-left: 0;
-    text-align: left
-}
-
-.page-main {
-    overflow-y: auto;
-    padding-top: 24px;
-    padding-bottom: 4px;
-    padding-right: 32px;
-    padding-left: 12px;
-}
-
-.page-footer {
-    z-index: 999;
-    padding-left: 8px;
-    padding-right: 18px;
-    padding-top: 8px;
-    width: 100%;
-    position: fixed;
-    bottom: 8px;
-    border-top: 1px solid silver;
-}
-
+<style lang="less" scoped>
 /* 权限明细：查看/新增/修改/删除 四个操作无论屏幕大小都保持在同一行 */
 .page-main.ft-page .ft-item-body .ft-perm-actions {
  grid-column: 1 / -1;
@@ -217,7 +217,6 @@ interface MasterEnquiry {
 }

 const enquiry = ref<MasterEnquiry | null>(null)
-const activeKey = ref(['1']);

 //================provide================
 const modelOption = ref<OperationToEnquiryModelOption>(new OperationToEnquiryModelOption());
@@ -398,46 +397,4 @@ const handleSelect = (async () => {
    }
 })

-</script>
-<style lang="less">
-/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
-@import "../../styles/ft-mobile.less";
-
-.page-container {
-    margin-right: 0px;
-
-}
-
-.page-header {
-    padding-top: 4px;
-    padding-bottom: 8px;
-    padding-right: 12px;
-    border-bottom: 1px solid silver;
-    margin-left: 6px;
-}
-
-.page-header .ant-input-search .ant-input {
-    border-radius: 0;
-    border-left: 0;
-    text-align: left
-}
-
-.page-main {
-    overflow-y: auto;
-    padding-top: 24px;
-    padding-bottom: 4px;
-    padding-right: 32px;
-    padding-left: 12px;
-}
-
-.page-footer {
-    z-index: 999;
-    padding-left: 8px;
-    padding-right: 18px;
-    padding-top: 8px;
-    width: 100%;
-    position: fixed;
-    bottom: 8px;
-    border-top: 1px solid silver;
-}
-</style>
+</script>
@@ -444,46 +444,4 @@ const handleSelect = (async () => {
    }
 })

-</script>
-<style lang="less">
-/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
-@import "../../styles/ft-mobile.less";
-
-.page-container {
-    margin-right: 0px;
-
-}
-
-.page-header {
-    padding-top: 4px;
-    padding-bottom: 8px;
-    padding-right: 12px;
-    border-bottom: 1px solid silver;
-    margin-left: 6px;
-}
-
-.page-header .ant-input-search .ant-input {
-    border-radius: 0;
-    border-left: 0;
-    text-align: left
-}
-
-.page-main {
-    overflow-y: auto;
-    padding-top: 24px;
-    padding-bottom: 4px;
-    padding-right: 32px;
-    padding-left: 12px;
-}
-
-.page-footer {
-    z-index: 999;
-    padding-left: 8px;
-    padding-right: 18px;
-    padding-top: 8px;
-    width: 100%;
-    position: fixed;
-    bottom: 8px;
-    border-top: 1px solid silver;
-}
-</style>
+</script>
@@ -218,7 +218,7 @@ interface ActorEnquiry {
 const enquiry = ref<UserEnquiry | null>(null)
 const actorEnquiry = ref<ActorEnquiry | null>(null)

-const activeKey = ref(['1', '2']);
+const activeKey = ref(['1']);

 const columnActors = ref([
    {
@@ -460,46 +460,4 @@ const onViewActorOperation = ((actorName: string) => {
    router.push({ name: "ActorOperation", params: { id: actorName, mode: 'view' } });
 })

-</script>
-<style lang="less">
-/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
-@import "../../styles/ft-mobile.less";
-
-.page-container {
-    margin-right: 0px;
-
-}
-
-.page-header {
-    padding-top: 4px;
-    padding-bottom: 8px;
-    padding-right: 12px;
-    border-bottom: 1px solid silver;
-    margin-left: 6px;
-}
-
-.page-header .ant-input-search .ant-input {
-    border-radius: 0;
-    border-left: 0;
-    text-align: left
-}
-
-.page-main {
-    overflow-y: auto;
-    padding-top: 24px;
-    padding-bottom: 4px;
-    padding-right: 32px;
-    padding-left: 12px;
-}
-
-.page-footer {
-    z-index: 999;
-    padding-left: 8px;
-    padding-right: 18px;
-    padding-top: 8px;
-    width: 100%;
-    position: fixed;
-    bottom: 8px;
-    border-top: 1px solid silver;
-}
-</style>
+</script>