fix: Optimize backup account switching logic (#9358)

frontend/src/views/container/container/index.vue

@@ -411,7 +411,7 @@ const dialogUpgradeRef = ref();
 const dialogCommitRef = ref();
 const dialogPortJumpRef = ref();
 const opRef = ref();
-const includeAppStore = ref();
+const includeAppStore = ref(true);
 const columns = ref([]);
 
 const tags = ref([]);

frontend/src/views/cronjob/cronjob/operate/index.vue

@@ -1233,7 +1233,7 @@ const changeAccount = async () => {
         }
     }
     if (!isInAccounts) {
-        form.downloadAccountID = undefined;
+        form.downloadAccountID = form.sourceAccountItems.length === 0 ? undefined : form.sourceAccountItems[0];
     }
 };
 

frontend/src/views/home/index.vue

@@ -403,8 +403,8 @@ const onLoadBaseInfo = async (isInit: boolean, range: string) => {
     currentInfo.value = baseInfo.value.currentInfo;
     onLoadCurrentInfo();
     isStatusInit.value = false;
-    statusRef.value.acceptParams(currentInfo.value, baseInfo.value);
+    statusRef.value?.acceptParams(currentInfo.value, baseInfo.value);
-    appRef.value.acceptParams();
+    appRef.value?.acceptParams();
     if (isInit) {
         timer = setInterval(async () => {
             if (isActive.value && !globalStore.isOnRestart) {
@@ -470,7 +470,7 @@ const onLoadCurrentInfo = async () => {
     }
     loadData();
     currentInfo.value = res.data;
-    statusRef.value.acceptParams(currentInfo.value, baseInfo.value);
+    statusRef.value?.acceptParams(currentInfo.value, baseInfo.value);
 };
 
 const loadData = async () => {

frontend/src/views/home/status/index.vue

@@ -1,5 +1,24 @@
 <template>
     <el-row :gutter="10">
+        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
+            <el-popover placement="bottom" :width="200" trigger="hover" v-if="chartsOption['load']">
+                <el-tag class="tagClass">{{ $t('home.loadAverage', 1) }}: {{ formatNumber(currentInfo.load1) }}</el-tag>
+                <el-tag class="tagClass">{{ $t('home.loadAverage', 5) }}: {{ formatNumber(currentInfo.load5) }}</el-tag>
+                <el-tag class="tagClass">
+                    {{ $t('home.loadAverage', 15) }}: {{ formatNumber(currentInfo.load15) }}
+                </el-tag>
+                <template #reference>
+                    <v-charts
+                        height="160px"
+                        id="load"
+                        type="pie"
+                        :option="chartsOption['load']"
+                        v-if="chartsOption['load']"
+                    />
+                </template>
+            </el-popover>
+            <span class="input-help">{{ loadStatus(currentInfo.loadUsagePercent) }}</span>
+        </el-col>
         <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
             <el-popover placement="bottom" :width="loadWidth()" trigger="hover" v-if="chartsOption['cpu']">
                 <div>
@@ -89,25 +108,6 @@
                 {{ computeSize(currentInfo.memoryUsed) }} / {{ computeSize(currentInfo.memoryTotal) }}
             </span>
         </el-col>
-        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
-            <el-popover placement="bottom" :width="200" trigger="hover" v-if="chartsOption['load']">
-                <el-tag class="tagClass">{{ $t('home.loadAverage', 1) }}: {{ formatNumber(currentInfo.load1) }}</el-tag>
-                <el-tag class="tagClass">{{ $t('home.loadAverage', 5) }}: {{ formatNumber(currentInfo.load5) }}</el-tag>
-                <el-tag class="tagClass">
-                    {{ $t('home.loadAverage', 15) }}: {{ formatNumber(currentInfo.load15) }}
-                </el-tag>
-                <template #reference>
-                    <v-charts
-                        height="160px"
-                        id="load"
-                        type="pie"
-                        :option="chartsOption['load']"
-                        v-if="chartsOption['load']"
-                    />
-                </template>
-            </el-popover>
-            <span class="input-help">{{ loadStatus(currentInfo.loadUsagePercent) }}</span>
-        </el-col>
         <template v-for="(item, index) of currentInfo.diskData" :key="index">
             <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('disk', index)">
                 <el-popover placement="bottom" :width="300" trigger="hover" v-if="chartsOption[`disk${index}`]">

frontend/src/views/setting/snapshot/create/index.vue

@@ -21,7 +21,7 @@
                     :rules="rules"
                 >
                     <el-form-item :label="$t('setting.backupAccount')" prop="fromAccounts">
-                        <el-select multiple @change="changeAccount" v-model="form.fromAccounts" clearable>
+                        <el-select multiple @change="changeAccount(false)" v-model="form.fromAccounts" clearable>
                             <div v-for="item in backupOptions" :key="item.id">
                                 <el-option v-if="item.type !== $t('setting.LOCAL')" :value="item.id" :label="item.name">
                                     {{ item.name }}
@@ -307,7 +307,7 @@ const loadBackups = async () => {
             backupOptions.value.push({ id: item.id, type: i18n.global.t('setting.' + item.type), name: item.name });
         }
     }
-    changeAccount();
+    changeAccount(true);
 };
 
 const changeStep = (currentStep: any) => {
@@ -342,7 +342,7 @@ const changeStep = (currentStep: any) => {
     }
 };
 
-const changeAccount = async () => {
+const changeAccount = async (isInit: boolean) => {
     accountOptions.value = [];
     let isInAccounts = false;
     for (const item of backupOptions.value) {
@@ -360,8 +360,8 @@ const changeAccount = async () => {
             accountOptions.value.push(item);
         }
     }
-    if (!isInAccounts) {
+    if (!isInAccounts && !isInit) {
-        form.downloadAccountID = form.downloadAccountID ? undefined : form.downloadAccountID;
+        form.downloadAccountID = form.fromAccounts.length === 0 ? undefined : form.fromAccounts[0];
     }
 };