feat: 新增用于编辑键值对的 input-kv 组件 (#2732)

* feat: 新增用于编辑键值对的 input-kv 组件

* 补充其它类型的值支持

docs/zh-CN/components/form/input-kv.md

@@ -0,0 +1,85 @@
+---
+title: InputKV 键值对
+description:
+type: 0
+group: null
+menuName: InputKV
+icon:
+order: 14
+---
+
+## 基本用法
+
+`input-kv` 是用来支持对象形式的数据编辑，比如类似这样的数据：
+
+```json
+{
+  "css": {
+    "width": 1,
+    "height": 2
+  }
+}
+```
+
+`css` 中的 key 是不确定的，没法用 combo 来实现，这时可以使用 `input-kv`
+
+```schema: scope="body"
+{
+    "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "debug": true,
+    "body": [
+        {
+            "type": "input-kv",
+            "name": "kv"
+        }
+    ]
+}
+```
+
+最终发送的数据将会是
+
+## 自定义 value 的格式
+
+key 只能是字符串，因此输入格式是 `input-text`，但 value 格式可通过 `valueType` 自定义。
+
+```schema: scope="body"
+{
+    "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "debug": true,
+    "body": [
+        {
+            "type": "input-kv",
+            "name": "kv",
+            "valueType": "input-number"
+        }
+    ]
+}
+```
+
+## 自定义提示信息
+
+```schema: scope="body"
+{
+    "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "debug": true,
+    "body": [
+        {
+            "type": "input-kv",
+            "name": "css",
+            "keyPlaceholder": "属性",
+            "valuePlaceholder": "值"
+        }
+    ]
+}
+```
+
+## 属性表
+
+| 属性名           | 类型     | 默认值         | 说明               |
+| ---------------- | -------- | -------------- | ------------------ |
+| valueType        | `type`   | `"input-text"` | 值类型             |
+| keyPlaceholder   | `string` |                | key 的提示信息的   |
+| valuePlaceholder | `string` |                | value 的提示信息的 |

examples/components/Components.tsx

@@ -354,6 +354,14 @@ export const components = [
             makeMarkdownRenderer
           )
       },
+      {
+        label: 'InputKV 键值对',
+        path: '/zh-CN/components/form/input-kv',
+        getComponent: () =>
+          import('../../docs/zh-CN/components/form/input-kv.md').then(
+            makeMarkdownRenderer
+          )
+      },
       {
         label: 'DiffEditor 对比编辑器',
         path: '/zh-CN/components/form/diff-editor',

src/index.tsx

@@ -174,6 +174,8 @@ import './compat';
 
 import './envOverwrite';
 
+import './schemaExtend';
+
 import './themes/ang';
 import './themes/cxd';
 import './themes/dark';

src/renderers/Form/Combo.tsx

@@ -1452,3 +1452,10 @@ export default class ComboControl extends React.Component<ComboProps> {
   extendsData: false
 })
 export class ComboControlRenderer extends ComboControl {}
+
+@FormItem({
+  type: 'input-kv',
+  storeType: ComboStore.name,
+  extendsData: false
+})
+export class KVControlRenderer extends ComboControl {}

src/schemaExtend.ts

@@ -0,0 +1,66 @@
+/**
+ * 扩展 Schema，目前用于实现 input-kv
+ */
+import {Schema} from './types';
+import {addSchemaFilter} from './factory';
+import {isObject} from './utils/helper';
+
+// input-kv 实际上是 combo 的一种扩展
+addSchemaFilter(function (schema: Schema, renderer, props?: any) {
+  if (schema && schema.type === 'input-kv') {
+    return {
+      ...schema,
+      multiple: true,
+      pipeIn: (value: any) => {
+        if (!isObject(value)) {
+          return [];
+        }
+        const arr: Array<any> = [];
+        Object.keys(value).forEach(key => {
+          const valueType = typeof value[key];
+          arr.push({
+            key: key || '',
+            value:
+              valueType === 'string' ||
+              valueType === 'number' ||
+              valueType === 'boolean'
+                ? value[key]
+                : JSON.stringify(value[key])
+          });
+        });
+        return arr;
+      },
+      pipeOut: (value: any) => {
+        if (!Array.isArray(value)) {
+          return value;
+        }
+        const obj: any = {};
+        value.forEach((item: any) => {
+          const key: string = item.key || '';
+          let value: any = item.value;
+          try {
+            value = JSON.parse(value);
+          } catch (e) {}
+          obj[key] = value;
+        });
+        return obj;
+      },
+      items: [
+        {
+          placeholder: schema.keyPlaceholder ?? 'Key',
+          type: 'input-text',
+          unique: true,
+          name: 'key',
+          required: true
+        },
+        {
+          placeholder: schema.valuePlaceholder ?? 'Value',
+          type: schema.valueType || 'input-text',
+          name: 'value'
+        }
+      ]
+    };
+  }
+
+  return schema;
+});