PromptEnhancer 组件

PromptEnhancer 组件

概述

PromptEnhancer 是一个 Prompt 增强工具组件，利用 AI 帮助用户优化和改进提示词。支持多种输出类型和格式，并提供本地历史记录功能。

文件路径

src/components/developers/prompt-enhancer.tsx

功能特性

  • 三栏布局: 历史记录 | 输入面板 | 输出面板
  • AI 驱动优化: 调用 /api/improve-prompt 接口改进提示词
  • 多种输出类型: Text / Image / Video / Sound
  • 多种输出格式: Text / JSON / YAML
  • 本地历史记录: 自动保存到 localStorage（最多 50 条）
  • 灵感来源: 显示相似 Prompt 推荐
  • Monaco 编辑器: 语法高亮的代码展示

接口定义

type OutputType = "text" | "image" | "video" | "sound";
type OutputFormat = "text" | "structured_json" | "structured_yaml";

interface EnhanceResponse {
  original: string;      // 原始输入
  improved: string;      // 改进后的提示
  outputType: OutputType;
  outputFormat: OutputFormat;
  inspirations: Array<{
    id: string;
    slug: string | null;
    title: string;
    similarity: number;
  }>;
  model: string;         // 使用的 AI 模型
}

interface SavedPrompt {
  id: string;
  input: string;
  output: string;
  outputType: OutputType;
  outputFormat: OutputFormat;
  createdAt: number;
}

使用示例

import { PromptEnhancer } from "@/components/developers/prompt-enhancer";

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

主要功能

1. 提示增强

  • 输入提示文本
  • 选择输出类型和格式
  • 点击 "Enhance" 按钮
  • 获取 AI 优化后的提示

2. 历史记录管理

  • 自动保存每次增强记录
  • 点击历史项可恢复
  • 支持删除单条记录
  • 本地存储，数据持久化

3. 结果操作

  • 复制优化后的提示
  • 直接运行提示
  • 查看灵感来源推荐

依赖

  • next-intl - 国际化
  • next-themes - 主题管理
  • @monaco-editor/react - 代码编辑器
  • lucide-react - 图标
  • sonner - toast 通知
  • @/components/ui/* - UI 组件
  • @/components/prompts/run-prompt-button - 运行按钮

存储

  • Key: "promptEnhancerHistory"
  • Max Items: 50
  • Storage: localStorage

注意事项

  1. 需要用户登录才能使用增强功能
  2. 输入限制 10,000 字符
  3. 历史记录仅保存在本地浏览器
  4. 输出格式会影响 Monaco 编辑器的语言模式
← 返回目录