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

完成70%

Browse Source
This commit is contained in:
rain
2026-07-24 07:56:22 +08:00
parent bb6431b319
commit c7f278fe79
92 changed files with 4741 additions and 14440 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/tree/t01-tree-overview.vue
+149 -71
View File
@@ -30,7 +30,7 @@
>回到当前</text
>
<text @click="treeState = 'landscape'">阅读提示</text>
<text @click="toRelationship">关系维护</text>
<text @click="toRank">调整排行</text>
</view>
</view>
@@ -99,7 +99,7 @@
class="member-node"
:class="{ 'member-node--selected': selected?.id === member.id }"
:style="nodeGridStyle(member)"
@click="selected = member"
@click="openMemberPanel(member)"
>
<image
class="member-node__skin"
@@ -110,6 +110,11 @@
"
mode="scaleToFill"
/>
<image
class="member-node__avatar"
src="/static/assets/foundation/transparent/meta-member.png"
mode="aspectFit"
/>
<view class="member-node__copy">
<text class="node-name">{{ member.name }}</text>
<text class="node-relation"
@@ -145,33 +150,54 @@
</scroll-view>
</view>
<view v-if="treeState === 'tree' && selected" class="member-sheet">
<image
class="member-sheet__skin"
src="/static/assets/modules/tree/transparent/t01-member-drawer.png"
mode="scaleToFill"
/>
<view class="member-sheet__copy">
<text class="sheet-name">{{ selected.name }}</text>
<text class="sheet-meta"
>第 {{ selected.generation }} 世 · {{ selected.relation }} ·
{{ selected.branch }}</text
>
<AppDialog
:visible="memberActionPanelVisible"
eyebrow="人物操作"
:title="selected ? `管理${selected.name}` : '管理人物'"
message="仅展示当前人物可达的操作。未具备可靠后端合同的写入会明确说明，且不会创建本地假数据。"
confirm-text="关闭"
@confirm="memberActionPanelVisible = false"
@cancel="memberActionPanelVisible = false"
>
<view
v-if="selected"
class="member-action-profile"
role="button"
:aria-label="`查看${selected.name}的资料`"
@click="toMember"
>
<image
class="member-action-profile__avatar"
src="/static/assets/foundation/transparent/meta-member.png"
mode="aspectFit"
/>
<view class="member-action-profile__copy">
<text>{{ selected.name }}</text>
<text>第 {{ selected.generation }} 世 · {{ selected.relation }} · {{ selected.branch }}</text>
<text>点击头像查看资料</text>
</view>
</view>
<view class="sheet-actions">
<view class="member-action-grid">
<AppButton
class="sheet-action"
v-for="action in memberActions"
:key="action.key"
type="secondary"
label="查看资料"
@click="toMember"
/>
<AppButton
class="sheet-action"
label="添加亲属"
@click="toAddRelative"
compact
:label="action.label"
@click="openMemberAction(action)"
/>
</view>
</view>
</AppDialog>
<AppDialog
:visible="unavailableActionVisible"
eyebrow="服务状态"
:title="unavailableAction?.label || '当前操作'"
:message="unavailableAction?.unavailableCopy || '该操作暂未接入可靠服务合同。'"
confirm-text="我知道了"
@confirm="unavailableActionVisible = false"
@cancel="unavailableActionVisible = false"
/>
</view>
</template>
@@ -179,6 +205,7 @@
import { computed, 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";
import PageHeader from "@/components/PageHeader.vue";
@@ -193,6 +220,9 @@ import { openPage } from "@/utils/navigation.js";
const genealogyId = ref("");
const treeState = ref("loading");
const selected = ref(null);
const memberActionPanelVisible = ref(false);
const unavailableActionVisible = ref(false);
const unavailableAction = ref(null);
const treeScrollLeft = ref(90);
const currentTreeScrollLeft = ref(90);
const centeredTreeScrollLeft = ref(90);
@@ -209,6 +239,23 @@ const MEMBER_GAP = 250;
const GENERATION_GAP = 220;
const members = ref([]);
const memberActions = Object.freeze([
{ key: "VIEW_PROFILE", label: "查看资料", routeKey: "T03" },
{ key: "ADD_FATHER", label: "添加父亲", routeKey: "T04", relationType: "FATHER" },
{ key: "ADD_MOTHER", label: "添加母亲", routeKey: "T04", relationType: "MOTHER" },
{ key: "ADD_SPOUSE", label: "添加配偶", routeKey: "T04", relationType: "SPOUSE" },
{ key: "ADD_SIBLING", label: "添加兄弟姐妹", routeKey: "T04", relationType: "SIBLING" },
{ key: "ADJUST_RANK", label: "调整排行", routeKey: "T06", mode: "rank" },
{ key: "ADD_SON", label: "添加儿子", routeKey: "T04", relationType: "SON" },
{ key: "ADD_DAUGHTER", label: "添加女儿", routeKey: "T04", relationType: "DAUGHTER" },
{
key: "BIND_INVITE",
label: "邀请绑定",
unavailableCopy: "邀请签发、目标身份查找、绑定 mutation 和结果查询尚无可靠合同；当前不会借邀请码或普通入谱申请替代。",
},
{ key: "EDIT_PROFILE", label: "编辑信息", routeKey: "T05" },
]);
const snapToGrid = (value) => Math.ceil(value / GRID_UNIT) * GRID_UNIT;
const layoutMembers = computed(() => {
const generations = Array.from(
@@ -482,20 +529,40 @@ const handleStateAction = () => {
selected.value = layoutMembers.value[0];
treeState.value = "tree";
};
const toMember = () =>
selected.value
? openPage("T03", { genealogyId: genealogyId.value, personId: String(selected.value.id) }, "T01")
: Promise.resolve(false);
const toMember = () => {
if (!selected.value) return Promise.resolve(false);
memberActionPanelVisible.value = false;
return openPage("T03", { genealogyId: genealogyId.value, personId: String(selected.value.id) }, "T01");
};
const toDirectory = () =>
openPage("T07", { genealogyId: genealogyId.value }, "T01");
const toRelationship = () =>
const toRank = () =>
selected.value
? openPage("T06", { genealogyId: genealogyId.value, personId: String(selected.value.id) }, "T01")
: Promise.resolve(false);
const toAddRelative = () =>
selected.value
? openPage("T04", { genealogyId: genealogyId.value, personId: String(selected.value.id) }, "T01")
? openPage("T06", { genealogyId: genealogyId.value, personId: String(selected.value.id), mode: "rank" }, "T01")
: Promise.resolve(false);
const openMemberPanel = (member) => {
selected.value = member;
memberActionPanelVisible.value = true;
};
const openMemberAction = (action) => {
if (!selected.value) return Promise.resolve(false);
memberActionPanelVisible.value = false;
if (!action.routeKey) {
unavailableAction.value = action;
unavailableActionVisible.value = true;
return Promise.resolve(false);
}
const params = {
genealogyId: genealogyId.value,
personId: String(selected.value.id),
};
if (action.routeKey === "T04") {
params.relationType = action.relationType;
} else if (action.routeKey === "T06") {
params.mode = action.mode;
}
return openPage(action.routeKey, params, "T01");
};
</script>
<style scoped lang="scss">
@@ -638,8 +705,18 @@ const toAddRelative = () =>
.member-node__copy {
grid-area: 1 / 1;
}
.member-node__avatar {
grid-area: 1 / 1;
z-index: 3;
align-self: start;
justify-self: start;
width: 42rpx;
height: 42rpx;
margin: 13rpx 0 0 18rpx;
}
.member-node__copy {
z-index: 1;
padding-left: 44rpx;
}
.node-name,
.node-relation,
@@ -736,50 +813,53 @@ const toAddRelative = () =>
font-size: 24rpx;
font-weight: 700;
}
.member-sheet {
position: fixed;
right: 18rpx;
bottom: calc(14rpx + env(safe-area-inset-bottom));
left: 18rpx;
.member-action-profile {
display: flex;
min-height: 240rpx;
flex-direction: column;
padding: 38rpx 44rpx 24rpx;
width: 100%;
align-items: center;
gap: 18rpx;
margin-top: 16rpx;
padding: 14rpx 18rpx;
box-sizing: border-box;
}
.member-sheet__skin {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
.member-action-profile__avatar {
width: 82rpx;
aspect-ratio: 1;
flex: 0 0 82rpx;
}
.member-sheet__copy {
z-index: 1;
.member-action-profile__copy {
min-width: 0;
text-align: left;
}
.sheet-name {
.member-action-profile__copy text {
display: block;
}
.member-action-profile__copy text:first-child {
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 31rpx;
font-size: 30rpx;
font-weight: 700;
}
.sheet-meta {
display: block;
margin-top: 8rpx;
.member-action-profile__copy text:nth-child(2) {
margin-top: 4rpx;
color: $ink-muted;
font-size: 22rpx;
font-size: 21rpx;
}
.sheet-actions {
z-index: 1;
display: flex;
justify-content: center;
gap: 16rpx;
margin-top: auto;
.member-action-profile__copy text:last-child {
margin-top: 4rpx;
color: $brand-red;
font-size: 21rpx;
}
.sheet-action {
width: 250rpx;
min-height: 88rpx;
.member-action-grid {
display: grid;
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12rpx;
margin-top: 20rpx;
}
.member-action-grid .app-button {
width: 100%;
min-height: 70rpx;
}
@media (max-width: 360px) {
@@ -790,12 +870,10 @@ const toAddRelative = () =>
.tree-toolbar__actions {
gap: 14rpx;
}
.member-sheet {
min-height: 240rpx;
padding-top: 32rpx;
padding-right: 36rpx;
padding-left: 36rpx;
padding-bottom: 20rpx;
.member-action-profile {
gap: 14rpx;
padding-right: 14rpx;
padding-left: 14rpx;
}
}
</style>