kne-union · zhipenglin · Mar 5, 2026 · Mar 5, 2026 · Mar 5, 2026 · Mar 5, 2026
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kne-components/components-core",
-  "version": "0.4.62",
+  "version": "0.4.63",
   "files": [
     "build"
   ],
@@ -43,6 +43,7 @@
     "@kne/use-click-outside": "^0.2.1",
     "@kne/use-control-value": "^0.1.7",
     "@kne/use-ref-callback": "^0.1.2",
+    "@kne/use-resize": "^0.1.1",
     "@kne/use-simulation-blur": "^0.1.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

diff --git a/src/bootstrap.js b/src/bootstrap.js
@@ -2,6 +2,7 @@ import {ajax} from "./preset";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+import './index.css';
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 

diff --git a/src/common/components/SearchInput/index.js b/src/common/components/SearchInput/index.js
@@ -10,6 +10,7 @@ const SearchInput = ({
                      }) => {
     const [state, setState] = useState(value);
     const valueRef = useRef(value);
+    const compositionRef = useRef(false);
     const debouncedFunc = useDebouncedCallback(onSearch, debounce);
     useEffect(() => {
         if (value !== valueRef.current) {
@@ -31,6 +32,16 @@ const SearchInput = ({
             const value = e.target.value;
             valueRef.current = value;
             setState(value);
+            if (!compositionRef.current) {
+                debouncedFunc(value.trim());
+            }
+        }}
+        onCompositionStart={() => {
+            compositionRef.current = true;
+        }}
+        onCompositionEnd={(e) => {
+            compositionRef.current = false;
+            const value = e.target.value;
             debouncedFunc(value.trim());
         }}
         onSearch={(value) => {

diff --git a/src/components/FormInfo/withLocale.js b/src/components/FormInfo/withLocale.js
@@ -5,7 +5,7 @@ import enUS from './locale/en-US';
 const withLocale = createWithIntlProvider({
     defaultLocale: 'zh-CN', messages: {
         'zh-CN': zhCN, 'en-US': enUS
-    }, namespace: 'form-info'
+    }, namespace: 'FormInfo'
 });
 
 export default withLocale;
diff --git a/src/components/InfoPage/README.md b/src/components/InfoPage/README.md
@@ -493,122 +493,126 @@ render(<BaseExample />);
 
 ```jsx
 const { default: InfoPage, CentralContent } = _InfoPage;
-const { Tag, Avatar, Space } = antd;
+const { Tag, Avatar, Space, Modal, Button } = antd;
+const { useState } = React;
 
 const BaseExample = () => {
+  const [open, setOpen] = useState(false);
+  const baseInfo = (
+    <InfoPage.Part bordered title="员工档案" subtitle="基本信息">
+      <CentralContent
+        type="compact"
+        dataSource={{
+          id: 'RC20240115001',
+          name: '张三',
+          gender: '男',
+          birthday: '1992-03-15',
+          idCard: '440301199203154512',
+          maritalStatus: '已婚',
+          education: '本科',
+          graduationSchool: '深圳大学',
+          major: '计算机科学与技术',
+          entryDate: '2020-03-15',
+          workYears: 4,
+          phone: '138-0013-8000',
+          email: 'zhangsan@tencent.com',
+          address: '广东省深圳市南山区科技园科技中一路腾讯大厦',
+          emergencyContact: '李四',
+          emergencyPhone: '139-0014-9000',
+          emergencyRelation: '配偶'
+        }}
+        col={3}
+        columns={[
+          {
+            name: 'id',
+            title: '员工编号',
+            block: true
+          },
+          {
+            name: 'name',
+            title: '姓名',
+            render: value => (
+              <Space align="center">
+                <Avatar style={{ backgroundColor: '#1890ff' }}>{value[0]}</Avatar>
+                <strong>{value}</strong>
+              </Space>
+            ),
+            span: 10
+          },
+          {
+            name: 'gender',
+            title: '性别'
+          },
+          {
+            name: 'birthday',
+            title: '出生日期',
+            format: 'date'
+          },
+          {
+            name: 'idCard',
+            title: '身份证号',
+            render: value => value.replace(/(\d{6})(\d{8})(\d{4})/, '$1********$3')
+          },
+          {
+            name: 'maritalStatus',
+            title: '婚姻状况'
+          },
+          {
+            name: 'education',
+            title: '学历'
+          },
+          {
+            name: 'graduationSchool',
+            title: '毕业院校'
+          },
+          {
+            name: 'major',
+            title: '专业'
+          },
+          {
+            name: 'entryDate',
+            title: '入职日期',
+            format: 'date'
+          },
+          {
+            name: 'workYears',
+            title: '工作年限',
+            format: 'number-suffix:年'
+          },
+          {
+            name: 'phone',
+            title: '联系电话',
+            render: value => value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
+          },
+          {
+            name: 'email',
+            title: '电子邮箱'
+          },
+          {
+            name: 'address',
+            title: '家庭住址',
+            block: true
+          },
+          {
+            name: 'emergencyContact',
+            title: '紧急联系人'
+          },
+          {
+            name: 'emergencyPhone',
+            title: '紧急联系电话',
+            render: value => value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
+          },
+          {
+            name: 'emergencyRelation',
+            title: '与本人关系'
+          }
+        ]}
+      />
+    </InfoPage.Part>
+  );
   return (
     <InfoPage>
-      <InfoPage.Part bordered title="员工档案" subtitle="基本信息">
-        <CentralContent
-          type="compact"
-          dataSource={{
-            id: 'RC20240115001',
-            name: '张三',
-            gender: '男',
-            birthday: '1992-03-15',
-            idCard: '440301199203154512',
-            maritalStatus: '已婚',
-            education: '本科',
-            graduationSchool: '深圳大学',
-            major: '计算机科学与技术',
-            entryDate: '2020-03-15',
-            workYears: 4,
-            phone: '138-0013-8000',
-            email: 'zhangsan@tencent.com',
-            address: '广东省深圳市南山区科技园科技中一路腾讯大厦',
-            emergencyContact: '李四',
-            emergencyPhone: '139-0014-9000',
-            emergencyRelation: '配偶'
-          }}
-          col={3}
-          columns={[
-            {
-              name: 'id',
-              title: '员工编号',
-              block: true
-            },
-            {
-              name: 'name',
-              title: '姓名',
-              render: (value) => (
-                <Space align="center">
-                  <Avatar style={{ backgroundColor: '#1890ff' }}>{value[0]}</Avatar>
-                  <strong>{value}</strong>
-                </Space>
-              ),
-              span: 10
-            },
-            {
-              name: 'gender',
-              title: '性别'
-            },
-            {
-              name: 'birthday',
-              title: '出生日期',
-              format: 'date'
-            },
-            {
-              name: 'idCard',
-              title: '身份证号',
-              render: (value) => value.replace(/(\d{6})(\d{8})(\d{4})/, '$1********$3')
-            },
-            {
-              name: 'maritalStatus',
-              title: '婚姻状况'
-            },
-            {
-              name: 'education',
-              title: '学历'
-            },
-            {
-              name: 'graduationSchool',
-              title: '毕业院校'
-            },
-            {
-              name: 'major',
-              title: '专业'
-            },
-            {
-              name: 'entryDate',
-              title: '入职日期',
-              format: 'date'
-            },
-            {
-              name: 'workYears',
-              title: '工作年限',
-              format: 'number-suffix:年'
-            },
-            {
-              name: 'phone',
-              title: '联系电话',
-              render: (value) => value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
-            },
-            {
-              name: 'email',
-              title: '电子邮箱'
-            },
-            {
-              name: 'address',
-              title: '家庭住址',
-              block: true
-            },
-            {
-              name: 'emergencyContact',
-              title: '紧急联系人'
-            },
-            {
-              name: 'emergencyPhone',
-              title: '紧急联系电话',
-              render: (value) => value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
-            },
-            {
-              name: 'emergencyRelation',
-              title: '与本人关系'
-            }
-          ]}
-        />
-      </InfoPage.Part>
-
+      {baseInfo}
       <InfoPage.Part bordered title="工作信息" subtitle="部门与职位">
         <CentralContent
           type="compact"
@@ -635,11 +639,11 @@ const BaseExample = () => {
             { name: 'team', title: '所属团队' },
             { name: 'workLocation', title: '工作地点' },
             { name: 'office', title: '办公室位置' },
-            { name: 'workStatus', title: '工作状态', render: (value) => <Tag color="success">{value}</Tag> },
+            { name: 'workStatus', title: '工作状态', render: value => <Tag color="success">{value}</Tag> },
             { name: 'contractType', title: '合同类型' },
             { name: 'contractStartDate', title: '合同开始日期', format: 'date' },
             { name: 'contractEndDate', title: '合同结束日期', format: 'date' },
-            { name: 'probationPeriod', title: '试用期状态', render: (value) => <Tag color="success">{value}</Tag> }
+            { name: 'probationPeriod', title: '试用期状态', render: value => <Tag color="success">{value}</Tag> }
           ]}
         />
       </InfoPage.Part>
@@ -664,16 +668,26 @@ const BaseExample = () => {
             { name: 'baseSalary', title: '基本月薪', format: 'number-useGrouping:true-suffix:元', span: 12 },
             { name: 'performanceBonus', title: '绩效奖金', format: 'number-useGrouping:true-suffix:元/月', span: 12 },
             { name: 'annualBonus', title: '年终奖金', format: 'number-useGrouping:true-suffix:元', block: true },
-            { name: 'socialInsurance', title: '社会保险', render: (value) => <Tag color="success">{value}</Tag> },
+            { name: 'socialInsurance', title: '社会保险', render: value => <Tag color="success">{value}</Tag> },
             { name: 'housingFund', title: '公积金', format: 'number-useGrouping:true-suffix:元/月' },
-            { name: 'medicalInsurance', title: '医疗保险', render: (value) => <Tag color="success">{value}</Tag> },
+            { name: 'medicalInsurance', title: '医疗保险', render: value => <Tag color="success">{value}</Tag> },
             { name: 'mealAllowance', title: '餐补', format: 'number-useGrouping:true-suffix:元/月' },
             { name: 'transportAllowance', title: '交通补贴', format: 'number-useGrouping:true-suffix:元/月' },
             { name: 'stockOptions', title: '股票期权', format: 'number-useGrouping:true-suffix:股', block: true },
             { name: 'otherBenefits', title: '其他福利', block: true }
           ]}
         />
       </InfoPage.Part>
+
+      <InfoPage.Part bordered title="放在Modal中">
+        <Button
+          onClick={() => {
+            setOpen(true);
+          }}>
+          打开Modal
+        </Button>
+        <Modal title="员工档案" open={open} onCancel={()=>setOpen(false)}>{baseInfo}</Modal>
+      </InfoPage.Part>
     </InfoPage>
   );
 };