TableDesign解决 ToB端中后台项目中，大量 Table 查询列表的增删查改操作；
专注于中后台表格代码生成，好用的表格设计工具

ProTable 在 antd 的 Table 上进行了一层封装，支持了一些预设，封装可以简单的分类为

  1. 预设行为 Behavior
  2. 预设逻辑 Logic
  3. 预设动作 Action https://protable.ant.design/api#actiontype

image.png
ProTable 表格组件分层

  1. 高级筛选栏 search https://protable.ant.design/api#search
  2. 标题栏 toolbar
  3. 表格区域
    1. columns https://protable.ant.design/api#columns
    2. dataSource
    3. request
  4. 分页栏 pagination

https://juejin.cn/post/7069944538088865799

表格业务场景

后台产品里面有很多 CRUD和表单界面，重构肯定是要以最快速度解决这类所谓【通用】的页面
业务优化

  1. 后端输出规范的数据格式
  2. 前端解析 JSON配置，渲染界面
  3. 核心点：JSON渲染引擎

落地结果

  1. 能解决个70%的页面需求，维护成本大大降低；
  2. 复杂表单，表格业务当然还是要手写的
  3. 简单的用配置生成，提高代码的复用性

统一元数据，统一的底层 Schema 可以做到同时在设计端与开发端使用
高效，装配可以让开发者避免查询繁琐的 API 配置，免去大量样板代码
希望将 80% 的代码开发工作通过可视化的方式配置完成

待完善
自定义插入 ReactNode
空间-项目-文件三级管理模式

Table可视化业务点

  1. 新建
  2. 编辑
  3. 搜索
  4. 重置
  5. 删除
    1. 批量删除
  6. 导入
  7. 导出
  8. 分页
    1. 跳转到指定页面 goto
    2. 切换显示数量 pageSize
  9. 拖拽排序
    1. 按指定列排序
    2. ORDER BY将数据升序或降序排序
  10. 过滤
  11. 单选
  12. 多选
  13. 字段格式化，例如时间戳转 字符串
    1. 字段枚举
    2. 数据处理
    3. null及undefined，用 ‘-‘ 代替

离开页面，提示内容不会保存
loading加载提示
流程串联能力
模型编辑
删除，新增添加 onClick回调
生成的代码能够运行和预览
column支持配置，hideInTable，hideInSearch
在表格中的显示和隐藏配置。
在查询表单中的显示和隐藏配置
删除 umi、hooks
单独处理 valuetype
valueEnum，ValueEnum 类型下，data 需要选择而不是输入
sortableList
生成代码添加RowKey
代码 format优化，美观，好看
自定义主题
基于样式文件的自动加载
分页字段绑定

Action 操作按钮

动作 action是表达页面与页面、前端与后端、交互之间的枢纽，通常是按钮形式

  • 服务器动作：对应请求后端接口的按钮
    • 新建
    • 编辑
    • 删除
    • 批量导入，导出，删除
  • 视图动作：跳转页面或者打开弹窗的按钮
    • 查看详情
  • 客户端动作：比如前端校验表单，点击行为等
  • 组合动作：上述的任意组合，比如：保存
    • 保存前校验表单，保存后重置表单，并跳转到列表动作

表格 CRUD 低代码思考点

  • 添加了一个字段之后，原有的哪些地方需要发生变化？表格？表单？详情？请求？状态结构？
  • 如果有一种字段，它的渲染是特殊化的，如何加进去？它在表格里面是特殊化的吗？在表单里面是特殊化的吗？
  • 如果它的编辑表单是需要分组的，分组展示如何定义？
  • 拖拽
  • resize组件
  • 双工道通信（IM即时消息）
  • IO操作（node的fs系统）
  • 配置文件的生成与解析（TreeComponent）
  • 逻辑代码抽离
    • 代码提示、属性和方法提取（@babel/parser）
    • 插入代码（@babel/transform、@babel/generate）
    • 逻辑代码属性拦截（Proxy、Object.defineProperty）
    • 注解（装饰器）提取
  • 属性、方法绑定和渲染
  • 在线代码编辑器（code-mirror）
  • 双向绑定系统
  • 工作空间管理
    • 多用户管理
    • 多项目管理
  • 多页面管理
  • 智能表格
  • 智能表单

