PromptIde 组件

PromptIde 组件

概述

PromptIde 是一个功能完整的 Prompt IDE 组件，基于 Monaco 编辑器提供代码编辑、实时预览和错误调试功能。支持使用 prompts.chat 库编写和测试提示生成代码。

文件路径

src/components/ide/prompt-ide.tsx

功能特性

  • 三栏布局: API 文档 | 代码编辑器 | 预览面板
  • Monaco 编辑器: TypeScript 语法高亮和智能提示
  • 实时执行: 代码自动执行，500ms 防抖
  • 错误捕获: 控制台显示类型错误和运行时错误
  • 跨编辑器高亮: 点击代码中的字符串可在预览中高亮
  • 多种输出格式: Markdown / JSON / YAML
  • 示例加载: Image / Video / Audio / Chat 预设示例
  • 随机示例生成: AI 生成随机代码示例
  • 代码转 Prompt: 一键创建新 Prompt

输出格式

type OutputFormat = "json" | "yaml" | "markdown";

支持的库导入

import {
  builder, fromPrompt, templates,
  video, audio, image, chat, chatPresets,
  variables, similarity, quality, parser,
} from "prompts.chat";

使用示例

import { PromptIde } from "@/components/ide/prompt-ide";

export default function IdePage() {
  return (
    <div className="h-screen">
      <PromptIde />
    </div>
  );
}

组件结构

┌─────────────────┬──────────────────┬─────────────────┐
│   API 文档栏     │    代码编辑器     │    预览面板      │
│  (ApiDocsSidebar)│   (Monaco Editor) │  (Monaco Editor)│
│                 │                  ├─────────────────┤
│                 │                  │   操作按钮区     │
│                 │                  ├─────────────────┤
│                 │                  │    控制台        │
│                 │                  │  (可折叠/调整大小)│
└─────────────────┴──────────────────┴─────────────────┘

主要功能

1. 代码执行

  • 自动执行（500ms 防抖）
  • 手动运行按钮
  • 类型检查实时反馈
  • 运行时错误捕获

2. 错误处理

  • TypeScript 类型错误显示
  • 运行时错误捕获
  • 行号定位
  • 一键添加 @ts-ignore

3. 输出格式化

  • JSON: 格式化 JSON 输出
  • YAML: 转换为 YAML 格式
  • Markdown: 提取内容或格式化

4. 编辑器特性

  • 语法高亮
  • 自动补全
  • 参数提示
  • 快捷键: Alt+Space 触发建议

依赖

  • next-intl - 国际化
  • next-themes - 主题管理
  • next-auth/react - 认证
  • next/navigation - 路由
  • @monaco-editor/react - Monaco 编辑器
  • lucide-react - 图标
  • sonner - toast 通知
  • prompts.chat - Prompt 构建库
  • @/components/ui/* - UI 组件
  • @/data/* - API 文档和类型定义

本地存储

  • Key: "promptBuilderCode"
  • 自动保存用户代码

安全限制

  1. 仅支持 prompts.chat 库的导入
  2. 外部导入会导致 "Cannot evaluate" 提示
  3. 需要用户登录才能执行代码
  4. 代码在沙箱函数中执行

代码转换

组件会自动转换用户代码以便执行：

  1. 移除 import 语句
  2. 转换 export default 为 return
  3. 自动为最后表达式添加 return
  4. 注入库函数和 mock console

注意事项

  1. 首次加载使用默认示例代码
  2. 输出格式切换会自动重新格式化结果
  3. 控制台支持拖拽调整高度
  4. 执行错误时保持上次有效输出
← 返回目录