# 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