diff --git a/package.json b/package.json
index 9ce314d..ae24e9d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@kne-components/components-core",
- "version": "0.4.70",
+ "version": "0.4.71",
"files": [
"build"
],
diff --git a/src/components/FormInfo/preset.js b/src/components/FormInfo/preset.js
index ee7fcaf..48ed62b 100644
--- a/src/components/FormInfo/preset.js
+++ b/src/components/FormInfo/preset.js
@@ -54,6 +54,22 @@ const formPreset = async (options, otherOptions) => {
return value;
});
+ interceptors.input.use("json-string", (value) => {
+ try {
+ return JSON.stringify(value, null, 2);
+ } catch (e) {
+ return '';
+ }
+ });
+
+ interceptors.output.use("json-string", (value) => {
+ try {
+ return JSON.parse(value);
+ } catch (e) {
+ return void 0;
+ }
+ });
+
interceptors.input.use("to-array", (value) => {
return Array.isArray(value) ? value[0] : value;
});
diff --git a/src/components/InfoPage/README.md b/src/components/InfoPage/README.md
index 9aa24ae..bc14a33 100644
--- a/src/components/InfoPage/README.md
+++ b/src/components/InfoPage/README.md
@@ -1,19 +1,15 @@
-
# info-page
-
### 描述
一般用在复杂的详情展示页面，InfoPage提供了一个标准的展示信息的格式
-
### 安装
```shell
npm i --save @kne/info-page
```
-
### 概述
info-page 是一个专为复杂详情展示页面设计的 React 组件库，提供标准化的信息展示格式和丰富的布局选项。
@@ -450,8 +446,8 @@ const BaseExample = () => {
bonus: 50000,
leaveDays: 5,
projectCount: 8,
- description: `负责公司核心产品的前端架构设计与开发工作，主导了多个重要项目的技术方案设计。精通React、Vue等主流前端框架，对TypeScript有深入理解。在性能优化方面有丰富经验，成功将项目加载时间减少40%。`,
- skills: `React, Vue, TypeScript, Node.js, Webpack, Vite, Jenkins, Docker, Kubernetes`
+ description: `负责公司核心产品的前端架构设计与开发工作，主导了多个重要项目的技术方案设计。精通React、Vue等主流前端框架，对TypeScript有深入理解。在性能优化方面有丰富经验，成功将项目加载时间减少40%。`,
+ skills: `React, Vue, TypeScript, Node.js, Webpack, Vite, Jenkins, Docker, Kubernetes`
}}
col={3}
columns={[
@@ -696,6 +692,99 @@ render();
```
+- Modal中展示
+- 展示InfoPage在Modal弹窗中的典型用法
+- _InfoPage(@kne/info-page),(@kne/info-page/dist/index.css),antd(antd)
+
+```jsx
+const { default: InfoPage, Content, TableView } = _InfoPage;
+const { Button, Flex, Modal } = antd;
+const { useState } = React;
+
+const ModalExample = () => {
+ const [open, setOpen] = useState(false);
+
+ const data = {
+ id: '10001',
+ name: '产品详情',
+ category: '电子产品',
+ price: 2999,
+ stock: 500,
+ status: '在售',
+ description: '这是一款高性能的智能设备，支持多种功能和应用场景。',
+ createTime: '2024-01-15 10:30:00',
+ updateTime: '2024-03-20 14:22:00',
+ };
+
+ const logDataSource = [
+ { id: '1', action: '创建', operator: '管理员', time: data.createTime },
+ { id: '2', action: '更新', operator: '管理员', time: data.updateTime },
+ ];
+
+ const logColumns = [
+ { name: 'action', title: '操作' },
+ { name: 'operator', title: '操作人' },
+ { name: 'time', title: '时间' },
+ ];
+
+ return (
+
+
+
+ setOpen(false)}
+ footer={[
+ ,
+ ,
+ ]}
+ width={720}
+ >
+
+
+
+
+
+
+
+
+
+
+ {data.description}
+
+
+
+
+
+
+
+
+ );
+};
+
+render();
+
+```
+
- 表格视图
- 支持行选择、固定表头和多数据展示的表格组件
- _InfoPage(@kne/info-page),(@kne/info-page/dist/index.css),antd(antd)
@@ -799,7 +888,7 @@ const WithSelected = () => {
return (
- 已选订单：{selectedOrder ? `${selectedOrder.id} (${selectedOrder.customerName})` : '无'}
+ 已选订单：{selectedOrder ? `${selectedOrder.id} (${selectedOrder.customerName})` : '无'}
{selectedOrder && ¥{selectedOrder.amount.toLocaleString()}}
{
return (
- 已选客户：{selectedCustomer ? `${selectedCustomer.name} (${selectedCustomer.company})` : '无'}
- {selectedCustomer ? `¥${selectedCustomer.amount.toLocaleString()}` : '-'}
+ 已选客户：{selectedCustomer ? `${selectedCustomer.name} (${selectedCustomer.company})` : '无'}
+ {selectedCustomer ? `¥${selectedCustomer.amount.toLocaleString()}` : '-'}
{
name: 'workYears',
title: '工作年限',
icon: ,
- render: (value) => `${value}年`
+ render: (value) => `${value}年`
},
{
name: 'entryDate',
@@ -1199,7 +1288,7 @@ const BaseExample = () => {
{
name: 'teamSize',
title: '团队规模',
- render: (value) => `${value}人`
+ render: (value) => `${value}人`
},
{
name: 'startDate',
@@ -1219,12 +1308,12 @@ const BaseExample = () => {
{
name: 'budget',
title: '项目预算',
- render: (value) => `¥${value.toLocaleString()}`
+ render: (value) => `¥${value.toLocaleString()}`
},
{
name: 'spent',
title: '已投入',
- render: (value) => `¥${value.toLocaleString()}`
+ render: (value) => `¥${value.toLocaleString()}`
}
]}
/>
@@ -1437,7 +1526,7 @@ const BaseExample = () => {
},
{
label: '测评工具',
- content: `AI模拟系统：提供基于语音和文本的交互模拟环境。\n评分标准：沟通技巧、信息传达清晰度、候选人反馈、建立关系的能力。`
+ content: `AI模拟系统：提供基于语音和文本的交互模拟环境。\n评分标准：沟通技巧、信息传达清晰度、候选人反馈、建立关系的能力。`
},
{
label: '任务目标',
@@ -2127,7 +2216,6 @@ render();
```
-
### API
### InfoPage
@@ -2442,4 +2530,3 @@ render();
| emptyIsPlaceholder | boolean | 否 | true | 空值是否显示占位符 |
| removeEmpty | boolean | 否 | true | 是否移除空值列 |
| placeholder | ReactNode | 否 | '-' | 空值占位符 |
-