不会去开发一个大而全的一站式平台，而是针对业务场景闭环的低代码，因为：很难用一个平台，来满足所有的业务场景
对于一些没法覆盖到的业务特征，请提交功能优化
目前已经广泛应用于内部中后台系统中
适配 antd 4 & antd 5 ，采用渐进式升级方案，帮助中后台减少升级成本
内部的 UI 资产库，已经持续迭代维护了2年多
面向内部服务与支持场景的SaaS解决方案平台
一套面向企业内部稳定性，异常风险场景的应急过程管理系统
产品通过定义应急组织结构，有效管理业务风险，透视和治理潜在异常风险；同时对接各类风险来源系统收集并关联异常事件，提高应急过程中的组织效率和定位、排查、恢复的能力。降低企业故障恢复时长的业务目标。
产品的核心价值：帮助管理者有效看清并治理数据资产，为开发者带来高效的资产构建与运维体验，

可视化编程辅助工具
一键生成， 二次编辑
满足 70-80% 常见的业务需求。那对于一些没法覆盖到的业务特征，建议在生成的代码中进行二次编辑
将生成的代码复制到自己的项目中进行二次编辑，适配需求的频繁变更
将 80% 的代码开发工作通过可视化的方式配置完成

  1. 高效，上手快，可控的学习成本
  2. 元数据，统一的底层 Schema
  3. 生成的产物是 ProCode

智能表格本质上是一个编辑器，
自定义主题文件覆盖原有样式，cdn.com/index.css
回车进入到下一个表单
https://zhuanlan.zhihu.com/p/344336425
https://www.uisdc.com/seeconf-2022
https://zhuanlan.zhihu.com/p/494995642

本质上是要把代码配置化，而且不是单个表单的配置化
使用低代码技术开发的组件
低代码组件，只是组件开发的一种新工具，不会对组件开发带来冲击
低代码组件的本质是：对经验的标准沉淀，将业务技术和低代码技术结合，从而实现快速的业务交付
QueryTable封装参考
https://procomponents.ant.design/components/table

技术点

  1. 抛开技术和时间两个因素，定义**这个场景下用户的问题是什么**
  2. 以什么样的思路去解决这个问题，然后再反推我们的技术方案是什么
  5. 一个大而全的产品去做场景的拓展阻力极大
  8. 下沉好一套技术，基于这套技术体系快速的做出一个产品
  11. 背后应该制定的标准或者约束
  14. 开发自定义组件的
  17. 中后台垂直领域(表单、列表等)的开发提效
  22. 无代码，倾向于让用户通过拖拽或简单的表达式来操纵完成应用设计，内置UI库
  25. 低代码，倾向于通过人工编码来指定应用程序的**核心结构，需要额外编码**
  28. 通常有组件、区块、页面、模板等多级复用抽象
  31. low-code 大多涵盖了完整的生命周期，包括发布前的**调试、测试，发布后的监控运维**等各个环节
  34. 协议簇、引擎 SDK、精品物料资产
  37. JSON 发布到后端生成一个 ID，前端请求 ID 取到 JSON
  40. 引擎是硬的骨头，生态是肉的部分，引擎的架构决定这部分肉的形状
  45. 丰富的模板，可以快速创建
  48. https://forms.app/
  51. https://www.wbolt.com/google-forms-alternative.html
  54. https://cn.bluehost.com/blog/websites/16873.html
  57. https://formcrafts.com/templates/payment
  60. https://clearbit.com/lp/use-cases/shorten-forms
  67. Cli在基本的应用新建、调试、编译，代码lint、format、提交等功能之外，还完整打通了物料工程的研发和消费链路，集成了国际化(i18n)、监控埋点(arms)等统一解决方案，同时提供vscode插件供图形化使用。
  72. 负责前端页面的设计和搭建，
  75. 而后端服务是需要自己研发或者复用已有的接口服务的。
  78. 列表、表单为主
  81. 针对数据报表场景
  84. 数据报表
  87. Dashboard
  90. LandingPage、Portal 等运营站点
  93. https://www.zhihu.com/question/62397539
  96. API管理
  98. https://aws.amazon.com/cn/api-gateway/api-management/
  100. https://www.zhihu.com/question/30434095
  102. https://segmentfault.com/a/1190000024493729
  106. 权限管理
  108. https://github.com/jtsang4/caslin/blob/master/README-zh-cn.md
  110. https://github.com/jtsang4/caslin
  113. 简化学习，开发成本
  115. 规范通用的中台场景技术解决方案
  117. 找到优秀的代码做参考，形成最佳实践风格
  119. 形成一套解决方案，让业务开发能够专注业务逻辑，而不需要关心具体技术，提升研发效能
  121. 规范开发和调试链路
  123. 构建工具用什么
  125. 什么样的部署方式
  127. 权限应该怎么处理
  129. 网络请求错误处理
  131. 提供了在 Layout，数据流，权限，网络请求等问题上的解决方案或者最佳实践指南
  135. table
  137. 分页，轮询，SWR，缓存，预加载，防抖，节流，并行请求，加载更多
  141. 场景
  143. 1. 用户，角色，环境
  146. 数据管理
  148. valtio 基于 proxy 而 zustand 不是 https://github.com/pmndrs/valtio
  150. https://valtio.pmnd.rs/docs/introduction/getting-started
  152. 非 proxy 方案可基于 immer 实现和 proxy 方案类似的操作。
  156. 收集沉淀与**业务**紧密结合的组件资产
  158. 可视化配置模板组件，提高配置开发效率
  160. 自动导入元数据。
  162. 资产元数据市场
  164. 基于 antd组件库，不要再做一系列原子组件，从业务或上层组件着手
  166. 区块和模板，代码不要维护在多个地方
  170. 基于业务场景，定制组件，定制业务资产；中台业务资产；中后台资产研发
  172. 安装一个库搞定所有 UI 相关导入
  174. antd 所采用的包加载方式
  175. https://github.com/ant-design/babel-plugin-import
  177. babel编译时将 import 调用转换为具体某个组件的调用路径
  178. import { Button } from 'antd';
  179. ReactDOM.render(<Button>xxxx</Button>);
  180.       ↓ ↓ ↓ ↓ ↓ ↓
  181. var _button = require('antd/lib/button');
  182. require('antd/lib/button/style/css');
  183. ReactDOM.render(<_button>xxxx</_button>);
  185. {
  186.     "libraryName": "antd",
  187.     "libraryDirectory": "es", 
  188.     "style": true
  189.   }

