完成50%

pages/family/f05-article-detail.vue

@@ -19,7 +19,7 @@
           </view>
         </view>
         <view class="article-actions">
-          <AppButton block :label="favorite ? '已收藏谱文' : '收藏谱文'" @click="toggleFavorite" />
+          <AppButton block disabled label="收藏暂未开放" />
           <AppButton type="secondary" block label="编辑谱文" @click="editArticle" />
         </view>
       </template>
@@ -30,31 +30,24 @@
         <AppButton :type="articleState === 'error' ? 'secondary' : 'primary'" block :label="stateCopy.action" @click="handleStateAction" />
       </view>
     </view>
-    <AppToast :visible="toastVisible" :message="favorite ? '已收藏谱文' : '已取消收藏'" />
   </view>
 </template>
 
 <script setup>
-import { computed, onUnmounted, reactive, ref } from "vue";
+import { computed, ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.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 { findFamilyArticleFixture } from "@/data/mock.js";
+import { goBack, openPage, returnTo } from "@/utils/navigation.js";
 
-const articleRecords = [
-  { id: "101", category: "家风家训", title: "孝友传家的日常", author: "汤文正", updatedAt: "2024 年 5 月 12 日", paragraphs: ["孝友传家，不只在族谱序言里，也在一家人每日的言行中。长辈以宽厚待晚辈，晚辈以耐心照料长辈，亲友之间守信互助，便是最朴素也最长久的家风。", "勤俭并非一味节省，而是珍惜所得、量入为出，也愿意在家人需要时伸出援手。家中每一代人都可以用自己的方式，把这份分寸与担当继续传下去。", "敬祖睦宗，最终是为了让今天的家人彼此认识、彼此关心。记录姓名与世代之外，也应留下真实的生活、共同经历和温暖记忆。"] },
-  { id: "102", category: "家族往事", title: "祖居门前的那棵桂花树", author: "汤淑华", updatedAt: "2024 年 5 月 10 日", paragraphs: ["祖居门前曾有一棵桂花树。每到中秋，院里都是清甜的香气，远道回来的家人也总能循着那股味道找到家门。", "后来房屋几经修缮，桂花树仍被大家小心保留下来。它见过孩子长大，也见过长辈把往事一遍遍讲给后来人。"] },
-  { id: "103", category: "族谱序言", title: "续修族谱序", author: "谱主", updatedAt: "2024 年 5 月 8 日", paragraphs: ["本次续修以旧谱、碑记、户籍资料和长辈口述为基础，由家人共同核对补充。凡暂不能确认之处，均保留来源和疑问，留待后续查证。", "愿这份记录不仅理清世系，也能保存家风、人物与共同记忆。"] },
-];
-const articleId = ref("101");
-const article = reactive({ ...articleRecords[0] });
+const genealogyId = ref("");
+const articleId = ref("");
+const article = ref(null);
 const articleState = ref("loading");
-const favorite = ref(false);
-const toastVisible = ref(false);
-let toastTimer = null;
-const articleParagraphs = computed(() => article.paragraphs || []);
+const articleParagraphs = computed(() => article.value?.paragraphs || []);
 const articleStateClasses = computed(() => ({
   [`article-state--${articleState.value}`]: true,
   "article-state--expired": articleState.value === "expired",
@@ -62,32 +55,46 @@ const articleStateClasses = computed(() => ({
   "article-state--error": articleState.value === "error",
 }));
 const stateCopy = computed(() => ({
-  expired: { title: "这篇谱文已无法查看", copy: "内容可能已被作者删除或取消公开，请返回谱文列表查看其他内容。", action: "返回谱文列表" },
+  expired: { title: "这篇谱文已无法查看", copy: "当前家谱中不存在这篇谱文，页面不会回退到其他文章。", action: genealogyId.value ? "返回谱文列表" : "返回上一页" },
   privacy: { title: "这篇谱文暂未公开", copy: "作者仅向有权限的家人开放正文，请返回谱文列表查看其他内容。", action: "返回谱文列表" },
   error: { title: "谱文暂不可用", copy: "请稍后重新查看，已有谱文不会受到影响。", action: "重新查看" },
 }[articleState.value] || {}));
 
 onLoad((query) => {
-  articleId.value = String(query.articleId || "101");
-  const selected = articleRecords.find((item) => item.id === articleId.value);
-  if (selected) Object.assign(article, selected);
+  genealogyId.value = String(query.genealogyId || "");
+  articleId.value = String(query.articleId || "");
+  const selected = findFamilyArticleFixture(genealogyId.value, articleId.value);
+  article.value = selected;
   articleState.value = ["loading", "error", "expired", "privacy"].includes(query.state)
-    ? query.state
+    ? selected
+      ? query.state
+      : "expired"
     : selected
       ? "ready"
       : "expired";
 });
 
-const toggleFavorite = () => {
-  favorite.value = !favorite.value;
-  toastVisible.value = true;
-  if (toastTimer) clearTimeout(toastTimer);
-  toastTimer = setTimeout(() => { toastVisible.value = false; }, 1800);
+const editArticle = () =>
+  openPage(
+    "F06",
+    {
+      genealogyId: genealogyId.value,
+      mode: "edit",
+      articleId: articleId.value,
+    },
+    "F05",
+  );
+const backToArticles = () =>
+  genealogyId.value
+    ? returnTo("F04", { genealogyId: genealogyId.value })
+    : goBack();
+const handleStateAction = () => {
+  if (articleState.value === "error" && article.value) {
+    articleState.value = "ready";
+    return;
+  }
+  return backToArticles();
 };
-const editArticle = () => uni.navigateTo({ url: `/pages/family/f06-article-editor?mode=edit&articleId=${articleId.value}` });
-const backToArticles = () => uni.redirectTo({ url: "/pages/family/f04-article-list" });
-const handleStateAction = () => { if (articleState.value === "error") articleState.value = "ready"; else backToArticles(); };
-onUnmounted(() => { if (toastTimer) clearTimeout(toastTimer); });
 </script>
 
 <style scoped lang="scss">