# fdd-contract

**Repository Path**: bhuh12/fdd-contract

## Basic Information

- **Project Name**: fdd-contract
- **Description**: 法大大合同控件组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-08
- **Last Updated**: 2025-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 法大大合同控件 fdd-contract

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

<!-- Toc 使用 vscode Markdown All in One 插件生成 -->

- [法大大合同控件 fdd-contract](#法大大合同控件-fdd-contract)
  - [项目概览](#项目概览)
    - [链接](#链接)
    - [贡献者](#贡献者)
    - [技术栈](#技术栈)
  - [功能列表](#功能列表)
  - [核心 UI 组件](#核心-ui-组件)
  - [NPM 任务](#npm-任务)
  - [发布](#发布)
  - [开发规范](#开发规范)

## 项目概览

### 链接

👉 <a href="https://fdd-contract.4everland.app/" target="_blank">文档</a>

👉 <a href="https://fdd-contract.4everland.app/demo/" target="_blank">Demo</a>

👉 [Git 仓库](https://gitee.com/bhuh12/fdd-contract)

👉 [NPM](http://npm.fabigbig.com/-/web/detail/fdd-contract)

👉 [技术方案](https://bhuh-dev.notion.site/FddContract-515f12836feb48c4939fdb364937296f?pvs=4)

👉 [更新日志](docs/guide/changelog.md)

### 贡献者

👉 [贡献者 - Gitlab](https://gitee.com/bhuh12/fdd-contract/-/graphs/main)

### 技术栈

| 项目           | 说明                                                     |
| -------------- | -------------------------------------------------------- |
| 开发语言       | Vue 2.x, Typescript, Scss                                |
| 构建工具       | Vite 4.x                                                 |
| 代码检查和风格 | Eslint, Stylelint, Prettier<br>规则类别：vue/recommended |
| 技术栈         | Vue, @vue/composition-api                                |
| 依赖           | 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** 图片裁剪

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

## NPM 任务

| 任务               | 命令              |
| ------------------ | ----------------- |
| 本地启动 Demo      | `yarn dev`        |
| 构建库             | `yarn build`      |
| 构建 Demo          | `yarn build:demo` |
| 生成更新日志       | `yarn changelog`  |
| 代码风格检查并修复 | `yarn lint`       |

## 发布

```bash
# 1. 构建库
yarn build

# 2. 修改 package.json 版本号

# 3. 切换到公司内部源并登录，已登录过可跳过
nrm use fdd

npm login

# 4. 执行命令发布
npm publish
```

## 开发规范

[法大大前端开发规范](http://front.fabigbig.com/#/standard/)

1. 组件命名规范 `FaComponentName`

2. 组件 class-name 规范 `fa-component-name`