60%

2026-07-24 18:03:02 +08:00
parent c7f278fe79
commit ec8486b035
86 changed files with 7943 additions and 1841 deletions
@@ -1,13 +1,18 @@
-<!-- 页面编号：R-03；用途：亲友往来入口。列表 DTO 缺失时不展示 fixture 记录。 -->
+<!-- 页面编号：R-03；用途：读取并展示当前家谱的亲友往来记录。 -->
 <template>
  <view class="gift-page">
    <ModulePageBackground module="records" />
-    <view class="page-header"><PageHeader title="贺礼簿" :action="hasValidContext ? '新建' : ''" @action="createRelative" /></view>
+    <view class="page-header"><PageHeader title="贺礼簿" :action="valid ? '新建' : ''" custom-back @back="returnToFamily" @action="createRelative" /></view>
    <view class="page-content">
-      <view class="state-card">
-        <text>{{ stateCopy.title }}</text>
-        <text>{{ stateCopy.copy }}</text>
-        <AppButton block :label="stateCopy.action" @click="handleStateAction" />
+      <view v-if="!valid" class="state-card"><text>贺礼簿入口无效</text><AppButton block label="返回上一页" @click="returnToFamily" /></view>
+      <view v-else-if="state === 'loading'" class="state-card"><AppLoading text="正在读取亲友往来" /></view>
+      <view v-else-if="state === 'error'" class="state-card"><text>暂时无法读取亲友往来</text><AppButton block type="secondary" label="重新加载" @click="loadRecords" /></view>
+      <view v-else-if="state === 'empty'" class="state-card"><text>还没有亲友往来记录</text><AppButton block label="新建往来记录" @click="createRelative" /></view>
+      <view v-else class="record-list">
+        <view v-for="item in records" :key="item.id" class="record-card">
+          <view><text>{{ item.name }}</text><text>{{ item.relation }}{{ item.event ? ` · ${item.event}` : '' }}</text><text v-if="item.time || item.content">{{ item.time || item.content }}</text></view>
+          <text v-if="item.amount">¥{{ item.amount }}</text>
+        </view>
      </view>
    </view>
  </view>
@@ -15,36 +20,54 @@

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

 const genealogyId = ref("");
-const hasValidContext = ref(false);
-const stateCopy = computed(() => hasValidContext.value
-  ? { title: "贺礼簿待后端字段合同", copy: "往来列表没有声明记录 ID、关系、事项、时间、金额或备注字段；页面已停止展示本地记录。", action: "新建往来记录" }
-  : { title: "贺礼簿入口无效", copy: "没有取得有效家谱标识，页面不会展示其他家谱记录。", action: "返回上一页" },
-);
-onLoad((query) => {
-  genealogyId.value = String(query?.genealogyId || "");
-  hasValidContext.value = /^[1-9]\d*$/.test(genealogyId.value);
-});
-const createRelative = () => hasValidContext.value
-  ? openPage("R04", { genealogyId: genealogyId.value, mode: "create" }, "R03")
-  : Promise.resolve(false);
-const handleStateAction = () => hasValidContext.value ? createRelative() : goBack();
+const records = ref([]);
+const state = ref("loading");
+const controller = createRequestController();
+let active = true;
+const valid = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
+const loadRecords = async () => {
+  if (!valid.value) return;
+  controller.abort();
+  state.value = "loading";
+  try {
+    const rows = await appApi.getRelativeRecords(genealogyId.value, { requestController: controller });
+    if (!active) return;
+    records.value = rows.map((item) => ({
+      id: String(item.relativeId || ""),
+      name: String(item.relativeName || "未命名亲友"),
+      relation: String(item.relationName || ""),
+      event: String(item.eventName || ""),
+      time: String(item.eventTime || ""),
+      amount: item.giftAmount == null || item.giftAmount === "" ? "" : String(item.giftAmount),
+      content: String(item.recordContent || ""),
+    })).filter((item) => /^[1-9]\d*$/.test(item.id));
+    state.value = records.value.length ? "ready" : "empty";
+  } catch (error) {
+    if (!active || isRequestCancelled(error)) return;
+    state.value = "error";
+  }
+};
+const returnToFamily = () => valid.value ? returnTo("F01", { genealogyId: genealogyId.value }) : goBack();
+const createRelative = () => valid.value ? openPage("R04", { genealogyId: genealogyId.value, mode: "create" }, "R03") : Promise.resolve(false);
+onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); if (valid.value) loadRecords(); });
+onShow(() => { if (valid.value && state.value !== "loading") loadRecords(); });
+onUnload(() => { active = false; controller.abort(); });
 </script>

 <style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
 .gift-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
-.page-header, .page-content { z-index: 1; }
-.page-content { padding: 18rpx 24rpx 72rpx; }
-.state-card { box-sizing: border-box; min-height: 340rpx; padding: 78rpx 52rpx 50rpx; text-align: center; @include adaptive.adaptive-records-content; }
-.state-card > text { display: block; }
-.state-card > text:first-child { color: $ink; font-size: 35rpx; font-weight: 700; }
-.state-card > text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
-.state-card .app-button { margin-top: 28rpx; }
+.page-header, .page-content { z-index: 1; }.page-content { padding: 18rpx 24rpx 72rpx; }
+.state-card, .record-card { @include adaptive.adaptive-records-content; }
+.state-card { display: flex; min-height: 320rpx; flex-direction: column; align-items: center; justify-content: center; padding: 42rpx; text-align: center; color: $ink; font-size: 28rpx; }.state-card .app-button { width: 100%; margin-top: 24rpx; }
+.record-list { display: flex; flex-direction: column; gap: 16rpx; }.record-card { display: flex; min-height: 138rpx; align-items: center; justify-content: space-between; gap: 18rpx; padding: 28rpx 32rpx; }.record-card > view { min-width: 0; flex: 1; }.record-card text { display: block; }.record-card > view text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 30rpx; font-weight: 700; overflow-wrap: anywhere; }.record-card > view text:not(:first-child) { margin-top: 7rpx; color: $ink-muted; font-size: 21rpx; line-height: 1.45; overflow-wrap: anywhere; }.record-card > text { flex: 0 0 auto; color: $brand-red; font-size: 22rpx; }
 </style>
@@ -1,4 +1,4 @@
-<!-- 页面编号：R-04；用途：按 Apifox 已声明字段创建亲友往来记录。 -->
+<!-- 页面编号：R-04；用途：按 Apifox 的完整 AppRelativeRecordBody 创建亲友往来记录。 -->
 <template>
  <view class="gift-editor-page" :class="`relative-editor-state--${editorState}`">
    <ModulePageBackground module="records" />
@@ -6,20 +6,24 @@
    <view class="page-content">
      <view v-if="editorState === 'form'" class="form-card">
        <text>记录一份家人往来</text>
-        <text class="form-copy">页面只发送已声明且可映射的字段；媒体需要 `mediaOssIds`，没有上传 owner 时不提交。</text>
-        <view v-for="field in fields" :key="field.key" class="field-row">
-          <text>{{ field.label }}</text>
-          <textarea v-if="field.key === 'recordContent'" v-model="form[field.key]" auto-height :placeholder="`请输入${field.label}`" @input="submitError = ''" />
-          <input v-else v-model="form[field.key]" :type="field.key === 'giftAmount' ? 'digit' : 'text'" :placeholder="`请输入${field.label}`" @input="submitError = ''" />
+        <text class="form-copy">除亲友姓名外，其他字段均可按需填写；留空时不提交该字段。</text>
+        <view class="field-row"><text><text class="required-mark">*</text>亲友姓名</text><input v-model="form.relativeName" placeholder="请输入亲友姓名" @input="submitError = ''" /></view>
+        <view class="field-row"><text>关系称谓</text><input v-model="form.relationName" placeholder="请输入关系称谓" @input="submitError = ''" /></view>
+        <view class="field-row"><text>礼仪事项</text><input v-model="form.eventName" placeholder="请输入礼仪事项" @input="submitError = ''" /></view>
+        <view class="field-row"><text>事项时间</text><input v-model="form.eventTime" placeholder="请输入事项时间" @input="submitError = ''" /></view>
+        <view class="field-row"><text>礼金金额</text><input v-model="form.giftAmount" type="digit" placeholder="请输入礼金金额" @input="submitError = ''" /></view>
+        <view class="field-row field-row--textarea"><text>往来备注</text><textarea v-model="form.recordContent" auto-height placeholder="记录往来内容" @input="submitError = ''" /></view>
+        <view class="upload-field">
+          <view><text>相关图片</text><text>图片选定后会先取得真实上传回执，并在提交记录时关联。</text></view>
+          <button class="upload-button" :disabled="isUploading || isSubmitting" @click="uploadImage">{{ isUploading ? '上传中…' : '添加图片' }}</button>
+          <text v-for="(receipt, index) in mediaReceipts" :key="`${receipt.ossId}-${index}`">已上传：{{ receipt.fileName || '图片' }}</text>
+          <text v-if="uploadError" class="save-error">{{ uploadError }}</text>
        </view>
+        <view class="field-row"><text>排序值</text><input v-model="form.sortOrder" type="number" placeholder="数值越小越靠前" @input="submitError = ''" /></view>
        <text v-if="submitError" class="save-error">{{ submitError }}</text>
-        <AppButton block :disabled="isSubmitting" :label="isSubmitting ? '正在提交' : '提交往来记录'" @click="saveRelative" />
-      </view>
-      <view v-else class="state-card">
-        <text>{{ resultCopy.title }}</text>
-        <text>{{ resultCopy.copy }}</text>
-        <AppButton block :label="resultCopy.action" @click="handleResultAction" />
+        <AppButton block :disabled="isSubmitting || isUploading" :label="isSubmitting ? '正在提交' : '提交往来记录'" @click="saveRelative" />
      </view>
+      <view v-else class="state-card"><text>{{ resultCopy.title }}</text><text>{{ resultCopy.copy }}</text><AppButton block :label="resultCopy.action" @click="handleResultAction" /></view>
    </view>
    <AppDialog :visible="discardVisible" :close-on-mask="false" eyebrow="放弃确认" title="放弃当前填写？" message="尚未提交的内容将从当前页面清除。" confirm-text="确认放弃" cancel-text="继续填写" show-cancel @confirm="confirmDiscard" @cancel="cancelDiscard" />
  </view>
@@ -34,61 +38,56 @@ import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
 import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
 import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
