- 博客(17)
- 收藏
- 关注
RSS订阅
原创 前、后端通用的可视化逻辑编排
逻辑编排编辑器生成一份JSON，解析引擎解析这份JSON，把图形化的业务逻辑转化成可执行的逻辑，并执行。编辑器跟解析引擎之间要有份约束协议，用来约定JSON的定义，这个协议就是这里定义的DSL。在typescript中，用interface、enum等元素来表示。这些DSL仅仅是用来描述页面上的图形元素，通过activityName属性跟具体的实现代码逻辑关联起来。比如一个循环节点，它的actvityName是Loop，解析引擎会根据Loop这个名字找到该节点对应的实现类，并实例化为一个可执行对象。
2023-07-21 08:31:04
742
原创 实践，制作一个高扩展、可视化低代码前端，详实、完整
RxEditor是一款开源企业级可视化低代码前端，目标是可以编辑所有 HTML 基础的组件。本文介绍了其实现机制。
2023-03-01 10:01:39
920
原创 用React仿钉钉审批流
UI虽然是树形结构，但是项目内部的数据结构可以是树形，也可以是扁平的。扁平的意思是，所用节点存在一个数组或者map里，通过parentId跟childIds等信息描述树形关系。因为这个项目是帮朋友做的，他的后端是树形结构，跟div的结构一致。如果这个项目提供一个编辑器组件WorkflowEditor，这个组件要有value跟onChange属性，如果是扁平结构，onChange的时要转一下，如果做成受控组件，性能可能会有问题。
2023-08-06 15:10:15
163
原创 VUE实现Studio管理后台（完结）：标签式输入、名值对输入、对话框（modal dialog）
一周的时间，几乎每天都要工作十几个小时，敲代码+写作文，界面原型算是完成了，下一步是写内核的HTML处理引擎，纯JS实现。本次实战展示告一段落，等RXEditor下一个版本完成，再继续分享吧。剩下的功能：标签式输入、名值对输入、对话框（modal dialog），边框输入，全部完成。css class输入，样式跟属性输入，效果：对话框（model dialog效果）前几期功能效果总览：...
2020-03-10 09:59:57
272
原创 VUE 实现 Studio 管理后台（十三）：按钮点选输入控件，input 输入框系列
按钮点选输入，是一个非常简单的控件，20 分钟就能完成的一个控件。先看效果：根据以前的设定，通过 json 数据动态生成这两个按钮，示例中这两个按钮对应的 json 代码： { label:'标题', value:'h2', defaultValue:'h2', inputName:'RxButtonSelect', ...
2020-03-09 10:16:07
259
原创 VUE 实现 Studio 管理后台（十二）：添加输入组合，复杂输入，输入框 Input 系列
这次的功能优点复杂，组件嵌套了很多次，自己表达能力毕竟有限，分享出来未必能讲明白。为了保持内容的连贯性，最终决定写一下。先看效果：关键点：1、组件嵌套手风琴式折叠组件，嵌套输入行，还嵌套输入行的组合（例子中的边框）2、多角度重置实时监测当前值跟缺省值是否一致，并提供重置功能。3、不得不感叹，VUE强大！比上次的代码增加了一个RxInputRowGroup.vue文件，在inputs...
2020-03-08 21:53:47
317
原创 VUE 实现 Studio 管理后台（十一）：下拉选择列表（Select）控件，输入框 input 系列
这次 Github 上传错了，标题中的序号不对，我想这样：《VUE 实现 Studio 管理后台（十一）：下拉选择列表（Select）控件，输入框 input 系列》实际传成了这样《VUE 实现 Studio 管理后台（九）：下拉选择列表（Select）控件，输入框 input 系列》，很无奈的错误，我也不知道怎么修正，下载代码的时候注意分别吧。这次分享下拉列表输入组件（Select），效果如下...
2020-03-08 18:39:38
348
原创 VUE 实现 Studio 管理后台（十）：OptionBox，一个综合属性输入界面，可以级联重置
为了便于阅读代码，已经把测试数据分离出来，放在了 mock 目录下：阅读代码的话，稍微留意一下就好。本次介绍 RXEditor 界面最重要的部分，属性输入组件，该组件可以显示是否有数据被修改，还可以批量重置到缺省值，效果如下：这个界面是动态构建的，根据 Json 数据，动态构建输入界面。我之前做过一个 PHP larvel+Vuetify 的框架，也是用这个原理，PHP 段代码构造 JSO...
2020-03-08 16:02:43
181
原创 VUE实现Studio管理后台（九）：开关（Switch）控件，输入框input系列
接下来几篇作文，会介绍用到的输入框系列，今天会介绍组普通的调用方式，因为RXEditor要求复杂的输入功能，后面的例子会用VUE的component动态调用，就没有今天的这么直观了，控件的实现原理都一样，只是调用方式的区别，今天的例子的调用代码为了写作文特殊制作的，写完作文还要恢复回去。开关控件（Switch）的实现效果：给组件取个好听的名字，叫RxSwitch吧。调用代码：<RxS...
2020-03-08 09:04:31
654
原创 VUE 实现 Studio 管理后台（八）：用右键菜单 contextmenu，编辑树形结构
RXEdior 预设会有文件管理功能，但是灵活性需求不大，目前的设想是文件不允许修改，只允许增删改文件。基于这样的设想，把界面实现成这个效果：这个功能并不是一个通用功能，并且我们做的代码，也没有按照类库的标准要求，这种编辑功能实现有些复杂，用了大量的 js 事件，代码不是很容易读。后期这个功能可能会有大的变化，所以我也没有让这些代码变的更优雅的动力。本篇作文就不详细展示代码，大致说说我的实现...
2020-03-07 18:12:47
310
原创 VUE 实现 Studio 管理后台（七）：树形结构，文件树，节点树共用一套代码 NodeTree
本次介绍的内容，稍稍复杂了一点，用 VUE 实现树形结构。目前这个属性结构还没有编辑功能，仅仅是展示。明天再开一篇文章，介绍如何增加编辑功能，标题都想好了。先看今天的展示效果：构建树必须用到递归，使用 slot 这种直观明了的方式，已经行不通了。只能通过属性参数，传递一个树形的数据结构给组件，传入的数据结构大致是这个样子：[ { title:‘页面 ’ ...
2020-03-07 12:00:05
789
原创 VUE 实现 Studio 管理后台（六）：鼠标悬停显示弹出窗口
这次介绍的控件相对比较简单，鼠标悬停时显示弹出内容，效果如下：为了增加灵活性，用 slot 实现，调用时的代码： <MouseOverPop class="toolbox-element"> <template #heading> <div class="element-title...
2020-03-06 13:26:13
857
原创 VUE 实现 Studio 管理后台（五）：手风琴式折叠组件（Accordion）
作为一个有目标的人（目标是做一个好用的 Bootstrap 可视化编辑器，第一个版本已经实现，演示地址：https://vular.cn/rxeditor/，代码地址：https://github.com/vularsoft/rxeditor），工作比较积极，思维也比较活跃，睡眠相对较少。今早 6:30 就起床了，吃早饭前，实现了一个手风琴式折叠组件，具体效果如下：一般情况，这样的控件有两种表...
2020-03-06 11:07:09
432
原创 VUE实现Studio管理后台（四）：状态模式实现窗口停靠，灵动、自由
昨天做的tabs窗口，非常满意，今天乘胜追击，把它做成了可以根据自身大小改变显示样式，自身宽度过小时，tab页可以浮动停靠其一侧。具体效果：左侧右侧向来喜欢简单明了的东西，所以想实现的简单一点，无奈现实不允许啊，功能实在有一丢丢复杂。硬着头皮搞了整整一下午，终于完成。左侧跟右侧窗口，要使用同一个控件，尽量增加代码的可复用性，控件的状态就有些多：正常显示（普通tabs窗口），列表（显示图...
2020-03-05 19:44:16
338
原创 VUE 实现 Studio 管理后台（三）：支持多语言国际化（vue-I18N）
RXEditor的第一版本是英文版，有些朋友看起来觉得不习惯，后来因为惰性，不愿意再修改旧代码加入中文版，这次提前就把这个问题解决了，克服惰性最好的方式，就是想到就尽快去做，避免拖延。本来计划在界面的右上角，做一个下拉菜单选择语言。下拉菜单的工作量稍稍有些大，并且很少有随时切换界面语言的需求。最终确定获取浏览器语言环境，并使用浏览器的语言设置。也就是说，用中文浏览器打开就是中文版，用英文浏览器打...
2020-03-05 10:19:25
450
原创 VUE实现Studio管理后台（二）：Slot实现选项卡tab切换效果，可自由填装内容
作为RXEditor的主界面，Studio UI要使用大量的选项卡TAB切换，我梦想的TAB切换是可以自由填充内容的。可惜自己不会实现，只好在网上搜索一下，就跟现在你做的一样，看看有没有好事者实现了类似功能，并分享了出来，百度到的结果不甚理想，他们大都是一个空间通过传入对象数据实现的，扩展性差，不能分别定制每个页面的样式。改用谷歌，发现一位国外老哥实现了我想要的功能，果断采用，并给了他一个大大...
2020-03-04 21:53:09
550
原创 VUE实现Studio管理后台（一）：鼠标拖放改变窗口大小
近期改版RXEditor，把改版过程，用到的技术点，记录下来。昨天完成了静态页面的制作，制作过程并未详细记录，后期已经不愿再补了，有些遗憾。不过工作成果完整保留在github上，地址：https://github.com/vularsoft/studio-ui这个项目下面的html-demo.html，便是静态文件。话不多说，今天就把昨天的HTML转化成VUE。先看效果：布局原理页面采...
2020-03-04 14:57:53
204
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人