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

1

Browse Source
This commit is contained in:
rain
2026-07-30 07:38:06 +08:00
parent 8c2355a52c
commit 96524e4d6c
11 changed files with 460 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/tree/t01-tree-overview.vue
+367 -59
View File
@@ -156,47 +156,122 @@
</scroll-view>
</view>
<AppDialog
:visible="memberActionPanelVisible"
eyebrow="人物操作"
:title="selected ? `管理${selected.name}` : '管理人物'"
message="仅展示当前人物可达的操作。未具备可靠后端合同的写入会明确说明，且不会创建本地假数据。"
confirm-text="关闭"
@confirm="memberActionPanelVisible = false"
@cancel="memberActionPanelVisible = false"
<view
v-if="memberActionPanelVisible"
class="member-action-panel-layer"
@click="closeMemberActionPanel"
>
<view
v-if="selected"
class="member-action-profile"
role="button"
:aria-label="`查看${selected.name}的资料`"
@click="toMember"
class="member-action-panel"
role="dialog"
aria-modal="true"
:aria-label="selected ? `管理${selected.name}` : '管理人物'"
@click.stop
>
<image
class="member-action-profile__avatar"
src="/static/assets/foundation/transparent/tab-profile.png"
mode="aspectFit"
class="member-action-panel__paper"
src="/static/assets/modules/tree/transparent/t01-action-panel-paper-v3.png"
mode="scaleToFill"
/>
<view class="member-action-profile__copy">
<text>{{ selected.name }}</text>
<text
>第 {{ selected.generation }} 世 · {{ selected.relation }} ·
{{ selected.branch }}</text
<view class="member-action-panel__head">
<view
v-if="selected"
class="member-action-profile"
role="button"
:aria-label="`查看${selected.name}的资料`"
@click="toMember"
>
<text>点击头像查看资料</text>
<image
class="member-action-profile__avatar"
src="/static/assets/modules/tree/transparent/t01-member-medallion-v2.png"
mode="aspectFit"
/>
<view class="member-action-profile__copy">
<text>{{ selected.name }}</text>
<text>第 {{ selected.generation }} 世 · {{ selected.relation }}</text>
<text>点击查看人物资料</text>
</view>
</view>
<view
class="member-action-panel__close-button"
role="button"
aria-label="关闭人物操作"
@click="closeMemberActionPanel"
>
<image
class="member-action-panel__close"
src="/static/assets/modules/tree/transparent/t01-action-close-v2.png"
mode="aspectFit"
/>
</view>
</view>
<scroll-view class="member-action-panel__content" scroll-y>
<view class="member-action-panel__scroll-body">
<image
class="member-action-panel__relationship-divider"
src="/static/assets/modules/genealogy/transparent/section-divider.png"
mode="scaleToFill"
/>
<view class="member-action-map">
<image
class="member-action-map__graph"
src="/static/assets/modules/tree/transparent/t01-relation-map-v5.png"
mode="scaleToFill"
/>
<view
v-for="action in relationActions"
:key="action.key"
class="member-action-map__item"
:class="`member-action-map__item--${action.slot}`"
role="button"
:aria-label="action.label"
@click="openMemberAction(action)"
>
<image
class="member-action-map__item-frame"
src="/static/assets/modules/tree/transparent/t01-relation-button-frame-v4.png"
mode="scaleToFill"
/>
<image
src="/static/assets/modules/tree/transparent/t01-relation-marker-v2.png"
mode="aspectFit"
/>
<text>{{ action.shortLabel }}</text>
<image
class="member-action-map__arrow"
src="/static/assets/modules/tree/transparent/t01-action-arrow-v2.png"
mode="aspectFit"
/>
</view>
</view>
<view class="member-action-grid">
<view
v-for="action in managementActions"
:key="action.key"
class="member-action-grid__item"
role="button"
:aria-label="action.label"
@click="openMemberAction(action)"
>
<image
src="/static/assets/modules/tree/transparent/t01-management-marker-v2.png"
mode="aspectFit"
/>
<text>{{ action.label }}</text>
<image
class="member-action-grid__arrow"
src="/static/assets/modules/tree/transparent/t01-action-arrow-v2.png"
mode="aspectFit"
/>
</view>
</view>
<text class="member-action-panel__hint"
>所有操作都将作用于当前人物</text
>
</view>
</scroll-view>
</view>
<view class="member-action-grid">
<AppButton
v-for="action in memberActions"
:key="action.key"
type="secondary"
compact
:label="action.label"
@click="openMemberAction(action)"
/>
</view>
</AppDialog>
</view>
<AppDialog
:visible="unavailableActionVisible"
@@ -215,7 +290,6 @@
<script setup>
import { computed, nextTick, ref } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import AppButton from "@/components/AppButton.vue";
import AppDialog from "@/components/AppDialog.vue";
import AppLoading from "@/components/AppLoading.vue";
import ModulePageBackground from "@/components/ModulePageBackground.vue";
@@ -253,47 +327,93 @@ const GENERATION_GAP = 260;
const members = ref([]);
const memberActions = Object.freeze([
{ key: "VIEW_PROFILE", label: "查看资料", routeKey: "T03" },
{
key: "VIEW_PROFILE",
label: "查看资料",
group: "MANAGEMENT",
routeKey: "T03",
},
{
key: "ADD_FATHER",
label: "添加父亲",
shortLabel: "父亲",
group: "RELATION",
slot: "top",
routeKey: "T04",
relationType: "FATHER",
},
{
key: "ADD_MOTHER",
label: "添加母亲",
shortLabel: "母亲",
group: "RELATION",
slot: "left-top",
routeKey: "T04",
relationType: "MOTHER",
},
{
key: "ADD_SPOUSE",
label: "添加配偶",
shortLabel: "配偶",
group: "RELATION",
slot: "right-top",
routeKey: "T04",
relationType: "SPOUSE",
},
{
key: "ADD_SIBLING",
label: "添加兄弟姐妹",
shortLabel: "兄弟姐妹",
group: "RELATION",
slot: "left-bottom",
routeKey: "T04",
relationType: "SIBLING",
},
{ key: "ADJUST_RANK", label: "调整排行", routeKey: "T06", mode: "rank" },
{ key: "ADD_SON", label: "添加儿子", routeKey: "T04", relationType: "SON" },
{
key: "ADJUST_RANK",
label: "调整排行",
group: "MANAGEMENT",
routeKey: "T06",
mode: "rank",
},
{
key: "ADD_SON",
label: "添加儿子",
shortLabel: "儿子",
group: "RELATION",
slot: "bottom",
routeKey: "T04",
relationType: "SON",
},
{
key: "ADD_DAUGHTER",
label: "添加女儿",
shortLabel: "女儿",
group: "RELATION",
slot: "right-bottom",
routeKey: "T04",
relationType: "DAUGHTER",
},
{
key: "BIND_INVITE",
label: "邀请绑定",
group: "MANAGEMENT",
unavailableCopy:
"邀请签发、目标身份查找、绑定 mutation 和结果查询尚无可靠合同；当前不会借邀请码或普通入谱申请替代。",
},
{ key: "EDIT_PROFILE", label: "编辑信息", routeKey: "T05" },
{
key: "EDIT_PROFILE",
label: "编辑信息",
group: "MANAGEMENT",
routeKey: "T05",
},
]);
const relationActions = computed(() =>
memberActions.filter((action) => action.group === "RELATION"),
);
const managementActions = computed(() =>
memberActions.filter((action) => action.group === "MANAGEMENT"),
);
const snapToGrid = (value) => Math.ceil(value / GRID_UNIT) * GRID_UNIT;
const nodeRelationText = (member) => {
@@ -773,7 +893,7 @@ const handleStateAction = () => {
};
const toMember = () => {
if (!selected.value) return Promise.resolve(false);
memberActionPanelVisible.value = false;
closeMemberActionPanel();
return openPage(
"T03",
{ genealogyId: genealogyId.value, personId: String(selected.value.id) },
@@ -800,9 +920,12 @@ const openMemberPanel = (member) => {
selected.value = member;
memberActionPanelVisible.value = true;
};
const closeMemberActionPanel = () => {
memberActionPanelVisible.value = false;
};
const openMemberAction = (action) => {
if (!selected.value) return Promise.resolve(false);
memberActionPanelVisible.value = false;
closeMemberActionPanel();
if (!action.routeKey) {
unavailableAction.value = action;
unavailableActionVisible.value = true;
@@ -1113,53 +1236,238 @@ const openMemberAction = (action) => {
font-size: 24rpx;
font-weight: 700;
}
.member-action-profile {
.member-action-panel-layer {
position: fixed;
z-index: 80;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
box-sizing: border-box;
padding: calc(24rpx + env(safe-area-inset-top)) 0 0;
background: rgba(35, 18, 10, 0.62);
}
.member-action-panel {
position: relative;
display: flex;
width: 100%;
max-width: 100%;
height: 900rpx;
min-height: 0;
max-height: calc(
var(--app-viewport-height, 100vh) - 80rpx - env(safe-area-inset-top) -
env(safe-area-inset-bottom)
);
flex-direction: column;
border-radius: 34rpx 34rpx 0 0;
background: #f8edda;
overflow: hidden;
}
.member-action-panel__paper {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.member-action-panel__head {
position: absolute;
top: 52rpx;
right: 36rpx;
left: 36rpx;
z-index: 2;
display: flex;
align-items: center;
gap: 18rpx;
margin-top: 16rpx;
padding: 14rpx 18rpx;
justify-content: center;
box-sizing: border-box;
padding: 0;
}
.member-action-panel__close-button {
position: absolute;
top: 8rpx;
right: 0;
display: flex;
width: 72rpx;
height: 72rpx;
flex: 0 0 72rpx;
align-items: center;
justify-content: center;
}
.member-action-panel__close {
width: 62rpx;
height: 62rpx;
}
.member-action-panel__content {
z-index: 1;
min-height: 0;
flex: 1;
width: 100%;
box-sizing: border-box;
}
.member-action-panel__scroll-body {
padding: 160rpx 56rpx calc(24rpx + env(safe-area-inset-bottom));
}
.member-action-panel__relationship-divider {
display: block;
width: 100%;
height: 18rpx;
margin-bottom: 20rpx;
}
.member-action-profile {
display: flex;
width: auto;
flex: 0 1 auto;
align-items: center;
gap: 16rpx;
justify-content: center;
padding: 0;
box-sizing: border-box;
}
.member-action-profile__avatar {
width: 82rpx;
width: 92rpx;
height: 92rpx;
aspect-ratio: 1;
flex: 0 0 82rpx;
flex: 0 0 92rpx;
}
.member-action-profile__copy {
min-width: 0;
text-align: left;
text-align: center;
}
.member-action-profile__copy text {
display: block;
}
.member-action-profile__copy text:first-child {
color: $ink;
color: #70261f;
font-family: "STKaiti", "KaiTi", serif;
font-size: 30rpx;
font-size: 38rpx;
font-weight: 700;
}
.member-action-profile__copy text:nth-child(2) {
margin-top: 4rpx;
color: $ink-muted;
font-size: 21rpx;
color: #74533a;
font-size: 22rpx;
}
.member-action-profile__copy text:last-child {
margin-top: 4rpx;
color: $brand-red;
font-size: 21rpx;
display: none;
}
.member-action-map {
position: relative;
width: 100%;
height: 350rpx;
}
.member-action-map__graph {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.member-action-map__item {
z-index: 1;
position: absolute;
display: flex;
width: 190rpx;
min-width: 0;
min-height: 60rpx;
align-items: center;
justify-content: center;
gap: 4rpx;
padding: 0 10rpx;
box-sizing: border-box;
border: 1rpx solid rgba(177, 126, 64, 0.48);
border-radius: 16rpx;
background: rgba(250, 236, 211, 0.9);
box-shadow: 0 3rpx 7rpx rgba(94, 56, 24, 0.08);
}
.member-action-map__item-frame {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
filter: drop-shadow(0 3rpx 3rpx rgba(99, 57, 21, 0.12));
pointer-events: none;
}
.member-action-map__item > image:not(.member-action-map__item-frame) {
z-index: 1;
width: 36rpx;
height: 36rpx;
}
.member-action-map__item .member-action-map__arrow {
z-index: 1;
width: 18rpx;
height: 18rpx;
}
.member-action-map__item text {
z-index: 1;
color: #672820;
font-size: 22rpx;
font-weight: 700;
white-space: nowrap;
}
.member-action-map__item--top {
top: 0;
left: 50%;
transform: translateX(-50%);
}
.member-action-map__item--left-top {
top: 66rpx;
left: 0;
}
.member-action-map__item--right-top {
top: 66rpx;
right: 0;
}
.member-action-map__item--left-bottom {
bottom: 106rpx;
left: 0;
}
.member-action-map__item--right-bottom {
right: 0;
bottom: 106rpx;
}
.member-action-map__item--bottom {
right: 50%;
bottom: 0;
transform: translateX(50%);
}
.member-action-grid {
display: grid;
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12rpx;
margin-top: 20rpx;
gap: 18rpx;
margin-top: 34rpx;
padding-top: 30rpx;
border-top: 2rpx solid rgba(169, 117, 55, 0.68);
}
.member-action-grid .app-button {
width: 100%;
min-height: 70rpx;
.member-action-grid__item {
display: flex;
min-height: 96rpx;
align-items: center;
gap: 14rpx;
padding: 0 20rpx;
box-sizing: border-box;
border: 2rpx solid rgba(160, 102, 47, 0.62);
border-radius: 10rpx;
background: rgba(249, 234, 204, 0.92);
}
.member-action-grid__item image {
width: 38rpx;
height: 38rpx;
}
.member-action-grid__item .member-action-grid__arrow {
width: 22rpx;
height: 22rpx;
margin-left: auto;
}
.member-action-grid__item text {
color: #672820;
font-size: 25rpx;
font-weight: 700;
}
.member-action-panel__hint {
display: none;
}
@media (max-width: 360px) {