Merge branch 'dev.admin/settings'

issue9 · Oct 5, 2024 · 5c14801 · 5c14801
2 parents 01af193 + 73d8afa
commit 5c14801
Show file tree

Hide file tree

Showing 38 changed files with 668 additions and 832 deletions.
diff --git a/admin/package.json b/admin/package.json
@@ -95,24 +95,24 @@
         "echarts": "^5.5.1",
         "intl-messageformat": "^10.5.14",
         "localforage": "^1.10.0",
-        "material-symbols": "^0.23.0",
+        "material-symbols": "^0.24.0",
         "quill": "^2.0.2",
         "solid-js": "^1.9.1",
         "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
     },
     "devDependencies": {
-        "@types/node": "^22.7.3",
-        "@vitest/coverage-v8": "^2.1.1",
+        "@types/node": "^22.7.4",
+        "@vitest/coverage-v8": "^2.1.2",
         "autoprefixer": "^10.4.20",
         "cssnano": "^7.0.6",
         "jsdom": "^25.0.1",
         "postcss": "^8.4.47",
         "tailwindcss": "^3.4.13",
         "typescript": "^5.6.2",
         "vite": "^5.4.8",
-        "vite-plugin-dts": "^4.2.2",
+        "vite-plugin-dts": "^4.2.3",
         "vite-plugin-solid": "^2.10.2",
-        "vitest": "^2.1.1",
+        "vitest": "^2.1.2",
         "vitest-fetch-mock": "^0.3.0"
     }
 }
diff --git a/admin/src/app/app.tsx b/admin/src/app/app.tsx
@@ -6,13 +6,12 @@ import { HashRouter } from '@solidjs/router';
 import { JSX, Show, createSignal } from 'solid-js';
 import { render } from 'solid-js/web';
 
-import { Drawer, Notify, SystemDialog } from '@/components';
+import { Notify, SystemDialog } from '@/components';
 import { API, Locale } from '@/core';
 import { buildContext } from './context';
 import * as errors from './errors';
 import { Options, build as buildOptions } from './options';
 import { Private } from './private';
-import XSetting from './settings';
 import { default as Toolbar } from './toolbar';
 
 /**
@@ -46,22 +45,15 @@ export async function create(elementID: string, o: Options) {
 function App(props: {opt: Required<Options>, f: API}) {
     const { Provider } = buildContext(props.opt, props.f); // buildContext 必须在组件内使用！
 
-    const [settingsVisible, setSettingsVisible] = createSignal(false);
     const [menuVisible, setMenuVisible] = createSignal(true);
 
     const Root = (p: { children?: JSX.Element }) => (<Provider>
         <Show when={props.opt.system.dialog}>
             <SystemDialog palette='surface' />
         </Show>
         <div class="app palette--surface">
-            <Toolbar settingsVisibleGetter={settingsVisible} settingsVisibleSetter={setSettingsVisible}
-                menuVisibleGetter={menuVisible} menuVisibleSetter={setMenuVisible} />
-            <main class="app-main">
-                <Drawer pos="right" palette='secondary' main={p.children} floating
-                    visible={settingsVisible()} close={() => setSettingsVisible(false)}>
-                    <XSetting />
-                </Drawer>
-            </main>
+            <Toolbar menuVisibleGetter={menuVisible} menuVisibleSetter={setMenuVisible} />
+            <main class="app-main">{p.children}</main>
         </div>
     </Provider>);
 

diff --git a/admin/src/app/context/context.tsx b/admin/src/app/context/context.tsx
@@ -8,7 +8,10 @@ import { JSX, createContext, createResource, createSignal, useContext } from 'so
 
 import { Options as buildOptions } from '@/app/options';
 import { NotifyType } from '@/components/notify';
-import { API, Theme, Account, Locale, Method, Problem, notify, Breakpoint } from '@/core';
+import {
+    API, Theme, Config, Account, Locale, Method,
+    Problem, notify, Breakpoint, UnitStyle,
+} from '@/core';
 import { createUser } from './user';
 
 type Options = Required<buildOptions>;
@@ -19,6 +22,9 @@ const appContext = createContext<AppContext>();
 
 const optContext = createContext<Options>();
 
+// 保存于 sessionStorage 中的表示当前登录用户的 id
+const currentKey = 'current';
+
 /**
  * 提供应用内的全局操作方法
  */
