完成70%

2026-07-24 07:56:22 +08:00
parent bb6431b319
commit c7f278fe79
92 changed files with 4741 additions and 14440 deletions
@@ -1,176 +1,76 @@
-<!-- 页面编号：G-12；用途：字辈诗列表、空状态与批量维护（页面设计阶段使用本地模拟交互）。 -->
+<!-- 页面编号：G-12；用途：按 Apifox GenerationPoemView 读取字辈，并以服务端预览维护。 -->
 <template>
  <view class="poem-page">
    <GenealogyPageBackground />
-    <view class="poem-page__header"
-      ><PageHeader
-        :title="pageTitle"
-        :action="canManage && poemState === 'list' ? '维护' : ''"
-        custom-back
-        @action="openEditor"
-        @back="requestBack"
-    /></view>
+    <view class="poem-page__header">
+      <PageHeader :title="pageTitle" :action="poemState === 'list' || poemState === 'empty' ? '维护' : ''" custom-back @action="enterManagement" @back="requestBack" />
+    </view>
+
+    <view class="poem-panel" :class="`poem-state--${poemState}`">
+      <AppLoading v-if="poemState === 'loading'" text="正在读取字辈诗" description="正在读取后端已声明的世代、字辈和状态字段。" />

-    <view
-      class="poem-panel"
-      :class="{
-        'poem-state--list': poemState === 'list',
-        'poem-state--empty': poemState === 'empty',
-        'poem-state--edit': poemState === 'edit',
-        'poem-state--error': poemState === 'error',
-        'poem-state--no-permission': poemState === 'no-permission',
-      }"
-    >
-      <AppLoading
-        v-if="poemState === 'loading'"
-        text="正在整理字辈诗"
-        description="请稍候，正在读取家谱字序。"
-      />
      <view v-else-if="poemState === 'list'" class="poem-list">
        <text class="poem-list__eyebrow">{{ genealogyName }} · 传承字序</text>
        <text class="poem-list__title">{{ generationRangeTitle }}</text>
-        <text class="poem-list__copy">{{ currentGenerationCopy }}</text>
+        <text class="poem-list__copy">接口未声明“当前世代”字段，页面只按后端返回的世代、文字和状态展示。</text>
        <view class="poem-rows">
-          <view
-            v-for="item in visiblePoemRows"
-            :key="item.generationNo"
-            class="poem-row"
-            :class="{
-              'poem-row--current': item.current,
-              'poem-row--disabled': item.status === GENERATION_POEM_STATUS.DISABLED,
-            }"
-          >
+          <view v-for="item in visiblePoemRows" :key="item.poemId" class="poem-row" :class="{ 'poem-row--disabled': item.status === GENERATION_POEM_STATUS.DISABLED }">
            <text class="poem-row__number">第 {{ item.generationNo }} 世</text>
            <text class="poem-row__character">{{ item.generationText }}</text>
-            <text class="poem-row__status">{{
-              item.current
-                ? "当前字辈"
-                : item.status === GENERATION_POEM_STATUS.DISABLED
-                  ? "已停用·记录保留"
-                  : "传承字序"
-            }}</text>
+            <text class="poem-row__status">{{ item.status === GENERATION_POEM_STATUS.DISABLED ? '已停用·记录保留' : '传承字序' }}</text>
          </view>
        </view>
-        <view
-          v-if="remainingPoemCount > 0"
-          class="poem-load-more"
-          @click="loadMorePoems"
-        >
+        <view v-if="remainingPoemCount > 0" class="poem-load-more" @click="loadMorePoems">
          <text>继续加载后续字辈（剩余 {{ remainingPoemCount }} 代）</text>
        </view>
-        <view v-if="canManage" class="poem-action" @click="openEditor">
-          <image
-            src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
-            mode="aspectFit"
-          /><text>维护字辈诗</text>
+        <view class="poem-action" @click="enterManagement">
+          <image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>{{ canManage ? '继续维护字辈诗' : '读取维护列表' }}</text>
        </view>
      </view>

      <view v-else-if="poemState === 'edit'" class="poem-editor">
-        <text class="poem-list__eyebrow">批量维护</text>
+        <text class="poem-list__eyebrow">服务端批量维护</text>
        <text class="poem-list__title">录入完整字辈序列</text>
-        <text class="poem-list__copy"
-          >无分隔符时每个字符对应一代；也可用空格、逗号、分号、顿号、斜杠或竖线分隔多字字辈。一次最多
-          {{ MAX_GENERATION_COUNT }} 代，每代最多
-          {{ MAX_GENERATION_TEXT_LENGTH }} 个字符。本页只更新本地预览，尚未提交服务器。</text
-        >
+        <text class="poem-list__copy">提交前会先请求服务端批量预览。无分隔符时每个字符对应一代；也可用空格、逗号、分号、顿号、斜杠或竖线分隔多字字辈。</text>
        <view class="poem-field">
          <text>字辈内容</text>
