fix: 数据库样式调整

This commit is contained in:
ssongliu
2022-11-23 19:23:41 +08:00
committed by ssongliu
parent a2fb8353de
commit e748f493da
7 changed files with 245 additions and 318 deletions

View File

@@ -1,100 +1,32 @@
<template>
<div>
<Submenu activeName="redis" />
<div v-show="!redisInfo.isExist" style="margin-top: 20px">
<el-alert :closable="false" :title="$t('database.noMysql', ['Redis'])" type="info">
<el-link icon="Position" @click="goRouter('/apps')" type="primary">
{{ $t('database.goInstall') }}
</el-link>
</el-alert>
</div>
<div v-show="redisInfo.isExist">
<el-button style="margin-top: 20px" size="default" icon="Tickets" @click="changeView('status')">
{{ $t('database.status') }}
</el-button>
<el-button style="margin-top: 20px" size="default" icon="Setting" @click="changeView('setting')">
{{ $t('database.setting') }}
</el-button>
<el-button style="margin-top: 20px" size="default" icon="Files" @click="changeView('persistence')">
{{ $t('database.persistence') }}
</el-button>
<el-button style="margin-top: 20px" size="default" icon="Setting" @click="changeView('terminal')">
{{ $t('database.terminal') }}
</el-button>
<Status ref="statusRef"></Status>
<Setting ref="settingRef"></Setting>
<Persistence ref="persistenceRef"></Persistence>
<Terminal ref="terminalRef"></Terminal>
</div>
<AppStatus :app-key="'redis'" style="margin-top: 20px" @setting="onSetting"></AppStatus>
<Setting ref="settingRef"></Setting>
<Terminal v-if="!isOnSetting" style="margin-top: 5px" ref="terminalRef"></Terminal>
</div>
</template>
<script lang="ts" setup>
import Submenu from '@/views/database/index.vue';
import Status from '@/views/database/redis/status/index.vue';
import Setting from '@/views/database/redis/setting/index.vue';
import Persistence from '@/views/database/redis/persistence/index.vue';
import Terminal from '@/views/database/redis/terminal/index.vue';
import { onMounted, reactive, ref } from 'vue';
import { CheckAppInstalled } from '@/api/modules/app';
import { useRouter } from 'vue-router';
const router = useRouter();
import AppStatus from '@/components/app-status/index.vue';
import { onMounted, ref } from 'vue';
const statusRef = ref();
const settingRef = ref();
const persistenceRef = ref();
const terminalRef = ref();
const settingRef = ref();
const isOnSetting = ref(false);
const redisInfo = reactive({
name: '',
version: '',
isExist: false,
});
const changeView = async (params: string) => {
switch (params) {
case 'status':
settingRef.value!.onClose();
terminalRef.value!.onClose();
persistenceRef.value!.onClose();
statusRef.value!.acceptParams(params);
break;
case 'setting':
statusRef.value!.onClose();
terminalRef.value!.onClose();
persistenceRef.value!.onClose();
settingRef.value!.acceptParams(params);
break;
case 'persistence':
statusRef.value!.onClose();
settingRef.value!.onClose();
terminalRef.value!.onClose();
persistenceRef.value!.acceptParams(params);
break;
case 'terminal':
statusRef.value!.onClose();
settingRef.value!.onClose();
persistenceRef.value!.onClose();
terminalRef.value!.acceptParams(params);
break;
}
};
const checkRedisInstalled = async () => {
const res = await CheckAppInstalled('redis');
redisInfo.isExist = res.data.isExist;
redisInfo.name = res.data.name;
redisInfo.version = res.data.version;
if (redisInfo.isExist) {
changeView('status');
}
};
const goRouter = async (path: string) => {
router.push({ path: path });
const onSetting = async () => {
isOnSetting.value = true;
terminalRef.value.onClose();
settingRef.value!.acceptParams();
};
onMounted(() => {
checkRedisInstalled();
terminalRef.value.acceptParams();
});
</script>