完成50%

pages/family/f03-feed-detail.vue

@@ -2,7 +2,7 @@
 <template>
   <view class="feed-detail-page" :class="{ 'feed-state--expired': feedState === 'expired', 'feed-state--error': feedState === 'error', 'feed-state--ready': feedState === 'ready' }">
     <ModulePageBackground module="family" />
-    <view class="feed-detail-header"><PageHeader title="动态详情" /></view>
+    <view class="feed-detail-header"><PageHeader title="动态详情" custom-back @back="requestBack" /></view>
 
     <view v-if="feedState === 'loading'" class="feed-detail-loading">
       <AppLoading text="正在读取家族动态" description="请稍候，正在整理正文与家人评论。" />
@@ -30,93 +30,146 @@
           </view>
         </view>
 
-        <view class="feed-comment-form" :class="{ 'comment-state--saving': commentState === 'saving', 'comment-state--error': commentState === 'error' }">
+        <view class="feed-comment-form" :class="{ 'comment-state--validating': commentState === 'validating', 'comment-state--preview': commentState === 'preview', 'comment-state--error': commentState === 'error' }">
           <text>写下评论</text>
           <textarea v-model="commentDraft" auto-height maxlength="240" placeholder="对家人说点什么" />
           <text v-if="commentError" class="feed-comment-error">{{ commentError }}</text>
-          <AppButton block :disabled="commentState === 'saving'" :label="commentState === 'saving' ? '正在发送' : '发送评论'" @click="submitComment" />
+          <AppButton block :disabled="commentState === 'validating'" :label="commentState === 'validating' ? '正在校验' : '生成评论预览'" @click="submitComment" />
         </view>
       </template>
 
       <view v-else class="feed-state-card">
-        <text>{{ feedState === 'expired' ? '动态已失效' : '动态暂不可用' }}</text>
-        <text>{{ feedState === 'expired' ? '这条动态可能已被发布人删除，请返回家族圈查看其他内容。' : '请稍后重新查看，已有家族记录不会受到影响。' }}</text>
-        <AppButton :type="feedState === 'error' ? 'secondary' : 'primary'" block :label="feedState === 'error' ? '重新查看' : '返回家族圈'" @click="feedState === 'error' ? restoreFeed() : backToFamily()" />
+        <text>{{ stateCopy.title }}</text>
+        <text>{{ stateCopy.copy }}</text>
+        <AppButton :type="feedState === 'error' ? 'secondary' : 'primary'" block :label="stateCopy.action" @click="handleStateAction" />
       </view>
     </view>
-    <AppToast :visible="toastVisible" message="评论已发送" />
+    <AppDialog
+      :visible="discardVisible"
+      title="放弃评论草稿？"
+      message="当前评论尚未提交服务器，确认返回后不会保留。"
+      confirm-text="放弃并返回"
+      cancel-text="继续填写"
+      show-cancel
+      :close-on-mask="false"
+      @confirm="confirmDiscard"
+      @cancel="cancelDiscard"
+    />
+    <AppToast :visible="toastVisible" message="评论尚未提交服务器，草稿已保留" />
   </view>
 </template>
 
 <script setup>
