From 80473bcc063488132e4b4d33229ffff83b843dd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?=
 <7854742+wang_rumeng@user.noreply.gitee.com>
Date: Sat, 18 Oct 2025 16:20:01 +0800
Subject: [PATCH] =?UTF-8?q?overlay=E5=B1=9E=E6=80=A7=E5=BC=83=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-video/CreateInput/ConfigPanel.tsx  | 52 +++++++-------
 .../CreateInput/MobileConfigModal.tsx         | 72 ++++++++++---------
 .../CreateInput/PortraitAnimeSelector.tsx     | 28 ++++----
 .../CreateInput/VideoCreationForm.tsx         | 50 +++++++------
 4 files changed, 103 insertions(+), 99 deletions(-)

diff --git a/components/pages/create-video/CreateInput/ConfigPanel.tsx b/components/pages/create-video/CreateInput/ConfigPanel.tsx
index a7d730d..0f8ceec 100644
--- a/components/pages/create-video/CreateInput/ConfigPanel.tsx
+++ b/components/pages/create-video/CreateInput/ConfigPanel.tsx
@@ -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) => ({
-                key: option.value,
-                label: <span className="text-gray-300">{option.label}</span>,
-            }))}
-        />
-    );
+    /** 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) => ({
-                key: option.value,
-                label: <span className="text-gray-300">{option.label}</span>,
-            }))}
-        />
-    );
+    /** 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"
diff --git a/components/pages/create-video/CreateInput/MobileConfigModal.tsx b/components/pages/create-video/CreateInput/MobileConfigModal.tsx
index e2a42d6..c6c5090 100644
--- a/components/pages/create-video/CreateInput/MobileConfigModal.tsx
+++ b/components/pages/create-video/CreateInput/MobileConfigModal.tsx
@@ -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) => ({
-                key: option.value,
-                label: (
-                    <span className={`text-sm ${configOptions.language === option.value ? 'text-cyan-400' : 'text-gray-300'}`}>
-                        {option.label}
-                    </span>
-                ),
-            }))}
-        />
-    );
+    /** 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) => ({
-                key: option.pcode,
-                label: (
-                    <span className={`text-sm ${configOptions.pcode === option.pcode ? 'text-cyan-400' : 'text-gray-300'}`}>
-                        {option.name}
-                    </span>
-                ),
-            }))}
-        />
-    );
+    /** 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={() => {
diff --git a/components/pages/create-video/CreateInput/PortraitAnimeSelector.tsx b/components/pages/create-video/CreateInput/PortraitAnimeSelector.tsx
index f642e65..6cbb08b 100644
--- a/components/pages/create-video/CreateInput/PortraitAnimeSelector.tsx
+++ b/components/pages/create-video/CreateInput/PortraitAnimeSelector.tsx
@@ -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) => ({
-                key: opt.pcode,
-                label: <span className="text-gray-300 text-sm">{opt.name}</span>,
-            }))}
-        />
-    );
+    /** 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"
diff --git a/components/pages/create-video/CreateInput/VideoCreationForm.tsx b/components/pages/create-video/CreateInput/VideoCreationForm.tsx
index da1b0bd..6404285 100644
--- a/components/pages/create-video/CreateInput/VideoCreationForm.tsx
+++ b/components/pages/create-video/CreateInput/VideoCreationForm.tsx
@@ -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