feat(*): 创作与运维 - 新增图片尺寸预设和系统性能面板并优化图片组动画

web/src/components/image-settings-panel.tsx

@@ -1,8 +1,10 @@
-import { type ReactNode, useState } from "react";
+import { ImageSizePicker } from "./image-size-picker";
+import { imageResolutionUsesQuality } from "@/lib/image-size-presets";
+import { type ReactNode } from "react";
 import { ConfigProvider, Switch } from "antd";
 
 import { type CanvasTheme } from "@/lib/canvas-theme";
-import { buildImageResolutionOptions, formatImageResolutionSize, imageRatioForSize, imageResolutionChoices, imageResolutionOption, imageSizeForResolution, supportsImageResolutionPresets, type ImageResolutionChoice } from "@/lib/image-resolution-tiers";
+import { buildImageResolutionOptions, formatImageResolutionSize } from "@/lib/image-resolution-tiers";
 import { modelCapabilityConfigFor, normalizeImageValue, type ImageCapabilityConfig } from "@/lib/model-capabilities";
 import { mergedImageCapabilityConfig } from "@/lib/model-selection";
 import { modelOptionName, resolveModelChannel, type AiConfig } from "@/stores/use-config-store";
@@ -14,8 +16,8 @@ const qualityOptions = [
     { value: "low", label: "低" },
     { value: "1k", label: "1K" },
     { value: "2k", label: "2K" },
+    { value: "4k", label: "4K" },
 ];
-const DIMENSION_STEP = 16;
 
 type AspectOption = { value: string; label: string; width: number; height: number; icon: string; size?: string };
 
