xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

模版自由输入框布局

Browse Source
This commit is contained in:
北枳 2025-09-16 20:07:08 +08:00
parent 2e98646259
commit 8b697c4152
2 changed files with 85 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
components/ChatInputBox/H5TemplateDrawer.tsx
View File

@ -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"

45
components/ChatInputBox/PcTemplateModal.tsx
View File

@ -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"