itcsx/Docker
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ow

Browse Source
This commit is contained in:
owenchen committed 2026-10-20 15:44:56 +08:00
1 parent 9b01c4a57a
commit 6417562c4f
37 files changed
+2767 -202
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

uniapp/youjiala/src/components/admin-form/admin-form.vue
+37
View File
@@ -72,6 +72,9 @@ function displayValue(field: AdminFormField): string {
if (field.display) {
return field.display(props.model) || empty;
}
if (field.type === "select") {
return selectLabel(field) || empty;
}
const raw = rawValue(field);
if (raw === null || raw === undefined || raw === "") {
return empty;
@@ -82,6 +85,30 @@ function displayValue(field: AdminFormField): string {
return String(raw);
}
/** select 候选：无 options 时给空数组，避免模板 range 报错 */
function selectOptions(field: AdminFormField) {
return field.options ?? [];
}
/** select 当前值对应的展示文案（找不到返回空） */
function selectLabel(field: AdminFormField): string {
const cur = String(rawValue(field) ?? "");
return selectOptions(field).find(o => o.value === cur)?.label ?? "";
}
/** select 当前值在候选中的下标（找不到回退 0，picker 需合法 index） */
function selectIndex(field: AdminFormField): number {
const cur = String(rawValue(field) ?? "");
const i = selectOptions(field).findIndex(o => o.value === cur);
return i < 0 ? 0 : i;
}
function onSelectChange(field: AdminFormField, event: any): void {
const idx = Number(event?.detail?.value ?? 0);
const opt = selectOptions(field)[idx];
setInputValue(field, opt ? opt.value : "");
}
/** 编辑态控件的值：统一成字符串，switch 例外（u-switch 只吃布尔） */
function inputValue(field: AdminFormField): string {
const raw = rawValue(field);
@@ -178,6 +205,16 @@ function onTapAction(action: AdminFormAction): void {
<u-icon name="arrow-right" size="24" color="#c4c8cf" />
</view>
</picker>
<picker v-else-if="field.type === 'select'" mode="selector" :range="selectOptions(field)"
range-key="label" :value="selectIndex(field)" :disabled="field.lock"
@change="onSelectChange(field, $event)">
<view class="picker-box" :class="{ 'is-empty': !selectLabel(field) }">
<text>
{{ selectLabel(field) || field.placeholder || t('AdminPage.notSetTip') }}
</text>
<u-icon name="arrow-right" size="24" color="#c4c8cf" />
</view>
</picker>
<!-- uview-pro 的 u-input border 是布尔，不是旧 uview 的 'surround' 字符串 -->
<u-input v-else :model-value="inputValue(field)" :type="field.type || 'text'"
:disabled="field.lock" :border="false" input-align="right"
uniapp/youjiala/src/components/family-tree-home/family-tree-home.vue
+565 -23
View File
@@ -13,9 +13,13 @@ import type { FamilyPersonDisplayData } from "@/data/auto/familyPersonDisplayDat
import type { AdminRow } from "@/admin/admin-types";
import type { ExchangeScope } from "@/composables/useFamilyTreeExchange";
import type { FamilyTreeExchangeFileInfo } from "@/data/auto/familyTreeExchangeFileInfo";
import { StorageUsageData } from "@/data/auto/storageUsageData";
import { useLocale } from "uview-pro";
import { computed, onMounted, ref } from "vue";
import { useThemeGradient, useThemeTokens } from "@/composables";
import { brandGlyph } from "@/common/brand";
import { buildChunkFileName, uploadFile } from "@/common/http.interceptor";
import { userTypeGlyph, userTypePillBg } from "@/common/userTypeIcons";
import { useIdCardVerify, useThemeGradient, useThemeTokens } from "@/composables";
import { formatFileSize, formatFileTime, useFamilyTreeExchange } from "@/composables/useFamilyTreeExchange";
import { usePersonPickConfig } from "@/composables/usePickerConfigs";
import { usePolicyOptions } from "@/composables/usePolicyOptions";
@@ -31,6 +35,8 @@ import { FamilyTreeSpouseMapViewEntity } from "@/data/auto/familyTreeSpouseMapVi
import { FamilyTreeViewEntity } from "@/data/auto/familyTreeViewEntity";
import familyPersonService from "@/service/master/familyPersonService";
import familyTreeService from "@/service/master/familyTreeService";
import dmsFileService from "@/service/master/dmsFileService";
import { useLoginProfileStore } from "@/stores";
/** ready：组件挂载完成通知（时序口径见文件底部 onMounted 注释） */
const emit = defineEmits<{ (e: "ready"): void }>();
@@ -74,6 +80,117 @@ const inDetail = ref(false);
/** 列表整体收起态：卡区缩成一条窄横条（伸缩钮在列表右缘） */
const listCollapsed = ref(false);
// ===== 顶部两张卡片：登录用户身份 + 网盘用量（列表态，静默拉取，失败不阻断族谱列表） =====
const loginProfile = useLoginProfileStore();
const displayName = computed(() => loginProfile.userLocalName || loginProfile.username || "");
const storage = ref<StorageUsageData>(new StorageUsageData());
/** 当前用户类型：优先异步用量快照，未就绪时回退登录档案同步值，保证首帧徽标/文字即为真实等级 */
const currentType = computed(() => storage.value.UserType || loginProfile.userType);
const userTypeText = computed(() => {
const map: Record<string, string> = {
U: "storage.typeUnauth",
N: "storage.typeNormal",
V: "storage.typeVip",
S: "storage.typeSvip",
};
return t(map[currentType.value] ?? "storage.typeNormal");
});
// 后端 file_size/额度均为 KB，formatFileSize 期望字节 → ×1024 对齐
const storageUsedText = computed(() => formatFileSize(storage.value.UsedKB * 1024));
const storageQuotaText = computed(() => storage.value.QuotaKB > 0 ? formatFileSize(storage.value.QuotaKB * 1024) : "-");
const storageOver = computed(() => storage.value.QuotaKB > 0 && storage.value.UsedKB > storage.value.QuotaKB);
/** 占比在前端按小数重算（后端 Percent 为整数会截断成 0），极小用量也能如实显示 */
const storagePercentNum = computed(() => (storage.value.QuotaKB > 0 ? (storage.value.UsedKB / storage.value.QuotaKB) * 100 : 0));
const storagePercentText = computed(() => {
const v = storagePercentNum.value;
if (v <= 0) {
return "0%";
}
if (v < 0.1) {
return "0.1%";
}
if (v < 10) {
return `${v.toFixed(1)}%`;
}
return `${Math.round(v)}%`;
});
/** 进度条宽度：按重算占比取区间；有用量但占比极小时给 2% 最小可见宽度，避免完全空条 */
const storageBarWidth = computed(() => {
const clamped = Math.min(Math.max(storagePercentNum.value, 0), 100);
const min = storage.value.UsedKB > 0 ? 2 : 0;
return `${Math.max(clamped, min)}%`;
});
/** 身份徽标字形与胶囊底色：随 UserType（U/N/V/S）切换，未认证灰、普通跟随主题、VIP 金、SVIP 紫 */
const userTypeIcon = computed(() => userTypeGlyph(currentType.value));
const userTypeBg = computed(() => userTypePillBg(currentType.value));
/** 网盘存储卡图标：内联云形 SVG（同 treeGlyph 套路），绿描边置于柔光圆内（存储卡为浅色渐变描边底） */
const cloudGlyph = `data:image/svg+xml,${encodeURIComponent([
"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#2f9e6b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'>",
"<path d='M6.8 18.5a4.3 4.3 0 0 1-.5-8.56 5.6 5.6 0 0 1 10.75-1.06A3.9 3.9 0 0 1 17.4 18.5z'/>",
"<path d='M9.5 14.2l1.9 1.9 3.6-3.9'/>",
"</svg>",
].join(""))}`;
/** 未认证底部弹层：单击「未认证」徽标从底部弹出身份证认证，复用 useIdCardVerify（与身份验证页同一套流程） */
const idPopup = ref(false);
const {
imageUrl: idvImage,
uploading: idvUploading,
isVerified: idvVerified,
buttonText: idvButtonText,
onUploadIdCard,
} = useIdCardVerify(() => {
idPopup.value = false;
void fetchStorage();
});
/** 仅未认证（U）可单击弹层去认证，其余身份为只读展示 */
function onTapUserType(): void {
if (currentType.value === "U") {
idPopup.value = true;
}
}
async function fetchStorage(): Promise<void> {
try {
const res = await dmsFileService.GetMyStorageUsage();
if (res) storage.value = res;
}
catch { /* 静默：卡片留占位，不打扰族谱列表主流程 */ }
}
/** 点头像上传当前用户头像：单图 -> /DmsFile/UploadUserAvatar（后端落盘 UserAvatar 目录并回写 user_icon_img_path）-> 成功后重拉用量刷新卡片 */
const avatarUploading = ref(false);
function onUploadAvatar(): void {
if (avatarUploading.value) {
return;
}
uni.chooseImage({
count: 1,
success: async (res: any) => {
const filePath = String(res?.tempFilePaths?.[0] ?? "");
const fileName = String(res?.tempFiles?.[0]?.name || `avatar-${Date.now()}.png`);
if (!filePath) {
return;
}
try {
avatarUploading.value = true;
await uploadFile({
url: "/DmsFile/UploadUserAvatar",
filePath,
name: fileName,
fileName: buildChunkFileName(fileName),
});
await fetchStorage();
uni.showToast({ title: t("storage.avatarUploadedTip"), icon: "none" });
}
catch { /* uploadFile 已统一弹错，这里只补一个失败落点 */ }
finally {
avatarUploading.value = false;
}
},
});
}
/** 关键字过滤：族谱名称/简介 前端包含匹配（列表量级小，不再走后端筛选链） */
const filteredTrees = computed(() => {
const kw = keyword.value.trim().toLowerCase();
@@ -1366,18 +1483,67 @@ defineExpose({
reloadIfList(): void {
if (!inDetail.value) {
loadTrees();
void fetchStorage();
}
},
});
</script>
<template>
<!-- 列表态显示 tabbar，进详情（或弹层展开）收起 -->
<app-page :hide-nav="true" :show-tabbar="!inDetail">
<!-- 列表态显示 tabbar，进详情（或弹层展开）收起；未认证底部弹层也在列表态弹出，须一并隐 tabbar，否则盖住底部按钮 -->
<app-page :hide-nav="true" :show-tabbar="!inDetail && !idPopup">
<view class="tree-page" :style="[{ background: themeBackground }, themeVars]">
<!-- ===== 列表态：软底分区面板（标题 + 搜索/新建/伸缩圆钮组 + 白底族谱卡） ===== -->
<!-- 隐藏原生滚动条：否则 Chrome 滚动条占右侧 ~17px，面板左右留白不对称 -->
<scroll-view v-if="!inDetail" scroll-y :show-scrollbar="false" class="tree-page__body tree-page__body--list">
<!-- ===== 顶部两张卡片：用户身份 + 网盘用量 ===== -->
<view class="home-cards">
<view class="home-card home-card--user">
<view class="home-card__sheen" />
<view class="home-card__glow" />
<image class="home-card__mark" :src="brandGlyph" mode="aspectFit" />
<view class="home-card__avatar" @tap="onUploadAvatar">
<image v-if="storage.AvatarUrl" class="home-card__avatar-img" :src="storage.AvatarUrl"
mode="aspectFill" />
<text v-else class="home-card__avatar-ph">{{ displayName ? displayName.slice(0, 1) : "?" }}</text>
<view class="home-card__avatar-cam">
<u-icon name="camera-fill" size="24" color="#ffffff" />
</view>
</view>
<view class="home-card__uinfo">
<view class="home-card__uname-row">
<text class="home-card__uname">{{ displayName || "-" }}</text>
<view class="home-card__utype" :class="{ 'home-card__utype--tap': currentType === 'U' }"
:style="{ background: userTypeBg }" @tap="onTapUserType">
<image class="home-card__utype-icon" :src="userTypeIcon" mode="aspectFit" />
<text class="home-card__utype-text">{{ userTypeText }}</text>
</view>
</view>
<text class="home-card__welcome">{{ t("storage.welcome") }}</text>
</view>
</view>
<view class="home-card home-card--storage">
<view class="home-card__sglow" />
<view class="home-card__srow">
<view class="home-card__stitle-wrap">
<view class="home-card__sicon">
<image class="home-card__sicon-img" :src="cloudGlyph" mode="aspectFit" />
</view>
<text class="home-card__stitle">{{ t("storage.title") }}</text>
</view>
<text class="home-card__spct" :class="{ 'home-card__spct--over': storageOver }">{{ storagePercentText
}}</text>
</view>
<view class="home-card__bar">
<view class="home-card__bar-fill" :class="{ 'home-card__bar-fill--over': storageOver }"
:style="{ width: storageBarWidth }" />
</view>
<view class="home-card__snums">
<text class="home-card__snum">{{ t("storage.used") }} {{ storageUsedText }}</text>
<text class="home-card__snum">{{ t("storage.total") }} {{ storageQuotaText }}</text>
</view>
</view>
</view>
<view class="tree-panel">
<view class="tree-panel__head">
<text class="tree-panel__title">{{ t("FamilyTreePage.listTitle") }}</text>
@@ -1462,7 +1628,7 @@ defineExpose({
<u-switch v-if="data.IsManager" :model-value="tree.PublicIndc === 'Y'" size="40"
:active-color="primary" @change="onPublicToggle" />
<text v-if="data.IsManager" class="ft-badge ft-badge--admin">{{ t("FamilyTreePage.managerTag")
}}</text>
}}</text>
</view>
</view>
</view>
@@ -1569,7 +1735,7 @@ defineExpose({
<!-- 当前族员：从概览移入，夫妻/子女列表都是相对此人 -->
<view v-if="loaded && currentPerson" class="ft-card">
<view class="ft-card__head"><text class="ft-card__title">{{ t("FamilyTreePage.currentPerson")
}}</text></view>
}}</text></view>
<view class="person-hero">
<view class="person-hero__avatar"
:style="avatarFallbackStyle(!!currentPerson?.AvatarUrl, currentPerson?.Gender)">
@@ -1584,7 +1750,7 @@ defineExpose({
</view>
<view class="person-hero__chips">
<text v-if="currentPerson?.PersonId" class="person-hero__chip">{{ personChipText(currentPerson)
}}</text>
}}</text>
</view>
</view>
</view>
@@ -1627,12 +1793,12 @@ defineExpose({
<!-- 新增入口与行尾操作同一把闸：当前锚点不可编（未绑定/出支系）时隐藏 -->
<view class="ft-card__head">
<view class="ft-card__title-group"><text class="ft-card__title">{{ t("FamilyTreePage.spouseTitle")
}}</text><text class="ft-card__count">{{ spouseMaps.length }}</text></view>
}}</text><text class="ft-card__count">{{ spouseMaps.length }}</text></view>
<view v-if="data.IsCanAmend" class="ft-card__add" @tap="openQuickCreate('spouse')"><u-icon
name="plus" size="26" :color="primary" /><text>{{ t("FamilyTreePage.addSpouse") }}</text></view>
</view>
<view v-if="!visibleSpouses.length" class="ft-empty"><text>{{ t("FamilyTreePage.spouseEmpty")
}}</text></view>
}}</text></view>
<view v-for="record in visibleSpouses" :key="record.SpouseId" class="ft-mrow">
<view class="ft-av"
:style="avatarFallbackStyle(!!personAvatar(record.SpouseId), personGender(record.SpouseId, record.Gender))">
@@ -1668,13 +1834,13 @@ defineExpose({
<view class="ft-card">
<view class="ft-card__head">
<view class="ft-card__title-group"><text class="ft-card__title">{{ t("FamilyTreePage.childTitle")
}}</text><text class="ft-card__count">{{ childMaps.length }}</text></view>
}}</text><text class="ft-card__count">{{ childMaps.length }}</text></view>
<view v-if="data.IsCanAmend" class="ft-card__add" @tap="openQuickCreate('child')"><u-icon
name="plus" size="26" :color="primary" /><text>{{ t("FamilyTreePage.addChildBtn") }}</text>
</view>
</view>
<view v-if="!visibleChildren.length" class="ft-empty"><text>{{ t("FamilyTreePage.childEmpty")
}}</text></view>
}}</text></view>
<view v-for="record in visibleChildren" :key="record.ChildrenId" class="ft-mrow">
<view class="ft-av"
:style="avatarFallbackStyle(!!personAvatar(record.ChildrenId), personGender(record.ChildrenId, record.Gender))">
@@ -1714,12 +1880,12 @@ defineExpose({
<view v-if="data.IsManager && pendingPermissions.length" class="ft-card">
<view class="ft-card__head">
<view class="ft-card__title-group"><text class="ft-card__title">{{ t("FamilyTreePage.permPending")
}}</text><text class="ft-card__count">{{ pendingPermissions.length }}</text></view>
}}</text><text class="ft-card__count">{{ pendingPermissions.length }}</text></view>
</view>
<view v-for="record in pendingPermissions" :key="record.UserName" class="ft-perm-row">
<view class="ft-perm-row__main"><text class="ft-perm-row__name">{{ record.UserLocalName ||
record.UserName
}}</text><text v-if="record.PersonLocalName" class="ft-perm-row__sub">{{ record.PersonLocalName
}}</text><text v-if="record.PersonLocalName" class="ft-perm-row__sub">{{ record.PersonLocalName
}}</text>
</view>
<view class="ft-perm-ops">
@@ -1738,14 +1904,14 @@ defineExpose({
<view v-if="data.IsManager" class="ft-card">
<view class="ft-card__head">
<view class="ft-card__title-group"><text class="ft-card__title">{{ t("FamilyTreePage.permManager")
}}</text><text class="ft-card__count">{{ managerPermissions.length }}</text></view>
}}</text><text class="ft-card__count">{{ managerPermissions.length }}</text></view>
</view>
<view v-if="!managerPermissions.length" class="ft-empty"><text>{{ t("FamilyTreePage.permEmpty")
}}</text></view>
}}</text></view>
<view v-for="record in managerPermissions" :key="record.UserName" class="ft-perm-row">
<view class="ft-perm-row__main"><text class="ft-perm-row__name">{{ record.UserLocalName ||
record.UserName
}}</text><text class="ft-perm-row__sub">{{ record.ManagerIndc === "Y" ?
}}</text><text class="ft-perm-row__sub">{{ record.ManagerIndc === "Y" ?
t("FamilyTreePage.managerTag") :
t("FamilyTreePage.memberTag") }}</text></view>
<view class="ft-perm-ops">
@@ -1976,7 +2142,7 @@ defineExpose({
<view class="person-hero__line">
<text class="rel-name">{{ record.SpouseSurname }}{{ record.SpouseGenealogyName }}</text>
<text class="person-hero__gender">{{ genderText(personGender(record.SpouseId, record.Gender))
}}</text>
}}</text>
</view>
<view class="person-hero__chips">
<text class="person-hero__chip">
@@ -2013,7 +2179,7 @@ defineExpose({
<text class="sub-label">{{ t("FamilyTreePage.marryDate") }}</text>
<view class="sub-picker">
<text class="sub-picker-text">{{ datePart(record.MarryDate) || t("AdminPage.notSetTip")
}}</text>
}}</text>
<u-icon name="arrow-right" size="24" color="#c4c8cf" />
</view>
</view>
@@ -2029,7 +2195,7 @@ defineExpose({
<view class="sub-picker">
<text class="sub-picker-text">{{
datePart(record.DivorceDate) || t("AdminPage.notSetTip")
}}</text>
}}</text>
<u-icon name="arrow-right" size="24" color="#c4c8cf" />
</view>
</view>
@@ -2115,7 +2281,7 @@ defineExpose({
<view class="person-hero__line">
<text class="rel-name">{{ record.ChildrenSurname }}{{ record.ChildrenGenealogyName }}</text>
<text class="person-hero__gender">{{ genderText(personGender(record.ChildrenId, record.Gender))
}}</text>
}}</text>
</view>
<view class="person-hero__chips">
<text class="person-hero__chip">
@@ -2226,7 +2392,7 @@ defineExpose({
<text class="rel-name">{{ record.UserLocalName || record.UserName }}</text>
<text class="rel-sub">{{
record.ManagerIndc === "Y" ? t("FamilyTreePage.managerTag") : t("FamilyTreePage.memberTag")
}}</text>
}}</text>
</view>
<view class="perm-ops">
<view class="perm-op perm-op--danger" @tap="rejectPermission(record)">
@@ -2283,6 +2449,38 @@ defineExpose({
<!-- 族人档案弹层已取消：始祖卡单击不再弹窗，编辑走卡头「编辑资料」文字链 -->
<!-- ===== 未认证底部弹层：单击「未认证」徽标从底部弹出身份证认证（与身份验证页共用 useIdCardVerify） ===== -->
<u-popup :model-value="idPopup" mode="bottom" round="24" @close="idPopup = false">
<view class="ft-sheet">
<view class="ft-sheet__head">
<text class="ft-sheet__title">{{ t("IdentityVerificationPage.title") }}</text>
<u-icon name="close" size="32" color="#8f959e" @click="idPopup = false" />
</view>
<text class="home-verify__intro">{{ t("IdentityVerificationPage.intro") }}</text>
<view v-if="idvVerified" class="home-verify__verified">
<u-icon name="checkmark-circle-fill" size="70" color="#52c41a" />
<text class="home-verify__verified-text">{{ t("IdentityVerificationPage.verifiedDone") }}</text>
</view>
<template v-else>
<view class="home-verify__thumb" @tap="onUploadIdCard">
<image v-if="idvImage" class="home-verify__thumb-img" :src="idvImage" mode="aspectFill" />
<view v-else class="home-verify__empty">
<u-icon name="camera" size="44" color="#c4c8cf" />
<text class="home-verify__empty-text">{{ t("IdentityVerificationPage.uploadBut") }}</text>
</view>
<view v-if="idvUploading" class="home-verify__mask">
<text class="home-verify__mask-text">{{ t("IdentityVerificationPage.uploadingTip") }}</text>
</view>
</view>
<view class="ft-sheet__foot">
<view class="ft-sheet__btn" @tap="idPopup = false"><text>{{ t("AdminPage.cancelBut") }}</text></view>
<view class="ft-sheet__btn ft-sheet__btn--primary" @tap="onUploadIdCard"><text>{{ idvButtonText }}</text>
</view>
</view>
</template>
</view>
</u-popup>
<!-- ===== 编辑族谱信息弹层（仅名称/始祖谱名/简介/公开四字段，关系与成员分开维护） ===== -->
<!-- ===== 交换文件导出弹层（信封加密在前端，密码只当密钥材料、后端不校验）===== -->
<u-popup :model-value="exportVisible" mode="bottom" round="24" @close="exportVisible = false">
@@ -2371,7 +2569,7 @@ defineExpose({
<!-- 服务器文件列表限高滚动：文件多了不挤掉密码框/警告/按钮 -->
<scroll-view v-if="!localFileName" scroll-y class="ft-exchange__list">
<view v-if="importFilesLoading" class="ft-empty"><text>{{ t("FamilyTreePage.exchangeFileLoading")
}}</text></view>
}}</text></view>
<view v-else-if="!importFiles.length" class="ft-empty"><text>{{ t(imScope === "SUB" ?
"FamilyTreePage.exchangeFileEmptySub" : "FamilyTreePage.exchangeFileEmpty") }}</text></view>
<view v-for="file in importFiles" :key="file.FileName" class="ft-exchange__row"
@@ -2392,7 +2590,7 @@ defineExpose({
<view v-if="backupLoading" class="ft-empty"><text>{{ t("FamilyTreePage.exchangeFileLoading") }}</text>
</view>
<view v-else-if="!backupFiles.length" class="ft-empty"><text>{{ t("FamilyTreePage.exchangeBackupEmpty")
}}</text></view>
}}</text></view>
<view v-for="bk in backupFiles" :key="bk.FileName" class="ft-exchange__row"
:class="{ 'ft-exchange__row--on': pickedBackup === bk.FileName }" @tap="pickedBackup = bk.FileName">
<view class="ft-exchange__row-main">
@@ -2458,7 +2656,7 @@ defineExpose({
<view class="ft-sheet__foot">
<view class="ft-sheet__btn" @tap="cancelTreeEdit"><text>{{ t("AdminPage.cancelBut") }}</text></view>
<view class="ft-sheet__btn ft-sheet__btn--primary" @tap="saveTreeEdit"><text>{{ t("AdminPage.saveBut")
}}</text>
}}</text>
</view>
</view>
</view>
@@ -2507,6 +2705,350 @@ defineExpose({
padding: 20rpx;
}
/* ===== 顶部两张卡片：用户身份 + 网盘用量（白底圆角，与下方族谱面板同宽同调） ===== */
.home-cards {
display: flex;
flex-direction: column;
gap: 20rpx;
margin: 0 0 22rpx;
}
.home-card {
box-sizing: border-box;
flex: 1;
min-width: 0;
padding: 24rpx;
border-radius: 32rpx;
background: #ffffff;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
}
.home-card--user {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 30rpx;
min-height: 236rpx;
padding: 48rpx 44rpx;
border-radius: 40rpx;
background: var(--fg-gradient, linear-gradient(135deg, #2f9e6b 0%, #1f7d55 55%, #14664a 100%));
box-shadow: 0 20rpx 48rpx rgba(0, 0, 0, 0.26), inset 0 2rpx 0 rgba(255, 255, 255, 0.30);
}
/* 装饰层：斜向高光 + 右上柔光圆 + 品牌水印，纯装饰不拦截点击 */
.home-card__sheen {
position: absolute;
top: 0;
left: -30%;
width: 55%;
height: 100%;
background: linear-gradient(115deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
transform: skewX(-18deg);
pointer-events: none;
}
.home-card__glow {
position: absolute;
top: -70rpx;
right: -50rpx;
width: 240rpx;
height: 240rpx;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 70%);
pointer-events: none;
}
.home-card__mark {
position: absolute;
right: 24rpx;
bottom: 18rpx;
width: 120rpx;
height: 120rpx;
opacity: 0.14;
pointer-events: none;
}
.home-card__avatar {
position: relative;
z-index: 1;
width: 128rpx;
height: 128rpx;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.22);
border: 4rpx solid rgba(255, 255, 255, 0.75);
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.20);
}
.home-card__avatar-img {
width: 128rpx;
height: 128rpx;
border-radius: 50%;
}
.home-card__avatar-cam {
position: absolute;
right: 2rpx;
bottom: 2rpx;
width: 44rpx;
height: 44rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.45);
border: 2rpx solid #ffffff;
pointer-events: none;
}
.home-card__avatar-ph {
font-size: 60rpx;
font-weight: 600;
color: #ffffff;
}
.home-card__uinfo {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 12rpx;
min-width: 0;
}
.home-card__uname-row {
display: flex;
align-items: center;
gap: 16rpx;
}
.home-card__uname {
max-width: 340rpx;
font-size: 42rpx;
font-weight: 700;
color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-card__welcome {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.85);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-card__utype {
display: flex;
align-self: center;
align-items: center;
gap: 10rpx;
padding: 7rpx 22rpx 7rpx 16rpx;
border: 1rpx solid rgba(255, 255, 255, 0.5);
border-radius: 999rpx;
font-size: 26rpx;
color: #ffffff;
background: var(--fg-primary, #d98a3d);
}
.home-card__utype--tap {
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
}
.home-card__utype-icon {
width: 32rpx;
height: 32rpx;
flex-shrink: 0;
}
.home-card__utype-text {
color: #ffffff;
font-size: 26rpx;
line-height: 1.4;
}
/* 未认证底部弹层：身份证缩略图与说明（复用 ft-sheet 头部/底部按钮） */
.home-verify__intro {
margin-bottom: 20rpx;
font-size: 24rpx;
line-height: 1.6;
color: #9aa0a6;
}
.home-verify__thumb {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 300rpx;
overflow: hidden;
border: 2rpx dashed #d6d9de;
border-radius: 16rpx;
background-color: #f5f6f8;
}
.home-verify__thumb-img {
width: 100%;
height: 100%;
}
.home-verify__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 12rpx;
}
.home-verify__empty-text {
font-size: 26rpx;
color: #9aa0a6;
}
.home-verify__mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.35);
}
.home-verify__mask-text {
font-size: 24rpx;
color: #ffffff;
}
.home-verify__verified {
display: flex;
flex-direction: column;
align-items: center;
gap: 20rpx;
padding: 48rpx 0;
}
.home-verify__verified-text {
font-size: 28rpx;
font-weight: 600;
color: #52c41a;
}
.home-card--storage {
position: relative;
overflow: hidden;
margin: 0 16rpx;
padding: 40rpx 44rpx;
border: 2rpx solid transparent;
border-radius: 40rpx;
background:
linear-gradient(135deg, #ffffff 0%, #f1f7f3 100%) padding-box,
linear-gradient(135deg, rgba(47, 158, 107, 0.55), rgba(47, 158, 107, 0.05)) border-box;
box-shadow: 0 16rpx 40rpx rgba(31, 45, 38, 0.10), inset 0 2rpx 0 rgba(255, 255, 255, 0.9);
}
.home-card__sglow {
position: absolute;
top: -60rpx;
right: -40rpx;
z-index: 0;
width: 220rpx;
height: 220rpx;
border-radius: 50%;
background: radial-gradient(circle, rgba(47, 158, 107, 0.16), rgba(47, 158, 107, 0) 70%);
pointer-events: none;
}
.home-card__stitle-wrap {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 14rpx;
}
.home-card__sicon {
display: flex;
align-items: center;
justify-content: center;
width: 56rpx;
height: 56rpx;
border-radius: 16rpx;
background: var(--fg-soft, #e6f6ec);
}
.home-card__sicon-img {
width: 34rpx;
height: 34rpx;
}
.home-card__srow {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18rpx;
}
.home-card__stitle {
font-size: 30rpx;
font-weight: 700;
color: #1f2329;
}
.home-card__spct {
font-size: 28rpx;
font-weight: 700;
color: var(--fg-primary, #d98a3d);
}
.home-card__spct--over {
color: #e5484d;
}
.home-card__bar {
position: relative;
z-index: 1;
height: 16rpx;
border-radius: 999rpx;
background: #e9edf0;
overflow: hidden;
}
.home-card__bar-fill {
height: 100%;
border-radius: 999rpx;
background: linear-gradient(90deg, var(--fg-primary, #d98a3d), #f0b877);
transition: width 0.3s ease;
}
.home-card__bar-fill--over {
background: linear-gradient(90deg, #e5484d, #ff8a80);
}
.home-card__snums {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 18rpx;
}
.home-card__snum {
font-size: 26rpx;
color: #7a827f;
}
/* ===== 列表态分区面板：主题浅底圆角，标题与圆钮组同行，白底族谱卡嵌在其中 ===== */
.tree-panel {
padding: 28rpx;