forked from 77media/video-flow
Enhance styling and structure of ChatInputBox and PcTemplateModal components; add custom scrollbar styles and improve layout responsiveness.
This commit is contained in:
北枳
parent
c5ec5d5e7a
commit
c38b6ad483
@ -307,6 +307,39 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-textarea, .mobile-input {
|
.mobile-textarea,
|
||||||
|
.mobile-input {
|
||||||
font-size: 16px !important;
|
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);
|
||||||
}
|
}
|
||||||
@ -570,7 +570,7 @@ export const H5TemplateDrawer = ({
|
|||||||
data-alt="items-section-title"
|
data-alt="items-section-title"
|
||||||
className="text-base font-semibold text-white mb-3"
|
className="text-base font-semibold text-white mb-3"
|
||||||
>
|
>
|
||||||
input Configuration
|
Input Configuration
|
||||||
</h3>
|
</h3>
|
||||||
<textarea
|
<textarea
|
||||||
data-alt="h5-template-free-input-top"
|
data-alt="h5-template-free-input-top"
|
||||||
|
|||||||
@ -284,9 +284,9 @@ export const PcTemplateModal = ({
|
|||||||
// 故事编辑器渲染
|
// 故事编辑器渲染
|
||||||
const storyEditorRender = () => {
|
const storyEditorRender = () => {
|
||||||
return selectedTemplate ? (
|
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">
|
<div className="w-1/4">
|
||||||
<Image
|
<Image
|
||||||
@ -321,415 +321,415 @@ export const PcTemplateModal = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 角色配置区域 */}
|
<div className="flex-1 overflow-y-auto custom-scrollbar">
|
||||||
{selectedTemplate?.storyRole &&
|
{/* 角色配置区域 */}
|
||||||
selectedTemplate.storyRole.length > 0 && (
|
{selectedTemplate?.storyRole &&
|
||||||
<div className="pt-2 border-t border-white/10">
|
selectedTemplate.storyRole.length > 0 && (
|
||||||
<h3
|
<div className="pt-2 border-t border-white/10">
|
||||||
data-alt="roles-section-title"
|
<h3
|
||||||
className="text-lg font-semibold text-white mb-4"
|
data-alt="roles-section-title"
|
||||||
>
|
className="text-lg font-semibold text-white mb-2"
|
||||||
Character Configuration
|
>
|
||||||
</h3>
|
Character Configuration
|
||||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
</h3>
|
||||||
{selectedTemplate.storyRole.map((role, index) => (
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||||
<div
|
{selectedTemplate.storyRole.map((role, index) => (
|
||||||
key={index}
|
<div
|
||||||
data-alt={`role-field-${index}`}
|
key={index}
|
||||||
className="flex flex-col items-center space-y-3"
|
data-alt={`role-field-${index}`}
|
||||||
>
|
className="flex flex-col items-center space-y-3"
|
||||||
{/* 图片容器 */}
|
>
|
||||||
<div className="relative group">
|
{/* 图片容器 */}
|
||||||
<Tooltip
|
<div className="relative group">
|
||||||
title={
|
<Tooltip
|
||||||
<div className="relative">
|
title={
|
||||||
<input
|
<div className="relative">
|
||||||
type="text"
|
<input
|
||||||
value={role.role_description || ""}
|
type="text"
|
||||||
onChange={(e) => {
|
value={role.role_description || ""}
|
||||||
// 更新角色的描述字段
|
onChange={(e) => {
|
||||||
const updatedTemplate = {
|
// 更新角色的描述字段
|
||||||
...selectedTemplate!,
|
const updatedTemplate = {
|
||||||
storyRole: selectedTemplate!.storyRole.map(
|
...selectedTemplate!,
|
||||||
(r) =>
|
storyRole: selectedTemplate!.storyRole.map(
|
||||||
r.role_name === role.role_name
|
(r) =>
|
||||||
? {
|
r.role_name === role.role_name
|
||||||
...r,
|
? {
|
||||||
role_description: e.target.value,
|
...r,
|
||||||
}
|
role_description: e.target.value,
|
||||||
: r
|
}
|
||||||
),
|
: r
|
||||||
};
|
),
|
||||||
setSelectedTemplate(updatedTemplate);
|
};
|
||||||
}}
|
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,
|
|
||||||
}));
|
|
||||||
}}
|
}}
|
||||||
icon={<Sparkles className="w-4 h-4" />}
|
placeholder={role.user_tips}
|
||||||
width="w-8"
|
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"
|
||||||
height="h-8"
|
|
||||||
disabled={isRoleGenerating[role.role_name] || false}
|
|
||||||
/>
|
/>
|
||||||
|
<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>
|
||||||
</div>
|
}
|
||||||
}
|
placement="top"
|
||||||
placement="top"
|
classNames={{
|
||||||
classNames={{
|
root: "max-w-none",
|
||||||
root: "max-w-none",
|
}}
|
||||||
}}
|
open={inputVisible[role.role_name]}
|
||||||
open={inputVisible[role.role_name]}
|
onOpenChange={(visible) =>
|
||||||
onOpenChange={(visible) =>
|
setInputVisible((prev) => ({
|
||||||
setInputVisible((prev) => ({
|
...prev,
|
||||||
...prev,
|
[role.role_name]: visible,
|
||||||
[role.role_name]: visible,
|
}))
|
||||||
}))
|
}
|
||||||
}
|
trigger="contextMenu"
|
||||||
trigger="contextMenu"
|
styles={{ root: { zIndex: 1000 } }}
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
<Image
|
{/* 图片 */}
|
||||||
src={role.photo_url || "/assets/empty_video.png"}
|
<div
|
||||||
alt={role.role_name}
|
data-alt={`role-thumbnail-${index}`}
|
||||||
className="w-full h-full object-cover"
|
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"
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
<Sparkles className="w-3.5 h-3.5" />
|
<Image
|
||||||
</button>
|
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>
|
</Tooltip>
|
||||||
|
|
||||||
{/* 上传按钮 */}
|
{/* 角色名称 - 图片下方 */}
|
||||||
<Upload
|
<div className="text-center mt-2">
|
||||||
name="roleImage"
|
<span className="text-white text-sm font-medium">
|
||||||
showUploadList={false}
|
{role.role_name}
|
||||||
beforeUpload={(file) => {
|
</span>
|
||||||
const isImage = file.type.startsWith("image/");
|
</div>
|
||||||
if (!isImage) {
|
|
||||||
console.error("只能上传图片文件");
|
{/* 按钮组 - 右上角 */}
|
||||||
return false;
|
<div className="absolute -top-8 left-[1.2rem] flex gap-3 opacity-0 group-hover:opacity-100 transition-all duration-200">
|
||||||
}
|
{/* AI生成按钮 */}
|
||||||
const isLt5M = file.size / 1024 / 1024 < 5;
|
<Tooltip title="AI generate image" placement="top">
|
||||||
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
|
<button
|
||||||
data-alt={`role-upload-button-${index}`}
|
data-alt={`role-ai-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"
|
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>
|
</button>
|
||||||
</Tooltip>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 道具配置区域 */}
|
{/* 道具配置区域 */}
|
||||||
{selectedTemplate?.storyItem &&
|
{selectedTemplate?.storyItem &&
|
||||||
selectedTemplate.storyItem.length > 0 && (
|
selectedTemplate.storyItem.length > 0 && (
|
||||||
<div className="pt-2 border-t border-white/10">
|
<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
|
<h3
|
||||||
data-alt="items-section-title"
|
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>
|
</h3>
|
||||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
<textarea
|
||||||
{selectedTemplate.storyItem.map((item, index) => (
|
data-alt="pc-template-free-input-top"
|
||||||
<div
|
value={selectedTemplate?.freeInput[0].free_input_text || ""}
|
||||||
key={index}
|
placeholder={selectedTemplate?.freeInput[0].user_tips || ""}
|
||||||
data-alt={`item-field-${index}`}
|
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"
|
||||||
className="flex flex-col items-center space-y-3"
|
onChange={(e) => {
|
||||||
>
|
// 更新自由输入文字字段
|
||||||
{/* 图片容器 */}
|
const updatedTemplate = {
|
||||||
<div className="relative group">
|
...selectedTemplate!,
|
||||||
<Tooltip
|
freeInput: selectedTemplate!.freeInput.map((item) => ({
|
||||||
title={
|
...item,
|
||||||
<div className="relative">
|
free_input_text: e.target.value
|
||||||
<input
|
})),
|
||||||
type="text"
|
};
|
||||||
value={item.item_description || ""}
|
setSelectedTemplate(updatedTemplate as StoryTemplateEntity);
|
||||||
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>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
</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 className=" absolute -bottom-8 right-0 w-full flex items-center justify-end gap-2">
|
<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">
|
<div className="flex gap-4 pb-8 flex-1 overflow-y-hidden">
|
||||||
{templateListRender()}
|
{templateListRender()}
|
||||||
<div className="flex-1">{storyEditorRender()}</div>
|
<div className="flex-1 relative">{storyEditorRender()}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</GlobalLoad>
|
</GlobalLoad>
|
||||||
|
|||||||
@ -177,13 +177,13 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
|
|||||||
{addThemeTag.map((item, index) => (
|
{addThemeTag.map((item, index) => (
|
||||||
<div key={index} className={`flex items-center gap-1 px-2 rounded-full ${Object.values(ThemeTagBgColor)[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>
|
<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))
|
handleThemeTagChange(addThemeTag.filter(v => v !== item))
|
||||||
} />
|
} /> */}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
{/* 主题标签更改 */}
|
{/* 主题标签更改 */}
|
||||||
<div className='flex items-center gap-1'>
|
{/* <div className='flex items-center gap-1'>
|
||||||
<div className='w-[10rem]'>
|
<div className='w-[10rem]'>
|
||||||
<SelectDropdown
|
<SelectDropdown
|
||||||
dropdownId="theme-type"
|
dropdownId="theme-type"
|
||||||
@ -197,7 +197,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
default:
|
default:
|
||||||
@ -212,7 +212,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
|
|||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
exit={{ opacity: 0, y: -10 }}
|
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"
|
className="w-6 h-6 p-1 cursor-pointer text-gray-600 hover:text-blue-500 transition-colors"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
// 提示权限不够
|
// 提示权限不够
|
||||||
@ -220,7 +220,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
|
|||||||
return;
|
return;
|
||||||
handleEditBlock(block);
|
handleEditBlock(block);
|
||||||
}}
|
}}
|
||||||
/>
|
/> */}
|
||||||
<Copy
|
<Copy
|
||||||
className="w-6 h-6 p-1 cursor-pointer text-gray-600 hover:text-blue-500 transition-colors"
|
className="w-6 h-6 p-1 cursor-pointer text-gray-600 hover:text-blue-500 transition-colors"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user