jiapuapp/pages/tree/t06-edit-relationship.vue

<!-- 页面编号：T-06；用途：展示指定成员的同辈排行调整入口。 -->
<template>
  <view
    class="rank-page"
    :class="{
      'rank-state--loading': rankState === 'loading',
      'rank-state--form': rankState === 'form',
      'rank-state--unavailable': rankState === 'unavailable',
      'rank-state--error': rankState === 'error',
    }"
  >
    <ModulePageBackground module="tree" />
    <view class="rank-page__header"
      ><PageHeader title="调整排行" custom-back @back="goBack"
    /></view>
    <view class="rank-panel">
      <AppLoading
        v-if="rankState === 'loading'"
        text="正在读取成员资料"
        description="请稍候，正在确认待调整人物。"
      />

      <view v-else-if="rankState === 'form' && member" class="rank-form">
        <text class="form-eyebrow">同辈排行</text>
        <text class="form-title">调整{{ member.name }}的排行</text>
        <text class="form-copy"
          >排行调整必须由服务端以同辈原子操作完成，避免逐人保存造成部分成功。</text
        >

        <view class="member-context">
          <text>当前成员</text
          ><text>第 {{ member.generation }} 世 · {{ member.branch }}</text>
        </view>
        <view class="rank-notice">
          <text>当前服务状态</text>
          <text>尚未提供带版本、冲突处理和完整结果的同辈原子重排合同。</text>
        </view>
        <view class="form-action" @click="showRankUnavailable">
          <image
            src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
            mode="scaleToFill"
          />
          <text>查看服务状态</text>
        </view>
      </view>

      <view v-else class="rank-result">
        <text class="form-eyebrow">{{
          rankState === "unavailable" ? "服务暂未开放" : "成员入口无效"
        }}</text>
        <text class="form-title">{{
          rankState === "unavailable"
            ? "暂不能提交排行调整"
            : "暂时无法读取成员资料"
        }}</text>
        <text class="form-copy">{{
          rankState === "unavailable"
            ? "当前人物更新接口只有单人物 sortOrder 候选，不能保证同辈排行原子一致。本页不会逐人写入，也不会显示本地预览成功。"
            : errorMessage
        }}</text>
        <view
          class="form-action"
          @click="rankState === 'unavailable' ? (rankState = 'form') : goBack()"
        >
          <image
            src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
            mode="scaleToFill"
          />
          <text>{{
            rankState === "unavailable" ? "返回查看" : "返回世系树"
          }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onBackPress, onLoad, onUnload } from "@dcloudio/uni-app";
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 { goBack, handleBackPress } from "@/utils/navigation.js";

const rankState = ref("loading");
const genealogyId = ref("");
const personId = ref("");
const member = ref(null);
const errorMessage = ref("");
const rankRequestController = createRequestController();
let loadSequence = 0;

const loadMember = async () => {
  const activeLoad = ++loadSequence;
  rankState.value = "loading";
  try {
    const result = await appApi.getPerson(genealogyId.value, personId.value, {
      requestController: rankRequestController,
    });
    if (activeLoad !== loadSequence) return;
    member.value = result;
    errorMessage.value = "";
    rankState.value = "form";
  } catch (error) {
    if (activeLoad !== loadSequence || isRequestCancelled(error)) return;
    member.value = null;
    errorMessage.value =
      error?.message || "当前成员资料暂不可用，请返回世系树后重试。";
    rankState.value = "error";
  }
};

const showRankUnavailable = () => {
  rankState.value = "unavailable";
};

onLoad((query) => {
  genealogyId.value = String(query.genealogyId || "");
  personId.value = String(query.personId || "");
  if (!genealogyId.value || !personId.value || query.mode !== "rank") {
    rankState.value = "error";
    errorMessage.value = "当前排行入口无效，请从人物操作面板重新进入。";
    return;
  }
  void loadMember();
});

onUnload(() => {
  loadSequence += 1;
  rankRequestController.abort();
});

onBackPress((event) => handleBackPress(event, goBack));
</script>

<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;

.rank-page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: $paper;
}
.rank-page__header {
  z-index: 3;
}
.rank-panel {
  @include adaptive.adaptive-tree-panel;
  z-index: 2;
  width: calc(100% - 32rpx);
  margin: 18rpx auto 28rpx;
  padding: 7.5% 8%;
}
.form-eyebrow {
  display: block;
  color: $brand-red;
  font-size: 22rpx;
  letter-spacing: 3rpx;
}
.form-title {
  display: block;
  margin-top: 10rpx;
  color: $ink;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 34rpx;
  font-weight: 700;
  line-height: 1.35;
}
.form-copy {
  display: block;
  margin-top: 10rpx;
  color: $ink-muted;
  font-size: 24rpx;
  line-height: 1.5;
}
.member-context,
.rank-notice {
  @include adaptive.adaptive-tree-field;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 78rpx;
  align-items: center;
  gap: 20rpx;
  margin-top: 16rpx;
  padding: 12rpx 22rpx;
}
.member-context text:first-child,
.rank-notice text:first-child {
  color: $ink;
  font-size: 24rpx;
  font-weight: 700;
}
.member-context text:last-child,
.rank-notice text:last-child {
  min-width: 0;
  color: $ink-muted;
  font-size: 23rpx;
  line-height: 1.45;
  text-align: right;
}
.form-action {
  display: grid;
  width: 100%;
  min-height: 76rpx;
  margin-top: 22rpx;
}
.form-action image,
.form-action text {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}
.form-action text {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff9ed;
  font-size: 24rpx;
  font-weight: 700;
}
.rank-result {
  margin-top: 30%;
  text-align: center;
}
.rank-result .form-eyebrow,
.rank-result .form-copy {
  text-align: center;
}
.rank-result .form-action {
  width: 420rpx;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 400px) {
  .rank-panel {
    width: calc(100% - 48rpx);
  }
}
</style>