From 4e6b00c1b135d03be16f76ea931a49a6219bec70 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@163.com>
Date: Wed, 16 Apr 2025 11:05:00 +0800
Subject: [PATCH] feat: add LogsView component for displaying logs

- Introduced a new LogsView.vue component to present logs in a structured format.
- Implemented functionality to scroll to the bottom of the logs view for better user experience.
- Enhanced log processing to trim and format log entries for clarity.
---
 .gitignore                                    |  1 -
 .../src/components/ui/logs/LogsView.vue       | 47 +++++++++++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 frontend/crawlab-ui/src/components/ui/logs/LogsView.vue

diff --git a/.gitignore b/.gitignore
index 7e4dd63c..277d7b93 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,7 +2,6 @@
 .vscode/
 .DS_Store
 node_modules/
-logs/
 tmp/
 _book/
 *.lock
diff --git a/frontend/crawlab-ui/src/components/ui/logs/LogsView.vue b/frontend/crawlab-ui/src/components/ui/logs/LogsView.vue
new file mode 100644
index 00000000..8f19a0ea
--- /dev/null
+++ b/frontend/crawlab-ui/src/components/ui/logs/LogsView.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+const props = defineProps<{
+  logs?: string[];
+}>();
+
+const content = computed(() => {
+  const { logs } = props;
+  const data: string[] = [];
+  logs?.forEach(l => {
+    l.trim()
+      .split(/[\n\r]/)
+      .map(line => {
+        data.push(line.trim());
+      });
+  });
+  return data.join('\n');
+});
+
+const logsViewRef = ref<HTMLDivElement>();
+
+const scrollToBottom = () => {
+  logsViewRef.value?.scrollTo(0, logsViewRef.value?.scrollHeight);
+};
+
+defineExpose({
+  scrollToBottom,
+});
+defineOptions({ name: 'ClLogsView' });
+</script>
+
+<template>
+  <div class="logs-view" ref="logsViewRef">
+    <pre>{{ content }}</pre>
+  </div>
+</template>
+
+<style scoped>
+.logs-view {
+  border: 1px solid rgb(244, 244, 245);
+  padding: 10px;
+  overflow: auto;
+  min-height: 480px;
+  max-height: 560px;
+}
+</style>