fix: 数据库遮罩样式调整

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

@@ -35,39 +35,45 @@
                 </el-row>
             </el-card>
         </div>
-        <el-card style="margin-top: 40px">
-            <LayoutContent :header="$t('container.containerList')" back-name="Compose" :reload="true">
+        <LayoutContent
+            v-loading="loading"
+            style="margin-top: 30px"
+            back-name="Compose"
+            :title="$t('container.containerList')"
+            :reload="true"
+        >
+            <template #toolbar>
+                <el-button-group>
+                    <el-button :disabled="checkStatus('start')" @click="onOperate('start')">
+                        {{ $t('container.start') }}
+                    </el-button>
+                    <el-button :disabled="checkStatus('stop')" @click="onOperate('stop')">
+                        {{ $t('container.stop') }}
+                    </el-button>
+                    <el-button :disabled="checkStatus('restart')" @click="onOperate('restart')">
+                        {{ $t('container.restart') }}
+                    </el-button>
+                    <el-button :disabled="checkStatus('kill')" @click="onOperate('kill')">
+                        {{ $t('container.kill') }}
+                    </el-button>
+                    <el-button :disabled="checkStatus('pause')" @click="onOperate('pause')">
+                        {{ $t('container.pause') }}
+                    </el-button>
+                    <el-button :disabled="checkStatus('unpause')" @click="onOperate('unpause')">
+                        {{ $t('container.unpause') }}
+                    </el-button>
+                    <el-button :disabled="checkStatus('remove')" @click="onOperate('remove')">
+                        {{ $t('container.remove') }}
+                    </el-button>
+                </el-button-group>
+            </template>
+            <template #main>
                 <ComplexTable
                     :pagination-config="paginationConfig"
                     v-model:selects="selects"
                     :data="data"
                     @search="search"
                 >
-                    <template #toolbar>
-                        <el-button-group>
-                            <el-button :disabled="checkStatus('start')" @click="onOperate('start')">
-                                {{ $t('container.start') }}
-                            </el-button>
-                            <el-button :disabled="checkStatus('stop')" @click="onOperate('stop')">
-                                {{ $t('container.stop') }}
-                            </el-button>
-                            <el-button :disabled="checkStatus('restart')" @click="onOperate('restart')">
-                                {{ $t('container.restart') }}
-                            </el-button>
-                            <el-button :disabled="checkStatus('kill')" @click="onOperate('kill')">
-                                {{ $t('container.kill') }}
-                            </el-button>
-                            <el-button :disabled="checkStatus('pause')" @click="onOperate('pause')">
-                                {{ $t('container.pause') }}
-                            </el-button>
-                            <el-button :disabled="checkStatus('unpause')" @click="onOperate('unpause')">
-                                {{ $t('container.unpause') }}
-                            </el-button>
-                            <el-button :disabled="checkStatus('remove')" @click="onOperate('remove')">
-                                {{ $t('container.remove') }}
-                            </el-button>
-                        </el-button-group>
-                    </template>
                     <el-table-column type="selection" fix />
                     <el-table-column
                         :label="$t('commons.table.name')"
@@ -114,8 +120,8 @@
                 <CreateDialog @search="search" ref="dialogCreateRef" />
                 <MonitorDialog ref="dialogMonitorRef" />
                 <TerminalDialog ref="dialogTerminalRef" />
-            </LayoutContent>
-        </el-card>
+            </template>
+        </LayoutContent>
     </div>
 </template>
 

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

@@ -11,19 +11,26 @@
             </template>
 
             <template #toolbar v-if="mysqlIsExist && !isOnSetting">
-                <el-button type="primary" @click="onOpenDialog()">
-                    {{ $t('database.create') }}
-                </el-button>
-                <el-button @click="onChangeRootPassword" type="primary" plain>
-                    {{ $t('database.rootPassword') }}
-                </el-button>
-                <el-button @click="onChangeAccess" type="primary" plain>
-                    {{ $t('database.remoteAccess') }}
-                </el-button>
-                <el-button @click="goDashboard" type="primary" plain>phpMyAdmin</el-button>
+                <div :class="{ mask: mysqlStatus != 'Running' }">
+                    <el-button type="primary" @click="onOpenDialog()">
+                        {{ $t('database.create') }}
+                    </el-button>
+                    <el-button @click="onChangeRootPassword" type="primary" plain>
+                        {{ $t('database.rootPassword') }}
+                    </el-button>
+                    <el-button @click="onChangeAccess" type="primary" plain>
+                        {{ $t('database.remoteAccess') }}
+                    </el-button>
+                    <el-button @click="goDashboard" type="primary" plain>phpMyAdmin</el-button>
+                </div>
             </template>
             <template #main v-if="mysqlIsExist && !isOnSetting">
