optimized

2023-04-06 00:08:03 +08:00 · 2023-04-06 00:08:03 +08:00 · c27d44872b
commit c27d44872b
parent adb74b7441
11 changed files with 314 additions and 91 deletions
--- a/css/grid.scss
+++ b/css/grid.scss
@ -105,7 +105,11 @@
                    align-items: center;
                    padding: var(--header-padding);
                    box-sizing: border-box;
-                    overflow-x: hidden;
+                    // overflow-x: hidden;
+
+                    >span {
+                        overflow: hidden;
+                    }
                }

                >.arrow {
--- a/lib/ui/checkbox.html
+++ b/lib/ui/checkbox.html
@ -22,43 +22,43 @@
    onchange?: (this: HTMLInputElement, ev: Event) => any;
 }</pre>
  </p>
-  <h3>type?: string</h3>
+  <h4>type?: string</h4>
  <p>
    复选框图标的样式，可选值目前有 <code>fa-regular</code>、<code>fa-light</code>、<code>fa-solid</code>
  </p>
-  <h3>label?: string | HTMLElement</h3>
+  <h4>label?: string | HTMLElement</h4>
  <p>
    复选框的标签文本，或者想要呈现的元素
  </p>
-  <h3>checked?: boolean</h3>
+  <h4>checked?: boolean</h4>
  <p>
    初始是否选中
  </p>
-  <h3>isImage?: boolean</h3>
+  <h4>isImage?: boolean</h4>
  <p>
    是否为图片复选框
  </p>
-  <h3>imageHeight?: Number</h3>
+  <h4>imageHeight?: Number</h4>
  <p>
    为图片复选框时的图片限制高度
  </p>
-  <h3>checkedNode?: HTMLElement</h3>
+  <h4>checkedNode?: HTMLElement</h4>
  <p>
    为图片复选框时的选中时显示的元素
  </p>
-  <h3>uncheckedNode?: HTMLElement</h3>
+  <h4>uncheckedNode?: HTMLElement</h4>
  <p>
    为图片复选框时的未选中时显示的元素
  </p>
-  <h3>customerAttributes?: { [key: string]: string }</h3>
+  <h4>customerAttributes?: { [key: string]: string }</h4>
  <p>
    自定义属性，例如
