文档可视化+表单引擎,让数据交互更流畅!

hello,大家好,我是徐小夕。之前和大家分享了很多可视化零代码前端工程化的最佳实践,今天继续分享一下最近开发的文档引擎 Nocode/WEP 的最新更新。

278676258c033dc1bed83c848adb2977.png
往期精彩

先和大家同步一下更新内容:

1. AI内容生成格式化优化

2.文档内嵌表单组引擎, 可以配置自定义表单

3. 新增表单数据查看页面

接下来我会和大家一一介绍更新的功能点。

  • 演示地址: http://wep.turntip.cn

  • 文档案例: http://wep.turntip.cn/design/doc?id=d1713369951622&uid=wep_251711700015023

AI内容生成格式化优化

a8065233c46fb5c48944a1c40735ea1b.png

之前有用户在留言区评论说AI生成的内容保存后格式没了,我最近修复了一下,目前可以完美保留AI生成的内容格式,帮助大家快速创作内容:

27eb0d929d0aa4231acadd997a9809fa.png

上面是让AI帮助我们生成一个前端学习大纲的需求,大家可以看到生成的效果,如果觉得不满意,还可以重新生成:

34a55a526782e97e4332b90b17df60b8.png

我们保存之后, 目前可以和文档完美融合,并且保留了AI的格式:

90979a700721fd42ad149a87bf8ddc58.png

文档内嵌表单组引擎, 可以配置自定义表单

这个功能也是之前网友提的一个比较实用的建议, 最近也花了点实现,实现了一个表单引擎,方便用户可以在文档里轻松制作表单,并进行数据收集:

f2458e42ca042b5ddf4f125198a5c613.png

上图我们可以看到,我们可以在文档中轻松制作表单,而且一个文档可以制作多个表单,非常有价值。

目前表单引擎我使用的是原生js实现,由于dom操作,难免性能上会超过传统框架诸如reactvue等,所以大家可以参考学习一下,后面我也会做一些技术分享。

整个引擎代码大概不到400行:

fd8607323e2aa630bea6248c1d76ebb9.png

我们来看看表单制作好之后保存的效果:

c48f56bb163e095a33d581f63708b621.png

新增表单数据查看页面

文档和表单都有了, 我们当然要能查看数据啦,文档的创作者可以在文档表单右上角直接点击查看数据,来观察表单的收集情况。

f00a40f559f2246b1af7be27ca8404c3.png

我们来看看表单数据页面:

7c330a26b8068f2779dd756d50fe946e.png

这样整个链路就打通了,这样我们的文档就越来越有价值了,当然还有很多需要优化迭代的方向,如果你有好的建议,也欢迎随时在评论区反馈交流~

  • 演示地址: http://wep.turntip.cn

  • 文档案例: http://wep.turntip.cn/design/doc?id=d1713369951622&uid=wep_251711700015023

583bb16ab7e28b25275e92e0a201fb73.png

更多推荐

相关推荐

  1. 数据设计:数据故事有说服力

    2024-05-14 11:58:04       53 阅读
  2. 数据数据“活”起来

    2024-05-14 11:58:04       53 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-14 11:58:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-14 11:58:04       100 阅读
  3. 在Django里面运行非项目文件

    2024-05-14 11:58:04       82 阅读
  4. Python语言-面向对象

    2024-05-14 11:58:04       91 阅读

热门阅读

  1. Android 开机过程画面

    2024-05-14 11:58:04       32 阅读
  2. iOS学习- iOS获取指定月的天数

    2024-05-14 11:58:04       23 阅读
  3. vue3基于elementplus 简单实现表格二次封装

    2024-05-14 11:58:04       30 阅读
  4. 【Vue】vue中动态样式绑定

    2024-05-14 11:58:04       30 阅读
  5. 《创意代码:Processing艺术编程之旅》系列目录

    2024-05-14 11:58:04       32 阅读
  6. ArrayList与LinkedList的区别

    2024-05-14 11:58:04       34 阅读
  7. 【Golang】Golang 的 HTTP 使用 Header 指南

    2024-05-14 11:58:04       27 阅读
  8. 工作随机:linux 挂载LVM管理模式的磁盘

    2024-05-14 11:58:04       33 阅读
  9. Linux sigaddset

    2024-05-14 11:58:04       36 阅读
  10. linux开机启动配置文件

    2024-05-14 11:58:04       33 阅读
  11. QML进阶(十七) ECMAScript 语法介绍

    2024-05-14 11:58:04       30 阅读
  12. P2678 [NOIP2015 提高组] 跳石头

    2024-05-14 11:58:04       36 阅读
  13. Cocos Creator 3.x 实现触摸拖动物体(record)

    2024-05-14 11:58:04       38 阅读