jiapuapp/pages/tree/t01-tree-overview.vue

<!-- 页面编号：T-01；用途：纵向世系树阅读、同代横向提示、空态与失败态。 -->
<template>
  <view
    class="tree-page"
    :class="{
      'tree-state--tree': treeState === 'tree',
      'tree-state--landscape': treeState === 'landscape',
      'tree-state--empty': treeState === 'empty',
      'tree-state--error': treeState === 'error',
    }"
  >
    <ModulePageBackground module="tree" />
    <view class="tree-page__header">
      <PageHeader title="世系树" action="成员目录" @action="toDirectory" />
    </view>

    <view v-if="treeState !== 'loading'" class="tree-toolbar">
      <view class="tree-toolbar__title">
        <text>世系成员</text>
        <text>{{ generationRangeLabel }}</text>
      </view>
      <view class="tree-toolbar__actions">
        <text
          v-if="treeState === 'tree' && treeHasDrifted && selected"
          class="tree-recenter"
          role="button"
          aria-label="回到当前成员"
          hover-class="tree-action--pressed"
          @click="recenterSelectedMember"
          >回到当前</text
        >
        <text @click="treeState = 'landscape'">阅读提示</text>
        <text @click="toRank">调整排行</text>
      </view>
    </view>

    <view
      class="tree-stage"
      :class="{ 'tree-stage--lineage': treeState === 'tree' }"
    >
      <view
        v-if="treeState === 'tree'"
        class="generation-rail"
        :style="generationRailStyle"
      >
        <view
          v-for="row in generationRows"
          :key="row.generation"
          class="generation-band"
          :style="generationBandStyle(row)"
        >
          <image
            src="/static/assets/modules/genealogy/transparent/section-divider.png"
            mode="scaleToFill"
          />
          <view class="generation-band__copy">
            <text>{{ row.label }}</text>
            <text>{{ row.summary }}</text>
          </view>
        </view>
      </view>

      <view v-if="treeState === 'tree'" class="lineage-pan-cue">
        <text>同代分支可左右查看</text>
      </view>

      <scroll-view
        class="tree-scroll"
        :class="{ 'tree-scroll--lineage': treeState === 'tree' }"
        scroll-x
        :scroll-left="treeState === 'tree' ? treeScrollLeft : 0"
        :show-scrollbar="false"
        :style="treeScrollStyle"
        @scroll="handleTreeScroll"
      >
        <view
          class="tree-canvas"
          :class="{ 'tree-canvas--state': treeState !== 'tree' }"
          :style="treeState === 'tree' ? treeMetricsStyle : undefined"
        >
          <AppLoading
            v-if="treeState === 'loading'"
            text="正在整理世系"
            description="请稍候，正在准备家谱成员关系。"
          />

          <template v-else-if="treeState === 'tree'">
          <view
            v-for="connector in lineageConnectors"
            :key="connector.id"
            class="lineage-connector"
            :style="connector.style"
          />

          <view
            v-for="member in layoutMembers"
            :key="member.id"
            :id="`tree-member-${member.id}`"
            class="member-node"
            :class="{ 'member-node--selected': selected?.id === member.id }"
            :style="nodeGridStyle(member)"
            @click="openMemberPanel(member)"
          >
            <image
              class="member-node__skin"
              :src="
                selected?.id === member.id
                  ? '/static/assets/modules/tree/transparent/t01-member-node-selected.png'
                  : '/static/assets/modules/tree/transparent/t01-member-node-standard.png'
              "
              mode="scaleToFill"
            />
            <image
              class="member-node__avatar"
              src="/static/assets/foundation/transparent/meta-member.png"
              mode="aspectFit"
            />
            <view class="member-node__copy">
              <text class="node-name">{{ member.name }}</text>
              <text class="node-relation"
                >{{ member.relation }} · {{ member.branch }}</text
              >
              <text class="node-years">{{ member.years }}</text>
            </view>
          </view>
          </template>

          <view v-else class="tree-state-card">
            <image
              class="tree-state-card__skin"
              src="/static/assets/modules/tree/transparent/t01-state-panel.png"
              mode="scaleToFill"
            />
            <view class="tree-state-card__content">
              <text class="tree-state-card__eyebrow">{{
                stateCopy.eyebrow
              }}</text>
              <text class="tree-state-card__title">{{ stateCopy.title }}</text>
              <text class="tree-state-card__copy">{{ stateCopy.copy }}</text>
              <view class="tree-state-card__action" @click="handleStateAction">
                <image
                  src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
                  mode="aspectFit"
                />
                <text>{{ stateCopy.action }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <AppDialog
      :visible="memberActionPanelVisible"
      eyebrow="人物操作"
      :title="selected ? `管理${selected.name}` : '管理人物'"
      message="仅展示当前人物可达的操作。未具备可靠后端合同的写入会明确说明，且不会创建本地假数据。"
      confirm-text="关闭"
      @confirm="memberActionPanelVisible = false"
      @cancel="memberActionPanelVisible = false"
    >
      <view
        v-if="selected"
        class="member-action-profile"
        role="button"
        :aria-label="`查看${selected.name}的资料`"
        @click="toMember"
      >
        <image
          class="member-action-profile__avatar"
          src="/static/assets/foundation/transparent/meta-member.png"
          mode="aspectFit"
        />
        <view class="member-action-profile__copy">
          <text>{{ selected.name }}</text>
          <text>第 {{ selected.generation }} 世 · {{ selected.relation }} · {{ selected.branch }}</text>
          <text>点击头像查看资料</text>
        </view>
      </view>
      <view class="member-action-grid">
        <AppButton
          v-for="action in memberActions"
          :key="action.key"
          type="secondary"
          compact
          :label="action.label"
          @click="openMemberAction(action)"
        />
      </view>
    </AppDialog>

    <AppDialog
      :visible="unavailableActionVisible"
      eyebrow="服务状态"
      :title="unavailableAction?.label || '当前操作'"
      :message="unavailableAction?.unavailableCopy || '该操作暂未接入可靠服务合同。'"
      confirm-text="我知道了"
      @confirm="unavailableActionVisible = false"
      @cancel="unavailableActionVisible = false"
    />
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import AppButton from "@/components/AppButton.vue";
import AppDialog from "@/components/AppDialog.vue";
import AppLoading from "@/components/AppLoading.vue";
import ModulePageBackground from "@/components/ModulePageBackground.vue";
import PageHeader from "@/components/PageHeader.vue";
import {
  appApi,
  createRequestController,
  isRequestCancelled,
} from "@/utils/api.js";
import { genealogyContext } from "@/utils/genealogy-context.js";
import { openPage } from "@/utils/navigation.js";

const genealogyId = ref("");
const treeState = ref("loading");
const selected = ref(null);
const memberActionPanelVisible = ref(false);
const unavailableActionVisible = ref(false);
const unavailableAction = ref(null);
const treeScrollLeft = ref(90);
const currentTreeScrollLeft = ref(90);
const centeredTreeScrollLeft = ref(90);
const treeHasDrifted = ref(false);
let ignoreTreeScroll = false;
let recenterTimer = null;
const treeRequestController = createRequestController();
let treeLoadGeneration = 0;
let pageActive = true;
let skipNextShowRefresh = true;
const GRID_UNIT = 5;
const NODE_HALF_HEIGHT = 47;
const MEMBER_GAP = 250;
const GENERATION_GAP = 220;
const members = ref([]);

const memberActions = Object.freeze([
  { key: "VIEW_PROFILE", label: "查看资料", routeKey: "T03" },
  { key: "ADD_FATHER", label: "添加父亲", routeKey: "T04", relationType: "FATHER" },
  { key: "ADD_MOTHER", label: "添加母亲", routeKey: "T04", relationType: "MOTHER" },
  { key: "ADD_SPOUSE", label: "添加配偶", routeKey: "T04", relationType: "SPOUSE" },
  { key: "ADD_SIBLING", label: "添加兄弟姐妹", routeKey: "T04", relationType: "SIBLING" },
  { key: "ADJUST_RANK", label: "调整排行", routeKey: "T06", mode: "rank" },
  { key: "ADD_SON", label: "添加儿子", routeKey: "T04", relationType: "SON" },
  { key: "ADD_DAUGHTER", label: "添加女儿", routeKey: "T04", relationType: "DAUGHTER" },
  {
    key: "BIND_INVITE",
    label: "邀请绑定",
    unavailableCopy: "邀请签发、目标身份查找、绑定 mutation 和结果查询尚无可靠合同；当前不会借邀请码或普通入谱申请替代。",
  },
  { key: "EDIT_PROFILE", label: "编辑信息", routeKey: "T05" },
]);

const snapToGrid = (value) => Math.ceil(value / GRID_UNIT) * GRID_UNIT;
const layoutMembers = computed(() => {
  const generations = Array.from(
    new Set(members.value.map((member) => Number(member.generation))),
  ).sort((left, right) => left - right);
  const groups = new Map(
    generations.map((generation) => [
      generation,
      members.value
        .filter((member) => Number(member.generation) === generation)
        .sort(
          (left, right) =>
            String(left.parentId || "").localeCompare(String(right.parentId || "")) ||
            String(left.id).localeCompare(String(right.id)),
        ),
    ]),
  );
  const maxCount = Math.max(1, ...Array.from(groups.values()).map((group) => group.length));
  const canvasWidth = Math.max(720, maxCount * MEMBER_GAP + 100);
  return generations.flatMap((generation, generationIndex) => {
    const group = groups.get(generation) || [];
    const occupiedWidth = Math.max(0, (group.length - 1) * MEMBER_GAP);
    const startX = (canvasWidth - occupiedWidth) / 2;
    return group.map((member, memberIndex) => ({
      ...member,
      x: snapToGrid(startX + memberIndex * MEMBER_GAP),
      y: snapToGrid(135 + generationIndex * GENERATION_GAP),
    }));
  });
});
const treeMetrics = computed(() => {
  const memberList = layoutMembers.value;
  const maxX = Math.max(0, ...memberList.map((member) => member.x));
  const maxY = Math.max(0, ...memberList.map((member) => member.y));
  const width = Math.max(720, snapToGrid(maxX + 210));
  const height = Math.max(640, snapToGrid(maxY + 250));
  return {
    width,
    height,
    columns: width / GRID_UNIT,
    rows: height / GRID_UNIT,
  };
});
const treeMetricsStyle = computed(() => ({
  width: `${treeMetrics.value.width}rpx`,
  height: `${treeMetrics.value.height}rpx`,
  gridTemplateColumns: `repeat(${treeMetrics.value.columns}, ${GRID_UNIT}rpx)`,
  gridTemplateRows: `repeat(${treeMetrics.value.rows}, ${GRID_UNIT}rpx)`,
}));
const generationRailStyle = computed(() => ({
  height: `${treeMetrics.value.height}rpx`,
  gridTemplateRows: `repeat(${treeMetrics.value.rows}, ${GRID_UNIT}rpx)`,
}));
const treeScrollStyle = computed(() => ({
  height: `${treeMetrics.value.height}rpx`,
}));
const generationRows = computed(() => {
  const groups = new Map();
  layoutMembers.value.forEach((member) => {
    const group = groups.get(member.generation) || [];
    group.push(member);
    groups.set(member.generation, group);
  });
  return Array.from(groups.entries())
    .sort(([left], [right]) => left - right)
    .map(([generation, group]) => {
      const y = Math.min(...group.map((member) => member.y));
      return {
        generation,
        label: `第 ${generation} 世`,
        summary: `${group.length} 位成员`,
        y,
      };
    });
});
const generationRangeLabel = computed(() => {
  const rows = generationRows.value;
  if (!rows.length) return "世系关系";
  const first = rows[0].generation;
  const last = rows[rows.length - 1].generation;
  return first === last ? `第 ${first} 世` : `第 ${first}—${last} 世`;
});
const generationBandStyle = (row) => ({
  gridRow: `${Math.max(1, Math.round((row.y - 88) / GRID_UNIT) + 1)} / span 12`,
});
const lineageConnectors = computed(() => {
  const memberById = new Map(
    layoutMembers.value.map((member) => [member.id, member]),
  );
  const childrenByParent = new Map();
  layoutMembers.value.forEach((member) => {
    if (!member.parentId || !memberById.has(member.parentId)) return;
    const children = childrenByParent.get(member.parentId) || [];
    children.push(member);
    childrenByParent.set(member.parentId, children);
  });

  const connectors = [];
  childrenByParent.forEach((children, parentId) => {
    const parent = memberById.get(parentId);
    const childTop = Math.min(...children.map((child) => child.y - NODE_HALF_HEIGHT));
    const parentBottom = parent.y + NODE_HALF_HEIGHT;
    const branchY = snapToGrid((parentBottom + childTop) / 2);
    const minX = Math.min(...children.map((child) => child.x));
    const maxX = Math.max(...children.map((child) => child.x));
    const verticalStyle = (x, top, bottom) => ({
      gridColumn: `${Math.round(x / GRID_UNIT) + 1} / span 1`,
      gridRow: `${Math.round(top / GRID_UNIT) + 1} / ${Math.round(bottom / GRID_UNIT) + 1}`,
    });
    connectors.push({
      id: `${parentId}-trunk`,
      style: verticalStyle(parent.x, parentBottom, branchY),
    });
    connectors.push({
      id: `${parentId}-branch`,
      style: {
        gridColumn: `${Math.round(minX / GRID_UNIT) + 1} / ${Math.round(maxX / GRID_UNIT) + 2}`,
        gridRow: `${Math.round(branchY / GRID_UNIT) + 1} / span 1`,
      },
    });
    children.forEach((child) => connectors.push({
      id: `${parentId}-${child.id}`,
      style: verticalStyle(child.x, branchY, child.y - NODE_HALF_HEIGHT),
    }));
  });
  return connectors;
});

const stateCopy = computed(
  () =>
    ({
      landscape: {
        eyebrow: "世系阅读提示",
        title: "上下看世代，左右看同代分支",
        copy: "始祖位于上方，后代逐世向下展开；同一世代分支较多时，可左右拖动查看。",
        action: "进入世系树",
      },
      empty: {
        eyebrow: "尚未建立世系",
        title: "从第一位先祖开始记录",
        copy: "录入首代成员后，即可继续补充子女、配偶与后代关系。",
        action: "录入首代成员",
      },
      error: {
        eyebrow: "世系暂不可用",
        title: "暂时无法读取成员关系",
        copy: "请从当前家谱重新进入；已经录入的成员资料不会受到影响。",
        action: "重新查看",
      },
    })[treeState.value] || {},
);

const loadTree = async (query = {}) => {
  const generation = ++treeLoadGeneration;
  treeRequestController.abort();
  if (genealogyContext.isCurrentGenealogyInvalidated()) {
    genealogyId.value = "";
    members.value = [];
    treeState.value = "error";
    return;
  }
  genealogyId.value = String(
    query.genealogyId || genealogyContext.getCurrentGenealogyId() || "",
  );
  if (!genealogyId.value) {
    members.value = [];
    treeState.value = "empty";
    return;
  }
  if (
    query.state === "loading" ||
    ["landscape", "empty", "error"].includes(query.state)
  ) {
    treeState.value = query.state;
    return;
  }
  try {
    const result = await appApi.getTree(genealogyId.value, {
      requestController: treeRequestController,
    });
    if (!pageActive || generation !== treeLoadGeneration) return;
    members.value = result;
    genealogyContext.setCurrentGenealogyId(genealogyId.value);
    selected.value =
      layoutMembers.value.find(
        (item) => String(item.id) === String(query.selectedId),
      ) || layoutMembers.value[0] || null;
    treeState.value = members.value.length ? "tree" : "empty";
  } catch (error) {
    if (
      !pageActive ||
      generation !== treeLoadGeneration ||
      isRequestCancelled(error)
    ) {
      return;
    }
    members.value = [];
    selected.value = null;
    treeState.value = "error";
  }
};

onLoad(loadTree);
onShow(() => {
  if (skipNextShowRefresh) {
    skipNextShowRefresh = false;
    return;
  }
  if (genealogyId.value) loadTree({ genealogyId: genealogyId.value });
});

onUnload(() => {
  pageActive = false;
  treeLoadGeneration += 1;
  treeRequestController.abort();
  if (recenterTimer) clearTimeout(recenterTimer);
});

const handleTreeScroll = (event) => {
  if (ignoreTreeScroll || treeState.value !== "tree") return;
  const scrollLeft = Number(event?.detail?.scrollLeft || 0);
  currentTreeScrollLeft.value = scrollLeft;
  treeHasDrifted.value = Math.abs(scrollLeft - centeredTreeScrollLeft.value) > 80;
};

const recenterSelectedMember = async () => {
  if (!selected.value) return;
  ignoreTreeScroll = true;
  const [scrollRect, nodeRect] = await new Promise((resolve) => {
    const query = uni.createSelectorQuery();
    query.select(".tree-scroll").boundingClientRect();
    query
      .select(`#tree-member-${selected.value.id}`)
      .boundingClientRect();
    query.exec(resolve);
  });
  if (scrollRect && nodeRect) {
    const centeredScrollLeft = Math.max(
      0,
      currentTreeScrollLeft.value +
        nodeRect.left + nodeRect.width / 2 - (scrollRect.left + scrollRect.width / 2),
    );
    treeScrollLeft.value = centeredScrollLeft;
    currentTreeScrollLeft.value = centeredScrollLeft;
    centeredTreeScrollLeft.value = centeredScrollLeft;
  }
  treeHasDrifted.value = false;
  if (recenterTimer) clearTimeout(recenterTimer);
  recenterTimer = setTimeout(() => {
    ignoreTreeScroll = false;
    recenterTimer = null;
  }, 320);
};

const nodeGridStyle = (member) => ({
  gridColumn: `${member.x / 5 + 1}`,
  gridRow: `${member.y / 5 + 1}`,
});
const handleStateAction = () => {
  if (treeState.value === "empty") {
    if (!genealogyId.value) return Promise.resolve(false);
    return openPage(
      "T04",
      { genealogyId: genealogyId.value, mode: "first" },
      "T01",
    );
  }
  if (treeState.value === "error") {
    return loadTree({ genealogyId: genealogyId.value });
  }
  selected.value = layoutMembers.value[0];
  treeState.value = "tree";
};
const toMember = () => {
  if (!selected.value) return Promise.resolve(false);
  memberActionPanelVisible.value = false;
  return openPage("T03", { genealogyId: genealogyId.value, personId: String(selected.value.id) }, "T01");
};
const toDirectory = () =>
  openPage("T07", { genealogyId: genealogyId.value }, "T01");
const toRank = () =>
  selected.value
    ? openPage("T06", { genealogyId: genealogyId.value, personId: String(selected.value.id), mode: "rank" }, "T01")
    : Promise.resolve(false);
const openMemberPanel = (member) => {
  selected.value = member;
  memberActionPanelVisible.value = true;
};
const openMemberAction = (action) => {
  if (!selected.value) return Promise.resolve(false);
  memberActionPanelVisible.value = false;
  if (!action.routeKey) {
    unavailableAction.value = action;
    unavailableActionVisible.value = true;
    return Promise.resolve(false);
  }
  const params = {
    genealogyId: genealogyId.value,
    personId: String(selected.value.id),
  };
  if (action.routeKey === "T04") {
    params.relationType = action.relationType;
  } else if (action.routeKey === "T06") {
    params.mode = action.mode;
  }
  return openPage(action.routeKey, params, "T01");
};
</script>

<style scoped lang="scss">
.tree-page {
  display: grid;
  height: 100vh;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  background: $paper;
}
.tree-page__header,
.tree-toolbar,
.tree-stage {
  z-index: 1;
}
.tree-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18rpx 28rpx 12rpx;
}
.tree-toolbar__title text {
  display: block;
}
.tree-toolbar__title text:first-child {
  color: $ink;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 28rpx;
  font-weight: 700;
}
.tree-toolbar__title text:last-child {
  margin-top: 5rpx;
  color: $ink-muted;
  font-size: 22rpx;
}
.tree-toolbar__actions {
  display: flex;
  gap: 24rpx;
  color: $brand-red;
  font-size: 23rpx;
}
.tree-stage {
  min-height: 0;
  overflow-y: auto;
}
.tree-action--pressed {
  opacity: 0.72;
}
.tree-stage--lineage {
  display: grid;
  grid-template-columns: 190rpx minmax(0, 1fr);
  align-items: start;
}
.tree-scroll {
  width: 100%;
  height: 100%;
  white-space: nowrap;
}
.generation-rail {
  display: grid;
  z-index: 4;
  width: 190rpx;
  height: 100%;
  box-sizing: border-box;
  border-right: 1rpx solid rgba(143, 108, 63, 0.2);
}
.tree-scroll--lineage {
  grid-area: 1 / 2;
  min-width: 0;
}
.tree-canvas {
  display: grid;
  margin: 0 16rpx;
}
.tree-canvas--state {
  display: block;
  width: calc(100vw - 32rpx);
}
.lineage-pan-cue {
  grid-area: 1 / 2;
  align-self: start;
  justify-self: end;
  z-index: 3;
  margin: 8rpx 22rpx 0 0;
  color: #9a7748;
  font-size: 20rpx;
  letter-spacing: 1rpx;
}
.generation-band {
  display: grid;
  justify-self: center;
  z-index: 3;
  width: 166rpx;
  height: 58rpx;
  color: #8f6c3f;
  font-size: 22rpx;
  text-align: center;
}
.generation-band image,
.generation-band__copy {
  grid-area: 1 / 1;
}
.generation-band image {
  width: 100%;
  height: 100%;
}
.generation-band__copy {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.generation-band__copy text:last-child {
  margin-top: 1rpx;
  font-size: 19rpx;
}
.lineage-connector {
  align-self: stretch;
  justify-self: stretch;
  z-index: 1;
  background: #b78a42;
}
.member-node {
  display: grid;
  align-self: start;
  justify-self: start;
  z-index: 2;
  width: 224rpx;
  height: 86rpx;
  transform: translate(-50%, -50%);
  text-align: center;
}
.member-node__skin {
  width: 100%;
  height: 100%;
}
.member-node__skin,
.member-node__copy {
  grid-area: 1 / 1;
}
.member-node__avatar {
  grid-area: 1 / 1;
  z-index: 3;
  align-self: start;
  justify-self: start;
  width: 42rpx;
  height: 42rpx;
  margin: 13rpx 0 0 18rpx;
}
.member-node__copy {
  z-index: 1;
  padding-left: 44rpx;
}
.node-name,
.node-relation,
.node-years {
  display: block;
}
.node-name {
  padding-top: 5rpx;
  color: $ink;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 25rpx;
  font-weight: 700;
}
.node-relation {
  margin-top: 0;
  color: $brand-red;
  font-size: 21rpx;
}
.node-years {
  margin-top: 0;
  color: $ink-muted;
  font-size: 20rpx;
}
.member-node--selected {
  width: 236rpx;
  height: 94rpx;
}
.member-node--selected .node-name {
  color: $brand-red;
}
.tree-state-card {
  display: grid;
  z-index: 2;
  width: calc(100% - 48rpx);
  min-height: 360rpx;
  margin: 150rpx 24rpx 0;
  text-align: center;
  white-space: normal;
}
.tree-state-card__skin {
  width: 100%;
  height: 100%;
}
.tree-state-card__skin,
.tree-state-card__content {
  grid-area: 1 / 1;
}
.tree-state-card__content {
  z-index: 1;
  padding: 62rpx 58rpx 42rpx;
}
.tree-state-card__eyebrow {
  display: block;
  color: $brand-red;
  font-size: 22rpx;
  letter-spacing: 3rpx;
}
.tree-state-card__title {
  display: block;
  margin-top: 12rpx;
  color: $ink;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 34rpx;
  font-weight: 700;
}
.tree-state-card__copy {
  display: block;
  margin-top: 16rpx;
  color: $ink-muted;
  font-size: 24rpx;
  line-height: 1.65;
}
.tree-state-card__action {
  display: grid;
  width: 360rpx;
  min-height: 70rpx;
  margin: 22rpx auto 0;
}
.tree-state-card__action image {
  width: 100%;
  height: 100%;
}
.tree-state-card__action image,
.tree-state-card__action text {
  grid-area: 1 / 1;
}
.tree-state-card__action text {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff9ed;
  font-size: 24rpx;
  font-weight: 700;
}
.member-action-profile {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 18rpx;
  margin-top: 16rpx;
  padding: 14rpx 18rpx;
  box-sizing: border-box;
}
.member-action-profile__avatar {
  width: 82rpx;
  aspect-ratio: 1;
  flex: 0 0 82rpx;
}
.member-action-profile__copy {
  min-width: 0;
  text-align: left;
}
.member-action-profile__copy text {
  display: block;
}
.member-action-profile__copy text:first-child {
  color: $ink;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 30rpx;
  font-weight: 700;
}
.member-action-profile__copy text:nth-child(2) {
  margin-top: 4rpx;
  color: $ink-muted;
  font-size: 21rpx;
}
.member-action-profile__copy text:last-child {
  margin-top: 4rpx;
  color: $brand-red;
  font-size: 21rpx;
}
.member-action-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12rpx;
  margin-top: 20rpx;
}
.member-action-grid .app-button {
  width: 100%;
  min-height: 70rpx;
}

@media (max-width: 360px) {
  .tree-toolbar {
    padding-right: 20rpx;
    padding-left: 20rpx;
  }
  .tree-toolbar__actions {
    gap: 14rpx;
  }
  .member-action-profile {
    gap: 14rpx;
    padding-right: 14rpx;
    padding-left: 14rpx;
  }
}
</style>