From 136d45dee79f0ad497a0f6c2405eabb76d16d6d7 Mon Sep 17 00:00:00 2001
From: WanWanYun <wanwanyun@example.com>
Date: Wed, 12 Nov 2025 18:24:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96:=20=E5=88=86=E4=BA=AB?=
 =?UTF-8?q?=E6=89=80=E6=9C=89=E6=96=87=E4=BB=B6=E6=97=B6=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=96=87=E4=BB=B6=E5=9B=BE=E6=A0=87=E6=94=BE?=
 =?UTF-8?q?=E5=A4=A7=E6=9F=A5=E7=9C=8B=EF=BC=8C=E5=B9=B6=E5=8F=AF=E8=BF=94?=
 =?UTF-8?q?=E5=9B=9E=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

实现内容：
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>
---
 frontend/share.html | 47 +++++++++++++++++++++++++++++++++++++--------
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/frontend/share.html b/frontend/share.html
index ba0942e..bb97810 100644
--- a/frontend/share.html
+++ b/frontend/share.html
@@ -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);