feat: qx-tags-input

-import { getConfig } from '@qx/utils';
+
+import { createRequest } from '@qx/utils';
+const request = createRequest();
+
 /**
 /**
  *
  *
  * @param appCode
  * @param appCode
@@ -13,6 +16,5 @@ export function getFieldOptions(
   funCode: string,
   funCode: string,
   params?: { useKey?: boolean; withRender?: boolean },
   params?: { useKey?: boolean; withRender?: boolean },
 ) {
 ) {
-  const { request } = getConfig();
   return request.get(`/qx-apaas-lowcode/app/${appCode}/form/${funCode}/field/option`, { params });
   return request.get(`/qx-apaas-lowcode/app/${appCode}/form/${funCode}/field/option`, { params });
 }
 }

+---
+nav:
+  path: /component
+  title: 组件
+  order: 1
+group:
+  path: /common
+  title: 公共组件方法
+  order: 0
+---
+
+## QxTagsInput 标签输入框
+
+Demo:
+
+```tsx
+import React, { useState } from 'react';
+import 'antd/lib/button/style/index.less';
+import { QxTagsInput } from '@qx/common';
+
+export default () => {
+  const [value, setValue] = useState([
+    'jsadlfjlf',
+    'djslfjaljdlsf123',
+    'jsadlfjlfjalsf123',
+    '3dsfjlsjflsdsjf24',
+    'vdsnflsjfsjfskljfvvv',
+  ]);
+  const handleChange = (newValue) => {
+    setValue(newValue);
+  };
+  return <QxTagsInput value={value} onChange={handleChange} />;
+};
+```
+
+```tsx
+import React, { useState } from 'react';
+import 'antd/lib/button/style/index.less';
+import { QxTagsInput } from '@qx/common';
+
+export default () => {
+  return <QxTagsInput disabled />;
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/basic#write-component-demo

+import React from 'react';
+import { Tag } from 'antd';
+import './style.less';
+import { CloseOutlined } from '@ant-design/icons';
+
+interface QxTagsInputProps {
+  style?: any;
+  value?: string[];
+  onChange?: (value) => void;
+  maxLength?: number;
+  disabled?: boolean;
+}
+
+export const QxTagsInput: React.FC<QxTagsInputProps> = (props) => {
+  const { style = {}, onChange = () => {}, maxLength = 200, disabled = false } = props;
+
+  const handleCloseTag = (index: number) => {
+    const _value = [...(props.value || [])];
+    _value.splice(index, 1);
+    onChange(_value);
+  };
+
+  function handleChange(e) {
+    const newValueItem = e.target.value.trim();
+    if (newValueItem && (props.value || []).indexOf(newValueItem) === -1) {
+      onChange([...(props.value || []), newValueItem]);
+    }
+    e.target.value = '';
+  }
+
+  const handleKeyPress = (e) => {
+    if (e.keyCode == 13) {
+      handleChange(e);
+    }
+  };
+  const handleBlur = (e) => {
+    handleChange(e);
+  };
+
+  return (
+    <div className={'qx-tags-input ant-input'} style={style}>
+      {(props.value || []).map((item, index) => {
+        return (
+          <Tag
+            closeIcon={<CloseOutlined />}
+            key={item}
+            closable={true}
+            onClose={() => handleCloseTag(index)}
+          >
+            {item}
+          </Tag>
+        );
+      })}
+      <input
+        type="text"
+        disabled={disabled}
+        className={'qx-tags-input__box'}
+        onKeyUp={handleKeyPress}
+        onBlur={handleBlur}
+        placeholder={'请输入'}
+        maxLength={maxLength}
+      />
+    </div>
+  );
+};

+.qx-tags-input.ant-input {
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 32px;
+  padding: 1px;
+
+  > .ant-tag {
+    margin: 3px;
+
+    &:first-child {
+      margin-left: 10px;
+    }
+
+    ~ .qx-tags-input__box {
+      padding-left: 5px;
+    }
+  }
+}
+
+.qx-tags-input__box {
+  flex: 1;
+  min-width: 52px;
+  padding-left: 10px;
+  border: none;
+  outline: none;
+
+  &::placeholder {
+    color: #bfbfbf;
+  }
+}