style: Improve password action buttons styling in database connection…

… info (#7309) Refs #7284
1Panel-dev · Dec 10, 2024 · 88b70eb · 88b70eb
1 parent 6ad4825
commit 88b70eb
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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>