-
图表类型
+
+
图表类型
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ p.name }}
+
+
+
+
+
+
{{ aiError }}
+
+
+
+
@@ -177,9 +219,11 @@ import {computed, ref, watch} from 'vue'
import {debounce} from 'lodash-es'
import * as echarts from 'echarts/core'
import {SVGRenderer} from 'echarts/renderers'
-import {BarChart3, Copy, Download, FileDown, Image as ImageIcon, Hash, Type, X} from 'lucide-vue-next'
+import {invoke} from '@tauri-apps/api/core'
+import {BarChart3, Copy, Download, FileDown, Image as ImageIcon, Hash, RefreshCw, Sparkles, Star, Type, X} from 'lucide-vue-next'
import {useTheme} from '../../composables/useTheme'
import {kvGetJSON, kvSetJSON} from '../../composables/useKvStore'
+import {useAiConfig} from '../../composables/useAiConfig'
import {useToast} from '../../plugins/toast'
import {downloadCsv} from '../../utils/csv'
import Select from '../../ui/Select.vue'
@@ -337,28 +381,82 @@ if (typeof saved.radarFill === 'boolean') {
radarFill.value = saved.radarFill
}
-const persist = debounce(() => {
- kvSetJSON(CFG_KEY, {
- chartType: chartType.value,
- agg: agg.value,
- sortOrder: sortOrder.value,
- topN: topN.value,
- dimensions: dimensions.value,
- metrics: metrics.value,
- xField: xField.value,
- yField: yField.value,
- groupField: groupField.value,
- horizontal: horizontal.value,
- stacked: stacked.value,
- smooth: smooth.value,
- ring: ring.value,
- radarFill: radarFill.value,
- showLabel: showLabel.value
- })
-}, 300)
+const buildConfig = () => ({
+ chartType: chartType.value,
+ agg: agg.value,
+ sortOrder: sortOrder.value,
+ topN: topN.value,
+ dimensions: dimensions.value,
+ metrics: metrics.value,
+ xField: xField.value,
+ yField: yField.value,
+ groupField: groupField.value,
+ horizontal: horizontal.value,
+ stacked: stacked.value,
+ smooth: smooth.value,
+ ring: ring.value,
+ radarFill: radarFill.value,
+ showLabel: showLabel.value
+})
+// 套用配置（字段按当前列过滤）
+const applyConfig = (cfg: Record
) => {
+ if (cfg.chartType && CHART_META[cfg.chartType]) {
+ chartType.value = cfg.chartType
+ }
+ if (cfg.agg) {
+ agg.value = cfg.agg
+ }
+ if (cfg.sortOrder) {
+ sortOrder.value = cfg.sortOrder
+ }
+ if (typeof cfg.topN === 'number') {
+ topN.value = cfg.topN
+ }
+ dimensions.value = Array.isArray(cfg.dimensions) ? cfg.dimensions.filter((d: string) => props.columns.includes(d)) : []
+ metrics.value = Array.isArray(cfg.metrics) ? cfg.metrics.filter((m: string) => props.columns.includes(m)) : []
+ xField.value = cfg.xField && props.columns.includes(cfg.xField) ? cfg.xField : ''
+ yField.value = cfg.yField && props.columns.includes(cfg.yField) ? cfg.yField : ''
+ groupField.value = cfg.groupField && props.columns.includes(cfg.groupField) ? cfg.groupField : ''
+ for (const k of ['horizontal', 'stacked', 'smooth', 'ring', 'radarFill', 'showLabel'] as const) {
+ if (typeof cfg[k] === 'boolean') {
+ ({horizontal, stacked, smooth, ring, radarFill, showLabel}[k]).value = cfg[k]
+ }
+ }
+}
+
+const persist = debounce(() => kvSetJSON(CFG_KEY, buildConfig()), 300)
watch([chartType, agg, sortOrder, topN, dimensions, metrics, xField, yField, groupField,
horizontal, stacked, smooth, ring, radarFill, showLabel], persist, {deep: true})
+// ---- 命名预设 ----
+interface Preset { name: string; config: Record }
+const PRESETS_KEY = 'chart.presets'
+const presets = ref(kvGetJSON(PRESETS_KEY, []))
+const savingPreset = ref(false)
+const presetName = ref('')
+const confirmSavePreset = () => {
+ const name = presetName.value.trim()
+ if (!name) {
+ return
+ }
+ const list = presets.value.filter(p => p.name !== name)
+ list.push({name, config: buildConfig()})
+ presets.value = list
+ kvSetJSON(PRESETS_KEY, list)
+ savingPreset.value = false
+ presetName.value = ''
+}
+const applyPreset = (name: string) => {
+ const p = presets.value.find(x => x.name === name)
+ if (p) {
+ applyConfig(p.config)
+ }
+}
+const deletePreset = (name: string) => {
+ presets.value = presets.value.filter(p => p.name !== name)
+ kvSetJSON(PRESETS_KEY, presets.value)
+}
+
const {isDark} = useTheme()
const toast = useToast()
const chartHost = ref()
@@ -441,6 +539,72 @@ const runExport = (fn: () => void) => {
const fields = computed(() => props.columns.map((name, i) => ({name, numeric: isNumericColumn(props.rows, i)})))
+// ---- AI 配图：自然语言 → 图表配置 ----
+const {active: aiActive} = useAiConfig()
+const aiOpen = ref(false)
+const aiPrompt = ref('')
+const aiLoading = ref(false)
+const aiError = ref('')
+const toggleAi = () => {
+ aiOpen.value = !aiOpen.value
+ aiError.value = ''
+}
+const aiGenerate = async () => {
+ if (aiLoading.value || !aiPrompt.value.trim()) {
+ return
+ }
+ if (!aiActive.value.apiKey?.trim()) {
+ aiError.value = '未配置 AI API Key（设置 → AI）'
+ return
+ }
+ aiLoading.value = true
+ aiError.value = ''
+ try {
+ const cols = fields.value.map(f => `${f.name}:${f.numeric ? 'number' : 'text'}`).join(', ')
+ const types = Object.keys(CHART_META).join(', ')
+ const system = '你是数据可视化助手。根据可用列与用户需求，输出图表配置 JSON。\n'
+ + `可用列(name:type): ${cols}\n`
+ + `支持的图表类型(value): ${types}\n`
+ + '严格输出 JSON：{"chartType":"...","dimensions":["列名"],"metrics":["列名"],"agg":"sum|count|avg|max|min"}。'
+ + '只输出 JSON，不要解释或 Markdown。维度/指标必须使用上面的列名。'
+ const text = await invoke('ai_chat', {
+ provider: aiActive.value.provider,
+ baseUrl: aiActive.value.baseUrl,
+ apiKey: aiActive.value.apiKey,
+ model: aiActive.value.model,
+ system,
+ messages: [{role: 'user', content: aiPrompt.value.trim()}]
+ })
+ const cleaned = text.trim().replace(/^```(?:json)?\s*/i, '').replace(/```$/i, '').trim()
+ const cfg = JSON.parse(cleaned)
+ if (cfg.chartType && CHART_META[cfg.chartType]) {
+ chartType.value = cfg.chartType
+ }
+ const dims = Array.isArray(cfg.dimensions) ? cfg.dimensions.filter((d: string) => props.columns.includes(d)) : []
+ const mets = Array.isArray(cfg.metrics) ? cfg.metrics.filter((m: string) => props.columns.includes(m)) : []
+ if (cfg.agg && (cfg.agg in AGG_LABELS)) {
+ agg.value = cfg.agg
+ }
+ if (meta.value.layout === 'scatter') {
+ xField.value = mets[0] || dims[0] || ''
+ yField.value = mets[1] || ''
+ groupField.value = dims[0] || ''
+ }
+ else {
+ dimensions.value = dims
+ metrics.value = mets
+ }
+ aiOpen.value = false
+ aiPrompt.value = ''
+ }
+ catch (e: any) {
+ aiError.value = 'AI 返回无法解析或出错：' + String(e?.message || e)
+ }
+ finally {
+ aiLoading.value = false
+ }
+}
+
// 列变化（新查询）时，剔除已不存在的字段
watch(() => props.columns, (cols) => {
dimensions.value = dimensions.value.filter(d => cols.includes(d))
diff --git a/src/components/setting/Lsp.vue b/src/components/setting/Lsp.vue
new file mode 100644
index 0000000..1fcf7ee
--- /dev/null
+++ b/src/components/setting/Lsp.vue
@@ -0,0 +1,98 @@
+
+
+
+
+
语言服务（LSP）
+
安装后可获得精准补全、悬浮文档、跳转定义、查找引用、重命名与实时诊断
+
+
+
+
+
+
+
+
+
+
{{ s.label }}
+
{{ s.install }}
+
+
已安装
+
+
+
+
{{ logs[s.id] }}
+
+
+
+
+ 自动安装依赖本机已具备对应工具链：npm（pyright / typescript / intelephense / vscode-langservers-extracted）、rustup（rust-analyzer）、go（gopls）、Homebrew（clangd / lua-language-server）、gem（solargraph）。
+ 若安装失败，可按上方命令手动安装后点「重新检测」。安装完成后请重启应用以加载新服务器。
+
+
${escapeHtml(d.message)}
`)
+ }
+ })
+
+ // 2) LSP textDocument/hover
+ try {
+ const plugin: any = this.view.plugin(languageServerPlugin as any)
+ if (plugin?.requestHoverTooltip) {
+ const spec = await plugin.requestHoverTooltip(this.view, offsetToPos(this.view.state.doc, pos))
+ if (myReq !== this.reqId) {
+ return // 过期
+ }
+ if (spec && typeof spec.create === 'function') {
+ const built = spec.create(this.view)
+ const dom: HTMLElement | undefined = built?.dom
+ if (dom && dom.textContent && dom.textContent.trim()) {
+ parts.push(`${dom.innerHTML}
`)
+ }
+ }
+ }
+ }
+ catch {
+ // 忽略
+ }
+
+ if (myReq !== this.reqId) {
+ return
+ }
+ if (parts.length === 0) {
+ this.hide()
+ return
+ }
+
+ this.applyTheme()
+ this.box.innerHTML = parts.join('')
+ this.box.style.display = 'block'
+ // 定位到鼠标下方，越界则翻转/夹紧
+ const rect = this.box.getBoundingClientRect()
+ let left = x + 2
+ let top = y + 18
+ if (left + rect.width > window.innerWidth - 8) {
+ left = window.innerWidth - rect.width - 8
+ }
+ if (top + rect.height > window.innerHeight - 8) {
+ top = y - rect.height - 12
+ }
+ this.box.style.left = Math.max(8, left) + 'px'
+ this.box.style.top = Math.max(8, top) + 'px'
+ }
+
+ hide() {
+ this.box.style.display = 'none'
+ }
+
+ destroy() {
+ if (this.timer) {
+ clearTimeout(this.timer)
+ }
+ this.view.dom.removeEventListener('mousemove', this.onMove)
+ this.view.dom.removeEventListener('mouseleave', this.onLeave)
+ this.view.scrollDOM.removeEventListener('scroll', this.onScroll, true)
+ this.box.remove()
+ }
+ })
+}
+
+function escapeHtml(s: string): string {
+ return s.replace(/&/g, '&').replace(//g, '>')
+}
+
+// 自绘 hover + 隐藏 CodeMirror 默认的 hover / 诊断 tooltip（避免重复且定位错乱）
+export const lspCustomHover = [
+ makeHoverPlugin(),
+ EditorView.theme({
+ '.cm-tooltip.cm-tooltip-hover': {display: 'none !important'},
+ '.cm-tooltip.cm-tooltip-lint': {display: 'none !important'},
+ '.cf-lsp-hover-doc pre': {whiteSpace: 'pre-wrap', margin: '4px 0'},
+ '.cf-lsp-hover-doc code': {fontFamily: 'monospace'}
+ })
+]
diff --git a/src/editor/lspStatus.ts b/src/editor/lspStatus.ts
new file mode 100644
index 0000000..c471144
--- /dev/null
+++ b/src/editor/lspStatus.ts
@@ -0,0 +1,10 @@
+import {ref} from 'vue'
+
+// 当前编辑器语言的 LSP 状态（供状态栏显示）
+// off=未启用 connecting=启动/索引中 on=就绪
+export type LspStatus = 'off' | 'connecting' | 'on'
+export const lspState = ref<{ language: string; status: LspStatus }>({language: '', status: 'off'})
+
+export const setLspState = (language: string, status: LspStatus) => {
+ lspState.value = {language, status}
+}
diff --git a/src/editor/lspTransport.ts b/src/editor/lspTransport.ts
new file mode 100644
index 0000000..491793e
--- /dev/null
+++ b/src/editor/lspTransport.ts
@@ -0,0 +1,60 @@
+// 将 codemirror-languageserver 的 Transport 桥接到 Tauri 后端 LSP 命令/事件
+import {invoke} from '@tauri-apps/api/core'
+import {listen, type UnlistenFn} from '@tauri-apps/api/event'
+import type {Transport} from 'codemirror-languageserver'
+
+export class TauriLspTransport implements Transport {
+ private language: string
+ private msgCb: ((m: string) => void) | null = null
+ private closeCb: (() => void) | null = null
+ private errorCb: ((e: Error) => void) | null = null
+ private unlisten: UnlistenFn[] = []
+ private ready: Promise
+
+ constructor(language: string) {
+ this.language = language
+ this.ready = this.init()
+ }
+
+ private async init() {
+ const un1 = await listen<{ language: string; message: string }>('lsp:message', (e) => {
+ if (e.payload.language === this.language) {
+ this.msgCb?.(e.payload.message)
+ }
+ })
+ const un2 = await listen('lsp:exit', (e) => {
+ if (e.payload === this.language) {
+ this.closeCb?.()
+ }
+ })
+ this.unlisten = [un1, un2]
+ await invoke('lsp_start', {language: this.language})
+ }
+
+ send(message: string): void {
+ // 等服务器启动后再发，保持顺序
+ this.ready
+ .then(() => invoke('lsp_send', {language: this.language, message}))
+ .catch((e) => this.errorCb?.(new Error(String(e))))
+ }
+
+ onMessage(callback: (message: string) => void): void {
+ this.msgCb = callback
+ }
+
+ onClose(callback: () => void): void {
+ this.closeCb = callback
+ }
+
+ onError(callback: (error: Error) => void): void {
+ this.errorCb = callback
+ }
+
+ close(): void {
+ for (const u of this.unlisten) {
+ u()
+ }
+ this.unlisten = []
+ // 不停止服务器进程，保持热以便同语言其它文件复用
+ }
+}
diff --git a/src/ui/Select.vue b/src/ui/Select.vue
index 6a4710d..a953ced 100644
--- a/src/ui/Select.vue
+++ b/src/ui/Select.vue
@@ -54,7 +54,7 @@
@after-leave="$emit('after-close')">
-
+
{
let width = buttonRect.width
let maxHeight = Math.min(totalDropdownHeight, spaceBelow)
- // 如果下方空间不足且上方空间更大，显示在上方
- if (spaceBelow < 150 && spaceAbove > spaceBelow) {
+ // 下方放不下且上方空间更大时，翻转到上方显示
+ if (spaceBelow < totalDropdownHeight && spaceAbove > spaceBelow) {
top = buttonRect.top - 4 // 显示在上方，留4px间距
maxHeight = Math.min(totalDropdownHeight, spaceAbove)
@@ -112,12 +114,13 @@
+ 
