From dbb5969e3401db6a22d152872450c817d9c4ae71 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Fri, 8 Sep 2023 10:54:28 +0800
Subject: [PATCH] perf: support view as base64 text for the key with type
 string

---
 .../content_value/ContentValueString.vue      | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index 28ed166..96ab28d 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@@ -48,23 +48,42 @@ const viewOption = [
 ]
 const viewAs = ref(types.PLAIN_TEXT)
 
-const jsonValue = computed(() => {
+const getJsonValue = () => {
     try {
         const jsonObj = JSON.parse(props.value)
         return JSON.stringify(jsonObj, null, 2)
     } catch (e) {
         return props.value
     }
-})
+}
+
+const getBase64Value = () => {
+    try {
+        return atob(props.value)
+    } catch (e) {
+        return props.value
+    }
+}
+
+const getBase64JsonValue = () => {
+    try {
+        const text = atob(props.value)
+        const jsonObj = JSON.parse(text)
+        return JSON.stringify(jsonObj, null, 2)
+    } catch (e) {
+        return props.value
+    }
+}
 
 const autoDetectFormat = () => {
     // auto check format when loaded
-    if (IsJson(jsonValue.value)) {
+    if (IsJson(props.value)) {
         viewAs.value = types.JSON
     } else {
         viewAs.value = types.PLAIN_TEXT
     }
 }
+
 onMounted(() => {
     autoDetectFormat()
 })
@@ -85,11 +104,11 @@ const viewValue = computed(() => {
         case types.PLAIN_TEXT:
             return props.value
         case types.JSON:
-            return jsonValue.value
+            return getJsonValue()
         case types.BASE64_TO_TEXT:
-            return props.value
+            return getBase64Value()
         case types.BASE64_TO_JSON:
-            return props.value
+            return getBase64JsonValue()
         default:
             return props.value
     }