修改完成

This commit is contained in:
2026-07-21 07:53:03 +08:00
parent 01d246c47b
commit ff60119277
172 changed files with 7982 additions and 2999 deletions
+70 -194
View File
@@ -21,11 +21,6 @@
</view>
<view v-else-if="hasError" class="state-panel state-panel--error">
<image
class="error-panel__frame"
src="/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png"
mode="scaleToFill"
/>
<view class="error-panel__content">
<image
class="error-panel__seal"
@@ -44,11 +39,6 @@
hover-class="action-hover"
@click="retryLoad"
>
<image
class="state-retry__skin"
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text class="state-retry__copy">重新加载</text>
</view>
</view>
@@ -57,18 +47,8 @@
<template v-else-if="hasGenealogies">
<view class="genealogy-fixed-zone">
<view class="current-slip" @click="openSwitcher">
<image
class="current-frame"
src="/static/assets/modules/genealogy/transparent/current-slip-frame.png"
mode="scaleToFill"
/>
<view class="current-summary">
<view class="current-seal">
<image
class="current-seal-frame"
src="/static/assets/modules/genealogy/transparent/current-seal-frame.png"
mode="scaleToFill"
/>
<text class="current-seal-title">家谱</text>
</view>
<text class="current-name">{{ currentGenealogy.name }}</text>
@@ -165,11 +145,6 @@
hover-class="action-hover"
@click="openApplication(item)"
>
<image
class="application-record__skin"
src="/static/assets/modules/genealogy/transparent/list-slip-frame.png"
mode="scaleToFill"
/>
<view class="application-record__main">
<view class="application-record__title-row">
<text class="application-record__name">{{
@@ -217,18 +192,8 @@
<view v-else class="genealogy-empty-state">
<view class="empty-panel">
<image
class="empty-panel__frame"
src="/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png"
mode="scaleToFill"
/>
<view class="empty-panel__content">
<view class="empty-seal">
<image
class="empty-seal__skin"
src="/static/assets/modules/genealogy/transparent/current-seal-frame.png"
mode="scaleToFill"
/>
<text class="empty-seal__text">家谱</text>
</view>
<text class="empty-title">还没有加入任何家谱</text>
@@ -245,11 +210,6 @@
hover-class="action-hover"
@click="applyToJoin"
>
<image
class="empty-search-action__skin"
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text
class="empty-search-action__copy empty-search-action__copy--primary"
>搜索家谱</text
@@ -260,11 +220,6 @@
hover-class="action-hover"
@click="joinByInvite"
>
<image
class="empty-invite-action__skin"
src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png"
mode="aspectFit"
/>
<text class="empty-invite-action__copy">邀请码加入</text>
</view>
<view
@@ -393,6 +348,7 @@ import GenealogyCard from "@/components/GenealogyCard.vue";
import GenealogyPageBackground from "@/components/GenealogyPageBackground.vue";
import PageHeader from "@/components/PageHeader.vue";
import { genealogies, notifications } from "@/data/mock.js";
import { genealogyContext } from "@/utils/genealogy-context.js";
const isLoading = ref(false);
const hasError = ref(false);
@@ -400,7 +356,12 @@ const list = ref(genealogies);
const forceEmptyState = ref(false);
const addDialogVisible = ref(false);
const switcherVisible = ref(false);
const selectedGenealogyId = ref(genealogies[0]?.id || null);
const storedGenealogyId = Number(genealogyContext.getCurrentGenealogyId());
const selectedGenealogyId = ref(
genealogies.some((item) => item.id === storedGenealogyId)
? storedGenealogyId
: genealogies[0]?.id || null,
);
const listScrollCommand = ref(0);
const currentListScrollTop = ref(0);
@@ -422,7 +383,14 @@ const syncEmptyStateFromRoute = () => {
hasError.value = presentationState === "error";
};
onLoad(() => {
onLoad((query) => {
const requestedId = Number(query?.genealogyId);
if (genealogies.some((item) => item.id === requestedId)) {
selectedGenealogyId.value = requestedId;
genealogyContext.setCurrentGenealogyId(requestedId);
} else if (selectedGenealogyId.value) {
genealogyContext.setCurrentGenealogyId(selectedGenealogyId.value);
}
syncEmptyStateFromRoute();
});
@@ -440,10 +408,10 @@ const isListLayout = computed(
() => !isLoading.value && !hasError.value && hasGenealogies.value,
);
const createdGenealogies = computed(() =>
list.value.filter((item, index) => index === 0),
list.value.filter((item) => item.membership === "created"),
);
const joinedGenealogies = computed(() =>
list.value.filter((item, index) => index > 0),
list.value.filter((item) => item.membership === "joined"),
);
const availableGenealogies = computed(() => list.value);
const currentGenealogy = computed(
@@ -501,10 +469,12 @@ const shortcuts = [
},
];
const openGenealogy = (genealogy) =>
const openGenealogy = (genealogy) => {
genealogyContext.setCurrentGenealogyId(genealogy.id);
uni.navigateTo({
url: `/pages/genealogy/g05-genealogy-overview?genealogyId=${genealogy.id}`,
});
};
const createGenealogy = () =>
uni.navigateTo({ url: "/pages/genealogy/g03-create-genealogy" });
const applyToJoin = () =>
@@ -550,6 +520,7 @@ const resetListScroll = async () => {
};
const selectGenealogy = async (genealogy) => {
selectedGenealogyId.value = genealogy.id;
genealogyContext.setCurrentGenealogyId(genealogy.id);
closeSwitcher();
await resetListScroll();
};
@@ -565,11 +536,14 @@ const retryLoad = () => {
};
const openShortcut = (key) => {
if (!currentGenealogy.value) return;
const genealogyId = currentGenealogy.value.id;
genealogyContext.setCurrentGenealogyId(genealogyId);
const paths = {
tree: "/pages/tree/t01-tree-overview",
tree: `/pages/tree/t01-tree-overview?genealogyId=${currentGenealogy.value.id}`,
members: `/pages/genealogy/g05-genealogy-overview?genealogyId=${currentGenealogy.value.id}`,
poem: "/pages/genealogy/g12-generation-poems",
applications: "/pages/genealogy/g10-application-review",
poem: `/pages/genealogy/g12-generation-poems?genealogyId=${currentGenealogy.value.id}`,
applications: `/pages/genealogy/g10-application-review?genealogyId=${currentGenealogy.value.id}`,
};
uni.navigateTo({ url: paths[key] });
};
@@ -577,15 +551,15 @@ const openShortcut = (key) => {
<style scoped lang="scss">
.genealogy-index {
position: relative;
display: flex;
min-height: 100vh;
flex-direction: column;
overflow: hidden;
background: #f9f6ef;
}
.genealogy-content {
position: relative;
z-index: 2;
z-index: 1;
padding: 24rpx 32rpx 176rpx;
}
@@ -618,29 +592,14 @@ const openShortcut = (key) => {
}
.current-slip {
position: relative;
display: block;
min-height: 268rpx;
padding: 30rpx 34rpx 28rpx;
box-sizing: border-box;
background: transparent;
}
.current-frame {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: url("/static/assets/modules/genealogy/transparent/current-slip-frame.png") center / 100% 100% no-repeat;
}
.current-seal {
position: relative;
z-index: 1;
display: flex;
width: 80rpx;
height: 128rpx;
@@ -648,22 +607,10 @@ const openShortcut = (key) => {
align-items: center;
justify-content: center;
margin-right: 24rpx;
background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png") center / 100% 100% no-repeat;
color: #fff7e7;
}
.current-seal-frame {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
}
.current-seal-title {
position: relative;
z-index: 1;
color: #fff7e7;
font-family: "STKaiti", "KaiTi", serif;
font-size: 32rpx;
@@ -672,20 +619,16 @@ const openShortcut = (key) => {
writing-mode: vertical-rl;
}
.current-summary {
position: relative;
z-index: 1;
display: flex;
min-width: 0;
align-items: center;
}
.current-name {
overflow: hidden;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 50rpx;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
overflow-wrap: anywhere;
}
.current-switch-copy {
flex: 0 0 auto;
@@ -694,8 +637,6 @@ const openShortcut = (key) => {
font-size: 28rpx;
}
.current-info-divider {
position: relative;
z-index: 1;
width: 100%;
height: 1rpx;
margin: 14rpx 0 16rpx;
@@ -703,8 +644,6 @@ const openShortcut = (key) => {
}
.current-meta {
position: relative;
z-index: 1;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
@@ -719,10 +658,10 @@ const openShortcut = (key) => {
display: flex;
align-items: center;
margin: 0;
white-space: nowrap;
flex-wrap: wrap;
.current-meta-item-text {
white-space: nowrap;
overflow-wrap: anywhere;
}
}
.current-meta-icon {
@@ -752,7 +691,6 @@ const openShortcut = (key) => {
height: 82rpx;
}
.shortcut-label {
overflow: hidden;
width: 100%;
margin-top: 12rpx;
color: $ink;
@@ -760,8 +698,7 @@ const openShortcut = (key) => {
font-size: 29rpx;
font-weight: 700;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow-wrap: anywhere;
}
.section-divider {
@@ -803,25 +740,17 @@ const openShortcut = (key) => {
}
.application-record {
position: relative;
display: flex;
min-height: 138rpx;
align-items: center;
box-sizing: border-box;
padding: 22rpx 26rpx;
background: url("/static/assets/modules/genealogy/transparent/list-slip-frame.png") center / 100% 100% no-repeat;
}
.application-record + .application-record {
margin-top: 12rpx;
}
.application-record__skin {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.application-record__main {
position: relative;
z-index: 1;
min-width: 0;
flex: 1;
}
@@ -831,13 +760,11 @@ const openShortcut = (key) => {
justify-content: space-between;
}
.application-record__name {
overflow: hidden;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 32rpx;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
overflow-wrap: anywhere;
}
.application-record__status {
flex: 0 0 auto;
@@ -861,8 +788,6 @@ const openShortcut = (key) => {
line-height: 1.4;
}
.application-record__chevron {
position: relative;
z-index: 1;
width: 32rpx;
height: 32rpx;
margin-left: 14rpx;
@@ -907,20 +832,18 @@ const openShortcut = (key) => {
}
.create-action > text {
flex: 0 0 auto;
white-space: nowrap;
text-align: center;
}
.create-cloud--right {
transform: scaleX(-1);
}
.state-panel {
position: relative;
display: flex;
min-height: 540rpx;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 42rpx;
box-sizing: border-box;
text-align: center;
@@ -941,25 +864,15 @@ const openShortcut = (key) => {
}
.state-panel--error {
height: 1120rpx;
min-height: 1120rpx;
padding: 0;
}
.error-panel__frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: url("/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png") center / 100% 100% no-repeat;
}
.error-panel__content {
position: relative;
z-index: 1;
display: flex;
width: 100%;
height: 100%;
min-height: 1120rpx;
flex-direction: column;
align-items: center;
justify-content: center;
@@ -1000,7 +913,7 @@ const openShortcut = (key) => {
.state-panel--error .state-retry {
width: 560rpx;
height: 124rpx;
min-height: 124rpx;
margin-top: 22rpx;
}
@@ -1009,23 +922,13 @@ const openShortcut = (key) => {
}
.empty-panel {
position: relative;
height: 1120rpx;
}
.empty-panel__frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
min-height: 1120rpx;
background: url("/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png") center / 100% 100% no-repeat;
}
.empty-panel__content {
position: relative;
z-index: 1;
display: flex;
height: 100%;
min-height: 1120rpx;
flex-direction: column;
align-items: center;
justify-content: center;
@@ -1035,24 +938,15 @@ const openShortcut = (key) => {
}
.empty-seal {
position: relative;
display: flex;
width: 120rpx;
height: 184rpx;
align-items: center;
justify-content: center;
}
.empty-seal__skin {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png") center / 100% 100% no-repeat;
}
.empty-seal__text {
position: relative;
z-index: 1;
color: #fff7e7;
font-family: "STKaiti", "KaiTi", serif;
font-size: 32rpx;
@@ -1089,35 +983,25 @@ const openShortcut = (key) => {
.empty-search-action,
.empty-invite-action {
position: relative;
display: flex;
width: 560rpx;
height: 124rpx;
min-height: 124rpx;
align-items: center;
justify-content: center;
overflow: hidden;
}
.empty-search-action {
margin-top: 26rpx;
background: url("/static/assets/foundation/transparent/a01-scroll-primary-v3.png") center / contain no-repeat;
}
.empty-invite-action {
margin-top: 22rpx;
}
.empty-search-action__skin,
.empty-invite-action__skin {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png") center / contain no-repeat;
}
.empty-search-action__copy,
.empty-invite-action__copy {
position: relative;
z-index: 1;
color: #7b4e24;
font-family: "STKaiti", "KaiTi", serif;
font-size: 34rpx;
@@ -1147,24 +1031,15 @@ const openShortcut = (key) => {
}
.state-retry {
position: relative;
display: flex;
width: 360rpx;
height: 96rpx;
min-height: 96rpx;
align-items: center;
justify-content: center;
margin-top: 30rpx;
overflow: hidden;
}
.state-retry__skin {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: url("/static/assets/foundation/transparent/a01-scroll-primary-v3.png") center / contain no-repeat;
}
.state-retry__copy {
position: relative;
z-index: 1;
color: #fff9ec;
font-family: "STKaiti", "KaiTi", serif;
font-size: 29rpx;
@@ -1181,7 +1056,6 @@ const openShortcut = (key) => {
background: rgba(34, 20, 12, 0.68);
}
.add-dialog {
position: relative;
width: 100%;
min-height: 780rpx;
max-height: calc(100vh - 80rpx);
@@ -1193,8 +1067,6 @@ const openShortcut = (key) => {
border-image-repeat: stretch;
}
.add-dialog__content {
position: relative;
z-index: 2;
display: flex;
min-height: 780rpx;
max-height: calc(100vh - 80rpx);
@@ -1208,24 +1080,26 @@ const openShortcut = (key) => {
margin: auto 0;
}
.add-dialog__heading {
position: relative;
padding-right: 96rpx;
display: grid;
grid-template-columns: minmax(0, 1fr) 96rpx;
}
.add-dialog .dialog-title,
.add-dialog .dialog-copy {
display: block;
grid-column: 1;
text-align: left;
}
.add-dialog__close {
position: absolute;
z-index: 3;
top: 0;
right: -22rpx;
display: flex;
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
justify-self: end;
width: 80rpx;
height: 80rpx;
align-items: center;
justify-content: center;
margin-right: -22rpx;
}
.add-dialog__close-icon {
width: 80rpx;
@@ -1258,7 +1132,6 @@ const openShortcut = (key) => {
background: rgba(34, 20, 12, 0.58);
}
.genealogy-switcher {
position: relative;
width: 670rpx;
max-width: 100%;
min-height: 600rpx;
@@ -1271,32 +1144,35 @@ const openShortcut = (key) => {
border-image-repeat: stretch;
}
.genealogy-switcher__content {
position: relative;
z-index: 1;
display: flex;
display: grid;
min-height: 600rpx;
max-height: calc(100vh - 120rpx);
flex-direction: column;
grid-template-rows: auto minmax(0, 1fr);
align-items: center;
box-sizing: border-box;
padding: 120rpx 58rpx 140rpx;
}
.genealogy-switcher__content > .dialog-title {
grid-area: 1 / 1;
}
.genealogy-switcher__close {
position: absolute;
z-index: 3;
top: 78rpx;
right: 34rpx;
display: flex;
grid-area: 1 / 1;
align-self: start;
justify-self: end;
width: 80rpx;
height: 80rpx;
align-items: center;
justify-content: center;
margin-top: -42rpx;
margin-right: -24rpx;
}
.genealogy-switcher__close-icon {
width: 80rpx;
height: 80rpx;
}
.genealogy-switcher__list {
grid-area: 2 / 1;
width: 100%;
min-height: 0;
max-height: calc(100vh - 456rpx);