DaLuoComponents

Appearance

公式编辑器 ​

@axewo/fin-formula-editor 是从 @axewo/fin-ui 独立出的 Vue 3 可视化公式编辑器。它保留版本化公式文档、抽象语法树编辑、资源加载与回显、本地和服务端校验、历史记录、拖拽、缩放和平移能力，同时不依赖任何外部界面组件库。

安装 ​

bash
pnpm add @axewo/fin-formula-editor @axewo/fin-locale vue vue-i18n

运行环境要求：

  • Vue 3.4 或更高版本；
  • vue-i18n 9.14；
  • 不需要安装 element-plus 或其他界面组件库。

应用接入 ​

应用入口只需安装国际化实例并引入一次编辑器样式：

ts
import { createApp } from 'vue'
import { createFinI18n } from '@axewo/fin-locale'
import '@axewo/fin-formula-editor/style.css'
import App from './App.vue'

createApp(App)
  .use(createFinI18n())
  .mount('#app')

组件内直接从独立包导入组件、文档工厂和公共类型：

vue
<script setup lang="ts">
import { ref } from 'vue'
import {
  FinFormulaEditor,
  createMathFormulaDocument,
  type MathFormulaDocument,
} from '@axewo/fin-formula-editor'

const document = ref<MathFormulaDocument>(
  createMathFormulaDocument({
    ruleVersion: 'finance-rule-v1',
    expectedType: 'number',
  }),
)
</script>

<template>
  <FinFormulaEditor v-model="document" />
</template>

包边界 ​

  • 公式编辑器组件名为 FinFormulaEditor，不再由 @axewo/fin-ui 导出或全局注册。
  • 公式协议、资源源、解析器、校验器、组合式函数和 Math* 类型统一从 @axewo/fin-formula-editor 导入。
  • 样式入口为 @axewo/fin-formula-editor/style.css，主题变量统一使用 --ffe- 前缀。
  • 编辑器复用 @axewo/fin-locale 的中英文语言包，业务应用仍可通过现有国际化实例切换语言。
  • 如果要把编辑器用于 FForm，应由业务方显式调用 registerFormField() 注册，独立包不会反向依赖 @axewo/fin-ui。

后续阅读 ​

继续阅读完整编辑器文档与示例，了解资源源配置、历史回显、本地与服务端校验、草稿提交、属性、事件和公开方法。