vscode-workbench/.trae/specs/tools-dynamic-data/spec.md

Tools页面动态数据加载 Spec

Why

当前Tools页面使用静态硬编码数据，无法动态管理工具列表。需要改为从数据库通过API获取，实现后台管理动态配置。

What Changes

• 修改 Tools.tsx 从API动态获取分类和工具数据
• 添加加载状态和错误处理
• 保持现有UI结构和样式风格
• 添加工具详情跳转逻辑

Impact

• Affected code:
  • chunyu_project_react/src/pages/Tools/Tools.tsx

ADDED Requirements

Requirement: 动态加载工具列表

系统SHALL从后端API /tool/list/ 动态获取工具列表数据。

Scenario: 页面加载时获取数据

• WHEN 用户访问Tools页面
• THEN 页面从API获取工具列表并展示加载状态

Scenario: 分类筛选

• WHEN 用户点击分类Tab
• THEN 页面根据所选分类过滤工具列表

Requirement: 动态加载分类列表

系统SHALL从后端API /tool/categories/ 动态获取分类数据。

Scenario: 分类Tab动态渲染

• WHEN 页面加载完成
• THEN 分类Tab从API获取并渲染

Requirement: 错误处理

系统SHALL在API请求失败时显示友好的错误信息。

Scenario: 网络错误

• WHEN API请求失败
• THEN 显示错误提示和重试按钮

Requirement: 工具详情跳转

系统SHALL根据工具类型跳转到对应详情页面。

Scenario: 点击工具卡片

• WHEN 用户点击工具卡片
• THEN 跳转到工具详情页或外部URL