优化: 分享所有文件时支持点击文件图标放大查看,并可返回列表

功能描述:
- 在分享所有文件(目录分享)时,点击文件图标可以放大查看
- 显示效果与分享单个文件时相同(居中大图标显示)
- 左上角显示"返回列表"按钮,点击可返回文件列表
- 单个文件分享时不显示返回按钮(避免混淆)

实现内容:
1. 添加状态管理
   - viewingFile: 当前正在查看的文件(null表示在列表视图)

2. 新增方法
   - handleFileClick(file): 处理文件点击
     * 图片/视频/音频 → 打开媒体预览(保持原有行为)
     * 其他文件 → 显示详情页面
   - viewFileDetail(file): 设置viewingFile显示详情
   - backToList(): 清除viewingFile返回列表

3. 修改HTML模板
   - 标题添加返回按钮(条件:viewingFile存在且不是单文件分享)
   - 单文件显示条件:viewingFile || files.length === 1
   - 网格/列表视图条件:添加 !viewingFile 限制
   - 单文件显示内容:使用 viewingFile || files[0]

4. 防止bug设计
   - shareInfo.share_type !== 'file' 确保单文件分享不显示返回按钮
   - handleFileClick 区分媒体文件和普通文件
   - viewingFile 为null时正常显示文件列表

用户体验提升:
 点击文件图标即可放大查看详情
 查看体验与单文件分享一致
 返回按钮清晰明了
 媒体文件仍然打开预览
 单文件分享不显示返回按钮(避免混淆)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
WanWanYun
2025-11-12 18:24:29 +08:00
parent 1e19b41f48
commit 136d45dee7

View File

@@ -461,6 +461,10 @@
<div class="container">
<div class="card">
<div class="title">
<!-- 返回按钮:仅在查看单个文件详情且不是单文件分享时显示 -->
<button v-if="viewingFile && shareInfo.share_type !== 'file'" class="btn btn-secondary" @click="backToList" style="margin-right: 10px;">
<i class="fas fa-arrow-left"></i> 返回列表
</button>
<i class="fas fa-cloud"></i>
文件分享
</div>
@@ -518,12 +522,12 @@
<!-- 大图标视图 - 单文件居中显示 -->
<!-- 单文件居中显示 -->
<div v-else-if="files.length === 1" class="single-file-container">
<div v-else-if="viewingFile || files.length === 1" class="single-file-container">
<div class="single-file-card">
<i class="single-file-icon fas" :class="getFileIcon(files[0])" :style="getIconColor(files[0])"></i>
<div class="single-file-name">{{ files[0].name }}</div>
<div class="single-file-size">{{ files[0].sizeFormatted }}</div>
<button v-if="!files[0].isDirectory" class="btn single-file-download" @click="downloadFile(files[0])">
<i class="single-file-icon fas" :class="getFileIcon(viewingFile || files[0])" :style="getIconColor(viewingFile || files[0])"></i>
<div class="single-file-name">{{ (viewingFile || files[0]).name }}</div>
<div class="single-file-size">{{ (viewingFile || files[0]).sizeFormatted }}</div>
<button v-if="!(viewingFile || files[0]).isDirectory" class="btn single-file-download" @click="downloadFile(viewingFile || files[0])">
<i class="fas fa-download"></i> 下载文件
</button>
</div>
@@ -531,7 +535,7 @@
<!-- 大图标视图 - 多文件网格显示 -->
<div v-else-if="viewMode === 'grid'" class="file-grid">
<div v-else-if="!viewingFile && viewMode === 'grid'" class="file-grid">
<div v-for="file in files" :key="file.name" class="file-grid-item"
@click="handleFileClick(file)"
@contextmenu="showFileContextMenu($event, file)"
@@ -548,7 +552,7 @@
</div>
<!-- 列表视图 -->
<ul v-else class="file-list">
<ul v-else-if="!viewingFile" class="file-list">
<li v-for="file in files" :key="file.name" class="file-item">
<div class="file-info">
<i class="file-icon fas" :class="getFileIcon(file)" :style="getIconColor(file)"></i>
@@ -609,7 +613,9 @@
contextMenuFile: null,
// 长按支持(移动端)
longPressTimer: null,
longPressFile: null
longPressFile: null,
// 查看单个文件详情(用于多文件分享时点击查看)
viewingFile: null
};
},
@@ -687,6 +693,31 @@
}
},
// 处理文件点击 - 可预览的文件打开预览,其他文件查看详情
handleFileClick(file) {
// 如果是图片/视频/音频,打开媒体预览
const isImage = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name);
const isVideo = /\.(mp4|webm|ogg|mov)$/i.test(file.name);
const isAudio = /\.(mp3|wav|ogg|m4a|flac)$/i.test(file.name);
if (isImage || isVideo || isAudio) {
this.previewMedia(file);
} else {
// 其他文件类型,显示详情页面
this.viewFileDetail(file);
}
},
// 查看文件详情(放大显示)
viewFileDetail(file) {
this.viewingFile = file;
},
// 返回文件列表
backToList() {
this.viewingFile = null;
},
downloadFile(file) {
console.log("[分享下载] 文件:", file);