diff --git a/package.json b/package.json
index 0ff4556..21eed9a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kne-components/components-admin",
-  "version": "1.1.24",
+  "version": "1.1.25",
   "description": "用于实现一个后台管理系统的必要组件",
   "scripts": {
     "init": "husky",
@@ -89,6 +89,7 @@
     "@kne/captcha-button": "^1.0.1",
     "@kne/count-down": "^0.2.2",
     "@kne/is-empty": "^1.0.1",
+    "@kne/json-view": "^0.1.0",
     "@kne/react-icon": "^0.1.4",
     "@kne/react-intl": "^0.1.9",
     "@kne/react-org-chart": "^0.1.6",
diff --git a/src/components/Task/Actions/ErrorDetail.js b/src/components/Task/Actions/ErrorDetail.js
index fa32d7b..ed37684 100644
--- a/src/components/Task/Actions/ErrorDetail.js
+++ b/src/components/Task/Actions/ErrorDetail.js
@@ -1,8 +1,9 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
 import { Button } from 'antd';
-import style from '../style.module.scss';
 import withLocale from '../withLocale';
 import { useIntl } from '@kne/react-intl';
+import JsonView from '@kne/json-view';
+import '@kne/json-view/dist/index.css';
 
 const ErrorDetail = createWithRemoteLoader({
   modules: ['components-core:Modal@useModal', 'components-core:InfoPage']
@@ -21,14 +22,10 @@ const ErrorDetail = createWithRemoteLoader({
           children: (
             <InfoPage>
               <InfoPage.Part title={formatMessage({ id: 'InputParams' })}>
-                <div className={style['error-box']}>
-                  <pre>{JSON.stringify(data.input, null, 2)}</pre>
-                </div>
+                <JsonView data={data.input} collapsedFrom={1} />
               </InfoPage.Part>
               <InfoPage.Part title={formatMessage({ id: 'ErrorInfo' })}>
-                <div className={style['error-box']}>
-                  <pre>{JSON.stringify(data.error, null, 2)}</pre>
-                </div>
+                <JsonView data={data.error} collapsedFrom={1} />
               </InfoPage.Part>
             </InfoPage>
           )
diff --git a/src/components/Task/Actions/ResultDetail.js b/src/components/Task/Actions/ResultDetail.js
index 3f8b0d5..9659664 100644
--- a/src/components/Task/Actions/ResultDetail.js
+++ b/src/components/Task/Actions/ResultDetail.js
@@ -1,41 +1,40 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
 import { Button } from 'antd';
-import style from '../style.module.scss';
 import withLocale from '../withLocale';
 import { useIntl } from '@kne/react-intl';
+import JsonView from '@kne/json-view';
+import '@kne/json-view/dist/index.css';
 
 const ResultDetail = createWithRemoteLoader({
   modules: ['components-core:Modal@useModal', 'components-core:InfoPage']
-})(withLocale(({ remoteModules, data, ...props }) => {
-  const [useModal, InfoPage] = remoteModules;
-  const { formatMessage } = useIntl();
-  const modal = useModal();
+})(
+  withLocale(({ remoteModules, data, ...props }) => {
+    const [useModal, InfoPage] = remoteModules;
+    const { formatMessage } = useIntl();
+    const modal = useModal();
 
-  return (
-    <Button
-      {...props}
-      onClick={() => {
-        modal({
-          title: formatMessage({ id: 'TaskResultTitle' }),
-          footer: null,
-          children: (
-            <InfoPage>
-              <InfoPage.Part title={formatMessage({ id: 'InputParams' })}>
-                <div className={style['error-box']}>
-                  <pre>{JSON.stringify(data.input, null, 2)}</pre>
-                </div>
-              </InfoPage.Part>
-              <InfoPage.Part title={formatMessage({ id: 'OutputResult' })}>
-                <div className={style['error-box']}>
-                  <pre>{JSON.stringify(data.output, null, 2)}</pre>
-                </div>
-              </InfoPage.Part>
-            </InfoPage>
-          )
-        });
-      }}
-    />
-  );
-}));
+    return (
+      <Button
+        {...props}
+        onClick={() => {
+          modal({
+            title: formatMessage({ id: 'TaskResultTitle' }),
+            footer: null,
+            children: (
+              <InfoPage>
+                <InfoPage.Part title={formatMessage({ id: 'InputParams' })}>
+                  <JsonView data={data.input} collapsedFrom={1} />
+                </InfoPage.Part>
+                <InfoPage.Part title={formatMessage({ id: 'OutputResult' })}>
+                  <JsonView data={data.output} collapsedFrom={1} />
+                </InfoPage.Part>
+              </InfoPage>
+            )
+          });
+        }}
+      />
+    );
+  })
+);
 
 export default ResultDetail;
diff --git a/src/components/Task/Actions/ViewLogs.js b/src/components/Task/Actions/ViewLogs.js
index 3f3989e..e02c568 100644
--- a/src/components/Task/Actions/ViewLogs.js
+++ b/src/components/Task/Actions/ViewLogs.js
@@ -3,6 +3,8 @@ import { Button } from 'antd';
 import style from '../style.module.scss';
 import withLocale from '../withLocale';
 import { useIntl } from '@kne/react-intl';
+import JsonView from '@kne/json-view';
+import '@kne/json-view/dist/index.css';
 
 const ViewLogs = createWithRemoteLoader({
   modules: ['components-core:Modal@useModal', 'components-core:InfoPage@Flow']
@@ -30,11 +32,7 @@ const ViewLogs = createWithRemoteLoader({
         type: 'content',
         render: data => {
           if (!data) return null;
-          return (
-            <div className={style['error-box']}>
-              <pre>{typeof data === 'string' ? data : JSON.stringify(data, null, 2)}</pre>
-            </div>
-          );
+          return <JsonView data={data} collapsedFrom={1} />;
         }
       }
     ];