forked from 77media/video-flow
overlay属性弃用
This commit is contained in:
北枳
parent
066345d568
commit
80473bcc06
@ -6,7 +6,7 @@ import {
|
||||
DownOutlined
|
||||
} from '@ant-design/icons';
|
||||
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 type { ConfigOptions, LanguageValue, VideoDurationValue } from './config-options';
|
||||
import { PortraitAnimeSelector } from './PortraitAnimeSelector';
|
||||
@ -37,29 +37,17 @@ export const ConfigPanel = ({
|
||||
isMobile = false,
|
||||
isDesktop = true,
|
||||
}: ConfigPanelProps) => {
|
||||
/** Language dropdown menu */
|
||||
const languageMenu = (
|
||||
<Menu
|
||||
className="bg-[#1a1a1a] border border-white/10"
|
||||
onClick={({ key }) => onConfigChange('language', key as LanguageValue)}
|
||||
items={LanguageOptions.map((option) => ({
|
||||
/** Language dropdown menu items */
|
||||
const languageMenuItems = LanguageOptions.map((option) => ({
|
||||
key: option.value,
|
||||
label: <span className="text-gray-300">{option.label}</span>,
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
}));
|
||||
|
||||
/** Duration dropdown menu */
|
||||
const durationMenu = (
|
||||
<Menu
|
||||
className="bg-[#1a1a1a] border border-white/10"
|
||||
onClick={({ key }) => onConfigChange('videoDuration', key as VideoDurationValue)}
|
||||
items={VideoDurationOptions.map((option) => ({
|
||||
/** Duration dropdown menu items */
|
||||
const durationMenuItems = 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 currentDuration = configOptions.videoDuration === 'unlimited' ? 'auto' : configOptions.videoDuration;
|
||||
@ -67,7 +55,14 @@ export const ConfigPanel = ({
|
||||
return (
|
||||
<div data-alt="config-panel" className="flex items-center gap-2">
|
||||
{/* 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
|
||||
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"
|
||||
@ -102,7 +97,14 @@ export const ConfigPanel = ({
|
||||
</Tooltip>
|
||||
|
||||
{/* 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
|
||||
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"
|
||||
|
||||
@ -7,7 +7,7 @@ import {
|
||||
DownOutlined
|
||||
} from '@ant-design/icons';
|
||||
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 type { ConfigOptions, LanguageValue, VideoDurationValue } from './config-options';
|
||||
import { useEffect, useState } from 'react';
|
||||
@ -60,37 +60,25 @@ export function MobileConfigModal({
|
||||
const isPortrait = configOptions.pcode === 'portrait';
|
||||
const currentLanguage = LanguageOptions.find(opt => opt.value === configOptions.language);
|
||||
|
||||
/** Language dropdown menu */
|
||||
const languageMenu = (
|
||||
<Menu
|
||||
className="bg-[#1a1a1a] border border-white/10 max-h-[300px] overflow-y-auto"
|
||||
onClick={({ key }) => onConfigChange('language', key as LanguageValue)}
|
||||
items={LanguageOptions.map((option) => ({
|
||||
/** Language dropdown menu items */
|
||||
const languageMenuItems = LanguageOptions.map((option) => ({
|
||||
key: option.value,
|
||||
label: (
|
||||
<span className={`text-sm ${configOptions.language === option.value ? 'text-cyan-400' : 'text-gray-300'}`}>
|
||||
{option.label}
|
||||
</span>
|
||||
),
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
}));
|
||||
|
||||
/** Anime dropdown menu */
|
||||
const animeMenu = (
|
||||
<Menu
|
||||
className="bg-[#1a1a1a] border border-white/10"
|
||||
onClick={({ key }) => onConfigChange('pcode', key)}
|
||||
items={animeOptions.map((option) => ({
|
||||
/** Anime dropdown menu items */
|
||||
const animeMenuItems = animeOptions.map((option) => ({
|
||||
key: option.pcode,
|
||||
label: (
|
||||
<span className={`text-sm ${configOptions.pcode === option.pcode ? 'text-cyan-400' : 'text-gray-300'}`}>
|
||||
{option.name}
|
||||
</span>
|
||||
),
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
}));
|
||||
|
||||
return (
|
||||
<Modal
|
||||
@ -123,12 +111,19 @@ export function MobileConfigModal({
|
||||
<GlobalOutlined className="text-base text-cyan-400" />
|
||||
<span className="text-sm text-gray-300">Language</span>
|
||||
</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
|
||||
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" />
|
||||
</button>
|
||||
</Dropdown>
|
||||
@ -239,7 +234,14 @@ export function MobileConfigModal({
|
||||
>
|
||||
Portrait
|
||||
</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
|
||||
data-alt="style-anime"
|
||||
onClick={() => {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { Dropdown, Menu } from 'antd';
|
||||
import { Dropdown } from 'antd';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import { fetchSettingByCode } from '@/api/serversetting';
|
||||
import type { PortraitAnimeValue } from './config-options';
|
||||
@ -66,17 +66,11 @@ export function PortraitAnimeSelector({
|
||||
return map;
|
||||
}, [animeOptions]);
|
||||
|
||||
/** Anime dropdown menu */
|
||||
const animeMenu = (
|
||||
<Menu
|
||||
className="bg-[#1a1a1a] border border-white/10"
|
||||
onClick={({ key }) => onChange(key as PortraitAnimeValue)}
|
||||
items={(animeOptions.length > 0 ? animeOptions : []).map((opt) => ({
|
||||
/** Anime dropdown menu items */
|
||||
const animeMenuItems = (animeOptions.length > 0 ? animeOptions : []).map((opt) => ({
|
||||
key: opt.pcode,
|
||||
label: <span className="text-gray-300 text-sm">{opt.name}</span>,
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
}));
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -101,7 +95,15 @@ export function PortraitAnimeSelector({
|
||||
</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
|
||||
data-alt="anime-button"
|
||||
type="button"
|
||||
|
||||
@ -11,7 +11,7 @@ import {
|
||||
ArrowRightOutlined,
|
||||
SettingOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Dropdown, Menu } from 'antd';
|
||||
import { Dropdown } from 'antd';
|
||||
import { ConfigPanel } from './ConfigPanel';
|
||||
import { MobileConfigModal } from './MobileConfigModal';
|
||||
import { defaultConfig } from './config-options';
|
||||
@ -102,31 +102,29 @@ export default function VideoCreationForm() {
|
||||
<div data-alt="left-controls" className="flex items-center gap-2">
|
||||
{/* Upload Button with Dropdown */}
|
||||
<Dropdown
|
||||
overlay={
|
||||
<Menu className="bg-[#1a1a1a] border border-white/10">
|
||||
<Menu.Item
|
||||
key="character"
|
||||
icon={<UserOutlined className="text-cyan-400" />}
|
||||
onClick={() => characterInputRef.current?.click()}
|
||||
>
|
||||
<span className="text-gray-300">Character</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
key="scene"
|
||||
icon={<CameraOutlined className="text-cyan-400" />}
|
||||
onClick={() => sceneInputRef.current?.click()}
|
||||
>
|
||||
<span className="text-gray-300">Scene</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
key="prop"
|
||||
icon={<BulbOutlined className="text-cyan-400" />}
|
||||
onClick={() => propInputRef.current?.click()}
|
||||
>
|
||||
<span className="text-gray-300">Prop</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: 'character',
|
||||
icon: <UserOutlined className="text-cyan-400" />,
|
||||
label: <span className="text-gray-300">Character</span>,
|
||||
onClick: () => characterInputRef.current?.click(),
|
||||
},
|
||||
{
|
||||
key: 'scene',
|
||||
icon: <CameraOutlined className="text-cyan-400" />,
|
||||
label: <span className="text-gray-300">Scene</span>,
|
||||
onClick: () => sceneInputRef.current?.click(),
|
||||
},
|
||||
{
|
||||
key: 'prop',
|
||||
icon: <BulbOutlined className="text-cyan-400" />,
|
||||
label: <span className="text-gray-300">Prop</span>,
|
||||
onClick: () => propInputRef.current?.click(),
|
||||
},
|
||||
],
|
||||
className: 'bg-[#1a1a1a] border border-white/10'
|
||||
}}
|
||||
trigger={['click']}
|
||||
>
|
||||
<button
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user