style(sj_map_reduce): 优化工作流批次参数详情展示方式

package.json

@@ -60,6 +60,7 @@
     "clipboard": "2.0.11",
     "dayjs": "1.11.11",
     "echarts": "5.5.0",
+    "highlight.js": "^11.9.0",
     "lodash-es": "4.17.21",
     "naive-ui": "2.38.2",
     "nprogress": "0.2.0",

pnpm-lock.yaml

@@ -53,6 +53,9 @@ importers:
       echarts:
         specifier: 5.5.0
         version: 5.5.0
+      highlight.js:
+        specifier: ^11.9.0
+        version: 11.9.0
       lodash-es:
         specifier: 4.17.21
         version: 4.17.21

src/components/common/code-mirror.vue

@@ -103,7 +103,13 @@ const theme = computed(() => {
 watch(
   () => nodeExpression.value,
   val => {
-    emit('update:modelValue', val);
+    let value = val;
+    if (props.lang === 'json') {
+      try {
+        value = JSON.stringify(JSON.parse(val));
+      } catch {}
+    }
+    emit('update:modelValue', value);
   }
 );
 </script>

src/components/workflow/modules/common/detail-card.vue

@@ -1,7 +1,9 @@
 <script setup lang="tsx">
 import { nextTick, ref, useSlots, watch } from 'vue';
 import type { DataTableColumn } from 'naive-ui';
-import { NButton, NTag } from 'naive-ui';
+import { NButton, NCode, NPopover, NTag } from 'naive-ui';
+import hljs from 'highlight.js/lib/core';
+import json from 'highlight.js/lib/languages/json';
 import { isNotNull, translateOptions } from '@/utils/common';
 import {
   jobExecutorEnum,
@@ -19,6 +21,8 @@ defineOptions({
   name: 'DetailCard'
 });
 
+hljs.registerLanguage('json', json);
+
 interface Props {
   id?: string;
   ids?: string[];
@@ -168,7 +172,7 @@ const columns = ref<DataTableColumn<Workflow.JobBatchType>[]>([
     width: 64,
     render: row => {
       return (
-        <NButton type="info" text onClick={() => getLogRows(row)}>
+        <NButton type="primary" text onClick={() => getLogRows(row)}>
           <span class="w-28px ws-break-spaces">{`查看\n日志`}</span>
         </NButton>
       );
@@ -178,18 +182,21 @@ const columns = ref<DataTableColumn<Workflow.JobBatchType>[]>([
     key: 'id',
     title: $t('page.jobBatch.jobTask.id'),
     align: 'left',
+    titleAlign: 'center',
     minWidth: 64
   },
   {
     key: 'groupName',
     title: $t('page.jobBatch.jobTask.groupName'),
     align: 'left',
-    minWidth: 120
+    titleAlign: 'center',
+    minWidth: 180
   },
   {
     key: 'taskStatus',
     title: $t('page.jobBatch.jobTask.taskStatus'),
     align: 'left',
+    titleAlign: 'center',
     minWidth: 80,
     render: row => {
       if (row.taskStatus === null) {
@@ -211,7 +218,8 @@ const columns = ref<DataTableColumn<Workflow.JobBatchType>[]>([
     key: 'clientInfo',
     title: $t('page.jobBatch.jobTask.clientInfo'),
     align: 'left',
-    minWidth: 120,
+    titleAlign: 'center',
+    minWidth: 150,
     render: row => {
       if (row.clientInfo) {
         const parts = row.clientInfo?.split('@');
@@ -224,25 +232,58 @@ const columns = ref<DataTableColumn<Workflow.JobBatchType>[]>([
   {
     key: 'argsStr',
     title: $t('page.jobBatch.jobTask.argsStr'),
-    align: 'left',
+    align: 'center',
-    minWidth: 120
+    titleAlign: 'center',
+    minWidth: 120,
+    render: row => {
+      let argsJson = JSON.parse(row.argsStr!);
+
+      try {
+        if (argsJson.jobParams) {
+          argsJson.jobParams = JSON.parse(argsJson.jobParams.replaceAll('\\"', '"'));
+        }
+        if (argsJson.mapResult) {
+          argsJson.mapResult = JSON.parse(argsJson.mapResult.replaceAll('\\"', '"'));
+        }
+      } catch {}
+
+      argsJson = JSON.stringify(argsJson, null, '    ');
+
+      return (
+        <NPopover trigger="click">
+          {{
+            trigger: () => (
+              <NButton type="primary" text>
+                <span class="w-28px ws-break-spaces">{`查看\n参数`}</span>
+              </NButton>
+            ),
+            default: () => (
+              <NCode class="max-h-300px overflow-auto" hljs={hljs} code={argsJson} language="json" show-line-numbers />
+            )
+          }}
+        </NPopover>
+      );
+    }
   },
   {
     key: 'resultMessage',
     title: $t('page.jobBatch.jobTask.resultMessage'),
     align: 'left',
+    titleAlign: 'center',
     minWidth: 120
   },
   {
     key: 'retryCount',
     title: $t('page.jobBatch.jobTask.retryCount'),
     align: 'left',
+    titleAlign: 'center',
     minWidth: 64
   },
   {
     key: 'createDt',
     title: $t('page.jobBatch.jobTask.createDt'),
     align: 'left',
+    titleAlign: 'center',
     minWidth: 120
   }
 ]);

src/views/job/batch/modules/job-batch-detail-drawer.vue

@@ -1,5 +1,7 @@
 <script setup lang="tsx">
-import { NButton, NTag } from 'naive-ui';
+import { NButton, NCode, NPopover, NTag } from 'naive-ui';
+import hljs from 'highlight.js/lib/core';
+import json from 'highlight.js/lib/languages/json';
 import { onBeforeUnmount, ref } from 'vue';
 import {
   executorTypeRecord,
@@ -17,6 +19,8 @@ defineOptions({
   name: 'JobBatchDetailDrawer'
 });
 
+hljs.registerLanguage('json', json);
+
 interface Props {
   /** row data */
   rowData?: Api.JobBatch.JobBatch | null;
@@ -73,7 +77,7 @@ const { columns, data, loading, mobilePagination } = useTable({
       key: 'groupName',
       title: $t('page.jobBatch.jobTask.groupName'),
       align: 'left',
-      minWidth: 120
+      minWidth: 180
     },
     {
       key: 'taskStatus',
@@ -100,7 +104,7 @@ const { columns, data, loading, mobilePagination } = useTable({
       key: 'clientInfo',
       title: $t('page.jobBatch.jobTask.clientInfo'),
       align: 'left',
-      minWidth: 120,
+      minWidth: 150,
       render: row => {
         if (row.clientInfo) {
           const parts = row.clientInfo?.split('@');
@@ -113,8 +117,44 @@ const { columns, data, loading, mobilePagination } = useTable({
     {
       key: 'argsStr',
       title: $t('page.jobBatch.jobTask.argsStr'),
-      align: 'left',
+      align: 'center',
-      minWidth: 120
+      titleAlign: 'center',
+      minWidth: 120,
+      render: row => {
+        let argsJson = JSON.parse(row.argsStr!);
+
+        try {
+          if (argsJson.jobParams) {
+            argsJson.jobParams = JSON.parse(argsJson.jobParams.replaceAll('\\"', '"'));
+          }
+          if (argsJson.mapResult) {
+            argsJson.mapResult = JSON.parse(argsJson.mapResult.replaceAll('\\"', '"'));
+          }
+        } catch {}
+
+        argsJson = JSON.stringify(argsJson, null, '    ');
+
+        return (
+          <NPopover trigger="click">
+            {{
+              trigger: () => (
+                <NButton type="primary" text>
+                  <span class="w-28px ws-break-spaces">{`查看\n参数`}</span>
+                </NButton>
+              ),
+              default: () => (
+                <NCode
+                  class="max-h-300px overflow-auto"
+                  hljs={hljs}
+                  code={argsJson}
+                  language="json"
+                  show-line-numbers
+                />
+              )
+            }}
+          </NPopover>
+        );
+      }
     },
     {
       key: 'resultMessage',