更新 修改16:9选择器样式

components/ChatInputBox/AspectRatioSelector.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import { Dropdown } from "antd";
 import { RectangleHorizontal, RectangleVertical } from "lucide-react";
-import { AspectRatioOptions } from "./types";
 
 export type AspectRatioValue =
   | "VIDEO_ASPECT_RATIO_LANDSCAPE"
@@ -22,13 +20,13 @@ interface AspectRatioSelectorProps {
 }
 
 /**
- * A reusable aspect ratio selector (landscape/portrait) using Antd Dropdown.
+ * Aspect ratio selector using Antd Radio.Group with two options: landscape and portrait.
- * Shows an icon and label, and calls onChange when a new ratio is chosen.
+ * Uses icons as button content and triggers onChange when selection changes.
  * @param {AspectRatioValue} value - current selected value
  * @param {(v: AspectRatioValue) => void} onChange - change handler
- * @param {string} [className] - optional className for trigger button
+ * @param {string} [className] - optional className for wrapper
- * @param {string} [placement] - Dropdown placement, default is top
+ * @param {string} [placement] - kept for backward compatibility (unused)
- * @param {string} [dataAlt] - data-alt attribute for the trigger
+ * @param {string} [dataAlt] - data-alt attribute for the wrapper
  * @returns {JSX.Element}
  */
 export const AspectRatioSelector = ({
@@ -39,45 +37,47 @@ export const AspectRatioSelector = ({
   dataAlt = "config-aspect-ratio",
 }: AspectRatioSelectorProps) => {
   return (
-    <Dropdown
+    <div
-      overlayClassName="aspect-dropdown"
+      data-alt={dataAlt}
-      menu={{
+      role="radiogroup"
-        items: AspectRatioOptions.map((option) => ({
+      aria-label="aspect-ratio"
-          key: option.value,
+      className={`inline-flex p-1 items-center rounded-[8px] bg-white/20 ${className || ""}`}
-          label: (
-            <div
-              className={`flex items-center gap-2 px-2 py-2 ${
-                option.value === value ? "bg-white/[0.12] rounded-md" : ""
-              }`}
-            >
-              {option.value === "VIDEO_ASPECT_RATIO_LANDSCAPE" ? (
-                <RectangleHorizontal className="w-4 h-4" />
-              ) : (
-                <RectangleVertical className="w-4 h-4" />
-              )}
-              <span className="text-sm text-white">{option.label}</span>
-            </div>
-          ),
-        })),
-        onClick: ({ key }) => onChange(key as AspectRatioValue),
-      }}
-      trigger={["click"]}
-      placement={placement}
     >
       <button
-        data-alt={dataAlt}
+        type="button"
-        className={`flex items-center gap-1 text-white/80 transition-all duration-200 px-2 py-2 ${className || ""}`}
+        role="radio"
+        aria-checked={value === "VIDEO_ASPECT_RATIO_LANDSCAPE"}
+        onClick={() => onChange("VIDEO_ASPECT_RATIO_LANDSCAPE")}
+        className="outline-none rounded-[8px]"
       >
-        {value === "VIDEO_ASPECT_RATIO_LANDSCAPE" ? (
+        <div
-          <RectangleHorizontal className={"w-4 h-4"} />
+          className={`flex items-center justify-center px-1 py-0.5 ${
-        ) : (
+            value === "VIDEO_ASPECT_RATIO_LANDSCAPE"
-          <RectangleVertical className={"w-4 h-4"} />
+              ? "bg-white/60 text-black rounded-[4px]"
-        )}
+              : "bg-transparent text-white"
-        <span className="text-sm">
+          }`}
-          {value === "VIDEO_ASPECT_RATIO_LANDSCAPE" ? "16:9" : "9:16"}
+        >
-        </span>
+          <RectangleHorizontal className="w-4 h-4" />
+        </div>
       </button>
-    </Dropdown>
+      <button
+        type="button"
+        role="radio"
+        aria-checked={value === "VIDEO_ASPECT_RATIO_PORTRAIT"}
+        onClick={() => onChange("VIDEO_ASPECT_RATIO_PORTRAIT")}
+        className="outline-none"
+      >
+        <div
+          className={`flex items-center justify-center px-1 py-0.5 ${
+            value === "VIDEO_ASPECT_RATIO_PORTRAIT"
+              ? "bg-white/60 text-black rounded-[4px]"
+              : "bg-transparent text-white"
+          }`}
+        >
+          <RectangleVertical className="w-4 h-4" />
+        </div>
+      </button>
+    </div>
   );
 };
 

components/ChatInputBox/ChatInputBox.tsx

@@ -523,11 +523,12 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
                     placement="top"
                   >
                     <button
-                      data-alt={`config-video-duration`}
+                      data-alt="config-video-duration"
                       className={`flex items-center gap-1 text-white/80 transition-all duration-200 ${isMobile ? 'px-1' : 'px-2'} py-2`}
                     >
                       <Clock className={"w-4 h-4"} />
                       <span className="text-sm">{configOptions.videoDuration === 'unlimited' ? 'auto' : (isMobile ? configOptions.videoDuration.replace('min', 'm') : configOptions.videoDuration)}</span>
+                      <ChevronUp className="w-3 h-3 text-white/60" />
                     </button>
                   </Dropdown>