375 lines
9.3 KiB
Vue
375 lines
9.3 KiB
Vue
<template>
|
|
<view v-if="visible" class="member-action-panel-layer" @click="$emit('close')">
|
|
<view
|
|
class="member-action-panel"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
:aria-label="member ? `管理${member.name}` : '管理人物'"
|
|
@click.stop
|
|
>
|
|
<image
|
|
class="member-action-panel__paper"
|
|
src="/static/assets/modules/tree/transparent/action-panel-paper.png"
|
|
mode="scaleToFill"
|
|
/>
|
|
<view class="member-action-panel__head">
|
|
<view
|
|
v-if="member"
|
|
class="member-action-profile"
|
|
role="button"
|
|
:aria-label="`查看${member.name}的资料`"
|
|
@click="$emit('view-profile')"
|
|
>
|
|
<view class="member-action-profile__avatar">
|
|
<AppAvatar :sex="member.sex" />
|
|
</view>
|
|
<view class="member-action-profile__copy">
|
|
<text>{{ member.name }}</text>
|
|
<text>第 {{ member.generation }} 世 · {{ member.relation }}</text>
|
|
<text>点击查看人物资料</text>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="member-action-panel__close-button"
|
|
role="button"
|
|
aria-label="关闭人物操作"
|
|
@click="$emit('close')"
|
|
>
|
|
<image
|
|
class="member-action-panel__close"
|
|
src="/static/assets/modules/tree/transparent/action-close.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/relation-map.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="$emit('select-action', action)"
|
|
>
|
|
<image
|
|
class="member-action-map__item-frame"
|
|
src="/static/assets/modules/tree/transparent/relation-button-frame.png"
|
|
mode="scaleToFill"
|
|
/>
|
|
<image
|
|
src="/static/assets/modules/tree/transparent/relation-marker.png"
|
|
mode="aspectFit"
|
|
/>
|
|
<text>{{ action.shortLabel }}</text>
|
|
<image
|
|
class="member-action-map__arrow"
|
|
src="/static/assets/modules/tree/transparent/action-arrow.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="$emit('select-action', action)"
|
|
>
|
|
<image
|
|
src="/static/assets/modules/tree/transparent/management-marker.png"
|
|
mode="aspectFit"
|
|
/>
|
|
<text>{{ action.label }}</text>
|
|
<image
|
|
class="member-action-grid__arrow"
|
|
src="/static/assets/modules/tree/transparent/action-arrow.png"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<text class="member-action-panel__hint">所有操作都将作用于当前人物</text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import AppAvatar from "@/components/AppAvatar.vue";
|
|
|
|
defineProps({
|
|
visible: { type: Boolean, default: false },
|
|
member: { type: Object, default: null },
|
|
relationActions: { type: Array, default: () => [] },
|
|
managementActions: { type: Array, default: () => [] },
|
|
});
|
|
|
|
defineEmits(["close", "view-profile", "select-action"]);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.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;
|
|
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 {
|
|
display: block;
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
aspect-ratio: 1;
|
|
flex: 0 0 92rpx;
|
|
box-sizing: border-box;
|
|
border: 3rpx solid #d0a65d;
|
|
border-radius: 50%;
|
|
background: #fff8e8;
|
|
box-shadow: 0 3rpx 8rpx rgba(105, 65, 29, 0.18);
|
|
overflow: hidden;
|
|
}
|
|
.member-action-profile__copy {
|
|
min-width: 0;
|
|
text-align: center;
|
|
}
|
|
.member-action-profile__copy text {
|
|
display: block;
|
|
}
|
|
.member-action-profile__copy text:first-child {
|
|
color: #70261f;
|
|
font-family: "STKaiti", "KaiTi", serif;
|
|
font-size: clamp(20px, 38rpx, 26px);
|
|
font-weight: 700;
|
|
}
|
|
.member-action-profile__copy text:nth-child(2) {
|
|
margin-top: 4rpx;
|
|
color: #74533a;
|
|
font-size: clamp(14px, 22rpx, 17px);
|
|
}
|
|
.member-action-profile__copy text:last-child {
|
|
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: clamp(14px, 22rpx, 17px);
|
|
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: 18rpx;
|
|
margin-top: 34rpx;
|
|
padding-top: 30rpx;
|
|
border-top: 2rpx solid rgba(169, 117, 55, 0.68);
|
|
}
|
|
.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: clamp(15px, 25rpx, 18px);
|
|
font-weight: 700;
|
|
}
|
|
.member-action-panel__hint {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 360px) {
|
|
.member-action-profile {
|
|
gap: 14rpx;
|
|
padding-right: 14rpx;
|
|
padding-left: 14rpx;
|
|
}
|
|
}
|
|
</style>
|