qq_34306228的博客

将components/RightPanel.vue 移到components/RightPanel目录下去这里，只有通过computed、watch、将他的api这些语法全部连接起来，它才会有一个响应式的表现，如果不这样做，只会在初始化进来的时候操作一次，后续的话，是不会再走的，这也是跟React很大的一个区别。之前探讨过更细颗粒度的更新，更细粒度的管理，在React中是通过信号的方式来进行状态的维护的。TextSetting.vueImageSetting.vueChartSetting.v

右侧栏配置主要是表单相关的内容，表单处理是开发中用的特别多的场景；今天从架构师的视角来看下这个表单怎么设计，动态表单、复杂表单、表单联动。先将左侧栏复制一份粘到右侧栏上views/LayoutView.vue全部代码：现在的import包是没有按照顺序去排列的，应该有一个排列顺序才对，这里应该安装一个eslint插件来去自动修复的，全部代码：.eslintrc.cjs全部代码：pnpm i安装LeftPanel.vueLayoutView.vueBlockRenderer.

接下来要做的是，中间区域Block相关的内容，block相关的内容最重要的就是，数据协议设计和整体渲染器的逻辑渲染器概念：简单点说就是，封装他的组件。比如做了一个图表，可以说封装了一个图表组件，如果做了一个表单校验，可以说做了一个表单校验组件，或者写了一些业务组件，但是这些点要是上升一点，就是，表单渲染 – 表单渲染器，表单渲染组件，表单规则约定 – 表单规则校验器；可以美化这些词语，提高简历数据协议：左边物料区有很多的物料列表，将左边的物料拖到中间编排区进行编排，拖拽之后，这些内容区域就能组装成一个页面，

全部代码：LayoutView.vue全部代码：stores/debug.ts全部代码：stores/editor.ts跨模块的数据需要存在store中AppNavigator.vue全部代码：全部代码：store/editor.ts全部代码：LeftPanel.vue全部代码：LayoutView.vue全部代码：

创建LeftPanelLayoutView.vuebase.css全部代码：LeftPanel.vue分类：流式、自由、grid、retoolpackage.json:创建文件componentsSmoothDndSmoothDndContainer.ts - 容器SmoothDndDraggable.ts - 拖拽对象utils.tsSmoothDndContainer.tsutils.tsSmoothDndDraggable.tsLe

stores/counter.ts创建editor.ts文件LayoutView.vueicon-park githubicon-park官网store/debug.ts创建debug.ts文件src/components/AppNavigator.vuesrccomponents_test_AppNavigator.tsAppNavigator.vueAppNavigator.ts:AppNavigator.vue:theme样式创建rese

编辑器 -> 管理端发布上线 ->应用端但是一般很多公司产品的管理端和应用端结合，进行高度复用。这是因为，在管理端进行拖拽的时候，是比较消耗性能的，要更好的考虑性能，所以很多产品都会用 canvas，用画布的形式画、绘制 对齐的网格线，或者编排过程中的辅助线；但是在渲染过程中，在应用端是没有任何的辅助线和网格线，所以一般将管理端和应用端分开考虑。管理端和应用端中间的联系一般是组件的复用，但是在页面中，编排引擎，渲染器方面，他们俩不是高度复用illaretool。

webpack：cross-env能够声明不同的环境，dev，prod，test 能够通过dev注入到process.env.NODE_ENV。cross-env 能够注入到全局环境下，在window，linux，mac不同环境下都能使用cross-env做好兼容，只是用于注入变量。当src/server，webpack，babel.config.ts这几个发生变化的时候，才会去解析这个包。当我们的组件发生变化时，只要在外面包裹ErrorBoundary，就能避免页面报错，展示的是兜底错误的提示。

当页面首次加载时候，spa只会返回空节点，内容都是空的，而ssr会将页面的骨架，内容等提前加载出来，提高效率。spa首屏加载很慢。SSR:利于首屏加载CSR:(spa)不利于首屏加载，页面结构为空节点本次项目可以执行在浏览器，也可以执行在客户端中。

d.ts是所有类型的集合，全称是：declaration type 都是通过 @types/react去管理的。针对不同场景下参数的兼容，参数不同，则场景不同，考虑到的情况也不一样。以上两种写法，一般都用第一种写法，比较规范，考虑到代码扩展性等。引入的是文件的类型，导出的时候也是按照文件模块/类型引用。关于ts配置项，tsconfig.json。再 tsconfig includes注入。@types是约定俗成的。全局模块，是全局直接用。