feat: 支持搜索关注的 UP 主 (#588)

web/src/lib/api.ts

@@ -199,11 +199,13 @@ class ApiClient {
 
 	async getFollowedUppers(
 		pageNum?: number,
-		pageSize?: number
+		pageSize?: number,
+		name?: string
 	): Promise<ApiResponse<UppersResponse>> {
 		const params = {
 			page_num: pageNum,
-			page_size: pageSize
+			page_size: pageSize,
+			name: name
 		};
 		return this.get<UppersResponse>('/me/uppers', params as Record<string, unknown>);
 	}
@@ -294,8 +296,8 @@ const api = {
 	getCreatedFavorites: () => apiClient.getCreatedFavorites(),
 	getFollowedCollections: (pageNum?: number, pageSize?: number) =>
 		apiClient.getFollowedCollections(pageNum, pageSize),
-	getFollowedUppers: (pageNum?: number, pageSize?: number) =>
-		apiClient.getFollowedUppers(pageNum, pageSize),
+	getFollowedUppers: (pageNum?: number, pageSize?: number, name?: string) =>
+		apiClient.getFollowedUppers(pageNum, pageSize, name),
 	insertFavorite: (request: InsertFavoriteRequest) => apiClient.insertFavorite(request),
 	insertCollection: (request: InsertCollectionRequest) => apiClient.insertCollection(request),
 	insertSubmission: (request: InsertSubmissionRequest) => apiClient.insertSubmission(request),

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

@@ -3,6 +3,7 @@
 	import { toast } from 'svelte-sonner';
 	import SubscriptionCard from '$lib/components/subscription-card.svelte';
 	import Pagination from '$lib/components/pagination.svelte';
+	import SearchBar from '$lib/components/search-bar.svelte';
 	import { setBreadcrumb } from '$lib/stores/breadcrumb';
 	import api from '$lib/api';
 	import type { Followed, ApiError } from '$lib/types';
@@ -11,13 +12,14 @@
 	let totalCount = 0;
 	let currentPage = 0;
 	let loading = false;
+	let searchQuery = '';
 
 	const pageSize = 50;
 
-	async function loadUppers(page: number = 0) {
+	async function loadUppers(page: number = 0, name?: string) {
 		loading = true;
 		try {
-			const response = await api.getFollowedUppers(page + 1, pageSize); // API 使用 1 基索引
+			const response = await api.getFollowedUppers(page + 1, pageSize, name || undefined); // API 使用 1 基索引
 			uppers = response.data.uppers;
 			totalCount = response.data.total;
 		} catch (error) {
@@ -32,12 +34,18 @@
 
 	function handleSubscriptionSuccess() {
 		// 重新加载数据以获取最新状态
-		loadUppers(currentPage);
+		loadUppers(currentPage, searchQuery);
 	}
 
 	async function handlePageChange(page: number) {
 		currentPage = page;
-		await loadUppers(page);
+		await loadUppers(page, searchQuery);
+	}
+
+	async function handleSearch(query: string) {
+		searchQuery = query;
+		currentPage = 0;
+		await loadUppers(0, query);
 	}
 
 	onMount(async () => {
@@ -53,6 +61,10 @@
 </svelte:head>
 
 <div>
+	<div class="mb-4 flex items-center justify-between">
+		<SearchBar placeholder="搜索 UP 主.." value={searchQuery} onSearch={handleSearch}></SearchBar>
+	</div>
+
 	<div class="mb-6 flex items-center justify-between">
 		<div class="flex items-center gap-6">
 			{#if !loading}