style(sj_map_reduce): 优化任务列表参数展示方式

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

@@ -4,7 +4,7 @@ import type { DataTableColumn } 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 { isNotNull, parseArgsJson, translateOptions } from '@/utils/common';
 import {
   jobExecutorEnum,
   jobOperationReasonEnum,
@@ -236,19 +236,6 @@ const columns = ref<DataTableColumn<Workflow.JobBatchType>[]>([
     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">
           {{
@@ -258,7 +245,13 @@ const columns = ref<DataTableColumn<Workflow.JobBatchType>[]>([
               </NButton>
             ),
             default: () => (
-              <NCode class="max-h-300px overflow-auto" hljs={hljs} code={argsJson} language="json" show-line-numbers />
+              <NCode
+                class="max-h-300px overflow-auto"
+                hljs={hljs}
+                code={parseArgsJson(row.argsStr!)}
+                language="json"
+                show-line-numbers
+              />
             )
           }}
         </NPopover>

src/utils/common.ts

@@ -121,3 +121,45 @@ export function toggleHtmlClass(className: string) {
 export function isNotNull(value: any) {
   return value !== undefined && value !== null && value !== '' && value !== 'undefined';
 }
+
+export function parseArgsJson(value: string) {
+  let argsJson;
+
+  try {
+    argsJson = JSON.parse(value);
+
+    // A helper function to safely parse JSON strings that might contain escaped quotes
+    const safelyParseJson = (jsonString: string) => {
+      try {
+        return JSON.parse(jsonString.replaceAll('\\"', '"'));
+      } catch (error) {
+        return jsonString; // Return original string if it's not valid JSON
+      }
+    };
+
+    // Process jobParams if it exists
+    if (typeof argsJson.jobParams === 'string') {
+      argsJson.jobParams = safelyParseJson(argsJson.jobParams);
+    }
+
+    // Process mapResult if it exists
+    if (typeof argsJson.mapResult === 'string') {
+      argsJson.mapResult = safelyParseJson(argsJson.mapResult);
+    }
+
+    // Process maps if it exists
+    if (typeof argsJson.maps === 'string') {
+      argsJson.maps = safelyParseJson(argsJson.maps);
+
+      // If maps is a string that represents an array, parse it as JSON
+      if (argsJson.maps.startsWith('"[') && argsJson.maps.endsWith('"]')) {
+        argsJson.maps = safelyParseJson(argsJson.maps.slice(1, -1));
+      }
+    }
+  } catch {}
+
+  // Convert the object back to a pretty-printed JSON string
+  argsJson = JSON.stringify(argsJson, null, 4);
+
+  return argsJson;
+}

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

@@ -10,7 +10,7 @@ import {
   taskStatusRecord
 } from '@/constants/business';
 import { $t } from '@/locales';
-import { tagColor } from '@/utils/common';
+import { parseArgsJson, tagColor } from '@/utils/common';
 import { useTable } from '@/hooks/common/table';
 import { fetchGetJobTaskList } from '@/service/api';
 import { fetchJobLogList } from '@/service/api/log';
@@ -121,19 +121,6 @@ const { columns, data, loading, mobilePagination } = useTable({
       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">
             {{
@@ -146,7 +133,7 @@ const { columns, data, loading, mobilePagination } = useTable({
                 <NCode
                   class="max-h-300px overflow-auto"
                   hljs={hljs}
-                  code={argsJson}
+                  code={parseArgsJson(row.argsStr)}
                   language="json"
                   show-line-numbers
                 />