test1/components/nova-sdk/tools/README.md

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 三种类型

使用示例

导入组件

// 导入所有工具组件
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 表单

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 编辑器

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}
    />
  )
}

使用工具列表视图

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