feat(admin/app/options): 添加新的 API 选项 paeSizes 和 defaultSize

admin/src/app/options/api.spec.ts

@@ -10,8 +10,9 @@ test('checkAPI', () => {
     const api = {
         base: 'http://localhost/',
         login: '/login',
-        settings: '/settings',
-        info: '/info'
+        info: '/info',
+        pageSizes: [1,2],
+        defaultSize: 1
     };
 
     expect(() => {

admin/src/app/options/api.ts

@@ -6,8 +6,6 @@
  * 与访问后端 API 地址相关的配置项
  */
 export interface API {
-    [index: string]: string // 限定了所有字段的类型
-
     /**
      * 后台 API 访问的基地址
      */
@@ -24,9 +22,14 @@ export interface API {
     info: string
 
     /**
-     * 用户的基本设置
+     * api 请求时可用的分页数值
+     */
+    pageSizes: Array<number>
+
+    /**
+     * 默认的分页数量，必须存在于 {@link API#pageSizes}。
      */
-    settings: string
+    defaultSize: number;
 }
 
 /**
@@ -42,17 +45,25 @@ export function checkAPI(api: API) {
         api.base = api.base.substring(0, api.base.length - 1);
     }
 
-    Object.entries(api).forEach(([key, val]) => {
-        if (key === 'base') { // base 之前已经检测
-            return;
-        }
+    api.login = checkAPIPath(api.login, 'login');
+    api.info = checkAPIPath(api.info, 'info');
 
-        if (!val.length) {
-            throw `api.${key} 不能为空`;
-        }
+    if (api.pageSizes.length === 0) {
+        throw 'pageSizes 不能为空';
+    }
 
-        if (val.charAt(0) !== '/') {
-            api[key] = '/' + val;
-        }
-    });
+    if (!api.pageSizes.includes(api.defaultSize)) {
+        throw 'defaultSize 必须存在于 pageSizes 之中';
+    }
+}
+
+function checkAPIPath(path: string, key: string): string {
+    if (!path.length) {
+        throw `api.${key} 不能为空`;
+    }
+
+    if (path.charAt(0) !== '/') {
+        path = '/' + path;
+    }
+    return path;
 }

admin/src/app/options/options.spec.ts

@@ -11,8 +11,9 @@ test('build', async () => {
     const api = {
         base: 'http://localhost',
         login: '/login',
-        settings: '/settings',
         info: '/info',
+        pageSizes: [1,2],
+        defaultSize: 1
     };
 
     const locales: Locales = {

admin/src/app/options/options.ts

@@ -113,7 +113,7 @@ const presetOptions = {
     titleSeparator: ' | ',
     theme: { mode: 'system', contrast: 'nopreference', scheme: 20 },
     mimetype: 'application/json',
-    footer: Array<MenuItem>()
+    footer: Array<MenuItem>(),
 } as const;
 
 /**

admin/src/components/pagination/bar.tsx

@@ -4,7 +4,7 @@
 
 import { createMemo, createSignal, mergeProps } from 'solid-js';
 
-import { useApp } from '@/app';
+import { useApp, useOptions } from '@/app/context';
 import { BaseProps } from '@/components/base';
 import { Choice, FieldAccessor, Options } from '@/components/form';
 import { default as Pagination } from './pagination';
@@ -44,21 +44,18 @@ export interface Props extends BaseProps {
     class?: string;
 }
 
-export const defaultSizes = [10, 20, 50, 100] as const;
-
-const defaultProps: Readonly<Partial<Props>> = {
-    spans: 3,
-    size: defaultSizes[1],
-    sizes: [...defaultSizes]
-};
-
 /**
  * 页码导航条
  *
  * 相对于 {@link Pagination} 变成了按照数据总量进行计算分页，而不是直接按照页数。
  */
 export default function(props: Props) {
-    props = mergeProps(defaultProps, props);
+    const opt = useOptions();
+    props = mergeProps({
+        spans: 3,
+        size: opt.api.defaultSize,
+        sizes: opt.api.pageSizes
+    }, props);
 
     if (props.sizes!.indexOf(props.size!)<0) {
         throw `参数 props.size:${props.size} 必须存在于 props.sizes: ${props.sizes}`;

admin/src/components/table/datatable.tsx

@@ -4,13 +4,12 @@
 
 import { createResource, createSignal, JSX, mergeProps, Show, splitProps } from 'solid-js';
 
-import { useApp } from '@/app/context';
+import { useApp, useOptions } from '@/app/context';
 import { Palette } from '@/components/base';
 import { SplitButton } from '@/components/button';
 import { Divider } from '@/components/divider';
 import { ObjectAccessor } from '@/components/form';
 import { PaginationBar } from '@/components/pagination';
-import { defaultSizes } from '@/components/pagination/bar';
 import { Exporter, Page } from '@/core';
 import { useSearchParams } from '@solidjs/router';
 import type { Props as BaseProps } from './basic';
@@ -102,8 +101,7 @@ const defaultProps = {
     filename: 'download',
     striped: 0,
     accentPalette: 'primary' as Palette,
-    pageSizes: [...defaultSizes]
-};
+} as const;
 
 /**
  * 带有加载功能的表格组件
@@ -112,9 +110,11 @@ const defaultProps = {
  * Q 为查询参数的类型；
  */
 export default function<T extends object, Q extends Query>(props: Props<T, Q>) {
+    const opt = useOptions();
     const ctx = useApp();
+
     let load = props.load;
-    props = mergeProps(defaultProps, props);
+    props = mergeProps(defaultProps, { pageSizes: opt.api.pageSizes }, props);
 
     const [searchG, searchS] = useSearchParams<Params<Q>>();
     if (props.inSearch) {
@@ -167,7 +167,7 @@ export default function<T extends object, Q extends Query>(props: Props<T, Q>) {
         const page = queries.accessor<number>('page');
         const size = queries.accessor<number>('size');
         if (size.getValue()===0) {
-            size.setValue(defaultProps.pageSizes[1]);
+            size.setValue(opt.api.pageSizes[1]);
         }
 
         footer = <PaginationBar class="mt-2" palette={props.accentPalette}

cmd/admin/src/main.tsx

@@ -68,8 +68,9 @@ const o: Options = {
     api: {
         base: urlBase,
         login: '/login',
-        settings: '/settings',
         info: '/info',
+        pageSizes: [10, 20, 50, 100],
+        defaultSize: 20
     },
 
     title: 'title',