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

feat: 完成70%全局样式与可读性优化

Browse Source
This commit is contained in:
rain
2026-07-31 11:27:15 +08:00
parent 96524e4d6c
commit 555aa00043
116 changed files with 1928 additions and 1169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/tree/t01-tree-overview.vue
+58 -52
View File
@@ -11,7 +11,7 @@
>
<ModulePageBackground module="tree" />
<view class="tree-page__header">
<PageHeader title="树状图" action="世系谱" @action="toPedigree" />
<PageHeader title="树状图" action="世系表格" @action="toPedigree" />
</view>
<view v-if="treeState !== 'loading'" class="tree-toolbar">
@@ -49,10 +49,7 @@
class="generation-band"
:style="generationBandStyle(row)"
>
<image
src="/static/assets/modules/genealogy/transparent/section-divider.png"
mode="scaleToFill"
/>
<view class="generation-band__line" aria-hidden="true" />
<view class="generation-band__copy">
<text>{{ row.label }}</text>
<text>{{ row.summary }}</text>
@@ -109,11 +106,7 @@
>
<view class="member-node__surface">
<view class="member-node__portrait">
<image
class="member-node__avatar"
src="/static/assets/foundation/transparent/tab-profile.png"
mode="aspectFit"
/>
<AppAvatar :sex="member.sex" />
</view>
<image
class="member-node__divider"
@@ -125,7 +118,7 @@
<text class="node-relation">{{
nodeRelationText(member)
}}</text>
<text class="node-years">{{ member.years }}</text>
<text class="node-years">{{ member.treeYears || member.years }}</text>
</view>
</view>
</view>
@@ -181,11 +174,9 @@
:aria-label="`查看${selected.name}的资料`"
@click="toMember"
>
<image
class="member-action-profile__avatar"
src="/static/assets/modules/tree/transparent/t01-member-medallion-v2.png"
mode="aspectFit"
/>
<view class="member-action-profile__avatar">
<AppAvatar :sex="selected.sex" />
</view>
<view class="member-action-profile__copy">
<text>{{ selected.name }}</text>
<text>第 {{ selected.generation }} 世 · {{ selected.relation }}</text>
@@ -290,6 +281,7 @@
<script setup>
import { computed, nextTick, ref } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import AppAvatar from "@/components/AppAvatar.vue";
import AppDialog from "@/components/AppDialog.vue";
import AppLoading from "@/components/AppLoading.vue";
import ModulePageBackground from "@/components/ModulePageBackground.vue";
@@ -320,10 +312,10 @@ let pageActive = true;
let skipNextShowRefresh = true;
const GRID_UNIT = 5;
const NODE_HALF_WIDTH = 80;
const NODE_HALF_HEIGHT = 94;
const NODE_HALF_HEIGHT = 112;
const FAMILY_LINK_OFFSET = 18;
const MEMBER_GAP = 178;
const GENERATION_GAP = 260;
const GENERATION_GAP = 296;
const members = ref([]);
const memberActions = Object.freeze([
@@ -603,7 +595,7 @@ const generationRangeLabel = computed(() => {
return first === last ? `第 ${first} 世` : `第 ${first}—${last} 世`;
});
const generationBandStyle = (row) => ({
gridRow: `${Math.max(1, Math.round((row.y - 88) / GRID_UNIT) + 1)} / span 12`,
gridRow: `${Math.max(1, Math.round((row.y - NODE_HALF_HEIGHT) / GRID_UNIT) + 1)} / span 21`,
});
const lineageConnectors = computed(() => {
const memberById = new Map(
@@ -969,19 +961,19 @@ const openMemberAction = (action) => {
.tree-toolbar__title text:first-child {
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 28rpx;
font-size: clamp(16px, 28rpx, 20px);
font-weight: 700;
}
.tree-toolbar__title text:last-child {
margin-top: 5rpx;
color: $ink-muted;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.tree-toolbar__actions {
display: flex;
gap: 24rpx;
color: $brand-red;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
}
.tree-stage {
min-height: 0;
@@ -992,7 +984,7 @@ const openMemberAction = (action) => {
}
.tree-stage--lineage {
display: grid;
grid-template-columns: 144rpx minmax(0, 1fr);
grid-template-columns: 72rpx minmax(0, 1fr);
align-items: start;
}
.tree-scroll {
@@ -1003,7 +995,7 @@ const openMemberAction = (action) => {
.generation-rail {
display: grid;
z-index: 4;
width: 144rpx;
width: 72rpx;
height: 100%;
box-sizing: border-box;
border-right: 1rpx solid rgba(143, 108, 63, 0.2);
@@ -1027,38 +1019,49 @@ const openMemberAction = (action) => {
z-index: 3;
margin: 8rpx 22rpx 0 0;
color: #9a7748;
font-size: 20rpx;
font-size: clamp(13px, 20rpx, 16px);
letter-spacing: 1rpx;
}
.generation-band {
position: relative;
display: grid;
justify-self: center;
z-index: 3;
width: 126rpx;
height: 58rpx;
width: 62rpx;
height: 104rpx;
color: #8f6c3f;
font-size: 22rpx;
font-size: clamp(12px, 18rpx, 14px);
text-align: center;
}
.generation-band image,
.generation-band__line,
.generation-band__copy {
grid-area: 1 / 1;
}
.generation-band image {
width: 100%;
height: 100%;
.generation-band__line {
align-self: stretch;
justify-self: center;
width: 0;
margin: 3rpx 0;
border-left: 1rpx solid rgba(183, 138, 66, 0.7);
}
.generation-band__copy {
z-index: 1;
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
justify-content: center;
justify-content: space-between;
gap: 0;
height: 100%;
padding: 0 4rpx;
box-sizing: border-box;
}
.generation-band__copy text {
writing-mode: vertical-rl;
text-orientation: upright;
white-space: nowrap;
}
.generation-band__copy text:last-child {
margin-top: 1rpx;
font-size: 18rpx;
font-size: clamp(11px, 14rpx, 13px);
}
.lineage-connector {
align-self: stretch;
@@ -1075,7 +1078,7 @@ const openMemberAction = (action) => {
justify-self: start;
z-index: 2;
width: 160rpx;
height: 188rpx;
height: 224rpx;
transform: translate(-50%, -50%);
text-align: center;
}
@@ -1104,10 +1107,6 @@ const openMemberAction = (action) => {
background: #fffdf7;
overflow: hidden;
}
.member-node__avatar {
width: 48rpx;
height: 48rpx;
}
.member-node__divider {
width: 56rpx;
height: 14rpx;
@@ -1128,7 +1127,7 @@ const openMemberAction = (action) => {
color: #6b2419;
font-family: "STKaiti", "KaiTi", serif;
overflow: hidden;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
line-height: 1.1;
-webkit-box-orient: vertical;
@@ -1139,7 +1138,7 @@ const openMemberAction = (action) => {
overflow: hidden;
margin-top: 2rpx;
color: #644b2e;
font-size: 18rpx;
font-size: clamp(12px, 18rpx, 14px);
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
@@ -1148,7 +1147,7 @@ const openMemberAction = (action) => {
overflow: hidden;
margin-top: 2rpx;
color: #695b4c;
font-size: 17rpx;
font-size: clamp(12px, 17rpx, 14px);
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
@@ -1194,7 +1193,7 @@ const openMemberAction = (action) => {
.tree-state-card__eyebrow {
display: block;
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
letter-spacing: 3rpx;
}
.tree-state-card__title {
@@ -1202,14 +1201,14 @@ const openMemberAction = (action) => {
margin-top: 12rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 34rpx;
font-size: clamp(19px, 34rpx, 24px);
font-weight: 700;
}
.tree-state-card__copy {
display: block;
margin-top: 16rpx;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.65;
}
.tree-state-card__action {
@@ -1233,7 +1232,7 @@ const openMemberAction = (action) => {
justify-content: center;
height: 100%;
color: #fff9ed;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
.member-action-panel-layer {
@@ -1324,10 +1323,17 @@ const openMemberAction = (action) => {
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;
@@ -1339,13 +1345,13 @@ const openMemberAction = (action) => {
.member-action-profile__copy text:first-child {
color: #70261f;
font-family: "STKaiti", "KaiTi", serif;
font-size: 38rpx;
font-size: clamp(20px, 38rpx, 26px);
font-weight: 700;
}
.member-action-profile__copy text:nth-child(2) {
margin-top: 4rpx;
color: #74533a;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.member-action-profile__copy text:last-child {
display: none;
@@ -1402,7 +1408,7 @@ const openMemberAction = (action) => {
.member-action-map__item text {
z-index: 1;
color: #672820;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
font-weight: 700;
white-space: nowrap;
}
@@ -1463,7 +1469,7 @@ const openMemberAction = (action) => {
}
.member-action-grid__item text {
color: #672820;
font-size: 25rpx;
font-size: clamp(15px, 25rpx, 18px);
font-weight: 700;
}
.member-action-panel__hint {
pages/tree/t02-pedigree-overview.vue
+12 -14
View File
@@ -252,10 +252,7 @@ const handlePedigreePageChange = (event) => {
};
const memberRelation = (member) =>
member.spouseOf ? "配偶" : member.relation || "家谱成员";
const memberDetail = (member) =>
[member.years, member.sex, member.personStatus]
.filter((item) => item && item !== "生卒待补")
.join(" · ") || "生卒待补";
const memberDetail = (member) => member.treeYears || member.years || "生卒待补";
const openMemberProfile = (member) =>
openPage(
"T03",
@@ -431,7 +428,7 @@ onUnload(() => {
.member-node__relation {
align-items: center;
border-bottom: 1rpx solid #e2e2e2;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.pedigree-column__name,
.member-node__name {
@@ -439,7 +436,7 @@ onUnload(() => {
border-bottom: 1rpx solid #e2e2e2;
color: #2f2925;
font-family: "STKaiti", "KaiTi", serif;
font-size: 34rpx;
font-size: clamp(19px, 34rpx, 24px);
font-weight: 700;
}
.pedigree-column__detail,
@@ -447,12 +444,12 @@ onUnload(() => {
align-items: flex-start;
gap: 18rpx;
padding: 28rpx 20rpx;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
line-height: 1.7;
white-space: normal;
}
.pedigree-column__detail {
font-size: 20rpx;
font-size: clamp(13px, 20rpx, 16px);
}
.member-node__surface {
display: contents;
@@ -476,6 +473,7 @@ onUnload(() => {
}
.node-years {
color: #3f3934;
text-combine-upright: all;
}
.generation-rail {
width: 92rpx;
@@ -511,12 +509,12 @@ onUnload(() => {
flex-direction: column;
align-items: center;
color: #a7241d;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
writing-mode: vertical-rl;
text-orientation: upright;
}
.generation-band__copy text:last-child {
font-size: 18rpx;
font-size: clamp(12px, 18rpx, 14px);
}
.pedigree-state-card {
display: grid;
@@ -544,20 +542,20 @@ onUnload(() => {
}
.pedigree-state-card__eyebrow {
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
letter-spacing: 3rpx;
}
.pedigree-state-card__title {
margin-top: 12rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 34rpx;
font-size: clamp(19px, 34rpx, 24px);
font-weight: 700;
}
.pedigree-state-card__copy {
margin-top: 16rpx;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.65;
}
.pedigree-state-card__action {
@@ -580,7 +578,7 @@ onUnload(() => {
align-items: center;
justify-content: center;
color: #fff9ed;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
</style>
pages/tree/t03-member-profile.vue
+40 -39
View File
@@ -38,9 +38,9 @@
class="member-detail"
>
<view class="member-heading">
<view class="member-heading__seal"
><text>{{ member.name.slice(0, 1) }}</text></view
>
<view class="member-heading__seal">
<AppAvatar :sex="member.sex" />
</view>
<view>
<text>{{ member.name }}</text>
<text
@@ -103,9 +103,9 @@
class="member-restricted"
>
<view class="member-heading">
<view class="member-heading__seal"
><text>{{ member.name.slice(0, 1) }}</text></view
>
<view class="member-heading__seal">
<AppAvatar :sex="member.sex" />
</view>
<view>
<text>{{ member.name }}</text>
<text>第 {{ member.generation }} 世 · {{ member.relation }}</text>
@@ -132,6 +132,7 @@
<script setup>
import { computed, reactive, ref } from "vue";
import { onBackPress, onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import AppAvatar from "@/components/AppAvatar.vue";
import AppLoading from "@/components/AppLoading.vue";
import ModulePageBackground from "@/components/ModulePageBackground.vue";
import PageHeader from "@/components/PageHeader.vue";
@@ -415,7 +416,7 @@ const toTree = requestBack;
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.member-page {
display: flex;
@@ -431,7 +432,7 @@ const toTree = requestBack;
z-index: 2;
}
.member-context {
@include adaptive.adaptive-tree-field;
@include adaptive-tree-field;
width: calc(100% - 32rpx);
margin: 18rpx auto 0;
padding: 16rpx 24rpx;
@@ -439,16 +440,16 @@ const toTree = requestBack;
.member-context text {
display: block;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.45;
}
.member-context text:first-child {
color: $ink;
font-size: 26rpx;
font-size: clamp(16px, 26rpx, 20px);
font-weight: 700;
}
.member-panel {
@include adaptive.adaptive-tree-panel;
@include adaptive-tree-panel;
width: calc(100% - 32rpx);
margin: 16rpx auto 0;
padding: 9% 8%;
@@ -468,30 +469,30 @@ const toTree = requestBack;
flex: 0 0 74rpx;
align-items: center;
justify-content: center;
background: url("/static/assets/modules/genealogy/transparent/current-seal-frame.png")
center / contain no-repeat;
}
.member-heading__seal text {
color: #fff7e7;
font-size: 28rpx;
box-sizing: border-box;
border: 2rpx solid #c39851;
border-radius: 50%;
background: #fff8e8;
box-shadow: 0 3rpx 7rpx rgba(100, 65, 29, 0.14);
overflow: hidden;
}
.member-heading > view:last-child text {
display: block;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.45;
}
.member-heading > view:last-child text:last-child {
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
}
.member-heading > view:last-child text:first-child {
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 36rpx;
font-size: clamp(19px, 36rpx, 24px);
font-weight: 700;
}
.member-status-entry {
@include adaptive.adaptive-genealogy-list-card;
@include adaptive-genealogy-list-card;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
@@ -501,7 +502,7 @@ const toTree = requestBack;
}
.member-status-entry text {
color: $ink-muted;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
line-height: 1.4;
}
.member-status-entry text:first-child,
@@ -513,11 +514,11 @@ const toTree = requestBack;
display: block;
margin-top: 24rpx;
color: $brand-red;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
.member-info-row {
@include adaptive.adaptive-tree-field;
@include adaptive-tree-field;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
min-height: 64rpx;
@@ -528,7 +529,7 @@ const toTree = requestBack;
}
.member-info-row text {
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.45;
}
.member-info-row text:last-child {
@@ -537,7 +538,7 @@ const toTree = requestBack;
}
.member-relatives {
margin-top: 8rpx;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
}
.member-relatives > view {
display: flex;
@@ -545,7 +546,7 @@ const toTree = requestBack;
gap: 20rpx;
padding: 12rpx 18rpx;
color: $ink;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
}
.member-relatives > view text:last-child {
color: $brand-red;
@@ -553,7 +554,7 @@ const toTree = requestBack;
.member-relatives > text {
display: block;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.5;
}
.member-record-actions {
@@ -563,7 +564,7 @@ const toTree = requestBack;
margin-top: 20rpx;
}
.member-record-actions > view {
@include adaptive.adaptive-scroll-button(secondary);
@include adaptive-scroll-button(secondary);
display: flex;
min-height: 72rpx;
align-items: center;
@@ -573,12 +574,12 @@ const toTree = requestBack;
}
.member-record-actions text {
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
font-weight: 700;
line-height: 1.35;
}
.member-profile-action {
@include adaptive.adaptive-scroll-button(primary);
@include adaptive-scroll-button(primary);
display: flex;
min-height: 76rpx;
align-items: center;
@@ -587,7 +588,7 @@ const toTree = requestBack;
}
.member-profile-action text {
color: #fff9ed;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
.member-restricted {
@@ -596,7 +597,7 @@ const toTree = requestBack;
.member-restricted > text {
display: block;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.6;
text-align: center;
}
@@ -604,14 +605,14 @@ const toTree = requestBack;
margin-top: 28rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 31rpx;
font-size: clamp(17px, 31rpx, 22px);
font-weight: 700;
}
.member-restricted > text + text {
margin-top: 12rpx;
}
.member-restricted-action {
@include adaptive.adaptive-scroll-button(secondary);
@include adaptive-scroll-button(secondary);
display: flex;
min-height: 76rpx;
align-items: center;
@@ -620,7 +621,7 @@ const toTree = requestBack;
}
.member-restricted-action text {
color: $brand-red;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
.member-error {
@@ -630,16 +631,16 @@ const toTree = requestBack;
.member-error > text {
display: block;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.55;
}
.member-error > text:nth-child(2) {
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
}
.member-error > text:first-child {
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 34rpx;
font-size: clamp(19px, 34rpx, 24px);
font-weight: 700;
}
@media (min-width: 400px) {
pages/tree/t04-add-relative.vue
+14 -24
View File
@@ -75,10 +75,6 @@
}}</text>
</view>
</picker>
<view class="form-field">
<text>业务用户</text>
<text class="form-field__hint">{{ appUserBindingHint }}</text>
</view>
<text v-if="fieldErrors.bindingMode" class="field-error">{{
fieldErrors.bindingMode
}}</text>
@@ -405,12 +401,6 @@ const relationOptions = computed(() => {
const relationLabel = computed(
() => activeRelationIntent.value?.label || addForm.relation || "亲属关系",
);
const appUserBindingHint = computed(() => {
if (addForm.bindingMode === "NONE") return "不绑定账号，不提交业务用户 ID";
if (addForm.bindingMode === "SELF")
return "由服务端从 Token 绑定当前登录账号，不提交业务用户 ID";
return "需先选择指定业务用户；当前没有可用候选接口";
});
const hasValidContext = computed(
() =>
Boolean(genealogyId.value) &&
@@ -675,7 +665,7 @@ const returnToTree = async () => {
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.add-relative-page {
display: flex;
@@ -687,7 +677,7 @@ const returnToTree = async () => {
z-index: 3;
}
.add-relative-panel {
@include adaptive.adaptive-tree-panel;
@include adaptive-tree-panel;
z-index: 2;
width: calc(100% - 32rpx);
margin: 18rpx auto 28rpx;
@@ -696,7 +686,7 @@ const returnToTree = async () => {
.form-eyebrow {
display: block;
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
letter-spacing: 3rpx;
}
.form-title {
@@ -704,7 +694,7 @@ const returnToTree = async () => {
margin-top: 10rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 34rpx;
font-size: clamp(19px, 34rpx, 24px);
font-weight: 700;
line-height: 1.35;
}
@@ -713,12 +703,12 @@ const returnToTree = async () => {
display: block;
margin-top: 10rpx;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.5;
}
.member-context,
.form-field {
@include adaptive.adaptive-tree-field;
@include adaptive-tree-field;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
min-height: 78rpx;
@@ -730,7 +720,7 @@ const returnToTree = async () => {
.member-context text:first-child,
.form-field > text:first-child {
color: $ink;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
.member-context text:last-child,
@@ -739,7 +729,7 @@ const returnToTree = async () => {
.form-field textarea {
min-width: 0;
color: $ink;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.45;
text-align: right;
}
@@ -747,7 +737,7 @@ const returnToTree = async () => {
display: inline-block;
margin-right: 4rpx;
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
line-height: 1;
transform: translateY(-2rpx);
}
@@ -759,7 +749,7 @@ const returnToTree = async () => {
.form-field__hint,
.upload-receipt {
color: $ink-muted;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
line-height: 1.4;
text-align: right;
}
@@ -776,7 +766,7 @@ const returnToTree = async () => {
border-radius: 8rpx;
background: transparent;
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.form-field--summary {
align-items: start;
@@ -789,8 +779,8 @@ const returnToTree = async () => {
display: block;
margin: 5rpx 18rpx 0;
color: $brand-red;
font-size: 22rpx;
line-height: 32rpx;
font-size: clamp(14px, 22rpx, 17px);
line-height: max(1.35em, clamp(17px, 32rpx, 22px));
}
.form-note {
text-align: center;
@@ -813,7 +803,7 @@ const returnToTree = async () => {
align-items: center;
justify-content: center;
color: #fff9ed;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
.add-result {
pages/tree/t05-edit-member.vue
+13 -30
View File
@@ -47,10 +47,6 @@
fieldErrors.name
}}</text>
<view class="form-field">
<text>人物编号</text>
<text>{{ originalMember.personNo || "服务端生成" }}</text>
</view>
<picker
:range="sexOptions.map((item) => item.label)"
:value="optionIndex(sexOptions, editForm.sex)"
@@ -82,10 +78,6 @@
}}</text>
</view>
</picker>
<view class="form-field">
<text>业务用户</text>
<text class="form-field__hint">{{ appUserBindingHint }}</text>
</view>
<text v-if="fieldErrors.bindingMode" class="field-error">{{
fieldErrors.bindingMode
}}</text>
@@ -396,15 +388,6 @@ const personOptions = ref([{ label: "不选择", value: "" }]);
const personOptionLabels = computed(() =>
personOptions.value.map((item) => item.label),
);
const appUserBindingHint = computed(() => {
if (editForm.bindingMode === "NONE")
return "不绑定账号，保存时不提交业务用户 ID";
if (editForm.bindingMode === "SELF")
return "由服务端从 Token 绑定当前登录账号，保存时不提交业务用户 ID";
return editForm.appUserId
? "保留当前已认领的指定业务用户"
: "需先选择指定业务用户；当前没有可用候选接口";
});
const isDeceased = computed(() => editForm.personStatus === "1");
const formSnapshot = computed(() => JSON.stringify(editForm));
@@ -706,7 +689,7 @@ const handleResultAction = () => {
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.edit-member-page {
display: flex;
@@ -718,7 +701,7 @@ const handleResultAction = () => {
z-index: 3;
}
.edit-member-panel {
@include adaptive.adaptive-tree-panel;
@include adaptive-tree-panel;
z-index: 2;
width: calc(100% - 32rpx);
margin: 18rpx auto 28rpx;
@@ -727,7 +710,7 @@ const handleResultAction = () => {
.form-eyebrow {
display: block;
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
letter-spacing: 3rpx;
}
.form-title {
@@ -735,7 +718,7 @@ const handleResultAction = () => {
margin-top: 10rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 34rpx;
font-size: clamp(19px, 34rpx, 24px);
font-weight: 700;
line-height: 1.35;
}
@@ -744,12 +727,12 @@ const handleResultAction = () => {
display: block;
margin-top: 10rpx;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.5;
}
.member-context,
.form-field {
@include adaptive.adaptive-tree-field;
@include adaptive-tree-field;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
min-height: 78rpx;
@@ -761,7 +744,7 @@ const handleResultAction = () => {
.member-context text:first-child,
.form-field > text:first-child {
color: $ink;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
.member-context text:last-child,
@@ -770,7 +753,7 @@ const handleResultAction = () => {
.form-field textarea {
min-width: 0;
color: $ink;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.45;
text-align: right;
}
@@ -782,7 +765,7 @@ const handleResultAction = () => {
.form-field__hint,
.upload-receipt {
color: $ink-muted;
font-size: 21rpx;
font-size: clamp(13px, 21rpx, 16px);
line-height: 1.4;
text-align: right;
}
@@ -799,7 +782,7 @@ const handleResultAction = () => {
border-radius: 8rpx;
background: transparent;
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.form-field--summary {
align-items: start;
@@ -812,8 +795,8 @@ const handleResultAction = () => {
display: block;
margin: 5rpx 18rpx 0;
color: $brand-red;
font-size: 22rpx;
line-height: 32rpx;
font-size: clamp(14px, 22rpx, 17px);
line-height: max(1.35em, clamp(17px, 32rpx, 22px));
}
.form-note {
text-align: center;
@@ -836,7 +819,7 @@ const handleResultAction = () => {
align-items: center;
justify-content: center;
color: #fff9ed;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
.edit-result {
pages/tree/t06-edit-relationship.vue
+9 -9
View File
@@ -140,7 +140,7 @@ onBackPress((event) => handleBackPress(event, goBack));
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.rank-page {
display: flex;
@@ -152,7 +152,7 @@ onBackPress((event) => handleBackPress(event, goBack));
z-index: 3;
}
.rank-panel {
@include adaptive.adaptive-tree-panel;
@include adaptive-tree-panel;
z-index: 2;
width: calc(100% - 32rpx);
margin: 18rpx auto 28rpx;
@@ -161,7 +161,7 @@ onBackPress((event) => handleBackPress(event, goBack));
.form-eyebrow {
display: block;
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
letter-spacing: 3rpx;
}
.form-title {
@@ -169,7 +169,7 @@ onBackPress((event) => handleBackPress(event, goBack));
margin-top: 10rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 34rpx;
font-size: clamp(19px, 34rpx, 24px);
font-weight: 700;
line-height: 1.35;
}
@@ -177,12 +177,12 @@ onBackPress((event) => handleBackPress(event, goBack));
display: block;
margin-top: 10rpx;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.5;
}
.member-context,
.rank-notice {
@include adaptive.adaptive-tree-field;
@include adaptive-tree-field;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
min-height: 78rpx;
@@ -194,14 +194,14 @@ onBackPress((event) => handleBackPress(event, goBack));
.member-context text:first-child,
.rank-notice text:first-child {
color: $ink;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
.member-context text:last-child,
.rank-notice text:last-child {
min-width: 0;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.45;
text-align: right;
}
@@ -223,7 +223,7 @@ onBackPress((event) => handleBackPress(event, goBack));
align-items: center;
justify-content: center;
color: #fff9ed;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
.rank-result {
pages/tree/t07-member-directory.vue
+28 -21
View File
@@ -115,8 +115,15 @@ let loadSequence = 0;
const hasValidContext = computed(() => Boolean(genealogyId.value));
const memberMeta = (member) =>
`第 ${member.generation} 世 · ${member.generationName || "字辈待补"} · ${member.branch}`;
const memberStatus = (member) =>
member.personStatus ? `人物状态：${member.personStatus}` : "人物状态待补";
const memberStatus = (member) => {
const labels = {
0: "健在",
1: "已故",
2: "未知",
};
const label = labels[String(member.personStatus ?? "").trim()];
return label ? `人物状态：${label}` : "人物状态待确认";
};
const hasMore = computed(() => members.value.length < total.value);
const loadMembers = async ({ append = false } = {}) => {
@@ -178,7 +185,7 @@ onUnload(() => {
});
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.directory-page {
display: flex;
@@ -203,16 +210,16 @@ onUnload(() => {
.directory-context__name {
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 32rpx;
font-size: clamp(17px, 32rpx, 22px);
font-weight: 700;
}
.directory-context__meta {
color: #62584c;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 500;
}
.directory-search {
@include adaptive.adaptive-tree-field;
@include adaptive-tree-field;
display: grid;
width: calc(100% - 48rpx);
min-height: 44px;
@@ -225,7 +232,7 @@ onUnload(() => {
margin-right: 110rpx;
margin-left: 26rpx;
color: $ink;
font-size: 26rpx;
font-size: clamp(16px, 26rpx, 20px);
line-height: 44px;
}
.directory-search__action {
@@ -239,7 +246,7 @@ onUnload(() => {
justify-content: center;
margin-right: 8rpx;
color: $brand-red;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
.directory-placeholder {
@@ -256,15 +263,15 @@ onUnload(() => {
.directory-summary text:first-child {
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 29rpx;
font-size: clamp(16px, 29rpx, 20px);
font-weight: 700;
}
.directory-summary text:last-child {
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
}
.directory-card {
@include adaptive.adaptive-genealogy-list-card;
@include adaptive-genealogy-list-card;
display: flex;
width: 100%;
min-height: 196rpx;
@@ -283,7 +290,7 @@ onUnload(() => {
.directory-card__name {
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 31rpx;
font-size: clamp(17px, 31rpx, 22px);
font-weight: 700;
line-height: 1.3;
overflow-wrap: anywhere;
@@ -291,7 +298,7 @@ onUnload(() => {
.directory-card__meta {
margin-top: 7rpx;
color: #62584c;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.45;
overflow-wrap: anywhere;
}
@@ -301,11 +308,11 @@ onUnload(() => {
padding: 2rpx 10rpx;
border: 1rpx solid rgba(174, 45, 36, 0.32);
color: $brand-red;
font-size: 22rpx;
line-height: 30rpx;
font-size: clamp(14px, 22rpx, 17px);
line-height: max(1.35em, clamp(17px, 30rpx, 22px));
}
.directory-state-card {
@include adaptive.adaptive-genealogy-list-card;
@include adaptive-genealogy-list-card;
display: flex;
width: 100%;
min-height: 220rpx;
@@ -327,13 +334,13 @@ onUnload(() => {
.directory-state-card text:first-child {
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 30rpx;
font-size: clamp(17px, 30rpx, 22px);
font-weight: 700;
}
.directory-state-card text:last-child {
margin-top: 14rpx;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.5;
}
.directory-content > .app-button {
@@ -346,13 +353,13 @@ onUnload(() => {
padding-left: 22rpx;
}
.directory-card__name {
font-size: 29rpx;
font-size: clamp(16px, 29rpx, 20px);
}
.directory-card__meta {
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
}
.directory-card__status {
font-size: 20rpx;
font-size: clamp(13px, 20rpx, 16px);
}
}
</style>
pages/tree/t08-member-states.vue
+13 -13
View File
@@ -154,7 +154,7 @@ const handleAction = () => goBack();
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
@import "../../styles/adaptive-frame-profiles.scss";
.member-status-page {
display: flex;
@@ -172,7 +172,7 @@ const handleAction = () => goBack();
z-index: 2;
}
.member-status-context {
@include adaptive.adaptive-tree-field;
@include adaptive-tree-field;
width: calc(100% - 32rpx);
margin: 18rpx auto 0;
padding: 16rpx 24rpx;
@@ -180,16 +180,16 @@ const handleAction = () => goBack();
.member-status-context text {
display: block;
color: $ink-muted;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: 1.45;
}
.member-status-context text:first-child {
color: $ink;
font-size: 26rpx;
font-size: clamp(16px, 26rpx, 20px);
font-weight: 700;
}
.status-card {
@include adaptive.adaptive-tree-panel;
@include adaptive-tree-panel;
width: calc(100% - 32rpx);
min-height: 330rpx;
margin: 18rpx auto 0;
@@ -198,28 +198,28 @@ const handleAction = () => goBack();
.status-card__copy text {
display: block;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.55;
text-align: center;
}
.status-card__copy text:first-child {
color: $brand-red;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
letter-spacing: 3rpx;
}
.status-card__copy text:nth-child(2) {
margin-top: 12rpx;
color: $ink;
font-family: "STKaiti", "KaiTi", serif;
font-size: 32rpx;
font-size: clamp(17px, 32rpx, 22px);
font-weight: 700;
}
.status-card__copy text:last-child {
margin-top: 14rpx;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
}
.status-guidance {
@include adaptive.adaptive-genealogy-list-card;
@include adaptive-genealogy-list-card;
width: calc(100% - 48rpx);
margin: 16rpx auto 0;
padding: 24rpx 28rpx;
@@ -227,13 +227,13 @@ const handleAction = () => goBack();
.status-guidance text {
display: block;
color: $ink-muted;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.6;
}
.status-guidance text:first-child {
margin-bottom: 8rpx;
color: $ink;
font-size: 26rpx;
font-size: clamp(16px, 26rpx, 20px);
font-weight: 700;
}
.status-action {
@@ -254,7 +254,7 @@ const handleAction = () => goBack();
align-items: center;
justify-content: center;
color: #fff9ed;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
font-weight: 700;
}
@media (min-width: 400px) {