xorbitlab
/
metube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 调整媒体库网格视图的滚动与布局结构

This commit is contained in:
tigerenwork 2026-08-15 01:36:04 +08:00
parent e87c927a09
commit 0df086a7f4
2 changed files with 26 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
ui/src/app/library-browser.component.html
View File

@ -67,28 +67,30 @@
</div> </div>
</div> </div>
<div class="grid" *ngIf="view === 'grid'"> <div class="grid-wrap" *ngIf="view === 'grid'">
<div class="card" *ngFor="let file of filteredFiles; trackBy: trackByName" [class.selected]="isSelected(filePath(file))"> <div class="grid">
<input type="checkbox" class="card-check" [checked]="isSelected(filePath(file))" (change)="toggleSelect(filePath(file), $event.target.checked)" [attr.aria-label]="'选择 ' + file.name"> <div class="card" *ngFor="let file of filteredFiles; trackBy: trackByName" [class.selected]="isSelected(filePath(file))">
<div class="thumb clickable" (click)="play.emit(file)"> <input type="checkbox" class="card-check" [checked]="isSelected(filePath(file))" (change)="toggleSelect(filePath(file), $event.target.checked)" [attr.aria-label]="'选择 ' + file.name">
<img [src]="thumbUrl(file)" [alt]="file.name" loading="lazy"> <div class="thumb clickable" (click)="play.emit(file)">
</div> <img [src]="thumbUrl(file)" [alt]="file.name" loading="lazy">
<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>
<div class="card-actions"> <div class="card-body">
<a *ngIf="file.meta?.url" class="icon-btn neutral" [href]="file.meta?.url" target="_blank" rel="noopener noreferrer" title="打开原始页面" aria-label="打开原始页面"> <div class="card-title clickable" [title]="file.name" (click)="play.emit(file)">{{ file.name }}</div>
<fa-icon [icon]="faExternalLinkAlt"></fa-icon> <div class="card-meta">
</a> <span class="num">{{ file.size | fileSize }}</span>
<button type="button" class="icon-btn neutral" (click)="play.emit(file)" title="在线播放" aria-label="在线播放"> <span>{{ fileTime(file) }}</span>
<fa-icon [icon]="faPlay"></fa-icon> </div>
</button> <div class="card-actions">
<button type="button" class="icon-btn" (click)="del.emit(file)" title="删除" aria-label="删除"> <a *ngIf="file.meta?.url" class="icon-btn neutral" [href]="file.meta?.url" target="_blank" rel="noopener noreferrer" title="打开原始页面" aria-label="打开原始页面">
<fa-icon [icon]="faTrashAlt"></fa-icon> <fa-icon [icon]="faExternalLinkAlt"></fa-icon>
</button> </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> </div>
</div> </div>

4
ui/src/app/library-browser.component.sass
View File

@ -252,11 +252,13 @@
gap: 2px gap: 2px
// Grid view // Grid view
.grid .grid-wrap
flex: 1 flex: 1
min-height: 0 min-height: 0
overflow-y: auto overflow-y: auto
padding: 14px padding: 14px
.grid
display: grid display: grid
grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)) grid-template-columns: repeat(auto-fill, minmax(218px, 1fr))
gap: 14px gap: 14px