151 lines
4.0 KiB
Markdown
151 lines
4.0 KiB
Markdown
# 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
|