rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

60%

Browse Source
This commit is contained in:
rain
2026-07-24 18:03:02 +08:00
parent c7f278fe79
commit ec8486b035
86 changed files with 7943 additions and 1841 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/family/f04-article-list.vue
+45 -9
View File
@@ -1,10 +1,17 @@
<!-- 页面编号：F-04；用途：谱文入口。列表 item DTO 未声明时不展示本地文章。 -->
<!-- 页面编号：F-04；用途：读取并展示当前家谱的谱文列表。 -->
<template>
<view class="article-list-page" :class="`article-list-state--${listState}`">
<ModulePageBackground module="family" />
<view class="article-list-header"><PageHeader title="谱文" :action="hasValidContext ? '新建' : ''" @action="createArticle" /></view>
<view class="article-list-content">
<view class="article-list-state-card">
<view v-if="listState === 'list'" class="article-list-items">
<view v-for="item in articles" :key="item.id" class="article-card" @click="openArticle(item)">
<text class="article-card__title">{{ item.title }}</text>
<text class="article-card__summary">{{ item.summary || item.content }}</text>
<text class="article-card__meta">{{ item.author || '家族成员' }} · {{ item.time || '未标注时间' }}</text>
</view>
</view>
<view v-else class="article-list-state-card">
<text>{{ stateCopy.title }}</text>
<text>{{ stateCopy.copy }}</text>
<AppButton block :label="stateCopy.action" @click="handleStateAction" />
@@ -15,20 +22,30 @@
<script setup>
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { onLoad, onShow } from "@dcloudio/uni-app";
import AppButton from "@/components/AppButton.vue";
import ModulePageBackground from "@/components/ModulePageBackground.vue";
import PageHeader from "@/components/PageHeader.vue";
import { appApi } from "@/utils/api.js";
import { goBack, openPage } from "@/utils/navigation.js";
const genealogyId = ref("");
const hasValidContext = ref(false);
const listState = ref("unavailable");
const listState = ref("loading");
const articles = ref([]);
const stateCopy = computed(() => hasValidContext.value
? {
title: "谱文列表待后端字段合同",
copy: "列表接口只声明通用对象数组，没有文章 ID、分类、标题、摘要、作者或更新时间字段；页面已停止展示本地文章和本地筛选。",
? listState.value === "empty" ? {
title: "还没有谱文",
copy: "新建第一篇谱文，记录值得传承的故事。",
action: "新建谱文",
} : listState.value === "error" ? {
title: "谱文暂时无法读取",
copy: "请检查网络后重新读取。",
action: "重新读取",
} : {
title: "正在读取谱文",
copy: "请稍候。",
action: "重新读取",
}
: {
title: "谱文入口无效",
@@ -39,12 +56,25 @@ const stateCopy = computed(() => hasValidContext.value
onLoad((query) => {
genealogyId.value = String(query?.genealogyId || "");
hasValidContext.value = /^[1-9]\d*$/.test(genealogyId.value);
listState.value = hasValidContext.value ? "unavailable" : "invalid";
if (hasValidContext.value) void loadArticles(); else listState.value = "invalid";
});
onShow(() => { if (hasValidContext.value) void loadArticles(); });
const loadArticles = async () => {
listState.value = "loading";
try {
const rows = await appApi.getArticles(genealogyId.value);
articles.value = rows;
listState.value = articles.value.length ? "list" : "empty";
} catch { listState.value = "error"; }
};
const createArticle = () => hasValidContext.value
? openPage("F06", { genealogyId: genealogyId.value, mode: "create" }, "F04")
: Promise.resolve(false);
const handleStateAction = () => hasValidContext.value ? createArticle() : goBack();
const openArticle = (item) => openPage("F05", { genealogyId: genealogyId.value, articleId: item.id }, "F04");
const handleStateAction = () => {
if (!hasValidContext.value) return goBack();
return listState.value === "error" ? loadArticles() : createArticle();
};
</script>
<style scoped lang="scss">
@@ -52,6 +82,12 @@ const handleStateAction = () => hasValidContext.value ? createArticle() : goBack
.article-list-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
.article-list-header, .article-list-content { z-index: 1; }
.article-list-content { padding: 18rpx 24rpx 72rpx; }
.article-list-items { margin-top: 24rpx; }
.article-card { @include adaptive.adaptive-family-content; display: flex; min-height: 150rpx; flex-direction: column; justify-content: center; box-sizing: border-box; margin-bottom: 16rpx; padding: 28rpx; }
.article-card text { display: block; }
.article-card__title { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 31rpx; font-weight: 700; }
.article-card__summary { margin-top: 9rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.45; }
.article-card__meta { margin-top: 10rpx; color: $brand-red; font-size: 21rpx; }
.article-list-state-card { @include adaptive.adaptive-family-content; width: 100%; min-height: 340rpx; margin-top: 30rpx; padding: 78rpx 52rpx 50rpx; text-align: center; }
.article-list-state-card > text { display: block; }
.article-list-state-card > text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 35rpx; font-weight: 700; }