前端组件开发规范 一、制定本规范的目的 经过多年迭代，公司各业务系统已经变得极难维护。支撑业务系统的各大大小小的组件也存在一些不规范的行为，使用后期维护难度越来越大。 希望通过本规范的制定，指导大家在开发与维护组件时，编写出可读性、可扩展性、可维护性俱佳的组件。 二、组件的范围 规范中的组件是指所有由公司拥有版权且由公司使用与维护的功能相对独立的前端代码块。包括但不限于： 1. PC端： 自有基础组件库zfs-ui vue2版本、zfs-ui vue3版本; 通过源码形式引入的第三方组件库，如：elment-ui; 自有业务组件库zfs-business； 承担某一通用功能的独立代码块或工具函数：i18n，axios等； 用于单据开发的bill-template、bill-area、bill-row、bill-field等。 2. 移动端 自有基础组件库zfs-mobile vue2版本、zfs-mobile vue3版本； 承担某一通用功能的独立代码块：lazyList.vue、loading.vue...

前言: 由于业务越来越复杂，为了方便用户配置好整套算子流，缩短用户的配置时间，优化用户体验，算子流画布支持复制粘贴功能，同时为了避免误操作影响算子流的配置，画布也需要同步支持撤销功能 画布复制 实现基础：画布的复制功能基于 @antv/x6-plugin-clipboard 库实现 创建一个画布，配置好基本信息

3.9版本为 vue2 升级 vue3 版本。顺势对于zfs-ui部分组件进行了重构。首当其冲的为使用最多的 table 、 form 、 item 组件。本文也仅对这三个组件另加 table-picker 组件做说明 1、zte-table组件 table 组件是我们工程中使用最多的组件没有之一。经过日积月累。不同开发人员的辛苦贡献这个单文件代码行数已经高达 3678 行。里面的代码也杂乱无章，已经快突破人类所能忍受的极限。不乘此机会重构实在说不过去。重构之后结构如下： 主要变动点： 一、 table 组件不再采用 el-bigdata-table 直接使用 el-table 。 二、查询组件封装为 header-searh 组件 三、列上的查询封装为 col...

引言 本规范结合财务共享产品业务需求开发经验，及产品历史问题规避方案，出具的企业内部专用规范，该规范仅面向中兴新云IT产品开发，如与通用规范存在冲突的，请以企业内部规范为准。 该规范分为编码规范、设计规范、错误处理规范、安全规范、性能规范、维护性规范六个维度维度，各研发负责人在产品开发前需要对相关规范进行宣贯，加强开发人员的规范意识。 快速入口： UI规范：http://tmpbbs.ztc.ztccloud.com.cn:6875/wiki/1129382/1126261 前端组件规范：http://tmpbbs.ztc.ztccloud.com.cn:6875/wiki/1129382/1411238 一、编码规范 1、引用规范 （1）【强制】在主工程中开发，对于公共组件、工具库、混入的引用，一律使用@zfs/common/src （2）【强制】在主工程中开发，对于微服务独立组件、工具库、混入的引用，使用@zfsweb/fssc-web/src/[微服务名] （3）【强制】在@zfs/boe工程中开发，使用@zfs/b...

需求背景😕 由于技术债需求做JS瘦身，将我们的@zfs/ui组件库里的业务组件单独抽取出来，减少JS打包后的体积，搞一个业务组件库出来！ 抽取的业务组件 1. cms 下所有组件（合同认领的批量认领和流水认领弹窗） 2. invoice 组件 invoice-add-edit组件 invoice-preview组件 invoice-preview 组件（主要是发票池ipool和报销boe的发票...

当数据列表需要支持高级查询时，就需要用到组合查询组件。 组合查询组件由组合查询入口和个人视图两部分组成。 组合查询 点击组合查询，即可进入组合查询弹窗，弹窗中支持新增多行查询条件，每行条件之间可自定义逻辑关系为且/或；每行条件都包含查询字段、运算符、比较值类型、比较值四种元素，四种元素组合得到查询逻辑，故四种元素均为必填： 查询字段：可选当前数据列表所有支持查询的字段（跟字段是否展示无关，如果列表引擎中设置该字...

目的 目前在对zfs-ui公共组件开发时，需要手动更改引入，极为不便。针对该情况通过yalc对zfs-ui进行npm模拟发布，使用项目进行全局引用的方式便捷开发公共组件。提供如下方案： 插件介绍 yalc 官方地址 [https://www.npmjs.com/package/yalc](https://file+.vscode-resource.vscode-cdn.net/e:/workspace-wbq/myprojects/myProject) 1、yalc是什么？ 对 包开发者 而言，一种比yarn/npm link 更好的开发流程 。 可以模拟 npm 发布，发布至本地缓存库，下载时也是完全模拟 npm install 的过程，不会存在相关依赖库丢失问题，只是模拟发布和下载不会进行真正的推包动作 [原理](https://www.bilibili.com/read/cv17617145 "推荐该文章") 2、安装yalc npm i yalc -g yarn global add yalc 如果有