@@ -50,7 +52,6 @@ type ImageSettingsPanelProps = {
 };
 
 export function ImageSettingsPanel({ config, onConfigChange, theme, showTitle = true, showCount = true, className = "w-[304px] space-y-3 rounded-2xl px-1 py-0.5", maxCount = 15, quickCount = 3 }: ImageSettingsPanelProps) {
-    const [snapDimensionToStep, setSnapDimensionToStep] = useState(true);
     const profile = mergedImageCapabilityConfig(config, config.model || config.imageModel);
     const normalized = normalizeImageValue(profile, config);
     const quality = normalized.quality;
@@ -58,43 +59,8 @@ export function ImageSettingsPanel({ config, onConfigChange, theme, showTitle =
     const effectiveMaxCount = Math.min(maxCount, profile.maxOutputs);
     const count = Math.max(1, Math.min(effectiveMaxCount, Number(normalized.count)));
     const activeSize = normalized.size;
-    const pixelSizeValues = profile.size.values.filter((value) => value.trim().toLowerCase() !== "auto");
-    const hasResolutionPresets = supportsImageResolutionPresets(profile.size);
-    const resolutionOptions = hasResolutionPresets ? buildImageResolutionOptions(pixelSizeValues) : [];
-    const activeResolution = activeSize === "auto" ? undefined : imageResolutionOption(resolutionOptions, activeSize);
-    const activeRatio = activeResolution?.ratio || imageRatioForSize(activeSize);
-    const resolutionChoices = hasResolutionPresets ? imageResolutionChoices(profile.size.values) : [];
-    // 只有一个分辨率层级时，分辨率切换器没有实际选择意义；更重要的是不能因此把比例列表裁剪成当前层级的 3 个像素尺寸。
-    // 例如历史 `*` 配置恢复为标准值后，虽然包含 1024x1024/1536x1024/1024x1536，实际仍应展示完整的比例和尺寸选项。
-    const usesResolutionPicker = resolutionChoices.length > 1;
-    const availableAspects: AspectOption[] = usesResolutionPicker && activeSize === "auto"
-        ? []
-        : usesResolutionPicker && activeResolution
-        ? resolutionOptions.filter((item) => item.tier === activeResolution.tier).map((item) => ({ value: item.ratio, label: item.ratio, size: item.size, width: item.width, height: item.height, icon: item.width === item.height ? "square" : item.width > item.height ? "landscape" : "portrait" }))
-        : imageAspectOptions(profile);
-    const selectedAspect = availableAspects.find((item) => imageOptionValue(profile, item) === activeSize || item.value === activeSize) || availableAspects.find((item) => item.label === activeRatio);
-    const dimensions = readSizeDimensions(activeSize, selectedAspect || aspectOptions[0]);
-	const activeQualityOptions = profile.quality.values.map((value) => qualityOptions.find((item) => item.value === value) || { value, label: value });
-	const priceTiers = imageModelPriceTiers(config);
-    const selectAspect = (value: string) => {
-        const option = availableAspects.find((item) => item.value === value);
-        onConfigChange("size", option ? imageOptionValue(profile, option) : "auto");
-    };
-    const selectResolution = (choice: ImageResolutionChoice) => {
-        if (choice === "auto") {
-            onConfigChange("size", "auto");
-            return;
-        }
-        const ratio = activeRatio || availableAspects[0]?.label;
-        const size = imageSizeForResolution(resolutionOptions, choice, ratio) || resolutionOptions.find((item) => item.tier === choice)?.size;
-        if (size) onConfigChange("size", size);
-    };
-    const updateDimension = (key: "width" | "height", value: number | null) => {
-        const next = Math.max(1, Math.floor(value || dimensions[key] || 1024));
-        const width = key === "width" ? next : dimensions.width;
-        const height = key === "height" ? next : dimensions.height;
-        onConfigChange("size", `${alignDimension(width, snapDimensionToStep)}x${alignDimension(height, snapDimensionToStep)}`);
-    };
+    const activeQualityOptions = profile.quality.values.map((value) => qualityOptions.find((item) => item.value === value) || { value, label: value });
+    const priceTiers = imageModelPriceTiers(config);
 
     return (
         <ImageSettingsTheme theme={theme}>
@@ -108,7 +74,7 @@ export function ImageSettingsPanel({ config, onConfigChange, theme, showTitle =
                 }}
             >
                 {showTitle ? <div className="text-base font-semibold">图像设置</div> : null}
-                {profile.quality.supported ? <div className="space-y-2">
+                {profile.quality.supported && !imageResolutionUsesQuality(profile) ? <div className="space-y-2">
                     <SettingTitle color={theme.node.muted}>{isGrokResolutionQuality(profile) ? "分辨率" : "质量"}</SettingTitle>
                     <div className={`grid gap-1.5 ${activeQualityOptions.length <= 2 ? "grid-cols-2" : "grid-cols-4"}`}>
 						{activeQualityOptions.map((item) => (
@@ -133,52 +99,7 @@ export function ImageSettingsPanel({ config, onConfigChange, theme, showTitle =
                         />
                     </span>
                 </div> : null}
-                {resolutionChoices.length ? <div className="space-y-2">
-                    <SettingTitle color={theme.node.muted}>分辨率</SettingTitle>
-                    <div className={`grid gap-1.5 ${resolutionChoices.length <= 2 ? "grid-cols-2" : resolutionChoices.length === 4 ? "grid-cols-4" : "grid-cols-3"}`}>
-                        {resolutionChoices.map((choice) => (
-                            <OptionPill key={choice} selected={choice === "auto" ? activeSize === "auto" : activeResolution?.tier === choice} theme={theme} onClick={() => selectResolution(choice)}>
-                                {choice === "auto" ? "自动" : choice.toUpperCase()}
-                            </OptionPill>
-                        ))}
-                    </div>
-                </div> : null}
-                {profile.size.allowCustom ? <div className="space-y-2">
-                    <div className="flex items-center justify-between gap-3">
-                        <SettingTitle color={theme.node.muted}>尺寸</SettingTitle>
-                        <div className="flex items-center gap-2">
-                            <span className="text-xs font-medium" style={{ color: theme.node.muted }}>
-                                16倍数对齐
-                            </span>
-                            <span title="输入完成后自动向上补成 16 的倍数" onMouseDown={(event) => event.stopPropagation()}>
-                                <Switch size="small" checked={snapDimensionToStep} onChange={setSnapDimensionToStep} />
-                            </span>
-                        </div>
-                    </div>
-                    <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-1.5">
-                        <DimensionInput prefix="W" value={dimensions.width} disabled={activeSize === "auto"} theme={theme} alignToStep={snapDimensionToStep} onChange={(value) => updateDimension("width", value)} />
-                        <span className="text-sm opacity-45">↔</span>
-                        <DimensionInput prefix="H" value={dimensions.height} disabled={activeSize === "auto"} theme={theme} alignToStep={snapDimensionToStep} onChange={(value) => updateDimension("height", value)} />
-                    </div>
-                </div> : null}
-                {availableAspects.length ? <div className="space-y-2">
-                    <SettingTitle color={theme.node.muted}>尺寸或比例</SettingTitle>
-                    <div className="grid grid-cols-4 gap-1.5 min-[380px]:grid-cols-5">
-                        {availableAspects.map((item) => (
-                            <button
-                                key={item.value}
-                                type="button"
-                                className="flex h-[52px] cursor-pointer flex-col items-center justify-center gap-0.5 rounded-lg bg-transparent text-[var(--fs-label)] transition-colors hover:brightness-110 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1"
-                                style={{ background: selectedAspect?.value === item.value ? theme.toolbar.activeBg : "transparent", color: theme.node.text, outlineColor: theme.node.muted }}
-                                onMouseDown={(event) => event.stopPropagation()}
-                                onClick={() => selectAspect(item.value)}
-                            >
-                                <AspectIcon type={item.icon} width={item.width} height={item.height} color={theme.node.text} />
-                                <span className="whitespace-nowrap">{item.label}</span>
-                            </button>
-                        ))}
-                    </div>
-                </div> : null}
+                <ImageSizePicker profile={profile} size={activeSize} quality={quality} onChange={(size, nextQuality) => { onConfigChange("size", size); if (nextQuality) onConfigChange("quality", nextQuality); }} />
                 {showCount && effectiveMaxCount > 1 ? (
                     <div className="space-y-2">
                         <SettingTitle color={theme.node.muted}>生成张数</SettingTitle>
@@ -197,45 +118,6 @@ export function ImageSettingsPanel({ config, onConfigChange, theme, showTitle =
     );
 }
 
-function imageOptionAllowed(profile: ImageCapabilityConfig, option: AspectOption) {
-    if (profile.size.parameter === "none") return false;
-    if (profile.size.allowCustom && profile.size.values.length === 0) return true;
-    return [option.value, option.size, option.width && option.height ? `${option.width}x${option.height}` : ""].filter(Boolean).some((value) => profile.size.values.includes(String(value)));
-}
-
-// 宽高比选项直接取模型配置 values（与创作页面一致），不在白名单里的比例（如 8:1）也能显示。
-function imageAspectOptions(profile: ImageCapabilityConfig): AspectOption[] {
-    if (profile.size.parameter === "none") return [];
-    const values = profile.size.values.filter((value) => value.trim().toLowerCase() !== "auto");
-    if (!values.length) return profile.size.allowCustom ? aspectOptions.filter((item) => item.value !== "auto") : [];
-    return values.map((value) => {
-        const known = aspectOptions.find((item) => (item.size || item.value) === value || item.value === value);
-        if (known) return known;
-        const parts = ratioParts(value);
-        return { value, label: value, size: value, width: parts?.width || 0, height: parts?.height || 0, icon: "custom" };
-    });
-}
-
-function ratioParts(value: string) {
-    const pixel = value.trim().match(/^(\d+)x(\d+)$/i);
-    if (pixel) {
-        const divisor = gcd(Number(pixel[1]), Number(pixel[2]));
-        return { width: Number(pixel[1]) / divisor, height: Number(pixel[2]) / divisor };
-    }
-    const ratio = value.trim().match(/^(\d+):(\d+)$/);
-    if (!ratio) return undefined;
-    return { width: Number(ratio[1]), height: Number(ratio[2]) };
-}
-
-function gcd(a: number, b: number): number {
-    return b ? gcd(b, a % b) : a;
-}
-
-function imageOptionValue(profile: ImageCapabilityConfig, option: AspectOption) {
-    const candidates = [option.size, option.value, option.width && option.height ? `${option.width}x${option.height}` : ""].filter(Boolean).map(String);
-    return candidates.find((value) => profile.size.values.includes(value)) || option.size || option.value || "auto";
-}
-
 export function ImageSettingsTheme({ theme, children }: { theme: CanvasTheme; children: ReactNode }) {
     return (
         <ConfigProvider
@@ -250,12 +132,12 @@ export function ImageSettingsTheme({ theme, children }: { theme: CanvasTheme; ch
 }
 
 export function imageQualityLabel(value: string) {
-    return ({ auto: "自动", high: "高", medium: "中", low: "低", "1k": "1K", "2k": "2K" } as Record<string, string>)[value] || value || "默认";
+    return ({ auto: "自动", high: "高", medium: "中", low: "低", "1k": "1K", "2k": "2K", "4k": "4K" } as Record<string, string>)[value.toLowerCase()] || value || "默认";
 }
 
 function isGrokResolutionQuality(profile: ImageCapabilityConfig) {
     const values = profile.quality.values.map((item) => item.toLowerCase());
-    return values.includes("1k") || values.includes("2k");
+    return values.some((value) => ["1k", "2k", "4k"].includes(value));
 }
 
 export function imageSizeLabel(size: string) {
@@ -292,35 +174,6 @@ function OptionPill({ selected, disabled = false, theme, onClick, children }: {
     );
 }
 
-function DimensionInput({ prefix, value, disabled, theme, alignToStep, onChange }: { prefix: string; value: number; disabled: boolean; theme: CanvasTheme; alignToStep: boolean; onChange: (value: number | null) => void }) {
-    const commit = (input: HTMLInputElement) => {
-        const next = alignDimension(Math.max(1, Math.floor(Number(input.value) || value || 1024)), alignToStep);
-        input.value = String(next);
-        onChange(next);
-    };
-
-    return (
-        <label className="flex h-8 overflow-hidden rounded-lg text-xs" style={{ background: theme.toolbar.itemHover, color: theme.node.text, opacity: disabled ? 0.55 : 1 }}>
-            <span className="grid w-8 place-items-center" style={{ color: theme.node.muted }}>
-                {prefix}
-            </span>
-            <input
-                type="number"
-                min={1}
-                disabled={disabled}
-                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"
-                defaultValue={value || ""}
-                key={`${prefix}-${value}`}
-                onBlur={(event) => commit(event.currentTarget)}
-                onKeyDown={(event) => {
-                    if (event.key === "Enter") event.currentTarget.blur();
-                }}
-                onMouseDown={(event) => event.stopPropagation()}
-            />
-        </label>
-    );
-}
-
 function CountInput({ value, quickCount, max, theme, onChange }: { value: number; quickCount: number; max: number; theme: CanvasTheme; onChange: (value: number | null) => void }) {
     const commit = (input: HTMLInputElement) => {
         const next = Math.max(1, Math.min(max, Math.floor(Number(input.value) || 1)));
@@ -349,18 +202,6 @@ function CountInput({ value, quickCount, max, theme, onChange }: { value: number
     );
 }
 
-function AspectIcon({ type, width, height, color }: { type: string; width: number; height: number; color: string }) {
-    if (type === "auto") return null;
-    const ratio = width / Math.max(1, height);
-    const boxWidth = ratio >= 1 ? 22 : Math.max(9, 22 * ratio);
-    const boxHeight = ratio >= 1 ? Math.max(9, 22 / ratio) : 22;
-    return (
-        <span className="grid h-6 w-8 place-items-center">
-            <span className="border-2" style={{ width: boxWidth, height: boxHeight, borderColor: color }} />
-        </span>
-    );
-}
-
 function SettingTitle({ children, color }: { children: string; color: string }) {
     return (
         <div className="text-xs font-medium" style={{ color }}>
@@ -368,15 +209,3 @@ function SettingTitle({ children, color }: { children: string; color: string })
         </div>
     );
 }
-
-function readSizeDimensions(size: string, fallback: { width: number; height: number }) {
-    const match = size?.match(/^(\d+)x(\d+)$/);
-    return {
-        width: match ? Number(match[1]) : fallback.width,
-        height: match ? Number(match[2]) : fallback.height,
-    };
-}
-
-function alignDimension(value: number, enabled: boolean) {
-    return enabled ? Math.ceil(value / DIMENSION_STEP) * DIMENSION_STEP : value;
-}