-          <textarea
-            v-model="poemDraft"
-            auto-height
-            :maxlength="MAX_GENERATION_POEM_INPUT_LENGTH * 2"
-            placeholder="例如：启宗敦本，或 克勤 克俭 承先 启后"
-            placeholder-class="poem-placeholder"
-            @input="poemError = ''"
-          />
+          <textarea v-model="poemDraft" auto-height :maxlength="MAX_GENERATION_POEM_INPUT_LENGTH" placeholder="例如：启宗敦本，或 克勤 克俭 承先 启后" placeholder-class="poem-placeholder" @input="invalidatePreview" />
        </view>
        <text v-if="poemError" class="poem-field-error">{{ poemError }}</text>
        <view class="poem-policy">
          <text>未被新文本覆盖的后续世代</text>
-          <view
-            class="poem-policy__option"
-            @click="disableMissing = !disableMissing"
-          >
-            <image
-              :src="
-                disableMissing
-                  ? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png'
-                  : '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'
-              "
-              mode="aspectFit"
-            />
-            <text
-              :class="{
-                'poem-policy__option-text--active': disableMissing,
-              }"
-              >{{ disableMissing ? "停用并保留记录" : "保持原状态" }}</text
-            >
+          <view class="poem-policy__option" @click="toggleDisableMissing">
+            <image :src="disableMissing ? '/static/assets/foundation/transparent/a01-scroll-primary-v3.png' : '/static/assets/foundation/transparent/a01-scroll-secondary-v3.png'" mode="aspectFit" />
+            <text :class="{ 'poem-policy__option-text--active': disableMissing }">{{ disableMissing ? '停用并保留记录' : '保持原状态' }}</text>
          </view>
        </view>
-        <text class="poem-preview"
-          >预览：{{ previewSummary }}</text
-        >
+        <text class="poem-preview">{{ previewSummary }}</text>
        <view class="poem-editor__actions">
          <view class="poem-action" @click="requestLeaveEditor">
-            <image
-              src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png"
-              mode="aspectFit"
-            /><text class="poem-action__secondary">取消</text>
+            <image src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png" mode="aspectFit" /><text class="poem-action__secondary">取消</text>
          </view>
-          <view class="poem-action" @click="savePoems">
-            <image
-              src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
-              mode="aspectFit"
-            /><text>保存字辈</text>
+          <view class="poem-action" :class="{ 'poem-action--disabled': previewing || saving }" @click="previewPoems">
+            <image src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png" mode="aspectFit" /><text class="poem-action__secondary">{{ previewing ? '正在预览' : '服务端预览' }}</text>
+          </view>
+          <view class="poem-action" :class="{ 'poem-action--disabled': !canSave || saving }" @click="savePoems">
+            <image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>{{ saving ? '正在保存' : '保存字辈' }}</text>
          </view>
        </view>
      </view>

      <view v-else class="poem-state-card">
-        <text class="poem-list__eyebrow">{{
-          poemState === "empty"
-            ? "尚未建立字辈"
-            : poemState === "no-permission"
-              ? "权限不足"
-              : "字辈暂不可用"
-        }}</text>
-        <text class="poem-list__title">{{
-          poemState === "empty"
-            ? "从第一段传承字序开始"
-            : poemState === "no-permission"
-              ? "当前账号不能维护字辈"
-              : "暂时无法读取字辈诗"
-        }}</text>
-        <text class="poem-list__copy">{{
-          poemState === "empty"
-            ? "管理员可以一次录入连续字辈，系统会按世代拆分展示。"
-            : poemState === "no-permission"
-              ? "普通成员可以查看字辈，但只有具备管理权限的成员可以维护。"
-              : "请从家谱总览重新进入，或稍后再试。"
-        }}</text>
-        <view
-          v-if="poemState !== 'empty' || canManage"
-          class="poem-action"
-          @click="handleStateAction"
-        >
-          <image
-            src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
-            mode="aspectFit"
-          /><text>{{
-            poemState === "empty"
-              ? "开始录入"
-              : poemState === "no-permission"
-                ? "返回家谱总览"
-                : "重新查看"
-          }}</text>
+        <text class="poem-list__eyebrow">{{ poemState === 'empty' ? '尚未建立字辈' : '字辈暂不可用' }}</text>
+        <text class="poem-list__title">{{ poemState === 'empty' ? '当前读取没有正常状态字辈' : '暂时无法读取字辈诗' }}</text>
+        <text class="poem-list__copy">{{ stateCopy }}</text>
+        <view class="poem-action" @click="handleStateAction">
+          <image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>{{ poemState === 'empty' ? '读取维护列表' : '重新读取' }}</text>
        </view>
      </view>
    </view>
    <AppDialog
      :visible="discardVisible"
      title="放弃字辈修改？"
