修改完成待测试
This commit is contained in:
+53
-88
@@ -26,10 +26,9 @@
|
||||
aria-label="回到当前成员"
|
||||
hover-class="tree-action--pressed"
|
||||
@click="recenterSelectedMember"
|
||||
>回到当前</text
|
||||
>回到当前</text
|
||||
>
|
||||
<text @click="treeState = 'landscape'">阅读提示</text>
|
||||
<text @click="toRank">调整排行</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -105,19 +104,14 @@
|
||||
>
|
||||
<view class="member-node__surface">
|
||||
<view class="member-node__portrait">
|
||||
<AppAvatar :sex="member.sex" />
|
||||
<AppAvatar
|
||||
:sex="member.sex"
|
||||
:src="member.avatarFile?.accessUrl || ''"
|
||||
/>
|
||||
<text class="node-relation">{{ member.relation }}</text>
|
||||
</view>
|
||||
<image
|
||||
class="member-node__divider"
|
||||
src="/static/assets/foundation/transparent/auth-divider-knot.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view class="member-node__copy">
|
||||
<text class="node-name">{{ member.name }}</text>
|
||||
<text class="node-relation">{{
|
||||
nodeRelationText(member)
|
||||
}}</text>
|
||||
<text class="node-years">{{ member.treeYears || member.years }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -243,13 +237,6 @@ const memberActions = Object.freeze([
|
||||
routeKey: "T04",
|
||||
relationType: memberRelationTypes.SIBLING,
|
||||
},
|
||||
{
|
||||
key: "ADJUST_RANK",
|
||||
label: "调整排行",
|
||||
group: "MANAGEMENT",
|
||||
routeKey: "T06",
|
||||
mode: "rank",
|
||||
},
|
||||
{
|
||||
key: "ADD_SON",
|
||||
label: "添加儿子",
|
||||
@@ -282,10 +269,6 @@ const managementActions = computed(() =>
|
||||
memberActions.filter((action) => action.group === "MANAGEMENT"),
|
||||
);
|
||||
|
||||
const nodeRelationText = (member) => {
|
||||
const branch = String(member.branch || "").replace(/字辈$/, "");
|
||||
return [member.relation, branch].filter(Boolean).join(" · ");
|
||||
};
|
||||
const treeLayout = computed(() => createTreeLayout(members.value));
|
||||
const layoutMembers = computed(() => treeLayout.value.members);
|
||||
const treeMetrics = computed(() => treeLayout.value.metrics);
|
||||
@@ -493,18 +476,6 @@ const toDirectory = () =>
|
||||
openPage("T07", { genealogyId: genealogyId.value }, "T01");
|
||||
const toPedigree = () =>
|
||||
openPage("T02", { genealogyId: genealogyId.value }, "T01");
|
||||
const toRank = () =>
|
||||
selectedMember.value
|
||||
? openPage(
|
||||
"T06",
|
||||
{
|
||||
genealogyId: genealogyId.value,
|
||||
personId: String(selectedMember.value.id),
|
||||
mode: "rank",
|
||||
},
|
||||
"T01",
|
||||
)
|
||||
: Promise.resolve(false);
|
||||
const openMemberPanel = (member) => {
|
||||
selectedMember.value = member;
|
||||
memberActionPanelVisible.value = true;
|
||||
@@ -521,8 +492,6 @@ const openMemberAction = (action) => {
|
||||
};
|
||||
if (action.routeKey === "T04") {
|
||||
params.relationType = action.relationType;
|
||||
} else if (action.routeKey === "T06") {
|
||||
params.mode = action.mode;
|
||||
}
|
||||
return openPage(action.routeKey, params, "T01");
|
||||
};
|
||||
@@ -584,7 +553,7 @@ const openMemberAction = (action) => {
|
||||
}
|
||||
.tree-stage--lineage {
|
||||
display: grid;
|
||||
grid-template-columns: 72rpx minmax(0, 1fr);
|
||||
grid-template-columns: 112rpx minmax(0, 1fr);
|
||||
align-items: start;
|
||||
}
|
||||
.tree-scroll {
|
||||
@@ -595,7 +564,7 @@ const openMemberAction = (action) => {
|
||||
.generation-rail {
|
||||
display: grid;
|
||||
z-index: 4;
|
||||
width: 72rpx;
|
||||
width: 112rpx;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border-right: 1rpx solid rgba(143, 108, 63, 0.2);
|
||||
@@ -627,7 +596,7 @@ const openMemberAction = (action) => {
|
||||
display: grid;
|
||||
justify-self: center;
|
||||
z-index: 3;
|
||||
width: 62rpx;
|
||||
width: 100rpx;
|
||||
height: 104rpx;
|
||||
color: #8f6c3f;
|
||||
font-size: clamp(12px, 18rpx, 14px);
|
||||
@@ -647,17 +616,17 @@ const openMemberAction = (action) => {
|
||||
.generation-band__copy {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0;
|
||||
justify-content: center;
|
||||
gap: 4rpx;
|
||||
height: 100%;
|
||||
padding: 0 4rpx;
|
||||
padding: 8rpx 4rpx;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 252, 244, 0.9);
|
||||
}
|
||||
.generation-band__copy text {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
line-height: 1.35;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.generation-band__copy text:last-child {
|
||||
@@ -677,8 +646,8 @@ const openMemberAction = (action) => {
|
||||
align-self: start;
|
||||
justify-self: start;
|
||||
z-index: 2;
|
||||
width: 160rpx;
|
||||
height: 224rpx;
|
||||
width: 154rpx;
|
||||
height: 200rpx;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
@@ -689,85 +658,81 @@ const openMemberAction = (action) => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 9rpx 8rpx 8rpx;
|
||||
border: 1rpx solid #b78a42;
|
||||
border-radius: 14rpx;
|
||||
background: rgba(255, 252, 244, 0.96);
|
||||
box-shadow: 0 5rpx 12rpx rgba(103, 72, 33, 0.12);
|
||||
padding: 10rpx;
|
||||
background: url("/static/assets/modules/tree/transparent/member-node-portrait.png") center / 100% 100% no-repeat;
|
||||
}
|
||||
.member-node__portrait {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 62rpx;
|
||||
height: 62rpx;
|
||||
width: 134rpx;
|
||||
height: 126rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border: 1rpx solid #c49a57;
|
||||
border-radius: 50%;
|
||||
border-radius: 2rpx;
|
||||
background: #fffdf7;
|
||||
overflow: hidden;
|
||||
}
|
||||
.member-node__divider {
|
||||
width: 56rpx;
|
||||
height: 14rpx;
|
||||
margin-top: 3rpx;
|
||||
}
|
||||
.member-node__copy {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 1rpx;
|
||||
min-height: 52rpx;
|
||||
margin-top: 4rpx;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.node-name,
|
||||
.node-relation,
|
||||
.node-years {
|
||||
.node-relation {
|
||||
display: block;
|
||||
}
|
||||
.node-name {
|
||||
display: -webkit-box;
|
||||
color: #6b2419;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
overflow: hidden;
|
||||
font-size: clamp(15px, 24rpx, 18px);
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
color: #d96529;
|
||||
font-family: "STKaiti", "KaiTi", serif;
|
||||
font-size: clamp(14px, 24rpx, 18px);
|
||||
font-weight: 500;
|
||||
line-height: 1.15;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
white-space: normal;
|
||||
}
|
||||
.node-relation {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
bottom: 5rpx;
|
||||
z-index: 1;
|
||||
min-width: 54rpx;
|
||||
max-width: 116rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
margin-top: 2rpx;
|
||||
color: #644b2e;
|
||||
font-size: clamp(12px, 18rpx, 14px);
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.node-years {
|
||||
overflow: hidden;
|
||||
margin-top: 2rpx;
|
||||
color: #695b4c;
|
||||
font-size: clamp(12px, 17rpx, 14px);
|
||||
line-height: 1.2;
|
||||
padding: 1rpx 6rpx;
|
||||
transform: translateX(50%);
|
||||
border: 1rpx solid #e66d24;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
color: #e66d24;
|
||||
font-size: clamp(12px, 22rpx, 15px);
|
||||
line-height: 1.35;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.member-node--spouse .member-node__surface {
|
||||
border-color: #c39a61;
|
||||
background: rgba(255, 250, 241, 0.98);
|
||||
background-image: url("/static/assets/modules/tree/transparent/member-node-portrait.png");
|
||||
}
|
||||
.member-node--selected {
|
||||
z-index: 3;
|
||||
}
|
||||
.member-node--selected .member-node__surface {
|
||||
border-color: #c55344;
|
||||
box-shadow: 0 6rpx 14rpx rgba(159, 23, 15, 0.16);
|
||||
filter: drop-shadow(0 4rpx 5rpx rgba(159, 23, 15, 0.2));
|
||||
}
|
||||
.member-node--selected .member-node__portrait {
|
||||
border-color: #c55344;
|
||||
}
|
||||
.member-node--selected .node-name {
|
||||
color: $brand-red;
|
||||
color: #d96529;
|
||||
}
|
||||
.tree-state-card {
|
||||
display: grid;
|
||||
|
||||
Reference in New Issue
Block a user