fix: the value is not updated after refreshing #90

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"

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
     }

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"

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
             }
         },