feat: 添加 排序组件

 import { defineConfig } from 'dumi';
 import { defineConfig } from 'dumi';
 
 
 export default defineConfig({
 export default defineConfig({
+  apiParser: {},
   outputPath: 'docs-dist',
   outputPath: 'docs-dist',
   themeConfig: {
   themeConfig: {
     name: '@qx/common ',
     name: '@qx/common ',
   },
   },
+  resolve: {
+    // 配置入口文件路径，API 解析将从这里开始
+    entryFile: './src/index.ts',
+  },
 });
 });

@@ -4,3 +4,4 @@ node_modules
 .dumi/tmp-test
 .dumi/tmp-test
 .dumi/tmp-production
 .dumi/tmp-production
 .DS_Store
 .DS_Store
+.ieda

@@ -2,26 +2,25 @@
   "name": "@qx/common",
   "name": "@qx/common",
   "version": "3.0.0",
   "version": "3.0.0",
   "description": "A react library developed with dumi",
   "description": "A react library developed with dumi",
+  "license": "MIT",
   "module": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
   "scripts": {
-    "start": "npm run dev",
-    "dev": "dumi dev",
     "build": "father build",
     "build": "father build",
     "build:watch": "father dev",
     "build:watch": "father dev",
+    "dev": "dumi dev",
     "docs:build": "dumi build",
     "docs:build": "dumi build",
-    "prepare": "husky install && dumi setup",
     "doctor": "father doctor",
     "doctor": "father doctor",
     "lint": "npm run lint:es && npm run lint:css",
     "lint": "npm run lint:es && npm run lint:css",
     "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
     "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
     "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
     "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
-    "prepublishOnly": "father doctor && npm run build"
+    "prepare": "husky install && dumi setup",
+    "prepublishOnly": "father doctor && npm run build",
+    "start": "npm run dev"
   },
   },
-  "authors": [],
-  "license": "MIT",
-  "files": [
-    "dist"
-  ],
   "commitlint": {
   "commitlint": {
     "extends": [
     "extends": [
       "@commitlint/config-conventional"
       "@commitlint/config-conventional"
@@ -44,17 +43,10 @@
       "prettier --parser=typescript --write"
       "prettier --parser=typescript --write"
     ]
     ]
   },
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0",
-    "antd": ">=5.8.4"
-  },
   "devDependencies": {
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@commitlint/config-conventional": "^17.1.0",
+    "@types/lodash-es": "^4.17.8",
     "@types/react": "^18.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@umijs/lint": "^4.0.0",
     "@umijs/lint": "^4.0.0",
@@ -69,5 +61,16 @@
     "react": "^18.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-dom": "^18.0.0",
     "stylelint": "^14.9.1"
     "stylelint": "^14.9.1"
-  }
+  },
+  "peerDependencies": {
+    "@ant-design/icons": "^5.2.5",
+    "antd": ">=5.8.4",
+    "lodash-es": "^4.17.21",
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": []
 }
 }

-# Foo
-
-This is an example component.
-
-```jsx
-import { Foo } from '@qx/common';
-
-export default () => <Foo title="Hello dumi!" />
-```

-import React, { type FC } from 'react';
-
-const Foo: FC<{ title: string }> = (props) => <h4>{props.title}</h4>;
-
-export default Foo;

-export { default as Foo } from './Foo';
+export * from './qx-sort-condition';

+import { createFromIconfontCN } from '@ant-design/icons';
+
+/**
+ * 使用：
+ *    import QxIcon from '@/packages/qx-icon';
+ *    <QxIcon type="xxx"/>
+ * 说明：
+ *    `xxx`为图标唯一标识，`iconfont.cn`对应图标下的“复制代码”所得，建议命名为“icon-xxx_yyy”，
+ *    “icon-”为固定前缀，xxx为模块类型，yyy为图标名。公共类的xxx命名为“comm”
+ * eg: <QxIcon type="icon-flow_eye"/>
+ *
+ * @type {React.FC<IconFontProps<string>>}
+ */
+const Icon = createFromIconfontCN({
+  scriptUrl: [
+    'https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_28096_13.dd706b5c23d28b13b59353264ba38e10.js', // 基础图标
+  ],
+});
+export const QxBaseIcon = (props) => {
+  const { type, ...rest } = props || {};
+
+  return <Icon type={type} {...rest}></Icon>;
+};

+import { createFromIconfontCN } from '@ant-design/icons';
+
+/**
+ * 使用：
+ *    import QxIcon from '@/packages/qx-icon';
+ *    <QxIcon type="xxx"/>
+ * 说明：
+ *    `xxx`为图标唯一标识，`iconfont.cn`对应图标下的“复制代码”所得，建议命名为“icon-xxx_yyy”，
+ *    “icon-”为固定前缀，xxx为模块类型，yyy为图标名。公共类的xxx命名为“comm”
+ * eg: <QxIcon type="icon-flow_eye"/>
+ *
+ * @type {React.FC<IconFontProps<string>>}
+ */
+export const QxBaseIcon = createFromIconfontCN({
+  scriptUrl: [
+    'https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_28096_13.dd706b5c23d28b13b59353264ba38e10.js', // 基础图标
+  ],
+});

