{Array.from({ length: 10 }, (_, index) => index + 1).map((value) => (
onConfigChange("count", String(value))}>
@@ -165,7 +165,7 @@ function DimensionInput({ prefix, value, disabled, theme, onChange }: { prefix:
type="number"
min={1}
disabled={disabled}
- className="min-w-0 flex-1 bg-transparent px-2 outline-none"
+ className="min-w-0 flex-1 bg-transparent px-2 outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
value={value || ""}
onChange={(event) => onChange(Number(event.target.value) || null)}
onMouseDown={(event) => event.stopPropagation()}
@@ -181,7 +181,7 @@ function CountInput({ value, theme, onChange }: { value: number; theme: (typeof
type="number"
min={1}
max={15}
- className="min-w-0 flex-1 bg-transparent px-3 text-center outline-none"
+ className="min-w-0 flex-1 bg-transparent px-3 text-center outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
style={{ color: theme.node.text, WebkitTextFillColor: theme.node.text }}
value={value || ""}
onChange={(event) => onChange(Number(event.target.value) || null)}
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 5871b3a..74431ae 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -319,65 +319,46 @@
line-height: 1 !important;
}
- .canvas-composer-tools {
- container-type: inline-size;
- }
-
- .canvas-composer-icon.ant-btn,
- .canvas-composer-model-pill {
+ .canvas-composer-icon.ant-btn {
flex: 0 0 32px;
width: 32px;
}
+ .canvas-composer-tools {
+ container-type: inline-size;
+ }
+
.canvas-composer-mode-button {
width: 32px;
}
- .canvas-composer-model-text,
- .canvas-composer-model-arrow,
.canvas-composer-mode-button span,
+ .canvas-model-picker-text,
+ .canvas-select-chevron,
.canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
display: none;
}
- .canvas-composer-model-pill {
- align-items: center;
- border: 0;
- border-radius: 999px;
- cursor: pointer;
- display: flex;
- gap: 7px;
- height: 32px;
+ .canvas-composer-model-picker {
+ width: 32px;
+ min-width: 32px;
justify-content: center;
- padding-inline: 8px;
- transition: opacity 0.15s ease;
+ gap: 0;
+ padding-inline: 0;
}
- .canvas-composer-model-pill:hover {
- opacity: 0.82;
- }
-
- @container (min-width: 400px) {
+ @container (min-width: 440px) {
.canvas-composer-mode-button {
padding-inline: 8px;
width: auto;
}
- .canvas-composer-mode-button span,
- .canvas-composer-model-text,
- .canvas-composer-model-arrow {
+ .canvas-composer-mode-button span {
display: inline;
font-size: 12px;
line-height: 1;
}
- .canvas-composer-model-pill {
- flex-basis: 180px;
- max-width: 180px;
- width: 180px !important;
- justify-content: flex-start;
- }
-
.canvas-composer-icon.ant-btn {
flex: 0 1 auto;
max-width: 170px;
@@ -388,69 +369,21 @@
display: inline-flex;
min-width: 0;
}
- }
- @container (min-width: 560px) {
- .canvas-composer-model-pill {
- flex-basis: 240px;
- max-width: 240px;
- width: 240px !important;
+ .canvas-composer-model-picker {
+ width: auto;
+ min-width: 9rem;
+ justify-content: flex-start;
+ gap: 0.5rem;
+ padding-inline: 0.75rem;
}
- .canvas-composer-icon.ant-btn {
- flex: 0 1 auto;
- max-width: 220px;
+ .canvas-model-picker-text,
+ .canvas-select-chevron {
+ display: inline;
}
}
- .canvas-model-dropdown .ant-dropdown-menu {
- border: 1px solid rgba(120, 113, 108, 0.18);
- border-radius: 12px;
- box-shadow: 0 18px 42px rgba(28, 25, 23, 0.18);
- min-width: 220px;
- padding: 6px;
- }
-
- .canvas-model-dropdown .ant-dropdown-menu-item {
- border-radius: 8px;
- color: #292524;
- font-size: 13px;
- line-height: 1;
- margin: 1px 0;
- min-height: 32px;
- padding: 7px 10px !important;
- }
-
- .canvas-model-dropdown .ant-dropdown-menu-item:hover {
- background: rgba(28, 25, 23, 0.06) !important;
- }
-
- .canvas-model-dropdown .ant-dropdown-menu-item-selected,
- .canvas-model-dropdown .ant-dropdown-menu-item-selected:hover {
- background: rgba(28, 25, 23, 0.1) !important;
- color: #1c1917 !important;
- font-weight: 500;
- }
-
- .dark .canvas-model-dropdown .ant-dropdown-menu {
- background: #1f1d1a;
- border-color: rgba(214, 211, 209, 0.14);
- }
-
- .dark .canvas-model-dropdown .ant-dropdown-menu-item {
- color: #f5f5f4;
- }
-
- .dark .canvas-model-dropdown .ant-dropdown-menu-item:hover {
- background: rgba(245, 245, 244, 0.08) !important;
- }
-
- .dark .canvas-model-dropdown .ant-dropdown-menu-item-selected,
- .dark .canvas-model-dropdown .ant-dropdown-menu-item-selected:hover {
- background: rgba(245, 245, 244, 0.14) !important;
- color: #fafaf9 !important;
- }
-
.canvas-control-select.ant-select-focused .ant-select-selector,
.canvas-control-number.ant-input-number-focused {
border-color: #a8a29e !important;
diff --git a/web/src/components/model-picker.module.css b/web/src/components/model-picker.module.css
deleted file mode 100644
index d4b379e..0000000
--- a/web/src/components/model-picker.module.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.dropdown :global(.ant-select-item) {
- font-weight: 400;
- min-height: 34px;
- padding-inline: 10px 28px;
-}
-
-.dropdown :global(.ant-select-item-option-selected) {
- font-weight: 500;
-}
-
-.dropdown :global(.rc-virtual-list-holder) {
- scrollbar-width: none;
-}
-
-.dropdown :global(.rc-virtual-list-holder)::-webkit-scrollbar,
-.dropdown :global(.rc-virtual-list-holder)::-webkit-scrollbar-button {
- height: 0;
- width: 0;
-}
-
-.dropdown :global(.rc-virtual-list-scrollbar) {
- right: 4px !important;
- width: 2px !important;
-}
-
-.dropdown :global(.rc-virtual-list-scrollbar-thumb) {
- background: rgba(120, 113, 108, 0.42) !important;
- border-radius: 999px !important;
-}
diff --git a/web/src/components/model-picker.tsx b/web/src/components/model-picker.tsx
index f407ae6..ac826c3 100644
--- a/web/src/components/model-picker.tsx
+++ b/web/src/components/model-picker.tsx
@@ -1,9 +1,10 @@
"use client";
-import { Select } from "antd";
+import { useMemo, useState } from "react";
import { Cpu } from "lucide-react";
-import styles from "./model-picker.module.css";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
import type { AiConfig } from "@/stores/use-config-store";
type ModelPickerProps = {
@@ -17,50 +18,68 @@ type ModelPickerProps = {
};
export function ModelPicker({ config, value, onChange, className, fullWidth = false, placeholder = "选择模型", onMissingConfig }: ModelPickerProps) {
- const options = Array.from(new Set([value, ...config.models].filter(Boolean))).map((model) => ({ value: model, label: }));
- const width = fullWidth ? "100%" : `min(${Math.max(156, (value || placeholder).length * 8 + 64)}px, 100%)`;
+ const [open, setOpen] = useState(false);
+ const options = useMemo(() => Array.from(new Set([value, ...config.models].filter(Boolean))), [config.models, value]);
+ const current = value || "";
return (
);
}
function ModelLabel({ model }: { model: string }) {
- const icon = resolveModelIcon(model);
return (
-
- {icon ? 
: }
- {model}
+
+
+ {model}
);
}
+function ModelIcon({ model }: { model: string }) {
+ const icon = resolveModelIcon(model);
+ return icon ? : ;
+}
+
function resolveModelIcon(model: string) {
const name = model.toLowerCase();
if (name.includes("claude") || name.includes("anthropic")) return "/icons/claude.svg";
diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
new file mode 100644
index 0000000..706d3d9
--- /dev/null
+++ b/web/src/components/ui/select.tsx
@@ -0,0 +1,196 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+function Select({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function SelectGroup({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function SelectValue({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function SelectTrigger({
+ className,
+ size = "default",
+ hideChevron = false,
+ children,
+ ...props
+}: React.ComponentProps & {
+ size?: "sm" | "default"
+ hideChevron?: boolean
+}) {
+ return (
+
+ {children}
+ {!hideChevron ? (
+
+
+
+ ) : null}
+
+ )
+}
+
+function SelectContent({
+ className,
+ children,
+ position = "item-aligned",
+ align = "center",
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+ {children}
+
+
+
+
+ )
+}
+
+function SelectLabel({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function SelectItem({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function SelectSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function SelectScrollUpButton({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+function SelectScrollDownButton({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+export {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectScrollDownButton,
+ SelectScrollUpButton,
+ SelectSeparator,
+ SelectTrigger,
+ SelectValue,
+}