@kne-components/info-page 0.2.7 → 0.2.9

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
  1. package/build/asset-manifest.json +14 -14
  2. package/build/index.html +1 -1
  3. package/build/remoteEntry.js +1 -1
  4. package/build/remoteEntry.js.map +1 -1
  5. package/build/static/css/72.1d8de4d6.chunk.css +12 -0
  6. package/build/static/css/{72.1a435be4.chunk.css.map → 72.1d8de4d6.chunk.css.map} +1 -1
  7. package/build/static/css/784.6a4bc444.chunk.css +2 -0
  8. package/build/static/css/{784.69e71e84.chunk.css.map → 784.6a4bc444.chunk.css.map} +1 -1
  9. package/build/static/js/{72.f9865990.chunk.js → 72.85da485a.chunk.js} +2 -2
  10. package/build/static/js/{72.f9865990.chunk.js.map → 72.85da485a.chunk.js.map} +1 -1
  11. package/build/static/js/{784.27a01a67.chunk.js → 784.55068114.chunk.js} +2 -2
  12. package/build/static/js/{784.27a01a67.chunk.js.map → 784.55068114.chunk.js.map} +1 -1
  13. package/build/static/js/872.1eb2efaa.chunk.js +2 -0
  14. package/build/static/js/872.1eb2efaa.chunk.js.map +1 -0
  15. package/build/static/js/{main.753e6f20.js → main.ae5e5156.js} +2 -2
  16. package/build/static/js/{main.753e6f20.js.map → main.ae5e5156.js.map} +1 -1
  17. package/package.json +1 -1
  18. package/build/static/css/72.1a435be4.chunk.css +0 -12
  19. package/build/static/css/784.69e71e84.chunk.css +0 -2
  20. package/build/static/js/872.8caaa59c.chunk.js +0 -2
  21. package/build/static/js/872.8caaa59c.chunk.js.map +0 -1