+import { isImagePickCancelled, pickAndUploadImage } from "@/utils/resumable-image-upload.js";
 import { goBack, handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";

 const genealogyId = ref("");
 const editorState = ref("form");
 const isSubmitting = ref(false);
+const isUploading = ref(false);
 const discardVisible = ref(false);
 const submitError = ref("");
-const form = reactive({ relativeName: "", relationName: "", eventName: "", eventTime: "", giftAmount: "", recordContent: "" });
-const fields = [
-  { key: "relativeName", label: "亲友姓名" },
-  { key: "relationName", label: "关系称谓" },
-  { key: "eventName", label: "礼仪事项" },
-  { key: "eventTime", label: "事项日期" },
-  { key: "giftAmount", label: "礼金金额" },
-  { key: "recordContent", label: "往来备注" },
-];
+const uploadError = ref("");
+const form = reactive({ relativeName: "", relationName: "", eventName: "", eventTime: "", giftAmount: "", recordContent: "", sortOrder: "" });
+const mediaReceipts = ref([]);
 const requestController = createRequestController();
-const isDirty = computed(() => Object.values(form).some((value) => String(value).trim()));
+const mediaOssIds = computed(() => mediaReceipts.value.map((item) => item.ossId).join(","));
+const isDirty = computed(() => Object.values(form).some((value) => String(value).trim()) || mediaReceipts.value.length > 0);
 const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
 const resultCopy = computed(() => editorState.value === "success"
-  ? { title: "往来记录已提交服务端", copy: "服务端已返回成功信封。列表仍缺条目 DTO，返回后不会生成本地记录。", action: "返回贺礼簿" }
-  : { title: "往来记录入口无效", copy: "当前只有新建请求可映射；详情和修改缺可靠条目 DTO/记录 ID 来源，页面不从 fixture 进入。", action: "返回上一页" },
+  ? { title: "往来记录已提交服务端", copy: "返回贺礼簿后会重新读取服务端记录。", action: "返回贺礼簿" }
+  : { title: "往来记录入口无效", copy: "没有取得有效家谱标识，页面不会创建无归属记录。", action: "返回上一页" },
 );
 const discardConfirmation = createDiscardConfirmation((visible) => { discardVisible.value = visible; });
 const requestDiscardConfirmation = discardConfirmation.request;
 const confirmDiscard = discardConfirmation.confirm;
 const cancelDiscard = discardConfirmation.cancel;
+
 onLoad((query) => {
  genealogyId.value = String(query?.genealogyId || "");
  if (!hasValidContext.value || query?.mode !== "create") editorState.value = "invalid";
 });
+const uploadImage = async () => {
+  if (isUploading.value || isSubmitting.value) return;
+  isUploading.value = true;
+  uploadError.value = "";
+  try {
+    mediaReceipts.value = [...mediaReceipts.value, await pickAndUploadImage({ requestController })];
+  } catch (error) {
+    if (!isImagePickCancelled(error) && !isRequestCancelled(error)) uploadError.value = error?.message || "图片上传失败，请稍后重试。";
+  } finally {
+    isUploading.value = false;
+  }
+};
 const saveRelative = async () => {
-  if (isSubmitting.value || !hasValidContext.value) return;
-  const relativeName = form.relativeName.trim();
-  const giftAmountText = form.giftAmount.trim();
-  if (!relativeName) {
-    submitError.value = "请填写亲友姓名";
-    return;
-  }
-  if (giftAmountText && !Number.isFinite(Number(giftAmountText))) {
-    submitError.value = "礼金金额必须是数字";
-    return;
-  }
+  if (isSubmitting.value || isUploading.value || !hasValidContext.value) return;
+  if (!form.relativeName.trim()) { submitError.value = "请填写亲友姓名"; return; }
  isSubmitting.value = true;
  submitError.value = "";
  try {
-    await appApi.createRelativeRecord(genealogyId.value, {
-      relativeName,
-      relationName: form.relationName,
-      eventName: form.eventName,
-      eventTime: form.eventTime,
-      ...(giftAmountText ? { giftAmount: Number(giftAmountText) } : {}),
-      recordContent: form.recordContent,
-    }, { requestController });
-    Object.keys(form).forEach((key) => { form[key] = ""; });
+    await appApi.createRelativeRecord(genealogyId.value, { ...form, mediaOssIds: mediaOssIds.value }, { requestController });
+    Object.assign(form, { relativeName: "", relationName: "", eventName: "", eventTime: "", giftAmount: "", recordContent: "", sortOrder: "" });
+    mediaReceipts.value = [];
    editorState.value = "success";
  } catch (error) {
    if (!isRequestCancelled(error)) submitError.value = error?.message || "往来记录提交失败，请稍后重试。";
@@ -96,17 +95,8 @@ const saveRelative = async () => {
    isSubmitting.value = false;
  }
 };
-const requestBack = () => runBackGuard({
-  transientOpen: discardVisible.value,
-  dirty: isDirty.value,
-  submitting: isSubmitting.value,
-  "close-transient": cancelDiscard,
-  "block-submitting": () => true,
-  "confirm-discard": requestDiscardConfirmation,
-});
-const handleResultAction = () => editorState.value === "success"
-  ? returnTo("R03", { genealogyId: genealogyId.value })
-  : goBack();
+const requestBack = () => runBackGuard({ transientOpen: discardVisible.value, dirty: isDirty.value, submitting: isSubmitting.value || isUploading.value, "close-transient": cancelDiscard, "block-submitting": () => true, "confirm-discard": requestDiscardConfirmation });
+const handleResultAction = () => editorState.value === "success" ? returnTo("R03", { genealogyId: genealogyId.value }) : goBack();
 onBackPress((event) => handleBackPress(event, requestBack));
 onUnmounted(() => { requestController.abort(); discardConfirmation.dispose(); });
 </script>
@@ -114,18 +104,13 @@ onUnmounted(() => { requestController.abort(); discardConfirmation.dispose(); })
 <style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
 .gift-editor-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
-.page-header, .page-content { z-index: 1; }
-.page-content { padding: 18rpx 24rpx 72rpx; }
+.page-header, .page-content { z-index: 1; }.page-content { padding: 18rpx 24rpx 72rpx; }
 .form-card, .state-card { box-sizing: border-box; padding: 46rpx; @include adaptive.adaptive-records-content; }
-.form-card > text:first-child, .state-card > text:first-child { display: block; color: $ink; font-size: 34rpx; font-weight: 700; }
-.form-copy { display: block; margin-top: 12rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.55; }
-.field-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12rpx 20rpx; min-height: 82rpx; margin-top: 14rpx; padding: 14rpx 24rpx; box-sizing: border-box; @include adaptive.adaptive-records-field; }
-.field-row > text { color: $ink; font-size: 23rpx; font-weight: 700; }
-.field-row input, .field-row textarea { min-width: 0; color: $ink; font-size: 23rpx; text-align: right; }
-.field-row textarea { min-height: 72rpx; text-align: left; }
-.save-error { display: block; margin-top: 14rpx; color: $brand-red; font-size: 22rpx; }
-.form-card .app-button { margin-top: 18rpx; }
-.state-card { min-height: 340rpx; padding-top: 80rpx; text-align: center; }
-.state-card > text:nth-child(2) { display: block; margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
-.state-card .app-button { margin-top: 28rpx; }
+.form-card > text:first-child, .state-card > text:first-child { display: block; color: $ink; font-size: 34rpx; font-weight: 700; }.form-copy { display: block; margin-top: 12rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.55; }
+.field-row { display: grid; grid-template-columns: 142rpx minmax(0, 1fr); align-items: center; gap: 12rpx 20rpx; min-height: 82rpx; margin-top: 14rpx; padding: 14rpx 24rpx; box-sizing: border-box; @include adaptive.adaptive-records-field; }
+.field-row > text, .upload-field > view > text:first-child { color: $ink; font-size: 23rpx; font-weight: 700; }.required-mark { display: inline-block; margin-right: 4rpx; color: $brand-red; font-size: 26rpx; transform: translateY(-3rpx); }
+.field-row input, .field-row textarea { min-width: 0; color: $ink; font-size: 23rpx; text-align: right; }.field-row--textarea { align-items: start; }.field-row textarea { min-height: 72rpx; text-align: left; }
+.upload-field { display: grid; gap: 12rpx; margin-top: 14rpx; padding: 18rpx 24rpx; @include adaptive.adaptive-records-field; }.upload-field > view > text { display: block; }.upload-field > view > text:last-child { margin-top: 6rpx; color: $ink-muted; font-size: 20rpx; line-height: 1.45; }
+.upload-button { justify-self: start; min-height: 60rpx; margin: 0; padding: 0 20rpx; border: 1rpx solid rgba(159, 23, 15, .42); border-radius: 8rpx; background: transparent; color: $brand-red; font-size: 22rpx; }.upload-field > text { color: $ink-muted; font-size: 21rpx; overflow-wrap: anywhere; }
+.save-error { display: block; margin-top: 14rpx; color: $brand-red; font-size: 22rpx; }.form-card .app-button { margin-top: 18rpx; }.state-card { min-height: 340rpx; padding-top: 80rpx; text-align: center; }.state-card > text:nth-child(2) { display: block; margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }.state-card .app-button { margin-top: 28rpx; }
 </style>
@@ -1,31 +1,39 @@
-<!-- 页面编号：R-05；用途：礼仪活动入口。活动列表 operation 未声明。 -->
 <template>
  <view class="ritual-list-page">
    <ModulePageBackground module="records" />
-    <view class="page-header"><PageHeader title="礼仪活动" custom-back @back="returnToFamily" /></view>
-    <view class="page-content"><view class="state-card"><text>礼仪活动列表暂未开放</text><text>Apifox 只有活动详情、修改、献礼和删除相关 operation，没有活动列表或新建活动 owner；页面不再展示本地礼仪活动。</text><AppButton block :label="hasValidContext ? '返回家族动态' : '返回上一页'" @click="returnToFamily" /></view></view>
+    <view class="page-header"><PageHeader title="礼仪活动" :action="valid ? '新建' : ''" custom-back @back="returnToFamily" @action="createCeremony" /></view>
+    <view class="page-content">
+      <view v-if="!valid" class="state-card"><text>礼仪活动入口无效</text><AppButton block label="返回上一页" @click="returnToFamily" /></view>
+      <view v-else-if="state === 'loading'" class="state-card"><AppLoading text="正在读取礼仪活动" /></view>
+      <view v-else-if="state === 'error'" class="state-card"><text>暂时无法读取礼仪活动</text><AppButton block type="secondary" label="重新加载" @click="loadCeremonies" /></view>
+      <view v-else-if="state === 'empty'" class="state-card"><text>还没有礼仪活动</text><AppButton block label="新建礼仪活动" @click="createCeremony" /></view>
+      <view v-else class="ceremony-list"><view v-for="item in ceremonies" :key="item.id" class="ceremony-card" @click="openCeremony(item)"><view><text>{{ item.title }}</text><text>{{ item.type }}{{ item.time ? ` · ${item.time}` : '' }}</text><text v-if="item.description">{{ item.description }}</text></view><text>{{ item.giftCount }} 笔献礼</text></view></view>
+    </view>
  </view>
 </template>
+
 <script setup>
 import { computed, ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
+import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
+import AppLoading from "@/components/AppLoading.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
-import { goBack, returnTo } from "@/utils/navigation.js";
-const genealogyId = ref("");
-const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
-onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); });
-const returnToFamily = () => hasValidContext.value ? returnTo("F01", { genealogyId: genealogyId.value }) : goBack();
+import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
+import { goBack, openPage, returnTo } from "@/utils/navigation.js";
+
+const genealogyId = ref(""); const ceremonies = ref([]); const state = ref("loading"); const controller = createRequestController(); let active = true;
+const valid = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
+const loadCeremonies = async () => { if (!valid.value) return; controller.abort(); state.value = "loading"; try { const rows = await appApi.getCeremonies(genealogyId.value, { requestController: controller }); if (!active) return; ceremonies.value = rows.map((item) => ({ id: String(item.ceremonyId), title: String(item.ceremonyTitle || "未命名活动"), type: String(item.ceremonyType || ""), time: String(item.ceremonyTime || ""), description: String(item.ceremonyDesc || ""), giftCount: Number.isSafeInteger(item.giftCount) ? item.giftCount : 0 })).filter((item) => /^[1-9]\d*$/.test(item.id)); state.value = ceremonies.value.length ? "ready" : "empty"; } catch (error) { if (!active || isRequestCancelled(error)) return; state.value = "error"; } };
+const returnToFamily = () => valid.value ? returnTo("F01", { genealogyId: genealogyId.value }) : goBack();
+const createCeremony = () => valid.value ? openPage("R07", { genealogyId: genealogyId.value, mode: "create" }, "R05") : Promise.resolve(false);
+const openCeremony = (item) => openPage("R06", { genealogyId: genealogyId.value, ceremonyId: item.id }, "R05");
+onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); if (valid.value) loadCeremonies(); });
+onShow(() => { if (valid.value && state.value !== "loading") loadCeremonies(); });
+onUnload(() => { active = false; controller.abort(); });
 </script>
