EmbedExamples 嵌入示例

EmbedExamples 嵌入示例

概述

embed-examples.ts 定义了嵌入设计器的预设示例数据，包含多种场景的配置模板，方便用户快速开始。

文件路径

src/components/developers/embed-examples.ts

接口定义

interface EmbedExampleConfig {
  prompt: string;           // 提示文本
  context: string;          // 上下文
  model: string;            // AI 模型
  mode: string;             // 模式
  thinking: boolean;        // 思考模式
  reasoning: boolean;       // 推理模式
  planning: boolean;        // 规划模式
  fast: boolean;            // 快速模式
  filetree: string;         // 文件树
  showFiletree: boolean;    // 显示文件树
  showDiff: boolean;        // 显示 Diff
  diffFilename?: string;    // Diff 文件名
  diffOldText?: string;     // 旧代码
  diffNewText?: string;     // 新代码
  flashButton?: string;     // 闪光按钮
  lightColor: string;       // 浅色主题色
  darkColor: string;        // 深色主题色
  themeMode?: "auto" | "light" | "dark";  // 主题模式
  mcpTools?: string;        // MCP 工具
  showMcpTools?: boolean;   // 显示 MCP 工具
}

interface EmbedExample {
  value: string;                    // 示例标识
  label: string;                    // 显示名称
  category: string;                 // 分类
  config: Partial<EmbedExampleConfig>;  // 配置
}

示例分类

Coding（编码示例）

示例说明
vibe-codingVibe Coding 风格编码
vibe-coding-diff带 Diff 视图的编码
api-integrationAPI 集成示例
debugging调试会话

Chat（对话示例）

示例说明
chatgptChatGPT 风格对话
claudeClaude 风格对话
geminiGemini 风格对话

Planning（规划示例）

示例说明
project-planning项目规划
code-review代码审查

Research（研究示例）

示例说明
research研究助手
learning学习模式

Quick Actions（快速操作）

示例说明
quick-refactor快速重构
quick-test生成测试

MCP Tools（MCP 工具示例）

示例说明
mcp-githubGitHub 集成
mcp-filesystem文件操作
mcp-database数据库查询
mcp-multi-tool多工具工作流

Image & Video（图像视频）

示例说明
nano-bananaNano Banana Pro
veo-videoVeo 3.1 视频

使用方式

import { EMBED_EXAMPLES } from "./embed-examples";

// 加载示例
const loadExample = (exampleValue: string) => {
  const example = EMBED_EXAMPLES.find(e => e.value === exampleValue);
  if (example) {
    // 应用示例配置
    updateConfig({
      ...defaultConfig,
      ...example.config,
    });
  }
};

颜色主题示例

// 紫色主题
lightColor: "#8b5cf6"
darkColor: "#a78bfa"

// 蓝色主题
lightColor: "#3b82f6"
darkColor: "#60a5fa"

// 绿色主题
lightColor: "#10b981"
darkColor: "#34d399"

// 橙色主题
lightColor: "#f97316"
darkColor: "#fb923c"

注意事项

  1. 所有示例都是 Partial<EmbedExampleConfig>，可与默认配置合并
  2. 示例按分类分组展示在下拉选择器中
  3. 颜色和主题设置会影响嵌入预览的外观
  4. MCP 工具示例需要配合 MCP 服务器使用
← 返回目录