feat: add cli preferences #131

backend/types/preferences.go

@@ -6,6 +6,7 @@ type Preferences struct {
 	Behavior PreferencesBehavior `json:"behavior" yaml:"behavior"`
 	General  PreferencesGeneral  `json:"general" yaml:"general"`
 	Editor   PreferencesEditor   `json:"editor" yaml:"editor"`
+	Cli      PreferencesCli      `json:"cli" yaml:"cli"`
 }
 
 func NewPreferences() Preferences {
@@ -28,6 +29,9 @@ func NewPreferences() Preferences {
 			ShowLineNum: true,
 			ShowFolding: true,
 		},
+		Cli: PreferencesCli{
+			FontSize: consts.DEFAULT_FONT_SIZE,
+		},
 	}
 }
 
@@ -61,3 +65,8 @@ type PreferencesEditor struct {
 	ShowLineNum bool     `json:"showLineNum" yaml:"show_line_num"`
 	ShowFolding bool     `json:"showFolding" yaml:"show_folding"`
 }
+
+type PreferencesCli struct {
+	FontFamily []string `json:"fontFamily" yaml:"font_family,omitempty"`
+	FontSize   int      `json:"fontSize" yaml:"font_size"`
+}

frontend/src/components/content_value/ContentCli.vue

@@ -32,10 +32,11 @@ let fitAddonInst = null
  * @return {{fitAddon: xterm-addon-fit.FitAddon, term: Terminal}}
  */
 const newTerm = () => {
+    const { fontSize = 14, fontFamily = 'Courier New' } = prefStore.cliFont
     const term = new Terminal({
         allowProposedApi: true,
-        fontFamily: prefStore.general.fontFamily,
+        fontFamily,
-        fontSize: prefStore.general.fontSize || 14,
+        fontSize,
         cursorBlink: true,
         disableStdin: false,
         screenReaderMode: true,
@@ -90,21 +91,12 @@ defineExpose({
     resizeTerm,
 })
 
-// watch(
-//     () => prefStore.general.font,
-//     (font = undefined) => {
-//         if (termInst != null) {
-//             termInst.options.fontFamily = font || 'Courier New'
-//         }
-//         resizeTerm()
-//     },
-// )
-
 watch(
-    () => prefStore.general.fontSize,
+    () => prefStore.cliFont,
-    (fontSize) => {
+    ({ fontSize = 14, fontFamily = 'Courier New' }) => {
         if (termInst != null) {
             termInst.options.fontSize = fontSize
+            termInst.options.fontFamily = fontFamily
         }
         resizeTerm()
     },

frontend/src/components/dialogs/PreferencesDialog.vue

@@ -187,6 +187,36 @@ const onClose = () => {
                     </n-grid>
                 </n-form>
             </n-tab-pane>
+
+            <n-tab-pane :tab="$t('preferences.cli.name')" display-directive="show" name="cli">
+                <n-form :disabled="loading" :model="prefStore.cli" :show-require-mark="false" label-placement="top">
+                    <n-grid :x-gap="10">
+                        <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.cli.fontFamily"
+                                :options="prefStore.fontOption"
+                                :render-label="({ label, value }) => value || $t(label)"
+                                filterable
+                                multiple
+                                tag />
+                        </n-form-item-gi>
+                        <n-form-item-gi :label="$t('preferences.general.font_size')" :span="24">
+                            <n-input-number v-model:value="prefStore.cli.fontSize" :max="65535" :min="1" />
+                        </n-form-item-gi>
+                    </n-grid>
+                </n-form>
+            </n-tab-pane>
         </n-tabs>
         <!-- </n-spin> -->
 

frontend/src/langs/en-us.json

@@ -54,6 +54,9 @@
       "name": "Editor",
       "show_linenum": "Show Line Numbers",
       "show_folding": "Enable Code Folding"
+    },
+    "cli": {
+      "name": "Command Line"
     }
   },
   "interface": {

frontend/src/langs/zh-cn.json

@@ -54,6 +54,9 @@
       "name": "编辑器",
       "show_linenum": "显示行号",
       "show_folding": "启用代码折叠"
+    },
+    "cli": {
+      "name": "命令行"
     }
   },
   "interface": {

frontend/src/stores/preferences.js

@@ -59,6 +59,10 @@ const usePreferencesStore = defineStore('preferences', {
             showLineNum: true,
             showFolding: true,
         },
+        cli: {
+            fontFamily: [],
+            fontSize: 14,
+        },
         lastPref: {},
         fontList: [],
     }),
@@ -167,6 +171,26 @@ const usePreferencesStore = defineStore('preferences', {
             return fontStyle
         },
 
+        /**
+         * current cli font
+         * @return {{fontSize: string, fontFamily?: string}}
+         */
+        cliFont() {
+            const fontStyle = {
+                fontSize: this.cli.fontSize || 14,
+            }
+            if (!isEmpty(this.cli.fontFamily)) {
+                fontStyle['fontFamily'] = join(
+                    map(this.cli.fontFamily, (f) => `"${f}"`),
+                    ',',
+                )
+            }
+            if (isEmpty(fontStyle['fontFamily'])) {
+                fontStyle['fontFamily'] = ['Courier New']
+            }
+            return fontStyle
+        },
+
         /**
          * get current language setting
          * @return {string}
@@ -264,7 +288,7 @@ const usePreferencesStore = defineStore('preferences', {
          * @returns {Promise<boolean>}
          */
         async savePreferences() {
-            const pf = pick(this, ['behavior', 'general', 'editor'])
+            const pf = pick(this, ['behavior', 'general', 'editor', 'cli'])
             const { success, msg } = await SetPreferences(pf)
             return success === true
         },