From edaef2a78cba77307a132ae7ed98ec836c15596c Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Tue, 23 Jan 2024 20:55:38 +0800
Subject: [PATCH] feat: add cursor style option for cli

---
 backend/types/preferences.go                   |  8 +++++---
 .../components/content_value/ContentCli.vue    | 11 +++++++++++
 .../components/dialogs/PreferencesDialog.vue   | 10 ++++++++++
 frontend/src/langs/en-us.json                  |  6 +++++-
 frontend/src/langs/zh-cn.json                  |  6 +++++-
 frontend/src/stores/preferences.js             | 18 ++++++++++++++++++
 6 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/backend/types/preferences.go b/backend/types/preferences.go
index 0a9d8ad..bdc697f 100644
--- a/backend/types/preferences.go
+++ b/backend/types/preferences.go
@@ -30,7 +30,8 @@ func NewPreferences() Preferences {
 			ShowFolding: true,
 		},
 		Cli: PreferencesCli{
-			FontSize: consts.DEFAULT_FONT_SIZE,
+			FontSize:    consts.DEFAULT_FONT_SIZE,
+			CursorStyle: "block",
 		},
 	}
 }
@@ -67,6 +68,7 @@ type PreferencesEditor struct {
 }
 
 type PreferencesCli struct {
-	FontFamily []string `json:"fontFamily" yaml:"font_family,omitempty"`
-	FontSize   int      `json:"fontSize" yaml:"font_size"`
+	FontFamily  []string `json:"fontFamily" yaml:"font_family,omitempty"`
+	FontSize    int      `json:"fontSize" yaml:"font_size"`
+	CursorStyle string   `json:"cursorStyle" yaml:"cursor_style,omitempty"`
 }
diff --git a/frontend/src/components/content_value/ContentCli.vue b/frontend/src/components/content_value/ContentCli.vue
index ff20afb..d2d85db 100644
--- a/frontend/src/components/content_value/ContentCli.vue
+++ b/frontend/src/components/content_value/ContentCli.vue
@@ -37,6 +37,7 @@ const newTerm = () => {
         allowProposedApi: true,
         fontFamily,
         fontSize,
+        cursorStyle: prefStore.cli.cursorStyle || 'block',
         cursorBlink: true,
         disableStdin: false,
         screenReaderMode: true,
@@ -102,6 +103,16 @@ watch(
     },
 )
 
+watch(
+    () => prefStore.cli.cursorStyle,
+    (style) => {
+        if (termInst != null) {
+            termInst.options.cursorStyle = style || 'block'
+        }
+        resizeTerm()
+    },
+)
+
 const prefixContent = computed(() => {
     return '\x1b[33m' + promptPrefix.value + '\x1b[0m'
 })
diff --git a/frontend/src/components/dialogs/PreferencesDialog.vue b/frontend/src/components/dialogs/PreferencesDialog.vue
index 7badefc..63b5eca 100644
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@@ -214,6 +214,16 @@ const onClose = () => {
                         <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-form-item-gi :label="$t('preferences.cli.cursor_style')" :span="24">
+                            <n-radio-group v-model:value="prefStore.cli.cursorStyle" name="theme" size="medium">
+                                <n-radio-button
+                                    v-for="opt in prefStore.cliCursorStyleOption"
+                                    :key="opt.value"
+                                    :value="opt.value">
+                                    {{ $t(opt.label) }}
+                                </n-radio-button>
+                            </n-radio-group>
+                        </n-form-item-gi>
                     </n-grid>
                 </n-form>
             </n-tab-pane>
diff --git a/frontend/src/langs/en-us.json b/frontend/src/langs/en-us.json
index efa9178..4695f77 100644
--- a/frontend/src/langs/en-us.json
+++ b/frontend/src/langs/en-us.json
@@ -56,7 +56,11 @@
       "show_folding": "Enable Code Folding"
     },
     "cli": {
-      "name": "Command Line"
+      "name": "Command Line",
+      "cursor_style": "Cursor Style",
+      "cursor_style_block": "Block",
+      "cursor_style_underline": "Underline",
+      "cursor_style_bar": "Bar"
     }
   },
   "interface": {
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index 47ac8ef..5d2a053 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -56,7 +56,11 @@
       "show_folding": "启用代码折叠"
     },
     "cli": {
-      "name": "命令行"
+      "name": "命令行",
+      "cursor_style": "光标样式",
+      "cursor_style_block": "方块",
+      "cursor_style_underline": "下划线",
+      "cursor_style_bar": "竖线"
     }
   },
   "interface": {
diff --git a/frontend/src/stores/preferences.js b/frontend/src/stores/preferences.js
index a7f027a..af54834 100644
--- a/frontend/src/stores/preferences.js
+++ b/frontend/src/stores/preferences.js
@@ -62,6 +62,7 @@ const usePreferencesStore = defineStore('preferences', {
         cli: {
             fontFamily: [],
             fontSize: 14,
+            cursorStyle: 'block',
         },
         lastPref: {},
         fontList: [],
@@ -191,6 +192,23 @@ const usePreferencesStore = defineStore('preferences', {
             return fontStyle
         },
 
+        cliCursorStyleOption() {
+            return [
+                {
+                    value: 'block',
+                    label: 'preferences.cli.cursor_style_block',
+                },
+                {
+                    value: 'underline',
+                    label: 'preferences.cli.cursor_style_underline',
+                },
+                {
+                    value: 'bar',
+                    label: 'preferences.cli.cursor_style_bar',
+                },
+            ]
+        },
+
         /**
          * get current language setting
          * @return {string}