fix: 优化容器菜单页面状态加载样式 (#356)

frontend/src/styles/common.scss

@@ -179,9 +179,12 @@
     top: 220px;
     left: 45%;
     transform: translate(-50%, -50%);
-    width: 300px;
+    width: 400px;
     text-align: center;
     font-size: 14px;
+    .bt {
+        margin-top: -2px;
+    }
 }
 
 .table-button {

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

@@ -3,20 +3,13 @@
         <div v-show="isOnDetail">
             <ComposeDetial @back="backList" ref="composeDetailRef" />
         </div>
-        <el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
-            <el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
-                【 {{ $t('container.setting') }} 】
-            </el-button>
-            <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
+        <el-card v-if="dockerStatus != 'Running'" class="mask-prompt">
+            <span>{{ $t('container.serviceUnavailable') }}</span>
+            <el-button type="primary" link class="bt" @click="goSetting">【 {{ $t('container.setting') }} 】</el-button>
+            <span>{{ $t('container.startIn') }}</span>
         </el-card>
 
-        <LayoutContent
-            v-loading="loading"
-            v-if="!isOnDetail"
-            :title="$t('container.compose')"
-            :class="{ mask: dockerStatus != 'Running' }"
-        >
+        <LayoutContent v-if="!isOnDetail" :title="$t('container.compose')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
@@ -111,13 +104,21 @@ const paginationConfig = reactive({
 });
 const searchName = ref();
 
-const dockerStatus = ref();
+const dockerStatus = ref('Running');
 const loadStatus = async () => {
-    const res = await loadDockerStatus();
-    dockerStatus.value = res.data;
-    if (dockerStatus.value === 'Running') {
-        search();
-    }
+    loading.value = true;
+    await loadDockerStatus()
+        .then((res) => {
+            loading.value = false;
+            dockerStatus.value = res.data;
+            if (dockerStatus.value === 'Running') {
+                search();
+            }
+        })
+        .catch(() => {
+            dockerStatus.value = 'Failed';
+            loading.value = false;
+        });
 };
 const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });

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

@@ -1,17 +1,11 @@
 <template>
-    <div>
-        <el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
-            <el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
-                【 {{ $t('container.setting') }} 】
-            </el-button>
-            <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
+    <div v-loading="loading">
+        <el-card v-if="dockerStatus != 'Running'" class="mask-prompt">
+            <span>{{ $t('container.serviceUnavailable') }}</span>
+            <el-button type="primary" class="bt" link @click="goSetting">【 {{ $t('container.setting') }} 】</el-button>
+            <span>{{ $t('container.startIn') }}</span>
         </el-card>
-        <LayoutContent
-            v-loading="loading"
-            :title="$t('container.container')"
-            :class="{ mask: dockerStatus != 'Running' }"
-        >
+        <LayoutContent :title="$t('container.container')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
@@ -141,13 +135,21 @@ const paginationConfig = reactive({
 });
 const searchName = ref();
 
-const dockerStatus = ref();
+const dockerStatus = ref('Running');
 const loadStatus = async () => {
-    const res = await loadDockerStatus();
-    dockerStatus.value = res.data;
-    if (dockerStatus.value === 'Running') {
-        search();
-    }
+    loading.value = true;
+    await loadDockerStatus()
+        .then((res) => {
+            loading.value = false;
+            dockerStatus.value = res.data;
+            if (dockerStatus.value === 'Running') {
+                search();
+            }
+        })
+        .catch(() => {
+            dockerStatus.value = 'Failed';
+            loading.value = false;
+        });
 };
 const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });

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

@@ -1,14 +1,12 @@
 <template>
     <div v-loading="loading">
-        <el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
-            <el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
-                【 {{ $t('container.setting') }} 】
-            </el-button>
-            <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
+        <el-card v-if="dockerStatus != 'Running'" class="mask-prompt">
+            <span>{{ $t('container.serviceUnavailable') }}</span>
+            <el-button type="primary" link class="bt" @click="goSetting">【 {{ $t('container.setting') }} 】</el-button>
+            <span>{{ $t('container.startIn') }}</span>
         </el-card>
 
