EmbedDesigner 组件

EmbedDesigner 组件

概述

EmbedDesigner 是一个交互式嵌入设计器组件，用于创建和预览可嵌入的 AI 提示框。用户可以通过可视化界面配置各种参数，生成对应的 iframe 嵌入代码。

文件路径

src/components/developers/embed-designer.tsx

功能特性

  • 可视化配置面板: 左侧设置面板，右侧实时预览
  • 丰富的配置选项:

- Prompt 文本和上下文 - AI 模型选择（支持自定义模型） - 模式选择（Chat/Code/Ask/Plan） - 思考、推理、规划等 AI 功能开关 - 文件树展示 - Diff 视图配置 - MCP 工具展示 - 外观主题和颜色配置

  • 示例加载: 内置多种预设示例（Coding/Chat/Planning/Research 等）
  • 嵌入代码生成: 自动生成可直接使用的 iframe HTML 代码
  • 本地存储: 配置自动保存到 localStorage

接口定义

interface EmbedConfig {
  prompt: string;           // 提示文本
  context: string;          // 上下文信息
  model: string;            // AI 模型
  mode: string;             // 模式
  thinking: boolean;        // 思考模式
  reasoning: boolean;       // 推理模式
  planning: boolean;        // 规划模式
  fast: boolean;            // 快速模式
  max: boolean;             // 最大模式
  lightColor: string;       // 浅色主题颜色
  darkColor: string;        // 深色主题颜色
  height: number;           // 嵌入高度
  themeMode: "auto" | "light" | "dark";  // 主题模式
  filetree: string;         // 文件树内容
  showFiletree: boolean;    // 是否显示文件树
  showDiff: boolean;        // 是否显示 Diff
  diffFilename: string;     // Diff 文件名
  diffOldText: string;      // 旧代码
  diffNewText: string;      // 新代码
  flashButton: string;      // 闪光按钮类型
  mcpTools: string;         // MCP 工具列表
  showMcpTools: boolean;    // 是否显示 MCP 工具
}

使用示例

import { EmbedDesigner } from "@/components/developers/embed-designer";

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

预设模型

  • GPT-5, GPT-4o, o3, o4-mini
  • Claude 4.5 Sonnet, Claude 4 Opus
  • Gemini 3, Gemini 2.5 Pro
  • Grok 4, DeepSeek R2, Llama 4
  • Custom（自定义）

颜色预设

Blue | Green | Orange | Purple | Pink | Red

依赖

  • next-intl - 国际化
  • @monaco-editor/react - 代码编辑器
  • lucide-react - 图标
  • sonner - toast 通知
  • @/components/ui/* - UI 组件
  • ./embed-examples - 示例数据

注意事项

  1. 组件使用 "use client" 指令，仅在客户端渲染
  2. 配置自动保存到 localStorage，键名为 "embedDesignerConfig"
  3. 预览通过 iframe 加载 /embed 路由
  4. 自定义模型需要先在模型选择器中切换到 "Custom..."
← 返回目录