refactor(web): 样式体系 - 拆分模型选择、滚动条与编辑器样式

web/test/canvas-file-upload-style.test.ts

@@ -0,0 +1,32 @@
+import { expect, test } from "bun:test";
+
+test("画布文件上传占位样式由组件独立加载", async () => {
+    const [component, globals, styles] = await Promise.all([
+        Bun.file(new URL("../src/components/canvas/canvas-file-upload-content.tsx", import.meta.url)).text(),
+        Bun.file(new URL("../src/styles/globals.css", import.meta.url)).text(),
+        Bun.file(new URL("../src/components/canvas/canvas-file-upload.css", import.meta.url)).text(),
+    ]);
+
+    expect(component).toContain('import "./canvas-file-upload.css";');
+    expect(globals).not.toContain(".canvas-file-upload {");
+    expect(globals).not.toContain("@keyframes canvas-file-upload-drift");
+    expect(styles).toContain(".canvas-file-upload {");
+    expect(styles).toContain(".canvas-file-upload-retry:focus-visible");
+    expect(styles).toContain("@keyframes canvas-file-upload-drift");
+    expect(styles).toContain("@media (prefers-reduced-motion: reduce)");
+});
+
+test("React Aria 浮层动画保留全局入口，但不再占用 globals.css", async () => {
+    const [application, globals, styles] = await Promise.all([
+        Bun.file(new URL("../src/application.tsx", import.meta.url)).text(),
+        Bun.file(new URL("../src/styles/globals.css", import.meta.url)).text(),
+        Bun.file(new URL("../src/styles/shared/overlays.css", import.meta.url)).text(),
+    ]);
+
+    expect(application).toContain('import "./styles/shared/overlays.css";');
+    expect(globals).not.toContain("@keyframes ra-pop-in");
+    expect(globals).not.toContain(".ra-pop-in {");
+    expect(styles).toContain("@keyframes ra-pop-in");
+    expect(styles).toContain('.ra-pop-in[data-placement^="bottom"]');
+    expect(styles).toContain("prefers-reduced-motion: reduce");
+});

web/test/model-picker-style-source.test.ts

@@ -0,0 +1,27 @@
+import { expect, test } from "bun:test";
+
+test("ModelPicker 样式独立加载，并保留模型列表的视口边界", async () => {
+    const [application, globals, pickerStyles] = await Promise.all([
+        Bun.file(new URL("../src/application.tsx", import.meta.url)).text(),
+        Bun.file(new URL("../src/styles/globals.css", import.meta.url)).text(),
+        Bun.file(new URL("../src/styles/shared/model-picker.css", import.meta.url)).text(),
+    ]);
+
+    expect(application).toContain('import "./styles/shared/model-picker.css";');
+    expect(globals).not.toContain("canvas-model-picker");
+    expect(pickerStyles).toContain(".canvas-model-picker-menu {");
+    expect(pickerStyles).toContain("max-height: min(420px, calc(100vh - 32px));");
+
+    const creationMenu = pickerStyles.match(/\.creation-model-picker-menu \{([\s\S]*?)\}/)?.[1] || "";
+    expect(creationMenu).toContain("max-height: min(460px, calc(100vh - 24px));");
+    expect(creationMenu).toContain("overflow-y: auto;");
+    expect(pickerStyles).toContain(".app-user-workspace .creation-model-picker-menu.is-brand-list");
+    expect(pickerStyles).toContain(".creation-model-picker-surface .creation-model-picker-menu.is-model-list");
+    expect(pickerStyles).toContain(".creation-model-picker-surface .creation-model-picker-menu.is-brand-list");
+
+    const modelList = pickerStyles.match(/\.creation-model-picker-surface \.creation-model-picker-menu\.is-model-list \{([\s\S]*?)\}/)?.[1] || "";
+    expect(modelList).toContain("max-height: min(460px, calc(100vh - 24px)) !important;");
+    expect(modelList).toContain("overflow-y: auto !important;");
+    expect(pickerStyles).not.toContain(".app-user-workspace .creation-model-picker-menu {");
+    expect(pickerStyles).not.toContain(".creation-model-picker-surface .creation-model-picker-menu {");
+});

web/test/scrollbar-style-source.test.ts

@@ -0,0 +1,32 @@
+import { expect, test } from "bun:test";
+
+test("滚动条样式按复用边界拆分，并保持全局入口可用", async () => {
+    const [application, globals, shared, creation, creationWorkspace, editor, editorShell] = await Promise.all([
+        Bun.file(new URL("../src/application.tsx", import.meta.url)).text(),
+        Bun.file(new URL("../src/styles/globals.css", import.meta.url)).text(),
+        Bun.file(new URL("../src/styles/shared/scrollbars.css", import.meta.url)).text(),
+        Bun.file(new URL("../src/pages/create/creation-scrollbars.css", import.meta.url)).text(),
+        Bun.file(new URL("../src/pages/create/creation-workspace.tsx", import.meta.url)).text(),
+        Bun.file(new URL("../src/lib/plugins/builtin/editor/editor-shell.css", import.meta.url)).text(),
+        Bun.file(new URL("../src/lib/plugins/builtin/editor/editor-shell.tsx", import.meta.url)).text(),
+    ]);
+
+    expect(application).toContain('import "./styles/shared/scrollbars.css";');
+    expect(globals).not.toContain(".hide-scrollbar {");
+    expect(globals).not.toContain(".thin-scrollbar {");
+    expect(globals).not.toContain(".storyboard-scrollbar {");
+    expect(globals).not.toContain(".hover-scrollbar {");
+    expect(globals).not.toContain(".creation-scrollbar {");
+    expect(globals).not.toContain(".director-scroll {");
+    expect(globals).not.toContain(".editor-slider {");
+
+    expect(shared).toContain(".hide-scrollbar {");
+    expect(shared).toContain(".thin-scrollbar {");
+    expect(shared).toContain(".storyboard-scrollbar {");
+    expect(shared).toContain(".hover-scrollbar {");
+    expect(creation).toContain(".creation-scrollbar {");
+    expect(creationWorkspace).toContain('import "./creation-scrollbars.css";');
+    expect(editor).toContain(".director-scroll {");
+    expect(editor).toContain(".editor-slider {");
+    expect(editorShell).toContain('import "./editor-shell.css";');
+});