优化: 分享所有文件时支持点击文件图标放大查看,并可返回列表
功能描述:
- 在分享所有文件(目录分享)时,点击文件图标可以放大查看
- 显示效果与分享单个文件时相同(居中大图标显示)
- 左上角显示"返回列表"按钮,点击可返回文件列表
- 单个文件分享时不显示返回按钮(避免混淆)
实现内容:
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:
@@ -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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user