fix(sj_map_reduce): 修复日志弹窗打开时间较长问题

src/components/common/log-drawer.vue

@@ -99,13 +99,7 @@ function openNewTab() {
 </script>
 
 <template>
-  <NDrawer
+  <NDrawer v-if="drawer" v-model:show="visible" width="100%" display-directive="if" @update:show="onUpdateShow">
-    v-if="drawer && modelValue.length > 0"
-    v-model:show="visible"
-    width="100%"
-    display-directive="if"
-    @update:show="onUpdateShow"
-  >
     <NDrawerContent closable>
       <template #header>
         <div class="flex-center">
@@ -116,22 +110,24 @@ function openNewTab() {
       <div class="snail-log bg-#fafafc p-16px dark:bg-#000">
         <div class="snail-log-scrollbar">
           <code>
-            <pre
+            <NVirtualList class="virtual-list" :item-size="42" :items="modelValue">
-              v-for="(message, index) in modelValue"
+              <template #default="{ item: message, index }">
-              :key="index"
+                <pre><NDivider v-if="index !== 0" /><span class="log-hljs-time inline-block">{{timestampToDate(message.time_stamp)}}</span><span :class="`log-hljs-level-${message.level}`" class="ml-12px mr-12px inline-block">{{`${message.level}`}}</span><span class="log-hljs-thread mr-12px inline-block">{{ `[${message.host}:${message.port}]` }}</span><span class="log-hljs-thread mr-12px inline-block">{{`[${message.thread}]`}}</span><span class="log-hljs-location">{{`${message.location}: \n`}}</span> -<span class="pl-6px">{{`${message.message}`}}</span><ThrowableComponent :throwable="message.throwable" /></pre>
-            ><NDivider v-if="index !== 0" /><span class="log-hljs-time inline-block">{{timestampToDate(message.time_stamp)}}</span><span :class="`log-hljs-level-${message.level}`" class="ml-12px mr-12px inline-block">{{`${message.level}`}}</span><span class="log-hljs-thread mr-12px inline-block">{{ `[${message.host}:${message.port}]` }}</span><span class="log-hljs-thread mr-12px inline-block">{{`[${message.thread}]`}}</span><span class="log-hljs-location">{{`${message.location}: \n`}}</span> -<span class="pl-6px">{{`${message.message}`}}</span><ThrowableComponent :throwable="message.throwable" /></pre>
+              </template>
+            </NVirtualList>
           </code>
         </div>
       </div>
     </NDrawerContent>
   </NDrawer>
-  <div v-if="!drawer && modelValue.length > 0" class="snail-log">
+  <div v-if="!drawer" class="snail-log">
     <div class="snail-log-scrollbar">
       <code>
-        <pre
+        <NVirtualList class="virtual-list" :item-size="42" :items="modelValue">
-          v-for="(message, index) in modelValue"
+          <template #default="{ item: message, index }">
-          :key="index"
+            <pre><NDivider v-if="index !== 0" /><span class="log-hljs-time inline-block">{{timestampToDate(message.time_stamp)}}</span><span :class="`log-hljs-level-${message.level}`" class="ml-12px mr-12px inline-block">{{`${message.level}`}}</span><span class="log-hljs-thread mr-12px inline-block">{{ `[${message.host}:${message.port}]` }}</span><span class="log-hljs-thread mr-12px inline-block">{{`[${message.thread}]`}}</span><span class="log-hljs-location">{{`${message.location}: \n`}}</span> -<span class="pl-6px">{{`${message.message}`}}</span><ThrowableComponent :throwable="message.throwable" /></pre>
-        ><NDivider v-if="index !== 0" /><span class="log-hljs-time">{{timestampToDate(message.time_stamp)}}</span><span :class="`log-hljs-level-${message.level}`">{{`\t${message.level}\t`}}</span><span class="log-hljs-thread">{{ `[${message.host}:${message.port}]\t` }}</span><span class="log-hljs-thread">{{`[${message.thread}]\t`}}</span><span class="log-hljs-location">{{`${message.location}: \n`}}</span> -<span class="pl-6px">{{`${message.message}\n`}}</span><ThrowableComponent :throwable="message.throwable" /></pre>
+          </template>
+        </NVirtualList>
       </code>
     </div>
   </div>
@@ -142,6 +138,10 @@ function openNewTab() {
   width: 100%;
   height: 100%;
 
+  .virtual-list {
+    max-height: calc(100vh - 101px);
+  }
+
   &-scrollbar {
     padding: 0;
     height: 100%;

src/components/workflow/modules/common/flow-log-drawer.vue

@@ -1,6 +1,5 @@
 <script setup lang="tsx">
-import { NCollapse, NCollapseItem } from 'naive-ui';
+import { onBeforeUnmount, ref, watch } from 'vue';
-import { defineComponent, onBeforeUnmount, ref, watch } from 'vue';
 import { $t } from '@/locales';
 import { fetchJobLogList } from '@/service/api/log';
 
@@ -10,58 +9,21 @@ defineOptions({
 
 interface Props {
   title?: string;
-  show?: boolean;
   taskData: Workflow.JobTaskType;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   title: $t('workflow.node.log.title'),
-  show: false,
   modelValue: () => []
 });
 
-interface Emits {
+const show = defineModel<boolean>('show', {
-  (e: 'update:show', show: boolean): void;
-}
-
-const emit = defineEmits<Emits>();
-
-const visible = defineModel<boolean>('visible', {
   default: true
 });
 
-const ThrowableComponent = defineComponent({
-  props: {
-    throwable: {
-      type: String,
-      default: ''
-    }
-  },
-  setup(thProps) {
-    return () => {
-      if (!thProps.throwable) {
-        return <></>;
-      }
-      const firstLine = thProps.throwable.match(/^.+/m);
-      if (!firstLine) {
-        return <></>;
-      }
-      const restOfText = thProps.throwable.replace(/^.+(\n|$)/m, '');
-      return (
-        <NCollapse>
-          <NCollapseItem title={firstLine[0]} name="1">
-            {`${restOfText}`}
-          </NCollapseItem>
-        </NCollapse>
-      );
-    };
-  }
-});
-
 watch(
-  () => props.show,
+  () => show.value,
   val => {
-    visible.value = val;
     if (val) {
       getLogList();
     }
@@ -69,10 +31,6 @@ watch(
   { immediate: true }
 );
 
-const onUpdateShow = (value: boolean) => {
-  emit('update:show', value);
-};
-
 const logList = ref<Api.JobLog.JobMessage[]>([]);
 const interval = ref<NodeJS.Timeout>();
 const controller = new AbortController();
@@ -114,35 +72,10 @@ const stopLog = () => {
 onBeforeUnmount(() => {
   stopLog();
 });
-
-function timestampToDate(timestamp: string): string {
-  const date = new Date(Number.parseInt(timestamp?.toString(), 10));
-  const year = date.getFullYear();
-  const month =
-    (date.getMonth() + 1)?.toString().length === 1 ? `0${date.getMonth() + 1}` : (date.getMonth() + 1)?.toString();
-  const day = date.getDate()?.toString().length === 1 ? `0${date.getDate()}` : date.getDate()?.toString();
-  const hours = date.getHours()?.toString().length === 1 ? `0${date.getHours()}` : date.getHours()?.toString();
-  const minutes = date.getMinutes()?.toString().length === 1 ? `0${date.getMinutes()}` : date.getMinutes()?.toString();
-  const seconds = date.getSeconds()?.toString().length === 1 ? `0${date.getSeconds()}` : date.getSeconds()?.toString();
-  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${date.getMilliseconds()}`;
-}
 </script>
 
 <template>
-  <NDrawer v-model:show="visible" width="100%" display-directive="if" @update:show="onUpdateShow">
+  <LogDrawer v-model="logList" v-model:show="show" :title="title" />
-    <NDrawerContent :title="title" closable>
-      <div class="snail-log bg-#fafafc p-16px dark:bg-#000">
-        <div class="snail-log-scrollbar">
-          <code>
-            <pre
-              v-for="(message, index) in logList"
-              :key="index"
-            ><NDivider v-if="index !== 0" /><span class="log-hljs-time inline-block">{{timestampToDate(message.time_stamp)}}</span><span :class="`log-hljs-level-${message.level}`" class="ml-12px mr-12px inline-block">{{`${message.level}`}}</span><span class="log-hljs-thread mr-12px inline-block">{{ `[${message.host}:${message.port}]` }}</span><span class="log-hljs-thread mr-12px inline-block">{{`[${message.thread}]`}}</span><span class="log-hljs-location">{{`${message.location}: \n`}}</span> -<span class="pl-6px">{{`${message.message}`}}</span><ThrowableComponent :throwable="message.throwable" /></pre>
-          </code>
-        </div>
-      </div>
-    </NDrawerContent>
-  </NDrawer>
 </template>
 
 <style scoped lang="scss">

src/views/job/batch/index.vue

@@ -169,12 +169,9 @@ const { columnChecks, columns, data, getData, loading, mobilePagination, searchP
                   {{
                     default: () => $t('common.confirmStop'),
                     trigger: () => (
-                      <>
+                      <NButton type="error" text ghost size="small">
-                        <n-divider vertical />
+                        {$t('common.stop')}
-                        <NButton type="error" text ghost size="small">
+                      </NButton>
-                          {$t('common.stop')}
-                        </NButton>
-                      </>
                     )
                   }}
                 </NPopconfirm>
@@ -206,7 +203,7 @@ const { columnChecks, columns, data, getData, loading, mobilePagination, searchP
         };
         return (
           <div class="flex-center gap-8px">
-            <NButton type="primary" text ghost size="small" onClick={handleLog}>
+            <NButton type="primary" text ghost size="small" onClick={() => handleLog(row)}>
               {$t('common.log')}
             </NButton>
             {stopBtn()}
@@ -218,7 +215,8 @@ const { columnChecks, columns, data, getData, loading, mobilePagination, searchP
   ]
 });
 
-function handleLog() {
+function handleLog(row: Api.JobBatch.JobBatch) {
+  detailData.value = row;
   setDetailLog(true);
   openDetail();
 }

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

@@ -31,7 +31,7 @@ const logShow = ref(false);
 const store = useLogStore();
 
 async function openLog(row: Api.Job.JobTask) {
-  store.setTaskInfo(props.rowData!.jobName, row.taskBatchId);
+  store.setTaskInfo(props.rowData?.jobName || '', row.taskBatchId);
   logShow.value = true;
   taskData.value = row;
   await getLogList();