fix(): set ui v8-2 on html instead of body

packages/runtime/src/internal/Router.ts

@@ -47,7 +47,7 @@ import { fulfilStoryboard } from "./fulfilStoryboard.js";
 import { RenderTag } from "./enums.js";
 import { insertPreviewRoutes } from "./insertPreviewRoutes.js";
 import { devtoolsHookEmit } from "./devtools.js";
-import { setUIClassName } from "../setUIClassName.js";
+import { setUIVersion } from "../setUIVersion.js";
 
 export class Router {
   readonly #storyboards: Storyboard[];
@@ -460,7 +460,7 @@ export class Router {
         applyMode();
 
         window.DISABLE_REACT_FLUSH_SYNC = false;
-        setUIClassName(currentApp?.uiVersion);
+        setUIVersion(currentApp?.uiVersion);
         mountTree(renderRoot);
         setTimeout(() => {
           window.DISABLE_REACT_FLUSH_SYNC = true;

packages/runtime/src/setUIVersion.spec.ts

@@ -0,0 +1,22 @@
+import { describe, test, expect } from "@jest/globals";
+import { setUIVersion } from "./setUIVersion.js";
+
+describe("basic usage", () => {
+  beforeEach(() => {
+    delete document.documentElement.dataset.ui;
+  });
+
+  test("use 8.2 should work", async () => {
+    expect(document.documentElement.dataset.ui).toBe(undefined);
+
+    await setUIVersion("8.2");
+
+    expect(document.documentElement.dataset.ui).toBe("v8-2");
+  });
+
+  test("use 8.0 should work", async () => {
+    await setUIVersion("8");
+
+    expect(document.documentElement.dataset.ui).toBe("v8");
+  });
+});

packages/runtime/src/setUIVersion.ts

@@ -0,0 +1,12 @@
+export function setUIVersion(version: string | undefined | null) {
+  // 仅允许特定的 UI 版本
+  let ui: string;
+  switch (version) {
+    case "8.2":
+      ui = "v8-2";
+      break;
+    default:
+      ui = "v8";
+  }
+  document.documentElement.dataset.ui = ui;
+}

packages/theme/src/variables.css

@@ -148,11 +148,15 @@
   --card-hover-border-color: transparent;
   --card-hover-box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
 
-  --card-head-padding: 12px 20px;
-  --card-body-padding: 16px 24px;
-  --card-footer-padding: 8px 20px;
-  --card-border-color-split: rgba(232, 232, 232, 0.6);
-  --card-footer-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.08);
+  --card-head-padding-vertical: 12px;
+  --card-head-padding-horizontal: 20px;
+  --card-head-padding: var(--card-head-padding-vertical)
+    var(--card-head-padding-horizontal);
+  --card-body-padding-vertical: 16px;
+  --card-body-padding-horizontal: 24px;
+  --card-body-padding: var(--card-body-padding-vertical)
+    var(--card-body-padding-horizontal);
+  --card-border-color-split: var(--card-border-color-split);
 
   --description-header-padding: 20px 20px 0 20px;
   --description-content-padding: 6px 24px;

packages/theme/src/version/ui-v8-2.css

@@ -1,6 +1,5 @@
-/* common */
-body.ui-v8-2 {
-  --body-background: var(--color-fill-global-bg-1);
+/* default size */
+html[data-ui="v8-2"] {
   --page-title-margin-top: 9px;
   --page-title-margin-bottom: 9px;
   --page-title-font-size: 24px;
@@ -12,40 +11,45 @@ body.ui-v8-2 {
   --page-padding-top: 16px;
   /* Other page paddings are the same as default */
 
-  --wide-color: "#F4F6F9";
-
   --page-card-gap: 32px;
 
   --tab-content-padding: 16px 24px 24px 24px;
-  --tab-shadow: none;
 
   --side-bar-width: 220px;
-  --sidebar-bg: #f7f8fa;
 
-  --card-head-padding: 12px 0;
-  --card-body-padding: 16px 0;
-  --card-footer-padding: 8px 0;
-  --card-border-color-split: rgba(232, 232, 232, 0.6);
-  --card-footer-shadow: transparent;
+  --card-head-padding: var(--card-head-padding-vertical) 0;
+  --card-body-padding: var(--card-body-padding-vertical) 0;
 
   --tab-header-padding: 0;
   --tab-content-padding: 16px 0;
 
   --description-header-padding: 20px 0 0 0;
   --description-content-padding: 0;
-  --description-border-bottom-color: rgba(232, 232, 232, 0.6);
 }
 
-/* light */
-html[data-theme="light"] body.ui-v8-2 {
+/* default colors */
+html[data-ui="v8-2"],
+html[data-ui="v8-2"] [data-override-theme="light"] {
+  --body-background: var(--color-fill-global-bg-1);
+
+  --wide-color: "#F4F6F9";
+
+  --tab-shadow: none;
+
+  --sidebar-bg: #f7f8fa;
+
+  --description-border-bottom-color: rgba(232, 232, 232, 0.6);
+
   --color-fill-global-bg-1: #ffffff;
   --color-fill-global-bg-2: #ffffff;
   --color-fill-bg-container-1: #ffffff;
 }
 
-/* dark */
-html[data-theme="dark"] body.ui-v8-2,
-html[data-theme="dark-v2"] body.ui-v8-2 {
+/* dark colors */
+html[data-theme="dark"][data-ui="v8-2"],
+html[data-theme="dark-v2"][data-ui="v8-2"],
+html[data-ui="v8-2"] [data-override-theme="dark"],
+html[data-ui="v8-2"] [data-override-theme="dark-v2"] {
   --color-fill-global-bg-1: #202024;
   --color-fill-global-bg-2: #202024;
   --color-fill-bg-container-1: #202024;