chore: 换用更美观、现代的前端页面 (#348)

web/src/lib/stores/breadcrumb.ts

@@ -0,0 +1,14 @@
+import { writable } from 'svelte/store';
+
+export interface BreadcrumbItem {
+	href?: string;
+	label: string;
+	isActive?: boolean;
+	onClick?: () => void;
+}
+
+export const breadcrumbStore = writable<BreadcrumbItem[]>([]);
+
+export function setBreadcrumb(items: BreadcrumbItem[]) {
+	breadcrumbStore.set(items);
+}

web/src/lib/stores/filter.ts

@@ -0,0 +1,65 @@
+import { writable } from 'svelte/store';
+
+export interface AppState {
+	query: string;
+	videoSource: {
+		key: string;
+		value: string;
+	};
+}
+
+// 创建应用状态store
+export const appStateStore = writable<AppState>({
+	query: '',
+	videoSource: {
+		key: '',
+		value: ''
+	}
+});
+
+export const ToQuery = (state: AppState): string => {
+	const { query, videoSource } = state;
+	const params = new URLSearchParams();
+	if (query.trim()) {
+		params.set('query', query);
+	}
+	if (videoSource.key && videoSource.value) {
+		params.set(videoSource.key, videoSource.value);
+	}
+	const queryString = params.toString();
+	return queryString ? `?${queryString}` : '';
+};
+
+// 便捷的设置方法
+export const setQuery = (query: string) => {
+	appStateStore.update((state) => ({
+		...state,
+		query
+	}));
+};
+
+export const setVideoSourceFilter = (key: string, value: string) => {
+	appStateStore.update((state) => ({
+		...state,
+		videoSource: { key, value }
+	}));
+};
+
+export const clearVideoSourceFilter = () => {
+	appStateStore.update((state) => ({
+		...state,
+		videoSource: { key: '', value: '' }
+	}));
+};
+
+export const clearAll = () => {
+	appStateStore.set({
+		query: '',
+		videoSource: { key: '', value: '' }
+	});
+};
+
+// 保留旧的接口以兼容现有代码
+export const filterStore = writable({ key: '', value: '' });
+export const setFilter = setVideoSourceFilter;
+export const clearFilter = clearVideoSourceFilter;

web/src/lib/stores/video-source.ts

@@ -0,0 +1,13 @@
+import { writable } from 'svelte/store';
+import { type VideoSourcesResponse } from '$lib/types';
+
+export const videoSourceStore = writable<VideoSourcesResponse | undefined>(undefined);
+
+// 便捷的设置和清除方法
+export const setVideoSources = (sources: VideoSourcesResponse) => {
+	videoSourceStore.set(sources);
+};
+
+export const clearFilter = () => {
+	videoSourceStore.set(undefined);
+};