feat(ui): 优化模型选择器交互、插件页分类留白、更新日志与暗黑模式适配

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,

web/src/components/layout/app-changelog-dialog.tsx

@@ -11,7 +11,6 @@ export function AppChangelogDialog({ open, onClose }: { open: boolean; onClose:
 
     return (
         <AppModal
-            flush
             rootClassName="app-spatial-modal app-changelog-modal"
             title={
                 <div className="app-changelog-heading">
@@ -30,6 +29,7 @@ export function AppChangelogDialog({ open, onClose }: { open: boolean; onClose:
             footer={null}
             centered
             onCancel={onClose}
+            styles={{ body: { padding: 0 } }}
             modalRender={(node) => (
                 <motion.div initial={reducedMotion ? false : { opacity: 0, y: 14, scale: 0.975 }} animate={{ opacity: 1, y: 0, scale: 1 }} transition={{ duration: aceternityMotion.duration.panel, ease: aceternityMotion.easing.enter }}>
                     {node}

web/src/components/model-picker.tsx

@@ -258,7 +258,7 @@ export function ModelPicker({
                                             disabledReason={disabledReason}
                                             showDescription={selected || previewedModel === displayModel}
                                         />
-                                        {selected ? <Check className="canvas-model-picker-option-check" style={{ color: theme.node.activeStroke }} /> : null}
+                                        {selected ? <Check className="canvas-model-picker-option-check ml-1 shrink-0" style={{ color: theme.node.activeStroke }} /> : null}
                                     </button>
                                 );
                             })}
@@ -353,13 +353,17 @@ function ModelLabel({
             <span className="grid size-6 shrink-0 place-items-center rounded-md" style={{ background: theme.toolbar.itemHover }}>
                 <ModelIcon config={config} model={model} />
             </span>
-            <span className="min-w-0 flex-1 overflow-hidden">
+            <span className="min-w-44 flex-1 overflow-hidden">
                 <span className="block min-w-0 truncate text-[var(--fs-label)] font-medium leading-none">{pickerModelDisplayName(config, model, showConfiguredModelName)}</span>
                 <span className={cn("canvas-model-picker-description mt-1 block truncate text-[var(--fs-tiny)]", showDescription && "is-visible")} style={{ color: theme.node.muted }} title={capabilitySummary}>
                     {capabilitySummary}
                 </span>
             </span>
-            {showPrice ? <ModelPrice price={modelMenuPrice(config, model, capability, true)} /> : null}
+            {showPrice ? (
+                <span className="ml-auto shrink-0 pl-2">
+                    <ModelPrice price={modelMenuPrice(config, model, capability, true)} />
+                </span>
+            ) : 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}