ApiDocsSidebar 组件

ApiDocsSidebar 组件

概述

ApiDocsSidebar 是 IDE 组件的 API 文档侧边栏，展示 prompts.chat 库的 API 文档，支持搜索和分类浏览。

文件路径

src/components/ide/api-docs-sidebar.tsx

功能特性

  • 分类展示: API 按类别分组（Builder、Methods 等）
  • 折叠/展开: 可折叠的分类面板
  • 实时搜索: 支持名称和描述搜索
  • 类型标识: 不同颜色标识函数、类、接口等类型
  • 选中状态: 高亮当前选中的 API 项
  • 点击交互: 点击 API 项显示详情弹窗

接口定义

interface ApiDocsSidebarProps {
  selectedItem: ApiItem | null;           // 当前选中的 API 项
  onSelectItem: (item: ApiItem | null) => void;  // 选择回调
}

// ApiItem 来自 @/data/api-docs
type ApiItem = {
  name: string;           // API 名称
  type: "function" | "class" | "interface" | "type" | "const";
  description?: string;   // 描述
  signature?: string;     // 签名
  // ... 其他字段
};

类型颜色映射

类型颜色
function蓝色
class黄色
interface绿色
type紫色
const橙色

使用示例

import { ApiDocsSidebar } from "./api-docs-sidebar";
import { type ApiItem } from "@/data/api-docs";

export default function IdePage() {
  const [selectedItem, setSelectedItem] = useState<ApiItem | null>(null);

  return (
    <div className="flex h-screen">
      <ApiDocsSidebar 
        selectedItem={selectedItem}
        onSelectItem={setSelectedItem}
      />
      {/* 其他面板 */}
    </div>
  );
}

默认展开分类

  • "Builder"
  • "PromptBuilder Methods"

搜索行为

  1. 搜索时自动展开所有包含匹配项的分类
  2. 搜索范围包括：名称、描述、签名
  3. 搜索结果显示匹配数量
  4. 清空搜索后恢复默认展开状态

依赖

  • lucide-react - 图标
  • @/components/ui/input - 输入框
  • @/components/ui/scroll-area - 滚动区域
  • @/lib/utils - 工具函数（cn）
  • @/data/api-docs - API 文档数据

数据结构

API 文档数据来自 API_DOCS 常量，格式如下：

const API_DOCS = [
  {
    name: "Builder",
    items: [
      { name: "builder", type: "function", ... },
      { name: "PromptBuilder", type: "class", ... }
    ]
  },
  // ...
];

注意事项

  1. 侧边栏宽度固定为 256px (w-64)
  2. 搜索框位于顶部，始终可见
  3. 分类按钮可点击切换展开状态
  4. API 项显示类型标签和名称
  5. 长按或悬停可查看完整签名（通过 title 属性）
← 返回目录