refactor(admin/pages/current): 对登录页的自定义功能多配置文件移至该页面的属性定义

admin/src/app/options/options.ts

@@ -11,13 +11,6 @@ import type { MenuItem, Routes } from './route';
  * 基本配置
  */
 export interface Options {
-    /**
-     * 页脚的一些链接或是文本内容
-     *
-     * NOTE: 登录页有此内容，其它页面由用户自行决定是否添加。
-     */
-    footer?: Array<Link>;
-
     /**
      * 网站的标题
      */
@@ -177,8 +170,3 @@ export function build(o: Options): Required<Options> {
 
     return opt;
 }
-
-interface Link {
-    title: string;
-    link?: string;
-}

admin/src/components/page/page.tsx

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: MIT
 
-import { createEffect, ParentProps } from 'solid-js';
+import { createEffect, JSX, ParentProps, splitProps } from 'solid-js';
 
 import { useApp } from '@/app/context';
 import { BaseProps } from '@/components/base';
@@ -14,6 +14,10 @@ export interface Props extends BaseProps, ParentProps {
     title: string;
 
     class?: string;
+
+    classList?: JSX.CustomAttributes<HTMLElement>['classList'];
+
+    style?: JSX.HTMLAttributes<HTMLElement>['style'];
 }
 
 /**
@@ -28,7 +32,14 @@ export default function (props: Props) {
         ctx.title = ctx.locale().t(props.title);
     });
 
-    return <div class={props.class ? props.class + ' c--page' : 'c--page'}>
+    const [_, other] = splitProps(props, ['title', 'children']);
+    if ('classList' in other) {
+        other['classList'] = { ...other['classList'], 'c--page':true};
+    } else {
+        other['classList'] = { 'c--page': true };
+    }
+
+    return <div {...other}>
         {props.children}
     </div>;
 }

admin/src/pages/current/login.tsx

@@ -3,27 +3,43 @@
 // SPDX-License-Identifier: MIT
 
 import { Navigate, useNavigate } from '@solidjs/router';
-import { createSignal, JSX, Match, onMount, Switch } from 'solid-js';
+import { createSignal, For, JSX, Match, onMount, Show, Switch } from 'solid-js';
 
 import { useApp, useOptions } from '@/app/context';
 import { buildEnumsOptions, Button, Choice, FieldAccessor, Icon, ObjectAccessor, Page, Password, TextField } from '@/components';
 import { Account } from '@/core';
-import { For, Show } from 'solid-js';
+
+interface Props {
+    /**
+     * 用以指定登录页面的 background-image 属性
+     */
+    bg?: string;
+
+    /**
+     * 登录页面底部的链接
+     */
+    footer?: Array<Link>;
+}
+
+interface Link {
+    title: string;
+    link?: string;
+}
 
 /**
  * 登录页面
  */
-export default function (): JSX.Element {
+export default function (props: Props): JSX.Element {
     const ctx = useApp();
     const opt = useOptions();
 
     return <Switch>
         <Match when={ctx.isLogin()}><Navigate href={opt.routes.private.home} /></Match>
-        <Match when={!ctx.isLogin()}><Login /></Match>
+        <Match when={!ctx.isLogin()}><Login {...props} /></Match>
     </Switch>;
 }
 
-export function Login(): JSX.Element {
+export function Login(props: Props): JSX.Element {
     const ctx = useApp();
     const opt = useOptions();
     const nav = useNavigate();
@@ -42,7 +58,7 @@ export function Login(): JSX.Element {
 
     const f = new ObjectAccessor<Account>({ username: '', password: '' });
 
-    return <Page title="_i.page.current.login" class="p--login">
+    return <Page title="_i.page.current.login" class="p--login" style={{'background-image':props.bg}}>
         <form onReset={()=>f.reset()} onSubmit={async()=>{
             const ret = await ctx.login(f.object(), passport.getValue());
             if (ret === true) {
@@ -66,9 +82,9 @@ export function Login(): JSX.Element {
             <Button palette='secondary' disabled={f.isPreset()} type="reset">{ ctx.locale().t('_i.reset') }</Button>
         </form>
 
-        <Show when={opt.footer && opt.footer.length > 0}>
+        <Show when={props.footer && props.footer.length > 0}>
             <footer>
-                <For each={opt.footer}>
+                <For each={props.footer}>
                     {(item)=>(
                         <Switch fallback={<p innerHTML={item.title} />}>
                             <Match when={item.link}>

cmd/admin/src/main.tsx

@@ -35,7 +35,11 @@ const routes: Routes = {
     public: {
         home: '/login',
         routes: [
-            { path: '/login', component: pages.current.Login },
+            { path: '/login', component: ()=><pages.current.Login footer={[
+                {title: '&copy; 2024 by Example .Inc', link: 'https://example.com'},
+                {title: 'aaaabbbcccdddeeefff'},
+                {title: 'repo', link: 'https://github.com/issue/cmfx'},
+            ]} /> },
         ]
     },
     private: {
@@ -104,12 +108,6 @@ const o: Options = {
         defaultSize: 20
     },
 
-    footer: [
-        {title: '&copy; 2024 by Example .Inc', link: 'https://example.com'},
-        {title: 'aaaabbbcccdddeeefff'},
-        {title: 'repo', link: 'https://github.com/issue/cmfx'},
-    ],
-
     title: 'Title',
     logo: 'icon.svg',
     menus: menus,