Appearance
功能介绍
为了使设计人员更轻松地上手并参与到组件设计的全过程，组件设计器提供了友好的可视化交互方式。设计人员无需编写代码即可完成组件设计，并能将设计成果无缝传递给开发人员，从而提高整体工作效率。
功能版块说明
通过这些功能版块，设计人员可以直观、便捷地进行页面和组件的设计与配置，无需编写代码即可完成高效设计流程，并将设计成果无缝对接给开发人员
工具栏
包含常用功能按钮，如“保存”、“发布”、“刷新”，还提供了对齐工具、放大缩小比例调节、撤销重做等操作，方便用户快速进行界面调整和操作，接下来将从左到右对工具栏按钮进行详细的介绍
指针工具
支持切换三种指针模式，分别是：
选择模式：
- 鼠标选择：通过点击鼠标左键选择画布内的元素。
- 区域多选：拖动鼠标选择一个区域，多选元素。
- 组合多选：按住
Shift键并点击鼠标左键进行多选。
移动画布：
- 支持对画布进行移动操作。
快速创建：
- 选中
组件集的组件后，通过拖动鼠标左键调整组件大小，在指针所在位置快速创建元素。
- 选中
开发工具
刷新：
- 对画布进行刷新，重新渲染。如果画布显示异常或部分操作无更新，可以通过此操作刷新。
显示设置：
- 控制画布显示内容和操作限制。
- 开发模式：开启后可以直接编辑画布内的元素，关闭后只能预览。
- 渲染插槽和虚拟容器：插槽中没有内容时，开启后也会进行占位渲染。
- 禁用事件处理：开启后，元素中绑定的事件操作不触发。
- 显示位置参考线：开启后在画布中显示参考线。
- 显示组件轮廓：开启后在画布中显示组件的轮廓。
- 显示标尺参考线：开启后显示标尺参考线。
- 显示网格布局：开启后，配置的网格设置将显示在画布中。
预览：
- 支持点击在浏览器新标签页进行预览，或通过手机扫码进行预览。
组件代码：
- 点击后显示当前设计的组件生成的代码。
编辑工具
- 放大缩小：支持点击进行放大缩小，也支持使用
Ctrl/⌘+鼠标滚轮的方式，对画布进行放大缩小的控制。 - 撤销重做：支持对历史操作进行撤销或重做。撤销快捷键：
Ctrl/⌘+Z，重做快捷键：Ctrl/⌘+Shift+Z
视图开关
AI：点击显示AI工具弹窗。可通过AI生成组件或修改组件
蓝图：点击显示蓝图编辑器，可通过蓝图书写组件逻辑
样式表：点击显示样式表编辑器，可书写组件样式代码
脚本：点击显示脚本编辑器，可书写脚本代码
模板：点击显示模板编辑器，可修改模板代码，并同步到画布中
日志：点击显示日志视图，显示组件的编译日志，运行日志，当前数据等情况
项目视图
显示设置、大纲、数据结构等视图
设置视图
支持查看和设置组件的参数，具体如下：
- 文件信息：支持查看设置设置组件备注
- 使用的组件库：支持定义当前设计的组件引用的其他第三方组件库。如
VantUI、ElementUI、织信运行时等公共组件 - 导入：支持导入
js、css、用户组件等资源文件 - 可监听的事件：定义组件的事件列表，父组件可监听定义的事件，并根据业务逻辑做相应的处理
- 可调用的方法：定义组件的方法列表，父组件可通过
$refs获取到组件实例调用 - 画布设置：设置画布的背景色、选择框颜色、参考线颜色、吸附线颜色
- 快捷键：说明组件设计器中，快捷键的使用方式
- 页面设置：页面标题、页面图标、页面元数据元素定义。如移动端中经常使用的元数据定义：
<meta name="viewport" content="width=device-width, initial-scale=1" />
大纲视图
显示当前组件的结构，支持展开收起，调整组件结构，快速定位组件，对选中的组件进行删除、清除样式、批量修改样式等快捷操作
数据结构
显示当前组件定义的数据结构，包括：
- 参数（props）
- 数据（data）
- 计算数据（computed）
- 方法（methods）
- 监听器（watch）
- 生命周期（lifecycle）
- 引用（ref）
- 全局函数（globalFuncs）
- 过滤器（filters）
组件集
包含各种预定义的基础组件，所有引入的第三方组件中支持布局的组件。 用户可以从组件集中拖拽所需组件到实时预览画布中，快速构建页面布局。
实时预览画布
用户设计和编辑页面的主要工作区。 用户可以直接在画布上拖拽、放置和调整组件，实时预览设计效果，直观地看到最终呈现的页面布局。
组件配置版块
显示当前选中组件的详细属性和设置选项。 用户可以在此对选中的组件进行各种属性配置，如“结构标识”、“循环”、“条件显示”、“事件处理”、“属性设置”等。 配置版块提供了丰富的自定义选项，帮助用户精细调整组件行为和样式，满足各种设计需求。