tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(*): 功能开放与页面布局 - 新增运维开关并优化后台及创作界面空间利用

Browse Source
This commit is contained in:
ddCat
2026-08-04 16:24:18 +08:00
parent 8f7c492b70
commit f439d600ba
36 changed files with 723 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/components/model-picker.tsx
View File

@@ -6,6 +6,7 @@ import { canvasThemes } from "@/lib/canvas-theme";
import { cn } from "@/lib/utils";
import { modelDisplayName, modelOptionLabel, modelOptionName, resolveModelChannel, selectableModelsByCapability, type AiConfig, type ModelCapability } from "@/stores/use-config-store";
import { useThemeStore } from "@/stores/use-theme-store";
import { useUserStore } from "@/stores/use-user-store";
type ModelPickerProps = {
config: AiConfig;
@@ -21,6 +22,7 @@ type ModelPickerProps = {
};
export function ModelPicker({ config, value, onChange, capability, className, fullWidth = false, placeholder = "选择模型", onMissingConfig, showSelectedPrice = true, variant = "default" }: ModelPickerProps) {
const creditsEnabled = useUserStore((state) => state.features.creditsEnabled);
const pickerId = useId();
const theme = canvasThemes[useThemeStore((state) => state.theme)];
const [open, setOpen] = useState(false);
@@ -129,7 +131,7 @@ export function ModelPicker({ config, value, onChange, capability, className, fu
window.requestAnimationFrame(() => triggerRef.current?.focus());
}}
>
<ModelLabel config={config} model={model} capability={capability} theme={theme} creationVariant={creationVariant} />
<ModelLabel config={config} model={model} capability={capability} theme={theme} creationVariant={creationVariant} showPrice={creditsEnabled} />
{selected ? <Check className="canvas-model-picker-option-check" style={{ color: theme.node.activeStroke }} /> : null}
</button>
);
@@ -172,7 +174,7 @@ export function ModelPicker({ config, value, onChange, capability, className, fu
<span className="canvas-model-picker-label flex min-w-0 items-center gap-1.5">
<span className="canvas-model-picker-trigger-icon" style={{ background: theme.toolbar.itemHover }}><ModelIcon model={current} /></span>
<span className="min-w-0 flex-1 truncate">{current ? creationVariant ? modelDisplayName(config, current) : modelOptionLabel(config, current) : placeholder}</span>
{showSelectedPrice ? <ModelPrice price={currentPrice} compact /> : null}
{showSelectedPrice && creditsEnabled ? <ModelPrice price={currentPrice} compact /> : null}
</span>
<ChevronDown className={cn("canvas-model-picker-chevron", open && "is-open")} aria-hidden="true" />
</button>
@@ -187,7 +189,7 @@ function emptyModelLabel(config: AiConfig, capability?: ModelCapability) {
return config.models.length ? `暂无匹配的${label}模型` : "请先到配置里添加渠道和模型";
}
function ModelLabel({ config, model, capability, theme, creationVariant }: { config: AiConfig; model: string; capability?: ModelCapability; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; creationVariant: boolean }) {
function ModelLabel({ config, model, capability, theme, creationVariant, showPrice }: { config: AiConfig; model: string; capability?: ModelCapability; theme: (typeof canvasThemes)[keyof typeof canvasThemes]; creationVariant: boolean; showPrice: boolean }) {
const meta = modelMenuMeta(model, capability);
return (
<span className="flex w-full min-w-0 items-center gap-1.5 overflow-hidden py-0">
@@ -198,7 +200,7 @@ function ModelLabel({ config, model, capability, theme, creationVariant }: { con
<span className="block min-w-0 truncate text-[var(--fs-label)] font-medium leading-none">{modelDisplayName(config, model)}</span>
<span className="mt-1 block truncate text-[var(--fs-tiny)]" style={{ color: theme.node.muted }} title={meta.description}>{meta.description}</span>
</span>
<ModelPrice price={modelMenuPrice(config, model)} />
{showPrice ? <ModelPrice price={modelMenuPrice(config, model)} /> : null}
{!creationVariant && meta.time ? <span className="shrink-0 rounded-full px-1.5 py-0.5 text-[var(--fs-tiny)] tabular-nums" style={{ background: theme.toolbar.itemHover, color: theme.node.muted }}>{meta.time}</span> : null}
</span>
);