-        <LayoutContent v-loading="loading" :title="$t('container.image')" :class="{ mask: dockerStatus != 'Running' }">
+        <LayoutContent :title="$t('container.image')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
@@ -110,14 +108,22 @@ const paginationConfig = reactive({
 });
 const searchName = ref();
 
-const dockerStatus = ref();
+const dockerStatus = ref('Running');
 const loadStatus = async () => {
-    const res = await loadDockerStatus();
-    dockerStatus.value = res.data;
-    if (dockerStatus.value === 'Running') {
-        search();
-        loadRepos();
-    }
+    loading.value = true;
+    await loadDockerStatus()
+        .then((res) => {
+            loading.value = false;
+            dockerStatus.value = res.data;
+            if (dockerStatus.value === 'Running') {
+                search();
+                loadRepos();
+            }
+        })
+        .catch(() => {
+            dockerStatus.value = 'Failed';
+            loading.value = false;
+        });
 };
 const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });

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

@@ -1,18 +1,12 @@
 <template>
-    <div>
-        <el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
-            <el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
-                【 {{ $t('container.setting') }} 】
-            </el-button>
-            <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
+    <div v-loading="loading">
+        <el-card v-if="dockerStatus != 'Running'" class="mask-prompt">
+            <span>{{ $t('container.serviceUnavailable') }}</span>
+            <el-button type="primary" link class="bt" @click="goSetting">【 {{ $t('container.setting') }} 】</el-button>
+            <span>{{ $t('container.startIn') }}</span>
         </el-card>
 
-        <LayoutContent
-            v-loading="loading"
-            :title="$t('container.network')"
-            :class="{ mask: dockerStatus != 'Running' }"
-        >
+        <LayoutContent :title="$t('container.network')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
@@ -124,13 +118,21 @@ const paginationConfig = reactive({
 });
 const searchName = ref();
 
-const dockerStatus = ref();
+const dockerStatus = ref('Running');
 const loadStatus = async () => {
-    const res = await loadDockerStatus();
-    dockerStatus.value = res.data;
-    if (dockerStatus.value === 'Running') {
-        search();
-    }
+    loading.value = true;
+    await loadDockerStatus()
+        .then((res) => {
+            loading.value = false;
+            dockerStatus.value = res.data;
+            if (dockerStatus.value === 'Running') {
+                search();
+            }
+        })
+        .catch(() => {
+            dockerStatus.value = 'Failed';
+            loading.value = false;
+        });
 };
 const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });

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

@@ -1,14 +1,12 @@
 <template>
-    <div>
-        <el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
-            <el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
-                【 {{ $t('container.setting') }} 】
-            </el-button>
-            <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
+    <div v-loading="loading">
+        <el-card v-if="dockerStatus != 'Running'" class="mask-prompt">
+            <span>{{ $t('container.serviceUnavailable') }}</span>
+            <el-button type="primary" link class="bt" @click="goSetting">【 {{ $t('container.setting') }} 】</el-button>
+            <span>{{ $t('container.startIn') }}</span>
         </el-card>
 
-        <LayoutContent v-loading="loading" :title="$t('container.repo')" :class="{ mask: dockerStatus != 'Running' }">
+        <LayoutContent :title="$t('container.repo')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
@@ -99,13 +97,21 @@ const paginationConfig = reactive({
 });
 const searchName = ref();
 
-const dockerStatus = ref();
+const dockerStatus = ref('Running');
 const loadStatus = async () => {
-    const res = await loadDockerStatus();
-    dockerStatus.value = res.data;
-    if (dockerStatus.value === 'Running') {
-        search();
-    }
+    loading.value = true;
+    await loadDockerStatus()
+        .then((res) => {
+            loading.value = false;
+            dockerStatus.value = res.data;
+            if (dockerStatus.value === 'Running') {
+                search();
+            }
+        })
+        .catch(() => {
+            dockerStatus.value = 'Failed';
+            loading.value = false;
+        });
 };
 const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });

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

