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()
-    await prefStore.loadPreferences()
-    await nextTick(() => {
+onBeforeMount(async () => {
+    try {
+        data.initializing = true
+        await prefStore.loadPreferences()
         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,52 +72,56 @@ const dragging = computed(() => {
 
 <template>
     <!-- app content-->
-    <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-->
-        <div v-show="tabStore.nav === 'structure'" class="flex-box-h flex-item-expand">
-            <div id="app-side" :style="{ width: asideWidthVal }" class="flex-box-h flex-item">
-                <browser-pane
-                    v-for="t in tabStore.tabs"
-                    v-show="get(tabStore.currentTab, 'name') === t.name"
-                    :key="t.name"
-                    class="flex-item-expand"
-                />
-                <div
-                    :class="{
-                        'resize-divider-hover': data.hoverResize,
-                        'resize-divider-drag': data.resizing,
-                    }"
-                    class="resize-divider"
-                    @mousedown="startResize"
-                    @mouseout="data.hoverResize = false"
-                    @mouseover="data.hoverResize = true"
-                />
+    <!--    <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-->
+            <div v-show="tabStore.nav === 'structure'" class="flex-box-h flex-item-expand">
+                <div id="app-side" :style="{ width: asideWidthVal }" class="flex-box-h flex-item">
+                    <browser-pane
+                        v-for="t in tabStore.tabs"
+                        v-show="get(tabStore.currentTab, 'name') === t.name"
+                        :key="t.name"
+                        class="flex-item-expand"
+                    />
+                    <div
+                        :class="{
+                            'resize-divider-hover': data.hoverResize,
+                            'resize-divider-drag': data.resizing,
+                        }"
+                        class="resize-divider"
+                        @mousedown="startResize"
+                        @mouseout="data.hoverResize = false"
+                        @mouseover="data.hoverResize = true"
+                    />
+                </div>
+                <content-pane class="flex-item-expand" />
             </div>
-            <content-pane class="flex-item-expand" />
-        </div>
 
-        <!-- server list page -->
-        <div v-show="tabStore.nav === 'server'" class="flex-box-h flex-item-expand">
-            <div id="app-side" :style="{ width: asideWidthVal }" class="flex-box-h flex-item">
-                <connection-pane class="flex-item-expand" />
-                <div
-                    :class="{
-                        'resize-divider-hover': data.hoverResize,
-                        'resize-divider-drag': data.resizing,
-                    }"
-                    class="resize-divider"
-                    @mousedown="startResize"
-                    @mouseout="data.hoverResize = false"
-                    @mouseover="data.hoverResize = true"
-                />
+            <!-- server list page -->
+            <div v-show="tabStore.nav === 'server'" class="flex-box-h flex-item-expand">
+                <div id="app-side" :style="{ width: asideWidthVal }" class="flex-box-h flex-item">
+                    <connection-pane class="flex-item-expand" />
+                    <div
+                        :class="{
+                            'resize-divider-hover': data.hoverResize,
+                            'resize-divider-drag': data.resizing,
+                        }"
+                        class="resize-divider"
+                        @mousedown="startResize"
+                        @mouseout="data.hoverResize = false"
+                        @mouseover="data.hoverResize = true"
+                    />
+                </div>
+                <content-server-pane class="flex-item-expand" />
             </div>
-            <content-server-pane class="flex-item-expand" />
-        </div>
 
-        <!-- log page -->
-        <div v-show="tabStore.nav === 'log'">display log</div>
-    </div>
+            <!-- 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
+        },
     },
 })