feat: add new component "switch button"

refactor: extract the file open input as a component

frontend/src/components/common/FileOpenInput.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { SelectFile } from 'wailsjs/go/services/systemService.js'
+import { get } from 'lodash'
+
+const props = defineProps({
+    value: String,
+    placeholder: String,
+    disabled: Boolean,
+})
+
+const emit = defineEmits(['update:value'])
+
+const handleSelectFile = async () => {
+    const { success, data } = await SelectFile()
+    if (success) {
+        const path = get(data, 'path', '')
+        emit('update:value', path)
+    } else {
+        emit('update:value', '')
+    }
+}
+</script>
+
+<template>
+    <n-input-group>
+        <n-input v-model:value="props.value" :disabled="props.disabled" :placeholder="placeholder" clearable />
+        <n-button :disabled="props.disabled" :focusable="false" @click="handleSelectFile">...</n-button>
+    </n-input-group>
+</template>
+
+<style scoped lang="scss"></style>

frontend/src/components/common/SwitchButton.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { NIcon } from 'naive-ui'
+
+const props = defineProps({
+    value: {
+        type: Number,
+        default: 0,
+    },
+    size: {
+        type: String,
+        default: 'small',
+    },
+    icons: Array,
+    tTooltips: Array,
+    iconSize: {
+        type: [Number, String],
+        default: 20,
+    },
+    color: {
+        type: String,
+        default: 'currentColor',
+    },
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+})
+
+const emit = defineEmits(['update:value'])
+
+const handleSwitch = (idx) => {
+    if (idx !== props.value) {
+        emit('update:value', idx)
+    }
+}
+</script>
+
+<template>
+        <n-button-group>
+            <n-tooltip
+                :show-arrow="false"
+                v-for="(icon, i) in props.icons"
+                :key="i"
+                :disabled="!(props.tTooltips && props.tTooltips[i])">
+                <template #trigger>
+                    <n-button :tertiary="i !== props.value" :focusable="false" :size="props.size" @click="handleSwitch(i)">
+                        <template #icon>
+                            <n-icon :size="props.iconSize">
+                                <component :is="icon" :stroke-width="props.strokeWidth" />
+                            </n-icon>
+                        </template>
+                    </n-button>
+                </template>
+                {{ props.tTooltips ? $t(props.tTooltips[i]) : '' }}
+            </n-tooltip>
+        </n-button-group>
+</template>
+
+<style scoped lang="scss"></style>

frontend/src/components/dialogs/ConnectionDialog.vue

@@ -6,7 +6,7 @@ import { ListSentinelMasters, TestConnection } from 'wailsjs/go/services/connect
 import useDialog, { ConnDialogType } from 'stores/dialog'
 import Close from '@/components/icons/Close.vue'
 import useConnectionStore from 'stores/connections.js'
