feat：增加qx-btn按钮，qx-progress进度条，搜索框，导出功能。

@@ -10,6 +10,7 @@
       "license": "MIT",
       "license": "MIT",
       "dependencies": {
       "dependencies": {
         "@ant-design/icons": "^5.2.5",
         "@ant-design/icons": "^5.2.5",
+        "@qx/icon-btn": "^0.0.13",
         "@qx/ui": "0.0.3-beta.1",
         "@qx/ui": "0.0.3-beta.1",
         "ahooks": "^3.7.5",
         "ahooks": "^3.7.5",
         "classnames": "^2.3.2",
         "classnames": "^2.3.2",
@@ -2883,10 +2884,9 @@
       }
       }
     },
     },
     "node_modules/@qx/icon-btn": {
     "node_modules/@qx/icon-btn": {
-      "version": "0.0.1",
-      "resolved": "http://registry.npm.qgutech.com/@qx/icon-btn/download/@qx/icon-btn-0.0.1.tgz",
-      "integrity": "sha1-pW/sqh+v5hyHoxsFkjmpMsumyMk=",
-      "dev": true,
+      "version": "0.0.13",
+      "resolved": "http://registry.npm.qgutech.com/@qx/icon-btn/download/@qx/icon-btn-0.0.13.tgz",
+      "integrity": "sha512-y3i0ngFuO22I4jv5ovgOR5nDI9X+64xuie22cKfLeNjI9IZhmNBn+BtDaG7wE9DPXMyxDH0sFBhlsya22hTaqA==",
       "license": "MIT"
       "license": "MIT"
     },
     },
     "node_modules/@qx/ui": {
     "node_modules/@qx/ui": {
@@ -2936,6 +2936,13 @@
         "react-cookies": ">=0.1.1"
         "react-cookies": ">=0.1.1"
       }
       }
     },
     },
