增加待看名单功能

ui/src/App.vue

@@ -6,6 +6,7 @@ import { useAuthStore } from '@/stores/auth'
 import { useDownloadStore } from '@/stores/download'
 import SettingsWidget from '@/components/common/SettingsWidget.vue'
 import DownloadProgressWidget from '@/components/common/DownloadProgressWidget.vue'
+import WatchlistWidget from '@/components/common/WatchlistWidget.vue'
 
 const route = useRoute()
 const authStore = useAuthStore()
@@ -92,6 +93,9 @@ onMounted(async () => {
     
     <!-- 下载进度小组件 - 只在登录时显示，在下载管理页面隐藏 -->
     <DownloadProgressWidget v-if="showDownloadWidget" />
+    
+    <!-- 待看名单小组件 - 只在登录时显示 -->
+    <WatchlistWidget v-if="isLoggedIn" />
   </div>
 </template>
 

ui/src/services/watchlist.ts

@@ -0,0 +1,55 @@
+import { apiService } from './api';
+import type { ApiResponse } from '@/types';
+
+// 待看名单项目接口
+export interface WatchlistItem {
+  id: string;
+  url: string;
+  title: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+// 添加项目的参数接口
+export interface AddWatchlistItemParams {
+  url: string;
+  title?: string;
+}
+
+// 更新项目的参数接口
+export interface UpdateWatchlistItemParams {
+  title?: string;
+}
+
+class WatchlistService {
+  /**
+   * 获取所有待看项目
+   */
+  async getItems(): Promise<ApiResponse<WatchlistItem[]>> {
+    return apiService.get<WatchlistItem[]>('/api/watchlist');
+  }
+
+  /**
+   * 添加待看项目
+   */
+  async addItem(params: AddWatchlistItemParams): Promise<ApiResponse<WatchlistItem[]>> {
+    return apiService.post<WatchlistItem[]>('/api/watchlist', params);
+  }
+
+  /**
+   * 更新待看项目
+   */
+  async updateItem(id: string, params: UpdateWatchlistItemParams): Promise<ApiResponse<WatchlistItem>> {
+    return apiService.put<WatchlistItem>(`/api/watchlist/${id}`, params);
+  }
+
+  /**
+   * 删除待看项目
+   */
+  async deleteItem(id: string): Promise<ApiResponse<WatchlistItem[]>> {
+    return apiService.delete<WatchlistItem[]>(`/api/watchlist/${id}`);
+  }
+}
+
+export const watchlistService = new WatchlistService();
+export default watchlistService; 

ui/src/stores/watchlist.ts

@@ -0,0 +1,139 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import { watchlistService, type WatchlistItem, type AddWatchlistItemParams, type UpdateWatchlistItemParams } from '@/services/watchlist';
+
+export const useWatchlistStore = defineStore('watchlist', () => {
+  // 状态
+  const items = ref<WatchlistItem[]>([]);
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+
+  // 计算属性
+  const itemCount = computed(() => items.value.length);
+  const hasItems = computed(() => items.value.length > 0);
+
+  // 通用错误处理
+  const handleError = (err: any, defaultMessage: string) => {
+    console.error(defaultMessage, err);
+    error.value = err.response?.data?.error || err.message || defaultMessage;
+  };
+
+  // 获取所有待看项目
+  const fetchItems = async () => {
+    try {
+      loading.value = true;
+      error.value = null;
+      
+      const response = await watchlistService.getItems();
+      if (response.success && response.data) {
+        items.value = response.data;
+      } else {
+        throw new Error(response.error || '获取待看名单失败');
+      }
+    } catch (err) {
+      handleError(err, '获取待看名单失败');
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // 添加待看项目
+  const addItem = async (params: AddWatchlistItemParams) => {
+    try {
+      loading.value = true;
+      error.value = null;
+      
+      const response = await watchlistService.addItem(params);
+      if (response.success && response.data) {
+        items.value = response.data;
+        return true;
+      } else {
+        throw new Error(response.error || '添加待看项目失败');
+      }
+    } catch (err) {
+      handleError(err, '添加待看项目失败');
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // 更新待看项目
+  const updateItem = async (id: string, params: UpdateWatchlistItemParams) => {
+    try {
+      loading.value = true;
+      error.value = null;
+      
+      const response = await watchlistService.updateItem(id, params);
+      if (response.success && response.data) {
+        // 更新本地数据
+        const index = items.value.findIndex(item => item.id === id);
+        if (index !== -1) {
+          items.value[index] = response.data;
+        }
+        return true;
+      } else {
+        throw new Error(response.error || '更新待看项目失败');
+      }
+    } catch (err) {
+      handleError(err, '更新待看项目失败');
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // 删除待看项目
+  const deleteItem = async (id: string) => {
+    try {
+      loading.value = true;
+      error.value = null;
+      
+      const response = await watchlistService.deleteItem(id);
+      if (response.success && response.data) {
+        items.value = response.data;
+        return true;
+      } else {
+        throw new Error(response.error || '删除待看项目失败');
+      }
+    } catch (err) {
+      handleError(err, '删除待看项目失败');
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // 检查URL是否已存在
+  const hasUrl = (url: string) => {
+    return items.value.some(item => item.url === url);
+  };
+
+  // 根据URL查找项目
+  const findByUrl = (url: string) => {
+    return items.value.find(item => item.url === url);
+  };
+
+  // 清除错误
+  const clearError = () => {
+    error.value = null;
+  };
+
+  return {
+    // 状态
+    items,
+    loading,
+    error,
+    // 计算属性
+    itemCount,
+    hasItems,
+    // 方法
+    fetchItems,
+    addItem,
+    updateItem,
+    deleteItem,
+    hasUrl,
+    findByUrl,
+    clearError
+  };
+});