diff --git a/web/src/components/canvas/canvas-cloud-agent.css b/web/src/components/canvas/canvas-cloud-agent.css index f3edc8ce4..640d61f09 100644 --- a/web/src/components/canvas/canvas-cloud-agent.css +++ b/web/src/components/canvas/canvas-cloud-agent.css @@ -8,6 +8,23 @@ z-index: calc(var(--z-modal-overlay) + 1000) !important; } +.agent-model-picker-popover .canvas-model-picker-menu { + width: min(340px, calc(100vw - 24px)) !important; + max-width: min(340px, calc(100vw - 24px)) !important; +} + +.agent-model-picker-popover .canvas-model-picker-two-pane { + grid-template-columns: minmax(0, 1fr) !important; +} + +.agent-model-picker-popover .canvas-model-picker-brand-rail { + display: none !important; +} + +.agent-model-picker-popover .canvas-model-picker-model-pane { + min-width: 0 !important; +} + /* Flex 子页必须允许收缩,长模型名和 Skill 文案不能决定窗口宽度。 */ .canvas-agent-panel > div, .canvas-agent-settings, diff --git a/web/src/components/layout/app-changelog-dialog.tsx b/web/src/components/layout/app-changelog-dialog.tsx index 32d7cf701..f25935047 100644 --- a/web/src/components/layout/app-changelog-dialog.tsx +++ b/web/src/components/layout/app-changelog-dialog.tsx @@ -11,7 +11,6 @@ export function AppChangelogDialog({ open, onClose }: { open: boolean; onClose: return ( @@ -30,6 +29,7 @@ export function AppChangelogDialog({ open, onClose }: { open: boolean; onClose: footer={null} centered onCancel={onClose} + styles={{ body: { padding: 0 } }} modalRender={(node) => ( {node} diff --git a/web/src/components/model-picker.tsx b/web/src/components/model-picker.tsx index 7414f94f5..17f6dfd37 100644 --- a/web/src/components/model-picker.tsx +++ b/web/src/components/model-picker.tsx @@ -258,7 +258,7 @@ export function ModelPicker({ disabledReason={disabledReason} showDescription={selected || previewedModel === displayModel} /> - {selected ? : null} + {selected ? : null} ); })} @@ -353,13 +353,17 @@ function ModelLabel({ - + {pickerModelDisplayName(config, model, showConfiguredModelName)} {capabilitySummary} - {showPrice ? : null} + {showPrice ? ( + + + + ) : null} {!creationVariant && meta.time ? ( {meta.time} diff --git a/web/src/components/ui/aceternity/hover-border-gradient.tsx b/web/src/components/ui/aceternity/hover-border-gradient.tsx index 974130405..019893382 100644 --- a/web/src/components/ui/aceternity/hover-border-gradient.tsx +++ b/web/src/components/ui/aceternity/hover-border-gradient.tsx @@ -43,7 +43,7 @@ export function HoverBorderGradient({ onMouseLeave, ...props }: HoverBorderGradientProps) { - const Tag = (as || "button") as ElementType; + const Tag = (as || "button") as any; const reducedMotion = useReducedMotion(); const [hovered, setHovered] = useState(false); const [direction, setDirection] = useState("TOP"); @@ -58,15 +58,15 @@ export function HoverBorderGradient({ return ( ) => { setHovered(true); - onMouseEnter?.(event as never); + (onMouseEnter as any)?.(event); }} onMouseLeave={(event: MouseEvent) => { setHovered(false); - onMouseLeave?.(event as never); + (onMouseLeave as any)?.(event); }} >
{children}
diff --git a/web/src/lib/app-theme.ts b/web/src/lib/app-theme.ts index dc52613fd..219a2315b 100644 --- a/web/src/lib/app-theme.ts +++ b/web/src/lib/app-theme.ts @@ -354,6 +354,20 @@ export function getAntThemeConfig(dark: boolean, skinID: unknown = "classic"): T headerFontSize: 15, bodyPadding: 18, }, + Message: { + contentBg: elevatedBackground, + contentPadding: "10px 18px", + }, + Notification: { + colorBgElevated: elevatedBackground, + }, + Tooltip: { + colorBgSpotlight: elevatedBackground, + colorTextLightSolid: color.selectedFg, + }, + Popover: { + colorBgElevated: elevatedBackground, + }, }, }; } @@ -385,6 +399,9 @@ export function getWorkspaceAntThemeConfig(): ThemeConfig { Dropdown: { borderRadiusLG: 16, controlItemBgHover: "var(--user-surface-muted)", paddingBlock: 6 }, Modal: { borderRadiusLG: 20 }, Popconfirm: { borderRadiusLG: 16 }, + Message: { borderRadiusLG: 14, contentPadding: "10px 18px" }, + Notification: { borderRadiusLG: 18 }, + Tooltip: { borderRadius: 8 }, }, }; } diff --git a/web/src/pages/create/creation-product.css b/web/src/pages/create/creation-product.css index 579e67c79..6b9df9301 100644 --- a/web/src/pages/create/creation-product.css +++ b/web/src/pages/create/creation-product.css @@ -6,7 +6,32 @@ .creation-mode-button[aria-pressed="true"], .creation-mode-button:hover { color: var(--user-ink); } .creation-mode-button:active { transform: scale(.97); } .creation-mode-button:focus-visible { outline: 2px solid var(--user-accent); outline-offset: 2px; } -.creation-mode-spark { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .42; box-shadow: none; } +.creation-mode-spark { + width: 6px; + height: 6px; + border-radius: 50%; + background: #6366f1; + box-shadow: 0 0 8px rgba(99, 102, 241, 0.65); + animation: creation-mode-spark-pulse 2s ease-in-out infinite; +} + +.dark .creation-mode-spark { + background: #818cf8; + box-shadow: 0 0 10px rgba(129, 140, 248, 0.85); +} + +@keyframes creation-mode-spark-pulse { + 0%, 100% { + transform: scale(0.85); + opacity: 0.45; + box-shadow: 0 0 4px rgba(99, 102, 241, 0.4); + } + 50% { + transform: scale(1.3); + opacity: 1; + box-shadow: 0 0 10px rgba(99, 102, 241, 0.9), 0 0 16px rgba(99, 102, 241, 0.45); + } +} .creation-agent-entry { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 16px 24px; padding: 28px; margin-bottom: 20px; border-radius: var(--user-radius-card); background: var(--user-surface); animation: product-card-enter var(--product-enter) var(--product-ease) backwards; } .creation-agent-orb { grid-row: span 2; } .creation-agent-eyebrow { font-size: 10px; font-weight: 650; letter-spacing: .14em; color: var(--user-accent); } diff --git a/web/src/pages/plugins/index.tsx b/web/src/pages/plugins/index.tsx index 80603a2ff..ad3ed4ea5 100644 --- a/web/src/pages/plugins/index.tsx +++ b/web/src/pages/plugins/index.tsx @@ -87,7 +87,6 @@ export default function PluginsPage() { const [detailsRestoreFocus, setDetailsRestoreFocus] = useState(false); const [search, setSearch] = useState(""); const [categoryFilter, setCategoryFilter] = useState("all"); - const [scrollTarget, setScrollTarget] = useState(null); const [statusFilter, setStatusFilter] = useState<"all" | "enabled" | "disabled">("all"); const [trustFilter, setTrustFilter] = useState<"all" | "trusted">("all"); const [eagleBaseUrl, setEagleBaseUrl] = useState("http://localhost:41595"); @@ -96,7 +95,6 @@ export default function PluginsPage() { const [eagleFolders, setEagleFolders] = useState([]); const [eagleFoldersLoading, setEagleFoldersLoading] = useState(false); const [eagleFoldersError, setEagleFoldersError] = useState(""); - const sectionRefs = useRef>({}); useEffect(() => { for (const plugin of builtinPlugins) ensurePlugin(plugin.manifest); @@ -168,24 +166,15 @@ export default function PluginsPage() { [categoryFilter, filteredPlugins], ); + const scrollContainerRef = useRef(null); + const selectCategory = (key: string) => { setCategoryFilter(key); - setScrollTarget(key === "all" ? null : key); + if (scrollContainerRef.current) { + scrollContainerRef.current.scrollTop = 0; + } }; - useEffect(() => { - if (!scrollTarget) return; - const section = sectionRefs.current[scrollTarget]; - if (!section) return; - - const frame = window.requestAnimationFrame(() => { - const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; - section.scrollIntoView({ behavior: reducedMotion ? "auto" : "smooth", block: "start" }); - setScrollTarget(null); - }); - return () => window.cancelAnimationFrame(frame); - }, [pluginSections, scrollTarget]); - const categoryCounts = useMemo(() => { const visiblePlugins = registeredPlugins.filter((plugin) => user?.role === "admin" || features.systemPluginsVisibleToUsers || isOfficialApplicationPluginId(plugin.manifest.id)); const counts: Record = { all: visiblePlugins.length, text: 0, image: 0, video: 0, audio: 0, payment: 0, other: 0 }; @@ -248,7 +237,7 @@ export default function PluginsPage() { return (
-
+