From 0b37b89f9b8da4c5b392cd33ca5a29ade1d425b1 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Tue, 23 Jan 2024 19:44:11 +0800
Subject: [PATCH] perf: support select multiple font and input custom font name
 #115 #130

---
 backend/types/preferences.go                  | 30 ++++-----
 .../components/content_value/ContentCli.vue   | 11 ++++
 .../content_value/ContentEditor.vue           | 16 +----
 .../components/dialogs/PreferencesDialog.vue  | 63 +++++++++++++------
 frontend/src/components/icons/Subscribe.vue   |  2 +-
 .../src/components/sidebar/ConnectionPane.vue |  4 +-
 frontend/src/components/sidebar/Ribbon.vue    |  6 +-
 frontend/src/langs/en-us.json                 |  2 +-
 frontend/src/langs/pt-br.json                 |  1 -
 frontend/src/langs/zh-cn.json                 |  2 +-
 frontend/src/stores/preferences.js            | 54 ++++++++++------
 11 files changed, 118 insertions(+), 73 deletions(-)

diff --git a/backend/types/preferences.go b/backend/types/preferences.go
index 01815ec..18b73ff 100644
--- a/backend/types/preferences.go
+++ b/backend/types/preferences.go
@@ -41,21 +41,23 @@ type PreferencesBehavior struct {
 }
 
 type PreferencesGeneral struct {
-	Theme           string `json:"theme" yaml:"theme"`
-	Language        string `json:"language" yaml:"language"`
-	Font            string `json:"font" yaml:"font,omitempty"`
-	FontSize        int    `json:"fontSize" yaml:"font_size"`
-	ScanSize        int    `json:"scanSize" yaml:"scan_size"`
-	KeyIconStyle    int    `json:"keyIconStyle" yaml:"key_icon_style"`
-	UseSysProxy     bool   `json:"useSysProxy" yaml:"use_sys_proxy,omitempty"`
-	UseSysProxyHttp bool   `json:"useSysProxyHttp" yaml:"use_sys_proxy_http,omitempty"`
-	CheckUpdate     bool   `json:"checkUpdate" yaml:"check_update"`
-	SkipVersion     string `json:"skipVersion" yaml:"skip_version,omitempty"`
+	Theme           string   `json:"theme" yaml:"theme"`
+	Language        string   `json:"language" yaml:"language"`
+	Font            string   `json:"font" yaml:"font,omitempty"`
+	FontFamily      []string `json:"fontFamily" yaml:"font_family,omitempty"`
+	FontSize        int      `json:"fontSize" yaml:"font_size"`
+	ScanSize        int      `json:"scanSize" yaml:"scan_size"`
+	KeyIconStyle    int      `json:"keyIconStyle" yaml:"key_icon_style"`
+	UseSysProxy     bool     `json:"useSysProxy" yaml:"use_sys_proxy,omitempty"`
+	UseSysProxyHttp bool     `json:"useSysProxyHttp" yaml:"use_sys_proxy_http,omitempty"`
+	CheckUpdate     bool     `json:"checkUpdate" yaml:"check_update"`
+	SkipVersion     string   `json:"skipVersion" yaml:"skip_version,omitempty"`
 }
 
 type PreferencesEditor struct {
-	Font        string `json:"font" yaml:"font,omitempty"`
-	FontSize    int    `json:"fontSize" yaml:"font_size"`
-	ShowLineNum bool   `json:"showLineNum" yaml:"show_line_num"`
-	ShowFolding bool   `json:"showFolding" yaml:"show_folding"`
+	Font        string   `json:"font" yaml:"font,omitempty"`
+	FontFamily  []string `json:"fontFamily" yaml:"font_family,omitempty"`
+	FontSize    int      `json:"fontSize" yaml:"font_size"`
+	ShowLineNum bool     `json:"showLineNum" yaml:"show_line_num"`
+	ShowFolding bool     `json:"showFolding" yaml:"show_folding"`
 }
