408 lines
12 KiB
Vue
408 lines
12 KiB
Vue
<!-- 页面编号：R-08；用途：当前家谱人物的成长日志与不写库的本地预览。 -->
|
||
<template>
|
||
<view class="timeline-page" :class="stateClasses">
|
||
<ModulePageBackground module="records" />
|
||
<view class="page-header">
|
||
<PageHeader
|
||
title="成长日志"
|
||
:action="hasValidContext ? '记录预览' : ''"
|
||
custom-back
|
||
@back="requestBack"
|
||
@action="recordGrowth"
|
||
/>
|
||
</view>
|
||
<view v-if="timelineState === 'loading'" class="page-loading">
|
||
<AppLoading
|
||
text="正在读取成长日志"
|
||
description="请稍候，正在核对当前家谱与人物身份。"
|
||
/>
|
||
</view>
|
||
<view v-else class="page-content">
|
||
<view v-if="memberRecord" class="person-lead">
|
||
<text>{{ memberRecord.name }}</text>
|
||
<text>成长中的每一个瞬间</text>
|
||
</view>
|
||
<view v-if="localGrowthPreview" class="preview-card">
|
||
<text>本地预览 · 尚未提交</text>
|
||
<text>{{ localGrowthPreview.recordTitle }}</text>
|
||
<text>{{ localGrowthPreview.recordDate || "日期未填写" }}</text>
|
||
<text>{{ localGrowthPreview.recordContent || "内容未填写" }}</text>
|
||
</view>
|
||
<template v-if="timelineState === 'ready' && growthRecords.length">
|
||
<view
|
||
v-for="(record, index) in growthRecords"
|
||
:key="record.recordId"
|
||
class="timeline-card"
|
||
>
|
||
<text>第 {{ growthRecords.length - index }} 则</text>
|
||
<text>{{ record.recordTitle }}</text>
|
||
<text>{{ record.recordDate || "日期未填写" }}</text>
|
||
<text>{{ record.recordContent || "内容未填写" }}</text>
|
||
</view>
|
||
<AppButton block label="记录成长预览" @click="recordGrowth" />
|
||
</template>
|
||
<view v-else class="state-card">
|
||
<text>{{ stateCopy.title }}</text>
|
||
<text>{{ stateCopy.copy }}</text>
|
||
<AppButton
|
||
:type="timelineState === 'empty' ? 'primary' : 'secondary'"
|
||
block
|
||
:label="stateCopy.action"
|
||
@click="handleStateAction"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<AppDialog
|
||
:visible="dialogVisible"
|
||
:close-on-mask="false"
|
||
eyebrow="成长日志"
|
||
title="填写一份成长预览"
|
||
confirm-text="生成预览"
|
||
cancel-text="取消"
|
||
show-cancel
|
||
@confirm="createGrowthPreview"
|
||
@cancel="requestCloseEditor"
|
||
>
|
||
<view class="dialog-form">
|
||
<input v-model="growthForm.recordTitle" placeholder="记录标题" />
|
||
<input v-model="growthForm.recordDate" placeholder="日期（选填）" />
|
||
<textarea
|
||
v-model="growthForm.recordContent"
|
||
auto-height
|
||
placeholder="写下当时的故事（选填）"
|
||
/>
|
||
<text v-if="formError">{{ formError }}</text>
|
||
</view>
|
||
</AppDialog>
|
||
<AppDialog
|
||
:visible="discardVisible"
|
||
:close-on-mask="false"
|
||
eyebrow="放弃确认"
|
||
title="放弃当前填写？"
|
||
message="尚未提交的预览内容将从当前页面清除。"
|
||
confirm-text="确认放弃"
|
||
cancel-text="继续填写"
|
||
show-cancel
|
||
@confirm="confirmDiscard"
|
||
@cancel="cancelDiscard"
|
||
/>
|
||
<AppToast :visible="toastVisible" message="已生成本地预览，尚未保存" />
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import { computed, onUnmounted, reactive, 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 {
|
||
findTreeMemberPresentationFixture,
|
||
getGenealogyFixtureAccess,
|
||
listGrowthRecordFixtures,
|
||
} from "@/data/mock.js";
|
||
import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
|
||
import { goBack, handleBackPress, runBackGuard } from "@/utils/navigation.js";
|
||
|
||
const genealogyId = ref("");
|
||
const personId = ref("");
|
||
const memberRecord = ref(null);
|
||
const growthRecords = ref([]);
|
||
const timelineState = ref("loading");
|
||
const dialogVisible = ref(false);
|
||
const discardVisible = ref(false);
|
||
const toastVisible = ref(false);
|
||
const formError = ref("");
|
||
const localGrowthPreview = ref(null);
|
||
const growthForm = reactive({
|
||
recordTitle: "",
|
||
recordDate: "",
|
||
recordContent: "",
|
||
});
|
||
const editorBaseline = ref("");
|
||
let timer = null;
|
||
const stateClasses = computed(() => ({
|
||
"timeline-state--loading": timelineState.value === "loading",
|
||
"timeline-state--empty": timelineState.value === "empty",
|
||
"timeline-state--error": timelineState.value === "error",
|
||
"timeline-state--privacy": timelineState.value === "privacy",
|
||
"timeline-state--invalid": timelineState.value === "invalid",
|
||
}));
|
||
const hasValidContext = computed(() =>
|
||
["ready", "empty"].includes(timelineState.value),
|
||
);
|
||
const formSnapshot = computed(() => JSON.stringify({ ...growthForm }));
|
||
const growthDraftDirty = computed(() =>
|
||
dialogVisible.value && formSnapshot.value !== editorBaseline.value,
|
||
);
|
||
const stateCopy = computed(() => ({
|
||
error: {
|
||
title: "成长日志暂不可用",
|
||
copy: "请稍后重新查看，已有记录不会受到影响。",
|
||
action: "重新查看",
|
||
},
|
||
privacy: {
|
||
title: "成长日志未公开",
|
||
copy: "当前人物资料受隐私设置保护，页面不会展示或填写成长记录。",
|
||
action: "返回上一页",
|
||
},
|
||
invalid: {
|
||
title: "成长日志入口无效",
|
||
copy: "人物不存在、缺少身份或不属于当前家谱。",
|
||
action: "返回上一页",
|
||
},
|
||
empty: {
|
||
title: "还没有成长记录",
|
||
copy: "可以先生成一份本地预览；正式创建仍需等待线上写接口启用。",
|
||
action: "记录成长预览",
|
||
},
|
||
})[timelineState.value] || {
|
||
title: "成长日志暂不可用",
|
||
copy: "请返回上一页重新进入。",
|
||
action: "返回上一页",
|
||
});
|
||
|
||
onLoad((query) => {
|
||
genealogyId.value = String(query.genealogyId || "");
|
||
personId.value = String(query.personId || "");
|
||
if (query.state === "loading") return;
|
||
const access = getGenealogyFixtureAccess(genealogyId.value);
|
||
memberRecord.value = findTreeMemberPresentationFixture(
|
||
genealogyId.value,
|
||
personId.value,
|
||
);
|
||
if (
|
||
!["owner", "member"].includes(access.accessRole) ||
|
||
!memberRecord.value
|
||
) {
|
||
timelineState.value = "invalid";
|
||
return;
|
||
}
|
||
if (["privacy", "forbidden"].includes(memberRecord.value.status)) {
|
||
timelineState.value = "privacy";
|
||
return;
|
||
}
|
||
growthRecords.value = listGrowthRecordFixtures(
|
||
genealogyId.value,
|
||
personId.value,
|
||
);
|
||
timelineState.value = ["empty", "error"].includes(query.state)
|
||
? query.state
|
||
: growthRecords.value.length
|
||
? "ready"
|
||
: "empty";
|
||
});
|
||
const recordGrowth = () => {
|
||
if (!hasValidContext.value) return false;
|
||
Object.assign(growthForm, {
|
||
recordTitle: "",
|
||
recordDate: "",
|
||
recordContent: "",
|
||
});
|
||
formError.value = "";
|
||
editorBaseline.value = formSnapshot.value;
|
||
dialogVisible.value = true;
|
||
return true;
|
||
};
|
||
const createGrowthPreview = () => {
|
||
formError.value = growthForm.recordTitle.trim() ? "" : "请填写记录标题";
|
||
if (formError.value) return false;
|
||
// 预览与正式列表分离：这里不生成服务端 ID，也不改写只读夹具。
|
||
localGrowthPreview.value = Object.freeze({
|
||
recordTitle: growthForm.recordTitle.trim(),
|
||
recordDate: growthForm.recordDate.trim(),
|
||
recordContent: growthForm.recordContent.trim(),
|
||
});
|
||
dialogVisible.value = false;
|
||
toastVisible.value = true;
|
||
if (timer) clearTimeout(timer);
|
||
timer = setTimeout(() => {
|
||
toastVisible.value = false;
|
||
timer = null;
|
||
}, 1800);
|
||
return true;
|
||
};
|
||
const closeEditor = () => {
|
||
dialogVisible.value = false;
|
||
formError.value = "";
|
||
};
|
||
const discardConfirmation = createDiscardConfirmation(
|
||
(visible) => { discardVisible.value = visible; },
|
||
);
|
||
const confirmDiscard = () => {
|
||
discardConfirmation.confirm();
|
||
closeEditor();
|
||
};
|
||
const cancelDiscard = discardConfirmation.cancel;
|
||
const requestCloseEditor = async () => {
|
||
if (!growthDraftDirty.value) {
|
||
closeEditor();
|
||
return true;
|
||
}
|
||
const confirmed = await discardConfirmation.request();
|
||
if (confirmed) closeEditor();
|
||
return confirmed;
|
||
};
|
||
const restoreGrowthRecords = () => {
|
||
growthRecords.value = listGrowthRecordFixtures(
|
||
genealogyId.value,
|
||
personId.value,
|
||
);
|
||
timelineState.value = growthRecords.value.length ? "ready" : "empty";
|
||
};
|
||
const handleStateAction = () => {
|
||
if (["invalid", "privacy"].includes(timelineState.value)) return goBack();
|
||
if (timelineState.value === "error") return restoreGrowthRecords();
|
||
return recordGrowth();
|
||
};
|
||
const requestBack = () => {
|
||
if (discardVisible.value) {
|
||
cancelDiscard();
|
||
return Promise.resolve(true);
|
||
}
|
||
if (dialogVisible.value) return requestCloseEditor();
|
||
return runBackGuard({
|
||
dirty: Boolean(localGrowthPreview.value),
|
||
"confirm-discard": discardConfirmation.request,
|
||
});
|
||
};
|
||
onBackPress((event) => handleBackPress(event, requestBack));
|
||
onUnmounted(() => {
|
||
if (timer) clearTimeout(timer);
|
||
discardConfirmation.dispose();
|
||
});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||
|
||
.timeline-page {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
flex-direction: column;
|
||
background: $paper;
|
||
}
|
||
.page-header,
|
||
.page-loading,
|
||
.page-content {
|
||
z-index: 1;
|
||
}
|
||
.page-loading {
|
||
min-height: calc(100vh - 100rpx);
|
||
}
|
||
.page-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
padding: 18rpx 24rpx 72rpx;
|
||
}
|
||
.person-lead {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
gap: 8rpx 18rpx;
|
||
min-height: 62rpx;
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
color: $ink-muted;
|
||
font-size: 22rpx;
|
||
background: url("/static/assets/modules/genealogy/transparent/section-divider.png")
|
||
center/100% auto no-repeat;
|
||
}
|
||
.person-lead text:first-child {
|
||
color: $brand-red;
|
||
font-weight: 700;
|
||
}
|
||
.timeline-card,
|
||
.preview-card,
|
||
.state-card {
|
||
box-sizing: border-box;
|
||
padding: 34rpx 46rpx;
|
||
@include adaptive.adaptive-records-content;
|
||
}
|
||
.timeline-card > text,
|
||
.preview-card > text,
|
||
.state-card > text {
|
||
display: block;
|
||
}
|
||
.timeline-card > text:first-child {
|
||
color: $brand-red;
|
||
font-size: 20rpx;
|
||
}
|
||
.timeline-card > text:nth-child(2) {
|
||
margin-top: 6rpx;
|
||
color: $ink;
|
||
font-size: 31rpx;
|
||
font-weight: 700;
|
||
}
|
||
.timeline-card > text:nth-child(3) {
|
||
margin-top: 8rpx;
|
||
color: $ink-muted;
|
||
font-size: 21rpx;
|
||
}
|
||
.timeline-card > text:last-child {
|
||
margin-top: 10rpx;
|
||
color: $ink;
|
||
font-size: 23rpx;
|
||
line-height: 1.55;
|
||
}
|
||
.preview-card > text:first-child {
|
||
color: $brand-red;
|
||
font-size: 21rpx;
|
||
font-weight: 700;
|
||
}
|
||
.preview-card > text:nth-child(2) {
|
||
margin-top: 8rpx;
|
||
color: $ink;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
}
|
||
.preview-card > text:nth-child(n + 3) {
|
||
margin-top: 8rpx;
|
||
color: $ink-muted;
|
||
font-size: 22rpx;
|
||
line-height: 1.55;
|
||
}
|
||
.state-card {
|
||
min-height: 340rpx;
|
||
padding-top: 78rpx;
|
||
text-align: center;
|
||
}
|
||
.state-card > text:first-child {
|
||
color: $ink;
|
||
font-size: 35rpx;
|
||
font-weight: 700;
|
||
}
|
||
.state-card > text:nth-child(2) {
|
||
margin-top: 18rpx;
|
||
color: $ink-muted;
|
||
font-size: 24rpx;
|
||
line-height: 1.65;
|
||
}
|
||
.state-card .app-button {
|
||
margin-top: 28rpx;
|
||
}
|
||
.dialog-form {
|
||
width: 100%;
|
||
margin: 18rpx 0;
|
||
}
|
||
.dialog-form input,
|
||
.dialog-form textarea {
|
||
width: 100%;
|
||
min-height: 70rpx;
|
||
margin-top: 10rpx;
|
||
padding: 14rpx 20rpx;
|
||
box-sizing: border-box;
|
||
color: $ink;
|
||
font-size: 23rpx;
|
||
@include adaptive.adaptive-records-field;
|
||
}
|
||
.dialog-form text {
|
||
display: block;
|
||
margin-top: 8rpx;
|
||
color: $brand-red;
|
||
font-size: 20rpx;
|
||
}
|
||
</style>
|