+### 排序规则
+
+```tsx
+import React, { useState } from 'react';
+import { QxSortCondition } from './index';
+
+const options2 = [
+  {
+    label: '创建时间',
+    value: 'created_at',
+  },
+  {
+    label: '记录ID',
+    value: 'id',
+    icon: '图标',
+  },
+  {
+    label: '标题',
+    value: 'wdT8w5ZlCWPhjRzBq8E',
+  },
+  {
+    label: '描述',
+    value: 'y8OOH2fDNaFQ7ixioX0',
+  },
+  {
+    label: '文本',
+    value: '2rd3ePcrGcQolUbCLWL',
+  },
+  {
+    label: '数值',
+    value: '4pQVBruE0gtnjT8eGso',
+  },
+];
+
+export default () => {
+  const [values, setValues] = useState<
+    {
+      key: string;
+      asc: boolean;
+    }[]
+  >([
+    {
+      key: 'created_at',
+      asc: false,
+    },
+  ]);
+
+  const props = {
+    onChange: (
+      _val: {
+        key: string;
+        asc: boolean;
+      }[],
+    ) => {
+      setValues(_val);
+    },
+    value: values,
+    optionList: options2,
+  };
+
+  return <QxSortCondition {...props} />;
+};
+// <API id="QxSortCondition"></API>
+```

