From 3b2ee8523b29db925eae6745ab53633a6d617e05 Mon Sep 17 00:00:00 2001
From: owenchen <owenchen@1010printing.com>
Date: Fri, 16 Oct 2026 11:57:29 +0800
Subject: [PATCH] ow

---
 .../src/components/app-tabbar/app-tabbar.vue  |   34 +-
 .../family-tree-chart/family-tree-chart.vue   |   18 +-
 .../file-action-sheet/file-action-sheet.vue   |   92 +-
 .../file-add-sheet/file-add-sheet.vue         |   53 +-
 .../file-breadcrumb/file-breadcrumb.vue       |    7 +-
 .../file-grid-list/file-grid-list.vue         |   45 +-
 .../file-tab-filter/file-tab-filter.vue       |    7 +-
 .../float-add-btn/float-add-btn.vue           |   15 +-
 .../folder-move-picker/folder-move-picker.vue |  136 +-
 .../folder-name-dialog/folder-name-dialog.vue |   22 +-
 .../folder-share-picker.vue                   |  607 +++----
 .../help-doc-preview/help-doc-preview.vue     |   35 +-
 .../components/hero-navbar/hero-navbar.vue    |  102 ++
 .../option-picker/option-picker.vue           |  141 +-
 .../components/page-navbar/page-navbar.vue    |   21 +-
 .../person-quick-create.vue                   |   85 +-
 .../components/search-input/search-input.vue  |   11 +-
 .../src/composables/useThemeGradient.ts       |   55 +-
 uniapp/youjiala/src/locale/lang/en-US.json    |   17 +-
 uniapp/youjiala/src/locale/lang/zh-CN.json    |   17 +-
 .../src/pages/share-hall/share-hall.vue       |    5 +-
 uniapp/youjiala/src/pages/tab/file.vue        |   54 +-
 uniapp/youjiala/src/pages/tab/media.vue       | 1448 +++++++++--------
 uniapp/youjiala/src/pages/tab/share.vue       |  515 +++---
 .../src/pages/transport/transport.vue         |  205 ++-
 uniapp/youjiala/src/pages/trash/trash.vue     |    6 +-
 uniapp/youjiala/src/stores/index.ts           |    1 +
 uniapp/youjiala/src/stores/mediaIntent.ts     |   27 +
 28 files changed, 2285 insertions(+), 1496 deletions(-)
 create mode 100644 uniapp/youjiala/src/components/hero-navbar/hero-navbar.vue
 create mode 100644 uniapp/youjiala/src/stores/mediaIntent.ts

diff --git a/uniapp/youjiala/src/components/app-tabbar/app-tabbar.vue b/uniapp/youjiala/src/components/app-tabbar/app-tabbar.vue
index 3ba2db7..d818264 100644
--- a/uniapp/youjiala/src/components/app-tabbar/app-tabbar.vue
+++ b/uniapp/youjiala/src/components/app-tabbar/app-tabbar.vue
@@ -3,7 +3,7 @@
 
 <script setup lang="ts">
 import { $u, useLocale } from "uview-pro";
-import { computed, onMounted } from "vue";
+import { computed, nextTick, onMounted, ref } from "vue";
 import { PAGE_PATHS, pageUrl, TAB_PAGES } from "@/router/routes";
 import { useTabbarStore } from "@/stores";
 
@@ -60,11 +60,32 @@ function indexOfCurrentRoute(): number {
   return TAB_PAGES.findIndex(name => PAGE_PATHS[name] === route);
 }
 
+/**
+ * 页面栈就绪门闸：u-tabbar 的 onMounted 会直接读 getCurrentPages 栈顶的 .route，
+ * 而 reLaunch 重建页面的瞬间栈顶 route 可能还没赋值（读到 undefined 抛
+ * "Cannot read properties of undefined (reading 'route')"）。等栈顶拿到 route 再挂载，
+ * 规避这个组件内部时序（node_modules 不宜直接改）。
+ */
+const ready = ref(false);
+
 onMounted(() => {
-  const index = indexOfCurrentRoute();
-  if (index >= 0) {
-    store.setActiveIndex(index);
-  }
+  // 上限兜底：route 理论上必在若干 tick 内赋值；万一等不到也放行挂载，
+  // 宁可让 u-tabbar 报一次可捕获的错误，也不能让 tabbar 永远不出现
+  let attempts = 0;
+  const settle = (): void => {
+    const pages = getCurrentPages();
+    if (pages[pages.length - 1]?.route || ++attempts > 50) {
+      ready.value = true;
+      const index = indexOfCurrentRoute();
+      if (index >= 0) {
+        store.setActiveIndex(index);
+      }
+    }
+    else {
+      nextTick(settle);
+    }
+  };
+  settle();
 });
 
 /** item 未配 pagePath，u-tabbar 只会 emit change 而不自行 switchTab；跳转在这里做 */
