feat: migrate app routes and business modules
This commit is contained in:
@@ -0,0 +1,573 @@
|
||||
<template>
|
||||
<view class="pedigree-page">
|
||||
<ModulePageBackground module="tree" />
|
||||
<view class="pedigree-page__header">
|
||||
<PageHeader title="世系谱" action="树状图" @action="toTree" />
|
||||
</view>
|
||||
|
||||
<view class="pedigree-stage">
|
||||
<AppLoading
|
||||
v-if="treeState === 'loading'"
|
||||
text="正在整理世系谱"
|
||||
description="请稍候，正在准备家谱成员关系。"
|
||||
/>
|
||||
|
||||
<template v-else-if="treeState === 'tree'">
|
||||
<view class="pedigree-layout">
|
||||
<swiper
|
||||
class="pedigree-swiper"
|
||||
:current="pedigreePageIndex"
|
||||
:duration="260"
|
||||
:disable-touch="false"
|
||||
@change="handlePedigreePageChange"
|
||||
>
|
||||
<swiper-item
|
||||
v-for="(page, pageIndex) in pedigreePages"
|
||||
:key="`generation-${page.generation}-page-${pageIndex}`"
|
||||
>
|
||||
<scroll-view
|
||||
class="pedigree-scroll"
|
||||
scroll-y
|
||||
:show-scrollbar="false"
|
||||
:style="pedigreeScrollStyle"
|
||||
>
|
||||
<view class="pedigree-sheet" :style="pedigreeSheetStyle">
|
||||
<view class="pedigree-column pedigree-column--legend">
|
||||
<view class="pedigree-column__relation"><text>身份</text></view>
|
||||
<view class="pedigree-column__name"><text>{{ page.label }}</text></view>
|
||||
<view class="pedigree-column__detail"><text>{{ page.summary }}</text></view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-for="(member, memberIndex) in page.members"
|
||||
:key="member?.id || `empty-${pageIndex}-${memberIndex}`"
|
||||
class="member-node"
|
||||
:class="{
|
||||
'member-node--blank': !member,
|
||||
'member-node--selected': selectedId === String(member?.id || ''),
|
||||
'member-node--spouse': Boolean(member?.spouseOf),
|
||||
}"
|
||||
>
|
||||
<view v-if="member" class="member-node__surface">
|
||||
<view class="member-node__relation"><text>{{ memberRelation(member) }}</text></view>
|
||||
<view
|
||||
class="member-node__name"
|
||||
role="button"
|
||||
:aria-label="`查看${member.name}的资料`"
|
||||
@click.stop="openMemberProfile(member)"
|
||||
><text>{{ member.name }}</text></view>
|
||||
<view
|
||||
class="member-node__copy"
|
||||
role="button"
|
||||
:aria-label="`查看${member.name}的生平详情`"
|
||||
@click.stop="openMemberDetail(member)"
|
||||
>
|
||||
<text class="node-relation">{{ member.branch }}</text>
|
||||
<text class="node-years">{{ memberDetail(member) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="member-node__surface">
|
||||
<view class="member-node__relation"></view>
|
||||
<view class="member-node__name"></view>
|
||||
<view class="member-node__copy"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="generation-rail" :style="pedigreeSheetStyle">
|
||||
<view class="generation-band">
|
||||
<image
|
||||
class="generation-band__arrow generation-band__arrow--previous"
|
||||
src="/static/assets/foundation/transparent/chevron-right.png"
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<view class="generation-band__copy">
|
||||
<text>{{ activePage?.label || '未定世代' }}</text>
|
||||
<text>{{ activePage?.memberCount || 0 }} 位成员</text>
|
||||
</view>
|
||||
<image
|
||||
class="generation-band__arrow"
|
||||
src="/static/assets/foundation/transparent/chevron-right.png"
|
||||
mode="aspectFit"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view v-else class="pedigree-state-card">
|
||||
<image
|
||||
class="pedigree-state-card__skin"
|
||||
src="/static/assets/modules/tree/transparent/state-panel.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="pedigree-state-card__content">
|
||||
<text class="pedigree-state-card__eyebrow">{{ stateCopy.eyebrow }}</text>
|
||||
<text class="pedigree-state-card__title">{{ stateCopy.title }}</text>
|
||||
<text class="pedigree-state-card__copy">{{ stateCopy.copy }}</text>
|
||||
<view class="pedigree-state-card__action" @click="handleStateAction">
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/scroll-primary.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>{{ stateCopy.action }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<AppDialog
|
||||
:visible="detailVisible"
|
||||
eyebrow="人物生平"
|
||||
:title="detailMember?.name || '人物详情'"
|
||||
:message="detailMessage"
|
||||
confirm-text="关闭"
|
||||
@confirm="closeMemberDetail"
|
||||
@cancel="closeMemberDetail"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
|
||||
import AppDialog from "@/components/AppDialog.vue";
|
||||
import AppLoading from "@/components/AppLoading.vue";
|
||||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||||
import PageHeader from "@/components/PageHeader.vue";
|
||||
import {
|
||||
createRequestController,
|
||||
isRequestCancelled
|
||||
} from "@/services/api/request-controller.js";
|
||||
import { lineageApi } from "@/services/api/lineage-service.js";
|
||||
import { getRequestErrorMessage } from "@/services/api/request-error-message.js";
|
||||
import { genealogyContext } from "@/utils/genealogy/context.js";
|
||||
import { openPage, returnTo } from "@/utils/navigation/gateway.js";
|
||||
|
||||
const PEDIGREE_PAGE_SIZE = 5;
|
||||
const genealogyId = ref("");
|
||||
const treeState = ref("loading");
|
||||
const treeLoadError = ref("");
|
||||
const members = ref([]);
|
||||
const selectedId = ref("");
|
||||
const pedigreePageIndex = ref(0);
|
||||
const detailVisible = ref(false);
|
||||
const detailMember = ref(null);
|
||||
const detailMessage = ref("");
|
||||
const pedigreeRequestController = createRequestController();
|
||||
const pedigreeDetailRequestController = createRequestController();
|
||||
let loadGeneration = 0;
|
||||
let detailLoadGeneration = 0;
|
||||
let pageActive = true;
|
||||
let skipNextShowRefresh = true;
|
||||
|
||||
const compareMembers = (left, right) =>
|
||||
Number(left.generation) - Number(right.generation) ||
|
||||
String(left.id).localeCompare(String(right.id));
|
||||
const generationRows = computed(() => {
|
||||
const groups = new Map();
|
||||
members.value.forEach((member) => {
|
||||
const generation = Number(member.generation) || 0;
|
||||
const group = groups.get(generation) || [];
|
||||
group.push(member);
|
||||
groups.set(generation, group);
|
||||
});
|
||||
return Array.from(groups.entries())
|
||||
.sort(([left], [right]) => left - right)
|
||||
.map(([generation, group]) => ({
|
||||
generation,
|
||||
label: generation ? `第 ${generation} 世` : "未定世代",
|
||||
members: group.sort(compareMembers),
|
||||
}));
|
||||
});
|
||||
const pedigreePages = computed(() => {
|
||||
const pages = [];
|
||||
generationRows.value.forEach((row) => {
|
||||
const branch = row.members.find((member) => member.branch)?.branch;
|
||||
for (let index = 0; index < row.members.length; index += PEDIGREE_PAGE_SIZE) {
|
||||
const pageMembers = row.members.slice(index, index + PEDIGREE_PAGE_SIZE);
|
||||
while (pageMembers.length < PEDIGREE_PAGE_SIZE) pageMembers.push(null);
|
||||
pages.push({
|
||||
generation: row.generation,
|
||||
label: row.label,
|
||||
memberCount: row.members.length,
|
||||
summary: [branch, `${row.members.length} 位成员`]
|
||||
.filter(Boolean)
|
||||
.join(" · "),
|
||||
members: pageMembers,
|
||||
});
|
||||
}
|
||||
});
|
||||
return pages;
|
||||
});
|
||||
const activePage = computed(
|
||||
() => pedigreePages.value[pedigreePageIndex.value] || null,
|
||||
);
|
||||
const detailLength = computed(() =>
|
||||
Math.max(
|
||||
0,
|
||||
...members.value.map((member) =>
|
||||
Array.from(`${member.branch || ""}${memberDetail(member)}`).length,
|
||||
),
|
||||
),
|
||||
);
|
||||
const sheetHeight = computed(() => Math.max(1100, 720 + detailLength.value * 20));
|
||||
const pedigreeSheetStyle = computed(() => ({
|
||||
height: `${sheetHeight.value}rpx`,
|
||||
}));
|
||||
const pedigreeScrollStyle = computed(() => ({
|
||||
height: `${sheetHeight.value}rpx`,
|
||||
}));
|
||||
const stateCopy = computed(
|
||||
() =>
|
||||
({
|
||||
empty: {
|
||||
eyebrow: "尚未建立世系",
|
||||
title: "从第一位先祖开始记录",
|
||||
copy: "录入首代成员后，即可在世系树与世系谱中查看关系。",
|
||||
action: "添加首位成员",
|
||||
},
|
||||
error: {
|
||||
eyebrow: "世系谱读取失败",
|
||||
title: "暂时无法展示家谱成员",
|
||||
copy: treeLoadError.value || "请稍后重试。",
|
||||
action: "重新查看",
|
||||
},
|
||||
})[treeState.value] || {},
|
||||
);
|
||||
|
||||
const handlePedigreePageChange = (event) => {
|
||||
pedigreePageIndex.value = Number(event?.detail?.current || 0);
|
||||
};
|
||||
const memberRelation = (member) =>
|
||||
member.spouseOf ? "配偶" : member.relation || "家谱成员";
|
||||
const memberDetail = (member) => member.treeYears || member.years || "生卒待补";
|
||||
const openMemberProfile = (member) =>
|
||||
openPage(
|
||||
"T03",
|
||||
{ genealogyId: genealogyId.value, personId: String(member.id) },
|
||||
"T02",
|
||||
);
|
||||
const closeMemberDetail = () => {
|
||||
detailVisible.value = false;
|
||||
pedigreeDetailRequestController.abort();
|
||||
};
|
||||
const openMemberDetail = async (member) => {
|
||||
if (!member) return;
|
||||
const generation = ++detailLoadGeneration;
|
||||
pedigreeDetailRequestController.abort();
|
||||
detailMember.value = member;
|
||||
detailMessage.value = "正在读取人物生平…";
|
||||
detailVisible.value = true;
|
||||
try {
|
||||
const detail = await lineageApi.getPerson(genealogyId.value, member.id, {
|
||||
requestController: pedigreeDetailRequestController,
|
||||
});
|
||||
if (generation !== detailLoadGeneration || !detailVisible.value) return;
|
||||
detailMember.value = detail;
|
||||
detailMessage.value =
|
||||
[detail.biography, detail.remark].filter(Boolean).join("\n\n") ||
|
||||
"暂未填写生平说明。";
|
||||
} catch (error) {
|
||||
if (isRequestCancelled(error) || generation !== detailLoadGeneration) return;
|
||||
detailMessage.value = getRequestErrorMessage(error, "人物生平读取失败，请稍后重试。");
|
||||
}
|
||||
};
|
||||
const toTree = () => {
|
||||
const params = { genealogyId: genealogyId.value };
|
||||
if (selectedId.value) params.selectedId = selectedId.value;
|
||||
return returnTo("T01", params);
|
||||
};
|
||||
const handleStateAction = () => {
|
||||
if (treeState.value === "empty") {
|
||||
return openPage(
|
||||
"T04",
|
||||
{ genealogyId: genealogyId.value, mode: "first" },
|
||||
"T02",
|
||||
);
|
||||
}
|
||||
return loadPedigree({ genealogyId: genealogyId.value });
|
||||
};
|
||||
|
||||
const loadPedigree = async (query = {}) => {
|
||||
const generation = ++loadGeneration;
|
||||
pedigreeRequestController.abort();
|
||||
treeLoadError.value = "";
|
||||
genealogyId.value = String(
|
||||
query.genealogyId || genealogyContext.getCurrentGenealogyId() || "",
|
||||
);
|
||||
selectedId.value = String(query.selectedId || "");
|
||||
if (!genealogyId.value) {
|
||||
members.value = [];
|
||||
treeState.value = "empty";
|
||||
return;
|
||||
}
|
||||
treeState.value = "loading";
|
||||
try {
|
||||
const treeMembers = await lineageApi.getTree(genealogyId.value, {
|
||||
requestController: pedigreeRequestController,
|
||||
});
|
||||
if (!pageActive || generation !== loadGeneration) return;
|
||||
members.value = treeMembers;
|
||||
genealogyContext.setCurrentGenealogyId(genealogyId.value);
|
||||
const selectedPage = pedigreePages.value.findIndex((page) =>
|
||||
page.members.some((member) => String(member?.id) === selectedId.value),
|
||||
);
|
||||
pedigreePageIndex.value = selectedPage < 0 ? 0 : selectedPage;
|
||||
treeState.value = members.value.length ? "tree" : "empty";
|
||||
} catch (error) {
|
||||
if (!pageActive || generation !== loadGeneration || isRequestCancelled(error)) {
|
||||
return;
|
||||
}
|
||||
members.value = [];
|
||||
treeLoadError.value = getRequestErrorMessage(error, "世系谱读取失败，请稍后重试。");
|
||||
treeState.value = "error";
|
||||
}
|
||||
};
|
||||
|
||||
onLoad(loadPedigree);
|
||||
onShow(() => {
|
||||
if (skipNextShowRefresh) {
|
||||
skipNextShowRefresh = false;
|
||||
return;
|
||||
}
|
||||
if (genealogyId.value) loadPedigree({ genealogyId: genealogyId.value });
|
||||
});
|
||||
onUnload(() => {
|
||||
pageActive = false;
|
||||
loadGeneration += 1;
|
||||
detailLoadGeneration += 1;
|
||||
pedigreeRequestController.abort();
|
||||
pedigreeDetailRequestController.abort();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pedigree-page {
|
||||
display: grid;
|
||||
min-height: 100vh;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
background: $paper;
|
||||
}
|
||||
.pedigree-page__header,
|
||||
.pedigree-stage {
|
||||
z-index: 1;
|
||||
}
|
||||
.pedigree-stage {
|
||||
min-height: 0;
|
||||
}
|
||||
.pedigree-layout {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
grid-template-columns: minmax(0, 1fr) 92rpx;
|
||||
background: #fbfbfb;
|
||||
}
|
||||
.pedigree-swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.pedigree-scroll {
|
||||
width: 100%;
|
||||
}
|
||||
.pedigree-sheet {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
align-items: stretch;
|
||||
border-top: 1rpx solid #e2e2e2;
|
||||
border-bottom: 1rpx solid #e2e2e2;
|
||||
background: #fbfbfb;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.pedigree-column,
|
||||
.member-node {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
min-height: 100%;
|
||||
grid-template-rows: 144rpx 274rpx minmax(0, 1fr);
|
||||
border-right: 1rpx solid #e2e2e2;
|
||||
box-sizing: border-box;
|
||||
color: #38312d;
|
||||
}
|
||||
.pedigree-column--legend {
|
||||
border-left: 1rpx solid #e2e2e2;
|
||||
background: #f6f6f6;
|
||||
color: #665d56;
|
||||
}
|
||||
.pedigree-column__relation,
|
||||
.pedigree-column__name,
|
||||
.pedigree-column__detail,
|
||||
.member-node__relation,
|
||||
.member-node__name,
|
||||
.member-node__copy {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
}
|
||||
.pedigree-column__relation,
|
||||
.member-node__relation {
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #e2e2e2;
|
||||
font-size: clamp(14px, 22rpx, 17px);
|
||||
}
|
||||
.pedigree-column__name,
|
||||
.member-node__name {
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #e2e2e2;
|
||||
color: #2f2925;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: clamp(19px, 34rpx, 24px);
|
||||
font-weight: 700;
|
||||
}
|
||||
.pedigree-column__detail,
|
||||
.member-node__copy {
|
||||
align-items: flex-start;
|
||||
gap: 18rpx;
|
||||
padding: 28rpx 20rpx;
|
||||
font-size: clamp(13px, 21rpx, 16px);
|
||||
line-height: 1.7;
|
||||
white-space: normal;
|
||||
}
|
||||
.pedigree-column__detail {
|
||||
font-size: clamp(13px, 20rpx, 16px);
|
||||
}
|
||||
.member-node__surface {
|
||||
display: contents;
|
||||
}
|
||||
.member-node--blank {
|
||||
pointer-events: none;
|
||||
}
|
||||
.member-node--selected .member-node__relation,
|
||||
.member-node--selected .member-node__name,
|
||||
.member-node--selected .member-node__copy {
|
||||
background: rgba(181, 46, 34, 0.06);
|
||||
}
|
||||
.member-node--selected .member-node__name {
|
||||
color: #a7241d;
|
||||
}
|
||||
.member-node--spouse .member-node__relation {
|
||||
color: #7a4d43;
|
||||
}
|
||||
.node-relation {
|
||||
color: #675f57;
|
||||
}
|
||||
.node-years {
|
||||
color: #3f3934;
|
||||
text-combine-upright: all;
|
||||
}
|
||||
.generation-rail {
|
||||
width: 92rpx;
|
||||
border-left: 1rpx solid #e2e2e2;
|
||||
background: rgba(252, 252, 252, 0.96);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.generation-band {
|
||||
display: flex;
|
||||
width: 72rpx;
|
||||
min-height: 250rpx;
|
||||
margin: 250rpx auto 0;
|
||||
padding: 12rpx 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1rpx solid #b52e22;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.generation-band__arrow {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
filter: sepia(1) saturate(3) hue-rotate(318deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.generation-band__arrow--previous {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.generation-band__copy {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #a7241d;
|
||||
font-size: clamp(13px, 21rpx, 16px);
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
}
|
||||
.generation-band__copy text:last-child {
|
||||
font-size: clamp(12px, 18rpx, 14px);
|
||||
}
|
||||
.pedigree-state-card {
|
||||
display: grid;
|
||||
width: calc(100% - 48rpx);
|
||||
min-height: 360rpx;
|
||||
margin: 150rpx 24rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
.pedigree-state-card__skin {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.pedigree-state-card__skin,
|
||||
.pedigree-state-card__content {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
.pedigree-state-card__content {
|
||||
z-index: 1;
|
||||
padding: 62rpx 58rpx 42rpx;
|
||||
}
|
||||
.pedigree-state-card__eyebrow,
|
||||
.pedigree-state-card__title,
|
||||
.pedigree-state-card__copy {
|
||||
display: block;
|
||||
}
|
||||
.pedigree-state-card__eyebrow {
|
||||
color: $brand-red;
|
||||
font-size: clamp(14px, 22rpx, 17px);
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.pedigree-state-card__title {
|
||||
margin-top: 12rpx;
|
||||
color: $ink;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: clamp(19px, 34rpx, 24px);
|
||||
font-weight: 700;
|
||||
}
|
||||
.pedigree-state-card__copy {
|
||||
margin-top: 16rpx;
|
||||
color: $ink-muted;
|
||||
font-size: clamp(15px, 24rpx, 18px);
|
||||
line-height: 1.65;
|
||||
}
|
||||
.pedigree-state-card__action {
|
||||
display: grid;
|
||||
width: 360rpx;
|
||||
min-height: 70rpx;
|
||||
margin: 22rpx auto 0;
|
||||
}
|
||||
.pedigree-state-card__action image,
|
||||
.pedigree-state-card__action text {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
.pedigree-state-card__action image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.pedigree-state-card__action text {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff9ed;
|
||||
font-size: clamp(15px, 24rpx, 18px);
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user