feat(*): 模型编辑与画布 - 统一编辑弹窗并稳定网格和后台切页

web/src/components/canvas/infinite-canvas.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from
 import { resolveCanvasAppearance, resolveCanvasGridColor, type CanvasAppearance } from "@/lib/canvas/canvas-appearance";
 import { resolveCanvasPointerIntent } from "@/lib/canvas/canvas-selection";
 import type { CanvasBackgroundMode } from "@/lib/canvas-theme";
-import { applyCanvasLiveViewport, canvasDotGridPx, canvasDotPx, subscribeCanvasViewportPreview } from "@/lib/canvas/canvas-live-viewport";
+import { applyCanvasLiveViewport, subscribeCanvasViewportPreview } from "@/lib/canvas/canvas-live-viewport";
 import { useThemeStore } from "@/stores/use-theme-store";
 import type { ViewportTransform } from "@/types/canvas";
 
@@ -408,13 +408,6 @@ export function InfiniteCanvas({ containerRef, viewport, appearance, backgroundM
                 "--canvas-live-inverse-scale": 1 / Math.max(viewport.k, 0.05),
                 "--canvas-committed-scale": viewport.k,
                 "--canvas-live-scale-ratio": 1,
-                "--canvas-grid-size": `${48 * viewport.k}px`,
-                "--canvas-grid-x": `${viewport.x % (48 * viewport.k)}px`,
-                "--canvas-grid-y": `${viewport.y % (48 * viewport.k)}px`,
-                "--canvas-dot-grid-size": `${canvasDotGridPx(viewport.k)}px`,
-                "--canvas-dot-grid-x": `${viewport.x % canvasDotGridPx(viewport.k)}px`,
-                "--canvas-dot-grid-y": `${viewport.y % canvasDotGridPx(viewport.k)}px`,
-                "--canvas-dot-size": canvasDotPx(viewport.k),
             } as React.CSSProperties}
             onPointerDown={handlePointerDown}
             onDoubleClick={(event) => {
@@ -447,7 +440,7 @@ export function InfiniteCanvas({ containerRef, viewport, appearance, backgroundM
 function CanvasGrid({ appearance, mode }: { appearance?: CanvasAppearance; mode: CanvasBackgroundMode }) {
     const colorTheme = useThemeStore((state) => state.theme);
     const gridColor = resolveCanvasGridColor(appearance, colorTheme, mode);
-    const backgroundImage = mode === "dots" ? `radial-gradient(circle, ${gridColor} var(--canvas-dot-size), transparent calc(var(--canvas-dot-size) + 0.2px))` : `linear-gradient(${gridColor} 1px, transparent 1px), linear-gradient(90deg, ${gridColor} 1px, transparent 1px)`;
+    const backgroundImage = mode === "dots" ? `radial-gradient(circle, ${gridColor} 0.8px, transparent 1px)` : `linear-gradient(${gridColor} 1px, transparent 1px), linear-gradient(90deg, ${gridColor} 1px, transparent 1px)`;
     if (mode === "blank") return null;
 
     return (
@@ -455,12 +448,11 @@ function CanvasGrid({ appearance, mode }: { appearance?: CanvasAppearance; mode:
             data-canvas-grid-layer
             className="pointer-events-none absolute"
             style={{
-                inset: mode === "dots" ? "calc(-1 * var(--canvas-dot-grid-size))" : "calc(-1 * var(--canvas-grid-size))",
+                // 装饰网格固定在屏幕坐标，避免缩放时改变密度或产生亚像素位移闪烁。
+                inset: 0,
                 backgroundImage,
-                backgroundSize: mode === "dots" ? "var(--canvas-dot-grid-size) var(--canvas-dot-grid-size)" : "var(--canvas-grid-size) var(--canvas-grid-size)",
-                transform: mode === "dots" ? "translate3d(var(--canvas-dot-grid-x), var(--canvas-dot-grid-y), 0)" : "translate3d(var(--canvas-grid-x), var(--canvas-grid-y), 0)",
+                backgroundSize: "48px 48px",
                 opacity: mode === "dots" ? 0.34 : 0.46,
-                willChange: "transform",
             }}
         />
     );

web/src/components/choice-browser.css

@@ -0,0 +1,48 @@
+.choice-browser {
+    container-type: inline-size;
+    display: grid;
+    min-width: 0;
+    gap: 8px;
+    color: var(--foreground);
+}
+.choice-browser-panels {
+    display: grid;
+    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
+    overflow: hidden;
+    border: 1px solid var(--workspace-border);
+    border-radius: var(--r-md);
+}
+.choice-browser-list { height: 248px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; scrollbar-gutter: stable; }
+.choice-browser-option {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 120px) 16px;
+    align-items: center;
+    gap: 12px;
+    min-height: 48px;
+    padding: 7px 10px;
+    border-radius: var(--r-sm);
+    cursor: pointer;
+}
+.choice-browser-option:hover { background: var(--surface-hover); }
+.choice-browser-option[data-selected="true"] { background: var(--workspace-accent-soft); box-shadow: inset 0 0 0 1px var(--workspace-border-strong); }
+.choice-browser-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }
+.choice-browser-option:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: -2px; }
+.choice-browser-option input { accent-color: var(--workspace-accent); width: 14px; height: 14px; }
+.choice-browser-main { display: grid; min-width: 0; gap: 2px; }
+.choice-browser-main strong { font-size: var(--fs-caption); font-weight: 600; overflow-wrap: anywhere; }
+.choice-browser-main > span, .choice-browser-vendor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-label); color: var(--muted-foreground); }
+.choice-browser-main > span { font-family: monospace; }
+.choice-browser-detail { min-width: 0; max-height: 248px; overflow-y: auto; overscroll-behavior: contain; padding: 16px; border-left: 1px solid var(--workspace-border); }
+.choice-browser-detail > span { display: block; margin-bottom: 4px; color: var(--muted-foreground); font-size: var(--fs-label); }
+.choice-browser-detail > strong { font-size: var(--fs-caption); overflow-wrap: anywhere; }
+.choice-browser-detail dl { display: grid; gap: 8px; margin-top: 12px; font-size: var(--fs-caption); }
+.choice-browser-detail dl > div { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 8px; }
+.choice-browser-detail dt, .choice-browser-detail p { color: var(--muted-foreground); }
+.choice-browser-detail dd, .choice-browser-detail p { margin: 0; overflow-wrap: anywhere; }
+.choice-browser-state { display: grid; min-height: 100px; place-items: center; color: var(--muted-foreground); font-size: var(--fs-caption); padding: 16px; }
+@container (max-width: 620px) {
+    .choice-browser-panels { grid-template-columns: minmax(0, 1fr); }
+    .choice-browser-detail { border-left: 0; border-top: 1px solid var(--workspace-border); }
+    .choice-browser-option { grid-template-columns: minmax(0, 1fr) 16px; }
+    .choice-browser-vendor { display: none; }
+}

web/src/components/choice-browser.tsx

@@ -0,0 +1,117 @@
+import { Input } from "antd";
+import { Search } from "lucide-react";
+import { useId, useState, type ReactNode } from "react";
+import "./choice-browser.css";
+
+export type BrowserChoice = {
+    value: string;
+    label: string;
+    subtitle?: string;
+    vendor?: string;
+    searchText?: string;
+    disabled?: boolean;
+    details: Array<{ label: string; value: ReactNode }>;
+};
+
+/** A controlled form field: searching never changes the selected value. */
+export function ChoiceBrowser({
+    value,
+    onChange,
+    options,
+    label,
+    placeholder = "搜索名称、来源或请求路径",
+    loading = false,
+    error = "",
+    disabled = false,
+    id,
+    ...aria
+}: {
+    value?: string;
+    onChange?: (value: string) => void;
+    options: BrowserChoice[];
+    label: string;
+    placeholder?: string;
+    loading?: boolean;
+    error?: string;
+    disabled?: boolean;
+    id?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+}) {
+    const name = useId();
+    const [query, setQuery] = useState("");
+    const selected = options.find((option) => option.value === value);
+    const normalizedQuery = query.trim().toLowerCase();
+    const visible = options.filter((option) =>
+        [option.label, option.subtitle, option.vendor, option.searchText].join(" ").toLowerCase().includes(normalizedQuery),
+    );
+    const unavailable = disabled || loading || Boolean(error);
+
+    return (
+        <div className="choice-browser">
+            <Input
+                id={id}
+                {...aria}
+                allowClear
+                aria-label={`搜索${label}`}
+                disabled={unavailable}
+                prefix={<Search className="size-3.5" aria-hidden="true" />}
+                placeholder={placeholder}
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+            />
+            {loading || error || !options.length ? (
+                <div className="choice-browser-state" role={error ? "alert" : "status"}>
+                    {loading ? "正在读取可选项…" : error || "暂无可用选项"}
+                </div>
+            ) : (
+                <div className="choice-browser-panels">
+                    <div className="choice-browser-list" role="radiogroup" aria-label={label}>
+                        {visible.map((option) => (
+                            <label key={option.value} className="choice-browser-option" data-selected={option.value === value}>
+                                <span className="choice-browser-main">
+                                    <strong>{option.label}</strong>
+                                    <span title={option.subtitle}>{option.subtitle}</span>
+                                </span>
+                                <span className="choice-browser-vendor" title={option.vendor}>
+                                    {option.vendor}
+                                </span>
+                                <input
+                                    type="radio"
+                                    name={name}
+                                    value={option.value}
+                                    checked={option.value === value}
+                                    disabled={unavailable || option.disabled}
+                                    onChange={() => onChange?.(option.value)}
+                                />
+                            </label>
+                        ))}
+                        {!visible.length && (
+                            <div className="choice-browser-state" role="status">
+                                没有匹配的选项
+                            </div>
+                        )}
+                    </div>
+                    <div className="choice-browser-detail" aria-live="polite">
+                        <span>当前选择</span>
+                        {selected ? (
+                            <>
+                                <strong>{selected.label}</strong>
+                                <dl>
+                                    {selected.details.map((detail) => (
+                                        <div key={detail.label}>
+                                            <dt>{detail.label}</dt>
+                                            <dd>{detail.value}</dd>
+                                        </div>
+                                    ))}
+                                </dl>
+                            </>
+                        ) : (
+                            <p>{value ? `当前配置 ${value} 不在可用目录中，请重新选择。` : "选择左侧选项查看详情"}</p>
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

web/src/components/model-editor-modal.css

@@ -0,0 +1,23 @@
+.model-editor-modal .ant-modal-container { display: flex; flex-direction: column; height: min(880px, calc(100dvh - 48px)); }
+.model-editor-modal .ant-modal-header, .model-editor-modal .ant-modal-footer { padding: 18px 24px; flex-shrink: 0; }
+.model-editor-modal .ant-modal-footer { border-top: 1px solid var(--workspace-border); }
+.model-editor-modal .ant-modal-body { display: flex; flex-direction: column; overflow: hidden; }
+.model-editor-modal .ant-modal-body > .ant-form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
+.model-editor-modal .ant-tabs { display: flex; flex: 1; min-height: 0; }
+.model-editor-modal .ant-tabs-nav { flex-shrink: 0; margin: 0; padding-inline: 24px; }
+.model-editor-modal .ant-tabs-body-holder { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
+.model-editor-modal .ant-modal-body > .model-editor-panel { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
+.model-editor-panel { display: grid; gap: 16px; padding: 20px 24px; min-width: 0; }
+.model-editor-panel .ant-form-item { margin-bottom: 0; }
+.model-editor-connection-fields > .ant-form-item { grid-column: auto; min-width: 0; }
+.model-editor-subtitle { margin: 4px 0 0; color: var(--muted-foreground); font-size: var(--fs-caption); font-weight: 400; }
+.model-editor-section { display: grid; gap: 12px; min-width: 0; }
+.model-editor-section + .model-editor-section { border-top: 1px solid var(--workspace-border); padding-top: 16px; }
+.model-editor-section h2 { margin: 0; font-size: var(--fs-body); font-weight: 600; }
+.model-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.model-editor-footer-actions { display: flex; gap: 8px; margin-left: auto; }
+@media (max-width: 600px) {
+    .model-editor-modal .ant-modal-container { height: calc(100dvh - 24px); }
+    .model-editor-panel { padding: 16px; }
+    .model-editor-modal .ant-modal-header, .model-editor-modal .ant-modal-footer { padding: 16px; }
+}

web/src/components/model-editor-modal.tsx

@@ -0,0 +1,63 @@
+import { Modal, Tabs } from "antd";
+import type { ReactNode } from "react";
+import "./model-editor-modal.css";
+
+export function ModelEditorModal({
+    title,
+    subtitle,
+    open,
+    onClose,
+    footer,
+    activeKey,
+    onTabChange,
+    items,
+    busy = false,
+    admin = false,
+    children,
+}: {
+    title: string;
+    subtitle?: string;
+    open: boolean;
+    onClose: () => void;
+    footer: ReactNode;
+    activeKey?: string;
+    onTabChange?: (key: string) => void;
+    items?: Array<{ key: string; label: string; children: ReactNode }>;
+    busy?: boolean;
+    admin?: boolean;
+    children?: ReactNode | ((tabs: ReactNode) => ReactNode);
+}) {
+    const tabs = items?.length ? (
+        <Tabs
+            activeKey={activeKey}
+            onChange={onTabChange}
+            animated={false}
+            items={items.map((item) => ({ ...item, forceRender: true, children: <div className="model-editor-panel">{item.children}</div> }))}
+        />
+    ) : null;
+    const content = typeof children === "function" ? children(tabs) : children || tabs;
+
+    return (
+        <Modal
+            open={open}
+            centered
+            width={1120}
+            destroyOnHidden
+            rootClassName={`${admin ? "admin-modal-root " : ""}model-editor-modal`}
+            title={
+                <div>
+                    {title}
+                    {subtitle && <p className="model-editor-subtitle">{subtitle}</p>}
+                </div>
+            }
+            mask={{ closable: false }}
+            keyboard={!busy}
+            closable={!busy}
+            onCancel={onClose}
+            footer={footer}
+            styles={{ container: { padding: 0, overflow: "hidden" }, body: { padding: 0, minHeight: 0, flex: 1 }, header: { margin: 0 }, footer: { margin: 0 } }}
+        >
+            {content}
+        </Modal>
+    );
+}

web/src/components/model-protocol-browser.tsx

@@ -0,0 +1,31 @@
+import { ChoiceBrowser } from "./choice-browser";
+import type { ModelProtocolDefinition, ProtocolCapability } from "@/lib/model-protocols";
+
+export function ModelProtocolBrowser({ capability, protocols, ...props }: {
+    capability?: ProtocolCapability;
+    protocols: ModelProtocolDefinition[];
+    value?: string;
+    onChange?: (value: string) => void;
+    loading?: boolean;
+    error?: string;
+    disabled?: boolean;
+    id?: string;
+}) {
+    const options = protocols
+        .filter((protocol) => (!capability || protocol.capability === capability) && protocol.enabled !== false)
+        .map((protocol) => ({
+            value: protocol.value,
+            label: protocol.label,
+            subtitle: protocol.create,
+            vendor: protocol.vendor,
+            searchText: protocol.value,
+            details: [
+                { label: "请求", value: <code>{protocol.create}</code> },
+                { label: "请求体", value: protocol.contentType },
+                { label: "响应", value: protocol.poll ? "异步轮询" : "同步响应" },
+                { label: "来源", value: protocol.media },
+            ],
+        }));
+
+    return <ChoiceBrowser key={capability || "all"} {...props} label="调用协议" placeholder="搜索协议名称、厂商或请求路径" options={options} />;
+}