+
 <style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
-.ritual-list-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
-.page-header, .page-content { z-index: 1; }
-.page-content { padding: 18rpx 24rpx 72rpx; }
-.state-card { box-sizing: border-box; min-height: 340rpx; padding: 78rpx 52rpx 50rpx; text-align: center; @include adaptive.adaptive-records-content; }
-.state-card text { display: block; }
-.state-card text:first-child { color: $ink; font-size: 35rpx; font-weight: 700; }
-.state-card text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
-.state-card .app-button { margin-top: 28rpx; }
+.ritual-list-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{padding:18rpx 24rpx 72rpx}.state-card,.ceremony-card{@include adaptive.adaptive-records-content}.state-card{display:flex;min-height:320rpx;flex-direction:column;align-items:center;justify-content:center;padding:42rpx;text-align:center;color:$ink;font-size:28rpx}.state-card .app-button{width:100%;margin-top:24rpx}.ceremony-list{display:flex;flex-direction:column;gap:16rpx}.ceremony-card{display:flex;min-height:138rpx;align-items:center;justify-content:space-between;gap:18rpx;padding:28rpx 32rpx}.ceremony-card>view{min-width:0;flex:1}.ceremony-card text{display:block}.ceremony-card>view text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:30rpx;font-weight:700;overflow-wrap:anywhere}.ceremony-card>view text:not(:first-child){margin-top:7rpx;color:$ink-muted;font-size:21rpx;line-height:1.45;overflow-wrap:anywhere}.ceremony-card>text{flex:0 0 auto;color:$brand-red;font-size:21rpx}
 </style>
@@ -1,21 +1,12 @@
-<!-- 页面编号：R-06；用途：礼仪详情。详情响应无展示 DTO 时保持关闭。 -->
 <template>
-  <view class="ritual-detail-page"><ModulePageBackground module="records" /><view class="page-header"><PageHeader title="礼仪详情" custom-back @back="returnToList" /></view><view class="page-content"><view class="state-card"><text>{{ stateCopy.title }}</text><text>{{ stateCopy.copy }}</text><AppButton block :label="stateCopy.action" @click="returnToList" /></view></view></view>
+  <view class="ritual-detail-page"><ModulePageBackground module="records" /><view class="page-header"><PageHeader title="礼仪详情" custom-back @back="returnToList" /></view><view class="page-content"><view v-if="!valid" class="state-card"><text>礼仪入口无效</text><AppButton block label="返回上一页" @click="returnToList" /></view><view v-else-if="state === 'loading'" class="state-card"><AppLoading text="正在读取礼仪详情" /></view><view v-else-if="state === 'error'" class="state-card"><text>暂时无法读取礼仪详情</text><AppButton block type="secondary" label="重新加载" @click="loadDetail" /></view><view v-else class="detail-card"><text>{{ detail.title }}</text><text>{{ detail.type }}{{ detail.time ? ` · ${detail.time}` : '' }}</text><text v-if="detail.location">地点：{{ detail.location }}</text><text v-if="detail.description">{{ detail.description }}</text><text>已有 {{ detail.giftCount }} 笔献礼</text></view></view></view>
 </template>
 <script setup>
-import { computed, ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
-import AppButton from "@/components/AppButton.vue";
-import ModulePageBackground from "@/components/ModulePageBackground.vue";
-import PageHeader from "@/components/PageHeader.vue";
-import { goBack, returnTo } from "@/utils/navigation.js";
-const genealogyId = ref(""); const ceremonyId = ref("");
-const valid = computed(() => /^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(ceremonyId.value));
-const stateCopy = computed(() => valid.value ? { title: "礼仪详情待后端字段合同", copy: "详情接口没有声明活动类型、标题、时间、地点、说明或受邀人字段；页面不再展示本地礼仪详情。", action: "返回礼仪活动" } : { title: "礼仪入口无效", copy: "没有取得有效家谱或活动标识。", action: "返回上一页" });
-onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); ceremonyId.value = String(query?.ceremonyId || ""); });
-const returnToList = () => /^[1-9]\d*$/.test(genealogyId.value) ? returnTo("R05", { genealogyId: genealogyId.value }) : goBack();
+import { computed, ref } from "vue"; import { onLoad, onUnload } from "@dcloudio/uni-app"; import AppButton from "@/components/AppButton.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 { goBack, returnTo } from "@/utils/navigation.js";
+const genealogyId=ref(""); const ceremonyId=ref(""); const state=ref("loading"); const detail=ref({title:"",type:"",time:"",location:"",description:"",giftCount:0}); const controller=createRequestController(); let active=true; const valid=computed(()=>/^[1-9]\d*$/.test(genealogyId.value)&&/^[1-9]\d*$/.test(ceremonyId.value));
+const loadDetail=async()=>{if(!valid.value)return;controller.abort();state.value="loading";try{const item=await appApi.getCeremonyDetail(genealogyId.value,ceremonyId.value,{requestController:controller});if(!active)return;detail.value={title:String(item.ceremonyTitle||"未命名活动"),type:String(item.ceremonyType||""),time:String(item.ceremonyTime||""),location:String(item.location||item.locationAddress||""),description:String(item.ceremonyDesc||""),giftCount:Number.isSafeInteger(item.giftCount)?item.giftCount:0};state.value="ready";}catch(error){if(!active||isRequestCancelled(error))return;state.value="error";}};
+onLoad((query)=>{genealogyId.value=String(query?.genealogyId||"");ceremonyId.value=String(query?.ceremonyId||"");if(valid.value)loadDetail();else state.value="invalid";});onUnload(()=>{active=false;controller.abort();});const returnToList=()=>/^[1-9]\d*$/.test(genealogyId.value)?returnTo("R05",{genealogyId:genealogyId.value}):goBack();
 </script>
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
-.ritual-detail-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }.page-header,.page-content { z-index: 1; }.page-content { padding: 18rpx 24rpx 72rpx; }.state-card { box-sizing: border-box; min-height: 340rpx; padding: 78rpx 52rpx 50rpx; text-align: center; @include adaptive.adaptive-records-content; }.state-card text { display:block; }.state-card text:first-child { color:$ink; font-size:35rpx; font-weight:700; }.state-card text:nth-child(2) { margin-top:18rpx; color:$ink-muted; font-size:24rpx; line-height:1.65; }.state-card .app-button { margin-top:28rpx; }
+@use "../../styles/adaptive-frame-profiles.scss" as adaptive;.ritual-detail-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{padding:18rpx 24rpx 72rpx}.state-card,.detail-card{@include adaptive.adaptive-records-content}.state-card{display:flex;min-height:320rpx;flex-direction:column;align-items:center;justify-content:center;padding:42rpx;text-align:center;color:$ink;font-size:28rpx}.state-card .app-button{width:100%;margin-top:24rpx}.detail-card{display:flex;min-height:320rpx;flex-direction:column;padding:42rpx}.detail-card text{display:block}.detail-card text:first-child{color:$ink;font-family:STKaiti,KaiTi,serif;font-size:36rpx;font-weight:700}.detail-card text:not(:first-child){margin-top:14rpx;color:$ink-muted;font-size:23rpx;line-height:1.6}
 </style>
@@ -1,19 +1,142 @@
-<!-- 页面编号：R-07；用途：礼仪活动创建/编辑。创建 owner 缺失，编辑无可靠详情来源。 -->
+<!-- 页面编号：R-07；用途：创建礼仪活动。 -->
 <template>
-  <view class="ritual-editor-page"><ModulePageBackground module="records" /><view class="page-header"><PageHeader title="礼仪活动" custom-back @back="returnToList" /></view><view class="page-content"><view class="state-card"><text>礼仪活动维护暂未开放</text><text>当前没有新建活动 operation；修改虽有 operation，但没有可消费的详情 DTO 或可靠活动 ID 来源。本页不再生成本地创建或编辑预览。</text><AppButton block :label="hasValidContext ? '返回礼仪活动' : '返回上一页'" @click="returnToList" /></view></view></view>
+  <view class="ritual-editor-page" :class="`ritual-state--${pageState}`">
+    <ModulePageBackground module="records" />
+    <view class="page-header"><PageHeader title="新建礼仪活动" custom-back @back="requestBack" /></view>
+    <view class="page-content">
+      <view v-if="pageState === 'form'" class="editor-card">
+        <text class="editor-card__title">记录一场家族礼仪</text>
+        <text class="editor-card__note">带红色星号的内容不能为空；其余内容可按需要补充。</text>
+
+        <view class="field-row">
+          <text class="field-row__label"><text class="required-mark">*</text>活动类型</text>
+          <input v-model="form.ceremonyType" maxlength="30" placeholder="例如：祭祖、家宴" placeholder-class="placeholder" @input="clearError" />
+        </view>
+        <view class="field-row">
+          <text class="field-row__label"><text class="required-mark">*</text>活动标题</text>
+          <input v-model="form.ceremonyTitle" maxlength="60" placeholder="请输入活动标题" placeholder-class="placeholder" @input="clearError" />
+        </view>
+        <view class="textarea-field">
+          <text class="textarea-field__label">活动说明</text>
+          <textarea v-model="form.ceremonyDesc" maxlength="500" auto-height placeholder="补充活动安排或说明" placeholder-class="placeholder" @input="clearError" />
+        </view>
+        <view class="field-row">
+          <text class="field-row__label">活动时间</text>
+          <input v-model="form.ceremonyTime" maxlength="30" placeholder="例如：2026-07-24 10:00:00" placeholder-class="placeholder" @input="clearError" />
+        </view>
+        <view class="field-row">
+          <text class="field-row__label">地点</text>
+          <input v-model="form.location" maxlength="60" placeholder="请输入地点" placeholder-class="placeholder" @input="clearError" />
+        </view>
+        <view class="cover-field">
+          <view>
+            <text class="cover-field__label">封面图片</text>
+            <text class="cover-field__hint">选择图片后会取得真实上传回执，并在保存时关联。</text>
+          </view>
+          <button class="upload-button" :disabled="uploading || submitting" @click="uploadCover">{{ uploading ? '上传中…' : '选择图片' }}</button>
+          <text v-if="coverFileName" class="upload-receipt">已上传：{{ coverFileName }}</text>
+        </view>
+        <text v-if="uploadError" class="form-error">{{ uploadError }}</text>
+        <view class="field-row">
+          <text class="field-row__label">排序值</text>
+          <input v-model="form.sortOrder" type="number" placeholder="数值越小越靠前" placeholder-class="placeholder" @input="clearError" />
+        </view>
+        <text v-if="submitError" class="form-error">{{ submitError }}</text>
+        <AppButton block :disabled="uploading || submitting" :label="submitting ? '正在保存…' : '保存活动'" @click="submit" />
+      </view>
+      <view v-else class="state-card">
+        <text>{{ stateCopy.title }}</text>
+        <text>{{ stateCopy.copy }}</text>
+        <AppButton block :label="stateCopy.action" @click="handleStateAction" />
+      </view>
+    </view>
+  </view>
+  <AppDialog :visible="discardVisible" title="放弃活动草稿？" message="当前内容尚未保存到服务端，返回后不会保留。" confirm-text="放弃并返回" cancel-text="继续填写" show-cancel :close-on-mask="false" @confirm="confirmation.confirm" @cancel="confirmation.cancel" />
 </template>
