kne-union · zhipenglin · Jan 26, 2026 · Jan 26, 2026 · Jan 26, 2026
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kne-components/components-core",
-  "version": "0.4.53",
+  "version": "0.4.54",
   "files": [
     "build"
   ],
@@ -22,7 +22,7 @@
     "@kne/create-deferred": "^0.1.0",
     "@kne/ensure-slash": "^0.1.0",
     "@kne/flex-box": "^0.1.1",
-    "@kne/form-info": "^0.1.4",
+    "@kne/form-info": "^0.1.5",
     "@kne/global-context": "^1.3.2",
     "@kne/info-page": "^0.2.4",
     "@kne/is-empty": "^1.0.1",
@@ -35,6 +35,7 @@
     "@kne/react-form-plus": "^0.1.5",
     "@kne/react-icon": "^0.1.3",
     "@kne/react-intl": "^0.1.12",
+    "@kne/react-pdf-sign": "^1.1.6",
     "@kne/react-text-escape": "^0.1.4",
     "@kne/remote-loader": "^1.2.2",
     "@kne/scroll-loader": "^0.1.13",

diff --git a/src/components/FormInfo/README.md b/src/components/FormInfo/README.md
@@ -205,7 +205,8 @@ const {
     Slider,
     MoneyInput,
     ColorPicker,
-    SuperSelectTree
+    SuperSelectTree,
+    Signature
 } = fields;
 
 const BaseExample = () => {
@@ -263,7 +264,7 @@ const BaseExample = () => {
                     rule="REQ LEN-3-10 REP"
                     tips="姓名"
                 />
-            </ErrorTip>, <ColorPicker name="color" label="主题色"/>,
+            </ErrorTip>, <ColorPicker name="color" label="主题色"/>, <Signature name="sign" label="签名"/>,
                 <MoneyInput name="money" label="金额" rule="REQ" tips={"money"}/>,
                 <PhoneNumber name="phone" label="手机" rule="REQ" disabled/>,
                 <Input name="email" label="邮箱" rule="EMAIL"/>, <Upload name="file" label="文件" tips="文件" block/>,
@@ -292,21 +293,27 @@ render(<PureGlobal
                 loader: () => {
                     return window.PUBLIC_URL + "/avatar.png";
                 },
-            }, ossUpload: async ({file}) => {
-                console.log(file);
-                return new Promise((resolve) => {
-                    setTimeout(() => {
-                        const id = uniqueId("file-");
-                        resolve({
-                            data: {
-                                code: 0, data: {
-                                    id, originalName: id + "简历.pdf",
+            }, file: {
+                getUrl: {
+                    loader: () => {
+                        return window.PUBLIC_URL + "/avatar.png";
+                    }
+                }, upload: async ({file}) => {
+                    console.log(file);
+                    return new Promise((resolve) => {
+                        setTimeout(() => {
+                            const id = uniqueId("file-");
+                            resolve({
+                                data: {
+                                    code: 0, data: {
+                                        id, originalName: id + "简历.pdf",
+                                    },
                                 },
-                            },
-                        });
-                    }, 1000);
-                });
-            },
+                            });
+                        }, 1000);
+                    });
+                }
+            }
         },
     }}
 >

