feat (ui): 美化编辑器单词提示框

Author: qianmoQ

src/composables/useCodeMirrorEditor.ts

@@ -61,7 +61,8 @@ 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, hoverTooltip } from '@codemirror/view'
+import { EditorView } from '@codemirror/view'
+import { useCodeMirrorFunctionHelp } from './useCodeMirrorFunctionHelp'
 
 interface Props
 {
@@ -72,6 +73,7 @@ interface Props
 export function useCodeMirrorEditor(props: Props)
 {
     const toast = useToast()
+    const { showFunctionHelpHover, functionHelpTheme } = useCodeMirrorFunctionHelp()
 
     // 状态管理
     const isReady = ref(false)
@@ -192,32 +194,6 @@ 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, showFunctionHelp?: boolean) => {
         const result = []
@@ -226,6 +202,9 @@ export function useCodeMirrorEditor(props: Props)
         const themeExtension = getThemeExtension(editorConfig.value?.theme)
         result.push(themeExtension)
 
+        // 添加函数帮助主题
+        result.push(functionHelpTheme)
+
         // 添加语言扩展
         if (props.language) {
             const langExtension = getLanguageExtension(props.language)
@@ -255,7 +234,7 @@ export function useCodeMirrorEditor(props: Props)
         }
     }
 
-    // 加载编辑器配置
+    // 其余代码完全保持不变...
     const loadEditorConfig = async () => {
         try {
             const globalConfig = await invoke<any>('get_app_config')
@@ -363,4 +342,4 @@ export function useCodeMirrorEditor(props: Props)
         getThemeExtension,
         getLanguageExtension
     }
-}
+}

src/composables/useCodeMirrorFunctionHelp.ts

@@ -0,0 +1,68 @@
+import { EditorView, hoverTooltip } from '@codemirror/view'
+
+export function useCodeMirrorFunctionHelp()
+{
+    // 提示框
+    const createHelpTooltip = (text: string) => {
+        const dom = document.createElement('div')
+        dom.className = 'cm-function-help-tooltip'
+
+        dom.innerHTML = `
+            <div class="relative mb-1">
+                <div class="px-2 py-1 bg-gray-800 text-white text-xs rounded">
+                    <span class="font-mono">${ text }</span>
+                </div>
+                <!-- 小三角箭头 -->
+                <div class="absolute left-1/2 transform -translate-x-1/2 top-full">
+                    <div class="w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-800"></div>
+                </div>
+            </div>
+        `
+
+        return { dom }
+    }
+
+    // 显示函数提示扩展
+    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)
+            {
+                return createHelpTooltip(text.slice(start - from, end - from))
+            }
+        }
+    }, { hoverTime: 300 })
+
+    // 提示框样式主题
+    const functionHelpTheme = EditorView.theme({
+        '.cm-function-help-tooltip': {
+            zIndex: '100',
+            animation: 'fadeIn 0.2s ease-out'
+        },
+        '.cm-tooltip': {
+            border: 'none !important'
+        },
+        '@keyframes fadeIn': {
+            'from': { opacity: '0', transform: 'translateY(-2px)' },
+            'to': { opacity: '1', transform: 'translateY(0)' }
+        }
+    })
+
+    return {
+        showFunctionHelpHover,
+        functionHelpTheme
+    }
+}