推进，样式更新完成

components/ChatInputBox/ChatInputBox.tsx

@@ -83,6 +83,8 @@ const RenderTemplateStoryMode = ({
   const { uploadFile, isUploading } = useUploadFile();
   // 本地加载状态，用于 UI 反馈
   const [localLoading, setLocalLoading] = useState(0);
+  // 控制输入框显示状态
+  const [inputVisible, setInputVisible] = useState<{ [key: string]: boolean }>({});
   const router = useRouter();
   // 组件挂载时获取模板列表
   useEffect(() => {
@@ -91,6 +93,23 @@ const RenderTemplateStoryMode = ({
     }
   }, [isOpen, getTemplateStoryList]);
 
+  // 监听点击外部区域关闭输入框
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Element;
+      // 检查是否点击了输入框相关的元素
+      if (!target.closest('.ant-tooltip') && !target.closest('[data-alt*="field-ai-button"]')) {
+        // 关闭所有打开的输入框
+        setInputVisible({});
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   // 处理模板选择
   const handleTemplateSelect = (template: StoryTemplateEntity) => {
     setSelectedTemplate(template);
@@ -251,13 +270,13 @@ const RenderTemplateStoryMode = ({
                               {/* AI生成按钮 */}
                               <ActionButton
                                 isCreating={false}
-                                handleCreateVideo={() =>
+                                handleCreateVideo={() => {
                                   handleFieldBlur(
                                     field.field_name,
                                     field.value || ""
-                                  )
+                                  );
-                                }
+                                  setInputVisible(prev => ({ ...prev, [field.field_name]: false }));
-
+                                }}
                                 icon={<Sparkles className="w-4 h-4" />}
                                 width="w-8"
                                 height="h-8"
@@ -269,7 +288,9 @@ const RenderTemplateStoryMode = ({
                         classNames={{
                           root: "max-w-none",
                         }}
-                        trigger="focus"
+                        open={inputVisible[field.field_name]}
+                        onOpenChange={(visible) => setInputVisible(prev => ({ ...prev, [field.field_name]: visible }))}
+                        trigger="contextMenu"
                         styles={{ root: { zIndex: 1000 } }}
                       >
                         {/* 图片 */}
@@ -301,7 +322,20 @@ const RenderTemplateStoryMode = ({
                         </span>
                       </div>
 
-                      {/* 上传按钮 - 右上角 */}
+                      {/* 按钮组 - 右上角 */}
+                      <div className="absolute -top-8 left-[1.2rem] flex gap-3 opacity-0 group-hover:opacity-100 transition-all duration-200">
+                        {/* AI生成按钮 */}
+                        <Tooltip title="AI generate image" placement="top">
+                          <button
+                            data-alt={`field-ai-button-${index}`}
+                            onClick={() => setInputVisible(prev => ({ ...prev, [field.field_name]: !prev[field.field_name] }))}
+                            className="w-6 h-6 bg-purple-500 hover:bg-purple-600 text-white rounded-full flex items-center justify-center transition-all duration-200 hover:scale-110 shadow-lg"
+                          >
+                            <Sparkles className="w-3.5 h-3.5" />
+                          </button>
+                        </Tooltip>
+
+                        {/* 上传按钮 */}
                         <Upload
                           name="fieldImage"
                           showUploadList={false}
@@ -341,7 +375,7 @@ const RenderTemplateStoryMode = ({
                           <Tooltip title="upload your image" placement="top">
                             <button
                               data-alt={`field-upload-button-${index}`}
-                            className="absolute -top-1 -right-1 w-6 h-6 bg-blue-500 hover:bg-blue-600 text-white rounded-full flex items-center justify-center transition-all duration-200 opacity-0 group-hover:opacity-100 hover:scale-110 shadow-lg"
+                              className="w-6 h-6 bg-blue-500 hover:bg-blue-600 text-white rounded-full flex items-center justify-center transition-all duration-200 hover:scale-110 shadow-lg"
                             >
                               <UploadOutlined className="w-3.5 h-3.5" />
                             </button>
@@ -349,6 +383,7 @@ const RenderTemplateStoryMode = ({
                         </Upload>
                       </div>
                     </div>
+                  </div>
                 ))}
               </div>
             </div>