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 cc57fac..aa7d843 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
@@ -84,11 +84,24 @@ function onCardTap(file: FileItem): void {
             </view>
 
             <view class="fgl-card__body" @tap="onCardTap(file)">
-                <!-- 文件夹：纯 CSS 造型（图标库没有 folder），主体 + 左上页签 -->
-                <view v-if="file.kind === 'folder'" class="fgl-card__folder">
-                    <view class="fgl-card__folder-tab" />
+                <!-- 图标区包装：共享域的权限/收藏角标叠加在图标右上角（旧 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>
+                    <u-icon v-else :name="visualOf(file.kind)!.icon" size="88" :color="visualOf(file.kind)!.color" />
+                    <!-- 锁仅目录显示（旧系统：文件不挂锁）：绿开锁=有权限，灰闭锁=无权限；
+                         蓝分享标=已被收藏共享，两者文件/目录都可显示；
+                         已共享的目录不再叠绿开锁（开锁是有权限的子集，两个图标同屏冗余） -->
+                    <view v-if="(file.kind === 'folder' && file.permission && !file.shared) || file.shared"
+                        class="fgl-card__badges">
+                        <u-icon v-if="file.kind === 'folder' && file.permission && !file.shared"
+                            :name="file.permission === 'Y' ? 'lock-open' : 'lock'" size="28"
+                            :color="file.permission === 'Y' ? '#52c41a' : '#8c8c8c'" />
+                        <u-icon v-if="file.shared" name="share-fill" size="28" color="#1890ff" />
+                    </view>
                 </view>
-                <u-icon v-else :name="visualOf(file.kind)!.icon" size="88" :color="visualOf(file.kind)!.color" />
 
                 <view class="fgl-card__info">
                     <text class="fgl-card__name">
@@ -165,6 +178,23 @@ function onCardTap(file: FileItem): void {
     padding: 36rpx 12rpx 0;
 }
 
+/* 图标区包装：角标 absolute 定位的参照系 */
+.fgl-card__icon-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* 共享角标组：压在图标右上角（旧 MyComputerFamily badge 同位） */
+.fgl-card__badges {
+    position: absolute;
+    top: -8rpx;
+    right: -44rpx;
+    display: flex;
+    gap: 4rpx;
+}
+
 /* ---- 纯 CSS 文件夹：蓝色渐变圆角主体 + 左上页签 ---- */
 .fgl-card__folder {
     position: relative;
@@ -263,6 +293,12 @@ function onCardTap(file: FileItem): void {
     border-radius: 6rpx 6rpx 0 0;
 }
 
+/* 列表态图标小（72rpx），角标组贴紧一点不出格 */
+.file-grid-list--list .fgl-card__badges {
+    top: -12rpx;
+    right: -8rpx;
+}
+
 .file-grid-list--list .fgl-card__info {
     flex: 1;
     min-width: 0;
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 9962b1a..4c8cc56 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
@@ -36,6 +36,11 @@ defineProps({
     type: Boolean,
     default: true,
   },
+  /** 多选开关按钮：无批量动作的页面（如共享大厅）传 false */
+  showSelect: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const emit = defineEmits<{
@@ -77,8 +82,8 @@ const sortIconDark = sortGlyph("#1f2329");
       <view class="file-tab-filter__tool" @tap="emit('toggle-view')">
         <u-icon :name="viewMode === 'grid' ? 'list' : 'grid-fill'" size="36" color="#1f2329" />
       </view>
-      <!-- 多选开关：未进入给自绘方框箭头字形，进入后给关闭圆（高亮蓝） -->
-      <view class="file-tab-filter__tool" @tap="emit('toggle-select')">
+      <!-- 多选开关：未进入给自绘方框箭头字形，进入后给关闭圆（高亮蓝）；无批量动作的页面隐藏 -->
+      <view v-if="showSelect" class="file-tab-filter__tool" @tap="emit('toggle-select')">
         <image v-if="!selectMode" class="file-tab-filter__tool-img" :src="selectIconDark" mode="aspectFit" />
         <u-icon v-else name="close-circle" size="36" color="#2b8fff" />
       </view>
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 787a9b1..1dbaae5 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
@@ -34,6 +34,11 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  /** 输入框占位文案：缺省沿用「新建文件夹」语义，群描述/申请原因等场景由页面覆写 */
+  placeholder: {
+    type: String,
+    default: "",
+  },
 });
 
 const emit = defineEmits<{
@@ -75,8 +80,9 @@ function onConfirm(): void {
       <text class="folder-name-dialog__title">
         {{ props.title || t("FilePage.addFolder") }}
       </text>
-      <input v-model="name" class="folder-name-dialog__input" :placeholder="t('FilePage.folderPlaceholder')"
-        :maxlength="50" :disabled="props.submitting" confirm-type="done" @confirm="onConfirm">
+      <input v-model="name" class="folder-name-dialog__input"
+        :placeholder="props.placeholder || t('FilePage.folderPlaceholder')" :maxlength="50" :disabled="props.submitting"
+        confirm-type="done" @confirm="onConfirm">
       <view class="folder-name-dialog__actions">
         <view class="folder-name-dialog__btn" @click="emit('close')">
           <text class="folder-name-dialog__btn-text">
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
new file mode 100644
index 0000000..d27aa34
--- /dev/null
+++ b/uniapp/youjiala/src/components/folder-share-picker/folder-share-picker.vue
@@ -0,0 +1,392 @@
+<script setup lang="ts">
+/**
+ * 共享家人目标选择器（底部抽屉，共享大厅同款两态）：顶层列家人群组卡片
+ * （图2 样式），点群组进组后逐级浏览目录，「共享到此」提交当前所在层。
+ * 替代旧的收藏夹单选列表——目标不再限定收藏过的目录，群组根与任何有权限
+ * 的目录都能接收共享（后端 CreateFamilyGroupFolder 纯插入不校验目录）。
+ * 数据链与共享大厅同口径：FindFamilyDmsFolders 拉群组，FindFamilyBySearchCriteria
+ * 挂 [family_name + file_path] 两段（组根层标识 = 群组编号，子层 = 目录系统名）。
+ * 组件不发共享请求：点「共享到此」把当前层三元组 confirm 给页面，
+ * 页面按每个待共享文件组装 FamilyGroupFolderEntity 批量提交（多选文件一次发）。
+ */
+import type { PathNode } from "@/data/custom/fileBrowser";
+import { useLocale } from "uview-pro";
+import { computed, ref, watch } from "vue";
+import { DmsFileSearchCriteria } from "@/data/auto/dmsFileSearchCriteria";
+import { FamilyDmsFileViewDisplayData } from "@/data/auto/familyDmsFileViewDisplayData";
+import { SearchFilter } from "@/data/auto/searchFilter";
+import dmsFileService from "@/service/master/dmsFileService";
+
+/** 共享目标层：组 + 顶层目录系统名（旧系统取消共享按它查权限）+ 当前目录标识 */
+export interface ShareTarget {
+    familyName: string;
+    topFolderName: string;
+    filePath: string;
+}
+
+/** 浏览路径的一段：value = 群组编号（组根）或目录系统名（子层） */
+interface CrumbRow {
+    value: string;
+    displayName: string;
+}
+
+const props = defineProps({
+    /** 抽屉是否展开 */
+    visible: {
+        type: Boolean,
+        default: false,
+    },
+    /** 已选待共享文件数（顶部「已选择 N 项」提示） */
+    selectedCount: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const emit = defineEmits<{
+    (e: "close"): void;
+    /** 点「共享到此」，带上当前所在层的目标三元组 */
+    (e: "confirm", target: ShareTarget): void;
+}>();
+
+const { t } = useLocale();
+
+const loading = ref(false);
+/** 大厅顶层：群组卡列表（value = 群组编号） */
+const groups = ref<Array<{ value: string; label: string }>>([]);
+/** 组内浏览路径栈：[0] 恒为组根（群组编号），末项 = 当前所在目录 */
+const trail = ref<CrumbRow[]>([]);
+/** 当前群组编号；空串 = 停在大厅顶层 */
+const familyName = ref("");
+/** 当前层子目录行（只列目录，文件不能当共享目标） */
+const dirs = ref<Array<{ value: string; label: string; permitted: boolean }>>([]);
+
+const inGroup = computed(() => !!trail.value.length);
+
+/** 「共享到此」只在进入下一层目录后出现：群组名那一层（trail 只有组根一段）不允许直接共享 */
+const canShareHere = computed(() => trail.value.length >= 2);
+
+/** 「共享到此」的目标三元组：组根 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,
+    };
+});
+
+// 每次展开重拉群组并回大厅顶层：群组可能被别的端改过，缓存会弹进已消失的坑
+watch(
+    () => 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;
+    }
+}
+
+/** 查当前层子目录：两段过滤与共享大厅 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;
+    }
+}
+
+function enterGroup(group: { value: string; label: string }): void {
+    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();
+}
+
+/** 组内面包屑：首段=群组名，单击回该层（当前段组件内自行不响应） */
+const crumbItems = computed<PathNode[]>(() => trail.value.map(row => ({
+    value: row.value,
+    displayName: row.displayName,
+})));
+
+function onJump(index: number): void {
+    trail.value = trail.value.slice(0, index + 1);
+    void loadDirs();
+}
+
+function onShareHere(): void {
+    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" />
+        </view>
+    </u-popup>
+</template>
+
+<style lang="scss" scoped>
+.folder-share-picker {
+    padding: 8rpx 32rpx 0;
+    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;
+    }
+
+    &__close {
+        display: flex;
+        flex-shrink: 0;
+        padding: 12rpx;
+    }
+
+    &__picked {
+        display: block;
+        padding: 0 8rpx 16rpx;
+        font-size: 26rpx;
+        color: #5c626b;
+    }
+
+    &__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));
+    }
+}
+</style>
diff --git a/uniapp/youjiala/src/components/page-navbar/page-navbar.vue b/uniapp/youjiala/src/components/page-navbar/page-navbar.vue
index f6f130a..c52961d 100644
--- a/uniapp/youjiala/src/components/page-navbar/page-navbar.vue
+++ b/uniapp/youjiala/src/components/page-navbar/page-navbar.vue
@@ -47,6 +47,11 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    /** 搜索图标开关：无搜索场景的页面/层级传 false（如共享大厅顶层群组卡列表） */
+    showSearchToggle: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const emit = defineEmits<{
@@ -78,8 +83,8 @@ const transferIcon = computed(() => transferGlyph(props.transferring ? TRANSFER_
                     {{ props.transferring > 99 ? "99+" : props.transferring }}
                 </text>
             </view>
-            <!-- 切换搜索框显隐 -->
-            <view class="page-navbar__btn" @tap="emit('toggle-search')">
+            <!-- 切换搜索框显隐；无搜索场景的层级隐藏 -->
+            <view v-if="props.showSearchToggle" class="page-navbar__btn" @tap="emit('toggle-search')">
                 <u-icon name="search" size="38" :color="props.searchOn ? '#2b8fff' : '#8f959e'" />
             </view>
             <!-- 切换快捷入口区显隐；无快捷入口的页面隐藏 -->
diff --git a/uniapp/youjiala/src/components/photo-slide-player/photo-slide-player.vue b/uniapp/youjiala/src/components/photo-slide-player/photo-slide-player.vue
new file mode 100644
index 0000000..2a03da3
--- /dev/null
+++ b/uniapp/youjiala/src/components/photo-slide-player/photo-slide-player.vue
@@ -0,0 +1,1358 @@
+<script setup lang="ts">
+/**
+ * 相册展览播放器（对齐旧 WebVue components/basic/PhotoSlidePlayer.vue 的移动端 + H5 版）
+ * 默认以「演唱会」组合主题呈现（多图同台 + 灯柱/人海/聚光装饰，对齐旧 WebVue 默认 concert）；也可在特效菜单切到 fade 等单图 PPT 式转场。
+ * 核心能力：自动轮播、停留间隔、播放模式（顺序/随机/单曲循环后停）、按比例智能显示（contain/cover）、
+ * 入场特效族（淡入/放大/缩小/推屏/推进/百叶/拉幕/擦除/旋转/翻转/模糊/缓缓推近/垂落，方向随图片横竖自适应）、
+ * 组合主题（演唱会/婚礼/生日/展台/常用：多图同台 + 装饰特效）、缩略图列表、下载、隐藏控制区沉浸全屏。
+ *
+ * 跨端：比例测量走 uni.getImageInfo（三端可用）；DOM 全屏仅 H5 用元素 requestFullscreen，
+ * 其余端「隐藏控制区」即把图片撑满（等价旧系统的沉浸态）。下载走 uni.downloadFile 尽力而为。
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+export interface PhotoSlideItem {
+    url: string;
+    thumb?: string;
+    name?: string;
+    full?: string;
+}
+
+const props = withDefaults(
+    defineProps<{
+        items?: PhotoSlideItem[];
+        interval?: number;
+        controls?: boolean;
+    }>(),
+    { items: () => [], interval: 5, controls: true },
+);
+
+const emit = defineEmits<{
+    (e: "close"): void;
+    (e: "update:controls", visible: boolean): void;
+}>();
+
+const list = computed(() => props.items || []);
+const index = ref(0);
+const isPlaying = ref(true);
+const dwell = ref(props.interval);
+const elapsed = ref(0);
+const mode = ref<"list" | "one" | "random">("list");
+const fit = ref<"auto" | "contain" | "cover">("auto");
+const showList = ref(false);
+const menu = ref<"" | "effect" | "more">("");
+const stageRef = ref<any>(null);
+const localControls = ref(props.controls ?? true);
+
+/** 控制区显隐：本地态 + 回抛父组件（做整页全屏用） */
+const controlsVisible = computed(() => localControls.value);
+function setControls(v: boolean): void {
+    localControls.value = v;
+    emit("update:controls", v);
+}
+watch(
+    () => props.controls,
+    v => (localControls.value = v ?? true),
+);
+
+const current = computed<PhotoSlideItem | null>(
+    () => list.value[index.value] ?? null,
+);
+const currentFull = computed(
+    () => current.value?.full || current.value?.url || "",
+);
+
+// ===== 图片比例：uni.getImageInfo 预读，横/竖/方决定动作方向与显示方式 =====
+type Orient = "landscape" | "portrait" | "square";
+const orientMap = new Map<string, Orient>();
+const orientTick = ref(0);
+function measure(url?: string): void {
+    if (!url || orientMap.has(url)) {
+        return;
+    }
+    uni.getImageInfo({
+        src: url,
+        success: (res: any) => {
+            const w = res.width;
+            const h = res.height;
+            if (!w || !h) {
+                return;
+            }
+            orientMap.set(
+                url,
+                w / h > 1.1 ? "landscape" : h / w > 1.1 ? "portrait" : "square",
+            );
+            orientTick.value++;
+        },
+    });
+}
+const currentOrient = computed<Orient>(() => {
+    void orientTick.value;
+    const it = current.value;
+    return (it && orientMap.get(it.url)) || "square";
+});
+const effFit = computed<"contain" | "cover">(
+    () =>
+        fit.value === "auto"
+            ? (currentOrient.value === "landscape" ? "cover" : "contain")
+            : fit.value,
+);
+
+// ===== 特效定义 =====
+interface SlideEffect {
+    value: string;
+    label: string;
+    short: string;
+}
+const effects: SlideEffect[] = [
+    { value: "auto", label: "自动轮换（推荐）", short: "自动" },
+    { value: "concert", label: "演唱会主题", short: "演唱会" },
+    { value: "wedding", label: "婚礼主题", short: "婚礼" },
+    { value: "birthday", label: "生日主题", short: "生日" },
+    { value: "stage", label: "展台主题", short: "展台" },
+    { value: "fade", label: "淡入淡出", short: "淡入" },
+    { value: "zoom-in", label: "放大进入", short: "放大" },
+    { value: "zoom-out", label: "缩小进入", short: "缩小" },
+    { value: "push", label: "同向推进", short: "推进" },
+    { value: "slide", label: "推屏切换", short: "推屏" },
+    { value: "blinds", label: "百叶窗", short: "百叶" },
+    { value: "curtain", label: "拉幕展开", short: "拉幕" },
+    { value: "wipe", label: "擦除扫描", short: "擦除" },
+    { value: "rotate", label: "旋转旋入", short: "旋转" },
+    { value: "flip", label: "翻转翻页", short: "翻转" },
+    { value: "blur", label: "模糊渐显", short: "模糊" },
+    { value: "kenburns", label: "缓缓推近", short: "推近" },
+    { value: "drop", label: "垂落弹进", short: "垂落" },
+];
+// 默认「演唱会」组合主题（对齐旧 WebVue PhotoSlidePlayer 默认 concert：多图同台 + 灯柱/人海/聚光装饰）；
+// 用户仍可在特效菜单手动切到 fade 等单图 PPT 式转场或 auto 轮换
+const effect = ref("concert");
+
+/** 抽象特效 + 图片比例 -> 具体动画名（横走横向、竖走纵向） */
+function resolveFx(v: string, o: Orient): string {
+    switch (v) {
+        case "slide":
+            return o === "portrait" ? "slide-up" : "slide-left";
+        case "push":
+            return o === "portrait" ? "push-up" : "push-left";
+        case "blinds":
+            return o === "portrait" ? "blinds-h" : "blinds-v";
+        case "curtain":
+            return o === "portrait" ? "curtain-v" : "curtain-h";
+        case "wipe":
+            return o === "portrait" ? "wipe-up" : "wipe-left";
+        case "flip":
+            return o === "portrait" ? "flip-x" : "flip-y";
+        case "kenburns":
+            return o === "portrait" ? "kenburns-v" : "kenburns-h";
+        default:
+            return v;
+    }
+}
+
+const CYCLE = ["fade", "zoom-in", "slide-left", "blinds-v", "kenburns-h", "wipe-left", "flip-y", "curtain-h"];
+
+type LayoutKind = "single" | "duo" | "tilt" | "trio" | "circle" | "collage";
+type DecorKind = "none" | "frame" | "glow" | "spotlight" | "bubbles" | "petals" | "confetti" | "beams" | "crowd";
+interface Shot {
+    layout: LayoutKind;
+    fx: string;
+    decor: DecorKind;
+    /** 多图同台的相册是否持续轻微晃动（演唱会等热闹主题用） */
+    sway?: boolean;
+}
+
+interface CellGeom {
+    x: string;
+    y: string;
+    w: string;
+    h: string;
+    r?: string;
+    round?: boolean;
+}
+const LAYOUTS: Record<LayoutKind, CellGeom[]> = {
+    single: [{ x: "2%", y: "2%", w: "96%", h: "96%" }],
+    duo: [
+        { x: "1%", y: "6%", w: "50%", h: "84%" },
+        { x: "50%", y: "12%", w: "50%", h: "84%" },
+    ],
+    tilt: [
+        { x: "2%", y: "8%", w: "52%", h: "72%", r: "-4deg" },
+        { x: "46%", y: "20%", w: "52%", h: "70%", r: "4deg" },
+    ],
+    trio: [
+        { x: "2%", y: "26%", w: "32%", h: "48%", r: "-6deg" },
+        { x: "34%", y: "8%", w: "34%", h: "70%" },
+        { x: "66%", y: "26%", w: "32%", h: "48%", r: "6deg" },
+    ],
+    circle: [
+        { x: "10%", y: "10%", w: "70%", h: "70%", round: true },
+        { x: "56%", y: "50%", w: "40%", h: "40%", round: true },
+    ],
+    collage: [
+        { x: "3%", y: "4%", w: "60%", h: "66%" },
+        { x: "58%", y: "44%", w: "40%", h: "46%", r: "3deg" },
+        { x: "2%", y: "64%", w: "34%", h: "34%", r: "-4deg" },
+    ],
+};
+
+/**
+ * 组合特效库：演唱会/婚礼/生日/展台每套 = 一串「屏」编排，按序号轮换。
+ * 演唱会刻意「集各种特效一身」：单图/双图/错落/三图/圆形/拼贴 全布局 ×
+ * 淡入/放大/缩小/推屏/推进/百叶/拉幕/擦除/旋转/翻转/模糊/推近/垂落 全转场 ×
+ * 相框/气泡/花瓣/彩纸/灯柱/人海/聚光/光晕 全装饰 轮换，并让多图画册持续轻微晃动。
+ */
+const PRESETS: Record<string, Shot[]> = {
+    concert: [
+        { layout: "duo", fx: "zoom-out", decor: "beams", sway: true },
+        { layout: "single", fx: "blinds", decor: "crowd" },
+        { layout: "circle", fx: "zoom-in", decor: "spotlight", sway: true },
+        { layout: "trio", fx: "fade", decor: "confetti", sway: true },
+        { layout: "collage", fx: "wipe", decor: "bubbles", sway: true },
+        { layout: "single", fx: "rotate", decor: "frame" },
+        { layout: "circle", fx: "kenburns", decor: "petals" },
+        { layout: "duo", fx: "push", decor: "glow", sway: true },
+        { layout: "collage", fx: "zoom-in", decor: "beams", sway: true },
+        { layout: "trio", fx: "slide", decor: "crowd", sway: true },
+        { layout: "single", fx: "curtain", decor: "spotlight" },
+        { layout: "circle", fx: "flip", decor: "bubbles" },
+        { layout: "duo", fx: "blinds", decor: "frame", sway: true },
+        { layout: "collage", fx: "fade", decor: "confetti", sway: true },
+        { layout: "tilt", fx: "drop", decor: "petals", sway: true },
+        { layout: "trio", fx: "zoom-out", decor: "beams", sway: true },
+        { layout: "single", fx: "kenburns", decor: "crowd" },
+        { layout: "duo", fx: "wipe", decor: "spotlight", sway: true },
+        { layout: "circle", fx: "push", decor: "bubbles", sway: true },
+        { layout: "collage", fx: "rotate", decor: "glow", sway: true },
+    ],
+    wedding: [
+        { layout: "duo", fx: "zoom-in", decor: "petals", sway: true },
+        { layout: "circle", fx: "fade", decor: "frame" },
+        { layout: "single", fx: "blinds", decor: "glow" },
+        { layout: "tilt", fx: "push", decor: "petals", sway: true },
+        { layout: "circle", fx: "zoom-out", decor: "frame" },
+        { layout: "trio", fx: "slide", decor: "petals", sway: true },
+        { layout: "single", fx: "kenburns", decor: "glow" },
+        { layout: "duo", fx: "wipe", decor: "frame", sway: true },
+    ],
+    birthday: [
+        { layout: "duo", fx: "drop", decor: "confetti", sway: true },
+        { layout: "circle", fx: "zoom-in", decor: "bubbles" },
+        { layout: "collage", fx: "wipe", decor: "confetti", sway: true },
+        { layout: "single", fx: "rotate", decor: "confetti" },
+        { layout: "trio", fx: "slide", decor: "bubbles", sway: true },
+        { layout: "circle", fx: "blur", decor: "confetti" },
+        { layout: "tilt", fx: "push", decor: "bubbles", sway: true },
+        { layout: "duo", fx: "blinds", decor: "confetti", sway: true },
+    ],
+    stage: [
+        { layout: "trio", fx: "fade", decor: "spotlight", sway: true },
+        { layout: "collage", fx: "push", decor: "glow", sway: true },
+        { layout: "duo", fx: "zoom-out", decor: "spotlight", sway: true },
+        { layout: "circle", fx: "blinds", decor: "spotlight" },
+        { layout: "single", fx: "kenburns", decor: "glow" },
+        { layout: "tilt", fx: "wipe", decor: "spotlight", sway: true },
+        { layout: "trio", fx: "slide", decor: "spotlight", sway: true },
+    ],
+};
+
+const isCombo = computed(() => effect.value in PRESETS);
+
+/** 当前这一屏的编排 */
+const shot = computed<Shot>(() => {
+    const i = index.value;
+    const e = effect.value;
+    if (isCombo.value) {
+        const arr = PRESETS[e];
+        const p = arr[i % arr.length];
+        return { ...p, fx: resolveFx(p.fx, currentOrient.value) };
+    }
+    if (e === "auto") {
+        return {
+            layout: "single",
+            fx: CYCLE[i % CYCLE.length],
+            decor: "none",
+        };
+    }
+    return { layout: "single", fx: resolveFx(e, currentOrient.value), decor: "none" };
+});
+
+/** cells：多图同台时给每格一张图（越界回绕当前），单图只有一格 */
+const cells = computed(() => {
+    const geom = LAYOUTS[shot.value.layout];
+    return geom.map((g, k) => {
+        const idx = (index.value + k) % list.value.length;
+        const it = list.value[idx] ?? current.value;
+        return {
+            style: {
+                left: g.x,
+                top: g.y,
+                width: g.w,
+                height: g.h,
+                transform: `rotate(${g.r || "0deg"})`,
+                borderRadius: g.round ? "50%" : "12rpx",
+            },
+            url: it?.url || "",
+        };
+    });
+});
+
+// ===== 定时轮播 =====
+let timer: any = null;
+function tick(): void {
+    if (!isPlaying.value || list.value.length <= 1) {
+        return;
+    }
+    elapsed.value++;
+    if (elapsed.value >= dwell.value) {
+        elapsed.value = 0;
+        next();
+    }
+}
+function startTimer(): void {
+    stopTimer();
+    timer = setInterval(tick, 1000);
+}
+function stopTimer(): void {
+    if (timer) {
+        clearInterval(timer);
+        timer = null;
+    }
+}
+
+function go(to: number): void {
+    const n = list.value.length;
+    if (!n) {
+        return;
+    }
+    index.value = ((to % n) + n) % n;
+    elapsed.value = 0;
+    measure(list.value[index.value]?.url);
+}
+function next(): void {
+    const n = list.value.length;
+    if (!n) {
+        return;
+    }
+    if (mode.value === "one") {
+        elapsed.value = 0;
+        return;
+    }
+    if (mode.value === "random") {
+        if (n > 1) {
+            let r = index.value;
+            for (let guard = 0; guard < 16 && r === index.value; guard++) {
+                r = Math.floor(Math.random() * n);
+            }
+            go(r);
+        }
+        return;
+    }
+    // list：到末尾停不回绕（播完即止）
+    if (index.value >= n - 1) {
+        isPlaying.value = false;
+        return;
+    }
+    go(index.value + 1);
+}
+function prev(): void {
+    go(index.value - 1);
+}
+function togglePlay(): void {
+    isPlaying.value = !isPlaying.value;
+}
+function pick(i: number): void {
+    go(i);
+    showList.value = false;
+}
+
+const modeLabel = computed(
+    () => ({ list: "顺序", one: "单循环", random: "随机" }[mode.value]),
+);
+function cycleMode(): void {
+    mode.value = mode.value === "list" ? "one" : mode.value === "one" ? "random" : "list";
+}
+const fitLabel = computed(
+    () => ({ auto: "智能", contain: "完整", cover: "铺满" }[fit.value]),
+);
+function cycleFit(): void {
+    fit.value = fit.value === "auto" ? "contain" : fit.value === "contain" ? "cover" : "auto";
+}
+
+const intervals = [3, 5, 8, 10, 15];
+function setDwell(v: number): void {
+    dwell.value = v;
+    elapsed.value = 0;
+}
+
+function toggleMenu(m: "effect" | "more"): void {
+    menu.value = menu.value === m ? "" : m;
+}
+function setFx(v: string): void {
+    effect.value = v;
+    menu.value = "";
+    elapsed.value = 0;
+}
+
+// ===== 进度轴（整场轮播：已播时间 / 总时长，对齐旧 psp-progress）=====
+const totalTime = computed(() => dwell.value * list.value.length);
+const played = computed(
+    () => index.value * dwell.value + Math.min(elapsed.value, dwell.value),
+);
+const ratio = computed(() =>
+    totalTime.value > 0 ? Math.min(played.value / totalTime.value, 1) : 0,
+);
+function fmt(sec: number): string {
+    const s = Math.max(0, Math.floor(sec || 0));
+    const m = Math.floor(s / 60);
+    const r = s % 60;
+    return `${String(m).padStart(2, "0")}:${String(r).padStart(2, "0")}`;
+}
+const fxShort = computed(
+    () => effects.find(e => e.value === effect.value)?.short || "自动",
+);
+
+// ===== 沉浸（只隐底部控制区，舞台 flex 撞大占位；不走浏览器全屏 API，与旧系统一致）=====
+function toggleControls(): void {
+    menu.value = "";
+    setControls(!controlsVisible.value);
+}
+
+function onStageClick(): void {
+    if (menu.value) {
+        menu.value = "";
+        return;
+    }
+    togglePlay();
+}
+
+// ===== 下载 =====
+function onDownload(): void {
+    const url = currentFull.value;
+    if (!url) {
+        return;
+    }
+    uni.downloadFile({
+        url,
+        success: (res: any) => {
+            if (res.statusCode !== 200) {
+                uni.showToast({ title: "下载失败", icon: "none" });
+                return;
+            }
+            // #ifdef APP-PLUS || MP
+            uni.saveImageToPhotosAlbum?.({
+                filePath: res.tempFilePath,
+                fail: () => uni.previewImage({ urls: [res.tempFilePath] }),
+            });
+            // #endif
+            // #ifdef H5
+            uni.previewImage({ urls: [url], current: url });
+            // #endif
+        },
+        fail: () => uni.showToast({ title: "下载失败", icon: "none" }),
+    });
+}
+
+function precache(): void {
+    list.value.forEach(it => measure(it.url));
+}
+
+watch(
+    () => list.value.length,
+    (n) => {
+        if (n > 0 && index.value >= n) {
+            index.value = 0;
+        }
+        precache();
+    },
+);
+
+onMounted(() => {
+    startTimer();
+    precache();
+});
+onBeforeUnmount(() => {
+    stopTimer();
+});
+watch(isPlaying, () => (elapsed.value = 0));
+</script>
+
+<template>
+    <view class="psp">
+        <!-- 返回（非沉浸态显，左上角；刷新后无历史栈时由外层 closeMe 兜底回多媒体 tab） -->
+        <view v-if="controlsVisible" class="psp-back" @click.stop="emit('close')">
+            <u-icon name="arrow-left" size="40" color="#ffffff" />
+        </view>
+        <!-- 图片舞台 -->
+        <view ref="stageRef" class="psp-stage" :class="{ 'is-immersive': !controlsVisible }" @click="onStageClick">
+            <view v-if="current" :key="index" class="psp-scene" :class="`decor-${shot.decor}`">
+                <!-- 单图 -->
+                <view v-if="shot.layout === 'single'" class="psp-cell psp-cell--single"
+                    :style="{ width: '96%', height: '96%' }">
+                    <image class="psp-img anim-fx" :class="[
+                        `fx-${shot.fx}`,
+                        { 'fit-cover': effFit === 'cover', 'fit-contain': effFit === 'contain' },
+                    ]" :src="current.url" mode="aspectFill" />
+                </view>
+                <!-- 多图同台 -->
+                <template v-else>
+                    <view v-for="(c, i) in cells" :key="i" class="psp-cell anim-fx" :class="`fx-${shot.fx}`"
+                        :style="c.style">
+                        <image class="psp-img fit-cover" :class="{ 'is-sway': shot.sway }" :src="c.url"
+                            mode="aspectFill" />
+                    </view>
+                </template>
+
+                <!-- 装饰层 -->
+                <view v-if="shot.decor === 'bubbles'" class="psp-deco psp-bubbles">
+                    <text v-for="n in 12" :key="n" class="dbb dbb--bubble"
+                        :style="{ left: `${n * 7 % 100}%`, animationDelay: `${n % 6}s` }" />
+                </view>
+                <view v-else-if="shot.decor === 'petals'" class="psp-deco psp-petals">
+                    <text v-for="n in 14" :key="n" class="dbb dbb--petal"
+                        :style="{ left: `${n * 6 % 100}%`, animationDelay: `${n % 7}s` }" />
+                </view>
+                <view v-else-if="shot.decor === 'confetti'" class="psp-deco psp-confetti">
+                    <text v-for="n in 18" :key="n" class="dbb dbb--confetti"
+                        :style="{ left: `${n * 5 % 100}%`, animationDelay: `${n % 8}s` }" />
+                </view>
+                <view v-else-if="shot.decor === 'beams'" class="psp-deco psp-beams">
+                    <text v-for="n in 7" :key="n" class="dbb dbb--beam"
+                        :style="{ left: `${n * 13 % 100}%`, animationDelay: `${n % 5}s` }" />
+                </view>
+                <view v-else-if="shot.decor === 'crowd'" class="psp-deco psp-crowd">
+                    <text v-for="n in 24" :key="n" class="dbb dbb--stick"
+                        :style="{ left: `${n * 4 % 100}%`, animationDelay: `${(n % 10) * 0.2}s` }" />
+                </view>
+                <view v-else-if="shot.decor === 'glow'" class="psp-deco psp-glow" />
+                <view v-else-if="shot.decor === 'spotlight'" class="psp-deco psp-spot" />
+                <view v-else-if="shot.decor === 'frame'" class="psp-deco psp-frame" />
+            </view>
+
+            <view v-else class="psp-empty">
+                <u-icon name="photo" size="64" color="#7a7f87" />
+                <text class="psp-empty-text">暂无图片</text>
+            </view>
+
+            <!-- 收起控制区后的恢复入口 -->
+            <view v-if="!controlsVisible" class="psp-restore" @click.stop="toggleControls">
+                <u-icon name="eye" size="34" color="#ffffff" />
+            </view>
+        </view>
+
+        <!-- 控制条（三段：功能图标行 / 进度 / 主控制，对齐旧 psp-bar） -->
+        <view v-if="controlsVisible" class="psp-bar">
+            <!-- 功能图标行（右对齐） -->
+            <view class="psp-actions">
+                <view class="psp-act" @click.stop="toggleControls">
+                    <u-icon :name="controlsVisible ? 'eye-fill' : 'eye'" size="40" color="rgba(255,255,255,0.88)" />
+                </view>
+                <view class="psp-act" @click.stop="onDownload">
+                    <u-icon name="download" size="40" color="rgba(255,255,255,0.88)" />
+                </view>
+                <view class="psp-act" @click.stop="toggleMenu('effect')">
+                    <u-icon name="star-fill" size="40"
+                        :color="effect !== 'auto' ? '#7ff3e8' : 'rgba(255,255,255,0.88)'" />
+                    <text class="psp-badge" :class="{ 'is-on': effect !== 'auto' }">{{ fxShort }}</text>
+                </view>
+                <view class="psp-act" @click.stop="toggleMenu('more')">
+                    <view class="psp-rot90">
+                        <u-icon name="more-dot-fill" size="40" color="rgba(255,255,255,0.88)" />
+                    </view>
+                </view>
+
+                <!-- 特效弹层 -->
+                <scroll-view v-if="menu === 'effect'" scroll-y class="psp-pop psp-pop--effect">
+                    <text class="psp-pop__title">特效 · 当前图为「{{ currentOrient }}」方向，已自适应</text>
+                    <view v-for="e in effects" :key="e.value" class="psp-pop__item"
+                        :class="{ 'is-on': effect === e.value }" @click.stop="setFx(e.value)">
+                        <text>{{ e.label }}</text>
+                    </view>
+                </scroll-view>
+
+                <!-- 更多弹层 -->
+                <view v-if="menu === 'more'" class="psp-pop psp-pop--more">
+                    <text class="psp-pop__title">切换间隔</text>
+                    <view class="psp-pop__row">
+                        <text v-for="v in intervals" :key="v" class="psp-chip" :class="{ 'is-on': dwell === v }"
+                            @click.stop="setDwell(v)">
+                            {{ v }}s
+                        </text>
+                    </view>
+                    <text class="psp-pop__title">显示方式 · {{ fitLabel }}</text>
+                    <view class="psp-pop__row">
+                        <text class="psp-chip" @click.stop="cycleFit">切换为 {{ fit === 'auto' ? '完整' : fit === 'contain' ?
+                            '铺满' :
+                            '智能' }}</text>
+                    </view>
+                    <text class="psp-pop__title">播放模式 · {{ modeLabel }}</text>
+                    <view class="psp-pop__row">
+                        <text class="psp-chip" @click.stop="cycleMode">切换模式</text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 进度（整场轮播时间轴） -->
+            <view class="psp-progress">
+                <view class="psp-bar-track">
+                    <view class="psp-bar-fill" :style="{ width: `${ratio * 100}%` }" />
+                    <view class="psp-bar-thumb" :style="{ left: `${ratio * 100}%` }" />
+                </view>
+                <view class="psp-times">
+                    <text>{{ fmt(played) }}</text>
+                    <text>{{ fmt(totalTime) }}</text>
+                </view>
+            </view>
+
+            <!-- 主控制 -->
+            <view class="psp-controls">
+                <view class="psp-ctl" @click="cycleMode">
+                    <u-icon name="reload" size="42" color="#ffffff" />
+                    <text v-if="mode === 'one'" class="psp-mode-one">1</text>
+                </view>
+                <view class="psp-ctl" @click="prev">
+                    <u-icon name="skip-back-left" size="42" color="#ffffff" />
+                </view>
+                <view class="psp-play" @click.stop="togglePlay">
+                    <u-icon :name="isPlaying ? 'pause' : 'play-right-fill'" size="52" color="#0e6d7a" />
+                </view>
+                <view class="psp-ctl" @click="next">
+                    <u-icon name="skip-forward-right" size="42" color="#ffffff" />
+                </view>
+                <view class="psp-ctl" @click.stop="showList = true">
+                    <u-icon name="list" size="42" color="#ffffff" />
+                </view>
+            </view>
+        </view>
+
+        <!-- 缩略图抽屉 -->
+        <view v-if="showList" class="psp-sheet-mask" @click="showList = false">
+            <scroll-view scroll-y class="psp-sheet" @click.stop>
+                <text class="psp-sheet__title">图片列表</text>
+                <view class="psp-thumb-grid">
+                    <view v-for="(it, i) in list" :key="i" class="psp-thumb" :class="{ 'is-on': i === index }"
+                        @click="pick(i)">
+                        <image class="psp-thumb__img" :src="it.thumb || it.url" mode="aspectFill" />
+                        <text class="psp-thumb__no">{{ i + 1 }}</text>
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.psp {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    background:
+        radial-gradient(130% 55% at 50% -8%, rgba(255, 255, 255, 0.18), transparent 60%),
+        linear-gradient(178deg, #9aa8a3 0%, #7f9d9a 28%, #4d9093 54%, #12818f 78%, #0b7280 100%);
+    overflow: hidden;
+}
+
+.psp-stage {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.psp-scene {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.psp-cell {
+    position: absolute;
+    overflow: hidden;
+    box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.5);
+}
+
+.psp-cell--single {
+    left: 2%;
+    top: 2%;
+}
+
+.psp-img {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
+.fit-contain {
+    object-fit: contain;
+}
+
+.fit-cover {
+    object-fit: cover;
+}
+
+/* ===== 入场动画族（key 随 index 变化重放） ===== */
+.anim-fx {
+    animation-duration: 0.9s;
+    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
+    animation-fill-mode: both;
+}
+
+.fx-fade {
+    animation-name: pspFade;
+}
+
+.fx-zoom-in {
+    animation-name: pspZoomIn;
+}
+
+.fx-zoom-out {
+    animation-name: pspZoomOut;
+}
+
+.fx-slide-left {
+    animation-name: pspSlideL;
+}
+
+.fx-slide-up {
+    animation-name: pspSlideU;
+}
+
+.fx-push-left {
+    animation-name: pspSlideL;
+}
+
+.fx-push-up {
+    animation-name: pspSlideU;
+}
+
+.fx-wipe-left {
+    animation-name: pspWipeL;
+    transform-origin: left center;
+}
+
+.fx-wipe-up {
+    animation-name: pspWipeU;
+    transform-origin: center bottom;
+}
+
+.fx-blinds-v,
+.fx-blinds-h {
+    animation-name: pspBlinds;
+}
+
+.fx-curtain-h,
+.fx-curtain-v {
+    animation-name: pspFade;
+}
+
+.fx-rotate {
+    animation-name: pspRotate;
+}
+
+.fx-flip-y {
+    animation-name: pspFlipY;
+}
+
+.fx-flip-x {
+    animation-name: pspFlipX;
+}
+
+.fx-blur {
+    animation-name: pspBlur;
+}
+
+.fx-drop {
+    animation-name: pspDrop;
+}
+
+.fx-kenburns-h {
+    animation: pspKenBurnsH 6s ease-out both;
+    animation-duration: 6s;
+}
+
+.fx-kenburns-v {
+    animation: pspKenBurnsV 6s ease-out both;
+    animation-duration: 6s;
+}
+
+@keyframes pspFade {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes pspZoomIn {
+    from {
+        opacity: 0;
+        transform: scale(0.6);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes pspZoomOut {
+    from {
+        opacity: 0;
+        transform: scale(1.4);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes pspSlideL {
+    from {
+        opacity: 0;
+        transform: translateX(60%);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes pspSlideU {
+    from {
+        opacity: 0;
+        transform: translateY(60%);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes pspWipeL {
+    from {
+        clip-path: inset(0 100% 0 0);
+    }
+
+    to {
+        clip-path: inset(0 0 0 0);
+    }
+}
+
+@keyframes pspWipeU {
+    from {
+        clip-path: inset(100% 0 0 0);
+    }
+
+    to {
+        clip-path: inset(0 0 0 0);
+    }
+}
+
+@keyframes pspBlinds {
+    from {
+        opacity: 0;
+        transform: scaleY(0.8);
+    }
+
+    to {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+}
+
+@keyframes pspRotate {
+    from {
+        opacity: 0;
+        transform: rotate(-18deg) scale(0.8);
+    }
+
+    to {
+        opacity: 1;
+        transform: rotate(0) scale(1);
+    }
+}
+
+@keyframes pspFlipY {
+    from {
+        opacity: 0;
+        transform: perspective(1000px) rotateY(80deg);
+    }
+
+    to {
+        opacity: 1;
+        transform: perspective(1000px) rotateY(0);
+    }
+}
+
+@keyframes pspFlipX {
+    from {
+        opacity: 0;
+        transform: perspective(1000px) rotateX(70deg);
+    }
+
+    to {
+        opacity: 1;
+        transform: perspective(1000px) rotateX(0);
+    }
+}
+
+@keyframes pspBlur {
+    from {
+        opacity: 0;
+        filter: blur(24px);
+    }
+
+    to {
+        opacity: 1;
+        filter: blur(0);
+    }
+}
+
+@keyframes pspDrop {
+    0% {
+        opacity: 0;
+        transform: translateY(-70%) scale(1.1);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translateY(6%) scale(1);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+@keyframes pspKenBurnsH {
+    from {
+        transform: scale(1) translateX(0);
+    }
+
+    to {
+        transform: scale(1.18) translateX(-3%);
+    }
+}
+
+@keyframes pspKenBurnsV {
+    from {
+        transform: scale(1) translateY(0);
+    }
+
+    to {
+        transform: scale(1.18) translateY(-3%);
+    }
+}
+
+/* ===== 装饰特效 ===== */
+.psp-deco {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+.dbb {
+    position: absolute;
+    display: block;
+}
+
+.dbb--bubble {
+    bottom: -10%;
+    width: 28rpx;
+    height: 28rpx;
+    border-radius: 50%;
+    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(160, 210, 255, 0.35));
+    animation: pspRise 9s linear infinite;
+}
+
+.dbb--petal {
+    top: -8%;
+    width: 24rpx;
+    height: 34rpx;
+    border-radius: 60% 40% 55% 45% / 55% 50% 50% 45%;
+    background: rgba(255, 190, 205, 0.85);
+    animation: pspFall 8s linear infinite;
+}
+
+.dbb--confetti {
+    top: -8%;
+    width: 16rpx;
+    height: 24rpx;
+    background: #ff5b6e;
+    animation: pspFall 5s linear infinite;
+}
+
+.dbb--beam {
+    top: -10%;
+    width: 8rpx;
+    height: 130%;
+    background: linear-gradient(rgba(255, 255, 255, 0.55), transparent);
+    transform-origin: top center;
+    animation: pspSweep 4s ease-in-out infinite alternate;
+}
+
+.dbb--stick {
+    bottom: 0;
+    width: 8rpx;
+    height: 60rpx;
+    border-radius: 6rpx;
+    background: #6cf;
+    box-shadow: 0 0 12rpx 4rpx #6cf;
+    animation: pspWave 2.4s ease-in-out infinite alternate;
+}
+
+.psp-glow {
+    background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.22), transparent 60%);
+    animation: pspFade 1.6s ease-in-out infinite alternate;
+}
+
+.psp-spot {
+    background: radial-gradient(ellipse 40% 60% at 50% 40%, rgba(255, 255, 255, 0.28), transparent 62%);
+}
+
+.psp-frame {
+    border: 12rpx solid rgba(255, 255, 255, 0.85);
+    box-shadow: inset 0 0 0 4rpx rgba(0, 0, 0, 0.2);
+}
+
+@keyframes pspRise {
+    to {
+        transform: translateY(-130vh);
+    }
+}
+
+@keyframes pspFall {
+    to {
+        transform: translateY(130vh) rotate(240deg);
+    }
+}
+
+@keyframes pspSweep {
+    from {
+        transform: rotate(-16deg);
+    }
+
+    to {
+        transform: rotate(16deg);
+    }
+}
+
+@keyframes pspWave {
+    from {
+        transform: translateY(0) rotate(-8deg);
+    }
+
+    to {
+        transform: translateY(-14rpx) rotate(8deg);
+    }
+}
+
+/* 演唱会/组合：多图画册持续轻微来回晃动（scale 1.1 兜住旋转露角） */
+.psp-img.is-sway {
+    animation: pspSway 3.4s ease-in-out infinite;
+}
+
+@keyframes pspSway {
+    0% {
+        transform: rotate(-1.8deg) scale(1.1);
+    }
+
+    50% {
+        transform: rotate(1.8deg) scale(1.1);
+    }
+
+    100% {
+        transform: rotate(-1.8deg) scale(1.1);
+    }
+}
+
+/* ===== 空态 / 恢复 / 进度 ===== */
+.psp-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16rpx;
+}
+
+.psp-empty-text {
+    color: #7a7f87;
+    font-size: 26rpx;
+}
+
+.psp-restore {
+    position: absolute;
+    top: 24rpx;
+    right: 24rpx;
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.16);
+}
+
+/* 左上角返回（非沉浸态）：避开状态栏/刘海，浮于舞台之上 */
+.psp-back {
+    position: absolute;
+    top: calc(24rpx + env(safe-area-inset-top));
+    left: 24rpx;
+    z-index: 9;
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.28);
+}
+
+/* ===== 控制条（无背景，让 .psp 青绿渐变透出）===== */
+.psp-bar {
+    flex-shrink: 0;
+    padding: 20rpx 48rpx calc(44rpx + env(safe-area-inset-bottom));
+}
+
+.psp-actions {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 44rpx;
+    padding: 0 12rpx;
+}
+
+.psp-act {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12rpx 12rpx 24rpx;
+}
+
+.psp-rot90 {
+    transform: rotate(90deg);
+}
+
+.psp-badge {
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+    font-size: 18rpx;
+    line-height: 1;
+    padding: 4rpx 6rpx;
+    border-radius: 6rpx;
+    white-space: nowrap;
+    color: rgba(255, 255, 255, 0.75);
+    background: rgba(0, 0, 0, 0.25);
+}
+
+.psp-badge.is-on {
+    color: #0b7280;
+    background: #7ff3e8;
+}
+
+/* ===== 进度 ===== */
+.psp-progress {
+    margin-top: 28rpx;
+    padding: 0 4rpx;
+}
+
+.psp-bar-track {
+    position: relative;
+    height: 8rpx;
+    border-radius: 4rpx;
+    background: rgba(255, 255, 255, 0.32);
+}
+
+.psp-bar-fill {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: 4rpx;
+    background: #fff;
+    transition: width 1s linear;
+}
+
+.psp-bar-thumb {
+    position: absolute;
+    top: 50%;
+    width: 56rpx;
+    height: 20rpx;
+    border-radius: 10rpx;
+    background: #fff;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
+    /* 与 .psp-bar-fill 的 width 过渡同步，否则每秒 tick 滑块瞬移、填充还在追，两者错位 */
+    transition: left 1s linear;
+}
+
+.psp-times {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20rpx;
+    font-size: 22rpx;
+    color: rgba(255, 255, 255, 0.78);
+}
+
+/* ===== 主控制 ===== */
+.psp-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 24rpx;
+    padding: 0 28rpx;
+}
+
+.psp-ctl {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16rpx;
+}
+
+.psp-mode-one {
+    position: absolute;
+    right: 4rpx;
+    bottom: 8rpx;
+    font-size: 20rpx;
+    font-weight: 700;
+    color: #7ff3e8;
+}
+
+.psp-play {
+    width: 136rpx;
+    height: 136rpx;
+    border-radius: 50%;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 20rpx 52rpx rgba(0, 0, 0, 0.35);
+}
+
+/* ===== 弹层 ===== */
+.psp-pop {
+    position: absolute;
+    bottom: 96rpx;
+    right: 0;
+    z-index: 6;
+    width: 460rpx;
+    max-height: 560rpx;
+    padding: 20rpx;
+    border-radius: 20rpx;
+    background: rgba(6, 40, 44, 0.94);
+    box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.5);
+}
+
+.psp-pop__title {
+    display: block;
+    margin: 8rpx 0;
+    font-size: 22rpx;
+    color: #9098a3;
+}
+
+.psp-pop__item {
+    padding: 16rpx;
+    border-radius: 12rpx;
+    font-size: 26rpx;
+    color: #d4d8de;
+}
+
+.psp-pop__item.is-on {
+    color: #7ff3e8;
+    background: rgba(127, 243, 232, 0.14);
+}
+
+.psp-pop__row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12rpx;
+}
+
+.psp-chip {
+    padding: 8rpx 22rpx;
+    border-radius: 999rpx;
+    font-size: 24rpx;
+    color: #c7cbd1;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.psp-chip.is-on {
+    color: #0b7280;
+    background: #7ff3e8;
+}
+
+/* ===== 缩略图抽屉 ===== */
+.psp-sheet-mask {
+    position: fixed;
+    inset: 0;
+    z-index: 20;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: flex-end;
+}
+
+.psp-sheet {
+    width: 100%;
+    max-height: 62vh;
+    padding: 24rpx;
+    border-top-left-radius: 28rpx;
+    border-top-right-radius: 28rpx;
+    background: rgba(7, 38, 42, 0.98);
+    box-sizing: border-box;
+}
+
+.psp-sheet__title {
+    display: block;
+    margin-bottom: 16rpx;
+    font-size: 28rpx;
+    color: #e6e7ea;
+}
+
+.psp-thumb-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16rpx;
+}
+
+.psp-thumb {
+    position: relative;
+    width: 150rpx;
+    height: 150rpx;
+    border-radius: 12rpx;
+    overflow: hidden;
+    border: 3rpx solid transparent;
+}
+
+.psp-thumb.is-on {
+    border-color: #7ff3e8;
+}
+
+.psp-thumb__img {
+    width: 100%;
+    height: 100%;
+}
+
+.psp-thumb__no {
+    position: absolute;
+    right: 6rpx;
+    bottom: 4rpx;
+    font-size: 20rpx;
+    color: #fff;
+    text-shadow: 0 0 6rpx rgba(0, 0, 0, 0.9);
+}
+</style>
diff --git a/uniapp/youjiala/src/components/video-player/video-player.vue b/uniapp/youjiala/src/components/video-player/video-player.vue
new file mode 100644
index 0000000..56ed232
--- /dev/null
+++ b/uniapp/youjiala/src/components/video-player/video-player.vue
@@ -0,0 +1,1107 @@
+<script setup lang="ts">
+/**
+ * 影视厅播放器（对齐旧 WebVue components/basic/VideoPlayer.vue 的 uni 版）
+ * 核心：自绘控制区（原生 <video> 只负责解码）、原码/转码切换 + 续播、缓冲提示、
+ * 横竖屏 90° 旋转、全屏、进度/音量、倍速、定时关闭、下载、播放列表、隐藏控制区沉浸。
+ *
+ * 跨端：主体用 uni <video> + VideoContext（三端可用）；m3u8 在 App/小程序由原生解码，
+ * H5 由 hls.js 附着到 uni 内层 <video> 元素（仅 H5 动态 import，不进小程序包）。
+ * 音量只有 H5 可精确控制（其余端隐藏音量），非 H5 走原生全屏/播放降级不报错。
+ */
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { playModeGlyph } from "@/utils/playModeGlyph";
+
+/** 一条片源：url=原码(mp4)，m3u8=转码切片清单 */
+export interface VideoSource {
+    name: string;
+    url: string;
+    m3u8?: string;
+    pic?: string;
+}
+
+const props = withDefaults(
+    defineProps<{
+        videos?: VideoSource[];
+        /** 打开时从第几个开始播 */
+        startIndex?: number;
+        /** 挂上源后是否立即播放 */
+        autoPlay?: boolean;
+        /** 控制区是否显示（父页可 v-model:controls 做整页沉浸） */
+        controls?: boolean;
+    }>(),
+    { videos: () => [], startIndex: 0, autoPlay: false, controls: true },
+);
+const emit = defineEmits<{
+    (e: "close"): void;
+    (e: "update:controls", visible: boolean): void;
+}>();
+
+const VID = "vp-video";
+const instance = getCurrentInstance();
+
+/* ---------------- 基础状态 ---------------- */
+const videos = computed(() => props.videos || []);
+const index = ref(props.startIndex || 0);
+const current = computed<VideoSource | null>(() => videos.value[index.value] ?? null);
+const localControls = ref(props.controls ?? true);
+const controlsVisible = computed(() => localControls.value);
+function setControls(v: boolean): void {
+    localControls.value = v;
+    emit("update:controls", v);
+}
+watch(() => props.controls, v => (localControls.value = v ?? true));
+
+const isPlaying = ref(false);
+const buffering = ref(false);
+const currentTime = ref(0);
+const duration = ref(0);
+const bufferedRatio = ref(0);
+const volume = ref(0.9);
+const muted = ref(false);
+const rate = ref(1);
+const mode = ref<"list" | "one" | "random">("list");
+const showList = ref(false);
+const menu = ref<"" | "timer" | "volume" | "more">("");
+const useOriginal = ref(false);
+const downloaded = ref(false);
+// 定时 / 旋转相关状态提前声明（事件处理器 onEnded/onLoadedmetadata 会引用）
+const sleepMinutes = ref(0);
+const stopAfterEnd = ref(false);
+const sleepLeft = ref("");
+let sleepTimer: any = null;
+let sleepTick: any = null;
+const rotMode = ref<"auto" | "on" | "off">("auto");
+const landscape = ref(false);
+
+const rateOptions = [0.5, 0.75, 1, 1.25, 1.5, 2];
+const sleepOptions = [
+    { label: "不开启", value: 0 },
+    { label: "15 分", value: 15 },
+    { label: "30 分", value: 30 },
+    { label: "60 分", value: 60 },
+    { label: "播完当前", value: -1 },
+];
+const modeTitle = computed(
+    () => ({ list: "列表循环", one: "单集循环", random: "随机播放" }[mode.value]),
+);
+/** 播放模式图标（自绘 SVG）：非「列表循环」点亮青，否则白 */
+const modeGlyph = computed(() => playModeGlyph(mode.value !== "list" ? "#7ff3e8" : "rgba(255,255,255,0.88)"));
+const sourceTitle = computed(() => (useOriginal.value ? "原码" : "转码"));
+
+/* ---------------- 播放源选择 ---------------- */
+/** 像地址的才拿去播（排除 OrderKey 这类纯文件名） */
+function isPlayableUrl(u?: string): boolean {
+    return !!u && /^(?:https?:)?\/\//i.test(u);
+}
+const isHls = (url?: string): boolean => !!url && /\.m3u8(?:\?|#|$)/i.test(url);
+
+/** 当前选择的原始地址：转码优先 m3u8，原码取 url */
+const activeSrc = computed<string>(() => {
+    const v = current.value;
+    if (!v) {
+        return "";
+    }
+    if (useOriginal.value && isPlayableUrl(v.url)) {
+        return v.url;
+    }
+    return v.m3u8 || (isPlayableUrl(v.url) ? v.url : "");
+});
+
+/**
+ * 交给 uni <video> 的 src：H5 下 m3u8 且浏览器不能原生播放时置空，改由 hls.js 附着到内层元素；
+ * 其余情况（原生 mp4 / Safari 原生 HLS / App / 小程序）直接用 activeSrc。
+ * nativeHlsOk 只在 H5 探测赋值；非 H5 的条件编译块会在构建期被裁掉，此处始终返回 activeSrc。
+ */
+const nativeHlsOk = ref(false);
+const uniSrc = computed<string>(() => {
+    // #ifdef H5
+    if (isHls(activeSrc.value) && !nativeHlsOk.value) {
+        return "";
+    }
+    // #endif
+    return activeSrc.value;
+});
+
+/* ---------------- 共享可变状态（提前声明，供 hls 回调引用） ---------------- */
+let hls: any = null;
+let ctx: UniApp.VideoContext | null = null;
+let wasPlaying = false;
+let pendingSeek: number | null = null;
+/** 当前这条是否已自动回退过原视频（防止转码↔原码来回打转） */
+let triedOriginalFallback = false;
+
+/* ---------------- hls.js（仅 H5） ---------------- */
+function getInnerVideo(): any {
+    // #ifdef H5
+    const root: any = instance?.proxy?.$el;
+    if (root && root.querySelector) {
+        return root.querySelector("video") || document.querySelector(".uni-video-video");
+    }
+    return document.querySelector(".uni-video-video");
+    // #endif
+    // #ifndef H5
+    return null;
+    // #endif
+}
+function destroyHls(): void {
+    if (hls) {
+        try {
+            hls.destroy();
+        }
+        catch { /* ignore */ }
+        hls = null;
+    }
+}
+function attachHls(): void {
+    // #ifdef H5
+    destroyHls();
+    const url = activeSrc.value;
+    if (!isHls(url) || nativeHlsOk.value) {
+        return;
+    }
+    const el = getInnerVideo();
+    if (!el) {
+        // 拿不到内层 video 元素，hls 无法附着 → 回退原视频，别把空 src 留给 play
+        tryFallbackToOriginal();
+        return;
+    }
+    const pending = pendingSeek;
+    import("hls.js").then((mod: any) => {
+        const Hls = mod.default || mod.Hls;
+        if (!Hls || !Hls.isSupported()) {
+            if (!tryFallbackToOriginal()) {
+                uni.showToast({ title: "当前环境不支持 m3u8", icon: "none" });
+            }
+            return;
+        }
+        hls = new Hls({
+            capLevelToPlayerSize: true,
+            maxBufferLength: 30,
+            maxMaxBufferLength: 120,
+            enableWorker: true,
+        });
+        hls.loadSource(url);
+        hls.attachMedia(el);
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+            if (pending != null) {
+                el.currentTime = pending;
+            }
+            if (props.autoPlay || wasPlaying) {
+                el.play?.().catch(() => { });
+            }
+        });
+        hls.on(Hls.Events.ERROR, (_e: any, data: any) => {
+            if (!data?.fatal) {
+                return;
+            }
+            // 致命错误先尝试回退原视频一次（转码常因缺清单 / 分片失败）
+            if (tryFallbackToOriginal()) {
+                return;
+            }
+            if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
+                hls?.startLoad();
+            }
+            else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
+                hls?.recoverMediaError();
+            }
+            else {
+                uni.showToast({ title: "视频加载失败", icon: "none" });
+            }
+        });
+    }).catch(() => {
+        if (!tryFallbackToOriginal()) {
+            uni.showToast({ title: "m3u8 解码库加载失败", icon: "none" });
+        }
+    });
+    // #endif
+}
+
+/* ---------------- VideoContext ---------------- */
+function ensureCtx(): void {
+    if (!ctx) {
+        ctx = uni.createVideoContext(VID, instance);
+    }
+}
+
+/**
+ * 统一播放入口。H5 下直接对内层 <video> 元素 play() 并 catch：源未就绪时
+ * play() 抛的 NotSupportedError（no supported source）/ NotAllowedError 会被全局
+ * unhandledrejection 兑底弹窗接住造成误报，catch 掉即可消除（回退仍由 @error / hls 致命错误驱动）。
+ * uni 的 VideoContext.play() 不返回 promise，抓不住 rejection，所以 H5 不能用它。
+ */
+function playCtx(): void {
+    // #ifdef H5
+    const p = getInnerVideo()?.play?.();
+    if (p && typeof p.catch === "function") {
+        p.catch(() => { });
+    }
+    // #endif
+    // #ifndef H5
+    ctx?.play();
+    // #endif
+}
+
+function loadCurrent(autoplay: boolean): void {
+    ensureCtx();
+    currentTime.value = 0;
+    duration.value = 0;
+    bufferedRatio.value = 0;
+    buffering.value = false;
+    pendingSeek = null;
+    wasPlaying = autoplay;
+    triedOriginalFallback = false;
+    nextTick(() => {
+        // #ifdef H5
+        attachHls();
+        // #endif
+        if (autoplay) {
+            playCtx();
+        }
+    });
+}
+
+function toggle(): void {
+    ensureCtx();
+    if (isPlaying.value) {
+        ctx?.pause();
+    } else {
+        // 播完后再点：先回到开头再播，否则从结尾 play() 会一直卡在缓冲转圈
+        if (duration.value > 0 && currentTime.value >= duration.value - 0.5) {
+            ctx?.seek(0);
+            currentTime.value = 0;
+        }
+        wasPlaying = true;
+        playCtx();
+    }
+}
+
+function go(to: number, autoplay = true): void {
+    const n = videos.value.length;
+    if (!n) {
+        return;
+    }
+    index.value = ((to % n) + n) % n;
+    loadCurrent(autoplay);
+}
+function nextIndexValue(): number {
+    const n = videos.value.length;
+    if (n <= 1) {
+        return index.value;
+    }
+    if (mode.value === "random") {
+        let r = index.value;
+        for (let guard = 0; guard < 16 && r === index.value; guard++) {
+            r = Math.floor(Math.random() * n);
+        }
+        return r;
+    }
+    return (index.value + 1) % n;
+}
+function next(): void {
+    go(nextIndexValue());
+}
+function prev(): void {
+    go(index.value - 1);
+}
+function pick(i: number): void {
+    showList.value = false;
+    go(i);
+}
+function cycleMode(): void {
+    mode.value = mode.value === "list" ? "one" : mode.value === "one" ? "random" : "list";
+}
+
+/* ---------------- 原码 / 转码切换 ---------------- */
+function toggleSource(): void {
+    const v = current.value;
+    if (!v) {
+        return;
+    }
+    if (!isPlayableUrl(v.url)) {
+        uni.showToast({ title: "该视频没有原码", icon: "none" });
+        return;
+    }
+    pendingSeek = currentTime.value;
+    wasPlaying = isPlaying.value;
+    useOriginal.value = !useOriginal.value;
+    triedOriginalFallback = false;
+    ensureCtx();
+    nextTick(() => {
+        // #ifdef H5
+        attachHls();
+        // #endif
+        if (pendingSeek != null) {
+            ctx?.seek(pendingSeek);
+        }
+        if (wasPlaying) {
+            playCtx();
+        }
+    });
+}
+
+/**
+ * 转码源（默认 m3u8 预览）放不出来时自动切到原视频重试一次。
+ * 成功发起回退返回 true（调用方据此先不报错）；已是原码 / 无原码 / 本条已试过则返回 false。
+ */
+function tryFallbackToOriginal(): boolean {
+    const v = current.value;
+    if (useOriginal.value || !v || !isPlayableUrl(v.url) || triedOriginalFallback) {
+        return false;
+    }
+    triedOriginalFallback = true;
+    useOriginal.value = true;
+    pendingSeek = currentTime.value || null;
+    buffering.value = true;
+    ensureCtx();
+    nextTick(() => {
+        // #ifdef H5
+        attachHls();
+        // #endif
+        if (pendingSeek != null) {
+            ctx?.seek(pendingSeek);
+        }
+        // 只在原本就要播（自动连播 / 用户点过播放）时接着放，避免无手势自动播放被拦
+        if (wasPlaying) {
+            playCtx();
+        }
+    });
+    uni.showToast({ title: "转码不可用，已切换原视频", icon: "none" });
+    return true;
+}
+
+/* ---------------- video 事件 ---------------- */
+function onPlay(): void {
+    isPlaying.value = true;
+}
+function onPause(): void {
+    isPlaying.value = false;
+}
+function onWaiting(): void {
+    buffering.value = true;
+}
+function onPlaying(): void {
+    buffering.value = false;
+}
+function onCanplay(): void {
+    buffering.value = false;
+}
+function onTimeUpdate(e: { detail: { currentTime: number; duration: number } }): void {
+    // 画面在推进就说明已经播出来了，清掉缓冲转圈（uni video 的 playing/canplay 在 H5 不一定派发）
+    buffering.value = false;
+    currentTime.value = e.detail?.currentTime ?? currentTime.value;
+    if (e.detail?.duration && isFinite(e.detail.duration)) {
+        duration.value = e.detail.duration;
+    }
+}
+function onProgress(e: { detail: { buffered: number } }): void {
+    const b = e.detail?.buffered;
+    if (typeof b === "number") {
+        bufferedRatio.value = Math.min(1, Math.max(bufferedRatio.value, b / 100));
+    }
+}
+function onLoadedmetadata(e: { detail: { width: number; height: number } }): void {
+    const w = e.detail?.width ?? 0;
+    const h = e.detail?.height ?? 0;
+    if (w && h) {
+        landscape.value = w > h;
+    }
+    if (pendingSeek != null) {
+        ensureCtx();
+        ctx?.seek(pendingSeek);
+        pendingSeek = null;
+    }
+}
+function onEnded(): void {
+    buffering.value = false;
+    if (stopAfterEnd.value) {
+        stopAfterEnd.value = false;
+        return;
+    }
+    if (mode.value === "one") {
+        ensureCtx();
+        ctx?.seek(0);
+        playCtx();
+        return;
+    }
+    go(nextIndexValue());
+}
+function onError(): void {
+    // 转码源加载失败：先自动切原视频重试一次，还不行才报错
+    if (tryFallbackToOriginal()) {
+        return;
+    }
+    buffering.value = false;
+    isPlaying.value = false;
+    uni.showToast({ title: "视频加载失败", icon: "none" });
+}
+
+/* ---------------- 进度 / 音量 / 倍速 ---------------- */
+/* 自绘进度条触摸跳转：barRect 用 viewport 坐标，与 touch.clientX 对齐（播放器 fixed 全屏，无页面滚动） */
+let barRect: { left: number; width: number } | null = null;
+function measureBar(): void {
+    uni.createSelectorQuery().in(instance as any).select(".vp-bar").boundingClientRect((r: any) => {
+        if (r && r.width) {
+            barRect = { left: r.left, width: r.width };
+        }
+    }).exec();
+}
+function onBarTouch(e: any): void {
+    if (!duration.value) {
+        return;
+    }
+    if (!barRect) {
+        measureBar();
+        return;
+    }
+    const t = (e.touches && e.touches[0]) || (e.changedTouches && e.changedTouches[0]);
+    if (!t) {
+        return;
+    }
+    const ratio = Math.min(1, Math.max(0, (t.clientX - barRect.left) / barRect.width));
+    const target = ratio * duration.value;
+    currentTime.value = target;
+    ensureCtx();
+    ctx?.seek(target);
+}
+function setRate(v: number): void {
+    rate.value = v;
+    ensureCtx();
+    ctx?.playbackRate(v);
+}
+function applyVolume(): void {
+    // #ifdef H5
+    const el = getInnerVideo();
+    if (el) {
+        el.volume = muted.value ? 0 : volume.value;
+    }
+    // #endif
+}
+function setVolume(v: number): void {
+    volume.value = v / 100;
+    muted.value = v === 0;
+    applyVolume();
+}
+function toggleMute(): void {
+    muted.value = !muted.value;
+    ensureCtx();
+    if (muted.value) {
+        ctx?.playbackRate(rate.value);
+    }
+    applyVolume();
+    // #ifdef APP-PLUS || MP
+    ctx?.pause();
+    // #endif
+}
+
+/* ---------------- 定时关闭 ---------------- */
+function onSleep(min: number): void {
+    menu.value = "";
+    sleepMinutes.value = min;
+    stopAfterEnd.value = min === -1;
+    if (sleepTimer) {
+        clearTimeout(sleepTimer);
+        sleepTimer = null;
+    }
+    if (sleepTick) {
+        clearInterval(sleepTick);
+        sleepTick = null;
+    }
+    if (min <= 0) {
+        sleepLeft.value = "";
+        return;
+    }
+    const endAt = Date.now() + min * 60000;
+    sleepTick = setInterval(() => {
+        const s = Math.ceil((endAt - Date.now()) / 1000);
+        sleepLeft.value = s > 0 ? `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}` : "";
+    }, 1000);
+    sleepTimer = setTimeout(() => {
+        ensureCtx();
+        ctx?.pause();
+        sleepLeft.value = "";
+        sleepMinutes.value = 0;
+        clearInterval(sleepTick);
+        sleepTick = null;
+    }, min * 60000);
+}
+
+/* ---------------- 旋转 90° ---------------- */
+/** auto：横屏视频（w>h）自动转 90°；on/off：手动（状态已提前声明） */
+const rotated = computed(
+    () => (rotMode.value === "on" ? true : rotMode.value === "off" ? false : landscape.value),
+);
+function cycleRot(): void {
+    rotMode.value = rotated.value ? "off" : "on";
+}
+
+/* ---------------- 沉浸 / 下载 ---------------- */
+function toggleControls(): void {
+    menu.value = "";
+    setControls(!controlsVisible.value);
+}
+function toggleMenu(m: "timer" | "volume" | "more"): void {
+    menu.value = menu.value === m ? "" : m;
+}
+function onDownload(): void {
+    const v = current.value;
+    const url = v && (isPlayableUrl(v.url) ? v.url : v.m3u8 || v.url);
+    if (!url) {
+        return;
+    }
+    uni.downloadFile({
+        url,
+        success: (res: any) => {
+            // #ifdef APP-PLUS || MP
+            uni.saveFile?.({
+                tempFilePath: res.tempFilePath,
+                success: () => uni.showToast({ title: "已保存", icon: "none" }),
+            });
+            // #endif
+            // #ifdef H5
+            const a = document.createElement("a");
+            a.href = res.tempFilePath;
+            a.download = current.value?.name || "video";
+            a.click();
+            // #endif
+            downloaded.value = true;
+        },
+        fail: () => uni.showToast({ title: "下载失败", icon: "none" }),
+    });
+}
+
+function fmt(seconds: number): string {
+    const s = Math.max(0, Math.floor(seconds || 0));
+    return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+}
+const progressPercent = computed(() => (duration.value > 0 ? Math.min(100, (currentTime.value / duration.value) * 100) : 0));
+const bufferPercent = computed(() => Math.min(100, Math.max(0, bufferedRatio.value * 100)));
+
+onMounted(() => {
+    // #ifdef H5
+    const el = getInnerVideo();
+    nativeHlsOk.value = !!(el?.canPlayType
+        && el.canPlayType("application/vnd.apple.mpegurl"));
+    // #endif
+    if (videos.value.length) {
+        loadCurrent(props.autoPlay);
+    }
+    nextTick(() => measureBar());
+});
+onBeforeUnmount(() => {
+    destroyHls();
+    if (sleepTimer) {
+        clearTimeout(sleepTimer);
+    }
+    if (sleepTick) {
+        clearInterval(sleepTick);
+    }
+    ctx = null;
+});
+watch(() => videos.value.length, (n) => {
+    if (n && index.value >= n) {
+        index.value = 0;
+    }
+});
+watch(controlsVisible, (v) => {
+    if (v) {
+        nextTick(() => measureBar());
+    }
+});
+</script>
+
+<template>
+    <view class="vp">
+        <!-- 顶部：仅返回，绝对定位浮在画面上不占布局高度（列表入口在底部控制区 ≡） -->
+        <view v-if="controlsVisible" class="vp-back" @click="emit('close')">
+            <u-icon name="arrow-left" size="40" color="#ffffff" />
+        </view>
+
+        <!-- 画面区 -->
+        <view class="vp-stage" :class="{ 'is-rot': rotated }">
+            <video v-if="current" :id="VID" class="vp-media" :src="uniSrc" :poster="current.pic" :controls="false"
+                :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false"
+                :enable-progress-gesture="false" :object-fit="rotated ? 'cover' : 'contain'" @play="onPlay"
+                @pause="onPause" @waiting="onWaiting" @playing="onPlaying" @canplay="onCanplay"
+                @timeupdate="onTimeUpdate" @progress="onProgress" @loadedmetadata="onLoadedmetadata" @ended="onEnded"
+                @error="onError" @click="toggle" />
+            <view v-if="!current" class="vp-empty">
+                <u-icon name="camera-fill" size="80" color="#6b7280" />
+                <text class="vp-empty__text">暂无视频</text>
+            </view>
+
+            <!-- 缓冲提示 -->
+            <view v-if="buffering" class="vp-loading">
+                <u-loading mode="circle" size="44" color="#ffffff" />
+                <text class="vp-loading__text">加载中…</text>
+            </view>
+
+            <!-- 大播放键 -->
+            <view v-if="current && !isPlaying && !buffering" class="vp-bigplay" @click="toggle">
+                <u-icon name="play-right-fill" size="80" color="#ffffff" />
+            </view>
+
+            <!-- 收起控制区后的恢复入口 -->
+            <view v-if="!controlsVisible" class="vp-restore" @click="toggleControls">
+                <u-icon name="eye" size="34" color="#ffffff" />
+            </view>
+        </view>
+
+        <!-- 控制区 -->
+        <view v-if="current && controlsVisible" class="vp-body">
+            <!-- 功能图标行（对齐旧系统 VideoPlayer：源/下载/全屏/隐藏/旋转/定时/音量/更多） -->
+            <view class="vp-funcs">
+                <view class="vp-func" @click="toggleSource">
+                    <u-icon name="camera-fill" size="34" :color="useOriginal ? '#7ff3e8' : 'rgba(255,255,255,0.88)'" />
+                    <text class="vp-func__badge" :class="{ 'is-on': useOriginal }">{{ sourceTitle }}</text>
+                </view>
+                <view class="vp-func" @click="onDownload">
+                    <u-icon name="download" size="34" color="rgba(255,255,255,0.88)" />
+                    <text class="vp-func__badge" :class="{ 'is-on': downloaded }">{{ downloaded ? "ON" : "OFF" }}</text>
+                </view>
+                <view class="vp-func" @click="toggleControls">
+                    <u-icon :name="controlsVisible ? 'eye-off' : 'eye-fill'" size="34" color="rgba(255,255,255,0.88)" />
+                </view>
+                <view class="vp-func" @click="cycleRot">
+                    <u-icon name="reload" size="34" :color="rotated ? '#7ff3e8' : 'rgba(255,255,255,0.88)'" />
+                    <text v-if="rotMode === 'auto'" class="vp-func__badge is-on">A</text>
+                </view>
+                <view class="vp-func" @click="toggleMenu('timer')">
+                    <u-icon name="clock" size="34" :color="sleepMinutes !== 0 ? '#7ff3e8' : 'rgba(255,255,255,0.88)'" />
+                </view>
+                <!-- #ifdef H5 -->
+                <view class="vp-func" @click="toggleMenu('volume')">
+                    <u-icon :name="muted || volume === 0 ? 'volume-off-fill' : 'volume-fill'" size="34"
+                        color="rgba(255,255,255,0.88)" />
+                </view>
+                <!-- #endif -->
+                <view class="vp-func" @click="toggleMenu('more')">
+                    <u-icon name="more-dot-fill" size="34"
+                        :color="menu === 'more' ? '#7ff3e8' : 'rgba(255,255,255,0.88)'" />
+                </view>
+
+                <!-- 弹层：定时 -->
+                <view v-if="menu === 'timer'" class="vp-pop">
+                    <text class="vp-pop__title">定时关闭{{ sleepLeft ? ` · 剩 ${sleepLeft}` : "" }}</text>
+                    <view class="vp-pop__row">
+                        <text v-for="o in sleepOptions" :key="o.value" class="vp-chip"
+                            :class="{ 'is-on': sleepMinutes === o.value }" @click.stop="onSleep(o.value)">
+                            {{ o.label }}
+                        </text>
+                    </view>
+                </view>
+
+                <!-- 弹层：音量（仅 H5） -->
+                <!-- #ifdef H5 -->
+                <view v-if="menu === 'volume'" class="vp-pop">
+                    <text class="vp-pop__title">音量 · {{ muted ? "静音" : Math.round(volume * 100) }}</text>
+                    <slider :value="muted ? 0 : Math.round(volume * 100)" :min="0" :max="100" :block-size="18"
+                        active-color="#7ff3e8" @change="(e: any) => setVolume(e.detail.value)" />
+                    <view class="vp-pop__row">
+                        <text class="vp-chip" @click.stop="toggleMute">{{ muted ? "取消静音" : "静音" }}</text>
+                    </view>
+                </view>
+                <!-- #endif -->
+
+                <!-- 弹层：倍速 -->
+                <view v-if="menu === 'more'" class="vp-pop">
+                    <text class="vp-pop__title">倍速 · {{ rate }}x</text>
+                    <view class="vp-pop__row">
+                        <text v-for="r in rateOptions" :key="r" class="vp-chip" :class="{ 'is-on': rate === r }"
+                            @click.stop="setRate(r)">
+                            {{ r }}
+                        </text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 进度：自绘轨道（uni slider 轨道被 tap-area 内缩、滑块靠 -blockSize/2 定位，容易不居中且与时间左右不对齐） -->
+            <view class="vp-progress">
+                <view class="vp-bar" @touchstart="onBarTouch" @touchmove="onBarTouch">
+                    <view class="vp-bar__rail">
+                        <view class="vp-bar__buffer" :style="{ width: bufferPercent + '%' }" />
+                        <view class="vp-bar__fill" :style="{ width: progressPercent + '%' }" />
+                    </view>
+                    <view class="vp-bar__knob" :style="{ left: progressPercent + '%' }" />
+                </view>
+                <view class="vp-times">
+                    <text class="vp-progress__time">{{ fmt(currentTime) }}</text>
+                    <text class="vp-progress__time">{{ fmt(duration) }}</text>
+                </view>
+            </view>
+
+            <!-- 主控制 -->
+            <view class="vp-transport">
+                <view class="vp-func vp-tbtn" @click="cycleMode">
+                    <image class="vp-tbtn__glyph" :src="modeGlyph" mode="aspectFit" />
+                    <text v-if="mode === 'one'" class="vp-func__badge is-on">1</text>
+                </view>
+                <view class="vp-tbtn" @click="prev">
+                    <u-icon name="skip-back-left" size="44" color="#ffffff" />
+                </view>
+                <view class="vp-tbtn vp-tbtn--main" @click="toggle">
+                    <u-icon :name="isPlaying ? 'pause' : 'play-right-fill'" size="52" color="#0e6d7a" />
+                </view>
+                <view class="vp-tbtn" @click="next">
+                    <u-icon name="skip-forward-right" size="44" color="#ffffff" />
+                </view>
+                <view class="vp-tbtn" @click="showList = true">
+                    <u-icon name="list" size="40" color="rgba(255,255,255,0.88)" />
+                </view>
+            </view>
+            <text class="vp-mode-tip">{{ modeTitle }}</text>
+        </view>
+
+        <!-- 播放列表抽屉 -->
+        <view v-if="showList" class="vp-sheet-mask" @click="showList = false">
+            <scroll-view scroll-y class="vp-sheet" @click.stop>
+                <text class="vp-sheet__title">播放列表 · {{ videos.length }}</text>
+                <view v-for="(vc, i) in videos" :key="i" class="vp-item" :class="{ 'is-on': i === index }"
+                    @click="pick(i)">
+                    <text class="vp-item__no">{{ i + 1 }}</text>
+                    <text class="vp-item__name">{{ vc.name }}</text>
+                </view>
+            </scroll-view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.vp {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    background:
+        radial-gradient(130% 55% at 50% -8%, rgba(255, 255, 255, 0.18), transparent 60%),
+        linear-gradient(178deg, #9aa8a3 0%, #7f9d9a 28%, #4d9093 54%, #12818f 78%, #0b7280 100%);
+    overflow: hidden;
+}
+
+.vp-back {
+    position: absolute;
+    top: calc(16rpx + var(--status-bar-height));
+    left: 16rpx;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.28);
+}
+
+.vp-stage {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #000;
+    overflow: hidden;
+}
+
+.vp-media {
+    width: 100%;
+    height: 100%;
+    background: #000;
+}
+
+.vp-stage.is-rot .vp-media {
+    /* 旋转时把画面绝对定位居中、以视口长宽互换铺满并裁切（cover），自适应放大到填满画面区 */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100vh;
+    height: 100vw;
+    transform: translate(-50%, -50%) rotate(90deg);
+}
+
+.vp-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20rpx;
+}
+
+.vp-empty__text {
+    font-size: 26rpx;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.vp-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16rpx;
+}
+
+.vp-loading__text {
+    font-size: 24rpx;
+    color: #fff;
+}
+
+.vp-bigplay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 140rpx;
+    height: 140rpx;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(6, 56, 62, 0.5);
+    border: 2rpx solid rgba(255, 255, 255, 0.55);
+    box-shadow: 0 10rpx 26rpx rgba(0, 0, 0, 0.35);
+}
+
+.vp-restore {
+    position: absolute;
+    top: 24rpx;
+    right: 24rpx;
+    z-index: 9;
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(6, 56, 62, 0.5);
+    border: 2rpx solid rgba(255, 255, 255, 0.45);
+}
+
+.vp-body {
+    flex-shrink: 0;
+    padding: 16rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
+}
+
+.vp-funcs {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.vp-func {
+    position: relative;
+    min-width: 60rpx;
+    height: 64rpx;
+    padding: 0 6rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.vp-func.is-on {
+    border-radius: 14rpx;
+    background: rgba(127, 243, 232, 0.18);
+}
+
+.vp-func__badge {
+    font-size: 16rpx;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.vp-func__badge.is-on {
+    color: #eafcff;
+}
+
+.vp-pop {
+    position: absolute;
+    bottom: 88rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 560rpx;
+    padding: 24rpx;
+    border-radius: 20rpx;
+    background: rgba(6, 40, 44, 0.95);
+    box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.5);
+    z-index: 8;
+}
+
+.vp-pop__title {
+    display: block;
+    margin-bottom: 12rpx;
+    font-size: 22rpx;
+    color: #9098a3;
+}
+
+.vp-pop__row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12rpx;
+}
+
+.vp-chip {
+    padding: 8rpx 22rpx;
+    border-radius: 999rpx;
+    font-size: 24rpx;
+    color: #c7cbd1;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.vp-chip.is-on {
+    color: #0b7280;
+    background: #7ff3e8;
+}
+
+.vp-progress {
+    margin-top: 12rpx;
+}
+
+.vp-times {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 2rpx;
+}
+
+.vp-progress__time {
+    font-size: 22rpx;
+    color: rgba(255, 255, 255, 0.82);
+}
+
+.vp-bar {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 44rpx;
+}
+
+.vp-bar__rail {
+    position: relative;
+    width: 100%;
+    height: 6rpx;
+    border-radius: 999rpx;
+    background: rgba(255, 255, 255, 0.28);
+}
+
+.vp-bar__buffer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: 999rpx;
+    background: rgba(255, 255, 255, 0.45);
+}
+
+.vp-bar__fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    /* 左端圆角、右端直角：白色进度延伸到滑块中心处重合，不留圆角缺口 */
+    border-radius: 999rpx 0 0 999rpx;
+    background: #ffffff;
+}
+
+.vp-bar__knob {
+    position: absolute;
+    top: 50%;
+    width: 24rpx;
+    height: 24rpx;
+    margin-top: -12rpx;
+    margin-left: -12rpx;
+    border-radius: 50%;
+    background: #ffffff;
+    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.35);
+}
+
+.vp-transport {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20rpx;
+    margin-top: 12rpx;
+}
+
+.vp-tbtn {
+    min-width: 72rpx;
+    height: 72rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.vp-tbtn__glyph {
+    width: 28px;
+    height: 28px;
+}
+
+.vp-tbtn--main {
+    width: 112rpx;
+    height: 112rpx;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 10rpx 26rpx rgba(0, 0, 0, 0.28);
+}
+
+.vp-mode-tip {
+    display: block;
+    text-align: center;
+    margin-top: 8rpx;
+    font-size: 20rpx;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.vp-sheet-mask {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    display: flex;
+    align-items: flex-end;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.vp-sheet {
+    width: 100%;
+    max-height: 60vh;
+    padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
+    border-radius: 28rpx 28rpx 0 0;
+    background: rgba(7, 38, 42, 0.96);
+    box-sizing: border-box;
+}
+
+.vp-sheet__title {
+    display: block;
+    margin-bottom: 12rpx;
+    font-size: 26rpx;
+    color: #9098a3;
+}
+
+.vp-item {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    padding: 20rpx 12rpx;
+    border-bottom: 1rpx solid rgba(255, 255, 255, 0.06);
+}
+
+.vp-item.is-on {
+    color: #7ff3e8;
+}
+
+.vp-item__no {
+    width: 44rpx;
+    font-size: 24rpx;
+    color: rgba(255, 255, 255, 0.45);
+}
+
+.vp-item__name {
+    flex: 1;
+    min-width: 0;
+    font-size: 28rpx;
+    color: rgba(255, 255, 255, 0.9);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+</style>
diff --git a/uniapp/youjiala/src/components/vinyl-audio-player/vinyl-audio-player.vue b/uniapp/youjiala/src/components/vinyl-audio-player/vinyl-audio-player.vue
new file mode 100644
index 0000000..a52ae0d
--- /dev/null
+++ b/uniapp/youjiala/src/components/vinyl-audio-player/vinyl-audio-player.vue
@@ -0,0 +1,1245 @@
+<script setup lang="ts">
+/**
+ * 音乐厅黑胶播放器（对齐旧 WebVue components/basic/VinylAudioPlayer.vue 的 uni 版）
+ * 核心：黑胶唱片随播放旋转 + 唱臂、封面居中、LRC 歌词逐行同步滚动 + 点击定位、
+ * 顺序/单曲/随机模式、进度拖拽、音量、倍速、定时关闭、下载、播放列表抽屉、音效光晕、隐藏控制区沉浸。
+ *
+ * 跨端：H5 用双 <audio> 轮换 + 后台预载下一首（对齐旧系统，切歌零缓冲，仅 WiFi/以太网预载）；
+ * App / 小程序回退单 InnerAudioContext + 顺序切歌。歌词既支持内联 LRC 文本，也支持给地址时拉取解析。
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+export interface VinylTrack {
+    name: string;
+    author?: string;
+    url: string;
+    cover?: string;
+    lrc?: string;
+}
+
+const props = withDefaults(
+    defineProps<{ tracks?: VinylTrack[]; controls?: boolean }>(),
+    { tracks: () => [], controls: true },
+);
+const emit = defineEmits<{
+    (e: "close"): void;
+    (e: "update:controls", visible: boolean): void;
+}>();
+
+const tracks = computed(() => props.tracks || []);
+const index = ref(0);
+const isPlaying = ref(false);
+const currentTime = ref(0);
+const duration = ref(0);
+const volume = ref(0.9);
+const muted = ref(false);
+const rate = ref(1);
+const mode = ref<"list" | "one" | "random">("list");
+const showList = ref(false);
+const menu = ref<"" | "timer" | "volume" | "more">("");
+const effectOn = ref(false);
+const coverError = ref(false);
+const localControls = ref(props.controls ?? true);
+
+const controlsVisible = computed(() => localControls.value);
+watch(() => props.controls, v => (localControls.value = v ?? true));
+
+const current = computed<VinylTrack | null>(() => tracks.value[index.value] ?? null);
+const rateOptions = [0.5, 0.75, 1, 1.25, 1.5, 2];
+const sleepOptions = [0, 15, 30, 45, 60];
+const sleepLeft = ref(0);
+let sleepTimer: any = null;
+
+// ===== 播放内核：H5 双 <audio> 预载交换（对齐旧 VinylAudioPlayer.vue）；非 H5 单 InnerAudioContext =====
+let resumeAfterSwitch = false;
+/** 连续播放失败计数：整张列表都放不出时停止自动跳歌，避免打转 */
+let playFailCount = 0;
+/** 是否允许后台预载下一首：仅 H5 且 WiFi / 以太网下为真，省流量 */
+const preloadEnabled = ref(false);
+
+// ---- 下一首（随机模式不预载：下一首不确定，预载无意义）----
+const nextIdx = computed<number | null>(() => {
+    const n = tracks.value.length;
+    if (n <= 1 || mode.value === "random") {
+        return null;
+    }
+    return (index.value + 1) % n;
+});
+/** 空闲元素要预载的地址；不允许预载时为 undefined（空串会被浏览器当页面地址加载并报错） */
+const idleSrc = computed<string | undefined>(() => {
+    // #ifdef H5
+    if (!preloadEnabled.value) {
+        return undefined;
+    }
+    const ni = nextIdx.value;
+    return ni === null ? undefined : tracks.value[ni]?.url || undefined;
+    // #endif
+    // #ifndef H5
+    return undefined;
+    // #endif
+});
+
+/* ---------------- 非 H5：单 InnerAudioContext ---------------- */
+// #ifndef H5
+let ctx: UniApp.InnerAudioContext | null = null;
+function ensureCtx(): void {
+    if (ctx) {
+        return;
+    }
+    ctx = uni.createInnerAudioContext();
+    ctx.onPlay(() => (isPlaying.value = true));
+    ctx.onPause(() => (isPlaying.value = false));
+    ctx.onStop(() => (isPlaying.value = false));
+    ctx.onEnded(() => onEnded());
+    ctx.onTimeUpdate(() => {
+        currentTime.value = ctx?.currentTime ?? 0;
+        duration.value = ctx?.duration ?? 0;
+        syncLyric();
+    });
+    ctx.onError(() => (isPlaying.value = false));
+}
+// #endif
+
+/* ---------------- H5：双 <audio> 轮换 + 后台预载 ---------------- */
+// #ifdef H5
+let elA: HTMLAudioElement | null = null;
+let elB: HTMLAudioElement | null = null;
+let networkConn: any = null;
+const activeSlot = ref<"a" | "b">("a");
+const activeEl = computed<HTMLAudioElement | null>(() => (activeSlot.value === "a" ? elA : elB));
+const idleEl = computed<HTMLAudioElement | null>(() => (activeSlot.value === "a" ? elB : elA));
+
+function detectPreloadNetwork(): boolean {
+    const conn: any =
+        (navigator as any).connection || (navigator as any).mozConnection || (navigator as any).webkitConnection;
+    if (!conn || !conn.type) {
+        return false;
+    }
+    return conn.type === "wifi" || conn.type === "ethernet";
+}
+function refreshPreloadNetwork(): void {
+    preloadEnabled.value = detectPreloadNetwork();
+}
+function resolveUrl(url: string): string {
+    try {
+        return new URL(url, window.location.href).href;
+    }
+    catch {
+        return url;
+    }
+}
+/** 只有地址真的变了才写 src：交换角色时接任元素 src 已等于目标，不重写就不会重新缓冲 */
+function setElSrc(el: HTMLAudioElement | null, url?: string): void {
+    if (!el) {
+        return;
+    }
+    if (!url) {
+        if (el.getAttribute("src") !== null) {
+            el.pause();
+            el.removeAttribute("src");
+            el.load();
+        }
+        return;
+    }
+    if (el.src !== resolveUrl(url)) {
+        el.src = url;
+    }
+}
+/** 按当前角色把 active/idle 的 src 重绑，并套用音量/倍速 */
+function syncRoles(): void {
+    const cur = current.value?.url;
+    if (activeSlot.value === "a") {
+        setElSrc(elA, cur);
+        setElSrc(elB, idleSrc.value);
+    }
+    else {
+        setElSrc(elB, cur);
+        setElSrc(elA, idleSrc.value);
+    }
+    applyElSettings();
+}
+function applyElSettings(): void {
+    const el = activeEl.value;
+    if (!el) {
+        return;
+    }
+    el.volume = muted.value ? 0 : volume.value;
+    el.muted = muted.value || volume.value === 0;
+    el.playbackRate = rate.value;
+}
+/** 空闲元素是否「真的能播」目标地址：预载失败/还没缓冲时宁可不用，换过去会静默卡住 */
+function idleHas(url?: string): boolean {
+    if (!url) {
+        return false;
+    }
+    const el = idleEl.value;
+    // readyState >= 2 表示至少已有当前帧数据，play() 才能出声
+    if (!el || !el.src || el.error || el.readyState < 2) {
+        return false;
+    }
+    return el.src === resolveUrl(url);
+}
+function isActiveEl(t: EventTarget | null): boolean {
+    return !!t && t === activeEl.value;
+}
+function bindEl(el: HTMLAudioElement): void {
+    el.addEventListener("timeupdate", () => {
+        if (!isActiveEl(el)) {
+            return;
+        }
+        currentTime.value = el.currentTime;
+        if (isFinite(el.duration) && el.duration > 0) {
+            duration.value = el.duration;
+        }
+        syncLyric();
+    });
+    el.addEventListener("loadedmetadata", () => {
+        if (isActiveEl(el) && isFinite(el.duration)) {
+            duration.value = el.duration;
+        }
+    });
+    el.addEventListener("play", () => {
+        if (isActiveEl(el)) {
+            isPlaying.value = true;
+            playFailCount = 0;
+        }
+    });
+    el.addEventListener("pause", () => {
+        if (isActiveEl(el)) {
+            isPlaying.value = false;
+        }
+    });
+    el.addEventListener("ended", () => {
+        if (isActiveEl(el)) {
+            onEnded();
+        }
+    });
+    el.addEventListener("error", () => {
+        if (isActiveEl(el)) {
+            onPlayFailed();
+        }
+    });
+}
+// #endif
+
+/* ---------------- 统一引擎调用（按端分支） ---------------- */
+function engPlay(): void {
+    // #ifdef H5
+    const el = activeEl.value;
+    if (!el) {
+        return;
+    }
+    const p = el.play();
+    // 切歌后紧接着 play 常被浏览器以 AbortError 打断，稍等重试一次，仍失败则跳下一首
+    if (p && typeof p.catch === "function") {
+        p.catch(() => {
+            window.setTimeout(() => {
+                const c = activeEl.value;
+                if (!c || !c.paused) {
+                    return;
+                }
+                const p2 = c.play();
+                if (p2 && typeof p2.catch === "function") {
+                    p2.catch(() => onPlayFailed());
+                }
+            }, 250);
+        });
+    }
+    // #endif
+    // #ifndef H5
+    ensureCtx();
+    ctx?.play();
+    // #endif
+}
+function engPause(): void {
+    // #ifdef H5
+    activeEl.value?.pause();
+    // #endif
+    // #ifndef H5
+    ctx?.pause();
+    // #endif
+}
+function engSeek(t: number): void {
+    // #ifdef H5
+    const el = activeEl.value;
+    if (el && isFinite(t)) {
+        el.currentTime = Math.max(0, t);
+    }
+    // #endif
+    // #ifndef H5
+    ctx?.seek(t);
+    // #endif
+}
+function engApply(): void {
+    // #ifdef H5
+    applyElSettings();
+    // #endif
+    // #ifndef H5
+    if (ctx) {
+        ctx.volume = muted.value ? 0 : volume.value;
+        ctx.playbackRate = rate.value;
+    }
+    // #endif
+}
+
+/* ---------------- 切歌 ---------------- */
+function randomOtherIndex(): number {
+    const n = tracks.value.length;
+    if (n <= 1) {
+        return index.value;
+    }
+    let r = index.value;
+    for (let guard = 0; guard < 16 && r === index.value; guard++) {
+        r = Math.floor(Math.random() * n);
+    }
+    return r;
+}
+/** 切到第 i 首：H5 下若空闲元素已预载好目标就交换角色（零缓冲），否则换 src 重载 */
+function goToIndex(i: number): void {
+    const n = tracks.value.length;
+    if (!n) {
+        return;
+    }
+    const target = ((i % n) + n) % n;
+    // #ifdef H5
+    if (idleHas(tracks.value[target]?.url)) {
+        activeSlot.value = activeSlot.value === "a" ? "b" : "a";
+    }
+    // #endif
+    index.value = target;
+    // #ifdef H5
+    syncRoles();
+    // #endif
+}
+function playAt(i: number): void {
+    if (i === index.value) {
+        togglePlay();
+        return;
+    }
+    resumeAfterSwitch = true;
+    goToIndex(i);
+}
+function next(): void {
+    resumeAfterSwitch = true;
+    goToIndex(mode.value === "random" ? randomOtherIndex() : index.value + 1);
+}
+function prev(): void {
+    resumeAfterSwitch = true;
+    goToIndex(index.value - 1);
+}
+function onEnded(): void {
+    if (mode.value === "one") {
+        engSeek(0);
+        engPlay();
+        return;
+    }
+    resumeAfterSwitch = true;
+    goToIndex(mode.value === "random" ? randomOtherIndex() : index.value + 1);
+}
+/** 放不出来（加载失败 / play 被拒）：自动跳下一首，整表都失败则停下防打转 */
+function onPlayFailed(): void {
+    playFailCount += 1;
+    const n = tracks.value.length;
+    if (n <= 1 || playFailCount > n) {
+        return;
+    }
+    resumeAfterSwitch = true;
+    goToIndex(mode.value === "random" ? randomOtherIndex() : index.value + 1);
+}
+function pick(i: number): void {
+    showList.value = false;
+    playAt(i);
+}
+
+function cycleMode(): void {
+    mode.value = mode.value === "list" ? "one" : mode.value === "one" ? "random" : "list";
+}
+function setRate(v: number): void {
+    rate.value = v;
+    engApply();
+}
+function setVolume(v: number): void {
+    volume.value = v / 100;
+    muted.value = v === 0;
+    engApply();
+}
+function toggleMute(): void {
+    muted.value = !muted.value;
+    engApply();
+}
+function onSeek(e: { detail: { value: number } }): void {
+    engSeek(e.detail.value);
+    currentTime.value = e.detail.value;
+}
+function togglePlay(): void {
+    // #ifdef H5
+    const el = activeEl.value;
+    if (!el || !current.value) {
+        return;
+    }
+    if (el.paused) {
+        engPlay();
+    }
+    else {
+        el.pause();
+    }
+    // #endif
+    // #ifndef H5
+    ensureCtx();
+    if (!ctx) {
+        return;
+    }
+    if (isPlaying.value) {
+        ctx.pause();
+    }
+    else {
+        ctx.play();
+    }
+    // #endif
+}
+
+/* ---------------- 联动：换曲统一处理（两端共用） ---------------- */
+watch(current, async (t) => {
+    currentTime.value = 0;
+    duration.value = 0;
+    coverError.value = false;
+    lyricLines.value = [];
+    lyricIndex.value = -1;
+    if (!t) {
+        return;
+    }
+    // #ifndef H5
+    ensureCtx();
+    if (ctx) {
+        ctx.src = t.url;
+        ctx.volume = muted.value ? 0 : volume.value;
+        ctx.playbackRate = rate.value;
+    }
+    // #endif
+    await nextTick();
+    // #ifdef H5
+    applyElSettings();
+    const el = activeEl.value;
+    // 换到预载好的那个不会再触发 loadedmetadata，主动补读时长，否则进度条停在 0
+    if (el && isFinite(el.duration) && el.duration > 0) {
+        duration.value = el.duration;
+    }
+    // #endif
+    loadLrc(t.lrc);
+    if (resumeAfterSwitch) {
+        resumeAfterSwitch = false;
+        engPlay();
+    }
+});
+
+// #ifdef H5
+// 预载目标 / 网络门控变化后重绑 src（接任元素 src 未变则不重载）
+watch([idleSrc, preloadEnabled], () => syncRoles());
+// #endif
+
+// ===== 定时关闭 =====
+function setSleep(min: number): void {
+    menu.value = "";
+    if (sleepTimer) {
+        clearTimeout(sleepTimer);
+        sleepTimer = null;
+    }
+    sleepLeft.value = min;
+    if (min <= 0) {
+        return;
+    }
+    sleepTimer = setTimeout(() => {
+        engPause();
+        sleepLeft.value = 0;
+    }, min * 60 * 1000);
+}
+
+// ===== 歌词 =====
+interface LyricLine {
+    time: number;
+    text: string;
+}
+const LYRIC_TAG = /\[(\d{1,2}):(\d{1,2})(?:[.:](\d{1,3}))?\]/g;
+const lyricLines = ref<LyricLine[]>([]);
+const lyricIndex = ref(-1);
+// 歌词视口固定高度，内层整体位移让当前行居中（跨端用 upx2px 换算，配 CSS 过渡做动画）
+const LYRIC_LINE_H = 84;
+const LYRIC_VIEW_H = 360;
+const lyricOffset = computed(() => {
+    const idx = Math.max(0, lyricIndex.value);
+    return uni.upx2px(LYRIC_VIEW_H / 2 - LYRIC_LINE_H / 2 - idx * LYRIC_LINE_H);
+});
+function parseLrc(text: string): LyricLine[] {
+    const out: LyricLine[] = [];
+    text.split(/\r?\n/).forEach((raw) => {
+        const tags = Array.from(raw.matchAll(LYRIC_TAG));
+        if (!tags.length) {
+            return;
+        }
+        const body = raw.replace(LYRIC_TAG, "").trim();
+        tags.forEach((m) => {
+            const frac = m[3] ? Number(`0.${m[3]}`) : 0;
+            out.push({ time: Number(m[1]) * 60 + Number(m[2]) + frac, text: body });
+        });
+    });
+    return out.filter(l => l.text).sort((a, b) => a.time - b.time);
+}
+function loadLrc(src?: string): void {
+    lyricLines.value = [];
+    lyricIndex.value = -1;
+    if (!src) {
+        return;
+    }
+    if (src.includes("[")) {
+        lyricLines.value = parseLrc(src);
+        return;
+    }
+    // 视为地址：拉文本再解析（跨域/失败即当作无词）
+    uni.request({
+        url: src,
+        success: (res: any) => {
+            const text = typeof res?.data === "string" ? res.data : "";
+            if (current.value?.lrc === src && text) {
+                lyricLines.value = parseLrc(text);
+            }
+        },
+    });
+}
+function syncLyric(): void {
+    const t = currentTime.value;
+    let i = -1;
+    for (let k = 0; k < lyricLines.value.length; k++) {
+        if (lyricLines.value[k].time <= t + 0.2) {
+            i = k;
+        } else {
+            break;
+        }
+    }
+    lyricIndex.value = i;
+}
+function seekLyric(line: LyricLine): void {
+    engSeek(line.time);
+    currentTime.value = line.time;
+}
+
+// ===== 音效 / 下载 =====
+function toggleEffect(): void {
+    effectOn.value = !effectOn.value;
+}
+function toggleMenu(m: "timer" | "volume" | "more"): void {
+    menu.value = menu.value === m ? "" : m;
+}
+
+function onDownload(): void {
+    const url = current.value?.url;
+    if (!url) {
+        return;
+    }
+    uni.downloadFile({
+        url,
+        success: (res: any) => {
+            // #ifdef APP-PLUS || MP
+            uni.saveFile?.({
+                tempFilePath: res.tempFilePath,
+                success: () => uni.showToast({ title: "已保存", icon: "none" }),
+            });
+            // #endif
+            // #ifdef H5
+            const a = document.createElement("a");
+            a.href = res.tempFilePath;
+            a.download = current.value?.name || "audio";
+            a.click();
+            // #endif
+        },
+        fail: () => uni.showToast({ title: "下载失败", icon: "none" }),
+    });
+}
+
+function fmt(seconds: number): string {
+    const s = Math.max(0, Math.floor(seconds || 0));
+    return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+}
+
+onMounted(() => {
+    // #ifdef H5
+    elA = new Audio();
+    elB = new Audio();
+    elA.preload = "auto";
+    elB.preload = "auto";
+    bindEl(elA);
+    bindEl(elB);
+    refreshPreloadNetwork();
+    networkConn =
+        (navigator as any).connection || (navigator as any).mozConnection || (navigator as any).webkitConnection;
+    networkConn?.addEventListener?.("change", refreshPreloadNetwork);
+    syncRoles();
+    // #endif
+    // #ifndef H5
+    ensureCtx();
+    if (ctx && current.value) {
+        ctx.src = current.value.url;
+        ctx.volume = muted.value ? 0 : volume.value;
+        ctx.playbackRate = rate.value;
+    }
+    // #endif
+    if (current.value) {
+        loadLrc(current.value.lrc);
+    }
+});
+onBeforeUnmount(() => {
+    if (sleepTimer) {
+        clearTimeout(sleepTimer);
+    }
+    // #ifdef H5
+    networkConn?.removeEventListener?.("change", refreshPreloadNetwork);
+    if (elA) {
+        elA.pause();
+        elA.removeAttribute("src");
+        elA.load();
+    }
+    if (elB) {
+        elB.pause();
+        elB.removeAttribute("src");
+        elB.load();
+    }
+    elA = null;
+    elB = null;
+    // #endif
+    // #ifndef H5
+    ctx?.destroy();
+    ctx = null;
+    // #endif
+});
+watch(() => tracks.value.length, (n) => {
+    if (n && index.value >= n) {
+        index.value = 0;
+    }
+});
+</script>
+
+<template>
+    <view class="vap" :class="{ 'is-immersive': !controlsVisible, 'is-effect': effectOn && isPlaying }">
+        <!-- 返回（非沉浸态，左上角；刷新后无历史栈由外层 closeMe 兜底回多媒体 tab） -->
+        <view v-if="controlsVisible" class="vap-back" @click="emit('close')">
+            <u-icon name="arrow-left" size="40" color="#ffffff" />
+        </view>
+
+        <!-- 中部：唱片 + 歌词 -->
+        <view class="vap-main">
+            <view class="vinyl" :class="{ 'is-spin': isPlaying }">
+                <view class="vinyl__disc">
+                    <view class="vinyl__grooves" />
+                    <view class="vinyl__label">
+                        <image v-if="current?.cover && !coverError" class="vinyl__cover" :src="current.cover"
+                            mode="aspectFill" @error="coverError = true" />
+                        <u-icon v-else name="photo-fill" size="64" color="#cfd3da" />
+                        <view class="vinyl__hole" />
+                    </view>
+                </view>
+                <view class="vinyl__sheen" />
+                <view class="vinyl__arm" :class="{ 'is-play': isPlaying }">
+                    <view class="vinyl__arm-base" />
+                    <view class="vinyl__arm-tube" />
+                    <view class="vinyl__arm-head" />
+                </view>
+            </view>
+
+            <view v-if="lyricLines.length && controlsVisible" class="lyric">
+                <view class="lyric__inner" :style="{ transform: `translateY(${lyricOffset}px)` }">
+                    <view v-for="(line, i) in lyricLines" :key="i" class="lyric__line"
+                        :class="{ 'is-on': i === lyricIndex }" @click.stop="seekLyric(line)">
+                        {{ line.text }}
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 底部控制区 -->
+        <view v-if="controlsVisible" class="vap-bar">
+            <!-- 曲名 + 歌手（居中） -->
+            <view class="vap-title">
+                <view class="vap-title__row">
+                    <text class="vap-title__name">{{ current?.name || "" }}</text>
+                    <u-icon name="info-circle" size="26" color="rgba(255,255,255,0.5)" />
+                </view>
+                <text class="vap-title__author">{{ current?.author || "" }}</text>
+            </view>
+
+            <!-- 功能图标行 -->
+            <view class="vap-funcs">
+                <view class="vap-func" @click="onDownload">
+                    <u-icon name="download" size="34" color="#eafcff" />
+                </view>
+                <view class="vap-func" @click="toggleEffect">
+                    <u-icon name="level" size="34" :color="effectOn ? '#7ff3e8' : '#eafcff'" />
+                    <text class="vap-func__badge" :class="{ 'is-on': effectOn }">{{ effectOn ? "ON" : "OFF" }}</text>
+                </view>
+                <view class="vap-func" :class="{ 'is-on': menu === 'timer' }" @click="toggleMenu('timer')">
+                    <u-icon name="clock" size="34" :color="sleepLeft ? '#7ff3e8' : '#eafcff'" />
+                </view>
+                <view class="vap-func" @click="toggleMute">
+                    <u-icon :name="muted ? 'mic-off' : 'mic'" size="34" :color="muted ? '#8f959e' : '#eafcff'" />
+                </view>
+                <view class="vap-func" :class="{ 'is-on': menu === 'more' }" @click="toggleMenu('more')">
+                    <u-icon name="more-dot-fill" size="34" color="#eafcff" />
+                </view>
+
+                <!-- 弹层：定时关闭 -->
+                <view v-if="menu === 'timer'" class="vap-pop">
+                    <text class="vap-pop__title">定时关闭{{ sleepLeft ? ` · 剩 ${sleepLeft} 分钟` : "" }}</text>
+                    <view class="vap-pop__row">
+                        <text v-for="s in sleepOptions" :key="s" class="vap-chip" :class="{ 'is-on': sleepLeft === s }"
+                            @click.stop="setSleep(s)">
+                            {{ s === 0 ? "不开启" : `${s}分` }}
+                        </text>
+                    </view>
+                </view>
+
+                <!-- 弹层：更多（倍速 / 音量） -->
+                <view v-if="menu === 'more'" class="vap-pop">
+                    <text class="vap-pop__title">倍速 · {{ rate }}x</text>
+                    <view class="vap-pop__row">
+                        <text v-for="r in rateOptions" :key="r" class="vap-chip" :class="{ 'is-on': rate === r }"
+                            @click.stop="setRate(r)">
+                            {{ r }}
+                        </text>
+                    </view>
+                    <text class="vap-pop__title">音量 · {{ muted ? "静音" : Math.round(volume * 100) }}</text>
+                    <slider :value="muted ? 0 : Math.round(volume * 100)" :min="0" :max="100" :block-size="18"
+                        active-color="#7ff3e8" @change="(e: any) => setVolume(e.detail.value)" />
+                    <view class="vap-pop__row">
+                        <text class="vap-chip" @click.stop="toggleMute">{{ muted ? "取消静音" : "静音" }}</text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 进度 -->
+            <view class="vap-progress">
+                <text class="vap-progress__time">{{ fmt(currentTime) }}</text>
+                <slider class="vap-progress__slider" :value="currentTime" :min="0" :max="duration || 1" :block-size="14"
+                    active-color="#ffffff" background-color="rgba(255,255,255,0.25)" @change="onSeek" />
+                <text class="vap-progress__time vap-progress__time--r">{{ fmt(duration) }}</text>
+            </view>
+
+            <!-- 主控制 -->
+            <view class="vap-transport">
+                <view class="vap-tbtn" @click="cycleMode">
+                    <u-icon name="reload" size="42" :color="mode === 'list' ? '#eafcff' : '#7ff3e8'" />
+                    <text v-if="mode === 'one'" class="vap-func__badge is-on">1</text>
+                </view>
+                <view class="vap-tbtn" @click="prev">
+                    <u-icon name="skip-back-left" size="52" color="#eafcff" />
+                </view>
+                <view class="vap-tbtn vap-play" @click="togglePlay">
+                    <u-icon :name="isPlaying ? 'pause' : 'play-right-fill'" size="56" color="#eafcff" />
+                </view>
+                <view class="vap-tbtn" @click="next">
+                    <u-icon name="skip-forward-right" size="52" color="#eafcff" />
+                </view>
+                <view class="vap-tbtn" @click="showList = true">
+                    <u-icon name="list" size="46" color="#eafcff" />
+                </view>
+            </view>
+        </view>
+
+        <!-- 播放列表抽屉 -->
+        <view v-if="showList" class="vap-sheet-mask" @click="showList = false">
+            <scroll-view scroll-y class="vap-sheet" @click.stop>
+                <text class="vap-sheet__title">播放列表 · {{ tracks.length }}</text>
+                <view v-for="(tk, i) in tracks" :key="i" class="vap-item" :class="{ 'is-on': i === index }"
+                    @click="pick(i)">
+                    <text class="vap-item__no">{{ i + 1 }}</text>
+                    <view class="vap-item__main">
+                        <text class="vap-item__name">{{ tk.name }}</text>
+                        <text class="vap-item__author">{{ tk.author || "" }}</text>
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.vap {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    background: radial-gradient(130% 55% at 50% -8%, rgba(255, 255, 255, 0.18), transparent 60%),
+        linear-gradient(178deg, #9aa8a3 0%, #7f9d9a 28%, #4d9093 54%, #12818f 78%, #0b7280 100%);
+    overflow: hidden;
+}
+
+.is-effect .vinyl__disc {
+    animation: vapPulse 4s ease-in-out infinite alternate;
+}
+
+@keyframes vapPulse {
+    from {
+        box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.5), 0 0 40rpx rgba(127, 243, 232, 0.25);
+    }
+
+    to {
+        box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.5), 0 0 90rpx rgba(127, 243, 232, 0.55);
+    }
+}
+
+/* 左上角返回（非沉浸态） */
+.vap-back {
+    position: absolute;
+    top: calc(24rpx + env(safe-area-inset-top));
+    left: 24rpx;
+    z-index: 9;
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.22);
+}
+
+.vap-main {
+    position: relative;
+    z-index: 2;
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20rpx;
+    padding: 16rpx;
+}
+
+.vinyl {
+    position: relative;
+    width: 560rpx;
+    height: 560rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.vinyl__disc {
+    position: relative;
+    width: 540rpx;
+    height: 540rpx;
+    border-radius: 50%;
+    background: radial-gradient(circle at 50% 50%, #1c1e23 0 33%, #0d0e12 55%, #050507 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow:
+        0 26rpx 60rpx rgba(0, 0, 0, 0.55),
+        inset 0 0 0 2rpx rgba(255, 255, 255, 0.04),
+        inset 0 3rpx 10rpx rgba(255, 255, 255, 0.06);
+}
+
+.vinyl.is-spin .vinyl__disc {
+    animation: vapSpin 12s linear infinite;
+}
+
+@keyframes vapSpin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* 细密同心沟槽（随唱片旋转）：亮脊 + 暗槽交替，形成一圈一圈的纹理 */
+.vinyl__grooves {
+    position: absolute;
+    inset: 16rpx;
+    border-radius: 50%;
+    background: repeating-radial-gradient(circle at 50% 50%,
+            rgba(255, 255, 255, 0.08) 0 2rpx,
+            rgba(0, 0, 0, 0.4) 2rpx 6rpx,
+            rgba(255, 255, 255, 0) 6rpx 12rpx);
+}
+
+/* 静态高光反射：不随唱片旋转，营造黑胶质感（用柔和径向光，避免 conic 接缝产出的“划痕”） */
+.vinyl__sheen {
+    position: absolute;
+    inset: 10rpx;
+    border-radius: 50%;
+    pointer-events: none;
+    background:
+        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%),
+        radial-gradient(circle at 72% 80%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 40%);
+    opacity: 0.8;
+}
+
+.vinyl__label {
+    position: relative;
+    width: 280rpx;
+    height: 280rpx;
+    border-radius: 50%;
+    overflow: hidden;
+    background: #22252b;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 8rpx solid rgba(255, 255, 255, 0.06);
+    box-shadow: 0 0 0 6rpx rgba(0, 0, 0, 0.35);
+}
+
+.vinyl__cover {
+    width: 100%;
+    height: 100%;
+}
+
+/* 中心主轴孔 */
+.vinyl__hole {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 26rpx;
+    height: 26rpx;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background: radial-gradient(circle at 50% 40%, #4a4d52, #0a0b0d 70%);
+    box-shadow: 0 0 0 3rpx rgba(0, 0, 0, 0.5);
+}
+
+/* ===== 唱臂：绕顶部支点旋转，播放时摆向唱片 ===== */
+.vinyl__arm {
+    position: absolute;
+    top: -6rpx;
+    right: 2rpx;
+    width: 60rpx;
+    height: 300rpx;
+    z-index: 6;
+    pointer-events: none;
+    transform-origin: 30rpx 26rpx;
+    transform: rotate(-16deg);
+    transition: transform 0.9s cubic-bezier(0.34, 0.02, 0.2, 1);
+}
+
+.vinyl__arm.is-play {
+    transform: rotate(15deg);
+}
+
+/* 顶部配重块 / 支点 */
+.vinyl__arm-base {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 44rpx;
+    height: 52rpx;
+    border-radius: 12rpx;
+    background: linear-gradient(150deg, #f0f2f5 0%, #bcc1c9 42%, #7f858e 100%);
+    box-shadow:
+        inset 0 2rpx 3rpx rgba(255, 255, 255, 0.7),
+        inset 0 -3rpx 4rpx rgba(0, 0, 0, 0.25),
+        0 5rpx 12rpx rgba(0, 0, 0, 0.4);
+}
+
+.vinyl__arm-base::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 16rpx;
+    height: 16rpx;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background: radial-gradient(circle at 35% 30%, #ffffff, #9aa0a8 70%, #666b73);
+}
+
+/* 臂杆 */
+.vinyl__arm-tube {
+    position: absolute;
+    top: 42rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 8rpx;
+    height: 208rpx;
+    border-radius: 6rpx;
+    background: linear-gradient(90deg, #7f848c, #eef1f4 45%, #a7acb4);
+    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.35);
+}
+
+/* 唱头 / 拾音头（底部触片） */
+.vinyl__arm-head {
+    position: absolute;
+    bottom: 26rpx;
+    left: 50%;
+    width: 30rpx;
+    height: 44rpx;
+    transform: translateX(-50%) rotate(-16deg);
+    border-radius: 6rpx 6rpx 10rpx 10rpx;
+    background: linear-gradient(160deg, #e3e7ec, #9aa0a8 55%, #6a6f78);
+    box-shadow:
+        inset 0 2rpx 3rpx rgba(255, 255, 255, 0.6),
+        0 5rpx 10rpx rgba(0, 0, 0, 0.45);
+}
+
+.vinyl__arm-head::after {
+    content: "";
+    position: absolute;
+    bottom: -10rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 6rpx;
+    height: 14rpx;
+    border-radius: 0 0 3rpx 3rpx;
+    background: #565b63;
+}
+
+.lyric {
+    position: relative;
+    width: 100%;
+    height: 360rpx;
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
+}
+
+.lyric__inner {
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
+    will-change: transform;
+}
+
+.lyric__line {
+    display: flex;
+    height: 84rpx;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: 0 24rpx;
+    text-align: center;
+    font-size: 28rpx;
+    color: rgba(255, 255, 255, 0.4);
+    transition: color 0.45s ease, font-size 0.45s ease, opacity 0.45s ease;
+}
+
+.lyric__line.is-on {
+    font-size: 40rpx;
+    font-weight: 600;
+    color: #fff;
+    text-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.35);
+}
+
+.vap-bar {
+    position: relative;
+    z-index: 2;
+    flex-shrink: 0;
+    padding: 8rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
+}
+
+.vap-title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6rpx;
+    padding: 8rpx 0 20rpx;
+}
+
+.vap-title__row {
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+}
+
+.vap-title__name {
+    max-width: 520rpx;
+    font-size: 40rpx;
+    font-weight: 600;
+    color: #fff;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.vap-title__author {
+    font-size: 26rpx;
+    color: rgba(255, 255, 255, 0.72);
+}
+
+.vap-funcs {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.vap-func {
+    position: relative;
+    width: 72rpx;
+    height: 72rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.vap-func.is-on {
+    border-radius: 16rpx;
+    background: rgba(127, 243, 232, 0.18);
+}
+
+.vap-func__badge {
+    position: absolute;
+    top: -8rpx;
+    right: -8rpx;
+    padding: 0 6rpx;
+    font-size: 16rpx;
+    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.vap-func__badge.is-on {
+    color: #7ff3e8;
+}
+
+.vap-pop {
+    position: absolute;
+    bottom: 88rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 560rpx;
+    padding: 24rpx;
+    border-radius: 20rpx;
+    background: rgba(6, 40, 44, 0.96);
+    box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.5);
+    z-index: 8;
+}
+
+.vap-pop__title {
+    display: block;
+    margin: 12rpx 0 8rpx;
+    font-size: 22rpx;
+    color: #9098a3;
+}
+
+.vap-pop__row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12rpx;
+}
+
+.vap-chip {
+    padding: 8rpx 22rpx;
+    border-radius: 999rpx;
+    font-size: 24rpx;
+    color: #c7cbd1;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.vap-chip.is-on {
+    color: #0b7280;
+    background: #7ff3e8;
+}
+
+.vap-progress {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    margin-top: 8rpx;
+}
+
+.vap-progress__time {
+    font-size: 22rpx;
+    color: #eafcff;
+    width: 72rpx;
+}
+
+.vap-progress__time--r {
+    text-align: right;
+}
+
+.vap-progress__slider {
+    flex: 1;
+}
+
+.vap-transport {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12rpx 24rpx 0;
+    margin-top: 12rpx;
+}
+
+.vap-tbtn {
+    position: relative;
+    width: 90rpx;
+    height: 90rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.vap-play {
+    width: 128rpx;
+    height: 128rpx;
+    border-radius: 50%;
+    border: 2rpx solid rgba(255, 255, 255, 0.55);
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.vap-sheet-mask {
+    position: fixed;
+    inset: 0;
+    z-index: 20;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: flex-end;
+}
+
+.vap-sheet {
+    width: 100%;
+    max-height: 62vh;
+    padding: 24rpx;
+    border-top-left-radius: 28rpx;
+    border-top-right-radius: 28rpx;
+    background: rgba(7, 38, 42, 0.98);
+    box-sizing: border-box;
+}
+
+.vap-sheet__title {
+    display: block;
+    margin-bottom: 12rpx;
+    font-size: 28rpx;
+    color: #e6e7ea;
+}
+
+.vap-item {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    padding: 20rpx 8rpx;
+    border-bottom: 2rpx solid rgba(255, 255, 255, 0.06);
+}
+
+.vap-item.is-on .vap-item__name {
+    color: #7ff3e8;
+}
+
+.vap-item__no {
+    width: 40rpx;
+    font-size: 24rpx;
+    color: #8f959e;
+}
+
+.vap-item__main {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.vap-item__name {
+    font-size: 28rpx;
+    color: #dfe2e7;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.vap-item__author {
+    font-size: 22rpx;
+    color: #8f959e;
+}
+</style>
diff --git a/uniapp/youjiala/src/composables/index.ts b/uniapp/youjiala/src/composables/index.ts
index 4e06709..4145d72 100644
--- a/uniapp/youjiala/src/composables/index.ts
+++ b/uniapp/youjiala/src/composables/index.ts
@@ -3,6 +3,10 @@ export * from "./useAdminMenu";
 export * from "./useAdminPick";
 export * from "./useAuthGuard";
 export * from "./useDmsFiles";
+export * from "./useFamilyGroups";
 export * from "./useLang";
+export * from "./useMediaShow";
+export * from "./usePublishAlbums";
+export * from "./useShareHall";
 export * from "./useThemeGradient";
 export * from "./useTrashFiles";
diff --git a/uniapp/youjiala/src/composables/useDmsFiles.ts b/uniapp/youjiala/src/composables/useDmsFiles.ts
index 126fa78..8efe320 100644
--- a/uniapp/youjiala/src/composables/useDmsFiles.ts
+++ b/uniapp/youjiala/src/composables/useDmsFiles.ts
@@ -95,6 +95,21 @@ export function formatSize(bytes: number | undefined): string {
   return `${i === 0 ? value : value.toFixed(1)} ${units[i]}`;
 }
 
+/** 卡片时间文案（文件页/回收站/共享大厅共用）：今天「{todayLabel} HH:mm」，其余 YYYY-MM-DD */
+export function formatModifiedLabel(time: number, todayLabel: string): string {
+  if (!time) {
+    return "";
+  }
+  const date = new Date(time);
+  const now = new Date();
+  const pad = (n: number) => String(n).padStart(2, "0");
+  // if/else 写法防编辑器折行
+  if (date.toDateString() === now.toDateString()) {
+    return `${todayLabel} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  }
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
 export function useDmsFiles() {
   const { t } = useLocale();
 
@@ -112,18 +127,6 @@ export function useDmsFiles() {
 
   function toFileItem(record: DmsFileUploadViewDisplayData): FileItem {
     const time = parseTime(record.CreatedDatetime);
-    const date = time ? new Date(time) : null;
-    const now = new Date();
-    const pad = (n: number) => String(n).padStart(2, "0");
-    let modifiedAt = "";
-    if (date) {
-      // 今天的条目显示「今天 HH:mm」，其余显示日期（网盘习惯）；if/else 写法防编辑器折行
-      if (date.toDateString() === now.toDateString()) {
-        modifiedAt = `${t("FilePage.todayLabel")} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
-      } else {
-        modifiedAt = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-      }
-    }
     return {
       id: record.FileId,
       name: record.OrgFileName || record.FileName,
@@ -133,7 +136,7 @@ export function useDmsFiles() {
       sizeText: formatSize(
         record.FileSize ? record.FileSize * 1024 : undefined,
       ),
-      modifiedAt,
+      modifiedAt: formatModifiedLabel(time, t("FilePage.todayLabel")),
       sortTime: time,
       path: record.FileName,
     };
diff --git a/uniapp/youjiala/src/composables/useFamilyGroups.ts b/uniapp/youjiala/src/composables/useFamilyGroups.ts
new file mode 100644
index 0000000..349f19c
--- /dev/null
+++ b/uniapp/youjiala/src/composables/useFamilyGroups.ts
@@ -0,0 +1,353 @@
+/**
+ * 家人群组数据源：把旧 WebVue 的 FamilyGroupEnquiry.vue（列表 + 申请加入）与
+ * FamilyGroupOperation.vue（建群/改群 + 共享目录 + 待审成员 + 正式成员 + 目录权限）
+ * 两套页面的调用链合并到一个 composable，供「共享」tab 页两态复用。
+ *
+ * 后端契约（CloudBuilder.Master.Service/FamilyGroupService.auto.cs 实测）：
+ * 1. 列表 FindBySearchCriteria -> data.Datas：后端自动追加「有效 且（公开 或 我是成员）」，
+ *    所以列表天然= 公开群 + 我的群，不用前端再筛；关键字挂 [family_local_name text contain]。
+ * 2. 详情 FindByKey(familyName) -> FamilyGroupData：
+ *    - 非管理员时 FamilyGroupPermissions=null、部分 Managers=null、Folders 的 IsSharePermission 标记有无权限；
+ *    - 管理员才有 FamilyGroupRequests（待审）与完整 Managers/Permissions；
+ *    - 隐私群非成员返回空 FamilyGroupData（FamilyGroup.FamilyName 为空串当作没数据）。
+ * 3. 建群 Insert / 改群 Update：整个 FamilyGroupData 回传，目录靠 FolderId 匹配（新项 FolderId 递增、
+ *    CreatedBy 空串=后端插入）、成员靠 IsManager 布尔改 ManagerIndc、权限在 Update 里不处理（走即时接口）。
+ * 4. 即时动作接口：
+ *    - 申请加入 InsertFamilyGroupManager({FamilyName, Notice})（用户名后端取当前登录者，忽略入参）；
+ *    - 同意 UpdateFamilyGroupManager({FamilyName, UserName, ValidIndc:"Y"})；
+ *    - 拒绝/移除成员 DeleteFamilyGroupManager({FamilyName, UserName})；
+ *    - 分配目录权限 InsertFamilyGroupPermission([{FamilyName, FolderName, UserName}])；
+ *    - 解散群 Delete(familyName)（后端校验必须是管理员）。
+ * 5. 删已入库的共享目录前先 FindDmsFolderMapByFolderName(folderName) 查有无内容，有则拦（旧系统同逻辑）。
+ */
+import type { FamilyGroupData } from "@/data/auto/familyGroupData";
+import type { FamilyGroupEntity } from "@/data/auto/familyGroupEntity";
+import type { FamilyGroupFolderDisplayData } from "@/data/auto/familyGroupFolderDisplayData";
+import type { FamilyGroupManagerDisplayData } from "@/data/auto/familyGroupManagerDisplayData";
+import { useLocale } from "uview-pro";
+import { computed, ref } from "vue";
+import { FamilyGroupData as FamilyGroupDataModel } from "@/data/auto/familyGroupData";
+import { FamilyGroupFolderDisplayData as FolderRow } from "@/data/auto/familyGroupFolderDisplayData";
+import { FamilyGroupManagerEntity } from "@/data/auto/familyGroupManagerEntity";
+import { FamilyGroupPermissionEntity } from "@/data/auto/familyGroupPermissionEntity";
+import { FamilyGroupSearchCriteria } from "@/data/auto/familyGroupSearchCriteria";
+import { SearchFilter } from "@/data/auto/searchFilter";
+import dmsFileService from "@/service/master/dmsFileService";
+import familyGroupService from "@/service/master/familyGroupService";
+
+/** 列表一次拉全（旧页面分页在移动端不需要，划到底再考虑） */
+const FIND_LIMIT = 999999;
+
+/** 创建日期只取年月日：卡片展示用，不需要 formatModifiedLabel 的「今天」语义 */
+function formatDate(value: Date | string | undefined): string {
+  if (!value) {
+    return "";
+  }
+  const time =
+    typeof value === "string" ? new Date(value).getTime() : value.getTime();
+  if (!time) {
+    return "";
+  }
+  const d = new Date(time);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+
+export function useFamilyGroups() {
+  const { t } = useLocale();
+
+  // ===== 列表态 =====
+  const groups = ref<FamilyGroupEntity[]>([]);
+  const loading = ref(false);
+  const errorText = ref("");
+
+  // ===== 详情态（FamilyGroupOperation）=====
+  const detail = ref<FamilyGroupData>(new FamilyGroupDataModel());
+  /** 正在新建（还没落库的空白群）：详情按编辑态渲染，保存走 Insert */
+  const creating = ref(false);
+  /** 编辑态：字段可改、目录/成员/权限可增删，出现保存/取消 */
+  const isEdit = ref(false);
+  // 当前登录用户名：判断「我是不是某成员」「我还没加入」用
+  const myName = ref("");
+  /** 是否停在群管理详情（false=群组列表） */
+  const inDetail = computed(
+    () => !!detail.value.FamilyGroup?.FamilyName || creating.value,
+  );
+
+  /** 当前用户是否群管理员（后端 FindByKey 权威回填，比前端猜可靠） */
+  const isManager = computed(() => !!detail.value.IsManager);
+  /** 是否已是成员：正式成员名单里有我（非管理员时后端只回我自己的那条） */
+  const isMember = computed(() =>
+    (detail.value.FamilyGroupManagers ?? []).some(
+      (m) => m.UserName === myName.value,
+    ),
+  );
+
+  function setMyUser(name: string): void {
+    myName.value = name;
+  }
+
+  // ===== 列表 =====
+  async function loadList(keyword = ""): Promise<void> {
+    loading.value = true;
+    errorText.value = "";
+    try {
+      const criteria = new FamilyGroupSearchCriteria();
+      const filters: SearchFilter[] = [];
+      if (keyword.trim()) {
+        const kw = new SearchFilter();
+        kw.Column = "family_local_name";
+        kw.Type = "text";
+        kw.Operator = "contain";
+        kw.Value = keyword.trim();
+        filters.push(kw);
+      }
+      criteria.Filter = filters;
+      criteria.limit = FIND_LIMIT;
+      criteria.page = 1;
+      criteria.GridColumns = [];
+      const data = await familyGroupService.FindBySearchCriteria(criteria);
+      groups.value = data?.Datas ?? [];
+    } catch (error: any) {
+      groups.value = [];
+      errorText.value = error?.message || t("FilePage.loadFailed");
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  // ===== 进详情 =====
+  async function openGroup(familyName: string): Promise<void> {
+    loading.value = true;
+    errorText.value = "";
+    try {
+      const data = await familyGroupService.FindByKey(familyName);
+      // 隐私群非成员 / 记录不存在：后端回空壳（FamilyName 空串），页面按「无权限查看」处理
+      if (!data?.FamilyGroup?.FamilyName) {
+        detail.value = new FamilyGroupDataModel();
+        errorText.value = t("SharePage.noAccess");
+        return;
+      }
+      detail.value = normalize(data);
+    } catch (error: any) {
+      errorText.value = error?.message || t("FilePage.loadFailed");
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /** 后端可能把非管理员的 Managers/Permissions/Requests 置 null，统一补空数组供模板遍历 */
+  function normalize(data: FamilyGroupData): FamilyGroupData {
+    data.FamilyGroupFolders = data.FamilyGroupFolders ?? [];
+    data.FamilyGroupManagers = data.FamilyGroupManagers ?? [];
+    data.FamilyGroupRequests = data.FamilyGroupRequests ?? [];
+    data.FamilyGroupPermissions = data.FamilyGroupPermissions ?? [];
+    return data;
+  }
+
+  /** 退出详情回列表：可能刚改过群，重拉列表 */
+  async function exitDetail(): Promise<void> {
+    detail.value = new FamilyGroupDataModel();
+    creating.value = false;
+    isEdit.value = false;
+    await loadList();
+  }
+
+  // ===== 新建群 =====
+  function startCreate(): void {
+    const blank = new FamilyGroupDataModel();
+    blank.IsOpen = true;
+    blank.IsAdd = true;
+    detail.value = blank;
+    creating.value = true;
+    isEdit.value = true;
+  }
+
+  /** 进入编辑（仅管理员）：快照原值便于取消还原 */
+  function startEdit(): void {
+    isEdit.value = true;
+  }
+
+  /** 取消编辑：新建态直接退出详情，改群态重新拉详情丢弃本地改动 */
+  async function cancelEdit(): Promise<void> {
+    if (creating.value) {
+      await exitDetail();
+      return;
+    }
+    isEdit.value = false;
+    await openGroup(detail.value.FamilyGroup.FamilyName);
+  }
+
+  // ===== 共享目录（挂在 FamilyGroupData.FamilyGroupFolders，保存时后端落库）=====
+  function addFolder(localName: string, notice = ""): void {
+    const folders = detail.value.FamilyGroupFolders ?? [];
+    const maxId = folders.reduce((max, f) => Math.max(max, f.FolderId || 0), 0);
+    const row = new FolderRow();
+    row.FolderId = maxId + 1;
+    row.FolderLocalName = localName;
+    row.Notice = notice;
+    folders.push(row);
+  }
+
+  /**
+   * 删目录：已入库的（有 FolderName）先查有无文件内容，有则拦；
+   * 连带把该目录的本地权限记录一起摘掉（旧 deleteFamilyGroupFolder 同逻辑），保存生效。
+   */
+  async function removeFolder(
+    folderId: number,
+    folderName: string,
+  ): Promise<void> {
+    if (folderName) {
+      const count =
+        await dmsFileService.FindDmsFolderMapByFolderName(folderName);
+      if (count && count > 0) {
+        throw new Error(t("SharePage.folderNotEmpty"));
+      }
+    }
+    detail.value.FamilyGroupFolders = (
+      detail.value.FamilyGroupFolders ?? []
+    ).filter((f) => f.FolderId !== folderId);
+    if (folderName) {
+      detail.value.FamilyGroupPermissions = (
+        detail.value.FamilyGroupPermissions ?? []
+      ).filter((p) => p.FolderName !== folderName);
+    }
+  }
+
+  // ===== 成员 / 审核 / 权限 =====
+  /** 同意申请：即时接口，成功后重拉详情 */
+  async function approveRequest(userName: string): Promise<void> {
+    const entity = new FamilyGroupManagerEntity();
+    entity.FamilyName = familyNameOf();
+    entity.UserName = userName;
+    entity.ValidIndc = "Y";
+    await familyGroupService.UpdateFamilyGroupManager(entity);
+    await openGroup(familyNameOf());
+  }
+
+  /** 拒绝申请 / 移除成员：都走 DeleteFamilyGroupManager（拒绝的是待审那条，移除的是正式那条，同一接口） */
+  async function removeMember(userName: string): Promise<void> {
+    const entity = new FamilyGroupManagerEntity();
+    entity.FamilyName = familyNameOf();
+    entity.UserName = userName;
+    await familyGroupService.DeleteFamilyGroupManager(entity);
+    await openGroup(familyNameOf());
+  }
+
+  /** 设/取消管理员：编辑态改本地 IsManager，保存群时后端 SaveFamilyGroupManagers 落 ManagerIndc */
+  function toggleManager(userName: string): void {
+    const target = (detail.value.FamilyGroupManagers ?? []).find(
+      (m) => m.UserName === userName,
+    );
+    if (target) {
+      target.IsManager = !target.IsManager;
+    }
+  }
+
+  /** 分配目录权限给某成员：即时接口，成功后重拉详情 */
+  async function assignPermission(
+    folderName: string,
+    userName: string,
+  ): Promise<void> {
+    const entity = new FamilyGroupPermissionEntity();
+    entity.FamilyName = familyNameOf();
+    entity.FolderName = folderName;
+    entity.UserName = userName;
+    await familyGroupService.InsertFamilyGroupPermission([entity]);
+    await openGroup(familyNameOf());
+  }
+
+  /** 申请加入当前群（非成员，公开且可申请的群才会露这个入口） */
+  async function applyJoin(notice: string): Promise<void> {
+    const entity = new FamilyGroupManagerEntity();
+    entity.FamilyName = familyNameOf();
+    entity.Notice = notice;
+    await familyGroupService.InsertFamilyGroupManager(entity);
+  }
+
+  // ===== 保存 / 解散 =====
+  async function save(): Promise<void> {
+    const submitted = buildSubmitData();
+    const result = creating.value
+      ? await familyGroupService.Insert(submitted)
+      : await familyGroupService.Update(submitted);
+    detail.value = normalize(result);
+    creating.value = false;
+    isEdit.value = false;
+  }
+
+  /** 群名去空白；提交与本地判定都以此为准 */
+  function familyNameOf(): string {
+    return detail.value.FamilyGroup?.FamilyName?.trim() ?? "";
+  }
+
+  /** 组装提交体：OpenIndc/AddIndc 后端从 IsOpen/IsAdd 派生，这里只保证布尔与名称就绪、数组归一 */
+  function buildSubmitData(): FamilyGroupData {
+    const data = detail.value;
+    data.FamilyGroup.FamilyLocalName = (
+      data.FamilyGroup.FamilyLocalName || ""
+    ).trim();
+    data.FamilyGroupFolders = data.FamilyGroupFolders ?? [];
+    data.FamilyGroupManagers = data.FamilyGroupManagers ?? [];
+    data.FamilyGroupRequests = data.FamilyGroupRequests ?? [];
+    data.FamilyGroupPermissions = data.FamilyGroupPermissions ?? [];
+    return data;
+  }
+
+  async function dissolve(): Promise<void> {
+    await familyGroupService.Delete(familyNameOf());
+    await exitDetail();
+  }
+
+  /** 某目录已授权的成员名（分配权限时从候选里排掉，避免重复授权） */
+  function authorizedUsers(folderName: string): string[] {
+    return (detail.value.FamilyGroupPermissions ?? [])
+      .filter((p) => p.FolderName === folderName)
+      .map((p) => p.UserName);
+  }
+
+  return {
+    // state
+    groups,
+    loading,
+    errorText,
+    detail,
+    inDetail,
+    creating,
+    isEdit,
+    isManager,
+    isMember,
+    setMyUser,
+    // list
+    loadList,
+    openGroup,
+    exitDetail,
+    // create/edit
+    startCreate,
+    startEdit,
+    cancelEdit,
+    // folders
+    addFolder,
+    removeFolder,
+    // members / requests / permissions
+    approveRequest,
+    removeMember,
+    toggleManager,
+    assignPermission,
+    applyJoin,
+    // save / dissolve
+    save,
+    dissolve,
+    // helpers
+    authorizedUsers,
+    formatDate,
+  };
+}
+
+/** 详情遍历常用的展示类型转出，页面 import type 用 */
+export type {
+  FamilyGroupData,
+  FamilyGroupEntity,
+  FamilyGroupFolderDisplayData,
+  FamilyGroupManagerDisplayData,
+};
diff --git a/uniapp/youjiala/src/composables/useMediaShow.ts b/uniapp/youjiala/src/composables/useMediaShow.ts
new file mode 100644
index 0000000..12f087f
--- /dev/null
+++ b/uniapp/youjiala/src/composables/useMediaShow.ts
@@ -0,0 +1,165 @@
+/**
+ * 展览播放器数据装载：把旧 WebVue 的 Preview.vue / PreviewAudio.vue / PreviewVideo.vue
+ * 三页 onMounted 的取数逻辑收敛成一个 kind 参数化 composable，供三个展示页复用。
+ *
+ * 三态取数（照抄旧页语义）：
+ * 1. mode=list：key 当作「目录路径」，走 DMS 查询 [FilePath single=key] + [FileType single=P/A/V]
+ *    -> 文件页 album/musicHall/videoHall 快捷入口用，展览当前目录里的全部该类文件；
+ * 2. 否则 key 非空：按专辑编号取明细（photo 用 FindPublishPhotoDetailByPublishName，
+ *    audio/video 无该方法 -> FindByKey(key).Details）；
+ * 3. 否则（无 key）：取默认专辑（photo FindPublishPhotoDetail 全量，audio/video FindPublishXxxDefault）。
+ *
+ * 后端把同一素材给两个地址：缩略图/转码给 Formatted*，原图/原码给 Url/FileName。
+ * 幻灯轮播与列表用缩略图（加载快），精看/下载/播放用原图原码。视频原码 Url 对专辑明细
+ * 存的是 OrderKey，需优先取 FormattedUrl/FormattedM3u8。
+ */
+import { DmsFileSearchCriteria } from "@/data/auto/dmsFileSearchCriteria";
+import { DmsFileUploadViewDisplayData as UploadView } from "@/data/auto/dmsFileUploadViewDisplayData";
+import { SearchFilter } from "@/data/auto/searchFilter";
+import { FileTypePolicy } from "@/policy/custom/fileTypePolicy";
+import dmsFileService from "@/service/master/dmsFileService";
+import publishAudioService from "@/service/master/publishAudioService";
+import publishPhotoService from "@/service/master/publishPhotoService";
+import publishVideoService from "@/service/master/publishVideoService";
+
+const FIND_LIMIT = 999999;
+
+/** 幻灯片项：舞台/列表用 thumb，精看/下载用 full */
+export interface SlideItem {
+  url: string;
+  thumb: string;
+  full: string;
+  name?: string;
+}
+
+/** 音轨项 */
+export interface TrackItem {
+  url: string;
+  pic?: string;
+  title?: string;
+  lrc?: string;
+  name?: string;
+}
+
+/** 视频项：url=原码，m3u8=转码 HLS */
+export interface VideoItem {
+  url: string;
+  m3u8?: string;
+  pic?: string;
+  title?: string;
+  name?: string;
+}
+
+/** 去扩展名得展示名 */
+function baseName(path: string): string {
+  return String(path || "").replace(/\.[^./\\]+$/, "");
+}
+
+/** 构造 DMS 目录+类型过滤条件（mode=list） */
+function listCriteria(path: string, fileType: string): DmsFileSearchCriteria {
+  const criteria = new DmsFileSearchCriteria();
+  const filters: SearchFilter[] = [];
+  const pathMatch = new SearchFilter();
+  pathMatch.Column = UploadView.DB_FILE_PATH;
+  pathMatch.Type = "SingleSelection";
+  pathMatch.Operator = "single";
+  pathMatch.Value = path;
+  filters.push(pathMatch);
+  const typeMatch = new SearchFilter();
+  typeMatch.Column = UploadView.DB_FILE_TYPE;
+  typeMatch.Type = "SingleSelection";
+  typeMatch.Operator = "single";
+  typeMatch.Value = fileType;
+  filters.push(typeMatch);
+  criteria.Filter = filters;
+  criteria.limit = FIND_LIMIT;
+  criteria.page = 1;
+  criteria.GridColumns = [];
+  return criteria;
+}
+
+async function listRows(fileType: string, path: string): Promise<any[]> {
+  const data = await dmsFileService.FindBySearchCriteria(
+    listCriteria(path, fileType),
+  );
+  return data?.Datas ?? [];
+}
+
+export function useMediaShow() {
+  /** 相册展览条目 */
+  async function loadPhotos(mode: string, key: string): Promise<SlideItem[]> {
+    if (mode === "list") {
+      const rows = await listRows(FileTypePolicy.PHOTO, key);
+      return rows.map((r: any) => ({
+        url: r.FormattedPic || r.Url,
+        thumb: r.FormattedPic || r.Url,
+        full: r.Url || r.FormattedPic,
+        name: baseName(r.OrgFileName || r.Url),
+      }));
+    }
+    let details: any[] = [];
+    if (key) {
+      details =
+        await publishPhotoService.FindPublishPhotoDetailByPublishName(key);
+    } else {
+      details = await publishPhotoService.FindPublishPhotoDetail();
+    }
+    return (details ?? []).map((d: any) => ({
+      url: d.FormattedPic || d.FileName,
+      thumb: d.FormattedPic || d.FileName,
+      full: d.FileName || d.FormattedPic,
+      name: baseName(d.FileName) || d.Notice || undefined,
+    }));
+  }
+
+  /** 音乐厅曲目 */
+  async function loadTracks(mode: string, key: string): Promise<TrackItem[]> {
+    if (mode === "list") {
+      const rows = await listRows(FileTypePolicy.AUDIO, key);
+      return rows.map((r: any) => ({
+        url: r.Url,
+        pic: r.FormattedPic || "",
+        title: r.OrgFileName || baseName(r.Url),
+        name: baseName(r.OrgFileName || r.Url),
+      }));
+    }
+    const data = key
+      ? await publishAudioService.FindByKey(key)
+      : await publishAudioService.FindPublishAudioDefault();
+    const details = (data?.Details ?? []) as any[];
+    return details.map((d: any) => ({
+      url: d.FormattedUrl || d.Url,
+      pic: d.FormattedPic || d.Pic || "",
+      title: d.Title || baseName(d.Url),
+      lrc: d.FormattedLrc || d.Lrc || "",
+      name: d.Title || baseName(d.Url),
+    }));
+  }
+
+  /** 影视厅片源 */
+  async function loadVideos(mode: string, key: string): Promise<VideoItem[]> {
+    if (mode === "list") {
+      const rows = await listRows(FileTypePolicy.VIDEO, key);
+      return rows.map((r: any) => ({
+        url: r.Url,
+        m3u8: r.FormattedM3u8 || "",
+        pic: r.FormattedPic || "",
+        title: r.OrgFileName || baseName(r.Url),
+        name: baseName(r.OrgFileName || r.Url),
+      }));
+    }
+    const data = key
+      ? await publishVideoService.FindByKey(key)
+      : await publishVideoService.FindPublishVideoDefault();
+    const details = (data?.Details ?? []) as any[];
+    return details.map((d: any) => ({
+      url: d.FormattedUrl || d.Url,
+      m3u8: d.FormattedM3u8 || "",
+      pic: d.FormattedPic || d.Pic || "",
+      title: d.Title || baseName(d.Url),
+      name: d.Title || baseName(d.Url),
+    }));
+  }
+
+  return { loadPhotos, loadTracks, loadVideos };
+}
diff --git a/uniapp/youjiala/src/composables/usePublishAlbums.ts b/uniapp/youjiala/src/composables/usePublishAlbums.ts
new file mode 100644
index 0000000..2754b59
--- /dev/null
+++ b/uniapp/youjiala/src/composables/usePublishAlbums.ts
@@ -0,0 +1,407 @@
+/**
+ * 多媒体「专辑」数据源：把旧 WebVue 的三套专辑管理页
+ *   PublishPhotoEnquiry + PublishPhotoOperation（相册管理）
+ *   PublishAudioEnquiry + PublishAudioOperation（音乐专辑）
+ *   PublishVideoEnquiry + PublishVideoOperation（影视专辑）
+ * 融合成一个 kind 参数化 composable，供底部「多媒体」tab 单页三段式两态复用。
+ *
+ * 关键契约（照抄旧 Operation，勿自作主张）：
+ * 1. 列表 FindBySearchCriteria -> photo 用 data.Publishs、audio/video 用 data.Datas；
+ *    后端已按「有效 且（公开 或 我是成员）」过滤，前端不再筛。
+ * 2. 详情 FindByKey(publishName) -> PublishXxxData { PublishXxx, Details[], FamilyGroups[] }，
+ *    明细随 FindByKey 一并回，不单独查明细（展览页才用 FindPublishPhotoDetailByPublishName）。
+ * 3. 编辑：明细上移/下移/删除、公开群组增删——全部是本地改 data，最后整包 Insert/Update 落库
+ *    （旧 upSon/downSon/deleteSon/addFamilyGroup/deleteFamilyGroup 均无独立后端接口）。
+ * 4. 保存判定：PublishXxx.CreatedBy 有值走 Update，否则 Insert（新专辑编号由后端生成）。
+ * 5. 归属：OwnerName !== 当前登录名 -> 只能查看，不能改/删（旧系统同逻辑）。
+ * 6. 专辑「加入新内容」不在本页——沿用文件页发布链（file.vue onPublishConfirm）。
+ *
+ * 三套实体（PublishPhoto/Audio/VideoEntity）公共字段命名一致，故用统一视图访问；
+ * 差异只在顶层属性名（PublishPhoto/PublishAudio/PublishVideo）与列表键（Publishs/Datas）。
+ */
+import { useLocale } from "uview-pro";
+import { computed, ref } from "vue";
+import { PublishAudioData } from "@/data/auto/publishAudioData";
+import { PublishAudioSearchCriteria } from "@/data/auto/publishAudioSearchCriteria";
+import { PublishPhotoData } from "@/data/auto/publishPhotoData";
+import { PublishPhotoSearchCriteria } from "@/data/auto/publishPhotoSearchCriteria";
+import { PublishVideoData } from "@/data/auto/publishVideoData";
+import { PublishVideoSearchCriteria } from "@/data/auto/publishVideoSearchCriteria";
+import { SearchFilter } from "@/data/auto/searchFilter";
+import publishAudioService from "@/service/master/publishAudioService";
+import publishPhotoService from "@/service/master/publishPhotoService";
+import publishVideoService from "@/service/master/publishVideoService";
+
+/** 三种专辑类型 */
+export type PublishKind = "photo" | "audio" | "video";
+
+/** 三套实体的公共可编辑字段（命名逐字一致） */
+export interface PublishAlbumEntity {
+  PublishName: string;
+  PublishLocalName: string;
+  Notice: string;
+  OpenIndc: string;
+  DefaultIndc: string;
+  OwnerName: string;
+  CreatedBy: string;
+  OrderBy: number;
+  [key: string]: any;
+}
+
+/** 明细行：photo 用 FileName（原图）+ FormattedPic（缩略图）；audio/video 用 Url/Title/Pic/Lrc + Formatted* */
+export interface PublishAlbumDetail {
+  DetailId: number;
+  OrderBy: number;
+  Notice: string;
+  [key: string]: any;
+}
+
+/** 公开群组行 */
+export interface PublishAlbumGroup {
+  FamilyName: string;
+  FamilyLocalName?: string;
+  Notice?: string;
+  [key: string]: any;
+}
+
+/** 列表一次拉全（旧页面分页在移动端不需要） */
+const FIND_LIMIT = 999999;
+
+/** 五个增删改查方法在三服务里签名一致，抽成最小接口供适配器持有 */
+interface PublishCrudService {
+  FindByKey: (key: string) => Promise<any>;
+  FindBySearchCriteria: (criteria: any) => Promise<any>;
+  Insert: (data: any) => Promise<any>;
+  Update: (data: any) => Promise<any>;
+  Delete: (key: string) => Promise<any>;
+}
+
+interface KindAdapter {
+  /** 顶层实体属性名 */
+  entityKey: "PublishPhoto" | "PublishAudio" | "PublishVideo";
+  /** 列表结果键：photo=Publishs，audio/video=Datas */
+  listKey: "Publishs" | "Datas";
+  /** 查询标题的列名（三表 DB 列均为 publish_local_name） */
+  titleColumn: string;
+  service: PublishCrudService;
+  /** 空白 Data 工厂（新建时用，带默认实体 + 空数组） */
+  newBlank: () => Record<string, any>;
+  /** 空白查询条件工厂 */
+  newCriteria: () => any;
+}
+
+const ADAPTERS: Record<PublishKind, KindAdapter> = {
+  photo: {
+    entityKey: "PublishPhoto",
+    listKey: "Publishs",
+    titleColumn: "publish_local_name",
+    service: publishPhotoService,
+    newBlank: () => new PublishPhotoData(),
+    newCriteria: () => new PublishPhotoSearchCriteria(),
+  },
+  audio: {
+    entityKey: "PublishAudio",
+    listKey: "Datas",
+    titleColumn: "publish_local_name",
+    service: publishAudioService,
+    newBlank: () => new PublishAudioData(),
+    newCriteria: () => new PublishAudioSearchCriteria(),
+  },
+  video: {
+    entityKey: "PublishVideo",
+    listKey: "Datas",
+    titleColumn: "publish_local_name",
+    service: publishVideoService,
+    newBlank: () => new PublishVideoData(),
+    newCriteria: () => new PublishVideoSearchCriteria(),
+  },
+};
+
+/** 创建日期只取年月日：卡片展示用 */
+export function formatAlbumDate(value: Date | string | undefined): string {
+  if (!value) {
+    return "";
+  }
+  const time =
+    typeof value === "string" ? new Date(value).getTime() : value.getTime();
+  if (!time) {
+    return "";
+  }
+  const d = new Date(time);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+
+export function usePublishAlbums() {
+  const { t } = useLocale();
+
+  // ===== 当前分段（相册/音乐/影视）=====
+  const kind = ref<PublishKind>("photo");
+  const adapter = () => ADAPTERS[kind.value];
+
+  // ===== 列表态 =====
+  const list = ref<PublishAlbumEntity[]>([]);
+  const loading = ref(false);
+  const errorText = ref("");
+
+  // ===== 编辑态（Operation）=====
+  /** 当前详情：整包 PublishXxxData（含实体 + Details + FamilyGroups），保存原样回传 */
+  const detail = ref<Record<string, any> | null>(null);
+  const creating = ref(false);
+  const isEdit = ref(false);
+  /** 是否非本人专辑：进详情按后端 OwnerName 判定，决定能否改/删 */
+  const notOwner = ref(false);
+  const myName = ref("");
+
+  function setMyUser(name: string): void {
+    myName.value = name;
+  }
+
+  /** 顶层实体（三 kind 字段命名一致，统一视图） */
+  const album = computed<PublishAlbumEntity | null>(
+    () => (detail.value ? detail.value[adapter().entityKey] : null) ?? null,
+  );
+  const details = computed<PublishAlbumDetail[]>(
+    () => detail.value?.Details ?? [],
+  );
+  const groups = computed<PublishAlbumGroup[]>(
+    () => detail.value?.FamilyGroups ?? [],
+  );
+
+  /** 是否停在专辑详情（false=专辑列表） */
+  const inDetail = computed(() => !!album.value?.PublishName || creating.value);
+  /** 归属判定：新建态恒可改；已入库需 OwnerName 命中当前登录名 */
+  const isOwner = computed(
+    () => creating.value || (!notOwner.value && !!album.value),
+  );
+  const canAmend = computed(() => inDetail.value && isOwner.value);
+  const canDelete = computed(() => inDetail.value && isOwner.value);
+
+  // ===== 分段切换 =====
+  async function setKind(next: PublishKind): Promise<void> {
+    if (kind.value === next) {
+      return;
+    }
+    kind.value = next;
+    // 切分段：退出可能打开的详情，并按新 kind 重新拉列表（否则下方内容不刷新）
+    detail.value = null;
+    creating.value = false;
+    isEdit.value = false;
+    notOwner.value = false;
+    await loadList();
+  }
+
+  // ===== 列表 =====
+  async function loadList(keyword = ""): Promise<void> {
+    loading.value = true;
+    errorText.value = "";
+    try {
+      const a = adapter();
+      const criteria = a.newCriteria();
+      const filters: SearchFilter[] = [];
+      if (keyword.trim()) {
+        const kw = new SearchFilter();
+        kw.Column = a.titleColumn;
+        kw.Type = "text";
+        kw.Operator = "contain";
+        kw.Value = keyword.trim();
+        filters.push(kw);
+      }
+      criteria.Filter = filters;
+      criteria.limit = FIND_LIMIT;
+      criteria.page = 1;
+      criteria.GridColumns = [];
+      const data = await a.service.FindBySearchCriteria(criteria);
+      list.value = (data?.[a.listKey] ?? []) as PublishAlbumEntity[];
+    } catch (error: any) {
+      list.value = [];
+      errorText.value = error?.message || t("FilePage.loadFailed");
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  // ===== 进详情 =====
+  async function openAlbum(publishName: string): Promise<void> {
+    loading.value = true;
+    errorText.value = "";
+    try {
+      const data = await adapter().service.FindByKey(publishName);
+      const entity = data?.[adapter().entityKey];
+      if (!entity?.PublishName) {
+        detail.value = null;
+        errorText.value = t("MediaPage.noAccess");
+        return;
+      }
+      data.Details = data.Details ?? [];
+      data.FamilyGroups = data.FamilyGroups ?? [];
+      notOwner.value = entity.OwnerName !== myName.value;
+      detail.value = data;
+    } catch (error: any) {
+      errorText.value = error?.message || t("FilePage.loadFailed");
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /** 退出详情回列表；keepKind=true 时不清分段（切分段内部调用） */
+  async function exitDetail(keepKind = false): Promise<void> {
+    detail.value = null;
+    creating.value = false;
+    isEdit.value = false;
+    notOwner.value = false;
+    if (!keepKind) {
+      await loadList();
+    }
+  }
+
+  // ===== 新建 / 编辑 =====
+  function startCreate(): void {
+    const blank = adapter().newBlank();
+    blank.Details = [];
+    blank.FamilyGroups = [];
+    detail.value = blank;
+    creating.value = true;
+    isEdit.value = true;
+    notOwner.value = false;
+  }
+
+  function startEdit(): void {
+    isEdit.value = true;
+  }
+
+  async function cancelEdit(): Promise<void> {
+    if (creating.value) {
+      await exitDetail();
+      return;
+    }
+    isEdit.value = false;
+    await openAlbum(album.value!.PublishName);
+  }
+
+  // ===== 明细本地增删改（保存整包落库）=====
+  /** 上移(-1)/下移(+1)：与相邻行交换位置，越界不动（旧 upSon/downSon） */
+  function moveDetail(index: number, dir: -1 | 1): void {
+    const rows = detail.value?.Details as PublishAlbumDetail[] | undefined;
+    if (!rows) {
+      return;
+    }
+    const target = index + dir;
+    if (target < 0 || target >= rows.length) {
+      return;
+    }
+    const [item] = rows.splice(index, 1);
+    rows.splice(target, 0, item);
+  }
+
+  /** 删除明细（旧 deleteSon）：按 DetailId 过滤 */
+  function removeDetail(detailId: number): void {
+    if (!detail.value) {
+      return;
+    }
+    detail.value.Details = (
+      detail.value.Details as PublishAlbumDetail[]
+    ).filter((d) => d.DetailId !== detailId);
+  }
+
+  // ===== 公开群组本地增删（保存整包落库）=====
+  /** 加入公开群组（旧 addFamilyGroup -> handleSelectFamilyGroup）；已存在则忽略 */
+  function addGroup(
+    familyName: string,
+    familyLocalName = "",
+    notice = "",
+  ): void {
+    if (!detail.value) {
+      return;
+    }
+    const rows = detail.value.FamilyGroups as PublishAlbumGroup[];
+    if (rows.some((g) => g.FamilyName === familyName)) {
+      return;
+    }
+    rows.push({
+      FamilyName: familyName,
+      FamilyLocalName: familyLocalName,
+      Notice: notice,
+    });
+  }
+
+  function removeGroup(familyName: string): void {
+    if (!detail.value) {
+      return;
+    }
+    detail.value.FamilyGroups = (
+      detail.value.FamilyGroups as PublishAlbumGroup[]
+    ).filter((g) => g.FamilyName !== familyName);
+  }
+
+  // ===== 保存 / 删除 =====
+  async function save(): Promise<void> {
+    const a = adapter();
+    const submitted = detail.value!;
+    const entity = submitted[a.entityKey] as PublishAlbumEntity;
+    entity.PublishLocalName = (entity.PublishLocalName || "").trim();
+    submitted.Details = submitted.Details ?? [];
+    submitted.FamilyGroups = submitted.FamilyGroups ?? [];
+    const result = entity.CreatedBy
+      ? await a.service.Update(submitted)
+      : await a.service.Insert(submitted);
+    result.Details = result.Details ?? [];
+    result.FamilyGroups = result.FamilyGroups ?? [];
+    detail.value = result;
+    notOwner.value =
+      (result[a.entityKey] as PublishAlbumEntity).OwnerName !== myName.value;
+    creating.value = false;
+    isEdit.value = false;
+  }
+
+  async function dissolve(): Promise<void> {
+    await adapter().service.Delete(album.value!.PublishName);
+    await exitDetail();
+  }
+
+  /** 专辑当前编号（供展览跳转拼参数） */
+  function publishNameOf(): string {
+    return album.value?.PublishName?.trim() ?? "";
+  }
+
+  return {
+    // kind
+    kind,
+    setKind,
+    // state
+    list,
+    loading,
+    errorText,
+    detail,
+    album,
+    details,
+    groups,
+    inDetail,
+    creating,
+    isEdit,
+    isOwner,
+    canAmend,
+    canDelete,
+    setMyUser,
+    // list / detail
+    loadList,
+    openAlbum,
+    exitDetail,
+    // create / edit
+    startCreate,
+    startEdit,
+    cancelEdit,
+    // details
+    moveDetail,
+    removeDetail,
+    // groups
+    addGroup,
+    removeGroup,
+    // save / dissolve
+    save,
+    dissolve,
+    // helpers
+    publishNameOf,
+    formatDate: formatAlbumDate,
+  };
+}
diff --git a/uniapp/youjiala/src/composables/useShareHall.ts b/uniapp/youjiala/src/composables/useShareHall.ts
new file mode 100644
index 0000000..8a5c72a
--- /dev/null
+++ b/uniapp/youjiala/src/composables/useShareHall.ts
@@ -0,0 +1,258 @@
+/**
+ * 共享大厅数据源：复刻旧 WebVue FamilyGroupShare.vue 的调用链（D:\Docker\WebVue\src\views\master）
+ *
+ * 1. 顶层（大厅）：FindFamilyDmsFolders() -> SelectOption[]，每个家人群组就是一张「共享目录」卡片，
+ *    顶层没有任何写操作（不建目录/不上传）；
+ * 2. 进组：FindFamilyBySearchCriteria -> data.Families，Filter 恒挂
+ *    [FamilyName single 群组] + [FilePath single 当前目录]；组记录的 file_path 存的是
+ *    父级标识（组根直属 = 群组编号，子目录 = 父目录 FileName），组根传空串会被
+ *    后端忽略空值条件把全组所有层级返出（实测子目录被提到组根），故空串转群组编号；
+ *    关键字追加 [OrgFileName text contain]；
+ * 3. 下钻：旧 onOpenFolder 双条件 IsDirectoryIndc=Y && PermissionIndc=Y，
+ *    无权限的目录点进去要提示；
+ * 4. 组内新建目录：CreateFamilyDmsFolder({ FilePath, FolderLocalName, FamilyName, Notice })
+ *    （旧 DmsFolderModal 的 isFamilyGroup 分支，不是文件页的 CreateDmsFolder）；
+ * 5. 取消共享：DeleteFamilyDmsFolder(record)（旧 onDelete，摘掉的是共享映射不动原文件）。
+ */
+import type { FamilyDmsFileViewDisplayData } from "@/data/auto/familyDmsFileViewDisplayData";
+import type { FileItem, PathNode } from "@/data/custom/fileBrowser";
+import { useLocale } from "uview-pro";
+import { computed, ref } from "vue";
+import { DmsFileSearchCriteria } from "@/data/auto/dmsFileSearchCriteria";
+import { FamilyDmsFileViewDisplayData as FamilyView } from "@/data/auto/familyDmsFileViewDisplayData";
+import { FamilyDmsFileViewEntity } from "@/data/auto/familyDmsFileViewEntity";
+import { SearchFilter } from "@/data/auto/searchFilter";
+import dmsFileService from "@/service/master/dmsFileService";
+import {
+  formatModifiedLabel,
+  formatSize,
+  kindOf,
+  parseTime,
+} from "./useDmsFiles";
+
+/** 目录场景一次拉全，与旧页面 pagingParams.pageSize 同值 */
+const FIND_LIMIT = 999999;
+
+export function useShareHall() {
+  const { t } = useLocale();
+
+  /** 大厅顶层：群组卡片（path = FamilyName，id 用序号——群组本身没有 FileId） */
+  const groups = ref<FileItem[]>([]);
+  /** 当前进入的群组系统名；空串 = 停在大厅顶层 */
+  const currentFamily = ref("");
+  const files = ref<FileItem[]>([]);
+  /** FileId -> 原始共享记录：下钻/取消共享/下载要拿全字段 */
+  const records = ref(new Map<number, FamilyDmsFileViewDisplayData>());
+  const loading = ref(false);
+  const errorText = ref("");
+  const currPath = ref("");
+  const pathStack = ref<PathNode[]>([]);
+
+  /** 是否在组内（组根也算）：决定导航返回、面包屑与「新建文件夹」按钮显隐 */
+  const inGroup = computed(() => !!currentFamily.value);
+
+  async function init(): Promise<void> {
+    loading.value = true;
+    errorText.value = "";
+    try {
+      const options = (await dmsFileService.FindFamilyDmsFolders()) ?? [];
+      groups.value = options.map((opt, index) => ({
+        id: index + 1,
+        name: opt.DisplayName || opt.BindValue,
+        kind: "folder" as const,
+        sizeText: "",
+        modifiedAt: "",
+        sortTime: 0,
+        path: opt.BindValue,
+      }));
+    } catch (error: any) {
+      // 错误提示已由 http.interceptor 统一 toast，这里只留页面内可见的失败态
+      groups.value = [];
+      errorText.value = error?.message || t("FilePage.loadFailed");
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function toFileItem(record: FamilyDmsFileViewDisplayData): FileItem {
+    const time = parseTime(record.CreatedDatetime);
+    return {
+      id: record.FileId,
+      name: record.OrgFileName || record.FileName,
+      kind: kindOf(record),
+      // FileSize 单位是 KB（旧系统下载缓冲 (FileSize+1)*1024 字节佐证），先换算成字节
+      sizeText: formatSize(
+        record.FileSize ? record.FileSize * 1024 : undefined,
+      ),
+      modifiedAt: formatModifiedLabel(time, t("FilePage.todayLabel")),
+      sortTime: time,
+      path: record.FileName,
+      // 锁/共享角标照旧 MyComputerFamily：锁仅目录渲染（组件层控制），
+      // 共享角标 = PermissionIndc=Y 且 FavoriteIndc=Y（收藏过共享）
+      permission: record.PermissionIndc === "Y" ? "Y" : "N",
+      shared: record.PermissionIndc === "Y" && record.FavoriteIndc === "Y",
+    };
+  }
+
+  /** 查当前群组的一个目录；path 空串 = 组根，转群组编号（组直属记录的 file_path 存的就是它） */
+  async function loadFolder(path: string, keyword = ""): Promise<void> {
+    const queryPath = path || currentFamily.value;
+    loading.value = true;
+    errorText.value = "";
+    try {
+      const criteria = new DmsFileSearchCriteria();
+      const filters: SearchFilter[] = [];
+
+      const familyFilter = new SearchFilter();
+      familyFilter.Column = FamilyView.DB_FAMILY_NAME;
+      familyFilter.Type = "SingleSelection";
+      familyFilter.Operator = "single";
+      familyFilter.Value = currentFamily.value;
+      filters.push(familyFilter);
+
+      const pathFilter = new SearchFilter();
+      pathFilter.Column = FamilyView.DB_FILE_PATH;
+      pathFilter.Type = "SingleSelection";
+      pathFilter.Operator = "single";
+      pathFilter.Value = queryPath;
+      filters.push(pathFilter);
+
+      if (keyword.trim()) {
+        const nameFilter = new SearchFilter();
+        nameFilter.Column = FamilyView.DB_ORG_FILE_NAME;
+        nameFilter.Type = "text";
+        nameFilter.Operator = "contain";
+        nameFilter.Value = keyword.trim();
+        filters.push(nameFilter);
+      }
+
+      criteria.Filter = filters;
+      criteria.limit = FIND_LIMIT;
+      criteria.page = 1;
+      criteria.GridColumns = [];
+      const data = await dmsFileService.FindFamilyBySearchCriteria(criteria);
+      const rows = data?.Families ?? [];
+      // 文件夹置顶（旧页面 orderBy IsDirectoryIndc desc），组内保持后端顺序
+      const dirs: FamilyDmsFileViewDisplayData[] = [];
+      const others: FamilyDmsFileViewDisplayData[] = [];
+      for (const row of rows) {
+        if (row.IsDirectoryIndc === "Y") {
+          dirs.push(row);
+        } else {
+          others.push(row);
+        }
+      }
+      const sorted = [...dirs, ...others];
+      files.value = sorted.map(toFileItem);
+      const nextRecords = new Map<number, FamilyDmsFileViewDisplayData>();
+      for (const row of sorted) {
+        nextRecords.set(row.FileId, row);
+      }
+      records.value = nextRecords;
+      currPath.value = queryPath;
+    } catch (error: any) {
+      files.value = [];
+      records.value = new Map();
+      errorText.value = error?.message || t("FilePage.loadFailed");
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /** 进组：路径栈重置为组根（旧系统 rootPath="" 的组根语义），value 空串供面包屑回组根 */
+  async function enterGroup(group: FileItem): Promise<void> {
+    currentFamily.value = group.path;
+    pathStack.value = [{ value: "", displayName: group.name }];
+    await loadFolder("");
+  }
+
+  /** 退出到大厅：清组与列表，重拉群组（组内可能刚建过目录） */
+  async function exitGroup(): Promise<void> {
+    currentFamily.value = "";
+    files.value = [];
+    records.value = new Map();
+    pathStack.value = [];
+    currPath.value = "";
+    await init();
+  }
+
+  /**
+   * 点文件夹下钻；非文件夹返回 false 交给页面处理打开动作。
+   * 无权限的目录（旧 onOpenFolder 的 PermissionIndc 检查）抛提示文案由页面 toast
+   */
+  async function openFolder(file: FileItem): Promise<boolean> {
+    if (file.kind !== "folder" || !file.path) {
+      return false;
+    }
+    const record = records.value.get(file.id);
+    if (record?.IsDirectoryIndc !== "Y") {
+      return false;
+    }
+    if (record.PermissionIndc !== "Y") {
+      throw new Error(t("ShareHallPage.noPermission"));
+    }
+    pathStack.value.push({ value: file.path, displayName: file.name });
+    await loadFolder(file.path);
+    return true;
+  }
+
+  /** 返回上一级：组根再退交回大厅（页面调 exitGroup） */
+  async function back(): Promise<boolean> {
+    if (pathStack.value.length <= 1) {
+      return false;
+    }
+    pathStack.value.pop();
+    const prev = pathStack.value[pathStack.value.length - 1];
+    await loadFolder(prev.value);
+    return true;
+  }
+
+  /** 面包屑跳转：截断到第 index 层并查该层；已在该层则忽略 */
+  async function goTo(index: number): Promise<void> {
+    if (index < 0 || index >= pathStack.value.length - 1) {
+      return;
+    }
+    pathStack.value = pathStack.value.slice(0, index + 1);
+    await loadFolder(pathStack.value[index].value);
+  }
+
+  /** 组内新建目录（旧 DmsFolderModal isFamilyGroup 分支）：挂在当前目录下 */
+  async function createFolder(localName: string): Promise<void> {
+    const entity = new FamilyDmsFileViewEntity();
+    entity.FilePath = currPath.value;
+    entity.FolderLocalName = localName;
+    entity.FamilyName = currentFamily.value;
+    entity.Notice = "";
+    await dmsFileService.CreateFamilyDmsFolder(entity);
+    await loadFolder(currPath.value);
+  }
+
+  /** 取消共享（旧 onDelete）：摘掉群组里的目录映射，原文件仍在所有者网盘 */
+  async function unshare(file: FileItem): Promise<void> {
+    const record = records.value.get(file.id);
+    if (record) {
+      await dmsFileService.DeleteFamilyDmsFolder(record);
+      await loadFolder(currPath.value);
+    }
+  }
+
+  return {
+    groups,
+    files,
+    records,
+    loading,
+    errorText,
+    pathStack,
+    currentFamily,
+    inGroup,
+    init,
+    enterGroup,
+    exitGroup,
+    openFolder,
+    back,
+    goTo,
+    loadFolder,
+    createFolder,
+    unshare,
+  };
+}
diff --git a/uniapp/youjiala/src/composables/useTrashFiles.ts b/uniapp/youjiala/src/composables/useTrashFiles.ts
index 9bf2782..2b21ad7 100644
--- a/uniapp/youjiala/src/composables/useTrashFiles.ts
+++ b/uniapp/youjiala/src/composables/useTrashFiles.ts
@@ -17,7 +17,12 @@ import { DmsFileSearchCriteria } from "@/data/auto/dmsFileSearchCriteria";
 import { DmsFileUploadDeleteLogViewDisplayData as DeleteLogView } from "@/data/auto/dmsFileUploadDeleteLogViewDisplayData";
 import { SearchFilter } from "@/data/auto/searchFilter";
 import dmsFileService from "@/service/master/dmsFileService";
-import { formatSize, kindOf, parseTime } from "./useDmsFiles";
+import {
+  formatModifiedLabel,
+  formatSize,
+  kindOf,
+  parseTime,
+} from "./useDmsFiles";
 
 /** 目录场景一次拉全，与旧页面 pagingParams.pageSize 同值 */
 const FIND_LIMIT = 999999;
@@ -35,18 +40,6 @@ export function useTrashFiles() {
   /** 删除日志 -> 卡片条目：时间列展示的是删除时间（记录 CreatedDatetime），path 留原目录备查 */
   function toFileItem(record: DmsFileUploadDeleteLogViewDisplayData): FileItem {
     const time = parseTime(record.CreatedDatetime);
-    const date = time ? new Date(time) : null;
-    const now = new Date();
-    const pad = (n: number) => String(n).padStart(2, "0");
-    let modifiedAt = "";
-    if (date) {
-      // 与文件页同款文案：今天显示「今天 HH:mm」，其余显示日期
-      if (date.toDateString() === now.toDateString()) {
-        modifiedAt = `${t("FilePage.todayLabel")} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
-      } else {
-        modifiedAt = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-      }
-    }
     return {
       id: record.FileId,
       name: record.OrgFileName || record.FileName,
@@ -55,7 +48,7 @@ export function useTrashFiles() {
       sizeText: formatSize(
         record.FileSize ? record.FileSize * 1024 : undefined,
       ),
-      modifiedAt,
+      modifiedAt: formatModifiedLabel(time, t("FilePage.todayLabel")),
       sortTime: time,
       path: record.FilePath,
     };
diff --git a/uniapp/youjiala/src/data/custom/fileBrowser.ts b/uniapp/youjiala/src/data/custom/fileBrowser.ts
index 8a5d144..e67450a 100644
--- a/uniapp/youjiala/src/data/custom/fileBrowser.ts
+++ b/uniapp/youjiala/src/data/custom/fileBrowser.ts
@@ -21,6 +21,13 @@ export interface FileItem {
   sortTime: number;
   /** DMS 记录的 FileName：文件夹点它下钻（当作下次查询的 FilePath），文件留作下载/预览键 */
   path: string;
+  /**
+   * 共享域角标（旧 MyComputerFamily 同义，仅目录显示锁）：
+   * "Y" 有权限（开锁绿）/ "N" 无权限（闭锁灰）；缺省不显示——文件页/回收站/顶层群组卡没有这个概念
+   */
+  permission?: "Y" | "N";
+  /** 已被收藏共享（PermissionIndc=Y 且 FavoriteIndc=Y）：显示蓝色共享角标 */
+  shared?: boolean;
 }
 
 /** 快捷功能入口的单项：图标 + 渐变底色，页面给什么画什么 */
diff --git a/uniapp/youjiala/src/locale/lang/en-US.json b/uniapp/youjiala/src/locale/lang/en-US.json
index 86fda41..c33e78d 100644
--- a/uniapp/youjiala/src/locale/lang/en-US.json
+++ b/uniapp/youjiala/src/locale/lang/en-US.json
@@ -30,7 +30,7 @@
     "album": "Family Album",
     "musicHall": "Music Hall",
     "videoHall": "Video Hall",
-    "shareCenter": "Share Center",
+    "shareCenter": "Share Hall",
     "trash": "Trash",
     "catAll": "All",
     "catImage": "Images",
@@ -85,6 +85,7 @@
     "moveHere": "Move here",
     "moveNoSub": "No subfolders",
     "shareTitle": "Choose a family folder",
+    "shareHere": "Share here",
     "shareDone": "Shared",
     "shareNoFile": "No shareable files",
     "publishNoFile": "No publishable files",
@@ -117,6 +118,115 @@
     "pickFirst": "Select items first",
     "emptyText": "Trash is empty"
   },
+  "ShareHallPage": {
+    "title": "Share Hall",
+    "noPermission": "No permission for this folder",
+    "enter": "Open",
+    "preview": "Preview",
+    "play": "Play",
+    "download": "Download",
+    "unshare": "Unshare",
+    "unshareConfirmText": "Unshare \"{name}\"? The original file stays in its owner's drive",
+    "unshareDone": "Unshared",
+    "createDone": "Folder created",
+    "emptyGroups": "No shared groups yet",
+    "emptyText": "This folder is empty"
+  },
+  "SharePage": {
+    "title": "Family Groups",
+    "createTitle": "Create Group",
+    "noAccess": "This group is private and you are not a member",
+    "unnamed": "Unnamed",
+    "chipPublic": "Public",
+    "chipPrivate": "Private",
+    "chipJoinable": "Joinable",
+    "chipManager": "Admin",
+    "chipMember": "Member",
+    "emptyGroups": "No groups to join yet",
+    "noDesc": "No description",
+    "cancel": "Cancel",
+    "save": "Save",
+    "amend": "Edit",
+    "dissolve": "Disband",
+    "dissolveConfirm": "Disband \"{name}\"? Folders and memberships will be removed together",
+    "dissolveDone": "Group disbanded",
+    "saveDone": "Saved",
+    "createDone": "Group created",
+    "nameRequired": "Enter a group name",
+    "groupInfo": "Group Info",
+    "groupName": "Group Name",
+    "groupDesc": "Description",
+    "publicSetting": "Public group",
+    "joinApply": "Allow join requests",
+    "folders": "Shared Folders",
+    "newFolder": "New Folder",
+    "add": "Add",
+    "folderPh": "Enter folder name",
+    "notePh": "Note (optional)",
+    "noFolders": "No shared folders",
+    "deleteFolder": "Delete Folder",
+    "deleteFolderConfirm": "Delete this shared folder? It cannot be deleted if it still contains items",
+    "folderNotEmpty": "The folder still contains items and cannot be deleted",
+    "delete": "Delete",
+    "assign": "Assign",
+    "assignDone": "Permission assigned",
+    "noCandidate": "All members already have this folder",
+    "requests": "Pending Requests",
+    "approve": "Approve",
+    "approveDone": "Approved",
+    "reject": "Reject",
+    "rejectConfirm": "Reject this request?",
+    "rejectDone": "Rejected",
+    "members": "Members",
+    "removeMember": "Remove",
+    "removeMemberConfirm": "Remove this member from the group? Their folder permissions will be cleared",
+    "permissions": "Folder Permissions",
+    "applyJoin": "Join",
+    "submitApply": "Submit",
+    "joinPh": "Tell the admin why you want to join",
+    "applyDone": "Request submitted, awaiting review"
+  },
+  "MediaPage": {
+    "title": "Media",
+    "createTitle": "New Album",
+    "segPhoto": "Photos",
+    "segAudio": "Music",
+    "segVideo": "Video",
+    "emptyAlbums": "No albums yet",
+    "unnamed": "Untitled",
+    "noDesc": "No description",
+    "noAccess": "You don't have access to this album",
+    "chipPublic": "Public",
+    "chipDefault": "Default",
+    "albumInfo": "Album Info",
+    "albumNo": "Album No.",
+    "albumName": "Album Name",
+    "albumDesc": "Album Description",
+    "autoNo": "Generated on save",
+    "publicLabel": "Public to everyone",
+    "defaultLabel": "Set as default",
+    "nameRequired": "Please enter an album name",
+    "details": "Album Items",
+    "noDetails": "No items yet. Publish content to this album from the Files page",
+    "moveUp": "Up",
+    "moveDown": "Down",
+    "delete": "Delete",
+    "deleteDetailConfirm": "Remove this item from the album?",
+    "groups": "Shared Groups",
+    "groupName": "Group Name",
+    "groupDesc": "Group Description",
+    "addGroup": "Add Group",
+    "noGroups": "Not published to any group yet",
+    "noGroupsAvailable": "No groups available, or all already published",
+    "exhibit": "Exhibit",
+    "amend": "Edit",
+    "save": "Save",
+    "cancel": "Cancel",
+    "deleteConfirm": "Delete album \"{name}\"? Items and group publishing will be removed",
+    "deleteDone": "Album deleted",
+    "saveDone": "Saved",
+    "createDone": "Album created"
+  },
   "TransportPage": {
     "title": "Transfers",
     "active": "Active",
diff --git a/uniapp/youjiala/src/locale/lang/zh-CN.json b/uniapp/youjiala/src/locale/lang/zh-CN.json
index e2d9ee6..9cea14c 100644
--- a/uniapp/youjiala/src/locale/lang/zh-CN.json
+++ b/uniapp/youjiala/src/locale/lang/zh-CN.json
@@ -30,7 +30,7 @@
     "album": "有家相册",
     "musicHall": "音乐厅",
     "videoHall": "影视厅",
-    "shareCenter": "共享中心",
+    "shareCenter": "共享大厅",
     "trash": "回收站",
     "catAll": "全部",
     "catImage": "图片",
@@ -85,6 +85,7 @@
     "moveHere": "移动到此",
     "moveNoSub": "没有子文件夹",
     "shareTitle": "选择家人目录",
+    "shareHere": "共享到此",
     "shareDone": "共享成功",
     "shareNoFile": "没有可共享的文件",
     "publishNoFile": "没有可发布的文件",
@@ -117,6 +118,115 @@
     "pickFirst": "请先勾选条目",
     "emptyText": "回收站是空的"
   },
+  "ShareHallPage": {
+    "title": "共享大厅",
+    "noPermission": "您还没有该目录的权限",
+    "enter": "打开",
+    "preview": "预览",
+    "play": "播放",
+    "download": "下载",
+    "unshare": "取消共享",
+    "unshareConfirmText": "确定取消共享「{name}」？原文件仍在其所有者网盘中",
+    "unshareDone": "已取消共享",
+    "createDone": "已创建文件夹",
+    "emptyGroups": "还没有共享的群组",
+    "emptyText": "这个目录是空的"
+  },
+  "SharePage": {
+    "title": "家庭群组",
+    "createTitle": "创建群组",
+    "noAccess": "该群组为私密，您还不是成员",
+    "unnamed": "未命名",
+    "chipPublic": "公开",
+    "chipPrivate": "私密",
+    "chipJoinable": "可申请",
+    "chipManager": "管理员",
+    "chipMember": "成员",
+    "emptyGroups": "还没有可加入的群组",
+    "noDesc": "暂无群组描述",
+    "cancel": "取消",
+    "save": "保存",
+    "amend": "修改",
+    "dissolve": "解散群",
+    "dissolveConfirm": "确定解散「{name}」？解散后目录与成员关系一并清除",
+    "dissolveDone": "已解散群组",
+    "saveDone": "已保存",
+    "createDone": "群组已创建",
+    "nameRequired": "请输入群组名称",
+    "groupInfo": "群组信息",
+    "groupName": "群组名称",
+    "groupDesc": "群组描述",
+    "publicSetting": "公开群组",
+    "joinApply": "允许申请加入",
+    "folders": "共享目录",
+    "newFolder": "新建目录",
+    "add": "添加",
+    "folderPh": "请输入目录名称",
+    "notePh": "备注（选填）",
+    "noFolders": "暂无共享目录",
+    "deleteFolder": "删除目录",
+    "deleteFolderConfirm": "确定删除该共享目录？目录内若仍有内容将无法删除",
+    "folderNotEmpty": "目录内仍有内容，无法删除",
+    "delete": "删除",
+    "assign": "分配权限",
+    "assignDone": "已分配权限",
+    "noCandidate": "成员都已获得该目录权限",
+    "requests": "待审核成员",
+    "approve": "同意",
+    "approveDone": "已通过",
+    "reject": "拒绝",
+    "rejectConfirm": "确定拒绝该申请？",
+    "rejectDone": "已拒绝",
+    "members": "正式成员",
+    "removeMember": "移出",
+    "removeMemberConfirm": "确定将该成员移出群组？其目录权限一并清除",
+    "permissions": "目录权限",
+    "applyJoin": "申请加入",
+    "submitApply": "提交申请",
+    "joinPh": "请填写申请原因，方便管理员审核",
+    "applyDone": "申请已提交，请等待审核"
+  },
+  "MediaPage": {
+    "title": "多媒体",
+    "createTitle": "新建专辑",
+    "segPhoto": "相册",
+    "segAudio": "音乐",
+    "segVideo": "影视",
+    "emptyAlbums": "还没有专辑",
+    "unnamed": "未命名",
+    "noDesc": "暂无描述",
+    "noAccess": "该专辑无权限查看",
+    "chipPublic": "公开",
+    "chipDefault": "默认",
+    "albumInfo": "专辑信息",
+    "albumNo": "专辑编号",
+    "albumName": "专辑名称",
+    "albumDesc": "专辑描述",
+    "autoNo": "保存后由系统生成",
+    "publicLabel": "对所有人公开",
+    "defaultLabel": "设为默认专辑",
+    "nameRequired": "请输入专辑名称",
+    "details": "专辑明细",
+    "noDetails": "暂无明细，请到「文件」页发布内容到本专辑",
+    "moveUp": "上移",
+    "moveDown": "下移",
+    "delete": "删除",
+    "deleteDetailConfirm": "确定从专辑中移除该明细？",
+    "groups": "公开群组",
+    "groupName": "群组名称",
+    "groupDesc": "群组描述",
+    "addGroup": "添加群组",
+    "noGroups": "尚未发布到任何群组",
+    "noGroupsAvailable": "没有可添加的群组，或都已发布过",
+    "exhibit": "展览",
+    "amend": "修改",
+    "save": "保存",
+    "cancel": "取消",
+    "deleteConfirm": "确定删除专辑「{name}」？明细与群组发布关系一并清除",
+    "deleteDone": "已删除专辑",
+    "saveDone": "已保存",
+    "createDone": "专辑已创建"
+  },
   "TransportPage": {
     "title": "传输列表",
     "active": "进行中",
diff --git a/uniapp/youjiala/src/pages.json b/uniapp/youjiala/src/pages.json
index 71b7151..a5f4b1a 100644
--- a/uniapp/youjiala/src/pages.json
+++ b/uniapp/youjiala/src/pages.json
@@ -52,9 +52,25 @@
     {
       "path": "pages/media/play/play"
     },
+    // 相册展览（短地址 /photo-show）：多媒体专辑「展览」+ 文件页相册快捷入口，全屏幻灯
+    {
+      "path": "pages/media/photo-show/photo-show"
+    },
+    // 音乐厅（短地址 /audio-hall）：多媒体音乐专辑「展览」+ 文件页音乐快捷入口，黑胶播放器
+    {
+      "path": "pages/media/audio-hall/audio-hall"
+    },
+    // 影视厅（短地址 /video-hall）：多媒体影视专辑「展览」+ 文件页影视快捷入口，自绘播放器
+    {
+      "path": "pages/media/video-hall/video-hall"
+    },
     // 回收站（短地址 /trash）：文件页快捷入口跳入，还原/彻底删除
     {
       "path": "pages/trash/trash"
+    },
+    // 共享大厅（短地址 /share-hall）：文件页快捷入口跳入，家人共享目录浏览与组内建目录
+    {
+      "path": "pages/share-hall/share-hall"
     }
   ],
   // 全局配置
diff --git a/uniapp/youjiala/src/pages/media/audio-hall/audio-hall.vue b/uniapp/youjiala/src/pages/media/audio-hall/audio-hall.vue
new file mode 100644
index 0000000..02ee8d8
--- /dev/null
+++ b/uniapp/youjiala/src/pages/media/audio-hall/audio-hall.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+/**
+ * 音乐厅页（对齐旧 WebVue views/master/PreviewAudio.vue）：
+ * 黑胶唱机播放器外壳。入参经 query 传：mode=list&key=<目录路径> 播放当前目录音频；
+ * 或 key=<专辑编号> 播放某音乐专辑；无 key 走默认专辑。取数逻辑见 composables/useMediaShow。
+ * 隐藏控制区时（v-model:controls）本壳顺带隐掉导航/系统栏做整页沉浸（H5 元素全屏在组件内处理）。
+ */
+import type { VinylTrack } from "@/components/vinyl-audio-player/vinyl-audio-player.vue";
+import { onLoad } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import { useMediaShow } from "@/composables";
+
+const { loadTracks } = useMediaShow();
+
+const tracks = ref<VinylTrack[]>([]);
+const controls = ref(true);
+const loading = ref(true);
+const errorText = ref("");
+
+function closeMe(): void {
+    if (getCurrentPages().length > 1) {
+        uni.navigateBack();
+        return;
+    }
+    uni.switchTab({
+        url: "/pages/tab/media",
+        fail: () => uni.reLaunch({ url: "/pages/tab/media" }),
+    });
+}
+
+onLoad(async (query) => {
+    const mode = String(query?.mode || "");
+    const key = decodeURIComponent(String(query?.key || ""));
+    try {
+        const items = await loadTracks(mode, key);
+        tracks.value = items.map(t => ({
+            name: t.name || t.title || "",
+            author: "有家相册",
+            url: t.url,
+            cover: t.pic || undefined,
+            lrc: t.lrc || undefined,
+        }));
+    } catch (error: any) {
+        errorText.value = error?.message || "加载失败";
+    } finally {
+        loading.value = false;
+    }
+});
+</script>
+
+<template>
+    <app-page :hide-nav="true" :show-tabbar="false">
+        <view v-if="loading" class="show-loading">
+            <text class="show-loading__text">加载中…</text>
+        </view>
+        <view v-else-if="errorText" class="show-loading" @tap="closeMe">
+            <text class="show-loading__text">{{ errorText }}</text>
+        </view>
+        <vinyl-audio-player v-else v-model:controls="controls" :tracks="tracks" @close="closeMe" />
+    </app-page>
+</template>
+
+<style lang="scss" scoped>
+.show-loading {
+    display: flex;
+    position: fixed;
+    inset: 0;
+    align-items: center;
+    justify-content: center;
+    background: #0b0d10;
+}
+
+.show-loading__text {
+    font-size: 28rpx;
+    color: #9aa0a6;
+}
+</style>
diff --git a/uniapp/youjiala/src/pages/media/photo-show/photo-show.vue b/uniapp/youjiala/src/pages/media/photo-show/photo-show.vue
new file mode 100644
index 0000000..1bfebf6
--- /dev/null
+++ b/uniapp/youjiala/src/pages/media/photo-show/photo-show.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+/**
+ * 相册展览页（对齐旧 WebVue views/master/Preview.vue）：
+ * 全屏幻灯播放器外壳。入参经 query 传：mode=list&key=<目录路径> 展览当前目录图片；
+ * 或 key=<专辑编号> 展览某相册；无 key 走默认相册。取数逻辑见 composables/useMediaShow。
+ * 隐藏控制区时（v-model:controls）本壳顺带隐掉导航/系统栏做整页沉浸（H5 元素全屏在组件内处理）。
+ */
+import type { SlideItem } from "@/composables";
+import { onLoad } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import { useMediaShow } from "@/composables";
+
+const { loadPhotos } = useMediaShow();
+
+const items = ref<SlideItem[]>([]);
+const controls = ref(true);
+const loading = ref(true);
+const errorText = ref("");
+
+function closeMe(): void {
+    if (getCurrentPages().length > 1) {
+        uni.navigateBack();
+        return;
+    }
+    uni.switchTab({
+        url: "/pages/tab/media",
+        fail: () => uni.reLaunch({ url: "/pages/tab/media" }),
+    });
+}
+
+onLoad(async (query) => {
+    const mode = String(query?.mode || "");
+    const key = decodeURIComponent(String(query?.key || ""));
+    try {
+        items.value = await loadPhotos(mode, key);
+    } catch (error: any) {
+        errorText.value = error?.message || "加载失败";
+    } finally {
+        loading.value = false;
+    }
+});
+</script>
+
+<template>
+    <app-page :hide-nav="true" :show-tabbar="false">
+        <view v-if="loading" class="show-loading">
+            <text class="show-loading__text">加载中…</text>
+        </view>
+        <view v-else-if="errorText" class="show-loading" @tap="closeMe">
+            <text class="show-loading__text">{{ errorText }}</text>
+        </view>
+        <photo-slide-player v-else v-model:controls="controls" :items="items" @close="closeMe" />
+    </app-page>
+</template>
+
+<style lang="scss" scoped>
+.show-loading {
+    display: flex;
+    position: fixed;
+    inset: 0;
+    align-items: center;
+    justify-content: center;
+    background: #000;
+}
+
+.show-loading__text {
+    font-size: 28rpx;
+    color: #9aa0a6;
+}
+</style>
diff --git a/uniapp/youjiala/src/pages/media/video-hall/video-hall.vue b/uniapp/youjiala/src/pages/media/video-hall/video-hall.vue
new file mode 100644
index 0000000..b0069e2
--- /dev/null
+++ b/uniapp/youjiala/src/pages/media/video-hall/video-hall.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+/**
+ * 影视厅页（对齐旧 WebVue views/master/PreviewVideo.vue）：
+ * 自绘控制播放器外壳。入参经 query 传：mode=list&key=<目录路径> 播放当前目录视频；
+ * 或 key=<专辑编号> 播放某影视专辑；无 key 走默认专辑。取数逻辑见 composables/useMediaShow。
+ * 隐藏控制区时（v-model:controls）本壳顺带隐掉导航/系统栏做整页沉浸。
+ */
+import type { VideoSource } from "@/components/video-player/video-player.vue";
+import { onLoad } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import { useMediaShow } from "@/composables";
+
+const { loadVideos } = useMediaShow();
+
+const videos = ref<VideoSource[]>([]);
+const controls = ref(true);
+const loading = ref(true);
+const errorText = ref("");
+
+function closeMe(): void {
+    if (getCurrentPages().length > 1) {
+        uni.navigateBack();
+        return;
+    }
+    uni.switchTab({
+        url: "/pages/tab/media",
+        fail: () => uni.reLaunch({ url: "/pages/tab/media" }),
+    });
+}
+
+onLoad(async (query) => {
+    const mode = String(query?.mode || "");
+    const key = decodeURIComponent(String(query?.key || ""));
+    try {
+        const items = await loadVideos(mode, key);
+        videos.value = items.map(v => ({
+            name: v.name || v.title || "",
+            url: v.url,
+            m3u8: v.m3u8,
+            pic: v.pic,
+        }));
+    } catch (error: any) {
+        errorText.value = error?.message || "加载失败";
+    } finally {
+        loading.value = false;
+    }
+});
+</script>
+
+<template>
+    <app-page :hide-nav="true" :show-tabbar="false">
+        <view v-if="loading" class="show-loading">
+            <text class="show-loading__text">加载中…</text>
+        </view>
+        <view v-else-if="errorText" class="show-loading" @tap="closeMe">
+            <text class="show-loading__text">{{ errorText }}</text>
+        </view>
+        <video-player v-else v-model:controls="controls" :videos="videos" @close="closeMe" />
+    </app-page>
+</template>
+
+<style lang="scss" scoped>
+.show-loading {
+    display: flex;
+    position: fixed;
+    inset: 0;
+    align-items: center;
+    justify-content: center;
+    background: #0b0d10;
+}
+
+.show-loading__text {
+    font-size: 28rpx;
+    color: #9aa0a6;
+}
+</style>
diff --git a/uniapp/youjiala/src/pages/share-hall/share-hall.vue b/uniapp/youjiala/src/pages/share-hall/share-hall.vue
new file mode 100644
index 0000000..761f2b5
--- /dev/null
+++ b/uniapp/youjiala/src/pages/share-hall/share-hall.vue
@@ -0,0 +1,485 @@
+<script setup lang="ts">
+/**
+ * 共享大厅页（短地址 /share-hall，从文件页快捷入口「共享大厅」跳入）：
+ * 两态结构——顶层大厅只列家人群组（每张卡=一个共享目录，无任何写操作），
+ * 点群组进组后才出现搜索/分类/排序/新建文件夹（旧系统 FamilyGroupShare 语义：
+ * 大厅顶层不建目录，进组才挂 CreateFamilyDmsFolder）。
+ * 组内条目动作按类型分流：目录下钻（无权限提示）、图片预览、视频/音频播放、
+ * 下载、取消共享（DeleteFamilyDmsFolder 只摘映射不动原文件）。
+ * 数据链在 composables/useShareHall；权限沿用 DmsFile（routes.ts），useAuthGuard 兜冷启动直达。
+ */
+import type { FileCategory, FileItem, FileTabItem } from "@/data/custom/fileBrowser";
+import { useLocale } from "uview-pro";
+import { computed, ref } from "vue";
+import { useAuthGuard, useShareHall, useThemeGradient } from "@/composables";
+import { pageUrl } from "@/router/routes";
+import { fetchFileBytes, saveFileBytes, toPlayableUrl } from "@/utils/dmsBytes";
+import { clearPlayback, setPlayback } from "@/utils/playbackBus";
+
+const { t } = useLocale();
+
+// 页面底渐变跟随主题（与文件页同一派生逻辑）
+const { themeBackground } = useThemeGradient();
+
+const {
+    groups,
+    files,
+    records,
+    loading,
+    errorText,
+    pathStack,
+    inGroup,
+    init,
+    enterGroup,
+    exitGroup,
+    openFolder,
+    back,
+    goTo,
+    loadFolder,
+    createFolder,
+    unshare,
+} = useShareHall();
+
+// 每次回到页面重拉：大厅群组与组内目录都可能被别的端改过
+useAuthGuard(async () => {
+    if (inGroup.value) {
+        await loadFolder(pathStack.value[pathStack.value.length - 1]?.value ?? "");
+    }
+    else {
+        await init();
+    }
+});
+
+// ===== 页面状态 =====
+const keyword = ref("");
+const category = ref<FileCategory>("all");
+const viewMode = ref<"grid" | "list">("list");
+/** 排序模式：0 时间降序 / 1 升序 / 2 名称（与文件页同套） */
+const sortMode = ref(0);
+const showSearch = ref(true);
+/** 新建文件夹对话框（folder-name-dialog 复用文件页组件） */
+const folderDialogVisible = ref(false);
+const folderSubmitting = ref(false);
+/** 动作提交中标记：showLoading 期间防连点 */
+const busy = ref(false);
+
+/** 导航标题：大厅顶层「共享大厅」，进组后跟随当前层名（组根=群组名） */
+const navTitle = computed(() =>
+    inGroup.value
+        ? pathStack.value[pathStack.value.length - 1]?.displayName || t("ShareHallPage.title")
+        : t("ShareHallPage.title"),
+);
+
+const tabs = computed<FileTabItem[]>(() => [
+    { key: "all", label: t("FilePage.catAll") },
+    { key: "image", label: t("FilePage.catImage") },
+    { key: "audio", label: t("FilePage.catAudio") },
+    { key: "video", label: t("FilePage.catVideo") },
+    { key: "document", label: t("FilePage.catDocument") },
+]);
+
+/** 分类/关键字本地过滤（组内一次拉全，切标签不打接口） */
+const visibleFiles = computed<FileItem[]>(() => {
+    const kw = keyword.value.trim().toLowerCase();
+    const list = (inGroup.value ? files.value : groups.value).filter(
+        f => (category.value === "all" || f.kind === category.value)
+            && (!kw || f.name.toLowerCase().includes(kw)),
+    );
+    return [...list].sort((a, b) => {
+        if (sortMode.value === 2) {
+            return a.name.localeCompare(b.name, "zh-CN");
+        }
+        return sortMode.value === 1 ? a.sortTime - b.sortTime : b.sortTime - a.sortTime;
+    });
+});
+
+function toast(title: string): void {
+    uni.showToast({ title, icon: "none" });
+}
+
+/** showModal 包 Promise（取消共享确认） */
+function confirmDialog(title: string, content: string): Promise<boolean> {
+    return new Promise((resolve) => {
+        uni.showModal({
+            title,
+            content,
+            success: res => resolve(!!res.confirm),
+            fail: () => resolve(false),
+        });
+    });
+}
+
+/** 动作防重 + loading 包裹（与文件页 withBusy 同套路） */
+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;
+    }
+}
+
+// ===== 导航 / 搜索 / 分类 =====
+async function onBack(): Promise<void> {
+    // 组内：退一层目录，组根再退回大厅；顶层：退出页面
+    if (inGroup.value) {
+        keyword.value = "";
+        if (!(await back())) {
+            await exitGroup();
+        }
+        return;
+    }
+    // 直链直达 /share-hall 时没有返回栈：兜回文件页
+    if (getCurrentPages().length > 1) {
+        uni.navigateBack();
+        return;
+    }
+    uni.reLaunch({ url: pageUrl("fileTab") });
+}
+
+function onToggleSearch(): void {
+    showSearch.value = !showSearch.value;
+}
+
+/** 关键字确认键走服务端 contain 重查（仅组内；大厅顶层本地过滤群组名） */
+async function onSearch(): Promise<void> {
+    if (inGroup.value) {
+        await loadFolder(pathStack.value[pathStack.value.length - 1]?.value ?? "", keyword.value);
+    }
+}
+
+/** 失败态重试：组内重查当前层，顶层重拉群组列表 */
+async function onRetry(): Promise<void> {
+    if (inGroup.value) {
+        await onSearch();
+        return;
+    }
+    await init();
+}
+
+function onCategoryChange(key: FileCategory): void {
+    category.value = key;
+}
+
+function onSort(): void {
+    sortMode.value = (sortMode.value + 1) % 3;
+}
+
+function onToggleView(): void {
+    viewMode.value = viewMode.value === "grid" ? "list" : "grid";
+}
+
+/** 面包屑点某段：截断到该层（组根段回组根而非出组，出组走返回箭头） */
+async function onCrumbNav(index: number): Promise<void> {
+    keyword.value = "";
+    await goTo(index);
+}
+
+// ===== 条目动作层 =====
+
+/** 点目录：有权限下钻，无权限由 openFolder 抛文案 toast */
+async function enterFolder(file: FileItem): Promise<void> {
+    try {
+        await openFolder(file);
+        keyword.value = "";
+    }
+    catch (error: any) {
+        toast(error?.message || t("FilePage.actionFailed"));
+    }
+}
+
+async function doPreview(file: FileItem): Promise<void> {
+    const record = records.value.get(file.id);
+    if (!record) {
+        return;
+    }
+    await withBusy(async () => {
+        const urls = [toPlayableUrl(await fetchFileBytes(record))];
+        uni.previewImage({ urls, current: urls[0] });
+    });
+}
+
+async function doDownload(file: FileItem): Promise<void> {
+    const record = records.value.get(file.id);
+    if (!record) {
+        return;
+    }
+    await withBusy(async () => {
+        await saveFileBytes(await fetchFileBytes(record));
+        toast(t("FilePage.downloadDone"));
+    }, t("FilePage.downloading"));
+}
+
+/** 视频/音频播放：Url 直链直接进播放页，否则字节拼整后本地播（与文件页同策略） */
+async function doPlay(file: FileItem): Promise<void> {
+    const record = records.value.get(file.id);
+    if (!record) {
+        return;
+    }
+    const kind = file.kind === "video" ? "video" : "audio";
+    if (kind === "video" && record.Url) {
+        goPlay(kind, file.name, record.Url);
+        return;
+    }
+    await withBusy(async () => {
+        const payload = await fetchFileBytes(record);
+        goPlay(kind, file.name, toPlayableUrl(payload));
+    }, t("FilePage.loadingMedia"));
+}
+
+function goPlay(kind: "video" | "audio", name: string, url: string): void {
+    // 播放地址走模块级总线传递，query 只带类型与展示名（文件页同款：blob 地址经 query 二次编码会跳转失败）
+    setPlayback({ type: kind, name, url });
+    uni.navigateTo({
+        url: `${pageUrl("mediaPlay")}?type=${kind}&name=${encodeURIComponent(name)}`,
+        fail: (err: any) => {
+            clearPlayback();
+            toast(err?.errMsg || t("FilePage.actionFailed"));
+        },
+    });
+}
+
+async function doUnshare(file: FileItem): Promise<void> {
+    const ok = await confirmDialog(
+        t("ShareHallPage.unshare"),
+        t("ShareHallPage.unshareConfirmText").replace("{name}", file.name),
+    );
+    if (!ok) {
+        return;
+    }
+    await withBusy(async () => {
+        await unshare(file);
+        toast(t("ShareHallPage.unshareDone"));
+    });
+}
+
+/** 按条目类型拼动作集（系统动作面板），取消共享任何类型都有 */
+function sheetActions(file: FileItem): Array<{ key: string; label: string }> {
+    const actions: Array<{ key: string; label: string }> = [];
+    if (file.kind === "folder") {
+        actions.push({ key: "enter", label: t("ShareHallPage.enter") });
+    }
+    if (file.kind === "image") {
+        actions.push({ key: "preview", label: t("ShareHallPage.preview") });
+    }
+    if (file.kind === "video" || file.kind === "audio") {
+        actions.push({ key: "play", label: t("ShareHallPage.play") });
+    }
+    if (file.kind !== "folder") {
+        actions.push({ key: "download", label: t("ShareHallPage.download") });
+    }
+    // 大厅顶层的群组卡没有共享记录，不给取消共享
+    if (inGroup.value) {
+        actions.push({ key: "unshare", label: t("ShareHallPage.unshare") });
+    }
+    return actions;
+}
+
+function openSheet(file: FileItem): void {
+    const actions = sheetActions(file);
+    uni.showActionSheet({
+        itemList: actions.map(a => a.label),
+        success: (res) => {
+            const action = actions[res.tapIndex];
+            if (action.key === "enter") {
+                // 顶层群组卡的「打开」是进组，组内目录卡的「打开」才是下钻
+                if (inGroup.value) {
+                    enterFolder(file);
+                }
+                else {
+                    enterTopGroup(file);
+                }
+            }
+            else if (action.key === "preview") {
+                doPreview(file);
+            }
+            else if (action.key === "play") {
+                doPlay(file);
+            }
+            else if (action.key === "download") {
+                doDownload(file);
+            }
+            else if (action.key === "unshare") {
+                doUnshare(file);
+            }
+        },
+    });
+}
+
+/** 单击条目：目录进组/下钻，图片预览，音视频播放，文档走动作面板（无预览能力） */
+function onOpen(file: FileItem): void {
+    if (!inGroup.value) {
+        enterTopGroup(file);
+        return;
+    }
+    if (file.kind === "folder") {
+        enterFolder(file);
+    }
+    else if (file.kind === "image") {
+        doPreview(file);
+    }
+    else if (file.kind === "video" || file.kind === "audio") {
+        doPlay(file);
+    }
+    else {
+        openSheet(file);
+    }
+}
+
+/** 大厅顶层点群组卡：进组 */
+async function enterTopGroup(group: FileItem): Promise<void> {
+    await withBusy(async () => {
+        await enterGroup(group);
+        category.value = "all";
+        keyword.value = "";
+    });
+}
+
+// ===== 新建文件夹（仅组内） =====
+function onNewFolder(): void {
+    folderDialogVisible.value = true;
+}
+
+async function onCreateFolder(name: string): Promise<void> {
+    folderSubmitting.value = true;
+    try {
+        await createFolder(name);
+        toast(t("ShareHallPage.createDone"));
+        folderDialogVisible.value = false;
+    }
+    catch (error: any) {
+        toast(error?.message || t("FilePage.actionFailed"));
+    }
+    finally {
+        folderSubmitting.value = false;
+    }
+}
+</script>
+
+<template>
+    <!-- 二级页不带 tabbar（app-page 默认关） -->
+    <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"
+                    @toggle-search="onToggleSearch" />
+                <!-- 组内才有的路径条：两层以上显示（组根不显示，与文件页惯例一致） -->
+                <view v-if="inGroup && pathStack.length > 1" class="hall-page__crumb">
+                    <file-breadcrumb :items="pathStack" @nav="onCrumbNav" />
+                </view>
+                <search-input v-if="inGroup && showSearch" v-model="keyword"
+                    :placeholder="t('FilePage.searchPlaceholder')" @search="onSearch" />
+                <!-- 分类栏：新建文件夹仅组内出现（大厅顶层无写操作），共享大厅不做批量多选 -->
+                <file-tab-filter v-if="inGroup" :tabs="tabs" :active="category" :view-mode="viewMode"
+                    :show-new-folder="true" :show-select="false" @change="onCategoryChange" @sort="onSort"
+                    @toggle-view="onToggleView" @new-folder="onNewFolder" />
+            </view>
+            <!-- 滚动窗口外层包装＝卡片本体：margin/圆角/白底/裁剪在这层（与文件页同因） -->
+            <view class="hall-page__scroll-wrap">
+                <scroll-view scroll-y class="hall-page__scroll">
+                    <view class="hall-page__card">
+                        <view v-if="loading" class="hall-page__state">
+                            <text class="hall-page__state-text">
+                                {{ t("FilePage.loading") }}
+                            </text>
+                        </view>
+                        <view v-else-if="errorText" class="hall-page__state">
+                            <text class="hall-page__state-text hall-page__state-text--error">
+                                {{ errorText }}
+                            </text>
+                            <text class="hall-page__retry" @click="onRetry()">
+                                {{ t("FilePage.retryBut") }}
+                            </text>
+                        </view>
+                        <file-grid-list v-else :files="visibleFiles" :view-mode="viewMode" :selected-ids="[]"
+                            :empty-text="inGroup ? t('ShareHallPage.emptyText') : t('ShareHallPage.emptyGroups')"
+                            @open="onOpen" @more="openSheet" />
+                    </view>
+                    <view class="hall-page__bottom-space" />
+                </scroll-view>
+            </view>
+            <!-- 新建文件夹：复用文件页命名对话框（默认文案就是新建） -->
+            <folder-name-dialog :visible="folderDialogVisible" :submitting="folderSubmitting"
+                @close="folderDialogVisible = false" @confirm="onCreateFolder" />
+        </view>
+    </app-page>
+</template>
+
+<style lang="scss" scoped>
+/* 骨架样式与文件页/回收站同套（fixed 全屏 + head/scroll-wrap 卡片分区），前缀换 hall-page */
+.hall-page {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    /* 渐变底由 script 的 themeBackground 按主题 primary 动态计算（内联 style 下发） */
+}
+
+.hall-page__head {
+    flex-shrink: 0;
+}
+
+/* 面包屑分区：与文件页同节奏的间隔（面包屑自身就是白卡片） */
+.hall-page__crumb {
+    padding: 20rpx 24rpx 0;
+}
+
+/* 滚动窗口外层包装＝卡片本体 */
+.hall-page__scroll-wrap {
+    flex: 1;
+    min-height: 0;
+    margin: 20rpx 20rpx 0;
+    border-radius: 32rpx 32rpx 0 0;
+    background-color: #ffffff;
+    overflow: hidden;
+}
+
+/* scroll-view 只当纯滚动容器垫满 wrap，滚动内容被 wrap 的圆角窗口裁剪 */
+.hall-page__scroll {
+    height: 100%;
+}
+
+.hall-page__bottom-space {
+    height: 48rpx;
+}
+
+.hall-page__state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 24rpx;
+    padding: 64rpx 32rpx;
+}
+
+.hall-page__state-text {
+    font-size: 26rpx;
+    color: #9aa0a6;
+}
+
+.hall-page__state-text--error {
+    color: #f0413e;
+}
+
+.hall-page__retry {
+    padding: 8rpx 28rpx;
+    border-radius: 999rpx;
+    font-size: 26rpx;
+    color: #2b8fff;
+    background-color: #eaf4ff;
+}
+</style>
diff --git a/uniapp/youjiala/src/pages/tab/file.vue b/uniapp/youjiala/src/pages/tab/file.vue
index 842a080..41faa52 100644
--- a/uniapp/youjiala/src/pages/tab/file.vue
+++ b/uniapp/youjiala/src/pages/tab/file.vue
@@ -15,6 +15,7 @@
  * 权限暂用 UserOperation（见 routes.ts 的 PAGE_PERMISSIONS）；useAuthGuard 兜冷启动直达。
  */
 import type { FolderRow } from "@/components/folder-move-picker/folder-move-picker.vue";
+import type { ShareTarget } from "@/components/folder-share-picker/folder-share-picker.vue";
 import type { PickerOption } from "@/components/option-picker/option-picker.vue";
 import type { FileCategory, FileItem, FileKind, FileTabItem, QuickEntryItem } from "@/data/custom/fileBrowser";
 import { useLocale } from "uview-pro";
@@ -22,14 +23,12 @@ import { computed, ref, watch } from "vue";
 import { useAuthGuard, useDmsFiles, useThemeGradient } from "@/composables";
 import { DmsFileEntity } from "@/data/auto/dmsFileEntity";
 import { FamilyGroupFolderEntity } from "@/data/auto/familyGroupFolderEntity";
-import { FamilyGroupManagerUserSearchCriteria } from "@/data/auto/familyGroupManagerUserSearchCriteria";
 import { PublishAudioSearchCriteria } from "@/data/auto/publishAudioSearchCriteria";
 import { PublishData } from "@/data/auto/publishData";
 import { PublishPhotoSearchCriteria } from "@/data/auto/publishPhotoSearchCriteria";
 import { PublishVideoSearchCriteria } from "@/data/auto/publishVideoSearchCriteria";
 import { pageUrl } from "@/router/routes";
 import dmsFileService from "@/service/master/dmsFileService";
-import familyGroupService from "@/service/master/familyGroupService";
 import publishAudioService from "@/service/master/publishAudioService";
 import publishPhotoService from "@/service/master/publishPhotoService";
 import publishVideoService from "@/service/master/publishVideoService";
@@ -180,12 +179,37 @@ function onSearch(value: string): void {
   search(value);
 }
 
+/** 展览/播放三入口：以当前目录为上下文，mode=list + key=目录路径跳对应播放器页 */
+function goShowWithFolder(name: "photoShow" | "audioHall" | "videoHall"): void {
+  const folder = pathStack.value[pathStack.value.length - 1]?.value ?? "";
+  uni.navigateTo({
+    url: `${pageUrl(name)}?mode=list&key=${encodeURIComponent(folder)}`,
+    fail: (err: any) => toast(err?.errMsg || t("FilePage.actionFailed")),
+  });
+}
+
 function onQuickClick(key: string): void {
-  // 回收站已落地（pages/trash）；其余入口仍是占位提示
+  // 回收站/共享大厅（pages/trash、pages/share-hall）；相册/音乐厅/影视厅展览当前目录
   if (key === "trash") {
     uni.navigateTo({ url: pageUrl("trash") });
     return;
   }
+  if (key === "shareCenter") {
+    uni.navigateTo({ url: pageUrl("shareHall") });
+    return;
+  }
+  if (key === "album") {
+    goShowWithFolder("photoShow");
+    return;
+  }
+  if (key === "musicHall") {
+    goShowWithFolder("audioHall");
+    return;
+  }
+  if (key === "videoHall") {
+    goShowWithFolder("videoHall");
+    return;
+  }
   const entry = quickEntries.value.find(e => e.key === key);
   toast(entry ? `${entry.label} · ${t("FilePage.todoTip")}` : t("FilePage.todoTip"));
 }
@@ -600,15 +624,12 @@ function goPlay(type: "video" | "audio", name: string, url: string): void {
   });
 }
 
-// ----- 共享家人：选收藏夹里的家人目录，组装 FamilyGroupFolderEntity 批量建（旧 handleSelectShare）-----
+// ----- 共享家人：共享大厅式抽屉选目标目录（群组卡→逐级下钻→共享到此），
+// 多选文件一次批量建（CreateFamilyGroupFolder 数组入参，旧 handleSelectShare 同口径）-----
 const shareVisible = ref(false);
-const shareLoading = ref(false);
-const shareItems = ref<PickerOption[]>([]);
-/** 展示用 items 之外的组装字段（FamilyName/TopFolderName 提交才需要） */
-const shareFolders = ref<Array<{ key: string; familyName: string; topFolderName: string }>>([]);
 const shareTargets = ref<FileItem[]>([]);
 
-async function actionShare(targets: FileItem[]): Promise<void> {
+function actionShare(targets: FileItem[]): void {
   const picked = targets.filter(f => f.kind !== "folder");
   if (!picked.length) {
     toast(t("FilePage.shareNoFile"));
@@ -616,41 +637,11 @@ async function actionShare(targets: FileItem[]): Promise<void> {
   }
   shareTargets.value = picked;
   shareVisible.value = true;
-  shareLoading.value = true;
-  try {
-    const criteria = new FamilyGroupManagerUserSearchCriteria();
-    criteria.Filter = [];
-    criteria.limit = 999;
-    criteria.page = 1;
-    criteria.GridColumns = [];
-    const data = await familyGroupService.FamilyFolderFavoriteBySearchCriteria(criteria);
-    const favorites = data?.Favorites ?? [];
-    shareFolders.value = favorites.map(f => ({
-      key: f.FolderName,
-      familyName: f.FamilyName,
-      topFolderName: f.TopFolderName,
-    }));
-    shareItems.value = favorites.map(f => ({
-      key: f.FolderName,
-      label: `${f.FamilyLocalName} / ${f.FolderLocalName}`,
-      sub: f.Notice,
-    }));
-  }
-  catch (error: any) {
-    toast(error?.message || t("FilePage.actionFailed"));
-  }
-  finally {
-    shareLoading.value = false;
-  }
 }
 
-async function onShareConfirm(key: string): Promise<void> {
-  const target = shareFolders.value.find(f => f.key === key);
-  shareVisible.value = false;
-  if (!target) {
-    return;
-  }
+async function onShareConfirm(target: ShareTarget): Promise<void> {
   const filesToShare = shareTargets.value;
+  shareVisible.value = false;
   await withBusy(async () => {
     const rows = filesToShare.map((file) => {
       const record = recordOf(file);
@@ -660,7 +651,7 @@ async function onShareConfirm(key: string): Promise<void> {
       // 旧系统组装：FolderName 文件系统名、FolderLocalName 原始名、FilePath 目标共享目录
       fgp.FolderName = record?.FileName ?? file.path;
       fgp.FolderLocalName = record?.OrgFileName ?? file.name;
-      fgp.FilePath = target.key;
+      fgp.FilePath = target.filePath;
       return fgp;
     });
     await dmsFileService.CreateFamilyGroupFolder(rows);
@@ -701,7 +692,8 @@ async function actionPublish(targets: FileItem[]): Promise<void> {
   publishVisible.value = true;
   publishLoading.value = true;
   try {
-    let names: string[] = [];
+    // 拉到的专辑行含名称(PublishLocalName)/描述(Notice)/编号(PublishName)，不能只留编号
+    let rows: Array<{ PublishName?: string; PublishLocalName?: string; Notice?: string }> = [];
     if (first.kind === "image") {
       const criteria = new PublishPhotoSearchCriteria();
       criteria.Filter = [];
@@ -709,7 +701,7 @@ async function actionPublish(targets: FileItem[]): Promise<void> {
       criteria.page = 1;
       criteria.GridColumns = [];
       const data = await publishPhotoService.FindBySearchCriteria(criteria);
-      names = (data?.Publishs ?? []).map(p => p.PublishName);
+      rows = data?.Publishs ?? [];
     }
     else if (first.kind === "video") {
       const criteria = new PublishVideoSearchCriteria();
@@ -718,7 +710,7 @@ async function actionPublish(targets: FileItem[]): Promise<void> {
       criteria.page = 1;
       criteria.GridColumns = [];
       const data = await publishVideoService.FindBySearchCriteria(criteria);
-      names = (data?.Datas ?? []).map(p => p.PublishName);
+      rows = data?.Datas ?? [];
     }
     else {
       const criteria = new PublishAudioSearchCriteria();
@@ -727,9 +719,24 @@ async function actionPublish(targets: FileItem[]): Promise<void> {
       criteria.page = 1;
       criteria.GridColumns = [];
       const data = await publishAudioService.FindBySearchCriteria(criteria);
-      names = (data?.Datas ?? []).map(p => p.PublishName);
+      rows = data?.Datas ?? [];
     }
-    publishItems.value = names.filter(Boolean).map(n => ({ key: n, label: n }));
+    // 主行显示专辑名称（无名称回落编号），副行显示描述 + 编号；key 仍用编号供 onPublishConfirm 发布
+    publishItems.value = rows
+      .filter(p => p?.PublishName)
+      .map((p) => {
+        const code = p.PublishName || "";
+        const hasName = !!p.PublishLocalName;
+        const label = p.PublishLocalName || code;
+        const parts: string[] = [];
+        if (p.Notice) {
+          parts.push(p.Notice);
+        }
+        if (hasName) {
+          parts.push(code);
+        }
+        return { key: code, label, sub: parts.join(" · ") };
+      });
   }
   catch (error: any) {
     toast(error?.message || t("FilePage.actionFailed"));
@@ -966,9 +973,8 @@ const transferIconWhite = transferGlyph("#ffffff");
       <!-- 移动：网盘式逐级下钻选择器（进层浏览，「移动到此」提交当前层后直接调移动接口） -->
       <folder-move-picker :visible="moveVisible" :exclude-name="moveExcludeName" :source-path="moveSourcePath"
         :selected-count="moveTargets.length" @close="moveVisible = false" @confirm="onMovePick" />
-      <!-- 共享家人：选家人目录 -->
-      <option-picker :visible="shareVisible" :title="t('FilePage.shareTitle')" :items="shareItems"
-        :loading="shareLoading" :empty-text="t('FilePage.pickerEmpty')" @close="shareVisible = false"
+      <!-- 共享家人：共享大厅式抽屉（群组卡→逐级下钻→「共享到此」），多选文件一次批量共享 -->
+      <folder-share-picker :visible="shareVisible" :selected-count="shareTargets.length" @close="shareVisible = false"
         @confirm="onShareConfirm" />
       <!-- 发布：选专辑 -->
       <option-picker :visible="publishVisible" :title="publishTitle" :items="publishItems" :loading="publishLoading"
diff --git a/uniapp/youjiala/src/pages/tab/media.vue b/uniapp/youjiala/src/pages/tab/media.vue
index 0278246..198fd33 100644
--- a/uniapp/youjiala/src/pages/tab/media.vue
+++ b/uniapp/youjiala/src/pages/tab/media.vue
@@ -1,43 +1,1000 @@
 <script setup lang="ts">
 /**
- * 底部导航「多媒体」测试页：先占位，后续接照片/视频/音频。
- * 权限暂用 UserOperation（见 routes.ts 的 PAGE_PERMISSIONS）；useAuthGuard 兜冷启动直达。
+ * 底部导航「多媒体」页：把旧 WebVue 三套专辑管理页
+ *   PublishPhotoEnquiry/Operation（相册管理）、PublishAudioEnquiry/Operation（音乐专辑）、
+ *   PublishVideoEnquiry/Operation（影视专辑）融合进一个单页三段式，交互部分参考「共享」tab。
+ * 顶部分段「相册 / 音乐 / 影视」切换 kind；列表态显示专辑卡片（带 tabbar），
+ * 点卡片进入编辑态（隐 tabbar）：专辑信息 + 明细重排/删除 + 公开群组增删 + 保存/删除/展览。
+ * 数据链全在 composables/usePublishAlbums；本页只渲染 + 把点击转成调用。
+ * 「加新内容进专辑」仍走文件页发布链，本页不重复上传；「展览」按钮在 M4 接线到播放器页。
  */
-import { useAuthGuard } from "@/composables";
+import type { PublishAlbumDetail, PublishAlbumEntity, PublishKind } from "@/composables";
+import { useLocale } from "uview-pro";
+import { computed, ref } from "vue";
+import {
+    useAuthGuard,
+    useFamilyGroups,
+    usePublishAlbums,
+    useThemeGradient,
+} from "@/composables";
+import { pageUrl } from "@/router/routes";
+import { useLoginProfileStore } from "@/stores";
 
-useAuthGuard();
+const { t } = useLocale();
+const { themeBackground } = useThemeGradient();
+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,
+} = usePublishAlbums();
+
+// 公开群组选择器复用「共享」数据源：拉我可见的群做候选
+const familyGroups = useFamilyGroups();
+
+useAuthGuard(async () => {
+    setMyUser(profile.username);
+    await loadList();
+});
+
+const keyword = ref("");
+const showSearch = ref(false);
+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" },
+];
+
+const navTitle = computed(() => {
+    if (creating.value) {
+        return t("MediaPage.createTitle");
+    }
+    if (inDetail.value) {
+        return album.value?.PublishLocalName || segmentLabel(kind.value);
+    }
+    return t("MediaPage.title");
+});
+
+function segmentLabel(k: PublishKind): string {
+    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";
+}
+
+function albumDesc(entity: PublishAlbumEntity): string {
+    return entity.Notice || t("MediaPage.noDesc");
+}
+
+/** 明细封面地址：photo 用缩略图/原图，audio/video 用 Pic */
+function coverOf(detail: PublishAlbumDetail): string {
+    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 };
+}
+
+function toast(title: string): void {
+    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),
+        });
+    });
+}
+
+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;
+    }
+}
+
+// ===== 分段切换 =====
+async function onKindChange(next: PublishKind): Promise<void> {
+    if (kind.value === next) {
+        return;
+    }
+    keyword.value = "";
+    showSearch.value = false;
+    await withBusy(async () => {
+        await setKind(next);
+    });
+}
+
+// ===== 列表态 =====
+function onToggleSearch(): void {
+    showSearch.value = !showSearch.value;
+}
+
+async function onSearch(): Promise<void> {
+    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);
+    }
+}
+
+function onCreateAlbum(): void {
+    startCreate();
+}
+
+// ===== 详情：返回 / 编辑 / 保存 / 删除 / 展览 =====
+async function onBack(): Promise<void> {
+    if (!inDetail.value) {
+        if (getCurrentPages().length > 1) {
+            uni.navigateBack();
+        }
+        return;
+    }
+    await exitDetail();
+}
+
+async function onRetry(): Promise<void> {
+    await loadList(keyword.value);
+}
+
+function onAmend(): void {
+    startEdit();
+}
+
+async function onCancelEdit(): Promise<void> {
+    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"));
+    });
+}
+
+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"));
+    });
+}
+
+/** 展览：把当前 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")),
+    });
+}
+
+// ===== 明细：上移 / 下移 / 删除 =====
+function onMoveDetail(index: number, dir: -1 | 1): void {
+    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);
+}
+
+// ===== 公开群组：选择器 / 删除 =====
+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 || "");
+        },
+    });
+}
+
+function onRemoveGroup(familyName: string): void {
+    removeGroup(familyName);
+}
 </script>
 
 <template>
-    <app-page nav-title="多媒体" :show-nav-back="false" :show-tabbar="true">
-        <view class="tab-page">
-            <text class="tab-page__title">
-                多媒体
-            </text>
-            <text class="tab-page__hint">
-                测试页，功能待接入
-            </text>
+    <!-- 列表态显示 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>
+            </view>
         </view>
     </app-page>
 </template>
 
 <style lang="scss" scoped>
-.tab-page {
+/* 骨架与文件页/共享页同套（fixed 全屏 + head/scroll-wrap 卡片分区） */
+.media-page {
+    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;
+}
+
+.media-page__head {
+    flex-shrink: 0;
+}
+
+.media-page__scroll-wrap {
+    flex: 1;
+    min-height: 0;
+    margin: 20rpx 20rpx 0;
+    overflow: hidden;
+}
+
+.media-page__scroll {
+    height: 100%;
+}
+
+.media-page__list-space {
+    height: 160rpx;
+}
+
+.media-page__detail-space {
+    height: 48rpx;
+}
+
+.media-page__state,
+.media-page__empty {
+    display: flex;
     align-items: center;
-    padding: 120rpx 40rpx;
+    justify-content: center;
+    gap: 24rpx;
+    padding: 64rpx 32rpx;
 }
 
-.tab-page__title {
-    font-size: 40rpx;
-    font-weight: 600;
-    color: $u-main-color;
-}
-
-.tab-page__hint {
-    margin-top: 16rpx;
+.media-page__state-text {
     font-size: 26rpx;
-    color: $u-tips-color;
+    color: #9aa0a6;
+}
+
+.media-page__state-text--error {
+    color: #f0413e;
+}
+
+.media-page__retry {
+    padding: 8rpx 28rpx;
+    border-radius: 999rpx;
+    font-size: 26rpx;
+    color: #2b8fff;
+    background-color: #eaf4ff;
+}
+
+/* ===== 分段控件 ===== */
+.seg-bar {
+    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;
+
+    &.is-active {
+        color: #2b8fff;
+        opacity: 1;
+        box-shadow: 0 6rpx 16rpx rgba(43, 143, 255, 0.18);
+        background: linear-gradient(135deg, #eaf4ff, #ffffff);
+    }
+}
+
+.seg-bar__text {
+    font-size: 28rpx;
+    color: #8f959e;
+}
+
+.seg-bar__item.is-active .seg-bar__text {
+    color: #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);
+}
+
+.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;
+}
+
+.album-card__main {
+    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;
+}
+
+.album-card__desc {
+    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;
+}
+
+.album-card__chip {
+    padding: 2rpx 14rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    color: #5c626b;
+    background-color: #f2f3f5;
+}
+
+.album-card__chip--code {
+    color: #2b8fff;
+    background-color: #eaf4ff;
+}
+
+.album-card__chip--default {
+    color: #ff9500;
+    background-color: #fff4e0;
+}
+
+.album-card__date {
+    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;
+}
+
+.detail-hero__acts {
+    position: absolute;
+    top: 20rpx;
+    right: 20rpx;
+    display: flex;
+    align-items: center;
+    gap: 14rpx;
+}
+
+.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);
+}
+
+.detail-hero__act--danger {
+    background-color: rgba(255, 82, 82, 0.88);
+}
+
+.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;
+}
+
+.detail-hero__main {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-direction: column;
+    gap: 12rpx;
+}
+
+.detail-hero__name {
+    font-size: 36rpx;
+    font-weight: 600;
+    color: #ffffff;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.detail-hero__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10rpx;
+}
+
+.detail-actions {
+    display: flex;
+    gap: 20rpx;
+    margin: 0 4rpx 20rpx;
+}
+
+.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;
+
+    &--primary {
+        color: #ffffff;
+        background-color: #2b8fff;
+    }
+
+    &--exhibit {
+        color: #ffffff;
+        background-color: #21b169;
+    }
+
+    &--danger {
+        color: #f0413e;
+        background-color: #ffeceb;
+    }
+}
+
+/* ===== 分区卡片 ===== */
+.detail-card {
+    margin: 0 4rpx 20rpx;
+    padding: 28rpx;
+    border-radius: 24rpx;
+    background-color: #ffffff;
+}
+
+.detail-card__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.detail-card__title {
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #1f2329;
+}
+
+.detail-card__add {
+    font-size: 26rpx;
+    color: #2b8fff;
+}
+
+.detail-field {
+    display: flex;
+    flex-direction: column;
+    gap: 12rpx;
+    margin-top: 24rpx;
+}
+
+.detail-field--row {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.detail-field__label {
+    font-size: 26rpx;
+    color: #5c626b;
+}
+
+.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;
+}
+
+.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;
+}
+
+.detail-empty {
+    padding: 40rpx 0;
+    text-align: center;
+    font-size: 24rpx;
+    color: #bfc3c9;
+}
+
+.detail-item {
+    padding: 20rpx 0;
+    border-bottom: 2rpx solid #f2f3f5;
+}
+
+.detail-item:last-child {
+    border-bottom: none;
+}
+
+.detail-item__row {
+    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;
+}
+
+.detail-item__cover {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 12rpx;
+    background-color: #f2f3f5;
+    flex-shrink: 0;
+}
+
+.detail-item__cover--empty {
+    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;
+}
+
+.detail-item__acts {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    margin-left: auto;
+    flex-shrink: 0;
+}
+
+.detail-item__link {
+    font-size: 24rpx;
+    color: #2b8fff;
+}
+
+.detail-item__del {
+    font-size: 24rpx;
+    color: #f0413e;
+}
+
+.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;
+}
+
+.detail-item__sub--text {
+    display: block;
+    border: none;
+    background-color: transparent;
+    padding: 12rpx 0 0;
+    color: #8f959e;
+}
+
+/* 公开群组明细行：编号作标题，下方两行带标签的群组名称/描述（照旧 ft-item-field） */
+.group-field {
+    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;
+}
+
+.group-field__text {
+    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 a9bdab7..e685cc4 100644
--- a/uniapp/youjiala/src/pages/tab/share.vue
+++ b/uniapp/youjiala/src/pages/tab/share.vue
@@ -1,43 +1,986 @@
 <script setup lang="ts">
 /**
- * 底部导航「共享」测试页：先占位，后续接家庭组/共享管理。
- * 权限暂用 UserOperation（见 routes.ts 的 PAGE_PERMISSIONS）；useAuthGuard 兜冷启动直达。
+ * 底部导航「共享」页：把旧 WebVue 的 FamilyGroupEnquiry（群组列表 + 申请加入）与
+ * FamilyGroupOperation（建群 / 改群 / 共享目录 / 待审成员 / 正式成员 / 目录权限）融合进一个页面，
+ * 交互参考 QQ 群管理 + 飞牛群共享——顶层是「公开群 + 我的群」卡片列表，点群进入群管理详情。
+ * 两态：inDetail=false 列表（带 tabbar），=true 群管理详情（隐 tabbar，返回箭头回列表）。
+ * 编辑态（管理员或新建）解锁：群名/描述、公开·可申请开关、共享目录增删、成员设管理员/移除；
+ * 查看态动作：申请加入（非成员且群允许）、同意/拒绝待审、给目录分配权限、解散群。
+ * 数据链全在 composables/useFamilyGroups，本页只渲染 + 把点击转成调用；权限沿用 tab 占位，
+ * useAuthGuard 兜冷启动直达。
  */
-import { useAuthGuard } from "@/composables";
+import type { FamilyGroupEntity } from "@/data/auto/familyGroupEntity";
+import { useLocale } from "uview-pro";
+import { computed, ref } from "vue";
+import { useAuthGuard, useFamilyGroups, useThemeGradient } from "@/composables";
+import { useLoginProfileStore } from "@/stores";
 
-useAuthGuard();
+const { t } = useLocale();
+const { themeBackground } = useThemeGradient();
+const profile = useLoginProfileStore();
+
+const {
+    groups,
+    loading,
+    errorText,
+    detail,
+    inDetail,
+    creating,
+    isEdit,
+    isManager,
+    isMember,
+    setMyUser,
+    loadList,
+    openGroup,
+    exitDetail,
+    startCreate,
+    startEdit,
+    cancelEdit,
+    addFolder,
+    removeFolder,
+    approveRequest,
+    removeMember,
+    toggleManager,
+    assignPermission,
+    applyJoin,
+    save,
+    dissolve,
+    authorizedUsers,
+    formatDate,
+} = useFamilyGroups();
+
+// 每次回到本页重拉列表：群可能被别的端建/散/改过；当前登录名供「是否成员」判定
+useAuthGuard(async () => {
+    setMyUser(profile.username);
+    await loadList();
+});
+
+const keyword = ref("");
+const showSearch = ref(false);
+const busy = ref(false);
+
+/** 命名对话框当前用途：新建共享目录 / 填写申请加入原因 */
+type DialogMode = "folder" | "join";
+const dialogVisible = ref(false);
+const dialogMode = ref<DialogMode>("folder");
+
+const navTitle = computed(() => {
+    if (creating.value) {
+        return t("SharePage.createTitle");
+    }
+    if (inDetail.value) {
+        return detail.value.FamilyGroup?.FamilyLocalName || t("SharePage.title");
+    }
+    return t("SharePage.title");
+});
+
+/** 申请加入入口：非新建、非管理员、非成员，且群开启了「可申请」 */
+const canApply = computed(() =>
+    !creating.value
+    && !isManager.value
+    && !isMember.value
+    && detail.value.FamilyGroup?.AddIndc === "Y",
+);
+
+const dialogTitle = computed(() =>
+    dialogMode.value === "folder" ? t("SharePage.newFolder") : t("SharePage.applyJoin"),
+);
+const dialogConfirm = computed(() =>
+    dialogMode.value === "folder" ? t("SharePage.add") : t("SharePage.submitApply"),
+);
+const dialogPlaceholder = computed(() =>
+    dialogMode.value === "folder" ? t("SharePage.folderPh") : t("SharePage.joinPh"),
+);
+
+function toast(title: string): void {
+    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),
+        });
+    });
+}
+
+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;
+    }
+}
+
+// ===== 列表态 =====
+function onToggleSearch(): void {
+    showSearch.value = !showSearch.value;
+}
+
+async function onSearch(): Promise<void> {
+    await loadList(keyword.value);
+}
+
+async function onOpenGroup(group: FamilyGroupEntity): Promise<void> {
+    keyword.value = "";
+    await withBusy(async () => {
+        await openGroup(group.FamilyName);
+    });
+    // 隐私群非成员会被后端挡回空壳：errorText 有值但没进详情，只提示不跳转
+    if (errorText.value && !inDetail.value) {
+        toast(errorText.value);
+    }
+}
+
+function onCreateGroup(): void {
+    startCreate();
+}
+
+// ===== 详情：返回 / 编辑 / 保存 / 解散 =====
+async function onBack(): Promise<void> {
+    if (!inDetail.value) {
+        if (getCurrentPages().length > 1) {
+            uni.navigateBack();
+        }
+        return;
+    }
+    await exitDetail();
+}
+
+async function onRetry(): Promise<void> {
+    await loadList(keyword.value);
+}
+
+function onAmend(): void {
+    startEdit();
+}
+
+async function onCancelEdit(): Promise<void> {
+    await cancelEdit();
+}
+
+async function onSave(): Promise<void> {
+    if (!(detail.value.FamilyGroup.FamilyLocalName || "").trim()) {
+        toast(t("SharePage.nameRequired"));
+        return;
+    }
+    const wasCreating = creating.value;
+    await withBusy(async () => {
+        await save();
+        toast(wasCreating ? t("SharePage.createDone") : t("SharePage.saveDone"));
+    });
+}
+
+async function onDissolve(): Promise<void> {
+    const ok = await confirmDialog(
+        t("SharePage.dissolve"),
+        t("SharePage.dissolveConfirm").replace("{name}", detail.value.FamilyGroup.FamilyLocalName),
+    );
+    if (!ok) {
+        return;
+    }
+    await withBusy(async () => {
+        await dissolve();
+        toast(t("SharePage.dissolveDone"));
+    });
+}
+
+// ===== 共享目录 =====
+function onNewFolder(): void {
+    dialogMode.value = "folder";
+    dialogVisible.value = true;
+}
+
+/** 申请加入：打开填原因对话框（复用命名对话框，mode 分流到 applyJoin） */
+function onApplyJoin(): void {
+    dialogMode.value = "join";
+    dialogVisible.value = true;
+}
+
+async function onDialogConfirm(value: string): Promise<void> {
+    if (dialogMode.value === "folder") {
+        addFolder(value);
+        dialogVisible.value = false;
+        return;
+    }
+    // 申请加入：关对话框，带原因提交（后端用户名取当前登录者）
+    dialogVisible.value = false;
+    await withBusy(async () => {
+        await applyJoin(value);
+        toast(t("SharePage.applyDone"));
+    });
+}
+
+async function onRemoveFolder(folderId: number, folderName: string): Promise<void> {
+    const ok = await confirmDialog(t("SharePage.deleteFolder"), t("SharePage.deleteFolderConfirm"));
+    if (!ok) {
+        return;
+    }
+    await withBusy(async () => {
+        await removeFolder(folderId, folderName);
+    });
+}
+
+// ===== 成员 / 审核 / 权限 =====
+async function onApprove(userName: string): Promise<void> {
+    await withBusy(async () => {
+        await approveRequest(userName);
+        toast(t("SharePage.approveDone"));
+    });
+}
+
+async function onReject(userName: string): Promise<void> {
+    const ok = await confirmDialog(t("SharePage.reject"), t("SharePage.rejectConfirm"));
+    if (!ok) {
+        return;
+    }
+    await withBusy(async () => {
+        await removeMember(userName);
+        toast(t("SharePage.rejectDone"));
+    });
+}
+
+async function onRemoveMember(userName: string): Promise<void> {
+    const ok = await confirmDialog(t("SharePage.removeMember"), t("SharePage.removeMemberConfirm"));
+    if (!ok) {
+        return;
+    }
+    await withBusy(async () => {
+        await removeMember(userName);
+    });
+}
+
+/** 分配权限：从正式成员里挑一个（排除已授权的），走系统动作面板即时提交 */
+function onAssignPermission(folderName: string): void {
+    const used = authorizedUsers(folderName);
+    const candidates = (detail.value.FamilyGroupManagers ?? []).filter(m => !used.includes(m.UserName));
+    if (!candidates.length) {
+        toast(t("SharePage.noCandidate"));
+        return;
+    }
+    uni.showActionSheet({
+        itemList: candidates.map(m => m.UserLocalName || m.UserName),
+        success: (res) => {
+            const pick = candidates[res.tapIndex];
+            withBusy(async () => {
+                await assignPermission(folderName, pick.UserName);
+                toast(t("SharePage.assignDone"));
+            });
+        },
+    });
+}
+
+function groupDesc(group: FamilyGroupEntity): string {
+    return group.Notice || t("SharePage.noDesc");
+}
 </script>
 
 <template>
-    <app-page nav-title="共享" :show-nav-back="false" :show-tabbar="true">
-        <view class="tab-page">
-            <text class="tab-page__title">
-                共享
-            </text>
-            <text class="tab-page__hint">
-                测试页，功能待接入
-            </text>
+    <!-- 列表态显示 tabbar，进详情（或弹层展开）收起 -->
+    <app-page :hide-nav="true" :show-tabbar="!inDetail && !dialogVisible">
+        <view class="share-page" :style="{ background: themeBackground }">
+            <!-- ===== 列表态：公开群 + 我的群 ===== -->
+            <view v-if="!inDetail" class="share-page__body">
+                <view class="share-page__head">
+                    <page-navbar :title="t('SharePage.title')" :show-back="false" :search-on="showSearch"
+                        :show-transfer="false" :show-quick-toggle="false" @back="onBack"
+                        @toggle-search="onToggleSearch" />
+                    <search-input v-if="showSearch" v-model="keyword" :placeholder="t('FilePage.searchPlaceholder')"
+                        @search="onSearch" />
+                </view>
+                <view class="share-page__scroll-wrap">
+                    <scroll-view scroll-y class="share-page__scroll">
+                        <view v-if="loading" class="share-page__state">
+                            <text class="share-page__state-text">
+                                {{ t("FilePage.loading") }}
+                            </text>
+                        </view>
+                        <view v-else-if="errorText" class="share-page__state">
+                            <text class="share-page__state-text share-page__state-text--error">
+                                {{ errorText }}
+                            </text>
+                            <text class="share-page__retry" @click="onRetry">
+                                {{ t("FilePage.retryBut") }}
+                            </text>
+                        </view>
+                        <template v-else>
+                            <view v-if="!groups.length" class="share-page__empty">
+                                <text class="share-page__state-text">
+                                    {{ t("SharePage.emptyGroups") }}
+                                </text>
+                            </view>
+                            <view v-for="group in groups" :key="group.FamilyName" class="group-card"
+                                @tap="onOpenGroup(group)">
+                                <view class="group-card__avatar">
+                                    <u-icon name="account-fill" size="48" color="#ffffff" />
+                                </view>
+                                <view class="group-card__main">
+                                    <text class="group-card__name">
+                                        {{ group.FamilyLocalName }}
+                                    </text>
+                                    <text class="group-card__desc">
+                                        {{ groupDesc(group) }}
+                                    </text>
+                                    <view class="group-card__meta">
+                                        <text class="group-card__chip group-card__chip--code">
+                                            {{ group.FamilyName }}
+                                        </text>
+                                        <text v-if="group.OpenIndc === 'Y'" class="group-card__chip">
+                                            {{ t("SharePage.chipPublic") }}
+                                        </text>
+                                        <text v-else class="group-card__chip">
+                                            {{ t("SharePage.chipPrivate") }}
+                                        </text>
+                                        <text v-if="group.AddIndc === 'Y'" class="group-card__chip">
+                                            {{ t("SharePage.chipJoinable") }}
+                                        </text>
+                                        <text class="group-card__date">
+                                            {{ formatDate(group.CreatedDatetime) }}
+                                        </text>
+                                    </view>
+                                </view>
+                                <u-icon name="arrow-right" size="30" color="#c0c4cc" />
+                            </view>
+                        </template>
+                        <view class="share-page__list-space" />
+                    </scroll-view>
+                </view>
+                <!-- 新建群浮动按钮：复用文件页同款可拖动组件，位置自动避开 tabbar、可拖到任意处 -->
+                <float-add-btn @click="onCreateGroup" />
+            </view>
+
+            <!-- ===== 详情态：群管理 ===== -->
+            <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" />
+                </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" />
+                            </view>
+                            <view class="detail-hero__main">
+                                <text class="detail-hero__name">
+                                    {{ detail.FamilyGroup.FamilyLocalName || t("SharePage.unnamed") }}
+                                </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">
+                                        {{ t("SharePage.chipPublic") }}
+                                    </text>
+                                    <text v-if="detail.IsAdd" class="group-card__chip">
+                                        {{ t("SharePage.chipJoinable") }}
+                                    </text>
+                                    <text v-if="isManager" class="group-card__chip group-card__chip--admin">
+                                        {{ t("SharePage.chipManager") }}
+                                    </text>
+                                    <text v-else-if="isMember" class="group-card__chip">
+                                        {{ t("SharePage.chipMember") }}
+                                    </text>
+                                </view>
+                            </view>
+                        </view>
+
+                        <!-- 动作栏：按角色/态显示 -->
+                        <view class="detail-actions">
+                            <template v-if="isEdit">
+                                <view class="detail-actions__btn" @tap="onCancelEdit">
+                                    <text>{{ t("SharePage.cancel") }}</text>
+                                </view>
+                                <view class="detail-actions__btn detail-actions__btn--primary" @tap="onSave">
+                                    <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>
+                        </view>
+
+                        <!-- 共享目录卡 -->
+                        <view class="detail-card">
+                            <view class="detail-card__head">
+                                <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 }}
+                                    </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 }}
+                                </text>
+                            </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") }}
+                                        </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 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>
+                            </view>
+                        </view>
+
+                        <view class="share-page__detail-space" />
+                    </scroll-view>
+                </view>
+            </view>
+
+            <!-- 目录命名 / 申请加入原因对话框（复用文件页组件，靠 mode 切文案） -->
+            <folder-name-dialog :visible="dialogVisible" :submitting="busy" :title="dialogTitle"
+                :confirm-label="dialogConfirm" :placeholder="dialogPlaceholder" @close="dialogVisible = false"
+                @confirm="onDialogConfirm" />
         </view>
     </app-page>
 </template>
 
 <style lang="scss" scoped>
-.tab-page {
+/* 骨架与文件页/共享大厅同套（fixed 全屏 + head/scroll-wrap 卡片分区） */
+.share-page {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+}
+
+.share-page__body {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    flex-direction: column;
+}
+
+.share-page__head {
+    flex-shrink: 0;
+}
+
+.share-page__scroll-wrap {
+    flex: 1;
+    min-height: 0;
+    margin: 20rpx 20rpx 0;
+    overflow: hidden;
+}
+
+.share-page__scroll {
+    height: 100%;
+}
+
+.share-page__list-space {
+    height: 160rpx;
+}
+
+.share-page__detail-space {
+    height: 48rpx;
+}
+
+.share-page__state,
+.share-page__empty {
+    display: flex;
     align-items: center;
-    padding: 120rpx 40rpx;
+    justify-content: center;
+    gap: 24rpx;
+    padding: 64rpx 32rpx;
 }
 
-.tab-page__title {
-    font-size: 40rpx;
-    font-weight: 600;
-    color: $u-main-color;
-}
-
-.tab-page__hint {
-    margin-top: 16rpx;
+.share-page__state-text {
     font-size: 26rpx;
-    color: $u-tips-color;
+    color: #9aa0a6;
+}
+
+.share-page__state-text--error {
+    color: #f0413e;
+}
+
+.share-page__retry {
+    padding: 8rpx 28rpx;
+    border-radius: 999rpx;
+    font-size: 26rpx;
+    color: #2b8fff;
+    background-color: #eaf4ff;
+}
+
+/* ===== 列表卡片 ===== */
+.group-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);
+}
+
+.group-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;
+}
+
+.group-card__main {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-direction: column;
+    gap: 8rpx;
+}
+
+.group-card__name {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #1f2329;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.group-card__desc {
+    font-size: 24rpx;
+    color: #8f959e;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.group-card__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10rpx;
+}
+
+.group-card__chip {
+    padding: 2rpx 14rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    color: #5c626b;
+    background-color: #f2f3f5;
+}
+
+.group-card__chip--code {
+    color: #2b8fff;
+    background-color: #eaf4ff;
+}
+
+.group-card__chip--admin {
+    color: #ff9500;
+    background-color: #fff4e0;
+}
+
+.group-card__date {
+    margin-left: auto;
+    font-size: 20rpx;
+    color: #bfc3c9;
+}
+
+/* ===== 详情头卡 + 动作栏 ===== */
+.detail-hero {
+    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__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;
+}
+
+.detail-hero__main {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-direction: column;
+    gap: 12rpx;
+}
+
+.detail-hero__name {
+    font-size: 36rpx;
+    font-weight: 600;
+    color: #ffffff;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.detail-hero__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10rpx;
+}
+
+.detail-actions {
+    display: flex;
+    gap: 20rpx;
+    margin: 0 4rpx 20rpx;
+}
+
+.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;
+
+    &--primary {
+        color: #ffffff;
+        background-color: #2b8fff;
+    }
+
+    &--join {
+        color: #ffffff;
+        background-color: #21b169;
+    }
+
+    &--danger {
+        color: #f0413e;
+        background-color: #ffeceb;
+    }
+}
+
+/* ===== 分区卡片 ===== */
+.detail-card {
+    margin: 0 4rpx 20rpx;
+    padding: 28rpx;
+    border-radius: 24rpx;
+    background-color: #ffffff;
+}
+
+.detail-card__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.detail-card__title {
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #1f2329;
+}
+
+.detail-card__add {
+    font-size: 26rpx;
+    color: #2b8fff;
+}
+
+.detail-field {
+    display: flex;
+    flex-direction: column;
+    gap: 12rpx;
+    margin-top: 24rpx;
+}
+
+.detail-field--row {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.detail-field__label {
+    font-size: 26rpx;
+    color: #5c626b;
+}
+
+.detail-field__input,
+.detail-item__input,
+.detail-item__sub {
+    box-sizing: border-box;
+    padding: 0 20rpx;
+    height: 68rpx;
+    border: 2rpx solid #e6e7ea;
+    border-radius: 14rpx;
+    font-size: 26rpx;
+    color: #1f2329;
+    background-color: #f7f8fa;
+}
+
+.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;
+}
+
+.detail-empty {
+    padding: 40rpx 0;
+    text-align: center;
+    font-size: 24rpx;
+    color: #bfc3c9;
+}
+
+.detail-item {
+    padding: 20rpx 0;
+    border-bottom: 2rpx solid #f2f3f5;
+}
+
+.detail-item:last-child {
+    border-bottom: none;
+}
+
+.detail-item__row {
+    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;
+}
+
+.detail-item__name {
+    flex: 1;
+    min-width: 0;
+    font-size: 28rpx;
+    color: #1f2329;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.detail-item__input {
+    flex: 1;
+    min-width: 0;
+}
+
+.detail-item__acts {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    flex-shrink: 0;
+}
+
+.detail-item__link {
+    font-size: 24rpx;
+    color: #2b8fff;
+}
+
+.detail-item__del {
+    font-size: 24rpx;
+    color: #f0413e;
+}
+
+.detail-item__sub {
+    margin-top: 12rpx;
+    height: auto;
+    padding: 12rpx 20rpx;
+    font-size: 24rpx;
+    line-height: 1.5;
+}
+
+.detail-item__sub--text {
+    display: block;
+    border: none;
+    background-color: transparent;
+    padding: 12rpx 0 0;
+    color: #8f959e;
+}
+
+.detail-item__sub--inline {
+    margin-top: 0;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    color: #8f959e;
+    flex: 1;
 }
 </style>
diff --git a/uniapp/youjiala/src/router/routes.ts b/uniapp/youjiala/src/router/routes.ts
index e265cf9..8b87cd3 100644
--- a/uniapp/youjiala/src/router/routes.ts
+++ b/uniapp/youjiala/src/router/routes.ts
@@ -28,8 +28,16 @@ export const PAGE_PATHS = {
   transport: "pages/transport/transport",
   // 媒体播放页（短地址 /play）：文件页视频/音频动作跳入，query 带 type/name/url
   mediaPlay: "pages/media/play/play",
+  // 相册展览（短地址 /photo-show）：多媒体页专辑「展览」+ 文件页相册快捷入口跳入，query 带 mode/key
+  photoShow: "pages/media/photo-show/photo-show",
+  // 音乐厅（短地址 /audio-hall）：多媒体页音乐专辑「展览」+ 文件页音乐快捷入口跳入，query 带 mode/key
+  audioHall: "pages/media/audio-hall/audio-hall",
+  // 影视厅（短地址 /video-hall）：多媒体页影视专辑「展览」+ 文件页影视快捷入口跳入，query 带 mode/key
+  videoHall: "pages/media/video-hall/video-hall",
   // 回收站（短地址 /trash）：文件页快捷入口跳入，还原/彻底删除
   trash: "pages/trash/trash",
+  // 共享大厅（短地址 /share-hall）：文件页快捷入口跳入，家人共享目录浏览
+  shareHall: "pages/share-hall/share-hall",
 } as const;
 
 export type PageName = keyof typeof PAGE_PATHS;
@@ -84,7 +92,11 @@ export const PAGE_PERMISSIONS: Partial<Record<PageName, PermissionNames>> = {
   mineTab: "DmsFile",
   transport: "DmsFile",
   mediaPlay: "DmsFile",
+  photoShow: "DmsFile",
+  audioHall: "DmsFile",
+  videoHall: "DmsFile",
   trash: "DmsFile",
+  shareHall: "DmsFile",
 };
 
 /**
diff --git a/uniapp/youjiala/src/stores/uploadQueue.ts b/uniapp/youjiala/src/stores/uploadQueue.ts
index 321ea59..3be8345 100644
--- a/uniapp/youjiala/src/stores/uploadQueue.ts
+++ b/uniapp/youjiala/src/stores/uploadQueue.ts
@@ -44,7 +44,12 @@ export interface UploadItem {
   finishedAt: number;
 }
 
-/** 并发 3（旧系统 FileUpload 默认 4，移动端蜂窝网络下保守一档） */
+/**
+ * 多文件并发上传（并发 3，旧系统 FileUpload 默认 4，移动端蜂窝网络下保守一档）。
+ * 并发传同一目录曾触发后端 dms_folder_map 主键 Duplicate entry，根因是编号生成器
+ * SecurityGeneratorNumberService.GetNo 的非原子「读-改-写」；后端已改为数据库端原子自增，
+ * 故此处恢复并发、pump() 也不再按 targetPath 串行。
+ */
 const MAX_PARALLEL = 3;
 
 /** 可中止句柄：uni 的 UploadTask 与 XHR 都满足这个最小面 */
@@ -166,12 +171,17 @@ export const useUploadQueueStore = defineStore(
     }
 
     // ===== 队列驱动 =====
-    /** 补位式调度：不满并发上限就把排队任务逐个点着 */
+    /**
+     * 补位式调度：不满并发上限就把排队任务逐个点着。
+     * 后端编号生成器（GetNo）已改成数据库端原子自增，多文件并发传同一目录不再争抢
+     * dms_folder_map 主键，故不再按 targetPath 串行，同目录也可并行、充分提速。
+     */
     function pump(): void {
-      let busy = items.value.filter(
+      const busy = items.value.filter(
         (item: UploadItem) => item.status === "uploading",
       ).length;
-      while (busy < MAX_PARALLEL) {
+      let free = MAX_PARALLEL - busy;
+      while (free > 0) {
         const next = items.value.find(
           (item: UploadItem) => item.status === "queued",
         );
@@ -179,7 +189,7 @@ export const useUploadQueueStore = defineStore(
           break;
         }
         runTask(next);
-        busy += 1;
+        free -= 1;
       }
     }
 
diff --git a/uniapp/youjiala/src/utils/playModeGlyph.ts b/uniapp/youjiala/src/utils/playModeGlyph.ts
new file mode 100644
index 0000000..19b4241
--- /dev/null
+++ b/uniapp/youjiala/src/utils/playModeGlyph.ts
@@ -0,0 +1,20 @@
+/**
+ * 播放模式（列表/单曲/随机）自定义图标（内联 SVG，不依赖 iconfont 字体文件）。
+ * 字形为用户从 iconfont.cn 挑选的「循环双箭头 + 播放三角」图标（viewBox 1024），
+ * 原 fill 色改为按参数注入：点亮青 / 未点亮白两态复用同一组 path。
+ * 颜色嵌进 data URI，无需 CSS mask（兼容性最好）。
+ * 保留两条 <path>（外框圆角矩形+环 / 中央播放三角），合并成单 path 会因 fill-rule 破坏镂空。
+ */
+/* 字形分段存（每个元素一条子路径）：单行超长拼接会撞 operator-linebreak/Prettier 对撞 */
+const PLAY_MODE_SEGMENTS = [
+  "M813.248 1024H209.92A210.176 210.176 0 0 1 0 814.016V210.752A210.176 210.176 0 0 1 209.92 0.832h603.328a210.112 210.112 0 0 1 209.856 209.92v603.264A210.112 210.112 0 0 1 813.248 1024zM225.472 73.408a153.088 153.088 0 0 0-152.896 152.896v572.096a153.152 153.152 0 0 0 152.896 152.96h572.224a153.088 153.088 0 0 0 152.896-152.96V226.304a153.024 153.024 0 0 0-152.896-152.896H225.472z m429.952 621.44a222.528 222.528 0 0 1-149.056 39.296c-2.496-0.128-4.928-0.64-7.424-0.896-4.736-0.704-9.472-1.216-14.144-2.112l-8.448-2.048a165.12 165.12 0 0 1-13.44-3.392l-6.4-2.112a225.92 225.92 0 0 1-15.104-5.568c-1.152-0.384-2.24-0.96-3.264-1.408-5.824-2.624-11.52-5.184-17.088-8.192l-0.768-0.448a223.36 223.36 0 0 1-50.816-38.144c-0.256-0.128-0.448-0.512-0.704-0.768a183.552 183.552 0 0 1-16.064-17.984 223.488 223.488 0 0 1-48.768-139.136h58.688L268.608 370.816 174.656 511.936h58.688c0 61.888 19.328 119.232 52.096 166.592 0.384 0.64 0.64 1.344 1.088 1.92 3.392 4.928 7.168 9.344 10.816 14.08 1.344 1.664 2.624 3.52 3.968 5.056 5.376 6.528 11.072 12.736 17.024 18.752 0.576 0.512 1.024 1.216 1.6 1.664 19.712 19.712 41.856 36.16 65.984 49.472 0.704 0.384 1.344 0.768 1.984 1.024 6.912 3.84 14.08 7.168 21.312 10.432l5.44 2.432c6.208 2.496 12.608 4.672 19.008 6.912l9.152 3.008c5.632 1.664 11.328 3.136 17.088 4.352 3.776 0.96 7.68 1.984 11.584 2.624 1.6 0.384 3.2 0.96 4.736 1.216 5.44 0.896 10.944 1.408 16.384 2.048 1.984 0.256 3.904 0.704 5.824 0.832a292.096 292.096 0 0 0 197.376-51.712 35.264 35.264 0 0 0-40.384-57.792m165.888-182.912c0-61.632-19.2-118.912-51.84-166.144a12.032 12.032 0 0 0-1.344-2.368c-4.032-5.824-8.448-11.2-12.8-16.64l-1.536-1.984a292.864 292.864 0 0 0-109.76-82.496c-1.28-0.448-2.304-1.088-3.52-1.536a345.6 345.6 0 0 0-28.224-10.048 244.48 244.48 0 0 0-18.496-4.8c-3.392-0.768-6.848-1.664-10.304-2.304-1.728-0.384-3.392-0.896-5.12-1.216-4.608-0.768-9.152-1.088-13.888-1.728l-9.536-1.28a290.88 290.88 0 0 0-23.424-1.088c-1.408 0-2.688-0.256-4.16-0.256l-0.768 0.064a291.84 291.84 0 0 0-167.872 53.12 35.2 35.2 0 1 0 40.576 57.664 222.08 222.08 0 0 1 149.312-39.168l5.952 0.64c5.248 0.704 10.624 1.472 15.68 2.496 2.368 0.448 4.544 1.088 6.848 1.6 5.12 1.088 10.24 2.368 15.168 3.776l4.672 1.536c5.696 1.92 11.2 3.968 16.768 6.144l1.6 0.768a222.528 222.528 0 0 1 84.608 63.68c31.808 38.592 50.816 87.872 50.816 141.568h-58.816l94.08 141.056 94.016-141.056h-58.688z",
+  "M630.72 492.672l-156.16-113.856a17.152 17.152 0 0 0-19.776-0.576 23.552 23.552 0 0 0-10.112 19.904v227.712c0 8.256 3.84 15.872 10.112 19.904 2.88 1.92 6.144 2.88 9.408 2.88a17.984 17.984 0 0 0 10.432-3.456l156.096-113.92A23.68 23.68 0 0 0 639.872 512a24.064 24.064 0 0 0-9.152-19.328z",
+];
+
+export function playModeGlyph(color: string): string {
+  const paths = PLAY_MODE_SEGMENTS.map(
+    (d) => `<path fill="${color}" d="${d}" />`,
+  ).join("");
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">${paths}</svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}