From c011166320f4d7c94fbe649c91f300379d3b0d13 Mon Sep 17 00:00:00 2001
From: qwas <git@qwas.fun>
Date: Sat, 31 Jan 2026 17:34:29 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=EF=BC=8C=E6=96=B0=E5=A2=9E=E5=88=97=E8=A1=A8=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/FileGrid.vue   | 514 +++++++++++++++++++++---------
 web/src/views/files/FilesView.vue |  35 ++
 2 files changed, 400 insertions(+), 149 deletions(-)

diff --git a/web/src/components/FileGrid.vue b/web/src/components/FileGrid.vue
index f227f5b..2e13376 100644
--- a/web/src/components/FileGrid.vue
+++ b/web/src/components/FileGrid.vue
@@ -6,7 +6,7 @@ import { getFileIcon, getFileTypeColor, isImage } from '@/utils/file'
 const props = defineProps({
   files: {
     type: Array,
-    required: true,
+    required: false,
     default: () => [],
   },
   folders: {
@@ -29,6 +29,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  viewMode: {
+    type: String,
+    default: 'grid', // 'grid' or 'list'
+  },
 })
 
 const emit = defineEmits([
@@ -90,71 +94,232 @@ const hoveredFolder = ref(null)
 
 <template>
   <div>
-    <!-- Folders Section -->
-    <div v-if="folders.length > 0" class="mb-8">
-      <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4 flex items-center">
-        <span class="mr-2">📁</span> Folders ({{ folders.length }})
-      </h3>
+    <!-- 网格视图 -->
+    <div v-if="viewMode === 'grid'">
+      <!-- Folders Section -->
+      <div v-if="folders.length > 0" class="mb-8">
+        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4 flex items-center">
+          <span class="mr-2">📁</span> Folders ({{ folders.length }})
+        </h3>
 
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-        <div
-          v-for="folder in folders"
-          :key="folder.id"
-          class="relative group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700"
-          @click="$emit('open-folder', folder)"
-          @mouseenter="hoveredFolder = folder.id"
-          @mouseleave="hoveredFolder = null"
-        >
-          <div v-if="selectionMode" class="absolute top-2 left-2 z-10">
-            <input
-              type="checkbox"
-              :checked="localSelectedFolders.includes(folder.id)"
-              class="checkbox checkbox-sm checkbox-primary"
-              @click.stop="toggleFolderSelection(folder.id)"
-            />
-          </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
           <div
-            class="relative h-48 bg-linear-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center overflow-hidden cursor-pointer group-hover:scale-105 transition-transform duration-300"
-            @click.stop="$emit('open-folder', folder)"
+            v-for="folder in folders"
+            :key="folder.id"
+            class="relative group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700"
+            @click="$emit('open-folder', folder)"
+            @mouseenter="hoveredFolder = folder.id"
+            @mouseleave="hoveredFolder = null"
           >
-            <!-- 文件夹图标 -->
-            <div class="flex flex-col items-center justify-center p-4">
+            <div v-if="selectionMode" class="absolute top-2 left-2 z-10">
+              <input
+                type="checkbox"
+                :checked="localSelectedFolders.includes(folder.id)"
+                class="checkbox checkbox-sm checkbox-primary"
+                @click.stop="toggleFolderSelection(folder.id)"
+              />
+            </div>
+            <div
+              class="relative h-48 bg-linear-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center overflow-hidden cursor-pointer group-hover:scale-105 transition-transform duration-300"
+              @click.stop="$emit('open-folder', folder)"
+            >
+              <!-- 文件夹图标 -->
+              <div class="flex flex-col items-center justify-center p-4">
+                <div
+                  class="w-16 h-16 rounded-full flex items-center justify-center text-yellow-400 text-5xl"
+                >
+                  📁
+                </div>
+              </div>
+            </div>
+
+            <!-- 文件信息 -->
+            <div class="p-4 space-y-3">
+              <div class="flex items-center justify-between">
+                <h3
+                  class="font-medium text-gray-900 dark:text-gray-100 text-sm leading-tight line-clamp-2 flex-1 mr-2"
+                  :title="folder.name"
+                >
+                  {{ folder.name }}
+                </h3>
+                <button
+                  class="btn btn-xs btn-outline text-gray-400 hover:text-blue-500"
+                  :class="{ 'text-blue-500': folder.notes_count > 0 }"
+                  :title="`管理笔记 (${folder.notes_count || 0})`"
+                  @click.stop="$emit('manage-notes', folder, 'folder')"
+                >
+                  📝
+                  <span v-if="folder.notes_count > 0" class="text-xs">{{
+                    folder.notes_count
+                  }}</span>
+                </button>
+              </div>
+              <!-- 操作按钮 -->
               <div
-                class="w-16 h-16 rounded-full flex items-center justify-center text-yellow-400 text-5xl"
+                class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 gap-2 pt-2 border-t border-gray-100 dark:border-gray-700"
               >
-                📁
+                <div class="flex-1">
+                  <button
+                    class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600"
+                    title="重命名"
+                    @click.stop="$emit('edit-folder', folder)"
+                  >
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                      ></path>
+                    </svg>
+                  </button>
+                  <button
+                    class="btn btn-xs btn-ghost text-red-500 hover:text-red-600"
+                    @click.stop="$emit('delete-folder', folder)"
+                  >
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                      ></path>
+                    </svg>
+                  </button>
+                </div>
+                <span>{{ formatDate(folder.created_at) }}</span>
               </div>
             </div>
           </div>
+        </div>
+      </div>
 
-          <!-- 文件信息 -->
-          <div class="p-4 space-y-3">
-            <div class="flex items-center justify-between">
-              <h3
-                class="font-medium text-gray-900 dark:text-gray-100 text-sm leading-tight line-clamp-2 flex-1 mr-2"
-                :title="folder.name"
-              >
-                {{ folder.name }}
-              </h3>
-              <button
-                class="btn btn-xs btn-outline text-gray-400 hover:text-blue-500"
-                :class="{ 'text-blue-500': folder.notes_count > 0 }"
-                :title="`管理笔记 (${folder.notes_count || 0})`"
-                @click.stop="$emit('manage-notes', folder, 'folder')"
-              >
-                📝
-                <span v-if="folder.notes_count > 0" class="text-xs">{{ folder.notes_count }}</span>
-              </button>
+      <!-- Files Section -->
+      <div v-if="files.length > 0">
+        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4 flex items-center">
+          <span class="mr-2">📄</span> Files ({{ files.length }})
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+          <div
+            v-for="file in files"
+            :key="file.id"
+            class="relative group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700"
+            @mouseenter="hoveredFile = file.id"
+            @mouseleave="hoveredFile = null"
+          >
+            <div v-if="selectionMode" class="absolute top-2 left-2 z-10">
+              <input
+                type="checkbox"
+                :checked="localSelectedFiles.includes(file.id)"
+                class="checkbox checkbox-sm checkbox-primary"
+                @click.stop="toggleFileSelection(file.id)"
+              />
             </div>
-            <!-- 操作按钮 -->
+            <!-- 文件预览区域 -->
             <div
-              class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 gap-2 pt-2 border-t border-gray-100 dark:border-gray-700"
+              class="relative h-48 bg-linear-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center overflow-hidden cursor-pointer group-hover:scale-105 transition-transform duration-300"
+              @click="$emit('view-details', file)"
             >
-              <div class="flex-1">
+              <!-- 图片预览 -->
+              <img
+                v-if="isImage(file.mime_type)"
+                :src="`${file.preview_url}`"
+                :alt="file.filename"
+                class="w-full h-full object-cover"
+              />
+              <!-- 文件类型图标 -->
+              <div v-else class="flex flex-col items-center justify-center p-4">
+                <div
+                  :class="`w-24 h-24 rounded-full flex items-center justify-center text-5xl ${getFileTypeColor(file.mime_type)}`"
+                >
+                  {{ getFileIcon(file.mime_type) }}
+                </div>
+                <span
+                  class="mt-2 text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide"
+                  >{{ file.mime_type.split('/')[1] }}</span
+                >
+              </div>
+
+              <!-- 悬浮操作按钮 -->
+              <div
+                v-if="hoveredFile === file.id"
+                class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+              >
+                <div class="flex gap-2">
+                  <button
+                    class="btn btn-sm btn-circle bg-white/90 hover:bg-white text-gray-700 border-0 shadow-lg"
+                    title="查看文件"
+                    @click.stop="$emit('view-details', file)"
+                  >
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                      ></path>
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                      ></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <!-- 文件信息 -->
+            <div class="p-4 space-y-3">
+              <div class="flex items-center justify-between">
+                <h3
+                  class="font-medium text-gray-900 dark:text-gray-100 text-sm leading-tight line-clamp-2 flex-1 mr-2"
+                  :title="file.filename"
+                >
+                  {{ file.filename }}
+                </h3>
+                <button
+                  class="btn btn-xs btn-outline text-gray-400 hover:text-blue-500"
+                  :class="{ 'text-blue-500': file.notes_count > 0 }"
+                  :title="`管理笔记 (${file.notes_count || 0})`"
+                  @click="$emit('manage-notes', file, 'file')"
+                >
+                  📝
+                  <span v-if="file.notes_count > 0" class="text-xs">{{ file.notes_count }}</span>
+                </button>
+              </div>
+
+              <div
+                class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
+              >
+                <span>{{ formatSize(file.size) }}</span>
+                <span>{{ formatDate(file.created_at) }}</span>
+              </div>
+
+              <!-- 操作按钮 -->
+              <div
+                v-if="isShowOperationBtn"
+                class="flex gap-2 pt-2 border-t border-gray-100 dark:border-gray-700"
+              >
+                <button
+                  class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600"
+                  title="查看详情"
+                  @click="$emit('view-details', file)"
+                >
+                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                </button>
                 <button
                   class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600"
                   title="重命名"
-                  @click.stop="$emit('edit-folder', folder)"
+                  @click="$emit('rename-file', file)"
                 >
                   <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
@@ -167,7 +332,7 @@ const hoveredFolder = ref(null)
                 </button>
                 <button
                   class="btn btn-xs btn-ghost text-red-500 hover:text-red-600"
-                  @click.stop="$emit('delete-folder', folder)"
+                  @click="$emit('delete-file', file.id)"
                 >
                   <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
@@ -178,123 +343,170 @@ const hoveredFolder = ref(null)
                     ></path>
                   </svg>
                 </button>
+                <a
+                  :href="`${file.download_url}`"
+                  target="_blank"
+                  download
+                  class="btn btn-xs btn-ghost flex-1 text-gray-600 hover:text-blue-600"
+                >
+                  <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                    ></path>
+                  </svg>
+                  下载
+                </a>
               </div>
-              <span>{{ formatDate(folder.created_at) }}</span>
             </div>
           </div>
         </div>
       </div>
+      <div
+        v-if="files.length === 0 && folders.length === 0"
+        class="text-center py-12 text-gray-500"
+      >
+        No files or folders found
+      </div>
     </div>
 
-    <!-- Files Section -->
-    <div v-if="files.length > 0">
-      <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4 flex items-center">
-        <span class="mr-2">📄</span> Files ({{ files.length }})
-      </h3>
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-        <div
-          v-for="file in files"
-          :key="file.id"
-          class="relative group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700"
-          @mouseenter="hoveredFile = file.id"
-          @mouseleave="hoveredFile = null"
-        >
-          <div v-if="selectionMode" class="absolute top-2 left-2 z-10">
-            <input
-              type="checkbox"
-              :checked="localSelectedFiles.includes(file.id)"
-              class="checkbox checkbox-sm checkbox-primary"
-              @click.stop="toggleFileSelection(file.id)"
-            />
-          </div>
-          <!-- 文件预览区域 -->
+    <!-- 列表视图 -->
+    <div v-else-if="viewMode === 'list'">
+      <!-- Folders Section - List View -->
+      <div v-if="folders.length > 0" class="mb-6">
+        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4 flex items-center">
+          <span class="mr-2">📁</span> Folders ({{ folders.length }})
+        </h3>
+        <div class="space-y-2">
           <div
-            class="relative h-48 bg-linear-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center overflow-hidden cursor-pointer group-hover:scale-105 transition-transform duration-300"
-            @click="$emit('view-details', file)"
+            v-for="folder in folders"
+            :key="folder.id"
+            class="flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-all duration-200 border border-gray-100 dark:border-gray-700 cursor-pointer"
+            @click="$emit('open-folder', folder)"
           >
-            <!-- 图片预览 -->
-            <img
-              v-if="isImage(file.mime_type)"
-              :src="`${file.preview_url}`"
-              :alt="file.filename"
-              class="w-full h-full object-cover"
-            />
-            <!-- 文件类型图标 -->
-            <div v-else class="flex flex-col items-center justify-center p-4">
-              <div
-                :class="`w-24 h-24 rounded-full flex items-center justify-center text-5xl ${getFileTypeColor(file.mime_type)}`"
+            <div v-if="selectionMode" class="flex-shrink-0">
+              <input
+                type="checkbox"
+                :checked="localSelectedFolders.includes(folder.id)"
+                class="checkbox checkbox-sm checkbox-primary"
+                @click.stop="toggleFolderSelection(folder.id)"
+              />
+            </div>
+            <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center text-3xl">📁</div>
+            <div class="flex-1 min-w-0">
+              <h4 class="font-medium text-gray-900 dark:text-gray-100 truncate">
+                {{ folder.name }}
+              </h4>
+              <p class="text-sm text-gray-500 dark:text-gray-400">
+                {{ formatDate(folder.created_at) }}
+              </p>
+            </div>
+            <div class="flex items-center gap-2">
+              <button
+                class="btn btn-xs btn-outline text-gray-400 hover:text-blue-500"
+                :class="{ 'text-blue-500': folder.notes_count > 0 }"
+                :title="`管理笔记 (${folder.notes_count || 0})`"
+                @click.stop="$emit('manage-notes', folder, 'folder')"
               >
-                {{ getFileIcon(file.mime_type) }}
-              </div>
-              <span class="mt-2 text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">{{
-                file.mime_type.split('/')[1]
-              }}</span>
+                📝
+                <span v-if="folder.notes_count > 0" class="text-xs">{{ folder.notes_count }}</span>
+              </button>
+              <button
+                class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600"
+                title="重命名"
+                @click.stop="$emit('edit-folder', folder)"
+              >
+                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                  ></path>
+                </svg>
+              </button>
+              <button
+                class="btn btn-xs btn-ghost text-red-500 hover:text-red-600"
+                @click.stop="$emit('delete-folder', folder)"
+              >
+                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                  ></path>
+                </svg>
+              </button>
             </div>
+          </div>
+        </div>
+      </div>
 
-            <!-- 悬浮操作按钮 -->
+      <!-- Files Section - List View -->
+      <div v-if="files.length > 0">
+        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4 flex items-center">
+          <span class="mr-2">📄</span> Files ({{ files.length }})
+        </h3>
+        <div class="space-y-2">
+          <div
+            v-for="file in files"
+            :key="file.id"
+            class="flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-all duration-200 border border-gray-100 dark:border-gray-700 cursor-pointer"
+            @click="$emit('view-details', file)"
+          >
+            <div v-if="selectionMode" class="flex-shrink-0">
+              <input
+                type="checkbox"
+                :checked="localSelectedFiles.includes(file.id)"
+                class="checkbox checkbox-sm checkbox-primary"
+                @click.stop="toggleFileSelection(file.id)"
+              />
+            </div>
+            <!-- 文件预览缩略图 -->
             <div
-              v-if="hoveredFile === file.id"
-              class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+              class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 flex items-center justify-center"
             >
-              <div class="flex gap-2">
-                <button
-                  class="btn btn-sm btn-circle bg-white/90 hover:bg-white text-gray-700 border-0 shadow-lg"
-                  title="查看文件"
-                  @click.stop="$emit('view-details', file)"
-                >
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                    ></path>
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                    ></path>
-                  </svg>
-                </button>
+              <img
+                v-if="isImage(file.mime_type)"
+                :src="`${file.preview_url}`"
+                :alt="file.filename"
+                class="w-full h-full object-cover"
+              />
+              <div v-else :class="`text-3xl ${getFileTypeColor(file.mime_type)}`">
+                {{ getFileIcon(file.mime_type) }}
               </div>
             </div>
-          </div>
-
-          <!-- 文件信息 -->
-          <div class="p-4 space-y-3">
-            <div class="flex items-center justify-between">
-              <h3
-                class="font-medium text-gray-900 dark:text-gray-100 text-sm leading-tight line-clamp-2 flex-1 mr-2"
-                :title="file.filename"
-              >
+            <!-- 文件信息 -->
+            <div class="flex-1 min-w-0">
+              <h4 class="font-medium text-gray-900 dark:text-gray-100 truncate">
                 {{ file.filename }}
-              </h3>
+              </h4>
+              <div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400 mt-1">
+                <span>{{ formatSize(file.size) }}</span>
+                <span>•</span>
+                <span>{{ formatDate(file.created_at) }}</span>
+                <span>•</span>
+                <span class="uppercase text-xs">{{ file.mime_type.split('/')[1] }}</span>
+              </div>
+            </div>
+            <!-- 操作按钮 -->
+            <div v-if="isShowOperationBtn" class="flex items-center gap-2">
               <button
                 class="btn btn-xs btn-outline text-gray-400 hover:text-blue-500"
                 :class="{ 'text-blue-500': file.notes_count > 0 }"
                 :title="`管理笔记 (${file.notes_count || 0})`"
-                @click="$emit('manage-notes', file, 'file')"
+                @click.stop="$emit('manage-notes', file, 'file')"
               >
                 📝
                 <span v-if="file.notes_count > 0" class="text-xs">{{ file.notes_count }}</span>
               </button>
-            </div>
-
-            <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
-              <span>{{ formatSize(file.size) }}</span>
-              <span>{{ formatDate(file.created_at) }}</span>
-            </div>
-
-            <!-- 操作按钮 -->
-            <div
-              v-if="isShowOperationBtn"
-              class="flex gap-2 pt-2 border-t border-gray-100 dark:border-gray-700"
-            >
               <button
                 class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600"
                 title="查看详情"
-                @click="$emit('view-details', file)"
+                @click.stop="$emit('view-details', file)"
               >
                 <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
@@ -308,7 +520,7 @@ const hoveredFolder = ref(null)
               <button
                 class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600"
                 title="重命名"
-                @click="$emit('rename-file', file)"
+                @click.stop="$emit('rename-file', file)"
               >
                 <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
@@ -321,7 +533,7 @@ const hoveredFolder = ref(null)
               </button>
               <button
                 class="btn btn-xs btn-ghost text-red-500 hover:text-red-600"
-                @click="$emit('delete-file', file.id)"
+                @click.stop="$emit('delete-file', file.id)"
               >
                 <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
@@ -336,9 +548,10 @@ const hoveredFolder = ref(null)
                 :href="`${file.download_url}`"
                 target="_blank"
                 download
-                class="btn btn-xs btn-ghost flex-1 text-gray-600 hover:text-blue-600"
+                class="btn btn-xs btn-ghost text-gray-600 hover:text-blue-600"
+                @click.stop
               >
-                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
                     stroke-linecap="round"
                     stroke-linejoin="round"
@@ -346,15 +559,18 @@ const hoveredFolder = ref(null)
                     d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                   ></path>
                 </svg>
-                下载
               </a>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div v-if="files.length === 0 && folders.length === 0" class="text-center py-12 text-gray-500">
-      No files or folders found
+
+      <div
+        v-if="files.length === 0 && folders.length === 0"
+        class="text-center py-12 text-gray-500"
+      >
+        No files or folders found
+      </div>
     </div>
   </div>
 </template>
diff --git a/web/src/views/files/FilesView.vue b/web/src/views/files/FilesView.vue
index 4731c1d..b365b4f 100644
--- a/web/src/views/files/FilesView.vue
+++ b/web/src/views/files/FilesView.vue
@@ -44,6 +44,7 @@ const selectedFiles = ref([])
 const selectedFolders = ref([])
 const isSelectionMode = ref(false)
 const showBatchMoveModal = ref(false)
+const viewMode = ref('grid') // 'grid' or 'list'
 const moveTargetFolderId = ref(null)
 const moveBreadcrumbs = ref([])
 const moveFolders = ref([])
@@ -432,6 +433,39 @@ onMounted(async () => {
             </p>
           </div>
           <div class="flex gap-2">
+            <!-- 视图切换按钮 -->
+            <div class="join">
+              <button
+                class="btn btn-sm join-item"
+                :class="viewMode === 'grid' ? 'btn-active' : 'btn-ghost'"
+                title="网格视图"
+                @click="viewMode = 'grid'"
+              >
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"
+                  />
+                </svg>
+              </button>
+              <button
+                class="btn btn-sm join-item"
+                :class="viewMode === 'list' ? 'btn-active' : 'btn-ghost'"
+                title="列表视图"
+                @click="viewMode = 'list'"
+              >
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M4 6h16M4 12h16M4 18h16"
+                  />
+                </svg>
+              </button>
+            </div>
             <button
               class="btn"
               :class="isSelectionMode ? 'btn-secondary' : 'btn-ghost'"
@@ -716,6 +750,7 @@ onMounted(async () => {
               :selection-mode="isSelectionMode"
               :selected-files="selectedFiles"
               :selected-folders="selectedFolders"
+              :view-mode="viewMode"
               @view-details="handleViewDetails"
               @selection-change="handleSelectionChange"
               @delete-file="handleDelete"

From 388e0578588b21e3c03ef27cc749b62e907e5473 Mon Sep 17 00:00:00 2001
From: qwas <git@qwas.fun>
Date: Sat, 31 Jan 2026 17:35:03 +0800
Subject: [PATCH 2/2] =?UTF-8?q?style:=20=E4=BD=BF=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=9B=B4=E5=8A=A0=E7=B4=A7=E5=87=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/FileGrid.vue   | 130 +++++++++++++++---------------
 web/src/views/files/FilesView.vue |  30 +++----
 2 files changed, 80 insertions(+), 80 deletions(-)

diff --git a/web/src/components/FileGrid.vue b/web/src/components/FileGrid.vue
index 2e13376..a341067 100644
--- a/web/src/components/FileGrid.vue
+++ b/web/src/components/FileGrid.vue
@@ -97,21 +97,23 @@ const hoveredFolder = ref(null)
     <!-- 网格视图 -->
     <div v-if="viewMode === 'grid'">
       <!-- Folders Section -->
-      <div v-if="folders.length > 0" class="mb-8">
-        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4 flex items-center">
-          <span class="mr-2">📁</span> Folders ({{ folders.length }})
+      <div v-if="folders.length > 0" class="mb-4">
+        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-200 mb-3 flex items-center">
+          <span class="mr-1.5">📁</span> Folders ({{ folders.length }})
         </h3>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        <div
+          class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-3"
+        >
           <div
             v-for="folder in folders"
             :key="folder.id"
-            class="relative group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700"
+            class="relative group bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-all duration-200 overflow-hidden border border-gray-100 dark:border-gray-700"
             @click="$emit('open-folder', folder)"
             @mouseenter="hoveredFolder = folder.id"
             @mouseleave="hoveredFolder = null"
           >
-            <div v-if="selectionMode" class="absolute top-2 left-2 z-10">
+            <div v-if="selectionMode" class="absolute top-1.5 left-1.5 z-10">
               <input
                 type="checkbox"
                 :checked="localSelectedFolders.includes(folder.id)"
@@ -120,13 +122,13 @@ const hoveredFolder = ref(null)
               />
             </div>
             <div
-              class="relative h-48 bg-linear-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center overflow-hidden cursor-pointer group-hover:scale-105 transition-transform duration-300"
+              class="relative h-32 bg-linear-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center overflow-hidden cursor-pointer group-hover:scale-105 transition-transform duration-200"
               @click.stop="$emit('open-folder', folder)"
             >
               <!-- 文件夹图标 -->
-              <div class="flex flex-col items-center justify-center p-4">
+              <div class="flex flex-col items-center justify-center p-2">
                 <div
-                  class="w-16 h-16 rounded-full flex items-center justify-center text-yellow-400 text-5xl"
+                  class="w-12 h-12 rounded-full flex items-center justify-center text-yellow-400 text-4xl"
                 >
                   📁
                 </div>
@@ -134,16 +136,16 @@ const hoveredFolder = ref(null)
             </div>
 
             <!-- 文件信息 -->
-            <div class="p-4 space-y-3">
+            <div class="p-2.5 space-y-2">
               <div class="flex items-center justify-between">
                 <h3
-                  class="font-medium text-gray-900 dark:text-gray-100 text-sm leading-tight line-clamp-2 flex-1 mr-2"
+                  class="font-medium text-gray-900 dark:text-gray-100 text-xs leading-tight line-clamp-2 flex-1 mr-1"
                   :title="folder.name"
                 >
                   {{ folder.name }}
                 </h3>
                 <button
-                  class="btn btn-xs btn-outline text-gray-400 hover:text-blue-500"
+                  class="btn btn-xs btn-outline text-gray-400 hover:text-blue-500 min-h-0 h-6 px-1"
                   :class="{ 'text-blue-500': folder.notes_count > 0 }"
                   :title="`管理笔记 (${folder.notes_count || 0})`"
                   @click.stop="$emit('manage-notes', folder, 'folder')"
@@ -156,12 +158,11 @@ const hoveredFolder = ref(null)
               </div>
               <!-- 操作按钮 -->
               <div
-                class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 gap-2 pt-2 border-t border-gray-100 dark:border-gray-700"
+                class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 gap-1 pt-1.5 border-t border-gray-100 dark:border-gray-700"
               >
                 <div class="flex-1">
                   <button
-                    class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600"
-                    title="重命名"
+                    class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600 min-h-0 h-6 px-1"
                     @click.stop="$emit('edit-folder', folder)"
                   >
                     <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -174,7 +175,7 @@ const hoveredFolder = ref(null)
                     </svg>
                   </button>
                   <button
-                    class="btn btn-xs btn-ghost text-red-500 hover:text-red-600"
+                    class="btn btn-xs btn-ghost text-red-500 hover:text-red-600 min-h-0 h-6 px-1"
                     @click.stop="$emit('delete-folder', folder)"
                   >
                     <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -196,18 +197,20 @@ const hoveredFolder = ref(null)
 
       <!-- Files Section -->
       <div v-if="files.length > 0">
-        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4 flex items-center">
-          <span class="mr-2">📄</span> Files ({{ files.length }})
+        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-200 mb-3 flex items-center">
+          <span class="mr-1.5">📄</span> Files ({{ files.length }})
         </h3>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        <div
+          class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-3"
+        >
           <div
             v-for="file in files"
             :key="file.id"
-            class="relative group bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700"
+            class="relative group bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-all duration-200 overflow-hidden border border-gray-100 dark:border-gray-700"
             @mouseenter="hoveredFile = file.id"
             @mouseleave="hoveredFile = null"
           >
-            <div v-if="selectionMode" class="absolute top-2 left-2 z-10">
+            <div v-if="selectionMode" class="absolute top-1.5 left-1.5 z-10">
               <input
                 type="checkbox"
                 :checked="localSelectedFiles.includes(file.id)"
@@ -217,7 +220,7 @@ const hoveredFolder = ref(null)
             </div>
             <!-- 文件预览区域 -->
             <div
-              class="relative h-48 bg-linear-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center overflow-hidden cursor-pointer group-hover:scale-105 transition-transform duration-300"
+              class="relative h-32 bg-linear-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center overflow-hidden cursor-pointer group-hover:scale-105 transition-transform duration-200"
               @click="$emit('view-details', file)"
             >
               <!-- 图片预览 -->
@@ -228,14 +231,14 @@ const hoveredFolder = ref(null)
                 class="w-full h-full object-cover"
               />
               <!-- 文件类型图标 -->
-              <div v-else class="flex flex-col items-center justify-center p-4">
+              <div v-else class="flex flex-col items-center justify-center p-2">
                 <div
-                  :class="`w-24 h-24 rounded-full flex items-center justify-center text-5xl ${getFileTypeColor(file.mime_type)}`"
+                  :class="`w-16 h-16 rounded-full flex items-center justify-center text-4xl ${getFileTypeColor(file.mime_type)}`"
                 >
                   {{ getFileIcon(file.mime_type) }}
                 </div>
                 <span
-                  class="mt-2 text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide"
+                  class="mt-1 text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide"
                   >{{ file.mime_type.split('/')[1] }}</span
                 >
               </div>
@@ -271,16 +274,16 @@ const hoveredFolder = ref(null)
             </div>
 
             <!-- 文件信息 -->
-            <div class="p-4 space-y-3">
+            <div class="p-2.5 space-y-1.5">
               <div class="flex items-center justify-between">
                 <h3
-                  class="font-medium text-gray-900 dark:text-gray-100 text-sm leading-tight line-clamp-2 flex-1 mr-2"
+                  class="font-medium text-gray-900 dark:text-gray-100 text-xs leading-tight line-clamp-2 flex-1 mr-1"
                   :title="file.filename"
                 >
                   {{ file.filename }}
                 </h3>
                 <button
-                  class="btn btn-xs btn-outline text-gray-400 hover:text-blue-500"
+                  class="btn btn-xs btn-outline text-gray-400 hover:text-blue-500 min-h-0 h-6 px-1"
                   :class="{ 'text-blue-500': file.notes_count > 0 }"
                   :title="`管理笔记 (${file.notes_count || 0})`"
                   @click="$emit('manage-notes', file, 'file')"
@@ -300,11 +303,10 @@ const hoveredFolder = ref(null)
               <!-- 操作按钮 -->
               <div
                 v-if="isShowOperationBtn"
-                class="flex gap-2 pt-2 border-t border-gray-100 dark:border-gray-700"
+                class="flex gap-1 pt-1.5 border-t border-gray-100 dark:border-gray-700"
               >
                 <button
-                  class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600"
-                  title="查看详情"
+                  class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600 min-h-0 h-6 px-1"
                   @click="$emit('view-details', file)"
                 >
                   <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -317,8 +319,7 @@ const hoveredFolder = ref(null)
                   </svg>
                 </button>
                 <button
-                  class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600"
-                  title="重命名"
+                  class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600 min-h-0 h-6 px-1"
                   @click="$emit('rename-file', file)"
                 >
                   <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -331,7 +332,7 @@ const hoveredFolder = ref(null)
                   </svg>
                 </button>
                 <button
-                  class="btn btn-xs btn-ghost text-red-500 hover:text-red-600"
+                  class="btn btn-xs btn-ghost text-red-500 hover:text-red-600 min-h-0 h-6 px-1"
                   @click="$emit('delete-file', file.id)"
                 >
                   <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -347,9 +348,9 @@ const hoveredFolder = ref(null)
                   :href="`${file.download_url}`"
                   target="_blank"
                   download
-                  class="btn btn-xs btn-ghost flex-1 text-gray-600 hover:text-blue-600"
+                  class="btn btn-xs btn-ghost flex-1 text-gray-600 hover:text-blue-600 min-h-0 h-6 px-1"
                 >
-                  <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
@@ -375,15 +376,15 @@ const hoveredFolder = ref(null)
     <!-- 列表视图 -->
     <div v-else-if="viewMode === 'list'">
       <!-- Folders Section - List View -->
-      <div v-if="folders.length > 0" class="mb-6">
-        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4 flex items-center">
-          <span class="mr-2">📁</span> Folders ({{ folders.length }})
+      <div v-if="folders.length > 0" class="mb-4">
+        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-200 mb-2 flex items-center">
+          <span class="mr-1.5">📁</span> Folders ({{ folders.length }})
         </h3>
-        <div class="space-y-2">
+        <div class="space-y-1">
           <div
             v-for="folder in folders"
             :key="folder.id"
-            class="flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-all duration-200 border border-gray-100 dark:border-gray-700 cursor-pointer"
+            class="flex items-center gap-3 p-2.5 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow transition-all duration-200 border border-gray-100 dark:border-gray-700 cursor-pointer"
             @click="$emit('open-folder', folder)"
           >
             <div v-if="selectionMode" class="flex-shrink-0">
@@ -394,18 +395,18 @@ const hoveredFolder = ref(null)
                 @click.stop="toggleFolderSelection(folder.id)"
               />
             </div>
-            <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center text-3xl">📁</div>
+            <div class="flex-shrink-0 w-10 h-10 flex items-center justify-center text-2xl">📁</div>
             <div class="flex-1 min-w-0">
-              <h4 class="font-medium text-gray-900 dark:text-gray-100 truncate">
+              <h4 class="font-medium text-gray-900 dark:text-gray-100 text-sm truncate">
                 {{ folder.name }}
               </h4>
-              <p class="text-sm text-gray-500 dark:text-gray-400">
+              <p class="text-xs text-gray-500 dark:text-gray-400">
                 {{ formatDate(folder.created_at) }}
               </p>
             </div>
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-1">
               <button
-                class="btn btn-xs btn-outline text-gray-400 hover:text-blue-500"
+                class="btn btn-xs btn-outline text-gray-400 hover:text-blue-500 min-h-0 h-7 px-1.5"
                 :class="{ 'text-blue-500': folder.notes_count > 0 }"
                 :title="`管理笔记 (${folder.notes_count || 0})`"
                 @click.stop="$emit('manage-notes', folder, 'folder')"
@@ -414,8 +415,7 @@ const hoveredFolder = ref(null)
                 <span v-if="folder.notes_count > 0" class="text-xs">{{ folder.notes_count }}</span>
               </button>
               <button
-                class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600"
-                title="重命名"
+                class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600 min-h-0 h-7 px-1.5"
                 @click.stop="$emit('edit-folder', folder)"
               >
                 <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -428,7 +428,7 @@ const hoveredFolder = ref(null)
                 </svg>
               </button>
               <button
-                class="btn btn-xs btn-ghost text-red-500 hover:text-red-600"
+                class="btn btn-xs btn-ghost text-red-500 hover:text-red-600 min-h-0 h-7 px-1.5"
                 @click.stop="$emit('delete-folder', folder)"
               >
                 <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -447,14 +447,14 @@ const hoveredFolder = ref(null)
 
       <!-- Files Section - List View -->
       <div v-if="files.length > 0">
-        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4 flex items-center">
-          <span class="mr-2">📄</span> Files ({{ files.length }})
+        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-200 mb-2 flex items-center">
+          <span class="mr-1.5">📄</span> Files ({{ files.length }})
         </h3>
-        <div class="space-y-2">
+        <div class="space-y-1">
           <div
             v-for="file in files"
             :key="file.id"
-            class="flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-all duration-200 border border-gray-100 dark:border-gray-700 cursor-pointer"
+            class="flex items-center gap-3 p-2.5 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow transition-all duration-200 border border-gray-100 dark:border-gray-700 cursor-pointer"
             @click="$emit('view-details', file)"
           >
             <div v-if="selectionMode" class="flex-shrink-0">
@@ -467,7 +467,7 @@ const hoveredFolder = ref(null)
             </div>
             <!-- 文件预览缩略图 -->
             <div
-              class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 flex items-center justify-center"
+              class="flex-shrink-0 w-12 h-12 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 flex items-center justify-center"
             >
               <img
                 v-if="isImage(file.mime_type)"
@@ -475,27 +475,27 @@ const hoveredFolder = ref(null)
                 :alt="file.filename"
                 class="w-full h-full object-cover"
               />
-              <div v-else :class="`text-3xl ${getFileTypeColor(file.mime_type)}`">
+              <div v-else :class="`text-2xl ${getFileTypeColor(file.mime_type)}`">
                 {{ getFileIcon(file.mime_type) }}
               </div>
             </div>
             <!-- 文件信息 -->
             <div class="flex-1 min-w-0">
-              <h4 class="font-medium text-gray-900 dark:text-gray-100 truncate">
+              <h4 class="font-medium text-gray-900 dark:text-gray-100 text-sm truncate">
                 {{ file.filename }}
               </h4>
-              <div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400 mt-1">
+              <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                 <span>{{ formatSize(file.size) }}</span>
                 <span>•</span>
                 <span>{{ formatDate(file.created_at) }}</span>
                 <span>•</span>
-                <span class="uppercase text-xs">{{ file.mime_type.split('/')[1] }}</span>
+                <span class="uppercase">{{ file.mime_type.split('/')[1] }}</span>
               </div>
             </div>
             <!-- 操作按钮 -->
-            <div v-if="isShowOperationBtn" class="flex items-center gap-2">
+            <div v-if="isShowOperationBtn" class="flex items-center gap-1">
               <button
-                class="btn btn-xs btn-outline text-gray-400 hover:text-blue-500"
+                class="btn btn-xs btn-outline text-gray-400 hover:text-blue-500 min-h-0 h-7 px-1.5"
                 :class="{ 'text-blue-500': file.notes_count > 0 }"
                 :title="`管理笔记 (${file.notes_count || 0})`"
                 @click.stop="$emit('manage-notes', file, 'file')"
@@ -504,8 +504,7 @@ const hoveredFolder = ref(null)
                 <span v-if="file.notes_count > 0" class="text-xs">{{ file.notes_count }}</span>
               </button>
               <button
-                class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600"
-                title="查看详情"
+                class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600 min-h-0 h-7 px-1.5"
                 @click.stop="$emit('view-details', file)"
               >
                 <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -518,8 +517,7 @@ const hoveredFolder = ref(null)
                 </svg>
               </button>
               <button
-                class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600"
-                title="重命名"
+                class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600 min-h-0 h-7 px-1.5"
                 @click.stop="$emit('rename-file', file)"
               >
                 <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -532,7 +530,7 @@ const hoveredFolder = ref(null)
                 </svg>
               </button>
               <button
-                class="btn btn-xs btn-ghost text-red-500 hover:text-red-600"
+                class="btn btn-xs btn-ghost text-red-500 hover:text-red-600 min-h-0 h-7 px-1.5"
                 @click.stop="$emit('delete-file', file.id)"
               >
                 <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -548,7 +546,7 @@ const hoveredFolder = ref(null)
                 :href="`${file.download_url}`"
                 target="_blank"
                 download
-                class="btn btn-xs btn-ghost text-gray-600 hover:text-blue-600"
+                class="btn btn-xs btn-ghost text-gray-600 hover:text-blue-600 min-h-0 h-7 px-1.5"
                 @click.stop
               >
                 <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/web/src/views/files/FilesView.vue b/web/src/views/files/FilesView.vue
index b365b4f..d558f28 100644
--- a/web/src/views/files/FilesView.vue
+++ b/web/src/views/files/FilesView.vue
@@ -422,10 +422,10 @@ onMounted(async () => {
 
 <template>
   <div class="bg-gray-50 dark:bg-gray-900">
-    <div class="container mx-auto px-4 py-6">
+    <div class="container mx-auto px-4 py-4">
       <!-- 头部区域 -->
-      <div class="mb-8">
-        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+      <div class="mb-4">
+        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
           <div>
             <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">📁 文件管理</h1>
             <p class="text-gray-600 dark:text-gray-400 mt-1">
@@ -522,7 +522,7 @@ onMounted(async () => {
       </div>
 
       <!-- Breadcrumbs -->
-      <div class="text-sm breadcrumbs mb-4">
+      <div class="text-sm breadcrumbs mb-3">
         <ul>
           <li v-for="(crumb, index) in breadcrumbs" :key="crumb.id">
             <a
@@ -601,12 +601,14 @@ onMounted(async () => {
       </div>
 
       <!-- 上传区域 -->
-      <div v-if="showUploadModal" class="mb-8">
+      <div v-if="showUploadModal" class="mb-4">
         <div
-          class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 border border-gray-200 dark:border-gray-700"
+          class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4 border border-gray-200 dark:border-gray-700"
         >
           <div class="flex justify-between items-start">
-            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">📤 上传文件</h2>
+            <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-3">
+              📤 上传文件
+            </h2>
 
             <button
               v-if="supportsDirectUpload"
@@ -637,11 +639,11 @@ onMounted(async () => {
       </div>
 
       <!-- 搜索和过滤 -->
-      <div class="mb-6">
+      <div class="mb-4">
         <div
-          class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-6 border border-gray-200 dark:border-gray-700"
+          class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4 border border-gray-200 dark:border-gray-700"
         >
-          <div class="flex flex-col lg:flex-row gap-4">
+          <div class="flex flex-col lg:flex-row gap-3">
             <!-- 搜索框 -->
             <div class="flex-1">
               <div class="relative">
@@ -685,7 +687,7 @@ onMounted(async () => {
 
           <!-- 统计信息 -->
           <div
-            class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 dark:border-gray-700"
+            class="flex items-center justify-between mt-3 pt-3 border-t border-gray-200 dark:border-gray-700"
           >
             <span class="text-sm text-gray-500">
               显示 {{ files.length }} / {{ totalFiles }} 个文件
@@ -724,7 +726,7 @@ onMounted(async () => {
 
         <div
           v-else-if="files.length === 0 && folders.length === 0"
-          class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-12 text-center border border-gray-200 dark:border-gray-700"
+          class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-8 text-center border border-gray-200 dark:border-gray-700"
         >
           <div class="text-6xl mb-4">🔍</div>
 
@@ -742,7 +744,7 @@ onMounted(async () => {
           @upload-complete="handleDragUploadComplete"
         >
           <div
-            class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-6 border border-gray-200 dark:border-gray-700"
+            class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4 border border-gray-200 dark:border-gray-700"
           >
             <FileGrid
               :files="files"
@@ -761,7 +763,7 @@ onMounted(async () => {
               @rename-file="handleRenameFile"
             />
             <!-- Pagination -->
-            <div v-if="totalPages > 1" class="flex justify-center mt-6">
+            <div v-if="totalPages > 1" class="flex justify-center mt-4">
               <div class="join">
                 <button
                   class="join-item btn"