From 36e0aece06d2fedca12e9390f4b08fe0cfedb6ed Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Wed, 7 May 2025 08:03:41 +0800
Subject: [PATCH] style: Adjust the style of the ssh configuration page (#8560)

---
 .../src/views/container/setting/index.vue     |   1 +
 frontend/src/views/host/ssh/ssh/index.vue     | 166 +++++++++---------
 .../views/setting/backup-account/index.vue    |   7 +-
 .../setting/backup-account/operate/index.vue  |   4 +-
 4 files changed, 92 insertions(+), 86 deletions(-)

diff --git a/frontend/src/views/container/setting/index.vue b/frontend/src/views/container/setting/index.vue
index f3e59fd76..3fc7175c0 100644
--- a/frontend/src/views/container/setting/index.vue
+++ b/frontend/src/views/container/setting/index.vue
@@ -164,6 +164,7 @@
                     <CodemirrorPro
                         class="mt-5"
                         :heightDiff="loadHeight()"
+                        :minHeight="350"
                         v-model="dockerConf"
                         mode="json"
                         placeholder="# The Docker configuration file does not exist or is empty (/etc/docker/daemon.json)"
diff --git a/frontend/src/views/host/ssh/ssh/index.vue b/frontend/src/views/host/ssh/ssh/index.vue
index 597cde53e..ccee15006 100644
--- a/frontend/src/views/host/ssh/ssh/index.vue
+++ b/frontend/src/views/host/ssh/ssh/index.vue
@@ -39,90 +39,89 @@
 
         <LayoutContent>
             <template #main>
-                <MainDiv :heightDiff="320">
-                    <el-radio-group v-model="confShowType" @change="changeMode">
-                        <el-radio-button value="base">{{ $t('database.baseConf') }}</el-radio-button>
-                        <el-radio-button value="all">{{ $t('database.allConf') }}</el-radio-button>
-                    </el-radio-group>
-                    <el-row class="mt-10" v-if="confShowType === 'base'">
-                        <el-col :xs="24" :sm="20" :md="20" :lg="10" :xl="10">
-                            <el-form :model="form" label-position="right" ref="formRef" label-width="100px">
-                                <el-form-item :label="$t('commons.table.port')" prop="port">
-                                    <el-input disabled v-model.number="form.port">
-                                        <template #append>
-                                            <el-button @click="onChangePort" icon="Setting">
-                                                {{ $t('commons.button.set') }}
-                                            </el-button>
-                                        </template>
-                                    </el-input>
-                                    <span class="input-help">{{ $t('ssh.portHelper') }}</span>
-                                </el-form-item>
-                                <el-form-item :label="$t('ssh.listenAddress')" prop="listenAddress">
-                                    <el-input disabled v-model="form.listenAddressItem">
-                                        <template #append>
-                                            <el-button @click="onChangeAddress" icon="Setting">
-                                                {{ $t('commons.button.set') }}
-                                            </el-button>
-                                        </template>
-                                    </el-input>
-                                    <span class="input-help">{{ $t('ssh.addressHelper') }}</span>
-                                </el-form-item>
-                                <el-form-item :label="$t('ssh.permitRootLogin')" prop="permitRootLoginItem">
-                                    <el-input disabled v-model="form.permitRootLoginItem">
-                                        <template #append>
-                                            <el-button @click="onChangeRoot" icon="Setting">
-                                                {{ $t('commons.button.set') }}
-                                            </el-button>
-                                        </template>
-                                    </el-input>
-                                    <span class="input-help">{{ $t('ssh.rootSettingHelper') }}</span>
-                                </el-form-item>
-                                <el-form-item :label="$t('ssh.passwordAuthentication')" prop="passwordAuthentication">
-                                    <el-switch
-                                        active-value="yes"
-                                        inactive-value="no"
-                                        @change="onSave(formRef, 'PasswordAuthentication', form.passwordAuthentication)"
-                                        v-model="form.passwordAuthentication"
-                                    ></el-switch>
-                                    <span class="input-help">{{ $t('ssh.pwdAuthHelper') }}</span>
-                                </el-form-item>
-                                <el-form-item :label="$t('ssh.pubkeyAuthentication')" prop="pubkeyAuthentication">
-                                    <el-switch
-                                        active-value="yes"
-                                        inactive-value="no"
-                                        @change="onSave(formRef, 'PubkeyAuthentication', form.pubkeyAuthentication)"
-                                        v-model="form.pubkeyAuthentication"
-                                    ></el-switch>
-                                    <span class="input-help">{{ $t('ssh.keyAuthHelper') }}</span>
-                                    <el-button link @click="onOpenDrawer" type="primary">
-                                        {{ $t('ssh.pubkey') }}
-                                    </el-button>
-                                </el-form-item>
-                                <el-form-item :label="$t('ssh.useDNS')" prop="useDNS">
-                                    <el-switch
-                                        active-value="yes"
-                                        inactive-value="no"
-                                        @change="onSave(formRef, 'UseDNS', form.useDNS)"
-                                        v-model="form.useDNS"
-                                    ></el-switch>
-                                    <span class="input-help">{{ $t('ssh.dnsHelper') }}</span>
-                                </el-form-item>
-                            </el-form>
-                        </el-col>
-                    </el-row>
+                <el-radio-group v-model="confShowType" @change="changeMode">
+                    <el-radio-button value="base">{{ $t('database.baseConf') }}</el-radio-button>
+                    <el-radio-button value="all">{{ $t('database.allConf') }}</el-radio-button>
+                </el-radio-group>
+                <el-row class="mt-10" v-if="confShowType === 'base'">
+                    <el-col :xs="24" :sm="20" :md="20" :lg="10" :xl="10">
+                        <el-form :model="form" label-position="right" ref="formRef" label-width="100px">
+                            <el-form-item :label="$t('commons.table.port')" prop="port">
+                                <el-input disabled v-model.number="form.port">
+                                    <template #append>
+                                        <el-button @click="onChangePort" icon="Setting">
+                                            {{ $t('commons.button.set') }}
+                                        </el-button>
+                                    </template>
+                                </el-input>
+                                <span class="input-help">{{ $t('ssh.portHelper') }}</span>
+                            </el-form-item>
+                            <el-form-item :label="$t('ssh.listenAddress')" prop="listenAddress">
+                                <el-input disabled v-model="form.listenAddressItem">
+                                    <template #append>
+                                        <el-button @click="onChangeAddress" icon="Setting">
+                                            {{ $t('commons.button.set') }}
+                                        </el-button>
+                                    </template>
+                                </el-input>
+                                <span class="input-help">{{ $t('ssh.addressHelper') }}</span>
+                            </el-form-item>
+                            <el-form-item :label="$t('ssh.permitRootLogin')" prop="permitRootLoginItem">
+                                <el-input disabled v-model="form.permitRootLoginItem">
+                                    <template #append>
+                                        <el-button @click="onChangeRoot" icon="Setting">
+                                            {{ $t('commons.button.set') }}
+                                        </el-button>
+                                    </template>
+                                </el-input>
+                                <span class="input-help">{{ $t('ssh.rootSettingHelper') }}</span>
+                            </el-form-item>
+                            <el-form-item :label="$t('ssh.passwordAuthentication')" prop="passwordAuthentication">
+                                <el-switch
+                                    active-value="yes"
+                                    inactive-value="no"
+                                    @change="onSave(formRef, 'PasswordAuthentication', form.passwordAuthentication)"
+                                    v-model="form.passwordAuthentication"
+                                ></el-switch>
+                                <span class="input-help">{{ $t('ssh.pwdAuthHelper') }}</span>
+                            </el-form-item>
+                            <el-form-item :label="$t('ssh.pubkeyAuthentication')" prop="pubkeyAuthentication">
+                                <el-switch
+                                    active-value="yes"
+                                    inactive-value="no"
+                                    @change="onSave(formRef, 'PubkeyAuthentication', form.pubkeyAuthentication)"
+                                    v-model="form.pubkeyAuthentication"
+                                ></el-switch>
+                                <span class="input-help">{{ $t('ssh.keyAuthHelper') }}</span>
+                                <el-button link @click="onOpenDrawer" type="primary">
+                                    {{ $t('ssh.pubkey') }}
+                                </el-button>
+                            </el-form-item>
+                            <el-form-item :label="$t('ssh.useDNS')" prop="useDNS">
+                                <el-switch
+                                    active-value="yes"
+                                    inactive-value="no"
+                                    @change="onSave(formRef, 'UseDNS', form.useDNS)"
+                                    v-model="form.useDNS"
+                                ></el-switch>
+                                <span class="input-help">{{ $t('ssh.dnsHelper') }}</span>
+                            </el-form-item>
+                        </el-form>
+                    </el-col>
+                </el-row>
 
-                    <div v-if="confShowType === 'all'">
-                        <CodemirrorPro
-                            :heightDiff="400"
-                            class="mt-5"
-                            v-model="sshConf"
-                            placeholder="# The SSH configuration file does not exist or is empty (/etc/ssh/sshd_config)"
-                        ></CodemirrorPro>
-                        <el-button :disabled="loading" type="primary" @click="onSaveFile" style="margin-top: 5px">
-                            {{ $t('commons.button.save') }}
-                        </el-button>
-                    </div>
-                </MainDiv>
+                <div v-if="confShowType === 'all'">
+                    <CodemirrorPro
+                        :heightDiff="450"
+                        :minHeight="350"
+                        class="mt-5"
+                        v-model="sshConf"
+                        placeholder="# The SSH configuration file does not exist or is empty (/etc/ssh/sshd_config)"
+                    ></CodemirrorPro>
+                    <el-button :disabled="loading" type="primary" @click="onSaveFile" class="mt-2.5">
+                        {{ $t('commons.button.save') }}
+                    </el-button>
+                </div>
             </template>
         </LayoutContent>
 
@@ -140,7 +139,6 @@ import PubKey from '@/views/host/ssh/ssh/pubkey/index.vue';
 import Root from '@/views/host/ssh/ssh/root/index.vue';
 import Port from '@/views/host/ssh/ssh/port/index.vue';
 import Address from '@/views/host/ssh/ssh/address/index.vue';
-import MainDiv from '@/components/main-div/index.vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { getSSHConf, getSSHInfo, operateSSH, updateSSH, updateSSHByfile } from '@/api/modules/host';
diff --git a/frontend/src/views/setting/backup-account/index.vue b/frontend/src/views/setting/backup-account/index.vue
index 16e5c6819..43a8e8317 100644
--- a/frontend/src/views/setting/backup-account/index.vue
+++ b/frontend/src/views/setting/backup-account/index.vue
@@ -36,7 +36,7 @@
                     >
                         <template #default="{ row }">
                             <el-text type="primary" class="cursor-pointer" @click="onInspect(row)">
-                                {{ row.name }}
+                                {{ row.name === 'localhost' ? $t('terminal.local') : row.name }}
                             </el-text>
                         </template>
                     </el-table-column>
@@ -160,6 +160,11 @@ const search = async () => {
                     bac.varsJson = JSON.parse(bac.vars);
                 }
             }
+            data.value.sort((a, b) => {
+                if (a.name === 'localhost') return -1;
+                if (b.name === 'localhost') return 1;
+                return 0;
+            });
             paginationConfig.total = res.data.total;
         })
         .catch(() => {
diff --git a/frontend/src/views/setting/backup-account/operate/index.vue b/frontend/src/views/setting/backup-account/operate/index.vue
index c9a9554fa..0fd04bcb4 100644
--- a/frontend/src/views/setting/backup-account/operate/index.vue
+++ b/frontend/src/views/setting/backup-account/operate/index.vue
@@ -2,7 +2,9 @@
     <DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" @close="handleClose" size="large">
         <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="dialogData.rowData">
             <el-form-item :label="$t('commons.table.name')" prop="name" :rules="Rules.requiredInput">
-                <el-tag v-if="dialogData.title === 'edit'">{{ dialogData.rowData!.name }}</el-tag>
+                <el-tag v-if="dialogData.title === 'edit'">
+                    {{ dialogData.rowData!.name === 'localhost' ? $t('terminal.local') : dialogData.rowData!.name }}
+                </el-tag>
                 <el-input v-else v-model="dialogData.rowData!.name" />
             </el-form-item>
             <el-form-item