perf: support select multiple font and input custom font name #115 #130

backend/types/preferences.go

@@ -44,6 +44,7 @@ type PreferencesGeneral struct {
 	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"`
@@ -55,6 +56,7 @@ type PreferencesGeneral struct {
 
 type PreferencesEditor struct {
 	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"`

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) => {

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,
+    () => pref.editorFont,
-    (fontSize) => {
+    ({ fontSize, fontFamily }) => {
         if (editorNode != null) {
             editorNode.updateOptions({
                 fontSize,
-            })
-        }
-    },
-)
-
-watch(
-    () => pref.editorFont.fontFamily,
-    (fontFamily = undefined) => {
-        if (editorNode != null) {
-            editorNode.updateOptions({
                 fontFamily,
             })
         }

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-form-item-gi :label="$t('preferences.general.proxy')" :span="24">-->
-                            <n-space>
+                        <!--                            <n-space>-->
-                                <n-checkbox v-model:checked="prefStore.general.useSysProxy">
+                        <!--                                <n-checkbox v-model:checked="prefStore.general.useSysProxy">-->
-                                    {{ $t('preferences.general.use_system_proxy') }}
+                        <!--                                    {{ $t('preferences.general.use_system_proxy') }}-->
-                                </n-checkbox>
+                        <!--                                </n-checkbox>-->
-                                <n-checkbox v-model:checked="prefStore.general.useSysProxyHttp">
+                        <!--                                <n-checkbox v-model:checked="prefStore.general.useSysProxyHttp">-->
-                                    {{ $t('preferences.general.use_system_proxy_http') }}
+                        <!--                                    {{ $t('preferences.general.use_system_proxy_http') }}-->
-                                </n-checkbox>
+                        <!--                                </n-checkbox>-->
-                            </n-space>
+                        <!--                            </n-space>-->
-                        </n-form-item-gi>
+                        <!--                        </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">

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

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 />

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>
 

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",

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",

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命令默认数量",

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') {
+            if (!isEmpty(this.general.fontFamily)) {
-                const font = find(this.fontList, { name: this.general.font })
+                fontStyle['fontFamily'] = join(
-                if (font != null) {
+                    map(this.general.fontFamily, (f) => `"${f}"`),
-                    fontStyle['fontFamily'] = `${font.name}`
+                    ',',
-                }
+                )
             }
+            // 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') {
+            if (!isEmpty(this.editor.fontFamily)) {
-                const font = find(this.fontList, { name: this.editor.font })
+                fontStyle['fontFamily'] = join(
-                if (font != null) {
+                    map(this.editor.fontFamily, (f) => `"${f}"`),
-                    fontStyle['fontFamily'] = `${font.name}`
+                    ',',
+                )
             }
+            // 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
         },