package/build/static/js/{72.f9865990.chunk.js.map → 72.85da485a.chunk.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"static/js/72.f9865990.chunk.js","mappings":"mNAMAA,OAAOC,WAAaC,aAOpB,MAAMC,EAAW,CACfC,IAAK,yBAA0BC,IAAK,iE,+FCThCC,EAAgBC,EAAAA,GAAYD,cAuBlC,EArBYE,IAAiC,IAAhC,aAAEC,GAAwBD,EAAPE,GAAKC,EAAAA,EAAAA,GAAAH,EAAAI,GACnC,OACIC,EAAAA,EAAAA,KAACC,EAAAA,WAAU,CAAAC,UACTF,EAAAA,EAAAA,KAACP,GAAaU,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACNN,GAAK,IACTO,MAAO,CACL,CACEC,IAAK,aACLC,KAAM,IACNC,MAAO,iBAGXC,OAAQZ,EACRa,WAAYb,EAAaa,WACzBC,OAAQA,EAAAA,QACRC,UAAW,CAAEC,KAAM,YCjBzBC,EAAOC,EAAAA,WAAoBC,SAASC,eAAe,SAEtCC,WACjB,MAAMrB,OFSkBqB,WACxB,MAAMC,GAAOC,EAAAA,EAAAA,GAAW,CACtBC,aAAcC,GAASC,EAAAA,QAAQD,MAAMA,KAGjCE,GAAoBpB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACrBb,GAAQ,IAAEkC,OAAQ,kBAAmBC,eAAgB,WAgC1D,OA7BAC,EAAAA,EAAAA,QAAmB,CACjBC,QAAS,CACPC,QAASL,EAAsB,kBAAmBA,EAAsB,uBAAqBpB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACxFb,GAAQ,IAAEkC,OAAQ,sBAAuBC,eAAgB,UAC3D,aAEFtB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACIb,GAAQ,IAAEkC,OAAQ,YAAaC,eAAgBpC,cAMxDwC,EAAAA,EAAAA,QAAY,CACVX,OAAMY,SAAS9B,EAAAA,EAAAA,KAAC+B,EAAAA,KAAI,CAACC,MAAO,IACPC,MAAO,CACLC,SAAU,WACVC,KAAM,MACNC,QAAS,OACTC,UAAW,sBACNhB,MAAO,KAAMiB,OAAOtC,EAAAA,EAAAA,KAACuC,EAAAA,MAAK,IAAKC,kBAAoBC,IAC7E,MAAM,KAAEC,GAASD,EAIjB,OAHAA,EAASC,KAAO,CACdC,KAAoB,IAAdD,EAAKC,KAAa,IAAMD,EAAKC,KAAMC,IAAKF,EAAKE,IAAKC,QAASH,EAAKA,MAEjED,KAIJ,CACLvB,OAAM4B,MAAO,CAAC,EAAGC,KAAM,CAAC,EAAGtC,WAAY,CACrCuC,aAAc,aEjDSC,GACpBpC,EAAKqC,QAAOlD,EAAAA,EAAAA,KAACmD,EAAG,CAAC1C,WAAYb,EAAaa,WAAYb,aAAcA,MAG7EwD,CAAWD,E","sources":["preset.js","App.js","bootstrap.js"],"sourcesContent":["import React from 'react';\nimport { preset as fetchPreset } from '@kne/react-fetch';\nimport { Spin, Empty, message } from 'antd';\nimport createAjax from '@kne/axios-fetch';\nimport { preset as remoteLoaderPreset } from '@kne/remote-loader';\n\nwindow.PUBLIC_URL = process.env.PUBLIC_URL;\n\n// url: 'https://registry.npmmirror.com',\n// tpl: '{{url}}/@kne-components%2f{{remote}}/{{version}}/files/build',\n\n// url: 'https://cdn.jsdelivr.net', tpl: '{{url}}/npm/@kne-components/{{remote}}@{{version}}/build'\n\nconst registry = {\n url: 'https://uc.fatalent.cn', tpl: '{{url}}/packages/@kne-components/{{remote}}/{{version}}/build'\n};\n\nexport const globalInit = async () => {\n const ajax = createAjax({\n errorHandler: error => message.error(error)\n });\n\n const componentsCoreRemote = {\n ...registry, remote: 'components-core', defaultVersion: '0.4.51'\n };\n\n remoteLoaderPreset({\n remotes: {\n default: componentsCoreRemote, 'components-core': componentsCoreRemote, 'components-iconfont': {\n ...registry, remote: 'components-iconfont', defaultVersion: '0.2.1'\n }, 'info-page': process.env.NODE_ENV === 'development' ? {\n remote: 'info-page', url: '/', tpl: '{{url}}'\n } : {\n ...registry, remote: 'info-page', defaultVersion: process.env.DEFAULT_VERSION\n }\n }\n });\n\n\n fetchPreset({\n ajax, loading: <Spin delay={500}\n style={{\n position: 'absolute',\n left: '50%',\n padding: '10px',\n transform: 'translateX(-50%)'\n }} />, error: null, empty: <Empty />, transformResponse: (response) => {\n const { data } = response;\n response.data = {\n code: data.code === 0 ? 200 : data.code, msg: data.msg, results: data.data\n };\n return response;\n }\n });\n\n return {\n ajax, enums: {}, apis: {}, themeToken: {\n colorPrimary: '#4183F0'\n }\n };\n};\n","import { HashRouter } from \"react-router-dom\";\nimport createEntry from \"@kne/modules-dev/dist/create-entry.modern\";\nimport \"@kne/modules-dev/dist/create-entry.css\";\nimport readme from \"readme\";\n\nconst ExampleRoutes = createEntry.ExampleRoutes;\n\nconst App = ({ globalPreset, ...props }) => {\n return (\n <HashRouter>\n <ExampleRoutes\n {...props}\n paths={[\n {\n key: \"components\",\n path: \"/\",\n title: \"首页\",\n },\n ]}\n preset={globalPreset}\n themeToken={globalPreset.themeToken}\n readme={readme}\n pageProps={{ menu: null }}\n />\n </HashRouter>\n );\n};\n\nexport default App;\n","import { globalInit } from './preset';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\n\nconst renderRoot = async (App) => {\n const globalPreset = await globalInit();\n return root.render(<App themeToken={globalPreset.themeToken} globalPreset={globalPreset} />);\n};\n\nrenderRoot(App);\n"],"names":["window","PUBLIC_URL","process","registry","url","tpl","ExampleRoutes","createEntry","_ref","globalPreset","props","_objectWithoutProperties","_excluded","_jsx","HashRouter","children","_objectSpread","paths","key","path","title","preset","themeToken","readme","pageProps","menu","root","ReactDOM","document","getElementById","async","ajax","createAjax","errorHandler","error","message","componentsCoreRemote","remote","defaultVersion","remoteLoaderPreset","remotes","default","fetchPreset","loading","Spin","delay","style","position","left","padding","transform","empty","Empty","transformResponse","response","data","code","msg","results","enums","apis","colorPrimary","globalInit","render","App","renderRoot"],"sourceRoot":""}
1
+ {"version":3,"file":"static/js/72.85da485a.chunk.js","mappings":"mNAMAA,OAAOC,WAAaC,aAOpB,MAAMC,EAAW,CACfC,IAAK,yBAA0BC,IAAK,iE,+FCThCC,EAAgBC,EAAAA,GAAYD,cAuBlC,EArBYE,IAAiC,IAAhC,aAAEC,GAAwBD,EAAPE,GAAKC,EAAAA,EAAAA,GAAAH,EAAAI,GACnC,OACIC,EAAAA,EAAAA,KAACC,EAAAA,WAAU,CAAAC,UACTF,EAAAA,EAAAA,KAACP,GAAaU,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACNN,GAAK,IACTO,MAAO,CACL,CACEC,IAAK,aACLC,KAAM,IACNC,MAAO,iBAGXC,OAAQZ,EACRa,WAAYb,EAAaa,WACzBC,OAAQA,EAAAA,QACRC,UAAW,CAAEC,KAAM,YCjBzBC,EAAOC,EAAAA,WAAoBC,SAASC,eAAe,SAEtCC,WACjB,MAAMrB,OFSkBqB,WACxB,MAAMC,GAAOC,EAAAA,EAAAA,GAAW,CACtBC,aAAcC,GAASC,EAAAA,QAAQD,MAAMA,KAGjCE,GAAoBpB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACrBb,GAAQ,IAAEkC,OAAQ,kBAAmBC,eAAgB,WAgC1D,OA7BAC,EAAAA,EAAAA,QAAmB,CACjBC,QAAS,CACPC,QAASL,EAAsB,kBAAmBA,EAAsB,uBAAqBpB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACxFb,GAAQ,IAAEkC,OAAQ,sBAAuBC,eAAgB,UAC3D,aAEFtB,EAAAA,EAAAA,IAAAA,EAAAA,EAAAA,GAAA,GACIb,GAAQ,IAAEkC,OAAQ,YAAaC,eAAgBpC,cAMxDwC,EAAAA,EAAAA,QAAY,CACVX,OAAMY,SAAS9B,EAAAA,EAAAA,KAAC+B,EAAAA,KAAI,CAACC,MAAO,IACPC,MAAO,CACLC,SAAU,WACVC,KAAM,MACNC,QAAS,OACTC,UAAW,sBACNhB,MAAO,KAAMiB,OAAOtC,EAAAA,EAAAA,KAACuC,EAAAA,MAAK,IAAKC,kBAAoBC,IAC7E,MAAM,KAAEC,GAASD,EAIjB,OAHAA,EAASC,KAAO,CACdC,KAAoB,IAAdD,EAAKC,KAAa,IAAMD,EAAKC,KAAMC,IAAKF,EAAKE,IAAKC,QAASH,EAAKA,MAEjED,KAIJ,CACLvB,OAAM4B,MAAO,CAAC,EAAGC,KAAM,CAAC,EAAGtC,WAAY,CACrCuC,aAAc,aEjDSC,GACpBpC,EAAKqC,QAAOlD,EAAAA,EAAAA,KAACmD,EAAG,CAAC1C,WAAYb,EAAaa,WAAYb,aAAcA,MAG7EwD,CAAWD,E","sources":["preset.js","App.js","bootstrap.js"],"sourcesContent":["import React from 'react';\nimport { preset as fetchPreset } from '@kne/react-fetch';\nimport { Spin, Empty, message } from 'antd';\nimport createAjax from '@kne/axios-fetch';\nimport { preset as remoteLoaderPreset } from '@kne/remote-loader';\n\nwindow.PUBLIC_URL = process.env.PUBLIC_URL;\n\n// url: 'https://registry.npmmirror.com',\n// tpl: '{{url}}/@kne-components%2f{{remote}}/{{version}}/files/build',\n\n// url: 'https://cdn.jsdelivr.net', tpl: '{{url}}/npm/@kne-components/{{remote}}@{{version}}/build'\n\nconst registry = {\n url: 'https://uc.fatalent.cn', tpl: '{{url}}/packages/@kne-components/{{remote}}/{{version}}/build'\n};\n\nexport const globalInit = async () => {\n const ajax = createAjax({\n errorHandler: error => message.error(error)\n });\n\n const componentsCoreRemote = {\n ...registry, remote: 'components-core', defaultVersion: '0.4.51'\n };\n\n remoteLoaderPreset({\n remotes: {\n default: componentsCoreRemote, 'components-core': componentsCoreRemote, 'components-iconfont': {\n ...registry, remote: 'components-iconfont', defaultVersion: '0.2.1'\n }, 'info-page': process.env.NODE_ENV === 'development' ? {\n remote: 'info-page', url: '/', tpl: '{{url}}'\n } : {\n ...registry, remote: 'info-page', defaultVersion: process.env.DEFAULT_VERSION\n }\n }\n });\n\n\n fetchPreset({\n ajax, loading: <Spin delay={500}\n style={{\n position: 'absolute',\n left: '50%',\n padding: '10px',\n transform: 'translateX(-50%)'\n }} />, error: null, empty: <Empty />, transformResponse: (response) => {\n const { data } = response;\n response.data = {\n code: data.code === 0 ? 200 : data.code, msg: data.msg, results: data.data\n };\n return response;\n }\n });\n\n return {\n ajax, enums: {}, apis: {}, themeToken: {\n colorPrimary: '#4183F0'\n }\n };\n};\n","import { HashRouter } from \"react-router-dom\";\nimport createEntry from \"@kne/modules-dev/dist/create-entry.modern\";\nimport \"@kne/modules-dev/dist/create-entry.css\";\nimport readme from \"readme\";\n\nconst ExampleRoutes = createEntry.ExampleRoutes;\n\nconst App = ({ globalPreset, ...props }) => {\n return (\n <HashRouter>\n <ExampleRoutes\n {...props}\n paths={[\n {\n key: \"components\",\n path: \"/\",\n title: \"首页\",\n },\n ]}\n preset={globalPreset}\n themeToken={globalPreset.themeToken}\n readme={readme}\n pageProps={{ menu: null }}\n />\n </HashRouter>\n );\n};\n\nexport default App;\n","import { globalInit } from './preset';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\n\nconst renderRoot = async (App) => {\n const globalPreset = await globalInit();\n return root.render(<App themeToken={globalPreset.themeToken} globalPreset={globalPreset} />);\n};\n\nrenderRoot(App);\n"],"names":["window","PUBLIC_URL","process","registry","url","tpl","ExampleRoutes","createEntry","_ref","globalPreset","props","_objectWithoutProperties","_excluded","_jsx","HashRouter","children","_objectSpread","paths","key","path","title","preset","themeToken","readme","pageProps","menu","root","ReactDOM","document","getElementById","async","ajax","createAjax","errorHandler","error","message","componentsCoreRemote","remote","defaultVersion","remoteLoaderPreset","remotes","default","fetchPreset","loading","Spin","delay","style","position","left","padding","transform","empty","Empty","transformResponse","response","data","code","msg","results","enums","apis","colorPrimary","globalInit","render","App","renderRoot"],"sourceRoot":""}
package/build/static/js/{784.27a01a67.chunk.js → 784.55068114.chunk.js} RENAMED
@@ -1,2 +1,2 @@
1
- "use strict";(self.webpackChunk_kne_components_info_page=self.webpackChunk_kne_components_info_page||[]).push([[784],{8151(e,n,o){o.r(n),o.d(n,{default:()=>a,manifest:()=>p});const a={InfoPage:o(58872).A},p={name:"info-page",version:"0.2.7","open-version":!0,"public-url":"/info-page",modules:[{name:"info-page",baseDir:"/home/runner/work/info-page/info-page",description:"\u4e00\u822c\u7528\u5728\u590d\u6742\u7684\u8be6\u60c5\u5c55\u793a\u9875\u9762\uff0cInfoPage\u63d0\u4f9b\u4e86\u4e00\u4e2a\u6807\u51c6\u7684\u5c55\u793a\u4fe1\u606f\u7684\u683c\u5f0f",packageName:"@kne/info-page"}]}}}]);
2
- //# sourceMappingURL=784.27a01a67.chunk.js.map
1
+ "use strict";(self.webpackChunk_kne_components_info_page=self.webpackChunk_kne_components_info_page||[]).push([[784],{8151(e,n,o){o.r(n),o.d(n,{default:()=>a,manifest:()=>p});const a={InfoPage:o(58872).A},p={name:"info-page",version:"0.2.9","open-version":!0,"public-url":"/info-page",modules:[{name:"info-page",baseDir:"/home/runner/work/info-page/info-page",description:"\u4e00\u822c\u7528\u5728\u590d\u6742\u7684\u8be6\u60c5\u5c55\u793a\u9875\u9762\uff0cInfoPage\u63d0\u4f9b\u4e86\u4e00\u4e2a\u6807\u51c6\u7684\u5c55\u793a\u4fe1\u606f\u7684\u683c\u5f0f",packageName:"@kne/info-page"}]}}}]);
2
+ //# sourceMappingURL=784.55068114.chunk.js.map
package/build/static/js/{784.27a01a67.chunk.js.map → 784.55068114.chunk.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"static/js/784.27a01a67.chunk.js","mappings":"+KAAuD,SAAgBA,S,SAAQA,GAClEC,EAAW,CAAC,KAAO,YAAY,QAAU,QAAQ,gBAAe,EAAK,aAAa,aAAa,QAAU,CAAC,CAAC,KAAO,YAAY,QAAU,wCAAwC,YAAc,yLAAwC,YAAc,mB","sources":["../node_modules/readme/modules.js"],"sourcesContent":["import InfoPage from '@components/info-page/README.md';export default {InfoPage};\nexport const manifest = {\"name\":\"info-page\",\"version\":\"0.2.7\",\"open-version\":true,\"public-url\":\"/info-page\",\"modules\":[{\"name\":\"info-page\",\"baseDir\":\"/home/runner/work/info-page/info-page\",\"description\":\"一般用在复杂的详情展示页面，InfoPage提供了一个标准的展示信息的格式\",\"packageName\":\"@kne/info-page\"}]};"],"names":["InfoPage","manifest"],"sourceRoot":""}
1
+ {"version":3,"file":"static/js/784.55068114.chunk.js","mappings":"+KAAuD,SAAgBA,S,SAAQA,GAClEC,EAAW,CAAC,KAAO,YAAY,QAAU,QAAQ,gBAAe,EAAK,aAAa,aAAa,QAAU,CAAC,CAAC,KAAO,YAAY,QAAU,wCAAwC,YAAc,yLAAwC,YAAc,mB","sources":["../node_modules/readme/modules.js"],"sourcesContent":["import InfoPage from '@components/info-page/README.md';export default {InfoPage};\nexport const manifest = {\"name\":\"info-page\",\"version\":\"0.2.9\",\"open-version\":true,\"public-url\":\"/info-page\",\"modules\":[{\"name\":\"info-page\",\"baseDir\":\"/home/runner/work/info-page/info-page\",\"description\":\"一般用在复杂的详情展示页面，InfoPage提供了一个标准的展示信息的格式\",\"packageName\":\"@kne/info-page\"}]};"],"names":["InfoPage","manifest"],"sourceRoot":""}
package/build/static/js/872.1eb2efaa.chunk.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";(self.webpackChunk_kne_components_info_page=self.webpackChunk_kne_components_info_page||[]).push([[872],{58872(n,t,e){e.d(t,{A:()=>o});var a=e(51589),d=e(28833);const o={name:"info-page",summary:"<p>info-page \u662f\u4e00\u4e2a\u4e13\u4e3a\u590d\u6742\u8be6\u60c5\u5c55\u793a\u9875\u9762\u8bbe\u8ba1\u7684 React \u7ec4\u4ef6\u5e93\uff0c\u63d0\u4f9b\u6807\u51c6\u5316\u7684\u4fe1\u606f\u5c55\u793a\u683c\u5f0f\u548c\u4e30\u5bcc\u7684\u5e03\u5c40\u9009\u9879\u3002</p>\n<h2>\u6838\u5fc3\u7279\u6027</h2>\n<ul>\n<li><strong>\u7edf\u4e00\u7684\u4fe1\u606f\u5c55\u793a\u6807\u51c6</strong>\uff1a\u63d0\u4f9b\u4e00\u81f4\u7684\u8be6\u60c5\u9875\u9762\u5c55\u793a\u683c\u5f0f\uff0c\u786e\u4fdd\u7528\u6237\u4f53\u9a8c\u7684\u8fde\u8d2f\u6027</li>\n<li><strong>\u7075\u6d3b\u7684\u5e03\u5c40\u7ec4\u4ef6</strong>\uff1a\u5305\u542b\u591a\u79cd\u5e03\u5c40\u65b9\u5f0f\uff0c\u652f\u6301\u7f51\u683c\u3001\u8868\u683c\u3001\u5206\u680f\u7b49\u591a\u79cd\u5c55\u793a\u5f62\u5f0f</li>\n<li><strong>\u5f3a\u5927\u7684\u6570\u636e\u5904\u7406\u80fd\u529b</strong>\uff1a\u5185\u7f6e\u6570\u636e\u683c\u5f0f\u5316\u3001\u7a7a\u503c\u5904\u7406\u3001\u6761\u4ef6\u663e\u793a\u7b49\u5b9e\u7528\u529f\u80fd</li>\n<li><strong>\u9ad8\u5ea6\u53ef\u5b9a\u5236\u5316</strong>\uff1a\u652f\u6301\u81ea\u5b9a\u4e49\u6e32\u67d3\u3001\u6837\u5f0f\u5b9a\u5236\u548c\u6269\u5c55\u914d\u7f6e</li>\n<li><strong>\u73b0\u4ee3\u5316\u8bbe\u8ba1</strong>\uff1a\u57fa\u4e8e Ant Design \u6784\u5efa\uff0c\u652f\u6301\u54cd\u5e94\u5f0f\u5e03\u5c40</li>\n</ul>\n<h2>\u9002\u7528\u573a\u666f</h2>\n<ul>\n<li><strong>\u7ba1\u7406\u7cfb\u7edf\u8be6\u60c5\u9875</strong>\uff1a\u7528\u6237\u4fe1\u606f\u3001\u8ba2\u5355\u8be6\u60c5\u3001\u4ea7\u54c1\u4fe1\u606f\u7b49\u590d\u6742\u5c55\u793a\u573a\u666f</li>\n<li><strong>\u6570\u636e\u62a5\u544a\u9875\u9762</strong>\uff1a\u9700\u8981\u7ed3\u6784\u5316\u5c55\u793a\u591a\u7ef4\u5ea6\u6570\u636e\u7684\u62a5\u8868\u548c\u7edf\u8ba1\u9875\u9762</li>\n<li><strong>\u5de5\u4f5c\u6d41\u5c55\u793a</strong>\uff1a\u6d41\u7a0b\u5ba1\u6279\u8bb0\u5f55\u3001\u64cd\u4f5c\u5386\u53f2\u7b49\u65f6\u5e8f\u4fe1\u606f\u5c55\u793a</li>\n<li><strong>\u6570\u636e\u5bf9\u6bd4\u9875\u9762</strong>\uff1a\u591a\u5217\u5bf9\u6bd4\u5c55\u793a\u3001\u8bc4\u5206\u7cfb\u7edf\u7b49</li>\n<li><strong>\u6253\u5370\u53cb\u597d\u8bbe\u8ba1</strong>\uff1a\u652f\u6301\u5206\u9875\u6253\u5370\u7684\u62a5\u544a\u751f\u6210</li>\n</ul>\n<h2>\u6280\u672f\u4eae\u70b9</h2>\n<ul>\n<li><strong>\u7ec4\u4ef6\u5316\u8bbe\u8ba1</strong>\uff1a\u63d0\u4f9b InfoPage\u3001Content\u3001TableView\u3001Flow \u7b49\u72ec\u7acb\u7ec4\u4ef6\uff0c\u53ef\u5355\u72ec\u4f7f\u7528\u4e5f\u53ef\u7ec4\u5408\u4f7f\u7528</li>\n<li><strong>\u667a\u80fd\u5217\u8ba1\u7b97</strong>\uff1a\u81ea\u52a8\u8ba1\u7b97\u5217\u5bbd\u3001\u54cd\u5e94\u5f0f\u5e03\u5c40\u9002\u914d\uff0c\u652f\u6301\u56fa\u5b9a\u5217\u548c\u81ea\u9002\u5e94\u5217\u6df7\u5408\u4f7f\u7528</li>\n<li><strong>\u4e30\u5bcc\u7684\u683c\u5f0f\u5316\u9009\u9879</strong>\uff1a\u5185\u7f6e\u65e5\u671f\u3001\u6570\u5b57\u3001\u8d27\u5e01\u3001\u5e03\u5c14\u503c\u7b49\u591a\u79cd\u6570\u636e\u683c\u5f0f\u5316\u5668</li>\n<li><strong>\u6761\u4ef6\u6e32\u67d3\u673a\u5236</strong>\uff1a\u652f\u6301\u57fa\u4e8e\u6570\u636e\u52a8\u6001\u63a7\u5236\u5b57\u6bb5\u663e\u793a\u72b6\u6001</li>\n<li><strong>TypeScript \u53cb\u597d</strong>\uff1a\u5b8c\u6574\u7684\u7c7b\u578b\u5b9a\u4e49\u652f\u6301\uff0c\u63d0\u4f9b\u826f\u597d\u7684\u5f00\u53d1\u4f53\u9a8c</li>\n</ul>",description:"\u4e00\u822c\u7528\u5728\u590d\u6742\u7684\u8be6\u60c5\u5c55\u793a\u9875\u9762\uff0cInfoPage\u63d0\u4f9b\u4e86\u4e00\u4e2a\u6807\u51c6\u7684\u5c55\u793a\u4fe1\u606f\u7684\u683c\u5f0f",packageName:"@kne/info-page",api:"<h3>InfoPage</h3>\n<p>\u4fe1\u606f\u5c55\u793a\u9875\u9762\u5bb9\u5668\u7ec4\u4ef6\uff0c\u63d0\u4f9b\u7edf\u4e00\u7684\u9875\u9762\u5e03\u5c40\u548c\u95f4\u8ddd\u63a7\u5236</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u5b50\u7ec4\u4ef6\u5185\u5bb9</td>\n</tr>\n</tbody>\n</table>\n<h3>InfoPage.Part</h3>\n<p>\u4fe1\u606f\u5c55\u793a\u533a\u5757\u7ec4\u4ef6\uff0c\u7528\u4e8e\u5305\u88c5\u5177\u4f53\u7684\u4fe1\u606f\u5185\u5bb9</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n<tr>\n<td>title</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u533a\u5757\u6807\u9898</td>\n</tr>\n<tr>\n<td>subtitle</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u533a\u5757\u526f\u6807\u9898</td>\n</tr>\n<tr>\n<td>extra</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u533a\u5757\u989d\u5916\u64cd\u4f5c\u533a\u57df</td>\n</tr>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u533a\u5757\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>bordered</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u662f\u5426\u663e\u793a\u989d\u5916\u8fb9\u6846\u6837\u5f0f</td>\n</tr>\n</tbody>\n</table>\n<h3>Content / InfoList</h3>\n<p>\u901a\u7528\u5185\u5bb9\u5c55\u793a\u7ec4\u4ef6\uff0c\u652f\u6301\u6807\u7b7e-\u5185\u5bb9\u7684\u7075\u6d3b\u5e03\u5c40</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>list</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n<td>\u5c55\u793a\u6570\u636e\u5217\u8868</td>\n</tr>\n<tr>\n<td>labelAlign</td>\n<td>string</td>\n<td>\u5426</td>\n<td>'left'</td>\n<td>\u6807\u7b7e\u5bf9\u9f50\u65b9\u5f0f\uff0c\u53ef\u9009 'left'\u3001'center'\u3001'right'\u3001'auto'</td>\n</tr>\n<tr>\n<td>col</td>\n<td>number</td>\n<td>\u5426</td>\n<td>1</td>\n<td>\u6bcf\u884c\u663e\u793a\u7684\u5217\u6570</td>\n</tr>\n<tr>\n<td>gutter</td>\n<td>number</td>\n<td>\u5426</td>\n<td>0</td>\n<td>\u6805\u683c\u95f4\u9694</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n<tr>\n<td>size</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u5c3a\u5bf8\u5927\u5c0f\uff0c\u53ef\u9009 'small'</td>\n</tr>\n<tr>\n<td>itemRender</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u5217\u8868\u9879\u6e32\u67d3\u51fd\u6570</td>\n</tr>\n</tbody>\n</table>\n<h4>\u5217\u8868\u9879\u6570\u636e\u7ed3\u6784</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u6807\u7b7e\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>content</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u5185\u5bb9\u533a\u57df</td>\n</tr>\n<tr>\n<td>block</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u662f\u5426\u5360\u636e\u6574\u884c</td>\n</tr>\n<tr>\n<td>display</td>\n<td>boolean/function</td>\n<td>\u5426</td>\n<td>true</td>\n<td>\u662f\u5426\u663e\u793a\u8be5\u9879</td>\n</tr>\n</tbody>\n</table>\n<h3>Descriptions / DetailList</h3>\n<p>\u63cf\u8ff0\u5217\u8868\u7ec4\u4ef6\uff0c\u7c7b\u4f3c\u4e8e Ant Design \u7684 Descriptions\uff0c\u4e13\u4e3a\u8be6\u60c5\u9875\u8bbe\u8ba1</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>dataSource</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u4e8c\u7ef4\u6570\u7ec4\u6570\u636e\u6e90\uff0c\u6bcf\u4e2a\u5b50\u6570\u7ec4\u4ee3\u8868\u4e00\u884c</td>\n</tr>\n<tr>\n<td>isFull</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u6807\u7b7e\u662f\u5426\u5360\u636e\u66f4\u5927\u7a7a\u95f4</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n<tr>\n<td>itemRender</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u9879\u6e32\u67d3\u51fd\u6570</td>\n</tr>\n</tbody>\n</table>\n<h3>CentralContent / FieldView</h3>\n<p>\u5c45\u4e2d\u5185\u5bb9\u5c55\u793a\u7ec4\u4ef6\uff0c\u652f\u6301\u5217\u5b9a\u4e49\u548c\u81ea\u52a8\u5e03\u5c40</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>dataSource</td>\n<td>object</td>\n<td>\u5426</td>\n<td>{}</td>\n<td>\u6570\u636e\u6e90\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>columns</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n<td>\u5217\u5b9a\u4e49\u6570\u7ec4</td>\n</tr>\n<tr>\n<td>col</td>\n<td>number</td>\n<td>\u5426</td>\n<td>2</td>\n<td>\u5c55\u793a\u5217\u6570</td>\n</tr>\n<tr>\n<td>type</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u7ec4\u4ef6\u7c7b\u578b\uff0c\u53ef\u9009 'compact'\uff08\u7d27\u51d1\u6a21\u5f0f\uff09</td>\n</tr>\n<tr>\n<td>valueIsEmpty</td>\n<td>function</td>\n<td>\u5426</td>\n<td>isEmpty</td>\n<td>\u503c\u4e3a\u7a7a\u7684\u5224\u65ad\u51fd\u6570</td>\n</tr>\n<tr>\n<td>emptyIsPlaceholder</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n<td>\u7a7a\u503c\u662f\u5426\u663e\u793a\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>'-'</td>\n<td>\u7a7a\u503c\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n<tr>\n<td>context</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u4e0a\u4e0b\u6587\u6570\u636e</td>\n</tr>\n</tbody>\n</table>\n<h4>\u5217\u5b9a\u4e49\u6570\u636e\u7ed3\u6784</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>string</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5b57\u6bb5\u540d\u79f0</td>\n</tr>\n<tr>\n<td>title</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u663e\u793a\u6807\u9898</td>\n</tr>\n<tr>\n<td>format</td>\n<td>string/function</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u683c\u5f0f\u5316\u89c4\u5219</td>\n</tr>\n<tr>\n<td>render</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u51fd\u6570</td>\n</tr>\n<tr>\n<td>span</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u6805\u683c\u5360\u4f4d\u683c\u6570</td>\n</tr>\n<tr>\n<td>block</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u662f\u5426\u5360\u636e\u6574\u884c</td>\n</tr>\n</tbody>\n</table>\n<h3>TableView</h3>\n<p>\u8868\u683c\u89c6\u56fe\u7ec4\u4ef6\uff0c\u652f\u6301\u884c\u9009\u62e9\u548c\u81ea\u5b9a\u4e49\u5217\u914d\u7f6e</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>dataSource</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n<td>\u8868\u683c\u6570\u636e\u6e90</td>\n</tr>\n<tr>\n<td>columns</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5217\u5b9a\u4e49\u6570\u7ec4</td>\n</tr>\n<tr>\n<td>rowKey</td>\n<td>string/function</td>\n<td>\u5426</td>\n<td>'id'</td>\n<td>\u884c\u6570\u636e\u7684\u552f\u4e00\u6807\u8bc6</td>\n</tr>\n<tr>\n<td>rowSelection</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u884c\u9009\u62e9\u914d\u7f6e</td>\n</tr>\n<tr>\n<td>valueIsEmpty</td>\n<td>function</td>\n<td>\u5426</td>\n<td>isEmpty</td>\n<td>\u503c\u4e3a\u7a7a\u7684\u5224\u65ad\u51fd\u6570</td>\n</tr>\n<tr>\n<td>emptyIsPlaceholder</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n<td>\u7a7a\u503c\u662f\u5426\u663e\u793a\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>'-'</td>\n<td>\u7a7a\u503c\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>empty</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>&lt;Empty /&gt;</td>\n<td>\u7a7a\u6570\u636e\u5c55\u793a\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>onRowSelect</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u884c\u9009\u62e9\u56de\u8c03\u51fd\u6570</td>\n</tr>\n<tr>\n<td>render</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6e32\u67d3\u51fd\u6570</td>\n</tr>\n<tr>\n<td>context</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u4e0a\u4e0b\u6587\u6570\u636e</td>\n</tr>\n<tr>\n<td>sticky</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u8868\u5934\u662f\u5426\u56fa\u5b9a</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n</tbody>\n</table>\n<h4>\u884c\u9009\u62e9\u914d\u7f6e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>type</td>\n<td>string</td>\n<td>\u5426</td>\n<td>'checkbox'</td>\n<td>\u9009\u62e9\u7c7b\u578b\uff0c\u53ef\u9009 'checkbox'\u3001'radio'</td>\n</tr>\n<tr>\n<td>selectedRowKeys</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n<td>\u5df2\u9009\u4e2d\u884c\u7684key\u6570\u7ec4</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>function</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u9009\u62e9\u53d8\u5316\u56de\u8c03\u51fd\u6570</td>\n</tr>\n<tr>\n<td>isSelectedAll</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u662f\u5426\u5168\u9009\u72b6\u6001</td>\n</tr>\n<tr>\n<td>allowSelectedAll</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u662f\u5426\u5141\u8bb8\u5168\u9009\uff08\u914d\u5408 isSelectedAll \u4f7f\u7528\uff09</td>\n</tr>\n</tbody>\n</table>\n<h3>Flow</h3>\n<p>\u6d41\u7a0b\u5c55\u793a\u7ec4\u4ef6\uff0c\u57fa\u4e8e Ant Design Steps \u7ec4\u4ef6\u6269\u5c55</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>dataSource</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n<td>\u6d41\u7a0b\u6570\u636e\u6e90</td>\n</tr>\n<tr>\n<td>columns</td>\n<td>array</td>\n<td>\u5426</td>\n<td>[]</td>\n<td>\u5217\u5b9a\u4e49\u6570\u7ec4</td>\n</tr>\n<tr>\n<td>size</td>\n<td>string</td>\n<td>\u5426</td>\n<td>'small'</td>\n<td>\u6b65\u9aa4\u6761\u5927\u5c0f</td>\n</tr>\n<tr>\n<td>current</td>\n<td>number</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u5f53\u524d\u6b65\u9aa4\uff08\u4ece0\u5f00\u59cb\uff09</td>\n</tr>\n<tr>\n<td>direction</td>\n<td>string</td>\n<td>\u5426</td>\n<td>'vertical'</td>\n<td>\u6b65\u9aa4\u6761\u65b9\u5411\uff0c\u53ef\u9009 'vertical'\u3001'horizontal'</td>\n</tr>\n<tr>\n<td>progressDot</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u662f\u5426\u4f7f\u7528\u70b9\u72b6\u6b65\u9aa4\u6761</td>\n</tr>\n<tr>\n<td>labelPlacement</td>\n<td>string</td>\n<td>\u5426</td>\n<td>'vertical'</td>\n<td>\u6807\u7b7e\u4f4d\u7f6e\uff0c\u53ef\u9009 'vertical'\u3001'horizontal'</td>\n</tr>\n<tr>\n<td>empty</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>&lt;Empty /&gt;</td>\n<td>\u7a7a\u6570\u636e\u5c55\u793a\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>valueIsEmpty</td>\n<td>function</td>\n<td>\u5426</td>\n<td>isEmpty</td>\n<td>\u503c\u4e3a\u7a7a\u7684\u5224\u65ad\u51fd\u6570</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>'-'</td>\n<td>\u7a7a\u503c\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>emptyIsPlaceholder</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u7a7a\u503c\u662f\u5426\u663e\u793a\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n</tbody>\n</table>\n<h4>columns \u5217\u5b9a\u4e49\u652f\u6301\u7684 type \u7c7b\u578b</h4>\n<table>\n<thead>\n<tr>\n<th>type</th>\n<th>\u8bf4\u660e</th>\n<th>\u7279\u6b8a\u5904\u7406</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>title</td>\n<td>\u6807\u9898</td>\n<td>-</td>\n</tr>\n<tr>\n<td>subTitle</td>\n<td>\u526f\u6807\u9898</td>\n<td>-</td>\n</tr>\n<tr>\n<td>description</td>\n<td>\u63cf\u8ff0</td>\n<td>-</td>\n</tr>\n<tr>\n<td>status</td>\n<td>\u72b6\u6001</td>\n<td>-</td>\n</tr>\n<tr>\n<td>content</td>\n<td>\u989d\u5916\u5185\u5bb9</td>\n<td>\u6e32\u67d3\u4e3a\u72ec\u7acb\u533a\u5757</td>\n</tr>\n<tr>\n<td>actionList</td>\n<td>\u64cd\u4f5c\u5217\u8868</td>\n<td>\u552f\u4e00\u652f\u6301 children \u7684\u7c7b\u578b</td>\n</tr>\n</tbody>\n</table>\n<h3>SplitLine</h3>\n<p>\u5206\u5272\u7ebf\u5c55\u793a\u7ec4\u4ef6\uff0c\u7528\u4e8e\u6a2a\u5411\u5c55\u793a\u591a\u4e2a\u5b57\u6bb5</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>dataSource</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u6570\u636e\u6e90\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>columns</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5217\u5b9a\u4e49\u6570\u7ec4</td>\n</tr>\n<tr>\n<td>valueIsEmpty</td>\n<td>function</td>\n<td>\u5426</td>\n<td>isEmpty</td>\n<td>\u503c\u4e3a\u7a7a\u7684\u5224\u65ad\u51fd\u6570</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>'-'</td>\n<td>\u7a7a\u503c\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>emptyIsPlaceholder</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>false</td>\n<td>\u7a7a\u503c\u662f\u5426\u663e\u793a\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>size</td>\n<td>number</td>\n<td>\u5426</td>\n<td>0</td>\n<td>\u5206\u5272\u7ebf\u95f4\u8ddd</td>\n</tr>\n<tr>\n<td>labelGap</td>\n<td>number</td>\n<td>\u5426</td>\n<td>4</td>\n<td>\u6807\u7b7e\u4e0e\u5185\u5bb9\u7684\u95f4\u8ddd</td>\n</tr>\n<tr>\n<td>labelMode</td>\n<td>string</td>\n<td>\u5426</td>\n<td>'horizontal'</td>\n<td>\u6807\u7b7e\u6a21\u5f0f\uff0c\u53ef\u9009 'horizontal'\u3001'vertical'</td>\n</tr>\n<tr>\n<td>split</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>&lt;Divider type=\"vertical\" /&gt;</td>\n<td>\u5206\u5272\u7ebf\u7ec4\u4ef6</td>\n</tr>\n<tr>\n<td>context</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u4e0a\u4e0b\u6587\u6570\u636e</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n</tbody>\n</table>\n<h4>columns \u5217\u5b9a\u4e49\u7279\u6b8a\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>icon</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u56fe\u6807\u5143\u7d20</td>\n</tr>\n</tbody>\n</table>\n<h3>Report</h3>\n<p>\u62a5\u544a\u5bb9\u5668\u7ec4\u4ef6\uff0c\u7528\u4e8e\u751f\u6210\u6253\u5370\u53cb\u597d\u7684\u62a5\u544a\u9875\u9762</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>title</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u62a5\u544a\u6807\u9898</td>\n</tr>\n<tr>\n<td>subtitle</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u62a5\u544a\u526f\u6807\u9898</td>\n</tr>\n<tr>\n<td>extra</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u6807\u9898\u989d\u5916\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>border</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n<td>\u662f\u5426\u663e\u793a\u8fb9\u6846</td>\n</tr>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u5b50\u7ec4\u4ef6\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n</tbody>\n</table>\n<h3>Report.List</h3>\n<p>\u62a5\u544a\u5217\u8868\u5b50\u7ec4\u4ef6\uff0c\u5c55\u793a\u952e\u503c\u5bf9\u5f62\u5f0f\u7684\u62a5\u544a\u5185\u5bb9</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>report</td>\n<td>object</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u62a5\u544a\u6570\u636e\u5bf9\u8c61\uff0c\u5305\u542b list \u6570\u7ec4</td>\n</tr>\n<tr>\n<td>report.list</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5217\u8868\u9879\u6570\u7ec4\uff0c\u6bcf\u9879\u5305\u542b label\u3001content \u7b49</td>\n</tr>\n</tbody>\n</table>\n<h3>Report.Result</h3>\n<p>\u62a5\u544a\u7ed3\u679c\u5b50\u7ec4\u4ef6\uff0c\u5c55\u793a\u8bc4\u5206\u7ed3\u679c\u548c\u8be6\u7ec6\u63cf\u8ff0</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>report</td>\n<td>object</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u62a5\u544a\u6570\u636e\u5bf9\u8c61\uff0c\u5305\u542b total \u548c list</td>\n</tr>\n<tr>\n<td>report.total</td>\n<td>object</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u603b\u5206\u4fe1\u606f\uff0c\u5305\u542b score\u3001label</td>\n</tr>\n<tr>\n<td>report.list</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u8bc4\u5206\u660e\u7ec6\u5217\u8868\uff0c\u6bcf\u9879\u5305\u542b label\u3001score\u3001content</td>\n</tr>\n</tbody>\n</table>\n<h3>Report.Table</h3>\n<p>\u62a5\u544a\u8868\u683c\u5b50\u7ec4\u4ef6\uff0c\u5c55\u793a\u5206\u7ec4\u8bc4\u5206\u8868\u683c</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>report</td>\n<td>object</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u62a5\u544a\u6570\u636e\u5bf9\u8c61</td>\n</tr>\n<tr>\n<td>report.columns</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u8868\u683c\u5217\u5b9a\u4e49</td>\n</tr>\n<tr>\n<td>report.group</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5206\u7ec4\u5b9a\u4e49\u6570\u7ec4\uff0c\u6bcf\u9879\u5305\u542b name\u3001label</td>\n</tr>\n<tr>\n<td>report.list</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u8868\u683c\u6570\u636e\u5217\u8868</td>\n</tr>\n</tbody>\n</table>\n<h3>Report.Part</h3>\n<p>\u62a5\u544a\u5185\u5bb9\u533a\u5757\u5b50\u7ec4\u4ef6\uff0c\u5c55\u793a\u6bb5\u843d\u5f62\u5f0f\u7684\u5185\u5bb9</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>report</td>\n<td>object</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u62a5\u544a\u6570\u636e\u5bf9\u8c61\uff0c\u5305\u542b list \u6570\u7ec4</td>\n</tr>\n<tr>\n<td>report.list</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5185\u5bb9\u9879\u6570\u7ec4\uff0c\u6bcf\u9879\u5305\u542b label\u3001content \u7b49</td>\n</tr>\n</tbody>\n</table>\n<h3>Report.Score</h3>\n<p>\u62a5\u544a\u8bc4\u5206\u5c55\u793a\u5b50\u7ec4\u4ef6</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>number</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5f53\u524d\u8bc4\u5206\u503c</td>\n</tr>\n</tbody>\n</table>\n<h3>Score</h3>\n<p>\u8bc4\u5206\u5c55\u793a\u7ec4\u4ef6\uff0c\u4ee5\u661f\u5f62\u56fe\u6807\u5c55\u793a\u8bc4\u5206</p>\n<h4>\u5c5e\u6027\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>number</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5f53\u524d\u8bc4\u5206\u503c</td>\n</tr>\n<tr>\n<td>gap</td>\n<td>number</td>\n<td>\u5426</td>\n<td>4</td>\n<td>\u8bc4\u5206\u9879\u4e4b\u95f4\u7684\u95f4\u8ddd</td>\n</tr>\n<tr>\n<td>total</td>\n<td>number</td>\n<td>\u5426</td>\n<td>5</td>\n<td>\u603b\u8bc4\u5206\u9879\u6570</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f\u7c7b\u540d</td>\n</tr>\n</tbody>\n</table>\n<h3>formatView</h3>\n<p>\u6570\u636e\u683c\u5f0f\u5316\u5de5\u5177\u51fd\u6570\uff0c\u63d0\u4f9b\u591a\u79cd\u5e38\u7528\u683c\u5f0f\u5316\u89c4\u5219</p>\n<h4>\u65b9\u6cd5\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u65b9\u6cd5\u540d</th>\n<th>\u53c2\u6570</th>\n<th>\u8fd4\u56de\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>default</td>\n<td>(value, format, context)</td>\n<td>string/object</td>\n<td>\u6839\u636e\u683c\u5f0f\u89c4\u5219\u683c\u5f0f\u5316\u6570\u636e</td>\n</tr>\n</tbody>\n</table>\n<h4>\u652f\u6301\u7684\u683c\u5f0f\u5316\u89c4\u5219</h4>\n<table>\n<thead>\n<tr>\n<th>\u683c\u5f0f\u540d</th>\n<th>\u8bf4\u660e</th>\n<th>\u53c2\u6570</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>date</td>\n<td>\u65e5\u671f\u683c\u5f0f\u5316</td>\n<td>\u6a21\u677f\u5b57\u7b26\u4e32\uff0c\u9ed8\u8ba4 'YYYY-MM-DD'</td>\n</tr>\n<tr>\n<td>datetime</td>\n<td>\u65e5\u671f\u65f6\u95f4\u683c\u5f0f\u5316</td>\n<td>\u6a21\u677f\u5b57\u7b26\u4e32\uff0c\u9ed8\u8ba4 'YYYY-MM-DD HH:mm:ss'</td>\n</tr>\n<tr>\n<td>dateRange</td>\n<td>\u65e5\u671f\u8303\u56f4\u683c\u5f0f\u5316</td>\n<td>\u6a21\u677f\u5b57\u7b26\u4e32\u3001\u662f\u5426\u5141\u8bb8\u7a7a\u503c</td>\n</tr>\n<tr>\n<td>boolean</td>\n<td>\u5e03\u5c14\u503c\u683c\u5f0f\u5316</td>\n<td>true\u503c\u5bf9\u5e94\u7684\u6587\u672c\uff0c\u9ed8\u8ba4 'true'</td>\n</tr>\n<tr>\n<td>number</td>\n<td>\u6570\u5b57\u683c\u5f0f\u5316</td>\n<td>\u6837\u5f0f\u3001\u5355\u4f4d\u3001\u5c0f\u6570\u4f4d\u6570\u7b49</td>\n</tr>\n<tr>\n<td>money</td>\n<td>\u91d1\u989d\u683c\u5f0f\u5316</td>\n<td>\u5355\u4f4d\uff0c\u9ed8\u8ba4 '\u5143'</td>\n</tr>\n</tbody>\n</table>\n<h3>computeColumnsValue</h3>\n<p>\u5217\u503c\u8ba1\u7b97\u5de5\u5177\u51fd\u6570\uff0c\u7528\u4e8e\u7edf\u4e00\u5904\u7406\u5217\u6570\u636e\u7684\u663e\u793a\u903b\u8f91</p>\n<h4>\u65b9\u6cd5\u8bf4\u660e</h4>\n<table>\n<thead>\n<tr>\n<th>\u65b9\u6cd5\u540d</th>\n<th>\u53c2\u6570</th>\n<th>\u8fd4\u56de\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>default</td>\n<td>(config)</td>\n<td>array</td>\n<td>\u8ba1\u7b97\u5217\u7684\u663e\u793a\u503c</td>\n</tr>\n<tr>\n<td>computeDisplay</td>\n<td>(config)</td>\n<td>ReactNode</td>\n<td>\u8ba1\u7b97\u5355\u4e2a\u5217\u7684\u663e\u793a\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>computeColumnsDisplay</td>\n<td>(config)</td>\n<td>array</td>\n<td>\u8ba1\u7b97\u6240\u6709\u5217\u7684\u663e\u793a\u5185\u5bb9</td>\n</tr>\n</tbody>\n</table>\n<h4>\u914d\u7f6e\u53c2\u6570</h4>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u5fc5\u586b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>columns</td>\n<td>array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u5217\u5b9a\u4e49\u6570\u7ec4</td>\n</tr>\n<tr>\n<td>dataSource</td>\n<td>object/array</td>\n<td>\u662f</td>\n<td>-</td>\n<td>\u6570\u636e\u6e90</td>\n</tr>\n<tr>\n<td>context</td>\n<td>object</td>\n<td>\u5426</td>\n<td>-</td>\n<td>\u4e0a\u4e0b\u6587\u6570\u636e</td>\n</tr>\n<tr>\n<td>valueIsEmpty</td>\n<td>function</td>\n<td>\u5426</td>\n<td>isEmpty</td>\n<td>\u503c\u4e3a\u7a7a\u7684\u5224\u65ad\u51fd\u6570</td>\n</tr>\n<tr>\n<td>emptyIsPlaceholder</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n<td>\u7a7a\u503c\u662f\u5426\u663e\u793a\u5360\u4f4d\u7b26</td>\n</tr>\n<tr>\n<td>removeEmpty</td>\n<td>boolean</td>\n<td>\u5426</td>\n<td>true</td>\n<td>\u662f\u5426\u79fb\u9664\u7a7a\u503c\u5217</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>ReactNode</td>\n<td>\u5426</td>\n<td>'-'</td>\n<td>\u7a7a\u503c\u5360\u4f4d\u7b26</td>\n</tr>\n</tbody>\n</table>",example:{isFull:!1,className:"",style:"",list:[{title:"\u57fa\u7840\u5e03\u5c40",description:"\u5c55\u793aInfoPage\u5bb9\u5668\u7ec4\u4ef6\u548cPart\u533a\u5757\u7ec4\u4ef6\u7684\u57fa\u672c\u4f7f\u7528\u65b9\u6cd5",code:'const { default: InfoPage } = _InfoPage;\nconst { Button, Space, Flex, Tag } = antd;\n\nconst BaseExample = () => {\n return (\n <Flex vertical gap={24}>\n <Space direction="vertical" size={16}>\n {/* \u57fa\u7840 Part \u4f7f\u7528 */}\n <InfoPage.Part title="\u4e2a\u4eba\u4fe1\u606f" subtitle="\u5c55\u793a\u57fa\u7840 Part \u7528\u6cd5">\n <Space direction="vertical" size={8}>\n <div><strong>\u59d3\u540d\uff1a</strong>\u5f20\u4e09</div>\n <div><strong>\u6027\u522b\uff1a</strong>\u7537</div>\n <div><strong>\u5e74\u9f84\uff1a</strong>28\u5c81</div>\n </Space>\n </InfoPage.Part>\n\n {/* \u5e26 extra \u7684 Part */}\n <InfoPage.Part \n title="\u8054\u7cfb\u65b9\u5f0f" \n subtitle="\u5c55\u793a\u6807\u9898\u548c\u989d\u5916\u64cd\u4f5c\u533a"\n extra={<Button type="primary" size="small">\u7f16\u8f91</Button>}\n >\n <Space direction="vertical" size={8}>\n <div><strong>\u624b\u673a\uff1a</strong>138-0013-8000</div>\n <div><strong>\u90ae\u7bb1\uff1a</strong>zhangsan@example.com</div>\n <div><strong>\u5730\u5740\uff1a</strong>\u6df1\u5733\u5e02\u5357\u5c71\u533a\u79d1\u6280\u56ed</div>\n </Space>\n </InfoPage.Part>\n\n {/* \u5d4c\u5957 Part */}\n <InfoPage.Part title="\u5de5\u4f5c\u7ecf\u5386">\n <p>\u4ee5\u4e0b\u5c55\u793a\u4e86 Part \u7684\u5d4c\u5957\u4f7f\u7528\uff1a</p>\n <InfoPage.Part subtitle="\u73b0\u4efb\u804c\u4f4d" style={{ background: \'#f5f5f5\', padding: \'12px\' }}>\n <Space direction="vertical" size={8}>\n <div><strong>\u516c\u53f8\uff1a</strong>\u817e\u8baf\u79d1\u6280</div>\n <div><strong>\u804c\u4f4d\uff1a</strong>\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08</div>\n <div><strong>\u5165\u804c\u65f6\u95f4\uff1a</strong>2020\u5e743\u6708</div>\n </Space>\n </InfoPage.Part>\n </InfoPage.Part>\n\n {/* \u5e26 bordered \u7684 Part */}\n <InfoPage.Part title="\u9879\u76ee\u7ecf\u9a8c" bordered>\n <Space direction="vertical" size={8}>\n <div><strong>\u9879\u76ee\u540d\u79f0\uff1a</strong>\u4f01\u4e1a\u7ea7\u7ba1\u7406\u7cfb\u7edf</div>\n <div><strong>\u6280\u672f\u6808\uff1a</strong>React\u3001TypeScript\u3001Ant Design</div>\n <div><strong>\u804c\u8d23\uff1a</strong>\u8d1f\u8d23\u524d\u7aef\u67b6\u6784\u8bbe\u8ba1\u4e0e\u6838\u5fc3\u529f\u80fd\u5f00\u53d1</div>\n </Space>\n </InfoPage.Part>\n\n {/* Collapse \u6298\u53e0\u9762\u677f */}\n <InfoPage.Collapse\n items={[\n { \n key: \'1\', \n label: \'\u6559\u80b2\u80cc\u666f\', \n children: (\n <Space direction="vertical" size={8}>\n <div><strong>\u5b66\u6821\uff1a</strong>\u6df1\u5733\u5927\u5b66</div>\n <div><strong>\u4e13\u4e1a\uff1a</strong>\u8ba1\u7b97\u673a\u79d1\u5b66\u4e0e\u6280\u672f</div>\n <div><strong>\u5b66\u5386\uff1a</strong>\u672c\u79d1</div>\n <div><strong>\u6bd5\u4e1a\u65f6\u95f4\uff1a</strong>2018\u5e746\u6708</div>\n </Space>\n )\n },\n { \n key: \'2\', \n label: \'\u6280\u80fd\u8bc1\u4e66\', \n children: (\n <Space wrap>\n <Tag color="blue">PMP\u9879\u76ee\u7ba1\u7406</Tag>\n <Tag color="green">\u963f\u91cc\u4e91ACP\u8ba4\u8bc1</Tag>\n <Tag color="purple">AWS\u89e3\u51b3\u65b9\u6848\u67b6\u6784\u5e08</Tag>\n </Space>\n )\n }\n ]}\n />\n\n {/* \u65e0\u6807\u9898 Part */}\n <InfoPage.Part>\n <div style={{ color: \'#666\', padding: \'12px\', background: \'#fafafa\' }}>\n <strong>\u5907\u6ce8\uff1a</strong>\u4ee5\u4e0a\u4fe1\u606f\u4ec5\u4f9b\u793a\u4f8b\u5c55\u793a\uff0c\u4e0d\u4ee3\u8868\u771f\u5b9e\u6570\u636e\n </div>\n </InfoPage.Part>\n </Space>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_InfoPage",packageName:"@kne/current-lib_info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u5185\u5bb9\u5217\u8868",description:"\u652f\u6301\u591a\u5217\u5e03\u5c40\u548c\u6807\u7b7e\u5bf9\u9f50\u7684\u7075\u6d3b\u5185\u5bb9\u5c55\u793a\u7ec4\u4ef6",code:"const { Content } = _InfoPage;\nconst { Space, Radio, Tag } = antd;\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [listProps, setListProps] = useState({\n col: 2,\n size: 'default',\n labelAlign: 'left'\n });\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={16}>\n {/* \u63a7\u5236\u9762\u677f */}\n <div style={{ background: '#f5f5f5', padding: '16px', borderRadius: '8px' }}>\n <Space direction=\"vertical\" size={12} style={{ width: '100%' }}>\n <div>\n <span style={{ marginRight: 8 }}>\u5217\u6570\uff1a</span>\n <Radio.Group onChange={(e) => onChange(e, 'col')} value={listProps.col}>\n <Radio.Button value={1}>\u5355\u5217</Radio.Button>\n <Radio.Button value={2}>\u4e24\u5217</Radio.Button>\n <Radio.Button value={3}>\u4e09\u5217</Radio.Button>\n </Radio.Group>\n </div>\n <div>\n <span style={{ marginRight: 8 }}>\u6807\u7b7e\u5bf9\u9f50\uff1a</span>\n <Radio.Group onChange={(e) => onChange(e, 'labelAlign')} value={listProps.labelAlign}>\n <Radio.Button value='left'>\u5de6\u5bf9\u9f50</Radio.Button>\n <Radio.Button value='center'>\u5c45\u4e2d</Radio.Button>\n <Radio.Button value='right'>\u53f3\u5bf9\u9f50</Radio.Button>\n <Radio.Button value='auto'>\u81ea\u9002\u5e94</Radio.Button>\n </Radio.Group>\n </div>\n <div>\n <span style={{ marginRight: 8 }}>\u5c3a\u5bf8\uff1a</span>\n <Radio.Group onChange={(e) => onChange(e, 'size')} value={listProps.size}>\n <Radio.Button value='default'>\u9ed8\u8ba4</Radio.Button>\n <Radio.Button value='small'>\u5c0f\u5c3a\u5bf8</Radio.Button>\n </Radio.Group>\n </div>\n </Space>\n </div>\n\n {/* Content \u7ec4\u4ef6\u5c55\u793a */}\n <Content\n {...listProps}\n list={[\n { label: '\u5ba2\u6237\u540d\u79f0', content: '\u6df1\u5733\u5e02\u817e\u8baf\u8ba1\u7b97\u673a\u7cfb\u7edf\u6709\u9650\u516c\u53f8' },\n { label: '\u7edf\u4e00\u793e\u4f1a\u4fe1\u7528\u4ee3\u7801', content: '914403007109410773' },\n { label: '\u6cd5\u5b9a\u4ee3\u8868\u4eba', content: '\u9a6c\u5316\u817e' },\n { label: '\u4f01\u4e1a\u7c7b\u578b', content: <Tag color=\"blue\">\u6709\u9650\u8d23\u4efb\u516c\u53f8</Tag> },\n { label: '\u6210\u7acb\u65e5\u671f', content: '1998-11-11' },\n { label: '\u6ce8\u518c\u8d44\u672c', content: '500\u4e07\u7f8e\u5143' },\n { label: '\u7ecf\u8425\u72b6\u6001', content: <Tag color=\"success\">\u5b58\u7eed</Tag> },\n { label: '\u6ce8\u518c\u5730\u5740', content: '\u6df1\u5733\u5e02\u5357\u5c71\u533a\u9ad8\u65b0\u79d1\u6280\u56ed\u79d1\u6280\u4e2d\u4e00\u8def\u817e\u8baf\u5927\u53a6' },\n {\n label: '\u7ecf\u8425\u8303\u56f4',\n content: '\u8ba1\u7b97\u673a\u8f6f\u786c\u4ef6\u7684\u6280\u672f\u5f00\u53d1\u3001\u9500\u552e\uff1b\u8ba1\u7b97\u673a\u7f51\u7edc\u5de5\u7a0b\uff1b\u7cfb\u7edf\u96c6\u6210\uff1b\u8f6f\u4ef6\u5f00\u53d1\u53ca\u6280\u672f\u670d\u52a1\uff1b\u4fe1\u606f\u54a8\u8be2\uff1b\u7f51\u7edc\u8bbe\u5907\u3001\u901a\u8baf\u8bbe\u5907\u3001\u7535\u5b50\u4ea7\u54c1\u7684\u6280\u672f\u5f00\u53d1\u4e0e\u9500\u552e\uff1b\u56fd\u5185\u8d38\u6613\u3002',\n block: true\n }\n ]}\n itemRender={(inner, other) => {\n return other?.index === 8 ? <div style={{ color: '#999', fontSize: '12px', marginTop: '8px' }}>\n * \u4ee5\u4e0a\u4fe1\u606f\u4ec5\u4f9b\u5c55\u793a\uff0c\u4e0d\u4ee3\u8868\u771f\u5b9e\u6570\u636e\n </div> : inner;\n }}\n />\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/current-lib_info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u5185\u5bb9\u5c55\u793a",description:"\u5c55\u793aContent\u7ec4\u4ef6\u7684\u5404\u79cd\u914d\u7f6e\u548c\u7528\u6cd5",code:"const { Content } = _InfoPage;\nconst { Flex, Radio, Space, Tag, Avatar } = antd;\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [listProps, setListProps] = useState({\n col: 2,\n size: 'default',\n labelAlign: 'auto',\n gutter: 16\n });\n\n const [showDisabled, setShowDisabled] = useState(false);\n\n const onChange = (e, name) => {\n const val = e?.target.value;\n setListProps(prevState => ({ ...prevState, [name]: val }));\n };\n\n const dataList = [\n { label: '\u5ba2\u6237\u59d3\u540d', content: <Flex align=\"center\" gap={8}><Avatar size=\"small\">\u5f20</Avatar>\u5f20\u4e09</Flex>, block: true },\n { label: '\u5ba2\u6237\u7f16\u53f7', content: 'C20240115001' },\n { label: '\u8054\u7cfb\u7535\u8bdd', content: '138-0013-8000' },\n { label: '\u7535\u5b50\u90ae\u7bb1', content: 'zhangsan@example.com' },\n { label: '\u5ba2\u6237\u7c7b\u578b', content: <Tag color=\"blue\">VIP\u5ba2\u6237</Tag> },\n { label: '\u4fe1\u7528\u7b49\u7ea7', content: <Tag color=\"green\">A\u7ea7</Tag> },\n { label: '\u6240\u5c5e\u516c\u53f8', content: '\u6df1\u5733\u5e02\u817e\u8baf\u8ba1\u7b97\u673a\u7cfb\u7edf\u6709\u9650\u516c\u53f8', block: true },\n { label: '\u6240\u5728\u90e8\u95e8', content: '\u6280\u672f\u90e8', display: !showDisabled },\n { label: '\u804c\u4f4d', content: '\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08', display: !showDisabled },\n { label: '\u6ce8\u518c\u65f6\u95f4', content: '2020-03-15' },\n { label: '\u6700\u540e\u767b\u5f55', content: '2024-01-15 10:30:00' },\n { label: '\u8d26\u6237\u72b6\u6001', content: <Tag color=\"success\">\u6b63\u5e38</Tag> },\n { label: '\u5907\u6ce8\u4fe1\u606f', content: '\u8be5\u5ba2\u6237\u4e3a\u516c\u53f8\u957f\u671f\u5408\u4f5c\u4f19\u4f34\uff0c\u5408\u4f5c\u671f\u95f4\u8868\u73b0\u4f18\u79c0\uff0c\u5efa\u8bae\u7ee7\u7eed\u4fdd\u6301\u826f\u597d\u5408\u4f5c\u5173\u7cfb\u3002', block: true }\n ];\n\n return (\n <Flex vertical gap={16}>\n {/* \u63a7\u5236\u9762\u677f */}\n <Space direction=\"vertical\" size={12} style={{ background: '#f5f5f5', padding: '16px', borderRadius: '8px' }}>\n <div>\n <span style={{ marginRight: 8 }}>\u5217\u6570\uff1a</span>\n <Radio.Group onChange={(e) => onChange(e, 'col')} value={listProps.col}>\n <Radio.Button value={1}>\u5355\u5217</Radio.Button>\n <Radio.Button value={2}>\u4e24\u5217</Radio.Button>\n <Radio.Button value={3}>\u4e09\u5217</Radio.Button>\n <Radio.Button value={4}>\u56db\u5217</Radio.Button>\n </Radio.Group>\n </div>\n\n <div>\n <span style={{ marginRight: 8 }}>\u6807\u7b7e\u5bf9\u9f50\uff1a</span>\n <Radio.Group onChange={(e) => onChange(e, 'labelAlign')} value={listProps.labelAlign}>\n <Radio.Button value='left'>\u5de6\u5bf9\u9f50</Radio.Button>\n <Radio.Button value='center'>\u5c45\u4e2d</Radio.Button>\n <Radio.Button value='right'>\u53f3\u5bf9\u9f50</Radio.Button>\n <Radio.Button value='auto'>\u81ea\u9002\u5e94</Radio.Button>\n </Radio.Group>\n </div>\n\n <div>\n <span style={{ marginRight: 8 }}>\u5c3a\u5bf8\uff1a</span>\n <Radio.Group onChange={(e) => onChange(e, 'size')} value={listProps.size}>\n <Radio.Button value='default'>\u9ed8\u8ba4</Radio.Button>\n <Radio.Button value='small'>\u5c0f\u5c3a\u5bf8</Radio.Button>\n </Radio.Group>\n </div>\n\n <div>\n <span style={{ marginRight: 8 }}>\u663e\u793a\u9690\u85cf\uff1a</span>\n <Radio.Group onChange={(e) => setShowDisabled(e.target.value)} value={showDisabled}>\n <Radio.Button value={false}>\u663e\u793a\u5168\u90e8</Radio.Button>\n <Radio.Button value={true}>\u9690\u85cf\u90e8\u5206</Radio.Button>\n </Radio.Group>\n </div>\n </Space>\n\n {/* Content \u7ec4\u4ef6\u5c55\u793a */}\n <Content\n {...listProps}\n list={dataList.map(item => ({\n ...item,\n display: typeof item.display === 'boolean' ? item.display : undefined\n }))}\n />\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/current-lib_info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u63cf\u8ff0\u5217\u8868",description:"\u4e8c\u7ef4\u6570\u7ec4\u7ed3\u6784\u7684\u8be6\u60c5\u4fe1\u606f\u5c55\u793a\uff0c\u9002\u5408\u8868\u5355\u6570\u636e\u5c55\u793a",code:'const { Descriptions } = _InfoPage;\nconst { Tag, Space } = antd;\n\nconst BaseExample = () => {\n return (\n <Descriptions\n dataSource={[\n // \u57fa\u672c\u4fe1\u606f\u5206\u7ec4\n [\n { label: "\u8ba2\u5355\u7f16\u53f7", content: <strong style={{ color: \'#1890ff\' }}>ORD20240115001</strong> },\n { label: "\u8ba2\u5355\u7c7b\u578b", content: <Tag color="blue">\u666e\u901a\u8ba2\u5355</Tag> },\n ],\n [\n { label: "\u4e0b\u5355\u65f6\u95f4", content: "2024-01-15 10:30:25" },\n { label: "\u652f\u4ed8\u65f6\u95f4", content: "2024-01-15 10:32:18" },\n ],\n [\n { label: "\u5ba2\u6237\u540d\u79f0", content: "\u6df1\u5733\u5e02\u817e\u8baf\u8ba1\u7b97\u673a\u7cfb\u7edf\u6709\u9650\u516c\u53f8" },\n { label: "\u5ba2\u6237\u7c7b\u578b", content: <Tag color="gold">VIP\u5ba2\u6237</Tag> },\n ],\n // \u6536\u8d27\u4fe1\u606f\u5206\u7ec4\n [\n { label: "\u6536\u8d27\u4eba", content: "\u5f20\u4e09" },\n { label: "\u8054\u7cfb\u7535\u8bdd", content: "138-0013-8000" },\n ],\n [\n { label: "\u6536\u8d27\u5730\u5740", content: "\u5e7f\u4e1c\u7701\u6df1\u5733\u5e02\u5357\u5c71\u533a\u79d1\u6280\u56ed\u79d1\u6280\u4e2d\u4e00\u8def\u817e\u8baf\u5927\u53a6A\u5ea718\u5c42" },\n ],\n // \u5546\u54c1\u4fe1\u606f\u5206\u7ec4\n [\n {\n label: "\u5546\u54c1\u6e05\u5355",\n content: (\n <Space direction="vertical" size={4}>\n <div>1. \u817e\u8baf\u4e91\u670d\u52a1\u5668\uff082\u68384G\uff09\xd7 1\u53f0 - \xa53000.00</div>\n <div>2. \u4e91\u6570\u636e\u5e93 MySQL\uff0850GB\uff09\xd7 1\u4e2a - \xa51200.00</div>\n <div>3. \u5bf9\u8c61\u5b58\u50a8\uff08500GB\uff09\xd7 1\u4e2a - \xa5800.00</div>\n </Space>\n ),\n },\n ],\n // \u91d1\u989d\u4fe1\u606f\u5206\u7ec4\n [\n { label: "\u5546\u54c1\u603b\u989d", content: <strong>\xa55,000.00</strong> },\n { label: "\u8fd0\u8d39", content: "\xa50.00" },\n ],\n [\n { label: "\u4f18\u60e0\u91d1\u989d", content: <span style={{ color: \'#52c41a\' }}>-\xa5750.00</span> },\n { label: "\u5b9e\u4ed8\u91d1\u989d", content: <strong style={{ color: \'#f5222d\', fontSize: \'16px\' }}>\xa54,250.00</strong> },\n ],\n // \u53d1\u7968\u4fe1\u606f\u5206\u7ec4\n [\n { label: "\u53d1\u7968\u7c7b\u578b", content: "\u589e\u503c\u7a0e\u4e13\u7528\u53d1\u7968" },\n { label: "\u53d1\u7968\u62ac\u5934", content: "\u6df1\u5733\u5e02\u817e\u8baf\u8ba1\u7b97\u673a\u7cfb\u7edf\u6709\u9650\u516c\u53f8" },\n ],\n [\n { label: "\u7eb3\u7a0e\u4eba\u8bc6\u522b\u53f7", content: "914403007109410773" },\n { label: "\u53d1\u7968\u72b6\u6001", content: <Tag color="success">\u5df2\u5f00\u5177</Tag> },\n ],\n // \u552e\u540e\u4fe1\u606f\u5206\u7ec4\n [\n { label: "\u9000\u6b3e\u72b6\u6001", content: "\u65e0\u9000\u6b3e" },\n { label: "\u53d1\u7968\u62ac\u5934", content: "\u672a\u7533\u8bf7" },\n ],\n [\n { label: "\u8ba2\u5355\u72b6\u6001", content: <Tag color="processing">\u5904\u7406\u4e2d</Tag> },\n {\n label: "\u9884\u8ba1\u9001\u8fbe",\n content: "2024-01-17",\n },\n ],\n // \u5907\u6ce8\u4fe1\u606f\n [\n {\n label: "\u8ba2\u5355\u5907\u6ce8",\n content: "\u8bf7\u52a1\u5fc5\u5728\u5de5\u4f5c\u65e5\u914d\u9001\uff0c\u914d\u9001\u524d\u8bf7\u63d0\u524d\u7535\u8bdd\u8054\u7cfb\u6536\u8d27\u4eba\u3002\u6536\u5230\u5546\u54c1\u540e\u8bf7\u5f53\u9762\u9a8c\u8d27\uff0c\u786e\u8ba4\u65e0\u8bef\u540e\u518d\u7b7e\u6536\u3002",\n block: true\n },\n ],\n // \u64cd\u4f5c\u8bb0\u5f55\n [\n { label: "\u521b\u5efa\u65f6\u95f4", content: "2024-01-15 10:30:25" },\n { label: "\u521b\u5efa\u4eba", content: "\u5f20\u4e09\uff08\u5ba2\u6237\uff09" },\n ],\n ]}\n />\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_InfoPage",packageName:"@kne/current-lib_info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u667a\u80fd\u5e03\u5c40",description:"\u652f\u6301\u6570\u636e\u683c\u5f0f\u5316\u548c\u81ea\u52a8\u6805\u683c\u4f18\u5316\u7684\u9ad8\u7ea7\u5185\u5bb9\u5c55\u793a\u7ec4\u4ef6",code:"const { CentralContent } = _InfoPage;\nconst { Tag, Space } = antd;\n\nconst BaseExample = () => {\n return (\n <CentralContent\n dataSource={{\n id: 'RC20240115001',\n name: '\u5f20\u4e09',\n department: '\u6280\u672f\u7814\u53d1\u90e8',\n position: '\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08',\n email: 'zhangsan@tencent.com',\n phone: '138-0013-8000',\n entryDate: '2020-03-15',\n workYears: 4,\n performanceScore: 92.5,\n salary: 35000,\n bonus: 50000,\n leaveDays: 5,\n projectCount: 8,\n description: `\u8d1f\u8d23\u516c\u53f8\u6838\u5fc3\u4ea7\u54c1\u7684\u524d\u7aef\u67b6\u6784\u8bbe\u8ba1\u4e0e\u5f00\u53d1\u5de5\u4f5c\uff0c\u4e3b\u5bfc\u4e86\u591a\u4e2a\u91cd\u8981\u9879\u76ee\u7684\u6280\u672f\u65b9\u6848\u8bbe\u8ba1\u3002\u7cbe\u901aReact\u3001Vue\u7b49\u4e3b\u6d41\u524d\u7aef\u6846\u67b6\uff0c\u5bf9TypeScript\u6709\u6df1\u5165\u7406\u89e3\u3002\u5728\u6027\u80fd\u4f18\u5316\u65b9\u9762\u6709\u4e30\u5bcc\u7ecf\u9a8c\uff0c\u6210\u529f\u5c06\u9879\u76ee\u52a0\u8f7d\u65f6\u95f4\u51cf\u5c1140%\u3002`,\n skills: `React, Vue, TypeScript, Node.js, Webpack, Vite, Jenkins, Docker, Kubernetes`\n }}\n col={3}\n columns={[\n { name: 'id', title: '\u5458\u5de5\u7f16\u53f7', block: true },\n { name: 'name', title: '\u59d3\u540d', span: 8 },\n { name: 'department', title: '\u90e8\u95e8' },\n { name: 'position', title: '\u804c\u4f4d', span: 10 },\n { name: 'email', title: '\u7535\u5b50\u90ae\u7bb1' },\n { name: 'phone', title: '\u8054\u7cfb\u7535\u8bdd' },\n { name: 'entryDate', title: '\u5165\u804c\u65e5\u671f', format: 'date' },\n { name: 'workYears', title: '\u5de5\u4f5c\u5e74\u9650', format: 'number-suffix:\u5e74' },\n { name: 'performanceScore', title: '\u7ee9\u6548\u8bc4\u5206', format: 'number-maximumFractionDigits:1-suffix:\u5206' },\n { name: 'salary', title: '\u6708\u85aa', format: 'number-useGrouping:true-suffix:\u5143' },\n { name: 'bonus', title: '\u5e74\u7ec8\u5956\u91d1', format: 'number-useGrouping:true-suffix:\u5143' },\n { name: 'leaveDays', title: '\u5e74\u5ea6\u5269\u4f59\u5e74\u5047', format: 'number-suffix:\u5929' },\n { name: 'projectCount', title: '\u53c2\u4e0e\u9879\u76ee\u6570', format: 'number-suffix:\u4e2a' },\n { name: 'empty', title: '\u516c\u79ef\u91d1\u8d26\u53f7' },\n { name: 'empty2', title: '\u793e\u4fdd\u5361\u53f7', placeholder: '\u672a\u529e\u7406' },\n { name: 'description', title: '\u5de5\u4f5c\u63cf\u8ff0', block: true },\n { name: 'skills', title: '\u6280\u80fd\u6807\u7b7e', render: (value) => (\n <Space wrap>\n {value.split(',').map(skill => (\n <Tag key={skill} color=\"blue\" style={{ marginBottom: 4 }}>{skill.trim()}</Tag>\n ))}\n </Space>\n )}\n ]}\n />\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/current-lib_info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u8fb9\u6846\u533a\u5757",description:"\u5c55\u793aInfoPage.Part\u7684bordered\u5c5e\u6027\u914d\u5408CentralContent\u4f7f\u7528",code:"const { default: InfoPage, CentralContent } = _InfoPage;\nconst { Tag, Avatar, Space, Modal, Button } = antd;\nconst { useState } = React;\n\nconst BaseExample = () => {\n const [open, setOpen] = useState(false);\n const baseInfo = (\n <InfoPage.Part bordered title=\"\u5458\u5de5\u6863\u6848\" subtitle=\"\u57fa\u672c\u4fe1\u606f\">\n <CentralContent\n type=\"compact\"\n dataSource={{\n id: 'RC20240115001',\n name: '\u5f20\u4e09',\n gender: '\u7537',\n birthday: '1992-03-15',\n idCard: '440301199203154512',\n maritalStatus: '\u5df2\u5a5a',\n education: '\u672c\u79d1',\n graduationSchool: '\u6df1\u5733\u5927\u5b66',\n major: '\u8ba1\u7b97\u673a\u79d1\u5b66\u4e0e\u6280\u672f',\n entryDate: '2020-03-15',\n workYears: 4,\n phone: '138-0013-8000',\n email: 'zhangsan@tencent.com',\n address: '\u5e7f\u4e1c\u7701\u6df1\u5733\u5e02\u5357\u5c71\u533a\u79d1\u6280\u56ed\u79d1\u6280\u4e2d\u4e00\u8def\u817e\u8baf\u5927\u53a6',\n emergencyContact: '\u674e\u56db',\n emergencyPhone: '139-0014-9000',\n emergencyRelation: '\u914d\u5076'\n }}\n col={3}\n columns={[\n {\n name: 'id',\n title: '\u5458\u5de5\u7f16\u53f7',\n block: true\n },\n {\n name: 'name',\n title: '\u59d3\u540d',\n render: value => (\n <Space align=\"center\">\n <Avatar style={{ backgroundColor: '#1890ff' }}>{value[0]}</Avatar>\n <strong>{value}</strong>\n </Space>\n ),\n span: 10\n },\n {\n name: 'gender',\n title: '\u6027\u522b'\n },\n {\n name: 'birthday',\n title: '\u51fa\u751f\u65e5\u671f',\n format: 'date'\n },\n {\n name: 'idCard',\n title: '\u8eab\u4efd\u8bc1\u53f7',\n render: value => value.replace(/(d{6})(d{8})(d{4})/, '$1********$3')\n },\n {\n name: 'maritalStatus',\n title: '\u5a5a\u59fb\u72b6\u51b5'\n },\n {\n name: 'education',\n title: '\u5b66\u5386'\n },\n {\n name: 'graduationSchool',\n title: '\u6bd5\u4e1a\u9662\u6821'\n },\n {\n name: 'major',\n title: '\u4e13\u4e1a'\n },\n {\n name: 'entryDate',\n title: '\u5165\u804c\u65e5\u671f',\n format: 'date'\n },\n {\n name: 'workYears',\n title: '\u5de5\u4f5c\u5e74\u9650',\n format: 'number-suffix:\u5e74'\n },\n {\n name: 'phone',\n title: '\u8054\u7cfb\u7535\u8bdd',\n render: value => value.replace(/(d{3})(d{4})(d{4})/, '$1-$2-$3')\n },\n {\n name: 'email',\n title: '\u7535\u5b50\u90ae\u7bb1'\n },\n {\n name: 'address',\n title: '\u5bb6\u5ead\u4f4f\u5740',\n block: true\n },\n {\n name: 'emergencyContact',\n title: '\u7d27\u6025\u8054\u7cfb\u4eba'\n },\n {\n name: 'emergencyPhone',\n title: '\u7d27\u6025\u8054\u7cfb\u7535\u8bdd',\n render: value => value.replace(/(d{3})(d{4})(d{4})/, '$1-$2-$3')\n },\n {\n name: 'emergencyRelation',\n title: '\u4e0e\u672c\u4eba\u5173\u7cfb'\n }\n ]}\n />\n </InfoPage.Part>\n );\n return (\n <InfoPage>\n {baseInfo}\n <InfoPage.Part bordered title=\"\u5de5\u4f5c\u4fe1\u606f\" subtitle=\"\u90e8\u95e8\u4e0e\u804c\u4f4d\">\n <CentralContent\n type=\"compact\"\n dataSource={{\n department: '\u6280\u672f\u7814\u53d1\u90e8',\n position: '\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08',\n level: 'T4-2',\n supervisor: '\u738b\u603b\u76d1',\n team: '\u524d\u7aef\u5f00\u53d1\u7ec4',\n workLocation: '\u6df1\u5733\u603b\u90e8',\n office: '\u817e\u8baf\u5927\u53a6A\u5ea718\u5c42',\n workStatus: '\u5728\u804c',\n contractType: '\u6b63\u5f0f\u5458\u5de5',\n contractStartDate: '2023-03-15',\n contractEndDate: '2026-03-14',\n probationPeriod: '\u5df2\u8f6c\u6b63'\n }}\n col={2}\n columns={[\n { name: 'department', title: '\u6240\u5c5e\u90e8\u95e8', span: 12 },\n { name: 'position', title: '\u804c\u4f4d', span: 12 },\n { name: 'level', title: '\u804c\u7ea7' },\n { name: 'supervisor', title: '\u76f4\u5c5e\u4e3b\u7ba1' },\n { name: 'team', title: '\u6240\u5c5e\u56e2\u961f' },\n { name: 'workLocation', title: '\u5de5\u4f5c\u5730\u70b9' },\n { name: 'office', title: '\u529e\u516c\u5ba4\u4f4d\u7f6e' },\n { name: 'workStatus', title: '\u5de5\u4f5c\u72b6\u6001', render: value => <Tag color=\"success\">{value}</Tag> },\n { name: 'contractType', title: '\u5408\u540c\u7c7b\u578b' },\n { name: 'contractStartDate', title: '\u5408\u540c\u5f00\u59cb\u65e5\u671f', format: 'date' },\n { name: 'contractEndDate', title: '\u5408\u540c\u7ed3\u675f\u65e5\u671f', format: 'date' },\n { name: 'probationPeriod', title: '\u8bd5\u7528\u671f\u72b6\u6001', render: value => <Tag color=\"success\">{value}</Tag> }\n ]}\n />\n </InfoPage.Part>\n\n <InfoPage.Part bordered title=\"\u798f\u5229\u5f85\u9047\" subtitle=\"\u85aa\u8d44\u4e0e\u798f\u5229\">\n <CentralContent\n type=\"compact\"\n dataSource={{\n baseSalary: 30000,\n performanceBonus: 5000,\n annualBonus: 50000,\n socialInsurance: '\u5df2\u7f34\u7eb3\uff08\u4e94\u9669\u4e00\u91d1\uff09',\n housingFund: 3600,\n medicalInsurance: '\u5df2\u5305\u542b',\n mealAllowance: 1500,\n transportAllowance: 800,\n stockOptions: 5000,\n otherBenefits: '\u5e74\u5ea6\u4f53\u68c0\u3001\u8282\u65e5\u793c\u54c1\u3001\u56e2\u5efa\u6d3b\u52a8'\n }}\n col={2}\n columns={[\n { name: 'baseSalary', title: '\u57fa\u672c\u6708\u85aa', format: 'number-useGrouping:true-suffix:\u5143', span: 12 },\n { name: 'performanceBonus', title: '\u7ee9\u6548\u5956\u91d1', format: 'number-useGrouping:true-suffix:\u5143/\u6708', span: 12 },\n { name: 'annualBonus', title: '\u5e74\u7ec8\u5956\u91d1', format: 'number-useGrouping:true-suffix:\u5143', block: true },\n { name: 'socialInsurance', title: '\u793e\u4f1a\u4fdd\u9669', render: value => <Tag color=\"success\">{value}</Tag> },\n { name: 'housingFund', title: '\u516c\u79ef\u91d1', format: 'number-useGrouping:true-suffix:\u5143/\u6708' },\n { name: 'medicalInsurance', title: '\u533b\u7597\u4fdd\u9669', render: value => <Tag color=\"success\">{value}</Tag> },\n { name: 'mealAllowance', title: '\u9910\u8865', format: 'number-useGrouping:true-suffix:\u5143/\u6708' },\n { name: 'transportAllowance', title: '\u4ea4\u901a\u8865\u8d34', format: 'number-useGrouping:true-suffix:\u5143/\u6708' },\n { name: 'stockOptions', title: '\u80a1\u7968\u671f\u6743', format: 'number-useGrouping:true-suffix:\u80a1', block: true },\n { name: 'otherBenefits', title: '\u5176\u4ed6\u798f\u5229', block: true }\n ]}\n />\n </InfoPage.Part>\n\n <InfoPage.Part bordered title=\"\u653e\u5728Modal\u4e2d\">\n <Button\n onClick={() => {\n setOpen(true);\n }}>\n \u6253\u5f00Modal\n </Button>\n <Modal title=\"\u5458\u5de5\u6863\u6848\" open={open} onCancel={()=>setOpen(false)}>{baseInfo}</Modal>\n </InfoPage.Part>\n </InfoPage>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/current-lib_info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u8868\u683c\u89c6\u56fe",description:"\u652f\u6301\u884c\u9009\u62e9\u3001\u56fa\u5b9a\u8868\u5934\u548c\u591a\u6570\u636e\u5c55\u793a\u7684\u8868\u683c\u7ec4\u4ef6",code:"const { TableView } = _InfoPage;\nconst { Flex, Tag, Badge } = antd;\nconst { useState } = React;\n\nconst dataSource = [\n {\n id: 'ORD20240115001',\n customerName: '\u6df1\u5733\u5e02\u817e\u8baf\u8ba1\u7b97\u673a\u7cfb\u7edf\u6709\u9650\u516c\u53f8',\n contact: '\u5f20\u4e09',\n phone: '138-0013-8000',\n amount: 42500,\n status: '\u5df2\u5b8c\u6210',\n orderDate: '2024-01-15',\n deliveryDate: '2024-01-17'\n },\n {\n id: 'ORD20240115002',\n customerName: '\u534e\u4e3a\u6280\u672f\u6709\u9650\u516c\u53f8',\n contact: '\u674e\u56db',\n phone: '139-0014-9000',\n amount: 85000,\n status: '\u5904\u7406\u4e2d',\n orderDate: '2024-01-15',\n deliveryDate: '2024-01-20'\n },\n {\n id: 'ORD20240115003',\n customerName: '\u963f\u91cc\u5df4\u5df4\u96c6\u56e2\u63a7\u80a1\u6709\u9650\u516c\u53f8',\n contact: '\u738b\u4e94',\n phone: '137-0015-7000',\n amount: 120000,\n status: '\u5f85\u53d1\u8d27',\n orderDate: '2024-01-14',\n deliveryDate: '2024-01-22'\n },\n {\n id: 'ORD20240115004',\n customerName: '\u5317\u4eac\u5b57\u8282\u8df3\u52a8\u79d1\u6280\u6709\u9650\u516c\u53f8',\n contact: '\u8d75\u516d',\n phone: '136-0016-6000',\n amount: 65000,\n status: '\u5df2\u5b8c\u6210',\n orderDate: '2024-01-13',\n deliveryDate: '2024-01-16'\n },\n {\n id: 'ORD20240115005',\n customerName: '\u767e\u5ea6\u5728\u7ebf\u7f51\u7edc\u6280\u672f\uff08\u5317\u4eac\uff09\u6709\u9650\u516c\u53f8',\n contact: '\u94b1\u4e03',\n phone: '135-0017-5000',\n amount: 95000,\n status: '\u5df2\u53d6\u6d88',\n orderDate: '2024-01-12',\n deliveryDate: ''\n }\n];\n\nconst columns = [\n { name: 'id', title: '\u8ba2\u5355\u7f16\u53f7' },\n { name: 'customerName', title: '\u5ba2\u6237\u540d\u79f0', span: 10 },\n { name: 'contact', title: '\u8054\u7cfb\u4eba' },\n { name: 'phone', title: '\u8054\u7cfb\u7535\u8bdd', render: (value) => value.replace(/(d{3})(d{4})(d{4})/, '$1-$2-$3') },\n { name: 'amount', title: '\u8ba2\u5355\u91d1\u989d(\u5143)', render: (value) => <strong style={{ color: '#f5222d' }}>\xa5{value.toLocaleString()}</strong> },\n { name: 'orderDate', title: '\u4e0b\u5355\u65e5\u671f', format: 'date' },\n { name: 'deliveryDate', title: '\u9884\u8ba1\u9001\u8fbe', format: 'date' },\n { name: 'status', title: '\u8ba2\u5355\u72b6\u6001', render: (value) => {\n const config = {\n '\u5df2\u5b8c\u6210': { color: 'success', text: '\u5df2\u5b8c\u6210' },\n '\u5904\u7406\u4e2d': { color: 'processing', text: '\u5904\u7406\u4e2d' },\n '\u5f85\u53d1\u8d27': { color: 'warning', text: '\u5f85\u53d1\u8d27' },\n '\u5df2\u53d6\u6d88': { color: 'default', text: '\u5df2\u53d6\u6d88' }\n };\n const { color, text } = config[value] || { color: 'default', text: value };\n return <Badge status={color} text={text} />;\n }}\n];\n\nconst WithCheckbox = () => {\n const [selectKeys, setSelectKeys] = useState([]);\n const totalAmount = selectKeys.reduce((sum, id) => sum + (dataSource.find(d => d.id === id)?.amount || 0), 0);\n return (\n <div>\n <Flex justify=\"space-between\" align=\"center\" style={{ marginBottom: 12 }}>\n <span>\u5df2\u9009 <strong>{selectKeys.length}</strong> \u4e2a\u8ba2\u5355\uff0c\u603b\u91d1\u989d <strong style={{ color: '#52c41a' }}>\xa5{totalAmount.toLocaleString()}</strong></span>\n </Flex>\n <TableView dataSource={dataSource} columns={columns} rowSelection={{\n type: 'checkbox', allowSelectedAll: true, selectedRowKeys: selectKeys, onChange: setSelectKeys\n }} />\n </div>\n );\n};\n\nconst WithSelected = () => {\n const [selectKeys, setSelectKeys] = useState([]);\n const selectedOrder = dataSource.find(d => d.id === selectKeys[0]);\n return (\n <div>\n <Flex justify=\"space-between\" align=\"center\" style={{ marginBottom: 12 }}>\n <span>\u5df2\u9009\u8ba2\u5355\uff1a{selectedOrder ? `${selectedOrder.id} (${selectedOrder.customerName})` : '\u65e0'}</span>\n {selectedOrder && <Tag color=\"blue\">\xa5{selectedOrder.amount.toLocaleString()}</Tag>}\n </Flex>\n <TableView dataSource={dataSource} columns={columns} rowSelection={{\n type: 'radio', selectedRowKeys: selectKeys, onChange: setSelectKeys\n }} />\n </div>\n );\n};\n\nconst BaseExample = () => {\n return (\n <Flex vertical gap={16}>\n <div style={{ background: '#f5f5f5', padding: '12px', borderRadius: '8px' }}>\n \u8ba2\u5355\u5217\u8868 - \u5171 <strong>{dataSource.length}</strong> \u4e2a\u8ba2\u5355\n </div>\n <TableView dataSource={dataSource} columns={columns} />\n <WithCheckbox />\n <WithSelected />\n <div style={{ padding: '16px', background: '#fafafa', border: '1px dashed #d9d9d9', borderRadius: '8px' }}>\n \u6682\u65e0\u8ba2\u5355\u6570\u636e\n </div>\n <TableView\n style={{ height: '250px', overflowY: 'scroll' }}\n dataSource={dataSource}\n columns={columns}\n sticky\n headerStyle={{ position: 'sticky', top: 0, zIndex: 1, background: '#fafafa' }}\n />\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/current-lib_info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u8868\u683c\u9009\u62e9",description:"\u5c55\u793aTableView\u7ec4\u4ef6\u7684\u5404\u79cd\u9009\u62e9\u6a21\u5f0f",code:"const { TableView } = _InfoPage;\nconst { Flex, Radio, Space, Button, Tag, Avatar } = antd;\nconst { useState } = React;\n\nconst dataSource = [\n { id: 'C20240115001', name: '\u5f20\u4e09', company: '\u817e\u8baf\u79d1\u6280', contact: '138-0013-8000', amount: 50000, status: '\u5df2\u7b7e\u7ea6' },\n { id: 'C20240115002', name: '\u674e\u56db', company: '\u534e\u4e3a\u6280\u672f', contact: '139-0014-9000', amount: 85000, status: '\u8ddf\u8fdb\u4e2d' },\n { id: 'C20240115003', name: '\u738b\u4e94', company: '\u963f\u91cc\u5df4\u5df4', contact: '137-0015-7000', amount: 120000, status: '\u5df2\u7b7e\u7ea6' },\n { id: 'C20240115004', name: '\u8d75\u516d', company: '\u5b57\u8282\u8df3\u52a8', contact: '136-0016-6000', amount: 65000, status: '\u5f85\u8ddf\u8fdb' },\n { id: 'C20240115005', name: '\u94b1\u4e03', company: '\u767e\u5ea6\u5728\u7ebf', contact: '135-0017-5000', amount: 95000, status: '\u5df2\u7b7e\u7ea6' }\n];\n\nconst columns = [\n { name: 'id', title: '\u5ba2\u6237\u7f16\u53f7' },\n { name: 'name', title: '\u8054\u7cfb\u4eba' },\n { name: 'company', title: '\u6240\u5c5e\u516c\u53f8' },\n { name: 'contact', title: '\u8054\u7cfb\u7535\u8bdd' },\n { name: 'amount', title: '\u7b7e\u7ea6\u91d1\u989d(\u5143)' },\n { name: 'status', title: '\u72b6\u6001' }\n];\n\nconst BaseExample = () => {\n const [selectionType, setSelectionType] = useState('none');\n const [selectedRowKeys, setSelectedRowKeys] = useState([]);\n\n // \u590d\u9009\u6846\u9009\u62e9\u793a\u4f8b\n const CheckboxExample = () => {\n const [keys, setKeys] = useState([]);\n const totalAmount = keys.reduce((sum, id) => sum + (dataSource.find(d => d.id === id)?.amount || 0), 0);\n return (\n <div>\n <Flex justify=\"space-between\" align=\"center\" style={{ marginBottom: 12 }}>\n <span>\u5df2\u9009 <strong style={{ color: '#1890ff' }}>{keys.length}</strong> \u4f4d\u5ba2\u6237\uff0c\u603b\u91d1\u989d <strong style={{ color: '#52c41a' }}>\xa5{totalAmount.toLocaleString()}</strong></span>\n <Space>\n <Button size=\"small\" onClick={() => setKeys(dataSource.filter(d => d.status === '\u5df2\u7b7e\u7ea6').map(d => d.id))}>\n \u9009\u5df2\u7b7e\u7ea6\n </Button>\n <Button size=\"small\" onClick={() => setKeys([])}>\u6e05\u7a7a</Button>\n </Space>\n </Flex>\n <TableView\n dataSource={dataSource}\n columns={columns}\n rowSelection={{\n type: 'checkbox',\n selectedRowKeys: keys,\n onChange: setKeys\n }}\n />\n </div>\n );\n };\n\n // \u5168\u9009\u72b6\u6001\u793a\u4f8b\n const SelectAllExample = () => {\n const [keys, setKeys] = useState([]);\n const [isSelectedAll, setIsSelectedAll] = useState(false);\n\n const handleSelectAll = () => {\n if (isSelectedAll) {\n setKeys([]);\n } else {\n setKeys(dataSource.map(d => d.id));\n }\n setIsSelectedAll(!isSelectedAll);\n };\n\n return (\n <div>\n <Flex justify=\"space-between\" align=\"center\" style={{ marginBottom: 12 }}>\n <span>{isSelectedAll ? <Tag color=\"green\">\u5df2\u5168\u9009\u6240\u6709\u5ba2\u6237</Tag> : <Tag>\u672a\u5168\u9009</Tag>}</span>\n <Button size=\"small\" onClick={handleSelectAll}>\n {isSelectedAll ? '\u53d6\u6d88\u5168\u9009' : '\u5168\u9009\u5ba2\u6237'}\n </Button>\n </Flex>\n <TableView\n dataSource={dataSource}\n columns={columns}\n rowSelection={{\n type: 'checkbox',\n isSelectedAll,\n allowSelectedAll: true,\n selectedRowKeys: keys,\n onChange: (keys) => {\n setKeys(keys);\n setIsSelectedAll(keys.length === dataSource.length);\n }\n }}\n />\n </div>\n );\n };\n\n // \u5355\u9009\u6846\u793a\u4f8b\n const RadioExample = () => {\n const [key, setKey] = useState(null);\n const selectedCustomer = dataSource.find(d => d.id === key);\n return (\n <div>\n <Flex justify=\"space-between\" align=\"center\" style={{ marginBottom: 12 }}>\n <span>\u5df2\u9009\u5ba2\u6237\uff1a{selectedCustomer ? `${selectedCustomer.name} (${selectedCustomer.company})` : '\u65e0'}</span>\n <Tag color={selectedCustomer ? 'blue' : 'default'}>{selectedCustomer ? `\xa5${selectedCustomer.amount.toLocaleString()}` : '-'}</Tag>\n </Flex>\n <TableView\n dataSource={dataSource}\n columns={columns}\n rowSelection={{\n type: 'radio',\n selectedRowKeys: key ? [key] : [],\n onChange: (keys) => setKey(keys.length > 0 ? keys[0] : null)\n }}\n />\n </div>\n );\n };\n\n // \u65e0\u9009\u62e9\u6a21\u5f0f\n const NoSelectionExample = () => (\n <div>\n <div style={{ marginBottom: 12 }}>\u5ba2\u6237\u5217\u8868 - \u5171 {dataSource.length} \u4f4d</div>\n <TableView dataSource={dataSource} columns={columns} />\n </div>\n );\n\n // \u81ea\u5b9a\u4e49\u6e32\u67d3\u793a\u4f8b\n const CustomRenderExample = () => {\n const [keys, setKeys] = useState([]);\n return (\n <div>\n <div style={{ marginBottom: 12 }}>\u81ea\u5b9a\u4e49\u6e32\u67d3\u5ba2\u6237\u5217\u8868</div>\n <TableView\n dataSource={dataSource}\n columns={[\n { name: 'id', title: '\u5ba2\u6237\u7f16\u53f7' },\n { name: 'name', title: '\u8054\u7cfb\u4eba', render: (value) => <Flex align=\"center\" gap={8}><Avatar size=\"small\">{value[0]}</Avatar>{value}</Flex> },\n { name: 'company', title: '\u6240\u5c5e\u516c\u53f8' },\n { name: 'contact', title: '\u8054\u7cfb\u7535\u8bdd' },\n { name: 'amount', title: '\u7b7e\u7ea6\u91d1\u989d', render: (value) => <strong style={{ color: '#52c41a' }}>\xa5{value.toLocaleString()}</strong> },\n { name: 'status', title: '\u72b6\u6001', render: (value) => {\n const config = {\n '\u5df2\u7b7e\u7ea6': { color: 'success', text: '\u5df2\u7b7e\u7ea6' },\n '\u8ddf\u8fdb\u4e2d': { color: 'processing', text: '\u8ddf\u8fdb\u4e2d' },\n '\u5f85\u8ddf\u8fdb': { color: 'warning', text: '\u5f85\u8ddf\u8fdb' }\n };\n const { color, text } = config[value] || { color: 'default', text: value };\n return <Tag color={color}>{text}</Tag>;\n }}\n ]}\n rowSelection={{\n type: 'checkbox',\n selectedRowKeys: keys,\n onChange: setKeys\n }}\n />\n </div>\n );\n };\n\n const renderExample = () => {\n switch (selectionType) {\n case 'checkbox':\n return <CheckboxExample />;\n case 'selectAll':\n return <SelectAllExample />;\n case 'radio':\n return <RadioExample />;\n case 'custom':\n return <CustomRenderExample />;\n default:\n return <NoSelectionExample />;\n }\n };\n\n return (\n <Flex vertical gap={16}>\n {/* \u63a7\u5236\u9762\u677f */}\n <div style={{ background: '#f5f5f5', padding: '16px', borderRadius: '8px' }}>\n <span style={{ marginRight: 12 }}>\u9009\u62e9\u6a21\u5f0f\uff1a</span>\n <Radio.Group value={selectionType} onChange={(e) => setSelectionType(e.target.value)}>\n <Radio.Button value=\"none\">\u65e0\u9009\u62e9</Radio.Button>\n <Radio.Button value=\"checkbox\">\u590d\u9009\u6846</Radio.Button>\n <Radio.Button value=\"selectAll\">\u5168\u9009\u72b6\u6001</Radio.Button>\n <Radio.Button value=\"radio\">\u5355\u9009\u6846</Radio.Button>\n <Radio.Button value=\"custom\">\u81ea\u5b9a\u4e49\u6e32\u67d3</Radio.Button>\n </Radio.Group>\n </div>\n\n {/* \u793a\u4f8b\u5c55\u793a\u533a */}\n {renderExample()}\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/current-lib_info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u5206\u5272\u7ebf\u5c55\u793a",description:"\u652f\u6301\u56fe\u6807\u548c\u5782\u76f4/\u6a2a\u5411\u5e03\u5c40\u7684\u7d27\u51d1\u4fe1\u606f\u5c55\u793a",code:"const { SplitLine } = _InfoPage;\nconst { Flex, Tag, Avatar } = antd;\nconst { MobileOutlined, CompassOutlined, MailOutlined, TeamOutlined, CalendarOutlined, EnvironmentOutlined } = antdIcons;\n\nconst BaseExample = () => {\n return (\n <Flex vertical gap={20}>\n {/* \u4e2a\u4eba\u4fe1\u606f\u5c55\u793a - \u6c34\u5e73\u5e03\u5c40 */}\n <div>\n <h4 style={{ marginBottom: 12, color: '#333' }}>\u5458\u5de5\u5361\u7247</h4>\n <SplitLine wrap\n dataSource={{\n name: '\u5f20\u4e09',\n position: '\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08',\n department: '\u6280\u672f\u7814\u53d1\u90e8',\n phone: '138-0013-8000',\n email: 'zhangsan@tencent.com',\n workYears: 4,\n entryDate: '2020-03-15',\n status: '\u5728\u804c'\n }}\n columns={[\n {\n name: 'name',\n title: '\u59d3\u540d',\n render: (value) => (\n <Flex align=\"center\" gap={8}>\n <Avatar style={{ backgroundColor: '#1890ff' }}>{value[0]}</Avatar>\n <strong>{value}</strong>\n </Flex>\n )\n },\n {\n name: 'position',\n title: '\u804c\u4f4d',\n render: (value) => <Tag color=\"blue\">{value}</Tag>\n },\n {\n name: 'department',\n title: '\u90e8\u95e8',\n render: (value) => <Tag color=\"cyan\">{value}</Tag>\n },\n {\n name: 'phone',\n title: '\u8054\u7cfb\u7535\u8bdd',\n icon: <MobileOutlined />,\n render: (value) => value.replace(/(d{3})(d{4})(d{4})/, '$1-$2-$3')\n },\n {\n name: 'email',\n title: '\u7535\u5b50\u90ae\u7bb1',\n icon: <MailOutlined />\n },\n {\n name: 'workYears',\n title: '\u5de5\u4f5c\u5e74\u9650',\n icon: <CalendarOutlined />,\n render: (value) => `${value}\u5e74`\n },\n {\n name: 'entryDate',\n title: '\u5165\u804c\u65e5\u671f',\n icon: <CalendarOutlined />,\n render: (value) => value\n },\n {\n name: 'status',\n title: '\u72b6\u6001',\n render: (value) => <Tag color=\"success\">{value}</Tag>\n }\n ]}\n />\n </div>\n\n {/* \u516c\u53f8\u4fe1\u606f\u5c55\u793a - \u5782\u76f4\u5e03\u5c40 */}\n <div>\n <h4 style={{ marginBottom: 12, color: '#333' }}>\u516c\u53f8\u4fe1\u606f</h4>\n <SplitLine wrap\n labelMode=\"vertical\"\n dataSource={{\n companyName: '\u6df1\u5733\u5e02\u817e\u8baf\u8ba1\u7b97\u673a\u7cfb\u7edf\u6709\u9650\u516c\u53f8',\n creditCode: '914403007109410773',\n legalPerson: '\u9a6c\u5316\u817e',\n registerDate: '1998-11-11',\n capital: '500\u4e07\u7f8e\u5143',\n address: '\u6df1\u5733\u5e02\u5357\u5c71\u533a\u9ad8\u65b0\u79d1\u6280\u56ed\u79d1\u6280\u4e2d\u4e00\u8def\u817e\u8baf\u5927\u53a6',\n businessScope: '\u8ba1\u7b97\u673a\u8f6f\u786c\u4ef6\u7684\u6280\u672f\u5f00\u53d1\u3001\u9500\u552e\uff1b\u8ba1\u7b97\u673a\u7f51\u7edc\u5de5\u7a0b\uff1b\u7cfb\u7edf\u96c6\u6210\uff1b\u8f6f\u4ef6\u5f00\u53d1\u53ca\u6280\u672f\u670d\u52a1\uff1b\u4fe1\u606f\u54a8\u8be2\uff1b\u7f51\u7edc\u8bbe\u5907\u3001\u901a\u8baf\u8bbe\u5907\u3001\u7535\u5b50\u4ea7\u54c1\u7684\u6280\u672f\u5f00\u53d1\u4e0e\u9500\u552e\uff1b\u56fd\u5185\u8d38\u6613\u3002'\n }}\n columns={[\n {\n name: 'companyName',\n title: '\u4f01\u4e1a\u540d\u79f0'\n },\n {\n name: 'creditCode',\n title: '\u7edf\u4e00\u793e\u4f1a\u4fe1\u7528\u4ee3\u7801',\n icon: <TeamOutlined />\n },\n {\n name: 'legalPerson',\n title: '\u6cd5\u5b9a\u4ee3\u8868\u4eba'\n },\n {\n name: 'registerDate',\n title: '\u6210\u7acb\u65e5\u671f',\n icon: <CalendarOutlined />\n },\n {\n name: 'capital',\n title: '\u6ce8\u518c\u8d44\u672c'\n },\n {\n name: 'address',\n title: '\u6ce8\u518c\u5730\u5740',\n icon: <EnvironmentOutlined />\n },\n {\n name: 'businessScope',\n title: '\u7ecf\u8425\u8303\u56f4'\n }\n ]}\n />\n </div>\n\n {/* \u9879\u76ee\u4fe1\u606f\u5c55\u793a */}\n <div>\n <h4 style={{ marginBottom: 12, color: '#333' }}>\u9879\u76ee\u8be6\u60c5</h4>\n <SplitLine wrap\n dataSource={{\n projectName: '\u4f01\u4e1a\u7ea7\u7ba1\u7406\u7cfb\u7edf\u91cd\u6784',\n projectCode: 'PRJ-2024-001',\n manager: '\u5f20\u4e09',\n teamSize: 12,\n startDate: '2024-01-01',\n endDate: '2024-06-30',\n progress: 35,\n budget: 1500000,\n spent: 525000\n }}\n columns={[\n {\n name: 'projectName',\n title: '\u9879\u76ee\u540d\u79f0'\n },\n {\n name: 'projectCode',\n title: '\u9879\u76ee\u7f16\u53f7'\n },\n {\n name: 'manager',\n title: '\u9879\u76ee\u7ecf\u7406',\n icon: <TeamOutlined />\n },\n {\n name: 'teamSize',\n title: '\u56e2\u961f\u89c4\u6a21',\n render: (value) => `${value}\u4eba`\n },\n {\n name: 'startDate',\n title: '\u5f00\u59cb\u65e5\u671f',\n icon: <CalendarOutlined />\n },\n {\n name: 'endDate',\n title: '\u7ed3\u675f\u65e5\u671f',\n icon: <CalendarOutlined />\n },\n {\n name: 'progress',\n title: '\u9879\u76ee\u8fdb\u5ea6',\n render: (value) => <Tag color={value >= 100 ? 'success' : 'processing'}>{value}%</Tag>\n },\n {\n name: 'budget',\n title: '\u9879\u76ee\u9884\u7b97',\n render: (value) => `\xa5${value.toLocaleString()}`\n },\n {\n name: 'spent',\n title: '\u5df2\u6295\u5165',\n render: (value) => `\xa5${value.toLocaleString()}`\n }\n ]}\n />\n </div>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/current-lib_info-page",component:a},{name:"antd",packageName:"antd",component:d},{name:"remoteLoader",packageName:"@kne/remote-loader",component:e(13050)},{name:"antdIcons",packageName:"@ant-design/icons",component:e(14388)}]},{title:"\u6d41\u7a0b\u6b65\u9aa4",description:"\u652f\u6301\u81ea\u5b9a\u4e49\u6e32\u67d3\u548c\u591a\u79cd\u72b6\u6001\u7684\u6d41\u7a0b\u65f6\u5e8f\u5c55\u793a\u7ec4\u4ef6",code:"const { Flex, Space, Divider, Tag } = antd;\nconst { Flow } = _InfoPage;\n\nconst BaseExample = () => {\n return (\n <Space direction=\"vertical\" size={24} style={{ width: '100%' }}>\n {/* \u57fa\u7840\u6d41\u7a0b\u793a\u4f8b */}\n <div>\n <Divider orientation=\"left\">\u8bf7\u5047\u5ba1\u6279\u6d41\u7a0b</Divider>\n <Flow\n current={1}\n dataSource={[\n { title: '\u63d0\u4ea4\u7533\u8bf7', description: '2024-01-15 09:00 \u5f20\u4e09\u63d0\u4ea4\u8bf7\u5047\u7533\u8bf7', status: 'finish' },\n { title: '\u90e8\u95e8\u5ba1\u6279', description: '\u7b49\u5f85\u674e\u7ecf\u7406\u5ba1\u6279', status: 'process' },\n { title: '\u4eba\u4e8b\u5ba1\u6838', description: '\u5f85\u4eba\u4e8b\u90e8\u5ba1\u6838', status: 'wait' },\n { title: '\u6d41\u7a0b\u7ed3\u675f', description: '\u5ba1\u6279\u6d41\u7a0b\u5b8c\u6210', status: 'wait' }\n ]}\n />\n </div>\n\n {/* \u5e26\u526f\u6807\u9898\u7684\u6d41\u7a0b */}\n <div>\n <Divider orientation=\"left\">\u8ba2\u5355\u5904\u7406\u6d41\u7a0b</Divider>\n <Flow\n current={2}\n dataSource={[\n { title: '\u521b\u5efa\u8ba2\u5355', subTitle: '2024-01-15 09:30', status: 'finish' },\n { title: '\u652f\u4ed8\u6210\u529f', subTitle: '2024-01-15 10:15', status: 'finish' },\n { title: '\u4ed3\u5e93\u53d1\u8d27', subTitle: '2024-01-15 14:00', status: 'finish' },\n { title: '\u914d\u9001\u4e2d', subTitle: '2024-01-16 08:30', status: 'process' },\n { title: '\u5df2\u7b7e\u6536', subTitle: '\u5f85\u786e\u8ba4', status: 'wait' }\n ]}\n />\n </div>\n\n {/* \u4f7f\u7528 columns \u81ea\u5b9a\u4e49\u6e32\u67d3 */}\n <div>\n <Divider orientation=\"left\">\u9879\u76ee\u5ba1\u6279\u6d41\u7a0b</Divider>\n <Flow\n dataSource={[\n {\n title: '\u9700\u6c42\u8bc4\u5ba1',\n description: '\u901a\u8fc7',\n operator: '\u5f20\u4ea7\u54c1',\n time: '2024-01-15 09:00',\n logs: [\n { name: '\u5f20\u4ea7\u54c1', action: '\u63d0\u4ea4\u9700\u6c42\u6587\u6863', time: '2024-01-15 09:00', content: '\u5305\u542b\u529f\u80fd\u5217\u8868\u3001\u6280\u672f\u65b9\u6848\u3001\u65f6\u95f4\u8ba1\u5212' },\n { name: '\u674e\u6280\u672f', action: '\u6280\u672f\u8bc4\u5ba1\u901a\u8fc7', time: '2024-01-15 11:00', content: '\u6280\u672f\u65b9\u6848\u53ef\u884c\uff0c\u8d44\u6e90\u5145\u8db3' }\n ]\n },\n {\n title: '\u5f00\u53d1\u5b9e\u65bd',\n description: '\u8fdb\u884c\u4e2d',\n operator: '\u738b\u5f00\u53d1',\n time: '2024-01-16 09:00',\n logs: [\n { name: '\u738b\u5f00\u53d1', action: '\u5f00\u59cb\u5f00\u53d1', time: '2024-01-16 09:00', content: '\u524d\u7aef\u548c\u540e\u7aef\u5e76\u884c\u5f00\u53d1' }\n ]\n },\n {\n title: '\u6d4b\u8bd5\u9a8c\u6536',\n description: '\u5f85\u5904\u7406',\n operator: '\u8d75\u6d4b\u8bd5',\n time: '2024-01-20 00:00',\n logs: []\n }\n ]}\n columns={[\n { name: 'title' },\n { name: 'description', render: (value) => <Tag color={value === '\u901a\u8fc7' ? 'success' : value === '\u8fdb\u884c\u4e2d' ? 'processing' : 'default'}>{value}</Tag> },\n { type: 'subTitle', name: 'time', format: 'datetime' },\n {\n type: 'actionList',\n name: 'logs',\n children: [\n { name: 'name' },\n { name: 'action' },\n { type: 'options', name: 'time', format: 'datetime' },\n { name: 'content' }\n ]\n }\n ]}\n />\n </div>\n\n {/* \u70b9\u72b6\u6b65\u9aa4\u6761 */}\n <div>\n <Divider orientation=\"left\">\u9879\u76ee\u91cc\u7a0b\u7891</Divider>\n <Flex gap={16}>\n <div style={{ flex: 1 }}>\n <p style={{ marginBottom: 8, color: '#666' }}>\u5782\u76f4\u65f6\u95f4\u8f74</p>\n <Flow\n direction=\"vertical\"\n progressDot\n dataSource={[\n { title: '\u9879\u76ee\u542f\u52a8', description: '2024-01-01', status: 'finish' },\n { title: '\u9700\u6c42\u5206\u6790', description: '2024-01-15', status: 'finish' },\n { title: '\u7cfb\u7edf\u8bbe\u8ba1', description: '2024-02-01', status: 'process' },\n { title: '\u5f00\u53d1\u5b9e\u65bd', description: '2024-03-01', status: 'wait' },\n { title: '\u6d4b\u8bd5\u4e0a\u7ebf', description: '2024-04-01', status: 'wait' }\n ]}\n />\n </div>\n <div style={{ flex: 1 }}>\n <p style={{ marginBottom: 8, color: '#666' }}>\u6c34\u5e73\u8fdb\u5ea6\u6761</p>\n <Flow\n direction=\"horizontal\"\n progressDot\n dataSource={[\n { title: '\u6ce8\u518c', description: '\u5b8c\u6210', status: 'finish' },\n { title: '\u9a8c\u8bc1', description: '\u5b8c\u6210', status: 'finish' },\n { title: '\u5ba1\u6838', description: '\u8fdb\u884c\u4e2d', status: 'process' },\n { title: '\u901a\u8fc7', description: '\u5f85\u529e', status: 'wait' }\n ]}\n />\n </div>\n </Flex>\n </div>\n\n {/* \u4f7f\u7528 content \u7c7b\u578b\u81ea\u5b9a\u4e49\u5185\u5bb9 */}\n <div>\n <Divider orientation=\"left\">\u5408\u540c\u5ba1\u6279\u6d41\u7a0b</Divider>\n <Flow\n dataSource={[\n {\n title: '\u8349\u62df\u9636\u6bb5',\n description: '\u6cd5\u52a1\u90e8',\n content: '\u5408\u540c\u6761\u6b3e\u5df2\u8349\u62df\u5b8c\u6210\uff0c\u5305\u542b\u4fdd\u5bc6\u534f\u8bae\u3001\u4ed8\u6b3e\u6761\u6b3e\u3001\u8fdd\u7ea6\u8d23\u4efb\u7b49\u5185\u5bb9\u3002',\n status: 'finish'\n },\n {\n title: '\u4e1a\u52a1\u5ba1\u6838',\n description: '\u4e1a\u52a1\u90e8\u95e8',\n content: '\u4e1a\u52a1\u90e8\u95e8\u5df2\u786e\u8ba4\u5408\u540c\u5185\u5bb9\uff0c\u7b26\u5408\u4e1a\u52a1\u9700\u6c42\u3002',\n status: 'finish'\n },\n {\n title: '\u8d22\u52a1\u5ba1\u6838',\n description: '\u8d22\u52a1\u90e8',\n content: '\u8d22\u52a1\u90e8\u6b63\u5728\u5ba1\u6838\u4ed8\u6b3e\u6761\u6b3e\u548c\u9884\u7b97\u5b89\u6392\uff0c\u9884\u8ba12\u4e2a\u5de5\u4f5c\u65e5\u5b8c\u6210\u3002',\n status: 'process'\n },\n {\n title: '\u6700\u7ec8\u7b7e\u7f72',\n description: '\u7b49\u5f85',\n content: '',\n status: 'wait'\n }\n ]}\n columns={[\n {\n type: 'content',\n name: 'content',\n render: (item) => (\n <div style={{ background: '#f9f9f9', padding: '12px', borderRadius: '4px', fontSize: '13px', lineHeight: '1.6' }}>\n {item}\n </div>\n )\n }\n ]}\n />\n </div>\n </Space>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/current-lib_info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u62a5\u544a\u9875\u9762",description:"\u5b8c\u6574\u7684\u6d4b\u8bc4\u62a5\u544a\u751f\u6210\u7ec4\u4ef6\uff0c\u652f\u6301\u8bc4\u5206\u3001\u8868\u683c\u548c\u8be6\u7ec6\u63cf\u8ff0",code:"const { Report } = _InfoPage;\nconst { Space } = antd;\nconst BaseExample = () => {\n return (\n <div className=\"outer\">\n <Space direction=\"vertical\" size={24}>\n <Report title=\"\u62a5\u544a\u6982\u8ff0\">\n <Report.List\n report={{\n list: [\n {\n label: '\u76ee\u7684',\n content: '\u672c\u62a5\u544a\u65e8\u5728\u8bc4\u4f30\u62db\u8058\u987e\u95ee\u4f7f\u7528AI\u5de5\u5177\u8fdb\u884c\u5019\u9009\u4eba\u521d\u6b21\u6c9f\u901a\u7684\u80fd\u529b\uff0c\u7279\u522b\u662f\u5728\u7406\u89e3\u5019\u9009\u4eba\u9700\u6c42\u3001\u4f20\u8fbe\u804c\u4f4d\u4fe1\u606f\u4ee5\u53ca\u5efa\u7acb\u521d\u6b65\u4fe1\u4efb\u5173\u7cfb\u7684\u6548\u679c\u3002'\n },\n {\n label: '\u6d4b\u8bc4\u5bf9\u8c61',\n content: '\u59d3\u540d\uff1a\u5f20\u4f1f'\n },\n {\n label: '\u6d4b\u8bc4\u5de5\u5177',\n content: `AI\u6a21\u62df\u7cfb\u7edf\uff1a\u63d0\u4f9b\u57fa\u4e8e\u8bed\u97f3\u548c\u6587\u672c\u7684\u4ea4\u4e92\u6a21\u62df\u73af\u5883\u3002\n\u8bc4\u5206\u6807\u51c6\uff1a\u6c9f\u901a\u6280\u5de7\u3001\u4fe1\u606f\u4f20\u8fbe\u6e05\u6670\u5ea6\u3001\u5019\u9009\u4eba\u53cd\u9988\u3001\u5efa\u7acb\u5173\u7cfb\u7684\u80fd\u529b\u3002`\n },\n {\n label: '\u4efb\u52a1\u76ee\u6807',\n content: (\n <ul>\n <li>\u5b8c\u6574\u5448\u73b0\u521d\u6b21\u6c9f\u901a\u8bdd\u672f\uff0c\u5c55\u73b0\u6bcf\u4e2a\u5173\u952e\u52a8\u4f5c\u548c\u6c9f\u901a\u987a\u5e8f\u3002</li>\n <li>\u6536\u96c6\u5019\u9009\u4eba\u4fe1\u606f\uff1a\u4e86\u89e3\u5019\u9009\u4eba\u5de5\u4f5c\u80cc\u666f\uff0c\u6280\u672f\u80fd\u529b\u53ca\u5176\u85aa\u8d44\u8981\u6c42\u3002</li>\n <li>\u6316\u6398\u9700\u6c42\uff1a\u5168\u9762\u4e86\u89e3\u5019\u9009\u4eba\u6c42\u804c\u52a8\u6001\u548c\u9700\u6c42\uff0c\u4ece\u800c\u638c\u63e1\u5019\u9009\u4eba\u5b58\u5728\u7684\u987e\u8651\u53ca\u3002</li>\n <li>\u6709\u6548\u63a8\u8350\uff1a\u6839\u636e\u5019\u9009\u4eba\u6c42\u804c\u9700\u6c42\u94fe\u63a5\u804c\u4f4d\u4f18\u52bf\uff0c\u5f3a\u5316\u6280\u672f\u5438\u5f15\u70b9\uff0c\u59a5\u5584\u5904\u7406\u5019\u9009\u4eba\u7591\u8651\u3002</li>\n <li>\u5efa\u7acb\u4fe1\u4efb\u5173\u7cfb\uff1a\u4f7f\u7528\u6c9f\u901a\u6280\u5de7\uff0c\u6001\u5ea6\u8bda\u6073\uff0c\u548c\u5019\u9009\u4eba\u7ad9\u5728\u4e00\u8d77\uff0c\u800c\u975e\u201c\u535a\u5f08\u201d\u5173\u7cfb\u3002</li>\n </ul>\n )\n }\n ]\n }}\n />\n </Report>\n <Report title=\"\u6d4b\u8bc4\u7ed3\u679c\">\n <Report.Result\n report={{\n total: {\n score: '81.8',\n label: '\u7efc\u5408\u5f97\u5206'\n },\n list: [\n {\n label: '\u6c9f\u901a\u7a0b\u5e8f\u6307\u5f15\u53ca\u8bdd\u672f',\n score: '86',\n content:\n '\u5f20\u4f1f\u5728\u8fd9\u4e00\u90e8\u5206\u7684\u8868\u73b0\u603b\u4f53\u4e0a\u662f\u4e13\u4e1a\u4e14\u6709\u6761\u7406\u7684\uff0c\u80fd\u591f\u6309\u7167\u4e00\u5b9a\u7684\u6d41\u7a0b\u987a\u5229\u5f00\u5c55\u5bf9\u8bdd\u3002\u4ed6\u8868\u73b0\u51fa\u7684\u793c\u8c8c\u548c\u4e13\u4e1a\u6027\u5728\u8be2\u95ee\u662f\u5426\u65b9\u4fbf\u901a\u8bdd\u65f6\u5f97\u5230\u4e86\u5b8c\u7f8e\u7684\u4f53\u73b0\uff0c\u5f97\u5230\u4e86\u6ee1\u5206\u3002\u7136\u800c\uff0c\u4ed6\u5728\u4ecb\u7ecd\u804c\u4f4d\u65f6\u672a\u80fd\u5145\u5206\u5229\u7528\u673a\u4f1a\u5f3a\u8c03\u804c\u4f4d\u7684\u5438\u5f15\u70b9\uff0c\u53ef\u80fd\u5f71\u54cd\u5019\u9009\u4eba\u7684\u5174\u8da3\u3002'\n },\n {\n label: '\u6536\u96c6\u4fe1\u606f\uff08\u73b0\u72b6$&$\u671f\u671b\uff09',\n score: '90',\n content: '\u5f20\u4f1f\u5728\u6536\u96c6\u5019\u9009\u4eba\u7684\u73b0\u72b6\u548c\u671f\u671b\u65b9\u9762\u505a\u5f97\u76f8\u5bf9\u5b8c\u5584\uff0c\u80fd\u591f\u83b7\u5f97\u5173\u4e8e\u5019\u9009\u4eba\u5f53\u524d\u5de5\u4f5c\u548c\u6280\u672f\u6808\u7684\u91cd\u8981\u4fe1\u606f\u3002\u4f46\u5bf9\u4e8e\u5019\u9009\u4eba\u7684\u9879\u76ee\u7ecf\u9a8c\u548c\u85aa\u8d44\u7ed3\u6784\u7684\u63a2\u8ba8\u4e0d\u591f\u6df1\u5165\uff0c\u8fd9\u53ef\u80fd\u4f1a\u5f71\u54cd\u5230\u540e\u7eed\u7684\u804c\u4f4d\u5339\u914d\u548c\u671f\u671b\u7ba1\u7406\u3002'\n },\n {\n label: '\u6316\u6398\u9700\u6c42',\n score: '70',\n content: '\u5f20\u4f1f\u5728\u6316\u6398\u5019\u9009\u4eba\u9700\u6c42\u65b9\u9762\u8fd8\u6709\u63d0\u5347\u7a7a\u95f4\u3002\u867d\u7136\u57fa\u672c\u4e86\u89e3\u4e86\u5019\u9009\u4eba\u7684\u804c\u4e1a\u671f\u671b\uff0c\u4f46\u5728\u63a2\u7d22\u5019\u9009\u4eba\u7684\u975e\u85aa\u916c\u52a8\u673a\u548c\u6df1\u5c42\u6b21\u9700\u6c42\u65b9\u9762\u8868\u73b0\u4e0d\u591f\u5145\u5206\uff0c\u8fd9\u662f\u5efa\u7acb\u6709\u6548\u63a8\u8350\u548c\u6df1\u5ea6\u5173\u7cfb\u7684\u5173\u952e\u3002'\n },\n {\n label: '\u6709\u6548\u63a8\u8350',\n score: '73',\n content: '\u5728\u6709\u6548\u63a8\u8350\u804c\u4f4d\u65b9\u9762\uff0c\u5f20\u4f1f\u9700\u8981\u52a0\u5f3a\u4e0e\u5019\u9009\u4eba\u9700\u6c42\u7684\u5339\u914d\u5ea6\u548c\u8bf4\u670d\u529b\u3002\u867d\u7136\u63d0\u5230\u4e86\u804c\u4f4d\u7684\u6280\u672f\u4f18\u52bf\uff0c\u4f46\u672a\u6839\u636e\u5019\u9009\u4eba\u7684\u5177\u4f53\u6280\u672f\u80cc\u666f\u8fdb\u884c\u4e2a\u6027\u5316\u5f3a\u8c03\uff0c\u53ef\u80fd\u51cf\u5c11\u5019\u9009\u4eba\u7684\u5174\u8da3\u3002'\n },\n {\n label: '\u5efa\u7acb\u4fe1\u4efb\u5173\u7cfb',\n score: '84',\n content: '\u5f20\u4f1f\u80fd\u591f\u901a\u8fc7\u6709\u6548\u7684\u6c9f\u901a\u5efa\u7acb\u4fe1\u4efb\u5173\u7cfb\uff0c\u4f7f\u7528\u5f00\u653e\u6027\u95ee\u9898\u548c\u79ef\u6781\u80af\u5b9a\u5019\u9009\u4eba\u7684\u8868\u73b0\u3002\u7136\u800c\uff0c\u9700\u8981\u63d0\u9ad8\u5728\u6362\u4f4d\u601d\u8003\u548c\u7406\u89e3\u5019\u9009\u4eba\u6df1\u5c42\u9700\u6c42\u65b9\u9762\u7684\u80fd\u529b\uff0c\u786e\u4fdd\u4fe1\u4efb\u5173\u7cfb\u7684\u6df1\u5ea6\u548c\u771f\u5b9e\u6027\u3002'\n }\n ]\n }}\n />\n </Report>\n <Report title=\"\u8bc4\u5206\u7ec6\u8282\">\n <Report.Table\n report={{\n columns: [\n {\n title: '\u8bc4\u4f30\u7ef4\u5ea6',\n name: 'group',\n isSubTitle: true\n },\n {\n title: '\u8bc4\u5206\u9879',\n name: 'item',\n span: 10\n },\n {\n title: '\u5f97\u5206',\n name: 'score',\n span: 4,\n valueOf: value => <div className=\"score\">{value}</div>\n },\n {\n title: '\u63cf\u8ff0',\n name: 'description',\n span: 10\n }\n ],\n group: [\n {\n name: 'group1',\n label: '\u6c9f\u901a\u7a0b\u5e8f\u6307\u5f15\u53ca\u8bdd\u672f'\n },\n {\n name: 'group2',\n label: '\u6536\u96c6\u4fe1\u606f\uff08\u73b0\u72b6&\u671f\u671b\uff09'\n },\n {\n name: 'group3',\n label: '\u6316\u6398\u9700\u6c42'\n },\n {\n name: 'group4',\n label: '\u6709\u6548\u63a8\u8350'\n },\n {\n name: 'group5',\n label: '\u5efa\u7acb\u4fe1\u4efb\u5173\u7cfb'\n }\n ],\n list: [\n {\n group: 'group1',\n item: '\u4e13\u4e1a\u5f00\u573a',\n score: <Report.Score value={4}/>,\n description: '\u5f00\u573a\u4e13\u4e1a\uff0c\u8bed\u6c14\u53cb\u597d\uff0c\u7565\u663e\u6025\u4fc3\u3002'\n },\n {\n group: 'group1',\n item: '\u8be2\u95ee\u662f\u5426\u65b9\u4fbf\u901a\u8bdd',\n score: <Report.Score value={5}/>,\n description: '\u8868\u73b0\u51fa\u6781\u597d\u7684\u793c\u8c8c\u548c\u8003\u8651\u3002'\n },\n {\n group: 'group1',\n item: '\u5148\u4e86\u89e3\u5019\u9009\u4eba\u6574\u4f53\u60c5\u51b5',\n score: <Report.Score value={3}/>,\n description: '\u8be6\u7ec6\u8be2\u95ee\u4e86\u6280\u672f\u548c\u52a8\u673a\uff0c\u672a\u6df1\u5165\u4e2a\u4eba\u53d1\u5c55\u3002'\n },\n {\n group: 'group1',\n item: '\u540e\u4ecb\u7ecd\u63a8\u8350OD\u804c\u4f4d',\n score: <Report.Score value={4}/>,\n description: '\u4ecb\u7ecd\u6e05\u6670\uff0c\u672a\u5145\u5206\u7a81\u51fa\u804c\u4f4d\u5438\u5f15\u529b\u3002'\n },\n {\n group: 'group1',\n item: '\u4ecb\u7ecd\u6574\u4f53\u9762\u8bd5\u6d41\u7a0b',\n score: <Report.Score value={1}/>,\n description: '\u8be6\u5c3d\u4ecb\u7ecd\u6d41\u7a0b\uff0c\u7f3a\u5c11\u673a\u8003\u51c6\u5907\u7ec6\u8282\u8bf4\u660e\u3002'\n },\n {\n group: 'group1',\n item: '\u4ea4\u6362\u8054\u7cfb\u65b9\u5f0f',\n score: <Report.Score value={5}/>,\n description: '\u6709\u6548\u4e14\u81ea\u7136\uff0c\u786e\u4fdd\u53cc\u65b9\u7545\u901a\u65e0\u963b\u3002'\n },\n {\n group: 'group2',\n item: '\u4e86\u89e3\u5019\u9009\u4eba\u76ee\u524d\u5c31\u4e1a\u72b6\u6001',\n score: <Report.Score value={5}/>,\n description: '\u8be6\u5c3d\u4e86\u89e3\u5019\u9009\u4eba\u7684\u5f53\u524d\u5c31\u4e1a\u72b6\u51b5\u3002'\n },\n {\n group: 'group2',\n item: '\u4e86\u89e3\u5019\u9009\u4eba\u6280\u672f\u6808\u53ca\u9879\u76ee\u7ecf\u9a8c',\n score: <Report.Score value={4}/>,\n description: '\u8be6\u7ec6\u8be2\u95ee\u6280\u672f\u6808\uff0c\u5bf9\u9879\u76ee\u7ecf\u9a8c\u63a2\u8ba8\u4e0d\u8db3\u3002'\n },\n {\n group: 'group2',\n item: '\u4e86\u89e3\u5019\u9009\u4eba\u85aa\u8d44\u60c5\u51b5\u4e0e\u7ed3\u6784',\n score: <Report.Score value={4}/>,\n description: '\u4e86\u89e3\u85aa\u8d44\u671f\u671b\u6e05\u6670\uff0c\u672a\u8be6\u7ec6\u63a2\u8ba8\u85aa\u8d44\u6784\u6210\u3002'\n },\n {\n group: 'group3',\n item: '\u4e86\u89e3\u5019\u9009\u4eba\u5bf9\u4e0b\u4e00\u4efd\u5de5\u4f5c\u7684\u671f\u671b',\n score: <Report.Score value={3}/>,\n description: '\u63a2\u8ba8\u4e86\u804c\u4e1a\u89c4\u5212\uff0c\u4f46\u672a\u6df1\u6316\u53d1\u5c55\u610f\u613f\u3002'\n },\n {\n group: 'group3',\n item: '\u63a2\u7d22\u975e\u85aa\u8d44\u6c42\u804c\u52a8\u673a',\n score: <Report.Score value={2}/>,\n description: '\u57fa\u672c\u4e86\u89e3\u6c42\u804c\u52a8\u673a\uff0c\u7f3a\u4e4f\u6df1\u5ea6\u548c\u7ec6\u8282\u3002'\n },\n {\n group: 'group3',\n item: '\u8bc6\u522b\u5e76\u5904\u7406\u987e\u8651',\n score: <Report.Score value={4}/>,\n description: '\u8bc6\u522b\u4e86\u987e\u8651\uff0c\u56de\u5e94\u7a0d\u663e\u6a21\u7cca\u3002'\n },\n {\n group: 'group4',\n item: '\u94fe\u63a5\u804c\u4f4d\u4f18\u52bf\u4e0e\u6c42\u804c\u52a8\u673a',\n score: <Report.Score value={3}/>,\n description: '\u63d0\u53ca\u804c\u4f4d\u76f8\u5173\u6027\uff0c\u7f3a\u4e4f\u8bf4\u670d\u529b\u3002'\n },\n {\n group: 'group4',\n item: '\u5f3a\u5316\u9879\u76ee\u6280\u672f\u5438\u5f15\u70b9',\n score: <Report.Score value={3}/>,\n description: '\u63d0\u53ca\u6280\u672f\u4f18\u52bf\uff0c\u672a\u9488\u5bf9\u5019\u9009\u4eba\u80cc\u666f\u5b9a\u5236\u3002'\n },\n {\n group: 'group4',\n item: '\u5173\u6ce8\u5e76\u5904\u7406\u5019\u9009\u4eba\u987e\u8651',\n score: <Report.Score value={4}/>,\n description: '\u6b63\u9762\u56de\u5e94\u987e\u8651\uff0c\u4f46\u89e3\u51b3\u65b9\u6848\u4e0d\u5177\u4f53\u3002'\n },\n {\n group: 'group5',\n item: '\u5e94\u7528\u5f00\u653e\u6027\u63d0\u95ee',\n score: <Report.Score value={0}/>,\n description: '\u4f7f\u7528\u5f00\u653e\u6027\u95ee\u9898\u4fc3\u8fdb\u4e86\u5bf9\u8bdd\u6df1\u5165\u3002'\n },\n {\n group: 'group5',\n item: '\u6362\u4f4d\u601d\u8003\u4e0e\u8868\u8fbe\u540c\u7406\u5fc3',\n score: <Report.Score value={1}/>,\n description: '\u8868\u8fbe\u4e86\u540c\u7406\u5fc3\uff0c\u4f46\u90e8\u5206\u56de\u7b54\u672a\u5b8c\u5168\u7ad9\u5728\u5019\u9009\u4eba\u89d2\u5ea6\u3002'\n },\n {\n group: 'group5',\n item: '\u8868\u8fbe\u80af\u5b9a\u548c\u6b23\u8d4f',\n score: <Report.Score value={5}/>,\n description: '\u975e\u5e38\u597d\u5730\u80af\u5b9a\u4e86\u5019\u9009\u4eba\u7684\u80fd\u529b\u548c\u7ecf\u9a8c\u3002'\n },\n {\n group: 'group5',\n item: '\u6e05\u6670\u8868\u8fbe\u89c2\u70b9',\n score: <Report.Score value={2}/>,\n description: '\u89c2\u70b9\u4e3b\u8981\u6e05\u6670\uff0c\u5076\u6709\u4e0d\u591f\u51c6\u786e\u7684\u60c5\u51b5\u3002'\n },\n {\n group: 'group5',\n item: '\u6709\u6548\u503e\u542c\u4e0e\u7406\u89e3',\n score: <Report.Score value={3}/>,\n description: '\u503e\u542c\u826f\u597d\uff0c\u4f46\u6709\u65f6\u672a\u80fd\u5b8c\u5168\u6293\u4f4f\u5019\u9009\u4eba\u7684\u610f\u56fe\u3002'\n }\n ]\n }}\n />\n </Report>\n <Report title=\"\u7ed3\u8bba\u4e0e\u5efa\u8bae\">\n <Report.Part\n report={{\n list: [\n {\n label: '\u7ed3\u8bba',\n hasBgColor: true,\n content:\n '\u5728\u6b64\u6b21AI\u60c5\u666f\u6a21\u62df\u6d4b\u8bc4\u4e2d\uff0c\u674e\u56db\u8868\u73b0\u51fa\u4e86\u8f83\u5f3a\u7684\u6c9f\u901a\u80fd\u529b\u548c\u4e13\u4e1a\u6027\uff0c\u5c24\u5176\u662f\u5728\u7a0b\u5e8f\u6307\u5f15\u53ca\u8bdd\u672f\u65b9\u9762\u3002\u4ed6\u6210\u529f\u5730\u6536\u96c6\u4e86\u5019\u9009\u4eba\u7684\u57fa\u672c\u4fe1\u606f\u5e76\u5efa\u7acb\u4e86\u521d\u6b65\u7684\u4fe1\u4efb\u5173\u7cfb\u3002\u7136\u800c\uff0c\u4ed6\u5728\u6df1\u5165\u6316\u6398\u5019\u9009\u4eba\u9700\u6c42\u548c\u4e2a\u6027\u5316\u63a8\u8350\u804c\u4f4d\u65b9\u9762\u7684\u8868\u73b0\u8fd8\u6709\u5f85\u63d0\u9ad8\u3002\u603b\u4f53\u800c\u8a00\uff0c\u674e\u56db\u7684\u8868\u73b0\u826f\u597d\uff0c\u663e\u793a\u51fa\u4e86\u4ed6\u4f5c\u4e3a\u62db\u8058\u987e\u95ee\u7684\u6f5c\u529b\u3002'\n },\n {\n label: '\u5efa\u8bae',\n style: { '--marker-color': '#027A48', '--label-bg-color': '#027A481a' },\n content: (\n <ol>\n <li>\u589e\u5f3a\u804c\u4f4d\u4ecb\u7ecd\u7684\u5438\u5f15\u529b\uff0c\u7279\u522b\u662f\u5c06\u804c\u4f4d\u4f18\u52bf\u4e0e\u5019\u9009\u4eba\u7684\u9700\u6c42\u76f4\u63a5\u5173\u8054\uff0c\u7a81\u51fa\u8868\u73b0\u804c\u4f4d\u7684\u72ec\u7279\u4e4b\u5904\u3002</li>\n <li>\u5bf9\u5019\u9009\u4eba\u7684\u9879\u76ee\u7ecf\u9a8c\u8fdb\u884c\u66f4\u8be6\u7ec6\u7684\u8be2\u95ee\uff0c\u5c24\u5176\u662f\u5173\u4e8e\u5982\u4f55\u5728\u9879\u76ee\u4e2d\u89e3\u51b3\u95ee\u9898\u548c\u6280\u672f\u5e94\u7528\u7684\u5177\u4f53\u60c5\u51b5\u3002</li>\n <li>\u5728\u8ba8\u8bba\u85aa\u8d44\u65f6\uff0c\u5e94\u8be6\u7ec6\u4e86\u89e3\u5019\u9009\u4eba\u7684\u85aa\u8d44\u6784\u6210\u548c\u671f\u671b\uff0c\u786e\u4fdd\u63d0\u4f9b\u7684\u804c\u4f4d\u4e0e\u5019\u9009\u4eba\u7684\u85aa\u8d44\u671f\u671b\u76f8\u5339\u914d\u3002</li>\n <li>\u5728\u4ea4\u6d41\u4e2d\u7a7f\u63d2\u63a2\u8ba8\u5019\u9009\u4eba\u7684\u4e2a\u4eba\u5174\u8da3\u548c\u957f\u671f\u804c\u4e1a\u76ee\u6807\uff0c\u4ee5\u4fbf\u66f4\u597d\u5730\u7406\u89e3\u5176\u52a8\u673a\u3002</li>\n <li>\u6839\u636e\u5019\u9009\u4eba\u7684\u6280\u672f\u80fd\u529b\u548c\u804c\u4e1a\u5174\u8da3\u5b9a\u5236\u804c\u4f4d\u63a8\u8350\uff0c\u7a81\u51fa\u804c\u4f4d\u7684\u6280\u672f\u6311\u6218\u548c\u6210\u957f\u673a\u4f1a\u3002</li>\n <li>\u52a0\u5f3a\u540c\u7406\u5fc3\u7684\u8868\u8fbe\uff0c\u5c24\u5176\u5728\u8ba8\u8bba\u5019\u9009\u4eba\u5173\u5207\u7684\u95ee\u9898\u65f6\uff0c\u4ece\u5176\u89d2\u5ea6\u51fa\u53d1\u63d0\u4f9b\u89e3\u51b3\u65b9\u6848\u3002</li>\n </ol>\n )\n }\n ]\n }}\n />\n </Report>\n <Report title=\"\u7ed3\u8bba\u4e0e\u5efa\u8bae\">\u81ea\u5b9a\u4e49 area</Report>\n </Space>\n </div>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/current-lib_info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u62a5\u544a\u7ec4\u4ef6",description:"\u5c55\u793aReport\u7684\u5404\u5b50\u7ec4\u4ef6\uff1aList\u3001Result\u3001Table\u3001Part",code:"const { Report, Score } = _InfoPage;\nconst { Flex, Radio, Space } = antd;\nconst { useState } = React;\n\nconst reportData = {\n total: {\n score: '88.5',\n label: '\u7efc\u5408\u8bc4\u5206'\n },\n list: [\n {\n label: '\u4ee3\u7801\u8d28\u91cf',\n score: '95',\n content: '\u4ee3\u7801\u98ce\u683c\u89c4\u8303\uff0c\u6ce8\u91ca\u6e05\u6670\u5b8c\u6574\uff0c\u9075\u5faaESLint\u548cPrettier\u89c4\u8303\u3002\u7ec4\u4ef6\u62c6\u5206\u5408\u7406\uff0c\u590d\u7528\u6027\u5f3a\uff0c\u5355\u5143\u6d4b\u8bd5\u8986\u76d6\u7387\u8fbe\u523085%\u3002\u4ee3\u7801\u5ba1\u67e5\u4e2d\u63d0\u51fa\u7684\u4fee\u6539\u610f\u89c1\u54cd\u5e94\u53ca\u65f6\uff0c\u6574\u6539\u5b8c\u6210\u7387\u9ad8\u3002'\n },\n {\n label: '\u6280\u672f\u6df1\u5ea6',\n score: '90',\n content: '\u6df1\u5165\u7406\u89e3React\u6e90\u7801\u539f\u7406\uff0c\u719f\u6089Hooks\u5de5\u4f5c\u673a\u5236\u548c\u6027\u80fd\u4f18\u5316\u6280\u5de7\u3002\u5bf9\u524d\u7aef\u5de5\u7a0b\u5316\u3001\u5fae\u524d\u7aef\u67b6\u6784\u6709\u5b9e\u8df5\u7ecf\u9a8c\u3002\u5728\u9879\u76ee\u4e2d\u6210\u529f\u5b9e\u73b0SSR\u65b9\u6848\uff0c\u63d0\u5347\u9996\u5c4f\u6e32\u67d3\u901f\u5ea660%\u3002'\n },\n {\n label: '\u56e2\u961f\u534f\u4f5c',\n score: '85',\n content: '\u79ef\u6781\u53c2\u4e0e\u4ee3\u7801\u8bc4\u5ba1\u548c\u6280\u672f\u8ba8\u8bba\uff0c\u4e50\u4e8e\u5206\u4eab\u6280\u672f\u5fc3\u5f97\u3002\u4e0e\u4ea7\u54c1\u3001\u8bbe\u8ba1\u3001\u6d4b\u8bd5\u56e2\u961f\u6c9f\u901a\u987a\u7545\uff0c\u80fd\u591f\u51c6\u786e\u7406\u89e3\u9700\u6c42\u5e76\u7ed9\u51fa\u5408\u7406\u7684\u6280\u672f\u5efa\u8bae\u3002\u534f\u52a9\u65b0\u540c\u4e8b\u5feb\u901f\u878d\u5165\u56e2\u961f\u3002'\n },\n {\n label: '\u521b\u65b0\u610f\u8bc6',\n score: '82',\n content: '\u4e3b\u52a8\u63a2\u7d22\u65b0\u6280\u672f\uff0c\u5c06AI\u8f85\u52a9\u5f00\u53d1\u5de5\u5177\u5f15\u5165\u56e2\u961f\uff0c\u63d0\u5347\u5f00\u53d1\u6548\u7387\u7ea620%\u3002\u63d0\u51fa\u591a\u4e2a\u4f18\u5316\u65b9\u6848\u5e76\u88ab\u91c7\u7eb3\uff0c\u4e3a\u4e1a\u52a1\u589e\u957f\u505a\u51fa\u4e86\u8d21\u732e\u3002\u6301\u7eed\u5173\u6ce8\u884c\u4e1a\u52a8\u6001\uff0c\u6280\u672f\u654f\u611f\u5ea6\u9ad8\u3002'\n }\n ]\n};\n\nconst tableReportData = {\n columns: [\n { title: '\u8bc4\u4f30\u7ef4\u5ea6', name: 'group', isSubTitle: true, span: 24 },\n { title: '\u8bc4\u4f30\u9879', name: 'item', span: 12 },\n { title: '\u5f97\u5206', name: 'score', span: 4 },\n { title: '\u8bf4\u660e', name: 'description', span: 8 }\n ],\n group: [\n { name: 'group1', label: '\ud83d\udccc \u6838\u5fc3\u6280\u672f\u80fd\u529b' },\n { name: 'group2', label: '\ud83d\udcbc \u5de5\u4f5c\u4e1a\u7ee9' },\n { name: 'group3', label: '\ud83c\udfaf \u804c\u4e1a\u7d20\u517b' }\n ],\n list: [\n { group: 'group1', item: '\u524d\u7aef\u6846\u67b6', score: <Score value={5} total={5} />, description: 'React/Vue\u719f\u7ec3\u638c\u63e1' },\n { group: 'group1', item: 'TypeScript', score: <Score value={5} total={5} />, description: '\u7c7b\u578b\u5b9a\u4e49\u89c4\u8303\u5b8c\u6574' },\n { group: 'group1', item: '\u6027\u80fd\u4f18\u5316', score: <Score value={4} total={5} />, description: 'SSR\u9996\u5c4f\u4f18\u5316\u663e\u8457' },\n { group: 'group1', item: '\u5de5\u7a0b\u5316', score: <Score value={4} total={5} />, description: 'CI/CD\u6d41\u7a0b\u5b8c\u5584' },\n { group: 'group2', item: '\u9700\u6c42\u4ea4\u4ed8', score: <Score value={5} total={5} />, description: '\u6309\u65f6\u4ea4\u4ed8\u738798%' },\n { group: 'group2', item: '\u8d28\u91cf\u4fdd\u969c', score: <Score value={4} total={5} />, description: '\u7ebf\u4e0a\u6545\u969c\u7387\u4f4e' },\n { group: 'group2', item: '\u6587\u6863\u8f93\u51fa', score: <Score value={3} total={5} />, description: 'API\u6587\u6863\u9700\u5b8c\u5584' },\n { group: 'group3', item: '\u56e2\u961f\u534f\u4f5c', score: <Score value={5} total={5} />, description: '\u6c9f\u901a\u987a\u7545\u4e3b\u52a8' },\n { group: 'group3', item: '\u5b66\u4e60\u6210\u957f', score: <Score value={4} total={5} />, description: '\u6280\u672f\u5206\u4eab\u79ef\u6781' },\n { group: 'group3', item: '\u8d23\u4efb\u610f\u8bc6', score: <Score value={5} total={5} />, description: '\u5de5\u4f5c\u8ba4\u771f\u8d1f\u8d23' }\n ],\n footer: (item, index) => (\n <div style={{ padding: '4px 0', color: '#999', fontSize: '12px' }}>\n \u7b2c {index + 1} \u9879\n </div>\n )\n};\n\nconst listReportData = {\n list: [\n { label: '\ud83d\udc64 \u8bc4\u4f30\u5bf9\u8c61', content: '\u738b\u660e\u8fdc' },\n { label: '\ud83c\udfe2 \u6240\u5c5e\u90e8\u95e8', content: '\u6280\u672f\u7814\u53d1\u4e2d\u5fc3 - \u524d\u7aef\u67b6\u6784\u7ec4' },\n { label: '\ud83d\udcbc \u804c\u7ea7\u804c\u4f4d', content: '\u8d44\u6df1\u524d\u7aef\u5de5\u7a0b\u5e08\uff08P6+\uff09' },\n { label: '\ud83d\udcc5 \u5165\u804c\u65f6\u95f4', content: '2021\u5e743\u670815\u65e5' },\n { label: '\ud83d\udcca \u8bc4\u4f30\u5468\u671f', content: '2024\u5e74\u5ea6' },\n { label: '\ud83d\udd0d \u8bc4\u4f30\u65e5\u671f', content: '2025\u5e741\u670810\u65e5' },\n { label: '\ud83d\udc68\u200d\ud83d\udcbc \u8bc4\u4f30\u4eba', content: '\u6280\u672f\u603b\u76d1 - \u9648\u601d\u8fdc' },\n { label: '\ud83d\udccb \u8bc4\u4f30\u7ef4\u5ea6', content: '\u6838\u5fc3\u6280\u80fd\u3001\u9879\u76ee\u7ee9\u6548\u3001\u804c\u4e1a\u7d20\u517b' },\n { label: '\ud83d\udd27 \u8bc4\u4f30\u65b9\u6cd5', content: '\u4ee3\u7801\u5ba1\u67e5 + \u7ee9\u6548\u6570\u636e + 360\u5ea6\u8bc4\u4f30 + \u6280\u672f\u9762\u8bd5' }\n ]\n};\n\nconst partReportData = {\n list: [\n {\n label: '\u2728 \u6838\u5fc3\u4f18\u52bf',\n hasBgColor: true,\n content: '1. \u6280\u672f\u89c6\u91ce\u5f00\u9614\uff0c\u5bf9\u524d\u7aef\u6280\u672f\u6808\u6709\u7cfb\u7edf\u6027\u7406\u89e3\uff0c\u80fd\u591f\u4ece\u67b6\u6784\u5c42\u9762\u601d\u8003\u95ee\u9898\u30022. \u5b66\u4e60\u80fd\u529b\u5f3a\uff0c\u5feb\u901f\u638c\u63e1\u65b0\u6280\u672f\u5e76\u8f6c\u5316\u4e3a\u751f\u4ea7\u529b\uff0cAI\u5de5\u5177\u5e94\u7528\u6548\u679c\u663e\u8457\u30023. \u4ee3\u7801\u8d28\u91cf\u610f\u8bc6\u5f3a\uff0c\u6ce8\u91cd\u53ef\u7ef4\u62a4\u6027\u548c\u6269\u5c55\u6027\uff0c\u63a8\u52a8\u56e2\u961f\u4ee3\u7801\u89c4\u8303\u843d\u5730\u30024. \u5de5\u4f5c\u79ef\u6781\u4e3b\u52a8\uff0c\u4e3b\u52a8\u627f\u62c5\u590d\u6742\u4efb\u52a1\uff0c\u591a\u6b21\u89e3\u51b3\u5173\u952e\u6280\u672f\u96be\u9898\u3002'\n },\n {\n label: '\ud83d\udcc8 \u6210\u957f\u7a7a\u95f4',\n content: '1. \u5728\u6280\u672f\u7ba1\u7406\u548c\u56e2\u961f\u5e26\u9886\u65b9\u9762\u9700\u8981\u66f4\u591a\u5386\u7ec3\u30022. \u8de8\u90e8\u95e8\u534f\u4f5c\u65f6\u7684\u5546\u4e1a\u601d\u7ef4\u6709\u5f85\u63d0\u5347\uff0c\u9700\u8981\u66f4\u597d\u5730\u7406\u89e3\u4e1a\u52a1\u4ef7\u503c\u30023. \u6280\u672f\u6210\u679c\u7684\u53ef\u89c6\u5316\u5c55\u793a\u548c\u5f71\u54cd\u529b\u6253\u9020\u53ef\u4ee5\u8fdb\u4e00\u6b65\u52a0\u5f3a\u3002'\n },\n {\n label: '\ud83c\udfaf \u53d1\u5c55\u5efa\u8bae',\n content: '1. \u4e89\u53d6\u62c5\u4efb\u5c0f\u578b\u9879\u76ee\u7684Tech Lead\uff0c\u79ef\u7d2f\u56e2\u961f\u7ba1\u7406\u7ecf\u9a8c\u30022. \u52a0\u5f3a\u5bf9\u540e\u7aef\u3001\u8fd0\u7ef4\u76f8\u5173\u6280\u672f\u7684\u5b66\u4e60\uff0c\u5efa\u7acb\u5168\u6808\u6280\u672f\u89c6\u89d2\u30023. \u6bcf\u5b63\u5ea6\u7ec4\u7ec7\u81f3\u5c11\u4e00\u6b21\u6280\u672f\u5206\u4eab\uff0c\u63d0\u5347\u56e2\u961f\u6280\u672f\u6c1b\u56f4\u30024. \u53c2\u4e0e\u6280\u672f\u9762\u8bd5\u548c\u4eba\u624d\u8bc4\u4f30\uff0c\u953b\u70bc\u8bc6\u4eba\u7528\u4eba\u80fd\u529b\u30025. \u5173\u6ce8\u884c\u4e1a\u524d\u6cbf\u8d8b\u52bf\uff0c\u5b9a\u671f\u8f93\u51fa\u6280\u672f\u6587\u7ae0\u6216\u5f00\u6e90\u8d21\u732e\u3002'\n },\n {\n label: '\ud83d\udcda \u57f9\u517b\u8ba1\u5212',\n content: '1. Q2\u53c2\u52a0\u6280\u672f\u7ba1\u7406\u8fdb\u9636\u57f9\u8bad\u30022. Q3\u53c2\u4e0e\u5fae\u670d\u52a1\u67b6\u6784\u4e13\u9879\u5b66\u4e60\u30023. Q4\u627f\u62c5\u65b0\u4eba\u5bfc\u5e08\u89d2\u8272\u30024. \u5168\u5e74\u53c2\u4e0e\u81f3\u5c113\u4e2a\u6280\u672f\u5cf0\u4f1a\u6216\u5de5\u4f5c\u574a\u30025. \u5efa\u7acb\u4e2a\u4eba\u6280\u672f\u535a\u5ba2\uff0c\u6bcf\u6708\u81f3\u5c11\u8f93\u51fa1\u7bc7\u6280\u672f\u6587\u7ae0\u3002'\n }\n ]\n};\n\nconst BaseExample = () => {\n const [componentType, setComponentType] = useState('list');\n\n const renderComponent = () => {\n switch (componentType) {\n case 'list':\n return <Report.List report={listReportData} />;\n case 'result':\n return <Report.Result report={reportData} />;\n case 'table':\n return <Report.Table report={tableReportData} />;\n case 'part':\n return <Report.Part report={partReportData} />;\n default:\n return <Report.List report={listReportData} />;\n }\n };\n\n return (\n <Flex vertical gap={16}>\n {/* \u63a7\u5236\u9762\u677f */}\n <div style={{ background: '#f5f5f5', padding: '16px', borderRadius: '8px' }}>\n <span style={{ marginRight: 12 }}>\u5b50\u7ec4\u4ef6\u7c7b\u578b\uff1a</span>\n <Radio.Group value={componentType} onChange={(e) => setComponentType(e.target.value)}>\n <Radio.Button value=\"list\">Report.List</Radio.Button>\n <Radio.Button value=\"result\">Report.Result</Radio.Button>\n <Radio.Button value=\"table\">Report.Table</Radio.Button>\n <Radio.Button value=\"part\">Report.Part</Radio.Button>\n </Radio.Group>\n </div>\n\n {/* \u7ec4\u4ef6\u5c55\u793a\u533a */}\n <Space direction=\"vertical\" size={24}>\n <Report title=\"\ud83d\udcc4 \u5458\u5de5\u5e74\u5ea6\u7ee9\u6548\u8bc4\u4f30\u62a5\u544a\" subtitle=\"2024\u5e74\u5ea6 | \u6280\u672f\u7814\u53d1\u4e2d\u5fc3 | \u524d\u7aef\u67b6\u6784\u7ec4\">\n {renderComponent()}\n </Report>\n </Space>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/current-lib_info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u8bc4\u5206\u5c55\u793a",description:"\u652f\u6301\u81ea\u5b9a\u4e49\u603b\u5206\u548c\u95f4\u8ddd\u7684\u661f\u7ea7\u8bc4\u5206\u7ec4\u4ef6",code:'const { Score } = _InfoPage;\nconst { Flex, Badge, Card, Divider, Tag, Space } = antd;\n\nconst BaseExample = () => {\n return (\n <Flex vertical gap={16}>\n {/* \u57fa\u7840\u7528\u6cd5 */}\n <Card title="\u57fa\u7840\u8bc4\u5206" size="small">\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Flex gap={24} align="center">\n <span>\u4ea7\u54c1\u8bc4\u5206\uff1a</span>\n <Score value={5} />\n </Flex>\n <Flex gap={24} align="center">\n <span>\u670d\u52a1\u8d28\u91cf\uff1a</span>\n <Score value={4} />\n </Flex>\n <Flex gap={24} align="center">\n <span>\u7269\u6d41\u901f\u5ea6\uff1a</span>\n <Score value={3} />\n </Flex>\n <Flex gap={24} align="center">\n <span>\u6027\u4ef7\u6bd4\uff1a</span>\n <Score value={2} />\n </Flex>\n <Flex gap={24} align="center">\n <span>\u7528\u6237\u6ee1\u610f\uff1a</span>\n <Score value={1} />\n </Flex>\n </Space>\n </Card>\n\n <Divider />\n\n {/* \u81ea\u5b9a\u4e49\u603b\u5206 */}\n <Card title="\u81ea\u5b9a\u4e49\u603b\u5206" size="small">\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Flex gap={24} align="center">\n <span>3\u5206\u5236\uff1a</span>\n <Score value={0} total={3} />\n <Score value={1} total={3} />\n <Score value={2} total={3} />\n <Score value={3} total={3} />\n </Flex>\n <Flex gap={24} align="center">\n <span>4\u5206\u5236\uff1a</span>\n <Score value={1} total={4} />\n <Score value={2} total={4} />\n <Score value={3} total={4} />\n <Score value={4} total={4} />\n </Flex>\n <Flex gap={24} align="center">\n <span>5\u5206\u5236\uff1a</span>\n <Score value={2} total={5} />\n <Score value={3} total={5} />\n <Score value={4} total={5} />\n <Score value={5} total={5} />\n </Flex>\n </Space>\n </Card>\n\n <Divider />\n\n {/* \u65e0\u95f4\u8ddd */}\n <Card title="\u7d27\u51d1\u6a21\u5f0f\uff08gap=0\uff09" size="small">\n <Flex gap={24} align="center">\n <Score value={1} total={5} gap={0} />\n <Score value={2} total={5} gap={0} />\n <Score value={3} total={5} gap={0} />\n <Score value={4} total={5} gap={0} />\n <Score value={5} total={5} gap={0} />\n </Flex>\n </Card>\n\n <Divider />\n\n {/* \u4e1a\u52a1\u573a\u666f */}\n <Card title="\u4e1a\u52a1\u573a\u666f\u793a\u4f8b" size="small">\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <div style={{ padding: \'8px 0\' }}>\n <Flex justify="space-between" align="center" style={{ marginBottom: 8 }}>\n <span>\u5546\u54c1\u540d\u79f0</span>\n <Tag color="blue">\u65b0\u54c1\u4e0a\u5e02</Tag>\n </Flex>\n <Flex justify="space-between" align="center" style={{ marginBottom: 4 }}>\n <span style={{ color: \'#999\', fontSize: 12 }}>\u7528\u6237\u8bc4\u4ef7</span>\n <Badge count={128} showZero />\n </Flex>\n <Flex justify="space-between" align="center">\n <span style={{ fontSize: 14, fontWeight: 500 }}>Apple iPhone 15 Pro</span>\n <Score value={5} />\n </Flex>\n </div>\n\n <div style={{ padding: \'8px 0\', borderTop: \'1px solid #f0f0f0\' }}>\n <Flex justify="space-between" align="center" style={{ marginBottom: 4 }}>\n <span style={{ color: \'#999\', fontSize: 12 }}>\u5546\u54c1\u8bc4\u5206</span>\n <span style={{ fontSize: 12, color: \'#ff4d4f\' }}>4.8/5.0</span>\n </Flex>\n <Flex justify="space-between" align="center">\n <span style={{ fontSize: 14 }}>\u7efc\u5408\u5f97\u5206</span>\n <Score value={4} total={5} />\n </Flex>\n </div>\n </Space>\n </Card>\n\n <Divider />\n\n {/* \u6240\u6709\u8bc4\u5206\u5c55\u793a */}\n <Card title="\u5b8c\u6574\u8bc4\u5206\u5c55\u793a" size="small">\n <Flex wrap="wrap" gap={16}>\n {Array.from({ length: 6 }).map((_, index) => (\n <Flex key={index} vertical align="center" gap={4}>\n <Score value={index} />\n <span style={{ fontSize: 12, color: \'#999\' }}>{index}\u5206</span>\n </Flex>\n ))}\n </Flex>\n </Card>\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_InfoPage",packageName:"@kne/current-lib_info-page",component:a},{name:"antd",packageName:"antd",component:d}]},{title:"\u683c\u5f0f\u5316\u89c6\u56fe",description:"\u5c55\u793aformatView\u5de5\u5177\u51fd\u6570\u7684\u5404\u79cd\u683c\u5f0f\u5316\u7528\u6cd5",code:"const { formatView } = _InfoPage;\nconst { Flex, Space, Tag, Badge } = antd;\n\n// \u6f14\u793a formatView \u5de5\u5177\u51fd\u6570\u7684\u4f7f\u7528\nconst FormatDemo = () => {\n const demoData = {\n orderDate: '2024-01-15T10:30:00',\n deliveryDate: '2024-01-20',\n serviceDateRange: ['2024-01-01', '2024-12-31'],\n isVip: true,\n isActivated: false,\n userCount: 15678,\n totalAmount: 99999.99,\n discountRate: 0.085,\n completionRate: 85.67,\n phoneNumber: '13800138000'\n };\n\n // \u81ea\u5b9a\u4e49\u683c\u5f0f\u5316\u51fd\u6570\n const formatPhone = (val) => {\n if (!val) return '-';\n return val.replace(/(d{3})(d{4})(d{4})/, '$1-$2-$3');\n };\n\n return (\n <Flex vertical gap={16}>\n <div style={{ background: '#f5f5f5', padding: '16px', borderRadius: '8px' }}>\n <h4 style={{ margin: '0 0 12px 0' }}>formatView \u5de5\u5177\u51fd\u6570\u6f14\u793a</h4>\n <Space direction=\"vertical\" size={8} style={{ width: '100%' }}>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>datetime:</strong></span>\n <span>{formatView(demoData.orderDate, 'datetime')} \u2192 {formatView(demoData.orderDate, 'datetime-YYYY\u5e74MM\u6708DD\u65e5 HH:mm')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>date:</strong></span>\n <span>{formatView(demoData.deliveryDate, 'date')} \u2192 {formatView(demoData.deliveryDate, 'date-YYYY/MM/DD')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>dateRange:</strong></span>\n <span>{formatView(demoData.serviceDateRange, 'dateRange')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>boolean:</strong></span>\n <Flex gap={8}>\n <span>VIP\u5ba2\u6237: {formatView(demoData.isVip, 'boolean-\u662f/\u5426')}</span>\n <span>\u5df2\u6fc0\u6d3b: {formatView(demoData.isActivated, 'boolean-\u662f/\u5426')}</span>\n </Flex>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>number:</strong></span>\n <span>{formatView(demoData.userCount, 'number-useGrouping:true')} \u7528\u6237</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>money:</strong></span>\n <span style={{ color: '#f5222d', fontWeight: 'bold' }}>{formatView(demoData.totalAmount, 'money-\u5143')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>discount:</strong></span>\n <span>\u6298\u6263: {formatView(demoData.discountRate * 100, 'number-maximumFractionDigits:1-suffix:\u6298')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>percent:</strong></span>\n <span>\u5b8c\u6210\u7387: {formatView(demoData.completionRate, 'number-maximumFractionDigits:2-suffix:%')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span><strong>custom:</strong></span>\n <span>{formatPhone(demoData.phoneNumber)}</span>\n </Flex>\n </Space>\n </div>\n\n {/* \u5b9e\u9645\u5e94\u7528\u573a\u666f\u6f14\u793a */}\n <div style={{ background: '#fff', padding: '16px', borderRadius: '8px', border: '1px solid #e8e8e8' }}>\n <h4 style={{ margin: '0 0 12px 0' }}>\u5b9e\u9645\u5e94\u7528\u573a\u666f\uff1a\u8ba2\u5355\u8be6\u60c5</h4>\n <Flex vertical gap={8}>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u8ba2\u5355\u7f16\u53f7</span>\n <span>ORD20240115001</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u4e0b\u5355\u65f6\u95f4</span>\n <span>{formatView(demoData.orderDate, 'datetime')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u9884\u8ba1\u9001\u8fbe</span>\n <span>{formatView(demoData.deliveryDate, 'date-YYYY\u5e74MM\u6708DD\u65e5')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u670d\u52a1\u671f\u9650</span>\n <span>{formatView(demoData.serviceDateRange, 'dateRange')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u5ba2\u6237\u7c7b\u578b</span>\n <Tag color={demoData.isVip ? 'gold' : 'default'}>{formatView(demoData.isVip, 'boolean-VIP/\u666e\u901a')}</Tag>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u8ba2\u5355\u91d1\u989d</span>\n <span style={{ color: '#f5222d', fontSize: '18px', fontWeight: 'bold' }}>\n {formatView(demoData.totalAmount, 'money-\u5143')}\n </span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u4f18\u60e0\u6298\u6263</span>\n <span style={{ color: '#52c41a' }}>{formatView(demoData.discountRate * 100, 'number-maximumFractionDigits:1-suffix:\u6298')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u8ba2\u5355\u72b6\u6001</span>\n <Badge status={demoData.completionRate >= 100 ? 'success' : 'processing'} text={demoData.completionRate >= 100 ? '\u5df2\u5b8c\u6210' : '\u5904\u7406\u4e2d'} />\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u5b8c\u6210\u8fdb\u5ea6</span>\n <span>{formatView(demoData.completionRate, 'number-maximumFractionDigits:2-suffix:%')}</span>\n </Flex>\n <Flex justify=\"space-between\" align=\"center\">\n <span style={{ color: '#666' }}>\u8054\u7cfb\u7535\u8bdd</span>\n <span>{formatPhone(demoData.phoneNumber)}</span>\n </Flex>\n </Flex>\n </div>\n </Flex>\n );\n};\n\nconst BaseExample = () => {\n return (\n <Flex vertical gap={24}>\n <FormatDemo />\n </Flex>\n );\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_InfoPage",packageName:"@kne/current-lib_info-page",component:a},{name:"antd",packageName:"antd",component:d}]}]}}}}]);
2
+ //# sourceMappingURL=872.1eb2efaa.chunk.js.map