118 lines
8.0 KiB
Vue
118 lines
8.0 KiB
Vue
<!-- 页面编号：F-04；用途：谱文分类、搜索、列表与新建入口。 -->
|
||
<template>
|
||
<view class="article-list-page" :class="{ 'article-list-state--loading': listState === 'loading', 'article-list-state--empty': listState === 'empty', 'article-list-state--error': listState === 'error' }">
|
||
<ModulePageBackground module="family" />
|
||
<view class="article-list-header"><PageHeader title="谱文" action="新建" @action="createArticle" /></view>
|
||
|
||
<view v-if="listState === 'loading'" class="article-list-loading">
|
||
<AppLoading text="正在整理家族谱文" description="请稍候，正在读取家训、往事与序言。" />
|
||
</view>
|
||
|
||
<view v-else class="article-list-content">
|
||
<template v-if="listState === 'ready'">
|
||
<view class="article-search">
|
||
<input v-model="keyword" placeholder="搜索标题、作者或正文" confirm-type="search" />
|
||
</view>
|
||
<view class="article-categories">
|
||
<view class="article-categories__row">
|
||
<view v-for="category in articleCategories" :key="category" class="article-category" :class="{ 'article-category--active': activeCategory === category }" @click="activeCategory = category"><text>{{ category }}</text></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="filteredArticles.length" class="article-list">
|
||
<view v-for="article in filteredArticles" :key="article.id" class="article-card" role="button" :aria-label="`查看谱文${article.title}`" @click="openArticle(article)">
|
||
<text class="article-card__category">{{ article.category }}</text>
|
||
<text class="article-card__title">{{ article.title }}</text>
|
||
<text class="article-card__summary">{{ article.summary }}</text>
|
||
<view class="article-card__meta"><text>{{ article.author }}</text><text>{{ article.updatedAt }}</text></view>
|
||
</view>
|
||
<AppButton block label="新建谱文" @click="createArticle" />
|
||
</view>
|
||
|
||
<view v-else class="article-list-state-card">
|
||
<text>{{ keyword || activeCategory !== '全部' ? '没有找到相关谱文' : '还没有谱文' }}</text>
|
||
<text>{{ keyword || activeCategory !== '全部' ? '换一个关键词或分类继续查找。' : '从第一篇家训、序言或家族往事开始记录。' }}</text>
|
||
<AppButton block :label="keyword || activeCategory !== '全部' ? '清空筛选' : '新建谱文'" @click="keyword || activeCategory !== '全部' ? resetFilters() : createArticle()" />
|
||
</view>
|
||
</template>
|
||
|
||
<view v-else class="article-list-state-card">
|
||
<text>{{ listState === 'empty' ? '还没有谱文' : '谱文列表暂不可用' }}</text>
|
||
<text>{{ listState === 'empty' ? '记录第一篇家风家训或家族往事。' : '请稍后重新查看，已有谱文不会受到影响。' }}</text>
|
||
<AppButton :type="listState === 'error' ? 'secondary' : 'primary'" block :label="listState === 'error' ? '重新查看' : '新建谱文'" @click="listState === 'error' ? restoreArticles() : createArticle()" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref } from "vue";
|
||
import { onLoad } 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";
|
||
|
||
const articleCategories = ["全部", "家风家训", "家族往事", "族谱序言"];
|
||
const baseArticles = [
|
||
{ id: "101", category: "家风家训", title: "孝友传家的日常", summary: "从敬老、睦亲与守信的小事里，看见家风如何代代相传。", author: "汤文正", updatedAt: "今天更新" },
|
||
{ id: "102", category: "家族往事", title: "祖居门前的那棵桂花树", summary: "长辈口述的旧居记忆，以及每年中秋一家人相聚的故事。", author: "汤淑华", updatedAt: "昨天更新" },
|
||
{ id: "103", category: "族谱序言", title: "续修族谱序", summary: "说明本次续修的缘起、资料来源与共同参与的家人。", author: "谱主", updatedAt: "5 月 12 日" },
|
||
];
|
||
const articles = ref([...baseArticles]);
|
||
const activeCategory = ref("全部");
|
||
const keyword = ref("");
|
||
const listState = ref("loading");
|
||
const filteredArticles = computed(() => {
|
||
const term = keyword.value.trim().toLowerCase();
|
||
return articles.value.filter((article) => {
|
||
const categoryMatched = activeCategory.value === "全部" || article.category === activeCategory.value;
|
||
const keywordMatched = !term || `${article.title} ${article.summary} ${article.author}`.toLowerCase().includes(term);
|
||
return categoryMatched && keywordMatched;
|
||
});
|
||
});
|
||
|
||
onLoad((query) => {
|
||
const count = Math.max(1, Math.min(Number(query.count) || baseArticles.length, 50));
|
||
articles.value = Array.from({ length: count }, (_, index) => ({
|
||
...baseArticles[index % baseArticles.length],
|
||
id: String(101 + index),
|
||
title: count > baseArticles.length ? `${baseArticles[index % baseArticles.length].title}（第 ${index + 1} 篇）` : baseArticles[index].title,
|
||
}));
|
||
listState.value = ["loading", "empty", "error"].includes(query.state) ? query.state : "ready";
|
||
});
|
||
|
||
const openArticle = (article) => uni.navigateTo({ url: `/pages/family/f05-article-detail?articleId=${article.id}` });
|
||
const createArticle = () => uni.navigateTo({ url: "/pages/family/f06-article-editor?mode=create" });
|
||
const restoreArticles = () => { listState.value = "ready"; };
|
||
const resetFilters = () => { keyword.value = ""; activeCategory.value = "全部"; };
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.article-list-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
|
||
.article-list-header, .article-list-loading, .article-list-content { z-index: 1; }
|
||
.article-list-loading { min-height: calc(100vh - 100rpx); }
|
||
.article-list-content { padding: 18rpx 24rpx 72rpx; }
|
||
.article-search { min-height: 82rpx; padding: 12rpx 26rpx; box-sizing: border-box; background: url("/static/assets/modules/family/transparent/module-field-frame.png") center / 100% 100% no-repeat; }
|
||
.article-search input { width: 100%; min-height: 58rpx; color: $ink; font-size: 24rpx; }
|
||
.article-categories { width: 100%; margin-top: 16rpx; }
|
||
.article-categories__row { display: flex; flex-wrap: wrap; gap: 12rpx; padding: 2rpx 4rpx 8rpx; }
|
||
.article-category { min-height: 58rpx; padding: 0 28rpx; color: $ink-muted; font-size: 23rpx; background: url("/static/assets/modules/family/transparent/module-field-frame.png") center / 100% 100% no-repeat; }
|
||
.article-category text { display: flex; min-height: 58rpx; align-items: center; }
|
||
.article-category--active { color: $brand-red; font-weight: 700; }
|
||
.article-list { display: flex; flex-direction: column; gap: 16rpx; margin-top: 10rpx; }
|
||
.article-card, .article-list-state-card { width: 100%; box-sizing: border-box; background: url("/static/assets/modules/family/transparent/module-content-frame.png") center / 100% 100% no-repeat; }
|
||
.article-card { min-height: 196rpx; padding: 34rpx 46rpx 30rpx; }
|
||
.article-card > text { display: block; }
|
||
.article-card__category { color: $brand-red; font-size: 21rpx; font-weight: 700; letter-spacing: 2rpx; }
|
||
.article-card__title { margin-top: 7rpx; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 31rpx; font-weight: 700; }
|
||
.article-card__summary { margin-top: 10rpx; color: $ink-muted; font-size: 23rpx; line-height: 1.55; }
|
||
.article-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6rpx 18rpx; margin-top: 12rpx; color: $ink-muted; font-size: 20rpx; }
|
||
.article-list > .app-button { margin-top: 8rpx; }
|
||
.article-list-state-card { 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; }
|
||
.article-list-state-card > text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
|
||
.article-list-state-card .app-button { margin-top: 28rpx; }
|
||
</style>
|