-import { onUnmounted, ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
+import { computed, onUnmounted, ref } from "vue";
+import { onBackPress, onLoad } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
+import AppDialog from "@/components/AppDialog.vue";
 import AppLoading from "@/components/AppLoading.vue";
 import AppToast from "@/components/AppToast.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
+import { findFamilyFeedFixture } from "@/data/mock.js";
+import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
+import {
+  goBack,
+  handleBackPress,
+  returnTo,
+  runBackGuard,
+} from "@/utils/navigation.js";
 
-const feedRecords = [
-  { id: "1", tag: "团圆记忆", time: "今天 10:24", title: "端午家宴", content: "今年端午全家相聚，长辈讲起祖居旧事，孩子们也为大家拍下了新的全家福。饭后我们把照片和口述片段整理进家族档案，让这份热闹成为往后仍能翻看的共同记忆。", author: "汤正国" },
-  { id: "2", tag: "家族通知", time: "昨天 18:02", title: "修谱资料征集", content: "请家人补充老照片中的人物姓名、拍摄时间和地点。无法确认的信息也可以先写下线索，由熟悉往事的长辈共同核对。", author: "谱主" },
-];
-const feedId = ref("1");
-const currentFeed = ref(feedRecords[0]);
+const genealogyId = ref("");
+const feedId = ref("");
+const currentFeed = ref(null);
 const feedState = ref("loading");
 const commentState = ref("idle");
 const commentDraft = ref("");
 const commentError = ref("");
 const toastVisible = ref(false);
-const forceCommentFailure = ref(false);
-const feedComments = ref([
-  { id: 1, author: "汤淑华", time: "今天 10:42", content: "一家人能常常相聚，就是最珍贵的福气。" },
-  { id: 2, author: "汤文清", time: "今天 11:08", content: "照片已经整理好了，晚些时候放进春节团圆相册。" },
-]);
+const discardVisible = ref(false);
+const feedComments = ref([]);
 let submitTimer = null;
 let toastTimer = null;
+const isDirty = computed(() => Boolean(commentDraft.value.trim()));
+const stateCopy = computed(() => {
+  if (feedState.value === "error" && currentFeed.value) {
+    return {
+      title: "动态暂不可用",
+      copy: "请稍后重新查看，已有家族记录不会受到影响。",
+      action: "重新查看",
+    };
+  }
+  return {
+    title: "动态已失效或入口无效",
+    copy: "没有找到当前家谱中的这条动态，页面不会回退到其他记录。",
+    action: genealogyId.value ? "返回家族圈" : "返回上一页",
+  };
+});
+const discardConfirmation = createDiscardConfirmation((visible) => {
+  discardVisible.value = visible;
+});
+const requestDiscardConfirmation = discardConfirmation.request;
+const confirmDiscard = discardConfirmation.confirm;
+const cancelDiscard = discardConfirmation.cancel;
 
 onLoad((query) => {
-  feedId.value = String(query.feedId || "1");
-  const selected = feedRecords.find((item) => item.id === feedId.value);
-  currentFeed.value = selected || feedRecords[0];
-  forceCommentFailure.value = query.commentResult === "error";
+  genealogyId.value = String(query.genealogyId || "");
+  feedId.value = String(query.feedId || "");
+  const selected = findFamilyFeedFixture(genealogyId.value, feedId.value);
+  currentFeed.value = selected;
+  feedComments.value = selected?.comments || [];
   feedState.value = ["loading", "error", "expired"].includes(query.state)
-    ? query.state
+    ? selected
+      ? query.state
+      : "expired"
     : selected
       ? "ready"
       : "expired";
 });
 
 const submitComment = () => {
-  if (commentState.value === "saving") return;
+  if (commentState.value === "validating" || !currentFeed.value) return;
   const content = commentDraft.value.trim();
   if (!content) {
     commentError.value = "请先写下评论内容";
     return;
   }
   commentError.value = "";
-  commentState.value = "saving";
-  submitTimer = setTimeout(() => {
-    if (forceCommentFailure.value) {
-      commentState.value = "error";
-      commentError.value = "评论发送失败，请保留文字后重试";
-      forceCommentFailure.value = false;
-      return;
-    }
-    feedComments.value.push({ id: Date.now(), author: "我", time: "刚刚", content });
-    commentDraft.value = "";
-    commentState.value = "idle";
+  commentState.value = "validating";
+  const timer = setTimeout(() => {
+    if (submitTimer !== timer) return;
+    submitTimer = null;
+    commentState.value = "preview";
     toastVisible.value = true;
     toastTimer = setTimeout(() => { toastVisible.value = false; }, 1800);
   }, 320);
+  submitTimer = timer;
 };
 const restoreFeed = () => { feedState.value = "ready"; };
-const backToFamily = () => uni.redirectTo({ url: "/pages/family/f01-family-feed" });
+const requestBack = () =>
+  runBackGuard({
+    transientOpen: discardVisible.value,
+    dirty: isDirty.value,
+    submitting: commentState.value === "validating",
+    "close-transient": cancelDiscard,
+    "block-submitting": () => true,
+    "confirm-discard": requestDiscardConfirmation,
+  });
+const backToFamily = async () => {
+  if (!genealogyId.value) return goBack();
+  const confirmed = isDirty.value ? await requestDiscardConfirmation() : true;
+  if (!confirmed) return false;
+  return returnTo("F01", { genealogyId: genealogyId.value });
+};
+const handleStateAction = () => {
+  if (feedState.value === "error" && currentFeed.value) return restoreFeed();
+  return backToFamily();
+};
+onBackPress((event) => handleBackPress(event, requestBack));
 
 onUnmounted(() => {
   if (submitTimer) clearTimeout(submitTimer);
   if (toastTimer) clearTimeout(toastTimer);
+  discardConfirmation.dispose();
 });
 </script>