+    "node_modules/@qx/utils/node_modules/@qx/icon-btn": {
+      "version": "0.0.1",
+      "resolved": "http://registry.npm.qgutech.com/@qx/icon-btn/download/@qx/icon-btn-0.0.1.tgz",
+      "integrity": "sha1-pW/sqh+v5hyHoxsFkjmpMsumyMk=",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rc-component/color-picker": {
     "node_modules/@rc-component/color-picker": {
       "version": "1.4.1",
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/@rc-component/color-picker/-/color-picker-1.4.1.tgz",
       "resolved": "https://registry.npmmirror.com/@rc-component/color-picker/-/color-picker-1.4.1.tgz",
@@ -22525,10 +22532,9 @@
       }
       }
     },
     },
     "@qx/icon-btn": {
     "@qx/icon-btn": {
-      "version": "0.0.1",
-      "resolved": "http://registry.npm.qgutech.com/@qx/icon-btn/download/@qx/icon-btn-0.0.1.tgz",
-      "integrity": "sha1-pW/sqh+v5hyHoxsFkjmpMsumyMk=",
-      "dev": true
+      "version": "0.0.13",
+      "resolved": "http://registry.npm.qgutech.com/@qx/icon-btn/download/@qx/icon-btn-0.0.13.tgz",
+      "integrity": "sha512-y3i0ngFuO22I4jv5ovgOR5nDI9X+64xuie22cKfLeNjI9IZhmNBn+BtDaG7wE9DPXMyxDH0sFBhlsya22hTaqA=="
     },
     },
     "@qx/ui": {
     "@qx/ui": {
       "version": "0.0.3-beta.1",
       "version": "0.0.3-beta.1",
@@ -22559,6 +22565,14 @@
         "qiankun": "^2.2.1",
         "qiankun": "^2.2.1",
         "umi-request": "^1.4.0",
         "umi-request": "^1.4.0",
         "yet-another-abortcontroller-polyfill": "^0.0.4"
         "yet-another-abortcontroller-polyfill": "^0.0.4"
+      },
+      "dependencies": {
+        "@qx/icon-btn": {
+          "version": "0.0.1",
+          "resolved": "http://registry.npm.qgutech.com/@qx/icon-btn/download/@qx/icon-btn-0.0.1.tgz",
+          "integrity": "sha1-pW/sqh+v5hyHoxsFkjmpMsumyMk=",
+          "dev": true
+        }
       }
       }
     },
     },
     "@rc-component/color-picker": {
     "@rc-component/color-picker": {

@@ -44,6 +44,7 @@
   },
   },
   "dependencies": {
   "dependencies": {
     "@ant-design/icons": "^5.2.5",
     "@ant-design/icons": "^5.2.5",
+    "@qx/icon-btn": "^0.0.13",
     "@qx/ui": "0.0.3-beta.1",
     "@qx/ui": "0.0.3-beta.1",
     "ahooks": "^3.7.5",
     "ahooks": "^3.7.5",
     "classnames": "^2.3.2",
     "classnames": "^2.3.2",

@@ -10,5 +10,9 @@ export * from './qx-app-selector';
 export * from './utils';
 export * from './utils';
 export * from './qx-field';
 export * from './qx-field';
 export * from './qx-field-setter';
 export * from './qx-field-setter';
+export * from './qx-btn';
+export * from './qx-progress';
+export * from './qx-search-input';
+export * from './qx-dynamic-component';
+
 
 
-// export * from './qx-btn';

+import { createFromIconfontCN } from '@ant-design/icons/lib';
+
+/**
+ * 使用：
+ *    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 QxIcon = createFromIconfontCN({
+  scriptUrl: [
+    // require('./svg/icon-font-btn.js'),//功能按钮 专用图标
+    // '//at.alicdn.com/t/font_2917361_i07tun4416.js'
+  ],
+});
+
+export default QxIcon;

+import { createFromIconfontCN } from '@ant-design/icons/lib';
+
+/**
+ * 使用：
+ *    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 QxIcon = createFromIconfontCN({
+  scriptUrl: [require('@qx/icon-btn')],
+});
+
+export default QxIcon;

+.qx-btn(@btn-color) {
+  color: @btn-color;
+  background-color: #fff;
+  border-color: @btn-color;
+
+  &:hover,
+  &:focus {
+    color: @btn-color;
+    background-color: #fff;
+    border-color: @btn-color;
+  }
+
+  &:active {
+    color: @btn-color;
+    background-color: #fff;
+    border-color: @btn-color;
+  }
+  &.ant-btn-primary {
+    color: #fff;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+    background: @btn-color;
+    border-color: @btn-color;
+    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+
+    &:hover,
+    &:focus {
+      color: #fff;
+      background: lighten(@btn-color, 10);
+      border-color: lighten(@btn-color, 10);
+    }
+
+    &:active {
+      color: #fff;
+      background: darken(@btn-color, 7);
+      border-color: darken(@btn-color, 7);
+    }
+  }
+
+  &.ant-tooltip-disabled-compatible-wrapper,
+  &.ant-btn-link,
+  &.ant-btn-text {
+    color: @btn-color;
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+
+    &:hover,
+    &:focus {
+      color: darken(@btn-color, 5);
+      background: transparent;
+      border-color: transparent;
+    }
+
+    &:active {
+      color: darken(@btn-color, 7);
+      background: transparent;
+      border-color: transparent;
+    }
+  }
+
+  &.ant-btn-dashed {
+    color: @btn-color;
+    border-color: @btn-color;
+  }
+}
+
+@qx_btn_blue: #1764ff;
+@qx_btn_green: #52c41a;
+@qx_btn_orange: #faad14;
+@qx_btn_red: #f5222d;
+@qx_btn_purple: #722ed1;
+@qx_btn_cyan: #13c2c2;
+.qx-btn-blue {
+  .qx-btn(@qx_btn_blue);
+}
+
+.qx-btn-green {
+  .qx-btn(@qx_btn_green);
+}
+
+.qx-btn-orange {
+  .qx-btn(@qx_btn_orange);
+}
+
+.qx-btn-red {
+  .qx-btn(@qx_btn_red);
+}
+
+.qx-btn-purple {
+  .qx-btn(@qx_btn_purple);
+}
+
+.qx-btn-cyan {
+  .qx-btn(@qx_btn_cyan);
+}
+
+.qx-core-drop_down {
+  .ant-dropdown-menu-item-icon {
+    min-width: 0;
+  }
+}
+
+// 更多操作样式 迭代
+.ant-btn.ant-dropdown-trigger {
+  .qx-core-dropdown-arrow.anticon {
+    margin-right: 4px;
+  }
+
+  &.ant-dropdown-open {
+    .qx-core-dropdown-arrow.anticon {
+      transform: rotate(180deg);
+    }
+  }
+}

+import React from 'react';
+import { Button, Tooltip, Dropdown, Menu } from 'antd';
+import './index.less';
+import {
+  CloseCircleOutlined,
+  CloseOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  EllipsisOutlined,
+  MinusCircleOutlined,
+  MinusOutlined,
+  PlusCircleOutlined,
+  PlusOutlined,
+  ToolOutlined,
+  SettingOutlined,
+  CheckOutlined,
+  CopyOutlined,
+  ImportOutlined,
+  ExportOutlined,
+  FileTextOutlined,
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+  AppstoreOutlined,
+  BarsOutlined,
+  AlertOutlined,
+  EyeOutlined,
+  // DownOutlined,
+  PrinterOutlined,
+} from '@ant-design/icons';
+import QxIcon from './icon';
+import type { DropDownProps as DropdownProps, ButtonProps, TooltipProps } from 'antd/lib';
+
+export const BUTTON_ICONS_MAP: { [index: string]: React.ReactElement } = {
+  PlusOutlined: <PlusOutlined />,
+  MinusOutlined: <MinusOutlined />,
+  PlusCircleOutlined: <PlusCircleOutlined />,
+  MinusCircleOutlined: <MinusCircleOutlined />,
+  CloseCircleOutlined: <CloseCircleOutlined />,
+  CloseOutlined: <CloseOutlined />,
+  CheckOutlined: <CheckOutlined />,
+  DeleteOutlined: <DeleteOutlined />,
+  EyeOutlined: <EyeOutlined />,
+  EditOutlined: <EditOutlined />,
+  FileTextOutlined: <FileTextOutlined />,
+  EllipsisOutlined: <EllipsisOutlined />,
+  SettingOutlined: <SettingOutlined />,
+  ToolOutlined: <ToolOutlined />,
+  CopyOutlined: <CopyOutlined />,
+  ImportOutlined: <ImportOutlined />,
+  ExportOutlined: <ExportOutlined />,
+  PlayCircleOutlined: <PlayCircleOutlined />,
+  PauseCircleOutlined: <PauseCircleOutlined />,
+  AppstoreOutlined: <AppstoreOutlined />,
+  BarsOutlined: <BarsOutlined />,
+  AlertOutlined: <AlertOutlined />,
+  PrinterOutlined: <PrinterOutlined />,
+};
+export const BUTTON_COLORS = {
+  blue: '#1764FF',
+  green: '#52c41a',
+  orange: '#faad14',
+  red: '#f5222d',
+  purple: '#722ed1',
+  cyan: '#13c2c2',
+};
+
+//'#1890ff' primary
+//'#52c41a' success
+//'#faad14' Warning
+// #f5222d  error
+/*@purple-base: #722ed1;
+@cyan-base: #13c2c2;*/
+
+export interface DropdownMenuItem {
+  code?: string;
+  name?: string;
+  icon?: string;
+}
+
+export interface QxButtonProps extends ButtonProps {
+  name?: string;
+  color?: string;
+  batch?: boolean; //冗余属性
+  flag?: string; //冗余属性
+  action?: string; //冗余属性
+  line?: boolean; //冗余属性
+  code?: string; //冗余属性
+  needConfirm?: boolean; //冗余属性
+  tooltip?: string;
+  /**
+   * 下拉菜单选项
+   */
+  dropdownMenuItems?: DropdownMenuItem[];
+  /**
+   * 下拉菜单点击事件
+   */
+  handleMenuClick?: (...args: any) => void;
+  /**
+   * 下拉菜单参数
+   */
+  dropdownProps?: DropdownProps;
+  /**
+   * 是否显示下拉菜单，默认 true
+   */
+  showDropdown?: boolean;
+  // 提示框相关参数
+  tooltipProps?: TooltipProps | undefined;
+  extraDom?: React.ReactNode | undefined; // 额外标签
+}
+
+const Icon = ({ name }) => {
+  if (name?.$$typeof) return name;
+  return name ? (
+    String(name).indexOf('http') > -1 ? (
+      <img
+        src={String(name)}
+        style={{
+          width: '16px',
+          height: '16px',
+          marginRight: '4px',
+          verticalAlign: 'text-bottom',
+          borderRadius: '50%',
+        }}
+        alt=""
+      />
+    ) : String(name).indexOf('-') > -1 ? (
+      <QxIcon type={String(name)} />
+    ) : (
+      BUTTON_ICONS_MAP[name + ''] || <PlusOutlined />
+    )
+  ) : null;
+};
+
+export const QxButton: React.FC<QxButtonProps> = (props) => {
+  const {
+    name,
+    style,
+    icon,
+    batch,
+    line,
+    needConfirm,
+    className = '',
+    flag,
+    color,
+    tooltip = '',
+    dropdownMenuItems = [],
+    handleMenuClick,
+    dropdownProps = {},
+    showDropdown = true,
+    tooltipProps,
+    extraDom,
+    ...rest
+  } = props;
+  const showMenu = Array.isArray(dropdownMenuItems) && dropdownMenuItems?.length && showDropdown;
+
+  const getMenuItem = (_menuItems: any) =>
+    _menuItems?.map((menu) => {
+      return {
+        ...menu,
+        label: menu?.label || menu?.name,
+        key: menu?.key || menu?.code,
+        children: getMenuItem(menu?.dropdownMenuItems),
+      };
+    });
+
+  const generateMenu = (items: any) => {
+    return getMenuItem(items)?.map((item) => {
+      if (item.children?.length) {
+        return (
+          <Menu.SubMenu
+            icon={
+              <span>
+                <Icon name={item.icon} />
+              </span>
+            }
+            title={item.label}
+            key={item.key}
+            disabled={!!item?.disabled}
+          >
+            {generateMenu(item.children)}
+          </Menu.SubMenu>
+        );
+      } else {
+        return (
+          <Menu.Item
+            icon={
+              <span>
+                <Icon name={item.icon} />
+              </span>
+            }
+            key={item.key}
+            onClick={() => handleMenuClick(item)}
+            disabled={!!item?.disabled}
+          >
+            {item.label}
+          </Menu.Item>
+        );
+      }
+    });
+  };
+
+  const menu = () => <Menu>{generateMenu(dropdownMenuItems)}</Menu>;
+  const btnChildren = name ? name : props.children;
+
+  const button = !!extraDom ? (
+    <Button
+      className={'qx-btn ' + className + ' ' + (color ? `qx-btn-${color}` : '')}
+      {...rest}
+      icon={<Icon name={icon} />}
+    >
+      {showMenu && btnChildren && props?.type !== 'link' ? (
+        <>
+          <QxIcon type={'icon-common-arrow'} className={'qx-core-dropdown-arrow'} />
+          {btnChildren}
+        </>
+      ) : (
+        btnChildren
+      )}
+      {extraDom}
+    </Button>
+  ) : (
+    <Button
+      className={'qx-btn ' + className + ' ' + (color ? `qx-btn-${color}` : '')}
+      {...rest}
+      icon={<Icon name={icon} />}
+    >
+      {showMenu && btnChildren && props?.type !== 'link' ? (
+        <>
+          <QxIcon type={'icon-common-arrow'} className={'qx-core-dropdown-arrow'} />
+          {btnChildren}
+        </>
+      ) : (
+        btnChildren
+      )}
+    </Button>
+  );
+
+  const _dropdownProps: Omit<DropdownProps, 'overlay'> = {
+    overlayClassName: 'qx-core-drop_down',
+    ...dropdownProps,
+  };
+
+  const content = showMenu ? (
+    <Dropdown overlay={menu} {..._dropdownProps}>
+      {button}
+    </Dropdown>
+  ) : (
+    button
+  );
+
+  // extraDom 有额外标签时  tooltip不生效
+  if (tooltip && !extraDom) {
+    return (
+      <Tooltip {...(tooltipProps || {})} title={tooltip}>
+        {content}
+      </Tooltip>
+    );
+  }
+
+  return content;
+};

+import type { ReactNode } from 'react';
+
+const cache = {};
+/**
+ *
+ * @param url 组件地址
+ * @param packages 依赖
+ * @param name 组件名称
+ * @param fileServer
+ * @returns
+ */
+export async function fetchComponent(
+  url: string,
+  name: string,
+  packages: Record<string, any>,
+  fileServer: boolean,
+  request?: any,
+) {
+  if (cache[url]) {
+    const cacheModule = await cache[url];
+
+    if (name && !cacheModule[name]) {
+      throw new Error('component not found');
+    }
+
+    return {
+      default: cacheModule[name || 'default'],
+    };
+  }
+
+  let resolve;
+  let reject;
+
+  cache[url] = new Promise((_resolve, _reject) => {
+    resolve = _resolve;
+    reject = _reject;
+  });
+
+  try {
+    let _url = url;
+    if (fileServer && !url.startsWith('http')) {
+      const data = await getFileServerPath(request);
+      if (data) {
+        _url = data?.endpoint + url;
+      }
+    }
+
+    const text = await fetch(_url).then((a) => {
+      if (!a.ok) {
+        throw new Error('Network response was not ok');
+      }
+      return a.text();
+    });
+
+    const module = getParsedModule(text, packages);
+
+    const result = { default: {} };
+
+    if (module.exports?.$$typeof || typeof module.exports === 'function') {
+      module.exports.default = module.exports as ReactNode;
+    }
+
+    if (!module.exports?.default && !name) {
+      throw new Error('module default is undefined');
+    }
+
+    result.default = module.exports[name || 'default'];
+
+    if (!result.default) {
+      throw new Error('component not found');
+    }
+
+    resolve(module.exports);
+
+    return result;
+  } catch (error) {
+    reject(error);
+    throw new Error(error);
+  }
+}
+
+function getParsedModule(code: string, packages: Record<string, any>) {
+  const module: {
+    exports: {
+      default?: React.ReactNode;
+      $$typeof?: any;
+    };
+  } = {
+    exports: {},
+  };
+
+  const require = (name: string) => {
+    return packages[name];
+  };
+
+  try {
+    Function('require, exports, module, process', code)(
+      require,
+      module.exports,
+      module,
+      window.process || process,
+    );
+  } catch (error) {
+    throw new Error(error.message);
+  }
+
+  return module;
+}
+
+function getFileServerPath(request?) {
+  return ((window as any)?.qx?.sdk?.request || request)?.get?.(
+    '/qgyun-service-fs-manager/fileSetting/get',
+    {
+      headers: {
+        businessCode: 'design',
+      },
+    },
+  );
+}
+
+export function isMobile() {
+  return 'ontouchstart' in document.documentElement;
+}

+---
+nav:
+  path: /component
+  title: 组件
+  order: 1
+group:
+  path: /view
+  title: 业务组件
+  order: 0
+---
+
+## QxDynamicComponent
+
+### 默认导出
+
+```tsx
+import React from 'react';
+import { QxDynamicComponent } from '@qx/common';
+
+export default () => (
+  <QxDynamicComponent url="http://10.9.1.180/qx-apaaspublic/widgets/default/@qx-cw/demo1/index.umd.min.js" />
+);
+```
+
+### 导出多个组件
+
+```tsx
+import React from 'react';
+import { QxDynamicComponent } from '@qx/common';
+
+export default () => (
+  <>
+    <QxDynamicComponent
+      url="http://192.168.1.182/qx-apaaspublic/widgets/default/@qx-cw/demo2/index.umd.min.js"
+      component="QxDemo21"
+    />
+    <QxDynamicComponent
+      url="http://192.168.1.182/qx-apaaspublic/widgets/default/@qx-cw/demo2/index.umd.min.js"
+      component="QxDemo22"
+    />
+  </>
+);
+```
+
+<API></API>

+import React, { useMemo } from 'react';
+import ReactDOM from 'react-dom';
+import { Skeleton } from 'antd';
+import { fetchComponent, isMobile } from './fetchComponent';
+
+const packages = {
+  react: React,
+  'react-dom': ReactDOM,
+};
+
+export const QxDynamicComponent: React.FC<QxDynamicComponentProps> = (props) => {
+  const { config = {} } = props;
+
+  const {
+    profile: _profile = {},
+    skeleton = true,
+    component,
+    fileServer = false,
+    request,
+    url,
+    ...rest
+  } = getComponentConfig();
+
+  const profile = useMemo(() => ({ ...rest, ..._profile }), [_profile, rest]);
+
+  const Comp = useMemo<React.FC<typeof profile>>(() => {
+    return React.lazy(async () => {
+      try {
+        return await fetchComponent(url, component, packages, fileServer, request);
+      } catch (error) {
+        console.warn(error);
+        return {
+          default: () => <span style={{ color: 'red' }}>加载错误: {error.message}</span>,
+        };
+      }
+    });
+  }, [url]);
+
+  function getComponentConfig(key?: string) {
+    const mergedConfig: QxDynamicComponentProps = Object.assign(
+      {},
+      props,
+      config[isMobile() ? 'h5' : 'pc'] || {},
+      {
+        url: isMobile() ? props.h5Url : props.url,
+      },
+    );
+    return key ? mergedConfig[key] : mergedConfig;
+  }
+
+  return (
+    <React.Suspense
+      fallback={
+        skeleton ? typeof skeleton === 'boolean' ? <Skeleton.Input active /> : skeleton : null
+      }
+    >
+      <Comp {...profile} />
+    </React.Suspense>
+  );
+};
+
+export interface QxDynamicComponentProps extends Record<string, any> {
+  /**
+   * 组件地址
+   */
+  url: string;
+  /**
+   * 移动端组件地址
+   */
+  h5Url: string;
+  /**
+   * 组件 props
+   */
+  profile?: Record<string, any>;
+  /**
+   * 是否显示加载骨架
+   */
+  skeleton?: boolean | React.ReactNode;
+  /**
+   * 组件名称
+   */
+  component: string;
+  /**
+   * 文件服务，未 true 时会自动拼接文件服务器地址
+   */
+  fileServer?: boolean;
+  /**
+   * 组件生效范围
+   */
+  scope: Record<'form' | 'search' | 'table' | 'card', boolean>;
+  /**
+   * 请求方法
+   */
+  request?: any;
+  /**
+   * 配置项
+   */
+  config?: Partial<Record<PlatformType, QxDynamicComponentProps>>;
+}
+
+export type PlatformType = 'h5' | 'pc';

+@import '~@qx/ui/src/style/variable.less';
+
+.qx-progress__horizontal {
+  width: 100%;
+  min-width: 128px;
+  max-width: 208px;
+  height: 32px;
+
+  .ant-progress-line {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .ant-progress-show-info .ant-progress-outer {
+    margin-right: unset;
+    padding-right: unset;
+  }
+  .ant-progress-outer {
+    flex: 1;
+  }
+
+  .ant-progress-text {
+    width: 40px;
+    overflow: hidden;
+    color: @N9;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .ant-progress-bg {
+    background-color: @B8;
+  }
+}
+
+.qx-progress__horizontal--look {
+  min-width: 146px;
+  max-width: 226px;
+}
+.qx-progress__annular {
+  .ant-progress-inner {
+    svg {
+      color: @B8;
+    }
+  }
+  .ant-progress-status-success
+    .ant-progress-inner:not(.ant-progress-circle-gradient)
+    .ant-progress-circle-path {
+    stroke: @B8;
+  }
+  .ant-progress-circle.ant-progress-status-success .ant-progress-text {
+    color: @N9;
+  }
+
+  .qx-pa--main .ant-progress-text {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+    text-overflow: ellipsis;
+  }
+  .qx-pa--default {
+    .ant-progress-text {
+      width: 40px;
+      padding: 0 2px;
+      font-size: 12px;
+    }
+  }
+  .qx-pa--middle {
+    .ant-progress-text {
+      width: 64px;
+      margin-top: -5px;
+      margin-left: -16px;
+      padding: 0 4px;
+      font-size: 20px;
+      text-align: center;
+      scale: 0.5;
+    }
+  }
+  .qx-pa--small {
+    .ant-progress-text {
+      width: 48px;
+      margin-top: -4px;
+      margin-left: -12px;
+      padding: 0 4px;
+      font-size: 16px;
+      text-align: center;
+      scale: 0.5;
+    }
+  }
+}
+.qx-progress__horizontal,
+.qx-progress__annular {
+  display: flex;
+  align-items: center;
+}
+
+.qx-progress__look {
+  margin-left: 4px;
+  color: @N7;
+  cursor: pointer;
+
+  &:hover {
+    color: @B8;
+  }
+}
+
+.qx-pa-tooltip,
+.qx-ph-tooltip {
+  .ant-tooltip-inner {
+    color: @N9;
+  }
+}

+---
+nav:
+  path: /component
+  title: 组件
+  order: 1
+group:
+  path: /common
+  title: 百分比进度条
+  order: 0
+---
+
+## QxProgress 百分比进度条
+
+### 水平进度条
+
+```tsx
+import React from 'react';
+import { QxProgress } from '@qx/common';
+
+export default () => {
+  return <QxProgress value={34} formatValue={'这是34%'} type={'bar'} />;
+};
+```
+
+### 环状进度条
+
+```tsx
+import React from 'react';
+import { QxProgress } from '@qx/common';
+
+export default () => {
+  return <QxProgress value={34} type={'circle'} />;
+};
+```
+
+### 环状进度条小中大
+
+```tsx
+import React from 'react';
+import { QxProgress } from '@qx/common';
+
+export default () => {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <QxProgress value={34} formatValue={'34%'} type={'circle'} size={'small'} />
+      <QxProgress value={34} formatValue={'34%'} type={'circle'} size={'middle'} />
+      <QxProgress value={34} formatValue={'34%'} type={'circle'} size={'default'} />
+    </div>
+  );
+};
+```
+
+### 隐私保护条形
+
+```tsx
+import React, { useState } from 'react';
+import { QxProgress } from '@qx/common';
+
+export default () => {
+  return (
+    <QxProgress
+      value={34}
+      formatValue={'34%'}
+      type={'bar'}
+      controlPrivacy={true}
+      privacy={true}
+      size={'default'}
+    />
+  );
+};
+```
+
+### 隐私保护环状
+
+```tsx
+import React, { useState } from 'react';
+import { QxProgress } from '@qx/common';
+
+export default () => {
+  const [privacy, setPrivacy] = useState(true);
+  return (
+    <QxProgress
+      value={34}
+      formatValue={'34%'}
+      type={'circle'}
+      controlPrivacy={true}
+      privacy={true}
+      size={'default'}
+    />
+  );
+};
+```
+
+<API></API>

+import React, { useState } from 'react';
+import { Progress, Tooltip } from 'antd';
+import './index.less';
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
+
+interface QxProgressProps {
+  /**
+   * @description 值
+   */
+  value: number;
+  /**
+   * @description 进度条类型
+   * @default "circle"
+   */
+  type?: 'bar' | 'circle';
+  /**
+   * @description 环状进度条规格
+   * @default "small"
+   */
+  size?: 'small' | 'middle' | 'default' | string | undefined;
+  /**
+   * @description 是否开启隐私保护
+   * @default "false"
+   */
+  privacy?: boolean;
+  /**
+   * @description 自定义显示的内容
+   */
+  formatValue?: string | number;
+  /**
+   * @description 是否需要控制隐私保护的按钮
+   * @default "false"
+   */
+  controlPrivacy?: boolean;
+  /**
+   * @description 位置
+   * @default "left"
+   */
+  align?: string;
+}
+
+export const QxProgress: React.FC<QxProgressProps> = (props) => {
+  const { value, type, size, privacy, formatValue, controlPrivacy, align } = props;
+  const [privacyLocal, setPrivacyLocal] = useState<boolean>(privacy);
+
+  return (
+    <>
+      {value || typeof value === 'number' ? (
+        <>
+          {type === 'bar' ? (
+            <div
+              className={`qx-progress__horizontal ${
+                controlPrivacy && privacy ? 'qx-progress__horizontal--look' : ''
+              }`}
+              style={{ justifyContent: align || 'left' }}
+            >
+              <Progress
+                percent={
+                  (!controlPrivacy && privacy) || (controlPrivacy && privacyLocal) ? 0 : value
+                }
+                format={() => (
+                  <Tooltip
+                    overlayClassName={'qx-ph-tooltip'}
+                    title={
+                      (!controlPrivacy && privacy) || (controlPrivacy && privacyLocal)
+                        ? '***%'
+                        : formatValue || `${value}%`
+                    }
+                    color={'#fff'}
+                  >
+                    {(!controlPrivacy && privacy) || (controlPrivacy && privacyLocal)
+                      ? '***%'
+                      : formatValue || `${value}%`}
+                  </Tooltip>
+                )}
+              />
+              {controlPrivacy && privacy ? (
+                <span
+                  className={'qx-progress__look'}
+                  onClick={() => {
+                    setPrivacyLocal(!privacyLocal);
+                  }}
+                >
+                  {privacyLocal ? <EyeInvisibleOutlined /> : <EyeOutlined />}
+                </span>
+              ) : null}
+            </div>
+          ) : (
+            <div className={'qx-progress__annular'} style={{ justifyContent: align || 'left' }}>
+              <Progress
+                strokeWidth={10}
+                type="circle"
+                format={() => (
+                  <Tooltip
+                    overlayClassName={'qx-pa-tooltip'}
+                    title={
+                      (!controlPrivacy && privacy) || (controlPrivacy && privacyLocal)
+                        ? '***%'
+                        : formatValue || `${value}%`
+                    }
+                    color={'#fff'}
+                  >
+                    {(!controlPrivacy && privacy) || (controlPrivacy && privacyLocal)
+                      ? '***%'
+                      : formatValue || `${value}%`}
+                  </Tooltip>
+                )}
+                percent={
+                  (!controlPrivacy && privacy) || (controlPrivacy && privacyLocal) ? 0 : value
+                }
+                className={`qx-pa--main ${
+                  size === 'default'
+                    ? 'qx-pa--default'
+                    : size === 'middle'
+                    ? 'qx-pa--middle'
+                    : 'qx-pa--small'
+                }`}
+                width={size === 'default' ? 40 : size === 'middle' ? 32 : 24}
+              />
+              {controlPrivacy && privacy ? (
+                <span
+                  className={'qx-progress__look'}
+                  onClick={() => {
+                    setPrivacyLocal(!privacyLocal);
+                  }}
+                >
+                  {privacyLocal ? <EyeInvisibleOutlined /> : <EyeOutlined />}
+                </span>
+              ) : null}
+            </div>
+          )}
+        </>
+      ) : null}
+    </>
+  );
+};

+.qx-search-input.ant-input-affix-wrapper {
+  height: 32px;
+  margin: 0;
+  padding: 0 16px 0 0;
+  background-color: #f4f4f5;
+  border: 1px solid #f4f4f5;
+  border-radius: 16px !important;
+
+  .ant-input {
+    background-color: transparent;
+  }
+}

+---
+nav:
+  path: /component
+  title: 组件
+  order: 1
+group:
+  path: /common
+  title: 公共组件方法
+  order: 0
+---
+
+## QxSearchInput 实时搜索框
+
+Demo:
+
+```tsx
+import { QxSearchInput } from '@qx/common';
+import type { InputRef } from 'antd';
+import { Button } from 'antd';
+import { useRef, useState } from 'react';
+
+export default () => {
+  // 输入框内容
+const [keyValue, setKeyValue] = useState('');
+const searchInputRef = useRef<InputRef>(null);
+
+const handleChange = (val: string) => {
+  // 输入框内容变化时的回调、按下回车的回调
+  setKeyValue(val);
+};
+  return (
+    <div>
+      <Button
+        type="primary"
+        onClick={() => {
+          // 自动聚焦
+          searchInputRef?.current!.focus({
+            cursor: 'end',
+          });
+        }}
+      >
+        聚焦
+      </Button>
+      <QxSearchInput
+        searchInputRef={searchInputRef}
+        value={keyValue}
+        onChange={handleChange}
+        onPressEnter={handleChange}
+        // prefix={prefixIcon}
+      />
+    </div>
+  );
+};
+```
+
+<API></API>
+
+More skills for writing demo: https://d.umijs.org/guide/basic#write-component-demo

+import React, { CSSProperties, Ref } from 'react';
+import { Input } from 'antd';
+import type { InputProps, InputRef } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import './index.less';
+
+const prefixCls = 'qx-search-input';
+
+type QxSearchInputProps = {
+  // searchInputRef.current 获取当前input Dom 元素 自动聚焦
+  searchInputRef?: Ref<InputRef>;
+  // 自定义样式 style
+  style?: CSSProperties;
+  // 轻提示
+  placeholder?: string;
+  // 支持 antd-Input 自身API
+} & InputProps;
+
+export const QxSearchInput: React.FC<QxSearchInputProps> = (props) => {
+  const defaultPrefixIcon: React.ReactNode = <SearchOutlined />;
+
+  return (
+    <Input
+      ref={props.searchInputRef}
+      className={prefixCls}
+      placeholder={props?.placeholder || '请输入搜索内容'}
+      prefix={props?.prefix || defaultPrefixIcon}
+      {...props}
+    />
+  );
+};