forked from 77media/video-flow
新增 模板快捷入口和定位
This commit is contained in:
moux1024
parent
7a7339e6e4
commit
7a3366fb2e
@ -94,7 +94,6 @@ export const useTemplateStoryServiceHook = (): UseTemplateStoryService => {
|
||||
|
||||
setTemplateStoryList(templates);
|
||||
setSelectedTemplate(templates[0]);
|
||||
console.log(selectedTemplate);
|
||||
} catch (err) {
|
||||
console.error("获取模板列表失败:", err);
|
||||
} finally {
|
||||
|
||||
@ -34,7 +34,6 @@ import { StoryTemplateEntity } from "@/app/service/domain/Entities";
|
||||
import { useImageStoryServiceHook } from "@/app/service/Interaction/ImageStoryService";
|
||||
import TemplateCard from "./templateCard";
|
||||
import { AudioRecorder } from "./AudioRecorder";
|
||||
import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { createMovieProjectV1 } from "@/api/video_flow";
|
||||
import {
|
||||
@ -51,6 +50,7 @@ import { H5TemplateDrawer } from "./H5TemplateDrawer";
|
||||
import { PcPhotoStoryModal } from "./PcPhotoStoryModal";
|
||||
import { H5PhotoStoryDrawer } from "./H5PhotoStoryDrawer";
|
||||
import { AspectRatioSelector, AspectRatioValue } from "./AspectRatioSelector";
|
||||
import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService";
|
||||
|
||||
const LauguageOptions = [
|
||||
{ value: "english", label: "English", isVip: false, code:'EN' },
|
||||
@ -86,7 +86,7 @@ const VideoDurationOptions = [
|
||||
* @returns {Function} - 防抖后的函数
|
||||
*/
|
||||
const debounce = (func: Function, wait: number) => {
|
||||
let timeout: NodeJS.Timeout;
|
||||
let timeout: ReturnType<typeof setTimeout>;
|
||||
return function executedFunction(...args: any[]) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
@ -108,6 +108,14 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
|
||||
// 模板故事弹窗状态
|
||||
const [isTemplateModalOpen, setIsTemplateModalOpen] = useState(false);
|
||||
// 模板快捷入口：记录初始模板ID与是否自动聚焦
|
||||
const [initialTemplateId, setInitialTemplateId] = useState<string | undefined>(undefined);
|
||||
// 复用模板服务：获取模板列表
|
||||
const {
|
||||
templateStoryList,
|
||||
isLoading: isTemplateLoading,
|
||||
getTemplateStoryList,
|
||||
} = useTemplateStoryServiceHook();
|
||||
|
||||
// 图片故事弹窗状态
|
||||
const [isPhotoStoryModalOpen, setIsPhotoStoryModalOpen] = useState(false);
|
||||
@ -164,19 +172,19 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
}, []);
|
||||
|
||||
const onConfigChange = <K extends keyof ConfigOptions>(key: K, value: ConfigOptions[K]) => {
|
||||
setConfigOptions((prev) => ({
|
||||
setConfigOptions((prev: ConfigOptions) => ({
|
||||
...prev,
|
||||
[key]: value,
|
||||
}));
|
||||
if (key === 'videoDuration') {
|
||||
// 当选择 8s 时，强制关闭剧本扩展并禁用开关
|
||||
if (value === '8s') {
|
||||
setConfigOptions((prev) => ({
|
||||
setConfigOptions((prev: ConfigOptions) => ({
|
||||
...prev,
|
||||
expansion_mode: false,
|
||||
}));
|
||||
} else {
|
||||
setConfigOptions((prev) => ({
|
||||
setConfigOptions((prev: ConfigOptions) => ({
|
||||
...prev,
|
||||
expansion_mode: true,
|
||||
}));
|
||||
@ -184,6 +192,12 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!templateStoryList || templateStoryList.length === 0) {
|
||||
getTemplateStoryList();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleCreateVideo = async () => {
|
||||
if (isCreating) return; // 如果正在创建中，直接返回
|
||||
|
||||
@ -279,7 +293,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
|
||||
{/* 输入框和Action按钮 - 只在展开状态显示 */}
|
||||
{!isExpanded && (
|
||||
<div className="flex flex-col gap-3 w-full">
|
||||
<div data-alt="chat-input-box" className="flex flex-col gap-3 w-full">
|
||||
{/* 第一行：输入框 */}
|
||||
<div className="video-prompt-editor relative flex flex-col gap-3 flex-1 pr-10">
|
||||
{/* 文本输入框 - 改为textarea */}
|
||||
@ -335,7 +349,10 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
<button
|
||||
data-alt="template-story-button"
|
||||
className="flex items-center gap-1.5 px-2 py-2 text-white/[0.70] hover:text-white transition-colors"
|
||||
onClick={() => setIsTemplateModalOpen(true)}
|
||||
onClick={() => {
|
||||
setInitialTemplateId(undefined);
|
||||
setIsTemplateModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<LayoutTemplate className="w-4 h-4" />
|
||||
</button>
|
||||
@ -400,7 +417,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
</div>
|
||||
),
|
||||
})),
|
||||
onClick: ({ key }) => onConfigChange('language', key),
|
||||
onClick: ({ key }: { key: string }) => onConfigChange('language', key),
|
||||
}}
|
||||
trigger={["click"]}
|
||||
placement="top"
|
||||
@ -426,7 +443,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
size="small"
|
||||
checked={configOptions.expansion_mode}
|
||||
disabled={configOptions.videoDuration === '8s'}
|
||||
onChange={(checked) => onConfigChange('expansion_mode', checked)}
|
||||
onChange={(checked: boolean) => onConfigChange('expansion_mode', checked)}
|
||||
/>
|
||||
</div>
|
||||
<span className={`text-xs text-white hidden sm:inline`}>
|
||||
@ -454,7 +471,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
</div>
|
||||
),
|
||||
})),
|
||||
onClick: ({ key }) => onConfigChange('videoDuration', key as string),
|
||||
onClick: ({ key }: { key: string }) => onConfigChange('videoDuration', key as string),
|
||||
}}
|
||||
trigger={["click"]}
|
||||
placement="top"
|
||||
@ -490,6 +507,41 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
height={isMobile ? "h-10" : "h-12"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 第三行：模板快捷入口水平滚动，超出渐隐遮挡（懒加载+骨架屏） */}
|
||||
<div data-alt="template-quick-entries" className="relative pl-2">
|
||||
<div className="flex items-center gap-2 overflow-x-auto scrollbar-hide pr-6 py-1">
|
||||
{isTemplateLoading && (!templateStoryList || templateStoryList.length === 0) ? (
|
||||
// 骨架屏：若正在加载且没有数据
|
||||
Array.from({ length: 6 }).map((_, idx) => (
|
||||
<div
|
||||
key={`skeleton-${idx}`}
|
||||
data-alt={`template-chip-skeleton-${idx}`}
|
||||
className="flex-shrink-0 w-20 h-7 rounded-full bg-white/10 animate-pulse"
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
(templateStoryList || []).map((tpl) => (
|
||||
<button
|
||||
key={tpl.id}
|
||||
data-alt={`template-chip-${tpl.id}`}
|
||||
className="flex-shrink-0 px-3 py-1.5 rounded-full bg-white/10 hover:bg-white/20 text-white/80 hover:text-white text-xs transition-colors"
|
||||
onClick={() => {
|
||||
// id 映射：优先使用模板的 id；若需要兼容 template_id，则传两者之一
|
||||
setInitialTemplateId(tpl.id || (tpl as any).template_id);
|
||||
setIsTemplateModalOpen(true);
|
||||
setTimeout(() => {
|
||||
const textarea = document.querySelector('textarea');
|
||||
if (textarea) (textarea as HTMLTextAreaElement).focus();
|
||||
}, 0);
|
||||
}}
|
||||
>
|
||||
{tpl.name}
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -501,6 +553,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
configOptions={configOptions}
|
||||
isOpen={isTemplateModalOpen}
|
||||
onClose={() => setIsTemplateModalOpen(false)}
|
||||
initialTemplateId={initialTemplateId}
|
||||
isTemplateCreating={isTemplateCreating}
|
||||
setIsTemplateCreating={setIsTemplateCreating}
|
||||
isRoleGenerating={isRoleGenerating}
|
||||
@ -514,6 +567,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
configOptions={configOptions}
|
||||
isOpen={isTemplateModalOpen}
|
||||
onClose={() => setIsTemplateModalOpen(false)}
|
||||
initialTemplateId={initialTemplateId}
|
||||
isTemplateCreating={isTemplateCreating}
|
||||
setIsTemplateCreating={setIsTemplateCreating}
|
||||
isRoleGenerating={isRoleGenerating}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { Drawer, Tooltip, Upload, Image } from "antd";
|
||||
import type { UploadRequestOption as RcCustomRequestOptions } from 'rc-upload/lib/interface';
|
||||
import { UploadOutlined } from "@ant-design/icons";
|
||||
import { Clapperboard, Sparkles, LayoutTemplate, ChevronDown, ChevronUp, CheckCircle2 } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
@ -32,6 +33,8 @@ interface H5TemplateDrawerProps {
|
||||
) => void;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
/** 指定初始选中的模板ID，用于从外部快速定位 */
|
||||
initialTemplateId?: string;
|
||||
configOptions: {
|
||||
mode: "auto" | "manual";
|
||||
resolution: "720p" | "1080p" | "4k";
|
||||
@ -50,6 +53,7 @@ export const H5TemplateDrawer = ({
|
||||
setIsItemGenerating,
|
||||
isOpen,
|
||||
onClose,
|
||||
initialTemplateId,
|
||||
configOptions,
|
||||
}: H5TemplateDrawerProps) => {
|
||||
const router = useRouter();
|
||||
@ -76,6 +80,8 @@ export const H5TemplateDrawer = ({
|
||||
// 自由输入框布局
|
||||
const [freeInputLayout, setFreeInputLayout] = useState('bottom');
|
||||
const [aspectUI, setAspectUI] = useState<AspectRatioValue>("VIDEO_ASPECT_RATIO_LANDSCAPE");
|
||||
// 顶部列表所在的实际滚动容器（外层 top-section 才是滚动容器）
|
||||
const topSectionRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// 自由输入框布局
|
||||
useEffect(() => {
|
||||
@ -94,6 +100,56 @@ export const H5TemplateDrawer = ({
|
||||
}
|
||||
}, [isOpen, getTemplateStoryList]);
|
||||
|
||||
// 当列表加载后，根据 initialTemplateId 自动选中
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
if (!initialTemplateId) return;
|
||||
if (!templateStoryList || templateStoryList.length === 0) return;
|
||||
const target = templateStoryList.find(t => t.id === initialTemplateId || t.template_id === initialTemplateId);
|
||||
if (target) {
|
||||
setSelectedTemplate(target);
|
||||
}
|
||||
}, [isOpen, initialTemplateId, templateStoryList, setSelectedTemplate]);
|
||||
|
||||
// 自动聚焦可编辑输入框
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
if (!selectedTemplate) return;
|
||||
const timer = setTimeout(() => {
|
||||
const topTextArea = document.querySelector('textarea[data-alt="h5-template-free-input-top"]') as HTMLTextAreaElement | null;
|
||||
const bottomInput = document.querySelector('input[data-alt="h5-template-free-input-bottom"]') as HTMLInputElement | null;
|
||||
if (freeInputLayout === 'top' && topTextArea) {
|
||||
topTextArea.focus();
|
||||
} else if (freeInputLayout === 'bottom' && bottomInput) {
|
||||
bottomInput.focus();
|
||||
}
|
||||
}, 50);
|
||||
return () => clearTimeout(timer);
|
||||
}, [isOpen, selectedTemplate, freeInputLayout]);
|
||||
|
||||
// 当存在默认选中模板时，将其滚动到顶部（以外层 top-section 为滚动容器）
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
if (!selectedTemplate) return;
|
||||
const container = topSectionRef.current;
|
||||
if (!container) return;
|
||||
// 延迟一帧确保子节点渲染
|
||||
const tid = setTimeout(() => {
|
||||
const targetId = (selectedTemplate as any).id || (selectedTemplate as any).template_id;
|
||||
const el = container.querySelector(`[data-template-id="${targetId}"]`) as HTMLElement | null;
|
||||
if (el) {
|
||||
// 计算相对容器的 offsetTop
|
||||
const containerTop = container.getBoundingClientRect().top;
|
||||
const elTop = el.getBoundingClientRect().top;
|
||||
const offset = elTop - containerTop + container.scrollTop;
|
||||
const adjust = 16; // 向下偏移一些，让目标项不贴顶
|
||||
const targetTop = Math.max(0, offset - adjust);
|
||||
container.scrollTo({ top: targetTop, behavior: 'smooth' });
|
||||
}
|
||||
}, 0);
|
||||
return () => clearTimeout(tid);
|
||||
}, [isOpen, selectedTemplate]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
const target = event.target as Element;
|
||||
@ -108,7 +164,7 @@ export const H5TemplateDrawer = ({
|
||||
const handleConfirm = async () => {
|
||||
if (!selectedTemplate || isTemplateCreating) return;
|
||||
setIsTemplateCreating(true);
|
||||
let timer: NodeJS.Timeout | null = null;
|
||||
let timer: ReturnType<typeof setInterval> | null = null;
|
||||
try {
|
||||
const User = JSON.parse(localStorage.getItem("currentUser") || "{}");
|
||||
if (!User.id) return;
|
||||
@ -155,6 +211,7 @@ export const H5TemplateDrawer = ({
|
||||
<button
|
||||
key={template.id}
|
||||
data-alt={`template-row-${index}`}
|
||||
data-template-id={(template as any).id || (template as any).template_id}
|
||||
onClick={() => {
|
||||
if (!isBottomExpanded) setIsBottomExpanded(true);
|
||||
setSelectedTemplate(template);
|
||||
@ -287,7 +344,7 @@ export const H5TemplateDrawer = ({
|
||||
if (!isLt5M) return false;
|
||||
return true;
|
||||
}}
|
||||
customRequest={async ({ file, onSuccess, onError }) => {
|
||||
customRequest={async ({ file, onSuccess, onError }: RcCustomRequestOptions) => {
|
||||
try {
|
||||
const fileObj = file as File;
|
||||
const uploadedUrl = await uploadFile(fileObj, () => {});
|
||||
@ -414,7 +471,7 @@ export const H5TemplateDrawer = ({
|
||||
if (!isLt5M) return false;
|
||||
return true;
|
||||
}}
|
||||
customRequest={async ({ file, onSuccess, onError }) => {
|
||||
customRequest={async ({ file, onSuccess, onError }: RcCustomRequestOptions) => {
|
||||
try {
|
||||
const fileObj = file as File;
|
||||
const uploadedUrl = await uploadFile(fileObj, () => {});
|
||||
@ -516,6 +573,7 @@ export const H5TemplateDrawer = ({
|
||||
input Configuration
|
||||
</h3>
|
||||
<textarea
|
||||
data-alt="h5-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"
|
||||
@ -540,6 +598,7 @@ export const H5TemplateDrawer = ({
|
||||
<div data-alt="free-input" className="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
data-alt="h5-template-free-input-bottom"
|
||||
value={selectedTemplate.freeInput[0].free_input_text || ""}
|
||||
placeholder={selectedTemplate.freeInput[0].user_tips}
|
||||
className="w-full px-3 py-2 pr-12 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"
|
||||
@ -559,7 +618,7 @@ export const H5TemplateDrawer = ({
|
||||
{/* 横/竖屏选择 */}
|
||||
<AspectRatioSelector
|
||||
value={aspectUI}
|
||||
onChange={setAspectUI}
|
||||
onChange={(v: AspectRatioValue) => setAspectUI(v)}
|
||||
placement="top"
|
||||
/>
|
||||
<ActionButton
|
||||
@ -604,7 +663,7 @@ export const H5TemplateDrawer = ({
|
||||
</div>
|
||||
|
||||
<div data-alt="drawer-body" className="flex-1 overflow-y-auto">
|
||||
<div data-alt="top-section" className="h-full overflow-y-auto">
|
||||
<div data-alt="top-section" className="h-full overflow-y-auto" ref={topSectionRef}>
|
||||
{renderTopTemplateList()}
|
||||
</div>
|
||||
<motion.div
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import {
|
||||
Clapperboard,
|
||||
Sparkles,
|
||||
@ -13,6 +13,7 @@ import {
|
||||
Image,
|
||||
Dropdown,
|
||||
} from "antd";
|
||||
import type { UploadRequestOption as RcCustomRequestOptions } from 'rc-upload/lib/interface';
|
||||
import { UploadOutlined } from "@ant-design/icons";
|
||||
import { StoryTemplateEntity } from "@/app/service/domain/Entities";
|
||||
import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService";
|
||||
@ -30,7 +31,7 @@ import { AspectRatioSelector, AspectRatioValue } from "./AspectRatioSelector";
|
||||
* @returns {Function} - 防抖后的函数
|
||||
*/
|
||||
const debounce = (func: Function, wait: number) => {
|
||||
let timeout: NodeJS.Timeout;
|
||||
let timeout: ReturnType<typeof setTimeout>;
|
||||
return function executedFunction(...args: any[]) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
@ -50,6 +51,8 @@ interface PcTemplateModalProps {
|
||||
setIsItemGenerating: (value: { [key: string]: boolean } | ((prev: { [key: string]: boolean }) => { [key: string]: boolean })) => void;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
/** 指定初始选中的模板ID，用于从外部快速定位 */
|
||||
initialTemplateId?: string;
|
||||
configOptions: {
|
||||
mode: "auto" | "manual";
|
||||
resolution: "720p" | "1080p" | "4k";
|
||||
@ -70,6 +73,7 @@ export const PcTemplateModal = ({
|
||||
setIsItemGenerating,
|
||||
isOpen,
|
||||
onClose,
|
||||
initialTemplateId,
|
||||
configOptions = {
|
||||
mode: "auto" as "auto" | "manual",
|
||||
resolution: "720p" as "720p" | "1080p" | "4k",
|
||||
@ -105,7 +109,7 @@ export const PcTemplateModal = ({
|
||||
const [freeInputLayout, setFreeInputLayout] = useState('bottom');
|
||||
const router = useRouter();
|
||||
const [aspectUI, setAspectUI] = useState<AspectRatioValue>("VIDEO_ASPECT_RATIO_LANDSCAPE");
|
||||
|
||||
const leftListRef = useRef<HTMLDivElement | null>(null);
|
||||
// 组件挂载时获取模板列表
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
@ -113,6 +117,17 @@ export const PcTemplateModal = ({
|
||||
}
|
||||
}, [isOpen, getTemplateStoryList]);
|
||||
|
||||
// 当列表加载后，根据 initialTemplateId 自动选中
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
if (!initialTemplateId) return;
|
||||
if (!templateStoryList || templateStoryList.length === 0) return;
|
||||
const target = templateStoryList.find(t => t.id === initialTemplateId || t.template_id === initialTemplateId);
|
||||
if (target) {
|
||||
setSelectedTemplate(target);
|
||||
}
|
||||
}, [isOpen, initialTemplateId, templateStoryList, setSelectedTemplate]);
|
||||
|
||||
// 自由输入框布局
|
||||
useEffect(() => {
|
||||
if (selectedTemplate?.storyRole && selectedTemplate.storyRole.length > 0 ||
|
||||
@ -124,6 +139,36 @@ export const PcTemplateModal = ({
|
||||
}
|
||||
}, [selectedTemplate])
|
||||
|
||||
// 自动聚焦可编辑输入框
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
if (!selectedTemplate) return;
|
||||
// 略微延迟确保 DOM 更新
|
||||
const timer = setTimeout(() => {
|
||||
const topTextArea = document.querySelector('textarea[data-alt="pc-template-free-input-top"]') as HTMLTextAreaElement | null;
|
||||
const bottomInput = document.querySelector('input[data-alt="pc-template-free-input-bottom"]') as HTMLInputElement | null;
|
||||
if (freeInputLayout === 'top' && topTextArea) {
|
||||
topTextArea.focus();
|
||||
} else if (freeInputLayout === 'bottom' && bottomInput) {
|
||||
bottomInput.focus();
|
||||
}
|
||||
}, 50);
|
||||
return () => clearTimeout(timer);
|
||||
}, [isOpen, selectedTemplate, freeInputLayout]);
|
||||
|
||||
// 当存在默认选中模板时，将其滚动到顶部
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
if (!selectedTemplate) return;
|
||||
const container = leftListRef.current;
|
||||
if (!container) return;
|
||||
const targetId = (selectedTemplate as any).id || (selectedTemplate as any).template_id;
|
||||
const el = container.querySelector(`[data-template-id="${targetId}"]`) as HTMLElement | null;
|
||||
if (el) {
|
||||
container.scrollTo({ top: el.offsetTop - 90, behavior: 'smooth' });
|
||||
}
|
||||
}, [isOpen, selectedTemplate]);
|
||||
|
||||
// 监听点击外部区域关闭输入框
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
@ -155,7 +200,7 @@ export const PcTemplateModal = ({
|
||||
if (isTemplateCreating) return;
|
||||
|
||||
setIsTemplateCreating(true);
|
||||
let timer: NodeJS.Timeout | null = null;
|
||||
let timer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
try {
|
||||
// 获取当前用户信息
|
||||
@ -167,8 +212,8 @@ export const PcTemplateModal = ({
|
||||
}
|
||||
|
||||
// 启动进度条动画
|
||||
timer = setInterval(() => {
|
||||
setLocalLoading((prev) => {
|
||||
timer = setInterval((): void => {
|
||||
setLocalLoading((prev: number) => {
|
||||
if (prev >= 95) {
|
||||
return 95;
|
||||
}
|
||||
@ -210,12 +255,13 @@ export const PcTemplateModal = ({
|
||||
// 模板列表渲染
|
||||
const templateListRender = () => {
|
||||
return (
|
||||
<div className="w-1/3 p-4 border-r border-white/[0.1] overflow-y-auto">
|
||||
<div className="w-1/3 p-4 border-r border-white/[0.1] overflow-y-auto" ref={leftListRef}>
|
||||
<div className="space-y-4 overflow-y-auto template-list-scroll">
|
||||
{templateStoryList.map((template, index) => (
|
||||
<div
|
||||
key={template.id}
|
||||
data-alt={`template-card-${index}`}
|
||||
data-template-id={(template as any).id || (template as any).template_id}
|
||||
className="flex justify-center"
|
||||
onClick={() => handleTemplateSelect(template)}
|
||||
>
|
||||
@ -429,12 +475,12 @@ export const PcTemplateModal = ({
|
||||
file,
|
||||
onSuccess,
|
||||
onError,
|
||||
}) => {
|
||||
}: RcCustomRequestOptions) => {
|
||||
try {
|
||||
const fileObj = file as File;
|
||||
const uploadedUrl = await uploadFile(
|
||||
fileObj,
|
||||
(progress) => {
|
||||
(progress: number) => {
|
||||
console.log(`上传进度: ${progress}%`);
|
||||
}
|
||||
);
|
||||
@ -620,12 +666,12 @@ export const PcTemplateModal = ({
|
||||
file,
|
||||
onSuccess,
|
||||
onError,
|
||||
}) => {
|
||||
}: RcCustomRequestOptions) => {
|
||||
try {
|
||||
const fileObj = file as File;
|
||||
const uploadedUrl = await uploadFile(
|
||||
fileObj,
|
||||
(progress) => {
|
||||
(progress: number) => {
|
||||
console.log(`上传进度: ${progress}%`);
|
||||
}
|
||||
);
|
||||
@ -666,6 +712,7 @@ export const PcTemplateModal = ({
|
||||
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"
|
||||
@ -690,6 +737,7 @@ export const PcTemplateModal = ({
|
||||
<div className="py-2 flex-1">
|
||||
<input
|
||||
type="text"
|
||||
data-alt="pc-template-free-input-bottom"
|
||||
value={selectedTemplate?.freeInput[0].free_input_text || ""}
|
||||
placeholder={selectedTemplate?.freeInput[0].user_tips}
|
||||
className="w-full 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"
|
||||
|
||||
@ -191,7 +191,7 @@ export default function CreateToVideo2() {
|
||||
const renderProjectCard = (project: any) => {
|
||||
|
||||
return (
|
||||
<LazyLoad once>
|
||||
<LazyLoad key={project.project_id} once>
|
||||
<div
|
||||
key={project.project_id}
|
||||
className="group flex flex-col bg-black/20 rounded-lg overflow-hidden cursor-pointer hover:bg-white/5 transition-all duration-300"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user