+
 <script setup>
-import { computed, ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
+import { computed, onUnmounted, reactive, ref } from "vue";
+import { onBackPress, onLoad } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
+import AppDialog from "@/components/AppDialog.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
-import { goBack, returnTo } from "@/utils/navigation.js";
-const genealogyId = ref(""); const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
-onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); });
+import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
+import { isImagePickCancelled, pickAndUploadImage, toConsumerOssId } from "@/utils/resumable-image-upload.js";
+import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
+import { goBack, handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";
+
+const genealogyId = ref("");
+const pageState = ref("form");
+const form = reactive({ ceremonyType: "", ceremonyTitle: "", ceremonyDesc: "", ceremonyTime: "", location: "", sortOrder: "" });
+const coverOssId = ref(null);
+const coverFileName = ref("");
+const uploadError = ref("");
+const submitError = ref("");
+const uploading = ref(false);
+const submitting = ref(false);
+const controller = createRequestController();
+const discardVisible = ref(false);
+const confirmation = createDiscardConfirmation((visible) => { discardVisible.value = visible; });
+
+const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
+const isDirty = computed(() => coverOssId.value || Object.values(form).some((value) => value.trim()));
+const stateCopy = computed(() => pageState.value === "success"
+  ? { title: "礼仪活动已提交服务端", copy: "服务端已返回成功结果。", action: "返回礼仪活动" }
+  : { title: "礼仪活动入口无效", copy: "没有取得有效家谱标识。", action: "返回上一页" });
+
+onLoad((query) => {
+  genealogyId.value = String(query?.genealogyId || "");
+  if (!hasValidContext.value || query?.mode !== "create") pageState.value = "invalid";
+});
+const clearError = () => { submitError.value = ""; };
+const uploadCover = async () => {
+  if (uploading.value || submitting.value) return;
+  uploading.value = true;
+  uploadError.value = "";
+  try {
+    const receipt = await pickAndUploadImage({ requestController: controller });
+    coverOssId.value = toConsumerOssId(receipt.ossId);
+    coverFileName.value = receipt.fileName || "活动封面";
+  } catch (error) {
+    if (!isImagePickCancelled(error) && !isRequestCancelled(error)) uploadError.value = error?.message || "封面图片上传失败，请稍后重试";
+  } finally {
+    uploading.value = false;
+  }
+};
+const submit = async () => {
+  if (uploading.value || submitting.value || !hasValidContext.value) return;
+  if (!form.ceremonyType.trim() || !form.ceremonyTitle.trim()) {
+    submitError.value = !form.ceremonyType.trim() ? "请填写活动类型" : "请填写活动标题";
+    return;
+  }
+  submitting.value = true;
+  submitError.value = "";
+  try {
+    await appApi.createCeremony(genealogyId.value, { ...form, ...(coverOssId.value ? { coverOssId: coverOssId.value } : {}) }, { requestController: controller });
+    pageState.value = "success";
+  } catch (error) {
+    if (!isRequestCancelled(error)) submitError.value = error?.message || "礼仪活动保存失败，请稍后重试";
+  } finally {
+    submitting.value = false;
+  }
+};
 const returnToList = () => hasValidContext.value ? returnTo("R05", { genealogyId: genealogyId.value }) : goBack();
+const requestBack = () => runBackGuard({ transientOpen: discardVisible.value, dirty: isDirty.value, submitting: uploading.value || submitting.value, "close-transient": confirmation.cancel, "block-submitting": () => true, "confirm-discard": confirmation.request });
+const handleStateAction = () => pageState.value === "success" ? returnToList() : goBack();
+onBackPress((event) => handleBackPress(event, requestBack));
+onUnmounted(() => { controller.abort(); confirmation.dispose(); });
 </script>
+
 <style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
-.ritual-editor-page { display:flex; min-height:100vh; flex-direction:column; background:$paper; }.page-header,.page-content { z-index:1; }.page-content { padding:18rpx 24rpx 72rpx; }.state-card { box-sizing:border-box; min-height:340rpx; padding:78rpx 52rpx 50rpx; text-align:center; @include adaptive.adaptive-records-content; }.state-card text { display:block; }.state-card text:first-child { color:$ink; font-size:35rpx; font-weight:700; }.state-card text:nth-child(2) { margin-top:18rpx; color:$ink-muted; font-size:24rpx; line-height:1.65; }.state-card .app-button { margin-top:28rpx; }
+.ritual-editor-page { display:flex; min-height:100vh; flex-direction:column; background:$paper; }
+.page-header,.page-content { z-index:1; }.page-content { flex:1; padding:22rpx 28rpx 72rpx; }
+.editor-card,.state-card { @include adaptive.adaptive-records-content; box-sizing:border-box; }
+.editor-card { padding:38rpx 32rpx 42rpx; }.editor-card__title,.editor-card__note,.field-row__label,.textarea-field__label,.form-error { display:block; }
+.editor-card__title { color:$ink; font-family:STKaiti,KaiTi,serif; font-size:38rpx; font-weight:700; }.editor-card__note { margin-top:10rpx; color:$ink-muted; font-size:23rpx; line-height:1.55; }
+.field-row { display:flex; min-height:92rpx; align-items:center; margin-top:20rpx; padding:0 18rpx; border:1rpx solid rgba(128,89,49,.34); border-radius:12rpx; background:rgba(255,252,245,.7); }.field-row__label { width:150rpx; flex:0 0 auto; color:$ink; font-size:26rpx; font-weight:700; }.field-row input { min-width:0; flex:1; color:$ink; font-size:25rpx; }.required-mark { display:inline-block; margin-right:4rpx; color:$brand-red; font-size:26rpx; transform:translateY(-3rpx); }.placeholder { color:#9e8e79; }
+.textarea-field,.cover-field { margin-top:20rpx; padding:18rpx; border:1rpx solid rgba(128,89,49,.34); border-radius:12rpx; background:rgba(255,252,245,.7); }.textarea-field__label,.cover-field__label { color:$ink; font-size:26rpx; font-weight:700; }.textarea-field textarea { display:block; width:100%; min-height:122rpx; margin-top:12rpx; color:$ink; font-size:25rpx; line-height:1.55; }
+.cover-field { display:grid; gap:12rpx; }.cover-field__hint { display:block; margin-top:5rpx; color:$ink-muted; font-size:20rpx; line-height:1.45; }.upload-button { justify-self:start; min-height:60rpx; margin:0; padding:0 20rpx; border:1rpx solid rgba(159,23,15,.42); border-radius:8rpx; background:transparent; color:$brand-red; font-size:22rpx; }.upload-receipt { color:$ink-muted; font-size:21rpx; overflow-wrap:anywhere; }.form-error { margin-top:10rpx; color:$brand-red; font-size:22rpx; line-height:1.45; }.editor-card .app-button { margin-top:28rpx; }
+.state-card { min-height:340rpx; padding:78rpx 52rpx 50rpx; text-align:center; }.state-card text { display:block; }.state-card text:first-child { color:$ink; font-size:35rpx; font-weight:700; }.state-card text:nth-child(2) { margin-top:18rpx; color:$ink-muted; font-size:24rpx; line-height:1.65; }.state-card .app-button { margin-top:28rpx; }
 </style>
@@ -1,22 +1,156 @@
-<!-- 页面编号：R-08；用途：成长记录创建。列表 DTO 未声明，创建仅提交可映射字段。 -->
+<!-- 页面编号：R-08；用途：读取、新建当前家谱的成长记录。 -->
 <template>
-  <view class="record-page"><ModulePageBackground module="records" /><view class="page-header"><PageHeader title="成长日志" custom-back @back="requestBack" /></view><view class="page-content"><view v-if="state === 'form'" class="form-card"><text>新建成长记录</text><text class="form-copy">列表和详情没有展示 DTO；本页只提交标题、日期和内容，不猜测人物绑定、类型、提醒或媒体字段。</text><view class="field"><text>记录标题</text><input v-model="form.title" maxlength="40" placeholder="请输入记录标题" @input="error = ''" /></view><view class="field"><text>记录日期</text><input v-model="form.date" placeholder="例如：2026-07-24" @input="error = ''" /></view><view class="field"><text>记录内容</text><textarea v-model="form.content" auto-height maxlength="1200" placeholder="记录成长片段" @input="error = ''" /></view><text v-if="error" class="error">{{ error }}</text><AppButton block :disabled="submitting" :label="submitting ? '正在提交' : '提交成长记录'" @click="submit" /></view><view v-else class="state-card"><text>{{ result.title }}</text><text>{{ result.copy }}</text><AppButton block :label="result.action" @click="resultAction" /></view></view><AppDialog :visible="discardVisible" title="放弃成长记录？" message="尚未提交的内容将被清除。" confirm-text="放弃并返回" cancel-text="继续填写" show-cancel :close-on-mask="false" @confirm="confirmDiscard" @cancel="cancelDiscard" /></view>
+  <view class="record-page">
+    <ModulePageBackground module="records" />
+    <view class="page-header">
+      <PageHeader title="成长日志" :action="valid && view === 'list' ? '新建' : ''" custom-back @back="requestBack" @action="openCreate" />
+    </view>
+    <view class="page-content">
+      <view v-if="view === 'form'" class="form-card">
+        <text>新建成长记录</text>
+        <text class="form-copy">红色 * 为必填项，其余内容可按需补充。</text>
+        <view class="field field--context"><text>关联人物</text><view><text>{{ personName }}</text><text>{{ personId ? '已自动关联' : '未关联人物' }}</text></view></view>
+        <view class="field"><text>记录类型</text><input v-model="form.recordType" placeholder="请输入记录类型" @input="error = ''" /></view>
+        <view class="field"><text><text class="required-mark">*</text>记录标题</text><input v-model="form.recordTitle" placeholder="请输入记录标题" @input="error = ''" /></view>
+        <view class="field field--textarea"><text>记录内容</text><textarea v-model="form.recordContent" auto-height placeholder="记录成长片段" @input="error = ''" /></view>
+        <view class="field"><text>记录时间</text><input v-model="form.recordDate" placeholder="请输入记录时间" @input="error = ''" /></view>
+        <view class="field"><text>提醒时间</text><input v-model="form.remindTime" placeholder="请输入提醒时间" @input="error = ''" /></view>
+        <view class="upload-field">
+          <view><text>相关图片</text><text>图片选定后会先取得真实上传回执，并在提交记录时关联。</text></view>
+          <button class="upload-button" :disabled="uploading || submitting" @click="uploadImage">{{ uploading ? '上传中…' : '添加图片' }}</button>
+          <text v-for="(receipt, index) in mediaReceipts" :key="`${receipt.ossId}-${index}`">已上传：{{ receipt.fileName || '图片' }}</text>
+          <text v-if="uploadError" class="error">{{ uploadError }}</text>
+        </view>
+        <view class="field"><text>排序值</text><input v-model="form.sortOrder" type="number" placeholder="数值越小越靠前" @input="error = ''" /></view>
+        <text v-if="error" class="error">{{ error }}</text>
+        <view class="form-actions"><AppButton type="secondary" label="取消" @click="cancelCreate" /><AppButton :disabled="submitting || uploading" :label="submitting ? '正在提交' : '提交成长记录'" @click="submit" /></view>
+      </view>
+      <view v-else-if="!valid" class="state-card"><text>成长日志入口无效</text><AppButton block label="返回上一页" @click="requestBack" /></view>
+      <view v-else-if="listState === 'loading'" class="state-card"><AppLoading text="正在读取成长记录" /></view>
+      <view v-else-if="listState === 'error'" class="state-card"><text>暂时无法读取成长记录</text><AppButton block type="secondary" label="重新加载" @click="loadRecords" /></view>
+      <view v-else-if="listState === 'empty'" class="state-card"><text>还没有成长记录</text><AppButton block label="新建成长记录" @click="openCreate" /></view>
+      <view v-else class="record-list">
+        <text v-if="saveNotice" class="save-notice">成长记录已提交，并已从服务端重新读取。</text>
+        <view v-for="item in records" :key="item.id" class="record-card">
+          <view><text>{{ item.title }}</text><text>{{ item.type || item.personName }}{{ item.date ? ` · ${item.date}` : '' }}</text><text v-if="item.content">{{ item.content }}</text></view>
+        </view>
+      </view>
+    </view>
+    <AppDialog :visible="discardVisible" title="放弃成长记录？" message="尚未提交的内容将被清除。" confirm-text="放弃并返回" cancel-text="继续填写" show-cancel :close-on-mask="false" @confirm="confirmDiscard" @cancel="cancelDiscard" />
+  </view>
 </template>
+
 <script setup>
 import { computed, onUnmounted, reactive, ref } from "vue";
-import { onBackPress, onLoad } from "@dcloudio/uni-app";
-import AppButton from "@/components/AppButton.vue"; import AppDialog from "@/components/AppDialog.vue"; import ModulePageBackground from "@/components/ModulePageBackground.vue"; import PageHeader from "@/components/PageHeader.vue";
-import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js"; import { createDiscardConfirmation } from "@/utils/discard-confirmation.js"; import { goBack, handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";
-const genealogyId = ref(""); const state = ref("form"); const submitting = ref(false); const error = ref(""); const discardVisible = ref(false); const form = reactive({ title: "", date: "", content: "" }); const controller = createRequestController();
-const valid = computed(() => /^[1-9]\d*$/.test(genealogyId.value)); const dirty = computed(() => Object.values(form).some((value) => value.trim()));
-const result = computed(() => state.value === "success" ? { title: "成长记录已提交服务端", copy: "服务端已返回成功信封；列表仍缺条目 DTO，不生成本地记录。", action: "返回记录首页" } : { title: "成长日志入口无效", copy: "没有取得有效家谱标识。", action: "返回上一页" });
-const confirmation = createDiscardConfirmation((visible) => { discardVisible.value = visible; }); const confirmDiscard = confirmation.confirm; const cancelDiscard = confirmation.cancel;
-onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); if (!valid.value) state.value = "invalid"; });
-const submit = async () => { if (submitting.value || !valid.value) return; const recordTitle = form.title.trim(); if (!recordTitle) { error.value = "请填写记录标题"; return; } submitting.value = true; error.value = ""; try { await appApi.createGrowthRecord(genealogyId.value, { recordTitle, recordDate: form.date, recordContent: form.content }, { requestController: controller }); Object.keys(form).forEach((key) => { form[key] = ""; }); state.value = "success"; } catch (cause) { if (!isRequestCancelled(cause)) error.value = cause?.message || "成长记录提交失败，请稍后重试。"; } finally { submitting.value = false; } };
-const requestBack = () => runBackGuard({ transientOpen: discardVisible.value, dirty: dirty.value, submitting: submitting.value, "close-transient": cancelDiscard, "block-submitting": () => true, "confirm-discard": confirmation.request }); const resultAction = () => state.value === "success" ? returnTo("R08", { genealogyId: genealogyId.value }) : goBack();
-onBackPress((event) => handleBackPress(event, requestBack)); onUnmounted(() => { controller.abort(); confirmation.dispose(); });
+import { onBackPress, onLoad, onShow } 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 { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
+import { isImagePickCancelled, pickAndUploadImage } from "@/utils/resumable-image-upload.js";
+import { goBack, handleBackPress, runBackGuard } from "@/utils/navigation.js";
+
+const genealogyId = ref("");
+const personId = ref("");
+const personName = ref("当前家谱");
+const view = ref("list");
+const listState = ref("loading");
+const records = ref([]);
+const saveNotice = ref(false);
+const submitting = ref(false);
+const uploading = ref(false);
+const error = ref("");
+const uploadError = ref("");
+const discardVisible = ref(false);
+const form = reactive({ lineagePersonId: "", recordType: "", recordTitle: "", recordContent: "", recordDate: "", remindTime: "", sortOrder: "" });
+const mediaReceipts = ref([]);
+const controller = createRequestController();
+let active = true;
+const valid = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
+const mediaOssIds = computed(() => mediaReceipts.value.map((item) => item.ossId).join(","));
+const dirty = computed(() => Object.values(form).some((value) => String(value).trim()) || mediaReceipts.value.length > 0);
+const confirmation = createDiscardConfirmation((visible) => { discardVisible.value = visible; });
+const confirmDiscard = () => { confirmation.confirm(); resetForm(); view.value = "list"; };
+const cancelDiscard = confirmation.cancel;
+
+const resetForm = () => {
+  Object.assign(form, { lineagePersonId: personId.value, recordType: "", recordTitle: "", recordContent: "", recordDate: "", remindTime: "", sortOrder: "" });
+  mediaReceipts.value = [];
+  error.value = "";
+  uploadError.value = "";
+};
+const loadRecords = async () => {
+  if (!valid.value) return;
+  controller.abort();
+  listState.value = "loading";
+  try {
+    const rows = await appApi.getGrowthRecords(genealogyId.value, { requestController: controller });
+    if (!active) return;
+    records.value = rows.map((item) => ({
+      id: String(item.recordId || ""),
+      title: String(item.recordTitle || "未命名记录"),
+      type: String(item.recordType || ""),
+      personName: String(item.lineagePersonName || "未关联人物"),
+      date: String(item.recordDate || item.remindTime || ""),
+      content: String(item.recordContent || ""),
+    })).filter((item) => /^[1-9]\d*$/.test(item.id));
+    listState.value = records.value.length ? "ready" : "empty";
+  } catch (cause) {
+    if (!active || isRequestCancelled(cause)) return;
+    listState.value = "error";
+  }
+};
+const openCreate = () => { if (!valid.value) return; saveNotice.value = false; resetForm(); view.value = "form"; };
+const cancelCreate = () => { resetForm(); view.value = "list"; };
+const uploadImage = async () => {
+  if (uploading.value || submitting.value) return;
+  uploading.value = true;
+  uploadError.value = "";
+  try { mediaReceipts.value = [...mediaReceipts.value, await pickAndUploadImage({ requestController: controller })]; }
+  catch (cause) { if (!isImagePickCancelled(cause) && !isRequestCancelled(cause)) uploadError.value = cause?.message || "图片上传失败，请稍后重试。"; }
+  finally { uploading.value = false; }
+};
+const submit = async () => {
+  if (submitting.value || uploading.value || !valid.value) return;
+  if (!form.recordTitle.trim()) { error.value = "请填写记录标题"; return; }
+  submitting.value = true;
+  error.value = "";
+  try {
+    await appApi.createGrowthRecord(genealogyId.value, { ...form, mediaOssIds: mediaOssIds.value }, { requestController: controller });
+    resetForm();
+    view.value = "list";
+    saveNotice.value = true;
+    await loadRecords();
+  } catch (cause) {
+    if (!isRequestCancelled(cause)) error.value = cause?.message || "成长记录提交失败，请稍后重试。";
+  } finally { submitting.value = false; }
+};
+const requestBack = () => view.value !== "form"
+  ? goBack()
+  : runBackGuard({ transientOpen: discardVisible.value, dirty: dirty.value, submitting: submitting.value || uploading.value, "close-transient": cancelDiscard, "block-submitting": () => true, "confirm-discard": confirmation.request });
+
+onLoad((query) => {
+  genealogyId.value = String(query?.genealogyId || "");
+  personId.value = /^[1-9]\d*$/.test(String(query?.personId || "")) ? String(query.personId) : "";
+  personName.value = String(query?.personName || (personId.value ? "当前查看的人物" : "当前家谱"));
+  resetForm();
+  if (valid.value) loadRecords();
+  else listState.value = "invalid";
+});
+onShow(() => { if (valid.value && view.value === "list" && listState.value !== "loading") loadRecords(); });
+onBackPress((event) => handleBackPress(event, requestBack));
+onUnmounted(() => { active = false; controller.abort(); confirmation.dispose(); });
 </script>
+
 <style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
-.record-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{padding:18rpx 24rpx 72rpx}.form-card,.state-card{box-sizing:border-box;padding:46rpx;@include adaptive.adaptive-records-content}.form-card>text:first-child,.state-card>text:first-child{display:block;color:$ink;font-size:34rpx;font-weight:700}.form-copy{display:block;margin-top:12rpx;color:$ink-muted;font-size:22rpx;line-height:1.55}.field{margin-top:16rpx}.field>text{display:block;margin:0 8rpx 8rpx;color:$ink;font-size:23rpx;font-weight:700}.field input,.field textarea{@include adaptive.adaptive-records-field;box-sizing:border-box;width:100%;min-height:76rpx;padding:16rpx 22rpx;color:$ink;font-size:23rpx}.field textarea{min-height:150rpx}.error{display:block;margin-top:12rpx;color:$brand-red;font-size:22rpx}.form-card .app-button{margin-top:20rpx}.state-card{min-height:340rpx;padding-top:80rpx;text-align:center}.state-card>text:nth-child(2){display:block;margin-top:18rpx;color:$ink-muted;font-size:24rpx;line-height:1.65}.state-card .app-button{margin-top:28rpx}
+.record-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }.page-header, .page-content { z-index: 1; }.page-content { padding: 18rpx 24rpx 72rpx; }
+.form-card, .state-card, .record-card { @include adaptive.adaptive-records-content; }.form-card { box-sizing: border-box; padding: 46rpx; }.form-card > text:first-child { display: block; color: $ink; font-size: 34rpx; font-weight: 700; }.form-copy { display: block; margin-top: 12rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.55; }
+.field { margin-top: 16rpx; }.field > text { display: block; margin: 0 8rpx 8rpx; color: $ink; font-size: 23rpx; font-weight: 700; }.required-mark { display: inline-block; margin-right: 4rpx; color: $brand-red; font-size: 26rpx; transform: translateY(-3rpx); }.field input, .field textarea { @include adaptive.adaptive-records-field; box-sizing: border-box; width: 100%; min-height: 76rpx; padding: 16rpx 22rpx; color: $ink; font-size: 23rpx; }.field textarea { min-height: 150rpx; }
+.field--context > view { @include adaptive.adaptive-records-field; display: flex; min-height: 76rpx; align-items: center; justify-content: space-between; padding: 16rpx 22rpx; box-sizing: border-box; }.field--context > view > text:first-child { color: $ink; font-size: 23rpx; }.field--context > view > text:last-child { color: $ink-muted; font-size: 21rpx; }
+.upload-field { display: grid; gap: 12rpx; margin-top: 16rpx; padding: 18rpx 22rpx; @include adaptive.adaptive-records-field; }.upload-field > view > text { display: block; }.upload-field > view > text:first-child { color: $ink; font-size: 23rpx; font-weight: 700; }.upload-field > view > text:last-child { margin-top: 6rpx; color: $ink-muted; font-size: 20rpx; line-height: 1.45; }.upload-button { justify-self: start; min-height: 60rpx; margin: 0; padding: 0 20rpx; border: 1rpx solid rgba(159, 23, 15, .42); border-radius: 8rpx; background: transparent; color: $brand-red; font-size: 22rpx; }.upload-field > text, .error { color: $ink-muted; font-size: 21rpx; overflow-wrap: anywhere; }.error { display: block; margin-top: 12rpx; color: $brand-red; font-size: 22rpx; }
+.form-actions { display: grid; grid-template-columns: 1fr 1.45fr; gap: 16rpx; margin-top: 20rpx; }.state-card { display: flex; min-height: 320rpx; flex-direction: column; align-items: center; justify-content: center; padding: 42rpx; color: $ink; font-size: 28rpx; text-align: center; }.state-card .app-button { width: 100%; margin-top: 24rpx; }.record-list { display: flex; flex-direction: column; gap: 16rpx; }.save-notice { display: block; color: $brand-red; font-size: 22rpx; }.record-card { min-height: 128rpx; padding: 28rpx 32rpx; }.record-card text { display: block; }.record-card text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 30rpx; font-weight: 700; }.record-card text:not(:first-child) { margin-top: 7rpx; color: $ink-muted; font-size: 21rpx; line-height: 1.45; overflow-wrap: anywhere; }
 </style>
