style(ui): simplify media toolbars and hide volcano video master model
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled

This commit is contained in:
Your Name 2026-02-20 20:05:32 +08:00
parent 32b56d0919
commit b5f6fd3842
4 changed files with 55 additions and 20 deletions

View File

@ -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模式(自动路由)模型选项

View File

@ -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>

View File

@ -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(() => {

View File

@ -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]">