feat: migrate app routes and business modules
This commit is contained in:
@@ -0,0 +1,374 @@
|
||||
<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>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user