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 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>

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

@ -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