@sciexpr/vue

Vue 3 科学表达式组件库：FormulaEditor（LaTeX / 化学式编辑器）、MarkdownEditor（科学 Markdown 编辑器）、工具栏、符号面板、元素周期表等。

安装

npm install @sciexpr/vue katex

vue、ant-design-vue、markdown-it 为 peerDependencies，由使用方控制版本。

MarkdownEditor 智能补全（VS Code 风格）

MarkdownEditor 内置上下文感知的科学补全，默认开启、完全离线。候选数据来自本地静态数据：

• @sciexpr/math — 数学符号（希腊字母、运算符、关系符、箭头等）
• @sciexpr/chemistry — 118 元素周期表（含原子量 / 电子排布 / 常见氧化态）
• @sciexpr/presets — 常见化合物、离子、经典反应、科学模板
• @sciexpr/physics — 物理常量

补全不调用任何 AI 接口；文档级引用（标题锚点、\label 标签）由编辑器实时提取。

触发方式

| 场景 | 输入 | 候选内容 | |------|------|----------| | Markdown 块 | 行首 / | 标题、列表、引用、链接、代码块、行内 / 块级公式、化学公式 | | LaTeX 命令 | 公式（$...$ / $$...$$）内输入 \ | \frac、\sqrt、\int、\alpha 等（带 snippet 占位符） | | 化学 | \ce{} 内输入 | 118 元素、常见化合物、常见离子、经典反应、反应箭头与状态 | | LaTeX 环境 | \begin{ | pmatrix / bmatrix / cases / aligned | | 文档引用 | \ref{、\label{、](#| 当前文档标题锚点与公式标签 | | 显式唤起 |Alt+/` | 当前上下文全量候选（按分组展示，可滚动） |

键盘操作：

• ↑ / ↓ / PageUp / PageDown 选择候选，Enter 接受，Esc 关闭
• 接受 snippet 后 Tab / Shift+Tab 在占位符间跳转，Esc 退出片段
• fenced code block 内自动禁用科学补全
• Ctrl+Space 不再被编辑器占用（留给操作系统 / 输入法切换）

配置

<template>
  <MarkdownEditor
    v-model="content"
    :autocomplete="{ math: true, chemistry: true, physics: true, templates: true }"
  />
</template>

export interface MarkdownAutocompleteConfig {
  enabled?: boolean;          // 是否启用，默认 true
  activateOnTyping?: boolean; // 输入时自动触发，默认 true
  minTriggerLength?: number;  // 最小触发长度，默认 1
  maxItems?: number;          // 候选数量上限，默认 500
  markdown?: boolean;         // Markdown 块补全，默认 true
  math?: boolean;             // LaTeX 命令 / 符号补全，默认 true
  chemistry?: boolean;        // \ce{} 化学补全，默认 true
  physics?: boolean;          // 物理常量补全，默认 true
  templates?: boolean;        // 科学模板补全，默认 true
  documentReferences?: boolean; // 文档引用补全，默认 true
  extraItems?: ScientificCompletionItem[];       // 追加自定义候选项
  providers?: ScientificCompletionProvider[];    // 追加补全源（预留 AI 等扩展点）
}

示例

<script setup lang="ts">
import { ref } from 'vue';
import { MarkdownEditor } from '@sciexpr/vue';

const content = ref('');
</script>

<template>
  <MarkdownEditor v-model="content" header-title="科学笔记本" />
</template>

组件

| 组件 | 说明 | |------|------| | MarkdownEditor | 科学 Markdown 编辑器（CM6 源码 + markdown-it 预览 + 智能补全 + 滚动同步） | | FormulaEditor | LaTeX / 化学式编辑器（工具栏 + 实时预览 + 自动补全） | | FormulaToolbar | 公式工具栏 | | SymbolPanel | 符号面板 | | ElementTable | 元素周期表 | | LivePreview | KaTeX 实时预览 | | AutocompleteDropdown | 补全下拉（FormulaEditor 用） | | AIAssistant | AI 助手浮层（需 aiConfig） | | MarkdownToolbar / EditorSidebar / CategoryPalette | MarkdownEditor 内部子组件 |

目录结构约定

src/components 下的组件统一按「文件夹 + 同名文件」组织：

src/components/
├── MarkdownEditor/
│   └── MarkdownEditor.vue
├── CmMarkdownSource/
│   └── CmMarkdownSource.vue
└── ...

智能补全实现位于 src/completion/（context.ts 上下文识别、catalog.ts 候选数据、source.ts CodeMirror 补全源）。

本地开发

# 交互式 playground（含智能补全演示）
pnpm --filter @sciexpr/vue playground
# 或仓库根目录
pnpm vue:playground