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-20 17:23:09 +08:00
parent 5a31a75da0
commit 01d246c47b
59 changed files with 3615 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/tree/t01-tree-overview.vue
+130 -138
View File
@@ -25,48 +25,46 @@
</view>
</view>
<scroll-view
class="tree-scroll"
scroll-x
:scroll-left="initialScrollLeft"
:show-scrollbar="false"
>
<view
class="tree-canvas"
:class="{ 'tree-canvas--state': treeState !== 'tree' }"
<view class="tree-stage">
<view v-if="treeState === 'tree'" class="generation-rail">
<view
v-for="row in generationRows"
:key="row.generation"
class="generation-band"
:style="generationRowStyle(row)"
>
<image
src="/static/assets/modules/genealogy/transparent/section-divider.png"
mode="scaleToFill"
/>
<view class="generation-band__copy">
<text>{{ row.label }}</text>
<text>{{ row.summary }}</text>
</view>
</view>
</view>
<scroll-view
class="tree-scroll"
:class="{ 'tree-scroll--lineage': treeState === 'tree' }"
scroll-x
:scroll-left="initialScrollLeft"
:show-scrollbar="false"
>
<AppLoading
v-if="treeState === 'loading'"
text="正在整理世系"
description="请稍候，正在准备家谱成员关系。"
/>
<view
class="tree-canvas"
:class="{ 'tree-canvas--state': treeState !== 'tree' }"
>
<AppLoading
v-if="treeState === 'loading'"
text="正在整理世系"
description="请稍候，正在准备家谱成员关系。"
/>
<template v-else-if="treeState === 'tree'">
<view class="lineage-pan-cue">
<text>同代分支可左右查看</text>
</view>
<view class="generation-band generation-band--twelve">
<image
src="/static/assets/modules/genealogy/transparent/section-divider.png"
mode="scaleToFill"
/>
<text>第十二世 · 始祖</text>
</view>
<view class="generation-band generation-band--thirteen">
<image
src="/static/assets/modules/genealogy/transparent/section-divider.png"
mode="scaleToFill"
/>
<text>第十三世 · 两房</text>
</view>
<view class="generation-band generation-band--fourteen">
<image
src="/static/assets/modules/genealogy/transparent/section-divider.png"
mode="scaleToFill"
/>
<text>第十四世 · 三支</text>
</view>
<template v-else-if="treeState === 'tree'">
<view class="lineage-pan-cue">
<text>同代分支可左右查看</text>
</view>
<view class="lineage-connector lineage-connector--root" />
<view class="lineage-connector lineage-connector--root-branch" />
@@ -103,31 +101,32 @@
>
<text class="node-years">{{ member.years }}</text>
</view>
</template>
</template>
<view v-else class="tree-state-card">
<image
class="tree-state-card__skin"
src="/static/assets/modules/tree/transparent/t01-state-panel.png"
mode="scaleToFill"
/>
<view class="tree-state-card__content">
<text class="tree-state-card__eyebrow">{{
stateCopy.eyebrow
}}</text>
<text class="tree-state-card__title">{{ stateCopy.title }}</text>
<text class="tree-state-card__copy">{{ stateCopy.copy }}</text>
<view class="tree-state-card__action" @click="handleStateAction">
<image
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text>{{ stateCopy.action }}</text>
<view v-else class="tree-state-card">
<image
class="tree-state-card__skin"
src="/static/assets/modules/tree/transparent/t01-state-panel.png"
mode="scaleToFill"
/>
<view class="tree-state-card__content">
<text class="tree-state-card__eyebrow">{{
stateCopy.eyebrow
}}</text>
<text class="tree-state-card__title">{{ stateCopy.title }}</text>
<text class="tree-state-card__copy">{{ stateCopy.copy }}</text>
<view class="tree-state-card__action" @click="handleStateAction">
<image
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text>{{ stateCopy.action }}</text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</scroll-view>
</view>
<view v-if="treeState === 'tree' && selected" class="member-sheet">
<image
@@ -143,20 +142,17 @@
>
</view>
<view class="sheet-actions">
<view class="sheet-action sheet-member-action" @click="toMember">
<image
src="/static/assets/foundation/transparent/a01-secondary-button-v2.png"
mode="aspectFit"
/>
<text>查看资料</text>
</view>
<view class="sheet-action" @click="toAddRelative">
<image
src="/static/assets/foundation/transparent/a01-primary-button-v2.png"
mode="aspectFit"
/>
<text>添加亲属</text>
</view>
<AppButton
class="sheet-action"
type="secondary"
label="查看资料"
@click="toMember"
/>
<AppButton
class="sheet-action"
label="添加亲属"
@click="toAddRelative"
/>
</view>
</view>
</view>
@@ -165,6 +161,7 @@
<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";
@@ -173,7 +170,12 @@ import { genealogyContext } from "@/utils/genealogy-context.js";
const genealogyId = ref("");
const treeState = ref("loading");
const selected = ref(null);
const initialScrollLeft = ref(20);
const initialScrollLeft = ref(90);
const generationRows = [
{ generation: 12, label: "第十二世", summary: "始祖", y: 135 },
{ generation: 13, label: "第十三世", summary: "两房", y: 350 },
{ generation: 14, label: "第十四世", summary: "三支", y: 650 },
];
const members = ref([
{
id: 101,
@@ -287,6 +289,9 @@ const nodeStyle = (member) => ({
left: `${member.x}rpx`,
top: `${member.y}rpx`,
});
const generationRowStyle = (row) => ({
top: `${row.y - 88}rpx`,
});
const handleStateAction = () => {
if (treeState.value === "empty") {
uni.navigateTo({
@@ -324,7 +329,7 @@ const toAddRelative = () =>
}
.tree-page__header,
.tree-toolbar,
.tree-scroll,
.tree-stage,
.member-sheet {
position: relative;
z-index: 2;
@@ -355,11 +360,29 @@ const toAddRelative = () =>
color: $brand-red;
font-size: 23rpx;
}
.tree-stage {
position: relative;
height: calc(100vh - 272rpx);
}
.tree-scroll {
width: 100%;
height: calc(100vh - 272rpx);
height: 100%;
white-space: nowrap;
}
.generation-rail {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 4;
width: 190rpx;
box-sizing: border-box;
border-right: 1rpx solid rgba(143, 108, 63, 0.2);
}
.tree-scroll--lineage {
width: calc(100% - 190rpx);
margin-left: 190rpx;
}
.tree-canvas {
position: relative;
width: 900rpx;
@@ -380,10 +403,10 @@ const toAddRelative = () =>
}
.generation-band {
position: absolute;
left: 24rpx;
left: 12rpx;
z-index: 3;
width: 184rpx;
height: 38rpx;
width: 166rpx;
height: 58rpx;
color: #8f6c3f;
font-size: 22rpx;
text-align: center;
@@ -394,22 +417,18 @@ const toAddRelative = () =>
width: 100%;
height: 100%;
}
.generation-band text {
.generation-band__copy {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.generation-band--twelve {
top: 48rpx;
}
.generation-band--thirteen {
top: 250rpx;
}
.generation-band--fourteen {
top: 522rpx;
.generation-band__copy text:last-child {
margin-top: 1rpx;
font-size: 19rpx;
}
.lineage-connector {
position: absolute;
@@ -528,12 +547,11 @@ const toAddRelative = () =>
color: $brand-red;
}
.tree-state-card {
position: absolute;
top: 150rpx;
right: 24rpx;
left: 24rpx;
position: relative;
z-index: 2;
width: calc(100% - 48rpx);
height: 360rpx;
margin: 150rpx 24rpx 0;
text-align: center;
white-space: normal;
}
@@ -597,18 +615,21 @@ const toAddRelative = () =>
right: 18rpx;
bottom: calc(14rpx + env(safe-area-inset-bottom));
left: 18rpx;
height: 190rpx;
display: flex;
height: 240rpx;
flex-direction: column;
padding: 38rpx 44rpx 24rpx;
box-sizing: border-box;
}
.member-sheet__skin {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.member-sheet__copy {
position: absolute;
top: 38rpx;
left: 44rpx;
position: relative;
z-index: 1;
}
.sheet-name {
@@ -625,38 +646,16 @@ const toAddRelative = () =>
font-size: 22rpx;
}
.sheet-actions {
position: absolute;
right: 36rpx;
bottom: 30rpx;
position: relative;
z-index: 1;
display: flex;
gap: 12rpx;
justify-content: center;
gap: 16rpx;
margin-top: auto;
}
.sheet-action {
position: relative;
width: 148rpx;
height: 60rpx;
}
.sheet-action image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.sheet-action text {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: $ink;
font-family: "Microsoft YaHei", sans-serif;
font-size: 22rpx;
font-weight: 700;
}
.sheet-action:last-child text {
color: #fff9ed;
width: 250rpx;
min-height: 88rpx;
}
@media (max-width: 360px) {
@@ -668,18 +667,11 @@ const toAddRelative = () =>
gap: 14rpx;
}
.member-sheet {
height: 206rpx;
}
.member-sheet__copy {
top: 32rpx;
left: 36rpx;
}
.sheet-actions {
right: 28rpx;
bottom: 26rpx;
}
.sheet-action {
width: 160rpx;
height: 240rpx;
padding-top: 32rpx;
padding-right: 36rpx;
padding-left: 36rpx;
padding-bottom: 20rpx;
}
}
</style>