模版自由输入框布局

components/ChatInputBox/H5TemplateDrawer.tsx

@@ -71,6 +71,19 @@ export const H5TemplateDrawer = ({
   const [inputVisible, setInputVisible] = useState<{ [key: string]: boolean }>({});
   const [isBottomExpanded, setIsBottomExpanded] = useState(true);
   const [isDescExpanded, setIsDescExpanded] = useState(false);
+  // 自由输入框布局
+  const [freeInputLayout, setFreeInputLayout] = useState('bottom');
+
+  // 自由输入框布局
+  useEffect(() => {
+    if (selectedTemplate?.storyRole && selectedTemplate.storyRole.length > 0 || 
+        selectedTemplate?.storyItem && selectedTemplate.storyItem.length > 0
+    ) {
+      setFreeInputLayout('bottom');
+    } else {
+      setFreeInputLayout('top');
+    }
+  }, [selectedTemplate])
 
   useEffect(() => {
     if (isOpen) {
@@ -488,10 +501,37 @@ export const H5TemplateDrawer = ({
         {renderRoles()}
         {renderItems()}
 
+        {/** 自由输入文字 */}
+        {freeInputLayout === 'top' && selectedTemplate?.freeInput && selectedTemplate.freeInput.length > 0 && (
+          <div className="py-2 flex-1 flex flex-col">
+            <h3
+              data-alt="items-section-title"
+              className="text-base font-semibold text-white mb-3"
+            >
+              input Configuration
+            </h3>
+            <textarea
+              value={selectedTemplate?.freeInput[0].free_input_text || ""}
+              placeholder={selectedTemplate?.freeInput[0].user_tips || ""}
+              className="w-full flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
+              onChange={(e) => {
+                // 更新自由输入文字字段
+                const updatedTemplate = {
+                  ...selectedTemplate!,
+                  freeInput: selectedTemplate!.freeInput.map((item) => ({
+                    ...item,
+                    free_input_text: e.target.value
+                  })),
+                };
+                setSelectedTemplate(updatedTemplate as StoryTemplateEntity);
+              }}
+            />
+          </div>
+        )}
         
 
         <div className="w-full flex items-center justify-end gap-2">
-          {selectedTemplate?.freeInput && selectedTemplate.freeInput.length > 0 && (
+          {freeInputLayout === 'bottom' && selectedTemplate?.freeInput && selectedTemplate.freeInput.length > 0 && (
             <div data-alt="free-input" className="flex-1">
               <input
                 type="text"

components/ChatInputBox/PcTemplateModal.tsx

@@ -99,6 +99,8 @@ export const PcTemplateModal = ({
   const [inputVisible, setInputVisible] = useState<{ [key: string]: boolean }>(
     {}
   );
+  // 自由输入框布局
+  const [freeInputLayout, setFreeInputLayout] = useState('bottom');
   const router = useRouter();
   
   // 组件挂载时获取模板列表
@@ -108,6 +110,17 @@ export const PcTemplateModal = ({
     }
   }, [isOpen, getTemplateStoryList]);
 
+  // 自由输入框布局
+  useEffect(() => {
+    if (selectedTemplate?.storyRole && selectedTemplate.storyRole.length > 0 || 
+        selectedTemplate?.storyItem && selectedTemplate.storyItem.length > 0
+    ) {
+      setFreeInputLayout('bottom');
+    } else {
+      setFreeInputLayout('top');
+    }
+  }, [selectedTemplate])
+
   // 监听点击外部区域关闭输入框
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -639,9 +652,39 @@ export const PcTemplateModal = ({
             </div>
           )}
 
+        {/** 自由输入文字 */}
+        {freeInputLayout === 'top' && selectedTemplate?.freeInput && selectedTemplate.freeInput.length > 0 && (
+          <div className="py-2 flex-1 flex flex-col" style={{
+            height: 'calc(70vh - 300px - 8rem)'
+          }}>
+            <h3
+              data-alt="items-section-title"
+              className="text-lg font-semibold text-white mb-4"
+            >
+              input Configuration
+            </h3>
+            <textarea
+              value={selectedTemplate?.freeInput[0].free_input_text || ""}
+              placeholder={selectedTemplate?.freeInput[0].user_tips || ""}
+              className="w-full flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
+              onChange={(e) => {
+                // 更新自由输入文字字段
+                const updatedTemplate = {
+                  ...selectedTemplate!,
+                  freeInput: selectedTemplate!.freeInput.map((item) => ({
+                    ...item,
+                    free_input_text: e.target.value
+                  })),
+                };
+                setSelectedTemplate(updatedTemplate as StoryTemplateEntity);
+              }}
+            />
+          </div>
+        )}
+
         <div className=" absolute -bottom-8 right-0 w-full flex items-center justify-end gap-2">
           {/** 自由输入文字 */}
-          {(selectedTemplate?.freeInput) && selectedTemplate.freeInput.length > 0 && (
+          {freeInputLayout === 'bottom' && selectedTemplate?.freeInput && selectedTemplate.freeInput.length > 0 && (
             <div className="py-2 flex-1">
               <input
                 type="text"