@@ -1,13 +1,131 @@
-<!-- 页面编号：R-10；用途：家族备忘创建。列表 DTO 缺失时不展示 fixture。 -->
+<!-- 页面编号：R-10；用途：读取、新建当前家谱的家族备忘。 -->
 <template>
-  <view class="memo-page"><ModulePageBackground module="records" /><view class="page-header"><PageHeader title="家族备忘" custom-back @back="requestBack" /></view><view class="page-content"><view v-if="state === 'form'" class="form-card"><text>新建家族备忘</text><text class="form-copy">列表和详情没有可消费字段；本页仅提交标题、提醒时间和内容，不猜测完成状态或媒体。</text><view class="field"><text>备忘标题</text><input v-model="form.title" maxlength="40" placeholder="请输入备忘标题" @input="error = ''" /></view><view class="field"><text>提醒时间</text><input v-model="form.time" placeholder="例如：2026-07-24 09:00" @input="error = ''" /></view><view class="field"><text>备忘内容</text><textarea v-model="form.content" auto-height maxlength="1200" placeholder="记录需要提醒的事情" @input="error = ''" /></view><text v-if="error" class="error">{{ error }}</text><AppButton block :disabled="submitting" :label="submitting ? '正在提交' : '提交备忘'" @click="submit" /></view><view v-else class="state-card"><text>{{ result.title }}</text><text>{{ result.copy }}</text><AppButton block :label="result.action" @click="resultAction" /></view></view><AppDialog :visible="discardVisible" title="放弃家族备忘？" message="尚未提交的内容将被清除。" confirm-text="放弃并返回" cancel-text="继续填写" show-cancel :close-on-mask="false" @confirm="confirmDiscard" @cancel="cancelDiscard" /></view>
+  <view class="memo-page">
+    <ModulePageBackground module="records" />
+    <view class="page-header"><PageHeader title="家族备忘" :action="valid && view === 'list' ? '新建' : ''" custom-back @back="requestBack" @action="openCreate" /></view>
+    <view class="page-content">
+      <view v-if="view === 'form'" class="form-card">
+        <text>新建家族备忘</text>
+        <text class="form-copy">红色 * 为必填项，其余内容可按需补充。</text>
+        <view class="field"><text><text class="required-mark">*</text>备忘标题</text><input v-model="form.memoTitle" maxlength="40" placeholder="请输入备忘标题" @input="error = ''" /></view>
+        <picker mode="date" :value="form.remindDate" @change="selectRemindDate"><view class="field field--picker"><text>提醒日期</text><text>{{ form.remindDate || '请选择' }}</text></view></picker>
+        <picker mode="time" :value="form.remindClock" @change="selectRemindClock"><view class="field field--picker"><text>提醒时间</text><text>{{ form.remindClock || '请选择' }}</text></view></picker>
+        <view class="field field--textarea"><text>备忘内容</text><textarea v-model="form.memoContent" auto-height maxlength="1200" placeholder="记录需要提醒的事情" @input="error = ''" /></view>
+        <view class="upload-field">
+          <view><text>相关图片</text><text>图片选定后会先取得真实上传回执，并在提交备忘时关联。</text></view>
+          <button class="upload-button" :disabled="uploading || submitting" @click="uploadImage">{{ uploading ? '上传中…' : '添加图片' }}</button>
+          <text v-for="(receipt, index) in mediaReceipts" :key="`${receipt.ossId}-${index}`">已上传：{{ receipt.fileName || '图片' }}</text>
+          <text v-if="uploadError" class="error">{{ uploadError }}</text>
+        </view>
+        <view class="field"><text>排序值</text><input v-model="form.sortOrder" type="number" placeholder="数值越小越靠前" @input="error = ''" /></view>
+        <text v-if="error" class="error">{{ error }}</text>
+        <view class="form-actions"><AppButton type="secondary" label="取消" @click="cancelCreate" /><AppButton :disabled="submitting || uploading" :label="submitting ? '正在提交' : '提交备忘'" @click="submit" /></view>
+      </view>
+      <view v-else-if="!valid" class="state-card"><text>家族备忘入口无效</text><AppButton block label="返回上一页" @click="requestBack" /></view>
+      <view v-else-if="listState === 'loading'" class="state-card"><AppLoading text="正在读取家族备忘" /></view>
+      <view v-else-if="listState === 'error'" class="state-card"><text>暂时无法读取家族备忘</text><AppButton block type="secondary" label="重新加载" @click="loadMemos" /></view>
+      <view v-else-if="listState === 'empty'" class="state-card"><text>还没有家族备忘</text><AppButton block label="新建备忘" @click="openCreate" /></view>
+      <view v-else class="memo-list">
+        <text v-if="saveNotice" class="save-notice">备忘已提交，并已从服务端重新读取。</text>
+        <view v-for="item in memos" :key="item.id" class="memo-card"><view><text>{{ item.title }}</text><text v-if="item.remindTime">{{ item.remindTime }}</text><text v-if="item.content">{{ item.content }}</text></view></view>
+      </view>
+    </view>
+    <AppDialog :visible="discardVisible" title="放弃家族备忘？" message="尚未提交的内容将被清除。" confirm-text="放弃并返回" cancel-text="继续填写" show-cancel :close-on-mask="false" @confirm="confirmDiscard" @cancel="cancelDiscard" />
+  </view>
 </template>