-      message="当前字辈草稿尚未保存，确认后将恢复进入编辑器前的内容。"
+      message="当前草稿尚未保存，确认后不会提交服务端。"
      confirm-text="放弃修改"
      cancel-text="继续编辑"
      show-cancel
@@ -179,9 +79,7 @@
      @confirm="confirmDiscard"
      @cancel="cancelDiscard"
    />
-    <view v-if="feedbackVisible" class="poem-feedback">
-      <text>本地字辈预览已更新</text>
-    </view>
+    <view v-if="feedbackMessage" class="poem-feedback"><text>{{ feedbackMessage }}</text></view>
  </view>
 </template>

@@ -192,85 +90,61 @@ import AppDialog from "@/components/AppDialog.vue";
 import AppLoading from "@/components/AppLoading.vue";
 import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
-import {
-  findGenealogyFixture,
-  getGenealogyFixtureAccess,
-} from "@/data/mock.js";
 import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
+import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
 import {
-  MAX_GENERATION_COUNT,
  MAX_GENERATION_POEM_INPUT_LENGTH,
-  MAX_GENERATION_TEXT_LENGTH,
  GENERATION_POEM_STATUS,
-  findFirstGenerationGap,
-  mergeGenerationPoemRows,
  validateGenerationPoemText,
 } from "@/utils/generation-poem.js";
 import { handleBackPress, runBackGuard } from "@/utils/navigation.js";

-const INITIAL_POEM_TEXT = "启宗敦本";
 const POEM_RENDER_BATCH_SIZE = 50;
-const PREVIEW_GENERATION_LIMIT = 12;
-const LOCAL_PREVIEW_START_GENERATION = 1;
-const LOCAL_CURRENT_GENERATION = 3;
 const genealogyId = ref("");
-const genealogyName = ref("家谱");
+const genealogyName = ref("当前家谱");
 const poemState = ref("loading");
 const poemError = ref("");
-const feedbackVisible = ref(false);
+const feedbackMessage = ref("");
 const discardVisible = ref(false);
 const canManage = ref(false);
-let feedbackTimer = null;
-const poemDraft = ref(INITIAL_POEM_TEXT);
-// OpenAPI 的 disableMissing 示例为 false；本地同样采用安全默认 false。停用后续世代是高影响动作，
-// 必须由谱主主动选择，不能把缩短一次本地草稿解释为默认停用历史记录。
+const previewing = ref(false);
+const saving = ref(false);
+const poemDraft = ref("");
 const disableMissing = ref(false);
-const editorOrigin = ref("list");
 const editorSnapshot = ref(null);
 const poemRows = ref([]);
 const visiblePoemCount = ref(POEM_RENDER_BATCH_SIZE);
-const visiblePoemRows = computed(() =>
-  poemRows.value.slice(0, visiblePoemCount.value),
-);
-const remainingPoemCount = computed(() =>
-  poemRows.value.length > visiblePoemCount.value
-    ? poemRows.value.length - visiblePoemCount.value
-    : 0,
-);
-const pageTitle = computed(() =>
-  poemState.value === "edit" ? "维护字辈诗" : "字辈诗",
-);
+const preview = ref(null);
+const previewSignature = ref("");
+const requestController = createRequestController();
+let requestSequence = 0;
+
+const visiblePoemRows = computed(() => poemRows.value.slice(0, visiblePoemCount.value));
+const remainingPoemCount = computed(() => Math.max(0, poemRows.value.length - visiblePoemCount.value));
+const pageTitle = computed(() => poemState.value === "edit" ? "维护字辈诗" : "字辈诗");
 const generationRangeTitle = computed(() => {
  if (!poemRows.value.length) return "尚未建立字辈";
  const first = poemRows.value[0].generationNo;
  const last = poemRows.value[poemRows.value.length - 1].generationNo;
  return first === last ? `第 ${first} 世字辈` : `第 ${first}—${last} 世字辈`;
 });
-const currentGenerationCopy = computed(() => {
-  const current = poemRows.value.find((item) => item.current);
-  return current
-    ? `当前为第 ${current.generationNo} 世“${current.generationText}”字辈。`
-    : `当前第 ${LOCAL_CURRENT_GENERATION} 世尚未被有效字辈覆盖。`;
-});
+const draftSignature = computed(() => `${poemDraft.value}\u0000${disableMissing.value}`);
+const canSave = computed(() => Boolean(preview.value) && previewSignature.value === draftSignature.value);
 const previewSummary = computed(() => {
-  const validation = validateGenerationPoemText(poemDraft.value);
-  if (!validation.valid) {
-    return poemDraft.value.trim() ? validation.message : "尚未录入字辈";
-  }
-  const visible = validation.generations
-    .slice(0, PREVIEW_GENERATION_LIMIT)
-    .join(" · ");
-  const remaining = validation.generations.length - PREVIEW_GENERATION_LIMIT;
-  return remaining > 0 ? `${visible} · …另 ${remaining} 代` : visible;
+  if (previewing.value) return "正在请求服务端预览。";
+  if (!preview.value) return "尚未请求服务端预览；预览成功后才可保存。";
+  return `服务端预览：新增 ${preview.value.createCount} 条，更新 ${preview.value.updateCount} 条，保留 ${preview.value.keepCount} 条，停用 ${preview.value.disableCount} 条。`;
 });
