forked from 77media/video-flow
新增 chatinputbox增加pcode配置
This commit is contained in:
moux1024
parent
c76c259ba8
commit
54b887f205
@ -50,6 +50,7 @@ import { H5TemplateDrawer } from "./H5TemplateDrawer";
|
||||
import { PcPhotoStoryModal } from "./PcPhotoStoryModal";
|
||||
import { H5PhotoStoryDrawer } from "./H5PhotoStoryDrawer";
|
||||
import { AspectRatioSelector, AspectRatioValue } from "./AspectRatioSelector";
|
||||
import { PortraitAnimeSelector, PortraitAnimeValue } from "./PortraitAnimeSelector";
|
||||
import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService";
|
||||
import { getClientUserData } from "@/api/common";
|
||||
|
||||
@ -151,7 +152,6 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
// 共享状态 - 需要在不同渲染函数间共享
|
||||
const [script, setScript] = useState(""); // 用户输入的脚本内容
|
||||
const router = useRouter();
|
||||
|
||||
const [loadingIdea, setLoadingIdea] = useState(false); // 获取创意建议时的加载状态
|
||||
// 各种操作的加载状态
|
||||
const [isCreating, setIsCreating] = useState(false); // 主视频创建按钮的加载状态
|
||||
@ -167,6 +167,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
language: string;
|
||||
videoDuration: string;
|
||||
expansion_mode: boolean;
|
||||
pcode: PortraitAnimeValue;
|
||||
aspect_ratio: AspectRatioValue;
|
||||
};
|
||||
|
||||
@ -176,6 +177,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
language: "english",
|
||||
videoDuration: "unlimited",
|
||||
expansion_mode: true,
|
||||
pcode: "portrait",
|
||||
aspect_ratio: isMobile ? "VIDEO_ASPECT_RATIO_PORTRAIT" : "VIDEO_ASPECT_RATIO_LANDSCAPE",
|
||||
});
|
||||
|
||||
@ -187,6 +189,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
const parsed = JSON.parse(savedConfig);
|
||||
setConfigOptions({
|
||||
mode: parsed.mode || "auto",
|
||||
pcode: parsed.pcode || "portrait",
|
||||
resolution: parsed.resolution || "720p",
|
||||
language: parsed.language || "english",
|
||||
videoDuration: parsed.videoDuration || "unlimited",
|
||||
@ -273,6 +276,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
user_id: String(User.id),
|
||||
user_data: getClientUserData(),
|
||||
script: script,
|
||||
pcode: configOptions.pcode,
|
||||
mode: configOptions.mode,
|
||||
resolution: configOptions.resolution,
|
||||
language: configOptions.language,
|
||||
@ -423,7 +427,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
</div>
|
||||
|
||||
{/* 第二行：功能按钮和Action按钮 - 同一行 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div data-alt="chat-input-box-buttons" className="flex items-center justify-between">
|
||||
{/* 左侧功能按钮区域 */}
|
||||
<div className="flex items-center gap-1 flex-wrap sm:flex-nowrap">
|
||||
{/* 获取创意按钮
|
||||
@ -605,6 +609,15 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
placement="top"
|
||||
className={`${isMobile ? '!px-1' : ''}`}
|
||||
/>
|
||||
{/* 分隔线（移动端隐藏，避免拥挤） */}
|
||||
<div className="hidden sm:block w-px h-4 bg-white/[0.20]"></div>
|
||||
|
||||
<PortraitAnimeSelector
|
||||
value={configOptions.pcode}
|
||||
onChange={(v) => onConfigChange('pcode', v)}
|
||||
placement="top"
|
||||
className={`${isMobile ? '!px-1' : ''}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 右侧Action按钮 */}
|
||||
|
||||
142
components/ChatInputBox/PortraitAnimeSelector.tsx
Normal file
142
components/ChatInputBox/PortraitAnimeSelector.tsx
Normal file
@ -0,0 +1,142 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { Dropdown } from 'antd';
|
||||
import { ChevronUp } from 'lucide-react';
|
||||
import { fetchSettingByCode } from '@/api/serversetting';
|
||||
|
||||
export type PortraitAnimeValue = 'portrait' | string;
|
||||
|
||||
type DropdownPlacement =
|
||||
| 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
|
||||
|
||||
export interface PortraitAnimeSelectorProps {
|
||||
value: PortraitAnimeValue;
|
||||
onChange: (value: PortraitAnimeValue) => void;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
placement?: DropdownPlacement;
|
||||
}
|
||||
|
||||
/**
|
||||
* Portrait/Anime selector with a split button and dropdown for Anime subtype.
|
||||
* @param {PortraitAnimeValue} value - Current value: 'portrait' | '2d' | '3d'.
|
||||
* @param {(value: PortraitAnimeValue) => void} onChange - Change handler.
|
||||
* @param {string} [className] - Optional wrapper class.
|
||||
* @param {boolean} [disabled] - Disable interaction when true.
|
||||
* @param {DropdownPlacement} [placement] - Dropdown placement.
|
||||
* @returns {JSX.Element} - Selector component.
|
||||
*/
|
||||
export function PortraitAnimeSelector({
|
||||
value,
|
||||
onChange,
|
||||
className,
|
||||
disabled = false,
|
||||
placement = 'top',
|
||||
}: PortraitAnimeSelectorProps) {
|
||||
const [lastAnimeChoice, setLastAnimeChoice] = useState<string>('STANDARD_V1_734684_116483');
|
||||
const [animeOptions, setAnimeOptions] = useState<Array<{ name: string; pcode: string }>>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (value && value !== 'portrait') {
|
||||
setLastAnimeChoice(value);
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
useEffect(() => {
|
||||
let mounted = true;
|
||||
(async () => {
|
||||
const list = await fetchSettingByCode<Array<{ name: string; pcode: string }>>('comic_config', []);
|
||||
if (!mounted) return;
|
||||
if (Array.isArray(list) && list.length > 0) {
|
||||
setAnimeOptions(list);
|
||||
// initialize last choice to first entry if current is still default
|
||||
setLastAnimeChoice((prev) => (prev === 'STANDARD_V1_734684_116483' ? list[0].pcode : prev));
|
||||
} else {
|
||||
setAnimeOptions([
|
||||
{ name: 'Korean Comics Long', pcode: 'STANDARD_V1_734684_116483' },
|
||||
]);
|
||||
}
|
||||
})();
|
||||
return () => { mounted = false; };
|
||||
}, []);
|
||||
|
||||
const isPortrait = value === 'portrait';
|
||||
const currentAnime = useMemo(() => (value && value !== 'portrait' ? value : lastAnimeChoice), [value, lastAnimeChoice]);
|
||||
const pcodeToName = useMemo(() => {
|
||||
const map: Record<string, string> = {};
|
||||
animeOptions.forEach((o) => { map[o.pcode] = o.name; });
|
||||
return map;
|
||||
}, [animeOptions]);
|
||||
|
||||
const animeMenuItems = (animeOptions.length > 0 ? animeOptions : []).map((opt) => ({
|
||||
key: opt.pcode,
|
||||
label: (
|
||||
<div data-alt="anime-menu-item" className="flex items-center px-2 py-2 text-xs text-white">
|
||||
{opt.name}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<div
|
||||
data-alt="portrait-anime-selector"
|
||||
className={`inline-flex items-center gap-2 p-1 rounded-md bg-white/[0.24] ${className || ''}`}
|
||||
>
|
||||
{/* Portrait button */}
|
||||
<button
|
||||
data-alt="portrait-button"
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => onChange('portrait')}
|
||||
className={`flex items-center ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} ${
|
||||
isPortrait ? 'bg-white/60 text-black' : 'text-white/80'
|
||||
} px-1 py-0.5 rounded-md transition-all duration-200`}
|
||||
>
|
||||
<span className="text-xs">Portrait</span>
|
||||
</button>
|
||||
|
||||
{/* Anime split button */}
|
||||
<Dropdown
|
||||
overlayClassName="anime-dropdown"
|
||||
menu={{
|
||||
items: animeMenuItems,
|
||||
onClick: ({ key }) => onChange(key as PortraitAnimeValue),
|
||||
selectable: true,
|
||||
selectedKeys: isPortrait ? [] : [String(currentAnime)],
|
||||
}}
|
||||
trigger={["hover", "click"]}
|
||||
placement={placement}
|
||||
disabled={disabled}
|
||||
>
|
||||
<div data-alt="anime-split-group" className="flex items-center">
|
||||
<button
|
||||
data-alt="anime-main-button"
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => onChange(currentAnime)}
|
||||
className={`flex items-center gap-1 ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} ${
|
||||
!isPortrait ? 'bg-white/60 text-black' : 'text-white/80'
|
||||
} px-1 py-0.5 rounded-l-md rounded-r-none transition-all duration-200`}
|
||||
>
|
||||
<span data-alt="anime-main-button-text" className="text-xs max-w-[100px] truncate">{!isPortrait ? `Anime:${pcodeToName[currentAnime] || String(currentAnime).toUpperCase()}` : 'Anime'}</span>
|
||||
</button>
|
||||
<button
|
||||
data-alt="anime-dropdown-trigger"
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
className={`flex items-center gap-1 ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} ${
|
||||
!isPortrait ? 'bg-white/60 text-white' : 'text-white/80'
|
||||
} pr-1 py-1 rounded-r-md rounded-l-none transition-all duration-200`}
|
||||
>
|
||||
<ChevronUp className={`w-3 h-3 ${isPortrait ? 'text-white/60' : 'text-black'}`} />
|
||||
</button>
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PortraitAnimeSelector;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user