FddContract

介绍

FddContract 是电子签行业的前端核心组件库，提供了合同文档查看、控件设置、控件填写、控件签署等能力，有力的支撑了签署业务最核心的流程

地址

👉 Git 仓库open in new window

👉 NPMopen in new window

👉 技术方案open in new window

👉 Demo

👉 更新日志

贡献者

👉 贡献者 - Gitlabopen in new window

技术栈

项目说明
开发语言Vue 2.7, Typescript, Scss
构建工具Vite 4.x
代码检查和风格Eslint, Stylelint, Prettier
规则类别：vue/recommended
技术栈Vue 2.7
依赖element-ui, vue-lazyload

功能列表

  1. 支持合同缩放展示
  2. 支持异形合同
  3. 通过虚拟滚动支持 2w+ 超多页面的合同预览
  4. 支持的签署控件：签名，印章，签署日期，签署备注
  5. 支持的填写控件：单行文本，多行文本，勾选框，图片，附件，数字，身份证号，填写日期，单选框，复选框，下拉选择，表格
  6. 支持骑缝章的设置和加盖
  7. 支持批量控件，可以批量应用签署控件到指定文档和页面
  8. 图片控件支持裁剪后上传
  9. 控件支持跨页拖拽移动
  10. 支持点击和框选方式多选控件
  11. 支持快捷键批量操作控件：移动、删除、复制、剪切等

核心 UI 组件

  1. FaLayout 布局

    提供了顶栏、左中右栏、底栏可配置的经典圣杯布局

  2. FaDragResize 拖拽大小

    提供拖拽移动位置和调整大小的能力，支持以下功能：

    1. 限定移动范围为父元素，或指定选择器的 parent 节点
    2. 拖拽坐标轴，可指定 x、y 坐标移动
    3. 配置调整大小时显示的句柄
    4. 配置元素拖拽大小的最大最小宽高
    5. 限定调整大小范围为父元素
    6. 按宽高比调整大小
    7. 以中心点位置调整大小
    8. 支持缩放展示的节点拖拽位置和调整大小

  3. FaDragSort 拖拽排序

    提供拖拽调整列表顺序的功能

  4. FaImageCropper 图片裁剪

    将图片文件或地址裁剪成指定的尺寸和格式

已知问题

  • [ ] 在当前页码非常大时，鼠标操作难以选中页面元素
  • [ ] 打包后部分文件的 ts 类型文件未生存，原因是 reactive 推导类型容易过深，不能依赖类型自动推导

后续计划

  • [x] 构建工具和文档工具升级最新的版本，提供更健全的类型建议
  • [x] 批量印章支持，以适应标书等需要每页盖章的场景
  • [ ] 不同的控件基于 Widget 子类实现（不确定是否有必要）
  • [ ] 多语言支持，便于后续中英文切换国际化需求
  • [ ] 控件操作步骤记录，支持撤销和重做

浏览器限制

开发虚拟滚动遇到的浏览器限制

  1. 浏览器的滚动高度有限制，超过指定范围不会显示
  2. Chrome 浏览器有节点数限制，超过大概一百五十万节点浏览器即使操作不卡顿也会直接崩溃
  3. Chrome 浏览器 svg 图片也会占用节点数，即使用 img.src 或者 background-image 都会