feat: 升级增加全局 loading

backend/app/api/v1/auth.go

@@ -137,6 +137,11 @@ func (b *BaseApi) SafeEntrance(c *gin.Context) {
 	helper.SuccessWithData(c, nil)
 }
 
+// @Tags Auth
+// @Summary Check is First login
+// @Description 判断是否为首次登录
+// @Success 200
+// @Router /auth/status [get]
 func (b *BaseApi) CheckIsFirstLogin(c *gin.Context) {
 	helper.SuccessWithData(c, authService.CheckIsFirst())
 }

backend/app/api/v1/setting.go

@@ -28,6 +28,16 @@ func (b *BaseApi) GetSettingInfo(c *gin.Context) {
 	helper.SuccessWithData(c, setting)
 }
 
+// @Tags System Setting
+// @Summary Load system available status
+// @Description 获取系统可用状态
+// @Success 200
+// @Security ApiKeyAuth
+// @Router /settings/search/available [get]
+func (b *BaseApi) GetSystemAvailable(c *gin.Context) {
+	helper.SuccessWithData(c, nil)
+}
+
 // @Tags System Setting
 // @Summary Update system setting
 // @Description 更新系统配置

backend/constant/errs.go

@@ -13,6 +13,7 @@ const (
 	CodeErrNotFound       = 404
 	CodePasswordExpired   = 405
 	CodeAuth              = 406
+	CodeGlobalLoading     = 407
 	CodeErrInternalServer = 500
 	CodeErrHeader         = 406
 )

backend/cron/job/monitor.go

@@ -43,7 +43,7 @@ func (m *monitor) Run() {
 	itemModel.Memory = memoryInfo.UsedPercent
 
 	if err := global.DB.Create(&itemModel).Error; err != nil {
-		global.LOG.Debug("create monitor base failed, err: %v", err)
+		global.LOG.Debugf("Insert basic monitoring data failed, err: %v", err)
 	}
 
 	ioStat, _ := disk.IOCounters()
@@ -77,7 +77,7 @@ func (m *monitor) Run() {
 			itemIO.Time = writeTime
 		}
 		if err := global.DB.Create(&itemIO).Error; err != nil {
-			global.LOG.Debug("create monitor io failed, err: %v", err)
+			global.LOG.Debugf("Insert io monitoring data failed, err: %v", err)
 		}
 	}
 
@@ -96,7 +96,7 @@ func (m *monitor) Run() {
 		itemNet.Up = float64(v.BytesSent-aheadData.BytesSent) / 1024 / stime
 		itemNet.Down = float64(v.BytesRecv-aheadData.BytesRecv) / 1024 / stime
 		if err := global.DB.Create(&itemNet).Error; err != nil {
-			global.LOG.Debug("create monitor network failed, err: %v", err)
+			global.LOG.Debugf("Insert network monitoring data failed, err: %v", err)
 		}
 	}
 	netStatAll, _ := net.IOCounters(false)
@@ -114,7 +114,7 @@ func (m *monitor) Run() {
 		itemNet.Up = float64(netStatAll[0].BytesSent-aheadData.BytesSent) / 1024 / stime
 		itemNet.Down = float64(netStatAll[0].BytesRecv-aheadData.BytesRecv) / 1024 / stime
 		if err := global.DB.Create(&itemNet).Error; err != nil {
-			global.LOG.Debug("create monitor network all failed, err: %v", err)
+			global.LOG.Debugf("Insert network all monitoring data failed, err: %v", err)
 		}
 	}
 

backend/init/router/router.go

@@ -67,6 +67,7 @@ func Routers() *gin.Engine {
 	}
 
 	PrivateGroup := Router.Group("/api/v1")
+	PrivateGroup.Use(middleware.GlobalLoading())
 	//PrivateGroup.Use(middleware.SafetyAuth())
 	{
 		systemRouter.InitBaseRouter(PrivateGroup)

backend/middleware/loading.go

@@ -0,0 +1,24 @@
+package middleware
+
+import (
+	"github.com/1Panel-dev/1Panel/backend/app/api/v1/helper"
+	"github.com/1Panel-dev/1Panel/backend/app/repo"
+	"github.com/1Panel-dev/1Panel/backend/constant"
+	"github.com/gin-gonic/gin"
+)
+
+func GlobalLoading() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		settingRepo := repo.NewISettingRepo()
+		upgradeSetting, err := settingRepo.Get(settingRepo.WithByKey("SystemVersion"))
+		if err != nil {
+			helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
+			return
+		}
+		if upgradeSetting.Value == constant.StatusWaiting {
+			helper.ErrorWithDetail(c, constant.CodeGlobalLoading, "Upgrading", err)
+			return
+		}
+		c.Next()
+	}
+}

