embed/page.tsx

embed/page.tsx

基本信息

  • 类型: Next.js 页面 (Client Component)
  • 路径: ./src/app/embed/page.tsx

功能描述

Prompt 嵌入页面，用于生成可嵌入第三方网站的交互式 Prompt 预览。支持自定义主题、文件树、差异对比、MCP 工具等多种配置。

路由

  • 路径: /embed
  • 查询参数:

- prompt: Prompt 内容 - context: 上下文内容（逗号分隔） - model: 模型名称 - mode: 模式（chat/agent） - thinking/reasoning/planning/fast/max: 布尔标志 - lightColor/darkColor: 主题颜色 - themeMode: 主题模式（auto/light/dark） - filetree: 文件树数据 - showDiff/diffFilename/diffOldText/diffNewText: 差异对比 - flashButton: 闪烁按钮类型 - mcpTools: MCP 工具列表

依赖导入

  • next/navigation - Next.js 路由（useSearchParams）
  • react - React Hooks（Suspense、useEffect、useState、useMemo）
  • @/lib/utils - 工具函数（cn）
  • @/components/prompts/run-prompt-button - 运行 Prompt 按钮

主要功能

  • 从 URL 参数解析嵌入配置
  • 支持自动/亮色/暗色主题切换
  • 渲染可交互的文件树侧边栏
  • 显示上下文标签（@mention、URL、#hashtag）
  • 支持 MCP 工具标签展示
  • 支持代码差异对比视图（接受/拒绝按钮）
  • 渲染 Prompt 内容并高亮 @mention
  • 显示模型和模式设置标签
  • 集成运行 Prompt 按钮
  • 完全响应式设计

SEO

  • 无特定 SEO 配置（嵌入式组件页面）
← 返回目录