feat: 新增日志组件

src/components/common/log-drawer.vue

@@ -0,0 +1,195 @@
+<script setup lang="tsx">
+import { NCollapse, NCollapseItem } from 'naive-ui';
+import { defineComponent, ref, watch } from 'vue';
+
+defineOptions({
+  name: 'LogDrawer'
+});
+
+interface Props {
+  title?: string;
+  show?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '日志详情',
+  show: false
+});
+
+interface Emits {
+  (e: 'update:show', show: boolean): void;
+}
+
+const emit = defineEmits<Emits>();
+const visible = defineModel<boolean>('visible', {
+  default: true
+});
+
+const messageList = ref([
+  {
+    time_stamp: '1712021845601',
+    level: 'ERROR',
+    port: '8018',
+    throwable:
+      'java.lang.ArithmeticException: / by zero\n\tat com.example.easy.retry.service.impl.RemoteRetryServiceImpl.remoteSync(RemoteRetryServiceImpl.java:46)\n\tat java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)\n\tat java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:77)\n\tat java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)\n\tat java.base/java.lang.reflect.Method.invoke(Method.java:568)\n\tat org.springframework.aop.support.AopUtils.invokeJoinpointUsingReflection(AopUtils.java:343)\n\tat org.springframework.aop.framework.ReflectiveMethodInvocation.invokeJoinpoint(ReflectiveMethodInvocation.java:196)\n\tat org.springframework.aop.framework.ReflectiveMethodInvocation.proceed(ReflectiveMethodInvocation.java:163)\n\tat org.springframework.aop.framework.CglibAopProxy$CglibMethodInvocation.proceed(CglibAopProxy.java:756)\n\tat com.aizuda.easy.retry.client.core.intercepter.EasyRetryInterceptor.invoke(EasyRetryInterceptor.java:92)\n\tat org.springframework.aop.framework.ReflectiveMethodInvocation.proceed(ReflectiveMethodInvocation.java:184)\n\tat org.springframework.aop.framework.CglibAopProxy$CglibMethodInvocation.proceed(CglibAopProxy.java:756)\n\tat org.springframework.aop.framework.CglibAopProxy$DynamicAdvisedInterceptor.intercept(CglibAopProxy.java:708)\n\tat com.example.easy.retry.service.impl.RemoteRetryServiceImpl$$SpringCGLIB$$0.remoteSync(<generated>)\n\tat java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)\n\tat java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:77)\n\tat java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)\n\tat java.base/java.lang.reflect.Method.invoke(Method.java:568)\n\tat org.springframework.util.ReflectionUtils.invokeMethod(ReflectionUtils.java:281)\n\tat com.aizuda.easy.retry.client.core.strategy.ExecutorAnnotationMethod.doExecute(ExecutorAnnotationMethod.java:28)\n\tat com.aizuda.easy.retry.client.core.executor.AbstractRetryExecutor.doExecute(AbstractRetryExecutor.java:32)\n\tat com.aizuda.easy.retry.client.core.executor.AbstractRetryExecutor.execute(AbstractRetryExecutor.java:23)\n\tat com.aizuda.easy.retry.client.core.strategy.RemoteRetryStrategies.lambda$doGetCallable$2(RemoteRetryStrategies.java:89)\n\tat com.github.rholder.retry.AttemptTimeLimiters$NoAttemptTimeLimit.call(AttemptTimeLimiters.java:78)\n\tat com.github.rholder.retry.Retryer.call(Retryer.java:160)\n\tat com.aizuda.easy.retry.client.core.executor.GuavaRetryExecutor.call(GuavaRetryExecutor.java:56)\n\tat com.aizuda.easy.retry.client.core.strategy.AbstractRetryStrategies.openRetry(AbstractRetryStrategies.java:88)\n\tat com.aizuda.easy.retry.client.core.client.RetryEndPoint.dispatch(RetryEndPoint.java:99)\n\tat java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)\n\tat java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:77)',
+    host: '127.0.0.1',
+    location: 'com.aizuda.easy.retry.client.core.client.RetryEndPoint.dispatch(RetryEndPoint.java:124)',
+    thread: 'http-nio-8018-exec-5',
+    message: 'remote retry complete. count:[1] '
+  },
+  {
+    time_stamp: '1712021875512',
+    level: 'INFO',
+    port: '8018',
+    host: '127.0.0.1',
+    location: 'com.aizuda.easy.retry.client.core.client.RetryEndPoint.dispatch(RetryEndPoint.java:117)',
+    thread: 'http-nio-8018-exec-2',
+    message: 'remote retry complete. count:[4] result:[null]'
+  },
+  {
+    time_stamp: '1712021875512',
+    level: 'ERROR',
+    port: '8018',
+    host: '127.0.0.1',
+    location: 'com.aizuda.easy.retry.client.core.client.RetryEndPoint.dispatch(RetryEndPoint.java:124)',
+    thread: 'http-nio-8018-exec-2',
+    message: 'remote retry complete. count:[4] '
+  }
+]);
+
+const ThrowableComponent = defineComponent({
+  props: {
+    throwable: String
+  },
+  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,
+  val => {
+    visible.value = val;
+  },
+  { immediate: true }
+);
+
+const onUpdateShow = (value: boolean) => {
+  emit('update:show', value);
+};
+
+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">
+    <NDrawerContent title="日志详情" closable>
+      <div class="snail-log">
+        <div class="snail-log-scrollbar">
+          <code>
+            <pre
+              v-for="(message, index) in messageList"
+              :key="index"
+            ><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.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>
+          </code>
+        </div>
+      </div>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped lang="scss">
+.snail-log {
+  width: 100%;
+  height: 100%;
+
+  &-scrollbar {
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    @include scrollbar();
+
+    .n-divider:not(.n-divider--vertical) {
+      margin-top: 6px;
+      margin-bottom: 6px;
+    }
+
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      margin: 0;
+      font-size: 16px;
+      color: #333639;
+    }
+  }
+}
+
+.dark {
+  .snail-log {
+    background-color: #1e1f22;
+
+    pre {
+      color: #ffffffe6;
+    }
+  }
+}
+
+.log-hljs {
+  &-time {
+    color: #2db7f5;
+  }
+
+  &-level {
+    &-DEBUG {
+      color: #2647cc;
+    }
+
+    &-INFO {
+      color: #5c962c;
+    }
+
+    &-WARN {
+      color: #da9816;
+    }
+
+    &-ERROR {
+      color: #dc3f41;
+    }
+  }
+
+  &-thread {
+    color: #00a3a3;
+  }
+
+  &-location {
+    color: #a771bf;
+  }
+}
+</style>

