From f88a3059be081d498b936dc6658017870c312deb Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Tue, 10 Sep 2024 22:04:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E6=A0=B7=E5=BC=8F=20(#6440)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/app/service/dashboard.go              |  4 ++--
 frontend/src/styles/common.scss               |  6 +++++
 .../src/views/container/compose/index.vue     | 17 +++-----------
 frontend/src/views/container/index.vue        |  6 -----
 frontend/src/views/container/repo/index.vue   | 17 +++-----------
 .../src/views/database/mysql/remote/index.vue | 15 ++++++++-----
 .../database/postgresql/remote/index.vue      | 15 ++++++++-----
 frontend/src/views/database/redis/index.vue   | 16 +++++++++-----
 .../src/views/database/redis/remote/index.vue | 12 +++++-----
 .../src/views/host/terminal/command/index.vue | 22 +++++++++++--------
 .../src/views/host/terminal/host/index.vue    | 12 +++++-----
 frontend/src/views/log/login/index.vue        | 18 +++++++--------
 frontend/src/views/toolbox/ftp/index.vue      | 12 +++++-----
 13 files changed, 83 insertions(+), 89 deletions(-)

diff --git a/backend/app/service/dashboard.go b/backend/app/service/dashboard.go
index b40da97b5..239843170 100644
--- a/backend/app/service/dashboard.go
+++ b/backend/app/service/dashboard.go
@@ -151,12 +151,12 @@ func (u *DashboardService) LoadCurrentInfo(ioOption string, netOption string) *d
 	currentInfo.Procs = hostInfo.Procs
 
 	currentInfo.CPUTotal, _ = cpu.Counts(true)
-	totalPercent, _ := cpu.Percent(1*time.Second, false)
+	totalPercent, _ := cpu.Percent(100*time.Millisecond, false)
 	if len(totalPercent) == 1 {
 		currentInfo.CPUUsedPercent = totalPercent[0]
 		currentInfo.CPUUsed = currentInfo.CPUUsedPercent * 0.01 * float64(currentInfo.CPUTotal)
 	}
-	currentInfo.CPUPercent, _ = cpu.Percent(1*time.Second, true)
+	currentInfo.CPUPercent, _ = cpu.Percent(100*time.Millisecond, true)
 
 	loadInfo, _ := load.Avg()
 	currentInfo.Load1 = loadInfo.Load1
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 146e77c81..779cac84d 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -444,6 +444,12 @@ html {
     cursor: pointer;
 }
 
+.dialog-footer{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
 .monaco-editor-tree-light .el-tree-node__content:hover {
     background-color: #e5eefd;
 }
diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index 1ff40d1f9..42747b2ae 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -25,28 +25,17 @@
                 </el-alert>
             </template>
             <template #toolbar>
-                <div class="hidden sm:block sm:flex sm:flex-row sm:w-full sm:justify-between">
-                    <div>
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div class="flex flex-wrap gap-3">
                         <el-button type="primary" @click="onOpenDialog()">
                             {{ $t('container.createCompose') }}
                         </el-button>
                     </div>
-                    <div class="flex flex-row gap-2">
+                    <div class="flex flex-wrap gap-3">
                         <TableSetting @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
                     </div>
                 </div>
-                <div class="block flex flex-col gap-2 sm:hidden">
-                    <div class="flex justify-between">
-                        <el-button type="primary" @click="onOpenDialog()">
-                            {{ $t('container.createCompose') }}
-                        </el-button>
-                        <TableSetting @search="search()" />
-                    </div>
-                    <div class="flex justify-end">
-                        <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </div>
-                </div>
             </template>
             <template #main>
                 <ComplexTable
diff --git a/frontend/src/views/container/index.vue b/frontend/src/views/container/index.vue
index 91c03e0cc..fae10c860 100644
--- a/frontend/src/views/container/index.vue
+++ b/frontend/src/views/container/index.vue
@@ -45,9 +45,3 @@ const buttons = [
     },
 ];
 </script>
-
-<style>
-.el-button + .el-button {
-    margin: 0;
-}
-</style>
diff --git a/frontend/src/views/container/repo/index.vue b/frontend/src/views/container/repo/index.vue
index 822750f44..c844729bd 100644
--- a/frontend/src/views/container/repo/index.vue
+++ b/frontend/src/views/container/repo/index.vue
@@ -8,24 +8,13 @@
 
         <LayoutContent :title="$t('container.repo')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
-                <div class="block flex flex-col gap-2 sm:hidden">
-                    <div class="flex flex-row justify-between">
-                        <el-button type="primary" @click="onOpenDialog('add')">
-                            {{ $t('container.createRepo') }}
-                        </el-button>
-                        <TableSetting @search="search()" />
-                    </div>
-                    <div class="flex flex-row justify-end">
-                        <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </div>
-                </div>
-                <div class="hidden sm:block sm:flex sm:justify-between">
-                    <div>
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div class="flex flex-wrap gap-3">
                         <el-button type="primary" @click="onOpenDialog('add')">
                             {{ $t('container.createRepo') }}
                         </el-button>
                     </div>
-                    <div class="flex flex-row gap-2">
+                    <div class="flex flex-wrap gap-3">
                         <TableSetting @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
                     </div>
diff --git a/frontend/src/views/database/mysql/remote/index.vue b/frontend/src/views/database/mysql/remote/index.vue
index 27926688a..e95d9c2e4 100644
--- a/frontend/src/views/database/mysql/remote/index.vue
+++ b/frontend/src/views/database/mysql/remote/index.vue
@@ -5,11 +5,16 @@
                 <back-button name="MySQL" :header="$t('database.remoteDB')" />
             </template>
             <template #toolbar>
-                <el-button type="primary" @click="onOpenDialog('create')">
-                    {{ $t('database.createRemoteDB') }}
-                </el-button>
-
-                <TableSearch @search="search()" v-model:searchName="searchName" />
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div class="flex flex-wrap gap-3">
+                        <el-button type="primary" @click="onOpenDialog('create')">
+                            {{ $t('database.createRemoteDB') }}
+                        </el-button>
+                    </div>
+                    <div class="flex flex-wrap gap-3">
+                        <TableSearch @search="search()" v-model:searchName="searchName" />
+                    </div>
+                </div>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">
diff --git a/frontend/src/views/database/postgresql/remote/index.vue b/frontend/src/views/database/postgresql/remote/index.vue
index 493c82787..200ebd379 100644
--- a/frontend/src/views/database/postgresql/remote/index.vue
+++ b/frontend/src/views/database/postgresql/remote/index.vue
@@ -5,11 +5,16 @@
                 <back-button name="PostgreSQL" :header="$t('database.remoteDB')" />
             </template>
             <template #toolbar>
-                <el-button type="primary" @click="onOpenDialog('create')">
-                    {{ $t('database.createRemoteDB') }}
-                </el-button>
-
-                <TableSearch @search="search()" v-model:searchName="searchName" />
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div class="flex flex-wrap gap-3">
+                        <el-button type="primary" @click="onOpenDialog('create')">
+                            {{ $t('database.createRemoteDB') }}
+                        </el-button>
+                    </div>
+                    <div class="flex flex-wrap gap-3">
+                        <TableSearch @search="search()" v-model:searchName="searchName" />
+                    </div>
+                </div>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">
diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
index 8f229b080..77b7ff77c 100644
--- a/frontend/src/views/database/redis/index.vue
+++ b/frontend/src/views/database/redis/index.vue
@@ -51,12 +51,16 @@
                 </el-select>
             </template>
             <template #toolbar v-if="!isOnSetting">
-                <el-button v-if="currentDB" type="primary" plain @click="onLoadConn">
-                    {{ $t('database.databaseConnInfo') }}
-                </el-button>
-                <el-button @click="goRemoteDB" type="primary" plain>
-                    {{ $t('database.remoteDB') }}
-                </el-button>
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div class="flex flex-wrap gap-3">
+                        <el-button v-if="currentDB" type="primary" plain @click="onLoadConn">
+                            {{ $t('database.databaseConnInfo') }}
+                        </el-button>
+                        <el-button @click="goRemoteDB" type="primary" plain>
+                            {{ $t('database.remoteDB') }}
+                        </el-button>
+                    </div>
+                </div>
             </template>
         </LayoutContent>
 
diff --git a/frontend/src/views/database/redis/remote/index.vue b/frontend/src/views/database/redis/remote/index.vue
index 7a9aa36dc..cf4d9877a 100644
--- a/frontend/src/views/database/redis/remote/index.vue
+++ b/frontend/src/views/database/redis/remote/index.vue
@@ -5,16 +5,16 @@
                 <back-button name="Redis" :header="$t('database.remoteDB')" />
             </template>
             <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div class="flex flex-wrap gap-3">
                         <el-button type="primary" @click="onOpenDialog('create')">
                             {{ $t('database.createRemoteDB') }}
                         </el-button>
-                    </el-col>
-                    <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
+                    </div>
+                    <div class="flex flex-wrap gap-3">
                         <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">
diff --git a/frontend/src/views/host/terminal/command/index.vue b/frontend/src/views/host/terminal/command/index.vue
index 0bbb1a65d..4a0cbf703 100644
--- a/frontend/src/views/host/terminal/command/index.vue
+++ b/frontend/src/views/host/terminal/command/index.vue
@@ -5,15 +5,19 @@
                 <el-alert type="info" :title="$t('terminal.quickCommandHelper')" :closable="false" />
             </template>
             <template #toolbar>
-                <el-button type="primary" @click="onCreate()">
-                    {{ $t('commons.button.create') }} {{ $t('terminal.quickCommand') }}
-                </el-button>
-                <el-button type="primary" plain @click="onOpenGroupDialog()">
-                    {{ $t('terminal.group') }}
-                </el-button>
-                <el-button type="primary" plain :disabled="selects.length === 0" @click="batchDelete(null)">
-                    {{ $t('commons.button.delete') }}
-                </el-button>
+                <div class="flex w-full flex-col gap-4 md:justify-between md:flex-row">
+                    <div class="flex flex-wrap gap-4">
+                        <el-button type="primary" @click="onCreate()">
+                            {{ $t('commons.button.create') }} {{ $t('terminal.quickCommand') }}
+                        </el-button>
+                        <el-button type="primary" plain @click="onOpenGroupDialog()">
+                            {{ $t('terminal.group') }}
+                        </el-button>
+                        <el-button type="primary" plain :disabled="selects.length === 0" @click="batchDelete(null)">
+                            {{ $t('commons.button.delete') }}
+                        </el-button>
+                    </div>
+                </div>
             </template>
             <template #search>
                 <el-row :gutter="5">
diff --git a/frontend/src/views/host/terminal/host/index.vue b/frontend/src/views/host/terminal/host/index.vue
index 3db0e1a6c..3acec1a27 100644
--- a/frontend/src/views/host/terminal/host/index.vue
+++ b/frontend/src/views/host/terminal/host/index.vue
@@ -2,8 +2,8 @@
     <div>
         <LayoutContent v-loading="loading" :title="$t('terminal.host')">
             <template #toolbar>
-                <el-row>
-                    <el-col :span="20">
+                <div class="flex w-full flex-col gap-4 md:justify-between md:flex-row">
+                    <div class="flex flex-wrap gap-4">
                         <el-button type="primary" @click="onOpenDialog('create')">
                             {{ $t('terminal.addHost') }}
                         </el-button>
@@ -13,11 +13,11 @@
                         <el-button type="primary" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
                             {{ $t('commons.button.delete') }}
                         </el-button>
-                    </el-col>
-                    <el-col :span="4">
+                    </div>
+                    <div class="flex flex-wrap gap-3">
                         <TableSearch @search="search()" v-model:searchName="info" />
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
             </template>
             <template #search>
                 <el-select v-model="group" @change="search()" clearable class="p-w-200">
diff --git a/frontend/src/views/log/login/index.vue b/frontend/src/views/log/login/index.vue
index e63b6bd8e..f05a9e782 100644
--- a/frontend/src/views/log/login/index.vue
+++ b/frontend/src/views/log/login/index.vue
@@ -2,8 +2,8 @@
     <div>
         <LayoutContent v-loading="loading" :title="$t('logs.login')">
             <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div class="flex flex-wrap gap-3">
                         <el-button class="tag-button no-active" @click="onChangeRoute('OperationLog')">
                             {{ $t('logs.operation') }}
                         </el-button>
@@ -13,14 +13,12 @@
                         <el-button class="tag-button no-active" @click="onChangeRoute('SystemLog')">
                             {{ $t('logs.system') }}
                         </el-button>
-                    </el-col>
-                    <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
-                        <div class="flex justify-end">
-                            <TableSetting @search="search()" />
-                            <TableSearch @search="search()" v-model:searchName="searchIP" />
-                        </div>
-                    </el-col>
-                </el-row>
+                    </div>
+                    <div class="flex flex-wrap gap-3">
+                        <TableSetting @search="search()" />
+                        <TableSearch @search="search()" v-model:searchName="searchIP" />
+                    </div>
+                </div>
             </template>
 
             <template #search>
diff --git a/frontend/src/views/toolbox/ftp/index.vue b/frontend/src/views/toolbox/ftp/index.vue
index 7f3a2ec46..5f7f0eb3c 100644
--- a/frontend/src/views/toolbox/ftp/index.vue
+++ b/frontend/src/views/toolbox/ftp/index.vue
@@ -28,8 +28,8 @@
         <div v-if="form.isExist">
             <LayoutContent v-loading="loading" title="FTP">
                 <template #toolbar>
-                    <el-row>
-                        <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
+                    <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                        <div class="flex flex-wrap gap-3">
                             <el-button type="primary" :disabled="!form.isActive" @click="onOpenDialog('add')">
                                 {{ $t('commons.button.add') }} FTP
                             </el-button>
@@ -39,11 +39,11 @@
                             <el-button plain :disabled="selects.length === 0 || !form.isActive" @click="onDelete(null)">
                                 {{ $t('commons.button.delete') }}
                             </el-button>
-                        </el-col>
-                        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
+                        </div>
+                        <div class="flex flex-wrap gap-3">
                             <TableSearch @search="search()" v-model:searchName="searchName" />
-                        </el-col>
-                    </el-row>
+                        </div>
+                    </div>
                 </template>
                 <template #main>
                     <ComplexTable