lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): icon-only image toolbar controls
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-02-20 19:57:14 +08:00
parent 32d6d10f2e
commit 32b56d0919
1 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/image-params-bar.tsx
View File

@ -8,7 +8,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Check, Image, Ratio, Maximize2, Images, Sparkles, Ban } from "lucide-react";
import { Check, Image, Ratio, Maximize2, Images, SlidersHorizontal, Ban } from "lucide-react";
import { cn } from "@/lib/utils";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
@ -181,9 +181,13 @@ export function ImageParamsBar({
{/* 图片比例 */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 px-2 gap-1 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:ring-0">
<Button
variant="ghost"
className="h-8 px-2 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:ring-0"
title={`比例：${params.aspectRatio}`}
>
<Ratio size={14} />
<span className="font-medium text-xs">{params.aspectRatio}</span>
<span className="sr-only">{`比例：${params.aspectRatio}`}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="center" className="w-48">
@ -206,9 +210,13 @@ export function ImageParamsBar({
{/* 分辨率 */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 px-2 gap-1 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:ring-0">
<Button
variant="ghost"
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} />
<span className="font-medium text-xs">{params.imageSize}</span>
<span className="sr-only">{`分辨率：${params.imageSize}`}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="center" className="min-w-[100px]">
@ -228,9 +236,13 @@ export function ImageParamsBar({
{showImageCountSelector && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 px-2 gap-1 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:ring-0">
<Button
variant="ghost"
className="h-8 px-2 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:ring-0"
title={`数量：${params.imageCount || 1}张`}
>
<Images size={14} />
<span className="font-medium text-xs">{params.imageCount || 1}张</span>
<span className="sr-only">{`数量：${params.imageCount || 1}张`}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="center" className="min-w-[80px]">
@ -255,12 +267,13 @@ export function ImageParamsBar({
<Button
variant="ghost"
className={cn(
"h-8 px-2 gap-1 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:ring-0",
"h-8 px-2 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:ring-0",
(params.promptExtend || params.negativePrompt) && "text-primary"
)}
title="高级设置"
>
<Sparkles size={14} />
<span className="font-medium text-xs">高级</span>
<SlidersHorizontal size={14} />
<span className="sr-only">高级设置</span>
</Button>
</PopoverTrigger>
<PopoverContent align="end" className="w-72">