categories_technical

1. 架构设计graph TD A[用户浏览器] --> B[React Frontend] B --> C[React Router] B --> D[Supabase Client] D --> E[Supabase Database] subgraph "前端层" B C D end subgraph "数据层" E end 2. 技术描述前端框架: React@18 + TypeScript + Tailwind CSS路由管理: React Router@6状态管理: React Context + useStateUI组件: Headless UI (树形组件) + 自定义组件数据获取: Supabase Client SDK初始化工具: vite-init后端: Supabase (BaaS)3. 路由定义路由用途/categories分类主页，显示分类树和搜索功能/categories/search?q=keyword搜索结果页，显示匹配的分类列表/categories/:id分类详情页，显示特定分类的详细信息4. 数据模型4.1 分类表结构erDiagram CATEGORY { uuid id PK string name string slug UK text description uuid parent_id FK integer sort_order boolean is_active timestamp created_at timestamp updated_at } CATEGORY ||--o{ CATEGORY : "parent-child" 4.2 数据定义语言分类表 (categories)-- 创建分类表 CREATE TABLE categories ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name VARCHAR(100) NOT NULL, slug VARCHAR(100) UNIQUE NOT NULL, description TEXT, parent_id UUID REFERENCES categories(id) ON DELETE CASCADE, sort_order INTEGER DEFAULT 0, is_active BOOLEAN DEFAULT true, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- 创建索引 CREATE INDEX idx_categories_parent_id ON categories(parent_id); CREATE INDEX idx_categories_slug ON categories(slug); CREATE INDEX idx_categories_sort_order ON categories(sort_order); -- 权限设置 GRANT SELECT ON categories TO anon; GRANT ALL PRIVILEGES ON categories TO authenticated; -- 初始数据 INSERT INTO categories (name, slug, description, sort_order) VALUES ('技术', 'technology', '技术相关分类', 1), ('设计', 'design', '设计相关分类', 2), ('生活', 'lifestyle', '生活相关分类', 3); INSERT INTO categories (name, slug, description, parent_id, sort_order) VALUES ('前端开发', 'frontend', '前端技术', (SELECT id FROM categories WHERE slug = 'technology'), 1), ('后端开发', 'backend', '后端技术', (SELECT id FROM categories WHERE slug = 'technology'), 2), ('UI设计', 'ui-design', '用户界面设计', (SELECT id FROM categories WHERE slug = 'design'), 1); 5. 核心组件设计5.1 分类树组件interface CategoryNode { id: string; name: string; slug: string; children?: CategoryNode[]; isExpanded?: boolean; } interface CategoryTreeProps { categories: CategoryNode[]; selectedId?: string; onSelect: (category: CategoryNode) => void; onToggleExpand: (id: string) => void; } 5.2 搜索功能interface SearchProps { onSearch: (keyword: string) => void; placeholder?: string; debounceMs?: number; } 5.3 分类详情组件interface CategoryDetailProps { category: { id: string; name: string; slug: string; description?: string; parentPath: Array<{id: string; name: string; slug: string}>; childrenCount: number; }; onNavigate: (slug: string) => void; } 6. API 接口定义6.1 获取分类树// 获取完整的分类树结构 GET /api/categories/tree Response: { data: CategoryNode[]; error: null | string; } 6.2 搜索分类// 根据关键词搜索分类 GET /api/categories/search?q={keyword} Response: { data: Array<{ id: string; name: string; slug: string; path: string[]; }>; error: null | string; } 6.3 获取分类详情// 获取单个分类的详细信息 GET /api/categories/:slug Response: { data: { id: string; name: string; slug: string; description: string; parentPath: Array<{id: string; name: string; slug: string}>; children: Array<{id: string; name: string; slug: string}>; }; error: null | string; } 7. 状态管理使用 React Context 管理分类状态：interface CategoryContextType { categories: CategoryNode[]; selectedCategory: CategoryNode | null; searchResults: CategoryNode[]; isLoading: boolean; // 操作方法 selectCategory: (id: string) => void; searchCategories: (keyword: string) => void; toggleCategoryExpand: (id: string) => void; }