src/router/elegant/imports.ts

@@ -30,8 +30,8 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   "function_toggle-auth": () => import("@/views/function/toggle-auth/index.vue"),
   group: () => import("@/views/group/index.vue"),
   home: () => import("@/views/home/index.vue"),
-  job_task: () => import("@/views/job/task/index.vue"),
   job_batch: () => import("@/views/job/batch/index.vue"),
+  job_task: () => import("@/views/job/task/index.vue"),
   manage_menu: () => import("@/views/manage/menu/index.vue"),
   manage_role: () => import("@/views/manage/role/index.vue"),
   "manage_user-detail": () => import("@/views/manage/user-detail/[id].vue"),

src/router/elegant/routes.ts

@@ -202,16 +202,6 @@ export const generatedRoutes: GeneratedRoute[] = [
       icon: 'eos-icons:cronjob'
     },
     children: [
-      {
-        name: 'job_task',
-        path: '/job/task',
-        component: 'view.job_task',
-        meta: {
-          title: 'job_task',
-          i18nKey: 'route.job_task',
-          icon: 'octicon:tasklist'
-        }
-      },
       {
         name: 'job_batch',
         path: '/job/batch',
@@ -221,6 +211,16 @@ export const generatedRoutes: GeneratedRoute[] = [
           i18nKey: 'route.job_batch',
           icon: 'carbon:batch-job'
         }
+      },
+      {
+        name: 'job_task',
+        path: '/job/task',
+        component: 'view.job_task',
+        meta: {
+          title: 'job_task',
+          i18nKey: 'route.job_task',
+          icon: 'octicon:tasklist'
+        }
       }
     ]
   },

src/router/elegant/transform.ts

@@ -114,14 +114,14 @@ function transformElegantRouteToVueRoute(
     }
 
   }
-
+  
   // add redirect to child
   if (children?.length && !vueRoute.redirect) {
     vueRoute.redirect = {
       name: children[0].name
     };
   }
-
+  
   if (children?.length) {
     const childRoutes = children.flatMap(child => transformElegantRouteToVueRoute(child, layouts, views));
 
@@ -164,8 +164,8 @@ const routeMap: RouteMap = {
   "group": "/group",
   "home": "/home",
   "job": "/job",
-  "job_task": "/job/task",
   "job_batch": "/job/batch",
+  "job_task": "/job/task",
   "login": "/login/:module(pwd-login)?",
   "manage": "/manage",
   "manage_menu": "/manage/menu",