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

修改部分样式

Browse Source
This commit is contained in:
rain
2026-07-27 17:29:58 +08:00
parent 04287e6777
commit 1e9e25fe67
53 changed files with 11562 additions and 2617 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/family/f03-feed-detail.vue
+241 -54
View File
@@ -2,30 +2,49 @@
<template>
<view class="feed-detail-page" :class="`feed-state--${feedState}`">
<ModulePageBackground module="family" />
<view class="feed-detail-header"><PageHeader title="动态详情" custom-back @back="requestBack" /></view>
<view class="feed-detail-header"
><PageHeader title="动态详情" custom-back @back="requestBack"
/></view>
<view class="feed-detail-content">
<AppLoading v-if="feedState === 'loading'" text="正在读取动态" description="请稍候，正在同步家族动态与评论。" />
<AppLoading
v-if="feedState === 'loading'"
text="正在读取动态"
description="请稍候，正在同步家族动态与评论。"
/>
<view v-else-if="feedState === 'ready'" class="feed-detail-body">
<view class="feed-card">
<view class="feed-card__heading">
<text>{{ feedTypeLabel(feed.type) }}</text>
<text>{{ feed.time || '未标注时间' }}</text>
<text>{{ feed.time || "未标注时间" }}</text>
</view>
<text class="feed-card__content">{{ feed.content }}</text>
<view class="feed-card__meta">
<text>发布：{{ feed.publisher }}</text>
<text>{{ feed.likeCount }} 次点赞 · {{ feed.commentCount }} 条评论</text>
<text
>{{ feed.likeCount }} 次点赞 ·
{{ feed.commentCount }} 条评论</text
>
</view>
<AppButton
compact
type="secondary"
:disabled="isTogglingLike || !hasLikeState"
:label="isTogglingLike ? '正在提交' : (hasLikeState ? (feed.likedByMe ? '取消点赞' : '点赞') : '点赞状态不可用')"
:label="
isTogglingLike
? '正在提交'
: hasLikeState
? feed.likedByMe
? '取消点赞'
: '点赞'
: '点赞状态不可用'
"
@click="toggleLike"
/>
<text v-if="!hasLikeState" class="like-note">点赞状态暂不可用，页面不会猜测下一次操作。</text>
<text v-if="!hasLikeState" class="like-note"
>点赞状态暂不可用，页面不会猜测下一次操作。</text
>
<text v-if="likeError" class="like-error">{{ likeError }}</text>
</view>
@@ -36,7 +55,7 @@
<view v-for="item in comments" :key="item.id" class="comment-card">
<view class="comment-card__heading">
<text>{{ item.author }}</text>
<text>{{ item.time || '刚刚' }}</text>
<text>{{ item.time || "刚刚" }}</text>
</view>
<text class="comment-card__content">{{ item.content }}</text>
</view>
@@ -52,7 +71,9 @@
placeholder-class="comment-editor__placeholder"
@input="commentError = ''"
/>
<text v-if="commentError" class="comment-error">{{ commentError }}</text>
<text v-if="commentError" class="comment-error">{{
commentError
}}</text>
<AppButton
block
:disabled="isSubmittingComment"
@@ -66,7 +87,12 @@
<view v-else class="feed-state-card">
<text>{{ stateCopy.title }}</text>
<text>{{ stateCopy.copy }}</text>
<AppButton type="secondary" block :label="stateCopy.action" @click="handleStateAction" />
<AppButton
type="secondary"
block
:label="stateCopy.action"
@click="handleStateAction"
/>
</view>
</view>
</view>
@@ -79,7 +105,11 @@ 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 {
appApi,
createRequestController,
isRequestCancelled,
} from "@/utils/api.js";
import { goBack, handleBackPress, returnTo } from "@/utils/navigation.js";
const genealogyId = ref("");
@@ -95,10 +125,15 @@ const isTogglingLike = ref(false);
const likeError = ref("");
const controller = createRequestController();
let pageActive = true;
const feedTypeLabel = (type) => String(type || "").trim().toLowerCase() === "text" ? "文字动态" : "家族动态";
const feedTypeLabel = (type) =>
String(type || "")
.trim()
.toLowerCase() === "text"
? "文字动态"
: "家族动态";
const hasValidContext = computed(() =>
/^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(feedId.value),
const hasValidContext = computed(
() => /^[1-9]\d*$/.test(genealogyId.value) && /^[1-9]\d*$/.test(feedId.value),
);
const hasLikeState = computed(() => typeof feed.value?.likedByMe === "boolean");
const stateCopy = computed(() => {
@@ -134,13 +169,20 @@ const loadFeed = async () => {
}
feedState.value = "loading";
try {
const current = await appApi.getFeedDetail(genealogyId.value, feedId.value, { requestController: controller });
const current = await appApi.getFeedDetail(
genealogyId.value,
feedId.value,
{ requestController: controller },
);
if (!pageActive) return;
feed.value = current;
feedState.value = "ready";
} catch (error) {
if (!pageActive || isRequestCancelled(error)) return;
feedState.value = error?.code === "HTTP_ERROR" && error?.httpStatus === 404 ? "missing" : "error";
feedState.value =
error?.code === "HTTP_ERROR" && error?.httpStatus === 404
? "missing"
: "error";
}
};
@@ -148,7 +190,9 @@ const loadComments = async () => {
if (!hasValidContext.value || feedState.value !== "ready") return;
commentState.value = "loading";
try {
const rows = await appApi.getFeedComments(genealogyId.value, feedId.value, { requestController: controller });
const rows = await appApi.getFeedComments(genealogyId.value, feedId.value, {
requestController: controller,
});
if (!pageActive) return;
comments.value = rows;
commentState.value = rows.length ? "list" : "empty";
@@ -164,12 +208,20 @@ const refresh = async () => {
};
const toggleLike = async () => {
if (isTogglingLike.value || !hasValidContext.value || !feed.value || !hasLikeState.value) return;
if (
isTogglingLike.value ||
!hasValidContext.value ||
!feed.value ||
!hasLikeState.value
)
return;
const nextLiked = !feed.value.likedByMe;
isTogglingLike.value = true;
likeError.value = "";
try {
await appApi.setFeedLike(genealogyId.value, feedId.value, nextLiked, { requestController: controller });
await appApi.setFeedLike(genealogyId.value, feedId.value, nextLiked, {
requestController: controller,
});
if (!pageActive) return;
await loadFeed();
} catch (error) {
@@ -190,7 +242,12 @@ const submitComment = async () => {
isSubmittingComment.value = true;
commentError.value = "";
try {
await appApi.createFeedComment(genealogyId.value, feedId.value, { commentContent }, { requestController: controller });
await appApi.createFeedComment(
genealogyId.value,
feedId.value,
{ commentContent },
{ requestController: controller },
);
if (!pageActive) return;
commentDraft.value = "";
await refresh();
@@ -215,46 +272,176 @@ onUnload(() => {
controller.abort();
});
const backToFamily = () => hasValidContext.value
? returnTo("F01", { genealogyId: genealogyId.value })
: goBack();
const backToFamily = () =>
hasValidContext.value
? returnTo("F01", { genealogyId: genealogyId.value })
: goBack();
const requestBack = () => backToFamily();
const handleStateAction = () => feedState.value === "error" ? refresh() : backToFamily();
const handleStateAction = () =>
feedState.value === "error" ? refresh() : backToFamily();
onBackPress((event) => handleBackPress(event, requestBack));
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.feed-detail-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
.feed-detail-header, .feed-detail-content { z-index: 1; }
.feed-detail-content { flex: 1; padding: 18rpx 24rpx 72rpx; }
.feed-detail-body { margin-top: 18rpx; }
.feed-card, .comment-section, .feed-state-card { @include adaptive.adaptive-family-content; box-sizing: border-box; }
.feed-card { padding: 30rpx; }
.feed-card__heading, .feed-card__meta, .comment-card__heading { display: flex; justify-content: space-between; gap: 18rpx; }
.feed-card__heading text:first-child, .comment-card__heading text:first-child { color: $brand-red; font-size: 23rpx; font-weight: 700; }
.feed-card__heading text:last-child, .comment-card__heading text:last-child { color: $ink-muted; font-size: 21rpx; text-align: right; }
.feed-card__content { display: block; margin-top: 20rpx; color: $ink; font-size: 29rpx; line-height: 1.7; white-space: pre-wrap; }
.feed-card__meta { margin-top: 22rpx; color: $ink-muted; font-size: 21rpx; }
.feed-card .app-button { margin-top: 18rpx; }
.like-note, .like-error { display: block; margin-top: 10rpx; font-size: 22rpx; }
.like-note { color: $ink-muted; }
.like-error { color: $brand-red; }
.comment-section { margin-top: 18rpx; padding: 28rpx; }
.section-title { display: block; color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 32rpx; font-weight: 700; }
.comment-list { margin-top: 18rpx; }
.comment-card { padding: 18rpx 0; border-bottom: 1rpx solid rgba(128, 89, 49, .16); }
.comment-card__content { display: block; margin-top: 10rpx; color: $ink; font-size: 25rpx; line-height: 1.55; white-space: pre-wrap; }
.comment-state-copy { display: block; margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.5; }
.comment-editor { margin-top: 24rpx; padding-top: 22rpx; border-top: 1rpx solid rgba(128, 89, 49, .18); }
.comment-editor textarea { display: block; box-sizing: border-box; width: 100%; min-height: 130rpx; padding: 18rpx; border: 1rpx solid rgba(128, 89, 49, .3); border-radius: 12rpx; color: $ink; font-size: 25rpx; line-height: 1.55; }
.comment-editor__placeholder { color: #ab9a86; }
.comment-editor .app-button { margin-top: 18rpx; }
.comment-error { display: block; margin-top: 10rpx; color: $brand-red; font-size: 22rpx; }
.feed-state-card { min-height: 340rpx; margin-top: 36rpx; padding: 78rpx 52rpx 50rpx; text-align: center; }
.feed-state-card > text { display: block; }
.feed-state-card > text:first-child { color: $ink; font-family: STKaiti, KaiTi, serif; font-size: 35rpx; font-weight: 700; }
.feed-state-card > text:nth-child(2) { margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
.feed-state-card .app-button { margin-top: 30rpx; }
.feed-detail-page {
display: flex;
min-height: 100vh;
flex-direction: column;
background: $paper;
}
.feed-detail-header,
.feed-detail-content {
z-index: 1;
}
.feed-detail-content {
flex: 1;
padding: 18rpx 24rpx 72rpx;
}
.feed-detail-body {
margin-top: 18rpx;
}
.feed-card,
.comment-section,
.feed-state-card {
@include adaptive.adaptive-family-content;
box-sizing: border-box;
}
.feed-card {
padding: 30rpx;
}
.feed-card__heading,
.feed-card__meta,
.comment-card__heading {
display: flex;
justify-content: space-between;
gap: 18rpx;
}
.feed-card__heading text:first-child,
.comment-card__heading text:first-child {
color: $brand-red;
font-size: 23rpx;
font-weight: 700;
}
.feed-card__heading text:last-child,
.comment-card__heading text:last-child {
color: $ink-muted;
font-size: 21rpx;
text-align: right;
}
.feed-card__content {
display: block;
margin-top: 20rpx;
color: $ink;
font-size: 29rpx;
line-height: 1.7;
white-space: pre-wrap;
}
.feed-card__meta {
margin-top: 22rpx;
color: $ink-muted;
font-size: 21rpx;
}
.feed-card .app-button {
margin-top: 18rpx;
}
.like-note,
.like-error {
display: block;
margin-top: 10rpx;
font-size: 22rpx;
}
.like-note {
color: $ink-muted;
}
.like-error {
color: $brand-red;
}
.comment-section {
margin-top: 18rpx;
padding: 28rpx;
}
.section-title {
display: block;
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 32rpx;
font-weight: 700;
}
.comment-list {
margin-top: 18rpx;
}
.comment-card {
padding: 18rpx 0;
border-bottom: 1rpx solid rgba(128, 89, 49, 0.16);
}
.comment-card__content {
display: block;
margin-top: 10rpx;
color: $ink;
font-size: 25rpx;
line-height: 1.55;
white-space: pre-wrap;
}
.comment-state-copy {
display: block;
margin-top: 18rpx;
color: $ink-muted;
font-size: 24rpx;
line-height: 1.5;
}
.comment-editor {
margin-top: 24rpx;
padding-top: 22rpx;
border-top: 1rpx solid rgba(128, 89, 49, 0.18);
}
.comment-editor textarea {
display: block;
box-sizing: border-box;
width: 100%;
min-height: 130rpx;
padding: 18rpx;
border: 1rpx solid rgba(128, 89, 49, 0.3);
border-radius: 12rpx;
color: $ink;
font-size: 25rpx;
line-height: 1.55;
}
.comment-editor__placeholder {
color: #ab9a86;
}
.comment-editor .app-button {
margin-top: 18rpx;
}
.comment-error {
display: block;
margin-top: 10rpx;
color: $brand-red;
font-size: 22rpx;
}
.feed-state-card {
min-height: 340rpx;
margin-top: 36rpx;
padding: 78rpx 52rpx 50rpx;
text-align: center;
}
.feed-state-card > text {
display: block;
}
.feed-state-card > text:first-child {
color: $ink;
font-family: STKaiti, KaiTi, serif;
font-size: 35rpx;
font-weight: 700;
}
.feed-state-card > text:nth-child(2) {
margin-top: 18rpx;
color: $ink-muted;
font-size: 24rpx;
line-height: 1.65;
}
.feed-state-card .app-button {
margin-top: 30rpx;
}
</style>