+
 <script setup>
-import { computed, onUnmounted, reactive, ref } from "vue"; import { onBackPress, onLoad } from "@dcloudio/uni-app"; import AppButton from "@/components/AppButton.vue"; import AppDialog from "@/components/AppDialog.vue"; import ModulePageBackground from "@/components/ModulePageBackground.vue"; import PageHeader from "@/components/PageHeader.vue"; import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js"; import { createDiscardConfirmation } from "@/utils/discard-confirmation.js"; import { goBack, handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";
-const genealogyId=ref("");const state=ref("form");const submitting=ref(false);const error=ref("");const discardVisible=ref(false);const form=reactive({title:"",time:"",content:""});const controller=createRequestController();const valid=computed(()=>/^[1-9]\d*$/.test(genealogyId.value));const dirty=computed(()=>Object.values(form).some((value)=>value.trim()));const result=computed(()=>state.value==="success"?{title:"备忘已提交服务端",copy:"服务端已返回成功信封；列表仍缺条目 DTO，不生成本地备忘。",action:"返回备忘"}:{title:"备忘入口无效",copy:"没有取得有效家谱标识。",action:"返回上一页"});const confirmation=createDiscardConfirmation((visible)=>{discardVisible.value=visible;});const confirmDiscard=confirmation.confirm;const cancelDiscard=confirmation.cancel;
-onLoad((query)=>{genealogyId.value=String(query?.genealogyId||"");if(!valid.value)state.value="invalid";});const submit=async()=>{if(submitting.value||!valid.value)return;const memoTitle=form.title.trim();if(!memoTitle){error.value="请填写备忘标题";return;}submitting.value=true;error.value="";try{await appApi.createMemo(genealogyId.value,{memoTitle,remindTime:form.time,memoContent:form.content},{requestController:controller});Object.keys(form).forEach((key)=>{form[key]="";});state.value="success";}catch(cause){if(!isRequestCancelled(cause))error.value=cause?.message||"备忘提交失败，请稍后重试。";}finally{submitting.value=false;}};const requestBack=()=>runBackGuard({transientOpen:discardVisible.value,dirty:dirty.value,submitting:submitting.value,"close-transient":cancelDiscard,"block-submitting":()=>true,"confirm-discard":confirmation.request});const resultAction=()=>state.value==="success"?returnTo("R10",{genealogyId:genealogyId.value}):goBack();onBackPress((event)=>handleBackPress(event,requestBack));onUnmounted(()=>{controller.abort();confirmation.dispose();});
+import { computed, onUnmounted, reactive, ref } from "vue";
+import { onBackPress, onLoad, onShow } 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 { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
+import { isImagePickCancelled, pickAndUploadImage } from "@/utils/resumable-image-upload.js";
+import { goBack, handleBackPress, runBackGuard } from "@/utils/navigation.js";
+
+const genealogyId = ref("");
+const view = ref("list");
+const listState = ref("loading");
+const memos = ref([]);
+const saveNotice = ref(false);
+const submitting = ref(false);
+const uploading = ref(false);
+const error = ref("");
+const uploadError = ref("");
+const discardVisible = ref(false);
+const form = reactive({ memoTitle: "", remindDate: "", remindClock: "", memoContent: "", sortOrder: "" });
+const mediaReceipts = ref([]);
+const controller = createRequestController();
+let active = true;
+const valid = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
+const remindTime = computed(() => form.remindDate ? `${form.remindDate} ${form.remindClock || "00:00"}:00` : "");
+const mediaOssIds = computed(() => mediaReceipts.value.map((item) => item.ossId).join(","));
+const dirty = computed(() => Object.values(form).some((value) => String(value).trim()) || mediaReceipts.value.length > 0);
+const confirmation = createDiscardConfirmation((visible) => { discardVisible.value = visible; });
+const confirmDiscard = () => { confirmation.confirm(); resetForm(); view.value = "list"; };
+const cancelDiscard = confirmation.cancel;
+
+const resetForm = () => { Object.assign(form, { memoTitle: "", remindDate: "", remindClock: "", memoContent: "", sortOrder: "" }); mediaReceipts.value = []; error.value = ""; uploadError.value = ""; };
+const loadMemos = async () => {
+  if (!valid.value) return;
+  controller.abort();
+  listState.value = "loading";
+  try {
+    const rows = await appApi.getMemos(genealogyId.value, { requestController: controller });
+    if (!active) return;
+    memos.value = rows.map((item) => ({ id: String(item.memoId || ""), title: String(item.memoTitle || "未命名备忘"), remindTime: String(item.remindTime || ""), content: String(item.memoContent || "") })).filter((item) => /^[1-9]\d*$/.test(item.id));
+    listState.value = memos.value.length ? "ready" : "empty";
+  } catch (cause) {
+    if (!active || isRequestCancelled(cause)) return;
+    listState.value = "error";
+  }
+};
+const openCreate = () => { if (!valid.value) return; saveNotice.value = false; resetForm(); view.value = "form"; };
+const cancelCreate = () => { resetForm(); view.value = "list"; };
+const selectRemindDate = (event) => { form.remindDate = event.detail.value || ""; };
+const selectRemindClock = (event) => { form.remindClock = event.detail.value || ""; };
+const uploadImage = async () => {
+  if (uploading.value || submitting.value) return;
+  uploading.value = true;
+  uploadError.value = "";
+  try { mediaReceipts.value = [...mediaReceipts.value, await pickAndUploadImage({ requestController: controller })]; }
+  catch (cause) { if (!isImagePickCancelled(cause) && !isRequestCancelled(cause)) uploadError.value = cause?.message || "图片上传失败，请稍后重试。"; }
+  finally { uploading.value = false; }
+};
+const submit = async () => {
+  if (submitting.value || uploading.value || !valid.value) return;
+  if (!form.memoTitle.trim()) { error.value = "请填写备忘标题"; return; }
+  submitting.value = true;
+  error.value = "";
+  try {
+    await appApi.createMemo(genealogyId.value, { memoTitle: form.memoTitle, remindTime: remindTime.value, memoContent: form.memoContent, mediaOssIds: mediaOssIds.value, sortOrder: form.sortOrder }, { requestController: controller });
+    resetForm();
+    view.value = "list";
+    saveNotice.value = true;
+    await loadMemos();
+  } catch (cause) {
+    if (!isRequestCancelled(cause)) error.value = cause?.message || "备忘提交失败，请稍后重试。";
+  } finally { submitting.value = false; }
+};
+const requestBack = () => view.value !== "form"
+  ? goBack()
+  : runBackGuard({ transientOpen: discardVisible.value, dirty: dirty.value, submitting: submitting.value || uploading.value, "close-transient": cancelDiscard, "block-submitting": () => true, "confirm-discard": confirmation.request });
+
+onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); if (valid.value) loadMemos(); else listState.value = "invalid"; });
+onShow(() => { if (valid.value && view.value === "list" && listState.value !== "loading") loadMemos(); });
+onBackPress((event) => handleBackPress(event, requestBack));
+onUnmounted(() => { active = false; controller.abort(); confirmation.dispose(); });
 </script>