-const isDirty = computed(() =>
-  Boolean(
-    poemState.value === "edit" &&
-      editorSnapshot.value &&
-      (poemDraft.value !== editorSnapshot.value.poemDraft ||
-        disableMissing.value !== editorSnapshot.value.disableMissing),
-  ),
+const stateCopy = computed(() => poemState.value === "empty"
+  ? "正常字辈读取未返回条目。维护列表由后端单独鉴权，点击后才会判断是否可维护。"
+  : "未取得可消费的服务端响应，页面不会用本地字辈或本地权限替代。",
 );
+const isDirty = computed(() => Boolean(
+  poemState.value === "edit" && editorSnapshot.value && (
+    poemDraft.value !== editorSnapshot.value.poemDraft ||
+    disableMissing.value !== editorSnapshot.value.disableMissing
+  ),
+));
 const discardConfirmation = createDiscardConfirmation((visible) => {
  discardVisible.value = visible;
 });
@@ -278,439 +152,186 @@ const requestDiscardConfirmation = discardConfirmation.request;
 const confirmDiscard = discardConfirmation.confirm;
 const cancelDiscard = discardConfirmation.cancel;

-const resetPoemRows = () => {
-  const seed = validateGenerationPoemText(INITIAL_POEM_TEXT).generations;
-  poemDraft.value = INITIAL_POEM_TEXT;
-  poemRows.value = mergeGenerationPoemRows({
-    existingRows: [],
-    generationTexts: seed,
-    startGeneration: LOCAL_PREVIEW_START_GENERATION,
-    currentGeneration: LOCAL_CURRENT_GENERATION,
-    disableMissing: false,
-  });
+const applyRows = (rows) => {
+  poemRows.value = rows;
  visiblePoemCount.value = POEM_RENDER_BATCH_SIZE;
+  const named = rows.find((item) => item.genealogyName);
+  genealogyName.value = named?.genealogyName || "当前家谱";
 };
-
-const loadMorePoems = () => {
-  visiblePoemCount.value = Math.min(
-    poemRows.value.length,
-    visiblePoemCount.value + POEM_RENDER_BATCH_SIZE,
-  );
-};
-
-const loadPoems = (query = {}) => {
-  genealogyId.value = String(query.genealogyId || "");
-  const fixture = findGenealogyFixture(genealogyId.value);
-  if (!fixture) {
-    canManage.value = false;
+const loadPoems = async ({ management = false } = {}) => {
+  if (!genealogyId.value) {
    poemState.value = "error";
-    return;
+    return false;
  }
-  genealogyName.value = fixture.name || "家谱";
-  const accessRole = getGenealogyFixtureAccess(genealogyId.value).accessRole;
-  canManage.value = accessRole === "owner";
-  if (accessRole === "guest") {
-    poemState.value = "no-permission";
-    return;
+  const sequence = ++requestSequence;
+  poemState.value = "loading";
+  poemError.value = "";
+  try {
+    const rows = management
+      ? await appApi.getGenerationPoemManagement(genealogyId.value, { requestController })
+      : await appApi.getGenerationPoems(genealogyId.value, { requestController });
+    if (sequence !== requestSequence) return false;
+    applyRows(rows);
+    canManage.value = management;
+    poemState.value = rows.length ? "list" : "empty";
+    return true;
+  } catch (error) {
+    if (isRequestCancelled(error) || sequence !== requestSequence) return false;
+    poemState.value = "error";
+    return false;
  }
-  resetPoemRows();
-  const requestedState =
-    query.state === "loading"
-      ? "loading"
-      : query.state === "empty"
-        ? "empty"
-        : query.state === "edit"
-          ? "edit"
-          : query.state === "no-permission"
-            ? "no-permission"
-            : query.state === "error"
-              ? "error"
-              : "list";
-  if (requestedState === "empty") {
-    poemDraft.value = "";
-    poemRows.value = [];
-  }
-  if (requestedState === "edit") {
-    if (!canManage.value) {
-      poemState.value = "no-permission";
-      return;
-    }
-    poemState.value = "list";
-    openEditor("list");
-    return;
-  }
-  poemState.value = requestedState;
 };
-
-onLoad(loadPoems);
-onUnload(() => {
-  const timer = feedbackTimer;
-  feedbackTimer = null;
-  if (timer) clearTimeout(timer);
-  discardConfirmation.dispose();
-});
-
-const openEditor = (origin = poemState.value) => {
+const loadMorePoems = () => {
+  visiblePoemCount.value = Math.min(poemRows.value.length, visiblePoemCount.value + POEM_RENDER_BATCH_SIZE);
+};
+const invalidatePreview = () => {
+  poemError.value = "";
+  preview.value = null;
+  previewSignature.value = "";
+};
+const toggleDisableMissing = () => {
+  disableMissing.value = !disableMissing.value;
+  invalidatePreview();
+};
+const openEditor = () => {
  if (!canManage.value) return false;
-  editorOrigin.value = origin === "empty" ? "empty" : "list";
-  editorSnapshot.value = Object.freeze({
-    poemDraft: poemDraft.value,
-    disableMissing: disableMissing.value,
-  });
+  poemDraft.value = poemRows.value
+    .filter((item) => item.status === GENERATION_POEM_STATUS.ACTIVE)
+    .map((item) => item.generationText)
+    .join(" ");
+  disableMissing.value = false;
+  preview.value = null;
+  previewSignature.value = "";
+  editorSnapshot.value = Object.freeze({ poemDraft: poemDraft.value, disableMissing: disableMissing.value });
  poemState.value = "edit";
  return true;
 };
-const restoreEditorSnapshot = () => {
-  if (!editorSnapshot.value) return;
-  poemDraft.value = editorSnapshot.value.poemDraft;
-  disableMissing.value = editorSnapshot.value.disableMissing;
+const enterManagement = async () => {
+  if (previewing.value || saving.value) return;
+  const loaded = await loadPoems({ management: true });
+  if (loaded) openEditor();
 };
 const requestLeaveEditor = async () => {
  if (isDirty.value) {
    const confirmed = await requestDiscardConfirmation();
    if (!confirmed) return false;
  }
-  restoreEditorSnapshot();
-  poemState.value = editorOrigin.value;
+  poemState.value = poemRows.value.length ? "list" : "empty";
  editorSnapshot.value = null;
  poemError.value = "";
  return true;
 };
-const requestBack = () =>
-  runBackGuard({
-    transientOpen: discardVisible.value,
-    internalTrail: poemState.value === "edit",
-    "close-transient": cancelDiscard,
-    "pop-internal-trail": requestLeaveEditor,
-  });
-
-onBackPress((event) => handleBackPress(event, requestBack));
-
-const handleStateAction = () => {
-  if (poemState.value === "empty") return openEditor("empty");
-  if (poemState.value === "error")
-    return loadPoems({ genealogyId: genealogyId.value });
-  return requestBack();
-};
-const savePoems = () => {
+const validateDraft = () => {
  const validation = validateGenerationPoemText(poemDraft.value);
  if (!validation.valid) {
    poemError.value = validation.message;
-    return;
+    return false;
  }
-  const lastGeneration =
-    LOCAL_PREVIEW_START_GENERATION + validation.generations.length - 1;
-  if (LOCAL_CURRENT_GENERATION > lastGeneration) {
-    poemError.value = `请至少录入到当前第 ${LOCAL_CURRENT_GENERATION} 世`;
-    return;
-  }
-  const nextRows = mergeGenerationPoemRows({
-    existingRows: poemRows.value,
-    generationTexts: validation.generations,
-    startGeneration: LOCAL_PREVIEW_START_GENERATION,
-    currentGeneration: LOCAL_CURRENT_GENERATION,
-    disableMissing: disableMissing.value,
-  });
-  const activeRows = nextRows.filter(
-    (item) => item.status === GENERATION_POEM_STATUS.ACTIVE,
-  );
-  const lastActiveGeneration = activeRows.length
-    ? activeRows[activeRows.length - 1].generationNo
-    : null;
-  const firstGap = lastActiveGeneration === null
-    ? null
-    : findFirstGenerationGap(
-        nextRows,
-        lastActiveGeneration + 1,
-        LOCAL_PREVIEW_START_GENERATION,
-      );
-  if (firstGap !== null) {
-    poemError.value = `第 ${firstGap} 世字辈缺失；请补齐完整序列，或选择停用未覆盖的后续记录`;
-    return;
-  }
-  poemRows.value = nextRows;
-  visiblePoemCount.value = POEM_RENDER_BATCH_SIZE;
-  editorSnapshot.value = null;
-  poemState.value = "list";
-  feedbackVisible.value = true;
-  if (feedbackTimer) clearTimeout(feedbackTimer);
-  const timer = setTimeout(() => {
-    if (feedbackTimer !== timer) return;
-    feedbackVisible.value = false;
-    feedbackTimer = null;
-  }, 1800);
-  feedbackTimer = timer;
+  return true;
 };
+const previewPoems = async () => {
+  if (previewing.value || saving.value || !validateDraft()) return;
+  previewing.value = true;
+  poemError.value = "";
+  try {
+    preview.value = await appApi.previewGenerationPoemBatch(genealogyId.value, {
+      poemText: poemDraft.value,
+      disableMissing: disableMissing.value,
+    }, { requestController });
+    previewSignature.value = draftSignature.value;
+  } catch (error) {
+    if (!isRequestCancelled(error)) poemError.value = error?.message || "服务端预览失败，请稍后重试。";
+  } finally {
+    previewing.value = false;
+  }
+};
+const savePoems = async () => {
+  if (!canSave.value || saving.value || !validateDraft()) return;
+  saving.value = true;
+  poemError.value = "";
+  try {
+    await appApi.saveGenerationPoemBatch(genealogyId.value, {
+      poemText: poemDraft.value,
+      disableMissing: disableMissing.value,
+    }, { requestController });
+    feedbackMessage.value = "服务端字辈已保存，正在刷新维护列表。";
+    const loaded = await loadPoems({ management: true });
+    if (!loaded) {
+      poemError.value = "字辈已提交，但维护列表刷新失败；请稍后重新查看。";
+      return;
+    }
+    editorSnapshot.value = null;
+    feedbackMessage.value = "服务端字辈已保存并已刷新。";
+  } catch (error) {
+    if (!isRequestCancelled(error)) poemError.value = error?.message || "字辈保存失败，请稍后重试。";
+  } finally {
+    saving.value = false;
+  }
+};
+const requestBack = () => runBackGuard({
+  transientOpen: discardVisible.value,
+  internalTrail: poemState.value === "edit",
+  submitting: previewing.value || saving.value,
+  "close-transient": cancelDiscard,
+  "pop-internal-trail": requestLeaveEditor,
+  "block-submitting": () => true,
+});
+const handleStateAction = () => poemState.value === "empty" ? enterManagement() : loadPoems();
+
+onLoad((query) => {
+  genealogyId.value = String(query?.genealogyId || "");
+  loadPoems();
+});
+onBackPress((event) => handleBackPress(event, requestBack));
+onUnload(() => {
+  ++requestSequence;
+  requestController.abort();
+  discardConfirmation.dispose();
+});
 </script>

 <style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
-.poem-page {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-  background: $paper;
-}
-.poem-page__header {
-  z-index: 3;
-}
-.poem-panel {
-  @include adaptive.adaptive-genealogy-state-panel;
-  z-index: 2;
-  width: calc(100% - 32rpx);
-  margin: 18rpx auto 0;
-  padding: 76rpx 8%;
-  box-sizing: border-box;
-}
-.poem-panel > .app-loading {
-  grid-area: 1 / 1 / -1 / -1;
-}
-.poem-list,
-.poem-editor,
-.poem-state-card {
-  min-width: 0;
-}
-.poem-list__eyebrow {
-  display: block;
-  color: $brand-red;
-  font-size: 23rpx;
-  letter-spacing: 3rpx;
-}
-.poem-list__title {
-  display: block;
-  margin-top: 11rpx;
-  color: $ink;
-  font-family: "STKaiti", "KaiTi", serif;
-  font-size: 35rpx;
-  font-weight: 700;
-}
-.poem-list__copy {
-  display: block;
-  margin-top: 10rpx;
-  color: $ink-muted;
-  font-size: 24rpx;
-  line-height: 1.55;
-}
-.poem-rows {
-  margin-top: 18rpx;
-}
-.poem-load-more {
-  display: flex;
-  min-height: 64rpx;
-  align-items: center;
-  justify-content: center;
-  margin-top: 14rpx;
-  background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png")
-    center / contain no-repeat;
-}
-.poem-load-more text {
-  color: $ink;
-  font-size: 23rpx;
-  font-weight: 700;
-}
-.poem-row {
-  @include adaptive.adaptive-genealogy-form-field;
-  display: grid;
-  min-height: 72rpx;
-  margin-top: 10rpx;
-  grid-template-columns: minmax(116rpx, 38%) minmax(0, 1fr) auto;
-  align-items: center;
-}
-.poem-row__number {
-  z-index: 1;
-  grid-column: 1;
-  margin-left: 24rpx;
-  color: $ink-muted;
-  font-size: 23rpx;
-}
-.poem-row__character {
-  z-index: 1;
-  grid-column: 2;
-  min-width: 0;
-  padding: 12rpx 16rpx 12rpx 0;
-  color: $ink;
-  font-family: "STKaiti", "KaiTi", serif;
-  font-size: 32rpx;
-  font-weight: 700;
-  line-height: 1.4;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
-.poem-row__status {
-  z-index: 1;
-  grid-column: 3;
-  margin-right: 22rpx;
-  color: $ink-muted;
-  font-size: 22rpx;
-}
-.poem-row--current .poem-row__character,
-.poem-row--current .poem-row__status {
-  color: $brand-red;
-}
-.poem-row--disabled .poem-row__character,
-.poem-row--disabled .poem-row__status {
-  color: $ink-muted;
-  opacity: 0.62;
-}
-.poem-action {
-  display: grid;
-  width: 100%;
-  min-height: 76rpx;
-  margin-top: 20rpx;
-}
-.poem-action image {
-  grid-area: 1 / 1;
-  width: 100%;
-  height: 100%;
-}
-.poem-action text {
-  z-index: 1;
-  display: flex;
-  grid-area: 1 / 1;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #fff9ed;
-  font-size: 25rpx;
-  font-weight: 700;
-  letter-spacing: 2rpx;
-}
-.poem-field {
-  @include adaptive.adaptive-genealogy-form-field;
-  display: grid;
-  min-height: 118rpx;
-  margin-top: 22rpx;
-}
-.poem-field > text {
-  z-index: 1;
-  grid-area: 1 / 1;
-  align-self: center;
-  margin-left: 24rpx;
-  color: $ink;
-  font-size: 22rpx;
-  font-weight: 700;
-}
-.poem-field textarea {
-  z-index: 1;
-  grid-area: 1 / 1;
-  box-sizing: border-box;
-  width: auto;
-  min-width: 0;
-  min-height: 118rpx;
-  margin-right: 20rpx;
-  margin-left: 164rpx;
-  padding-top: 34rpx;
-  color: $ink;
-  font-size: 22rpx;
-  line-height: 1.5;
-}
-.poem-placeholder {
-  color: #a79884;
-}
-.poem-field-error {
-  display: block;
-  margin-top: 4rpx;
-  color: $brand-red;
-  font-size: 24rpx;
-  line-height: 34rpx;
-  text-align: right;
-}
-.poem-policy {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 22rpx;
-}
-.poem-policy > text {
-  color: $ink;
-  font-size: 24rpx;
-  font-weight: 700;
-}
-.poem-policy__option {
-  display: grid;
-  width: 248rpx;
-  min-height: 62rpx;
-}
-.poem-policy__option image {
-  grid-area: 1 / 1;
-  width: 100%;
-  height: 100%;
-}
-.poem-policy__option text {
-  z-index: 1;
-  display: flex;
-  grid-area: 1 / 1;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: $ink;
-  font-size: 23rpx;
-  font-weight: 700;
-}
-.poem-policy__option .poem-policy__option-text--active {
-  color: #fff9ed;
-}
-.poem-preview {
-  display: block;
-  margin-top: 22rpx;
-  color: $ink-muted;
-  font-size: 23rpx;
-  line-height: 1.6;
-}
-.poem-editor__actions {
-  display: flex;
-  gap: 14rpx;
-  margin-top: 18rpx;
-}
-.poem-editor__actions .poem-action {
-  width: calc(50% - 7rpx);
-  margin-top: 0;
-}
-.poem-action .poem-action__secondary {
-  color: $ink;
-}
-.poem-state-card {
-  text-align: center;
-}
-.poem-state--empty,
-.poem-state--error,
-.poem-state--no-permission {
-  padding: 180rpx 4% 70rpx;
-}
-.poem-state-card .poem-list__eyebrow {
-  text-align: center;
-}
-.poem-state-card .poem-list__copy {
-  margin-top: 22rpx;
-}
-.poem-state-card .poem-action {
-  width: 420rpx;
-  max-width: 100%;
-  margin: 34rpx auto 0;
-}
-.poem-feedback {
-  position: fixed;
-  z-index: 30;
-  top: 138rpx;
-  left: 50%;
-  display: flex;
-  min-width: 260rpx;
-  min-height: 74rpx;
-  align-items: center;
-  justify-content: center;
-  padding: 0 34rpx;
-  transform: translateX(-50%);
-  background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png")
-    center / contain no-repeat;
-}
-.poem-feedback text {
-  z-index: 1;
-  color: $ink;
-  font-size: 22rpx;
-}
-@media (min-width: 400px) {
-  .poem-panel {
-    width: calc(100% - 48rpx);
-  }
-}
+.poem-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
+.poem-page__header { z-index: 3; }
+.poem-panel { @include adaptive.adaptive-genealogy-state-panel; z-index: 2; width: calc(100% - 32rpx); margin: 18rpx auto 0; padding: 76rpx 8%; box-sizing: border-box; }
+.poem-panel > .app-loading { grid-area: 1 / 1 / -1 / -1; }
+.poem-list, .poem-editor, .poem-state-card { min-width: 0; }
+.poem-list__eyebrow { display: block; color: $brand-red; font-size: 23rpx; letter-spacing: 3rpx; }
+.poem-list__title { display: block; margin-top: 11rpx; color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 35rpx; font-weight: 700; }
+.poem-list__copy { display: block; margin-top: 10rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.55; }
+.poem-rows { margin-top: 18rpx; }
+.poem-load-more { display: flex; min-height: 64rpx; align-items: center; justify-content: center; margin-top: 14rpx; background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png") center / contain no-repeat; }
+.poem-load-more text { color: $ink; font-size: 23rpx; font-weight: 700; }
+.poem-row { @include adaptive.adaptive-genealogy-form-field; display: grid; min-height: 72rpx; margin-top: 10rpx; grid-template-columns: minmax(116rpx, 38%) minmax(0, 1fr) auto; align-items: center; }
+.poem-row__number { z-index: 1; grid-column: 1; margin-left: 24rpx; color: $ink-muted; font-size: 23rpx; }
+.poem-row__character { z-index: 1; grid-column: 2; min-width: 0; padding: 12rpx 16rpx 12rpx 0; color: $ink; font-family: "STKaiti", "KaiTi", serif; font-size: 32rpx; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; word-break: break-word; }
+.poem-row__status { z-index: 1; grid-column: 3; margin-right: 22rpx; color: $ink-muted; font-size: 22rpx; }
+.poem-row--disabled .poem-row__character, .poem-row--disabled .poem-row__status { color: $ink-muted; opacity: .62; }
+.poem-action { display: grid; width: 100%; min-height: 76rpx; margin-top: 20rpx; }
+.poem-action--disabled { opacity: .55; }
+.poem-action image { grid-area: 1 / 1; width: 100%; height: 100%; }
+.poem-action text { z-index: 1; display: flex; grid-area: 1 / 1; align-items: center; justify-content: center; height: 100%; color: #fff9ed; font-size: 25rpx; font-weight: 700; letter-spacing: 2rpx; }
+.poem-field { @include adaptive.adaptive-genealogy-form-field; display: grid; min-height: 118rpx; margin-top: 22rpx; }
+.poem-field > text { z-index: 1; grid-area: 1 / 1; align-self: center; margin-left: 24rpx; color: $ink; font-size: 22rpx; font-weight: 700; }
+.poem-field textarea { z-index: 1; grid-area: 1 / 1; box-sizing: border-box; width: auto; min-width: 0; min-height: 118rpx; margin-right: 20rpx; margin-left: 164rpx; padding-top: 34rpx; color: $ink; font-size: 22rpx; line-height: 1.5; }
+.poem-placeholder { color: #a79884; }
+.poem-field-error { display: block; margin-top: 4rpx; color: $brand-red; font-size: 24rpx; line-height: 34rpx; text-align: right; }
+.poem-policy { display: flex; align-items: center; justify-content: space-between; margin-top: 22rpx; }
+.poem-policy > text { color: $ink; font-size: 24rpx; font-weight: 700; }
+.poem-policy__option { display: grid; width: 248rpx; min-height: 62rpx; }
+.poem-policy__option image { grid-area: 1 / 1; width: 100%; height: 100%; }
+.poem-policy__option text { z-index: 1; display: flex; grid-area: 1 / 1; align-items: center; justify-content: center; height: 100%; color: $ink; font-size: 23rpx; font-weight: 700; }
+.poem-policy__option .poem-policy__option-text--active { color: #fff9ed; }
+.poem-preview { display: block; margin-top: 22rpx; color: $ink-muted; font-size: 23rpx; line-height: 1.6; }
+.poem-editor__actions { display: flex; gap: 14rpx; margin-top: 18rpx; }
+.poem-editor__actions .poem-action { width: calc((100% - 28rpx) / 3); margin-top: 0; }
+.poem-action .poem-action__secondary { color: $ink; }
+.poem-state-card { padding: 180rpx 4% 70rpx; text-align: center; }
+.poem-state-card .poem-list__eyebrow { text-align: center; }
+.poem-state-card .poem-list__copy { margin-top: 22rpx; }
+.poem-state-card .poem-action { width: 420rpx; max-width: 100%; margin: 34rpx auto 0; }
+.poem-feedback { position: fixed; z-index: 30; top: 138rpx; left: 50%; display: flex; min-width: 260rpx; min-height: 74rpx; align-items: center; justify-content: center; padding: 0 34rpx; transform: translateX(-50%); background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png") center / contain no-repeat; }
+.poem-feedback text { z-index: 1; color: $ink; font-size: 22rpx; }
+@media (min-width: 400px) { .poem-panel { width: calc(100% - 48rpx); } }
 </style>