From c38b6ad4838f20b9f724d2257ec36989fbab6e57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?=
 <7854742+wang_rumeng@user.noreply.gitee.com>
Date: Sat, 11 Oct 2025 20:47:15 +0800
Subject: [PATCH] Enhance styling and structure of ChatInputBox and
 PcTemplateModal components; add custom scrollbar styles and improve layout
 responsiveness.

---
 app/globals.css                               |  35 +-
 components/ChatInputBox/H5TemplateDrawer.tsx  |   2 +-
 components/ChatInputBox/PcTemplateModal.tsx   | 782 +++++++++---------
 components/script-renderer/ScriptRenderer.tsx |  12 +-
 4 files changed, 432 insertions(+), 399 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 32576a1..a3954c9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -307,6 +307,39 @@ body {
   }
 }
 
-.mobile-textarea, .mobile-input {
+.mobile-textarea,
+.mobile-input {
   font-size: 16px !important;
+}
+
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.custom-scrollbar:hover {
+  scrollbar-color: rgba(156, 163, 175, 0.2) rgba(0, 0, 0, 0);
+}
+
+/* Webkit browsers (Chrome, Safari) */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 3px;
+}
+
+.custom-scrollbar:hover::-webkit-scrollbar-thumb {
+  background: rgba(156, 163, 175, 0.5);
+}
+
+.custom-scrollbar:hover::-webkit-scrollbar-thumb:hover {
+  background: rgba(156, 163, 175, 0.7);
 }