CRUD

  • Create 增加
  • Retrieve 读取，查询
  • Update更新，修改
  • Delete 删除

针对数据库增删改查（CRUD）类的Web系统开发
将常用的功能封装成了组件，包括前端UI组件、后台业务操作等

  1. // 后端返回参考的数据结构
  2. const response = {
  3.   code: 0,
  4.   message: 'ok',
  5.   data: {
  6.     page: 1,
  7.     limit: 10,
  8.     total: 100,
  9.     data: []
  10.   }
  11. }

枚举字典
填充数据
标题，字段索引，值类型，枚举值
前端

  1. 数据源，支持导入 Excel 、语雀表格的数据
  2. 列字段配置
  3. 分页字段配置
  4. 复制，二次编辑

函数定义无法字符串化
Mock，表格数据的智能填充假数据；
支持文本、编号、数据、时间、地址等若干类型的智能数据
未覆盖到的数据类型希望补充，也欢迎来找我们提需求
调整列宽度、增加列行数这样的功能
直接在画布上调整列配置项，或者拖动调整宽度
插入任意自定义的 ReactNode
表头、筛选器、翻页器
API，解析 OneAPI 的结构数据，从中解析出表格的字段，分页等信息并自动绑定
只有研发才能接触到最终的产品源代码
可视化编辑，需要编码
对项目有足够的的掌控力，但希望有一定的可视化辅助来提效
在分布式产研模式的理念下，需要一个信息连接器，来沟通多方角色，让大家可以直接沟通产品源码。
忒修斯之船
设计系统的约束力，同时又有包容力
原子组件
面板模板
容器组件
nemo-panel

将字符串转化为代码

https://blog.csdn.net/SmallGirlYang/article/details/120721539

delete 删除操作

列表显示的时候是需要过滤掉这个字段中已删除的状态的

  • 硬删除，就是永久删除。使用 DELETE语句，彻底将相应记录从数据库表中删除
  • 软删除，删除时保留数据库表中相应记录，只是用UPDATE语句更新表中某个状态字段，标识为已删除