feat(admin/core/theme): 添加 Theme.transitionDuration 方法用于获取 CSS 中的动画过渡时长

caixw · caixw · commit 0473a6bbb692 · 2025-03-14T10:38:18.000+08:00
diff --git a/admin/package.json b/admin/package.json
@@ -100,19 +100,19 @@
         "bowser": "^2.11.0",
         "echarts": "^5.6.0",
         "intl-messageformat": "^10.7.15",
-        "material-symbols": "^0.29.0",
+        "material-symbols": "^0.29.1",
         "printd": "^1.6.0",
         "qr-code-styling": "^1.9.1",
         "quill": "^2.0.3",
         "solid-js": "^1.9.5",
         "solid-transition-group": "^0.3.0",
-        "tailwindcss": "^4.0.12",
+        "tailwindcss": "^4.0.14",
         "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
         "yaml": "^2.7.0"
     },
     "devDependencies": {
         "@solidjs/testing-library": "^0.8.10",
-        "@tailwindcss/vite": "^4.0.12",
+        "@tailwindcss/vite": "^4.0.14",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/user-event": "^14.6.1",
         "@types/node": "^22.13.10",
diff --git a/admin/src/components/tree/list/list.tsx b/admin/src/components/tree/list/list.tsx
@@ -10,6 +10,7 @@ import { Divider } from '@/components/divider';
 import { Icon } from '@/components/icon';
 import type { Props as ContainerProps } from '@/components/tree/container';
 import { findItems, type Item } from '@/components/tree/item';
+import { sleep, Theme } from '@/core';
 
 export interface Props extends ContainerProps {
     /**
@@ -48,13 +49,22 @@ export function List(props: Props): JSX.Element {
     let oldValue: string|undefined = undefined;
     const [selected, setSelected] = createSignal<string|undefined>(props.selected ?? (props.anchor ? useLocation().pathname : undefined));
     const [selectedIndexes, setSelectedIndexes] = createSignal(findItems(props.children, selected()));// 选中项在每一层中的索引
+    const [ref, setRef] = createSignal<HTMLElement>(); // 记录最终选中项
 
     createEffect(() => {
         oldValue = untrack(selected);
         setSelected(props.selected);
         setSelectedIndexes(findItems(props.children, props.selected));
     });
 
+    createEffect(() => {
+        if (ref()) {
+            sleep(Theme.transitionDuration(300)).then(() => { // 等待动画完成，再滚动。否则先滚动到指定位置，再展开，将显示错位。
+                ref()!.scrollIntoView({ block: 'center' });
+            });
+        }
+    });
+
     const All = (p: { items: Array<Item>, indent: number, selectedIndex: number }): JSX.Element => {
         return <For each={p.items}>
             {(item, index) => {
@@ -96,7 +106,7 @@ export function List(props: Props): JSX.Element {
             setOpen(p.isSelected);
 
             if (p.isSelected && ref) {
-                ref.scrollIntoView({ block: 'center' });
+                setRef(ref);
             }
         });
 
diff --git a/admin/src/core/theme/contrast.ts b/admin/src/core/theme/contrast.ts
@@ -20,7 +20,7 @@ export function getContrast(conf: Config, preset: Contrast) {
     if (!c) {
         c = preset;
     } else if (contrasts.indexOf(c) < 0) {
-        console.warn(`从 localStorage 读取的 ${key} 值 ${c} 不符合要求！`);
+        console.warn(`从 conf 读取的 ${key} 值 ${c} 不符合要求！`);
         c = 'nopreference';
     }
     return c;
diff --git a/admin/src/core/theme/scheme.ts b/admin/src/core/theme/scheme.ts
@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2024 caixw
+// SPDX-FileCopyrightText: 2024-2025 caixw
 //
 // SPDX-License-Identifier: MIT
 
@@ -66,8 +66,8 @@ export function genScheme(primary: number, error?: number, step = 60): Scheme {
 
 export function genSchemes(primary: number, size = 16, step = 60): Array<Scheme> {
     const schemes: Array<Scheme> = [];
-    for(let i =0;i<size;i++) {
-        schemes.push(genScheme(primary+i*48, undefined, step));
+    for (let i = 0; i < size; i++) {
+        schemes.push(genScheme(primary + i * 48, undefined, step));
     }
     return schemes;
-}
+}
diff --git a/admin/src/core/theme/theme.spec.ts b/admin/src/core/theme/theme.spec.ts
@@ -0,0 +1,53 @@
+// SPDX-FileCopyrightText: 2025 caixw
+//
+// SPDX-License-Identifier: MIT
+
+import { describe, expect, test } from 'vitest';
+
+import { Config } from '@/core/config';
+import { Theme } from './theme';
+import './theme.css';
+
+describe('Theme', () => {
+    Theme.init(new Config('id'), Theme.genScheme(10));
+
+    test('transitionDuration', () => {
+        expect(Theme.transitionDuration(100)).toEqual(100);
+
+        document.documentElement.style.setProperty('--transition-duration', '300ms');
+        expect(Theme.transitionDuration(100)).toEqual(300);
+
+        document.documentElement.style.setProperty('--transition-duration', '300s');
+        expect(Theme.transitionDuration(100)).toEqual(300 * 1000);
+
+        document.documentElement.style.setProperty('--transition-duration', '300');
+        expect(Theme.transitionDuration(100)).toEqual(300);
+    });
+
+    test('mode', () => {
+        Theme.setMode('dark');
+        expect(Theme.mode()).toEqual('dark');
+
+        Theme.setMode('system');
+        expect(Theme.mode()).toEqual('system');
+
+        Theme.setMode('light');
+        expect(Theme.mode()).toEqual('light');
+    });
+
+    test('contrast', () => {
+        Theme.setContrast('less');
+        expect(Theme.contrast()).toEqual('less');
+
+        Theme.setContrast('more');
+        expect(Theme.contrast()).toEqual('more');
+    });
+
+    test('scheme', () => {
+        Theme.setScheme(Theme.genScheme(10));
+        expect(Theme.scheme().primary).toEqual(10);
+
+        Theme.setScheme(Theme.genScheme(100));
+        expect(Theme.scheme().primary).toEqual(100);
+    });
+});
diff --git a/admin/src/core/theme/theme.ts b/admin/src/core/theme/theme.ts
@@ -36,6 +36,27 @@ export class Theme {
         Theme.switchConfig(conf);
     }
 
+    /**
+     * 获取动画的过滤时间，即 CSS 的 --transition-duration 变量的值。
+     *
+     * @param preset 默认值，找不到时返回该值，单位为毫秒；
+     * @param 返回以毫秒为单位的数值；
+     */
+    static transitionDuration(preset: number): number {
+        let val = getComputedStyle(document.documentElement).getPropertyValue('--transition-duration');
+        if (!val) {
+            return preset;
+        }
+
+        if (val.endsWith('ms')) {
+            return parseInt(val.substring(0, val.length - 2));
+        } else if (val.endsWith('s')) {
+            return parseInt(val.substring(0, val.length - 1))*1000;
+        } else { // 其它直接当作数值处理
+            return parseInt(val);
+        }
+    }
+
     /**
      * 切换配置
      */
diff --git a/cmd/admin/package.json b/cmd/admin/package.json
@@ -23,7 +23,7 @@
     "dependencies": {
         "@cmfx/admin": "0.8.12",
         "@solidjs/router": "^0.15.3",
-        "tailwindcss": "^4.0.12",
+        "tailwindcss": "^4.0.14",
         "solid-js": "^1.9.5"
     },
     "devDependencies": {
@@ -33,7 +33,7 @@
         "cssnano": "^7.0.6",
         "postcss": "^8.5.3",
         "solid-devtools": "^0.33.0",
-        "@tailwindcss/vite": "^4.0.12",
+        "@tailwindcss/vite": "^4.0.14",
         "typescript": "^5.8.2",
         "vite": "^6.2.1",
         "vite-plugin-solid": "^2.11.6"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export function getContrast(conf: Config, preset: Contrast) {`
`20`	`20`	`if (!c) {`
`21`	`21`	`c = preset;`
`22`	`22`	`} else if (contrasts.indexOf(c) < 0) {`
`23`		- console.warn(`从 localStorage 读取的 ${key} 值 ${c} 不符合要求！`);
	`23`	+ console.warn(`从 conf 读取的 ${key} 值 ${c} 不符合要求！`);
`24`	`24`	`c = 'nopreference';`
`25`	`25`	`}`
`26`	`26`	`return c;`