From 88b70eba531d888fe3a3bd19cb04256697632e6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Tue, 10 Dec 2024 15:59:38 +0800
Subject: [PATCH] style: Improve password action buttons styling in database
 connection info (#7309)

Refs #7284
---
 frontend/src/views/database/mysql/conn/index.vue      | 6 ++++--
 frontend/src/views/database/postgresql/conn/index.vue | 6 ++++--
 frontend/src/views/database/redis/conn/index.vue      | 6 ++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/database/mysql/conn/index.vue b/frontend/src/views/database/mysql/conn/index.vue
index 218cabe76..d4ee93e54 100644
--- a/frontend/src/views/database/mysql/conn/index.vue
+++ b/frontend/src/views/database/mysql/conn/index.vue
@@ -81,9 +81,11 @@
                             prop="password"
                         >
                             <el-input type="password" show-password clearable v-model="form.password">
+                                <template #suffix>
+                                    <CopyButton type="icon" :content="form.password" class="w-30" />
+                                </template>
                                 <template #append>
-                                    <CopyButton :content="form.password" />
-                                    <el-button @click="random" class="p-ml-5">
+                                    <el-button @click="random">
                                         {{ $t('commons.button.random') }}
                                     </el-button>
                                 </template>
diff --git a/frontend/src/views/database/postgresql/conn/index.vue b/frontend/src/views/database/postgresql/conn/index.vue
index 23d00924c..b32318dca 100644
--- a/frontend/src/views/database/postgresql/conn/index.vue
+++ b/frontend/src/views/database/postgresql/conn/index.vue
@@ -82,9 +82,11 @@
                             prop="password"
                         >
                             <el-input type="password" show-password clearable v-model="form.password">
+                                <template #suffix>
+                                    <CopyButton type="icon" :content="form.password" class="w-30" />
+                                </template>
                                 <template #append>
-                                    <CopyButton :content="form.password" />
-                                    <el-button @click="random" class="p-ml-5">
+                                    <el-button @click="random">
                                         {{ $t('commons.button.random') }}
                                     </el-button>
                                 </template>
diff --git a/frontend/src/views/database/redis/conn/index.vue b/frontend/src/views/database/redis/conn/index.vue
index 8dd0367a7..942fae88e 100644
--- a/frontend/src/views/database/redis/conn/index.vue
+++ b/frontend/src/views/database/redis/conn/index.vue
@@ -68,9 +68,11 @@
                     <el-divider border-style="dashed" />
                     <el-form-item :label="$t('commons.login.password')" v-if="form.from === 'local'" prop="password">
                         <el-input type="password" show-password clearable v-model="form.password">
+                            <template #suffix>
+                                <CopyButton type="icon" :content="form.password" class="w-30" />
+                            </template>
                             <template #append>
-                                <CopyButton :content="form.password" />
-                                <el-button @click="random" class="p-ml-5">
+                                <el-button @click="random">
                                     {{ $t('commons.button.random') }}
                                 </el-button>
                             </template>