@composy/contract-vue

@composy/contract-vue

@composy/contract-core 的 Vue 适配层，提供合同编辑器、要素提取、合同对比和到期预警组件与 composables。

安装

pnpm add @composy/contract-core @composy/contract-vue vue

样式依赖全局 token：

import '@composy/styles/color.css'
import '@composy/styles/size.css'
import '@composy/contract-vue/index.css'

组件

<script setup lang="ts">
import { ContractEditor } from '@composy/contract-vue'
import { ref } from 'vue'

const rawContent = ref('')
const variables = ref({
  partyA: '甲方公司',
  partyB: '乙方公司',
})

function handleChange(content: string) {
  console.info(content)
}

function handleValidate(result: { valid: boolean }) {
  console.info(result.valid)
}
</script>

<template>
  <ContractEditor
    v-model="rawContent"
    template="purchase"
    :variables="variables"
    layout="split"
    @change="handleChange"
    @validate="handleValidate"
  />
</template>

可用组件：

• ContractEditor
• ContractExtractor
• ContractDiff
• ExpiryWarning

Composables

import { useContractDiff, useContractEditor } from '@composy/contract-vue'

useContractEditor()
useContractDiff()

useContractEditor() 暴露 create、setContent、setVariable、setVariables、setTemplate、updateOptions、validate、getSnapshot、 restoreSnapshot、focus、blur 和 destroy。

ContractExtractor 支持 provider prop、error 事件以及 extract/setProvider expose；provider 可以接入 OCR、LLM 或宿主规则服务。ContractDiff 支持 diffOptions prop，ExpiryWarning 支持 referenceDate 和 timeZone="utc"，便于 SSR 与固定日期测试。

<ContractDiff
  :old-content="oldContent"
  :new-content="newContent"
  :diff-options="{ ignoreCase: true, maxMatrixCells: 500000 }"
  @change="changes = $event"
/>

样式与命名

• Vue 组件复用 core 的 ldesign-contract* class。
• 所有组件变量使用 --ldesign-contract-*。
• 颜色来自 packages/color 的 --ld-*。
• 尺寸、间距、圆角、阴影和动效来自 packages/size 的 --ld-*。
• 可从 @composy/contract-vue 直接导出 contractClassNames、CONTRACT_STYLES 和 injectContractStyles()。

构建输出

从工作区根目录运行 pnpm build 会按 Core → Vue 的顺序构建。单独构建 Vue 时请先确保 Core 已构建。Vue 构建配置位于 packages/vue/.ldesign/。

构建会生成：

• dist/：UMD、压缩 UMD、CSS 和 source map。
• es/：ESM 模块、CSS 入口和 .d.ts 声明。
• esm/：ESM 模块、Less 源文件和 .d.ts 声明。
• lib/：CJS 模块、CSS 入口和 .d.ts 声明。

验证

pnpm --dir packages/vue run type-check
pnpm --dir packages/vue run type-check:cjs
pnpm build

License

MIT