feat(admin/components/page): 添加 class 属性

admin/src/app/app.tsx

@@ -36,8 +36,8 @@ export async function create(elementID: string, o: Options) {
 }
 
 /**
-* 项目的根组件
-*/
+ * 项目的根组件
+ */
 function App(props: {opt: Required<Options>, f: API}) {
     const { Provider } = buildContext(props.opt, props.f); // buildContext 必须在组件内使用！
 

admin/src/components/form/checkbox/checkbox.tsx

@@ -13,7 +13,7 @@ export interface Props extends FieldBaseProps {
     icon?: boolean;
 
     /**
-     * 复选框的默认状态，undefined 表示未确定的状态，true 为选中，false 为未选中。
+     * 复选框的初始状态，undefined 表示未确定的状态，true 为选中，false 为未选中。
      */
     checked?: boolean;
 

admin/src/components/page/page.tsx

@@ -12,19 +12,23 @@ export interface Props extends BaseProps, ParentProps {
      * 指定页面标题，可以是翻译 ID
      */
     title: string;
+
+    class?: string;
 }
 
 /**
  * 页面组件
+ *
+ * 默认是 flex-col 布局。如果有需要，可自行指定 class 进行修改。
  */
-export default function(props: Props) {
+export default function (props: Props) {
     const ctx = useApp();
 
     createEffect(() => {
         ctx.title = ctx.t(props.title as any);
     });
 
-    return <div class="p-4 pt-6">
+    return <div class={props.class ? props.class + ' c--page' : 'c--page'} >
         {props.children}
     </div>;
 }

admin/src/components/page/style.css

@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2024 caixw
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+@layer components {
+    .c--page {
+        @apply p-4 pt-6 flex flex-col gap-4 mx-auto;
+    }
+}

admin/src/components/style.css

@@ -18,3 +18,4 @@
 @import './pagination/style.css';
 @import './table/style.css';
 @import './spin/style.css';
+@import './page/style.css';

admin/src/pages/roles/roles.tsx

@@ -71,7 +71,7 @@ export default function Roles(props: Props): JSX.Element {
         dialogRef.showModal();
     };
 
-    return <Page title="_i.page.roles.rolesManager">
+    return <Page title="_i.page.roles.rolesManager" class="max-w-lg">
         <Dialog ref={(el)=>dialogRef=el}
             header={currentID.getValue() ? ctx.t('_i.page.editItem') : ctx.t('_i.page.newItem')}
             actions={dialogRef!.DefaultActions(save)}

admin/src/pages/system/info.tsx

@@ -44,7 +44,7 @@ export default function(): JSX.Element {
         return ret.body;
     });
 
-    return <Page title="_i.page.system.info">
+    return <Page title="_i.page.system.info" class="max-w-lg">
         <div class="p--system-info">
             <fieldset>
                 <legend>TODO</legend>
@@ -152,4 +152,4 @@ export default function(): JSX.Element {
             </div>
         </div>
     </Page>;
-}
+}

admin/src/pages/system/services.tsx

@@ -4,10 +4,10 @@
 
 import { JSX, createMemo } from 'solid-js';
 
-import { LoaderTable, Column, Page, translateEnum } from '@/components';
-import { MessageKey } from '@/locales';
 import { useApp } from '@/app';
+import { Column, LoaderTable, Page, translateEnum } from '@/components';
 import { Query } from '@/core';
+import { MessageKey } from '@/locales';
 
 interface Service {
     jobs: Array<Job>;
@@ -47,7 +47,7 @@ export default function(): JSX.Element {
         return ret.body;
     });
 
-    return <Page title='_i.page.system.serviceViewer'>
+    return <Page title='_i.page.system.serviceViewer' class="max-w-lg">
         <fieldset>
             <legend>{ctx.t('_i.page.system.services')}</legend>
             <LoaderTable load={async(_:Query)=>(await items())?.services} queries={{}} columns={[
@@ -74,4 +74,4 @@ export default function(): JSX.Element {
             ]} />
         </fieldset>
     </Page>;
-}
+}