+
 <style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
-.memo-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{padding:18rpx 24rpx 72rpx}.form-card,.state-card{box-sizing:border-box;padding:46rpx;@include adaptive.adaptive-records-content}.form-card>text:first-child,.state-card>text:first-child{display:block;color:$ink;font-size:34rpx;font-weight:700}.form-copy{display:block;margin-top:12rpx;color:$ink-muted;font-size:22rpx;line-height:1.55}.field{margin-top:16rpx}.field>text{display:block;margin:0 8rpx 8rpx;color:$ink;font-size:23rpx;font-weight:700}.field input,.field textarea{@include adaptive.adaptive-records-field;box-sizing:border-box;width:100%;min-height:76rpx;padding:16rpx 22rpx;color:$ink;font-size:23rpx}.field textarea{min-height:150rpx}.error{display:block;margin-top:12rpx;color:$brand-red;font-size:22rpx}.form-card .app-button{margin-top:20rpx}.state-card{min-height:340rpx;padding-top:80rpx;text-align:center}.state-card>text:nth-child(2){display:block;margin-top:18rpx;color:$ink-muted;font-size:24rpx;line-height:1.65}.state-card .app-button{margin-top:28rpx}
+.memo-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }.page-header, .page-content { z-index: 1; }.page-content { padding: 18rpx 24rpx 72rpx; }
+.form-card, .state-card, .memo-card { @include adaptive.adaptive-records-content; }.form-card { box-sizing: border-box; padding: 46rpx; }.form-card > text:first-child { display: block; color: $ink; font-size: 34rpx; font-weight: 700; }.form-copy { display: block; margin-top: 12rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.55; }
+.field { display: grid; grid-template-columns: 142rpx minmax(0, 1fr); align-items: center; gap: 12rpx 20rpx; min-height: 82rpx; margin-top: 14rpx; padding: 14rpx 24rpx; box-sizing: border-box; @include adaptive.adaptive-records-field; }.field > text, .upload-field > view > text:first-child { color: $ink; font-size: 23rpx; font-weight: 700; }.required-mark { display: inline-block; margin-right: 4rpx; color: $brand-red; font-size: 26rpx; transform: translateY(-3rpx); }.field input, .field > text:last-child { min-width: 0; color: $ink; font-size: 23rpx; text-align: right; }.field--textarea { align-items: start; }.field textarea { min-height: 116rpx; color: $ink; font-size: 23rpx; line-height: 1.55; }
+.upload-field { display: grid; gap: 12rpx; margin-top: 14rpx; padding: 18rpx 24rpx; @include adaptive.adaptive-records-field; }.upload-field > view > text { display: block; }.upload-field > view > text:last-child { margin-top: 6rpx; color: $ink-muted; font-size: 20rpx; line-height: 1.45; }.upload-button { justify-self: start; min-height: 60rpx; margin: 0; padding: 0 20rpx; border: 1rpx solid rgba(159, 23, 15, .42); border-radius: 8rpx; background: transparent; color: $brand-red; font-size: 22rpx; }.upload-field > text { color: $ink-muted; font-size: 21rpx; overflow-wrap: anywhere; }.error { display: block; margin-top: 12rpx; color: $brand-red; font-size: 22rpx; }
+.form-actions { display: grid; grid-template-columns: 1fr 1.45fr; gap: 16rpx; margin-top: 20rpx; }.state-card { display: flex; min-height: 320rpx; flex-direction: column; align-items: center; justify-content: center; padding: 42rpx; color: $ink; font-size: 28rpx; text-align: center; }.state-card .app-button { width: 100%; margin-top: 24rpx; }.memo-list { display: flex; flex-direction: column; gap: 16rpx; }.save-notice { display: block; color: $brand-red; font-size: 22rpx; }.memo-card { min-height: 128rpx; padding: 28rpx 32rpx; }.memo-card text { display: block; }.memo-card text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 30rpx; font-weight: 700; }.memo-card text:not(:first-child) { margin-top: 7rpx; color: $ink-muted; font-size: 21rpx; line-height: 1.45; overflow-wrap: anywhere; }
 </style>
@@ -1,13 +1,127 @@
-<!-- 页面编号：R-11；用途：功德记录创建。列表 DTO 缺失时不展示 fixture。 -->
+<!-- 页面编号：R-11；用途：读取、新建当前家谱的功德记录。 -->
 <template>
-  <view class="merit-page"><ModulePageBackground module="records" /><view class="page-header"><PageHeader title="功德记录" custom-back @back="requestBack" /></view><view class="page-content"><view v-if="state === 'form'" class="form-card"><text>新建功德记录</text><text class="form-copy">列表没有展示 DTO；本页仅提交已声明的捐赠人、标题、类型、金额、时间和内容，不猜测状态或排序。</text><view v-for="field in fields" :key="field.key" class="field"><text>{{ field.label }}</text><textarea v-if="field.key === 'content'" v-model="form[field.key]" auto-height :placeholder="`请输入${field.label}`" @input="error = ''" /><input v-else v-model="form[field.key]" :type="field.key === 'amount' ? 'digit' : 'text'" :placeholder="`请输入${field.label}`" @input="error = ''" /></view><text v-if="error" class="error">{{ error }}</text><AppButton block :disabled="submitting" :label="submitting ? '正在提交' : '提交功德记录'" @click="submit" /></view><view v-else class="state-card"><text>{{ result.title }}</text><text>{{ result.copy }}</text><AppButton block :label="result.action" @click="resultAction" /></view></view><AppDialog :visible="discardVisible" title="放弃功德记录？" message="尚未提交的内容将被清除。" confirm-text="放弃并返回" cancel-text="继续填写" show-cancel :close-on-mask="false" @confirm="confirmDiscard" @cancel="cancelDiscard" /></view>
+  <view class="merit-page">
+    <ModulePageBackground module="records" />
+    <view class="page-header"><PageHeader title="功德记录" :action="valid && view === 'list' ? '新建' : ''" custom-back @back="requestBack" @action="openCreate" /></view>
+    <view class="page-content">
+      <view v-if="view === 'form'" class="form-card">
+        <text>新建功德记录</text>
+        <text class="form-copy">红色 * 为必填项，其余内容可按需补充。</text>
+        <view v-for="field in fields" :key="field.key" class="field"><text><text v-if="field.required" class="required-mark">*</text>{{ field.label }}</text><textarea v-if="field.key === 'content'" v-model="form[field.key]" auto-height :placeholder="`请输入${field.label}`" @input="error = ''" /><input v-else v-model="form[field.key]" :type="field.inputType || 'text'" :placeholder="field.placeholder || `请输入${field.label}`" @input="error = ''" /></view>
+        <text v-if="error" class="error">{{ error }}</text>
+        <view class="form-actions"><AppButton type="secondary" label="取消" @click="cancelCreate" /><AppButton :disabled="submitting" :label="submitting ? '正在提交' : '提交功德记录'" @click="submit" /></view>
+      </view>
+      <view v-else-if="!valid" class="state-card"><text>功德记录入口无效</text><AppButton block label="返回上一页" @click="requestBack" /></view>
+      <view v-else-if="listState === 'loading'" class="state-card"><AppLoading text="正在读取功德记录" /></view>
+      <view v-else-if="listState === 'error'" class="state-card"><text>暂时无法读取功德记录</text><AppButton block type="secondary" label="重新加载" @click="loadMerits" /></view>
+      <view v-else-if="listState === 'empty'" class="state-card"><text>还没有功德记录</text><AppButton block label="新建功德记录" @click="openCreate" /></view>
+      <view v-else class="merit-list">
+        <text v-if="saveNotice" class="save-notice">功德记录已提交，并已从服务端重新读取。</text>
+        <text class="merit-summary">共 {{ merits.length }} 笔，金额合计 ¥{{ totalAmount }}</text>
+        <view v-for="item in merits" :key="item.id" class="merit-card"><view><text>{{ item.title }}</text><text>{{ item.donor }}{{ item.type ? ` · ${item.type}` : '' }}</text><text v-if="item.time || item.content">{{ item.time || item.content }}</text></view><text>¥{{ item.amount }}</text></view>
+      </view>
+    </view>
+    <AppDialog :visible="discardVisible" title="放弃功德记录？" message="尚未提交的内容将被清除。" confirm-text="放弃并返回" cancel-text="继续填写" show-cancel :close-on-mask="false" @confirm="confirmDiscard" @cancel="cancelDiscard" />
+  </view>
 </template>