@@ -42,17 +48,22 @@ export function useOptions(): Options {
 }
 
 export function buildContext(opt: Required<buildOptions>, f: API) {
-    const [user, { refetch }] = createUser(f, opt.api.info);
+    const [user, userData] = createUser(f, opt.api.info);
 
-    const [localeGetter, localeSetter] = createSignal<string>(navigator.language);
-    const [locale] = createResource(localeGetter, (info) => {
-        return Locale.build(info);
-    });
+    let uid = sessionStorage.getItem(currentKey) ?? '';
 
-    Theme.init(opt.theme.schemes[0], opt.theme.mode, opt.theme.contrast);
+    Theme.init(new Config(uid), opt.theme.schemes[0], opt.theme.mode, opt.theme.contrast);
     const [bp, setBP] = createSignal<Breakpoint>(Theme.breakpoint);
     Theme.onBreakpoint((v)=>setBP(v));
 
+    let localeID: string | undefined;
+    let unitStyle: UnitStyle | undefined;
+    const [locale, localeData] = createResource(() => {
+        const conf = new Config(uid);
+        Theme.switchConfig(conf);
+        return new Locale(conf, localeID, unitStyle);
+    });
+
     const ctx = {
         isLogin() { return f.isLogin(); },
 
@@ -157,7 +168,10 @@ export function buildContext(opt: Required<buildOptions>, f: API) {
         async login(account: Account) {
             const ret = await f.login(account);
             if (ret === true) {
-                await refetch();
+                uid = account.username;
+                sessionStorage.setItem(currentKey, uid);
+                await userData.refetch();
+                await localeData.refetch();
             }
             return ret;
         },
@@ -167,7 +181,9 @@ export function buildContext(opt: Required<buildOptions>, f: API) {
          */
         async logout() {
             await f.logout();
-            await refetch();
+            sessionStorage.removeItem(currentKey);
+            await userData.refetch();
+            await localeData.refetch();
         },
 
         /**
@@ -178,7 +194,7 @@ export function buildContext(opt: Required<buildOptions>, f: API) {
         /**
          * 触发更新用户的事件
          */
-        async updateUser() { await refetch(); },
+        async updateUser() { await userData.refetch(); },
 
         set title(v: string) {
             if (v) {
@@ -219,7 +235,15 @@ export function buildContext(opt: Required<buildOptions>, f: API) {
          *
          * @param id 本地化 ID
          */
-        switchLocale(id: string) { localeSetter(id); },
+        switchLocale(id: string) {
+            localeID = id;
+            localeData.refetch();
+        },
+
+        switchUnitStyle(style: UnitStyle) {
+            unitStyle = style;
+            localeData.refetch();
+        },
     };
 
     const Provider = (props: { children: JSX.Element }) => {

diff --git a/admin/src/app/options/options.ts b/admin/src/app/options/options.ts
@@ -4,7 +4,7 @@
 
 import {
     Contrast, PickOptional, Theme as CoreTheme, DictLoader,
-    Mimetype, Mode, Scheme, UnitDisplay
+    Mimetype, Mode, Scheme, UnitStyle
 } from '@/core';
 import type { LocaleID } from '@/messages';
 import { API, checkAPI } from './api';
@@ -108,9 +108,9 @@ export interface Locales {
     fallback: LocaleID;
 
     /**
-     * 一些与本地化相关的单位名称的显示方式，说明可参考 {@link UnitDisplay}
+     * 一些与本地化相关的单位名称的显示方式，说明可参考 {@link UnitStyle}
      */
-    unitStyle?: UnitDisplay;
+    unitStyle?: UnitStyle;
 }
 
 export interface Theme {

diff --git a/admin/src/app/private.tsx b/admin/src/app/private.tsx
@@ -5,10 +5,10 @@
 import { Navigate } from '@solidjs/router';
 import {
     Accessor, createEffect, createMemo, ErrorBoundary,
-    Match, ParentProps, Setter, Show, Switch
+    Match, ParentProps, Setter, Switch
 } from 'solid-js';
 
-import { Drawer, Item, List } from '@/components';
+import { Drawer, Item, Label, List } from '@/components';
 import { Breakpoint, compareBreakpoint, Locale } from '@/core';
 import { useApp, useOptions } from './context';
 import * as errors from './errors';
@@ -65,12 +65,7 @@ export function buildItems(l: Locale, menus: Array<MenuItem>) {
         case 'item':
             const i: Item = {
                 type: 'item',
-                label: <span class="c--icon-container">
-                    <Show when={mi.icon}>
-                        <span class="c--icon">{mi.icon}</span>
-                    </Show>
-                    {l.t(mi.label)}
-                </span>,
+                label: <Label icon={mi.icon}>{l.t(mi.label)}</Label>,
                 accesskey: mi.accesskey,
                 value: mi.path
             };

diff --git a/admin/src/app/settings.tsx b/admin/src/app/settings.tsx
diff --git a/admin/src/app/toolbar.tsx b/admin/src/app/toolbar.tsx
@@ -10,8 +10,6 @@ import { useApp, useOptions } from './context';
 import { buildItems, floatAsideWidth } from './private';
 
 interface Props {
-    settingsVisibleGetter: Accessor<boolean>;
-    settingsVisibleSetter: Setter<boolean>;
     menuVisibleGetter: Accessor<boolean>;
     menuVisibleSetter: Setter<boolean>;
 }
@@ -37,12 +35,6 @@ export default function Toolbar(props: Props) {
 
         <div class="flex gap-2">
             <Fullscreen />
-
-            <Button icon type="button" style='flat' title={ctx.locale().t('_i.settings')} rounded
-                onClick={() =>props.settingsVisibleSetter(!props.settingsVisibleGetter())}>
-                settings
-            </Button>
-
             <Username />
         </div>
     </header>;
@@ -53,10 +45,10 @@ function Username(): JSX.Element {
     const opt = useOptions();
     const [visible, setVisible] = createSignal(false);
 
-    const activator = <Button style='flat' onClick={()=>setVisible(!visible())}>{ctx.user()?.name}</Button>;
+    const activator = <Button style={/*@once*/'flat'} onClick={()=>setVisible(!visible())}>{ctx.user()?.name}</Button>;
 
     return <Show when={ctx.user()?.id}>
-        <Menu hoverable anchor direction='left' selectedClass='' activator={activator}>{buildItems(ctx.locale(), opt.userMenus)}</Menu>
+        <Menu hoverable={/*@once*/true} anchor={/*@once*/true} direction={/*@once*/'left'} selectedClass='' activator={activator}>{buildItems(ctx.locale(), opt.userMenus)}</Menu>
     </Show>;
 }
 
@@ -77,7 +69,7 @@ function Fullscreen(): JSX.Element {
         });
     };
 
-    return <Button icon type="button" style='flat' rounded onClick={toggleFullscreen} title={ctx.locale().t('_i.fullscreen')}>
+    return <Button icon={/*@once*/true} type={/*@once*/'button'} style={/*@once*/'flat'} rounded={/*@once*/true} onClick={toggleFullscreen} title={ctx.locale().t('_i.fullscreen')}>
         {fs() ? 'fullscreen_exit' : 'fullscreen'}
     </Button>;
 }
diff --git a/admin/src/components/form/radio/style.css b/admin/src/components/form/radio/style.css
@@ -8,19 +8,20 @@
 @layer components {
     .c--radio-group {
         label {
-            @apply border-2 border-transparent c--icon-container text-palette-fg;
+            @apply border-2 border-transparent c--icon-container text-palette-fg box-border;
 
             .radio-icon {
                 @apply mr-1;
             }
         }
 
         label.border {
-            @apply border-[var(--fg-low)] rounded-sm has-[:checked]:border-[var(--fg-high)];
+            @apply border-palette-bg-low rounded-sm;
+            @apply has-[:checked]:border-palette-fg-high;
         }
 
         .content {
-            @apply flex flex-wrap gap-1
+            @apply flex flex-wrap gap-1;
         }
     }
 

diff --git a/admin/src/components/icon/style.css b/admin/src/components/icon/style.css
@@ -13,6 +13,6 @@
     }
 
     .c--icon-container {
-        @apply flex items-center text-center;
+        @apply flex items-center text-center content-center;
     }
 }
diff --git a/admin/src/components/index.ts b/admin/src/components/index.ts
@@ -16,5 +16,6 @@ export * from './page';
 export * from './pagination';
 export * from './table';
 export * from './tree';
+export * from './typography';
 
 export * from './utils';
diff --git a/admin/src/components/page/page.tsx b/admin/src/components/page/page.tsx
@@ -25,10 +25,10 @@ export default function (props: Props) {
     const ctx = useApp();
 
     createEffect(() => {
-        ctx.title = ctx.locale().t(props.title as any);
+        ctx.title = ctx.locale().t(props.title);
     });
 
-    return <div class={props.class ? props.class + ' c--page' : 'c--page'} >
+    return <div class={props.class ? props.class + ' c--page' : 'c--page'}>
         {props.children}
     </div>;
 }