-    <pre>{
+  <pre>{
    'data-id': 'xxxxxx',
    'disabled': ''
 }</pre>
  </p>
-  <h3>onchange?: (this: HTMLInputElement, ev: Event) => any</h3>
+  <h4>onchange?: (this: HTMLInputElement, ev: Event) => any</h4>
  <p>
    复选框改变时触发的事件
  </p>
@ -66,7 +66,8 @@
  <code>function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement</code>
  <h3>container?: HTMLElement</h3>
  <p>
-    将把此 HTML 元素，为 null 则把 document.body 下的所有 <code>label[data-checkbox]</code> 元素解析为复选框，<code>[data-id]</code> 为复选框元素的 id，包含
+    将把此 HTML 元素，为 null 则把 document.body 下的所有 <code>label[data-checkbox]</code> 元素解析为复选框，<code>[data-id]</code> 为复选框元素的
+    id，包含
    <code>[data-checked]</code> 时复选框默认选中。
  </p>
  <p>当该元素无子元素时，<code>[data-type]</code> 同上述参数中的 <code>type?: string</code>，<code>[data-label]</code> 同上述参数中的
--- a/lib/ui/dropdown.d.ts
+++ b/lib/ui/dropdown.d.ts
@ -4,7 +4,7 @@ interface DropdownItem {
    html?: HTMLElement
 }

-interface DropdownOptions {
+export interface DropdownOptions {
    textkey?: string;
    valuekey?: string;
    htmlkey?: string;
@ -32,7 +32,7 @@ interface Dropdown {
    get disabled(): boolean;
    set disabled(flag: boolean);
    get source(): Array<DropdownItem | any>;
-    set source(list: Array<DropdownItem | any>): void;
+    set source(list: Array<DropdownItem | any>);
    readonly multiselect: boolean;
    readonly selected: DropdownItem | any;
    readonly selectedlist: Array<DropdownItem | any>;
--- a/lib/ui/dropdown.html
+++ b/lib/ui/dropdown.html
@ -28,67 +28,67 @@
    parent?: HTMLElement;
 }</pre>
  </p>
-  <h3>textkey?: string</h3>
+  <h4>textkey?: string</h4>
  <p>
    数据源中用以显示的属性，默认为 <code>text</code>
  </p>
-  <h3>valuekey?: string</h3>
+  <h4>valuekey?: string</h4>
  <p>
    数据源中作为值的属性，默认为 <code>value</code>
  </p>
-  <h3>htmlkey?: string</h3>
+  <h4>htmlkey?: string</h4>
  <p>
    数据源中用来以 html 方式呈现的属性，默认为 <code>html</code>
  </p>
-  <h3>maxlength?: Number</h3>
+  <h4>maxlength?: Number</h4>
  <p>
    作为输入类型时的最大允许字符数，默认为 500
  </p>
-  <h3>multiselect?: boolean</h3>
+  <h4>multiselect?: boolean</h4>
  <p>
    是否允许多选，仅在选择类型下有效
  </p>
-  <h3>selected?: string</h3>
+  <h4>selected?: string</h4>
  <p>
    默认选中的项目的值
  </p>
-  <h3>selectedlist?: Array&lt;DropdownItem | any&gt;</h3>
+  <h4>selectedlist?: Array&lt;DropdownItem | any&gt;</h4>
  <p>
    多选时默认选中的项目的值的列表
  </p>
-  <h3>disabled?: boolean</h3>
+  <h4>disabled?: boolean</h4>
  <p>
    初始化时下拉框是否禁用
  </p>
-  <h3>input?: boolean</h3>
+  <h4>input?: boolean</h4>
  <p>
    是否为输入类型
  </p>
-  <h3>search?: boolean</h3>
+  <h4>search?: boolean</h4>
  <p>
    是否允许搜索
  </p>
-  <h3>searchkeys?: Array&lt;string&gt;</h3>
+  <h4>searchkeys?: Array&lt;string&gt;</h4>
  <p>
    搜索时搜索的数据源属性的列表，默认为 <code>[valuekey]</code>
  </p>
-  <h3>searchplaceholder?: string</h3>
+  <h4>searchplaceholder?: string</h4>
  <p>
    搜索输入框的占位字符串
  </p>
-  <h3>tabindex?: Number</h3>
+  <h4>tabindex?: Number</h4>
  <p>
    下拉框的焦点顺序
  </p>
-  <h3>placeholder?: string</h3>
+  <h4>placeholder?: string</h4>
  <p>
    作为输入类型时，输入框的占位字符串
  </p>
-  <h3>slidefixed?: boolean</h3>
+  <h4>slidefixed?: boolean</h4>
  <p>
    下拉方向是否固定为下
  </p>
-  <h3>parent?: HTMLElement</h3>
+  <h4>parent?: HTMLElement</h4>
  <p>
    下拉列表呈现的父容器，默认为 <code>document.body</code>
  </p>
--- a/lib/ui/dropdown.js
+++ b/lib/ui/dropdown.js
@ -231,8 +231,7 @@ class Dropdown {
        let item = this.source.find(it => it[valuekey] === selected);
        if (this.#options.input) {
            if (item == null) {
-                item = {};
-                item[valuekey] = selected;
+                item = { [valuekey]: selected };
            }
            this.#label.value = selected;
        } else {
@ -266,9 +265,7 @@ class Dropdown {
        const itemlist = selectedlist.map(v => {
            let item = source.find(it => it[valuekey] === v);
            if (item == null) {
-                item = {};
-                item[valuekey] = v;
-                item[textkey] = v;
+                item = { [valuekey]: v, [textkey]: v };
            }
            return item;
        });
--- a/lib/ui/grid.d.ts
+++ b/lib/ui/grid.d.ts
@ -1,16 +1,59 @@
-interface GridColumn {
-    static create(): HTMLElement;
-    static setValue(element: HTMLElement, val: any): void;
-    static setStyle(element: HTMLElement, style: { [key: string]: string }): void;
+import { DropdownOptions } from "./dropdown";
+
+interface GridItem {
+    value: any;
+    displayValue: string;
 }

-interface GridColumn {
+declare var GridColumn: {
+    create(): HTMLElement;
+    createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement;
+    setValue(element: HTMLElement, val: any): void;
+    getValue(e: any): any;
+    setStyle(element: HTMLElement, style: { [key: string]: string }): void;
+    setEnabled(element: HTMLElement, enabled?: boolean): void;
+}
+
+interface GridColumnType {
+    0: "Common";
+    1: "Input";
+    2: "Dropdown";
+    3: "Checkbox";
+    4: "Icon";
+}
+
+interface GridColumnDefinition {
    key?: string;
+    type?: keyof GridColumnType | typeof GridColumn;
+    caption?: string;
+    width?: Number;
+    align?: "left" | "center" | "right";
+    enabled?: boolean | string;
+    css?: { [key: string]: string };
+    styleFilter?: (item: GridItem | any) => { [key: string]: string };
+    textStyle?: { [key: string]: string };
+    visible?: boolean;
+    resizable?: boolean;
+    sortable?: boolean;
+    orderable?: boolean;
+    allcheck?: boolean;
+    events?: { [event: string]: any };
+    attrs?: { [key: string]: string } | ((item: GridItem | any) => { [key: string]: string });
+    // TODO: allowFilter?: boolean;
+    filter?: (item: GridItem | any) => any;
+    sortFilter?: (a: GridItem | any, b: GridItem | any) => -1 | 0 | 1;
+    bgFilter?: (item: GridItem | any) => string;
+    dropOptions?: DropdownOptions;
+    source?: Array<any> | ((item: GridItem | any) => Array<any>);
+    iconType?: string;
+    text?: string;
+    tooltip?: string;
+    onallchecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
+    onchanged?: (this: Grid, item: GridItem | any, value: boolean | any) => void;
 }

 interface GridColumnDirection {
    [-1]: Number,
-    0: Number,
    1: Number
 }

@ -21,7 +64,7 @@ interface GridColumnColumnEventMap {
 }

 interface Grid {
-    columns: Array<GridColumn>;
+    columns: Array<GridColumnDefinition>;
    langs?: { all: string, ok: string, reset: string };
    virtualCount?: Number;
    rowHeight?: Number;
@ -43,10 +86,26 @@ interface Grid {
    rowDblClicked?: (index: Number) => void;
    columnChanged?: <K extends keyof GridColumnColumnEventMap>(type: K, index: Number, value: Number | keyof GridColumnDirection) => void;

-    source(): Array<any>;
-    source(list: Array<any>): void;
+    get source(): Array<GridItem | any>;
+    set source(list: Array<GridItem | any>);
+    get selectedIndexes(): Array<Number>;
+    set selectedIndexes(indexes: Array<Number>);
+    get loading(): boolean;
+    set loading(flag: boolean);
+    get scrollTop(): Number;
+    set scrollTop(top: Number);

+    readonly virtual: boolean;
+    readonly sortKey: string | undefined;
+    readonly selectedIndex: Number | -1;

+    init(container?: HTMLElement): void;
+    scrollToIndex(index: Number): void;
+    resize(force?: boolean): void;
+    reload(): void;
+    refresh(): void;
+    resetChange(): void;
+    sortColumn(reload?: boolean): void;
 }

 declare var Grid: {
@ -58,7 +117,7 @@ declare var Grid: {
        Icon: 4,
        isCheckbox(type: Number): boolean;
    };
-    GridColumn: GridColumn;
+    GridColumn: typeof GridColumn;
    new(container: HTMLElement): Grid;
 }

--- a/lib/ui/grid.html
+++ b/lib/ui/grid.html
@ -4,6 +4,137 @@
  <p>
    创建一个统一样式的滚动列表元素。
  </p>
+  <h2>constructor</h2>
+  <code>new(container: HTMLElement): Grid</code>
+  <h3>container: HTMLElement</h3>
+  <p>
+    父容器元素，Grid 将创建在此元素之内
+  </p>
+  <h2>init</h2>
+  <code>init(container?: HTMLElement): void</code>
+  <h3>container?: HTMLElement</h3>
+  <p>
+    父容器元素，默认使用构造函数中传递的值
+  </p>
+  <h2>scrollToIndex</h2>
+  <code>scrollToIndex(index: Number): void</code>
+  <h3>index: Number</h3>
+  <p>
+    将滚动至此行
+  </p>
+  <h2>resize</h2>
+  <code>resize(force?: boolean): void</code>
+  <h3>force?: boolean</h3>
+  <p>
+    重新计算大小，参数表示是否强制重载
+  </p>
+  <h2>reload</h2>
+  <code>reload(): void</code>
+  <p>
+    重载表格元素
+  </p>
+  <h2>refresh</h2>
+  <code>refresh(): void</code>
+  <p>
+    刷新表格单元格值
+  </p>
+  <h2>resetChange</h2>
+  <code>resetChange(): void</code>
+  <p>
+    还原表格修改状态，置为未修改
+  </p>
+  <h2>sortColumn</h2>
+  <code>sortColumn(reload?: boolean): void</code>
+  <h3>reload?: boolean</h3>
+  <p>
+    根据当前设定的排序列排序，参数表示是否重载表格
+  </p>
+  <hr />
+  <h2>sortIndex</h2>
+  <code>sortIndex?: Number</code>
+  <p>
+    排序的列序号
+  </p>
+  <h2>sortDirection</h2>
+  <code>sortDirection?: keyof GridColumnDirection</code>
+  <p>
+    排序的方向，可选值为 <code>-1: desc</code>、<code>1: asc</code>
+  </p>
+  <h2>columns</h2>
+  <code>columns: Array&lt;GridColumnDefinition&gt;</code>
+  <p>
+    表格列的定义，结构为
+  <pre>interface GridColumnDefinition {
+      key?: string;
+      type?: keyof GridColumnType | typeof GridColumn;
+      caption?: string;
+      width?: Number;
+      align?: "left" | "center" | "right";
+      enabled?: boolean | string;
+      css?: { [key: string]: string };
+      styleFilter?: (item: GridItem | any) => { [key: string]: string };
+      textStyle?: { [key: string]: string };
+      visible?: boolean;
+      resizable?: boolean;
+      sortable?: boolean;
+      orderable?: boolean;
+      allcheck?: boolean;
+      events?: { [event: string]: any };
+      attrs?: { [key: string]: string } | ((item: GridItem | any) => { [key: string]: string });
+      filter?: (item: GridItem | any) => any;
+      sortFilter?: (a: GridItem | any, b: GridItem | any) => -1 | 0 | 1;
+      bgFilter?: (item: GridItem | any) => string;
+      dropOptions?: DropdownOptions;
+      source?: Array&lt;any&gt; | ((item: GridItem | any) => Array&lt;any&gt;);
+      iconType?: string;
+      text?: string;
+      tooltip?: string;
+      onallchecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
+      onchanged?: (this: Grid, item: GridItem | any, value: boolean | any) => void;
+  }</pre>
+  </p>
+  <h3>key</h3>
+  <code>key?: string</code>
+  <p>关键字</p>
+  <h3>type</h3>
+  <code>type?: keyof GridColumnType | typeof GridColumn</code>
+  <p>列类型，可以为 <code>Grid.ColumnTypes</code> 枚举值表示内置的通用、输入、下拉、复选框、图标等类型
+  <pre>declare var ColumnTypes: {
+      Common: 0,
+      Input: 1,
+      Dropdown: 2,
+      Checkbox: 3,
+      Icon: 4,
+      isCheckbox(type: Number): boolean;
+  }</pre>也可以为符合 <code>GridColumn</code> 接口的类或对象表示自定义类型，接口定义如下
+  <pre>interface GridColumn {
+    static create(): HTMLElement;
+    static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement;
+    static setValue(element: HTMLElement, val: any): void;
+    static getValue(e: any): any;
+    static setStyle(element: HTMLElement, style: { [key: string]: string }): void;
+    static setEnabled(element: HTMLElement, enabled?: boolean): void;
+}</pre>
+  </p>
+  <h4>create</h4>
+  <code>static create(): HTMLElement</code>
+  <p>创建只读状态的单元格元素</p>
+  <h4>createEdit</h4>
+  <code>static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement</code>
+  <p>创建编辑状态的单元格元素</p>
+  <samp>trigger: (e: any) => void</samp>
+  <p>用以触发 Grid 的列修改事件 <code>columnChanged</code> 的函数代理</p>
+  <samp>col: GridColumnDefinition</samp>
+  <p>当前列的定义对象</p>
+  <samp>body: HTMLElement</samp>
+  <p>Grid 正文表格元素</p>
+  <h4>setValue</h4>
+  <code>static setValue(element: HTMLElement, val: any): void</code>
+  <p>设置单元格值时触发的函数</p>
+  <samp>element: HTMLElement</samp>
+  <p>单元格元素</p>
+  <samp>val: any</samp>
+  <p>单元格的值</p>
  <hr />
  <h2>示例</h2>
  <pre></pre>
@ -38,7 +169,7 @@
      grid.allowHtml = true;
      grid.height = 0;
      grid.columns = [
-        { key: 'c1', caption: 'column 122222222311111111111111111' },
+        { key: 'c1', caption: 'column 122222222311111111111111111', shrink: true },
        { key: 'c2', caption: '选择', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
        {
          key: 'c2a',
--- a/lib/ui/grid.js
+++ b/lib/ui/grid.js
@ -78,8 +78,8 @@ class GridInputColumn extends GridColumn {
 const SymbolDropdown = Symbol.for('ui-dropdown');

 class GridDropdownColumn extends GridColumn {
-    static createEdit(trigger, parent) {
-        const drop = new Dropdown({ parent });
+    static createEdit(trigger, col, parent) {
+        const drop = new Dropdown({ ...col.dropOptions, parent });
        drop.onselected = trigger;
        return drop.create();
    }
@ -459,7 +459,7 @@ class Grid {
        if (this.#needResize && widths.flag) {
            this.#needResize = false;
            this.columns.forEach((col, i) => {
-                if (!col.autoResize) {
+                if (!this.#get(col.key, 'autoResize')) {
                    return;
                }
                let width = widths[i];
@ -535,7 +535,7 @@ class Grid {
                return a === b ? 0 : (a > b ? 1 : -1) * direction;
            };
        } else {
-            comparer = (a, b) => col.sortFilter(a, b) * direction;
+            comparer = (a, b) => col.sortFilter(a.values, b.values) * direction;
        }
        this.#source.sort(comparer);
        // TODO: filter to currentSource;
@ -566,10 +566,10 @@ class Grid {
            }
            // style
            const isCheckbox = Grid.ColumnTypes.isCheckbox(col.type);
-            if (col.width > 0 || col.shrink) {
-                col.autoResize = false;
+            if (col.width > 0) {
+                // col.autoResize = false;
            } else {
-                col.autoResize = true;
+                this.#set(col.key, 'autoResize', true);
                this.#needResize = true;
                sizer.innerText = col.caption ?? '';
                let width = sizer.offsetWidth + 22;
@ -585,22 +585,19 @@ class Grid {
            if (col.sortable !== false) {
                col.sortable = true;
            }
-            if (col.shrink) {
-                col.style = { 'text-align': col.align };
-            } else {
-                const w = `${col.width}px`;
-                col.style = {
-                    'width': w,
-                    'max-width': w,
-                    'min-width': w,
-                    'text-align': col.align
-                };
-            }
+            const w = `${col.width}px`;
+            const style = {
+                'width': w,
+                'max-width': w,
+                'min-width': w,
+                'text-align': col.align
+            };
+            this.#set(col.key, 'style', style);
            // element
            const th = document.createElement('th');
            th.className = 'column';
            th.dataset.key = col.key;
-            for (let css of Object.entries(col.style)) {
+            for (let css of Object.entries(style)) {
                th.style.setProperty(css[0], css[1]);
            }
            if (col.sortable) {
@ -741,8 +738,9 @@ class Grid {
                    const cell = document.createElement('td');
                    if (col.visible !== false) {
                        cell.keyid = ((exists + i) << MaxColumnBit) | j;
-                        if (col.style != null) {
-                            for (let css of Object.entries(col.style)) {
+                        const style = this.#get(col.key, 'style');
+                        if (style != null) {
+                            for (let css of Object.entries(style)) {
                                cell.style.setProperty(css[0], css[1]);
                            }
                        }
@ -836,7 +834,7 @@ class Grid {
                let element;
                if (!isCheckbox && selectChanged && typeof type.createEdit === 'function') {
                    element = selected ?
-                        type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e)), this.#refs.bodyContent) :
+                        type.createEdit(e => this.#onRowChanged(e, startIndex + i, col, type.getValue(e)), col, this.#refs.bodyContent) :
                        type.create(col);
                    cell.replaceChildren(element);
                } else {
@ -856,7 +854,7 @@ class Grid {
                    type.setEnabled(element, enabled);
                }
                // auto resize
-                if (this.#needResize && col.autoResize) {
+                if (this.#needResize && this.#get(col.key, 'autoResize')) {
                    const width = element.scrollWidth + 12;
                    if (width > 0 && widths != null && (isNaN(widths[j]) || widths[j] < width)) {
                        widths[j] = width;
@ -893,9 +891,10 @@ class Grid {
        // const oldwidth = col.width;
        const w = `${width}px`;
        col.width = width;
-        col.style.width = w;
-        col.style['max-width'] = w;
-        col.style['min-width'] = w;
+        const style = this.#get(col.key, 'style');
+        style.width = w;
+        style['max-width'] = w;
+        style['min-width'] = w;
        let element = this.#refs.header.children[index];
        element.style.width = w;
        element.style.maxWidth = w;
@ -1060,6 +1059,23 @@ class Grid {
        return top;
    }

+    #get(key, name) {
+        const attr = this.#colAttrs[key];
+        if (attr == null) {
+            return null;
+        }
+        return attr[name];
+    }
+
+    #set(key, name, value) {
+        const attr = this.#colAttrs[key];
+        if (attr == null) {
+            this.#colAttrs[key] = { [name]: value };
+        } else {
+            attr[name] = value;
+        }
+    }
+
    #getRowTarget(target) {
        let parent;
        while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) {
@ -1073,8 +1089,7 @@ class Grid {
    }

    #onHeaderClicked(e, col, force) {
-        const attr = this.#colAttrs[col.key];
-        if (!force && attr != null && (attr.resizing || attr.dragging)) {
+        if (!force && (this.#get(col.key, 'resizing') || this.#get(col.key, 'dragging'))) {
            return;
        }
        if (!this.#notHeader(e.target.tagName)) {
@ -1185,7 +1200,7 @@ class Grid {
                setTimeout(() => delete attr.resizing);
                if (attr.sizing) {
                    delete attr.sizing;
-                    col.autoResize = false;
+                    delete attr.autoResize;
                    this.#changeColumnWidth(index, width);
                    if (typeof this.columnChanged === 'function') {
                        this.columnChanged(ColumnChangedType.Resize, index, width);
@ -1379,6 +1394,7 @@ class Grid {
            }
        }
    }
+
    #onRowDblClicked(e) {
        if (e.target.tagName === 'INPUT') {
            return;
@ -1394,6 +1410,7 @@ class Grid {
            }
        }
    }
+
    #onRowChanged(_e, index, col, value) {
        if (this.#currentSource == null) {
            return;
--- a/lib/utility/lgres.html
+++ b/lib/utility/lgres.html
@ -42,11 +42,11 @@
    callback?: (result: any) => void
 }</pre>
    </p>
-    <h3>template?: string</h3>
+    <h4>template?: string</h4>
    <p>
        语言资源文件的后缀，资源文件 url 为 <code>`language/${lgid}${template}`</code>
    </p>
-    <h3>callback?: (result: any) => void</h3>
+    <h4>callback?: (result: any) => void</h4>
    <p>
        资源初始化后的回调函数，可能在 DOM 加载完成之前触发。
    </p>
--- a/lib/utility/request.html
+++ b/lib/utility/request.html
@ -22,19 +22,19 @@
    progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent&lt;XMLHttpRequestEventTarget&gt;) => any
 }</pre>
    </p>
-    <h3>method?: string</h3>
+    <h4>method?: string</h4>
    <p>
        请求类型，默认为 GET 或 POST
    </p>
-    <h3>accept?: string</h3>
+    <h4>accept?: string</h4>
    <p>
        Accept 请求头的值
    </p>
-    <h3>contentType?: string</h3>
+    <h4>contentType?: string</h4>
    <p>
        Content-Type 请求头的值
    </p>
-    <h3>customerHeaders?: { [key: string]: string }</h3>
+    <h4>customerHeaders?: { [key: string]: string }</h4>
    <p>
        自定义请求头，例如
    <pre>{
@ -42,11 +42,11 @@
    'X-Auth-Token': 'xxxxxx'
 }</pre>
    </p>
-    <h3>signal?: AbortSignal | null</h3>
+    <h4>signal?: AbortSignal | null</h4>
    <p>
        终止器的信号，用来控制终止请求任务
    </p>
-    <h3>progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent&lt;XMLHttpRequestEventTarget&gt;) => any</h3>
+    <h4>progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent&lt;XMLHttpRequestEventTarget&gt;) => any</h4>
    <p>
        调用 upload 方法时在上传过程中触发的事件，返回进度参数
    </p>
--- a/style.css
+++ b/style.css
@ -24,7 +24,10 @@ input {
  font-family: var(--serif-font-family);
 }

-code, kbd, pre, samp {
+code,
+kbd,
+pre,
+samp {
  font-family: var(--mono-font-family);
  background-color: var(--hover-color);
  padding: 0 10px;
@ -34,32 +37,43 @@ code {
  display: inline-block;
 }

-pre {
+pre,
+samp {
  font-size: .875em;
 }

-h2 + code {
+h2+code {
  margin-left: 70px;
  position: relative;
 }

-h2 + code::before {
+h2+code::before {
  content: '签名：';
  position: absolute;
  margin-left: -70px;
 }

-h3 {
+h3,
+h4 {
  font-family: var(--mono-font-family);
  font-size: 1em;
  margin-left: 10px;
  /* font-weight: bold; */
 }

-h3 ~ p {
+h3~p {
  margin-left: 10px;
 }

+h4 {
+  font-size: .9em;
+  margin-block-end: .4em;
+}
+
+h4+code {
+  font-size: .9rem;
+}
+
 a {
  font-weight: 500;
  color: #646cff;
@ -120,7 +134,7 @@ h1 {
  user-select: none;
 }

-#directory>ul>li.title  {
+#directory>ul>li.title {
  margin: 20px 0 6px;
  font-weight: bold;
  font-size: 1.25em;