# Nova SDK Tools

这个目录包含了从 Remix 迁移的工具相关组件，用于管理自定义工具（SKILL、MCP、API）。

## 目录结构

```
tools/
├── components/           # 主要组件
│   ├── api-form.tsx     # API 工具表单
│   ├── custom-list-view.tsx  # 自定义工具列表视图
│   ├── message-mcp.tsx  # MCP 消息组件
│   ├── mcp-json-editor.tsx  # MCP JSON 编辑器
│   ├── skill-form.tsx   # SKILL 工具表单
│   ├── tool-item.tsx    # 工具项组件
│   └── tool-type-badge.tsx  # 工具类型徽章
├── settings/            # 设置相关组件
│   ├── ai-parse-config.tsx  # AI 解析配置
│   ├── example-popover.tsx  # 示例弹出框
│   ├── mcp-editor-modal.tsx # MCP 编辑模态框
│   └── mcp-store-popover.tsx # MCP 商店弹出框
├── hooks/               # React Hooks
│   └── useExampleList.ts # 获取示例列表
├── form-components/     # 表单组件
│   ├── path-form-item.tsx  # 路径表单项
│   ├── form-header-item.tsx # 表单头项
│   ├── nest-form-request-form-item/ # 嵌套表单请求项
│   ├── env-manage/      # 环境管理
│   └── parse-curl/      # 解析 curl
└── index.ts            # 主导出文件
```

## 主要功能

### 1. SKILL 工具管理
- `SkillForm`: 创建和编辑 SKILL 工具的表单组件

### 2. MCP 工具管理
- `MCPEditorModal`: MCP 服务编辑模态框
- `MCPJsonEditor`: JSON 格式的 MCP 配置编辑器
- `MessageMCP`: MCP 工具消息展示组件
- `ExamplePopover`: MCP 示例选择器
- `AiParseConfig`: AI 辅助解析 MCP 配置
- `McpStorePopover`: MCP 市场链接

### 3. API 工具管理
- `ApiForm`: 创建和编辑 API 工具的表单组件
- 各种表单组件支持 API 参数配置

### 4. 工具列表视图
- `MCPListView`: 自定义工具列表视图，包含 SKILL、MCP、API 三种类型

## 使用示例

### 导入组件

```typescript
// 导入所有工具组件
import { SkillForm, MCPEditorModal, MCPListView } from '@/nova-sdk/tools'

// 或者按需导入
import { SkillForm } from '@/nova-sdk/tools/components/skill-form'
import { MCPEditorModal } from '@/nova-sdk/tools/settings/mcp-editor-modal'
import { MCPListView } from '@/nova-sdk/tools/components/custom-list-view'
```

### 使用 SKILL 表单

```typescript
import { SkillForm } from '@/nova-sdk/tools'
import type { SkillFormState } from '@/nova-sdk/tools'

function MyComponent() {
  const handleSave = async (values: SkillFormState) => {
    // 处理保存逻辑
    console.log(values)
  }

  return (
    <SkillForm
      teamId="your-team-id"
      onBack={() => console.log('back')}
      onSave={handleSave}
    />
  )
}
```

### 使用 MCP 编辑器

```typescript
import { MCPEditorModal } from '@/nova-sdk/tools'

function MyComponent() {
  const handleFinish = async (values: any) => {
    // 保存 MCP 配置
    console.log(values)
  }

  return (
    <MCPEditorModal
      value={mcpConfig}
      isEdit={false}
      exampleList={exampleList}
      onFinish={handleFinish}
    />
  )
}
```

### 使用工具列表视图

```typescript
import { MCPListView } from '@/nova-sdk/tools'

function MyComponent() {
  const handleViewChange = (view: ViewType) => {
    console.log('View changed:', view)
  }

  return (
    <MCPListView
      teamId="your-team-id"
      onViewChange={handleViewChange}
      onClose={() => console.log('close')}
    />
  )
}
```

## 依赖说明

这些组件依赖于以下外部库：
- `antd`: UI 组件库
- `ahooks`: React Hooks 工具库
- `@ebay/nice-modal-react`: 模态框管理

以及内部依赖：
- `@/store/tool`: 工具状态管理
- `@/store/mcp`: MCP 状态管理
- `@/components/icon`: 图标组件
- `@/components/modal`: 模态框组件
- `@apis/mindnote/*`: API 接口

## 注意事项

1. 迁移的组件保留了原有的功能和接口
2. 所有组件都使用 TypeScript 类型定义
3. 表单验证和错误处理逻辑保持不变
4. 确保在使用前正确配置相关 Store 和 API