# mathlive-demo

**Repository Path**: code-your-quest/mathlive-demo

## Basic Information

- **Project Name**: mathlive-demo
- **Description**: vue3 前端使用mathlive 实现数学公式解析
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-21
- **Last Updated**: 2025-12-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue-MathLive

一个基于 `Vue 3 + Vite + TypeScript` 的数学公式编辑与计算示例项目：

- 使用 `MathLive` 提供 LaTeX 公式编辑器（`<math-field>`）与虚拟键盘
- 使用 `@cortex-js/compute-engine` 对公式进行符号化/数值化求值
- 使用 `Element Plus` 提供弹窗与表单 UI

## 效果
 [text](README.md) ![text](src/assets/images/公式编辑.webp) ![text](src/assets/images/公式解析.webp)

## 功能

- 公式编辑：在弹窗内编辑 LaTeX，并实时展示求值结果
- 单独计算：不依赖 `<math-field>`，直接用 `Compute Engine` 解析/计算 LaTeX
- 清空：一键清空当前编辑内容
- 自定义公式：支持新增/编辑/删除，并可一键“填充”到编辑器

## 快速开始

```bash
npm install
npm run dev
```

常用脚本（见 `package.json`）：

- `npm run dev`：启动开发服务器
- `npm run build`：类型检查并打包（`vue-tsc -b && vite build`）
- `npm run preview`：预览生产构建

## 项目结构

- `src/main.ts`：引入 `@cortex-js/compute-engine` 与 `mathlive` 的全局副作用初始化
- `src/App.vue`：示例页面（单独计算 + 弹窗编辑 + 自定义公式）
- `src/components/MathEditor.vue`：对 `MathLive` 的 `<math-field>` 二次封装（支持 `v-model` 与虚拟键盘挂载）
- `src/components/CmMathEditor.vue`：公式编辑面板（复用 `MathEditor`，并展示 `evaluate/N` 结果）
- `src/components/EditDialog.vue`：`el-dialog` 的二次封装（仅负责透传属性与插槽）
- `src/utils/computeEngine.ts`：独立的 `Compute Engine` 解析/计算工具函数
- `vite.config.ts`：将 `math-field` 声明为自定义元素（避免 Vue 模板编译警告）

## 计算是怎么做的

项目里有两条计算路径：

### 1) 通过 MathLive 的 `expression` 计算

`CmMathEditor` 会通过 `MathEditor` 暴露的 `getElement()` 拿到真实的 `<math-field>` 元素，然后读取：

- `(mathField as any).expression.evaluate()`：符号化求值
- `(mathField as any).expression.N()`：数值化求值

对应代码参考：

- `src/components/MathEditor.vue:263`（`defineExpose({ getElement })`）
- `src/components/CmMathEditor.vue:38`（从 `<math-field>.expression` 读取并求值）

### 2) 直接使用 `Compute Engine` 解析/计算 LaTeX

工具函数位于 `src/utils/computeEngine.ts`：

- `parseLatexWithComputeEngine(latex)`：将 LaTeX 解析为表达式对象
- `computeLatexWithComputeEngine(latex)`：返回 `{ evaluatedLatex, numericLatex, errorMessage? }`

在 `src/App.vue` 的“单独计算示例”中会调用该工具函数，并额外尝试把 `N()` 的结果转换为 `number` 展示。

## 组件用法示例

### `EditDialog`（弹窗封装）

`EditDialog` 只包一层 `el-dialog`，透传所有属性，使用 `v-model` 控制显示：

```vue
<EditDialog v-model="visible" title="编辑表达式" :width="720">
  <div>内容区</div>
  <template #footer>
    <el-button @click="visible = false">取消</el-button>
    <el-button type="primary">确定</el-button>
  </template>
</EditDialog>
```

### `CmMathEditor`（编辑面板）

```vue
<CmMathEditor v-model="latex" />
```

## 依赖

- `vue`
- `vite`
- `mathlive`
- `@cortex-js/compute-engine`
- `element-plus`