<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[悠闲的水的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/idlewater</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; idlewater]]></copyright><item><title><![CDATA[用React仿钉钉审批流]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/132131268</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/132131268</guid><author>idlewater</author><pubDate>Sun, 06 Aug 2023 15:10:15 +0800</pubDate><description><![CDATA[UI虽然是树形结构，但是项目内部的数据结构可以是树形，也可以是扁平的。扁平的意思是，所用节点存在一个数组或者map里，通过parentId跟childIds等信息描述树形关系。因为这个项目是帮朋友做的，他的后端是树形结构，跟div的结构一致。如果这个项目提供一个编辑器组件WorkflowEditor，这个组件要有value跟onChange属性，如果是扁平结构，onChange的时要转一下，如果做成受控组件，性能可能会有问题。]]></description><category></category></item><item><title><![CDATA[前、后端通用的可视化逻辑编排]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/131843870</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/131843870</guid><author>idlewater</author><pubDate>Fri, 21 Jul 2023 08:31:04 +0800</pubDate><description><![CDATA[逻辑编排编辑器生成一份JSON，解析引擎解析这份JSON，把图形化的业务逻辑转化成可执行的逻辑，并执行。编辑器跟解析引擎之间要有份约束协议，用来约定JSON的定义，这个协议就是这里定义的DSL。在typescript中，用interface、enum等元素来表示。这些DSL仅仅是用来描述页面上的图形元素，通过activityName属性跟具体的实现代码逻辑关联起来。比如一个循环节点，它的actvityName是Loop，解析引擎会根据Loop这个名字找到该节点对应的实现类，并实例化为一个可执行对象。]]></description><category></category></item><item><title><![CDATA[实践，制作一个高扩展、可视化低代码前端，详实、完整]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/129275427</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/129275427</guid><author>idlewater</author><pubDate>Wed, 01 Mar 2023 10:01:39 +0800</pubDate><description><![CDATA[RxEditor是一款开源企业级可视化低代码前端，目标是可以编辑所有 HTML 基础的组件。本文介绍了其实现机制。]]></description><category></category></item><item><title><![CDATA[VUE实现Studio管理后台（完结）：标签式输入、名值对输入、对话框（modal dialog）]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/104767931</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/104767931</guid><author>idlewater</author><pubDate>Tue, 10 Mar 2020 09:59:57 +0800</pubDate><description><![CDATA[一周的时间，几乎每天都要工作十几个小时，敲代码+写作文，界面原型算是完成了，下一步是写内核的HTML处理引擎，纯JS实现。本次实战展示告一段落，等RXEditor下一个版本完成，再继续分享吧。
剩下的功能：标签式输入、名值对输入、对话框（modal dialog），边框输入，全部完成。
css class输入，样式跟属性输入，效果：

对话框（model dialog效果）

前几期功能效果总览：...]]></description><category></category></item><item><title><![CDATA[VUE 实现 Studio 管理后台（十三）：按钮点选输入控件，input 输入框系列]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/104746891</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/104746891</guid><author>idlewater</author><pubDate>Mon, 09 Mar 2020 10:16:07 +0800</pubDate><description><![CDATA[按钮点选输入，是一个非常简单的控件，20 分钟就能完成的一个控件。先看效果：

根据以前的设定，通过 json 数据动态生成这两个按钮，示例中这两个按钮对应的 json 代码：
 {
        label:'标题',
        value:'h2',
        defaultValue:'h2',
        inputName:'RxButtonSelect',
     ...]]></description><category></category></item><item><title><![CDATA[VUE 实现 Studio 管理后台（十二）：添加输入组合，复杂输入，输入框 Input 系列]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/104741604</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/104741604</guid><author>idlewater</author><pubDate>Sun, 08 Mar 2020 21:53:47 +0800</pubDate><description><![CDATA[这次的功能优点复杂，组件嵌套了很多次，自己表达能力毕竟有限，分享出来未必能讲明白。为了保持内容的连贯性，最终决定写一下。先看效果：

关键点：
1、组件嵌套
手风琴式折叠组件，嵌套输入行，还嵌套输入行的组合（例子中的边框）
2、多角度重置
实时监测当前值跟缺省值是否一致，并提供重置功能。
3、不得不感叹，VUE强大！
比上次的代码增加了一个RxInputRowGroup.vue文件，在inputs...]]></description><category></category></item><item><title><![CDATA[VUE 实现 Studio 管理后台（十一）：下拉选择列表（Select）控件，输入框 input 系列]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/104737806</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/104737806</guid><author>idlewater</author><pubDate>Sun, 08 Mar 2020 18:39:38 +0800</pubDate><description><![CDATA[这次 Github 上传错了，标题中的序号不对，我想这样：《VUE 实现 Studio 管理后台（十一）：下拉选择列表（Select）控件，输入框 input 系列》实际传成了这样《VUE 实现 Studio 管理后台（九）：下拉选择列表（Select）控件，输入框 input 系列》，很无奈的错误，我也不知道怎么修正，下载代码的时候注意分别吧。
这次分享下拉列表输入组件（Select），效果如下...]]></description><category></category></item><item><title><![CDATA[VUE 实现 Studio 管理后台（十）：OptionBox，一个综合属性输入界面，可以级联重置]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/104734434</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/104734434</guid><author>idlewater</author><pubDate>Sun, 08 Mar 2020 16:02:43 +0800</pubDate><description><![CDATA[为了便于阅读代码，已经把测试数据分离出来，放在了 mock 目录下：

阅读代码的话，稍微留意一下就好。本次介绍 RXEditor 界面最重要的部分，属性输入组件，该组件可以显示是否有数据被修改，还可以批量重置到缺省值，效果如下：

这个界面是动态构建的，根据 Json 数据，动态构建输入界面。我之前做过一个 PHP larvel+Vuetify 的框架，也是用这个原理，PHP 段代码构造 JSO...]]></description><category></category></item><item><title><![CDATA[VUE实现Studio管理后台（九）：开关（Switch）控件，输入框input系列]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/104727163</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/104727163</guid><author>idlewater</author><pubDate>Sun, 08 Mar 2020 09:04:31 +0800</pubDate><description><![CDATA[接下来几篇作文，会介绍用到的输入框系列，今天会介绍组普通的调用方式，因为RXEditor要求复杂的输入功能，后面的例子会用VUE的component动态调用，就没有今天的这么直观了，控件的实现原理都一样，只是调用方式的区别，今天的例子的调用代码为了写作文特殊制作的，写完作文还要恢复回去。
开关控件（Switch）的实现效果：

给组件取个好听的名字，叫RxSwitch吧。调用代码：
&lt;RxS...]]></description><category></category></item><item><title><![CDATA[VUE 实现 Studio 管理后台（八）：用右键菜单 contextmenu，编辑树形结构]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/104719114</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/104719114</guid><author>idlewater</author><pubDate>Sat, 07 Mar 2020 18:12:47 +0800</pubDate><description><![CDATA[RXEdior 预设会有文件管理功能，但是灵活性需求不大，目前的设想是文件不允许修改，只允许增删改文件。基于这样的设想，把界面实现成这个效果：

这个功能并不是一个通用功能，并且我们做的代码，也没有按照类库的标准要求，这种编辑功能实现有些复杂，用了大量的 js 事件，代码不是很容易读。后期这个功能可能会有大的变化，所以我也没有让这些代码变的更优雅的动力。
本篇作文就不详细展示代码，大致说说我的实现...]]></description><category></category></item><item><title><![CDATA[VUE 实现 Studio 管理后台（七）：树形结构，文件树，节点树共用一套代码 NodeTree]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/104712308</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/104712308</guid><author>idlewater</author><pubDate>Sat, 07 Mar 2020 12:00:05 +0800</pubDate><description><![CDATA[本次介绍的内容，稍稍复杂了一点，用 VUE 实现树形结构。目前这个属性结构还没有编辑功能，仅仅是展示。明天再开一篇文章，介绍如何增加编辑功能，标题都想好了。先看今天的展示效果：

构建树必须用到递归，使用 slot 这种直观明了的方式，已经行不通了。只能通过属性参数，传递一个树形的数据结构给组件，传入的数据结构大致是这个样子：
[
        {
          title:‘页面 ’
 ...]]></description><category></category></item><item><title><![CDATA[VUE 实现 Studio 管理后台（六）：鼠标悬停显示弹出窗口]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/104694162</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/104694162</guid><author>idlewater</author><pubDate>Fri, 06 Mar 2020 13:26:13 +0800</pubDate><description><![CDATA[这次介绍的控件相对比较简单，鼠标悬停时显示弹出内容，效果如下：

为了增加灵活性，用 slot 实现，调用时的代码：
            &lt;MouseOverPop class="toolbox-element"&gt;
              &lt;template #heading&gt;
                &lt;div class="element-title...]]></description><category></category></item><item><title><![CDATA[VUE 实现 Studio 管理后台（五）：手风琴式折叠组件（Accordion）]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/104691607</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/104691607</guid><author>idlewater</author><pubDate>Fri, 06 Mar 2020 11:07:09 +0800</pubDate><description><![CDATA[作为一个有目标的人（目标是做一个好用的 Bootstrap 可视化编辑器，第一个版本已经实现，演示地址：https://vular.cn/rxeditor/，代码地址：https://github.com/vularsoft/rxeditor），工作比较积极，思维也比较活跃，睡眠相对较少。今早 6:30 就起床了，吃早饭前，实现了一个手风琴式折叠组件，具体效果如下：

一般情况，这样的控件有两种表...]]></description><category></category></item><item><title><![CDATA[VUE实现Studio管理后台（四）：状态模式实现窗口停靠，灵动、自由]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/104682374</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/104682374</guid><author>idlewater</author><pubDate>Thu, 05 Mar 2020 19:44:16 +0800</pubDate><description><![CDATA[昨天做的tabs窗口，非常满意，今天乘胜追击，把它做成了可以根据自身大小改变显示样式，自身宽度过小时，tab页可以浮动停靠其一侧。具体效果：
左侧

右侧

向来喜欢简单明了的东西，所以想实现的简单一点，无奈现实不允许啊，功能实在有一丢丢复杂。硬着头皮搞了整整一下午，终于完成。
左侧跟右侧窗口，要使用同一个控件，尽量增加代码的可复用性，控件的状态就有些多：正常显示（普通tabs窗口），列表（显示图...]]></description><category></category></item><item><title><![CDATA[VUE 实现 Studio 管理后台（三）：支持多语言国际化（vue-I18N）]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/104669073</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/104669073</guid><author>idlewater</author><pubDate>Thu, 05 Mar 2020 10:19:25 +0800</pubDate><description><![CDATA[RXEditor的第一版本是英文版，有些朋友看起来觉得不习惯，后来因为惰性，不愿意再修改旧代码加入中文版，这次提前就把这个问题解决了，克服惰性最好的方式，就是想到就尽快去做，避免拖延。
本来计划在界面的右上角，做一个下拉菜单选择语言。下拉菜单的工作量稍稍有些大，并且很少有随时切换界面语言的需求。最终确定获取浏览器语言环境，并使用浏览器的语言设置。也就是说，用中文浏览器打开就是中文版，用英文浏览器打...]]></description><category></category></item><item><title><![CDATA[VUE实现Studio管理后台（二）：Slot实现选项卡tab切换效果，可自由填装内容]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/104663536</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/104663536</guid><author>idlewater</author><pubDate>Wed, 04 Mar 2020 21:53:09 +0800</pubDate><description><![CDATA[作为RXEditor的主界面，Studio UI要使用大量的选项卡TAB切换，我梦想的TAB切换是可以自由填充内容的。
可惜自己不会实现，只好在网上搜索一下，就跟现在你做的一样，看看有没有好事者实现了类似功能，并分享了出来，百度到的结果不甚理想，他们大都是一个空间通过传入对象数据实现的，扩展性差，不能分别定制每个页面的样式。
改用谷歌，发现一位国外老哥实现了我想要的功能，果断采用，并给了他一个大大...]]></description><category></category></item><item><title><![CDATA[VUE实现Studio管理后台（一）：鼠标拖放改变窗口大小]]></title><link>https://blog.youkuaiyun.com/idlewater/article/details/104653825</link><guid>https://blog.youkuaiyun.com/idlewater/article/details/104653825</guid><author>idlewater</author><pubDate>Wed, 04 Mar 2020 14:57:53 +0800</pubDate><description><![CDATA[近期改版RXEditor，把改版过程，用到的技术点，记录下来。昨天完成了静态页面的制作，制作过程并未详细记录，后期已经不愿再补了，有些遗憾。不过工作成果完整保留在github上，地址：https://github.com/vularsoft/studio-ui
这个项目下面的html-demo.html，便是静态文件。
话不多说，今天就把昨天的HTML转化成VUE。
先看效果：

布局原理
页面采...]]></description><category></category></item></channel></rss>