gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-31 14:08:06 +08:00
Code

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

Browse Source
This commit is contained in:
ssongliu 2023-03-22 15:32:29 +08:00 committed by GitHub
parent fa983bdcc9
commit 39e3e8f214
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 145 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/styles/common.scss
View File

@ -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 {

29
frontend/src/views/container/compose/index.vue
View File

@ -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();
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' });

30
frontend/src/views/container/container/index.vue
View File

@ -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();
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' });

24
frontend/src/views/container/image/index.vue
View File

@ -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();
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' });

30
frontend/src/views/container/network/index.vue
View File

@ -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();
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' });

26
frontend/src/views/container/repo/index.vue
View File

@ -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();
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' });

30
frontend/src/views/container/template/index.vue
View File

@ -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();
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' });

26
frontend/src/views/container/volume/index.vue
View File

@ -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();
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' });

2
frontend/src/views/database/mysql/index.vue
View File

@ -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" />

2
frontend/src/views/database/redis/index.vue
View File

@ -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" />