-                <ComplexTable :pagination-config="paginationConfig" @search="search" :data="data">
+                <ComplexTable
+                    :pagination-config="paginationConfig"
+                    @search="search"
+                    :data="data"
+                    :class="{ mask: mysqlStatus != 'Running' }"
+                >
                     <el-table-column :label="$t('commons.table.name')" prop="name" />
                     <el-table-column :label="$t('commons.login.username')" prop="username" />
                     <el-table-column :label="$t('commons.login.password')" prop="password">
@@ -375,7 +382,7 @@ const loadDashboardPort = async () => {
 const checkExist = (data: App.CheckInstalled) => {
     mysqlIsExist.value = data.isExist;
     mysqlName.value = data.name;
-    mysqlStatus.value = data.status;
+    mysqlStatus.value = 'Failed';
     mysqlVersion.value = data.version;
     mysqlContainer.value = data.containerName;
     if (mysqlIsExist.value) {

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

@@ -1,25 +1,24 @@
 <template>
     <div v-loading="loading">
-        <AppStatus
-            :app-key="'redis'"
-            style="margin-top: 20px"
-            @before="onBefore"
-            @setting="onSetting"
-            @is-exist="checkExist"
-        ></AppStatus>
-
-        <LayoutContent
-            v-show="!isOnSetting && redisIsExist"
-            :title="'Redis ' + $t('menu.database')"
-            :class="{ mask: redisStatus != 'Running' }"
-        >
-            <template #toolbar v-if="!isOnSetting && redisIsExist">
-                <el-button type="primary" plain @click="goDashboard" icon="Position">Redis-Commander</el-button>
-                <el-button type="primary" plain @click="onChangePassword">
-                    {{ $t('database.changePassword') }}
-                </el-button>
+        <LayoutContent :title="'Redis ' + $t('menu.database')">
+            <template #app>
+                <AppStatus
+                    :app-key="'redis'"
+                    style="margin-top: 20px"
+                    @before="onBefore"
+                    @setting="onSetting"
+                    @is-exist="checkExist"
+                ></AppStatus>
             </template>
-            <template #main>
+            <template #toolbar v-if="!isOnSetting && redisIsExist">
+                <div :class="{ mask: redisStatus != 'Running' }">
+                    <el-button type="primary" plain @click="goDashboard" icon="Position">Redis-Commander</el-button>
+                    <el-button type="primary" plain @click="onChangePassword">
+                        {{ $t('database.changePassword') }}
+                    </el-button>
+                </div>
+            </template>
+            <template #main v-if="redisIsExist && !isOnSetting">
                 <Terminal :key="isRefresh" ref="terminalRef" />
             </template>
         </LayoutContent>
@@ -57,7 +56,7 @@ import Setting from '@/views/database/redis/setting/index.vue';
 import Password from '@/views/database/redis/password/index.vue';
 import Terminal from '@/views/database/redis/terminal/index.vue';
 import AppStatus from '@/components/app-status/index.vue';
-import { ref } from 'vue';
+import { nextTick, ref } from 'vue';
 import { App } from '@/api/interface/app';
 import { GetAppPort } from '@/api/modules/app';
 import router from '@/routers';
@@ -113,7 +112,9 @@ const checkExist = (data: App.CheckInstalled) => {
     loading.value = false;
     if (redisStatus.value === 'Running') {
         loadDashboardPort();
-        terminalRef.value.acceptParams();
+        nextTick(() => {
+            terminalRef.value.acceptParams();
+        });
     }
 };
 

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

@@ -48,19 +48,6 @@
                                 </el-input>
                             </el-form-item>
 
-                            <el-form-item :label="$t('setting.panelPort')" :rules="Rules.port" prop="serverPort">
-                                <el-input clearable v-model.number="form.serverPort">
-                                    <template #append>
-                                        <el-button
-                                            @click="onSavePort(panelFormRef, 'ServerPort', form.serverPort)"
-                                            icon="Collection"
-                                        >
-                                            {{ $t('commons.button.save') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
-
                             <el-form-item :label="$t('setting.language')" :rules="Rules.requiredSelect" prop="language">
                                 <el-radio-group
                                     style="width: 100%"
@@ -114,9 +101,9 @@
 
 <script lang="ts" setup>
 import { ref, reactive, onMounted, computed } from 'vue';
-import { ElMessage, ElForm, ElMessageBox } from 'element-plus';
+import { ElMessage, ElForm } from 'element-plus';
 import LayoutContent from '@/layout/layout-content.vue';
-import { syncTime, getSettingInfo, updateSetting, updatePort } from '@/api/modules/setting';
+import { syncTime, getSettingInfo, updateSetting } from '@/api/modules/setting';
 import { Rules } from '@/global/form-rules';
 import { GlobalStore } from '@/store';
 import { useI18n } from 'vue-i18n';
@@ -133,7 +120,6 @@ type FormInstance = InstanceType<typeof ElForm>;
 const form = reactive({
     userName: '',
     email: '',
-    serverPort: 9999,
     sessionTimeout: 0,
     localTime: '',
     panelName: '',
@@ -152,7 +138,6 @@ const search = async () => {
     form.userName = res.data.userName;
     form.sessionTimeout = Number(res.data.sessionTimeout);
     form.localTime = res.data.localTime;
-    form.serverPort = Number(res.data.serverPort);
     form.panelName = res.data.panelName;
     form.theme = res.data.theme;
     form.language = res.data.language;
@@ -209,35 +194,6 @@ const onSave = async (formEl: FormInstance | undefined, key: string, val: any) =
         });
 };
 
-const onSavePort = async (formEl: FormInstance | undefined, key: string, val: any) => {
-    if (!formEl) return;
-    const result = await formEl.validateField(key.replace(key[0], key[0].toLowerCase()), callback);
-    if (!result) {
-        return;
-    }
-    ElMessageBox.confirm(i18n.t('setting.portChangeHelper'), i18n.t('setting.portChange'), {
-        confirmButtonText: i18n.t('commons.button.confirm'),
-        cancelButtonText: i18n.t('commons.button.cancel'),
-        type: 'info',
-    }).then(async () => {
-        loading.value = true;
-        let param = {
-            serverPort: val,
-        };
-        await updatePort(param)
-            .then(() => {
-                loading.value = false;
-                ElMessage.success(i18n.t('commons.msg.operationSuccess'));
-                let href = window.location.href;
-                let ip = href.split('//')[1].split(':')[0];
-                window.open(`${href.split('//')[0]}//${ip}:${val}/1panel/login`, '_self');
-            })
-            .catch(() => {
-                loading.value = false;
-            });
-    });
-};
-
 function countdown() {
     count.value = TIME_COUNT.value;
     show.value = true;

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

@@ -15,6 +15,20 @@
                                     </template>
                                 </el-input>
                             </el-form-item>
+
+                            <el-form-item :label="$t('setting.panelPort')" :rules="Rules.port" prop="serverPort">
+                                <el-input clearable v-model.number="form.serverPort">
+                                    <template #append>
+                                        <el-button
+                                            @click="onSavePort(panelFormRef, 'ServerPort', form.serverPort)"
+                                            icon="Collection"
+                                        >
+                                            {{ $t('commons.button.save') }}
+                                        </el-button>
+                                    </template>
+                                </el-input>
+                            </el-form-item>
+
                             <el-form-item
                                 :label="$t('setting.expirationTime')"
                                 prop="expirationTime"
@@ -178,10 +192,10 @@
 
 <script lang="ts" setup>
 import { ref, reactive, onMounted } from 'vue';
-import { ElMessage, ElForm } from 'element-plus';
+import { ElMessage, ElForm, ElMessageBox } from 'element-plus';
 import { Setting } from '@/api/interface/setting';
 import LayoutContent from '@/layout/layout-content.vue';
-import { updatePassword, updateSetting, getMFA, bindMFA, getSettingInfo } from '@/api/modules/setting';
+import { updatePassword, updateSetting, getMFA, bindMFA, getSettingInfo, updatePort } from '@/api/modules/setting';
 import i18n from '@/lang';
 import { Rules } from '@/global/form-rules';
 import { dateFormatSimple } from '@/utils/util';
@@ -211,7 +225,7 @@ const passForm = reactive({
 
 const form = reactive({
     password: '',
-    serverPort: '',
+    serverPort: 9999,
     securityEntrance: '',
     expirationDays: 0,
     expirationTime: '',
@@ -229,6 +243,7 @@ const timeoutForm = reactive({
 const search = async () => {
     const res = await getSettingInfo();
     form.password = '******';
+    form.serverPort = Number(res.data.serverPort);
     form.securityEntrance = res.data.securityEntrance;
     form.expirationDays = Number(res.data.expirationDays);
     form.expirationTime = res.data.expirationTime;
@@ -284,6 +299,34 @@ function checkPassword(rule: any, value: any, callback: any) {
     }
     callback();
 }
+const onSavePort = async (formEl: FormInstance | undefined, key: string, val: any) => {
+    if (!formEl) return;
+    const result = await formEl.validateField(key.replace(key[0], key[0].toLowerCase()), callback);
+    if (!result) {
+        return;
+    }
+    ElMessageBox.confirm(i18n.global.t('setting.portChangeHelper'), i18n.global.t('setting.portChange'), {
+        confirmButtonText: i18n.global.t('commons.button.confirm'),
+        cancelButtonText: i18n.global.t('commons.button.cancel'),
+        type: 'info',
+    }).then(async () => {
+        loading.value = true;
+        let param = {
+            serverPort: val,
+        };
+        await updatePort(param)
+            .then(() => {
+                loading.value = false;
+                ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+                let href = window.location.href;
+                let ip = href.split('//')[1].split(':')[0];
+                window.open(`${href.split('//')[0]}//${ip}:${val}/1panel/login`, '_self');
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    });
+};
 
 const onChangePassword = async () => {
     passForm.oldPassword = '';