feat: 修改按钮颜色

frontend/src/lang/modules/en.ts

@@ -162,6 +162,11 @@ export default {
         ioDelay: 'IO delay',
         time: 'Times',
 
+        runSmoothly: 'Run smoothly',
+        runNormal: 'Run normal',
+        runSlowly: 'Run slowly',
+        runJam: 'Run Blockaged',
+
         core: 'Physical core',
         logicCore: 'Logic core',
         loadAverage: 'Average load in the last {0} minutes',

frontend/src/lang/modules/zh.ts

@@ -163,6 +163,11 @@ export default {
         ioDelay: 'IO 延迟',
         time: '次',
 
+        runSmoothly: '运行流畅',
+        runNormal: '运行正常',
+        runSlowly: '运行缓慢',
+        runJam: '运行堵塞',
+
         core: '物理核心',
         logicCore: '逻辑核心',
         loadAverage: '最近 {0} 分钟平均负载',

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

@@ -3,9 +3,9 @@
         <Submenu activeName="mysql" />
         <AppStatus :app-key="'mysql'" style="margin-top: 20px" @setting="onSetting" @is-exist="checkExist" />
         <div v-if="mysqlIsExist">
-            <Setting ref="settingRef"></Setting>
+            <Setting ref="settingRef" style="margin-top: 20px" />
 
-            <el-card v-if="!isOnSetting" style="margin-top: 5px">
+            <el-card v-if="!isOnSetting" style="margin-top: 20px">
                 <ComplexTable
                     :pagination-config="paginationConfig"
                     v-model:selects="selects"
@@ -132,11 +132,7 @@ import { Rules } from '@/global/form-rules';
 import { App } from '@/api/interface/app';
 
 const selects = ref<any>([]);
-const mysqlInfo = reactive({
+const mysqlName = ref();
-    name: '',
-    version: '',
-    isExist: false,
-});
 const isOnSetting = ref<boolean>();
 
 const data = ref();
@@ -151,7 +147,7 @@ const mysqlIsExist = ref(false);
 const dialogRef = ref();
 const onOpenDialog = async () => {
     let params = {
-        mysqlName: mysqlInfo.name,
+        mysqlName: mysqlName.value,
     };
     dialogRef.value!.acceptParams(params);
 };
@@ -159,7 +155,7 @@ const onOpenDialog = async () => {
 const dialogBackupRef = ref();
 const onOpenBackupDialog = async (dbName: string) => {
     let params = {
-        mysqlName: mysqlInfo.name,
+        mysqlName: mysqlName.value,
         dbName: dbName,
     };
     dialogBackupRef.value!.acceptParams(params);
@@ -171,7 +167,7 @@ const settingRef = ref();
 const onSetting = async () => {
     isOnSetting.value = true;
     let params = {
-        mysqlName: mysqlInfo.name,
+        mysqlName: mysqlName.value,
     };
     settingRef.value!.acceptParams(params);
 };
@@ -194,7 +190,7 @@ const submitChangeInfo = async (formEl: FormInstance | undefined) => {
     formEl.validate(async (valid) => {
         if (!valid) return;
         changeForm.value = changeForm.operation === 'password' ? changeForm.password : changeForm.privilege;
-        changeForm.mysqlName = mysqlInfo.name;
+        changeForm.mysqlName = mysqlName.value;
         await updateMysqlDBInfo(changeForm);
         ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
         search();
@@ -214,6 +210,10 @@ const search = async () => {
 
 const checkExist = (data: App.CheckInstalled) => {
     mysqlIsExist.value = data.isExist;
+    mysqlName.value = data.name;
+    if (mysqlIsExist.value) {
+        search();
+    }
 };
 
 const onBatchDelete = async (row: Database.MysqlDBInfo | null) => {
@@ -262,7 +262,7 @@ const buttons = [
         label: i18n.global.t('database.loadBackup'),
         click: (row: Database.MysqlDBInfo) => {
             let params = {
-                mysqlName: mysqlInfo.name,
+                mysqlName: mysqlName.value,
                 dbName: row.name,
             };
             uploadRef.value!.acceptParams(params);

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

@@ -4,9 +4,9 @@
 
         <AppStatus :app-key="'redis'" style="margin-top: 20px" @setting="onSetting" @is-exist="checkExist"></AppStatus>
         <div v-show="redisIsExist">
-            <Setting ref="settingRef"></Setting>
+            <Setting ref="settingRef" style="margin-top: 20px" />
 
-            <Terminal v-show="!isOnSetting" style="margin-top: 5px" ref="terminalRef"></Terminal>
+            <Terminal v-show="!isOnSetting" style="margin-top: 20px" ref="terminalRef" />
         </div>
     </div>
 </template>

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

@@ -35,7 +35,9 @@
                         </template>
                     </el-popover>
                     <br />
-                    <span>( {{ formatNumber(currentInfo.cpuUsed) }} / {{ currentInfo.cpuTotal }} ) Core</span>
+                    <span class="input-help">
+                        ( {{ formatNumber(currentInfo.cpuUsed) }} / {{ currentInfo.cpuTotal }} ) Core
+                    </span>
                 </el-col>
                 <el-col :span="12" align="center">
                     <el-progress type="dashboard" :width="80" :percentage="formatNumber(currentInfo.MemoryUsedPercent)">
@@ -45,9 +47,9 @@
                         </template>
                     </el-progress>
                     <br />
-                    <span>
+                    <span class="input-help">
                         ( {{ formatNumber(currentInfo.memoryUsed / 1024 / 1024) }} /
-                        {{ currentInfo.memoryTotal / 1024 / 1024 }} ) MB
+                        {{ formatNumber(currentInfo.memoryTotal / 1024 / 1024) }} ) MB
                     </span>
                 </el-col>
             </el-row>
@@ -77,7 +79,7 @@
                         </template>
                     </el-popover>
                     <br />
-                    <span>{{ loadStatus(currentInfo.loadUsagePercent) }}</span>
+                    <span class="input-help">{{ loadStatus(currentInfo.loadUsagePercent) }}</span>
                 </el-col>
                 <el-col :span="12" align="center">
                     <el-popover placement="bottom" :width="160" trigger="hover">
@@ -120,7 +122,7 @@
                     </el-popover>
 
                     <br />
-                    <span>
+                    <span class="input-help">
                         ( {{ formatNumber(currentInfo.used / 1024 / 1024 / 1024) }} /
                         {{ formatNumber(currentInfo.total / 1024 / 1024 / 1024) }} ) GB
                     </span>
@@ -132,13 +134,16 @@
 
 <script lang="ts" setup>
 import { Dashboard } from '@/api/interface/dashboard';
+import i18n from '@/lang';
 import { ref } from 'vue';
 
 const baseInfo = ref<Dashboard.BaseInfo>({
-    haloInstatllID: 0,
+    haloID: 0,
-    dateeaseInstatllID: 0,
+    dateeaseID: 0,
-    jumpserverInstatllID: 0,
+    jumpserverID: 0,
-    metersphereInstatllID: 0,
+    metersphereID: 0,
+    kubeoperatorID: 0,
+    kubepiID: 0,
 
     websiteNumber: 0,
     databaseNumber: 0,
@@ -208,15 +213,15 @@ function formatNumber(val: number) {
 
 function loadStatus(val: number) {
     if (val < 30) {
-        return '运行流畅';
+        return i18n.global.t('home.runSmoothly');
     }
     if (val < 70) {
-        return '运行正常';
+        return i18n.global.t('home.runNormal');
     }
     if (val < 80) {
-        return '运行缓慢';
+        return i18n.global.t('home.runSlowly');
     }
-    return '运行堵塞';
+    return i18n.global.t('home.runJam');
 }
 defineExpose({
     acceptParams,