-import { SelectFile } from 'wailsjs/go/services/systemService.js'
+import FileOpenInput from '@/components/common/FileOpenInput.vue'
 
 /**
  * Dialog for new or edit connection
@@ -83,39 +83,6 @@ const sshLoginType = computed(() => {
     return get(generalForm.value, 'ssh.loginType', 'pwd')
 })
 
-const onSSHChooseKey = async () => {
-    const { success, data } = await SelectFile()
-    const path = get(data, 'path', '')
-    if (!isEmpty(path)) {
-        generalForm.value.ssh.pkFile = path
-    }
-}
-
-const onSSLChooseCert = async () => {
-    const { success, data } = await SelectFile()
-    const path = get(data, 'path', '')
-    if (!isEmpty(path)) {
-        generalForm.value.ssl.certFile = path
-    }
-}
-
-const onSSLChooseKey = async () => {
-    const { success, data } = await SelectFile()
-    const path = get(data, 'path', '')
-    if (!isEmpty(path)) {
-        generalForm.value.ssl.keyFile = path
-    }
-}
-
-const onSSLChooseCA = async () => {
-    const { success, data } = await SelectFile()
-    if (!success) {
-        generalForm.value.ssl.caFile = ''
-    } else {
-        generalForm.value.ssl.caFile = get(data, 'path', '')
-    }
-}
-
 const loadingSentinelMaster = ref(false)
 const masterNameOptions = ref([])
 const onLoadSentinelMasters = async () => {
@@ -434,43 +401,22 @@ const onClose = () => {
                         :show-require-mark="false"
                         label-placement="top">
                         <n-form-item :label="$t('dialogue.connection.ssl.cert_file')">
-                            <n-input-group>
+                            <file-open-input
-                                <n-input
+                                v-model:value="generalForm.ssl.certFile"
-                                    v-model:value="generalForm.ssl.certFile"
+                                :placeholder="$t('dialogue.connection.ssl.cert_file_tip')"
-                                    :placeholder="$t('dialogue.connection.ssl.cert_file_tip')"
+                                :disabled="!generalForm.ssl.enable" />
-                                    clearable />
-                                <n-button
-                                    :disabled="!generalForm.ssl.enable"
-                                    :focusable="false"
-                                    @click="onSSLChooseCert">
-                                    ...
-                                </n-button>
-                            </n-input-group>
                         </n-form-item>
                         <n-form-item :label="$t('dialogue.connection.ssl.key_file')">
-                            <n-input-group>
+                            <file-open-input
-                                <n-input
+                                v-model:value="generalForm.ssl.keyFile"
-                                    v-model:value="generalForm.ssl.keyFile"
+                                :placeholder="$t('dialogue.connection.ssl.key_file_tip')"
-                                    :placeholder="$t('dialogue.connection.ssl.key_file_tip')"
+                                :disabled="!generalForm.ssl.enable" />
-                                    clearable />
-                                <n-button
-                                    :disabled="!generalForm.ssl.enable"
-                                    :focusable="false"
-                                    @click="onSSLChooseKey">
-                                    ...
-                                </n-button>
-                            </n-input-group>
                         </n-form-item>
                         <n-form-item :label="$t('dialogue.connection.ssl.ca_file')">
-                            <n-input-group>
+                            <file-open-input
-                                <n-input
+                                v-model:value="generalForm.ssl.caFile"
-                                    v-model:value="generalForm.ssl.caFile"
+                                :placeholder="$t('dialogue.connection.ssl.ca_file_tip')"
-                                    :placeholder="$t('dialogue.connection.ssl.ca_file_tip')"
+                                :disabled="!generalForm.ssl.enable" />
-                                    clearable />
-                                <n-button :disabled="!generalForm.ssl.enable" :focusable="false" @click="onSSLChooseCA">
-                                    ...
-                                </n-button>
-                            </n-input-group>
                         </n-form-item>
                     </n-form>
                 </n-tab-pane>
@@ -519,18 +465,10 @@ const onClose = () => {
                                 type="password" />
                         </n-form-item>
                         <n-form-item v-if="sshLoginType === 'pkfile'" :label="$t('dialogue.connection.ssh.pkfile')">
-                            <n-input-group>
+                            <file-open-input
-                                <n-input
+                                v-model:value="generalForm.ssh.pkFile"
-                                    v-model:value="generalForm.ssh.pkFile"
+                                :placeholder="$t('dialogue.connection.ssh.pkfile_tip')"
-                                    :placeholder="$t('dialogue.connection.ssh.pkfile_tip')" />
+                                :disabled="!generalForm.ssh.enable" />
-                                <n-button
-                                    :disabled="!generalForm.ssh.enable"
-                                    :focusable="false"
-                                    clearable
-                                    @click="onSSHChooseKey">
-                                    ...
-                                </n-button>
-                            </n-input-group>
                         </n-form-item>
                         <n-form-item v-if="sshLoginType === 'pkfile'" :label="$t('dialogue.connection.ssh.passphrase')">
                             <n-input