feat: 支持 "在 b 站打开" 的快捷操作，一些细节优化 (#384)

crates/bili_sync/src/api/response.rs

@@ -55,6 +55,7 @@ pub struct VideoSource {
 #[sea_orm(entity = "video::Entity")]
 pub struct VideoInfo {
     pub id: i32,
+    pub bvid: String,
     pub name: String,
     pub upper_name: String,
     #[serde(serialize_with = "serde_video_download_status")]

web/src/lib/components/app-sidebar.svelte

@@ -54,17 +54,17 @@
 				category: '快捷订阅',
 				items: [
 					{
-						title: '收藏夹',
+						title: '我创建的收藏夹',
 						icon: HeartIcon,
 						href: '/me/favorites'
 					},
 					{
-						title: '合集',
+						title: '我关注的合集',
 						icon: FolderIcon,
 						href: '/me/collections'
 					},
 					{
-						title: 'up 主',
+						title: '我关注的 up 主',
 						icon: UserIcon,
 						href: '/me/uppers'
 					}

web/src/lib/components/video-card.svelte

@@ -3,10 +3,13 @@
 	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
 	import { Button } from '$lib/components/ui/button/index.js';
 	import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import type { VideoInfo } from '$lib/types';
 	import RotateCcwIcon from '@lucide/svelte/icons/rotate-ccw';
 	import InfoIcon from '@lucide/svelte/icons/info';
 	import UserIcon from '@lucide/svelte/icons/user';
+	import SquareArrowOutUpRightIcon from '@lucide/svelte/icons/square-arrow-out-up-right';
+	import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
 	import { goto } from '$app/navigation';
 	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
 
@@ -124,7 +127,7 @@
 			{#if showProgress}
 				<div class="space-y-2">
 					<!-- 进度信息 -->
-					<div class="text-muted-foreground flex justify-between text-sm font-medium">
+					<div class="text-muted-foreground flex justify-between text-xs font-medium">
 						<span class="truncate">下载进度</span>
 						<span class="shrink-0">{completed}/{total}</span>
 					</div>
@@ -140,7 +143,7 @@
 									></div>
 								</Tooltip.Trigger>
 								<Tooltip.Content>
-									<p class="text-sm">{getTaskName(index)}: {getStatusText(status)}</p>
+									<p class="text-xs">{getTaskName(index)}: {getStatusText(status)}</p>
 								</Tooltip.Content>
 							</Tooltip.Root>
 						{/each}
@@ -149,24 +152,45 @@
 			{/if}
 
 			{#if showActions && mode === 'default'}
-				<div class="flex min-w-0 gap-1.5 pt-1">
+				<div class="flex min-w-0 gap-2 pt-1">
 					<Button
 						size="sm"
 						variant="outline"
-						class="hover:bg-accent hover:text-accent-foreground h-8 min-w-0 flex-1 cursor-pointer px-2 text-xs font-medium"
+						class="hover:bg-accent hover:text-accent-foreground h-8 min-w-0 flex-1 cursor-pointer px-3 text-xs font-medium"
 						onclick={handleViewDetail}
 					>
-						<InfoIcon class="mr-1 h-3 w-3 shrink-0" />
+						<InfoIcon class="mr-1.5 h-3 w-3 shrink-0" />
 						<span class="truncate">详情</span>
 					</Button>
-					<Button
+
-						size="sm"
+					<DropdownMenu.Root>
-						variant="outline"
+						<DropdownMenu.Trigger>
-						class="hover:bg-accent hover:text-accent-foreground h-8 shrink-0 cursor-pointer px-2"
+							{#snippet child({ props })}
-						onclick={() => (resetDialogOpen = true)}
+								<Button
-					>
+									{...props}
-						<RotateCcwIcon class="h-3 w-3" />
+									size="sm"
-					</Button>
+									variant="outline"
+									class="hover:bg-accent hover:text-accent-foreground h-8 shrink-0 cursor-pointer px-2"
+								>
+									<MoreHorizontalIcon class="h-3 w-3" />
+								</Button>
+							{/snippet}
+						</DropdownMenu.Trigger>
+						<DropdownMenu.Content align="start" class="w-48">
+							<DropdownMenu.Item
+								class="cursor-pointer"
+								onclick={() =>
+									window.open(`https://www.bilibili.com/video/${video.bvid}/`, '_blank')}
+							>
+								<SquareArrowOutUpRightIcon class="mr-2 h-4 w-4" />
+								在 B 站打开
+							</DropdownMenu.Item>
+							<DropdownMenu.Item class="cursor-pointer" onclick={() => (resetDialogOpen = true)}>
+								<RotateCcwIcon class="mr-2 h-4 w-4" />
+								重置下载状态
+							</DropdownMenu.Item>
+						</DropdownMenu.Content>
+					</DropdownMenu.Root>
 				</div>
 			{/if}
 		</div>

web/src/lib/types.ts

@@ -33,6 +33,7 @@ export interface VideoSourcesResponse {
 // 视频信息类型
 export interface VideoInfo {
 	id: number;
+	bvid: string;
 	name: string;
 	upper_name: string;
 	download_status: [number, number, number, number, number];

web/src/routes/me/collections/+page.svelte

@@ -58,7 +58,7 @@
 
 <div>
 	<div class="mb-6 flex items-center justify-between">
-		<div class=" text-sm">
+		<div class="text-sm font-medium">
 			{#if !loading}
 				共 {totalCount} 个合集
 			{/if}

web/src/routes/me/favorites/+page.svelte

@@ -44,7 +44,7 @@
 
 <div>
 	<div class="mb-6 flex items-center justify-between">
-		<div class="text-sm">
+		<div class="text-sm font-medium">
 			{#if !loading}
 				共 {favorites.length} 个收藏夹
 			{/if}

web/src/routes/me/uppers/+page.svelte

@@ -54,9 +54,14 @@
 
 <div>
 	<div class="mb-6 flex items-center justify-between">
-		<div class=" text-sm">
+		<div class="flex items-center gap-6">
 			{#if !loading}
-				共 {totalCount} 个 UP 主
+				<div class=" text-sm font-medium">
+					共 {totalCount} 个 UP 主
+				</div>
+				<div class=" text-sm font-medium">
+					当前第 {currentPage + 1} / {totalPages} 页
+				</div>
 			{/if}
 		</div>
 	</div>

web/src/routes/video/[id]/+page.svelte

@@ -4,6 +4,7 @@
 	import { onMount } from 'svelte';
 	import { Button } from '$lib/components/ui/button/index.js';
 	import api from '$lib/api';
+	import SquareArrowOutUpRightIcon from '@lucide/svelte/icons/square-arrow-out-up-right';
 	import type { ApiError, VideoResponse, UpdateVideoStatusRequest } from '$lib/types';
 	import RotateCcwIcon from '@lucide/svelte/icons/rotate-ccw';
 	import EditIcon from '@lucide/svelte/icons/edit';
@@ -134,6 +135,17 @@
 					<RotateCcwIcon class="mr-2 h-4 w-4 {resetting ? 'animate-spin' : ''}" />
 					重置
 				</Button>
+				<Button
+					size="sm"
+					variant="outline"
+					class="shrink-0 cursor-pointer "
+					onclick={() =>
+						window.open(`https://www.bilibili.com/video/${videoData?.video.bvid}/`, '_blank')}
+					disabled={statusEditorLoading}
+				>
+					<SquareArrowOutUpRightIcon class="mr-2 h-4 w-4" />
+					在 B 站打开
+				</Button>
 			</div>
 		</div>
 
@@ -141,6 +153,7 @@
 			<VideoCard
 				video={{
 					id: videoData.video.id,
+					bvid: videoData.video.bvid,
 					name: videoData.video.name,
 					upper_name: videoData.video.upper_name,
 					download_status: videoData.video.download_status

web/src/routes/videos/+page.svelte

@@ -190,7 +190,7 @@
 		}}
 	></SearchBar>
 	<div class="flex items-center gap-2">
-		<span class="text-muted-foreground text-sm">筛选视频源：</span>
+		<span class="text-muted-foreground text-sm">筛选：</span>
 		<DropdownFilter
 			{filters}
 			selectedLabel={$appStateStore.videoSource}
@@ -213,7 +213,7 @@
 				共 {videosData.total_count} 个视频
 			</div>
 			<div class=" text-sm font-medium">
-				共 {totalPages} 页
+				当前第 {$appStateStore.currentPage + 1} / {totalPages} 页
 			</div>
 		</div>
 		<div class="flex items-center gap-2">