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

overlay属性弃用

Browse Source
This commit is contained in:
北枳 2025-10-18 16:20:01 +08:00
parent 066345d568
commit 80473bcc06
4 changed files with 103 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
components/pages/create-video/CreateInput/ConfigPanel.tsx
View File

@ -6,7 +6,7 @@ import {
DownOutlined DownOutlined
} from '@ant-design/icons'; } from '@ant-design/icons';
import { WandSparkles, RectangleHorizontal, RectangleVertical } from 'lucide-react'; import { WandSparkles, RectangleHorizontal, RectangleVertical } from 'lucide-react';
import { Dropdown, Menu, Tooltip } from 'antd'; import { Dropdown, Tooltip } from 'antd';
import { LanguageOptions, VideoDurationOptions } from './config-options'; import { LanguageOptions, VideoDurationOptions } from './config-options';
import type { ConfigOptions, LanguageValue, VideoDurationValue } from './config-options'; import type { ConfigOptions, LanguageValue, VideoDurationValue } from './config-options';
import { PortraitAnimeSelector } from './PortraitAnimeSelector'; import { PortraitAnimeSelector } from './PortraitAnimeSelector';
@ -37,29 +37,17 @@ export const ConfigPanel = ({
isMobile = false, isMobile = false,
isDesktop = true, isDesktop = true,
}: ConfigPanelProps) => { }: ConfigPanelProps) => {
/** Language dropdown menu */ /** Language dropdown menu items */
const languageMenu = ( const languageMenuItems = LanguageOptions.map((option) => ({
<Menu key: option.value,
className="bg-[#1a1a1a] border border-white/10" label: <span className="text-gray-300">{option.label}</span>,
onClick={({ key }) => onConfigChange('language', key as LanguageValue)} }));
items={LanguageOptions.map((option) => ({
key: option.value,
label: <span className="text-gray-300">{option.label}</span>,
}))}
/>
);
/** Duration dropdown menu */ /** Duration dropdown menu items */
const durationMenu = ( const durationMenuItems = VideoDurationOptions.map((option) => ({
<Menu key: option.value,
className="bg-[#1a1a1a] border border-white/10" label: <span className="text-gray-300">{option.label}</span>,
onClick={({ key }) => onConfigChange('videoDuration', key as VideoDurationValue)} }));
items={VideoDurationOptions.map((option) => ({
key: option.value,
label: <span className="text-gray-300">{option.label}</span>,
}))}
/>
);
const currentLanguage = LanguageOptions.find((option) => option.value === configOptions.language); const currentLanguage = LanguageOptions.find((option) => option.value === configOptions.language);
const currentDuration = configOptions.videoDuration === 'unlimited' ? 'auto' : configOptions.videoDuration; const currentDuration = configOptions.videoDuration === 'unlimited' ? 'auto' : configOptions.videoDuration;
@ -67,7 +55,14 @@ export const ConfigPanel = ({
return ( return (
<div data-alt="config-panel" className="flex items-center gap-2"> <div data-alt="config-panel" className="flex items-center gap-2">
{/* Language selector */} {/* Language selector */}
<Dropdown overlay={languageMenu} trigger={['click']}> <Dropdown
menu={{
items: languageMenuItems,
onClick: ({ key }) => onConfigChange('language', key as LanguageValue),
className: 'bg-[#1a1a1a] border border-white/10'
}}
trigger={['click']}
>
<button <button
data-alt="config-language" data-alt="config-language"
className="h-8 px-2 rounded-full border border-white/20 bg-transparent text-gray-300 hover:bg-white/5 hover:border-cyan-400/60 transition-all duration-200 flex items-center gap-2 hover:text-cyan-400" className="h-8 px-2 rounded-full border border-white/20 bg-transparent text-gray-300 hover:bg-white/5 hover:border-cyan-400/60 transition-all duration-200 flex items-center gap-2 hover:text-cyan-400"
@ -102,7 +97,14 @@ export const ConfigPanel = ({
</Tooltip> </Tooltip>
{/* Duration selector */} {/* Duration selector */}
<Dropdown overlay={durationMenu} trigger={['click']}> <Dropdown
menu={{
items: durationMenuItems,
onClick: ({ key }) => onConfigChange('videoDuration', key as VideoDurationValue),
className: 'bg-[#1a1a1a] border border-white/10'
}}
trigger={['click']}
>
<button <button
data-alt="config-video-duration" data-alt="config-video-duration"
className="h-8 px-2 rounded-full border border-white/20 bg-transparent hover:bg-white/5 hover:border-cyan-400/60 transition-all duration-200 flex items-center gap-2 text-gray-300 hover:text-cyan-400" className="h-8 px-2 rounded-full border border-white/20 bg-transparent hover:bg-white/5 hover:border-cyan-400/60 transition-all duration-200 flex items-center gap-2 text-gray-300 hover:text-cyan-400"

72
components/pages/create-video/CreateInput/MobileConfigModal.tsx
View File

@ -7,7 +7,7 @@ import {
DownOutlined DownOutlined
} from '@ant-design/icons'; } from '@ant-design/icons';
import { WandSparkles, RectangleHorizontal, RectangleVertical, Palette } from 'lucide-react'; import { WandSparkles, RectangleHorizontal, RectangleVertical, Palette } from 'lucide-react';
import { Modal, Dropdown, Menu } from 'antd'; import { Modal, Dropdown } from 'antd';
import { LanguageOptions, VideoDurationOptions } from './config-options'; import { LanguageOptions, VideoDurationOptions } from './config-options';
import type { ConfigOptions, LanguageValue, VideoDurationValue } from './config-options'; import type { ConfigOptions, LanguageValue, VideoDurationValue } from './config-options';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@ -60,37 +60,25 @@ export function MobileConfigModal({
const isPortrait = configOptions.pcode === 'portrait'; const isPortrait = configOptions.pcode === 'portrait';
const currentLanguage = LanguageOptions.find(opt => opt.value === configOptions.language); const currentLanguage = LanguageOptions.find(opt => opt.value === configOptions.language);
/** Language dropdown menu */ /** Language dropdown menu items */
const languageMenu = ( const languageMenuItems = LanguageOptions.map((option) => ({
<Menu key: option.value,
className="bg-[#1a1a1a] border border-white/10 max-h-[300px] overflow-y-auto" label: (
onClick={({ key }) => onConfigChange('language', key as LanguageValue)} <span className={`text-sm ${configOptions.language === option.value ? 'text-cyan-400' : 'text-gray-300'}`}>
items={LanguageOptions.map((option) => ({ {option.label}
key: option.value, </span>
label: ( ),
<span className={`text-sm ${configOptions.language === option.value ? 'text-cyan-400' : 'text-gray-300'}`}> }));
{option.label}
</span>
),
}))}
/>
);
/** Anime dropdown menu */ /** Anime dropdown menu items */
const animeMenu = ( const animeMenuItems = animeOptions.map((option) => ({
<Menu key: option.pcode,
className="bg-[#1a1a1a] border border-white/10" label: (
onClick={({ key }) => onConfigChange('pcode', key)} <span className={`text-sm ${configOptions.pcode === option.pcode ? 'text-cyan-400' : 'text-gray-300'}`}>
items={animeOptions.map((option) => ({ {option.name}
key: option.pcode, </span>
label: ( ),
<span className={`text-sm ${configOptions.pcode === option.pcode ? 'text-cyan-400' : 'text-gray-300'}`}> }));
{option.name}
</span>
),
}))}
/>
);
return ( return (
<Modal <Modal
@ -123,12 +111,19 @@ export function MobileConfigModal({
<GlobalOutlined className="text-base text-cyan-400" /> <GlobalOutlined className="text-base text-cyan-400" />
<span className="text-sm text-gray-300">Language</span> <span className="text-sm text-gray-300">Language</span>
</div> </div>
<Dropdown overlay={languageMenu} trigger={['click']}> <Dropdown
menu={{
items: languageMenuItems,
onClick: ({ key }) => onConfigChange('language', key as LanguageValue),
className: 'bg-[#1a1a1a] border border-white/10 max-h-[300px] overflow-y-auto'
}}
trigger={['click']}
>
<button <button
data-alt="language-selector" data-alt="language-selector"
className="h-8 px-3 rounded-lg border border-white/20 bg-transparent hover:border-cyan-400/60 transition-all duration-200 flex items-center gap-2 text-gray-300 hover:text-cyan-400" className="h-8 px-3 rounded-lg border border-white/20 bg-transparent hover:border-cyan-400/60 transition-all duration-200 flex items-center gap-2 text-gray-400 hover:text-cyan-400"
> >
<span className="text-sm">{currentLanguage?.label}</span> <span className="text-xs">{currentLanguage?.label}</span>
<DownOutlined className="text-xs" /> <DownOutlined className="text-xs" />
</button> </button>
</Dropdown> </Dropdown>
@ -239,7 +234,14 @@ export function MobileConfigModal({
> >
Portrait Portrait
</button> </button>
<Dropdown overlay={animeMenu} trigger={['click']}> <Dropdown
menu={{
items: animeMenuItems,
onClick: ({ key }) => onConfigChange('pcode', key),
className: 'bg-[#1a1a1a] border border-white/10'
}}
trigger={['click']}
>
<button <button
data-alt="style-anime" data-alt="style-anime"
onClick={() => { onClick={() => {

28
components/pages/create-video/CreateInput/PortraitAnimeSelector.tsx
View File

@ -1,7 +1,7 @@
"use client"; "use client";
import React, { useEffect, useMemo, useState } from 'react'; import React, { useEffect, useMemo, useState } from 'react';
import { Dropdown, Menu } from 'antd'; import { Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons'; import { DownOutlined } from '@ant-design/icons';
import { fetchSettingByCode } from '@/api/serversetting'; import { fetchSettingByCode } from '@/api/serversetting';
import type { PortraitAnimeValue } from './config-options'; import type { PortraitAnimeValue } from './config-options';
@ -66,17 +66,11 @@ export function PortraitAnimeSelector({
return map; return map;
}, [animeOptions]); }, [animeOptions]);
/** Anime dropdown menu */ /** Anime dropdown menu items */
const animeMenu = ( const animeMenuItems = (animeOptions.length > 0 ? animeOptions : []).map((opt) => ({
<Menu key: opt.pcode,
className="bg-[#1a1a1a] border border-white/10" label: <span className="text-gray-300 text-sm">{opt.name}</span>,
onClick={({ key }) => onChange(key as PortraitAnimeValue)} }));
items={(animeOptions.length > 0 ? animeOptions : []).map((opt) => ({
key: opt.pcode,
label: <span className="text-gray-300 text-sm">{opt.name}</span>,
}))}
/>
);
return ( return (
<div <div
@ -101,7 +95,15 @@ export function PortraitAnimeSelector({
</button> </button>
{/* Anime dropdown button */} {/* Anime dropdown button */}
<Dropdown overlay={animeMenu} trigger={['click']} disabled={disabled}> <Dropdown
menu={{
items: animeMenuItems,
onClick: ({ key }) => onChange(key as PortraitAnimeValue),
className: 'bg-[#1a1a1a] border border-white/10'
}}
trigger={['click']}
disabled={disabled}
>
<button <button
data-alt="anime-button" data-alt="anime-button"
type="button" type="button"

50
components/pages/create-video/CreateInput/VideoCreationForm.tsx
View File

@ -11,7 +11,7 @@ import {
ArrowRightOutlined, ArrowRightOutlined,
SettingOutlined, SettingOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { Dropdown, Menu } from 'antd'; import { Dropdown } from 'antd';
import { ConfigPanel } from './ConfigPanel'; import { ConfigPanel } from './ConfigPanel';
import { MobileConfigModal } from './MobileConfigModal'; import { MobileConfigModal } from './MobileConfigModal';
import { defaultConfig } from './config-options'; import { defaultConfig } from './config-options';
@ -102,31 +102,29 @@ export default function VideoCreationForm() {
<div data-alt="left-controls" className="flex items-center gap-2"> <div data-alt="left-controls" className="flex items-center gap-2">
{/* Upload Button with Dropdown */} {/* Upload Button with Dropdown */}
<Dropdown <Dropdown
overlay={ menu={{
<Menu className="bg-[#1a1a1a] border border-white/10"> items: [
<Menu.Item {
key="character" key: 'character',
icon={<UserOutlined className="text-cyan-400" />} icon: <UserOutlined className="text-cyan-400" />,
onClick={() => characterInputRef.current?.click()} label: <span className="text-gray-300">Character</span>,
> onClick: () => characterInputRef.current?.click(),
<span className="text-gray-300">Character</span> },
</Menu.Item> {
<Menu.Item key: 'scene',
key="scene" icon: <CameraOutlined className="text-cyan-400" />,
icon={<CameraOutlined className="text-cyan-400" />} label: <span className="text-gray-300">Scene</span>,
onClick={() => sceneInputRef.current?.click()} onClick: () => sceneInputRef.current?.click(),
> },
<span className="text-gray-300">Scene</span> {
</Menu.Item> key: 'prop',
<Menu.Item icon: <BulbOutlined className="text-cyan-400" />,
key="prop" label: <span className="text-gray-300">Prop</span>,
icon={<BulbOutlined className="text-cyan-400" />} onClick: () => propInputRef.current?.click(),
onClick={() => propInputRef.current?.click()} },
> ],
<span className="text-gray-300">Prop</span> className: 'bg-[#1a1a1a] border border-white/10'
</Menu.Item> }}
</Menu>
}
trigger={['click']} trigger={['click']}
> >
<button <button