From 0542b39373881b3b57f43279a6c8e65fb15fdf29 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Thu, 12 Dec 2024 10:37:49 +0800
Subject: [PATCH] pref: Optimize the button style for database connection
 information (#7341)

---
 frontend/src/components/copy-button/index.vue |  2 +-
 .../src/views/database/mysql/conn/index.vue   | 23 +++++++++++--------
 .../views/database/postgresql/conn/index.vue  | 23 +++++++++++--------
 .../src/views/database/redis/conn/index.vue   | 23 +++++++++++--------
 4 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/copy-button/index.vue b/frontend/src/components/copy-button/index.vue
index f7f1ad693..633353b6d 100644
--- a/frontend/src/components/copy-button/index.vue
+++ b/frontend/src/components/copy-button/index.vue
@@ -1,6 +1,6 @@
 <template>
     <el-button v-if="type == 'icon'" link @click="copyText(content)" icon="DocumentCopy" class="ml-1.5"></el-button>
-    <el-button type="primary" @click="copyText(content)" v-else>{{ $t('commons.button.copy') }}</el-button>
+    <el-button @click="copyText(content)" v-else>{{ $t('commons.button.copy') }}</el-button>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/database/mysql/conn/index.vue b/frontend/src/views/database/mysql/conn/index.vue
index d4ee93e54..542b4b938 100644
--- a/frontend/src/views/database/mysql/conn/index.vue
+++ b/frontend/src/views/database/mysql/conn/index.vue
@@ -80,16 +80,19 @@
                             :rules="Rules.paramComplexity"
                             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>
-                                    <el-button @click="random">
-                                        {{ $t('commons.button.random') }}
-                                    </el-button>
-                                </template>
-                            </el-input>
+                            <el-input
+                                style="width: calc(100% - 147px)"
+                                type="password"
+                                show-password
+                                clearable
+                                v-model="form.password"
+                            />
+                            <el-button-group>
+                                <CopyButton :content="form.password" />
+                                <el-button @click="random">
+                                    {{ $t('commons.button.random') }}
+                                </el-button>
+                            </el-button-group>
                         </el-form-item>
                     </div>
 
diff --git a/frontend/src/views/database/postgresql/conn/index.vue b/frontend/src/views/database/postgresql/conn/index.vue
index b32318dca..7ed8de99f 100644
--- a/frontend/src/views/database/postgresql/conn/index.vue
+++ b/frontend/src/views/database/postgresql/conn/index.vue
@@ -81,16 +81,19 @@
                             :rules="Rules.paramComplexity"
                             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>
-                                    <el-button @click="random">
-                                        {{ $t('commons.button.random') }}
-                                    </el-button>
-                                </template>
-                            </el-input>
+                            <el-input
+                                style="width: calc(100% - 147px)"
+                                type="password"
+                                show-password
+                                clearable
+                                v-model="form.password"
+                            />
+                            <el-button-group>
+                                <CopyButton :content="form.password" />
+                                <el-button @click="random">
+                                    {{ $t('commons.button.random') }}
+                                </el-button>
+                            </el-button-group>
                         </el-form-item>
                     </div>
                     <div v-if="form.from !== 'local'">
diff --git a/frontend/src/views/database/redis/conn/index.vue b/frontend/src/views/database/redis/conn/index.vue
index 942fae88e..b934b083e 100644
--- a/frontend/src/views/database/redis/conn/index.vue
+++ b/frontend/src/views/database/redis/conn/index.vue
@@ -67,16 +67,19 @@
 
                     <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>
-                                <el-button @click="random">
-                                    {{ $t('commons.button.random') }}
-                                </el-button>
-                            </template>
-                        </el-input>
+                        <el-input
+                            style="width: calc(100% - 147px)"
+                            type="password"
+                            show-password
+                            clearable
+                            v-model="form.password"
+                        />
+                        <el-button-group>
+                            <CopyButton :content="form.password" />
+                            <el-button @click="random">
+                                {{ $t('commons.button.random') }}
+                            </el-button>
+                        </el-button-group>
                     </el-form-item>
 
                     <div v-if="form.from !== 'local'">