+
 <script setup>
-import { computed,onUnmounted,reactive,ref } from "vue"; import { onBackPress,onLoad } from "@dcloudio/uni-app"; import AppButton from "@/components/AppButton.vue"; import AppDialog from "@/components/AppDialog.vue"; import ModulePageBackground from "@/components/ModulePageBackground.vue"; import PageHeader from "@/components/PageHeader.vue"; import { appApi,createRequestController,isRequestCancelled } from "@/utils/api.js"; import { createDiscardConfirmation } from "@/utils/discard-confirmation.js"; import { goBack,handleBackPress,returnTo,runBackGuard } from "@/utils/navigation.js";
-const genealogyId=ref("");const state=ref("form");const submitting=ref(false);const error=ref("");const discardVisible=ref(false);const form=reactive({donor:"",title:"",type:"",amount:"",time:"",content:""});const fields=[{key:"donor",label:"捐赠人"},{key:"title",label:"功德标题"},{key:"type",label:"功德类型"},{key:"amount",label:"金额"},{key:"time",label:"记录时间"},{key:"content",label:"记录内容"}];const controller=createRequestController();const valid=computed(()=>/^[1-9]\d*$/.test(genealogyId.value));const dirty=computed(()=>Object.values(form).some((value)=>value.trim()));const result=computed(()=>state.value==="success"?{title:"功德记录已提交服务端",copy:"服务端已返回成功信封；列表仍缺条目 DTO，不生成本地功德记录。",action:"返回功德记录"}:{title:"功德记录入口无效",copy:"没有取得有效家谱标识。",action:"返回上一页"});const confirmation=createDiscardConfirmation((visible)=>{discardVisible.value=visible;});const confirmDiscard=confirmation.confirm;const cancelDiscard=confirmation.cancel;
-onLoad((query)=>{genealogyId.value=String(query?.genealogyId||"");if(!valid.value)state.value="invalid";});const submit=async()=>{if(submitting.value||!valid.value)return;const donorName=form.donor.trim();const meritTitle=form.title.trim();const amountText=form.amount.trim();if(!donorName||!meritTitle){error.value=!donorName?"请填写捐赠人":"请填写功德标题";return;}if(amountText&&!Number.isFinite(Number(amountText))){error.value="金额必须是数字";return;}submitting.value=true;error.value="";try{await appApi.createMeritRecord(genealogyId.value,{donorName,meritTitle,meritType:form.type,meritContent:form.content,meritTime:form.time,...(amountText?{amount:Number(amountText)}:{})},{requestController:controller});Object.keys(form).forEach((key)=>{form[key]="";});state.value="success";}catch(cause){if(!isRequestCancelled(cause))error.value=cause?.message||"功德记录提交失败，请稍后重试。";}finally{submitting.value=false;}};const requestBack=()=>runBackGuard({transientOpen:discardVisible.value,dirty:dirty.value,submitting:submitting.value,"close-transient":cancelDiscard,"block-submitting":()=>true,"confirm-discard":confirmation.request});const resultAction=()=>state.value==="success"?returnTo("R11",{genealogyId:genealogyId.value}):goBack();onBackPress((event)=>handleBackPress(event,requestBack));onUnmounted(()=>{controller.abort();confirmation.dispose();});
+import { computed, onUnmounted, reactive, ref } from "vue";
+import { onBackPress, onLoad, onShow } 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 { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
+import { goBack, handleBackPress, runBackGuard } from "@/utils/navigation.js";
+
+const genealogyId = ref("");
+const view = ref("list");
+const listState = ref("loading");
+const merits = ref([]);
+const saveNotice = ref(false);
+const submitting = ref(false);
+const error = ref("");
+const discardVisible = ref(false);
+const form = reactive({ donor: "", title: "", type: "", amount: "", time: "", content: "", sortOrder: "" });
+const fields = [
+  { key: "donor", label: "捐赠人", required: true },
+  { key: "title", label: "功德标题", required: true },
+  { key: "type", label: "功德类型" },
+  { key: "amount", inputType: "digit", label: "金额" },
+  { key: "time", label: "记录时间" },
+  { key: "content", label: "记录内容" },
+  { key: "sortOrder", label: "排序值", inputType: "number", placeholder: "数值越小越靠前" },
+];
+const controller = createRequestController();
+let active = true;
+const valid = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
+const dirty = computed(() => Object.values(form).some((value) => String(value).trim()));
+const totalAmount = computed(() => merits.value.reduce((total, item) => total + item.amount, 0).toFixed(2));
+const confirmation = createDiscardConfirmation((visible) => { discardVisible.value = visible; });
+const confirmDiscard = () => { confirmation.confirm(); resetForm(); view.value = "list"; };
+const cancelDiscard = confirmation.cancel;
+
+const resetForm = () => { Object.assign(form, { donor: "", title: "", type: "", amount: "", time: "", content: "", sortOrder: "" }); error.value = ""; };
+const loadMerits = async () => {
+  if (!valid.value) return;
+  controller.abort();
+  listState.value = "loading";
+  try {
+    const rows = await appApi.getMeritRecords(genealogyId.value, { requestController: controller });
+    if (!active) return;
+    merits.value = rows.map((item) => ({
+      id: String(item.meritId || ""),
+      donor: String(item.donorName || "未署名"),
+      title: String(item.meritTitle || "未命名功德"),
+      type: String(item.meritType || ""),
+      amount: Number.isFinite(Number(item.amount)) ? Number(item.amount) : 0,
+      time: String(item.meritTime || ""),
+      content: String(item.meritContent || ""),
+    })).filter((item) => /^[1-9]\d*$/.test(item.id));
+    listState.value = merits.value.length ? "ready" : "empty";
+  } catch (cause) {
+    if (!active || isRequestCancelled(cause)) return;
+    listState.value = "error";
+  }
+};
+const openCreate = () => { if (!valid.value) return; saveNotice.value = false; resetForm(); view.value = "form"; };
+const cancelCreate = () => { resetForm(); view.value = "list"; };
+const submit = async () => {
+  if (submitting.value || !valid.value) return;
+  const donorName = form.donor.trim();
+  const meritTitle = form.title.trim();
+  const amountText = form.amount.trim();
+  if (!donorName || !meritTitle) { error.value = !donorName ? "请填写捐赠人" : "请填写功德标题"; return; }
+  if (amountText && !Number.isFinite(Number(amountText))) { error.value = "金额必须是数字"; return; }
+  submitting.value = true;
+  error.value = "";
+  try {
+    await appApi.createMeritRecord(genealogyId.value, { donorName, meritTitle, meritType: form.type, meritContent: form.content, meritTime: form.time, sortOrder: form.sortOrder, ...(amountText ? { amount: Number(amountText) } : {}) }, { requestController: controller });
+    resetForm();
+    view.value = "list";
+    saveNotice.value = true;
+    await loadMerits();
+  } catch (cause) {
+    if (!isRequestCancelled(cause)) error.value = cause?.message || "功德记录提交失败，请稍后重试。";
+  } finally { submitting.value = false; }
+};
+const requestBack = () => view.value !== "form"
+  ? goBack()
+  : runBackGuard({ transientOpen: discardVisible.value, dirty: dirty.value, submitting: submitting.value, "close-transient": cancelDiscard, "block-submitting": () => true, "confirm-discard": confirmation.request });
+
+onLoad((query) => { genealogyId.value = String(query?.genealogyId || ""); if (valid.value) loadMerits(); else listState.value = "invalid"; });
+onShow(() => { if (valid.value && view.value === "list" && listState.value !== "loading") loadMerits(); });
+onBackPress((event) => handleBackPress(event, requestBack));
+onUnmounted(() => { active = false; controller.abort(); confirmation.dispose(); });
 </script>
+
 <style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
-.merit-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-header,.page-content{z-index:1}.page-content{padding:18rpx 24rpx 72rpx}.form-card,.state-card{box-sizing:border-box;padding:46rpx;@include adaptive.adaptive-records-content}.form-card>text:first-child,.state-card>text:first-child{display:block;color:$ink;font-size:34rpx;font-weight:700}.form-copy{display:block;margin-top:12rpx;color:$ink-muted;font-size:22rpx;line-height:1.55}.field{margin-top:16rpx}.field>text{display:block;margin:0 8rpx 8rpx;color:$ink;font-size:23rpx;font-weight:700}.field input,.field textarea{@include adaptive.adaptive-records-field;box-sizing:border-box;width:100%;min-height:76rpx;padding:16rpx 22rpx;color:$ink;font-size:23rpx}.field textarea{min-height:150rpx}.error{display:block;margin-top:12rpx;color:$brand-red;font-size:22rpx}.form-card .app-button{margin-top:20rpx}.state-card{min-height:340rpx;padding-top:80rpx;text-align:center}.state-card>text:nth-child(2){display:block;margin-top:18rpx;color:$ink-muted;font-size:24rpx;line-height:1.65}.state-card .app-button{margin-top:28rpx}
+.merit-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }.page-header, .page-content { z-index: 1; }.page-content { padding: 18rpx 24rpx 72rpx; }
+.form-card, .state-card, .merit-card { @include adaptive.adaptive-records-content; }.form-card { box-sizing: border-box; padding: 46rpx; }.form-card > text:first-child { display: block; color: $ink; font-size: 34rpx; font-weight: 700; }.form-copy { display: block; margin-top: 12rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.55; }
+.field { margin-top: 16rpx; }.field > text { display: block; margin: 0 8rpx 8rpx; color: $ink; font-size: 23rpx; font-weight: 700; }.required-mark { display: inline-block; margin-right: 4rpx; color: $brand-red; font-size: 26rpx; transform: translateY(-3rpx); }.field input, .field textarea { @include adaptive.adaptive-records-field; box-sizing: border-box; width: 100%; min-height: 76rpx; padding: 16rpx 22rpx; color: $ink; font-size: 23rpx; }.field textarea { min-height: 150rpx; }.error { display: block; margin-top: 12rpx; color: $brand-red; font-size: 22rpx; }
+.form-actions { display: grid; grid-template-columns: 1fr 1.45fr; gap: 16rpx; margin-top: 20rpx; }.state-card { display: flex; min-height: 320rpx; flex-direction: column; align-items: center; justify-content: center; padding: 42rpx; color: $ink; font-size: 28rpx; text-align: center; }.state-card .app-button { width: 100%; margin-top: 24rpx; }.merit-list { display: flex; flex-direction: column; gap: 16rpx; }.save-notice { display: block; color: $brand-red; font-size: 22rpx; }.merit-summary { display: block; color: $ink-muted; font-size: 22rpx; }.merit-card { display: flex; min-height: 138rpx; align-items: center; justify-content: space-between; gap: 18rpx; padding: 28rpx 32rpx; }.merit-card > view { min-width: 0; flex: 1; }.merit-card text { display: block; }.merit-card > view text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 30rpx; font-weight: 700; overflow-wrap: anywhere; }.merit-card > view text:not(:first-child) { margin-top: 7rpx; color: $ink-muted; font-size: 21rpx; line-height: 1.45; overflow-wrap: anywhere; }.merit-card > text { flex: 0 0 auto; color: $brand-red; font-size: 22rpx; }
 </style>