feat: add launching screen to indicate launching status

feat: store custom aside width to preferences

frontend/src/AppContent.vue

@@ -1,19 +1,21 @@
 <script setup>
 import ContentPane from './components/content/ContentPane.vue'
 import BrowserPane from './components/sidebar/BrowserPane.vue'
-import { computed, nextTick, onMounted, reactive } from 'vue'
+import { computed, nextTick, onBeforeMount, onMounted, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { get } from 'lodash'
+import { debounce, get } from 'lodash'
 import { useThemeVars } from 'naive-ui'
 import NavMenu from './components/sidebar/NavMenu.vue'
 import ConnectionPane from './components/sidebar/ConnectionPane.vue'
 import ContentServerPane from './components/content/ContentServerPane.vue'
 import useTabStore from './stores/tab.js'
 import usePreferencesStore from './stores/preferences.js'
+import useConnectionStore from './stores/connections.js'
 
 const themeVars = useThemeVars()
 
 const data = reactive({
+    initializing: false,
     navMenuWidth: 60,
     hoverResize: false,
     resizing: false,
@@ -21,26 +23,28 @@ const data = reactive({
 
 const tabStore = useTabStore()
 const prefStore = usePreferencesStore()
+const connectionStore = useConnectionStore()
 // const preferences = ref({})
 // provide('preferences', preferences)
 const i18n = useI18n()
 
-onMounted(async () => {
-    await prefStore.loadFontList()
+onBeforeMount(async () => {
+    try {
+        data.initializing = true
         await prefStore.loadPreferences()
-    await nextTick(() => {
         i18n.locale.value = get(prefStore.general, 'language', 'en')
-    })
+        await prefStore.loadFontList()
+        await connectionStore.initConnections()
+    } finally {
+        data.initializing = false
+    }
 })
 
-// TODO: apply font size to all elements
-// const getFontSize = computed(() => {
-//     return get(prefStore.general, 'fontSize', 'en')
-// })
-
+const saveWidth = debounce(prefStore.savePreferences, 1000, { trailing: true })
 const handleResize = (evt) => {
     if (data.resizing) {
-        tabStore.asideWidth = Math.max(evt.clientX - data.navMenuWidth, 300)
+        prefStore.setNavWidth(Math.max(evt.clientX - data.navMenuWidth, 300))
+        saveWidth()
     }
 }
 
@@ -58,7 +62,7 @@ const startResize = () => {
 }
 
 const asideWidthVal = computed(() => {
-    return tabStore.asideWidth + 'px'
+    return prefStore.general.navMenuWidth + 'px'
 })
 
 const dragging = computed(() => {
@@ -68,6 +72,9 @@ const dragging = computed(() => {
 
 <template>
     <!-- app content-->
+    <!--    <div id="app-container"></div>-->
+    <n-spin :show="data.initializing" :theme-overrides="{ opacitySpinning: 0 }">
+        <template #description> {{ $t('launching') }} </template>
         <div id="app-container" :class="{ dragging }" class="flex-box-h" :style="prefStore.generalFont">
             <nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
             <!-- structure page-->
@@ -114,6 +121,7 @@ const dragging = computed(() => {
             <!-- log page -->
             <div v-show="tabStore.nav === 'log'">display log</div>
         </div>
+    </n-spin>
 </template>
 
 <style lang="scss">

frontend/src/components/sidebar/ConnectionTree.vue

@@ -18,7 +18,6 @@ import Edit from '../icons/Edit.vue'
 import { useConfirmDialog } from '../../utils/confirm_dialog.js'
 
 const i18n = useI18n()
-const loadingConnection = ref(false)
 const openingConnection = ref(false)
 const connectionStore = useConnectionStore()
 const tabStore = useTabStore()
@@ -34,16 +33,6 @@ const props = defineProps({
     },
 })
 
-onMounted(async () => {
-    try {
-        loadingConnection.value = true
-        await nextTick()
-        await connectionStore.initConnections()
-    } finally {
-        loadingConnection.value = false
-    }
-})
-
 const contextMenuParam = reactive({
     show: false,
     x: 0,
@@ -337,7 +326,7 @@ const handleDrop = ({ node, dragNode, dropPosition }) => {
     />
 
     <!-- status display modal -->
-    <n-modal :show="loadingConnection || openingConnection" transform-origin="center">
+    <n-modal :show="openingConnection" transform-origin="center">
         <n-card
             :bordered="false"
             :content-style="{ textAlign: 'center' }"
@@ -347,7 +336,7 @@ const handleDrop = ({ node, dragNode, dropPosition }) => {
         >
             <n-spin>
                 <template #description>
-                    {{ openingConnection ? $t('opening_connection') : '' }}
+                    {{ $t('opening_connection') }}
                 </template>
             </n-spin>
         </n-card>

frontend/src/langs/en.json

@@ -1,5 +1,6 @@
 {
   "lang_name": "English",
+  "launching": "Launching...",
   "confirm": "Confirm",
   "cancel": "Cancel",
   "success": "Success",

frontend/src/langs/zh-cn.json

@@ -1,5 +1,6 @@
 {
   "lang_name": "简体中文",
+  "launching": "启动中...",
   "confirm": "确认",
   "cancel": "取消",
   "success": "成功",

frontend/src/stores/preferences.js

@@ -33,6 +33,7 @@ const usePreferencesStore = defineStore('preferences', {
             useSysProxy: false,
             useSysProxyHttp: false,
             checkUpdate: false,
+            navMenuWidth: 300,
         },
         editor: {
             font: '',
@@ -165,6 +166,10 @@ const usePreferencesStore = defineStore('preferences', {
             }
             return false
         },
+
+        setNavWidth(width) {
+            this.general.navMenuWidth = width
+        },
     },
 })