+import { Button, Select } from 'antd';
+import { cloneDeep, findIndex, isEqual } from 'lodash-es';
+import React, { useEffect, useState } from 'react';
+
+import { QxBaseIcon } from '../qx-base-icon/index';
+
+const { Option } = Select;
+
+type SortProps = {
+  key: string;
+  asc: boolean;
+};
+
+interface ItemProps {
+  label: string;
+  value: string | number;
+  icon?: React.ReactNode;
+}
+
+interface QxSortConditionProps {
+  /**
+   * @description 已选排序字段
+   * @default "-"
+   */
+  value: SortProps[];
+  /**
+   * @description 字段变化方法
+   * @default "-"
+   */
+  onChange: (val: SortProps[]) => void;
+  /**
+   * @description 可选字段
+   * @default "-"
+   */
+  optionList: ItemProps[];
+  sortList?: ItemProps[];
+  extraClassName?: string; // 定义额外 标签类名 覆盖排序原有样式
+}
+
+const defaultSortList = [
+  {
+    label: 'A → Z',
+    value: 'true',
+  },
+  {
+    label: 'Z → A',
+    value: 'false',
+  },
+];
+
+/**
+ * 排序条件设置
+ *
+ * @param props
+ * @constructor
+ */
+export const QxSortCondition: React.FC<QxSortConditionProps> = (props) => {
+  const { value, onChange, optionList, sortList, extraClassName } = props;
+  const [sorts, setSorts] = useState<any[]>([]);
+  const [columns, setColumns] = useState<any[]>();
+
+  useEffect(() => {
+    setColumns(optionList);
+  }, [optionList]);
+
+  // 根据`code`获取对应列对象
+  const getSortItemByDataIndex = (code: string) => {
+    if (!columns || columns.length === 0) {
+      return {};
+    }
+    const index = findIndex(columns, (o: ItemProps) => {
+      return o.value === code;
+    });
+    return columns[index];
+  };
+
+  useEffect(() => {
+    if (!columns) {
+      return;
+    }
+    if (!value || value.length === 0) {
+      const sortCol: any = getSortItemByDataIndex('created_at');
+      const item: SortProps = {
+        key: sortCol?.code,
+        asc: false,
+      };
+      setSorts([item]);
+    } else {
+      setSorts(cloneDeep(value || []));
+    }
+  }, [columns, value]);
+
+  /**
+   * 通知到父组件
+   */
+  useEffect(() => {
+    if (!sorts || (Array.isArray(sorts) && sorts.length === 0)) {
+      return;
+    }
+    const isSame = isEqual(value, sorts);
+    if (isSame) {
+      return;
+    }
+
+    if (!value && sorts?.length === 0) {
+      return;
+    }
+
+    // 更新父组件`columnsUser`
+    onChange(sorts);
+  }, [sorts]);
+
+  /**
+   * 获取未使用的`列`数组
+   */
+  const getUnSelCols = (cols: ItemProps[], exceptKey: string) => {
+    const selectedKeyArr: string[] = [];
+    (sorts || []).forEach((v: SortProps) => {
+      // 跳过排除项
+      if (!(exceptKey && v.key === exceptKey)) {
+        selectedKeyArr.push(v.key);
+      }
+    });
+
+    const unSelCols: ItemProps[] = [];
+    cols.forEach((v2: ItemProps) => {
+      let isIn = false;
+      selectedKeyArr.forEach((v3) => {
+        if (v2.value === v3) {
+          isIn = true;
+        }
+      });
+      if (!isIn) {
+        unSelCols.push(v2);
+      }
+    });
+    return unSelCols;
+  };
+
+  // 新增排序条件
+  const addSort = () => {
+    const colsTem = getUnSelCols(cloneDeep(columns || []), '') || [];
+    const sortsNew = cloneDeep(sorts || []);
+    sortsNew.push({
+      key: colsTem[0]?.value,
+      asc: true,
+    });
+    setSorts(sortsNew);
+  };
+
+  // 删除排序条件
+  const removeSort = (index: number) => {
+    const orderNew = cloneDeep(sorts || []);
+    orderNew.splice(index, 1);
+    setSorts(orderNew);
+  };
+
+  return (
+    <div
+      className={`${extraClassName || ' '} qx-sort-condition-container`}
+      style={{ width: '100%' }}
+    >
+      {(sorts || []).map((v: any, k: any) => (
+        <div style={{ marginBottom: '1em' }} key={v.key}>
+          {columns && (
+            <Select
+              defaultValue={v.key}
+              getPopupContainer={(triggerNode) => triggerNode}
+              value={v.key}
+              style={{ width: '54%' }}
+              showSearch={true}
+              filterOption={(input, option) =>
+                option?.children
+                  ?.toString()
+                  .toLowerCase()
+                  .indexOf(input.toLowerCase()) !== -1
+              }
+              onChange={(val: string) => {
+                const item = sorts[k];
+                item.key = val;
+
+                const sortsNew = cloneDeep(sorts || []);
+                sortsNew.splice(k, 1, item);
+                setSorts(sortsNew);
+              }}
+            >
+              {getUnSelCols(cloneDeep(columns || []), v.key).map(
+                (item: any) => (
+                  <Option key={item?.value} value={item?.value}>
+                    {item?.icon} {item?.label}
+                  </Option>
+                ),
+              )}
+            </Select>
+          )}
+          &nbsp;
+          <Select
+            defaultValue={String(v.asc)}
+            getPopupContainer={(triggerNode) => triggerNode}
+            value={String(v.asc)}
+            style={{ minWidth: '20%' }}
+            onChange={(val: string) => {
+              const item = sorts[k];
+              item.asc = val === 'true';
+
+              const sortsNew = cloneDeep(sorts || []);
+              sortsNew.splice(k, 1, item);
+              setSorts(sortsNew);
+            }}
+          >
+            {(sortList || defaultSortList).map((item: ItemProps) => {
+              return (
+                <Option key={item?.value} value={item.value}>
+                  {item.label}
+                </Option>
+              );
+            })}
+          </Select>
+          <span
+            className={'qx-sort-condition-container__opt'}
+            style={{ margin: '-2px 0 0 .5em' }}
+          >
+            <Button
+              size="small"
+              icon={
+                <QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-minus'} />
+              }
+              disabled={sorts.length <= 1}
+              onClick={() => removeSort(k)}
+            />
+            &nbsp;
+            <Button
+              size="small"
+              icon={
+                <QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-plus'} />
+              }
+              disabled={
+                sorts.length >=
+                ((columns || []).length > 3 ? 3 : (columns || []).length)
+              }
+              onClick={addSort}
+            />
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};

+export const options1 = [
+  {
+    label: '记录ID',
+    value: 'id',
+  },
+  {
+    label: '标题',
+    value: 'wdT8w5ZlCWPhjRzBq8E',
+  },
+  {
+    label: '描述',
+    value: 'y8OOH2fDNaFQ7ixioX0',
+  },
+  {
+    label: '文本',
+    value: '2rd3ePcrGcQolUbCLWL',
+  },
+  {
+    label: '数值',
+    value: '4pQVBruE0gtnjT8eGso',
+  },
+  {
+    label: '创建时间',
+    value: 'created_at',
+  },
+];

@@ -12,5 +12,5 @@
       "@qx/common /*": ["src/*", "*"]
       "@qx/common /*": ["src/*", "*"]
     }
     }
   },
   },
-  "include": [".dumi/**/*", ".dumirc.ts", "src/**/*"]
+  "include": [".dumi/**/*", ".dumirc.ts", "src/**/*", "typings.d.ts"]
 }
 }

+declare module '*.css';
+declare module '*.less';
+declare module '*.png';
+declare module '*.json';
+declare module '*.svg' {
+  export function ReactComponent(
+    props: React.SVGProps<SVGSVGElement>,
+  ): React.ReactElement;
+  const url: string;
+  export default url;
+}