diff --git a/src/components/FormInfo/doc/base.js b/src/components/FormInfo/doc/base.js
@@ -15,7 +15,8 @@ const {
     Slider,
     MoneyInput,
     ColorPicker,
-    SuperSelectTree
+    SuperSelectTree,
+    Signature
 } = fields;
 
 const BaseExample = () => {
@@ -73,7 +74,7 @@ const BaseExample = () => {
                     rule="REQ LEN-3-10 REP"
                     tips="姓名"
                 />
-            </ErrorTip>, <ColorPicker name="color" label="主题色"/>,
+            </ErrorTip>, <ColorPicker name="color" label="主题色"/>, <Signature name="sign" label="签名"/>,
                 <MoneyInput name="money" label="金额" rule="REQ" tips={"money"}/>,
                 <PhoneNumber name="phone" label="手机" rule="REQ" disabled/>,
                 <Input name="email" label="邮箱" rule="EMAIL"/>, <Upload name="file" label="文件" tips="文件" block/>,
@@ -102,21 +103,27 @@ render(<PureGlobal
                 loader: () => {
                     return window.PUBLIC_URL + "/avatar.png";
                 },
-            }, ossUpload: async ({file}) => {
-                console.log(file);
-                return new Promise((resolve) => {
-                    setTimeout(() => {
-                        const id = uniqueId("file-");
-                        resolve({
-                            data: {
-                                code: 0, data: {
-                                    id, originalName: id + "简历.pdf",
+            }, file: {
+                getUrl: {
+                    loader: () => {
+                        return window.PUBLIC_URL + "/avatar.png";
+                    }
+                }, upload: async ({file}) => {
+                    console.log(file);
+                    return new Promise((resolve) => {
+                        setTimeout(() => {
+                            const id = uniqueId("file-");
+                            resolve({
+                                data: {
+                                    code: 0, data: {
+                                        id, originalName: id + "简历.pdf",
+                                    },
                                 },
-                            },
-                        });
-                    }, 1000);
-                });
-            },
+                            });
+                        }, 1000);
+                    });
+                }
+            }
         },
     }}
 >

diff --git a/src/components/FormInfo/fields/Signature/index.js b/src/components/FormInfo/fields/Signature/index.js
@@ -0,0 +1,66 @@
+import {useSignature} from '@kne/react-pdf-sign';
+import '@kne/react-pdf-sign/dist/index.css';
+import {Button} from 'antd';
+import {useFileUpload} from "@common/hocs/withInputFile";
+import useControlValue from "@kne/use-control-value";
+import {hooks} from "@kne/react-form-antd";
+import Image from '@components/Image';
+import withLocale from '../../withLocale';
+import {useIntl} from '@kne/react-intl';
+
+const {useOnChange} = hooks;
+
+/**
+ * 签名表单字段组件，支持签名模态框调用和图片展示
+ * @param {Object} props - 组件属性
+ * @param {Function} [props.render] - 自定义渲染函数，接收{modal, value, placeholder}参数
+ * @param {string} props.placeholder - 按钮显示的占位文本
+ * @param {string} props.title - 签名模态框标题
+ * @param {number} props.width - 签名画布宽度
+ * @param {number} props.height - 签名画布高度
+ * @param {boolean} props.mask - 是否显示遮罩层
+ * @param {Function} props.onUpload - 文件上传回调函数
+ * @param {Object} others - 其他传递给Button组件的属性
+ * @returns {React.ReactNode} 渲染结果：自定义渲染内容/签名图片/上传按钮
+ */
+const SignatureField = withLocale((props) => {
+    const {formatMessage} = useIntl();
+    const {
+        render,
+        placeholder = formatMessage({id: 'ClickSign'}),
+        title = formatMessage({id: 'Sign'}),
+        width,
+        height,
+        mask,
+        onUpload,
+        ...others
+    } = props;
+    const [value, onChange] = useControlValue(props);
+    const {onFileSelected} = useFileUpload({
+        onUpload: onUpload, maxLength: 1, value: value ? [value] : [], onChange: (value) => {
+            onChange(value[0]);
+        }
+    });
+    const modal = useSignature();
+    if (typeof render === "function") {
+        return render({modal, value, placeholder});
+    }
+
+    return <Button {...others} style={{height: '62px', overflow: 'hidden'}} onClick={() => {
+        modal({
+            title, width, height, mask, onSuccess: async (file) => {
+                await onFileSelected([file]);
+            },
+        });
+    }}>{value && value.id ? <Image id={value.id} style={{height: '60px'}}/> : placeholder}</Button>;
+});
+
+const Signature = ({...props}) => {
+    const render = useOnChange(props);
+    return render(SignatureField);
+};
+
+Signature.Field = SignatureField;
+
+export default Signature;
+
diff --git a/src/components/FormInfo/fields/index.js b/src/components/FormInfo/fields/index.js
@@ -28,6 +28,7 @@ import Switch from "./Switch";
 import Upload from "./Upload";
 import Avatar from "./Avatar";
 import SalaryInput from "./SalaryInput";
