Merge branch 'master' of github.com:issue9/cmfx

issue9 · Nov 2, 2024 · ec18e1d · ec18e1d
2 parents 2f8c1d1 + 4498d62
commit ec18e1d
Show file tree

Hide file tree

Showing 16 changed files with 351 additions and 561 deletions.
diff --git a/admin/package.json b/admin/package.json
@@ -89,20 +89,20 @@
         "test": "vitest --coverage.enabled true"
     },
     "dependencies": {
-        "@formatjs/intl-durationformat": "^0.5.0",
-        "@formatjs/intl-localematcher": "^0.5.5",
-        "@solidjs/router": "^0.14.10",
+        "@formatjs/intl-durationformat": "^0.6.1",
+        "@formatjs/intl-localematcher": "^0.5.6",
+        "@solidjs/router": "^0.15.0",
         "bowser": "^2.11.0",
         "echarts": "^5.5.1",
-        "intl-messageformat": "^10.7.1",
-        "material-symbols": "^0.25.1",
+        "intl-messageformat": "^10.7.3",
+        "material-symbols": "^0.25.3",
         "quill": "^2.0.2",
         "solid-js": "^1.9.3",
         "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
     },
     "devDependencies": {
-        "@types/node": "^22.7.9",
-        "@vitest/coverage-v8": "^2.1.3",
+        "@types/node": "^22.8.6",
+        "@vitest/coverage-v8": "^2.1.4",
         "autoprefixer": "^10.4.20",
         "cssnano": "^7.0.6",
         "jsdom": "^25.0.1",
@@ -112,7 +112,7 @@
         "vite": "^5.4.10",
         "vite-plugin-dts": "^4.3.0",
         "vite-plugin-solid": "^2.10.2",
-        "vitest": "^2.1.3",
-        "vitest-fetch-mock": "^0.3.0"
+        "vitest": "^2.1.4",
+        "vitest-fetch-mock": "^0.4.1"
     }
 }
diff --git a/admin/src/app/options/route.ts b/admin/src/app/options/route.ts
@@ -2,10 +2,11 @@
 //
 // SPDX-License-Identifier: MIT
 
-import { IconSymbol } from '@/components';
 import { RouteSectionProps } from '@solidjs/router';
 import { Component } from 'solid-js';
 
+import { IconSymbol } from '@/components';
+
 /**
  * 对路由的定义
  *
@@ -21,6 +22,17 @@ export interface Routes {
      * 需要登录才可查看的页面
      */
     private: Group;
+
+    /**
+     * 指定访问路径的别名
+     *
+     * 当用户访问 src 页面时，如果访问 dest 页面，但地址不会发生变化。
+     * dest 页面必须存在于 {@link Routes#public.routes} 或是 {@link Routes#private.routes} 之中。
+     */
+    alias?: Array<{
+        src: string;
+        dest: string;
+    }>;
 }
 
 interface Group {

diff --git a/admin/src/app/private.tsx b/admin/src/app/private.tsx
@@ -36,7 +36,7 @@ export function Private(props: Props) {
             <Navigate href={/*@once*/opt.routes.public.home} />
         </Match>
         <Match when={ctx.isLogin()}>
-            <Drawer floating={floating()} palette='secondary'
+            <Drawer floating={floating()} palette='secondary' mainID='main-content'
                 close={()=>props.menuVisibleSetter(false)}
                 visible={props.menuVisibleGetter()}
                 main={

diff --git a/admin/src/components/dialog/style.css b/admin/src/components/dialog/style.css
@@ -20,4 +20,8 @@
             @apply flex justify-end p-2 gap-2;
         }
     }
+
+    .c--dialog::backdrop {
+        backdrop-filter: blur(2px);
+    }
 }
