npm - @kne-components/info-page - Versions diffs - 0.1.15 → 0.1.16 - Mend

@kne-components/info-page 0.1.15 → 0.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/build/static/js/872.8f903814.chunk.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"static/js/872.8f903814.chunk.js","mappings":"iLASA,MAo+BA,EAp+BqB,CACjBA,KAAM,YACNC,QAAS,isCAYTC,YAAa,yLACbC,YAAa,iBACbC,IAAK,06LA+NLC,QAAS,CACLC,QAAQ,EACRC,UAAW,kBACXC,MAAO,GACPC,KAAM,CAAC,CACXC,MAAO,WACPR,YAAa,mDACbS,KAAM,o5BAkCNC,MAAO,CAAC,CACRZ,KAAM,YACNG,YAAa,6BACbU,UAAW,GACb,CACEb,KAAM,OACNG,YAAa,OACbU,UAAW,KAEb,CACEH,MAAO,UACPR,YAAa,yDACbS,KAAM,ysGAsDNC,MAAO,CAAC,CACRZ,KAAM,YACNG,YAAa,6BACbU,UAAW,GACb,CACEb,KAAM,OACNG,YAAa,OACbU,UAAW,KAEb,CACEH,MAAO,eACPR,YAAa,mDACbS,KAAM,8kGA4ENC,MAAO,CAAC,CACRZ,KAAM,YACNG,YAAa,6BACbU,UAAW,GACb,CACEb,KAAM,OACNG,YAAa,OACbU,UAAW,KAEb,CACEH,MAAO,iBACPR,YAAa,ipBACbS,KAAM,qwDA2CNC,MAAO,CAAC,CACRZ,KAAM,YACNG,YAAa,6BACbU,UAAW,GACb,CACEb,KAAM,OACNG,YAAa,OACbU,UAAW,KAEb,CACEH,MAAO,YACPR,YAAa,GACbS,KAAM,6+EAqFNC,MAAO,CAAC,CACRZ,KAAM,YACNG,YAAa,6BACbU,UAAW,GACb,CACEb,KAAM,OACNG,YAAa,OACbU,UAAW,KAEb,CACEH,MAAO,OACPR,YAAa,GACbS,KAAM,sqGAwFNC,MAAO,CAAC,CACRZ,KAAM,YACNG,YAAa,6BACbU,UAAW,GACb,CACEb,KAAM,OACNG,YAAa,OACbU,UAAW,KAEb,CACEH,MAAO,SACPR,YAAa,GACbS,KAAM,47sBA8RNC,MAAO,CAAC,CACRZ,KAAM,YACNG,YAAa,6BACbU,UAAW,GACb,CACEb,KAAM,OACNG,YAAa,OACbU,UAAW,O","sources":["../../README.md"],"sourcesContent":["import * as component_1 from '@kne/current-lib_info-page';\nimport '@kne/current-lib_info-page/dist/index.css';\nimport * as component_3 from 'antd';\nimport '@kne/current-lib_info-page/dist/index.css';\nimport '@kne/current-lib_info-page/dist/index.css';\nimport '@kne/current-lib_info-page/dist/index.css';\nimport '@kne/current-lib_info-page/dist/index.css';\nimport '@kne/current-lib_info-page/dist/index.css';\nimport '@kne/current-lib_info-page/dist/index.css';\nconst readmeConfig = {\n name: `info-page`,\n summary: `<h3><em><code>InfoPage</code></em> 何时使用</h3>\n<p>一般用在复杂的详情展示页面，<code>InfoPage</code> 提供了一个标准的展示信息的格式</p>\n<h3>特点</h3>\n<ul>\n<li>支持 <code>Content</code> 组件 <code>Descriptions</code> 组件的组合</li>\n<li>支持 <code>Collapse</code> 组件组合</li>\n<li><code>InfoPage.Part</code>、<code>InfoPage.Collapse</code> 需要放在 <code>InfoPage</code> 之下，<code>Content</code>、<code>Descriptions</code> 可以任意组合</li>\n</ul>\n<h3><em><code>Content</code></em> 何时使用</h3>\n<p>成组展示多个字段，常见于详情页的信息展示</p>\n<h3>特点</h3>\n<p>labelAlign 不为 auto 时会自动计算 label 的最小宽度使所有 label 的宽度等于最长的 label 宽度，使视觉上更加整齐有秩序感</p>`,\n description: `一般用在复杂的详情展示页面，InfoPage提供了一个标准的展示信息的格式`,\n packageName: `@kne/info-page`,\n api: `<h3>InfoPage</h3>\n<p>同 <a href=\"https://ant.design/components/Card#api\"><code>Ant Design Card</code></a></p>\n<p>新增参数：</p>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>subtitle</td>\n<td>副标题</td>\n<td>ReactNode</td>\n<td>-</td>\n</tr>\n<tr>\n<td>className</td>\n<td><code>InfoPage</code> 的 <code>className</code></td>\n<td>string</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h4>InfoPage.Part</h4>\n<p>同 <a href=\"https://ant.design/components/Card#api\"><code>Ant Design Card</code></a></p>\n<p>新增参数：</p>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>subtitle</td>\n<td>副标题</td>\n<td>ReactNode</td>\n<td>-</td>\n</tr>\n<tr>\n<td>className</td>\n<td><code>Part</code> 的 <code>className</code></td>\n<td>string</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h4>InfoPage.Collapse</h4>\n<p>同 <a href=\"https://ant.design/components/Collapse#collapse\"><code>Ant Design Collapse</code></a></p>\n<p>新增参数：</p>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>className</td>\n<td><code>Part</code> 的 <code>className</code></td>\n<td>string</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>Content</h3>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>list</td>\n<td><code>Content</code> 的内容列表</td>\n<td><code>listItemProps[]</code></td>\n<td>[]</td>\n</tr>\n<tr>\n<td>labelAlign</td>\n<td><code>label</code> 的对齐方式可以传入的值 <code>left,right,center,auto</code>,为 <code>auto</code> 时 <code>label</code> 不计算最小宽度</td>\n<td>string</td>\n<td>left</td>\n</tr>\n<tr>\n<td>col</td>\n<td>列数</td>\n<td>number</td>\n<td>1</td>\n</tr>\n<tr>\n<td>size</td>\n<td>默认为 <code>14px</code>，可以传值为 <code>small</code>，<code>size</code> 为 <code>small</code> 时字号为 <code>12px</code></td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>gutter</td>\n<td>栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 <code>{ xs: 8, sm: 16, md: 24}</code>。或者使用数组形式同时设置 [水平间距, 垂直间距]</td>\n<td>number</td>\n<td>0</td>\n</tr>\n<tr>\n<td>className</td>\n<td><code>Content</code> 的 <code>className</code></td>\n<td>string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>itemRender</td>\n<td>接收 <code>Content Inner</code> 和 <code>Inner</code> 的 <code>label, content, index</code>，可以根据数据信息返回想要渲染的内容</td>\n<td>function</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h4>listItemProps</h4>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>display</td>\n<td>数据是否展示，当为 <code>function</code> 时可以接收到 <code>item, list</code> 参数，<code>item</code> 为当前项配置，<code>dataSource</code> 为整个组件的 <code>dataSource</code> 配置</td>\n<td>boolean | function</td>\n<td>true</td>\n</tr>\n<tr>\n<td>block</td>\n<td>是否单行显示该条信息</td>\n<td>ReactNode | string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>标题</td>\n<td>ReactNode | string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>content</td>\n<td>内容</td>\n<td>ReactNode | string</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3>Descriptions</h3>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>dataSource</td>\n<td>详情数据源，内部每个数组为一行数据，每行数据中每个对象为一列数据，每行最多包含 <code>2</code> 列内容，多余的会被丢弃</td>\n<td><code>dataSourceItemProps[]</code></td>\n<td>-</td>\n</tr>\n<tr>\n<td>itemRender</td>\n<td>接收 <code>Descriptions Inner</code> 和 <code>Inner</code> 的 <code>label, content, displaty, index</code>，可以根据数据信息返回想要渲染的内容</td>\n<td>function</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h4>dataSourceItemProps</h4>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>display</td>\n<td>数据是否展示，当为 <code>function</code> 时可以接收到 <code>item, dataSource</code> 参数，<code>item</code> 为当前项配置，<code>dataSource</code> 为整个组件的 <code>dataSource</code> 配置</td>\n<td>boolean | function</td>\n<td>true</td>\n</tr>\n<tr>\n<td>label</td>\n<td>数据展示的标题</td>\n<td>ReactNode | string</td>\n<td>-</td>\n</tr>\n<tr>\n<td>content</td>\n<td>数据展示的内容</td>\n<td>ReactNode | string</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>`,\n example: {\n isFull: false,\n className: `info_page_52434`,\n style: ``,\n list: [{\n title: `InfoPage`,\n description: `这里填写示例说明`,\n code: `const {default: InfoPage} = _InfoPage;\nconst {Button} = antd;\n\nconst BaseExample = () => {\n return (\n <InfoPage>\n InfoPage\n <InfoPage.Part\n title=\"Part Title\"\n subtitle=\"我是一个subtitle\"\n extra={<Button>操作</Button>}\n >\n InfoPage.Part\n <InfoPage.Part\n title=\"Part Title\"\n subtitle=\"我是一个subtitle\"\n extra={<Button>操作</Button>}\n >\n InfoPage.InfoPage.Part\n </InfoPage.Part>\n </InfoPage.Part>\n <InfoPage.Collapse\n items={[\n {key: '1', label: 'This is default size panel header', children: <p>InfoPage.Collapse</p>},\n {key: '2', label: 'This is default size panel header2', children: <p>InfoPage.Collapse2</p>},\n ]}\n />\n </InfoPage>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_InfoPage\",\n packageName: \"@kne/current-lib_info-page\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n},{\n title: `Content`,\n description: `展示了一个基本内容`,\n code: `const { Content } = _InfoPage;\nconst {Space, Radio} = antd;\nconst {useState} = React;\n\nconst BaseExample = () => {\n const [listProps, setListProps] = useState({\n col: 1,\n size: 'default',\n labelAlign: 'left'\n });\n const onChange = (e, name) => {\n const val = e?.target.value;\n setListProps(prevState => Object.assign({}, prevState, {[name]: val}));\n };\n\n return (\n <Space direction='vertical' size={12}>\n <Radio.Group onChange={(e) => onChange(e, 'col')} value={listProps.col}>\n <Radio.Button value={1}>1列</Radio.Button>\n <Radio.Button value={2}>2列</Radio.Button>\n <Radio.Button value={3}>3列</Radio.Button>\n </Radio.Group>\n <Radio.Group onChange={(e) => onChange(e, 'labelAlign')} value={listProps.labelAlign}>\n <Radio.Button value='left'>左对齐</Radio.Button>\n <Radio.Button value='center'>中心对齐</Radio.Button>\n <Radio.Button value='right'>右对齐</Radio.Button>\n <Radio.Button value='auto'>自适应</Radio.Button>\n </Radio.Group>\n <Radio.Group onChange={(e) => onChange(e, 'size')} value={listProps.size}>\n <Radio.Button value='default'>默认</Radio.Button>\n <Radio.Button value='small'>small</Radio.Button>\n </Radio.Group>\n <Content\n {...listProps}\n list={[\n {label: '标题', content: '内容'},\n {label: '标题标题', content: '内容内容'},\n {label: '标题标', content: '内容内容内容内容内容内容内容内容内容内容'},\n {\n label: '标题标题标题',\n content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'\n }\n ]}\n itemRender={(inner, other) => {\n return other?.index === 2 ? '此处内容额外自定义' : inner;\n }}\n />\n </Space>\n );\n};\n\nrender(<BaseExample/>);\n\n`,\n scope: [{\n name: \"_InfoPage\",\n packageName: \"@kne/current-lib_info-page\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n},{\n title: `Descriptions`,\n description: `展示一个信息详情`,\n code: `const {Descriptions} = _InfoPage;\n\nconst BaseExample = () => {\n return (\n <Descriptions\n dataSource={[\n [\n { label: \"客户名称\", content: \"腾讯\" },\n {\n label: \"发票抬头\",\n content: \"腾讯科技公司\",\n },\n ],\n [\n { label: \"发票类型\", content: \"增值税专用发票\" },\n {\n label: \"发票开具日期\",\n content: \"2022-08-15\",\n },\n ],\n [{ label: \"退票金额\", content: \"22000.00元\" }],\n [\n {\n label: \"发票号\",\n content: (\n <div>\n <div>00384895992774</div>\n <div>00384895992774</div>\n <div>00384895992774</div>\n <div>00384895992774</div>\n </div>\n ),\n },\n ],\n [\n { label: \"是否需要重开发票\", content: \"否\" },\n {\n label: \"是否涉及金融变动\",\n content: \"否\",\n },\n ],\n [\n { label: \"是否造成实质损失\", content: \"否\" },\n { label: \"责任归属\", content: \"客户原因\" },\n ],\n [\n {\n label: \"退票原因\",\n content: \"退票原因的描述退票原因的描述退票原因的描\",\n },\n ],\n [{ label: \"附件\", content: \"附件名称\" }],\n [\n {label: \"操作时间\", content: \"2022-08-01 16:32\"},\n {label: \"操作人\", content: \"西西歪\", display: false},\n ],\n [\n {\n label: \"超长内容\",\n content:\n \"超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容\",\n },\n {\n label: \"超长英文\",\n content:\n \"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\",\n },\n ],\n ]}\n />\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_InfoPage\",\n packageName: \"@kne/current-lib_info-page\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n},{\n title: `CentralContent`,\n description: `请尽量使用该组件代替Descriptions组件。该组件比Descriptions组件添加了数据格式化和灵活的空判断和自定义空展示，并且优化了排列，可以实现任何栅格大小的数据项复杂组合。实现了尾行优化，使你不必担心末尾项的宽度问题，程序会自动计算并占满该行。`,\n code: `const { CentralContent } = _InfoPage;\n\nconst BaseExample = () => {\n return (<CentralContent dataSource={{\n id: 'RC00101',\n name: '张三',\n birthday: '2020-03-03',\n addTime: new Date(),\n count: 2000.1322,\n count2: 0.01234565,\n count3: 1234523,\n description: \\`描述描述描述描述描述描述描述描述\\n描述描述描述描述描述描述描述描述\\n描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述\\`,\n description2: \\`描述描述描述描述描述描述描述描述\\`\n }} col={3} columns={[{\n name: 'id', title: 'ID', block: true\n }, {\n name: 'name', title: '姓名', span: 10\n }, {\n name: 'birthday', title: '出生日期', format: 'date'\n }, {\n name: 'addTime', title: '添加时间', format: 'datetime'\n }, {\n name: 'count', title: '数量', format: 'number-useGrouping:false-suffix:个'\n }, {\n name: 'count2', title: '百分比', format: 'number-percent money-百分比'\n }, {\n name: 'count3', title: '万元', format: 'number-suffix:万元--10000'\n }, {\n name: 'empty', title: '空值显示'\n }, {\n name: 'empty2', title: '空值显示2', placeholder: '空'\n }, {\n name: 'empty3', title: '空值显示3', emptyIsPlaceholder: false\n }, {\n name: 'description', title: '描述'\n }, {\n name: 'description2', title: '描述'\n }]} />);\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_InfoPage\",\n packageName: \"@kne/current-lib_info-page\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n},{\n title: `TableView`,\n description: ``,\n code: `const { TableView } = _InfoPage;\nconst { Flex } = antd;\nconst { useState } = React;\n\nconst dataSource = [{\n id: 'RC00101',\n name: '张三',\n birthday: '2020-03-03',\n addTime: new Date(),\n count: 2000.1322,\n count2: 0.01234565,\n count3: 1234523,\n description: \\`描述描述描述描述描述描述描述描述\\`\n}, {\n id: 'RC00102',\n name: '李四',\n birthday: '2020-03-03',\n addTime: new Date(),\n count: 2000.1322,\n count2: 0.01234565,\n count3: 1234523,\n description: \\`描述描述描述描述描述描述描述描述\\`\n}, {\n id: 'RC00103',\n name: '王五',\n birthday: '2020-03-03',\n addTime: new Date(),\n count: 2000.1322,\n count2: 0.01234565,\n count3: 1234523,\n description: \\`描述描述描述描述描述描述描述描述\\`\n}, {\n id: 'RC00104',\n name: '马七',\n birthday: '2020-03-03',\n addTime: new Date(),\n count: 2000.1322,\n count2: 0.01234565,\n count3: 1234523,\n description: \\`描述描述描述描述描述描述描述描述\\`\n}];\n\nconst columns = [{\n name: 'id', title: 'ID'\n}, {\n name: 'name', title: '姓名'\n}, {\n name: 'birthday', title: '出生日期', format: 'date'\n}, {\n name: 'addTime', title: '添加时间', format: 'datetime-YY(_)MM(_)DD()HH'\n}, {\n name: 'count', title: '数量', format: 'number'\n}, {\n name: 'description', title: '描述', span: 10\n}];\n\nconst WithCheckbox = () => {\n const [selectKeys, setSelectKeys] = useState([]);\n return <TableView dataSource={dataSource} columns={columns} rowSelection={{\n type: 'checkbox', allowSelectedAll: true, selectedRowKeys: selectKeys, onChange: setSelectKeys\n }} />;\n};\n\nconst WithSelected = () => {\n const [selectKeys, setSelectKeys] = useState([]);\n return <TableView dataSource={dataSource} columns={columns} rowSelection={{\n selectedRowKeys: selectKeys, onChange: setSelectKeys\n }} />;\n};\n\nconst BaseExample = () => {\n return <Flex vertical gap={10}>\n <TableView dataSource={dataSource} columns={columns} />\n <WithCheckbox />\n <WithSelected />\n <TableView dataSource={[]} columns={columns} />\n <TableView style={{\n height: '200px', overflowY: 'scroll'\n }} dataSource={dataSource} columns={columns} sticky/>\n </Flex>;\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_InfoPage\",\n packageName: \"@kne/current-lib_info-page\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n},{\n title: `Flow`,\n description: ``,\n code: `const { Space, Flex, Divider } = antd;\nconst { Flow } = _InfoPage;\nconst BaseExample = () => {\n return <Flex vertical gap={8}>\n <Flow\n current={2}\n dataSource={[{\n title: 'title1', description: 'This is a description.', createTime: '2022-08-15 10:29', descriptionContent: [{\n name: '王建国1', action: '添加了备注', time: '2023-08-15 10:30', content: 'test'\n }, {\n name: '王建国2', action: '添加了备注', time: '2023-08-15 10:31', content: 'test'\n }]\n }, {\n title: '自定义DescriptionContentItem渲染样式', description: 'This is a description.', descriptionContent: [{\n name: '王建国3', action: '添加了备注', time: '08-15 10:30', content: 'test'\n }, {\n name: '王建国4', action: '添加了备注', time: '08-15 10:31', content: 'test'\n }]\n }, { title: 'title3', description: 'This is a description.' }, {\n title: 'title4', description: 'This is a description.'\n }]}\n columns={[{\n name: 'title'\n }, {\n name: 'description'\n }, {\n type: 'subTitle', name: 'createTime', format: 'datetime'\n }, {\n name: 'status'\n }, {\n type: 'actionList', name: 'descriptionContent', children: [{\n name: 'name'\n }, {\n name: 'action'\n }, {\n type: 'options', name: 'time', format: 'datetime'\n }, {\n name: 'content', render: (item, { target }) => {\n return \\`@@@@@\\${target.name}-\\${target.action}-\\${target.content}\\`;\n }\n }]\n }]}\n />\n <Flow\n direction=\"horizontal\"\n progressDot\n dataSource={[{\n title: 'finish', description: 'This is a description.', status: 'finish'\n }, {\n title: 'process', description: 'This is a description.', status: 'process'\n }, {\n title: 'error', description: 'This is a description.', status: 'error'\n }, {\n title: 'wait', description: 'This is a description.', status: 'wait'\n }]}\n />\n\n <Flow\n direction=\"vertical\"\n progressDot\n dataSource={[{\n title: 'finish', description: 'This is a description.', status: 'finish'\n }, {\n title: 'process', description: 'This is a description.', status: 'process'\n }, {\n title: 'error', description: 'This is a description.', status: 'error'\n }, {\n title: 'wait', description: 'This is a description.', status: 'wait'\n }]}\n />\n <Flow\n dataSource={[{\n title: 'finish', description: 'This is a description.', subTitle: '2023-08-15 10:29', status: 'finish'\n }, {\n title: 'process', description: 'This is a description.', status: 'process'\n }, {\n title: 'error', description: 'This is a description.', status: 'error'\n }, {\n title: 'wait', description: 'This is a description.', status: 'wait'\n }]}\n columns={[{ name: 'subTitle', format: 'datetime' }]}\n />\n </Flex>;\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_InfoPage\",\n packageName: \"@kne/current-lib_info-page\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n},{\n title: `Report`,\n description: ``,\n code: `const { Report } = _InfoPage;\nconst { Space } = antd;\nconst BaseExample = () => {\n return (\n <div className=\"outer\">\n <Space direction=\"vertical\" size={24}>\n <Report title=\"报告概述\">\n <Report.List\n report={{\n list: [\n {\n label: '目的',\n content: '本报告旨在评估招聘顾问使用AI工具进行候选人初次沟通的能力，特别是在理解候选人需求、传达职位信息以及建立初步信任关系的效果。'\n },\n {\n label: '测评对象',\n content: '姓名：张伟'\n },\n {\n label: '测评工具',\n content: \\`AI模拟系统：提供基于语音和文本的交互模拟环境。\\n评分标准：沟通技巧、信息传达清晰度、候选人反馈、建立关系的能力。\\`\n },\n {\n label: '任务目标',\n content: (\n <ul>\n <li>完整呈现初次沟通话术，展现每个关键动作和沟通顺序。</li>\n <li>收集候选人信息：了解候选人工作背景，技术能力及其薪资要求。</li>\n <li>挖掘需求：全面了解候选人求职动态和需求，从而掌握候选人存在的顾虑及。</li>\n <li>有效推荐：根据候选人求职需求链接职位优势，强化技术吸引点，妥善处理候选人疑虑。</li>\n <li>建立信任关系：使用沟通技巧，态度诚恳，和候选人站在一起，而非“博弈”关系。</li>\n </ul>\n )\n }\n ]\n }}\n />\n </Report>\n <Report title=\"测评结果\">\n <Report.Result\n report={{\n total: {\n score: '81.8',\n label: '综合得分'\n },\n list: [\n {\n label: '沟通程序指引及话术',\n score: '86',\n content:\n '张伟在这一部分的表现总体上是专业且有条理的，能够按照一定的流程顺利开展对话。他表现出的礼貌和专业性在询问是否方便通话时得到了完美的体现，得到了满分。然而，他在介绍职位时未能充分利用机会强调职位的吸引点，可能影响候选人的兴趣。'\n },\n {\n label: '收集信息（现状\\$&\\$期望）',\n score: '90',\n content: '张伟在收集候选人的现状和期望方面做得相对完善，能够获得关于候选人当前工作和技术栈的重要信息。但对于候选人的项目经验和薪资结构的探讨不够深入，这可能会影响到后续的职位匹配和期望管理。'\n },\n {\n label: '挖掘需求',\n score: '70',\n content: '张伟在挖掘候选人需求方面还有提升空间。虽然基本了解了候选人的职业期望，但在探索候选人的非薪酬动机和深层次需求方面表现不够充分，这是建立有效推荐和深度关系的关键。'\n },\n {\n label: '有效推荐',\n score: '73',\n content: '在有效推荐职位方面，张伟需要加强与候选人需求的匹配度和说服力。虽然提到了职位的技术优势，但未根据候选人的具体技术背景进行个性化强调，可能减少候选人的兴趣。'\n },\n {\n label: '建立信任关系',\n score: '84',\n content: '张伟能够通过有效的沟通建立信任关系，使用开放性问题和积极肯定候选人的表现。然而，需要提高在换位思考和理解候选人深层需求方面的能力，确保信任关系的深度和真实性。'\n }\n ]\n }}\n />\n </Report>\n <Report title=\"评分细节\">\n <Report.Table\n report={{\n columns: [\n {\n title: '评估维度',\n name: 'group',\n isSubTitle: true\n },\n {\n title: '评分项',\n name: 'item',\n span: 10\n },\n {\n title: '得分',\n name: 'score',\n span: 4,\n valueOf: value => <div className=\"score\">{value}</div>\n },\n {\n title: '描述',\n name: 'description',\n span: 10\n }\n ],\n group: [\n {\n name: 'group1',\n label: '沟通程序指引及话术'\n },\n {\n name: 'group2',\n label: '收集信息（现状&期望）'\n },\n {\n name: 'group3',\n label: '挖掘需求'\n },\n {\n name: 'group4',\n label: '有效推荐'\n },\n {\n name: 'group5',\n label: '建立信任关系'\n }\n ],\n list: [\n {\n group: 'group1',\n item: '专业开场',\n score: <Report.Score value={4}/>,\n description: '开场专业，语气友好，略显急促。'\n },\n {\n group: 'group1',\n item: '询问是否方便通话',\n score: <Report.Score value={5}/>,\n description: '表现出极好的礼貌和考虑。'\n },\n {\n group: 'group1',\n item: '先了解候选人整体情况',\n score: <Report.Score value={3}/>,\n description: '详细询问了技术和动机，未深入个人发展。'\n },\n {\n group: 'group1',\n item: '后介绍推荐OD职位',\n score: <Report.Score value={4}/>,\n description: '介绍清晰，未充分突出职位吸引力。'\n },\n {\n group: 'group1',\n item: '介绍整体面试流程',\n score: <Report.Score value={1}/>,\n description: '详尽介绍流程，缺少机考准备细节说明。'\n },\n {\n group: 'group1',\n item: '交换联系方式',\n score: <Report.Score value={5}/>,\n description: '有效且自然，确保双方畅通无阻。'\n },\n {\n group: 'group2',\n item: '了解候选人目前就业状态',\n score: <Report.Score value={5}/>,\n description: '详尽了解候选人的当前就业状况。'\n },\n {\n group: 'group2',\n item: '了解候选人技术栈及项目经验',\n score: <Report.Score value={4}/>,\n description: '详细询问技术栈，对项目经验探讨不足。'\n },\n {\n group: 'group2',\n item: '了解候选人薪资情况与结构',\n score: <Report.Score value={4}/>,\n description: '了解薪资期望清晰，未详细探讨薪资构成。'\n },\n {\n group: 'group3',\n item: '了解候选人对下一份工作的期望',\n score: <Report.Score value={3}/>,\n description: '探讨了职业规划，但未深挖发展意愿。'\n },\n {\n group: 'group3',\n item: '探索非薪资求职动机',\n score: <Report.Score value={2}/>,\n description: '基本了解求职动机，缺乏深度和细节。'\n },\n {\n group: 'group3',\n item: '识别并处理顾虑',\n score: <Report.Score value={4}/>,\n description: '识别了顾虑，回应稍显模糊。'\n },\n {\n group: 'group4',\n item: '链接职位优势与求职动机',\n score: <Report.Score value={3}/>,\n description: '提及职位相关性，缺乏说服力。'\n },\n {\n group: 'group4',\n item: '强化项目技术吸引点',\n score: <Report.Score value={3}/>,\n description: '提及技术优势，未针对候选人背景定制。'\n },\n {\n group: 'group4',\n item: '关注并处理候选人顾虑',\n score: <Report.Score value={4}/>,\n description: '正面回应顾虑，但解决方案不具体。'\n },\n {\n group: 'group5',\n item: '应用开放性提问',\n score: <Report.Score value={0}/>,\n description: '使用开放性问题促进了对话深入。'\n },\n {\n group: 'group5',\n item: '换位思考与表达同理心',\n score: <Report.Score value={1}/>,\n description: '表达了同理心，但部分回答未完全站在候选人角度。'\n },\n {\n group: 'group5',\n item: '表达肯定和欣赏',\n score: <Report.Score value={5}/>,\n description: '非常好地肯定了候选人的能力和经验。'\n },\n {\n group: 'group5',\n item: '清晰表达观点',\n score: <Report.Score value={2}/>,\n description: '观点主要清晰，偶有不够准确的情况。'\n },\n {\n group: 'group5',\n item: '有效倾听与理解',\n score: <Report.Score value={3}/>,\n description: '倾听良好，但有时未能完全抓住候选人的意图。'\n }\n ]\n }}\n />\n </Report>\n <Report title=\"结论与建议\">\n <Report.Part\n report={{\n list: [\n {\n label: '结论',\n hasBgColor: true,\n content:\n '在此次AI情景模拟测评中，李四表现出了较强的沟通能力和专业性，尤其是在程序指引及话术方面。他成功地收集了候选人的基本信息并建立了初步的信任关系。然而，他在深入挖掘候选人需求和个性化推荐职位方面的表现还有待提高。总体而言，李四的表现良好，显示出了他作为招聘顾问的潜力。'\n },\n {\n label: '建议',\n style: { '--marker-color': '#027A48', '--label-bg-color': '#027A481a' },\n content: (\n <ol>\n <li>增强职位介绍的吸引力，特别是将职位优势与候选人的需求直接关联，突出表现职位的独特之处。</li>\n <li>对候选人的项目经验进行更详细的询问，尤其是关于如何在项目中解决问题和技术应用的具体情况。</li>\n <li>在讨论薪资时，应详细了解候选人的薪资构成和期望，确保提供的职位与候选人的薪资期望相匹配。</li>\n <li>在交流中穿插探讨候选人的个人兴趣和长期职业目标，以便更好地理解其动机。</li>\n <li>根据候选人的技术能力和职业兴趣定制职位推荐，突出职位的技术挑战和成长机会。</li>\n <li>加强同理心的表达，尤其在讨论候选人关切的问题时，从其角度出发提供解决方案。</li>\n </ol>\n )\n }\n ]\n }}\n />\n </Report>\n <Report title=\"结论与建议\">自定义 area</Report>\n </Space>\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_InfoPage\",\n packageName: \"@kne/current-lib_info-page\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_3\n}]\n}]\n }\n};\nexport default readmeConfig;\n"],"names":["name","summary","description","packageName","api","example","isFull","className","style","list","title","code","scope","component"],"sourceRoot":""}

/package/build/static/js/{32.157b58b9.chunk.js.LICENSE.txt → 32.90beeeb4.chunk.js.LICENSE.txt} RENAMED Viewed

File without changes