From d40b860d2aeb4a3d94526e23e684fbfc1727c447 Mon Sep 17 00:00:00 2001
From: YuShifan <894402575bt@gmail.com>
Date: Tue, 10 Dec 2024 11:10:48 +0800
Subject: [PATCH] style(desktop): improve select dropdown item style

---
 src/assets/scss/element/element-reset.scss    |  6 ++++++
 src/components/ConnectionSelect.vue           | 20 ++++++++++++-------
 .../assets/scss/element/element-reset.scss    |  6 ++++++
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/assets/scss/element/element-reset.scss b/src/assets/scss/element/element-reset.scss
index b68f04b05..fbc926d35 100644
--- a/src/assets/scss/element/element-reset.scss
+++ b/src/assets/scss/element/element-reset.scss
@@ -262,10 +262,16 @@
     border-top-color: var(--color-bg-messagebox);
   }
 }
+
+/* Select Dropdown Item */
 .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover {
   background: var(--color-bg-item);
 }
+.el-select-dropdown__item.selected {
+  font-weight: 500;
+}
+
 // Fix css style bug in open el-dialog
 .el-popup-parent--hidden {
   padding-right: 0px !important;
diff --git a/src/components/ConnectionSelect.vue b/src/components/ConnectionSelect.vue
index 23a7a1eeb..f55da475b 100644
--- a/src/components/ConnectionSelect.vue
+++ b/src/components/ConnectionSelect.vue
@@ -1,9 +1,17 @@
 <template>
-  <el-select v-model="modelValue" class="connection-select" v-bind="$attrs" :style="{ width }">
+  <el-select
+    v-model="modelValue"
+    class="connection-select"
+    v-bind="$attrs"
+    :style="{ width }"
+    popper-class="connection-select__popper"
+  >
     <el-option v-for="conn in connections" :key="conn.id" :label="`${conn.name}@${conn.host}`" :value="conn.id">
-      <span style="float: left">{{ conn.name }}@{{ conn.host }}</span>
+      <span style="float: left"> {{ conn.name }}@{{ conn.host }} </span>
       <span style="float: right; color: #8492a6; font-size: 13px; margin-left: 24px">
-        {{ getConnectionStatus(conn.id) }}
+        <el-tag size="mini" :type="getConnectionStatus(conn.id) ? '' : 'info'">
+          {{ getConnectionStatus(conn.id) ? $t('connections.connected') : $t('connections.noConnection') }}
+        </el-tag>
       </span>
     </el-option>
   </el-select>
@@ -34,13 +42,11 @@ export default class ConnectionSelect extends Vue {
     this.$emit('change', newVal)
   }
 
-  private getConnectionStatus(connectionId: string) {
+  private getConnectionStatus(connectionId: string): boolean {
     if (this.activeConnection[connectionId]) {
       return this.activeConnection[connectionId].client.connected
-        ? this.$tc('connections.connected')
-        : this.$tc('connections.noConnection')
     }
-    return this.$tc('connections.noConnection')
+    return false
   }
 
   private async loadConnections() {
diff --git a/web/src/assets/scss/element/element-reset.scss b/web/src/assets/scss/element/element-reset.scss
index 45ea8b8cf..a27d908a9 100644
--- a/web/src/assets/scss/element/element-reset.scss
+++ b/web/src/assets/scss/element/element-reset.scss
@@ -245,10 +245,16 @@
     border-top-color: var(--color-bg-messagebox);
   }
 }
+
+/* Select Dropdown Item */
 .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover {
   background: var(--color-bg-item);
 }
+.el-select-dropdown__item.selected {
+  font-weight: 500;
+}
+
 // Fix css style bug in open el-dialog
 .el-popup-parent--hidden {
   padding-right: 0px !important;