+import Signature from './Signature';
 import InputUpperCaseField from "./InputUpperCase";
 import compose from "@kne/compose";
 import {forwardRef} from "react";
@@ -172,6 +173,7 @@ const DatePickerToday = createWithFieldDecorator([withLang])(({placeholder, labe
 });
 
 const fields = {
+    Signature,
     Input,
     Checkbox,
     Password: Input.Password,

diff --git a/src/components/FormInfo/locale/en-US.js b/src/components/FormInfo/locale/en-US.js
@@ -1,34 +1,36 @@
 const message = {
-  addText: "Add",
-  addSomeThing: "Add {label}",
-  delText: "Delete",
-  selectedTextAdvanced: "Selected",
-  delConfirm: "Are you sure you want to delete this {name}?",
-  defaultInputPlaceholder: "Please enter {label}",
-  defaultSelectPlaceholder: "Please select {label}",
-  startDate: "Start Date",
-  endDate: "End Date",
-  soFarText: "Hitherto",
-  uploadButtonText: "Click Upload",
-  uploadTips: "Support extension {extensionNames}, single file size does not exceed {fileSize} M, upload up to {maxLength} attachments",
-  yuan: "yuan",
-  thousand: "ten thousand yuan",
-  salaryType: "Salary type",
-  Cancel: "Cancel",
-  Save: "Save",
-  Next: "Next",
-  Complete: "Complete",
-  Crop: "Crop",
-  Preview: "Preview",
-  PictureFormat: "Picture Format: ",
-  ImageSize: "Image Size: ",
-  ReUpload: "Re-upload",
-  UploadFailed: "Upload Failed{msg}",
-  NotExceeding: "Not exceeding {size}M",
-  FileNotExceeding: "File {name} not exceeding {size}MB！",
-  Rotate: "Rotate",
-  ImageFull: "Image Full",
-  Size: "Image Size",
+    addText: "Add",
+    addSomeThing: "Add {label}",
+    delText: "Delete",
+    selectedTextAdvanced: "Selected",
+    delConfirm: "Are you sure you want to delete this {name}?",
+    defaultInputPlaceholder: "Please enter {label}",
+    defaultSelectPlaceholder: "Please select {label}",
+    startDate: "Start Date",
+    endDate: "End Date",
+    soFarText: "Hitherto",
+    uploadButtonText: "Click Upload",
+    uploadTips: "Support extension {extensionNames}, single file size does not exceed {fileSize} M, upload up to {maxLength} attachments",
+    yuan: "yuan",
+    thousand: "ten thousand yuan",
+    salaryType: "Salary type",
+    Cancel: "Cancel",
+    Save: "Save",
+    Next: "Next",
+    Complete: "Complete",
+    Crop: "Crop",
+    Preview: "Preview",
+    PictureFormat: "Picture Format: ",
+    ImageSize: "Image Size: ",
+    ReUpload: "Re-upload",
+    UploadFailed: "Upload Failed{msg}",
+    NotExceeding: "Not exceeding {size}M",
+    FileNotExceeding: "File {name} not exceeding {size}MB！",
+    Rotate: "Rotate",
+    ImageFull: "Image Full",
+    Size: "Image Size",
+    Sign: "Sign",
+    ClickSign: "Click Sign",
 };
 
 export default message;
diff --git a/src/components/FormInfo/locale/zh-CN.js b/src/components/FormInfo/locale/zh-CN.js
@@ -29,6 +29,8 @@ const message = {
     Rotate: "旋转",
     ImageFull: "充满",
     Size: "大小",
+    Sign: "签名",
+    ClickSign: "点击签名",
 };
 
 export default message;