@@ -79,7 +100,8 @@ function onChange(index: number): void {
 </script>
 
 <template>
-  <u-tabbar v-bind="tabbarProps" @change="onChange" />
+  <!-- ready 门闸：页面栈就绪后才挂载，避开 u-tabbar onMounted 空栈读 route 的崩溃窗口 -->
+  <u-tabbar v-if="ready" v-bind="tabbarProps" @change="onChange" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/uniapp/youjiala/src/components/family-tree-chart/family-tree-chart.vue b/uniapp/youjiala/src/components/family-tree-chart/family-tree-chart.vue
index 4752df5..bdda11d 100644
--- a/uniapp/youjiala/src/components/family-tree-chart/family-tree-chart.vue
+++ b/uniapp/youjiala/src/components/family-tree-chart/family-tree-chart.vue
@@ -457,7 +457,12 @@ function close(): void {
                 <text class="ftc__title">
                     {{ props.title || t('FamilyTreePage.pedigreeChart') }}
                 </text>
-                <u-icon name="close" size="40" color="#8f959e" @click="close" />
+                <!-- 退出钮统一为「取消」文字胶囊（底部抽屉风格语言，不再用 X） -->
+                <view class="ftc__cancel" @tap="close">
+                    <text class="ftc__cancel-text">
+                        {{ t("FamilyTreePage.cancel") }}
+                    </text>
+                </view>
             </view>
             <!-- 悬浮控制条：放大/缩小/百分比复位/横纵布局切换（对齐旧图 G6 工具钮） -->
             <view class="ftc__ctrl">
@@ -513,6 +518,17 @@ function close(): void {
     color: #1f2329;
 }
 
+.ftc__cancel {
+    padding: 12rpx 40rpx;
+    border-radius: 999rpx;
+    background-color: #f2f3f5;
+}
+
+.ftc__cancel-text {
+    font-size: 26rpx;
+    color: #5c626b;
+}
+
 /* 悬浮控制条：右侧竖排，白底圆角轻阴影 */
 .ftc__ctrl {
     position: absolute;
diff --git a/uniapp/youjiala/src/components/file-action-sheet/file-action-sheet.vue b/uniapp/youjiala/src/components/file-action-sheet/file-action-sheet.vue
index 2ead6af..448f9e7 100644
--- a/uniapp/youjiala/src/components/file-action-sheet/file-action-sheet.vue
+++ b/uniapp/youjiala/src/components/file-action-sheet/file-action-sheet.vue
@@ -10,11 +10,14 @@ import type { PropType } from "vue";
 import type { FileItem, FileKind } from "@/data/custom/fileBrowser";
 import { useLocale } from "uview-pro";
 import { computed } from "vue";
+import { useThemeTokens } from "@/composables";
 
 interface ActionDef {
     key: string;
     label: string;
     icon: string;
+    /** 危险动作（删除）：图标与文字标红 */
+    danger?: boolean;
 }
 
 const props = defineProps({
@@ -39,6 +42,9 @@ const emit = defineEmits<{
 
 const { t } = useLocale();
 
+// 文件夹图形随主题（与 file-grid-list / move / share picker 同一强调渐变）
+const { accentGradient, accentSoft } = useThemeTokens();
+
 // 类型 -> 头部图标与配色，与 file-grid-list 的 kindVisual 同一套
 const kindVisual: Record<Exclude<FileKind, "folder">, { icon: string; color: string }> = {
     image: { icon: "photo-fill", color: "#0ea5e9" },
@@ -60,7 +66,7 @@ const gridActions = computed<ActionDef[]>(() => {
     if (file.kind !== "folder") {
         actions.unshift({ key: "download", label: t("FilePage.actionDownload"), icon: "download" });
     }
-    actions.push({ key: "delete", label: t("FilePage.actionDelete"), icon: "trash" });
+    actions.push({ key: "delete", label: t("FilePage.actionDelete"), icon: "trash", danger: true });
     return actions;
 });
 
@@ -101,11 +107,11 @@ function onAction(action: ActionDef): void {
     <!-- u-popup 只认 modelValue（v-model），绑 :show 会静默弹不出 -->
     <u-popup :model-value="visible" mode="bottom" round="24" @close="emit('close')">
         <view class="file-action-sheet">
-            <!-- 头部：类型图标 + 名称/元信息 + 详情 -->
+            <!-- 头部白卡：类型图标 + 名称/元信息（「i」详情钮已移除，边界由取消/遮罩承担） -->
             <view class="file-action-sheet__head">
                 <view v-if="file && file.kind === 'folder'" class="file-action-sheet__folder">
-                    <view class="file-action-sheet__folder-tab" />
-                    <view class="file-action-sheet__folder-body" />
+                    <view class="file-action-sheet__folder-tab" :style="{ background: accentSoft }" />
+                    <view class="file-action-sheet__folder-body" :style="{ background: accentGradient }" />
                 </view>
                 <u-icon v-else-if="file" :name="kindVisual[file.kind as Exclude<FileKind, 'folder'>].icon" size="64"
                     :color="kindVisual[file.kind as Exclude<FileKind, 'folder'>].color" />
@@ -117,29 +123,37 @@ function onAction(action: ActionDef): void {
                         {{ file && file.kind !== 'folder' ? `${file.sizeText} · ` : '' }}{{ file?.modifiedAt }}
                     </text>
                 </view>
-                <view class="file-action-sheet__info" @tap="onAction({ key: 'detail', label: '', icon: '' })">
-                    <u-icon name="info-circle" size="40" color="#8f959e" />
-                </view>
             </view>
 
-            <!-- 宫格动作（图1 第一排大按钮） -->
+            <!-- 宫格动作：白卡上图标下文字，删除标红 -->
             <view class="file-action-sheet__grid">
                 <view v-for="action in gridActions" :key="action.key" class="file-action-sheet__grid-btn"
                     @tap="onAction(action)">
-                    <u-icon :name="action.icon" size="44" color="#1f2329" />
-                    <text class="file-action-sheet__grid-text">
+                    <u-icon :name="action.icon" size="44" :color="action.danger ? '#f0413e' : '#1f2329'" />
+                    <text class="file-action-sheet__grid-text"
+                        :style="action.danger ? { color: '#f0413e' } : undefined">
                         {{ action.label }}
                     </text>
                 </view>
             </view>
 
-            <!-- 行式动作（图1 下方整行菜单） -->
+            <!-- 行式动作：左图标 + 文字，右尖角 -->
             <view v-for="action in listActions" :key="action.key" class="file-action-sheet__row"
                 @tap="onAction(action)">
-                <text class="file-action-sheet__row-text">
-                    {{ action.label }}
+                <view class="file-action-sheet__row-main">
+                    <u-icon :name="action.icon" size="38" color="#1f2329" />
+                    <text class="file-action-sheet__row-text">
+                        {{ action.label }}
+                    </text>
+                </view>
+                <u-icon name="arrow-right" size="26" color="#c0c4cc" />
+            </view>
+
+            <!-- 取消通栏：替代原「i」的退出锚点 -->
+            <view class="file-action-sheet__cancel" @tap="emit('close')">
+                <text class="file-action-sheet__cancel-text">
+                    {{ t("FilePage.folderCancel") }}
                 </text>
-                <u-icon :name="action.icon" size="38" color="#1f2329" />
             </view>
 
             <view class="file-action-sheet__safe" />
@@ -148,15 +162,19 @@ function onAction(action: ActionDef): void {
 </template>
 
 <style lang="scss" scoped>
+/* 底部抽屉统一风格（对齐设计图）：浅灰面板底 + 白色圆角卡分块 */
 .file-action-sheet {
-    padding: 40rpx 32rpx 0;
-    background-color: #ffffff;
+    padding: 32rpx 24rpx 0;
+    background-color: #f2f3f5;
 
     &__head {
         display: flex;
         align-items: center;
         gap: 24rpx;
-        padding: 0 8rpx 32rpx;
+        margin-bottom: 20rpx;
+        padding: 28rpx 32rpx;
+        border-radius: 20rpx;
+        background-color: #ffffff;
     }
 
     /* 文件夹造型与 file-grid-list 同源：主体 + 左上页签 */
@@ -174,7 +192,6 @@ function onAction(action: ActionDef): void {
         width: 36rpx;
         height: 16rpx;
         border-radius: 8rpx 8rpx 0 0;
-        background-color: #6cb7ff;
     }
 
     &__folder-body {
@@ -184,7 +201,6 @@ function onAction(action: ActionDef): void {
         right: 0;
         bottom: 0;
         border-radius: 10rpx;
-        background: linear-gradient(135deg, #7cc0ff, #3d8bfd);
     }
 
     &__meta {
@@ -209,24 +225,21 @@ function onAction(action: ActionDef): void {
         color: #8f959e;
     }
 
-    &__info {
-        display: flex;
-        align-items: center;
-        padding: 8rpx;
-    }
-
     &__grid {
         display: flex;
         gap: 16rpx;
+        margin-bottom: 20rpx;
     }
 
+    /* 宫格钮：白卡、上图标下文字居中 */
     &__grid-btn {
         display: flex;
         flex: 1;
+        flex-direction: column;
         align-items: center;
         padding: 28rpx 0;
         border-radius: 20rpx;
-        background-color: #f5f6f8;
+        background-color: #ffffff;
     }
 
     &__grid-text {
@@ -239,10 +252,17 @@ function onAction(action: ActionDef): void {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        margin-top: 16rpx;
+        margin-bottom: 20rpx;
         padding: 28rpx 32rpx;
         border-radius: 20rpx;
-        background-color: #f5f6f8;
+        background-color: #ffffff;
+    }
+
+    &__row-main {
+        display: flex;
+        align-items: center;
+        gap: 24rpx;
+        min-width: 0;
     }
 
     &__row-text {
@@ -250,6 +270,22 @@ function onAction(action: ActionDef): void {
         color: #1f2329;
     }
 
+    /* 取消通栏：与内容隔一段灰底收尾，防误点动作区 */
+    &__cancel {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 28rpx;
+        padding: 26rpx 0;
+        border-radius: 20rpx;
+        background-color: #ffffff;
+    }
+
+    &__cancel-text {
+        font-size: 28rpx;
+        color: #5c626b;
+    }
+
     /* 底部留白：贴屏安全区（H5 无 env 时也有 32rpx 呼吸） */
     &__safe {
         height: calc(32rpx + env(safe-area-inset-bottom));
diff --git a/uniapp/youjiala/src/components/file-add-sheet/file-add-sheet.vue b/uniapp/youjiala/src/components/file-add-sheet/file-add-sheet.vue
index 14706b0..e9e7d1a 100644
--- a/uniapp/youjiala/src/components/file-add-sheet/file-add-sheet.vue
+++ b/uniapp/youjiala/src/components/file-add-sheet/file-add-sheet.vue
@@ -6,6 +6,7 @@
  */
 import { useLocale } from "uview-pro";
 import { computed } from "vue";
+import { useThemeTokens } from "@/composables";
 
 interface AddAction {
   key: string;
@@ -29,6 +30,8 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useLocale();
+// 行图标随主题（与文件夹图形同一 primary 派生）
+const { primary } = useThemeTokens();
 
 // computed：切换语言后文案跟随重算（tab 页组件实例常驻，setup 只跑一次）
 const actions = computed<AddAction[]>(() => [
@@ -45,9 +48,18 @@ const actions = computed<AddAction[]>(() => [
         {{ t("FilePage.addTitle") }}
       </text>
       <view v-for="action in actions" :key="action.key" class="file-add-sheet__row" @tap="emit('action', action.key)">
-        <u-icon :name="action.icon" size="40" color="#2b8fff" />
-        <text class="file-add-sheet__row-text">
-          {{ action.label }}
+        <view class="file-add-sheet__row-main">
+          <u-icon :name="action.icon" size="40" :color="primary" />
+          <text class="file-add-sheet__row-text">
+            {{ action.label }}
+          </text>
+        </view>
+        <u-icon name="arrow-right" size="26" color="#c0c4cc" />
+      </view>
+      <!-- 取消通栏（底部抽屉统一风格） -->
+      <view class="file-add-sheet__cancel" @tap="emit('close')">
+        <text class="file-add-sheet__cancel-text">
+          {{ t("FilePage.folderCancel") }}
         </text>
       </view>
       <view class="file-add-sheet__safe" />
@@ -56,13 +68,14 @@ const actions = computed<AddAction[]>(() => [
 </template>
 
 <style lang="scss" scoped>
+/* 底部抽屉统一风格：浅灰面板底 + 白色圆角卡行 */
 .file-add-sheet {
-  padding: 40rpx 32rpx 0;
-  background-color: #ffffff;
+  padding: 32rpx 24rpx 0;
+  background-color: #f2f3f5;
 
   &__title {
     display: block;
-    padding: 0 8rpx 24rpx;
+    padding: 8rpx 8rpx 24rpx;
     font-size: 26rpx;
     color: #8f959e;
   }
@@ -70,11 +83,18 @@ const actions = computed<AddAction[]>(() => [
   &__row {
     display: flex;
     align-items: center;
-    gap: 24rpx;
-    margin-bottom: 16rpx;
+    justify-content: space-between;
+    margin-bottom: 20rpx;
     padding: 30rpx 32rpx;
     border-radius: 20rpx;
-    background-color: #f5f6f8;
+    background-color: #ffffff;
+  }
+
+  &__row-main {
+    display: flex;
+    align-items: center;
+    gap: 24rpx;
+    min-width: 0;
   }
 
   &__row-text {
@@ -82,6 +102,21 @@ const actions = computed<AddAction[]>(() => [
     color: #1f2329;
   }
 
+  &__cancel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 8rpx;
+    padding: 26rpx 0;
+    border-radius: 20rpx;
+    background-color: #ffffff;
+  }
+
+  &__cancel-text {
+    font-size: 28rpx;
+    color: #5c626b;
+  }
+
   /* 底部留白：贴屏安全区（H5 无 env 时也有 32rpx 呼吸） */
   &__safe {
     height: calc(32rpx + env(safe-area-inset-bottom));
diff --git a/uniapp/youjiala/src/components/file-breadcrumb/file-breadcrumb.vue b/uniapp/youjiala/src/components/file-breadcrumb/file-breadcrumb.vue
index 57b678d..5d29c7e 100644
--- a/uniapp/youjiala/src/components/file-breadcrumb/file-breadcrumb.vue
+++ b/uniapp/youjiala/src/components/file-breadcrumb/file-breadcrumb.vue
@@ -137,15 +137,16 @@ onUnmounted(() => {
 </template>
 
 <style lang="scss" scoped>
-/* 面包屑：描边圈 + 浅浅的半透明白底（透出渐变底不发死白），分隔为细 chevron */
+/* 卡片表面统一风格：白底 + 细边框 + 柔和投影，与搜索框/分类条同一层级；分隔为细 chevron */
 .file-breadcrumb {
   display: flex;
   align-items: center;
   gap: 10rpx;
   padding: 20rpx 28rpx;
-  border: 2rpx solid rgba(31, 35, 41, 0.08);
+  border: 2rpx solid rgba(31, 35, 41, 0.06);
   border-radius: 20rpx;
-  background-color: rgba(255, 255, 255, 0.45);
+  background-color: #ffffff;
+  box-shadow: 0 6rpx 18rpx rgba(31, 35, 41, 0.05);
   white-space: nowrap;
 }
 
diff --git a/uniapp/youjiala/src/components/file-grid-list/file-grid-list.vue b/uniapp/youjiala/src/components/file-grid-list/file-grid-list.vue
index aa7d843..397412e 100644
--- a/uniapp/youjiala/src/components/file-grid-list/file-grid-list.vue
+++ b/uniapp/youjiala/src/components/file-grid-list/file-grid-list.vue
@@ -6,6 +6,8 @@
  */
 import type { PropType } from "vue";
 import type { FileItem, FileKind } from "@/data/custom/fileBrowser";
+import { computed } from "vue";
+import { useThemeTokens } from "@/composables/useThemeGradient";
 
 const props = defineProps({
     /** 已过滤排序好的条目，组件按原顺序渲染 */
@@ -60,6 +62,21 @@ function isSelected(file: FileItem): boolean {
     return props.selectedIds.includes(file.id);
 }
 
+// 主题强调色派生（useThemeGradient）：文件夹图形/勾选/选中底统一跟随 primary，不再硬编码蓝
+const { primary, accentGradient, accentSoft, accentShadow } = useThemeTokens();
+
+/** 文件夹主体：主题渐变 + 同色柔和投影 */
+const folderStyle = computed(() => ({
+    background: accentGradient.value,
+    boxShadow: `0 10rpx 20rpx ${accentShadow.value}`,
+}));
+
+/** 文件夹左上页签：同渐变 */
+const folderTabStyle = computed(() => ({ background: accentGradient.value }));
+
+/** 多选选中卡：主题浅色底 */
+const cardSelectedStyle = computed(() => ({ backgroundColor: accentSoft.value }));
+
 function onCardTap(file: FileItem): void {
     if (props.selectMode) {
         emit("toggle-select", file.id);
@@ -77,18 +94,19 @@ function onCardTap(file: FileItem): void {
             </text>
         </view>
         <view v-for="file in files" :key="file.id" class="fgl-card"
-            :class="{ 'fgl-card--selected': selectMode && isSelected(file) }">
+            :class="{ 'fgl-card--selected': selectMode && isSelected(file) }"
+            :style="selectMode && isSelected(file) ? cardSelectedStyle : undefined">
             <!-- 「更多」与多选勾选圈互斥：多选模式下只留 check 圆，不再同屏两个操作图标 -->
             <view v-if="!selectMode" class="fgl-card__more" @tap.stop="emit('more', file)">
-                <u-icon name="more-dot-fill" size="30" color="#b8bcc4" />
+                <u-icon class="fgl-card__more-icon" name="more-dot-fill" size="30" color="#b8bcc4" />
             </view>
 
             <view class="fgl-card__body" @tap="onCardTap(file)">
                 <!-- 图标区包装：共享域的权限/收藏角标叠加在图标右上角（旧 MyComputerFamily 同款） -->
                 <view class="fgl-card__icon-wrap">
                     <!-- 文件夹：纯 CSS 造型（图标库没有 folder），主体 + 左上页签 -->
-                    <view v-if="file.kind === 'folder'" class="fgl-card__folder">
-                        <view class="fgl-card__folder-tab" />
+                    <view v-if="file.kind === 'folder'" class="fgl-card__folder" :style="folderStyle">
+                        <view class="fgl-card__folder-tab" :style="folderTabStyle" />
                     </view>
                     <u-icon v-else :name="visualOf(file.kind)!.icon" size="88" :color="visualOf(file.kind)!.color" />
                     <!-- 锁仅目录显示（旧系统：文件不挂锁）：绿开锁=有权限，灰闭锁=无权限；
@@ -119,7 +137,7 @@ function onCardTap(file: FileItem): void {
 
                 <view v-if="selectMode" class="fgl-card__check">
                     <u-icon :name="isSelected(file) ? 'checkmark-circle-fill' : 'checkmark-circle'" size="40"
-                        :color="isSelected(file) ? '#2b8fff' : '#c0c4cc'" />
+                        :color="isSelected(file) ? primary : '#c0c4cc'" />
                 </view>
             </view>
         </view>
@@ -144,17 +162,21 @@ function onCardTap(file: FileItem): void {
     color: #9aa0a6;
 }
 
+/* 卡片表面统一风格：白底 + 细边框 + 柔和投影（替代灰底 #f7f8fa 与页面底糊在一起的问题） */
 .fgl-card {
     position: relative;
     width: calc(100% / 3 - 16rpx);
     margin: 8rpx;
     padding-bottom: 20rpx;
+    border: 2rpx solid rgba(31, 35, 41, 0.06);
     border-radius: 20rpx;
-    background-color: #f7f8fa;
+    background-color: #ffffff;
+    box-shadow: 0 6rpx 18rpx rgba(31, 35, 41, 0.05);
+}
 
-    &--selected {
-        background-color: #eaf4ff;
-    }
+/* 横三点旋转 90° 成竖排（图标库无竖版 more），绕中心转不影响外层定位 */
+.fgl-card__more-icon {
+    transform: rotate(90deg);
 }
 
 .fgl-card__more {
@@ -195,15 +217,13 @@ function onCardTap(file: FileItem): void {
     gap: 4rpx;
 }
 
-/* ---- 纯 CSS 文件夹：蓝色渐变圆角主体 + 左上页签 ---- */
+/* ---- 纯 CSS 文件夹：主题渐变圆角主体 + 左上页签（配色由 script 的 folderStyle/folderTabStyle 内联下发） ---- */
 .fgl-card__folder {
     position: relative;
     width: 132rpx;
     height: 104rpx;
     margin: 14rpx 0;
     border-radius: 16rpx;
-    background: linear-gradient(135deg, #6ec2ff 0%, #2b8fff 100%);
-    box-shadow: 0 10rpx 20rpx rgba(43, 143, 255, 0.25);
 }
 
 .fgl-card__folder-tab {
@@ -213,7 +233,6 @@ function onCardTap(file: FileItem): void {
     width: 56rpx;
     height: 24rpx;
     border-radius: 10rpx 10rpx 0 0;
-    background: linear-gradient(135deg, #6ec2ff 0%, #4aa6ff 100%);
 }
 
 .fgl-card__info {
diff --git a/uniapp/youjiala/src/components/file-tab-filter/file-tab-filter.vue b/uniapp/youjiala/src/components/file-tab-filter/file-tab-filter.vue
index 4c8cc56..5cb9be3 100644
--- a/uniapp/youjiala/src/components/file-tab-filter/file-tab-filter.vue
+++ b/uniapp/youjiala/src/components/file-tab-filter/file-tab-filter.vue
@@ -92,15 +92,16 @@ const sortIconDark = sortGlyph("#1f2329");
 </template>
 
 <style lang="scss" scoped>
-/* 分类条卡片：与面包屑/搜索框同风格——描边圈 + 浅半透明白底，透出渐变底 */
+/* 卡片表面统一风格：白底 + 细边框 + 柔和投影，与搜索框/面包屑同一层级（替代半透明白叠加） */
 .file-tab-filter {
   display: flex;
   align-items: center;
   margin: 20rpx 24rpx 0;
   padding: 8rpx 16rpx;
-  border: 2rpx solid rgba(31, 35, 41, 0.08);
+  border: 2rpx solid rgba(31, 35, 41, 0.06);
   border-radius: 24rpx;
-  background-color: rgba(255, 255, 255, 0.45);
+  background-color: #ffffff;
+  box-shadow: 0 6rpx 18rpx rgba(31, 35, 41, 0.05);
 }
 
 .file-tab-filter__scroll {
diff --git a/uniapp/youjiala/src/components/float-add-btn/float-add-btn.vue b/uniapp/youjiala/src/components/float-add-btn/float-add-btn.vue
index 0a9f7ab..071164c 100644
--- a/uniapp/youjiala/src/components/float-add-btn/float-add-btn.vue
+++ b/uniapp/youjiala/src/components/float-add-btn/float-add-btn.vue
@@ -8,6 +8,7 @@
  * 拖动收尾置 suppressClick 吞掉随后的原生 click，防拖完误触。
  */
 import { computed, onMounted, ref } from "vue";
+import { useThemeTokens } from "@/composables/useThemeGradient";
 
 const props = defineProps({
   /** 初始底部偏移（rpx 数值，仅首次无存储记录时生效），供不同页面避开各自的底部元素 */
@@ -72,6 +73,13 @@ const posStyle = computed(() => ({
   visibility: ready.value ? "visible" : "hidden",
 }));
 
+/** 按钮面色跟随主题（与文件夹图形同派生，主题统一）：渐变 + 同色柔光投影 */
+const { accentGradient, accentShadow } = useThemeTokens();
+const skinStyle = computed(() => ({
+  background: accentGradient.value,
+  boxShadow: `0 12rpx 32rpx ${accentShadow.value}`,
+}));
+
 function onDragStart(x: number, y: number): void {
   dragging = true;
   moved = false;
@@ -154,8 +162,8 @@ function onMouseDown(e: MouseEvent): void {
 </script>
 
 <template>
-  <view class="float-add-btn" :style="posStyle" @touchstart="onTouchStart" @touchmove.stop.prevent="onTouchMove"
-    @touchend="onTouchEnd" @mousedown="onMouseDown" @click="onTap">
+  <view class="float-add-btn" :style="[posStyle, skinStyle]" @touchstart="onTouchStart"
+    @touchmove.stop.prevent="onTouchMove" @touchend="onTouchEnd" @mousedown="onMouseDown" @click="onTap">
     <u-icon name="plus" size="52" color="#ffffff" />
   </view>
 </template>
@@ -172,8 +180,7 @@ function onMouseDown(e: MouseEvent): void {
   width: 112rpx;
   height: 112rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #6ec2ff 0%, #2b8fff 100%);
-  box-shadow: 0 12rpx 32rpx rgba(43, 143, 255, 0.4);
+  /* 面色与投影由 skinStyle 内联下发（主题派生），这里只留形态 */
   touch-action: none;
   /* 屏蔽浏览器默认滚动手势，touchmove 才不被吞 */
   user-select: none;
diff --git a/uniapp/youjiala/src/components/folder-move-picker/folder-move-picker.vue b/uniapp/youjiala/src/components/folder-move-picker/folder-move-picker.vue
index d3b98ee..4b78a04 100644
--- a/uniapp/youjiala/src/components/folder-move-picker/folder-move-picker.vue
+++ b/uniapp/youjiala/src/components/folder-move-picker/folder-move-picker.vue
@@ -11,6 +11,7 @@
 import type { PathNode } from "@/data/custom/fileBrowser";
 import { useLocale } from "uview-pro";
 import { computed, ref, watch } from "vue";
+import { useThemeTokens } from "@/composables";
 import dmsFileService from "@/service/master/dmsFileService";
 
 /** 一个目录层：系统名（提交用）+ 显示名 */
@@ -75,6 +76,11 @@ const rows = computed<FolderRow[]>(() => {
 /** 「移动到此」置灰：没有可提交层，或正站在条目现居目录 */
 const canMoveHere = computed(() => !!current.value && current.value.folderName !== props.sourcePath);
 
+const { accentGradient, primary } = useThemeTokens();
+/** 文件夹图形用主题强调渐变（同 file-grid-list）；提交钮用纯色（渐变浅档在白字下发糊），禁用态回落到置灰样式 */
+const folderStyle = computed(() => ({ "--fg-folder": accentGradient.value }));
+const submitStyle = computed(() => (canMoveHere.value ? { background: primary.value } : undefined));
+
 // 每次展开重拉并回到根：目录可能被别的操作改过，缓存会钻进了不存在的坑
 watch(
     () => props.visible,
@@ -136,47 +142,53 @@ function onMoveHere(): void {
 <template>
     <u-popup :model-value="props.visible" mode="bottom" round="24" @close="emit('close')">
         <view class="folder-move-picker">
-            <!-- 头部：面包屑路径（复用 file-breadcrumb，单击回层、超长自动折叠）+ 关闭 -->
+            <!-- 头部白卡：面包屑路径（复用 file-breadcrumb，单击回层、超长自动折叠）；退出走底部「取消」 -->
             <view class="folder-move-picker__head">
                 <view class="folder-move-picker__crumb">
                     <file-breadcrumb :items="crumbItems" :show-single="true" @nav="onJump" />
                 </view>
-                <view class="folder-move-picker__close" @tap="emit('close')">
-                    <u-icon name="close" size="36" color="#8f959e" />
-                </view>
             </view>
             <text v-if="props.selectedCount" class="folder-move-picker__picked">
                 {{ t("FilePage.moveSelected").replace("{count}", String(props.selectedCount)) }}
             </text>
-            <scroll-view scroll-y class="folder-move-picker__list">
-                <view v-if="loading" class="folder-move-picker__empty">
-                    <u-loading mode="circle" />
-                </view>
-                <template v-else>
-                    <view v-if="!rows.length" class="folder-move-picker__empty">
-                        <text class="folder-move-picker__empty-text">
-                            {{ t("FilePage.moveNoSub") }}
-                        </text>
+            <!-- 列表白卡（底部抽屉统一风格） -->
+            <view class="folder-move-picker__card">
+                <scroll-view scroll-y class="folder-move-picker__list">
+                    <view v-if="loading" class="folder-move-picker__empty">
+                        <u-loading mode="circle" />
                     </view>
-                    <view v-for="row in rows" :key="row.folderName" class="folder-move-picker__row" @tap="onEnter(row)">
-                        <!-- 图标库无 folder 字形，沿用项目 CSS 画文件夹惯例（同 file-action-sheet） -->
-                        <view class="folder-move-picker__folder" />
-                        <view class="folder-move-picker__row-main">
-                            <text class="folder-move-picker__row-text">
-                                {{ row.localName }}
-                            </text>
-                            <text v-if="fmtDate(row.folderName)" class="folder-move-picker__row-sub">
-                                {{ fmtDate(row.folderName) }}
+                    <template v-else>
+                        <view v-if="!rows.length" class="folder-move-picker__empty">
+                            <text class="folder-move-picker__empty-text">
+                                {{ t("FilePage.moveNoSub") }}
                             </text>
                         </view>
-                        <u-icon name="arrow-right" size="26" color="#c0c4cc" />
-                    </view>
-                </template>
-            </scroll-view>
-            <!-- 底部：通栏「移动到此」提交当前层（站在原地目录时置灰） -->
+                        <view v-for="row in rows" :key="row.folderName" class="folder-move-picker__row"
+                            @tap="onEnter(row)">
+                            <!-- 图标库无 folder 字形，沿用项目 CSS 画文件夹惯例；颜色随主题（--fg-folder） -->
+                            <view class="folder-move-picker__folder" :style="folderStyle" />
+                            <view class="folder-move-picker__row-main">
+                                <text class="folder-move-picker__row-text">
+                                    {{ row.localName }}
+                                </text>
+                                <text v-if="fmtDate(row.folderName)" class="folder-move-picker__row-sub">
+                                    {{ fmtDate(row.folderName) }}
+                                </text>
+                            </view>
+                            <u-icon name="arrow-right" size="26" color="#c0c4cc" />
+                        </view>
+                    </template>
+                </scroll-view>
+            </view>
+            <!-- 底部：取消 + 通栏「移动到此」提交当前层（站在原地目录时置灰） -->
             <view class="folder-move-picker__footer">
+                <view class="folder-move-picker__btn folder-move-picker__btn--cancel" @tap="emit('close')">
+                    <text class="folder-move-picker__cancel-text">
+                        {{ t("FilePage.folderCancel") }}
+                    </text>
+                </view>
                 <view class="folder-move-picker__btn" :class="{ 'folder-move-picker__btn--muted': !canMoveHere }"
-                    @tap="onMoveHere">
+                    :style="submitStyle" @tap="onMoveHere">
                     <text class="folder-move-picker__btn-text">
                         {{ t("FilePage.moveHere") }}
                     </text>
@@ -188,14 +200,18 @@ function onMoveHere(): void {
 </template>
 
 <style lang="scss" scoped>
+/* 底部抽屉统一风格：浅灰面板底 + 白色圆角卡分块 */
 .folder-move-picker {
-    padding: 8rpx 32rpx 0;
-    background-color: #ffffff;
+    padding: 24rpx 24rpx 0;
+    background-color: #f2f3f5;
 
     &__head {
         display: flex;
         align-items: center;
         height: 108rpx;
+        padding: 0 24rpx;
+        border-radius: 20rpx;
+        background-color: #ffffff;
     }
 
     /* 面包屑占满剩余宽度（自身可收缩，超长时组件内折叠出 …） */
@@ -205,19 +221,48 @@ function onMoveHere(): void {
         overflow: hidden;
     }
 
-    &__close {
+    &__footer {
         display: flex;
-        flex-shrink: 0;
-        padding: 12rpx;
+        align-items: center;
+        gap: 20rpx;
+        padding-top: 28rpx;
+    }
+
+    /* 底部按键统一规格（同 option-picker）：等高圆角矩形，非胶囊 */
+    &__btn {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        height: 96rpx;
+        border-radius: 24rpx;
+        background-color: #2b8fff;
+
+        /* 取消：白底细描边灰字（底部抽屉统一语言） */
+        &--cancel {
+            border: 2rpx solid #e5e6eb;
+            background-color: #ffffff;
+        }
+    }
+
+    &__cancel-text {
+        font-size: 32rpx;
+        color: #5c626b;
     }
 
     &__picked {
         display: block;
-        padding: 0 8rpx 16rpx;
+        padding: 20rpx 8rpx 16rpx;
         font-size: 26rpx;
         color: #5c626b;
     }
 
+    &__card {
+        padding: 8rpx;
+        border-radius: 20rpx;
+        background-color: #ffffff;
+    }
+
     &__list {
         max-height: 640rpx;
         min-height: 240rpx;
@@ -249,7 +294,7 @@ function onMoveHere(): void {
         width: 56rpx;
         height: 44rpx;
         border-radius: 10rpx;
-        background: linear-gradient(180deg, #8ecbff, #4aa3ff);
+        background: var(--fg-folder, linear-gradient(180deg, #8ecbff, #4aa3ff));
 
         &::before {
             position: absolute;
@@ -258,7 +303,7 @@ function onMoveHere(): void {
             width: 24rpx;
             height: 12rpx;
             border-radius: 6rpx 6rpx 0 0;
-            background: linear-gradient(180deg, #8ecbff, #4aa3ff);
+            background: var(--fg-folder, linear-gradient(180deg, #8ecbff, #4aa3ff));
             content: "";
         }
     }
@@ -284,29 +329,12 @@ function onMoveHere(): void {
         color: #8f959e;
     }
 
-    &__footer {
-        display: flex;
-        align-items: center;
-        padding-top: 24rpx;
-        border-top: 1rpx solid #f0f1f3;
-    }
-
-    &__btn {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        justify-content: center;
-        height: 76rpx;
-        border-radius: 999rpx;
-        background-color: #2b8fff;
-    }
-
     &__btn--muted {
         background-color: #d4d8de;
     }
 
     &__btn-text {
-        font-size: 28rpx;
+        font-size: 32rpx;
         font-weight: 600;
         color: #ffffff;
     }
diff --git a/uniapp/youjiala/src/components/folder-name-dialog/folder-name-dialog.vue b/uniapp/youjiala/src/components/folder-name-dialog/folder-name-dialog.vue
index 1dbaae5..cc570d8 100644
--- a/uniapp/youjiala/src/components/folder-name-dialog/folder-name-dialog.vue
+++ b/uniapp/youjiala/src/components/folder-name-dialog/folder-name-dialog.vue
@@ -7,6 +7,7 @@
  */
 import { useLocale } from "uview-pro";
 import { computed, ref, watch } from "vue";
+import { useThemeTokens } from "@/composables";
 
 const props = defineProps({
   /** 对话框是否展开 */
@@ -49,6 +50,8 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useLocale();
+// 确认钮纯色跟主题（渐变浅档白字发糊）
+const { primary } = useThemeTokens();
 
 const name = ref("");
 
@@ -90,7 +93,8 @@ function onConfirm(): void {
           </text>
         </view>
         <view class="folder-name-dialog__btn folder-name-dialog__btn--primary"
-          :class="{ 'folder-name-dialog__btn--muted': !canSubmit || props.submitting }" @click="onConfirm">
+          :class="{ 'folder-name-dialog__btn--muted': !canSubmit || props.submitting }" :style="{ background: primary }"
+          @click="onConfirm">
           <text class="folder-name-dialog__btn-text folder-name-dialog__btn-text--primary">
             {{ props.confirmLabel || t("FilePage.folderConfirm") }}
           </text>
@@ -133,30 +137,34 @@ function onConfirm(): void {
     margin-top: 32rpx;
   }
 
+  /* 底部按键统一规格（同 option-picker）：等高圆角矩形 + 细描边，非胶囊 */
   &__btn {
     display: flex;
     flex: 1;
     align-items: center;
     justify-content: center;
-    height: 76rpx;
-    border-radius: 999rpx;
-    background-color: #f5f6f8;
+    height: 96rpx;
+    border: 2rpx solid #e5e6eb;
+    border-radius: 24rpx;
+    background-color: #ffffff;
 
     &--primary {
+      border-color: transparent;
       background-color: #2b8fff;
     }
 
-    /* 名称为空或提交中：主按钮置灰（仍可点，由 onConfirm 拦截） */
+    /* 名称为空或提交中：纯色 + 透明度置灰（色相不脱节，仍可点，由 onConfirm 拦截） */
     &--muted {
-      background-color: #b9d6ff;
+      opacity: 0.45;
     }
   }
 
   &__btn-text {
-    font-size: 28rpx;
+    font-size: 32rpx;
     color: #5c626b;
 
     &--primary {
+      font-weight: 600;
       color: #ffffff;
     }
   }
diff --git a/uniapp/youjiala/src/components/folder-share-picker/folder-share-picker.vue b/uniapp/youjiala/src/components/folder-share-picker/folder-share-picker.vue
index d27aa34..aa5316b 100644
--- a/uniapp/youjiala/src/components/folder-share-picker/folder-share-picker.vue
+++ b/uniapp/youjiala/src/components/folder-share-picker/folder-share-picker.vue
@@ -12,6 +12,7 @@
 import type { PathNode } from "@/data/custom/fileBrowser";
 import { useLocale } from "uview-pro";
 import { computed, ref, watch } from "vue";
+import { useThemeTokens } from "@/composables";
 import { DmsFileSearchCriteria } from "@/data/auto/dmsFileSearchCriteria";
 import { FamilyDmsFileViewDisplayData } from "@/data/auto/familyDmsFileViewDisplayData";
 import { SearchFilter } from "@/data/auto/searchFilter";
@@ -19,34 +20,34 @@ import dmsFileService from "@/service/master/dmsFileService";
 
 /** 共享目标层：组 + 顶层目录系统名（旧系统取消共享按它查权限）+ 当前目录标识 */
 export interface ShareTarget {
-    familyName: string;
-    topFolderName: string;
-    filePath: string;
+  familyName: string;
+  topFolderName: string;
+  filePath: string;
 }
 
 /** 浏览路径的一段：value = 群组编号（组根）或目录系统名（子层） */
 interface CrumbRow {
-    value: string;
-    displayName: string;
+  value: string;
+  displayName: string;
 }
 
 const props = defineProps({
-    /** 抽屉是否展开 */
-    visible: {
-        type: Boolean,
-        default: false,
-    },
-    /** 已选待共享文件数（顶部「已选择 N 项」提示） */
-    selectedCount: {
-        type: Number,
-        default: 0,
-    },
+  /** 抽屉是否展开 */
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  /** 已选待共享文件数（顶部「已选择 N 项」提示） */
+  selectedCount: {
+    type: Number,
+    default: 0,
+  },
 });
 
 const emit = defineEmits<{
-    (e: "close"): void;
-    /** 点「共享到此」，带上当前所在层的目标三元组 */
-    (e: "confirm", target: ShareTarget): void;
+  (e: "close"): void;
+  /** 点「共享到此」，带上当前所在层的目标三元组 */
+  (e: "confirm", target: ShareTarget): void;
 }>();
 
 const { t } = useLocale();
@@ -66,327 +67,351 @@ const inGroup = computed(() => !!trail.value.length);
 /** 「共享到此」只在进入下一层目录后出现：群组名那一层（trail 只有组根一段）不允许直接共享 */
 const canShareHere = computed(() => trail.value.length >= 2);
 
+const { accentGradient, primary } = useThemeTokens();
+/** 文件夹图形用主题强调渐变（同 file-grid-list）；提交钮用纯色（渐变浅档在白字下发糊） */
+const folderStyle = computed(() => ({ "--fg-folder": accentGradient.value }));
+const submitStyle = computed(() => (canShareHere.value ? { background: primary.value } : undefined));
+
 /** 「共享到此」的目标三元组：组根 TopFolderName = 群组编号，子层 = 路径首段目录 */
 const currentTarget = computed<ShareTarget | null>(() => {
-    if (!inGroup.value) {
-        return null;
-    }
-    return {
-        familyName: familyName.value,
-        topFolderName: trail.value[0].value,
-        filePath: trail.value[trail.value.length - 1].value,
-    };
+  if (!inGroup.value) {
+    return null;
+  }
+  return {
+    familyName: familyName.value,
+    topFolderName: trail.value[0].value,
+    filePath: trail.value[trail.value.length - 1].value,
+  };
 });
 
 // 每次展开重拉群组并回大厅顶层：群组可能被别的端改过，缓存会弹进已消失的坑
 watch(
-    () => props.visible,
-    async (on) => {
-        if (on) {
-            trail.value = [];
-            familyName.value = "";
-            await loadGroups();
-        }
-    },
+  () => props.visible,
+  async (on) => {
+    if (on) {
+      trail.value = [];
+      familyName.value = "";
+      await loadGroups();
+    }
+  },
 );
 
 async function loadGroups(): Promise<void> {
-    loading.value = true;
-    try {
-        const options = (await dmsFileService.FindFamilyDmsFolders()) ?? [];
-        groups.value = options.map(opt => ({ value: opt.BindValue, label: opt.DisplayName || opt.BindValue }));
-    }
-    finally {
-        loading.value = false;
-    }
+  loading.value = true;
+  try {
+    const options = (await dmsFileService.FindFamilyDmsFolders()) ?? [];
+    groups.value = options.map(opt => ({ value: opt.BindValue, label: opt.DisplayName || opt.BindValue }));
+  }
+  finally {
+    loading.value = false;
+  }
 }
 
 /** 查当前层子目录：两段过滤与共享大厅 loadFolder 同口径（组根标识=群组编号照挂） */
 async function loadDirs(): Promise<void> {
-    loading.value = true;
-    try {
-        const criteria = new DmsFileSearchCriteria();
-        const familyFilter = new SearchFilter();
-        familyFilter.Column = FamilyDmsFileViewDisplayData.DB_FAMILY_NAME;
-        familyFilter.Type = "SingleSelection";
-        familyFilter.Operator = "single";
-        familyFilter.Value = familyName.value;
-        const pathFilter = new SearchFilter();
-        pathFilter.Column = FamilyDmsFileViewDisplayData.DB_FILE_PATH;
-        pathFilter.Type = "SingleSelection";
-        pathFilter.Operator = "single";
-        pathFilter.Value = trail.value[trail.value.length - 1].value;
-        criteria.Filter = [familyFilter, pathFilter];
-        criteria.limit = 999999;
-        criteria.page = 1;
-        criteria.GridColumns = [];
-        const data = await dmsFileService.FindFamilyBySearchCriteria(criteria);
-        dirs.value = (data?.Families ?? [])
-            .filter(r => r.IsDirectoryIndc === "Y")
-            .map(r => ({
-                value: r.FileName,
-                label: r.OrgFileName || r.FileName,
-                permitted: r.PermissionIndc === "Y",
-            }))
-            .sort((a, b) => a.label.localeCompare(b.label, "zh-CN"));
-    }
-    finally {
-        loading.value = false;
-    }
+  loading.value = true;
+  try {
+    const criteria = new DmsFileSearchCriteria();
+    const familyFilter = new SearchFilter();
+    familyFilter.Column = FamilyDmsFileViewDisplayData.DB_FAMILY_NAME;
+    familyFilter.Type = "SingleSelection";
+    familyFilter.Operator = "single";
+    familyFilter.Value = familyName.value;
+    const pathFilter = new SearchFilter();
+    pathFilter.Column = FamilyDmsFileViewDisplayData.DB_FILE_PATH;
+    pathFilter.Type = "SingleSelection";
+    pathFilter.Operator = "single";
+    pathFilter.Value = trail.value[trail.value.length - 1].value;
+    criteria.Filter = [familyFilter, pathFilter];
+    criteria.limit = 999999;
+    criteria.page = 1;
+    criteria.GridColumns = [];
+    const data = await dmsFileService.FindFamilyBySearchCriteria(criteria);
+    dirs.value = (data?.Families ?? [])
+      .filter(r => r.IsDirectoryIndc === "Y")
+      .map(r => ({
+        value: r.FileName,
+        label: r.OrgFileName || r.FileName,
+        permitted: r.PermissionIndc === "Y",
+      }))
+      .sort((a, b) => a.label.localeCompare(b.label, "zh-CN"));
+  }
+  finally {
+    loading.value = false;
+  }
 }
 
 function enterGroup(group: { value: string; label: string }): void {
-    familyName.value = group.value;
-    trail.value = [{ value: group.value, displayName: group.label }];
-    dirs.value = [];
-    void loadDirs();
+  familyName.value = group.value;
+  trail.value = [{ value: group.value, displayName: group.label }];
+  dirs.value = [];
+  void loadDirs();
 }
 
 /** 下钻子目录；无权限的目录进不去（与共享大厅 PermissionIndc 口径一致） */
 function enterDir(row: { value: string; label: string; permitted: boolean }): void {
-    if (!row.permitted) {
-        uni.showToast({ title: t("ShareHallPage.noPermission"), icon: "none" });
-        return;
-    }
-    trail.value = [...trail.value, { value: row.value, displayName: row.label }];
-    void loadDirs();
+  if (!row.permitted) {
+    uni.showToast({ title: t("ShareHallPage.noPermission"), icon: "none" });
+    return;
+  }
+  trail.value = [...trail.value, { value: row.value, displayName: row.label }];
+  void loadDirs();
 }
 
 /** 组内面包屑：首段=群组名，单击回该层（当前段组件内自行不响应） */
 const crumbItems = computed<PathNode[]>(() => trail.value.map(row => ({
-    value: row.value,
-    displayName: row.displayName,
+  value: row.value,
+  displayName: row.displayName,
 })));
 
 function onJump(index: number): void {
-    trail.value = trail.value.slice(0, index + 1);
-    void loadDirs();
+  trail.value = trail.value.slice(0, index + 1);
+  void loadDirs();
 }
 
 function onShareHere(): void {
-    const target = currentTarget.value;
-    if (target) {
-        emit("confirm", target);
-    }
+  const target = currentTarget.value;
+  if (target) {
+    emit("confirm", target);
+  }
 }
 </script>
 
 <template>
-    <u-popup :model-value="props.visible" mode="bottom" round="24" @close="emit('close')">
-        <view class="folder-share-picker">
-            <!-- 头部：大厅层显示标题，组内显示面包屑（单击回层、超长自动折叠）+ 关闭 -->
-            <view class="folder-share-picker__head">
-                <text v-if="!inGroup" class="folder-share-picker__title">
-                    {{ t("FilePage.shareTitle") }}
-                </text>
-                <view v-else class="folder-share-picker__crumb">
-                    <file-breadcrumb :items="crumbItems" :show-single="true" @nav="onJump" />
-                </view>
-                <view class="folder-share-picker__close" @tap="emit('close')">
-                    <u-icon name="close" size="36" color="#8f959e" />
-                </view>
-            </view>
-            <text v-if="props.selectedCount" class="folder-share-picker__picked">
-                {{ t("FilePage.moveSelected").replace("{count}", String(props.selectedCount)) }}
-            </text>
-            <scroll-view scroll-y class="folder-share-picker__list">
-                <view v-if="loading" class="folder-share-picker__empty">
-                    <u-loading mode="circle" />
-                </view>
-                <template v-else>
-                    <!-- 大厅顶层：群组卡片（共享大厅图2 同款：浅灰圆卡 + 蓝色文件夹） -->
-                    <template v-if="!inGroup">
-                        <view v-if="!groups.length" class="folder-share-picker__empty">
-                            <text class="folder-share-picker__empty-text">
-                                {{ t("FilePage.pickerEmpty") }}
-                            </text>
-                        </view>
-                        <view v-for="g in groups" :key="g.value" class="folder-share-picker__group"
-                            @tap="enterGroup(g)">
-                            <view class="folder-share-picker__folder" />
-                            <text class="folder-share-picker__group-text">
-                                {{ g.label }}
-                            </text>
-                        </view>
-                    </template>
-                    <!-- 组内：子目录行（点行进下层，「共享到此」提交当前层） -->
-                    <template v-else>
-                        <view v-if="!dirs.length" class="folder-share-picker__empty">
-                            <text class="folder-share-picker__empty-text">
-                                {{ t("FilePage.moveNoSub") }}
-                            </text>
-                        </view>
-                        <view v-for="row in dirs" :key="row.value" class="folder-share-picker__row"
-                            @tap="enterDir(row)">
-                            <view class="folder-share-picker__folder" />
-                            <text class="folder-share-picker__row-text"
-                                :class="{ 'folder-share-picker__row-text--dim': !row.permitted }">
-                                {{ row.label }}
-                            </text>
-                            <u-icon v-if="!row.permitted" name="lock" size="26" color="#8c8c8c" />
-                            <u-icon v-else name="arrow-right" size="26" color="#c0c4cc" />
-                        </view>
-                    </template>
-                </template>
-            </scroll-view>
-            <!-- 底部：通栏「共享到此」提交当前层（群组名那一层不显示——必须进到下一层目录才能共享） -->
-            <view v-if="canShareHere" class="folder-share-picker__footer">
-                <view class="folder-share-picker__btn" @tap="onShareHere">
-                    <text class="folder-share-picker__btn-text">
-                        {{ t("FilePage.shareHere") }}
-                    </text>
-                </view>
-            </view>
-            <view class="folder-share-picker__safe" />
+  <u-popup :model-value="props.visible" mode="bottom" round="24" @close="emit('close')">
+    <view class="folder-share-picker">
+      <!-- 头部白卡：大厅层显示标题，组内显示面包屑（单击回层、超长自动折叠）；退出走底部「取消」 -->
+      <view class="folder-share-picker__head">
+        <text v-if="!inGroup" class="folder-share-picker__title">
+          {{ t("FilePage.shareTitle") }}
+        </text>
+        <view v-else class="folder-share-picker__crumb">
+          <file-breadcrumb :items="crumbItems" :show-single="true" @nav="onJump" />
         </view>
-    </u-popup>
+      </view>
+      <text v-if="props.selectedCount" class="folder-share-picker__picked">
+        {{ t("FilePage.moveSelected").replace("{count}", String(props.selectedCount)) }}
+      </text>
+      <!-- 列表白卡（底部抽屉统一风格） -->
+      <view class="folder-share-picker__card">
+        <scroll-view scroll-y class="folder-share-picker__list">
+          <view v-if="loading" class="folder-share-picker__empty">
+            <u-loading mode="circle" />
+          </view>
+          <template v-else>
+            <!-- 大厅顶层：群组卡片（共享大厅图2 同款：浅灰圆卡 + 蓝色文件夹） -->
+            <template v-if="!inGroup">
+              <view v-if="!groups.length" class="folder-share-picker__empty">
+                <text class="folder-share-picker__empty-text">
+                  {{ t("FilePage.pickerEmpty") }}
+                </text>
+              </view>
+              <view v-for="g in groups" :key="g.value" class="folder-share-picker__group" @tap="enterGroup(g)">
+                <view class="folder-share-picker__folder" :style="folderStyle" />
+                <text class="folder-share-picker__group-text">
+                  {{ g.label }}
+                </text>
+              </view>
+            </template>
+            <!-- 组内：子目录行（点行进下层，「共享到此」提交当前层） -->
+            <template v-else>
+              <view v-if="!dirs.length" class="folder-share-picker__empty">
+                <text class="folder-share-picker__empty-text">
+                  {{ t("FilePage.moveNoSub") }}
+                </text>
+              </view>
+              <view v-for="row in dirs" :key="row.value" class="folder-share-picker__row" @tap="enterDir(row)">
+                <view class="folder-share-picker__folder" :style="folderStyle" />
+                <text class="folder-share-picker__row-text"
+                  :class="{ 'folder-share-picker__row-text--dim': !row.permitted }">
+                  {{ row.label }}
+                </text>
+                <u-icon v-if="!row.permitted" name="lock" size="26" color="#8c8c8c" />
+                <u-icon v-else name="arrow-right" size="26" color="#c0c4cc" />
+              </view>
+            </template>
+          </template>
+        </scroll-view>
+      </view>
+      <!-- 底部：取消常驻；「共享到此」只在可提交层出现（群组名那一层必须进到下一层目录才能共享） -->
+      <view class="folder-share-picker__footer">
+        <view class="folder-share-picker__btn folder-share-picker__btn--cancel" @tap="emit('close')">
+          <text class="folder-share-picker__cancel-text">
+            {{ t("FilePage.folderCancel") }}
+          </text>
+        </view>
+        <view v-if="canShareHere" class="folder-share-picker__btn" :style="submitStyle" @tap="onShareHere">
+          <text class="folder-share-picker__btn-text">
+            {{ t("FilePage.shareHere") }}
+          </text>
+        </view>
+      </view>
+      <view class="folder-share-picker__safe" />
+    </view>
+  </u-popup>
 </template>
 
 <style lang="scss" scoped>
+/* 底部抽屉统一风格：浅灰面板底 + 白色圆角卡分块 */
 .folder-share-picker {
-    padding: 8rpx 32rpx 0;
+  padding: 24rpx 24rpx 0;
+  background-color: #f2f3f5;
+
+  &__head {
+    display: flex;
+    align-items: center;
+    height: 108rpx;
+    padding: 0 24rpx;
+    border-radius: 20rpx;
     background-color: #ffffff;
+  }
 
-    &__head {
-        display: flex;
-        align-items: center;
-        height: 108rpx;
+  &__title {
+    flex: 1;
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #1f2329;
+    text-align: center;
+  }
+
+  /* 面包屑占满剩余宽度（自身可收缩，超长时组件内折叠出 …） */
+  &__crumb {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  &__picked {
+    display: block;
+    padding: 20rpx 8rpx 16rpx;
+    font-size: 26rpx;
+    color: #5c626b;
+  }
+
+  &__card {
+    padding: 8rpx;
+    border-radius: 20rpx;
+    background-color: #ffffff;
+  }
+
+  &__list {
+    max-height: 640rpx;
+    min-height: 240rpx;
+  }
+
+  &__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 80rpx 0;
+  }
+
+  &__empty-text {
+    font-size: 26rpx;
+    color: #8f959e;
+  }
+
+  /* 群组卡片：共享大厅顶层同款浅灰圆底行 */
+  &__group {
+    display: flex;
+    align-items: center;
+    gap: 24rpx;
+    margin-bottom: 16rpx;
+    padding: 28rpx 24rpx;
+    border-radius: 16rpx;
+    background-color: #f7f8fa;
+  }
+
+  &__group-text {
+    flex: 1;
+    overflow: hidden;
+    font-size: 30rpx;
+    font-weight: 500;
+    color: #1f2329;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    padding: 24rpx 12rpx;
+    border-radius: 16rpx;
+  }
+
+  &__row-text {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    font-size: 30rpx;
+    color: #1f2329;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &--dim {
+      color: #9aa0a6;
     }
+  }
 
-    &__title {
-        flex: 1;
-        font-size: 32rpx;
-        font-weight: 600;
-        color: #1f2329;
-        text-align: center;
+  /* CSS 画文件夹（图标库无 folder 字形，同 folder-move-picker）；颜色随主题 --fg-folder */
+  &__folder {
+    position: relative;
+    flex-shrink: 0;
+    width: 56rpx;
+    height: 44rpx;
+    border-radius: 10rpx;
+    background: var(--fg-folder, linear-gradient(180deg, #8ecbff, #4aa3ff));
+
+    &::before {
+      position: absolute;
+      top: -10rpx;
+      left: 0;
+      width: 24rpx;
+      height: 12rpx;
+      border-radius: 6rpx 6rpx 0 0;
+      background: var(--fg-folder, linear-gradient(180deg, #8ecbff, #4aa3ff));
+      content: "";
     }
+  }
 
-    /* 面包屑占满剩余宽度（自身可收缩，超长时组件内折叠出 …） */
-    &__crumb {
-        flex: 1;
-        min-width: 0;
-        overflow: hidden;
+  &__footer {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    padding-top: 28rpx;
+  }
+
+  /* 底部按键统一规格（同 option-picker）：等高圆角矩形，非胶囊 */
+  &__btn {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    height: 96rpx;
+    border-radius: 24rpx;
+    background-color: #2b8fff;
+
+    /* 取消：白底细描边灰字（底部抽屉统一语言） */
+    &--cancel {
+      border: 2rpx solid #e5e6eb;
+      background-color: #ffffff;
     }
+  }
 
-    &__close {
-        display: flex;
-        flex-shrink: 0;
-        padding: 12rpx;
-    }
+  &__cancel-text {
+    font-size: 32rpx;
+    color: #5c626b;
+  }
 
-    &__picked {
-        display: block;
-        padding: 0 8rpx 16rpx;
-        font-size: 26rpx;
-        color: #5c626b;
-    }
+  &__btn-text {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #ffffff;
+  }
 
-    &__list {
-        max-height: 640rpx;
-        min-height: 240rpx;
-    }
-
-    &__empty {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 80rpx 0;
-    }
-
-    &__empty-text {
-        font-size: 26rpx;
-        color: #8f959e;
-    }
-
-    /* 群组卡片：共享大厅顶层同款浅灰圆底行 */
-    &__group {
-        display: flex;
-        align-items: center;
-        gap: 24rpx;
-        margin-bottom: 16rpx;
-        padding: 28rpx 24rpx;
-        border-radius: 16rpx;
-        background-color: #f7f8fa;
-    }
-
-    &__group-text {
-        flex: 1;
-        overflow: hidden;
-        font-size: 30rpx;
-        font-weight: 500;
-        color: #1f2329;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    &__row {
-        display: flex;
-        align-items: center;
-        gap: 20rpx;
-        padding: 24rpx 12rpx;
-        border-radius: 16rpx;
-    }
-
-    &__row-text {
-        display: flex;
-        flex: 1;
-        overflow: hidden;
-        font-size: 30rpx;
-        color: #1f2329;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-
-        &--dim {
-            color: #9aa0a6;
-        }
-    }
-
-    /* CSS 画文件夹（图标库无 folder 字形，同 folder-move-picker / 图2 蓝色系） */
-    &__folder {
-        position: relative;
-        flex-shrink: 0;
-        width: 56rpx;
-        height: 44rpx;
-        border-radius: 10rpx;
-        background: linear-gradient(180deg, #8ecbff, #4aa3ff);
-
-        &::before {
-            position: absolute;
-            top: -10rpx;
-            left: 0;
-            width: 24rpx;
-            height: 12rpx;
-            border-radius: 6rpx 6rpx 0 0;
-            background: linear-gradient(180deg, #8ecbff, #4aa3ff);
-            content: "";
-        }
-    }
-
-    &__footer {
-        display: flex;
-        align-items: center;
-        padding-top: 24rpx;
-        border-top: 1rpx solid #f0f1f3;
-    }
-
-    &__btn {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        justify-content: center;
-        height: 76rpx;
-        border-radius: 999rpx;
-        background-color: #2b8fff;
-    }
-
-    &__btn-text {
-        font-size: 28rpx;
-        font-weight: 600;
-        color: #ffffff;
-    }
-
-    &__safe {
-        height: calc(24rpx + env(safe-area-inset-bottom));
-    }
+  &__safe {
+    height: calc(24rpx + env(safe-area-inset-bottom));
+  }
 }
 </style>
diff --git a/uniapp/youjiala/src/components/help-doc-preview/help-doc-preview.vue b/uniapp/youjiala/src/components/help-doc-preview/help-doc-preview.vue
index 83d8420..efd387b 100644
--- a/uniapp/youjiala/src/components/help-doc-preview/help-doc-preview.vue
+++ b/uniapp/youjiala/src/components/help-doc-preview/help-doc-preview.vue
@@ -126,8 +126,7 @@ const hasContent = computed(
 </script>
 
 <template>
-    <u-popup :model-value="visible" mode="bottom" round="24" :closeable="true" close-icon-pos="top-right"
-        :safe-area-inset-bottom="true" @close="emit('close')">
+    <u-popup :model-value="visible" mode="bottom" round="24" :safe-area-inset-bottom="true" @close="emit('close')">
         <view class="help-preview">
             <scroll-view class="hp-body" scroll-y :show-scrollbar="false">
                 <!-- 头部：圆形图标徽标 + 标题 -->
@@ -223,24 +222,50 @@ const hasContent = computed(
                     </template>
                 </view>
             </scroll-view>
+            <!-- 取消通栏（底部抽屉统一风格：不再用右上角 X） -->
+            <view class="hp-cancel" @tap="emit('close')">
+                <text class="hp-cancel-text">
+                    {{ t("HelpPreview.cancel") }}
+                </text>
+            </view>
         </view>
     </u-popup>
 </template>
 
 <style lang="scss" scoped>
+/* 底部抽屉统一风格：浅灰面板底，文档内容整体放白色圆角卡 */
 .help-preview {
     display: flex;
     flex-direction: column;
     max-height: 82vh;
-    padding: 8rpx 32rpx 24rpx;
-    background-color: #ffffff;
+    padding: 24rpx;
+    background-color: #f2f3f5;
     border-radius: 24rpx;
 }
 
 .hp-body {
     flex: 1;
     min-height: 0;
-    max-height: calc(82vh - 32rpx);
+    max-height: calc(82vh - 176rpx);
+    padding: 8rpx 28rpx 24rpx;
+    background-color: #ffffff;
+    border-radius: 20rpx;
+}
+
+/* 取消通栏：白卡灰字，与文档卡同语言 */
+.hp-cancel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 24rpx;
+    padding: 26rpx 0;
+    border-radius: 20rpx;
+    background-color: #ffffff;
+}
+
+.hp-cancel-text {
+    font-size: 28rpx;
+    color: #5c626b;
 }
 
 /* 头部 */
diff --git a/uniapp/youjiala/src/components/hero-navbar/hero-navbar.vue b/uniapp/youjiala/src/components/hero-navbar/hero-navbar.vue
new file mode 100644
index 0000000..70b8e53
--- /dev/null
+++ b/uniapp/youjiala/src/components/hero-navbar/hero-navbar.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+/**
+ * 沉浸式主题头部（传输列表页同款风格）：柔光主题渐变底 + 白胶囊返回 + 居中主题色标题。
+ * 所有「进入后返回」的子页页头统一用它：回收站 / 共享大厅 / 相册详情 / 新建专辑 / 传输列表。
+ * 标题真居中靠两侧等宽胶囊（返回 64rpx + gap 16rpx）：右侧无搜索时放透明占位。
+ * 渐变与 transport 页一致：primary 混白 35% 起、混白 10% 止（浓色带色觉冲击大的教训）。
+ */
+import { computed } from "vue";
+import { mixWithWhite, useThemeTokens } from "@/composables";
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: "",
+    },
+    /** 右侧搜索胶囊（与返回同宽同形，保持标题居中） */
+    showSearch: {
+        type: Boolean,
+        default: false,
+    },
+    /** 搜索展开态：图标高亮为主题色 */
+    searchOn: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits<{
+    (e: "back"): void;
+    (e: "toggle-search"): void;
+}>();
+
+const { primary } = useThemeTokens();
+
+const heroStyle = computed(() => ({
+    background: `linear-gradient(180deg, ${mixWithWhite(primary.value, 0.35)} 0%, ${mixWithWhite(primary.value, 0.1)} 100%)`,
+}));
+</script>
+
+<template>
+    <view class="hero-navbar" :style="heroStyle">
+        <view class="hero-navbar__status-bar" />
+        <view class="hero-navbar__nav">
+            <view class="hero-navbar__pill" @tap="emit('back')">
+                <u-icon name="arrow-left" size="32" :color="primary" />
+            </view>
+            <text class="hero-navbar__title" :style="{ color: primary }">
+                {{ props.title }}
+            </text>
+            <!-- 右侧：搜索胶囊或等宽透明占位（占位保证标题仍几何居中） -->
+            <view v-if="props.showSearch" class="hero-navbar__pill" @tap="emit('toggle-search')">
+                <u-icon name="search" size="30" :color="props.searchOn ? primary : '#5c626b'" />
+            </view>
+            <view v-else class="hero-navbar__pill hero-navbar__pill--ghost" />
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+/* 沉浸式头部：状态栏占位 + 导航行（传输列表页同款几何） */
+.hero-navbar {
+    padding-bottom: 8rpx;
+
+    &__status-bar {
+        height: var(--status-bar-height);
+    }
+
+    &__nav {
+        display: flex;
+        align-items: center;
+        gap: 16rpx;
+        height: 88rpx;
+        padding: 0 24rpx;
+    }
+
+    /* 白柔光胶囊钮（浅底上用白底 + 主题色图标） */
+    &__pill {
+        display: flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        width: 64rpx;
+        height: 64rpx;
+        border-radius: 20rpx;
+        background: rgba(255, 255, 255, 0.65);
+
+        &--ghost {
+            background: transparent;
+        }
+    }
+
+    &__title {
+        flex: 1;
+        text-align: center;
+        font-size: 34rpx;
+        font-weight: 600;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+</style>
diff --git a/uniapp/youjiala/src/components/option-picker/option-picker.vue b/uniapp/youjiala/src/components/option-picker/option-picker.vue
index a3e6e26..f89ca64 100644
--- a/uniapp/youjiala/src/components/option-picker/option-picker.vue
+++ b/uniapp/youjiala/src/components/option-picker/option-picker.vue
@@ -6,7 +6,8 @@
  * loading 显示转圈占位，items 空且不在 loading 时显示 emptyText。
  */
 import { useLocale } from "uview-pro";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
+import { useThemeTokens } from "@/composables";
 
 export interface PickerOption {
   key: string;
@@ -14,6 +15,8 @@ export interface PickerOption {
   label: string;
   /** 次要说明（如共享路径 / 专辑描述），缺省不占行 */
   sub?: string;
+  /** 行首图标（如相册=photo），缺省不占位 */
+  icon?: string;
 }
 
 const props = defineProps({
@@ -41,6 +44,16 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  /** 确认键文案：发布场景传「发布相册」等，缺省仍用「创建」 */
+  confirmText: {
+    type: String,
+    default: "",
+  },
+  /** 附加「新建」行文案（如 新建相册）：非空即渲染，点按 emit create */
+  createText: {
+    type: String,
+    default: "",
+  },
 });
 
 const emit = defineEmits<{
@@ -48,12 +61,22 @@ const emit = defineEmits<{
   (e: "close"): void;
   /** 确认并带上选中项 key */
   (e: "confirm", key: string): void;
+  /** 点了附加的「新建」行 */
+  (e: "create"): void;
 }>();
 
 const { t } = useLocale();
 
+// 勾选色与确认钮随主题；确认钮用纯色（渐变浅档在白字下发糊），未选择/提交中用透明度做置灰态
+const { primary } = useThemeTokens();
+
 const picked = ref("");
 
+const confirmStyle = computed(() => ({
+  background: primary.value,
+  opacity: picked.value && !props.loading ? 1 : 0.45,
+}));
+
 // 每次展开清掉上次选择
 watch(
   () => props.visible,
@@ -79,41 +102,52 @@ function onConfirm(): void {
       <text class="option-picker__title">
         {{ props.title }}
       </text>
-      <scroll-view scroll-y class="option-picker__list">
-        <view v-if="props.loading" class="option-picker__empty">
-          <u-loading mode="circle" />
-        </view>
-        <template v-else>
-          <view v-if="!props.items.length" class="option-picker__empty">
-            <text class="option-picker__empty-text">
-              {{ props.emptyText || t("FilePage.pickerEmpty") }}
-            </text>
+      <!-- 列表白卡（底部抽屉统一风格：灰底上的白色圆角分块） -->
+      <view class="option-picker__card">
+        <scroll-view scroll-y class="option-picker__list">
+          <view v-if="props.loading" class="option-picker__empty">
+            <u-loading mode="circle" />
           </view>
-          <view v-for="item in props.items" :key="item.key" class="option-picker__row"
-            :class="{ 'option-picker__row--picked': picked === item.key }" @tap="picked = item.key">
-            <view class="option-picker__row-main">
-              <text class="option-picker__row-label">
-                {{ item.label }}
-              </text>
-              <text v-if="item.sub" class="option-picker__row-sub">
-                {{ item.sub }}
+          <template v-else>
+            <view v-if="!props.items.length" class="option-picker__empty">
+              <text class="option-picker__empty-text">
+                {{ props.emptyText || t("FilePage.pickerEmpty") }}
               </text>
             </view>
-            <u-icon v-if="picked === item.key" name="checkmark" size="36" color="#2b8fff" />
-            <view v-else class="option-picker__radio" />
-          </view>
-        </template>
-      </scroll-view>
+            <view v-for="item in props.items" :key="item.key" class="option-picker__row"
+              :class="{ 'option-picker__row--picked': picked === item.key }" @tap="picked = item.key">
+              <u-icon v-if="item.icon" :name="item.icon" size="40" :color="primary" />
+              <view class="option-picker__row-main">
+                <text class="option-picker__row-label">
+                  {{ item.label }}
+                </text>
+                <text v-if="item.sub" class="option-picker__row-sub">
+                  {{ item.sub }}
+                </text>
+              </view>
+              <u-icon v-if="picked === item.key" name="checkmark-circle-fill" size="40" :color="primary" />
+              <view v-else class="option-picker__radio" />
+            </view>
+          </template>
+        </scroll-view>
+      </view>
+      <!-- 附加「新建」行（如 新建相册）：点按跳创建页 -->
+      <view v-if="props.createText" class="option-picker__create" @tap="emit('create')">
+        <u-icon name="plus-circle-fill" size="40" :color="primary" />
+        <text class="option-picker__create-text">
+          {{ props.createText }}
+        </text>
+        <u-icon name="arrow-right" size="26" color="#c0c4cc" />
+      </view>
       <view class="option-picker__footer">
         <view class="option-picker__btn" @tap="emit('close')">
           <text class="option-picker__btn-text">
             {{ t("FilePage.folderCancel") }}
           </text>
         </view>
-        <view class="option-picker__btn option-picker__btn--primary"
-          :class="{ 'option-picker__btn--muted': !picked || props.loading }" @tap="onConfirm">
+        <view class="option-picker__btn option-picker__btn--primary" :style="confirmStyle" @tap="onConfirm">
           <text class="option-picker__btn-text option-picker__btn-text--primary">
-            {{ t("FilePage.folderConfirm") }}
+            {{ props.confirmText || t("FilePage.folderConfirm") }}
           </text>
         </view>
       </view>
@@ -123,17 +157,26 @@ function onConfirm(): void {
 </template>
 
 <style lang="scss" scoped>
+/* 底部抽屉统一风格：浅灰面板底 + 白色圆角卡分块 */
 .option-picker {
-  padding: 40rpx 32rpx 0;
-  background-color: #ffffff;
+  padding: 32rpx 24rpx 0;
+  background-color: #f2f3f5;
 
   &__title {
     display: block;
-    padding-bottom: 24rpx;
-    font-size: 32rpx;
-    font-weight: 600;
+    padding: 8rpx 8rpx 28rpx;
+    font-size: 36rpx;
+    font-weight: 700;
     color: #1f2329;
     text-align: center;
+    border-bottom: 2rpx solid #e8eaed;
+    margin-bottom: 24rpx;
+  }
+
+  &__card {
+    padding: 8rpx;
+    border-radius: 20rpx;
+    background-color: #ffffff;
   }
 
   &__list {
@@ -156,6 +199,7 @@ function onConfirm(): void {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: 20rpx;
     padding: 24rpx 20rpx;
     border-radius: 16rpx;
 
@@ -170,7 +214,6 @@ function onConfirm(): void {
     min-width: 0;
     flex-direction: column;
     gap: 4rpx;
-    margin-right: 20rpx;
   }
 
   &__row-label {
@@ -198,36 +241,52 @@ function onConfirm(): void {
     border-radius: 50%;
   }
 
+  /* 附加「新建」行：与列表卡同款白卡（图标 + 文案 + 右尖角） */
+  &__create {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    margin-top: 20rpx;
+    padding: 28rpx 32rpx;
+    border-radius: 20rpx;
+    background-color: #ffffff;
+  }
+
+  &__create-text {
+    flex: 1;
+    font-size: 28rpx;
+    color: #1f2329;
+  }
+
   &__footer {
     display: flex;
     gap: 20rpx;
     margin-top: 28rpx;
   }
 
+  /* 按键版式对齐设计图：等高圆角矩形 + 细描边，非胶囊 */
   &__btn {
     display: flex;
     flex: 1;
     align-items: center;
     justify-content: center;
-    height: 76rpx;
-    border-radius: 999rpx;
-    background-color: #f5f6f8;
+    height: 96rpx;
+    border: 2rpx solid #e5e6eb;
+    border-radius: 24rpx;
+    background-color: #ffffff;
 
     &--primary {
+      border-color: transparent;
       background-color: #2b8fff;
     }
-
-    /* 未选择或提交中：主按钮置灰（仍可点，由 onConfirm 拦截） */
-    &--muted {
-      background-color: #b9d6ff;
-    }
   }
 
   &__btn-text {
-    font-size: 28rpx;
+    font-size: 32rpx;
     color: #5c626b;
 
     &--primary {
+      font-weight: 600;
       color: #ffffff;
     }
   }
diff --git a/uniapp/youjiala/src/components/page-navbar/page-navbar.vue b/uniapp/youjiala/src/components/page-navbar/page-navbar.vue
index c52961d..40ffed6 100644
--- a/uniapp/youjiala/src/components/page-navbar/page-navbar.vue
+++ b/uniapp/youjiala/src/components/page-navbar/page-navbar.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /**
- * 文件页顶部导航栏：「返回箭头 + 居中标题 + 传输入口 + 右侧两个显隐开关」。
- * 根目录不显示返回（showBack=false）；标题两侧等宽占位保证真居中。
+ * 文件页顶部导航栏：「返回箭头 + 左对齐标题 …… 传输入口 + 右侧两个显隐开关」。
+ * 根目录不显示返回（showBack=false）；标题左对齐、操作图标右对齐，稳定的两端对齐结构
+ * （避免居中标题与右侧图标在图标增减时产生的不对称视觉负担）。
  * 右侧 search/grid 两个图标分别切换页面里搜索框与快捷入口区的显隐，
  * 点亮（蓝）= 对应区域显示，置灰 = 隐藏；排序按钮在 file-tab-filter 工具区。
  * 传输图标是跳转入口（带进行中计数角标），不参与显隐切换；字形用自绘 SVG（transferGlyph）。
@@ -67,10 +68,8 @@ const transferIcon = computed(() => transferGlyph(props.transferring ? TRANSFER_
 
 <template>
     <view class="page-navbar">
-        <view class="page-navbar__side page-navbar__side--left">
-            <view v-if="props.showBack" class="page-navbar__back" @tap="emit('back')">
-                <u-icon name="arrow-left" size="42" color="#1f2329" />
-            </view>
+        <view v-if="props.showBack" class="page-navbar__back" @tap="emit('back')">
+            <u-icon name="arrow-left" size="42" color="#1f2329" />
         </view>
         <text class="page-navbar__title">
             {{ props.title }}
@@ -107,20 +106,15 @@ const transferIcon = computed(() => transferGlyph(props.transferring ? TRANSFER_
     background-color: transparent;
 }
 
-/* 左右等宽占位（容纳右侧三个按钮）：任何状态下标题都严格居中 */
+/* 右侧操作图标组：宽度自适应内容、不参与标题伸缩，标题始终左对齐 */
 .page-navbar__side {
     display: flex;
     align-items: center;
     gap: 6rpx;
-    width: 208rpx;
     min-height: 64rpx;
     flex-shrink: 0;
 }
 
-.page-navbar__side--left {
-    justify-content: flex-start;
-}
-
 .page-navbar__side--right {
     justify-content: flex-end;
 }
@@ -169,7 +163,8 @@ const transferIcon = computed(() => transferGlyph(props.transferring ? TRANSFER_
 
 .page-navbar__title {
     flex: 1;
-    text-align: center;
+    min-width: 0;
+    text-align: left;
     font-size: 38rpx;
     font-weight: 600;
     color: #1f2329;
diff --git a/uniapp/youjiala/src/components/person-quick-create/person-quick-create.vue b/uniapp/youjiala/src/components/person-quick-create/person-quick-create.vue
index a4cb402..da87e53 100644
--- a/uniapp/youjiala/src/components/person-quick-create/person-quick-create.vue
+++ b/uniapp/youjiala/src/components/person-quick-create/person-quick-create.vue
@@ -10,6 +10,7 @@
 import type { FamilyPersonDisplayData } from "@/data/auto/familyPersonDisplayData";
 import { useLocale } from "uview-pro";
 import { computed, ref, watch } from "vue";
+import { useThemeTokens } from "@/composables";
 import { usePolicyOptions } from "@/composables/usePolicyOptions";
 import { FamilyPersonData } from "@/data/auto/familyPersonData";
 import { FamilyPersonDisplayData as FamilyPersonDisplayDataCls } from "@/data/auto/familyPersonDisplayData";
@@ -27,6 +28,8 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useLocale();
+// 确认钮纯色跟主题（渐变浅档白字发糊）
+const { primary } = useThemeTokens();
 const { getPolicyOptions, getPolicyText } = usePolicyOptions();
 
 const genderItems = computed(() => getPolicyOptions("GenderPolicy"));
@@ -104,31 +107,34 @@ async function onConfirm(): Promise<void> {
                 {{ props.title || t('FamilyPersonPage.quickCreateTitle') }}
             </text>
 
-            <view class="pqc__field">
-                <text class="pqc__label">
-                    {{ t("FamilyPersonPage.surname") }}<text class="pqc__required">*</text>
-                </text>
-                <u-input v-model="surname" :border="true" :maxlength="100"
-                    :placeholder="t('FamilyPersonPage.surnamePlaceholder')" />
-            </view>
-
-            <view class="pqc__field">
-                <text class="pqc__label">
-                    {{ t("FamilyPersonPage.genealogyName") }}<text class="pqc__required">*</text>
-                </text>
-                <u-input v-model="genealogyName" :border="true" :maxlength="100"
-                    :placeholder="t('FamilyPersonPage.genealogyNamePlaceholder')" />
-            </view>
-
-            <view class="pqc__field">
-                <text class="pqc__label">
-                    {{ t("FamilyPersonPage.gender") }}<text class="pqc__required">*</text>
-                </text>
-                <view class="pqc__picker" @tap="genderPickerVisible = true">
-                    <text :class="{ 'pqc__picker-empty': !genderLabel }">
-                        {{ genderLabel || t('FamilyPersonPage.genderPlaceholder') }}
+            <!-- 表单白卡（底部抽屉统一风格：灰底 + 白色圆角分块） -->
+            <view class="pqc__card">
+                <view class="pqc__field">
+                    <text class="pqc__label">
+                        {{ t("FamilyPersonPage.surname") }}<text class="pqc__required">*</text>
                     </text>
-                    <u-icon name="arrow-right" size="26" color="#c4c8cf" />
+                    <u-input v-model="surname" :border="true" :maxlength="100"
+                        :placeholder="t('FamilyPersonPage.surnamePlaceholder')" />
+                </view>
+
+                <view class="pqc__field">
+                    <text class="pqc__label">
+                        {{ t("FamilyPersonPage.genealogyName") }}<text class="pqc__required">*</text>
+                    </text>
+                    <u-input v-model="genealogyName" :border="true" :maxlength="100"
+                        :placeholder="t('FamilyPersonPage.genealogyNamePlaceholder')" />
+                </view>
+
+                <view class="pqc__field">
+                    <text class="pqc__label">
+                        {{ t("FamilyPersonPage.gender") }}<text class="pqc__required">*</text>
+                    </text>
+                    <view class="pqc__picker" @tap="genderPickerVisible = true">
+                        <text :class="{ 'pqc__picker-empty': !genderLabel }">
+                            {{ genderLabel || t('FamilyPersonPage.genderPlaceholder') }}
+                        </text>
+                        <u-icon name="arrow-right" size="26" color="#c4c8cf" />
+                    </view>
                 </view>
             </view>
 
@@ -138,7 +144,8 @@ async function onConfirm(): Promise<void> {
                         {{ t("AdminPage.cancelBut") }}
                     </text>
                 </view>
-                <view class="pqc__btn pqc__btn--primary" :class="{ 'pqc__btn--muted': saving }" @tap="onConfirm">
+                <view class="pqc__btn pqc__btn--primary" :class="{ 'pqc__btn--muted': saving }"
+                    :style="{ background: primary }" @tap="onConfirm">
                     <text class="pqc__btn-text pqc__btn-text--primary">
                         {{ saving ? t("AdminPage.savingTip") : t("AdminPage.confirmBut") }}
                     </text>
@@ -154,9 +161,10 @@ async function onConfirm(): Promise<void> {
 </template>
 
 <style lang="scss" scoped>
+/* 底部抽屉统一风格：浅灰面板底 + 白色圆角卡分块 */
 .pqc {
-    padding: 40rpx 32rpx 0;
-    background-color: #ffffff;
+    padding: 32rpx 24rpx 0;
+    background-color: #f2f3f5;
 
     &__title {
         display: block;
@@ -167,6 +175,12 @@ async function onConfirm(): Promise<void> {
         text-align: center;
     }
 
+    &__card {
+        padding: 28rpx 28rpx 4rpx;
+        border-radius: 20rpx;
+        background-color: #ffffff;
+    }
+
     &__field {
         margin-bottom: 24rpx;
     }
@@ -203,32 +217,37 @@ async function onConfirm(): Promise<void> {
     &__footer {
         display: flex;
         gap: 20rpx;
-        margin-top: 8rpx;
+        margin-top: 28rpx;
     }
 
+    /* 底部按键统一规格（同 option-picker）：等高圆角矩形 + 细描边，非胶囊 */
     &__btn {
         display: flex;
         flex: 1;
         align-items: center;
         justify-content: center;
-        height: 76rpx;
-        border-radius: 999rpx;
-        background-color: #f5f6f8;
+        height: 96rpx;
+        border: 2rpx solid #e5e6eb;
+        border-radius: 24rpx;
+        background-color: #ffffff;
 
         &--primary {
+            border-color: transparent;
             background-color: #2b8fff;
         }
 
+        /* 提交中：纯色 + 透明度置灰（色相不脱节） */
         &--muted {
-            background-color: #b9d6ff;
+            opacity: 0.45;
         }
     }
 
     &__btn-text {
-        font-size: 28rpx;
+        font-size: 32rpx;
         color: #5c626b;
 
         &--primary {
+            font-weight: 600;
             color: #ffffff;
         }
     }
diff --git a/uniapp/youjiala/src/components/search-input/search-input.vue b/uniapp/youjiala/src/components/search-input/search-input.vue
index b070de7..96166a3 100644
--- a/uniapp/youjiala/src/components/search-input/search-input.vue
+++ b/uniapp/youjiala/src/components/search-input/search-input.vue
@@ -57,7 +57,7 @@ function onClear(): void {
 </template>
 
 <style lang="scss" scoped>
-/* 分区卡片风格：外层透明露渐变底，胶囊内部浅白色、留描边定形 */
+/* 卡片表面统一风格：白底 + 细边框 + 柔和投影（替代半透明白叠加的灰浊感），圆角矩形（对齐设计图，非全胶囊） */
 .search-input {
   padding: 20rpx 24rpx 0;
 }
@@ -66,10 +66,11 @@ function onClear(): void {
   display: flex;
   align-items: center;
   gap: 16rpx;
-  padding: 10rpx 28rpx;
-  border: 2rpx solid rgba(31, 35, 41, 0.08);
-  border-radius: 399rpx;
-  background-color: rgba(255, 255, 255, 0.55);
+  padding: 14rpx 28rpx;
+  border: 2rpx solid rgba(31, 35, 41, 0.06);
+  border-radius: 24rpx;
+  background-color: #ffffff;
+  box-shadow: 0 6rpx 18rpx rgba(31, 35, 41, 0.05);
 }
 
 .search-input__field {
diff --git a/uniapp/youjiala/src/composables/useThemeGradient.ts b/uniapp/youjiala/src/composables/useThemeGradient.ts
index 8d9d28b..15c1865 100644
--- a/uniapp/youjiala/src/composables/useThemeGradient.ts
+++ b/uniapp/youjiala/src/composables/useThemeGradient.ts
@@ -33,16 +33,65 @@ export function mixWithWhite(hex: string, ratio: number): string {
   return `rgb(${mix(channel(0))}, ${mix(channel(2))}, ${mix(channel(4))})`;
 }
 
+/** 主题 primary 转 rgba()（光晕/投影等需要带透明度的场合） */
+export function rgbaOf(hex: string, alpha: number): string {
+  const n = hex.replace("#", "");
+  const channel = (start: number) =>
+    Number.parseInt(n.slice(start, start + 2), 16);
+  return `rgba(${channel(0)}, ${channel(2)}, ${channel(4)}, ${alpha})`;
+}
+
 export function useThemeGradient(options: ThemeGradientOptions = {}) {
   const { top = 0.25, middle = 0.14, bottom = 0.05 } = options;
   // currentTheme 是包级单例 ref：任意页 setTheme，这里即时重算
   const { currentTheme } = useTheme();
 
+  const primary = computed(
+    () => currentTheme.value?.color?.primary ?? FALLBACK_PRIMARY,
+  );
+
   /** 页面底渐变（180deg 纵向），直接绑到内联 style 的 background */
   const themeBackground = computed(() => {
-    const primary = currentTheme.value?.color?.primary ?? FALLBACK_PRIMARY;
-    return `linear-gradient(180deg, ${mixWithWhite(primary, top)} 0%, ${mixWithWhite(primary, middle)} 40%, ${mixWithWhite(primary, bottom)} 100%)`;
+    return `linear-gradient(180deg, ${mixWithWhite(primary.value, top)} 0%, ${mixWithWhite(primary.value, middle)} 40%, ${mixWithWhite(primary.value, bottom)} 100%)`;
   });
 
-  return { currentTheme, themeBackground };
+  /**
+   * 顶部光晕底（多层背景）：主题色径向光晕从顶端洒下、自然过渡到近白内容区，
+   * 替代旧三段线性渐变的「整页铺色」，视觉层级更清晰；随主题即时联动。
+   */
+  const themeGlowBackground = computed(() => {
+    const p = primary.value;
+    return [
+      `radial-gradient(140% 68% at 50% -12%, ${mixWithWhite(p, 0.34)} 0%, ${mixWithWhite(p, 0.14)} 46%, ${rgbaOf(p, 0)} 72%)`,
+      `linear-gradient(180deg, ${mixWithWhite(p, 0.1)} 0%, ${mixWithWhite(p, 0.03)} 34%, #f6f7f9 62%)`,
+    ].join(", ");
+  });
+
+  return { currentTheme, primary, themeBackground, themeGlowBackground };
+}
+
+/**
+ * 主题强调色 token：把 primary 派生成渐变面/浅色底/透明投影三件套，
+ * 供文件夹图形、悬浮「+」、卡片选中态等共用，保证「主题统一」而非各自硬编码蓝。
+ * 用法：const { accentGradient, accentSoft, accentShadow } = useThemeTokens();
+ */
+export function useThemeTokens() {
+  const { currentTheme } = useTheme();
+  const primary = computed(
+    () => currentTheme.value?.color?.primary ?? FALLBACK_PRIMARY,
+  );
+
+  /** 主渐变面（135deg 浅→浓）：文件夹主体、悬浮按钮等强调面 */
+  const accentGradient = computed(
+    () =>
+      `linear-gradient(135deg, ${mixWithWhite(primary.value, 0.55)} 0%, ${primary.value} 100%)`,
+  );
+
+  /** 强调色浅底：卡片选中态等弱强调面 */
+  const accentSoft = computed(() => mixWithWhite(primary.value, 0.1));
+
+  /** 强调色透明投影：跟随强调色的柔和阴影 */
+  const accentShadow = computed(() => rgbaOf(primary.value, 0.3));
+
+  return { currentTheme, primary, accentGradient, accentSoft, accentShadow };
 }
diff --git a/uniapp/youjiala/src/locale/lang/en-US.json b/uniapp/youjiala/src/locale/lang/en-US.json
index 3e948af..0099488 100644
--- a/uniapp/youjiala/src/locale/lang/en-US.json
+++ b/uniapp/youjiala/src/locale/lang/en-US.json
@@ -84,6 +84,7 @@
     "personSearch": "Member Search",
     "pedigreeChart": "Pedigree Chart",
     "ancestryChart": "Ancestry Chart",
+    "cancel": "Cancel",
     "chartEmpty": "No family tree data",
     "applyManage": "Apply for Manager",
     "requestSentTip": "Request submitted, waiting for approval",
@@ -334,7 +335,8 @@
     "flow": "Operation Steps",
     "features": "Features & Icons",
     "tip": "Tip",
-    "empty": "Nothing to preview yet. Fill in the introduction, steps, or reference a feature group first."
+    "empty": "Nothing to preview yet. Fill in the introduction, steps, or reference a feature group first.",
+    "cancel": "Cancel"
   },
   "HelpFeaturePage": {
     "title": "Help Features",
@@ -360,7 +362,7 @@
   },
   "FilePage": {
     "title": "Files",
-    "searchPlaceholder": "Search",
+    "searchPlaceholder": "Search files / folders",
     "album": "Family Album",
     "musicHall": "Music Hall",
     "videoHall": "Video Hall",
@@ -378,6 +380,10 @@
     "selectedCount": "{count} selected",
     "selectAll": "Select All",
     "unselectAll": "Unselect All",
+    "actionSelect": "Select",
+    "visPrivate": "Private",
+    "visGroup": "Group",
+    "visPublic": "Public",
     "actionRename": "Rename",
     "actionMove": "Move",
     "actionDownload": "Download",
@@ -427,6 +433,12 @@
     "publishPickPhoto": "Choose a photo album",
     "publishPickAudio": "Choose an audio album",
     "publishPickVideo": "Choose a video album",
+    "publishConfirmPhoto": "Publish Album",
+    "publishConfirmAudio": "Publish Music Album",
+    "publishConfirmVideo": "Publish Video Album",
+    "publishCreatePhoto": "New Album",
+    "publishCreateAudio": "New Music Set",
+    "publishCreateVideo": "New Video Set",
     "publishDone": "Published",
     "downloadNoFile": "No downloadable files",
     "downloadDone": "Downloaded",
@@ -537,6 +549,7 @@
     "albumName": "Album Name",
     "albumDesc": "Album Description",
     "autoNo": "Generated on save",
+    "autoNoHint": " (auto-generated, cannot be modified)",
     "publicLabel": "Public to everyone",
     "defaultLabel": "Set as default",
     "nameRequired": "Please enter an album name",
diff --git a/uniapp/youjiala/src/locale/lang/zh-CN.json b/uniapp/youjiala/src/locale/lang/zh-CN.json
index 0891337..c863bcb 100644
--- a/uniapp/youjiala/src/locale/lang/zh-CN.json
+++ b/uniapp/youjiala/src/locale/lang/zh-CN.json
@@ -84,6 +84,7 @@
     "personSearch": "族员搜索",
     "pedigreeChart": "谱系图",
     "ancestryChart": "祖谱系图",
+    "cancel": "取消",
     "chartEmpty": "暂无族谱数据",
     "applyManage": "申请管理",
     "requestSentTip": "申请已提交，等待管理员审批",
@@ -334,7 +335,8 @@
     "flow": "操作流程",
     "features": "功能点与图标说明",
     "tip": "提示",
-    "empty": "还没有可预览的帮助内容，请先填写功能说明、操作步骤或引用功能点组。"
+    "empty": "还没有可预览的帮助内容，请先填写功能说明、操作步骤或引用功能点组。",
+    "cancel": "取消"
   },
   "HelpFeaturePage": {
     "title": "帮助功能点查询",
@@ -360,7 +362,7 @@
   },
   "FilePage": {
     "title": "文件",
-    "searchPlaceholder": "搜索",
+    "searchPlaceholder": "搜索文件 / 文件夹",
     "album": "有家相册",
     "musicHall": "音乐厅",
     "videoHall": "影视厅",
@@ -378,6 +380,10 @@
     "selectedCount": "已选 {count} 项",
     "selectAll": "全选",
     "unselectAll": "取消全选",
+    "actionSelect": "多选",
+    "visPrivate": "私有",
+    "visGroup": "群组",
+    "visPublic": "公开",
     "actionRename": "重命名",
     "actionMove": "移动",
     "actionDownload": "下载",
@@ -427,6 +433,12 @@
     "publishPickPhoto": "选择相册",
     "publishPickAudio": "选择音乐集",
     "publishPickVideo": "选择影视集",
+    "publishConfirmPhoto": "发布相册",
+    "publishConfirmAudio": "发布音乐专辑",
+    "publishConfirmVideo": "发布视频专辑",
+    "publishCreatePhoto": "新建相册",
+    "publishCreateAudio": "新建音乐集",
+    "publishCreateVideo": "新建影视集",
     "publishDone": "发布成功",
     "downloadNoFile": "没有可下载的文件",
     "downloadDone": "下载完成",
@@ -537,6 +549,7 @@
     "albumName": "专辑名称",
     "albumDesc": "专辑描述",
     "autoNo": "保存后由系统生成",
+    "autoNoHint": "（系统自动生成，不可修改）",
     "publicLabel": "对所有人公开",
     "defaultLabel": "设为默认专辑",
     "nameRequired": "请输入专辑名称",
diff --git a/uniapp/youjiala/src/pages/share-hall/share-hall.vue b/uniapp/youjiala/src/pages/share-hall/share-hall.vue
index 761f2b5..0be53fa 100644
--- a/uniapp/youjiala/src/pages/share-hall/share-hall.vue
+++ b/uniapp/youjiala/src/pages/share-hall/share-hall.vue
@@ -370,9 +370,8 @@ async function onCreateFolder(name: string): Promise<void> {
     <app-page :hide-nav="true">
         <view class="hall-page" :style="{ background: themeBackground }">
             <view class="hall-page__head">
-                <!-- 导航：标题随层级变化；返回箭头常显（顶层退出回文件页，组内退层）；搜索图标仅组内；传输/快捷入口开关关闭 -->
-                <page-navbar :title="navTitle" :show-back="true" :search-on="showSearch" :show-transfer="false"
-                    :show-quick-toggle="false" :show-search-toggle="inGroup" @back="onBack"
+                <!-- 导航：标题随层级变化；返回箭头常显（顶层退出回文件页，组内退层）；搜索图标仅组内 -->
+                <hero-navbar :title="navTitle" :show-search="inGroup" :search-on="showSearch" @back="onBack"
                     @toggle-search="onToggleSearch" />
                 <!-- 组内才有的路径条：两层以上显示（组根不显示，与文件页惯例一致） -->
                 <view v-if="inGroup && pathStack.length > 1" class="hall-page__crumb">
diff --git a/uniapp/youjiala/src/pages/tab/file.vue b/uniapp/youjiala/src/pages/tab/file.vue
index 41faa52..a67f2c6 100644
--- a/uniapp/youjiala/src/pages/tab/file.vue
+++ b/uniapp/youjiala/src/pages/tab/file.vue
@@ -2,7 +2,7 @@
 /**
  * 底部导航「文件」页：按截图拆解为独立组件（components/ 下各自一个 vue 文件），
  * 页面只持有状态与数据，经 props 单向下发、事件（emit）上报，组件之间不互相引用：
- *   page-navbar      顶部导航（居中标题；仅子目录态显示返回箭头）
+ *   page-navbar      顶部导航（左对齐标题 + 右对齐操作图标；仅子目录态显示返回箭头）
  *   file-breadcrumb  目录面包屑（仅子目录态：左起排列，放不下折成 根+…+尾部段）
  *   search-input     搜索框（v-model 即时过滤，确认键触发服务端搜索）
  *   quick-entry      快捷功能入口（横向滚动图标组）
@@ -32,6 +32,7 @@ import dmsFileService from "@/service/master/dmsFileService";
 import publishAudioService from "@/service/master/publishAudioService";
 import publishPhotoService from "@/service/master/publishPhotoService";
 import publishVideoService from "@/service/master/publishVideoService";
+import { useMediaIntentStore } from "@/stores/mediaIntent";
 import { useUploadQueueStore } from "@/stores/uploadQueue";
 import { chooseFiles } from "@/utils/chooseFiles";
 import { fetchFileBytes, saveFileBytes, toPlayableUrl } from "@/utils/dmsBytes";
@@ -40,13 +41,16 @@ import { transferGlyph } from "@/utils/transferGlyph";
 
 const { t } = useLocale();
 
-// 页面底渐变跟随主题（派生逻辑在 composables/useThemeGradient，多页共用）
-const { themeBackground } = useThemeGradient();
+// 页面底跟随主题（派生逻辑在 composables/useThemeGradient，多页共用）：
+// 顶部主题色光晕 → 自然过渡到近白内容区，替代整页铺色的灰浊感
+const { themeGlowBackground } = useThemeGradient();
 
 const { files, records, loading, errorText, pathStack, atRoot, init, openTrail, retry, openFolder, back, goTo, search } = useDmsFiles();
 
 // 上传队列（全局 store）：入队在本页、胶囊读它的进行中计数、守卫回调消费它的面包屑导航请求
 const uploadQueue = useUploadQueueStore();
+// 跨 tab 意图通道：发布面板「新建相册」→ reLaunch 去媒体页自动进创建态
+const mediaIntent = useMediaIntentStore();
 
 // 首次显示拉根目录，之后每次回到页面只刷新当前目录（重进 tab 不该丢位置重新拉全链）；
 // 回页末尾消费传输页的面包屑导航请求（reLaunch 重建后恢复到目标目录）
@@ -675,6 +679,41 @@ const publishTitle = computed(() => {
   return publishKind.value === "audio" ? t("FilePage.publishPickAudio") : t("FilePage.publishPickPhoto");
 });
 
+/** 确认键按类型叫「发布相册/发布音乐专辑/发布视频专辑」，不再笼统叫「创建」 */
+const publishConfirmText = computed(() => {
+  if (publishKind.value === "video") {
+    return t("FilePage.publishConfirmVideo");
+  }
+  return publishKind.value === "audio" ? t("FilePage.publishConfirmAudio") : t("FilePage.publishConfirmPhoto");
+});
+
+/** 附加「新建」行文案：与确认键同类型口径 */
+const publishCreateText = computed(() => {
+  if (publishKind.value === "video") {
+    return t("FilePage.publishCreateVideo");
+  }
+  return publishKind.value === "audio" ? t("FilePage.publishCreateAudio") : t("FilePage.publishCreatePhoto");
+});
+
+/** 专辑行首图标：与媒体页分段图标同口径 */
+const publishRowIcon = computed(() =>
+  publishKind.value === "video" ? "play-circle-fill" : publishKind.value === "audio" ? "volume" : "photo",
+);
+
+/** 「新建相册」行：关弹层 → 登记创建意图 → 切到媒体 tab（onShow 消费后进创建态） */
+function goCreateAlbum(): void {
+  publishVisible.value = false;
+  const kindMap: Record<"image" | "video" | "audio", "photo" | "video" | "audio"> = {
+    image: "photo",
+    video: "video",
+    audio: "audio",
+  };
+  mediaIntent.requestCreate(kindMap[publishKind.value]);
+  // 项目无原生 tabBar（自定义 app-tabbar），switchTab 会报 can not switch to no-tabBar page，
+  // 切 tab 与 app-tabbar.onChange 同套路用 reLaunch；意图由媒体页首显回调消费
+  uni.reLaunch({ url: pageUrl("mediaTab") });
+}
+
 async function actionPublish(targets: FileItem[]): Promise<void> {
   const picked = targets.filter(f => f.kind !== "folder");
   if (!picked.length) {
@@ -735,7 +774,7 @@ async function actionPublish(targets: FileItem[]): Promise<void> {
         if (hasName) {
           parts.push(code);
         }
-        return { key: code, label, sub: parts.join(" · ") };
+        return { key: code, label, sub: parts.join(" · "), icon: publishRowIcon.value };
       });
   }
   catch (error: any) {
@@ -886,7 +925,7 @@ const transferIconWhite = transferGlyph("#ffffff");
        弹层 z-index 再高也压不住它，直接隐藏最干净（主流云盘同款交互） -->
   <app-page :hide-nav="true"
     :show-tabbar="atRoot && !actionFile && !selectMode && !folderDialogVisible && !renameVisible && !moveVisible && !shareVisible && !publishVisible">
-    <view class="file-page" :style="{ background: themeBackground }">
+    <view class="file-page" :style="{ background: themeGlowBackground }">
       <!-- 上半屏整体固定，只有文件列表所在的 scroll-view 内部滚动（整页不滚） -->
       <view class="file-page__head">
         <page-navbar :title="navTitle" :show-back="!atRoot" :search-on="showSearch" :quick-on="showQuick"
@@ -976,9 +1015,10 @@ const transferIconWhite = transferGlyph("#ffffff");
       <!-- 共享家人：共享大厅式抽屉（群组卡→逐级下钻→「共享到此」），多选文件一次批量共享 -->
       <folder-share-picker :visible="shareVisible" :selected-count="shareTargets.length" @close="shareVisible = false"
         @confirm="onShareConfirm" />
-      <!-- 发布：选专辑 -->
+      <!-- 发布：选专辑（确认键按类型叫「发布相册」等；附「新建相册」行跳媒体页创建态） -->
       <option-picker :visible="publishVisible" :title="publishTitle" :items="publishItems" :loading="publishLoading"
-        :empty-text="t('FilePage.pickerEmpty')" @close="publishVisible = false" @confirm="onPublishConfirm" />
+        :empty-text="t('FilePage.pickerEmpty')" :confirm-text="publishConfirmText" :create-text="publishCreateText"
+        @close="publishVisible = false" @create="goCreateAlbum" @confirm="onPublishConfirm" />
       <!-- 多选底部操作栏：常驻非模态（无遮罩），勾选与动作可交替进行；
            动作集是旧系统多选子集——共享/发布按同媒体类型条件，重命名/移动仅单选 -->
       <view v-if="selectMode" class="file-page__actions">
diff --git a/uniapp/youjiala/src/pages/tab/media.vue b/uniapp/youjiala/src/pages/tab/media.vue
index 198fd33..1ed0939 100644
--- a/uniapp/youjiala/src/pages/tab/media.vue
+++ b/uniapp/youjiala/src/pages/tab/media.vue
@@ -12,54 +12,72 @@ import type { PublishAlbumDetail, PublishAlbumEntity, PublishKind } from "@/comp
 import { useLocale } from "uview-pro";
 import { computed, ref } from "vue";
 import {
-    useAuthGuard,
-    useFamilyGroups,
-    usePublishAlbums,
-    useThemeGradient,
+  useAuthGuard,
+  useFamilyGroups,
+  usePublishAlbums,
+  useThemeGradient,
+  useThemeTokens,
 } from "@/composables";
 import { pageUrl } from "@/router/routes";
-import { useLoginProfileStore } from "@/stores";
+import { useLoginProfileStore, useMediaIntentStore } from "@/stores";
 
 const { t } = useLocale();
 const { themeBackground } = useThemeGradient();
+// 主题派生色经 CSS 变量下发：分段选中/头像/徽章/主按钮全部跟主题（不再硬编码蓝）
+const { primary, accentGradient, accentSoft, accentShadow } = useThemeTokens();
+const themeVars = computed(() => ({
+  "--fg-primary": primary.value,
+  "--fg-gradient": accentGradient.value,
+  "--fg-soft": accentSoft.value,
+  "--fg-shadow": accentShadow.value,
+}));
 const profile = useLoginProfileStore();
 
 const {
-    kind,
-    setKind,
-    list,
-    loading,
-    errorText,
-    album,
-    details,
-    groups,
-    inDetail,
-    creating,
-    isEdit,
-    canAmend,
-    canDelete,
-    setMyUser,
-    loadList,
-    openAlbum,
-    exitDetail,
-    startCreate,
-    startEdit,
-    cancelEdit,
-    moveDetail,
-    removeDetail,
-    addGroup,
-    removeGroup,
-    save,
-    dissolve,
-    formatDate,
+  kind,
+  setKind,
+  list,
+  loading,
+  errorText,
+  album,
+  details,
+  groups,
+  inDetail,
+  creating,
+  isEdit,
+  canAmend,
+  canDelete,
+  setMyUser,
+  loadList,
+  openAlbum,
+  exitDetail,
+  startCreate,
+  startEdit,
+  cancelEdit,
+  moveDetail,
+  removeDetail,
+  addGroup,
+  removeGroup,
+  save,
+  dissolve,
+  formatDate,
 } = usePublishAlbums();
 
 // 公开群组选择器复用「共享」数据源：拉我可见的群做候选
 const familyGroups = useFamilyGroups();
 
+// 跨 tab 创建意图：文件页发布面板点「新建相册」reLaunch 过来时，自动进对应分段的创建态
+const mediaIntent = useMediaIntentStore();
+
 useAuthGuard(async () => {
-    setMyUser(profile.username);
-    await loadList();
+  setMyUser(profile.username);
+  await loadList();
+  const wantCreate = mediaIntent.takeCreate();
+  if (wantCreate) {
+    // setKind 内部会按新分段重拉列表，必须等它落定再进取态（否则 creating 被它同步复位）
+    await setKind(wantCreate);
+    startCreate();
+  }
 });
 
 const keyword = ref("");
@@ -68,933 +86,1009 @@ const busy = ref(false);
 
 /** 分段配置：kind -> 文案 key + 图标 */
 const SEGMENTS: { key: PublishKind; labelKey: string; icon: string }[] = [
-    { key: "photo", labelKey: "MediaPage.segPhoto", icon: "photo" },
-    { key: "audio", labelKey: "MediaPage.segAudio", icon: "volume" },
-    { key: "video", labelKey: "MediaPage.segVideo", icon: "play-circle-fill" },
+  { key: "photo", labelKey: "MediaPage.segPhoto", icon: "photo" },
+  { key: "audio", labelKey: "MediaPage.segAudio", icon: "volume" },
+  { key: "video", labelKey: "MediaPage.segVideo", icon: "play-circle-fill" },
 ];
 
 const navTitle = computed(() => {
-    if (creating.value) {
-        return t("MediaPage.createTitle");
-    }
-    if (inDetail.value) {
-        return album.value?.PublishLocalName || segmentLabel(kind.value);
-    }
-    return t("MediaPage.title");
+  if (creating.value) {
+    return t("MediaPage.createTitle");
+  }
+  if (inDetail.value) {
+    // 详情头显示集合类目（相册/音乐/影视）而非专辑名——专辑名已在页内头卡上
+    return segmentLabel(kind.value);
+  }
+  return t("MediaPage.title");
 });
 
 function segmentLabel(k: PublishKind): string {
-    return t(SEGMENTS.find(s => s.key === k)?.labelKey ?? "MediaPage.title");
+  return t(SEGMENTS.find(s => s.key === k)?.labelKey ?? "MediaPage.title");
 }
 
 function kindIcon(k: PublishKind): string {
-    return SEGMENTS.find(s => s.key === k)?.icon ?? "photo";
+  return SEGMENTS.find(s => s.key === k)?.icon ?? "photo";
+}
+
+/** 三张分区卡（专辑信息/明细/群组）折叠态：默认全展开，点标题行切换 */
+const folded = ref<Record<"info" | "details" | "groups", boolean>>({
+  info: false,
+  details: false,
+  groups: false,
+});
+
+function toggleFold(key: "info" | "details" | "groups"): void {
+  folded.value[key] = !folded.value[key];
 }
 
 function albumDesc(entity: PublishAlbumEntity): string {
-    return entity.Notice || t("MediaPage.noDesc");
+  return entity.Notice || t("MediaPage.noDesc");
 }
 
 /** 明细封面地址：photo 用缩略图/原图，audio/video 用 Pic */
 function coverOf(detail: PublishAlbumDetail): string {
-    return detail.FormattedPic || detail.Pic || detail.FileName || "";
+  return detail.FormattedPic || detail.Pic || detail.FileName || "";
 }
 
 /** 加载失败的封面（按 DetailId 记录）：图片地址取不到时回落成占位图标，避免留白 */
 const coverFailed = ref<Record<number, boolean>>({});
 function onCoverError(detailId: number): void {
-    if (detailId == null) {
-        return;
-    }
-    coverFailed.value = { ...coverFailed.value, [detailId]: true };
+  if (detailId == null) {
+    return;
+  }
+  coverFailed.value = { ...coverFailed.value, [detailId]: true };
 }
 
 function toast(title: string): void {
-    uni.showToast({ title, icon: "none" });
+  uni.showToast({ title, icon: "none" });
 }
 
 function confirmDialog(title: string, content: string): Promise<boolean> {
-    return new Promise((resolve) => {
-        uni.showModal({
-            title,
-            content,
-            success: res => resolve(!!res.confirm),
-            fail: () => resolve(false),
-        });
+  return new Promise((resolve) => {
+    uni.showModal({
+      title,
+      content,
+      success: res => resolve(!!res.confirm),
+      fail: () => resolve(false),
     });
+  });
 }
 
 async function withBusy(task: () => Promise<void>, tip?: string): Promise<void> {
-    if (busy.value) {
-        return;
-    }
-    busy.value = true;
-    uni.showLoading({ title: tip || t("FilePage.pleaseWait"), mask: true });
-    try {
-        await task();
-    }
-    catch (error: any) {
-        toast(error?.message || t("FilePage.actionFailed"));
-    }
-    finally {
-        uni.hideLoading();
-        busy.value = false;
-    }
+  if (busy.value) {
+    return;
+  }
+  busy.value = true;
+  uni.showLoading({ title: tip || t("FilePage.pleaseWait"), mask: true });
+  try {
+    await task();
+  }
+  catch (error: any) {
+    toast(error?.message || t("FilePage.actionFailed"));
+  }
+  finally {
+    uni.hideLoading();
+    busy.value = false;
+  }
 }
 
 // ===== 分段切换 =====
 async function onKindChange(next: PublishKind): Promise<void> {
-    if (kind.value === next) {
-        return;
-    }
-    keyword.value = "";
-    showSearch.value = false;
-    await withBusy(async () => {
-        await setKind(next);
-    });
+  if (kind.value === next) {
+    return;
+  }
+  keyword.value = "";
+  showSearch.value = false;
+  await withBusy(async () => {
+    await setKind(next);
+  });
 }
 
 // ===== 列表态 =====
 function onToggleSearch(): void {
-    showSearch.value = !showSearch.value;
+  showSearch.value = !showSearch.value;
 }
 
 async function onSearch(): Promise<void> {
-    await loadList(keyword.value);
+  await loadList(keyword.value);
 }
 
 async function onOpenAlbum(entity: PublishAlbumEntity): Promise<void> {
-    keyword.value = "";
-    coverFailed.value = {};
-    await withBusy(async () => {
-        await openAlbum(entity.PublishName);
-    });
-    if (errorText.value && !inDetail.value) {
-        toast(errorText.value);
-    }
+  keyword.value = "";
+  coverFailed.value = {};
+  await withBusy(async () => {
+    await openAlbum(entity.PublishName);
+  });
+  if (errorText.value && !inDetail.value) {
+    toast(errorText.value);
+  }
 }
 
 function onCreateAlbum(): void {
-    startCreate();
+  startCreate();
 }
 
 // ===== 详情：返回 / 编辑 / 保存 / 删除 / 展览 =====
 async function onBack(): Promise<void> {
-    if (!inDetail.value) {
-        if (getCurrentPages().length > 1) {
-            uni.navigateBack();
-        }
-        return;
+  if (!inDetail.value) {
+    if (getCurrentPages().length > 1) {
+      uni.navigateBack();
     }
-    await exitDetail();
+    return;
+  }
+  await exitDetail();
 }
 
 async function onRetry(): Promise<void> {
-    await loadList(keyword.value);
+  await loadList(keyword.value);
 }
 
 function onAmend(): void {
-    startEdit();
+  startEdit();
 }
 
 async function onCancelEdit(): Promise<void> {
-    await cancelEdit();
+  await cancelEdit();
 }
 
 async function onSave(): Promise<void> {
-    if (!(album.value?.PublishLocalName || "").trim()) {
-        toast(t("MediaPage.nameRequired"));
-        return;
-    }
-    const wasCreating = creating.value;
-    await withBusy(async () => {
-        await save();
-        toast(wasCreating ? t("MediaPage.createDone") : t("MediaPage.saveDone"));
-    });
+  if (!(album.value?.PublishLocalName || "").trim()) {
+    toast(t("MediaPage.nameRequired"));
+    return;
+  }
+  const wasCreating = creating.value;
+  await withBusy(async () => {
+    await save();
+    toast(wasCreating ? t("MediaPage.createDone") : t("MediaPage.saveDone"));
+  });
 }
 
 async function onDelete(): Promise<void> {
-    const ok = await confirmDialog(
-        t("MediaPage.delete"),
-        t("MediaPage.deleteConfirm").replace("{name}", album.value?.PublishLocalName || ""),
-    );
-    if (!ok) {
-        return;
-    }
-    await withBusy(async () => {
-        await dissolve();
-        toast(t("MediaPage.deleteDone"));
-    });
+  const ok = await confirmDialog(
+    t("MediaPage.delete"),
+    t("MediaPage.deleteConfirm").replace("{name}", album.value?.PublishLocalName || ""),
+  );
+  if (!ok) {
+    return;
+  }
+  await withBusy(async () => {
+    await dissolve();
+    toast(t("MediaPage.deleteDone"));
+  });
 }
 
 /** 展览：把当前 kind + 专辑编号映射到对应播放器页（mode=view，非 list） */
 function onExhibit(): void {
-    const pageName = kind.value === "photo"
-        ? "photoShow"
-        : kind.value === "audio" ? "audioHall" : "videoHall";
-    const name = album.value?.PublishName || "";
-    uni.navigateTo({
-        url: `${pageUrl(pageName)}?mode=view&key=${encodeURIComponent(name)}`,
-        fail: (err: any) => toast(err?.errMsg || t("FilePage.actionFailed")),
-    });
+  const pageName = kind.value === "photo"
+    ? "photoShow"
+    : kind.value === "audio" ? "audioHall" : "videoHall";
+  const name = album.value?.PublishName || "";
+  uni.navigateTo({
+    url: `${pageUrl(pageName)}?mode=view&key=${encodeURIComponent(name)}`,
+    fail: (err: any) => toast(err?.errMsg || t("FilePage.actionFailed")),
+  });
 }
 
 // ===== 明细：上移 / 下移 / 删除 =====
 function onMoveDetail(index: number, dir: -1 | 1): void {
-    moveDetail(index, dir);
+  moveDetail(index, dir);
 }
 
 async function onRemoveDetail(detailId: number): Promise<void> {
-    const ok = await confirmDialog(t("MediaPage.delete"), t("MediaPage.deleteDetailConfirm"));
-    if (!ok) {
-        return;
-    }
-    removeDetail(detailId);
+  const ok = await confirmDialog(t("MediaPage.delete"), t("MediaPage.deleteDetailConfirm"));
+  if (!ok) {
+    return;
+  }
+  removeDetail(detailId);
 }
 
 // ===== 公开群组：选择器 / 删除 =====
 async function onAddGroup(): Promise<void> {
-    await withBusy(async () => {
-        await familyGroups.loadList();
-    });
-    const candidates = familyGroups.groups.value.filter(
-        g => !groups.value.some(row => row.FamilyName === g.FamilyName),
-    );
-    if (!candidates.length) {
-        toast(t("MediaPage.noGroupsAvailable"));
-        return;
-    }
-    uni.showActionSheet({
-        itemList: candidates.map(g => g.FamilyLocalName || g.FamilyName),
-        success: (res) => {
-            const pick = candidates[res.tapIndex];
-            addGroup(pick.FamilyName, pick.FamilyLocalName, pick.Notice || "");
-        },
-    });
+  await withBusy(async () => {
+    await familyGroups.loadList();
+  });
+  const candidates = familyGroups.groups.value.filter(
+    g => !groups.value.some(row => row.FamilyName === g.FamilyName),
+  );
+  if (!candidates.length) {
+    toast(t("MediaPage.noGroupsAvailable"));
+    return;
+  }
+  uni.showActionSheet({
+    itemList: candidates.map(g => g.FamilyLocalName || g.FamilyName),
+    success: (res) => {
+      const pick = candidates[res.tapIndex];
+      addGroup(pick.FamilyName, pick.FamilyLocalName, pick.Notice || "");
+    },
+  });
 }
 
 function onRemoveGroup(familyName: string): void {
-    removeGroup(familyName);
+  removeGroup(familyName);
 }
 </script>
 
 <template>
-    <!-- 列表态显示 tabbar，进详情收起 -->
-    <app-page :hide-nav="true" :show-tabbar="!inDetail">
-        <view class="media-page" :style="{ background: themeBackground }">
-            <!-- ===== 列表态：分段 + 专辑卡片 ===== -->
-            <view v-if="!inDetail" class="media-page__body">
-                <view class="media-page__head">
-                    <page-navbar :title="t('MediaPage.title')" :show-back="false" :search-on="showSearch"
-                        :show-transfer="false" :show-quick-toggle="false" @back="onBack"
-                        @toggle-search="onToggleSearch" />
-                    <!-- 分段：相册 / 音乐 / 影视 -->
-                    <view class="seg-bar">
-                        <view v-for="seg in SEGMENTS" :key="seg.key" class="seg-bar__item"
-                            :class="{ 'is-active': kind === seg.key }" @tap="onKindChange(seg.key)">
-                            <u-icon :name="seg.icon" size="30" :color="kind === seg.key ? '#2b8fff' : '#8f959e'" />
-                            <text class="seg-bar__text">{{ t(seg.labelKey) }}</text>
-                        </view>
-                    </view>
-                    <search-input v-if="showSearch" v-model="keyword" :placeholder="t('FilePage.searchPlaceholder')"
-                        @search="onSearch" />
-                </view>
-                <view class="media-page__scroll-wrap">
-                    <scroll-view scroll-y class="media-page__scroll">
-                        <view v-if="loading" class="media-page__state">
-                            <text class="media-page__state-text">{{ t("FilePage.loading") }}</text>
-                        </view>
-                        <view v-else-if="errorText" class="media-page__state">
-                            <text class="media-page__state-text media-page__state-text--error">
-                                {{ errorText }}
-                            </text>
-                            <text class="media-page__retry" @click="onRetry">
-                                {{ t("FilePage.retryBut") }}
-                            </text>
-                        </view>
-                        <template v-else>
-                            <view v-if="!list.length" class="media-page__empty">
-                                <text class="media-page__state-text">{{ t("MediaPage.emptyAlbums") }}</text>
-                            </view>
-                            <view v-for="entity in list" :key="entity.PublishName" class="album-card"
-                                @tap="onOpenAlbum(entity)">
-                                <view class="album-card__avatar">
-                                    <u-icon :name="kindIcon(kind)" size="48" color="#ffffff" />
-                                </view>
-                                <view class="album-card__main">
-                                    <text class="album-card__name">
-                                        {{ entity.PublishLocalName || t("MediaPage.unnamed") }}
-                                    </text>
-                                    <text class="album-card__desc">{{ albumDesc(entity) }}</text>
-                                    <view class="album-card__meta">
-                                        <text class="album-card__chip album-card__chip--code">
-                                            {{ entity.PublishName }}
-                                        </text>
-                                        <text v-if="entity.OpenIndc === 'Y'" class="album-card__chip">
-                                            {{ t("MediaPage.chipPublic") }}
-                                        </text>
-                                        <text v-if="entity.DefaultIndc === 'Y'"
-                                            class="album-card__chip album-card__chip--default">
-                                            {{ t("MediaPage.chipDefault") }}
-                                        </text>
-                                        <text class="album-card__date">
-                                            {{ formatDate(entity.CreatedDatetime) }}
-                                        </text>
-                                    </view>
-                                </view>
-                                <u-icon name="arrow-right" size="30" color="#c0c4cc" />
-                            </view>
-                        </template>
-                        <view class="media-page__list-space" />
-                    </scroll-view>
-                </view>
-                <!-- 新建专辑浮动按钮：复用文件页同款可拖动组件 -->
-                <float-add-btn @click="onCreateAlbum" />
-            </view>
-
-            <!-- ===== 编辑态：专辑管理 ===== -->
-            <view v-else class="media-page__body">
-                <view class="media-page__head">
-                    <page-navbar :title="navTitle" :show-back="true" :show-transfer="false" :show-quick-toggle="false"
-                        :show-search-toggle="false" @back="onBack" />
-                </view>
-                <view class="media-page__scroll-wrap">
-                    <scroll-view scroll-y class="media-page__scroll">
-                        <!-- 专辑信息头卡 -->
-                        <view class="detail-hero" :class="{ 'detail-hero--acts': !isEdit }">
-                            <view class="detail-hero__avatar">
-                                <u-icon :name="kindIcon(kind)" size="56" color="#ffffff" />
-                            </view>
-                            <view class="detail-hero__main">
-                                <text class="detail-hero__name">
-                                    {{ album?.PublishLocalName || t("MediaPage.unnamed") }}
-                                </text>
-                                <view class="detail-hero__chips">
-                                    <text class="album-card__chip album-card__chip--code">
-                                        {{ album?.PublishName }}
-                                    </text>
-                                    <text v-if="album?.OpenIndc === 'Y'" class="album-card__chip">
-                                        {{ t("MediaPage.chipPublic") }}
-                                    </text>
-                                    <text v-if="album?.DefaultIndc === 'Y'"
-                                        class="album-card__chip album-card__chip--default">
-                                        {{ t("MediaPage.chipDefault") }}
-                                    </text>
-                                </view>
-                            </view>
-                            <!-- 展览 / 修改 / 删除：右上角图标动作 -->
-                            <view v-if="!isEdit" class="detail-hero__acts">
-                                <view v-if="canAmend" class="detail-hero__act" @tap="onExhibit">
-                                    <u-icon name="eye-fill" size="32" color="#ffffff" />
-                                </view>
-                                <view v-if="canAmend" class="detail-hero__act" @tap="onAmend">
-                                    <u-icon name="edit-pen" size="32" color="#ffffff" />
-                                </view>
-                                <view v-if="canDelete" class="detail-hero__act detail-hero__act--danger"
-                                    @tap="onDelete">
-                                    <u-icon name="trash" size="32" color="#ffffff" />
-                                </view>
-                            </view>
-                        </view>
-
-                        <!-- 动作栏（仅编辑态：取消 / 保存） -->
-                        <view v-if="isEdit" class="detail-actions">
-                            <view class="detail-actions__btn" @tap="onCancelEdit">
-                                <text>{{ t("MediaPage.cancel") }}</text>
-                            </view>
-                            <view class="detail-actions__btn detail-actions__btn--primary" @tap="onSave">
-                                <text>{{ t("MediaPage.save") }}</text>
-                            </view>
-                        </view>
-
-                        <!-- 专辑信息卡 -->
-                        <view class="detail-card">
-                            <text class="detail-card__title">{{ t("MediaPage.albumInfo") }}</text>
-                            <view class="detail-field">
-                                <text class="detail-field__label">{{ t("MediaPage.albumNo") }}</text>
-                                <input class="detail-field__input" :value="album?.PublishName" disabled
-                                    :placeholder="t('MediaPage.autoNo')">
-                            </view>
-                            <view class="detail-field">
-                                <text class="detail-field__label">{{ t("MediaPage.albumName") }}</text>
-                                <input v-model="album!.PublishLocalName" class="detail-field__input" :disabled="!isEdit"
-                                    :maxlength="50" :placeholder="t('MediaPage.nameRequired')">
-                            </view>
-                            <view class="detail-field">
-                                <text class="detail-field__label">{{ t("MediaPage.albumDesc") }}</text>
-                                <textarea v-model="album!.Notice" class="detail-field__textarea" :disabled="!isEdit"
-                                    :maxlength="500" :placeholder="t('MediaPage.noDesc')" />
-                            </view>
-                            <view class="detail-field detail-field--row">
-                                <text class="detail-field__label">{{ t("MediaPage.publicLabel") }}</text>
-                                <u-switch :model-value="album?.OpenIndc === 'Y'" :disabled="!isEdit"
-                                    @change="(v: boolean) => album && (album.OpenIndc = v ? 'Y' : 'N')" />
-                            </view>
-                            <view class="detail-field detail-field--row">
-                                <text class="detail-field__label">{{ t("MediaPage.defaultLabel") }}</text>
-                                <u-switch :model-value="album?.DefaultIndc === 'Y'" :disabled="!isEdit"
-                                    @change="(v: boolean) => album && (album.DefaultIndc = v ? 'Y' : 'N')" />
-                            </view>
-                        </view>
-
-                        <!-- 明细卡 -->
-                        <view class="detail-card">
-                            <text class="detail-card__title">{{ t("MediaPage.details") }}</text>
-                            <view v-if="!details.length" class="detail-empty">
-                                <text>{{ t("MediaPage.noDetails") }}</text>
-                            </view>
-                            <view v-for="(item, index) in details" :key="item.DetailId || index" class="detail-item">
-                                <view class="detail-item__row">
-                                    <text class="detail-item__index">{{ index + 1 }}</text>
-                                    <image v-if="coverOf(item) && !coverFailed[item.DetailId]"
-                                        class="detail-item__cover" :src="coverOf(item)" mode="aspectFill"
-                                        @error="onCoverError(item.DetailId)" />
-                                    <view v-else class="detail-item__cover detail-item__cover--empty">
-                                        <u-icon :name="kindIcon(kind)" size="28" color="#c0c4cc" />
-                                    </view>
-                                    <view class="detail-item__acts">
-                                        <text v-if="isEdit && index > 0" class="detail-item__link"
-                                            @tap="onMoveDetail(index, -1)">
-                                            {{ t("MediaPage.moveUp") }}
-                                        </text>
-                                        <text v-if="isEdit && index < details.length - 1" class="detail-item__link"
-                                            @tap="onMoveDetail(index, 1)">
-                                            {{ t("MediaPage.moveDown") }}
-                                        </text>
-                                        <text v-if="isEdit" class="detail-item__del"
-                                            @tap="onRemoveDetail(item.DetailId)">
-                                            {{ t("MediaPage.delete") }}
-                                        </text>
-                                    </view>
-                                </view>
-                                <textarea v-if="isEdit" v-model="item.Notice" class="detail-item__sub" :maxlength="500"
-                                    :placeholder="t('MediaPage.noDesc')" />
-                                <text v-else-if="item.Notice" class="detail-item__sub detail-item__sub--text">
-                                    {{ item.Notice }}
-                                </text>
-                            </view>
-                        </view>
-
-                        <!-- 公开群组卡（仅本人可编辑时呈现，照旧 canAmend 显隐） -->
-                        <view v-if="canAmend" class="detail-card">
-                            <view class="detail-card__head">
-                                <text class="detail-card__title">{{ t("MediaPage.groups") }}</text>
-                                <text v-if="isEdit" class="detail-card__add" @tap="onAddGroup">
-                                    + {{ t("MediaPage.addGroup") }}
-                                </text>
-                            </view>
-                            <view v-if="!groups.length" class="detail-empty">
-                                <text>{{ t("MediaPage.noGroups") }}</text>
-                            </view>
-                            <view v-for="(group, index) in groups" :key="group.FamilyName || index" class="detail-item">
-                                <view class="detail-item__row">
-                                    <text class="detail-item__index">{{ index + 1 }}</text>
-                                    <text class="detail-item__name">
-                                        {{ group.FamilyName || t("MediaPage.unnamed") }}
-                                    </text>
-                                    <view class="detail-item__acts">
-                                        <text v-if="isEdit" class="detail-item__del"
-                                            @tap="onRemoveGroup(group.FamilyName)">
-                                            {{ t("MediaPage.delete") }}
-                                        </text>
-                                    </view>
-                                </view>
-                                <view class="group-field">
-                                    <text class="group-field__label">{{ t("MediaPage.groupName") }}</text>
-                                    <text class="group-field__text">{{ group.FamilyLocalName || "-" }}</text>
-                                </view>
-                                <view class="group-field">
-                                    <text class="group-field__label">{{ t("MediaPage.groupDesc") }}</text>
-                                    <text class="group-field__text">{{ group.Notice || "-" }}</text>
-                                </view>
-                            </view>
-                        </view>
-
-                        <view class="media-page__detail-space" />
-                    </scroll-view>
-                </view>
+  <!-- 列表态显示 tabbar，进详情收起 -->
+  <app-page :hide-nav="true" :show-tabbar="!inDetail">
+    <view class="media-page" :style="[{ background: themeBackground }, themeVars]">
+      <!-- ===== 列表态：分段 + 专辑卡片 ===== -->
+      <view v-if="!inDetail" class="media-page__body">
+        <view class="media-page__head">
+          <page-navbar :title="t('MediaPage.title')" :show-back="false" :search-on="showSearch" :show-transfer="false"
+            :show-quick-toggle="false" @back="onBack" @toggle-search="onToggleSearch" />
+          <!-- 分段：相册 / 音乐 / 影视 -->
+          <view class="seg-bar">
+            <view v-for="seg in SEGMENTS" :key="seg.key" class="seg-bar__item"
+              :class="{ 'is-active': kind === seg.key }" @tap="onKindChange(seg.key)">
+              <u-icon :name="seg.icon" size="30" :color="kind === seg.key ? primary : '#8f959e'" />
+              <text class="seg-bar__text">{{ t(seg.labelKey) }}</text>
             </view>
+          </view>
+          <search-input v-if="showSearch" v-model="keyword" :placeholder="t('FilePage.searchPlaceholder')"
+            @search="onSearch" />
         </view>
-    </app-page>
+        <view class="media-page__scroll-wrap">
+          <scroll-view scroll-y class="media-page__scroll">
+            <view v-if="loading" class="media-page__state">
+              <text class="media-page__state-text">{{ t("FilePage.loading") }}</text>
+            </view>
+            <view v-else-if="errorText" class="media-page__state">
+              <text class="media-page__state-text media-page__state-text--error">
+                {{ errorText }}
+              </text>
+              <text class="media-page__retry" @click="onRetry">
+                {{ t("FilePage.retryBut") }}
+              </text>
+            </view>
+            <template v-else>
+              <view v-if="!list.length" class="media-page__empty">
+                <text class="media-page__state-text">{{ t("MediaPage.emptyAlbums") }}</text>
+              </view>
+              <view v-for="entity in list" :key="entity.PublishName" class="album-card" @tap="onOpenAlbum(entity)">
+                <view class="album-card__avatar">
+                  <u-icon :name="kindIcon(kind)" size="48" color="#ffffff" />
+                </view>
+                <view class="album-card__main">
+                  <text class="album-card__name">
+                    {{ entity.PublishLocalName || t("MediaPage.unnamed") }}
+                  </text>
+                  <text class="album-card__desc">{{ albumDesc(entity) }}</text>
+                  <view class="album-card__meta">
+                    <text class="album-card__chip album-card__chip--code">
+                      {{ entity.PublishName }}
+                    </text>
+                    <text v-if="entity.OpenIndc === 'Y'" class="album-card__chip">
+                      {{ t("MediaPage.chipPublic") }}
+                    </text>
+                    <text v-if="entity.DefaultIndc === 'Y'" class="album-card__chip album-card__chip--default">
+                      {{ t("MediaPage.chipDefault") }}
+                    </text>
+                    <text class="album-card__date">
+                      {{ formatDate(entity.CreatedDatetime) }}
+                    </text>
+                  </view>
+                </view>
+                <u-icon name="arrow-right" size="30" color="#c0c4cc" />
+              </view>
+            </template>
+            <view class="media-page__list-space" />
+          </scroll-view>
+        </view>
+        <!-- 新建专辑浮动按钮：复用文件页同款可拖动组件 -->
+        <float-add-btn @click="onCreateAlbum" />
+      </view>
+
+      <!-- ===== 编辑态：专辑管理 ===== -->
+      <view v-else class="media-page__body">
+        <view class="media-page__head">
+          <hero-navbar :title="navTitle" @back="onBack" />
+        </view>
+        <view class="media-page__scroll-wrap">
+          <scroll-view scroll-y class="media-page__scroll">
+            <!-- 专辑信息头卡（仅查看态）：白底卡 + 主题浅底图标 + 浅色动作钮（深底渐变白字对比不足，弃用） -->
+            <view v-if="!isEdit" class="detail-hero">
+              <view class="detail-hero__avatar">
+                <u-icon :name="kindIcon(kind)" size="64" :color="primary" />
+              </view>
+              <view class="detail-hero__main">
+                <text class="detail-hero__name">
+                  {{ album?.PublishLocalName || t("MediaPage.unnamed") }}
+                </text>
+                <text class="detail-hero__code">
+                  {{ album?.PublishName }}
+                </text>
+                <view class="detail-hero__chips">
+                  <text v-if="album?.OpenIndc === 'Y'" class="detail-hero__chip">
+                    {{ t("MediaPage.chipPublic") }}
+                  </text>
+                  <text v-if="album?.DefaultIndc === 'Y'" class="detail-hero__chip detail-hero__chip--default">
+                    {{ t("MediaPage.chipDefault") }}
+                  </text>
+                </view>
+              </view>
+              <!-- 展览 / 修改 / 删除：右上角圆形图标动作 -->
+              <view class="detail-hero__acts">
+                <view v-if="canAmend" class="detail-hero__act" @tap="onExhibit">
+                  <u-icon name="eye-fill" size="34" :color="primary" />
+                </view>
+                <view v-if="canAmend" class="detail-hero__act" @tap="onAmend">
+                  <u-icon name="edit-pen" size="34" :color="primary" />
+                </view>
+                <view v-if="canDelete" class="detail-hero__act detail-hero__act--danger" @tap="onDelete">
+                  <u-icon name="trash" size="34" color="#f0413e" />
+                </view>
+              </view>
+            </view>
+
+            <!-- 动作栏（仅编辑态：取消 / 保存） -->
+            <view v-if="isEdit" class="detail-actions">
+              <view class="detail-actions__btn" @tap="onCancelEdit">
+                <text>{{ t("MediaPage.cancel") }}</text>
+              </view>
+              <view class="detail-actions__btn detail-actions__btn--primary" @tap="onSave">
+                <text>{{ t("MediaPage.save") }}</text>
+              </view>
+            </view>
+
+            <!-- 专辑信息卡（编辑态对齐设计图：编号灰字说明 + 描边输入 + 主题色开关）；点标题行折叠/展开 -->
+            <view class="detail-card">
+              <view class="detail-card__head" @tap="toggleFold('info')">
+                <text class="detail-card__title">{{ t("MediaPage.albumInfo") }}</text>
+                <u-icon :name="folded.info ? 'arrow-right' : 'arrow-down'" size="26" color="#8f959e" />
+              </view>
+              <view v-show="!folded.info">
+                <view class="detail-field">
+                  <text class="detail-field__label">{{ t("MediaPage.albumNo") }}</text>
+                  <text class="detail-field__static">
+                    {{
+                      album?.PublishName
+                    }}
+                  </text>
+                </view>
+                <view class="detail-field">
+                  <text class="detail-field__label">{{ t("MediaPage.albumName") }}</text>
+                  <input v-model="album!.PublishLocalName" class="detail-field__input" :disabled="!isEdit"
+                    :maxlength="50" :placeholder="t('MediaPage.nameRequired')">
+                </view>
+                <view class="detail-field">
+                  <text class="detail-field__label">{{ t("MediaPage.albumDesc") }}</text>
+                  <textarea v-model="album!.Notice" class="detail-field__textarea" :disabled="!isEdit" :maxlength="500"
+                    :placeholder="t('MediaPage.noDesc')" />
+                </view>
+                <view class="detail-field detail-field--row">
+                  <text class="detail-field__label">{{ t("MediaPage.publicLabel") }}</text>
+                  <u-switch :model-value="album?.OpenIndc === 'Y'" :disabled="!isEdit" :active-color="primary"
+                    @change="(v: boolean) => album && (album.OpenIndc = v ? 'Y' : 'N')" />
+                </view>
+                <view class="detail-field detail-field--row">
+                  <text class="detail-field__label">{{ t("MediaPage.defaultLabel") }}</text>
+                  <u-switch :model-value="album?.DefaultIndc === 'Y'" :disabled="!isEdit" :active-color="primary"
+                    @change="(v: boolean) => album && (album.DefaultIndc = v ? 'Y' : 'N')" />
+                </view>
+              </view>
+            </view>
+
+            <!-- 明细卡：点标题行折叠/展开 -->
+            <view class="detail-card">
+              <view class="detail-card__head" @tap="toggleFold('details')">
+                <text class="detail-card__title">{{ t("MediaPage.details") }}</text>
+                <u-icon :name="folded.details ? 'arrow-right' : 'arrow-down'" size="26" color="#8f959e" />
+              </view>
+              <view v-show="!folded.details">
+                <view v-if="!details.length" class="detail-empty">
+                  <text>{{ t("MediaPage.noDetails") }}</text>
+                </view>
+                <view v-for="(item, index) in details" :key="item.DetailId || index" class="detail-item">
+                  <view class="detail-item__row">
+                    <text class="detail-item__index">{{ index + 1 }}</text>
+                    <image v-if="coverOf(item) && !coverFailed[item.DetailId]" class="detail-item__cover"
+                      :src="coverOf(item)" mode="aspectFill" @error="onCoverError(item.DetailId)" />
+                    <view v-else class="detail-item__cover detail-item__cover--empty">
+                      <u-icon :name="kindIcon(kind)" size="28" color="#c0c4cc" />
+                    </view>
+                    <!-- 查看态：描述灰字放封面右侧；编辑态输入框在封面下方整行（大框挤在行内会撑爆布局） -->
+                    <view class="detail-item__desc">
+                      <text v-if="!isEdit && item.Notice" class="detail-item__sub detail-item__sub--text">
+                        {{ item.Notice }}
+                      </text>
+                    </view>
+                    <view class="detail-item__acts">
+                      <text v-if="isEdit && index > 0" class="detail-item__link" @tap="onMoveDetail(index, -1)">
+                        {{ t("MediaPage.moveUp") }}
+                      </text>
+                      <text v-if="isEdit && index < details.length - 1" class="detail-item__link"
+                        @tap="onMoveDetail(index, 1)">
+                        {{ t("MediaPage.moveDown") }}
+                      </text>
+                      <text v-if="isEdit" class="detail-item__del" @tap="onRemoveDetail(item.DetailId)">
+                        {{ t("MediaPage.delete") }}
+                      </text>
+                    </view>
+                  </view>
+                  <textarea v-if="isEdit" v-model="item.Notice" class="detail-item__sub" :maxlength="500"
+                    :placeholder="t('MediaPage.noDesc')" />
+                </view>
+              </view>
+            </view>
+
+            <!-- 公开群组卡（仅本人可编辑时呈现，照旧 canAmend 显隐）；点标题行折叠/展开 -->
+            <view v-if="canAmend" class="detail-card">
+              <view class="detail-card__head" @tap="toggleFold('groups')">
+                <text class="detail-card__title">{{ t("MediaPage.groups") }}</text>
+                <view class="detail-card__head-acts">
+                  <text v-if="isEdit" class="detail-card__add" @tap.stop="onAddGroup">
+                    + {{ t("MediaPage.addGroup") }}
+                  </text>
+                  <u-icon :name="folded.groups ? 'arrow-right' : 'arrow-down'" size="26" color="#8f959e" />
+                </view>
+              </view>
+              <view v-show="!folded.groups">
+                <view v-if="!groups.length" class="detail-empty">
+                  <text>{{ t("MediaPage.noGroups") }}</text>
+                </view>
+                <view v-for="(group, index) in groups" :key="group.FamilyName || index" class="detail-item">
+                  <view class="detail-item__row">
+                    <text class="detail-item__index">{{ index + 1 }}</text>
+                    <text class="detail-item__name">
+                      {{ group.FamilyName || t("MediaPage.unnamed") }}
+                    </text>
+                    <view class="detail-item__acts">
+                      <text v-if="isEdit" class="detail-item__del" @tap="onRemoveGroup(group.FamilyName)">
+                        {{ t("MediaPage.delete") }}
+                      </text>
+                    </view>
+                  </view>
+                  <view class="group-field">
+                    <text class="group-field__label">{{ t("MediaPage.groupName") }}</text>
+                    <text class="group-field__text">{{ group.FamilyLocalName || "-" }}</text>
+                  </view>
+                  <view class="group-field">
+                    <text class="group-field__label">{{ t("MediaPage.groupDesc") }}</text>
+                    <text class="group-field__text">{{ group.Notice || "-" }}</text>
+                  </view>
+                </view>
+              </view>
+            </view>
+
+            <view class="media-page__detail-space" />
+          </scroll-view>
+        </view>
+      </view>
+    </view>
+  </app-page>
 </template>
 
 <style lang="scss" scoped>
 /* 骨架与文件页/共享页同套（fixed 全屏 + head/scroll-wrap 卡片分区） */
 .media-page {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .media-page__body {
-    display: flex;
-    flex: 1;
-    min-height: 0;
-    flex-direction: column;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
 }
 
 .media-page__head {
-    flex-shrink: 0;
+  flex-shrink: 0;
 }
 
 .media-page__scroll-wrap {
-    flex: 1;
-    min-height: 0;
-    margin: 20rpx 20rpx 0;
-    overflow: hidden;
+  flex: 1;
+  min-height: 0;
+  margin: 20rpx 20rpx 0;
+  overflow: hidden;
 }
 
 .media-page__scroll {
-    height: 100%;
+  height: 100%;
 }
 
 .media-page__list-space {
-    height: 160rpx;
+  height: 160rpx;
 }
 
 .media-page__detail-space {
-    height: 48rpx;
+  height: 48rpx;
 }
 
 .media-page__state,
 .media-page__empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 24rpx;
-    padding: 64rpx 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24rpx;
+  padding: 64rpx 32rpx;
 }
 
 .media-page__state-text {
-    font-size: 26rpx;
-    color: #9aa0a6;
+  font-size: 26rpx;
+  color: #9aa0a6;
 }
 
 .media-page__state-text--error {
-    color: #f0413e;
+  color: #f0413e;
 }
 
 .media-page__retry {
-    padding: 8rpx 28rpx;
-    border-radius: 999rpx;
-    font-size: 26rpx;
-    color: #2b8fff;
-    background-color: #eaf4ff;
+  padding: 8rpx 28rpx;
+  border-radius: 999rpx;
+  font-size: 26rpx;
+  color: var(--fg-primary, #2b8fff);
+  background-color: var(--fg-soft, #eaf4ff);
 }
 
 /* ===== 分段控件 ===== */
 .seg-bar {
-    display: flex;
-    gap: 12rpx;
-    margin: 12rpx 24rpx 4rpx;
+  display: flex;
+  gap: 12rpx;
+  margin: 12rpx 24rpx 4rpx;
 }
 
 .seg-bar__item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8rpx;
-    flex: 1;
-    height: 72rpx;
-    border-radius: 999rpx;
-    background-color: #ffffff;
-    opacity: 0.7;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  flex: 1;
+  height: 72rpx;
+  border-radius: 999rpx;
+  background-color: #ffffff;
+  opacity: 0.7;
 
-    &.is-active {
-        color: #2b8fff;
-        opacity: 1;
-        box-shadow: 0 6rpx 16rpx rgba(43, 143, 255, 0.18);
-        background: linear-gradient(135deg, #eaf4ff, #ffffff);
-    }
+  &.is-active {
+    color: var(--fg-primary, #2b8fff);
+    opacity: 1;
+    box-shadow: 0 6rpx 16rpx var(--fg-shadow, rgba(43, 143, 255, 0.18));
+    background: linear-gradient(135deg, var(--fg-soft, #eaf4ff), #ffffff);
+  }
 }
 
 .seg-bar__text {
-    font-size: 28rpx;
-    color: #8f959e;
+  font-size: 28rpx;
+  color: #8f959e;
 }
 
 .seg-bar__item.is-active .seg-bar__text {
-    color: #2b8fff;
-    font-weight: 600;
+  color: var(--fg-primary, #2b8fff);
+  font-weight: 600;
 }
 
 /* ===== 列表卡片 ===== */
 .album-card {
-    display: flex;
-    align-items: center;
-    gap: 20rpx;
-    margin: 0 4rpx 20rpx;
-    padding: 28rpx;
-    border-radius: 24rpx;
-    background-color: #ffffff;
-    box-shadow: 0 6rpx 18rpx rgba(31, 35, 41, 0.05);
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  margin: 0 4rpx 20rpx;
+  padding: 28rpx;
+  border-radius: 24rpx;
+  background-color: #ffffff;
+  box-shadow: 0 6rpx 18rpx rgba(31, 35, 41, 0.05);
 }
 
 .album-card__avatar {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 88rpx;
-    height: 88rpx;
-    border-radius: 20rpx;
-    background: linear-gradient(135deg, #4a9dff, #2b8fff);
-    flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 20rpx;
+  background: var(--fg-gradient, linear-gradient(135deg, #4a9dff, #2b8fff));
+  flex-shrink: 0;
 }
 
 .album-card__main {
-    display: flex;
-    flex: 1;
-    min-width: 0;
-    flex-direction: column;
-    gap: 8rpx;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 8rpx;
 }
 
 .album-card__name {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: #1f2329;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #1f2329;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .album-card__desc {
-    font-size: 24rpx;
-    color: #8f959e;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+  font-size: 24rpx;
+  color: #8f959e;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .album-card__meta {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 10rpx;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10rpx;
 }
 
 .album-card__chip {
-    padding: 2rpx 14rpx;
-    border-radius: 8rpx;
-    font-size: 20rpx;
-    color: #5c626b;
-    background-color: #f2f3f5;
+  padding: 2rpx 14rpx;
+  border-radius: 8rpx;
+  font-size: 20rpx;
+  color: #5c626b;
+  background-color: #f2f3f5;
 }
 
 .album-card__chip--code {
-    color: #2b8fff;
-    background-color: #eaf4ff;
+  color: var(--fg-primary, #2b8fff);
+  background-color: var(--fg-soft, #eaf4ff);
 }
 
 .album-card__chip--default {
-    color: #ff9500;
-    background-color: #fff4e0;
+  color: #ff9500;
+  background-color: #fff4e0;
 }
 
 .album-card__date {
-    margin-left: auto;
-    font-size: 20rpx;
-    color: #bfc3c9;
+  margin-left: auto;
+  font-size: 20rpx;
+  color: #bfc3c9;
 }
 
 /* ===== 详情头卡 + 动作栏 ===== */
+/* 查看态头卡：白底卡（同分区卡片风格），主题色只做点缀 */
 .detail-hero {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 24rpx;
-    margin: 0 4rpx 20rpx;
-    padding: 32rpx 28rpx;
-    border-radius: 24rpx;
-    background: linear-gradient(135deg, #4a9dff, #2b8fff);
-}
-
-/* 有右上角图标动作时，主体内容右侧留出空间避免长标题被遮挡 */
-.detail-hero--acts .detail-hero__main {
-    padding-right: 210rpx;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 28rpx;
+  margin: 0 4rpx 20rpx;
+  padding: 40rpx 32rpx;
+  border-radius: 32rpx;
+  background-color: #ffffff;
 }
 
 .detail-hero__acts {
-    position: absolute;
-    top: 20rpx;
-    right: 20rpx;
-    display: flex;
-    align-items: center;
-    gap: 14rpx;
+  position: absolute;
+  top: 28rpx;
+  right: 28rpx;
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
 }
 
+/* 圆形动作钮：浅灰底 + 主题色图标，删除用浅红底红图标 */
 .detail-hero__act {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 60rpx;
-    height: 60rpx;
-    border-radius: 50%;
-    background-color: rgba(255, 255, 255, 0.22);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 76rpx;
+  height: 76rpx;
+  border-radius: 50%;
+  background-color: #f2f3f5;
 }
 
 .detail-hero__act--danger {
-    background-color: rgba(255, 82, 82, 0.88);
+  background-color: #ffeceb;
 }
 
 .detail-hero__avatar {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 96rpx;
-    height: 96rpx;
-    border-radius: 24rpx;
-    background-color: rgba(255, 255, 255, 0.24);
-    flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 140rpx;
+  height: 140rpx;
+  border-radius: 32rpx;
+  background-color: var(--fg-soft, #eaf4ff);
+  flex-shrink: 0;
 }
 
 .detail-hero__main {
-    display: flex;
-    flex: 1;
-    min-width: 0;
-    flex-direction: column;
-    gap: 12rpx;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 10rpx;
+  /* 右上角三枚圆钮横排，名称/编号行留避让空间 */
+  padding-right: 250rpx;
 }
 
 .detail-hero__name {
-    font-size: 36rpx;
-    font-weight: 600;
-    color: #ffffff;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+  font-size: 40rpx;
+  font-weight: 700;
+  color: #1f2329;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* 编号独立成行：灰字说明 */
+.detail-hero__code {
+  font-size: 26rpx;
+  color: #8f959e;
 }
 
 .detail-hero__chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10rpx;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+  margin-top: 6rpx;
+}
+
+/* 头卡胶囊：公开=主题浅底主题字，默认=黄底橙字（同列表卡口径） */
+.detail-hero__chip {
+  padding: 6rpx 22rpx;
+  border-radius: 12rpx;
+  font-size: 24rpx;
+  color: var(--fg-primary, #2b8fff);
+  background-color: var(--fg-soft, #eaf4ff);
+}
+
+.detail-hero__chip--default {
+  color: #ff9500;
+  background-color: #fff4e0;
 }
 
 .detail-actions {
-    display: flex;
-    gap: 20rpx;
-    margin: 0 4rpx 20rpx;
+  display: flex;
+  gap: 20rpx;
+  margin: 0 4rpx 20rpx;
 }
 
+/* 动作钮统一规格（同 option-picker）：等高圆角矩形 + 细描边，主钮纯色跟主题 */
 .detail-actions__btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 1;
-    height: 80rpx;
-    border-radius: 999rpx;
-    font-size: 28rpx;
-    color: #5c626b;
-    background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  height: 96rpx;
+  border: 2rpx solid #e5e6eb;
+  border-radius: 24rpx;
+  font-size: 32rpx;
+  color: #5c626b;
+  background-color: #ffffff;
 
-    &--primary {
-        color: #ffffff;
-        background-color: #2b8fff;
-    }
+  &--primary {
+    border-color: transparent;
+    font-weight: 600;
+    color: #ffffff;
+    background-color: var(--fg-primary, #2b8fff);
+  }
 
-    &--exhibit {
-        color: #ffffff;
-        background-color: #21b169;
-    }
+  &--exhibit {
+    border-color: transparent;
+    font-weight: 600;
+    color: #ffffff;
+    background-color: #21b169;
+  }
 
-    &--danger {
-        color: #f0413e;
-        background-color: #ffeceb;
-    }
+  &--danger {
+    border-color: transparent;
+    font-weight: 600;
+    color: #f0413e;
+    background-color: #ffeceb;
+  }
 }
 
 /* ===== 分区卡片 ===== */
 .detail-card {
-    margin: 0 4rpx 20rpx;
-    padding: 28rpx;
-    border-radius: 24rpx;
-    background-color: #ffffff;
+  margin: 0 4rpx 20rpx;
+  padding: 28rpx;
+  border-radius: 24rpx;
+  background-color: #ffffff;
 }
 
 .detail-card__head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* 标题行右侧一组：添加钮 + 折叠箭头 */
+.detail-card__head-acts {
+  display: flex;
+  align-items: center;
+  gap: 28rpx;
 }
 
 .detail-card__title {
-    font-size: 30rpx;
-    font-weight: 600;
-    color: #1f2329;
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #1f2329;
 }
 
 .detail-card__add {
-    font-size: 26rpx;
-    color: #2b8fff;
+  font-size: 26rpx;
+  color: var(--fg-primary, #2b8fff);
 }
 
 .detail-field {
-    display: flex;
-    flex-direction: column;
-    gap: 12rpx;
-    margin-top: 24rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+  margin-top: 24rpx;
 }
 
 .detail-field--row {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .detail-field__label {
-    font-size: 26rpx;
-    color: #5c626b;
+  font-size: 26rpx;
+  color: #5c626b;
+}
+
+/* 编号等不可编辑说明：纯灰字，不再做成禁用输入框（对齐设计图2） */
+.detail-field__static {
+  font-size: 28rpx;
+  line-height: 1.6;
+  color: #8f959e;
 }
 
 .detail-field__input,
 .detail-item__input {
-    box-sizing: border-box;
-    padding: 0 20rpx;
-    height: 68rpx;
-    border: 2rpx solid #e6e7ea;
-    border-radius: 14rpx;
-    font-size: 26rpx;
-    color: #1f2329;
-    background-color: #f7f8fa;
+  box-sizing: border-box;
+  padding: 0 24rpx;
+  height: 88rpx;
+  border: 2rpx solid #e6e7ea;
+  border-radius: 16rpx;
+  font-size: 28rpx;
+  color: #1f2329;
+  background-color: #ffffff;
 }
 
 .detail-field__textarea {
-    box-sizing: border-box;
-    width: 100%;
-    min-height: 120rpx;
-    padding: 16rpx 20rpx;
-    border: 2rpx solid #e6e7ea;
-    border-radius: 14rpx;
-    font-size: 26rpx;
-    color: #1f2329;
-    background-color: #f7f8fa;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 200rpx;
+  padding: 20rpx 24rpx;
+  border: 2rpx solid #e6e7ea;
+  border-radius: 16rpx;
+  font-size: 28rpx;
+  color: #1f2329;
+  background-color: #ffffff;
 }
 
 .detail-empty {
-    padding: 40rpx 0;
-    text-align: center;
-    font-size: 24rpx;
-    color: #bfc3c9;
+  padding: 40rpx 0;
+  text-align: center;
+  font-size: 24rpx;
+  color: #bfc3c9;
 }
 
 .detail-item {
-    padding: 20rpx 0;
-    border-bottom: 2rpx solid #f2f3f5;
+  padding: 20rpx 0;
+  border-bottom: 2rpx solid #f2f3f5;
 }
 
 .detail-item:last-child {
-    border-bottom: none;
+  border-bottom: none;
 }
 
 .detail-item__row {
-    display: flex;
-    align-items: center;
-    gap: 16rpx;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
 }
 
 .detail-item__index {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40rpx;
-    height: 40rpx;
-    border-radius: 50%;
-    font-size: 22rpx;
-    color: #8f959e;
-    background-color: #f2f3f5;
-    flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  font-size: 22rpx;
+  color: #8f959e;
+  background-color: #f2f3f5;
+  flex-shrink: 0;
 }
 
 .detail-item__cover {
-    width: 96rpx;
-    height: 96rpx;
-    border-radius: 12rpx;
-    background-color: #f2f3f5;
-    flex-shrink: 0;
+  width: 320rpx;
+  height: 320rpx;
+  border-radius: 16rpx;
+  background-color: #f2f3f5;
+  flex-shrink: 0;
 }
 
 .detail-item__cover--empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .detail-item__name {
-    flex: 1;
-    min-width: 0;
-    font-size: 28rpx;
-    color: #1f2329;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+  font-size: 28rpx;
+  color: #1f2329;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .detail-item__acts {
-    display: flex;
-    align-items: center;
-    gap: 20rpx;
-    margin-left: auto;
-    flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  margin-left: auto;
+  flex-shrink: 0;
 }
 
 .detail-item__link {
-    font-size: 24rpx;
-    color: #2b8fff;
+  font-size: 24rpx;
+  color: var(--fg-primary, #2b8fff);
 }
 
 .detail-item__del {
-    font-size: 24rpx;
-    color: #f0413e;
+  font-size: 24rpx;
+  color: #f0413e;
+}
+
+/* 描述列：吃掉封面与动作钮之间的中段宽度 */
+.detail-item__desc {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
 }
 
 .detail-item__sub {
-    box-sizing: border-box;
-    width: 100%;
-    min-height: 72rpx;
-    margin-top: 12rpx;
-    padding: 12rpx 20rpx;
-    border: 2rpx solid #e6e7ea;
-    border-radius: 14rpx;
-    font-size: 24rpx;
-    line-height: 1.5;
-    color: #1f2329;
-    background-color: #f7f8fa;
+  box-sizing: border-box;
+  width: 100%;
+  height: 88rpx;
+  margin-top: 12rpx;
+  padding: 12rpx 20rpx;
+  border: 2rpx solid #e6e7ea;
+  border-radius: 16rpx;
+  font-size: 24rpx;
+  line-height: 1.5;
+  color: #1f2329;
+  background-color: #ffffff;
 }
 
 .detail-item__sub--text {
-    display: block;
-    border: none;
-    background-color: transparent;
-    padding: 12rpx 0 0;
-    color: #8f959e;
+  display: block;
+  height: auto;
+  border: none;
+  background-color: transparent;
+  margin-top: 0;
+  padding: 0;
+  line-height: 1.6;
+  color: #8f959e;
 }
 
 /* 公开群组明细行：编号作标题，下方两行带标签的群组名称/描述（照旧 ft-item-field） */
 .group-field {
-    display: flex;
-    align-items: flex-start;
-    gap: 16rpx;
-    margin-top: 12rpx;
-    padding-left: 56rpx;
+  display: flex;
+  align-items: flex-start;
+  gap: 16rpx;
+  margin-top: 12rpx;
+  padding-left: 56rpx;
 }
 
 .group-field__label {
-    flex-shrink: 0;
-    font-size: 24rpx;
-    color: #8f959e;
+  flex-shrink: 0;
+  font-size: 24rpx;
+  color: #8f959e;
 }
 
 .group-field__text {
-    flex: 1;
-    min-width: 0;
-    font-size: 24rpx;
-    color: #1f2329;
-    word-break: break-all;
+  flex: 1;
+  min-width: 0;
+  font-size: 24rpx;
+  color: #1f2329;
+  word-break: break-all;
 }
 </style>
diff --git a/uniapp/youjiala/src/pages/tab/share.vue b/uniapp/youjiala/src/pages/tab/share.vue
index e685cc4..9eeaf9a 100644
--- a/uniapp/youjiala/src/pages/tab/share.vue
+++ b/uniapp/youjiala/src/pages/tab/share.vue
@@ -12,11 +12,19 @@
 import type { FamilyGroupEntity } from "@/data/auto/familyGroupEntity";
 import { useLocale } from "uview-pro";
 import { computed, ref } from "vue";
-import { useAuthGuard, useFamilyGroups, useThemeGradient } from "@/composables";
+import { useAuthGuard, useFamilyGroups, useThemeGradient, useThemeTokens } from "@/composables";
 import { useLoginProfileStore } from "@/stores";
 
 const { t } = useLocale();
 const { themeBackground } = useThemeGradient();
+// 主题派生色经 CSS 变量下发（与媒体页同套）：头卡/徽章/主按钮/链接全部跟主题
+const { primary, accentGradient, accentSoft, accentShadow } = useThemeTokens();
+const themeVars = computed(() => ({
+    "--fg-primary": primary.value,
+    "--fg-gradient": accentGradient.value,
+    "--fg-soft": accentSoft.value,
+    "--fg-shadow": accentShadow.value,
+}));
 const profile = useLoginProfileStore();
 
 const {
@@ -74,6 +82,20 @@ const navTitle = computed(() => {
     return t("SharePage.title");
 });
 
+/** 详情区分区卡折叠态（与媒体页同款交互）：默认全展开，点标题行切换 */
+type FoldKey = "info" | "folders" | "requests" | "members" | "permissions";
+const folded = ref<Record<FoldKey, boolean>>({
+    info: false,
+    folders: false,
+    requests: false,
+    members: false,
+    permissions: false,
+});
+
+function toggleFold(key: FoldKey): void {
+    folded.value[key] = !folded.value[key];
+}
+
 /** 申请加入入口：非新建、非管理员、非成员，且群开启了「可申请」 */
 const canApply = computed(() =>
     !creating.value
@@ -291,7 +313,7 @@ function groupDesc(group: FamilyGroupEntity): string {
 <template>
     <!-- 列表态显示 tabbar，进详情（或弹层展开）收起 -->
     <app-page :hide-nav="true" :show-tabbar="!inDetail && !dialogVisible">
-        <view class="share-page" :style="{ background: themeBackground }">
+        <view class="share-page" :style="[{ background: themeBackground }, themeVars]">
             <!-- ===== 列表态：公开群 + 我的群 ===== -->
             <view v-if="!inDetail" class="share-page__body">
                 <view class="share-page__head">
@@ -365,42 +387,50 @@ function groupDesc(group: FamilyGroupEntity): string {
             <!-- ===== 详情态：群管理 ===== -->
             <view v-else class="share-page__body">
                 <view class="share-page__head">
-                    <page-navbar :title="navTitle" :show-back="true" :show-transfer="false" :show-quick-toggle="false"
-                        :show-search-toggle="false" @back="onBack" />
+                    <hero-navbar :title="navTitle" @back="onBack" />
                 </view>
                 <view class="share-page__scroll-wrap">
                     <scroll-view scroll-y class="share-page__scroll">
-                        <!-- 群信息头卡 -->
+                        <!-- 群信息头卡（与媒体页同套）：白底 + 主题浅底图标 + 编号灰字独立行 -->
                         <view class="detail-hero">
                             <view class="detail-hero__avatar">
-                                <u-icon name="account-fill" size="56" color="#ffffff" />
+                                <u-icon name="account-fill" size="64" :color="primary" />
                             </view>
                             <view class="detail-hero__main">
                                 <text class="detail-hero__name">
                                     {{ detail.FamilyGroup.FamilyLocalName || t("SharePage.unnamed") }}
                                 </text>
+                                <text class="detail-hero__code">
+                                    {{ detail.FamilyGroup.FamilyName }}
+                                </text>
                                 <view class="detail-hero__chips">
-                                    <text class="group-card__chip group-card__chip--code">
-                                        {{ detail.FamilyGroup.FamilyName }}
-                                    </text>
-                                    <text v-if="detail.IsOpen" class="group-card__chip">
+                                    <text v-if="detail.IsOpen" class="detail-hero__chip">
                                         {{ t("SharePage.chipPublic") }}
                                     </text>
-                                    <text v-if="detail.IsAdd" class="group-card__chip">
+                                    <text v-if="detail.IsAdd" class="detail-hero__chip">
                                         {{ t("SharePage.chipJoinable") }}
                                     </text>
-                                    <text v-if="isManager" class="group-card__chip group-card__chip--admin">
+                                    <text v-if="isManager" class="detail-hero__chip detail-hero__chip--admin">
                                         {{ t("SharePage.chipManager") }}
                                     </text>
-                                    <text v-else-if="isMember" class="group-card__chip">
+                                    <text v-else-if="isMember" class="detail-hero__chip detail-hero__chip--member">
                                         {{ t("SharePage.chipMember") }}
                                     </text>
                                 </view>
                             </view>
+                            <!-- 修改 / 解散：右上角圆形图标动作（与媒体页同套） -->
+                            <view v-if="!isEdit && isManager" class="detail-hero__acts">
+                                <view class="detail-hero__act" @tap="onAmend">
+                                    <u-icon name="edit-pen" size="34" :color="primary" />
+                                </view>
+                                <view class="detail-hero__act detail-hero__act--danger" @tap="onDissolve">
+                                    <u-icon name="trash" size="34" color="#f0413e" />
+                                </view>
+                            </view>
                         </view>
 
-                        <!-- 动作栏：按角色/态显示 -->
-                        <view class="detail-actions">
+                        <!-- 动作栏：编辑态取消/保存；非成员可申请加入（修改/解散已升为头卡图标钮） -->
+                        <view v-if="isEdit || canApply" class="detail-actions">
                             <template v-if="isEdit">
                                 <view class="detail-actions__btn" @tap="onCancelEdit">
                                     <text>{{ t("SharePage.cancel") }}</text>
@@ -409,178 +439,198 @@ function groupDesc(group: FamilyGroupEntity): string {
                                     <text>{{ t("SharePage.save") }}</text>
                                 </view>
                             </template>
-                            <template v-else>
-                                <view v-if="isManager" class="detail-actions__btn detail-actions__btn--primary"
-                                    @tap="onAmend">
-                                    <text>{{ t("SharePage.amend") }}</text>
-                                </view>
-                                <view v-if="canApply" class="detail-actions__btn detail-actions__btn--join"
-                                    @tap="onApplyJoin">
-                                    <text>{{ t("SharePage.applyJoin") }}</text>
-                                </view>
-                                <view v-if="isManager" class="detail-actions__btn detail-actions__btn--danger"
-                                    @tap="onDissolve">
-                                    <text>{{ t("SharePage.dissolve") }}</text>
-                                </view>
-                            </template>
-                        </view>
-
-                        <!-- 群组信息卡 -->
-                        <view class="detail-card">
-                            <text class="detail-card__title">
-                                {{ t("SharePage.groupInfo") }}
-                            </text>
-                            <view class="detail-field">
-                                <text class="detail-field__label">
-                                    {{ t("SharePage.groupName") }}
-                                </text>
-                                <input v-model="detail.FamilyGroup.FamilyLocalName" class="detail-field__input"
-                                    :disabled="!isEdit" :maxlength="50" :placeholder="t('SharePage.nameRequired')">
-                            </view>
-                            <view class="detail-field">
-                                <text class="detail-field__label">
-                                    {{ t("SharePage.groupDesc") }}
-                                </text>
-                                <textarea v-model="detail.FamilyGroup.Notice" class="detail-field__textarea"
-                                    :disabled="!isEdit" :maxlength="256" :placeholder="t('SharePage.noDesc')" />
-                            </view>
-                            <view class="detail-field detail-field--row">
-                                <text class="detail-field__label">
-                                    {{ t("SharePage.publicSetting") }}
-                                </text>
-                                <u-switch :model-value="detail.IsOpen" :disabled="!isEdit"
-                                    @change="(v: boolean) => detail.IsOpen = v" />
-                            </view>
-                            <view class="detail-field detail-field--row">
-                                <text class="detail-field__label">
-                                    {{ t("SharePage.joinApply") }}
-                                </text>
-                                <u-switch :model-value="detail.IsAdd" :disabled="!isEdit"
-                                    @change="(v: boolean) => detail.IsAdd = v" />
+                            <view v-else-if="canApply" class="detail-actions__btn detail-actions__btn--join"
+                                @tap="onApplyJoin">
+                                <text>{{ t("SharePage.applyJoin") }}</text>
                             </view>
                         </view>
 
-                        <!-- 共享目录卡 -->
+                        <!-- 群组信息卡：点标题行折叠/展开 -->
                         <view class="detail-card">
-                            <view class="detail-card__head">
+                            <view class="detail-card__head" @tap="toggleFold('info')">
+                                <text class="detail-card__title">
+                                    {{ t("SharePage.groupInfo") }}
+                                </text>
+                                <u-icon :name="folded.info ? 'arrow-right' : 'arrow-down'" size="26" color="#8f959e" />
+                            </view>
+                            <view v-show="!folded.info">
+                                <view class="detail-field">
+                                    <text class="detail-field__label">
+                                        {{ t("SharePage.groupName") }}
+                                    </text>
+                                    <input v-model="detail.FamilyGroup.FamilyLocalName" class="detail-field__input"
+                                        :disabled="!isEdit" :maxlength="50" :placeholder="t('SharePage.nameRequired')">
+                                </view>
+                                <view class="detail-field">
+                                    <text class="detail-field__label">
+                                        {{ t("SharePage.groupDesc") }}
+                                    </text>
+                                    <textarea v-model="detail.FamilyGroup.Notice" class="detail-field__textarea"
+                                        :disabled="!isEdit" :maxlength="256" :placeholder="t('SharePage.noDesc')" />
+                                </view>
+                                <view class="detail-field detail-field--row">
+                                    <text class="detail-field__label">
+                                        {{ t("SharePage.publicSetting") }}
+                                    </text>
+                                    <u-switch :model-value="detail.IsOpen" :disabled="!isEdit" :active-color="primary"
+                                        @change="(v: boolean) => detail.IsOpen = v" />
+                                </view>
+                                <view class="detail-field detail-field--row">
+                                    <text class="detail-field__label">
+                                        {{ t("SharePage.joinApply") }}
+                                    </text>
+                                    <u-switch :model-value="detail.IsAdd" :disabled="!isEdit" :active-color="primary"
+                                        @change="(v: boolean) => detail.IsAdd = v" />
+                                </view>
+                            </view>
+                        </view>
+
+                        <!-- 共享目录卡：点标题行折叠/展开，「新建」钮不触发折叠 -->
+                        <view class="detail-card">
+                            <view class="detail-card__head" @tap="toggleFold('folders')">
                                 <text class="detail-card__title">
                                     {{ t("SharePage.folders") }}
                                 </text>
-                                <text v-if="isEdit" class="detail-card__add" @tap="onNewFolder">
-                                    + {{ t("SharePage.newFolder") }}
-                                </text>
-                            </view>
-                            <view v-if="!detail.FamilyGroupFolders.length" class="detail-empty">
-                                <text>{{ t("SharePage.noFolders") }}</text>
-                            </view>
-                            <view v-for="(folder, index) in detail.FamilyGroupFolders" :key="folder.FolderId || index"
-                                class="detail-item">
-                                <view class="detail-item__row">
-                                    <text class="detail-item__index">
-                                        {{ index + 1 }}
+                                <view class="detail-card__head-acts">
+                                    <text v-if="isEdit" class="detail-card__add" @tap.stop="onNewFolder">
+                                        + {{ t("SharePage.newFolder") }}
+                                    </text>
+                                    <u-icon :name="folded.folders ? 'arrow-right' : 'arrow-down'" size="26"
+                                        color="#8f959e" />
+                                </view>
+                            </view>
+                            <view v-show="!folded.folders">
+                                <view v-if="!detail.FamilyGroupFolders.length" class="detail-empty">
+                                    <text>{{ t("SharePage.noFolders") }}</text>
+                                </view>
+                                <view v-for="(folder, index) in detail.FamilyGroupFolders"
+                                    :key="folder.FolderId || index" class="detail-item">
+                                    <view class="detail-item__row">
+                                        <text class="detail-item__index">
+                                            {{ index + 1 }}
+                                        </text>
+                                        <input v-if="isEdit" v-model="folder.FolderLocalName" class="detail-item__input"
+                                            :maxlength="50" :placeholder="t('SharePage.folderPh')">
+                                        <text v-else class="detail-item__name">
+                                            {{ folder.FolderLocalName || t("SharePage.unnamed") }}
+                                        </text>
+                                        <view class="detail-item__acts">
+                                            <text v-if="!isEdit && folder.IsSharePermission" class="detail-item__link"
+                                                @tap="onAssignPermission(folder.FolderName)">
+                                                {{ t("SharePage.assign") }}
+                                            </text>
+                                            <text v-if="isEdit" class="detail-item__del" @tap="
+                                                onRemoveFolder(folder.FolderId, folder.FolderName)
+                                                ">
+                                                {{ t("SharePage.delete") }}
+                                            </text>
+                                        </view>
+                                    </view>
+                                    <input v-if="isEdit" v-model="folder.Notice" class="detail-item__sub"
+                                        :maxlength="50" :placeholder="t('SharePage.notePh')">
+                                    <text v-else-if="folder.Notice" class="detail-item__sub detail-item__sub--text">
+                                        {{ folder.Notice }}
                                     </text>
-                                    <input v-if="isEdit" v-model="folder.FolderLocalName" class="detail-item__input"
-                                        :maxlength="50" :placeholder="t('SharePage.folderPh')">
-                                    <text v-else class="detail-item__name">
-                                        {{ folder.FolderLocalName || t("SharePage.unnamed") }}
-                                    </text>
-                                    <view class="detail-item__acts">
-                                        <text v-if="!isEdit && folder.IsSharePermission" class="detail-item__link"
-                                            @tap="onAssignPermission(folder.FolderName)">
-                                            {{ t("SharePage.assign") }}
-                                        </text>
-                                        <text v-if="isEdit" class="detail-item__del" @tap="
-                                            onRemoveFolder(folder.FolderId, folder.FolderName)
-                                            ">
-                                            {{ t("SharePage.delete") }}
-                                        </text>
-                                    </view>
                                 </view>
-                                <input v-if="isEdit" v-model="folder.Notice" class="detail-item__sub" :maxlength="50"
-                                    :placeholder="t('SharePage.notePh')">
-                                <text v-else-if="folder.Notice" class="detail-item__sub detail-item__sub--text">
-                                    {{ folder.Notice }}
-                                </text>
                             </view>
                         </view>
 
-                        <!-- 待审成员（仅管理员）-->
+                        <!-- 待审成员（仅管理员）：点标题行折叠/展开 -->
                         <view v-if="isManager && detail.FamilyGroupRequests.length" class="detail-card">
-                            <text class="detail-card__title">
-                                {{ t("SharePage.requests") }}
-                            </text>
-                            <view v-for="(req, index) in detail.FamilyGroupRequests" :key="req.UserName || index"
-                                class="detail-item">
-                                <view class="detail-item__row">
-                                    <text class="detail-item__index">
-                                        {{ index + 1 }}
-                                    </text>
-                                    <text class="detail-item__name">
-                                        {{ req.UserLocalName || req.UserName }}
-                                    </text>
-                                    <view class="detail-item__acts">
-                                        <text class="detail-item__link" @tap="onApprove(req.UserName)">
-                                            {{ t("SharePage.approve") }}
-                                        </text>
-                                        <text class="detail-item__del" @tap="onReject(req.UserName)">
-                                            {{ t("SharePage.reject") }}
-                                        </text>
-                                    </view>
-                                </view>
-                                <text v-if="req.Notice" class="detail-item__sub detail-item__sub--text">
-                                    {{ req.Notice }}
+                            <view class="detail-card__head" @tap="toggleFold('requests')">
+                                <text class="detail-card__title">
+                                    {{ t("SharePage.requests") }}
                                 </text>
+                                <u-icon :name="folded.requests ? 'arrow-right' : 'arrow-down'" size="26"
+                                    color="#8f959e" />
+                            </view>
+                            <view v-show="!folded.requests">
+                                <view v-for="(req, index) in detail.FamilyGroupRequests" :key="req.UserName || index"
+                                    class="detail-item">
+                                    <view class="detail-item__row">
+                                        <text class="detail-item__index">
+                                            {{ index + 1 }}
+                                        </text>
+                                        <text class="detail-item__name">
+                                            {{ req.UserLocalName || req.UserName }}
+                                        </text>
+                                        <view class="detail-item__acts">
+                                            <text class="detail-item__link" @tap="onApprove(req.UserName)">
+                                                {{ t("SharePage.approve") }}
+                                            </text>
+                                            <text class="detail-item__del" @tap="onReject(req.UserName)">
+                                                {{ t("SharePage.reject") }}
+                                            </text>
+                                        </view>
+                                    </view>
+                                    <text v-if="req.Notice" class="detail-item__sub detail-item__sub--text">
+                                        {{ req.Notice }}
+                                    </text>
+                                </view>
                             </view>
                         </view>
 
-                        <!-- 正式成员 -->
+                        <!-- 正式成员：点标题行折叠/展开 -->
                         <view v-if="detail.FamilyGroupManagers.length" class="detail-card">
-                            <text class="detail-card__title">
-                                {{ t("SharePage.members") }}
-                            </text>
-                            <view v-for="(mem, index) in detail.FamilyGroupManagers" :key="mem.UserName || index"
-                                class="detail-item">
-                                <view class="detail-item__row">
-                                    <text class="detail-item__index">
-                                        {{ index + 1 }}
-                                    </text>
-                                    <text class="detail-item__name">
-                                        {{ mem.UserLocalName || mem.UserName }}
-                                    </text>
-                                    <view class="detail-item__acts">
-                                        <u-switch v-if="isEdit" :model-value="mem.IsManager" size="40"
-                                            :disabled="mem.UserName === detail.FamilyGroup.CreatedBy"
-                                            @change="() => toggleManager(mem.UserName)" />
-                                        <text v-else-if="mem.IsManager"
-                                            class="group-card__chip group-card__chip--admin">
-                                            {{ t("SharePage.chipManager") }}
+                            <view class="detail-card__head" @tap="toggleFold('members')">
+                                <text class="detail-card__title">
+                                    {{ t("SharePage.members") }}
+                                </text>
+                                <u-icon :name="folded.members ? 'arrow-right' : 'arrow-down'" size="26"
+                                    color="#8f959e" />
+                            </view>
+                            <view v-show="!folded.members">
+                                <view v-for="(mem, index) in detail.FamilyGroupManagers" :key="mem.UserName || index"
+                                    class="detail-item">
+                                    <view class="detail-item__row">
+                                        <text class="detail-item__index">
+                                            {{ index + 1 }}
                                         </text>
-                                        <text v-if="isEdit && mem.UserName !== detail.FamilyGroup.CreatedBy"
-                                            class="detail-item__del" @tap="onRemoveMember(mem.UserName)">
-                                            {{ t("SharePage.removeMember") }}
+                                        <text class="detail-item__name">
+                                            {{ mem.UserLocalName || mem.UserName }}
                                         </text>
+                                        <view class="detail-item__acts">
+                                            <u-switch v-if="isEdit" :model-value="mem.IsManager" size="40"
+                                                :active-color="primary"
+                                                :disabled="mem.UserName === detail.FamilyGroup.CreatedBy"
+                                                @change="() => toggleManager(mem.UserName)" />
+                                            <text v-else-if="mem.IsManager"
+                                                class="detail-hero__chip detail-hero__chip--admin">
+                                                {{ t("SharePage.chipManager") }}
+                                            </text>
+                                            <text v-if="isEdit && mem.UserName !== detail.FamilyGroup.CreatedBy"
+                                                class="detail-item__del" @tap="onRemoveMember(mem.UserName)">
+                                                {{ t("SharePage.removeMember") }}
+                                            </text>
+                                        </view>
                                     </view>
                                 </view>
                             </view>
                         </view>
 
-                        <!-- 目录权限（仅管理员）-->
+                        <!-- 目录权限（仅管理员）：点标题行折叠/展开 -->
                         <view v-if="isManager && detail.FamilyGroupPermissions.length" class="detail-card">
-                            <text class="detail-card__title">
-                                {{ t("SharePage.permissions") }}
-                            </text>
-                            <view v-for="(perm, index) in detail.FamilyGroupPermissions"
-                                :key="`${perm.FolderName}-${perm.UserName}-${index}`" class="detail-item">
-                                <view class="detail-item__row">
-                                    <text class="detail-item__index">
-                                        {{ index + 1 }}
-                                    </text>
-                                    <text class="detail-item__name">
-                                        {{ perm.FolderLocalName || perm.FolderName }}
-                                    </text>
-                                    <text class="detail-item__sub detail-item__sub--inline">
-                                        {{ perm.UserLocalName || perm.UserName }}
-                                    </text>
+                            <view class="detail-card__head" @tap="toggleFold('permissions')">
+                                <text class="detail-card__title">
+                                    {{ t("SharePage.permissions") }}
+                                </text>
+                                <u-icon :name="folded.permissions ? 'arrow-right' : 'arrow-down'" size="26"
+                                    color="#8f959e" />
+                            </view>
+                            <view v-show="!folded.permissions">
+                                <view v-for="(perm, index) in detail.FamilyGroupPermissions"
+                                    :key="`${perm.FolderName}-${perm.UserName}-${index}`" class="detail-item">
+                                    <view class="detail-item__row">
+                                        <text class="detail-item__index">
+                                            {{ index + 1 }}
+                                        </text>
+                                        <text class="detail-item__name">
+                                            {{ perm.FolderLocalName || perm.FolderName }}
+                                        </text>
+                                        <text class="detail-item__sub detail-item__sub--inline">
+                                            {{ perm.UserLocalName || perm.UserName }}
+                                        </text>
+                                    </view>
                                 </view>
                             </view>
                         </view>
@@ -663,8 +713,8 @@ function groupDesc(group: FamilyGroupEntity): string {
     padding: 8rpx 28rpx;
     border-radius: 999rpx;
     font-size: 26rpx;
-    color: #2b8fff;
-    background-color: #eaf4ff;
+    color: var(--fg-primary, #2b8fff);
+    background-color: var(--fg-soft, #eaf4ff);
 }
 
 /* ===== 列表卡片 ===== */
@@ -686,7 +736,7 @@ function groupDesc(group: FamilyGroupEntity): string {
     width: 88rpx;
     height: 88rpx;
     border-radius: 20rpx;
-    background: linear-gradient(135deg, #4a9dff, #2b8fff);
+    background: var(--fg-gradient, linear-gradient(135deg, #4a9dff, #2b8fff));
     flex-shrink: 0;
 }
 
@@ -731,8 +781,8 @@ function groupDesc(group: FamilyGroupEntity): string {
 }
 
 .group-card__chip--code {
-    color: #2b8fff;
-    background-color: #eaf4ff;
+    color: var(--fg-primary, #2b8fff);
+    background-color: var(--fg-soft, #eaf4ff);
 }
 
 .group-card__chip--admin {
@@ -746,25 +796,50 @@ function groupDesc(group: FamilyGroupEntity): string {
     color: #bfc3c9;
 }
 
-/* ===== 详情头卡 + 动作栏 ===== */
+/* ===== 详情头卡 + 动作栏（与媒体页同套：白底卡 + 主题点缀） ===== */
 .detail-hero {
+    position: relative;
     display: flex;
     align-items: center;
-    gap: 24rpx;
+    gap: 28rpx;
     margin: 0 4rpx 20rpx;
-    padding: 32rpx 28rpx;
-    border-radius: 24rpx;
-    background: linear-gradient(135deg, #4a9dff, #2b8fff);
+    padding: 40rpx 32rpx;
+    border-radius: 32rpx;
+    background-color: #ffffff;
+}
+
+/* 头卡右上角圆形动作钮（同媒体页）：修改=浅灰底主题图标，解散=浅红底红图标 */
+.detail-hero__acts {
+    position: absolute;
+    top: 28rpx;
+    right: 28rpx;
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+}
+
+.detail-hero__act {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 76rpx;
+    height: 76rpx;
+    border-radius: 50%;
+    background-color: #f2f3f5;
+
+    &--danger {
+        background-color: #ffeceb;
+    }
 }
 
 .detail-hero__avatar {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 96rpx;
-    height: 96rpx;
-    border-radius: 24rpx;
-    background-color: rgba(255, 255, 255, 0.24);
+    width: 140rpx;
+    height: 140rpx;
+    border-radius: 32rpx;
+    background-color: var(--fg-soft, #eaf4ff);
     flex-shrink: 0;
 }
 
@@ -773,22 +848,48 @@ function groupDesc(group: FamilyGroupEntity): string {
     flex: 1;
     min-width: 0;
     flex-direction: column;
-    gap: 12rpx;
+    gap: 10rpx;
 }
 
 .detail-hero__name {
-    font-size: 36rpx;
-    font-weight: 600;
-    color: #ffffff;
+    font-size: 40rpx;
+    font-weight: 700;
+    color: #1f2329;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
+/* 群编号独立成行：灰字说明（同媒体页专辑编号） */
+.detail-hero__code {
+    font-size: 26rpx;
+    color: #8f959e;
+}
+
 .detail-hero__chips {
     display: flex;
     flex-wrap: wrap;
-    gap: 10rpx;
+    gap: 12rpx;
+    margin-top: 6rpx;
+}
+
+/* 头卡胶囊：公开/可申请=主题浅底主题字，管理员=黄底橙字，成员=浅灰 */
+.detail-hero__chip {
+    padding: 6rpx 22rpx;
+    border-radius: 12rpx;
+    font-size: 24rpx;
+    color: var(--fg-primary, #2b8fff);
+    background-color: var(--fg-soft, #eaf4ff);
+
+    &--admin {
+        color: #ff9500;
+        background-color: #fff4e0;
+    }
+
+    &--member {
+        color: #5c626b;
+        background-color: #f2f3f5;
+    }
 }
 
 .detail-actions {
@@ -797,31 +898,32 @@ function groupDesc(group: FamilyGroupEntity): string {
     margin: 0 4rpx 20rpx;
 }
 
+/* 动作钮统一规格（同媒体页/option-picker）：等高圆角矩形 + 细描边，主钮纯色跟主题 */
 .detail-actions__btn {
     display: flex;
     align-items: center;
     justify-content: center;
     flex: 1;
-    height: 80rpx;
-    border-radius: 999rpx;
-    font-size: 28rpx;
+    height: 96rpx;
+    border: 2rpx solid #e5e6eb;
+    border-radius: 24rpx;
+    font-size: 32rpx;
     color: #5c626b;
     background-color: #ffffff;
 
     &--primary {
+        border-color: transparent;
+        font-weight: 600;
         color: #ffffff;
-        background-color: #2b8fff;
+        background-color: var(--fg-primary, #2b8fff);
     }
 
     &--join {
+        border-color: transparent;
+        font-weight: 600;
         color: #ffffff;
         background-color: #21b169;
     }
-
-    &--danger {
-        color: #f0413e;
-        background-color: #ffeceb;
-    }
 }
 
 /* ===== 分区卡片 ===== */
@@ -838,15 +940,22 @@ function groupDesc(group: FamilyGroupEntity): string {
     justify-content: space-between;
 }
 
+/* 标题行右侧一组：新建钮 + 折叠箭头 */
+.detail-card__head-acts {
+    display: flex;
+    align-items: center;
+    gap: 28rpx;
+}
+
 .detail-card__title {
-    font-size: 30rpx;
-    font-weight: 600;
+    font-size: 34rpx;
+    font-weight: 700;
     color: #1f2329;
 }
 
 .detail-card__add {
     font-size: 26rpx;
-    color: #2b8fff;
+    color: var(--fg-primary, #2b8fff);
 }
 
 .detail-field {
@@ -871,25 +980,25 @@ function groupDesc(group: FamilyGroupEntity): string {
 .detail-item__input,
 .detail-item__sub {
     box-sizing: border-box;
-    padding: 0 20rpx;
-    height: 68rpx;
+    padding: 0 24rpx;
+    height: 88rpx;
     border: 2rpx solid #e6e7ea;
-    border-radius: 14rpx;
-    font-size: 26rpx;
+    border-radius: 16rpx;
+    font-size: 28rpx;
     color: #1f2329;
-    background-color: #f7f8fa;
+    background-color: #ffffff;
 }
 
 .detail-field__textarea {
     box-sizing: border-box;
     width: 100%;
-    min-height: 120rpx;
-    padding: 16rpx 20rpx;
+    min-height: 200rpx;
+    padding: 20rpx 24rpx;
     border: 2rpx solid #e6e7ea;
-    border-radius: 14rpx;
-    font-size: 26rpx;
+    border-radius: 16rpx;
+    font-size: 28rpx;
     color: #1f2329;
-    background-color: #f7f8fa;
+    background-color: #ffffff;
 }
 
 .detail-empty {
@@ -951,7 +1060,7 @@ function groupDesc(group: FamilyGroupEntity): string {
 
 .detail-item__link {
     font-size: 24rpx;
-    color: #2b8fff;
+    color: var(--fg-primary, #2b8fff);
 }
 
 .detail-item__del {
diff --git a/uniapp/youjiala/src/pages/transport/transport.vue b/uniapp/youjiala/src/pages/transport/transport.vue
index 1719cfc..d10fc50 100644
--- a/uniapp/youjiala/src/pages/transport/transport.vue
+++ b/uniapp/youjiala/src/pages/transport/transport.vue
@@ -8,17 +8,23 @@
  */
 import type { UploadItem } from "@/stores/uploadQueue";
 import { useLocale } from "uview-pro";
-import { useAuthGuard, useThemeGradient } from "@/composables";
+import { computed } from "vue";
+import { mixWithWhite, useAuthGuard, useThemeTokens } from "@/composables";
 import { pageUrl } from "@/router/routes";
 import { useUploadQueueStore } from "@/stores/uploadQueue";
 
 const { t } = useLocale();
-const { themeBackground } = useThemeGradient();
+const { primary } = useThemeTokens();
 const uploadQueue = useUploadQueueStore();
 
 // 本页无后端数据要拉，守卫只做登录拦截（未登录直接送去登录页）
 useAuthGuard();
 
+/** 内容底：从 hero 浅端继续淡出到白，替代整页平铺的灰浊渐变 */
+const pageStyle = computed(() => ({
+  background: `linear-gradient(180deg, ${mixWithWhite(primary.value, 0.1)} 0%, #ffffff 46%)`,
+}));
+
 /** 字节数可读化：0/拿不到显示 -- */
 function formatSize(bytes: number): string {
   if (!bytes || bytes < 0) {
@@ -95,75 +101,89 @@ function onBack(): void {
 </script>
 
 <template>
-  <app-page :nav-title="t('TransportPage.title')" :custom-back="onBack">
-    <view class="transport-page" :style="{ background: themeBackground }">
-      <view v-if="!uploadQueue.items.length" class="transport-page__empty">
-        <u-empty mode="list" :text="t('TransportPage.empty')" icon-size="120" />
+  <app-page :hide-nav="true">
+    <view class="transport-page" :style="pageStyle">
+      <!-- 沉浸式主题头部（hero-navbar 组件即由此页风格抽出）：白胶囊返回 + 居中主题色标题 -->
+      <hero-navbar :title="t('TransportPage.title')" @back="onBack" />
+
+      <view class="transport-page__body">
+        <view v-if="!uploadQueue.items.length" class="transport-page__empty">
+          <u-empty mode="list" :text="t('TransportPage.empty')" icon-size="120" />
+        </view>
+
+        <template v-else>
+          <!-- 进行中队（排队 + 上传中） -->
+          <view v-if="uploadQueue.activeItems.length" class="transport-page__group">
+            <view class="transport-page__group-head">
+              <view class="transport-page__group-title">
+                <text class="transport-page__group-name">
+                  {{ t("TransportPage.active") }}
+                </text>
+                <text class="transport-page__group-count">({{ uploadQueue.activeItems.length }})</text>
+              </view>
+            </view>
+            <view v-for="item in uploadQueue.activeItems" :key="item.id" class="transport-item">
+              <view class="transport-item__row">
+                <u-icon :name="kindIcon(item.name)" size="44" :color="primary" />
+                <view class="transport-item__main">
+                  <text class="transport-item__name">
+                    {{ item.name }}
+                  </text>
+                  <text class="transport-item__status">
+                    {{ statusLine(item) }} · {{ formatSize(item.size) }}
+                  </text>
+                  <u-line-progress v-if="item.status === 'uploading'" :percent="item.progress" height="8"
+                    :show-percent="false" :active-color="primary" />
+                </view>
+                <view class="transport-item__btn" @tap="uploadQueue.cancel(item.id)">
+                  {{ t("TransportPage.cancel") }}
+                </view>
+              </view>
+              <view v-if="item.targetTrail.length" class="transport-item__crumb" @tap="goTargetFolder(item)">
+                <file-breadcrumb :items="item.targetTrail" show-single />
+              </view>
+            </view>
+          </view>
+
+          <!-- 已结束队（成功 / 失败 / 取消） -->
+          <view v-if="uploadQueue.doneItems.length" class="transport-page__group">
+            <view class="transport-page__group-head">
+              <view class="transport-page__group-title">
+                <text class="transport-page__group-name">
+                  {{ t("TransportPage.done") }}
+                </text>
+                <text class="transport-page__group-count">({{ uploadQueue.doneItems.length }})</text>
+              </view>
+              <text class="transport-page__clear" :style="{ color: primary }" @tap="uploadQueue.clearDone()">
+                {{ t("TransportPage.clearDone") }}
+              </text>
+            </view>
+            <view v-for="item in uploadQueue.doneItems" :key="item.id" class="transport-item">
+              <view class="transport-item__row">
+                <u-icon :name="kindIcon(item.name)" size="44" :color="statusColor(item)" />
+                <view class="transport-item__main">
+                  <text class="transport-item__name">
+                    {{ item.name }}
+                  </text>
+                  <text class="transport-item__status" :style="{ color: statusColor(item) }">
+                    {{ statusLine(item) }} · {{ formatSize(item.size) }}
+                  </text>
+                </view>
+                <view v-if="item.status !== 'success'" class="transport-item__btn" @tap="uploadQueue.retry(item.id)">
+                  {{ t("TransportPage.retry") }}
+                </view>
+                <!-- 删除降权：文字按钮改 30px 图标按钮（灰垃圾桶），少占位少干扰 -->
+                <view class="transport-item__icon-btn" @tap="uploadQueue.remove(item.id)">
+                  <u-icon name="trash" size="32" color="#8f959e" />
+                </view>
+              </view>
+              <view v-if="item.targetTrail.length" class="transport-item__crumb" @tap="goTargetFolder(item)">
+                <file-breadcrumb :items="item.targetTrail" show-single />
+              </view>
+            </view>
+          </view>
+        </template>
       </view>
-
-      <template v-else>
-        <!-- 进行中队（排队 + 上传中） -->
-        <view v-if="uploadQueue.activeItems.length" class="transport-page__group">
-          <text class="transport-page__group-title">
-            {{ t("TransportPage.active") }} ({{ uploadQueue.activeItems.length }})
-          </text>
-          <view v-for="item in uploadQueue.activeItems" :key="item.id" class="transport-item">
-            <view class="transport-item__row">
-              <u-icon :name="kindIcon(item.name)" size="44" color="#2b8fff" />
-              <view class="transport-item__main">
-                <text class="transport-item__name">
-                  {{ item.name }}
-                </text>
-                <text class="transport-item__status">
-                  {{ statusLine(item) }} · {{ formatSize(item.size) }}
-                </text>
-                <u-line-progress v-if="item.status === 'uploading'" :percent="item.progress" height="8"
-                  :show-percent="false" active-color="#2b8fff" />
-              </view>
-              <view class="transport-item__btn" @tap="uploadQueue.cancel(item.id)">
-                {{ t("TransportPage.cancel") }}
-              </view>
-            </view>
-            <view v-if="item.targetTrail.length" class="transport-item__crumb" @tap="goTargetFolder(item)">
-              <file-breadcrumb :items="item.targetTrail" show-single />
-            </view>
-          </view>
-        </view>
-
-        <!-- 已结束队（成功 / 失败 / 取消） -->
-        <view v-if="uploadQueue.doneItems.length" class="transport-page__group">
-          <view class="transport-page__group-head">
-            <text class="transport-page__group-title">
-              {{ t("TransportPage.done") }} ({{ uploadQueue.doneItems.length }})
-            </text>
-            <text class="transport-page__clear" @tap="uploadQueue.clearDone()">
-              {{ t("TransportPage.clearDone") }}
-            </text>
-          </view>
-          <view v-for="item in uploadQueue.doneItems" :key="item.id" class="transport-item">
-            <view class="transport-item__row">
-              <u-icon :name="kindIcon(item.name)" size="44" :color="statusColor(item)" />
-              <view class="transport-item__main">
-                <text class="transport-item__name">
-                  {{ item.name }}
-                </text>
-                <text class="transport-item__status" :style="{ color: statusColor(item) }">
-                  {{ statusLine(item) }} · {{ formatSize(item.size) }}
-                </text>
-              </view>
-              <view v-if="item.status !== 'success'" class="transport-item__btn" @tap="uploadQueue.retry(item.id)">
-                {{ t("TransportPage.retry") }}
-              </view>
-              <view class="transport-item__btn transport-item__btn--plain" @tap="uploadQueue.remove(item.id)">
-                {{ t("TransportPage.remove") }}
-              </view>
-            </view>
-            <view v-if="item.targetTrail.length" class="transport-item__crumb" @tap="goTargetFolder(item)">
-              <file-breadcrumb :items="item.targetTrail" show-single />
-            </view>
-          </view>
-        </view>
-      </template>
     </view>
   </app-page>
 </template>
@@ -171,9 +191,12 @@ function onBack(): void {
 <style lang="scss" scoped>
 .transport-page {
   min-height: calc(100vh - var(--window-top, 0px));
-  padding: 24rpx 24rpx calc(48rpx + env(safe-area-inset-bottom));
   box-sizing: border-box;
 
+  &__body {
+    padding: 24rpx 24rpx calc(48rpx + env(safe-area-inset-bottom));
+  }
+
   &__empty {
     padding-top: 200rpx;
   }
@@ -189,16 +212,28 @@ function onBack(): void {
   }
 
   &__group-title {
-    display: block;
+    display: flex;
+    align-items: baseline;
+    gap: 8rpx;
     padding: 8rpx 8rpx 16rpx;
-    font-size: 26rpx;
+  }
+
+  /* 分组名加重视觉锚点，计数退灰（对齐设计图「已结束 (5)」） */
+  &__group-name {
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #1f2329;
+  }
+
+  &__group-count {
+    font-size: 24rpx;
     color: #8f959e;
   }
 
+  /* 清空完成色由 script 内联下发（主题 primary），这里只留形态 */
   &__clear {
     padding: 8rpx 8rpx 16rpx;
     font-size: 26rpx;
-    color: #2979ff;
   }
 }
 
@@ -209,7 +244,10 @@ function onBack(): void {
   margin-bottom: 16rpx;
   padding: 24rpx;
   border-radius: 20rpx;
+  /* 表面统一三件套：页面下半部已淡成白，纯白卡必须靠描边 + 投影拉开边界 */
+  border: 2rpx solid rgba(31, 35, 41, 0.06);
   background-color: #ffffff;
+  box-shadow: 0 6rpx 18rpx rgba(31, 35, 41, 0.05);
 
   /* 行主体：图标 + 文本区 + 动作按钮横向排列（面包屑另占一行） */
   &__row {
@@ -218,9 +256,9 @@ function onBack(): void {
     gap: 20rpx;
   }
 
-  /* 目标目录面包屑行：整行可点，点任意段都跳回文件页的目标目录（单段也走同款卡片） */
+  /* 目标目录面包屑行：整行可点，点任意段都跳回文件页的目标目录；左缘与文件图标对齐 */
   &__crumb {
-    padding-left: 64rpx;
+    padding-left: 0;
   }
 
   &__main {
@@ -251,11 +289,18 @@ function onBack(): void {
     font-size: 24rpx;
     color: #2979ff;
     background-color: #eaf4ff;
+  }
 
-    &--plain {
-      color: #8f959e;
-      background-color: #f5f6f8;
-    }
+  /* 删除：30px（60rpx）图标按钮，浅灰圆底，视觉重量远低于文字胶囊 */
+  &__icon-btn {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 60rpx;
+    height: 60rpx;
+    border-radius: 50%;
+    background-color: #f5f6f8;
   }
 }
 </style>
diff --git a/uniapp/youjiala/src/pages/trash/trash.vue b/uniapp/youjiala/src/pages/trash/trash.vue
index 436d695..30ee1e6 100644
--- a/uniapp/youjiala/src/pages/trash/trash.vue
+++ b/uniapp/youjiala/src/pages/trash/trash.vue
@@ -234,9 +234,9 @@ function onMultiPurge(): void {
     <app-page :hide-nav="true">
         <view class="trash-page" :style="{ background: themeBackground }">
             <view class="trash-page__head">
-                <!-- 与文件页同款导航：标题固定「回收站」，返回箭头常显，传输/快捷入口开关关闭 -->
-                <page-navbar :title="t('TrashPage.title')" :show-back="true" :search-on="showSearch"
-                    :show-transfer="false" :show-quick-toggle="false" @back="onBack" @toggle-search="onToggleSearch" />
+                <!-- 与传输页同款沉浸头部：标题固定「回收站」，返回箭头常显，右侧搜索胶囊 -->
+                <hero-navbar :title="t('TrashPage.title')" :show-search="true" :search-on="showSearch" @back="onBack"
+                    @toggle-search="onToggleSearch" />
                 <search-input v-if="showSearch" v-model="keyword" :placeholder="t('FilePage.searchPlaceholder')"
                     @search="onSearch" />
                 <!-- 分类栏复用文件页组件：新建文件夹开关关闭 -->
diff --git a/uniapp/youjiala/src/stores/index.ts b/uniapp/youjiala/src/stores/index.ts
index d15d147..975a98e 100644
--- a/uniapp/youjiala/src/stores/index.ts
+++ b/uniapp/youjiala/src/stores/index.ts
@@ -15,5 +15,6 @@ pinia.use(
 export default pinia;
 
 export * from "./loginProfile";
+export * from "./mediaIntent";
 export * from "./tabbar";
 export * from "./uploadQueue";
diff --git a/uniapp/youjiala/src/stores/mediaIntent.ts b/uniapp/youjiala/src/stores/mediaIntent.ts
new file mode 100644
index 0000000..4611684
--- /dev/null
+++ b/uniapp/youjiala/src/stores/mediaIntent.ts
@@ -0,0 +1,27 @@
+import type { PublishKind } from "@/composables/usePublishAlbums";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+/**
+ * 多媒体页跨 tab 意图通道：文件页发布面板点「新建相册」时 reLaunch 过去
+ * （项目无原生 tabBar，切 tab 走 reLaunch 重建页面），落到 store 里等 media 页
+ * 首显回调消费，自动进入对应 kind 的创建态。
+ * 与 uploadQueue.requestNav 同一套路：登记 → 取件即清，防止下次切页重复触发。
+ */
+export const useMediaIntentStore = defineStore("mediaIntent", () => {
+  const pendingCreate = ref<PublishKind | null>(null);
+
+  /** 发布面板点「新建相册/音乐集/影视集」时登记 */
+  function requestCreate(kind: PublishKind): void {
+    pendingCreate.value = kind;
+  }
+
+  /** media 页 onShow 消费：取出即清 */
+  function takeCreate(): PublishKind | null {
+    const kind = pendingCreate.value;
+    pendingCreate.value = null;
+    return kind;
+  }
+
+  return { requestCreate, takeCreate };
+});