From 38984a502d922aa4df0695d4d79d1668b888c775 Mon Sep 17 00:00:00 2001
From: ssongliu <songlius11@163.com>
Date: Wed, 15 Feb 2023 17:10:15 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=B9=E5=99=A8=E5=BC=B9=E6=A1=86?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E6=8A=BD=E5=B1=89=EF=BC=8C=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E5=9B=BD=E9=99=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../codemirror-dialog/codemirror.vue          |  15 ++-
 .../src/components/container-log/index.vue    |  14 +--
 frontend/src/lang/modules/en.ts               | 118 ++++++++++--------
 frontend/src/lang/modules/zh.ts               |   2 +-
 frontend/src/store/index.ts                   |   2 +-
 .../views/container/compose/edit/index.vue    |  14 ++-
 .../src/views/container/compose/index.vue     |   3 -
 .../src/views/container/container/index.vue   |   2 +-
 .../views/container/container/log/index.vue   |  21 ++--
 .../container/container/monitor/index.vue     |  75 +++++------
 .../container/container/reName/index.vue      |  14 ++-
 .../container/container/terminal/index.vue    |  73 +++++------
 .../src/views/container/image/build/index.vue |   2 +-
 frontend/src/views/container/image/index.vue  |   2 +-
 .../src/views/container/image/load/index.vue  |  21 ++--
 .../src/views/container/image/tag/index.vue   |   2 +-
 .../views/container/template/detail/index.vue |  51 ++++++++
 .../src/views/container/template/index.vue    |  40 +-----
 frontend/src/views/database/mysql/index.vue   |   2 +-
 .../views/database/mysql/password/index.vue   |  68 +++++-----
 .../database/mysql/root-password/index.vue    |  12 +-
 .../views/database/mysql/setting/index.vue    |  37 +++---
 .../database/mysql/setting/slow-log/index.vue |   8 +-
 .../mysql/setting/variables/index.vue         |   2 +-
 .../views/database/redis/setting/index.vue    |   2 +-
 .../host/file-management/download/index.vue   |  21 ++--
 .../views/host/file-management/move/index.vue |  11 +-
 .../src/views/host/terminal/command/index.vue |   2 +-
 frontend/src/views/log/operation/index.vue    |  13 +-
 frontend/src/views/log/system/index.vue       |   2 +-
 .../views/setting/backup-account/index.vue    |   4 +-
 frontend/src/views/setting/panel/index.vue    |  12 +-
 .../views/setting/panel/password/index.vue    |   1 +
 frontend/src/views/setting/safe/index.vue     |   5 +-
 frontend/src/views/setting/snapshot/index.vue |   1 +
 .../website/nginx/performance/index.vue       |  10 +-
 .../website/website/nginx/source/index.vue    |   2 +-
 37 files changed, 366 insertions(+), 320 deletions(-)
 create mode 100644 frontend/src/views/container/template/detail/index.vue

diff --git a/frontend/src/components/codemirror-dialog/codemirror.vue b/frontend/src/components/codemirror-dialog/codemirror.vue
index ac9614d8b..72ce11588 100644
--- a/frontend/src/components/codemirror-dialog/codemirror.vue
+++ b/frontend/src/components/codemirror-dialog/codemirror.vue
@@ -1,9 +1,7 @@
 <template>
-    <el-dialog v-model="codeVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="70%">
+    <el-drawer v-model="codeVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
         <template #header>
-            <div class="card-header">
-                <span>{{ header }}</span>
-            </div>
+            <DrawerHeader :header="header" :back="handleClose" />
         </template>
         <codemirror
             ref="mymirror"
@@ -11,7 +9,7 @@
             placeholder="None data"
             :indent-with-tab="true"
             :tabSize="4"
-            style="max-height: 500px; min-height: 200px; width: 100%"
+            style="width: 100%; height: calc(100vh - 112px)"
             :lineWrapping="true"
             :matchBrackets="true"
             theme="cobalt"
@@ -20,7 +18,7 @@
             v-model="detailInfo"
             :readOnly="true"
         />
-    </el-dialog>
+    </el-drawer>
 </template>
 
 <script lang="ts" setup>
@@ -28,6 +26,7 @@ import { ref } from 'vue';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const mymirror = ref();
 
@@ -47,6 +46,10 @@ const acceptParams = (props: DialogProps): void => {
     codeVisiable.value = true;
 };
 
+const handleClose = () => {
+    codeVisiable.value = false;
+};
+
 defineExpose({
     acceptParams,
 });
diff --git a/frontend/src/components/container-log/index.vue b/frontend/src/components/container-log/index.vue
index 9fda66682..2f191795f 100644
--- a/frontend/src/components/container-log/index.vue
+++ b/frontend/src/components/container-log/index.vue
@@ -34,7 +34,7 @@
 import { logContainer } from '@/api/modules/container';
 import i18n from '@/lang';
 import { dateFormatForName } from '@/utils/util';
-import { nextTick, reactive, ref, shallowRef } from 'vue';
+import { nextTick, onBeforeUnmount, reactive, ref, shallowRef } from 'vue';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
@@ -75,12 +75,6 @@ const timeOptions = ref([
     },
 ]);
 
-const onCloseLog = async () => {
-    logSearch.isWatch = false;
-    clearInterval(Number(timer));
-    timer = null;
-};
-
 const searchLogs = async () => {
     const res = await logContainer(logSearch);
     logInfo.value = res.data;
@@ -121,8 +115,12 @@ const acceptParams = (props: DialogProps): void => {
     }, 1000 * 5);
 };
 
