From 0df086a7f4a00c809819d77a89f11b32b7684668 Mon Sep 17 00:00:00 2001
From: tigerenwork <tigeren.work@gmail.com>
Date: Sat, 15 Aug 2026 01:36:04 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E5=AA=92?=
 =?UTF-8?q?=E4=BD=93=E5=BA=93=E7=BD=91=E6=A0=BC=E8=A7=86=E5=9B=BE=E7=9A=84?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E4=B8=8E=E5=B8=83=E5=B1=80=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/app/library-browser.component.html | 44 ++++++++++++-----------
 ui/src/app/library-browser.component.sass |  4 ++-
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/ui/src/app/library-browser.component.html b/ui/src/app/library-browser.component.html
index a6e248f..711d743 100644
--- a/ui/src/app/library-browser.component.html
+++ b/ui/src/app/library-browser.component.html
@@ -67,28 +67,30 @@
       </div>
     </div>
 
-    <div class="grid" *ngIf="view === 'grid'">
-      <div class="card" *ngFor="let file of filteredFiles; trackBy: trackByName" [class.selected]="isSelected(filePath(file))">
-        <input type="checkbox" class="card-check" [checked]="isSelected(filePath(file))" (change)="toggleSelect(filePath(file), $event.target.checked)" [attr.aria-label]="'选择 ' + file.name">
-        <div class="thumb clickable" (click)="play.emit(file)">
-          <img [src]="thumbUrl(file)" [alt]="file.name" loading="lazy">
-        </div>
-        <div class="card-body">
-          <div class="card-title clickable" [title]="file.name" (click)="play.emit(file)">{{ file.name }}</div>
-          <div class="card-meta">
-            <span class="num">{{ file.size | fileSize }}</span>
-            <span>{{ fileTime(file) }}</span>
+    <div class="grid-wrap" *ngIf="view === 'grid'">
+      <div class="grid">
+        <div class="card" *ngFor="let file of filteredFiles; trackBy: trackByName" [class.selected]="isSelected(filePath(file))">
+          <input type="checkbox" class="card-check" [checked]="isSelected(filePath(file))" (change)="toggleSelect(filePath(file), $event.target.checked)" [attr.aria-label]="'选择 ' + file.name">
+          <div class="thumb clickable" (click)="play.emit(file)">
+            <img [src]="thumbUrl(file)" [alt]="file.name" loading="lazy">
           </div>
-          <div class="card-actions">
-            <a *ngIf="file.meta?.url" class="icon-btn neutral" [href]="file.meta?.url" target="_blank" rel="noopener noreferrer" title="打开原始页面" aria-label="打开原始页面">
-              <fa-icon [icon]="faExternalLinkAlt"></fa-icon>
-            </a>
-            <button type="button" class="icon-btn neutral" (click)="play.emit(file)" title="在线播放" aria-label="在线播放">
-              <fa-icon [icon]="faPlay"></fa-icon>
-            </button>
-            <button type="button" class="icon-btn" (click)="del.emit(file)" title="删除" aria-label="删除">
-              <fa-icon [icon]="faTrashAlt"></fa-icon>
-            </button>
+          <div class="card-body">
+            <div class="card-title clickable" [title]="file.name" (click)="play.emit(file)">{{ file.name }}</div>
+            <div class="card-meta">
+              <span class="num">{{ file.size | fileSize }}</span>
+              <span>{{ fileTime(file) }}</span>
+            </div>
+            <div class="card-actions">
+              <a *ngIf="file.meta?.url" class="icon-btn neutral" [href]="file.meta?.url" target="_blank" rel="noopener noreferrer" title="打开原始页面" aria-label="打开原始页面">
+                <fa-icon [icon]="faExternalLinkAlt"></fa-icon>
+              </a>
+              <button type="button" class="icon-btn neutral" (click)="play.emit(file)" title="在线播放" aria-label="在线播放">
+                <fa-icon [icon]="faPlay"></fa-icon>
+              </button>
+              <button type="button" class="icon-btn" (click)="del.emit(file)" title="删除" aria-label="删除">
+                <fa-icon [icon]="faTrashAlt"></fa-icon>
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/ui/src/app/library-browser.component.sass b/ui/src/app/library-browser.component.sass
index 5b0336c..543d2bd 100644
--- a/ui/src/app/library-browser.component.sass
+++ b/ui/src/app/library-browser.component.sass
@@ -252,11 +252,13 @@
   gap: 2px
 
 // Grid view
-.grid
+.grid-wrap
   flex: 1
   min-height: 0
   overflow-y: auto
   padding: 14px
+
+.grid
   display: grid
   grid-template-columns: repeat(auto-fill, minmax(218px, 1fr))
   gap: 14px