\ No newline at end of file
diff --git a/components/ChatInputBox/H5TemplateDrawer.tsx b/components/ChatInputBox/H5TemplateDrawer.tsx
index 8f2bea5..aa4cff1 100644
--- a/components/ChatInputBox/H5TemplateDrawer.tsx
+++ b/components/ChatInputBox/H5TemplateDrawer.tsx
@@ -570,7 +570,7 @@ export const H5TemplateDrawer = ({
               data-alt="items-section-title"
               className="text-base font-semibold text-white mb-3"
             >
-              input Configuration
+              Input Configuration
             </h3>
             <textarea
               data-alt="h5-template-free-input-top"
diff --git a/components/ChatInputBox/PcTemplateModal.tsx b/components/ChatInputBox/PcTemplateModal.tsx
index 109f8f0..a4902d9 100644
--- a/components/ChatInputBox/PcTemplateModal.tsx
+++ b/components/ChatInputBox/PcTemplateModal.tsx
@@ -284,9 +284,9 @@ export const PcTemplateModal = ({
   // 故事编辑器渲染
   const storyEditorRender = () => {
     return selectedTemplate ? (
-      <div className="relative h-full">
+      <div className="h-full flex flex-col overflow-hidden">
         {/* 模板信息头部 - 增加顶部空间 */}
-        <div className="flex gap-3 py-4 border-b border-white/[0.1] h-[300px]">
+        <div className="flex gap-3 py-4 border-b border-white/[0.1] max-h-[300px]">
           {/* 左侧图片 */}
           <div className="w-1/4">
             <Image
@@ -321,415 +321,415 @@ export const PcTemplateModal = ({
           </div>
         </div>
 
-        {/* 角色配置区域 */}
-        {selectedTemplate?.storyRole &&
-          selectedTemplate.storyRole.length > 0 && (
-            <div className="pt-2 border-t border-white/10">
-              <h3
-                data-alt="roles-section-title"
-                className="text-lg font-semibold text-white mb-4"
-              >
-                Character Configuration
-              </h3>
-              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                {selectedTemplate.storyRole.map((role, index) => (
-                  <div
-                    key={index}
-                    data-alt={`role-field-${index}`}
-                    className="flex flex-col items-center space-y-3"
-                  >
-                    {/* 图片容器 */}
-                    <div className="relative group">
-                      <Tooltip
-                        title={
-                          <div className="relative">
-                            <input
-                              type="text"
-                              value={role.role_description || ""}
-                              onChange={(e) => {
-                                // 更新角色的描述字段
-                                const updatedTemplate = {
-                                  ...selectedTemplate!,
-                                  storyRole: selectedTemplate!.storyRole.map(
-                                    (r) =>
-                                      r.role_name === role.role_name
-                                        ? {
-                                            ...r,
-                                            role_description: e.target.value,
-                                          }
-                                        : r
-                                  ),
-                                };
-                                setSelectedTemplate(updatedTemplate);
-                              }}
-                              placeholder={role.user_tips}
-                              className="w-[30rem] 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"
-                            />
-                            <div className="absolute right-2 top-1/2 -translate-y-1/2">
-                              {/* AI生成按钮 */}
-                              <ActionButton
-                                isCreating={isRoleGenerating[role.role_name] || false}
-                                handleCreateVideo={async () => {
-                                  if (
-                                    role.role_description &&
-                                    role.role_description.trim()
-                                  ) {
-                                    setIsRoleGenerating(prev => ({...prev, [role.role_name]: true}));
-                                    try {
-                                      await handleRoleFieldBlur(
-                                        role.role_name,
-                                        role.role_description.trim()
-                                      );
-                                    } finally {
-                                      setIsRoleGenerating(prev => ({...prev, [role.role_name]: false}));
-                                    }
-                                  }
-                                  setInputVisible((prev) => ({
-                                    ...prev,
-                                    [role.role_name]: false,
-                                  }));
+        <div className="flex-1 overflow-y-auto custom-scrollbar">
+          {/* 角色配置区域 */}
+          {selectedTemplate?.storyRole &&
+            selectedTemplate.storyRole.length > 0 && (
+              <div className="pt-2 border-t border-white/10">
+                <h3
+                  data-alt="roles-section-title"
+                  className="text-lg font-semibold text-white mb-2"
+                >
+                  Character Configuration
+                </h3>
+                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                  {selectedTemplate.storyRole.map((role, index) => (
+                    <div
+                      key={index}
+                      data-alt={`role-field-${index}`}
+                      className="flex flex-col items-center space-y-3"
+                    >
+                      {/* 图片容器 */}
+                      <div className="relative group">
+                        <Tooltip
+                          title={
+                            <div className="relative">
+                              <input
+                                type="text"
+                                value={role.role_description || ""}
+                                onChange={(e) => {
+                                  // 更新角色的描述字段
+                                  const updatedTemplate = {
+                                    ...selectedTemplate!,
+                                    storyRole: selectedTemplate!.storyRole.map(
+                                      (r) =>
+                                        r.role_name === role.role_name
+                                          ? {
+                                              ...r,
+                                              role_description: e.target.value,
+                                            }
+                                          : r
+                                    ),
+                                  };
+                                  setSelectedTemplate(updatedTemplate);
                                 }}
-                                icon={<Sparkles className="w-4 h-4" />}
-                                width="w-8"
-                                height="h-8"
-                                disabled={isRoleGenerating[role.role_name] || false}
+                                placeholder={role.user_tips}
+                                className="w-[30rem] 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"
                               />
+                              <div className="absolute right-2 top-1/2 -translate-y-1/2">
+                                {/* AI生成按钮 */}
+                                <ActionButton
+                                  isCreating={isRoleGenerating[role.role_name] || false}
+                                  handleCreateVideo={async () => {
+                                    if (
+                                      role.role_description &&
+                                      role.role_description.trim()
+                                    ) {
+                                      setIsRoleGenerating(prev => ({...prev, [role.role_name]: true}));
+                                      try {
+                                        await handleRoleFieldBlur(
+                                          role.role_name,
+                                          role.role_description.trim()
+                                        );
+                                      } finally {
+                                        setIsRoleGenerating(prev => ({...prev, [role.role_name]: false}));
+                                      }
+                                    }
+                                    setInputVisible((prev) => ({
+                                      ...prev,
+                                      [role.role_name]: false,
+                                    }));
+                                  }}
+                                  icon={<Sparkles className="w-4 h-4" />}
+                                  width="w-8"
+                                  height="h-8"
+                                  disabled={isRoleGenerating[role.role_name] || false}
+                                />
+                              </div>
                             </div>
-                          </div>
-                        }
-                        placement="top"
-                        classNames={{
-                          root: "max-w-none",
-                        }}
-                        open={inputVisible[role.role_name]}
-                        onOpenChange={(visible) =>
-                          setInputVisible((prev) => ({
-                            ...prev,
-                            [role.role_name]: visible,
-                          }))
-                        }
-                        trigger="contextMenu"
-                        styles={{ root: { zIndex: 1000 } }}
-                      >
-                        {/* 图片 */}
-                        <div
-                          data-alt={`role-thumbnail-${index}`}
-                          className="w-24 h-24 rounded-xl overflow-hidden border border-white/10 bg-white/0 flex items-center justify-center cursor-pointer hover:scale-105 transition-all duration-200"
+                          }
+                          placement="top"
+                          classNames={{
+                            root: "max-w-none",
+                          }}
+                          open={inputVisible[role.role_name]}
+                          onOpenChange={(visible) =>
+                            setInputVisible((prev) => ({
+                              ...prev,
+                              [role.role_name]: visible,
+                            }))
+                          }
+                          trigger="contextMenu"
+                          styles={{ root: { zIndex: 1000 } }}
                         >
-                          <Image
-                            src={role.photo_url || "/assets/empty_video.png"}
-                            alt={role.role_name}
-                            className="w-full h-full object-cover"
-                            preview={{
-                              mask: null,
-                              maskClassName: "hidden",
-                            }}
-                            fallback="/assets/empty_video.png"
-                          />
-                        </div>
-                      </Tooltip>
-
-                      {/* 角色名称 - 图片下方 */}
-                      <div className="text-center mt-2">
-                        <span className="text-white text-sm font-medium">
-                          {role.role_name}
-                        </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={`role-ai-button-${index}`}
-                            onClick={() =>
-                              setInputVisible((prev) => ({
-                                ...prev,
-                                [role.role_name]: !prev[role.role_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"
+                          {/* 图片 */}
+                          <div
+                            data-alt={`role-thumbnail-${index}`}
+                            className="w-24 h-24 rounded-xl overflow-hidden border border-white/10 bg-white/0 flex items-center justify-center cursor-pointer hover:scale-105 transition-all duration-200"
                           >
-                            <Sparkles className="w-3.5 h-3.5" />
-                          </button>
+                            <Image
+                              src={role.photo_url || "/assets/empty_video.png"}
+                              alt={role.role_name}
+                              className="w-full h-full object-cover"
+                              preview={{
+                                mask: null,
+                                maskClassName: "hidden",
+                              }}
+                              fallback="/assets/empty_video.png"
+                            />
+                          </div>
                         </Tooltip>
 
-                        {/* 上传按钮 */}
-                        <Upload
-                          name="roleImage"
-                          showUploadList={false}
-                          beforeUpload={(file) => {
-                            const isImage = file.type.startsWith("image/");
-                            if (!isImage) {
-                              console.error("只能上传图片文件");
-                              return false;
-                            }
-                            const isLt5M = file.size / 1024 / 1024 < 5;
-                            if (!isLt5M) {
-                              console.error("图片大小不能超过5MB");
-                              return false;
-                            }
-                            return true;
-                          }}
-                          customRequest={async ({
-                            file,
-                            onSuccess,
-                            onError,
-                          }: RcCustomRequestOptions) => {
-                            try {
-                              const fileObj = file as File;
-                              const uploadedUrl = await uploadFile(
-                                fileObj,
-                                (progress: number) => {
-                                  console.log(`上传进度: ${progress}%`);
-                                }
-                              );
-                              await AvatarAndAnalyzeFeatures(
-                                uploadedUrl,
-                                role.role_name
-                              );
-                              onSuccess?.(uploadedUrl);
-                            } catch (error) {
-                              console.error("角色图片上传失败:", error);
-                              onError?.(error as Error);
-                            }
-                          }}
-                        >
-                          <Tooltip title="upload your image" placement="top">
+                        {/* 角色名称 - 图片下方 */}
+                        <div className="text-center mt-2">
+                          <span className="text-white text-sm font-medium">
+                            {role.role_name}
+                          </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={`role-upload-button-${index}`}
-                              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"
+                              data-alt={`role-ai-button-${index}`}
+                              onClick={() =>
+                                setInputVisible((prev) => ({
+                                  ...prev,
+                                  [role.role_name]: !prev[role.role_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"
                             >
-                              <UploadOutlined className="w-3.5 h-3.5" />
+                              <Sparkles className="w-3.5 h-3.5" />
                             </button>
                           </Tooltip>
-                        </Upload>
+
+                          {/* 上传按钮 */}
+                          <Upload
+                            name="roleImage"
+                            showUploadList={false}
+                            beforeUpload={(file) => {
+                              const isImage = file.type.startsWith("image/");
+                              if (!isImage) {
+                                console.error("只能上传图片文件");
+                                return false;
+                              }
+                              const isLt5M = file.size / 1024 / 1024 < 5;
+                              if (!isLt5M) {
+                                console.error("图片大小不能超过5MB");
+                                return false;
+                              }
+                              return true;
+                            }}
+                            customRequest={async ({
+                              file,
+                              onSuccess,
+                              onError,
+                            }: RcCustomRequestOptions) => {
+                              try {
+                                const fileObj = file as File;
+                                const uploadedUrl = await uploadFile(
+                                  fileObj,
+                                  (progress: number) => {
+                                    console.log(`上传进度: ${progress}%`);
+                                  }
+                                );
+                                await AvatarAndAnalyzeFeatures(
+                                  uploadedUrl,
+                                  role.role_name
+                                );
+                                onSuccess?.(uploadedUrl);
+                              } catch (error) {
+                                console.error("角色图片上传失败:", error);
+                                onError?.(error as Error);
+                              }
+                            }}
+                          >
+                            <Tooltip title="upload your image" placement="top">
+                              <button
+                                data-alt={`role-upload-button-${index}`}
+                                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>
+                            </Tooltip>
+                          </Upload>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                ))}
+                  ))}
+                </div>
               </div>
-            </div>
-          )}
+            )}
 
-        {/* 道具配置区域 */}
-        {selectedTemplate?.storyItem &&
-          selectedTemplate.storyItem.length > 0 && (
-            <div className="pt-2 border-t border-white/10">
+          {/* 道具配置区域 */}
+          {selectedTemplate?.storyItem &&
+            selectedTemplate.storyItem.length > 0 && (
+              <div className="pt-2 border-t border-white/10">
+                <h3
+                  data-alt="items-section-title"
+                  className="text-lg font-semibold text-white mb-4"
+                >
+                  props Configuration
+                </h3>
+                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                  {selectedTemplate.storyItem.map((item, index) => (
+                    <div
+                      key={index}
+                      data-alt={`item-field-${index}`}
+                      className="flex flex-col items-center space-y-3"
+                    >
+                      {/* 图片容器 */}
+                      <div className="relative group">
+                        <Tooltip
+                          title={
+                            <div className="relative">
+                              <input
+                                type="text"
+                                value={item.item_description || ""}
+                                onChange={(e) => {
+                                  // 更新道具的描述字段
+                                  const updatedTemplate = {
+                                    ...selectedTemplate!,
+                                    storyItem: selectedTemplate!.storyItem.map(
+                                      (i) =>
+                                        i.item_name === item.item_name
+                                          ? {
+                                              ...i,
+                                              item_description: e.target.value,
+                                            }
+                                          : i
+                                    ),
+                                  };
+                                  setSelectedTemplate(updatedTemplate);
+                                }}
+                                placeholder="Enter description for AI image generation..."
+                                className="w-[30rem] 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"
+                              />
+                              <div className="absolute right-2 top-1/2 -translate-y-1/2">
+                                {/* AI生成按钮 */}
+                                <ActionButton
+                                  isCreating={isItemGenerating[item.item_name] || false}
+                                  handleCreateVideo={async () => {
+                                    if (
+                                      item.item_description &&
+                                      item.item_description.trim()
+                                    ) {
+                                      setIsItemGenerating(prev => ({...prev, [item.item_name]: true}));
+                                      try {
+                                        await handleItemFieldBlur(
+                                          item.item_name,
+                                          item.item_description.trim()
+                                        );
+                                      } finally {
+                                        setIsItemGenerating(prev => ({...prev, [item.item_name]: false}));
+                                      }
+                                    }
+                                    setInputVisible((prev) => ({
+                                      ...prev,
+                                      [item.item_name]: false,
+                                    }));
+                                  }}
+                                  icon={<Sparkles className="w-4 h-4" />}
+                                  width="w-8"
+                                  height="h-8"
+                                  disabled={isItemGenerating[item.item_name] || false}
+                                />
+                              </div>
+                            </div>
+                          }
+                          placement="top"
+                          classNames={{
+                            root: "max-w-none",
+                          }}
+                          open={inputVisible[item.item_name]}
+                          onOpenChange={(visible) =>
+                            setInputVisible((prev) => ({
+                              ...prev,
+                              [item.item_name]: visible,
+                            }))
+                          }
+                          trigger="contextMenu"
+                          styles={{ root: { zIndex: 1000 } }}
+                        >
+                          {/* 图片 */}
+                          <div
+                            data-alt={`item-thumbnail-${index}`}
+                            className="w-24 h-24 rounded-xl overflow-hidden border border-white/10 bg-white/0 flex items-center justify-center cursor-pointer hover:scale-105 transition-all duration-200"
+                          >
+                            <Image
+                              src={item.photo_url || "/assets/empty_video.png"}
+                              alt={item.item_name}
+                              className="w-full h-full object-cover"
+                              preview={{
+                                mask: null,
+                                maskClassName: "hidden",
+                              }}
+                              fallback="/assets/empty_video.png"
+                            />
+                          </div>
+                        </Tooltip>
+
+                        {/* 道具名称 - 图片下方 */}
+                        <div className="text-center mt-2">
+                          <span className="text-white text-sm font-medium">
+                            {item.item_name}
+                          </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={`item-ai-button-${index}`}
+                              onClick={() =>
+                                setInputVisible((prev) => ({
+                                  ...prev,
+                                  [item.item_name]: !prev[item.item_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="itemImage"
+                            showUploadList={false}
+                            beforeUpload={(file) => {
+                              const isImage = file.type.startsWith("image/");
+                              if (!isImage) {
+                                console.error("只能上传图片文件");
+                                return false;
+                              }
+                              const isLt5M = file.size / 1024 / 1024 < 5;
+                              if (!isLt5M) {
+                                console.error("图片大小不能超过5MB");
+                                return false;
+                              }
+                              return true;
+                            }}
+                            customRequest={async ({
+                              file,
+                              onSuccess,
+                              onError,
+                            }: RcCustomRequestOptions) => {
+                              try {
+                                const fileObj = file as File;
+                                const uploadedUrl = await uploadFile(
+                                  fileObj,
+                                  (progress: number) => {
+                                    console.log(`上传进度: ${progress}%`);
+                                  }
+                                );
+                                updateItemImage(item.item_name, uploadedUrl);
+                                onSuccess?.(uploadedUrl);
+                              } catch (error) {
+                                console.error("道具图片上传失败:", error);
+                                onError?.(error as Error);
+                              }
+                            }}
+                          >
+                            <Tooltip title="upload your image" placement="top">
+                              <button
+                                data-alt={`item-upload-button-${index}`}
+                                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>
+                            </Tooltip>
+                          </Upload>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+          {/** 自由输入文字 */}
+          {freeInputLayout === 'top' && selectedTemplate?.freeInput && selectedTemplate.freeInput.length > 0 && (
+            <div className="pt-2 pb-6 h-full flex flex-col">
               <h3
                 data-alt="items-section-title"
-                className="text-lg font-semibold text-white mb-4"
+                className="text-lg font-semibold text-white mb-2"
               >
-                props Configuration
+                Input Configuration
               </h3>
-              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                {selectedTemplate.storyItem.map((item, index) => (
-                  <div
-                    key={index}
-                    data-alt={`item-field-${index}`}
-                    className="flex flex-col items-center space-y-3"
-                  >
-                    {/* 图片容器 */}
-                    <div className="relative group">
-                      <Tooltip
-                        title={
-                          <div className="relative">
-                            <input
-                              type="text"
-                              value={item.item_description || ""}
-                              onChange={(e) => {
-                                // 更新道具的描述字段
-                                const updatedTemplate = {
-                                  ...selectedTemplate!,
-                                  storyItem: selectedTemplate!.storyItem.map(
-                                    (i) =>
-                                      i.item_name === item.item_name
-                                        ? {
-                                            ...i,
-                                            item_description: e.target.value,
-                                          }
-                                        : i
-                                  ),
-                                };
-                                setSelectedTemplate(updatedTemplate);
-                              }}
-                              placeholder="Enter description for AI image generation..."
-                              className="w-[30rem] 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"
-                            />
-                            <div className="absolute right-2 top-1/2 -translate-y-1/2">
-                              {/* AI生成按钮 */}
-                              <ActionButton
-                                isCreating={isItemGenerating[item.item_name] || false}
-                                handleCreateVideo={async () => {
-                                  if (
-                                    item.item_description &&
-                                    item.item_description.trim()
-                                  ) {
-                                    setIsItemGenerating(prev => ({...prev, [item.item_name]: true}));
-                                    try {
-                                      await handleItemFieldBlur(
-                                        item.item_name,
-                                        item.item_description.trim()
-                                      );
-                                    } finally {
-                                      setIsItemGenerating(prev => ({...prev, [item.item_name]: false}));
-                                    }
-                                  }
-                                  setInputVisible((prev) => ({
-                                    ...prev,
-                                    [item.item_name]: false,
-                                  }));
-                                }}
-                                icon={<Sparkles className="w-4 h-4" />}
-                                width="w-8"
-                                height="h-8"
-                                disabled={isItemGenerating[item.item_name] || false}
-                              />
-                            </div>
-                          </div>
-                        }
-                        placement="top"
-                        classNames={{
-                          root: "max-w-none",
-                        }}
-                        open={inputVisible[item.item_name]}
-                        onOpenChange={(visible) =>
-                          setInputVisible((prev) => ({
-                            ...prev,
-                            [item.item_name]: visible,
-                          }))
-                        }
-                        trigger="contextMenu"
-                        styles={{ root: { zIndex: 1000 } }}
-                      >
-                        {/* 图片 */}
-                        <div
-                          data-alt={`item-thumbnail-${index}`}
-                          className="w-24 h-24 rounded-xl overflow-hidden border border-white/10 bg-white/0 flex items-center justify-center cursor-pointer hover:scale-105 transition-all duration-200"
-                        >
-                          <Image
-                            src={item.photo_url || "/assets/empty_video.png"}
-                            alt={item.item_name}
-                            className="w-full h-full object-cover"
-                            preview={{
-                              mask: null,
-                              maskClassName: "hidden",
-                            }}
-                            fallback="/assets/empty_video.png"
-                          />
-                        </div>
-                      </Tooltip>
-
-                      {/* 道具名称 - 图片下方 */}
-                      <div className="text-center mt-2">
-                        <span className="text-white text-sm font-medium">
-                          {item.item_name}
-                        </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={`item-ai-button-${index}`}
-                            onClick={() =>
-                              setInputVisible((prev) => ({
-                                ...prev,
-                                [item.item_name]: !prev[item.item_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="itemImage"
-                          showUploadList={false}
-                          beforeUpload={(file) => {
-                            const isImage = file.type.startsWith("image/");
-                            if (!isImage) {
-                              console.error("只能上传图片文件");
-                              return false;
-                            }
-                            const isLt5M = file.size / 1024 / 1024 < 5;
-                            if (!isLt5M) {
-                              console.error("图片大小不能超过5MB");
-                              return false;
-                            }
-                            return true;
-                          }}
-                          customRequest={async ({
-                            file,
-                            onSuccess,
-                            onError,
-                          }: RcCustomRequestOptions) => {
-                            try {
-                              const fileObj = file as File;
-                              const uploadedUrl = await uploadFile(
-                                fileObj,
-                                (progress: number) => {
-                                  console.log(`上传进度: ${progress}%`);
-                                }
-                              );
-                              updateItemImage(item.item_name, uploadedUrl);
-                              onSuccess?.(uploadedUrl);
-                            } catch (error) {
-                              console.error("道具图片上传失败:", error);
-                              onError?.(error as Error);
-                            }
-                          }}
-                        >
-                          <Tooltip title="upload your image" placement="top">
-                            <button
-                              data-alt={`item-upload-button-${index}`}
-                              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>
-                          </Tooltip>
-                        </Upload>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
+              <textarea
+                data-alt="pc-template-free-input-top"
+                value={selectedTemplate?.freeInput[0].free_input_text || ""}
+                placeholder={selectedTemplate?.freeInput[0].user_tips || ""}
+                className="w-full min-h-[50px] max-h-[150px] 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>
           )}
-
-        {/** 自由输入文字 */}
-        {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
-              data-alt="pc-template-free-input-top"
-              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>
 
         <div className=" absolute -bottom-8 right-0 w-full flex items-center justify-end gap-2">
           {/** 自由输入文字 */}
@@ -813,7 +813,7 @@ export const PcTemplateModal = ({
 
             <div className="flex gap-4 pb-8  flex-1 overflow-y-hidden">
               {templateListRender()}
-              <div className="flex-1">{storyEditorRender()}</div>
+              <div className="flex-1 relative">{storyEditorRender()}</div>
             </div>
           </div>
         </GlobalLoad>
diff --git a/components/script-renderer/ScriptRenderer.tsx b/components/script-renderer/ScriptRenderer.tsx
index 17c6766..7eaef95 100644
--- a/components/script-renderer/ScriptRenderer.tsx
+++ b/components/script-renderer/ScriptRenderer.tsx
@@ -177,13 +177,13 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
             {addThemeTag.map((item, index) => (
               <div key={index} className={`flex items-center gap-1 px-2 rounded-full ${Object.values(ThemeTagBgColor)[index]}`}>
                 <span className={`text-sm px-2 py-1 rounded-md`}>{item}</span>
-                <X className="w-4 h-4 cursor-pointer text-blue-500/80" onClick={() =>
+                {/* <X className="w-4 h-4 cursor-pointer text-blue-500/80" onClick={() =>
                   handleThemeTagChange(addThemeTag.filter(v => v !== item))
-                } />
+                } /> */}
               </div>
             ))}
             {/* 主题标签更改 */}
-            <div className='flex items-center gap-1'>
+            {/* <div className='flex items-center gap-1'>
               <div className='w-[10rem]'>
                 <SelectDropdown
                   dropdownId="theme-type"
@@ -197,7 +197,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
                   }}
                 />
               </div>
-            </div>
+            </div> */}
           </div>
         )
       default:
@@ -212,7 +212,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
                   animate={{ opacity: 1, y: 0 }}
                   exit={{ opacity: 0, y: -10 }}
                 >
-                  <SquarePen
+                  {/* <SquarePen
                     className="w-6 h-6 p-1 cursor-pointer text-gray-600 hover:text-blue-500 transition-colors"
                     onClick={() => {
                       // 提示权限不够
@@ -220,7 +220,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
                       return;
                       handleEditBlock(block);
                     }}
-                  />
+                  /> */}
                   <Copy
                     className="w-6 h-6 p-1 cursor-pointer text-gray-600 hover:text-blue-500 transition-colors"
                     onClick={() => {