From 31d227dca9ce1c5ff0637810d5f16930d3100989 Mon Sep 17 00:00:00 2001 From: gaoziman <2942894660@qq.com> Date: Mon, 22 Dec 2025 00:07:06 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E6=8F=90=E7=A4=BA=E8=AF=8D=E4=BC=98=E5=8C=96=E5=B7=A5=E5=85=B7?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 PromptOptimizer 浮动按钮组件 - 新增 PromptOptimizerModal 优化弹窗组件 - 支持简洁版和详细版两种优化模式 - 支持快捷键 Cmd/Ctrl + Shift + P 快速打开 - 支持优化历史记录查看和管理 - 支持一键使用优化后的提示词 --- .../PromptOptimizer/PromptOptimizerModal.tsx | 485 ++++++++++++++++++ .../features/PromptOptimizer/index.tsx | 77 +++ 2 files changed, 562 insertions(+) create mode 100644 src/components/features/PromptOptimizer/PromptOptimizerModal.tsx create mode 100644 src/components/features/PromptOptimizer/index.tsx diff --git a/src/components/features/PromptOptimizer/PromptOptimizerModal.tsx b/src/components/features/PromptOptimizer/PromptOptimizerModal.tsx new file mode 100644 index 0000000..7aa42d4 --- /dev/null +++ b/src/components/features/PromptOptimizer/PromptOptimizerModal.tsx @@ -0,0 +1,485 @@ +'use client'; + +import { useState, useEffect, useCallback, useRef } from 'react'; +import { + X, + Sparkles, + Zap, + FileText, + Copy, + Check, + Loader2, + History, + Trash2, + ArrowRight, + Wand2, + Command, +} from 'lucide-react'; +import { cn } from '@/lib/utils'; + +interface PromptOptimization { + id: number; + originalPrompt: string; + optimizedPrompt: string; + mode: string; + createdAt: string; +} + +interface PromptOptimizerModalProps { + isOpen: boolean; + onClose: () => void; + onUsePrompt: (prompt: string) => void; +} + +type TabType = 'optimize' | 'history'; +type ModeType = 'concise' | 'detailed'; + +export function PromptOptimizerModal({ + isOpen, + onClose, + onUsePrompt, +}: PromptOptimizerModalProps) { + const [activeTab, setActiveTab] = useState('optimize'); + const [mode, setMode] = useState('detailed'); + const [inputText, setInputText] = useState(''); + const [optimizedText, setOptimizedText] = useState(''); + const [isOptimizing, setIsOptimizing] = useState(false); + const [copied, setCopied] = useState(false); + const [history, setHistory] = useState([]); + const [isLoadingHistory, setIsLoadingHistory] = useState(false); + const [error, setError] = useState(null); + const inputRef = useRef(null); + + // 加载历史记录 + const loadHistory = useCallback(async () => { + try { + setIsLoadingHistory(true); + const response = await fetch('/api/prompt/history'); + if (response.ok) { + const data = await response.json(); + setHistory(data.data || []); + } + } catch (err) { + console.error('加载历史记录失败:', err); + } finally { + setIsLoadingHistory(false); + } + }, []); + + // 打开弹窗时聚焦输入框 + useEffect(() => { + if (isOpen) { + setTimeout(() => { + inputRef.current?.focus(); + }, 100); + } + }, [isOpen]); + + // 切换到历史标签时加载历史 + useEffect(() => { + if (activeTab === 'history' && history.length === 0) { + loadHistory(); + } + }, [activeTab, history.length, loadHistory]); + + // 优化提示词 + const handleOptimize = async () => { + if (!inputText.trim()) return; + + setError(null); + setIsOptimizing(true); + setOptimizedText(''); + + try { + const response = await fetch('/api/prompt/optimize', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + originalPrompt: inputText, + mode, + }), + }); + + const data = await response.json(); + + if (!response.ok) { + throw new Error(data.error || '优化失败'); + } + + setOptimizedText(data.optimizedPrompt); + // 刷新历史记录 + loadHistory(); + } catch (err) { + setError(err instanceof Error ? err.message : '优化失败，请重试'); + } finally { + setIsOptimizing(false); + } + }; + + // 复制优化结果 + const handleCopy = async () => { + await navigator.clipboard.writeText(optimizedText); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + // 使用优化后的提示词 + const handleUse = () => { + onUsePrompt(optimizedText); + onClose(); + }; + + // 删除历史记录 + const handleDeleteHistory = async (id: number) => { + try { + const response = await fetch(`/api/prompt/history?id=${id}`, { + method: 'DELETE', + }); + if (response.ok) { + setHistory((prev) => prev.filter((item) => item.id !== id)); + } + } catch (err) { + console.error('删除失败:', err); + } + }; + + // 使用历史记录中的提示词 + const handleUseHistoryPrompt = (prompt: string) => { + onUsePrompt(prompt); + onClose(); + }; + + // 键盘快捷键 + const handleKeyDown = (e: React.KeyboardEvent) => { + if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { + e.preventDefault(); + handleOptimize(); + } + }; + + if (!isOpen) return null; + + return ( +
+ {/* 背景遮罩 */} +
+ + {/* 弹窗主体 */} +
+ {/* 头部 */} +
+
+
+ +
+
+

提示词优化工具

+

让 AI 更好地理解你的需求

+
+
+ +
+ + {/* 标签切换 */} +
+ + +
+ + {/* 内容区域 */} +
+ {activeTab === 'optimize' ? ( +
+ {/* 输入区域 */} +
+ +