From b5f6fd38424c60b4e6183ffb73aa60466171e953 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Fri, 20 Feb 2026 20:05:32 +0800
Subject: [PATCH] style(ui): simplify media toolbars and hide volcano video
 master model

---
 components/canvas/CanvasChatPanel.tsx |  4 +-
 components/image-params-bar.tsx       |  4 +-
 components/multimodal-input.tsx       |  8 +++-
 components/video-params-bar.tsx       | 59 +++++++++++++++++++--------
 4 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index a1c32187a..614ae6934 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -1356,7 +1356,9 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
   const VIDEO_PROVIDER_TYPES = new Set(["volcano-video", "doubao-video", "qianwen-video", "fal-video"]);
   const visualModels =
     modelsData?.models?.filter(
-      (model) => model.supportsImageGen || VIDEO_PROVIDER_TYPES.has(model.providerType)
+      (model) =>
+        model.modelId !== "volcano-video-master" &&
+        (model.supportsImageGen || VIDEO_PROVIDER_TYPES.has(model.providerType))
     ) || [];
   
   // Agent模式（自动路由）模型选项
diff --git a/components/image-params-bar.tsx b/components/image-params-bar.tsx
index 7f06d8c66..12ad8199e 100644
--- a/components/image-params-bar.tsx
+++ b/components/image-params-bar.tsx
@@ -8,7 +8,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Check, Image, Ratio, Maximize2, Images, SlidersHorizontal, Ban } from "lucide-react";
+import { Check, Image, Ratio, Monitor, Images, SlidersHorizontal, Ban } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
@@ -215,7 +215,7 @@ export function ImageParamsBar({
               className="h-8 px-2 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:ring-0"
               title={`分辨率：${params.imageSize}`}
             >
-              <Maximize2 size={14} />
+              <Monitor size={14} />
               <span className="sr-only">{`分辨率：${params.imageSize}`}</span>
             </Button>
           </DropdownMenuTrigger>
diff --git a/components/multimodal-input.tsx b/components/multimodal-input.tsx
index fb69b3fba..c8cc0021c 100644
--- a/components/multimodal-input.tsx
+++ b/components/multimodal-input.tsx
@@ -1193,7 +1193,13 @@ function PureModelSelectorCompact({
     showAutoModel: boolean;
   }>("/api/site-settings", fetcher);
 
-  const allModels = dynamicModelsData?.models ?? [];
+  const allModels = useMemo(
+    () =>
+      (dynamicModelsData?.models ?? []).filter(
+        (model) => model.modelId !== "volcano-video-master"
+      ),
+    [dynamicModelsData?.models]
+  );
   
   // 🆕 将模型分为主模型和子模型，构建层级结构
   const { mainModels, subModelsMap } = useMemo(() => {
diff --git a/components/video-params-bar.tsx b/components/video-params-bar.tsx
index d17656463..4d9dd7cb8 100644
--- a/components/video-params-bar.tsx
+++ b/components/video-params-bar.tsx
@@ -30,6 +30,7 @@ import {
   Clock,
   Settings2,
   Maximize2,
+  Monitor,
   Ratio,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -271,12 +272,15 @@ const getImageUploadConfig = () => {
         {/* 模式选择 */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 px-2 gap-1 focus-visible:ring-0 focus-visible:ring-offset-0">
+            <Button
+              variant="ghost"
+              className="h-8 px-2 focus-visible:ring-0 focus-visible:ring-offset-0"
+              title={`模式：${modeOptions.find((option) => option.value === params.mode)?.label || MODE_LABELS[params.mode]}`}
+            >
               <Maximize2 size={14} />
-              <span className="font-medium text-xs">
-                {modeOptions.find((option) => option.value === params.mode)?.label || MODE_LABELS[params.mode]}
+              <span className="sr-only">
+                {`模式：${modeOptions.find((option) => option.value === params.mode)?.label || MODE_LABELS[params.mode]}`}
               </span>
-              <ChevronDown size={14} />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start" className="w-36">
@@ -300,9 +304,13 @@ const getImageUploadConfig = () => {
         {/* 宽高比 */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 px-2 gap-1 focus-visible:ring-0 focus-visible:ring-offset-0">
+            <Button
+              variant="ghost"
+              className="h-8 px-2 focus-visible:ring-0 focus-visible:ring-offset-0"
+              title={`比例：${params.ratio}`}
+            >
               <Ratio size={14} />
-              <span className="font-medium text-xs">{params.ratio}</span>
+              <span className="sr-only">{`比例：${params.ratio}`}</span>
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="center" className="w-48">
@@ -325,8 +333,13 @@ const getImageUploadConfig = () => {
         {!isFalVideo && (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="h-8 px-2 focus-visible:ring-0 focus-visible:ring-offset-0">
-                <span className="font-medium text-xs">{params.resolution}</span>
+              <Button
+                variant="ghost"
+                className="h-8 px-2 focus-visible:ring-0 focus-visible:ring-offset-0"
+                title={`分辨率：${params.resolution}`}
+              >
+                <Monitor size={14} />
+                <span className="sr-only">{`分辨率：${params.resolution}`}</span>
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="center" className="min-w-[100px]">
@@ -343,9 +356,13 @@ const getImageUploadConfig = () => {
         {/* 时长 */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 px-2 gap-1 focus-visible:ring-0 focus-visible:ring-offset-0">
+            <Button
+              variant="ghost"
+              className="h-8 px-2 focus-visible:ring-0 focus-visible:ring-offset-0"
+              title={`时长：${params.duration}s`}
+            >
               <Clock size={14} />
-              <span className="font-medium text-xs">{params.duration}s</span>
+              <span className="sr-only">{`时长：${params.duration}s`}</span>
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="center" className="min-w-[80px]">
@@ -361,18 +378,24 @@ const getImageUploadConfig = () => {
         {isFalVideo ? (
           <Button
             variant="ghost"
-            className="h-8 px-2 gap-1 focus-visible:ring-0 focus-visible:ring-offset-0"
+            className="h-8 px-2 focus-visible:ring-0 focus-visible:ring-offset-0"
             onClick={() => updateParam("generateAudio", !(params.generateAudio ?? true))}
+            title={`音频：${params.generateAudio === false ? "静音" : "带音频"}`}
           >
             <Sparkles size={14} />
-            <span className="font-medium text-xs">{params.generateAudio === false ? "静音" : "带音频"}</span>
+            <span className="sr-only">{`音频：${params.generateAudio === false ? "静音" : "带音频"}`}</span>
           </Button>
         ) : (
           <>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="h-8 px-2 focus-visible:ring-0 focus-visible:ring-offset-0">
-                  <span className="font-medium text-xs">{params.fps || 24}fps</span>
+                <Button
+                  variant="ghost"
+                  className="h-8 px-2 focus-visible:ring-0 focus-visible:ring-offset-0"
+                  title={`帧率：${params.fps || 24}fps`}
+                >
+                  <Video size={14} />
+                  <span className="sr-only">{`帧率：${params.fps || 24}fps`}</span>
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="center" className="min-w-[90px]">
@@ -387,9 +410,13 @@ const getImageUploadConfig = () => {
 
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="h-8 px-2 gap-1 focus-visible:ring-0 focus-visible:ring-offset-0">
+                <Button
+                  variant="ghost"
+                  className="h-8 px-2 focus-visible:ring-0 focus-visible:ring-offset-0"
+                  title={`运镜：${getCurrentCameraLabel()}`}
+                >
                   <Camera size={14} />
-                  <span className="font-medium text-xs">{getCurrentCameraLabel()}</span>
+                  <span className="sr-only">{`运镜：${getCurrentCameraLabel()}`}</span>
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="center" className="min-w-[100px]">