backend/router/ro_setting.go

@@ -16,6 +16,7 @@ func (s *SettingRouter) InitSettingRouter(Router *gin.RouterGroup) {
 	baseApi := v1.ApiGroupApp.BaseApi
 	{
 		settingRouter.POST("/search", baseApi.GetSettingInfo)
+		settingRouter.GET("/search/available", baseApi.GetSystemAvailable)
 		settingRouter.POST("/expired/handle", baseApi.HandlePasswordExpired)
 		settingRouter.POST("/update", baseApi.UpdateSetting)
 		settingRouter.POST("/port/update", baseApi.UpdatePort)

backend/utils/ssh/ssh.go

@@ -74,7 +74,7 @@ func (c *ConnInfo) Run(shell string) (string, error) {
 
 func (c *ConnInfo) Close() {
 	if err := c.Client.Close(); err != nil {
-		global.LOG.Error("close ssh client failed, err: %v", err)
+		global.LOG.Errorf("close ssh client failed, err: %v", err)
 	}
 }
 

frontend/src/api/index.ts

@@ -58,6 +58,15 @@ class RequestHttp {
                     router.push({ name: 'Expired' });
                     return data;
                 }
+                if (data.code == ResultEnum.ERRGLOBALLOADDING) {
+                    globalStore.setGlobalLoading(true);
+                    globalStore.setLoadingText(data.message);
+                    return;
+                } else {
+                    if (globalStore.isLoading) {
+                        globalStore.setGlobalLoading(false);
+                    }
+                }
                 if (data.code == ResultEnum.ERRAUTH) {
                     return data;
                 }

frontend/src/api/modules/setting.ts

@@ -5,6 +5,9 @@ import { Setting } from '../interface/setting';
 export const getSettingInfo = () => {
     return http.post<Setting.SettingInfo>(`/settings/search`);
 };
+export const getSystemAvailable = () => {
+    return http.get(`/settings/search/available`);
+};
 
 export const updateSetting = (param: Setting.SettingUpdate) => {
     return http.post(`/settings/update`, param);

frontend/src/components/app-layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <Layout>
+    <Layout v-loading="loading" :element-loading-text="loadinText" fullscreen>
         <template #menu>
             <Menu :panelName="themeConfig.panelName"></Menu>
         </template>
@@ -12,17 +12,32 @@
 import Layout from '@/layout/index.vue';
 import Footer from './footer/index.vue';
 import Menu from './menu/index.vue';
-import { onMounted, computed } from 'vue';
+import { onMounted, computed, ref, watch, onBeforeUnmount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { GlobalStore } from '@/store';
 import { useTheme } from '@/hooks/use-theme';
-import { getSettingInfo } from '@/api/modules/setting';
+import { getSettingInfo, getSystemAvailable } from '@/api/modules/setting';
 
 const i18n = useI18n();
+const loading = ref(false);
+const loadinText = ref();
 const globalStore = GlobalStore();
 const themeConfig = computed(() => globalStore.themeConfig);
 const { switchDark } = useTheme();
 
+let timer: NodeJS.Timer | null = null;
+
+watch(
+    () => globalStore.isLoading,
+    () => {
+        if (globalStore.isLoading) {
+            loadStatus();
+        } else {
+            loading.value = globalStore.isLoading;
+        }
+    },
+);
+
 const loadDataFromDB = async () => {
     const res = await getSettingInfo();
     document.title = res.data.panelName;
@@ -33,7 +48,33 @@ const loadDataFromDB = async () => {
     globalStore.setThemeConfig({ ...themeConfig.value, panelName: res.data.panelName });
     switchDark();
 };
+
+const loadStatus = async () => {
+    loading.value = globalStore.isLoading;
+    loadinText.value = globalStore.loadingText;
+    if (loading.value) {
+        timer = setInterval(async () => {
+            await getSystemAvailable()
+                .then((res) => {
+                    if (res) {
+                        clearInterval(Number(timer));
+                        timer = null;
+                    }
+                })
+                .catch(() => {
+                    clearInterval(Number(timer));
+                    timer = null;
+                });
+        }, 1000 * 5);
+    }
+};
+
+onBeforeUnmount(() => {
+    clearInterval(Number(timer));
+    timer = null;
+});
 onMounted(() => {
+    loadStatus();
     loadDataFromDB();
 });
 </script>

frontend/src/enums/http-enum.ts

@@ -6,6 +6,7 @@ export enum ResultEnum {
     FORBIDDEN = 403,
     EXPIRED = 405,
     ERRAUTH = 406,
+    ERRGLOBALLOADDING = 407,
     TIMEOUT = 100000,
     TYPE = 'success',
 }

frontend/src/lang/modules/en.ts

@@ -61,6 +61,9 @@ export default {
             interval: 'Interval',
             title: 'Title',
         },
+        loadingText: {
+            Upgrading: 'System upgrade, please wait...',
+        },
         msg: {
             delete: 'This operation cannot be rolled back. Do you want to continue',
             deleteTitle: 'Delete',
@@ -706,7 +709,7 @@ export default {
         duplicatePassword: 'The new password cannot be the same as the original password, please re-enter!',
 
         backup: 'Backup',
-        thirdParty: 'Third-party',
+        thirdParty: 'Third-party account',
         createBackupAccount: 'Create {0} backup account',
         noTypeForCreate: 'No backup type is currently created',
         serverDisk: 'Server disks',
@@ -765,7 +768,7 @@ export default {
         upgrading: 'Please wait while the upgrade is underway...',
         upgradeHelper: 'The upgrade requires a service restart. Do you want to continue?',
         noUpgrade: 'This is the latest version. You do not need to update it',
-        newVersion: 'NewVersion',
+        newVersion: 'Latest version',
         upgradeCheck: 'Check for updates',
         upgradeNotes: 'Release note',
         upgradeNow: 'Upgrade now',

frontend/src/lang/modules/zh.ts

@@ -64,6 +64,9 @@ export default {
             interval: '耗时',
             title: '标题',
         },
+        loadingText: {
+            Upgrading: '系统升级中，请稍候...',
+        },
         msg: {
             delete: '删除 操作不可回滚，是否继续',
             deleteTitle: '删除',
@@ -722,7 +725,7 @@ export default {
         duplicatePassword: '新密码不能与原始密码一致，请重新输入！',
 
         backup: '备份',
-        thirdParty: '第三方',
+        thirdParty: '第三方账号',
         createBackupAccount: '添加 {0} 备份账号',
         noTypeForCreate: '当前无可创建备份类型',
         serverDisk: '服务器磁盘',
@@ -762,7 +765,7 @@ export default {
         upgrading: '正在升级中，请稍候...',
         upgradeHelper: '升级操作需要重启服务，是否继续？',
         noUpgrade: '当前已是最新版本，无需更新',
-        newVersion: '新版本',
+        newVersion: '最新版本',
         upgradeCheck: '检查更新',
         upgradeNotes: '更新内容',
         upgradeNow: '立即更新',

frontend/src/store/index.ts

@@ -3,10 +3,13 @@ import { GlobalState, ThemeConfigProp } from './interface';
 import { createPinia } from 'pinia';
 import piniaPersistConfig from '@/config/pinia-persist';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+import i18n from '@/lang';
 
 export const GlobalStore = defineStore({
     id: 'GlobalState',
     state: (): GlobalState => ({
+        isLoading: false,
+        loadingText: '',
         isLogin: false,
         csrfToken: '',
         language: '',
@@ -22,6 +25,12 @@ export const GlobalStore = defineStore({
         setLogStatus(login: boolean) {
             this.isLogin = login;
         },
+        setGlobalLoading(loading: boolean) {
+            this.isLoading = loading;
+        },
+        setLoadingText(text: string) {
+            this.loadingText = i18n.global.t('commons.loadingText.' + text);
+        },
         setCsrfToken(token: string) {
             this.csrfToken = token;
         },

frontend/src/store/interface/index.ts

@@ -8,6 +8,8 @@ export interface ThemeConfigProp {
 }
 
 export interface GlobalState {
+    isLoading: boolean;
+    loadingText: string;
     isLogin: boolean;
     csrfToken: string;
     language: string; // zh | en

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

@@ -294,6 +294,9 @@ const loadBackups = async () => {
     const res = await getBackupList();
     backupOptions.value = [];
     for (const item of res.data) {
+        if (item.id === 0) {
+            continue;
+        }
         if (item.type === 'LOCAL') {
             localDirID.value = item.id;
             if (!dialogData.value.rowData!.targetDirID) {

frontend/src/views/host/monitor/index.vue

@@ -1,6 +1,13 @@
 <template>
     <div>
-        <el-row :gutter="20">
+        <el-card class="topRouterCard">
+            <el-radio-group v-model="active">
+                <el-radio-button class="topRouterButton" size="default" label="monitor">
+                    {{ $t('menu.monitor') }}
+                </el-radio-button>
+            </el-radio-group>
+        </el-card>
+        <el-row :gutter="20" style="margin-top: 20px">
             <el-col :span="24">
                 <el-card style="overflow: inherit">
                     <template #header>
@@ -117,13 +124,14 @@ import { Monitor } from '@/api/interface/monitor';
 import { dateFormatWithoutYear } from '@/utils/util';
 import i18n from '@/lang';
 
+const active = ref('monitor');
 const zoomStart = ref();
 const monitorBase = ref();
-const timeRangeLoad = ref<Array<any>>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);
+const timeRangeLoad = ref<[Date, Date]>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);
-const timeRangeCpu = ref<Array<any>>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);
+const timeRangeCpu = ref<[Date, Date]>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);
-const timeRangeMemory = ref<Array<any>>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);
+const timeRangeMemory = ref<[Date, Date]>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);
-const timeRangeIO = ref<Array<any>>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);
+const timeRangeIO = ref<[Date, Date]>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);
-const timeRangeNetwork = ref<Array<any>>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);
+const timeRangeNetwork = ref<[Date, Date]>([new Date(new Date().setHours(0, 0, 0, 0)), new Date()]);
 const networkChoose = ref();
 const netOptions = ref();
 const shortcuts = [

frontend/src/views/setting/backup-account/index.vue

@@ -21,7 +21,7 @@
                                 {{ localData.varsJson['dir'] }}
                             </el-form-item>
                             <el-form-item :label="$t('commons.table.createdAt')">
-                                {{ dateFromat(0, 0, localData.createdAt) }}
+                                {{ dateFormat(0, 0, localData.createdAt) }}
                             </el-form-item>
                         </el-card>
                     </el-col>
@@ -31,93 +31,7 @@
             <LayoutContent :header="$t('setting.thirdParty')" style="margin-top: 20px">
                 <el-row :gutter="20">
                     <el-col :span="12">
-                        <el-card>
+                        <el-card style="height: 265px">
-                            <template #header>
-                                <svg-icon style="font-size: 7px" iconName="p-minio"></svg-icon>
-                                <span style="font-size: 16px; font-weight: 500">&nbsp;MIMIO</span>
-                                <div style="float: right">
-                                    <el-button :disabled="minioData.id === 0" round @click="onBatchDelete(minioData)">
-                                        {{ $t('commons.button.delete') }}
-                                    </el-button>
-                                    <el-button
-                                        round
-                                        :disabled="minioData.id === 0"
-                                        @click="onOpenDialog('edit', 'MINIO', minioData)"
-                                    >
-                                        {{ $t('commons.button.edit') }}
-                                    </el-button>
-                                </div>
-                            </template>
-                            <div v-if="minioData.id !== 0">
-                                <el-form-item label="Endpoint">
-                                    {{ minioData.varsJson['endpoint'] }}
-                                </el-form-item>
-                                <el-form-item label="Bucket">
-                                    {{ minioData.bucket }}
-                                </el-form-item>
-                                <el-form-item :label="$t('commons.table.createdAt')">
-                                    {{ dateFromat(0, 0, minioData.createdAt) }}
-                                </el-form-item>
-                            </div>
-                            <el-alert v-else center style="height: 127px; background-color: #e2e4ec" :closable="false">
-                                <el-button
-                                    size="large"
-                                    round
-                                    plain
-                                    type="primary"
-                                    @click="onOpenDialog('create', 'MINIO')"
-                                >
-                                    {{ $t('setting.createBackupAccount', ['MINIO']) }}
-                                </el-button>
-                            </el-alert>
-                        </el-card>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-card>
-                            <template #header>
-                                <svg-icon style="font-size: 7px" iconName="p-oss"></svg-icon>
-                                <span style="font-size: 16px; font-weight: 500">&nbsp;OSS</span>
-                                <div style="float: right">
-                                    <el-button round :disabled="ossData.id === 0" @click="onBatchDelete(ossData)">
-                                        {{ $t('commons.button.delete') }}
-                                    </el-button>
-                                    <el-button
-                                        round
-                                        :disabled="ossData.id === 0"
-                                        @click="onOpenDialog('edit', 'OSS', ossData)"
-                                    >
-                                        {{ $t('commons.button.edit') }}
-                                    </el-button>
-                                </div>
-                            </template>
-                            <div v-if="ossData.id !== 0">
-                                <el-form-item label="Endpoint">
-                                    {{ ossData.varsJson['endpoint'] }}
-                                </el-form-item>
-                                <el-form-item label="Bucket">
-                                    {{ ossData.bucket }}
-                                </el-form-item>
-                                <el-form-item :label="$t('commons.table.createdAt')">
-                                    {{ dateFromat(0, 0, ossData.createdAt) }}
-                                </el-form-item>
-                            </div>
-                            <el-alert v-else center style="height: 127px; background-color: #e2e4ec" :closable="false">
-                                <el-button
-                                    size="large"
-                                    round
-                                    plain
-                                    type="primary"
-                                    @click="onOpenDialog('create', 'OSS')"
-                                >
-                                    {{ $t('setting.createBackupAccount', ['OSS']) }}
-                                </el-button>
-                            </el-alert>
-                        </el-card>
-                    </el-col>
-                </el-row>
-                <el-row :gutter="20" style="margin-top: 20px">
-                    <el-col :span="12">
-                        <el-card>
                             <template #header>
                                 <svg-icon style="font-size: 7px" iconName="p-aws"></svg-icon>
                                 <span style="font-size: 16px; font-weight: 500">&nbsp;{{ $t('setting.S3') }}</span>
@@ -145,7 +59,7 @@
                                     {{ s3Data.bucket }}
                                 </el-form-item>
                                 <el-form-item :label="$t('commons.table.createdAt')">
-                                    {{ dateFromat(0, 0, s3Data.createdAt) }}
+                                    {{ dateFormat(0, 0, s3Data.createdAt) }}
                                 </el-form-item>
                             </div>
                             <el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
@@ -162,7 +76,93 @@
                         </el-card>
                     </el-col>
                     <el-col :span="12">
-                        <el-card>
+                        <el-card style="height: 265px">
+                            <template #header>
+                                <svg-icon style="font-size: 7px" iconName="p-oss"></svg-icon>
+                                <span style="font-size: 16px; font-weight: 500">&nbsp;OSS</span>
+                                <div style="float: right">
+                                    <el-button round :disabled="ossData.id === 0" @click="onBatchDelete(ossData)">
+                                        {{ $t('commons.button.delete') }}
+                                    </el-button>
+                                    <el-button
+                                        round
+                                        :disabled="ossData.id === 0"
+                                        @click="onOpenDialog('edit', 'OSS', ossData)"
+                                    >
+                                        {{ $t('commons.button.edit') }}
+                                    </el-button>
+                                </div>
+                            </template>
+                            <div v-if="ossData.id !== 0">
+                                <el-form-item label="Endpoint">
+                                    {{ ossData.varsJson['endpoint'] }}
+                                </el-form-item>
+                                <el-form-item label="Bucket">
+                                    {{ ossData.bucket }}
+                                </el-form-item>
+                                <el-form-item :label="$t('commons.table.createdAt')">
+                                    {{ dateFormat(0, 0, ossData.createdAt) }}
+                                </el-form-item>
+                            </div>
+                            <el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
+                                <el-button
+                                    size="large"
+                                    round
+                                    plain
+                                    type="primary"
+                                    @click="onOpenDialog('create', 'OSS')"
+                                >
+                                    {{ $t('setting.createBackupAccount', ['OSS']) }}
+                                </el-button>
+                            </el-alert>
+                        </el-card>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20" style="margin-top: 20px">
+                    <el-col :span="12">
+                        <el-card style="height: 265px">
+                            <template #header>
+                                <svg-icon style="font-size: 7px" iconName="p-minio"></svg-icon>
+                                <span style="font-size: 16px; font-weight: 500">&nbsp;MIMIO</span>
+                                <div style="float: right">
+                                    <el-button :disabled="minioData.id === 0" round @click="onBatchDelete(minioData)">
+                                        {{ $t('commons.button.delete') }}
+                                    </el-button>
+                                    <el-button
+                                        round
+                                        :disabled="minioData.id === 0"
+                                        @click="onOpenDialog('edit', 'MINIO', minioData)"
+                                    >
+                                        {{ $t('commons.button.edit') }}
+                                    </el-button>
+                                </div>
+                            </template>
+                            <div v-if="minioData.id !== 0">
+                                <el-form-item label="Endpoint">
+                                    {{ minioData.varsJson['endpoint'] }}
+                                </el-form-item>
+                                <el-form-item label="Bucket">
+                                    {{ minioData.bucket }}
+                                </el-form-item>
+                                <el-form-item :label="$t('commons.table.createdAt')">
+                                    {{ dateFormat(0, 0, minioData.createdAt) }}
+                                </el-form-item>
+                            </div>
+                            <el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
+                                <el-button
+                                    size="large"
+                                    round
+                                    plain
+                                    type="primary"
+                                    @click="onOpenDialog('create', 'MINIO')"
+                                >
+                                    {{ $t('setting.createBackupAccount', ['MINIO']) }}
+                                </el-button>
+                            </el-alert>
+                        </el-card>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-card style="height: 265px">
                             <template #header>
                                 <svg-icon style="font-size: 7px" iconName="p-SFTP"></svg-icon>
                                 <span style="font-size: 16px; font-weight: 500">&nbsp;SFTP</span>
@@ -214,7 +214,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { dateFormatSimple } from '@/utils/util';
+import { dateFormatSimple, dateFormat } from '@/utils/util';
 import { onMounted, ref } from 'vue';
 import LayoutContent from '@/layout/layout-content.vue';
 import { getBackupList, deleteBackup } from '@/api/modules/backup';

frontend/src/views/setting/safe/index.vue

@@ -187,8 +187,6 @@ import { updatePassword, updateSetting, getMFA, bindMFA, getSettingInfo } from '
 import i18n from '@/lang';
 import { Rules } from '@/global/form-rules';
 import { dateFormatSimple } from '@/utils/util';
-
-const emit = defineEmits(['search']);
 import { GlobalStore } from '@/store';
 import router from '@/routers';
 

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

@@ -54,7 +54,7 @@
                     <el-table-column
                         prop="createdAt"
                         :label="$t('commons.table.date')"
-                        :formatter="dateFromat"
+                        :formatter="dateFormat"
                         show-overflow-tooltip
                     />
                     <fu-table-operations
@@ -102,7 +102,7 @@
 import ComplexTable from '@/components/complex-table/index.vue';
 import { snapshotCreate, searchSnapshotPage, snapshotDelete } from '@/api/modules/setting';
 import { onMounted, reactive, ref } from 'vue';
-import { dateFromat } from '@/utils/util';
+import { dateFormat } from '@/utils/util';
 import { useDeleteData } from '@/hooks/use-delete-data';
 import { ElForm } from 'element-plus';
 import { Rules } from '@/global/form-rules';
@@ -167,7 +167,7 @@ const loadBackups = async () => {
     const res = await getBackupList();
     backupOptions.value = [];
     for (const item of res.data) {
-        if (item.type !== 'LOCAL') {
+        if (item.type !== 'LOCAL' && item.id !== 0) {
             backupOptions.value.push({ label: loadBackupName(item.type), value: item.type });
         }
     }