功能性整合

src/components/PromptComposer.tsx

@@ -6,6 +6,7 @@ import { useImageGeneration, useImageEditing } from '../hooks/useImageGeneration
 import { Upload, Wand2, Edit3, MousePointer, HelpCircle, ChevronDown, ChevronRight, RotateCcw } from 'lucide-react';
 import { blobToBase64, urlToBlob } from '../utils/imageUtils';
 import { PromptHints } from './PromptHints';
+import { PromptSuggestions } from './PromptSuggestions';
 import { cn } from '../utils/cn';
 
 export const PromptComposer: React.FC = () => {
@@ -38,6 +39,7 @@ export const PromptComposer: React.FC = () => {
   const { generate, cancelGeneration } = useImageGeneration();
   const { edit, cancelEdit } = useImageEditing();
   const [showAdvanced, setShowAdvanced] = useState(false);
+  const [showPromptSuggestions, setShowPromptSuggestions] = useState(true);
   const [showClearConfirm, setShowClearConfirm] = useState(false);
   const [showHintsModal, setShowHintsModal] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
@@ -337,8 +339,8 @@ export const PromptComposer: React.FC = () => {
             selectedTool === 'generate'
               ? '描述您想要创建的内容...'
               : '描述您想要的修改...'
-          }
-          className="min-h-[120px] resize-none text-sm rounded-xl"
+          }          
+          className="min-h-[180px] resize-none text-sm rounded-xl"
         />
         
         {/* 提示质量指示器 */}
@@ -386,6 +388,29 @@ export const PromptComposer: React.FC = () => {
         )}
       </div>
 
+      {/* 常用提示词 */}
+      <div className="pt-3 border-t border-gray-100 flex-shrink-0">
+        <button
+          onClick={() => setShowPromptSuggestions(!showPromptSuggestions)}
+          className="flex items-center text-sm text-gray-500 hover:text-gray-700 transition-colors duration-200"
+        >
+          {showPromptSuggestions ? <ChevronDown className="h-4 w-4 mr-1.5" /> : <ChevronRight className="h-4 w-4 mr-1.5" />}
+          常用提示词
+        </button>
+        
+        {showPromptSuggestions && (
+          <div className="mt-4 animate-in slide-down duration-300">
+            <PromptSuggestions 
+              onWordSelect={(word) => {
+                setCurrentPrompt(currentPrompt ? `${currentPrompt}, ${word}` : word);
+              }}
+              minFrequency={3}
+              showTitle={false}
+            />
+          </div>
+        )}
+      </div>
+
       {/* 高级控制 */}
       <div className="pt-3 border-t border-gray-100 flex-shrink-0">
         <button