diff --git a/frontend/src/components/content_value/ContentCli.vue b/frontend/src/components/content_value/ContentCli.vue
index bd8ceb9..17532d3 100644
--- a/frontend/src/components/content_value/ContentCli.vue
+++ b/frontend/src/components/content_value/ContentCli.vue
@@ -34,6 +34,7 @@ let fitAddonInst = null
 const newTerm = () => {
     const term = new Terminal({
         allowProposedApi: true,
+        fontFamily: prefStore.general.fontFamily,
         fontSize: prefStore.general.fontSize || 14,
         cursorBlink: true,
         disableStdin: false,
@@ -89,6 +90,16 @@ defineExpose({
     resizeTerm,
 })
 
+// watch(
+//     () => prefStore.general.font,
+//     (font = undefined) => {
+//         if (termInst != null) {
+//             termInst.options.fontFamily = font || 'Courier New'
+//         }
+//         resizeTerm()
+//     },
+// )
+
 watch(
     () => prefStore.general.fontSize,
     (fontSize) => {
diff --git a/frontend/src/components/content_value/ContentEditor.vue b/frontend/src/components/content_value/ContentEditor.vue
index 642d45d..eeaa696 100644
--- a/frontend/src/components/content_value/ContentEditor.vue
+++ b/frontend/src/components/content_value/ContentEditor.vue
@@ -58,7 +58,7 @@ const readonlyValue = computed(() => {
 const pref = usePreferencesStore()
 onMounted(async () => {
     if (editorRef.value != null) {
-        const { fontSize, fontFamily = undefined } = pref.editorFont
+        const { fontSize, fontFamily = ['monaco'] } = pref.editorFont
         editorNode = monaco.editor.create(editorRef.value, {
             // value: props.content,
             theme: pref.isDark ? 'rdm-dark' : 'rdm-light',
@@ -151,21 +151,11 @@ watch(
 )
 
 watch(
-    () => pref.editorFont.fontSize,
-    (fontSize) => {
+    () => pref.editorFont,
+    ({ fontSize, fontFamily }) => {
         if (editorNode != null) {
             editorNode.updateOptions({
                 fontSize,
-            })
-        }
-    },
-)
-
-watch(
-    () => pref.editorFont.fontFamily,
-    (fontFamily = undefined) => {
-        if (editorNode != null) {
-            editorNode.updateOptions({
                 fontFamily,
             })
         }
diff --git a/frontend/src/components/dialogs/PreferencesDialog.vue b/frontend/src/components/dialogs/PreferencesDialog.vue
index a79d72d..38e5645 100644
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@@ -5,6 +5,7 @@ import useDialog from 'stores/dialog'
 import usePreferencesStore from 'stores/preferences.js'
 import { map, sortBy } from 'lodash'
 import { typesIconStyle } from '@/consts/support_redis_type.js'
+import Help from '@/components/icons/Help.vue'
 
 const prefStore = usePreferencesStore()
 
@@ -92,14 +93,27 @@ const onClose = () => {
                                 :render-label="({ label, value }) => (value === 'auto' ? $t(label) : label)"
                                 filterable />
                         </n-form-item-gi>
-                        <n-form-item-gi :label="$t('preferences.general.font')" :span="12" required>
+                        <n-form-item-gi :span="24" required>
+                            <template #label>
+                                {{ $t('preferences.general.font') }}
+                                <n-tooltip trigger="hover">
+                                    <template #trigger>
+                                        <n-icon :component="Help" />
+                                    </template>
+                                    <div class="text-block">
+                                        {{ $t('preferences.font_tip') }}
+                                    </div>
+                                </n-tooltip>
+                            </template>
                             <n-select
-                                v-model:value="prefStore.general.font"
+                                v-model:value="prefStore.general.fontFamily"
                                 :options="prefStore.fontOption"
                                 :render-label="({ label, value }) => (value === '' ? $t(label) : label)"
-                                filterable />
+                                filterable
+                                multiple
+                                tag />
                         </n-form-item-gi>
-                        <n-form-item-gi :label="$t('preferences.general.font_size')" :span="12">
+                        <n-form-item-gi :label="$t('preferences.general.font_size')" :span="24">
                             <n-input-number v-model:value="prefStore.general.fontSize" :max="65535" :min="1" />
                         </n-form-item-gi>
                         <n-form-item-gi :label="$t('preferences.general.scan_size')" :span="12">
@@ -115,16 +129,16 @@ const onClose = () => {
                                 :options="keyOptions"
                                 :render-label="({ label }) => $t(label)" />
                         </n-form-item-gi>
-                        <n-form-item-gi :label="$t('preferences.general.proxy')" :span="24">
-                            <n-space>
-                                <n-checkbox v-model:checked="prefStore.general.useSysProxy">
-                                    {{ $t('preferences.general.use_system_proxy') }}
-                                </n-checkbox>
-                                <n-checkbox v-model:checked="prefStore.general.useSysProxyHttp">
-                                    {{ $t('preferences.general.use_system_proxy_http') }}
-                                </n-checkbox>
-                            </n-space>
-                        </n-form-item-gi>
+                        <!--                        <n-form-item-gi :label="$t('preferences.general.proxy')" :span="24">-->
+                        <!--                            <n-space>-->
+                        <!--                                <n-checkbox v-model:checked="prefStore.general.useSysProxy">-->
+                        <!--                                    {{ $t('preferences.general.use_system_proxy') }}-->
+                        <!--                                </n-checkbox>-->
+                        <!--                                <n-checkbox v-model:checked="prefStore.general.useSysProxyHttp">-->
+                        <!--                                    {{ $t('preferences.general.use_system_proxy_http') }}-->
+                        <!--                                </n-checkbox>-->
+                        <!--                            </n-space>-->
+                        <!--                        </n-form-item-gi>-->
                         <n-form-item-gi :label="$t('preferences.general.update')" :span="24">
                             <n-checkbox v-model:checked="prefStore.general.checkUpdate">
                                 {{ $t('preferences.general.auto_check_update') }}
@@ -137,14 +151,27 @@ const onClose = () => {
             <n-tab-pane :tab="$t('preferences.editor.name')" display-directive="show" name="editor">
                 <n-form :disabled="loading" :model="prefStore.editor" :show-require-mark="false" label-placement="top">
                     <n-grid :x-gap="10">
-                        <n-form-item-gi :label="$t('preferences.general.font')" :span="12" required>
+                        <n-form-item-gi :span="24" required>
+                            <template #label>
+                                {{ $t('preferences.general.font') }}
+                                <n-tooltip trigger="hover">
+                                    <template #trigger>
+                                        <n-icon :component="Help" />
+                                    </template>
+                                    <div class="text-block">
+                                        {{ $t('preferences.font_tip') }}
+                                    </div>
+                                </n-tooltip>
+                            </template>
                             <n-select
-                                v-model:value="prefStore.editor.font"
+                                v-model:value="prefStore.editor.fontFamily"
                                 :options="prefStore.fontOption"
                                 :render-label="({ label, value }) => value || $t(label)"
-                                filterable />
+                                filterable
+                                multiple
+                                tag />
                         </n-form-item-gi>
-                        <n-form-item-gi :label="$t('preferences.general.font_size')" :span="12">
+                        <n-form-item-gi :label="$t('preferences.general.font_size')" :span="24">
                             <n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />
                         </n-form-item-gi>
                         <n-form-item-gi :show-feedback="false" :show-label="false" :span="24">
diff --git a/frontend/src/components/icons/Subscribe.vue b/frontend/src/components/icons/Subscribe.vue
index d8c5422..2d32080 100644
--- a/frontend/src/components/icons/Subscribe.vue
+++ b/frontend/src/components/icons/Subscribe.vue
@@ -14,9 +14,9 @@ const props = defineProps({
 <template>
     <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
+            :fill="props.inverse ? 'currentColor' : 'none'"
             :stroke-width="props.strokeWidth"
             d="M24 28.6292C26.5104 28.6292 28.5455 26.6004 28.5455 24.0979C28.5455 21.5954 26.5104 19.5667 24 19.5667C21.4897 19.5667 19.4546 21.5954 19.4546 24.0979C19.4546 26.6004 21.4897 28.6292 24 28.6292Z"
-            :fill="props.inverse ? 'currentColor' : 'none'"
             stroke="currentColor"
             stroke-linejoin="round" />
         <path
diff --git a/frontend/src/components/sidebar/ConnectionPane.vue b/frontend/src/components/sidebar/ConnectionPane.vue
index 969e0b0..06ab299 100644
--- a/frontend/src/components/sidebar/ConnectionPane.vue
+++ b/frontend/src/components/sidebar/ConnectionPane.vue
@@ -46,15 +46,15 @@ const onSelectOptions = async (select) => {
             <icon-button
                 :button-class="['nav-pane-func-btn']"
                 :icon="AddLink"
-                size="20"
                 :stroke-width="3.5"
+                size="20"
                 t-tooltip="interface.new_conn"
                 @click="dialogStore.openNewDialog()" />
             <icon-button
                 :button-class="['nav-pane-func-btn']"
                 :icon="AddGroup"
-                size="20"
                 :stroke-width="3.5"
+                size="20"
                 t-tooltip="interface.new_group"
                 @click="dialogStore.openNewGroupDialog()" />
             <n-divider vertical />
diff --git a/frontend/src/components/sidebar/Ribbon.vue b/frontend/src/components/sidebar/Ribbon.vue
index 33fc46b..0b112bd 100644
--- a/frontend/src/components/sidebar/Ribbon.vue
+++ b/frontend/src/components/sidebar/Ribbon.vue
@@ -152,8 +152,8 @@ const exThemeVars = computed(() => {
                 :options="preferencesOptions"
                 :render-icon="({ icon }) => render.renderIcon(icon)"
                 :render-label="({ label }) => render.renderLabel($t(label), { class: 'context-menu-item' })"
-                trigger="click"
                 content-class="nav-menu-button"
+                trigger="click"
                 @select="onSelectPreferenceMenu">
                 <icon-button :icon="Config" :size="iconSize" :stroke-width="3" />
             </n-dropdown>
@@ -161,8 +161,8 @@ const exThemeVars = computed(() => {
                 v-if="prefStore.currentLanguage === 'zh'"
                 :icon="QRCode"
                 :size="iconSize"
-                t-tooltip="ribbon.wechat_official"
                 class="nav-menu-button"
+                t-tooltip="ribbon.wechat_official"
                 @click="showWechat = true" />
             <icon-button
                 v-else
@@ -176,8 +176,8 @@ const exThemeVars = computed(() => {
             <icon-button
                 :icon="Github"
                 :size="iconSize"
-                t-tooltip="ribbon.github"
                 class="nav-menu-button"
+                t-tooltip="ribbon.github"
                 @click="openGithub" />
         </div>
 
diff --git a/frontend/src/langs/en-us.json b/frontend/src/langs/en-us.json
index aadeb17..625d7c3 100644
--- a/frontend/src/langs/en-us.json
+++ b/frontend/src/langs/en-us.json
@@ -27,6 +27,7 @@
   "preferences": {
     "name": "Preferences",
     "restore_defaults": "Restore Defaults",
+    "font_tip": "Supports multiple selection. You can manually input the font name if it is not list below.",
     "general": {
       "name": "General",
       "theme": "Theme",
@@ -35,7 +36,6 @@
       "theme_auto": "Auto",
       "language": "Language",
       "system_lang": "Use System Language",
-      "default": "Default",
       "font": "Font",
       "font_size": "Font Size",
       "scan_size": "Default Size for SCAN Command",
diff --git a/frontend/src/langs/pt-br.json b/frontend/src/langs/pt-br.json
index a607283..f38be03 100644
--- a/frontend/src/langs/pt-br.json
+++ b/frontend/src/langs/pt-br.json
@@ -31,7 +31,6 @@
       "theme_auto": "Automático",
       "language": "Idioma",
       "system_lang": "Usar Idioma do Sistema",
-      "default": "Padrão",
       "font": "Fonte",
       "font_size": "Tamanho da Fonte",
       "scan_size": "Tamanho Padrão para Comando SCAN",
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index 56dde88..319ef10 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -27,6 +27,7 @@
   "preferences": {
     "name": "偏好设置",
     "restore_defaults": "重置为默认",
+    "font_tip": "支持多选，如列表没有已安装的字体，可自行手动输入",
     "general": {
       "name": "常规配置",
       "theme": "主题",
@@ -35,7 +36,6 @@
       "theme_auto": "自动",
       "language": "语言",
       "system_lang": "使用系统语言",
-      "default": "默认",
       "font": "字体",
       "font_size": "字体尺寸",
       "scan_size": "SCAN命令默认数量",
diff --git a/frontend/src/stores/preferences.js b/frontend/src/stores/preferences.js
index 9ccf470..71b0030 100644
--- a/frontend/src/stores/preferences.js
+++ b/frontend/src/stores/preferences.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { lang } from '@/langs/index.js'
-import { cloneDeep, find, get, isEmpty, map, pick, set, split } from 'lodash'
+import { cloneDeep, get, isEmpty, join, map, pick, set, split } from 'lodash'
 import {
     CheckForUpdate,
     GetFontList,
@@ -43,6 +43,7 @@ const usePreferencesStore = defineStore('preferences', {
             theme: 'auto',
             language: 'auto',
             font: '',
+            fontFamily: [],
             fontSize: 14,
             scanSize: 3000,
             keyIconStyle: 0,
@@ -53,6 +54,7 @@ const usePreferencesStore = defineStore('preferences', {
         },
         editor: {
             font: '',
+            fontFamily: [],
             fontSize: 14,
             showLineNum: true,
             showFolding: true,
@@ -103,17 +105,11 @@ const usePreferencesStore = defineStore('preferences', {
          * @returns {{path: string, label: string, value: string}[]}
          */
         fontOption() {
-            const option = map(this.fontList, (font) => ({
+            return map(this.fontList, (font) => ({
                 value: font.name,
                 label: font.name,
                 path: font.path,
             }))
-            option.splice(0, 0, {
-                value: '',
-                label: 'preferences.general.default',
-                path: '',
-            })
-            return option
         },
 
         /**
@@ -124,12 +120,21 @@ const usePreferencesStore = defineStore('preferences', {
             const fontStyle = {
                 fontSize: this.general.fontSize + 'px',
             }
-            if (!isEmpty(this.general.font) && this.general.font !== 'none') {
-                const font = find(this.fontList, { name: this.general.font })
-                if (font != null) {
-                    fontStyle['fontFamily'] = `${font.name}`
-                }
+            if (!isEmpty(this.general.fontFamily)) {
+                fontStyle['fontFamily'] = join(
+                    map(this.general.fontFamily, (f) => `"${f}"`),
+                    ',',
+                )
             }
+            // compatible with old preferences
+            // if (isEmpty(fontStyle['fontFamily'])) {
+            //     if (!isEmpty(this.general.font) && this.general.font !== 'none') {
+            //         const font = find(this.fontList, { name: this.general.font })
+            //         if (font != null) {
+            //             fontStyle['fontFamily'] = `${font.name}`
+            //         }
+            //     }
+            // }
             return fontStyle
         },
 
@@ -141,13 +146,24 @@ const usePreferencesStore = defineStore('preferences', {
             const fontStyle = {
                 fontSize: (this.editor.fontSize || 14) + 'px',
             }
-            if (!isEmpty(this.editor.font) && this.editor.font !== 'none') {
-                const font = find(this.fontList, { name: this.editor.font })
-                if (font != null) {
-                    fontStyle['fontFamily'] = `${font.name}`
-                }
+            if (!isEmpty(this.editor.fontFamily)) {
+                fontStyle['fontFamily'] = join(
+                    map(this.editor.fontFamily, (f) => `"${f}"`),
+                    ',',
+                )
+            }
+            // compatible with old preferences
+            // if (isEmpty(fontStyle['fontFamily'])) {
+            //     if (!isEmpty(this.editor.font) && this.editor.font !== 'none') {
+            //         const font = find(this.fontList, { name: this.editor.font })
+            //         if (font != null) {
+            //             fontStyle['fontFamily'] = `${font.name}`
+            //         }
+            //     }
+            // }
+            if (isEmpty(fontStyle['fontFamily'])) {
+                fontStyle['fontFamily'] = ['monaco']
             }
-            fontStyle['fontFamily'] = fontStyle['fontFamily'] || 'monaco'
             return fontStyle
         },