From 566a7e212f1b055dc4b2dd02ef086f604cbc9670 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Thu, 14 Dec 2023 10:47:10 +0800
Subject: [PATCH] perf: add line break to command display

---
 frontend/src/components/content/ContentLogPane.vue    | 4 ++--
 frontend/src/components/content_value/ContentSlog.vue | 4 ++--
 frontend/src/styles/content.scss                      | 6 ++++++
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/content/ContentLogPane.vue b/frontend/src/components/content/ContentLogPane.vue
index 0f2c7ba..561c032 100644
--- a/frontend/src/components/content/ContentLogPane.vue
+++ b/frontend/src/components/content/ContentLogPane.vue
@@ -76,10 +76,10 @@ const columns = computed(() => [
                 return h(
                     'div',
                     null,
-                    map(cmdList, (c) => h('div', null, c)),
+                    map(cmdList, (c) => h('div', { class: 'cmd-line' }, c)),
                 )
             }
-            return cmd
+            return h('div', { class: 'cmd-line' }, cmd)
         },
     },
     {
diff --git a/frontend/src/components/content_value/ContentSlog.vue b/frontend/src/components/content_value/ContentSlog.vue
index b07f4a1..168a2dd 100644
--- a/frontend/src/components/content_value/ContentSlog.vue
+++ b/frontend/src/components/content_value/ContentSlog.vue
@@ -89,10 +89,10 @@ const columns = computed(() => [
                 return h(
                     'div',
                     null,
-                    map(cmdList, (c) => h('div', null, c)),
+                    map(cmdList, (c) => h('div', { class: 'cmd-line' }, c)),
                 )
             }
-            return cmd
+            return h('div', { class: 'cmd-line' }, cmd)
         },
     },
     {
diff --git a/frontend/src/styles/content.scss b/frontend/src/styles/content.scss
index f7c4cc1..c524eb1 100644
--- a/frontend/src/styles/content.scss
+++ b/frontend/src/styles/content.scss
@@ -15,3 +15,9 @@
 
 .tab-content {
 }
+
+:deep(.cmd-line) {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: break-all;
+}