feat (ui): 支持显示字段帮助配置

Author: qianmoQ

src-tauri/src/config.rs

@@ -12,11 +12,12 @@ static CONFIG_MANAGER: Mutex<Option<ConfigManager>> = Mutex::new(None);
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct EditorConfig {
-    pub indent_with_tab: Option<bool>,   // 是否使用 tab 缩进
-    pub tab_size: Option<u32>,           // tab 缩进, 空格数，默认为 2
-    pub theme: Option<String>,           // 编辑器主题
-    pub font_size: Option<u32>,          // 编辑器字体大小
-    pub show_line_numbers: Option<bool>, // 是否显示行号
+    pub indent_with_tab: Option<bool>,    // 是否使用 tab 缩进
+    pub tab_size: Option<u32>,            // tab 缩进, 空格数，默认为 2
+    pub theme: Option<String>,            // 编辑器主题
+    pub font_size: Option<u32>,           // 编辑器字体大小
+    pub show_line_numbers: Option<bool>,  // 是否显示行号
+    pub show_function_help: Option<bool>, // 是否显示函数帮助
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -43,6 +44,7 @@ impl Default for AppConfig {
                 theme: Some("githubLight".to_string()),
                 font_size: Some(14),
                 show_line_numbers: Some(true),
+                show_function_help: Some(false),
             }),
         }
     }
@@ -100,6 +102,7 @@ impl ConfigManager {
                                 theme: Some("githubLight".to_string()),
                                 font_size: Some(14),
                                 show_line_numbers: Some(true),
+                                show_function_help: Some(false),
                             });
                             println!("读取配置 -> 添加默认 editor 配置");
                         }
@@ -205,6 +208,7 @@ impl ConfigManager {
                 theme: Some("githubLight".to_string()),
                 font_size: Some(14),
                 show_line_numbers: Some(true),
+                show_function_help: Some(false),
             }),
         }
     }

src/components/setting/Editor.vue

@@ -8,6 +8,10 @@
       <Switch v-model="editorConfig.show_line_numbers"/>
     </Label>
 
+    <Label label="是否显示函数帮助信息">
+      <Switch v-model="editorConfig.show_function_help"/>
+    </Label>
+
     <Label label="缩进空格数">
       <Number v-model="editorConfig.tab_size" :min="1" :max="8" placeholder="缩进空格数"/>
     </Label>

src/composables/useCodeMirrorEditor.ts

@@ -61,7 +61,7 @@ import { invoke } from '@tauri-apps/api/core'
 import { useToast } from '../plugins/toast'
 import { StreamLanguage } from '@codemirror/language'
 import { EditorConfig } from '../types/app.ts'
-import { EditorView } from '@codemirror/view'
+import { EditorView, hoverTooltip } from '@codemirror/view'
 
 interface Props
 {
@@ -82,7 +82,8 @@ export function useCodeMirrorEditor(props: Props)
         indent_with_tab: true,
         tab_size: 2,
         font_size: 14,
-        show_line_numbers: false
+        show_line_numbers: false,
+        show_function_help: false
     }
 
     // 主题映射
@@ -191,8 +192,34 @@ export function useCodeMirrorEditor(props: Props)
         }
     })
 
+    // 显示函数提示扩展
+    const showFunctionHelpHover = hoverTooltip((view, pos, side) => {
+        let { from, to, text } = view.state.doc.lineAt(pos)
+        let start = pos, end = pos
+        while (start > from && /\w/.test(text[start - from - 1])) {
+            start--
+        }
+        while (end < to && /\w/.test(text[end - from])) {
+            end++
+        }
+        if (start == pos && side < 0 || end == pos && side > 0) {
+            return null
+        }
+        return {
+            pos: start,
+            end,
+            above: true,
+            create(_view)
+            {
+                let dom = document.createElement('div')
+                dom.textContent = text.slice(start - from, end - from)
+                return { dom }
+            }
+        }
+    }, { hoverTime: 500 })
+
     // 更新扩展的函数
-    const updateExtensions = async (showLineNumbers?: boolean) => {
+    const updateExtensions = async (showLineNumbers?: boolean, showFunctionHelp?: boolean) => {
         const result = []
 
         // 添加主题扩展
@@ -209,12 +236,16 @@ export function useCodeMirrorEditor(props: Props)
 
         // 处理行号显示逻辑
         const shouldShowLineNumbers = showLineNumbers ?? editorConfig.value?.show_line_numbers ?? false
-
         // 如果配置为不显示行号，则添加隐藏行号的扩展
         if (!shouldShowLineNumbers) {
             result.push(hideLineNumbersTheme)
         }
 
+        const shouldShowFunctionHelp = showFunctionHelp ?? editorConfig.value?.show_function_help ?? false
+        if (shouldShowFunctionHelp) {
+            result.push(showFunctionHelpHover)
+        }
+
         extensions.value = result
 
         // 如果组件还没准备好，等待下一个 tick 后设置为准备好
@@ -309,6 +340,12 @@ export function useCodeMirrorEditor(props: Props)
         await reRenderEditor()
     }, { immediate: false })
 
+    // 监听函数帮助配置变化
+    watch(() => editorConfig.value?.show_function_help, async () => {
+        console.log('函数帮助配置变化:', editorConfig.value?.show_function_help)
+        await reRenderEditor()
+    })
+
     return {
         // 状态
         isReady,

src/types/app.ts

@@ -52,4 +52,5 @@ export interface EditorConfig
     tab_size?: number
     font_size?: number
     show_line_numbers?: boolean
+    show_function_help?: boolean
 }