@sciexpr/vue

Vue 3 公式编辑组件库。

安装

bash

npm install @sciexpr/vue

组件

组件	功能
`Formula`	纯公式渲染
`FormulaEditor`	完整编辑器（Toolbar + Preview + Autocomplete）
`Toolbar`	6 分类快捷按钮
`SymbolPanel`	分类符号面板 (6 Tab + 搜索)
`ElementTable`	交互式元素周期表
`LivePreview`	实时预览
`AutocompleteDropdown`	自动补全下拉
`MarkdownEditor`	科学 Markdown 编辑器（CM6 + 分栏预览 + 上下文智能补全）
`MarkdownToolbar`	Markdown 格式 + 公式插入工具栏
`EditorSidebar`	两级导航侧边栏（数学/物理/化学）
`CategoryPalette`	分类符号快速插入面板（侧边栏联动）

示例

vue

<script setup>
import { Formula, FormulaEditor, Toolbar } from '@sciexpr/vue'
import { ref } from 'vue'

const formula = ref('')
</script>

<template>
  <Formula source="\frac{1}{2}" />
  <Formula source="E=mc^2" display-mode />

  <FormulaEditor v-model="formula" show-toolbar show-preview />
</template>

MarkdownEditor 智能补全（VS Code 风格）

MarkdownEditor 内置上下文感知的科学补全，默认开启、完全离线（不调用任何 AI 接口）。候选数据来自本地静态库：

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

触发方式

场景	输入	候选内容
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 在占位符间跳转。fenced code block 内自动禁用科学补全；Ctrl+Space 已释放给系统输入法。

配置

vue

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

配置项	类型	默认值	说明
`enabled`	`boolean`	`true`	是否启用补全
`activateOnTyping`	`boolean`	`true`	输入时自动触发
`minTriggerLength`	`number`	`1`	最小触发长度
`maxItems`	`number`	`500`	候选数量上限
`markdown` / `math` / `chemistry` / `physics` / `templates` / `documentReferences`	`boolean`	`true`	按域开关
`extraItems`	`ScientificCompletionItem[]`	—	追加自定义候选项
`providers`	`ScientificCompletionProvider[]`	—	追加补全源（预留 AI 等扩展点）

智能补全实现位于 packages/vue/src/completion/（context.ts 上下文识别、catalog.ts 候选数据、source.ts CodeMirror 补全源），并通过 @sciexpr/vue 导出 createScientificCompletionSource / createCompletionSources / resolveScientificContext 供高级定制。

MarkdownEditor 事件

MarkdownEditor 除 update:modelValue / change / error 外，复制、清空、导出操作均有回调，方便在使用方弹出提示：

vue

<template>
  <MarkdownEditor
    v-model="content"
    :export-formats="['markdown', 'latex', 'html', 'pdf', 'word']"
    export-file-name="我的笔记"
    @copied="(ok) => ok ? message.success('已复制到剪贴板') : message.error('复制失败')"
    @cleared="(ok) => ok ? message.success('已清空') : message.warning('清空失败')"
    @exported="(format, content) => message.success(`已导出 ${format}（${content.length} 字符）`)"
  />
</template>

Event	Payload	说明
`update:modelValue`	`value: string`	内容变化时触发
`change`	`value: string`	内容提交/导出时触发
`error`	`error: Error`	渲染/AI 错误时触发
`copied`	`success: boolean`	点击"复制"后回调，`true` 成功 / `false` 失败
`cleared`	`success: boolean`	点击"清空"后回调，`true` 成功 / `false` 失败
`exported`	`format: string, content: string`	导出成功后回调，携带格式与文件内容

Prop	类型	默认值	说明
`exportFormats`	`('markdown' \| 'latex' \| 'html' \| 'pdf' \| 'word')[]`	`['html']`	导出下拉菜单可用格式
`exportFileName`	`string`	`'scientific-notebook'`	导出文件名（不含扩展名）

导出为真实下载：点击"导出"会生成对应文件并触发浏览器下载——
markdown → .md 源文件
latex → .tex 文件（含 ctex/amsmath/mhchem 宏包骨架）
html → .html 完整网页（Markdown 渲染为 HTML，含 KaTeX 公式与样式）
word → .doc 文件（HTML 容器格式，含 Word 兼容命名空间，Word/WPS 可直接打开，KaTeX 公式以 MathML 呈现）
pdf → 打开浏览器打印对话框，选择"另存为 PDF"（iframe 渲染完整保留 KaTeX 公式与排版，无需额外依赖）
复制内部优先使用 Clipboard API（HTTPS / localhost），失败时自动回退 document.execCommand('copy')。

CategoryPalette 分类符号面板

位于 Markdown 编辑器顶部，根据侧边栏主分类（数学/物理/化学）自动切换子分类常用符号。

vue

<script setup>
import { CategoryPalette } from '@sciexpr/vue'
import { ref } from 'vue'

const activeCategory = ref<'math' | 'physics' | 'chemistry'>('math')
</script>

<template>
  <CategoryPalette
    :active-category="activeCategory"
    @insert="(latex) => editor.insertAtCursor(latex)"
  />
</template>

Props

Prop	类型	默认值	说明
`activeCategory`	`'math' \| 'physics' \| 'chemistry'`	`'math'`	当前选中的主分类
`categories`	`MasterCategoryPalette[]`	`MASTER_PALETTE_DATA`	外部覆盖的 palette 数据
`maxVisibleSymbols`	`number`	`10`	每个子分类最多显示的符号数（常用优先）

注意：子分类数据可声明 showAllSymbols: true 来展示该子分类的全部符号，忽略 maxVisibleSymbols 截断。例如"化学元素"子分类包含完整的 118 元素周期表，即通过该字段全部展示。当传入自定义 categories 时，需在子分类数据中自行设置 showAllSymbols。

Events

Event	Payload	说明
`insert`	`latex: string`	点击符号按钮时触发

数据导出

typescript

import {
  MASTER_PALETTE_DATA,
  ALL_PALETTE_SUB_CATEGORIES,
  getPaletteSymbols,
  getCommonSymbols,
  searchPaletteSymbols,
} from '@sciexpr/vue'

// 数学主分类的所有子分类
const mathPalette = MASTER_PALETTE_DATA.find(c => c.id === 'math')

// 获取特定子分类的符号
const symbols = getPaletteSymbols('math', 'operations')

// 获取常用符号（isCommon === true）
const common = getCommonSymbols('math', 'greek')

// 搜索
searchPaletteSymbols('alpha')  // 跨所有分类搜索

Composables

Composable	功能
`useFormulaRender`	多格式渲染
`useFormulaEditor`	编辑器状态管理
`useAutocomplete`	AI + 本地补全
`useAIProvider`	AI Provider 注入
`useShortcuts`	快捷键管理
`useMarkdownRender`	markdown-it + formulaPlugin 渲染
`useMarkdownEditor`	CM6 EditorView Vue 封装
`useScrollSync`	源码 ↔ 预览滚动联动

@sciexpr/vue ​

安装 ​

组件 ​

示例 ​

MarkdownEditor 智能补全（VS Code 风格） ​

触发方式 ​

配置 ​

MarkdownEditor 事件 ​

CategoryPalette 分类符号面板 ​

Props ​

Events ​

数据导出 ​

Composables ​