86 lines
5.2 KiB
HTML
86 lines
5.2 KiB
HTML
<aside class="sidebar" [class.open]="open">
|
|
<div class="brand">
|
|
<span class="brand-mark">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 3 20 12 6 21 6 3" fill="currentColor" stroke="none"/></svg>
|
|
</span>
|
|
<span class="brand-name">MeTube</span>
|
|
<span class="brand-ver num">{{ metubeVersion || 'dev' }}</span>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-label">状态</div>
|
|
<button class="nav-item" [class.active]="mode === 'downloads' && status === 'downloading'" (click)="selectStatus('downloading')">
|
|
<fa-icon [icon]="faDownload" class="nav-icon"></fa-icon>
|
|
<span>正在下载</span>
|
|
<span class="dot" *ngIf="statusCounts && statusCounts.downloading > 0"></span>
|
|
<span class="nav-count num">{{ statusCounts ? statusCounts.downloading : 0 }}</span>
|
|
</button>
|
|
<button class="nav-item" [class.active]="mode === 'downloads' && status === 'queued'" (click)="selectStatus('queued')">
|
|
<fa-icon [icon]="faClock" class="nav-icon"></fa-icon>
|
|
<span>排队中</span>
|
|
<span class="nav-count num">{{ statusCounts ? statusCounts.queued : 0 }}</span>
|
|
</button>
|
|
<button class="nav-item" [class.active]="mode === 'downloads' && status === 'completed'" (click)="selectStatus('completed')">
|
|
<fa-icon [icon]="faCheckCircle" class="nav-icon"></fa-icon>
|
|
<span>已完成</span>
|
|
<span class="nav-count num">{{ statusCounts ? statusCounts.completed : 0 }}</span>
|
|
</button>
|
|
<button class="nav-item" *ngIf="libraryEnabled" [class.active]="mode === 'library'" (click)="selectLibrary()">
|
|
<fa-icon [icon]="faPhotoVideo" class="nav-icon"></fa-icon>
|
|
<span>媒体库</span>
|
|
<span class="nav-count num">{{ libraryTotal }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="nav-section" *ngIf="mode === 'downloads'">
|
|
<div class="nav-label">文件夹</div>
|
|
<button class="nav-item" [class.active]="selectedFolder === 'all'" (click)="selectFolder('all')">
|
|
<fa-icon [icon]="faHome" class="nav-icon"></fa-icon>
|
|
<span>全部</span>
|
|
<span class="nav-count num">{{ allCount }}</span>
|
|
</button>
|
|
<button *ngFor="let folder of folders" class="nav-item" [class.active]="selectedFolder === folder.name" (click)="selectFolder(folder.name)">
|
|
<fa-icon [icon]="faFolderOpen" class="nav-icon"></fa-icon>
|
|
<span>{{ folderLabel(folder.name) }}</span>
|
|
<span class="nav-count num">{{ folder.count }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="nav-section" *ngIf="mode === 'library'">
|
|
<div class="nav-label">媒体库文件夹</div>
|
|
<button class="nav-item" [class.active]="selectedLibraryFolder === ''" (click)="selectLibraryFolder('')">
|
|
<fa-icon [icon]="faHome" class="nav-icon"></fa-icon>
|
|
<span>根目录</span>
|
|
<span class="nav-count num">{{ libraryRootCount }}</span>
|
|
</button>
|
|
<button *ngFor="let folder of libraryFoldersNonRoot" class="nav-item" [class.active]="selectedLibraryFolder === folder.name" (click)="selectLibraryFolder(folder.name)">
|
|
<fa-icon [icon]="faFolderOpen" class="nav-icon"></fa-icon>
|
|
<span>{{ folder.name }}</span>
|
|
<span class="nav-count num">{{ folder.count }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="sidebar-foot">
|
|
<button class="ghost-btn" (click)="openAdvanced.emit()" title="高级选项">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
|
高级选项
|
|
</button>
|
|
<button class="ghost-btn" (click)="openActivity.emit()" title="活动日志">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
|
日志
|
|
</button>
|
|
<div ngbDropdown class="theme-dd" placement="top-start" container="body">
|
|
<button ngbDropdownToggle class="ghost-btn icon-only" title="主题">
|
|
<fa-icon *ngIf="activeTheme" [icon]="activeTheme.icon"></fa-icon>
|
|
</button>
|
|
<div ngbDropdownMenu class="dropdown-menu">
|
|
<button *ngFor="let theme of themes" ngbDropdownItem [class.active]="activeTheme === theme" (click)="themeChanged.emit(theme)">
|
|
<fa-icon [icon]="theme.icon"></fa-icon>
|
|
<span class="ms-2">{{ theme.displayName }}</span>
|
|
<fa-icon *ngIf="activeTheme === theme" [icon]="faCheck" class="ms-auto"></fa-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|