From 4b876f3c0dec3cc70f64632bc36dfeecdbad37cf Mon Sep 17 00:00:00 2001 From: root Date: Sun, 13 Jul 2025 00:19:39 +0800 Subject: [PATCH] fix --- src/pages/ResourceCategoryPageV2.tsx | 144 +++++++++++++-------------- 1 file changed, 68 insertions(+), 76 deletions(-) diff --git a/src/pages/ResourceCategoryPageV2.tsx b/src/pages/ResourceCategoryPageV2.tsx index a19329a..7b207ba 100644 --- a/src/pages/ResourceCategoryPageV2.tsx +++ b/src/pages/ResourceCategoryPageV2.tsx @@ -1,14 +1,30 @@ import React, { useState, useEffect } from 'react' import { Plus, Edit, Trash2, Search, Save, X, Cloud, Users, Palette, BarChart3, Download, Upload } from 'lucide-react' -import { - ResourceCategoryServiceV2, - ResourceCategoryV2, - CategoryBatchItem +import { + ResourceCategoryServiceV2, + ResourceCategoryV2, + CategoryBatchItem } from '../services/resourceCategoryServiceV2' +import { + useCategoriesData, + useCategoryActions, + useCategoryStore +} from '../stores/useCategoryStore' const ResourceCategoryPageV2: React.FC = () => { - const [categories, setCategories] = useState([]) - const [loading, setLoading] = useState(true) + // 使用 Zustand store 管理分类数据 + const { categories, loading, error } = useCategoriesData() + const { + loadCategories, + refreshCategories, + addCategory, + updateCategory, + removeCategory, + clearError, + searchCategories + } = useCategoryActions() + + // 本地 UI 状态 const [searchTerm, setSearchTerm] = useState('') const [editingCategory, setEditingCategory] = useState(null) const [showCreateForm, setShowCreateForm] = useState(false) @@ -16,7 +32,6 @@ const ResourceCategoryPageV2: React.FC = () => { const [includeCloud, setIncludeCloud] = useState(true) const [showDisabled, setShowDisabled] = useState(true) const [selectedColor, setSelectedColor] = useState('') - const [categoryCount, setCategoryCount] = useState(0) const [formData, setFormData] = useState({ title: '', ai_prompt: '', @@ -35,32 +50,42 @@ const ResourceCategoryPageV2: React.FC = () => { ] useEffect(() => { + // 使用 store 的 loadCategories 方法 loadCategories() - loadCategoryCount() - }, [includeCloud]) + }, [loadCategories]) - const loadCategories = async () => { - try { - setLoading(true) - const result = await ResourceCategoryServiceV2.getAllCategories({ - include_cloud: includeCloud, - limit: 200 - }) - setCategories(result) - } catch (error) { - console.error('Failed to load categories:', error) - } finally { - setLoading(false) + // 获取过滤后的分类列表 + const getFilteredCategories = () => { + let filtered = categories + + // 根据搜索词过滤 + if (searchTerm.trim()) { + filtered = searchCategories(searchTerm.trim()) } + + // 根据云端/本地过滤 + if (!includeCloud) { + filtered = filtered.filter(cat => !cat.is_cloud) + } + + // 根据启用/禁用状态过滤 + if (!showDisabled) { + filtered = filtered.filter(cat => cat.is_active) + } + + // 根据颜色过滤 + if (selectedColor) { + filtered = filtered.filter(cat => cat.color === selectedColor) + } + + return filtered } - const loadCategoryCount = async () => { - try { - const count = await ResourceCategoryServiceV2.getCategoryCount(includeCloud) - setCategoryCount(count) - } catch (error) { - console.error('Failed to load category count:', error) - } + const filteredCategories = getFilteredCategories() + + // 刷新分类数据 + const handleRefresh = async () => { + await refreshCategories() } const handleCreateCategory = async () => { @@ -73,10 +98,10 @@ const ResourceCategoryPageV2: React.FC = () => { ) if (newCategory) { - setCategories([...categories, newCategory]) + // 使用 store 的 addCategory 方法 + addCategory(newCategory) setShowCreateForm(false) setFormData({ title: '', ai_prompt: '', color: '#FF6B6B', is_cloud: false }) - await loadCategoryCount() } } catch (error) { console.error('Failed to create category:', error) @@ -98,10 +123,8 @@ const ResourceCategoryPageV2: React.FC = () => { ) if (updatedCategory) { - const updatedCategories = categories.map(cat => - cat.id === editingCategory.id ? updatedCategory : cat - ) - setCategories(updatedCategories) + // 使用 store 的 updateCategory 方法 + updateCategory(editingCategory.id, updatedCategory) setEditingCategory(null) setFormData({ title: '', ai_prompt: '', color: '#FF6B6B', is_cloud: false }) } @@ -116,8 +139,8 @@ const ResourceCategoryPageV2: React.FC = () => { try { await ResourceCategoryServiceV2.deleteCategory(categoryId, true) - setCategories(categories.filter(cat => cat.id !== categoryId)) - await loadCategoryCount() + // 使用 store 的 removeCategory 方法 + removeCategory(categoryId) } catch (error) { console.error('Failed to delete category:', error) alert('删除分类失败: ' + (error instanceof Error ? error.message : '未知错误')) @@ -132,10 +155,8 @@ const ResourceCategoryPageV2: React.FC = () => { await ResourceCategoryServiceV2.deactivateCategory(categoryId) } - const updatedCategories = categories.map(cat => - cat.id === categoryId ? { ...cat, is_active: isActive } : cat - ) - setCategories(updatedCategories) + // 使用 store 的 updateCategory 方法 + updateCategory(categoryId, { is_active: isActive }) } catch (error) { console.error('Failed to toggle category:', error) alert('切换分类状态失败: ' + (error instanceof Error ? error.message : '未知错误')) @@ -150,47 +171,28 @@ const ResourceCategoryPageV2: React.FC = () => { alert(`批量导入完成: 成功 ${result.success} 个，失败 ${result.failed} 个`) setShowBatchImport(false) setBatchData('') - await loadCategories() - await loadCategoryCount() + // 刷新分类数据 + await refreshCategories() } catch (error) { console.error('Failed to batch import:', error) alert('批量导入失败: ' + (error instanceof Error ? error.message : '数据格式错误')) } } - const handleSearchByColor = async (color: string) => { + const handleSearchByColor = (color: string) => { if (color === selectedColor) { // 取消颜色筛选 setSelectedColor('') - await loadCategories() } else { // 按颜色筛选 setSelectedColor(color) - try { - const result = await ResourceCategoryServiceV2.getCategoriesByColor(color, { - include_cloud: includeCloud - }) - setCategories(result) - } catch (error) { - console.error('Failed to search by color:', error) - } } + // 过滤逻辑已经在 getFilteredCategories 中处理 } - const handleSearch = async () => { - if (!searchTerm.trim()) { - await loadCategories() - return - } - - try { - const result = await ResourceCategoryServiceV2.searchCategories(searchTerm, { - include_cloud: includeCloud - }) - setCategories(result) - } catch (error) { - console.error('Failed to search categories:', error) - } + const handleSearch = () => { + // 搜索逻辑已经在 getFilteredCategories 中处理 + // 这里只需要触发重新渲染，React 会自动调用 getFilteredCategories } const startEdit = (category: ResourceCategoryV2) => { @@ -229,17 +231,7 @@ const ResourceCategoryPageV2: React.FC = () => { URL.revokeObjectURL(url) } - const filteredCategories = categories.filter(category => { - // 搜索过滤 - const matchesSearch = !searchTerm || - category.title.toLowerCase().includes(searchTerm.toLowerCase()) || - category.ai_prompt.toLowerCase().includes(searchTerm.toLowerCase()) - // 状态过滤 - const matchesStatus = showDisabled || category.is_active - - return matchesSearch && matchesStatus - }) // 统计信息 const stats = {