+onBeforeUnmount(() => {
+    clearInterval(Number(timer));
+    timer = null;
+});
+
 defineExpose({
     acceptParams,
-    onCloseLog,
 });
 </script>
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 49ef629ba..767bd0c89 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -6,7 +6,7 @@ export default {
             create: 'Create ',
             add: 'Add ',
             save: 'Save ',
-            set: 'Reset',
+            set: 'Setting',
             sync: 'Sync ',
             delete: 'Delete ',
             edit: 'Edit',
@@ -33,7 +33,8 @@ export default {
             init: 'Init',
             verify: 'Verify',
             saveAndEnable: 'Save and enable',
-            import: 'import',
+            import: 'Import',
+            search: 'Search',
         },
         search: {
             timeStart: 'Time start',
@@ -63,7 +64,7 @@ export default {
             title: 'Title',
             tableSetting: 'Table setting',
             autoRefresh: 'Auto refresh',
-            refreshRate: 'Refresh rate',
+            refreshRate: 'Rate',
         },
         loadingText: {
             Upgrading: 'System upgrade, please wait...',
@@ -152,17 +153,17 @@ export default {
             serviceNotStarted: 'The {0} service is not currently started',
         },
         status: {
-            running: 'running',
-            stopped: 'stopped',
-            success: 'success',
-            failed: 'failed',
-            error: 'error',
-            created: 'created',
-            restarting: 'restarting',
-            uploading: 'uploading',
-            removing: 'removing',
-            paused: 'paused',
-            exited: 'exited',
+            running: 'Running',
+            stopped: 'Stopped',
+            success: 'Success',
+            failed: 'Failed',
+            error: 'Error',
+            created: 'Created',
+            restarting: 'Restarting',
+            uploading: 'Uploading',
+            removing: 'Removing',
+            paused: 'Paused',
+            exited: 'Exited',
             enabled: 'Enabled',
             disabled: 'Disabled',
         },
@@ -174,6 +175,7 @@ export default {
         project: 'Project',
         config: 'Config',
         firewall: 'Firewall',
+        ssl: 'SSL',
         database: 'Database',
         container: 'Container',
         cronjob: 'Cronjob',
@@ -253,19 +255,20 @@ export default {
         permissionForIP: 'IP',
         permissionAll: 'All of them (unsafe)',
         rootPassword: 'Root password',
-        backupList: 'Backup list',
+        backupList: 'Backup',
         backList: 'Return',
-        loadBackup: 'Import the backup',
-        setting: 'MySQL Settings',
+        loadBackup: 'Import',
+        setting: 'Settings',
         remoteAccess: 'Remote access',
-        changePassword: 'Password change',
+        remoteConnHelper:
+            'Remote connection to mysql as user root may have security risks. Therefore, perform this operation with caution.',
+        changePassword: 'Password',
         changePasswordHelper:
             'The database has been associated with an application. Changing the password will change the database password of the application at the same time. The change takes effect after the application restarts.',
 
-        baseSetting: 'infrastructure',
-        remoteConnHelper:
-            'Remote connection to mysql as user root may have security risks. Therefore, perform this operation with caution.',
         confChange: 'Configuration change',
+
+        portSetting: 'Port setting',
         portHelper:
             'This port is the exposed port of the container. You need to save the modification separately and restart the container!',
 
@@ -394,7 +397,7 @@ export default {
         newName: 'New name',
 
         custom: 'Custom',
-        emptyUser: 'When empty, you will log in with the  default user of container',
+        emptyUser: 'When empty, you will log in as  default',
         containerTerminal: 'Container terminal',
 
         port: 'Port',
@@ -433,6 +436,7 @@ export default {
         import: 'Import',
         build: 'Build',
         imageBuild: 'Image build',
+        pathSelect: 'Path',
         label: 'Label',
         push: 'Push',
         fileName: 'FileName',
@@ -572,6 +576,7 @@ export default {
         yestoday: 'Yestoday',
         lastNDay: 'Last {0} day',
         memory: 'Memory',
+        cache: 'Cache',
         disk: 'Disk',
         network: 'Network',
         up: 'Up',
@@ -590,9 +595,10 @@ export default {
         expand: 'Expand all',
         fold: 'All contract',
         batchInput: 'Batch input',
-        quickCommand: 'quick command',
+        quickCommand: 'Quick command',
         groupDeleteHelper:
             'After the group is removed, all connections in the group will be migrated to the default group. Confirm the information',
+        command: 'Command',
         quickCmd: 'Quick command',
         addHost: 'Add Host',
         localhost: 'Localhost',
@@ -607,7 +613,7 @@ export default {
         key: 'Private Key',
         emptyTerminal: 'No terminal is currently connected',
     },
-    operations: {
+    logs: {
         operation: 'Operation logs',
         login: 'Login logs',
         system: 'System logs',
@@ -639,48 +645,48 @@ export default {
         status: 'status',
     },
     file: {
-        dir: 'folder',
+        dir: 'Folder',
         upload: 'Upload',
-        download: 'download',
-        fileName: 'file name',
+        download: 'Download',
+        fileName: 'File name',
         search: 'Find',
-        mode: 'permission',
-        owner: 'owner',
-        file: 'file',
-        remoteFile: 'remote download',
+        mode: 'Permission',
+        owner: 'Owner',
+        file: 'File',
+        remoteFile: 'Remote download',
         share: 'Share',
-        sync: 'data synchronization',
-        size: 'size',
-        updateTime: 'modification time',
+        sync: 'Data synchronization',
+        size: 'Size',
+        updateTime: 'Modification time',
         open: 'Open',
         rename: 'Rename',
-        role: 'permission',
-        info: 'attribute',
-        linkFile: 'soft link file',
-        terminal: 'terminal',
+        role: 'Permission',
+        info: 'Attribute',
+        linkFile: 'Soft link file',
+        terminal: 'Terminal',
         shareList: 'Share list',
-        zip: 'compressed',
-        user: 'user',
-        group: 'user group',
-        path: 'path',
-        public: 'public',
+        zip: 'Compressed',
+        user: 'User',
+        group: 'User group',
+        path: 'Path',
+        public: 'Public',
         setRole: 'Set permissions',
         link: 'whether to link',
         rRole: 'Read',
         wRole: 'Write',
-        xRole: 'executable',
-        name: 'name',
-        compress: 'compression',
+        xRole: 'Executable',
+        name: 'Name',
+        compress: 'Compression',
         deCompress: 'Decompression',
-        compressType: 'compression format',
-        compressDst: 'compression path',
+        compressType: 'Compression format',
+        compressDst: 'Compression path',
         replace: 'Overwrite existing files',
         compressSuccess: 'Compressed successfully',
         deCompressSuccess: 'Decompression succeeded',
         deCompressDst: 'Decompression path',
         linkType: 'Link Type',
-        softLink: 'soft link',
-        hardLink: 'hard link',
+        softLink: 'Soft link',
+        hardLink: 'Hard link',
         linkPath: 'Link Path',
         selectFile: 'Select file',
         downloadSuccess: 'Download succeeded',
@@ -689,13 +695,15 @@ export default {
         moveStart: 'Move successfully',
         move: 'Move',
         copy: 'Copy',
-        calculate: 'calculate',
+        calculate: 'Calculate',
         canNotDeCompress: 'Cannot decompress this file',
         uploadSuccess: 'Upload successful!',
         downloadProcess: 'Download progress',
         downloading: 'Downloading...',
         infoDetail: 'File Properties',
         type: 'Type',
+        list: 'File List',
+        sub: 'Include subdirectory',
     },
     setting: {
         all: 'All',
@@ -831,9 +839,9 @@ export default {
         appName: 'Application Name',
         status: 'status',
         container: 'container',
-        restart: 'restart',
-        up: 'start',
-        down: 'stop',
+        restart: 'Restart',
+        up: 'Start',
+        down: 'Stop',
         name: 'name',
         description: 'Description',
         delete: 'delete',
@@ -859,7 +867,7 @@ export default {
         checkTitle: 'Prompt',
         website: 'website',
         database: 'database',
-        defaultConfig: 'default configuration',
+        defaultConfig: 'Default configuration',
         defaultConfigHelper: 'It has been restored to the default configuration, it will take effect after saving',
         forceDelete: 'force delete',
         forceDeleteHelper:
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index bab87fb12..63ade0a7c 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -463,7 +463,6 @@ export default {
         import: '导入',
         imageBuild: '构建镜像',
         build: '构建镜像',
-        edit: '编辑',
         pathSelect: '路径选择',
         label: '标签',
         push: '推送',
@@ -592,6 +591,7 @@ export default {
         yestoday: '昨天',
         lastNDay: '近 {0} 天',
         memory: '内存',
+        cache: '缓存',
         disk: '磁盘',
         network: '网络',
         up: '上行',
diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts
index 221f359c4..db133abdb 100644
--- a/frontend/src/store/index.ts
+++ b/frontend/src/store/index.ts
@@ -38,7 +38,7 @@ export const GlobalStore = defineStore({
         setCsrfToken(token: string) {
             this.csrfToken = token;
         },
-        updateLanguage(language: string) {
+        updateLanguage(language: any) {
             this.language = language;
         },
         setThemeConfig(themeConfig: ThemeConfigProp) {
diff --git a/frontend/src/views/container/compose/edit/index.vue b/frontend/src/views/container/compose/edit/index.vue
index 524976bc2..480730278 100644
--- a/frontend/src/views/container/compose/edit/index.vue
+++ b/frontend/src/views/container/compose/edit/index.vue
@@ -1,9 +1,7 @@
 <template>
-    <el-dialog v-model="composeVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="70%">
+    <el-drawer v-model="composeVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
         <template #header>
-            <div class="card-header">
-                <span>{{ $t('commons.button.edit') }}</span>
-            </div>
+            <DrawerHeader :header="$t('commons.button.edit')" :back="handleClose" />
         </template>
         <div v-loading="loading">
             <codemirror
@@ -11,7 +9,7 @@
                 placeholder="#Define or paste the content of your docker-compose file here"
                 :indent-with-tab="true"
                 :tabSize="4"
-                style="max-height: 500px; width: 100%; min-height: 200px"
+                style="width: 100%; height: calc(100vh - 175px)"
                 :lineWrapping="true"
                 :matchBrackets="true"
                 theme="cobalt"
@@ -31,7 +29,7 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </el-drawer>
 </template>
 <script lang="ts" setup>
 import { Codemirror } from 'vue-codemirror';
@@ -41,6 +39,7 @@ import { ref } from 'vue';
 import { composeUpdate } from '@/api/modules/container';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const loading = ref(false);
 const composeVisiable = ref(false);
@@ -79,6 +78,9 @@ const acceptParams = (props: DialogProps): void => {
     name.value = props.name;
     content.value = props.content;
 };
+const handleClose = () => {
+    composeVisiable.value = false;
+};
 
 defineExpose({
     acceptParams,
diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index f382eaeb2..3cc8744de 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -195,9 +195,6 @@ const buttons = [
         click: (row: Container.ComposeInfo) => {
             onEdit(row);
         },
-        disabled: (row: any) => {
-            return row.createdBy !== '1Panel';
-        },
     },
     {
         label: i18n.global.t('commons.button.delete'),
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index 482c605e2..5b91c0c2e 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -96,7 +96,7 @@
                         show-overflow-tooltip
                     />
                     <fu-table-operations
-                        width="220px"
+                        width="370px"
                         :ellipsis="10"
                         :buttons="buttons"
                         :label="$t('commons.table.operate')"
diff --git a/frontend/src/views/container/container/log/index.vue b/frontend/src/views/container/container/log/index.vue
index 6e3aa81a4..b982047fa 100644
--- a/frontend/src/views/container/container/log/index.vue
+++ b/frontend/src/views/container/container/log/index.vue
@@ -1,15 +1,7 @@
 <template>
-    <el-dialog
-        v-model="logVisiable"
-        @close="onCloseLog"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        width="70%"
-    >
+    <el-drawer v-model="logVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
         <template #header>
-            <div class="card-header">
-                <span>{{ $t('commons.button.log') }}</span>
-            </div>
+            <DrawerHeader :header="$t('commons.button.log')" :back="handleClose" />
         </template>
         <div>
             <el-select @change="searchLogs" style="width: 10%; float: left" v-model="logSearch.mode">
@@ -28,7 +20,7 @@
             placeholder="None data"
             :indent-with-tab="true"
             :tabSize="4"
-            style="margin-top: 10px; max-height: 500px"
+            style="margin-top: 20px; height: calc(100vh - 230px)"
             :lineWrapping="true"
             :matchBrackets="true"
             theme="cobalt"
@@ -43,7 +35,7 @@
                 <el-button @click="logVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
             </span>
         </template>
-    </el-dialog>
+    </el-drawer>
 </template>
 
 <script lang="ts" setup>
@@ -54,6 +46,7 @@ import { nextTick, reactive, ref, shallowRef } from 'vue';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const extensions = [javascript(), oneDark];
 
@@ -93,8 +86,10 @@ const timeOptions = ref([
     },
 ]);
 
-const onCloseLog = async () => {
+const handleClose = async () => {
+    logVisiable.value = false;
     clearInterval(Number(timer));
+    timer = null;
 };
 
 const searchLogs = async () => {
diff --git a/frontend/src/views/container/container/monitor/index.vue b/frontend/src/views/container/container/monitor/index.vue
index 4aa940644..0608590da 100644
--- a/frontend/src/views/container/container/monitor/index.vue
+++ b/frontend/src/views/container/container/monitor/index.vue
@@ -1,50 +1,33 @@
 <template>
-    <el-dialog
-        v-model="monitorVisiable"
-        :destroy-on-close="true"
-        @close="onClose"
-        :close-on-click-modal="false"
-        width="70%"
-    >
+    <el-drawer v-model="monitorVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
         <template #header>
-            <div class="card-header">
-                <span>{{ $t('container.monitor') }}</span>
-            </div>
+            <DrawerHeader :header="$t('container.monitor')" :back="handleClose" />
         </template>
-        <span>{{ $t('container.refreshTime') }}</span>
-        <el-select style="margin-left: 10px" v-model="timeInterval" @change="changeTimer">
-            <el-option label="1s" :value="1" />
-            <el-option label="3s" :value="3" />
-            <el-option label="5s" :value="5" />
-            <el-option label="10s" :value="10" />
-            <el-option label="30s" :value="30" />
-            <el-option label="60s" :value="60" />
-        </el-select>
-        <el-row :gutter="20" style="margin-top: 10px">
-            <el-col :span="12">
-                <el-card style="overflow: inherit">
-                    <div id="cpuChart" style="width: 100%; height: 230px"></div>
-                </el-card>
-            </el-col>
-            <el-col :span="12">
-                <el-card style="overflow: inherit">
-                    <div id="memoryChart" style="width: 100%; height: 230px"></div>
-                </el-card>
-            </el-col>
-        </el-row>
-        <el-row :gutter="20" style="margin-top: 10px">
-            <el-col :span="12">
-                <el-card style="overflow: inherit">
-                    <div id="ioChart" style="width: 100%; height: 230px"></div>
-                </el-card>
-            </el-col>
-            <el-col :span="12">
-                <el-card style="overflow: inherit">
-                    <div id="networkChart" style="width: 100%; height: 230px"></div>
-                </el-card>
-            </el-col>
-        </el-row>
-    </el-dialog>
+        <el-form label-position="top">
+            <el-form-item :label="$t('container.refreshTime')">
+                <el-select v-model="timeInterval" @change="changeTimer">
+                    <el-option label="1s" :value="1" />
+                    <el-option label="3s" :value="3" />
+                    <el-option label="5s" :value="5" />
+                    <el-option label="10s" :value="10" />
+                    <el-option label="30s" :value="30" />
+                    <el-option label="60s" :value="60" />
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <el-card>
+            <div id="cpuChart" style="width: 100%; height: 200px"></div>
+        </el-card>
+        <el-card style="margin-top: 10px">
+            <div id="memoryChart" style="width: 100%; height: 200px"></div>
+        </el-card>
+        <el-card style="margin-top: 10px">
+            <div id="ioChart" style="width: 100%; height: 200px"></div>
+        </el-card>
+        <el-card style="margin-top: 10px">
+            <div id="networkChart" style="width: 100%; height: 200px"></div>
+        </el-card>
+    </el-drawer>
 </template>
 
 <script lang="ts" setup>
@@ -53,6 +36,7 @@ import { ContainerStats } from '@/api/modules/container';
 import { dateFormatForSecond } from '@/utils/util';
 import * as echarts from 'echarts';
 import i18n from '@/lang';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const monitorVisiable = ref(false);
 const timeInterval = ref();
@@ -276,7 +260,8 @@ function freshChart(chartName: string, legendDatas: any, xDatas: any, yDatas: an
     itemChart?.setOption(option, true);
 }
 
-const onClose = async () => {
+const handleClose = async () => {
+    monitorVisiable.value = false;
     clearInterval(Number(timer));
     timer = null;
     window.removeEventListener('resize', changeChartSize);
diff --git a/frontend/src/views/container/container/reName/index.vue b/frontend/src/views/container/container/reName/index.vue
index 667dcb1d3..23325b890 100644
--- a/frontend/src/views/container/container/reName/index.vue
+++ b/frontend/src/views/container/container/reName/index.vue
@@ -1,12 +1,16 @@
 <template>
-    <el-drawer v-model="newNameVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="40%">
+    <el-drawer v-model="newNameVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
         <template #header>
             <DrawerHeader :header="$t('container.rename')" :back="handleClose" />
         </template>
         <el-form ref="newNameRef" v-loading="loading" :model="renameForm" label-position="top">
-            <el-form-item :label="$t('container.newName')" :rules="Rules.requiredInput" prop="newName">
-                <el-input v-model="renameForm.newName"></el-input>
-            </el-form-item>
+            <el-row type="flex" justify="center">
+                <el-col :span="22">
+                    <el-form-item :label="$t('container.newName')" :rules="Rules.requiredInput" prop="newName">
+                        <el-input v-model="renameForm.newName"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -28,6 +32,7 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElForm } from 'element-plus';
 import { reactive, ref } from 'vue';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const loading = ref(false);
 
@@ -67,7 +72,6 @@ interface DialogProps {
 }
 
 const acceptParams = (props: DialogProps): void => {
-    console.log(props.container);
     renameForm.name = props.container;
     renameForm.newName = '';
     newNameVisiable.value = true;
diff --git a/frontend/src/views/container/container/terminal/index.vue b/frontend/src/views/container/container/terminal/index.vue
index 0311a7de0..636c17366 100644
--- a/frontend/src/views/container/container/terminal/index.vue
+++ b/frontend/src/views/container/container/terminal/index.vue
@@ -1,46 +1,47 @@
 <template>
-    <el-dialog
-        v-model="terminalVisiable"
-        :destroy-on-close="true"
-        @close="onClose"
-        :close-on-click-modal="false"
-        width="70%"
-    >
+    <el-drawer v-model="terminalVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
         <template #header>
-            <div class="card-header">
-                <span>{{ $t('container.containerTerminal') }}</span>
-            </div>
+            <DrawerHeader :header="$t('container.containerTerminal')" :back="handleClose" />
         </template>
-        <el-form ref="formRef" :model="form" label-width="80px">
-            <el-form-item label="User" prop="user">
-                <el-input style="width: 30%" clearable v-model="form.user" />
-                <span class="input-help">{{ $t('container.emptyUser') }}</span>
-            </el-form-item>
-            <el-form-item :label="$t('container.custom')" prop="custom">
-                <el-switch v-model="form.isCustom" @change="onChangeCommand" />
-            </el-form-item>
-            <el-form-item v-if="form.isCustom" label="Command" prop="command" :rules="Rules.requiredInput">
-                <el-input style="width: 30%" clearable v-model="form.command" />
-            </el-form-item>
-            <el-form-item v-if="!form.isCustom" label="Command" prop="command" :rules="Rules.requiredSelect">
-                <el-select style="width: 30%" allow-create filterable clearable v-model="form.command">
-                    <el-option value="/bin/ash" label="/bin/ash" />
-                    <el-option value="/bin/bash" label="/bin/bash" />
-                    <el-option value="/bin/sh" label="/bin/sh" />
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-button v-if="!terminalOpen" @click="initTerm(formRef)">{{ $t('commons.button.conn') }}</el-button>
-                <el-button v-else @click="onClose()">{{ $t('commons.button.disconn') }}</el-button>
-            </el-form-item>
+        <el-form ref="formRef" :model="form" label-position="top">
+            <el-row :gutter="20" type="flex" justify="center">
+                <el-col :span="12">
+                    <el-form-item label="User" prop="user">
+                        <el-input clearable v-model="form.user" />
+                        <span class="input-help">{{ $t('container.emptyUser') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item v-if="form.isCustom" label="Command" prop="command" :rules="Rules.requiredInput">
+                        <el-checkbox style="width: 100px" border v-model="form.isCustom" @change="onChangeCommand">
+                            {{ $t('container.custom') }}
+                        </el-checkbox>
+                        <el-input style="width: calc(100% - 100px)" clearable v-model="form.command" />
+                    </el-form-item>
+                    <el-form-item v-if="!form.isCustom" label="Command" prop="command" :rules="Rules.requiredSelect">
+                        <el-checkbox style="width: 100px" border v-model="form.isCustom" @change="onChangeCommand">
+                            {{ $t('container.custom') }}
+                        </el-checkbox>
+                        <el-select style="width: calc(100% - 100px)" filterable clearable v-model="form.command">
+                            <el-option value="/bin/ash" label="/bin/ash" />
+                            <el-option value="/bin/bash" label="/bin/bash" />
+                            <el-option value="/bin/sh" label="/bin/sh" />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <div style="height: calc(100vh - 290px)" :id="'terminal-exec'"></div>
         </el-form>
-        <div :id="'terminal-exec'"></div>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="terminalVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button type="primary" v-if="!terminalOpen" @click="initTerm(formRef)">
+                    {{ $t('commons.button.conn') }}
+                </el-button>
+                <el-button type="primary" v-else @click="handleClose()">{{ $t('commons.button.disconn') }}</el-button>
             </span>
         </template>
-    </el-dialog>
+    </el-drawer>
 </template>
 
 <script lang="ts" setup>
@@ -53,6 +54,7 @@ import 'xterm/css/xterm.css';
 import { FitAddon } from 'xterm-addon-fit';
 import { Rules } from '@/global/form-rules';
 import { isJson } from '@/utils/util';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const terminalVisiable = ref(false);
 const terminalOpen = ref(false);
@@ -178,7 +180,8 @@ const isWsOpen = () => {
     return false;
 };
 
-function onClose() {
+function handleClose() {
+    terminalVisiable.value = false;
     terminalOpen.value = false;
     window.removeEventListener('resize', changeTerminalSize);
     if (isWsOpen()) {
diff --git a/frontend/src/views/container/image/build/index.vue b/frontend/src/views/container/image/build/index.vue
index d8fc7ab13..2ea125d60 100644
--- a/frontend/src/views/container/image/build/index.vue
+++ b/frontend/src/views/container/image/build/index.vue
@@ -17,7 +17,7 @@
                     </el-form-item>
                     <el-form-item label="Dockerfile" prop="from">
                         <el-radio-group v-model="form.from">
-                            <el-radio label="edit">{{ $t('container.edit') }}</el-radio>
+                            <el-radio label="edit">{{ $t('commons.button.edit') }}</el-radio>
                             <el-radio label="path">{{ $t('container.pathSelect') }}</el-radio>
                         </el-radio-group>
                     </el-form-item>
diff --git a/frontend/src/views/container/image/index.vue b/frontend/src/views/container/image/index.vue
index fec7a8c04..381c2e644 100644
--- a/frontend/src/views/container/image/index.vue
+++ b/frontend/src/views/container/image/index.vue
@@ -19,7 +19,7 @@
                             {{ $t('container.importImage') }}
                         </el-button>
                         <el-button type="primary" plain @click="onOpenBuild">
-                            {{ $t('container.build') }}
+                            {{ $t('container.imageBuild') }}
                         </el-button>
                     </el-col>
                     <el-col :span="8">
diff --git a/frontend/src/views/container/image/load/index.vue b/frontend/src/views/container/image/load/index.vue
index 08cb26c74..9bf3b2456 100644
--- a/frontend/src/views/container/image/load/index.vue
+++ b/frontend/src/views/container/image/load/index.vue
@@ -1,16 +1,20 @@
 <template>
-    <el-drawer v-model="loadVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="40%">
+    <el-drawer v-model="loadVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
         <template #header>
             <DrawerHeader :header="$t('container.importImage')" :back="handleClose" />
         </template>
         <el-form v-loading="loading" ref="formRef" :model="form" label-position="top">
-            <el-form-item :label="$t('container.path')" :rules="Rules.requiredSelect" prop="path">
-                <el-input v-model="form.path">
-                    <template #prepend>
-                        <FileList @choose="loadLoadDir" :dir="false"></FileList>
-                    </template>
-                </el-input>
-            </el-form-item>
+            <el-row type="flex" justify="center">
+                <el-col :span="22">
+                    <el-form-item :label="$t('container.path')" :rules="Rules.requiredSelect" prop="path">
+                        <el-input v-model="form.path">
+                            <template #prepend>
+                                <FileList @choose="loadLoadDir" :dir="false"></FileList>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -33,6 +37,7 @@ import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { imageLoad } from '@/api/modules/container';
 import { MsgSuccess } from '@/utils/message';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/container/image/tag/index.vue b/frontend/src/views/container/image/tag/index.vue
index 5b0c8d381..23613e753 100644
--- a/frontend/src/views/container/image/tag/index.vue
+++ b/frontend/src/views/container/image/tag/index.vue
@@ -1,7 +1,7 @@
 <template>
     <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
         <template #header>
-            <DrawerHeader :header="'Tag ' + $t('container.image')" :back="handleClose" />
+            <DrawerHeader :header="$t('container.image') + ' Tag'" :back="handleClose" />
         </template>
         <el-form v-loading="loading" label-position="top" ref="formRef" :model="form" label-width="80px">
             <el-row type="flex" justify="center">
diff --git a/frontend/src/views/container/template/detail/index.vue b/frontend/src/views/container/template/detail/index.vue
new file mode 100644
index 000000000..49ce756e5
--- /dev/null
+++ b/frontend/src/views/container/template/detail/index.vue
@@ -0,0 +1,51 @@
+<template>
+    <el-drawer v-model="detailVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
+        <template #header>
+            <div class="card-header">
+                <span>{{ $t('commons.button.view') }}</span>
+            </div>
+        </template>
+        <codemirror
+            :autofocus="true"
+            placeholder="None data"
+            :indent-with-tab="true"
+            :tabSize="4"
+            style="width: 100%; height: calc(100vh - 160px)"
+            :lineWrapping="true"
+            :matchBrackets="true"
+            theme="cobalt"
+            :styleActiveLine="true"
+            :extensions="extensions"
+            v-model="detailInfo"
+            :readOnly="true"
+        />
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="detailVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
+            </span>
+        </template>
+    </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { ref } from 'vue';
+import { Codemirror } from 'vue-codemirror';
+const extensions = [javascript(), oneDark];
+
+const detailVisiable = ref(false);
+const detailInfo = ref();
+
+interface DialogProps {
+    content: string;
+}
+const acceptParams = (params: DialogProps): void => {
+    detailInfo.value = params.content;
+    detailVisiable.value = true;
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>
diff --git a/frontend/src/views/container/template/index.vue b/frontend/src/views/container/template/index.vue
index 3bf32dedc..95e44a7b9 100644
--- a/frontend/src/views/container/template/index.vue
+++ b/frontend/src/views/container/template/index.vue
@@ -69,33 +69,7 @@
             </template>
         </LayoutContent>
 
-        <el-dialog v-model="detailVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="70%">
-            <template #header>
-                <div class="card-header">
-                    <span>{{ $t('commons.button.view') }}</span>
-                </div>
-            </template>
-            <codemirror
-                :autofocus="true"
-                placeholder="None data"
-                :indent-with-tab="true"
-                :tabSize="4"
-                style="max-height: 500px"
-                :lineWrapping="true"
-                :matchBrackets="true"
-                theme="cobalt"
-                :styleActiveLine="true"
-                :extensions="extensions"
-                v-model="detailInfo"
-                :readOnly="true"
-            />
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="detailVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                </span>
-            </template>
-        </el-dialog>
-
+        <DetailDialog ref="detailRef" />
         <OperatorDialog @search="search" ref="dialogRef" />
     </div>
 </template>
@@ -104,12 +78,10 @@
 import LayoutContent from '@/layout/layout-content.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
-import { Codemirror } from 'vue-codemirror';
-import { javascript } from '@codemirror/lang-javascript';
-import { oneDark } from '@codemirror/theme-one-dark';
 import { reactive, onMounted, ref } from 'vue';
 import { dateFormatSimple } from '@/utils/util';
 import { Container } from '@/api/interface/container';
+import DetailDialog from '@/views/container/template/detail/index.vue';
 import OperatorDialog from '@/views/container/template/operator/index.vue';
 import { deleteComposeTemplate, loadDockerStatus, searchComposeTemplate } from '@/api/modules/container';
 import { useDeleteData } from '@/hooks/use-delete-data';
@@ -119,9 +91,6 @@ import router from '@/routers';
 const loading = ref();
 const data = ref();
 const selects = ref<any>([]);
-const detailVisiable = ref(false);
-const detailInfo = ref();
-const extensions = [javascript(), oneDark];
 
 const paginationConfig = reactive({
     currentPage: 1,
@@ -130,6 +99,8 @@ const paginationConfig = reactive({
 });
 const searchName = ref();
 
+const detailRef = ref();
+
 const dockerStatus = ref();
 const loadStatus = async () => {
     const res = await loadDockerStatus();
@@ -161,8 +132,7 @@ const search = async () => {
 };
 
 const onOpenDetail = async (row: Container.TemplateInfo) => {
-    detailInfo.value = row.content;
-    detailVisiable.value = true;
+    detailRef.value.acceptParams({ content: row.content });
 };
 
 const dialogRef = ref();
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index a2021ceab..fe9370e5b 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -97,7 +97,7 @@
                         show-overflow-tooltip
                     />
                     <fu-table-operations
-                        width="300px"
+                        width="370px"
                         :buttons="buttons"
                         :ellipsis="10"
                         :label="$t('commons.table.operate')"
diff --git a/frontend/src/views/database/mysql/password/index.vue b/frontend/src/views/database/mysql/password/index.vue
index 4db923698..fce2fd0a6 100644
--- a/frontend/src/views/database/mysql/password/index.vue
+++ b/frontend/src/views/database/mysql/password/index.vue
@@ -5,35 +5,44 @@
                 <DrawerHeader :header="$t('database.changePassword')" :back="handleClose" />
             </template>
             <el-form>
-                <el-form v-loading="loading" ref="changeFormRef" :model="changeForm" label-width="80px">
-                    <div v-if="changeForm.operation === 'password'">
-                        <el-form-item :label="$t('commons.login.username')" prop="userName">
-                            <el-input disabled v-model="changeForm.userName"></el-input>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('commons.login.password')"
-                            prop="password"
-                            :rules="Rules.requiredInput"
-                        >
-                            <el-input type="password" clearable show-password v-model="changeForm.password"></el-input>
-                        </el-form-item>
-                    </div>
-                    <div v-if="changeForm.operation === 'privilege'">
-                        <el-form-item :label="$t('database.permission')" prop="privilege">
-                            <el-select style="width: 100%" v-model="changeForm.privilege">
-                                <el-option value="localhost" :label="$t('database.permissionLocal')" />
-                                <el-option value="%" :label="$t('database.permissionAll')" />
-                                <el-option value="ip" :label="$t('database.permissionForIP')" />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item
-                            v-if="changeForm.privilege === 'ip'"
-                            prop="privilegeIPs"
-                            :rules="Rules.requiredInput"
-                        >
-                            <el-input clearable v-model="changeForm.privilegeIPs" />
-                        </el-form-item>
-                    </div>
+                <el-form v-loading="loading" ref="changeFormRef" :model="changeForm" label-position="top">
+                    <el-row type="flex" justify="center">
+                        <el-col :span="22">
+                            <div v-if="changeForm.operation === 'password'">
+                                <el-form-item :label="$t('commons.login.username')" prop="userName">
+                                    <el-input disabled v-model="changeForm.userName"></el-input>
+                                </el-form-item>
+                                <el-form-item
+                                    :label="$t('commons.login.password')"
+                                    prop="password"
+                                    :rules="Rules.requiredInput"
+                                >
+                                    <el-input
+                                        type="password"
+                                        clearable
+                                        show-password
+                                        v-model="changeForm.password"
+                                    ></el-input>
+                                </el-form-item>
+                            </div>
+                            <div v-if="changeForm.operation === 'privilege'">
+                                <el-form-item :label="$t('database.permission')" prop="privilege">
+                                    <el-select style="width: 100%" v-model="changeForm.privilege">
+                                        <el-option value="localhost" :label="$t('database.permissionLocal')" />
+                                        <el-option value="%" :label="$t('database.permissionAll')" />
+                                        <el-option value="ip" :label="$t('database.permissionForIP')" />
+                                    </el-select>
+                                </el-form-item>
+                                <el-form-item
+                                    v-if="changeForm.privilege === 'ip'"
+                                    prop="privilegeIPs"
+                                    :rules="Rules.requiredInput"
+                                >
+                                    <el-input clearable v-model="changeForm.privilegeIPs" />
+                                </el-form-item>
+                            </div>
+                        </el-col>
+                    </el-row>
                 </el-form>
             </el-form>
             <template #footer>
@@ -95,7 +104,6 @@ const acceptParams = (params: DialogProps): void => {
     changeForm.privilege = params.privilege;
     changeForm.privilegeIPs = params.privilegeIPs;
     changeForm.value = params.value;
-    console.log(changeForm.password);
     changeVisiable.value = true;
 };
 const emit = defineEmits<{ (e: 'search'): void }>();
diff --git a/frontend/src/views/database/mysql/root-password/index.vue b/frontend/src/views/database/mysql/root-password/index.vue
index 8ebd1dd33..fc84c6272 100644
--- a/frontend/src/views/database/mysql/root-password/index.vue
+++ b/frontend/src/views/database/mysql/root-password/index.vue
@@ -1,12 +1,16 @@
 <template>
-    <el-drawer v-model="dialogVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="40%">
+    <el-drawer v-model="dialogVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
         <template #header>
             <DrawerHeader :header="$t('database.rootPassword')" :back="handleClose" />
         </template>
         <el-form v-loading="loading" ref="formRef" :model="form" label-position="top">
-            <el-form-item :label="$t('database.rootPassword')" :rules="Rules.requiredInput" prop="password">
-                <el-input type="password" show-password clearable v-model="form.password" />
-            </el-form-item>
+            <el-row type="flex" justify="center">
+                <el-col :span="22">
+                    <el-form-item :label="$t('database.rootPassword')" :rules="Rules.requiredInput" prop="password">
+                        <el-input type="password" show-password clearable v-model="form.password" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
         </el-form>
 
         <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit"></ConfirmDialog>
diff --git a/frontend/src/views/database/mysql/setting/index.vue b/frontend/src/views/database/mysql/setting/index.vue
index fd6cafb6f..91c2cd3ec 100644
--- a/frontend/src/views/database/mysql/setting/index.vue
+++ b/frontend/src/views/database/mysql/setting/index.vue
@@ -2,26 +2,41 @@
     <div v-show="onSetting">
         <LayoutContent :title="'MySQL ' + $t('database.setting')" :reload="true">
             <template #buttons>
-                <el-button type="primary" :plain="activeName !== 'conf'" @click="changeTab('conf')">
+                <el-button type="primary" :plain="activeName !== 'conf'" @click="activeName = 'conf'">
                     {{ $t('database.confChange') }}
                 </el-button>
-                <el-button type="primary" :plain="activeName !== 'status'" @click="changeTab('status')">
+                <el-button
+                    type="primary"
+                    :disabled="mysqlStatus !== 'Running'"
+                    :plain="activeName !== 'status'"
+                    @click="activeName = 'status'"
+                >
                     {{ $t('database.currentStatus') }}
                 </el-button>
-                <el-button type="primary" :plain="activeName !== 'tuning'" @click="changeTab('tuning')">
+                <el-button
+                    type="primary"
+                    :disabled="mysqlStatus !== 'Running'"
+                    :plain="activeName !== 'tuning'"
+                    @click="activeName = 'tuning'"
+                >
                     {{ $t('database.performanceTuning') }}
                 </el-button>
-                <el-button type="primary" :plain="activeName !== 'port'" @click="changeTab('port')">
+                <el-button type="primary" :plain="activeName !== 'port'" @click="activeName = 'port'">
                     {{ $t('database.portSetting') }}
                 </el-button>
-                <el-button type="primary" :plain="activeName !== 'log'" @click="changeTab('log')">
+                <el-button
+                    type="primary"
+                    :disabled="mysqlStatus !== 'Running'"
+                    :plain="activeName !== 'log'"
+                    @click="activeName = 'log'"
+                >
                     {{ $t('database.log') }}
                 </el-button>
                 <el-button
                     type="primary"
                     :disabled="mysqlStatus !== 'Running'"
+                    @click="activeName = 'slowLog'"
                     :plain="activeName !== 'slowLog'"
-                    @click="changeTab('slowLog')"
                 >
                     {{ $t('database.slowLog') }}
                 </el-button>
@@ -159,16 +174,6 @@ const onClose = (): void => {
     onSetting.value = false;
 };
 
-const changeTab = (val: string) => {
-    activeName.value = val;
-    if (val !== '5') {
-        dialogContainerLogRef.value!.onCloseLog();
-    }
-    if (val !== '6') {
-        slowLogRef.value!.onCloseLog();
-    }
-};
-
 const onSubmitChangePort = async () => {
     let params = {
         key: 'mysql',
diff --git a/frontend/src/views/database/mysql/setting/slow-log/index.vue b/frontend/src/views/database/mysql/setting/slow-log/index.vue
index c5b61dae1..d5423503d 100644
--- a/frontend/src/views/database/mysql/setting/slow-log/index.vue
+++ b/frontend/src/views/database/mysql/setting/slow-log/index.vue
@@ -44,7 +44,7 @@
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
-import { nextTick, reactive, ref, shallowRef } from 'vue';
+import { nextTick, onBeforeUnmount, reactive, ref, shallowRef } from 'vue';
 import { Database } from '@/api/interface/database';
 import { LoadFile } from '@/api/modules/files';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
@@ -151,14 +151,12 @@ const loadMysqlSlowlogs = async (path: string) => {
     });
 };
 
-const onCloseLog = async () => {
-    isWatch.value = false;
+onBeforeUnmount(() => {
     clearInterval(Number(timer));
     timer = null;
-};
+});
 
 defineExpose({
     acceptParams,
-    onCloseLog,
 });
 </script>
diff --git a/frontend/src/views/database/mysql/setting/variables/index.vue b/frontend/src/views/database/mysql/setting/variables/index.vue
index fad896108..991931864 100644
--- a/frontend/src/views/database/mysql/setting/variables/index.vue
+++ b/frontend/src/views/database/mysql/setting/variables/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-form :model="mysqlVariables" :rules="variablesRules" ref="variableFormRef" label-width="160px">
+        <el-form :model="mysqlVariables" :rules="variablesRules" ref="variableFormRef" label-position="top">
             <el-row>
                 <el-col :span="1"><br /></el-col>
                 <el-col :span="9">
diff --git a/frontend/src/views/database/redis/setting/index.vue b/frontend/src/views/database/redis/setting/index.vue
index 6dbde59d2..c34315822 100644
--- a/frontend/src/views/database/redis/setting/index.vue
+++ b/frontend/src/views/database/redis/setting/index.vue
@@ -69,7 +69,7 @@
                 </div>
                 <Status v-show="activeName === 'status'" ref="statusRef" />
                 <div v-if="activeName === 'tuning'">
-                    <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
+                    <el-form :model="form" ref="formRef" :rules="rules" label-position="top">
                         <el-row style="margin-top: 20px">
                             <el-col :span="1"><br /></el-col>
                             <el-col :span="10">
diff --git a/frontend/src/views/host/file-management/download/index.vue b/frontend/src/views/host/file-management/download/index.vue
index 927e80638..2c4e5414f 100644
--- a/frontend/src/views/host/file-management/download/index.vue
+++ b/frontend/src/views/host/file-management/download/index.vue
@@ -5,21 +5,14 @@
         :destroy-on-close="true"
         :close-on-click-modal="false"
         :before-close="handleClose"
-        size="40%"
+        size="30%"
     >
         <template #header>
             <DrawerHeader :header="$t('file.download')" :back="handleClose" />
         </template>
-        <el-row>
-            <el-col :span="11" :offset="1">
-                <el-form
-                    ref="fileForm"
-                    label-position="top"
-                    :model="addForm"
-                    label-width="100px"
-                    :rules="rules"
-                    v-loading="loading"
-                >
+        <el-form ref="fileForm" label-position="top" :model="addForm" :rules="rules" v-loading="loading">
+            <el-row type="flex" justify="center">
+                <el-col :span="22">
                     <el-form-item :label="$t('file.compressType')" prop="type">
                         <el-select v-model="addForm.type">
                             <el-option v-for="item in options" :key="item" :label="item" :value="item" />
@@ -30,9 +23,9 @@
                             <template #append>{{ extension }}</template>
                         </el-input>
                     </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+                </el-col>
+            </el-row>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
diff --git a/frontend/src/views/host/file-management/move/index.vue b/frontend/src/views/host/file-management/move/index.vue
index db2c43896..9b400bb22 100644
--- a/frontend/src/views/host/file-management/move/index.vue
+++ b/frontend/src/views/host/file-management/move/index.vue
@@ -4,21 +4,14 @@
         :destroy-on-close="true"
         :close-on-click-modal="false"
         :before-close="handleClose"
-        size="40%"
+        size="30%"
     >
         <template #header>
             <DrawerHeader :header="title" :back="handleClose" />
         </template>
         <el-row>
             <el-col :span="22" :offset="1">
-                <el-form
-                    ref="fileForm"
-                    label-position="top"
-                    :model="addForm"
-                    label-width="100px"
-                    :rules="rules"
-                    v-loading="loading"
-                >
+                <el-form ref="fileForm" label-position="top" :model="addForm" :rules="rules" v-loading="loading">
                     <el-form-item :label="$t('file.path')" prop="newPath">
                         <el-input v-model="addForm.newPath">
                             <template #prepend><FileList @choose="getPath" :dir="true"></FileList></template>
diff --git a/frontend/src/views/host/terminal/command/index.vue b/frontend/src/views/host/terminal/command/index.vue
index c60ff0733..9868b5aa4 100644
--- a/frontend/src/views/host/terminal/command/index.vue
+++ b/frontend/src/views/host/terminal/command/index.vue
@@ -28,7 +28,7 @@
                 </ComplexTable>
             </template>
         </LayoutContent>
-        <el-drawer v-model="cmdVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
+        <el-drawer v-model="cmdVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
             <template #header>
                 <DrawerHeader
                     :header="$t('commons.button.' + operate) + $t('terminal.quickCommand')"
diff --git a/frontend/src/views/log/operation/index.vue b/frontend/src/views/log/operation/index.vue
index e1f61039e..f8a21f6d3 100644
--- a/frontend/src/views/log/operation/index.vue
+++ b/frontend/src/views/log/operation/index.vue
@@ -52,8 +52,14 @@
                             {{ $t('logs.detail.' + row.source) }}
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('logs.operate')" min-width="150px" prop="detailZH" />
-                    <el-table-column :label="$t('logs.status')" prop="status">
+                    <el-table-column :label="$t('logs.operate')" min-width="150px" prop="detailZH">
+                        <template #default="{ row }">
+                            <span v-if="globalStore.language === 'zh'">{{ row.detailZH }}</span>
+                            <span v-if="globalStore.language === 'en'">{{ row.detailEN }}</span>
+                        </template>
+                    </el-table-column>
+
+                    <el-table-column :label="$t('commons.table.status')" prop="status">
                         <template #default="{ row }">
                             <el-tag v-if="row.status === 'Success'" class="ml-2" type="success">
                                 {{ $t('commons.status.success') }}
@@ -97,6 +103,7 @@ import { cleanLogs, getOperationLogs } from '@/api/modules/log';
 import { onMounted, reactive, ref } from '@vue/runtime-core';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
+import { GlobalStore } from '@/store';
 
 const loading = ref();
 const data = ref();
@@ -110,6 +117,8 @@ const searchName = ref<string>('');
 const searchGroup = ref<string>('');
 const searchStatus = ref<string>('');
 
+const globalStore = GlobalStore();
+
 const search = async () => {
     let params = {
         operation: searchName.value,
diff --git a/frontend/src/views/log/system/index.vue b/frontend/src/views/log/system/index.vue
index 2e0c509f3..d8af05dcd 100644
--- a/frontend/src/views/log/system/index.vue
+++ b/frontend/src/views/log/system/index.vue
@@ -7,7 +7,7 @@
                     placeholder="None data"
                     :indent-with-tab="true"
                     :tabSize="4"
-                    style="height: calc(100vh - 180px)"
+                    style="height: calc(100vh - 240px)"
                     :lineWrapping="true"
                     :matchBrackets="true"
                     theme="cobalt"
diff --git a/frontend/src/views/setting/backup-account/index.vue b/frontend/src/views/setting/backup-account/index.vue
index 838ebc15c..b13f971a0 100644
--- a/frontend/src/views/setting/backup-account/index.vue
+++ b/frontend/src/views/setting/backup-account/index.vue
@@ -28,7 +28,9 @@
                     </el-row>
                 </el-form>
 
-                <div style="margin-top: 20px"><span style="font-size: 14px; font-weight: 500">第三方账号</span></div>
+                <div style="margin-top: 20px">
+                    <span style="font-size: 14px; font-weight: 500">{{ $t('setting.thirdParty') }}</span>
+                </div>
                 <el-row :gutter="20" style="margin-top: 5px">
                     <el-col :span="12">
                         <el-card style="height: 265px">
diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue
index a836e6ff5..6f8d0f625 100644
--- a/frontend/src/views/setting/panel/index.vue
+++ b/frontend/src/views/setting/panel/index.vue
@@ -10,6 +10,7 @@
                                 <el-input clearable v-model="form.userName">
                                     <template #append>
                                         <el-button
+                                            style="width: 85px"
                                             @click="onSave(panelFormRef, 'UserName', form.userName)"
                                             icon="Collection"
                                         >
@@ -22,7 +23,7 @@
                             <el-form-item :label="$t('setting.passwd')" :rules="Rules.requiredInput" prop="password">
                                 <el-input type="password" clearable disabled v-model="form.password">
                                     <template #append>
-                                        <el-button icon="Setting" @click="onChangePassword">
+                                        <el-button style="width: 85px" icon="Setting" @click="onChangePassword">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -49,6 +50,7 @@
                                 <el-input clearable v-model="form.panelName">
                                     <template #append>
                                         <el-button
+                                            style="width: 85px"
                                             @click="onSave(panelFormRef, 'PanelName', form.panelName)"
                                             icon="Collection"
                                         >
@@ -77,6 +79,7 @@
                                 <el-input v-model.number="form.sessionTimeout">
                                     <template #append>
                                         <el-button
+                                            style="width: 85px"
                                             @click="onSave(panelFormRef, 'SessionTimeout', form.sessionTimeout)"
                                             icon="Collection"
                                         >
@@ -94,7 +97,12 @@
                             <el-form-item :label="$t('setting.syncTime')">
                                 <el-input disabled v-model="form.localTime">
                                     <template #append>
-                                        <el-button v-show="!show" @click="onSyncTime" icon="Refresh">
+                                        <el-button
+                                            style="width: 85px"
+                                            v-show="!show"
+                                            @click="onSyncTime"
+                                            icon="Refresh"
+                                        >
                                             {{ $t('commons.button.sync') }}
                                         </el-button>
                                         <span v-show="show">{{ count }} S</span>
diff --git a/frontend/src/views/setting/panel/password/index.vue b/frontend/src/views/setting/panel/password/index.vue
index f3a150fe8..f5efe1c1b 100644
--- a/frontend/src/views/setting/panel/password/index.vue
+++ b/frontend/src/views/setting/panel/password/index.vue
@@ -58,6 +58,7 @@ import { FormInstance } from 'element-plus';
 import { GlobalStore } from '@/store';
 import { reactive, ref } from 'vue';
 import { updatePassword } from '@/api/modules/setting';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const globalStore = GlobalStore();
 const passFormRef = ref<FormInstance>();
diff --git a/frontend/src/views/setting/safe/index.vue b/frontend/src/views/setting/safe/index.vue
index ce1b12019..b462130ca 100644
--- a/frontend/src/views/setting/safe/index.vue
+++ b/frontend/src/views/setting/safe/index.vue
@@ -2,7 +2,7 @@
     <div>
         <LayoutContent v-loading="loading" :title="$t('setting.safe')" :divider="true">
             <template #main>
-                <el-form :model="form" ref="panelFormRef" v-loading="loading" label-position="left" label-width="160px">
+                <el-form :model="form" ref="panelFormRef" v-loading="loading" label-position="left" label-width="180px">
                     <el-row>
                         <el-col :span="1"><br /></el-col>
                         <el-col :span="10">
@@ -10,6 +10,7 @@
                                 <el-input clearable v-model.number="form.serverPort">
                                     <template #append>
                                         <el-button
+                                            style="width: 85px"
                                             @click="onSavePort(panelFormRef, 'ServerPort', form.serverPort)"
                                             icon="Collection"
                                         >
@@ -26,7 +27,7 @@
                             >
                                 <el-input disabled v-model="form.expirationTime">
                                     <template #append>
-                                        <el-button @click="onChangeExpirationTime" icon="Setting">
+                                        <el-button style="width: 85px" @click="onChangeExpirationTime" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
diff --git a/frontend/src/views/setting/snapshot/index.vue b/frontend/src/views/setting/snapshot/index.vue
index fc77118e4..bddd24d8a 100644
--- a/frontend/src/views/setting/snapshot/index.vue
+++ b/frontend/src/views/setting/snapshot/index.vue
@@ -145,6 +145,7 @@
 <script setup lang="ts">
 import ComplexTable from '@/components/complex-table/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { snapshotCreate, searchSnapshotPage, snapshotDelete, updateSnapshotDescription } from '@/api/modules/setting';
 import { onMounted, reactive, ref } from 'vue';
 import { dateFormat } from '@/utils/util';
diff --git a/frontend/src/views/website/website/nginx/performance/index.vue b/frontend/src/views/website/website/nginx/performance/index.vue
index 568e39db8..e1e3ebd03 100644
--- a/frontend/src/views/website/website/nginx/performance/index.vue
+++ b/frontend/src/views/website/website/nginx/performance/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-form :model="form" :rules="variablesRules" ref="nginxFormRef" label-width="160px">
+        <el-form :model="form" :rules="variablesRules" ref="nginxFormRef" label-position="top">
             <el-row>
                 <el-col :span="1"><br /></el-col>
                 <el-col :span="9">
@@ -24,6 +24,11 @@
                         <el-input clearable v-model.number="form.keepalive_timeout"></el-input>
                         <span class="input-help">{{ $t('nginx.keepaliveTimeoutHelper') }}</span>
                     </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="submit(nginxFormRef)" :loading="loading">
+                            {{ $t('commons.button.save') }}
+                        </el-button>
+                    </el-form-item>
                 </el-col>
                 <el-col :span="1"><br /></el-col>
                 <el-col :span="9">
@@ -47,9 +52,6 @@
                 </el-col>
             </el-row>
         </el-form>
-        <el-button type="primary" @click="submit(nginxFormRef)" :loading="loading">
-            {{ $t('commons.button.save') }}
-        </el-button>
     </div>
 </template>
 <script lang="ts" setup>
diff --git a/frontend/src/views/website/website/nginx/source/index.vue b/frontend/src/views/website/website/nginx/source/index.vue
index 31b1fd33d..aad01fc84 100644
--- a/frontend/src/views/website/website/nginx/source/index.vue
+++ b/frontend/src/views/website/website/nginx/source/index.vue
@@ -5,7 +5,7 @@
             placeholder="None data"
             :indent-with-tab="true"
             :tabSize="4"
-            style="max-height: 700px"
+            style="width: 100%; height: calc(100vh - 375px)"
             :lineWrapping="true"
             :matchBrackets="true"
             theme="cobalt"