[#2152] improvement(dashboard): Add session cache to support refresh page of dashboard (#2238)

### Why are the changes needed?

Fix: #2152

### Does this PR introduce _any_ user-facing change?

No.

Author: kuszz

dashboard/src/main/webapp/src/components/LayoutPage.vue

@@ -109,18 +109,21 @@ export default {
       }
     }
 
-    function handleChangeServer(key) {
+    const handleChangeServer = (key) => {
       currentServerStore.currentServer = key
     }
 
     async function getSelectCurrentServer() {
       const res = await getAllCoordinatorAddrees()
       const selectCurrentServer = res.data.data
-      currentServerStore.currentServer = Object.keys(selectCurrentServer)[0]
+      if (!currentServerStore.currentServer) {
+        currentServerStore.currentServer = Object.keys(selectCurrentServer)[0]
+      }
       hostNameAndPorts.length = 0
       Object.entries(selectCurrentServer).forEach(([key, value]) => {
         hostNameAndPorts.push({ value: value, label: key })
       })
+      hostNameAndPorts.sort((a, b) => a.label.localeCompare(b.label))
     }
 
     onMounted(() => {

dashboard/src/main/webapp/src/pages/CoordinatorServerPage.vue

@@ -123,7 +123,7 @@
 </template>
 
 <script>
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import {
   getCoordinatorConf,
@@ -196,11 +196,9 @@ export default {
     /**
      * The system obtains data from global variables and requests the interface to obtain new data after data changes.
      */
-    currentServerStore.$subscribe((mutable, state) => {
-      if (state.currentServer) {
-        getCoordinatorServerConfPage()
-        getCoorServerInfo()
-      }
+    watch(() => currentServerStore.currentServer, () => {
+      getCoordinatorServerConfPage()
+      getCoorServerInfo()
     })
 
     onMounted(() => {

dashboard/src/main/webapp/src/store/useCurrentServerStore.js

@@ -16,13 +16,18 @@
  */
 
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 /**
  * Create a global shared repository that allows you to share state across components/pages.
  * @type {StoreDefinition<"overall", _ExtractStateFromSetupStore<{currentServer: Ref<UnwrapRef<string>>}>, _ExtractGettersFromSetupStore<{currentServer: Ref<UnwrapRef<string>>}>, _ExtractActionsFromSetupStore<{currentServer: Ref<UnwrapRef<string>>}>>}
  */
 export const useCurrentServerStore = defineStore('overall', () => {
-  const currentServer = ref('')
-  return { currentServer }
+    const currentServer = ref(sessionStorage.getItem('currentServer'))
+
+    watch(currentServer, (newVal) => {
+        sessionStorage.setItem('currentServer', newVal)
+    })
+
+    return { currentServer }
 })