@@ -1,18 +1,12 @@
 <template>
-    <div>
-        <el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
-            <el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
-                【 {{ $t('container.setting') }} 】
-            </el-button>
-            <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
+    <div v-loading="loading">
+        <el-card v-if="dockerStatus != 'Running'" class="mask-prompt">
+            <span>{{ $t('container.serviceUnavailable') }}</span>
+            <el-button type="primary" link class="bt" @click="goSetting">【 {{ $t('container.setting') }} 】</el-button>
+            <span>{{ $t('container.startIn') }}</span>
         </el-card>
 
-        <LayoutContent
-            v-loading="loading"
-            :title="$t('container.composeTemplate')"
-            :class="{ mask: dockerStatus != 'Running' }"
-        >
+        <LayoutContent :title="$t('container.composeTemplate')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
@@ -96,13 +90,21 @@ const searchName = ref();
 
 const detailRef = ref();
 
-const dockerStatus = ref();
+const dockerStatus = ref('Running');
 const loadStatus = async () => {
-    const res = await loadDockerStatus();
-    dockerStatus.value = res.data;
-    if (dockerStatus.value === 'Running') {
-        search();
-    }
+    loading.value = true;
+    await loadDockerStatus()
+        .then((res) => {
+            loading.value = false;
+            dockerStatus.value = res.data;
+            if (dockerStatus.value === 'Running') {
+                search();
+            }
+        })
+        .catch(() => {
+            dockerStatus.value = 'Failed';
+            loading.value = false;
+        });
 };
 const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });

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

@@ -1,14 +1,12 @@
 <template>
-    <div>
-        <el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
-            <el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
-                【 {{ $t('container.setting') }} 】
-            </el-button>
-            <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
+    <div v-loading="loading">
+        <el-card v-if="dockerStatus != 'Running'" class="mask-prompt">
+            <span>{{ $t('container.serviceUnavailable') }}</span>
+            <el-button type="primary" link class="bt" @click="goSetting">【 {{ $t('container.setting') }} 】</el-button>
+            <span>{{ $t('container.startIn') }}</span>
         </el-card>
 
-        <LayoutContent v-loading="loading" :title="$t('container.volume')" :class="{ mask: dockerStatus != 'Running' }">
+        <LayoutContent :title="$t('container.volume')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
@@ -104,13 +102,21 @@ const paginationConfig = reactive({
 });
 const searchName = ref();
 
-const dockerStatus = ref();
+const dockerStatus = ref('Running');
 const loadStatus = async () => {
-    const res = await loadDockerStatus();
-    dockerStatus.value = res.data;
-    if (dockerStatus.value === 'Running') {
-        search();
-    }
+    loading.value = true;
+    await loadDockerStatus()
+        .then((res) => {
+            loading.value = false;
+            dockerStatus.value = res.data;
+            if (dockerStatus.value === 'Running') {
+                search();
+            }
+        })
+        .catch(() => {
+            dockerStatus.value = 'Failed';
+            loading.value = false;
+        });
 };
 const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });

frontend/src/views/database/mysql/index.vue

@@ -112,7 +112,7 @@
             v-if="mysqlStatus != 'Running' && !isOnSetting && mysqlIsExist && !loading"
             class="mask-prompt"
         >
-            <span style="font-size: 14px">{{ $t('commons.service.serviceNotStarted', ['MySQL']) }}</span>
+            <span>{{ $t('commons.service.serviceNotStarted', ['MySQL']) }}</span>
         </el-card>
 
         <Setting ref="settingRef" style="margin-top: 20px" />

frontend/src/views/database/redis/index.vue

@@ -24,7 +24,7 @@
         </LayoutContent>
 
         <el-card width="30%" v-if="redisStatus != 'Running' && !isOnSetting && redisIsExist" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('commons.service.serviceNotStarted', ['Redis']) }}</span>
+            <span>{{ $t('commons.service.serviceNotStarted', ['Redis']) }}</span>
         </el-card>
 
         <Setting ref="settingRef" style="margin-top: 30px" />