@aplus-frontend/ui 0.0.3 → 0.0.4

package/lib/src/ap-table/constants.d.ts

@@ -1,4 +1,4 @@
-import { ApTableValueFields } from './interface';
+import { ApTableValueFields, ValueEnum } from './interface';
 import { CreateComponentPublicInstance, ExtractPropTypes, PropType, HTMLAttributes, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ComponentOptionsBase, DefineComponent, PublicProps, VNode, RendererNode, RendererElement, CSSProperties, ComputedRef } from 'vue';
 import { ColSize } from 'ant-design-vue/es/grid';
 import { ApFieldDateProps, ApFieldDateRangeProps, ApFieldNumberProps, ApFieldRadioProps, ApFieldSelectProps, ApFieldSwitchProps, ApFieldTextProps, ApFieldTextAreaProps, ApFieldCheckboxProps, FieldMode } from '../ap-field';
@@ -2482,9 +2482,6 @@ export declare const apTableFormItemMap: {
             addonAfter?: any;
             prefix?: any;
             default?: any;
-            /**
-             * 表格到查询表单的映射
-             */
             upIcon?: any;
             downIcon?: any;
         }> & {
@@ -2492,9 +2489,6 @@ export declare const apTableFormItemMap: {
             addonAfter?: any;
             prefix?: any;
             default?: any;
-            /**
-             * 表格到查询表单的映射
-             */
             upIcon?: any;
             downIcon?: any;
         };
@@ -5305,17 +5299,13 @@ export declare const apTableFormItemMap: {
         validateFirst: boolean;
     }, {}, string, {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
         $slots: Readonly<{
-            addonAfter: any; /**
-             * 表格到查询表单的映射
-             */
+            addonAfter: any;
             addonBefore: any;
             prefix: any;
             suffix: any;
             clearIcon: any;
         }> & {
-            addonAfter: any; /**
-             * 表格到查询表单的映射
-             */
+            addonAfter: any;
             addonBefore: any;
             prefix: any;
             suffix: any;
@@ -9820,9 +9810,6 @@ export declare const apTableRenderItemMap: {
                         default: any;
                         type: PropType<any>;
                     };
-                    /**
-                     * 表格自定义渲染
-                     */
                     icon: {
                         default: any;
                         type: PropType<any>;
@@ -10193,9 +10180,6 @@ export declare const apTableRenderItemMap: {
                         default: any;
                         type: PropType<any>;
                     };
-                    /**
-                     * 表格自定义渲染
-                     */
                     icon: {
                         default: any;
                         type: PropType<any>;
@@ -10577,9 +10561,6 @@ export declare const apTableRenderItemMap: {
                         default: any;
                         type: PropType<any>;
                     };
-                    /**
-                     * 表格自定义渲染
-                     */
                     icon: {
                         default: any;
                         type: PropType<any>;
@@ -10958,9 +10939,6 @@ export declare const apTableRenderItemMap: {
                     default: any;
                     type: PropType<any>;
                 };
-                /**
-                 * 表格自定义渲染
-                 */
                 icon: {
                     default: any;
                     type: PropType<any>;
@@ -12333,6 +12311,23 @@ export declare const apTableRenderItemMap: {
     }>>, {
         bordered: boolean;
     }, {}>;
+    status: DefineComponent<{
+        valueEnum: {
+            type: PropType<ValueEnum>;
+            required: true;
+        };
+        value: {
+            type: PropType<any>;
+        };
+    }, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+        valueEnum: {
+            type: PropType<ValueEnum>;
+            required: true;
+        };
+        value: {
+            type: PropType<any>;
+        };
+    }>>, {}, {}>;
 };
 /**
  * 不需要渲染到Form表单的valueType字段

package/lib/src/ap-table/constants.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../ap-action/index.js");require("../ap-field/index.js");require("../ap-form/index.js");require("./components/index/index.vue.js");const e=require("../ap-form/items/date/index.vue.js"),t=require("../ap-form/items/date-range/index.vue.js"),_=require("../ap-form/items/number/index.vue.js"),u=require("../ap-form/items/radio/index.vue.js"),r=require("../ap-form/items/select/index.vue.js"),n=require("../ap-form/items/switch/index.vue.js"),i=require("../ap-form/items/text/index.vue.js"),s=require("../ap-form/items/text-area/index.vue.js"),a=require("../ap-form/items/checkbox/index.vue.js"),p=require("../ap-field/date/index.vue.js"),c=require("../ap-field/date-range/index.vue.js"),d=require("../ap-field/number/index.vue.js"),l=require("../ap-field/radio/index.vue.js"),v=require("../ap-field/select/index.vue.js"),o=require("../ap-field/switch/index.vue.js"),x=require("../ap-field/text/index.vue.js"),g=require("../ap-field/text-area/index.vue.js"),q=require("../ap-field/checkbox/index.vue.js"),f=require("../ap-action/group/index.vue.js"),y=require("./components/index/index.vue2.js"),$={date:e.default,dateRange:t.default,number:_.default,radio:u.default,select:r.default,switch:n.default,text:i.default,textArea:s.default,checkbox:a.default},m={date:p.default,dateRange:c.default,number:d.default,radio:l.default,select:v.default,switch:o.default,text:x.default,textArea:g.default,checkbox:q.default,action:f.default,index:y.default},b=["action","index"];exports.apTableFormItemMap=$;exports.apTableRenderItemMap=m;exports.noRenderAsFormItemValueList=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../ap-action/index.js");require("../ap-field/index.js");require("../ap-form/index.js");require("./components/index/index.vue.js");require("./components/status/index.vue.js");const e=require("../ap-form/items/date/index.vue.js"),t=require("../ap-form/items/date-range/index.vue.js"),_=require("../ap-form/items/number/index.vue.js"),u=require("../ap-form/items/radio/index.vue.js"),r=require("../ap-form/items/select/index.vue.js"),i=require("../ap-form/items/switch/index.vue.js"),n=require("../ap-form/items/text/index.vue.js"),s=require("../ap-form/items/text-area/index.vue.js"),a=require("../ap-form/items/checkbox/index.vue.js"),p=require("../ap-field/date/index.vue.js"),c=require("../ap-field/date-range/index.vue.js"),d=require("../ap-field/number/index.vue.js"),l=require("../ap-field/radio/index.vue.js"),v=require("../ap-field/select/index.vue.js"),o=require("../ap-field/switch/index.vue.js"),x=require("../ap-field/text/index.vue.js"),g=require("../ap-field/text-area/index.vue.js"),q=require("../ap-field/checkbox/index.vue.js"),f=require("../ap-action/group/index.vue.js"),y=require("./components/index/index.vue2.js"),$=require("./components/status/index.vue2.js"),m={date:e.default,dateRange:t.default,number:_.default,radio:u.default,select:r.default,switch:i.default,text:n.default,textArea:s.default,checkbox:a.default},b={date:p.default,dateRange:c.default,number:d.default,radio:l.default,select:v.default,switch:o.default,text:x.default,textArea:g.default,checkbox:q.default,action:f.default,index:y.default,status:$.default},I=["action","index"];exports.apTableFormItemMap=m;exports.apTableRenderItemMap=b;exports.noRenderAsFormItemValueList=I;

package/lib/src/ap-table/interface.d.ts

@@ -1,7 +1,7 @@
 import { ColumnType, TableProps } from 'ant-design-vue/es/table';
 import { CompareFn, SortOrder } from 'ant-design-vue/es/table/interface';
 import { ApFormSearchFormProps } from '../ap-form';
-import { ApFormItemCheckboxProps, ApFormItemDateProps, ApFormItemDateRangeProps, ApFormItemNumberProps, ApFormItemRadioProps, ApFormItemSelectProps, ApFormItemSwitchProps, ApFormItemTextAreaProps, ApFormItemTextProps } from 'src/ap-form/items/interface';
+import { ApFormItemCheckboxProps, ApFormItemDateProps, ApFormItemDateRangeProps, ApFormItemNumberProps, ApFormItemRadioProps, ApFormItemSelectProps, ApFormItemSwitchProps, ApFormItemTextAreaProps, ApFormItemTextProps } from '../ap-form/items/interface';
 import { Recordable } from '../type';
 import { CSSProperties } from 'vue';
 import { ApActionGroupProps } from '../ap-action';
@@ -9,7 +9,13 @@ import { ApTableIndexProps } from './components/interface';
 
 export type ValueEnumType = {
     text: string;
-    status?: string;
+    /**
+     * 当前枚举值与定义的状态，等同于Badge的status
+     */
+    status?: 'success' | 'error' | 'processing' | 'warning' | 'default';
+    /**
+     * 如果status预定义的颜色无法满足需求，你可以自定义徽标的颜色，注意`color`比`status`的优先级更高
+     */
     color?: string;
     disabled?: boolean;
 };
@@ -45,7 +51,7 @@ export type ApTableValueFields = {
     index: ApTableIndexProps;
 };
 export type ValueEnum = Record<string, ValueEnumType>;
-export type ExtraProColumnType<T> = Omit<ColumnType<T>, 'children'> & {
+export type ExtraProColumnType<T> = Omit<ColumnType<T>, 'children' | 'filters'> & {
     sorter?: string | boolean | CompareFn<T> | {
         compare?: CompareFn<T>;
         /** Config multiple sorter order priority */
@@ -102,6 +108,10 @@ export type ApColumnType<ValueType extends keyof ApTableValueFields = 'text', Re
      * @description 值越大，越排在前面，请设置正整数，设置为0或负数将会无效
      */
     order?: number;
+    /**
+     * 表头的菜单筛选项，设置为true后会尝试使用valueEnum生成filters
+     */
+    filters?: ColumnType<RecordType>['filters'] | true;
 };
 export type RequestData<T> = {
     data: T[] | undefined;
@@ -190,3 +200,6 @@ export type ApTableExpose = {
     submit: () => void;
     reset: () => void;
 };
+export type FixedApColumnType<ValueType extends keyof ApTableValueFields = 'text', RecordType = any> = Omit<ApColumnType<ValueType, RecordType>, 'filters'> & {
+    filters?: ColumnType<RecordType>['filters'];
+};

package/lib/src/ap-table/utils.d.ts

@@ -1,5 +1,16 @@
 import { ApColumnType, ApTableValueFields, ValueEnum, ValueEnumType } from './interface';
 import { Translator } from '../config-provider';
+import { AlignType, FixedType, Key, CellEllipsisType, DataIndex, ColumnType, GetComponentProps, ColumnGroupType } from 'ant-design-vue/es/vc-table/interface';
+import { ColumnTitle, CompareFn, SortOrder, FilterDropdownProps, FilterValue, FilterSearchType, ColumnFilterItem } from 'ant-design-vue/es/table/interface';
+import { Breakpoint } from 'ant-design-vue/es/_util/responsiveObserve';
+import { ExtractPropTypes, PropType, CSSProperties } from 'vue';
+import { VueTypeValidableDef } from '../../node_modules/vue-types';
+import { TriggerType } from 'ant-design-vue/es/tooltip/abstractTooltipProps';
+import { TooltipPlacement, AdjustOverflow } from 'ant-design-vue/es/tooltip';
+import { LiteralUnion, VueNode } from 'ant-design-vue/es/_util/type';
+import { PresetColorType } from 'ant-design-vue/es/_util/colors';
+import { AlignType, BuildInPlacements } from 'ant-design-vue/es/vc-trigger/interface';
+import { TableColumnType } from 'ant-design-vue';
 
 export type FieldValueType = 'multiple' | 'multipleNumber' | 'dayjs' | 'dayjsRange' | 'dayjsDayRange' | 'number' | 'boolean' | 'object';
 export declare const formatParamsValueType: (type: FieldValueType | Record<string, FieldValueType>, value: any, cb: (t: FieldValueType, value: any) => any) => any;
@@ -29,7 +40,7 @@ export declare const objectToMap: (value: ValueEnum | undefined) => ValueEnumMap
  * @param valueEnumParams
  * @returns
  */
-export declare const valueEnumToArray: (valueEnumParams: ValueEnum) => OptionType;
+export declare const valueEnumToArray: (valueEnumParams: ValueEnum) => Partial<OptionType>[];
 /**
  * 获取列在查询表单中的排序
  * @param order
@@ -58,4 +69,166 @@ export declare function getFieldProps<RecordType = any>(fieldProps: ApColumnType
     renderIndex: number;
     column: ApColumnType<any, RecordType>;
 }): any;
+/**
+ * 获取表格的渲染类型
+ * @param item
+ * @returns
+ */
+export declare function getTableRenderType(item: ApColumnType<any, any>): "number" | "text" | "select" | "switch" | "index" | "status" | "checkbox" | "radio" | "date" | "action" | "dateRange" | "textArea";
+/**
+ * 处理表格render组件的props
+ * @param item
+ * @param renderOption
+ * @returns
+ */
+export declare function getTableRenderProps(item: ApColumnType<any, any>, renderOption: any): any;
+/**
+ * 将apColumn转化为column
+ * @param column
+ * @returns
+ */
+export declare function apColumnToColumn(column: ApColumnType<any>): {
+    align?: AlignType | undefined;
+    class?: string | undefined;
+    title?: ColumnTitle<any>;
+    width?: string | number | undefined;
+    slots?: {
+        filterIcon?: string | undefined;
+        filterDropdown?: string | undefined;
+        customRender?: string | undefined;
+        title?: string | undefined;
+    } | undefined;
+    fixed?: FixedType | undefined;
+    key?: Key | undefined;
+    responsive?: Breakpoint[] | undefined;
+    maxWidth?: number | undefined;
+    minWidth?: number | undefined;
+    ellipsis?: CellEllipsisType | undefined;
+    colSpan?: number | undefined;
+    dataIndex?: DataIndex | undefined;
+    customRender?: ((opt: {
+        value: any;
+        text: any;
+        record: any;
+        index: number;
+        renderIndex: number;
+        column: ColumnType<any>;
+    }) => any) | undefined;
+    rowSpan?: number | undefined;
+    resizable?: boolean | undefined;
+    customCell?: GetComponentProps<any> | undefined;
+    onCellClick?: ((record: any, e: MouseEvent) => void) | undefined;
+    className?: string | undefined;
+    customHeaderCell?: GetComponentProps< ColumnType<any> | ColumnGroupType<any>> | undefined;
+    customFilterDropdown?: boolean | undefined;
+    __originColumn__?: any;
+    sorter?: ((boolean | CompareFn<any> | {
+        compare?: CompareFn<any> | undefined;
+        multiple?: number | undefined;
+    }) & (string | boolean | CompareFn<any> | {
+        compare?: CompareFn<any> | undefined;
+        multiple?: number | undefined;
+    })) | undefined;
+    sortOrder?: SortOrder | undefined;
+    defaultSortOrder?: SortOrder | undefined;
+    sortDirections?: SortOrder[] | undefined;
+    showSorterTooltip?: boolean | Partial< ExtractPropTypes<{
+        title: VueTypeValidableDef<any>;
+        trigger: PropType< TriggerType | TriggerType[]>;
+        open: {
+            type: BooleanConstructor;
+            default: any;
+        };
+        visible: {
+            type: BooleanConstructor;
+            default: any;
+        };
+        placement: PropType<TooltipPlacement>;
+        color: PropType<LiteralUnion<PresetColorType>>;
+        transitionName: StringConstructor;
+        overlayStyle: {
+            type: PropType<CSSProperties>;
+            default: CSSProperties;
+        };
+        overlayInnerStyle: {
+            type: PropType<CSSProperties>;
+            default: CSSProperties;
+        };
+        overlayClassName: StringConstructor;
+        openClassName: StringConstructor;
+        prefixCls: StringConstructor;
+        mouseEnterDelay: NumberConstructor;
+        mouseLeaveDelay: NumberConstructor;
+        getPopupContainer: PropType<(triggerNode: HTMLElement) => HTMLElement>;
+        arrowPointAtCenter: {
+            type: BooleanConstructor;
+            default: any;
+        };
+        arrow: {
+            type: PropType<boolean | {
+                pointAtCenter?: boolean | undefined;
+            }>;
+            default: boolean | {
+                pointAtCenter?: boolean | undefined;
+            };
+        };
+        autoAdjustOverflow: {
+            type: PropType<boolean | AdjustOverflow>;
+            default: boolean | AdjustOverflow;
+        };
+        destroyTooltipOnHide: {
+            type: BooleanConstructor;
+            default: any;
+        };
+        align: {
+            type: PropType<AlignType>;
+            default: AlignType;
+        };
+        builtinPlacements: {
+            type: PropType<BuildInPlacements>;
+            default: BuildInPlacements;
+        };
+        children: ArrayConstructor;
+        onVisibleChange: PropType<(vis: boolean) => void>;
+        'onUpdate:visible': PropType<(vis: boolean) => void>;
+        onOpenChange: PropType<(vis: boolean) => void>;
+        'onUpdate:open': PropType<(vis: boolean) => void>;
+    }>> | undefined;
+    filtered?: boolean | undefined;
+    filterDropdown?: VueNode | ((props: FilterDropdownProps<any>) => VueNode);
+    filterMultiple?: boolean | undefined;
+    filteredValue?: FilterValue | null | undefined;
+    defaultFilteredValue?: FilterValue | null | undefined;
+    filterIcon?: VueNode | ((opt: {
+        filtered: boolean;
+        column: TableColumnType<any>;
+    }) => VueNode);
+    filterMode?: "menu" | "tree" | undefined;
+    filterSearch?: FilterSearchType<ColumnFilterItem> | undefined;
+    onFilter?: ((value: string | number | boolean, record: any) => boolean) | undefined;
+    filterDropdownOpen?: boolean | undefined;
+    onFilterDropdownOpenChange?: ((visible: boolean) => void) | undefined;
+    filterResetToDefaultFilteredValue?: boolean | undefined;
+    filterDropdownVisible?: boolean | undefined;
+    onFilterDropdownVisibleChange?: ((visible: boolean) => void) | undefined;
+    children?: ApColumnType<any, any>[] | undefined;
+    span?: number | undefined;
+    tooltip?: string | undefined;
+    copyable?: boolean | undefined;
+    hideInSearch?: boolean | undefined;
+    hideInTable?: boolean | undefined;
+    valueEnum?: ValueEnum | undefined;
+    customRenderFormItem?: ((config: ApColumnType<"text", any>) => any) | undefined;
+    valueType?: keyof ApTableValueFields | undefined;
+    fieldProps?: any;
+    order?: number | undefined;
+    filters?: true | ColumnFilterItem[] | undefined;
+};
+/**
+ * 更新查询表单的的props
+ * @param item
+ * @param fieldProps
+ * @returns
+ */
+export declare function updateFormProps(item: ApColumnType<any, any>, fieldProps: any): any;
 export {};

package/lib/src/ap-table/utils.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("lodash-unified"),a=(e,t,r)=>{let s={};return c.isObject(e)?Object.keys(e).forEach(o=>{c.isObject(e[o])?s[o]=a(e[o],t[o],r):s[o]=r(e[o],t)}):s=r(e,t),s},i=(e,t)=>{switch(e){case"dayjs":return t.valueOf();case"dayjsRange":return t.map(r=>r.valueOf());case"dayjsDayRange":{const[r,s]=t;return[r.startOf("day").valueOf(),s.endOf("day").valueOf()]}case"multiple":case"multipleNumber":return c.isArray(t)?t:[t];case"boolean":return t;case"object":return t;default:return t}};function f(e){return c.isArray(e)?e.join("."):e}function l(e){const t=Object.prototype.toString.call(e).match(/^\[object (.*)\]$/)[1].toLowerCase();return t==="string"&&typeof e=="object"?"object":e===null?"null":e===void 0?"undefined":t}const u=e=>l(e)==="map"?e:new Map(Object.entries(e||{})),d=e=>{const t=[],r=u(e);return r.forEach((s,o)=>{const n=r.get(o)||r.get(`${o}`);if(n){if(typeof n=="object"&&(n!=null&&n.text)){t.push({text:n==null?void 0:n.text,value:o,label:n==null?void 0:n.text,disabled:n.disabled});return}t.push({text:n,label:n,value:o})}}),t},m=e=>c.isUndefined(e)||e<0?0:e,p=(e,t,r)=>{if(r)return r;const s=["select","date"],o=["text","textArea","number"];if(t==="dateRange")return[e("ap.common.chooseText"),e("ap.common.chooseText")];if(s.includes(t))return e("ap.common.chooseText");if(o.includes(t))return e("ap.common.inputText")};function b(e,t){return!e||!c.isFunction(e)?e:e(t)}exports.dataIndexToStr=f;exports.formatParamsValueType=a;exports.getColumnOrder=m;exports.getFieldProps=b;exports.getPlaceholder=p;exports.objectToMap=u;exports.parseFieldValue=i;exports.valueEnumToArray=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lodash-unified"),c=(e,t,n)=>{let o={};return s.isObject(e)?Object.keys(e).forEach(u=>{s.isObject(e[u])?o[u]=c(e[u],t[u],n):o[u]=n(e[u],t)}):o=n(e,t),o},d=(e,t)=>{switch(e){case"dayjs":return t.valueOf();case"dayjsRange":return t.map(n=>n.valueOf());case"dayjsDayRange":{const[n,o]=t;return[n.startOf("day").valueOf(),o.endOf("day").valueOf()]}case"multiple":case"multipleNumber":return s.isArray(t)?t:[t];case"boolean":return t;case"object":return t;default:return t}};function p(e){return s.isArray(e)?e.join("."):e}function m(e){const t=Object.prototype.toString.call(e).match(/^\[object (.*)\]$/)[1].toLowerCase();return t==="string"&&typeof e=="object"?"object":e===null?"null":e===void 0?"undefined":t}const i=e=>m(e)==="map"?e:new Map(Object.entries(e||{})),a=e=>{const t=[],n=i(e);return n.forEach((o,u)=>{const r=n.get(u)||n.get(`${u}`);if(r){if(typeof r=="object"&&(r!=null&&r.text)){t.push({text:r==null?void 0:r.text,value:u,label:r==null?void 0:r.text,disabled:r.disabled});return}t.push({text:r,label:r,value:u})}}),t},T=e=>s.isUndefined(e)||e<0?0:e,b=(e,t,n)=>{if(n)return n;const o=["select","date"],u=["text","textArea","number"];if(t==="dateRange")return[e("ap.common.chooseText"),e("ap.common.chooseText")];if(o.includes(t))return e("ap.common.chooseText");if(u.includes(t))return e("ap.common.inputText")};function l(e,t){return!e||!s.isFunction(e)?e:e(t)}function g(e){let t=e.valueType||"text";return e.valueEnum&&(t="status"),t}function y(e,t){const n=l(e.fieldProps,t),o=(n==null?void 0:n.field)||n||{},u=e.valueType==="switch",r=e.valueType==="index",f=u?{checked:t.value}:{value:r?t.index+1:t.value};return e.valueEnum&&(o.valueEnum=e.valueEnum),{...s.omit(o,["request"]),...f}}function x(e){const t={...e};return s.isBoolean(e.filters)&&e.filters&&e.valueEnum&&(t.filters=a(e.valueEnum)),t}function h(e,t){var o;const n=t||{};return e.valueEnum&&!((o=n.field)!=null&&o.options)&&(n.field={...n.field,options:a(e.valueEnum)}),n}exports.apColumnToColumn=x;exports.dataIndexToStr=p;exports.formatParamsValueType=c;exports.getColumnOrder=T;exports.getFieldProps=l;exports.getPlaceholder=b;exports.getTableRenderProps=y;exports.getTableRenderType=g;exports.objectToMap=i;exports.parseFieldValue=d;exports.updateFormProps=h;exports.valueEnumToArray=a;

package/lib/src/theme/antd-global-overwrite/admin/index.css

@@ -271,19 +271,23 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
 .ant-modal-confirm-error .ant-modal-confirm-body > .anticon {
   color: #ff4d4f;
 }
-.ant-table-wrapper .ant-spin-container .ant-pagination.ant-table-pagination.ant-table-pagination-right {
+[class$='-basic-table'] .ant-table-wrapper .ant-spin-container .ant-pagination.ant-table-pagination.ant-table-pagination-right,
+[class$='-basic-table-form-container'] .ant-table-wrapper .ant-spin-container .ant-pagination.ant-table-pagination.ant-table-pagination-right {
   margin: 16px 0 0;
 }
-.ant-table-wrapper .ant-pagination {
+[class$='-basic-table'] .ant-table-wrapper .ant-pagination,
+[class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination {
   position: relative;
 }
-.ant-table-wrapper .ant-pagination .ant-pagination-total-text {
+[class$='-basic-table'] .ant-table-wrapper .ant-pagination .ant-pagination-total-text,
+[class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination .ant-pagination-total-text {
   position: absolute;
   left: 0;
   height: 30px;
   line-height: 30px;
 }
-.ant-table-wrapper .ant-pagination .ant-pagination-item {
+[class$='-basic-table'] .ant-table-wrapper .ant-pagination .ant-pagination-item,
+[class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination .ant-pagination-item {
   box-sizing: border-box;
   min-width: 30px;
   height: 30px;
@@ -294,45 +298,57 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
   text-align: center;
   border-radius: 4px;
 }
-.ant-table-wrapper .ant-pagination .ant-pagination-item:not(.ant-table-wrapper .ant-pagination .ant-pagination-item-active) {
+[class$='-basic-table'] .ant-table-wrapper .ant-pagination .ant-pagination-item:not([class$='-basic-table'] .ant-table-wrapper .ant-pagination .ant-pagination-item-active),
+[class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination .ant-pagination-item:not([class$='-basic-table'] .ant-table-wrapper .ant-pagination .ant-pagination-item-active),
+[class$='-basic-table'] .ant-table-wrapper .ant-pagination .ant-pagination-item:not([class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination .ant-pagination-item-active),
+[class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination .ant-pagination-item:not([class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination .ant-pagination-item-active) {
   border: 1px solid #d9d9d9;
 }
-.ant-table-wrapper .ant-pagination .ant-pagination-prev {
+[class$='-basic-table'] .ant-table-wrapper .ant-pagination .ant-pagination-prev,
+[class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination .ant-pagination-prev {
   width: 30px;
   height: 30px;
   margin: 0 4px;
   line-height: 28px;
   border: 1px solid #d9d9d9;
 }
-.ant-table-wrapper .ant-pagination .ant-pagination-next {
+[class$='-basic-table'] .ant-table-wrapper .ant-pagination .ant-pagination-next,
+[class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination .ant-pagination-next {
   width: 30px;
   height: 30px;
   margin: 0 4px;
   line-height: 28px;
   border: 1px solid #d9d9d9;
 }
-.ant-table-wrapper .ant-pagination .ant-pagination-next .ant-pagination-disabled {
+[class$='-basic-table'] .ant-table-wrapper .ant-pagination .ant-pagination-next .ant-pagination-disabled,
+[class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination .ant-pagination-next .ant-pagination-disabled {
   border: 1px solid #d9d9d9;
 }
-.ant-table-wrapper .ant-pagination .ant-pagination-options {
+[class$='-basic-table'] .ant-table-wrapper .ant-pagination .ant-pagination-options,
+[class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination .ant-pagination-options {
   margin-left: 4px;
 }
-.ant-table-wrapper .ant-pagination .ant-pagination-options .ant-select-selector {
+[class$='-basic-table'] .ant-table-wrapper .ant-pagination .ant-pagination-options .ant-select-selector,
+[class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination .ant-pagination-options .ant-select-selector {
   min-width: 90px;
   height: 30px;
 }
-.ant-table-wrapper .ant-pagination .ant-pagination-options .ant-select-selection-item {
+[class$='-basic-table'] .ant-table-wrapper .ant-pagination .ant-pagination-options .ant-select-selection-item,
+[class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination .ant-pagination-options .ant-select-selection-item {
   line-height: 28px;
 }
-.ant-table-wrapper .ant-pagination .ant-pagination-options .ant-select .ant-select-arrow {
+[class$='-basic-table'] .ant-table-wrapper .ant-pagination .ant-pagination-options .ant-select .ant-select-arrow,
+[class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination .ant-pagination-options .ant-select .ant-select-arrow {
   color: #333333;
 }
-.ant-table-wrapper .ant-pagination .ant-pagination-options .ant-pagination-options-quick-jumper {
+[class$='-basic-table'] .ant-table-wrapper .ant-pagination .ant-pagination-options .ant-pagination-options-quick-jumper,
+[class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination .ant-pagination-options .ant-pagination-options-quick-jumper {
   margin-left: 20px;
   color: #333333;
   font-size: 14px;
 }
-.ant-table-wrapper .ant-pagination .ant-pagination-options .ant-pagination-options-quick-jumper input {
+[class$='-basic-table'] .ant-table-wrapper .ant-pagination .ant-pagination-options .ant-pagination-options-quick-jumper input,
+[class$='-basic-table-form-container'] .ant-table-wrapper .ant-pagination .ant-pagination-options .ant-pagination-options-quick-jumper input {
   min-width: 60px;
   height: 30px;
   margin: 0 8px;
@@ -346,35 +362,43 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
   display: flex;
 }
 .ant-steps .ant-steps-item-icon {
+  line-height: 27px;
   width: 28px;
   height: 28px;
   margin-top: 3px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   flex-shrink: 0;
 }
+.ant-steps .ant-steps-item.ant-steps-item-process .ant-steps-item-icon .ant-steps-icon {
+  font-weight: 500;
+  font-size: 16px;
+}
+.ant-steps .ant-steps-item.ant-steps-item-process .ant-steps-item-container .ant-steps-item-description {
+  min-height: 16px;
+  margin-top: 5px;
+  color: #999999;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 1.2rem;
+}
 .ant-steps .ant-steps-item-finish .ant-steps-item-container .ant-steps-item-icon {
   background-color: #ffffff;
   border-color: #34b77c;
-  border-radius: 0;
 }
 .ant-steps .ant-steps-item-finish .ant-steps-item-container .ant-steps-finish-icon {
   width: 12px;
   height: 12px;
 }
 .ant-steps .ant-steps-item-finish .ant-steps-item-container .ant-steps-finish-icon svg {
-  display: none;
   width: 12px;
   height: 12px;
 }
 .ant-steps .ant-steps-item-finish .ant-steps-item-container .ant-steps-item-content .ant-steps-item-description {
   min-height: 16px;
-  margin-top: 6px;
+  margin-top: 5px;
   color: #999999;
   font-weight: 400;
   font-size: 12px;
-  line-height: 1rem;
+  line-height: 1.2rem;
 }
 .ant-steps .ant-steps-item-title {
   height: 24px;
@@ -398,11 +422,11 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
 }
 .ant-steps .ant-steps-item-active .ant-steps-item-container .ant-steps-item-content .ant-steps-item-description {
   min-height: 16px;
-  margin-top: 6px;
+  margin-top: 5px;
   color: #999999;
   font-weight: 400;
   font-size: 12px;
-  line-height: 1rem;
+  line-height: 1.2rem;
 }
 .ant-steps .ant-steps-item-wait .ant-steps-item-container .ant-steps-item-icon {
   background-color: #ffffff;
@@ -415,11 +439,15 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
 }
 .ant-steps .ant-steps-item-wait .ant-steps-item-container .ant-steps-item-description {
   min-height: 16px;
-  margin-top: 6px;
+  margin-top: 5px;
   color: #999999;
   font-weight: 400;
   font-size: 12px;
-  line-height: 1rem;
+  line-height: 1.2rem;
+}
+.ant-steps-item.ant-steps-item-finish.ant-steps-item-active .ant-steps-item-container .ant-steps-item-tail {
+  inset-inline-start: 13px;
+  margin: 4px 0;
 }
 .ant-steps-item.ant-steps-item-finish.ant-steps-item-active .ant-steps-item-container .ant-steps-item-icon {
   background-color: #ffffff;
@@ -434,13 +462,25 @@ div[class$='-basic-table-form-container'] form[class$='-basic-form--compact'] di
   width: 28px;
   height: 28px;
   margin-top: 3px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+}
+.ant-steps.ant-steps-vertical.ant-steps-small .ant-steps-item-icon {
+  line-height: 25px;
+  width: 24px;
+  height: 24px;
+  margin-top: 3px;
+}
+.ant-steps.ant-steps-vertical.ant-steps-small .ant-steps-item .ant-steps-item-content {
+  margin-top: 2px;
 }
 .ant-steps.ant-steps-vertical.ant-steps-small .ant-steps-item .ant-steps-item-tail {
   inset-inline-start: 13px;
-  margin: 6px 0;
+  margin: 3px -1px;
+}
+.ant-steps.ant-steps-horizontal.ant-steps-small .ant-steps-item-icon {
+  line-height: 25px;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
 }
 [class$='-basic-table'],
 [class$='-basic-table-form-container'] {