From 988e8e3339b5a4cef61aeb0419535fc2b7baf423 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Sat, 2 Dec 2023 00:25:22 +0800
Subject: [PATCH] fix: the value is not updated after refreshing #90

---
 .../content_value/ContentValueString.vue      | 39 +++++++++++--------
 .../content_value/ContentValueWrapper.vue     |  3 --
 .../src/components/sidebar/BrowserPane.vue    |  2 +-
 frontend/src/stores/tab.js                    |  2 +-
 4 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index 90af829..eba984e 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@@ -77,25 +77,31 @@ const displayValue = computed(() => {
 watch(
     () => props.value,
     (val, oldVal) => {
-        if (val !== undefined && oldVal !== undefined) {
+        if (val !== undefined) {
             onFormatChanged(viewAs.decode, viewAs.format)
         }
     },
 )
 
+const converting = ref(false)
 const onFormatChanged = async (decode = '', format = '') => {
-    const {
-        value,
-        decode: retDecode,
-        format: retFormat,
-    } = await browserStore.convertValue({
-        value: props.value,
-        decode,
-        format,
-    })
-    editingContent.value = viewAs.value = value
-    viewAs.decode = decode || retDecode
-    viewAs.format = format || retFormat
+    try {
+        converting.value = true
+        const {
+            value,
+            decode: retDecode,
+            format: retFormat,
+        } = await browserStore.convertValue({
+            value: props.value,
+            decode,
+            format,
+        })
+        editingContent.value = viewAs.value = value
+        viewAs.decode = decode || retDecode
+        viewAs.format = format || retFormat
+    } finally {
+        converting.value = false
+    }
 }
 
 /**
@@ -152,9 +158,10 @@ const onSave = async () => {
 defineExpose({
     reset: () => {
         viewAs.value = ''
+        viewAs.decode = ''
+        viewAs.format = ''
         editingContent.value = ''
     },
-    beforeShow: () => onFormatChanged(),
 })
 </script>
 
@@ -195,9 +202,9 @@ defineExpose({
             </n-button-group>
         </div>
         <div class="value-wrapper value-item-part flex-item-expand flex-box-v">
-            <n-spin :show="props.loading" />
+            <n-spin :show="props.loading || converting" />
             <content-editor
-                v-show="!props.loading"
+                v-show="!(props.loading || converting)"
                 :content="displayValue"
                 :language="viewLanguage"
                 :loading="props.loading"
diff --git a/frontend/src/components/content_value/ContentValueWrapper.vue b/frontend/src/components/content_value/ContentValueWrapper.vue
index 1c5f3c0..b50f9a0 100644
--- a/frontend/src/components/content_value/ContentValueWrapper.vue
+++ b/frontend/src/components/content_value/ContentValueWrapper.vue
@@ -156,9 +156,6 @@ const initContent = async () => {
             contentRef.value?.reset()
         }
         await loadData(true, false, '')
-        if (contentRef.value?.beforeShow != null) {
-            await contentRef.value?.beforeShow()
-        }
     } finally {
         initializing.value = false
     }
diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue
index 9f6ae5e..131fe58 100644
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/frontend/src/components/sidebar/BrowserPane.vue
@@ -269,7 +269,7 @@ onMounted(() => onReload())
                     size="20"
                     t-tooltip="interface.load_all"
                     @click="onLoadAll" />
-                <div class="flex-item-expand" />
+                <div class="flex-item-expand" style="min-width: 10px" />
                 <icon-button
                     :button-class="['nav-pane-func-btn']"
                     :icon="Delete"
diff --git a/frontend/src/stores/tab.js b/frontend/src/stores/tab.js
index 1966216..37cdeb5 100644
--- a/frontend/src/stores/tab.js
+++ b/frontend/src/stores/tab.js
@@ -235,7 +235,7 @@ const useTabStore = defineStore('tab', {
                     tabData.value = assign(value, tabData.value || {})
                 }
             } else {
-                tabData.value = value || []
+                tabData.value = value
             }
         },