diff --git a/admin/src/components/drawer/drawer.tsx b/admin/src/components/drawer/drawer.tsx
@@ -35,6 +35,8 @@ export interface Props extends BaseProps {
     children: JSX.Element;
 
     main: JSX.Element;
+
+    mainID?: string;
 }
 
 const presetProps: Readonly<Partial<Props>> = {
@@ -78,10 +80,10 @@ export default function(props: Props) {
         <Switch>
             <Match when={props.pos === 'left'}>
                 <Aside />
-                <main>{props.main}</main>
+                <main id={props.mainID}>{props.main}</main>
             </Match>
             <Match when={props.pos === 'right'}>
-                <main>{props.main}</main>
+                <main id={props.mainID}>{props.main}</main>
                 <Aside />
             </Match>
         </Switch>

diff --git a/admin/src/components/icon/icon.tsx b/admin/src/components/icon/icon.tsx
@@ -16,7 +16,7 @@ export type Props = {
 
 const presetProps: Readonly<Partial<Props>> = {
     role: 'img',
-}
+};
 
 export default function(props: Props) {
     const [, spanProps] = splitProps(mergeProps(presetProps, props), ['icon']);

diff --git a/admin/src/components/page/demo.tsx b/admin/src/components/page/demo.tsx
@@ -0,0 +1,26 @@
+// SPDX-FileCopyrightText: 2024 caixw
+//
+// SPDX-License-Identifier: MIT
+
+import { For } from 'solid-js';
+
+import { paletteSelector, Demo } from '@/components/base/demo';
+import Page from './page';
+
+export default function() {
+    const [paletteS, palette] = paletteSelector();
+    const len: Array<number> = [];
+    for (var i = 0; i<100; i++) {
+        len.push(i);
+    }
+
+    return <Demo settings={paletteS} stages={
+        <Page title="title" palette={palette()}>
+            <For each={len}>
+                {(i)=>(
+                    <>{i} <br /></>
+                )}
+            </For>
+        </Page>
+    } />;
+}
diff --git a/admin/src/components/page/page.tsx b/admin/src/components/page/page.tsx
@@ -2,10 +2,11 @@
 //
 // SPDX-License-Identifier: MIT
 
-import { createEffect, JSX, ParentProps, splitProps } from 'solid-js';
+import { createEffect, JSX, onCleanup, onMount, ParentProps, splitProps } from 'solid-js';
 
 import { useApp } from '@/app/context';
 import { BaseProps } from '@/components/base';
+import { Button, ButtonRef } from '@/components/button';
 
 export interface Props extends BaseProps, ParentProps {
     /**
@@ -32,14 +33,39 @@ export default function (props: Props) {
         ctx.title = ctx.locale().t(props.title);
     });
 
+    // 计算 class
     const [_, other] = splitProps(props, ['title', 'children']);
     if ('classList' in other) {
         other['classList'] = { ...other['classList'], 'c--page':true};
     } else {
         other['classList'] = { 'c--page': true };
     }
 
+    let main: HTMLElement;
+
+    let btn: ButtonRef;
+    const scroll = ()=>{
+        btn.style.visibility = main.scrollTop > 10 ? 'visible' : 'hidden';
+    };
+
+    onMount(()=>{
+        main = document.getElementById('main-content')!;
+        if (!main) {
+            console.error('未找到 ID 为 main-content 的元素');
+            main = btn.parentElement!;
+        }
+
+        scroll(); // 初始化状态
+        main.addEventListener('scroll', scroll);
+    });
+
+    onCleanup(()=>{ main.removeEventListener('scroll', scroll); });
+
     return <div {...other}>
         {props.children}
+
+        <Button palette='primary' ref={el=>btn=el} class="backtop" icon rounded onclick={()=>{
+            main.scrollTo({top: 0, behavior: 'smooth'});
+        }}>vertical_align_top</Button>
     </div>;
-}
+}
diff --git a/admin/src/components/page/style.css b/admin/src/components/page/style.css
@@ -6,6 +6,12 @@
 
 @layer components {
     .c--page {
-        @apply p-4 pt-6 flex flex-col gap-4 mx-auto;
+        @apply p-4 pt-6 flex flex-col gap-4 mx-auto w-full;
+
+        .backtop {
+            @apply hover:opacity-100 opacity-40 fixed right-4 bottom-4;
+            @apply transition-opacity duration-preset;
+            @apply print:hidden;
+        }
     }
 }
diff --git a/admin/src/core/theme/theme.ts b/admin/src/core/theme/theme.ts
@@ -54,14 +54,13 @@ export class Theme {
 
             // 当屏幕从大到小变化，比如从 sm 向 xs 变化，会触发 sm 事件，且其 matches 为 false，
             // 但是不会触发 xs，因为 sm 本身也是符合 xs 的条件。
-            const event = (ev: {matches: boolean}) => {
+            const event = (ev: MediaQueryListEvent) => {
                 if (ev.matches) {
                     Theme.#breakpointChange(key);
                 } else if (key != 'xs') {
                     Theme.#breakpointChange(breakpointsOrder[breakpointsOrder.indexOf(key) - 1]);
                 }
             };
-            event(mql); // 先运行一次，获取初始的 #current。
 
             mql.addEventListener('change', event);
         });

diff --git a/admin/src/demo.tsx b/admin/src/demo.tsx
@@ -19,6 +19,7 @@ export const routes: Options['routes']['private']['routes'] = [
     { path: '/table', component: lazy(() => import('@/components/table/demo')) },
     { path: '/spin', component: lazy(() => import('@/components/spin/demo')) },
     { path: '/chart', component: lazy(() => import('@/components/chart/demo')) },
+    { path: '/page', component: lazy(() => import('@/components/page/demo')) },
 
     { path: '/tree-list', component: lazy(() => import('@/components/tree/list/demo')) },
     { path: '/tree-menu', component: lazy(() => import('@/components/tree/menu/demo')) },

diff --git a/admin/src/pages/system/apis.tsx b/admin/src/pages/system/apis.tsx
@@ -52,7 +52,11 @@ export default function(): JSX.Element {
 
             { id: 'max', label: ctx.locale().t('_i.page.system.max'), content: (_: string, val: number) => { return ctx.locale().duration(val); } },
             { id: 'min', label: ctx.locale().t('_i.page.system.min'), content: (_: string, val: number) => { return ctx.locale().duration(val); } },
-            { id: 'spend', label: ctx.locale().t('_i.page.system.spend'), content: (_: string, val: number) => { return ctx.locale().duration(val); } },
+            { id: 'spend', label: ctx.locale().t('_i.page.system.spend'), content: (_: string, val: number, api?: API) => {
+                const count = api?.count!;
+                val = count > 0 ? val / count : 0;
+                return ctx.locale().duration(val);
+            } },
         ] as Array<Column<API>>} />
     </Page>;
 }
diff --git a/admin/tailwind.preset.ts b/admin/tailwind.preset.ts
@@ -74,6 +74,10 @@ const config: PresetsConfig = {
 
             minWidth: breakpoints,
             maxWidth: breakpoints,
+
+            transitionDuration: {
+                'preset':'var(--transition-duration)',
+            },
         }
     }
 };

diff --git a/cmd/admin/package.json b/cmd/admin/package.json
@@ -21,12 +21,12 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@solidjs/router": "^0.14.10",
+        "@solidjs/router": "^0.15.0",
         "admin": "0.7.0",
         "solid-js": "^1.9.3"
     },
     "devDependencies": {
-        "@types/node": "^22.7.9",
+        "@types/node": "^22.8.6",
         "@vitejs/plugin-basic-ssl": "^1.1.0",
         "autoprefixer": "^10.4.20",
         "cssnano": "^7.0.6",