From c276fdbe9ba39d793f015325baea819dd732033e Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Thu, 8 May 2025 12:28:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=BF=9E=E6=8E=A5?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AddConnectionForm.vue      | 55 ++++++++++++++-----
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/components/AddConnectionForm.vue b/packages/frontend/src/components/AddConnectionForm.vue
index 68ccf51..0407fe1 100644
--- a/packages/frontend/src/components/AddConnectionForm.vue
+++ b/packages/frontend/src/components/AddConnectionForm.vue
@@ -454,14 +454,29 @@ const testButtonText = computed(() => {
           </div>
           <!-- Connection Type -->
           <div>
-            <label for="conn-type" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.connectionType', '连接类型') }}</label>
-            <select id="conn-type" v-model="formData.type"
-                    class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary appearance-none bg-no-repeat bg-right pr-8"
-                    style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.75rem center; background-size: 16px 12px;">
-              <option value="SSH">{{ t('connections.form.typeSsh', 'SSH') }}</option>
-              <option value="RDP">{{ t('connections.form.typeRdp', 'RDP') }}</option>
-              <option value="VNC">{{ t('connections.form.typeVnc', 'VNC') }}</option>
-            </select>
+            <label class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.connectionType', '连接类型') }}</label>
+            <div class="flex rounded-md shadow-sm">
+              <button type="button"
+                      @click="formData.type = 'SSH'"
+                      :class="['flex-1 px-3 py-2 border border-border text-sm font-medium focus:outline-none',
+                               formData.type === 'SSH' ? 'bg-primary text-white' : 'bg-background text-foreground hover:bg-border',
+                               'rounded-l-md']">
+                {{ t('connections.form.typeSsh', 'SSH') }}
+              </button>
+              <button type="button"
+                      @click="formData.type = 'RDP'"
+                      :class="['flex-1 px-3 py-2 border-t border-b border-r border-border text-sm font-medium focus:outline-none -ml-px',
+                               formData.type === 'RDP' ? 'bg-primary text-white' : 'bg-background text-foreground hover:bg-border']">
+                {{ t('connections.form.typeRdp', 'RDP') }}
+              </button>
+              <button type="button"
+                      @click="formData.type = 'VNC'"
+                      :class="['flex-1 px-3 py-2 border border-border text-sm font-medium focus:outline-none -ml-px',
+                               formData.type === 'VNC' ? 'bg-primary text-white' : 'bg-background text-foreground hover:bg-border',
+                               'rounded-r-md']">
+                {{ t('connections.form.typeVnc', 'VNC') }}
+              </button>
+            </div>
           </div>
           <!-- Host and Port Row -->
           <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -491,13 +506,23 @@ const testButtonText = computed(() => {
           <!-- Use uppercase for comparison -->
           <template v-if="formData.type === 'SSH'">
             <div>
-              <label for="conn-auth-method" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.authMethod') }}</label>
-              <select id="conn-auth-method" v-model="formData.auth_method"
-                      class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary appearance-none bg-no-repeat bg-right pr-8"
-                      style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.75rem center; background-size: 16px 12px;">
-                <option value="password">{{ t('connections.form.authMethodPassword') }}</option>
-                <option value="key">{{ t('connections.form.authMethodKey') }}</option>
-              </select>
+              <label class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.authMethod') }}</label>
+              <div class="flex rounded-md shadow-sm">
+                <button type="button"
+                        @click="formData.auth_method = 'password'"
+                        :class="['flex-1 px-3 py-2 border border-border text-sm font-medium focus:outline-none',
+                                 formData.auth_method === 'password' ? 'bg-primary text-white' : 'bg-background text-foreground hover:bg-border',
+                                 'rounded-l-md']">
+                  {{ t('connections.form.authMethodPassword') }}
+                </button>
+                <button type="button"
+                        @click="formData.auth_method = 'key'"
+                        :class="['flex-1 px-3 py-2 border-t border-b border-r border-border text-sm font-medium focus:outline-none -ml-px',
+                                 formData.auth_method === 'key' ? 'bg-primary text-white' : 'bg-background text-foreground hover:bg-border',
+                                 'rounded-r-md']">
+                  {{ t('connections.form.authMethodKey') }}
+                </button>
+              </div>
             </div>
 
             <div v-if="formData.auth_method === 'password'">