Appearance
设计
一、Code
code设计与模块类型--页面视图绑定，只有页面视图类型的菜单才显示code；
点击Code打开代码编辑器，编写页面代码，支持使用HTML、Vue设计页面；代码编辑器支持代码运行调试，但是只能调试脚本是否存在bug，无法查看页面效果，需要保存后刷新页面才能查看。
为快速搭建页面，本系统支持AI辅助页面代码编写;代码编辑器工具栏有【AI】选项，点击出现AI对话框，以与AI对话的方式实现页面功能。
二、页面设计
页面布局设置，系统支持模式：标准模式、树形模式、标签模式；
1.标准模式
标准模式是搜索栏+列表的上下布局模式
2.树形模式
属性模式将容器分为左右两块，左边树右边是标准模式
3.标签模式
标签模式将容器分为上下两块，上面是标签下面是标准模式;若要展示树，则范围左边是树右上是标签右下是标准模式。
三、列表设计
数据展示区域，设计数据展示模式以及控制展示那些数据
1.基础设置
可设置列表显示模式、分页大小、边框样式、条纹显示、表头背景。
| 配置 | 说明 |
|---|---|
| 视图模式 | 数据展示模式，支持表格模式和卡片模式 |
| 分页大小 | 分页查询数据，可设置一页展示条数 |
| 边框样式 | 可指定开启表头边框 |
| 是否条纹 | 开启后表格显示斑马纹 |
| 表头背景 | 自定义表头背景色 |
2.列表搜索
设置列表携带的搜索，可控制搜索栏以及搜索标签的显示
3.移动端显示
设置数据在移动端展示的形式
| 配置 | 说明 |
|---|---|
| 视图模式 | 数据展示模式：列表、宫格、表格 |
| 列表样式 | 列表样式提供默认、行式、卡片A、卡片B |
4.拖拽排序
开启该配置后，可拖拽列表对数据进行自定义排序
| 配置 | 说明 |
|---|---|
| 启用拖拽排序 | 开启后才能拖拽 |
| 设置排序字段 | 开启状态需要选择排序依据字段 |
5.数据
为列表绑定数据来源，后续操作都依靠此处绑定的数据；数据有两种来源：一是数据表获取，二是接口引擎获取，这两种方式的字段、按钮、搜索等设计也不尽相同。
| 配置 | 说明 |
|---|---|
| 数据库 | 关系数据库中添加的库 |
| 数据表 | 所选库下的数据表，数据从此表中获取 |
| 关联表单 | 选择的数据表关联的表单，用于数据编辑和拖拽排序保存 |
| 树形列表 | 若数据表为树结构数据，可在此配置为树形列表 |
| 树型风格 | 开启树形列表后可选择展示风格，支持表格内部树（树形展开、折叠）、层级风格（表内不分层级，开启面包屑展示）两种模式 |
| 父列 | 开启树形列表后必填，父级绑定字段用于构建树形层级关系。 |
| 数据源接口 | 数据获取方式，填写后通过接口引擎获取数据，若返回为空则使用数据库表获取 |
| 启用面包屑 | 启用后，在工具栏上方显示面包屑 |
| 面包屑点击事件 | 启用面包屑后可以添加点击事件 |
| 启用提示标签 | 开启后列表上方会显示提示标签栏 |
| 标签类型 | 开启提示标签后可配置，类型支持：信息、主要、成功、警告、危险、默认 |
| 中文文案 | 多语言中文模式下标签显示文本 |
| 英文文案 | 多语言英文模式下标签显示文本 |
| 启用 Body 动态组件 | 在列表上方插入动态组件 |
| 动态组件 | 开启动态组件后必填，选择要展示的组件 |
| 组件高度 | 组件容器高度，默认240px |
提示：开启树形列表需要注意字段设计需要将id、parent_id都加上，否则接口返回数据无法形成树结构
6.事件
提供各种表格时机事件，供用户做额外的数据处理
| 配置 | 说明 |
|---|---|
| 单击命令 | 行单击事件 |
| 双击命令 | 行双击事件 |
| 拖拽命令 | 行拖拽事件 |
| 表格加载事件 | 表格数据加载完后事件 |
| 表格初始化事件 | 首次加载数据之前事件，仅执行一次 |
7.模板
列表导入、自定义导出功能需要用户在此处提供模板，若无需导入导出功能可忽略
| 配置 | 说明 |
|---|---|
| 导出模板 | 自定义数据导出模板，若无模板导出系统默认模板 |
| 视图模板 | 数据导入模板 |
四、树形设计
设计左侧树形列表展示的数据，标题、搜索等配置
| 配置 | 说明 |
|---|---|
| 名称（中文） | 树形中文名称 |
| 名称（英文） | 树形英文名称 |
| 数据库 | 若数据来源于接口引擎可不填 |
| 数据表 | / |
| 显示列 | 树形列表显示的字段 |
| 主键列 | 列表id绑定字段，做唯一标识 |
| 父级列 | 父级字段，若数据格式是分层级可忽略 |
| 图标 | 用于标题栏展示 |
| 根节点值 | 可自定义根节点，从数据中提取一部分数据展示 |
| 显示标题 | 开启后显示标题栏，显示树形名称和图标 |
| 启用搜索 | 开启后树形支持搜索 |
| 允许多选 | 开启后树形出现多选框 |
| 全部数据 | 开启后树形根部多出“全部数据”节点，该节点绑定值为空，一般用于查询所有数据 |
| 表格父级列 | 设置后，点击树节点时会将节点ID作为父级参数传递给表格查询 |
| 转换指令 | 需树形数据进行转换可填写转换命令 |
| 数据源接口 | 设置后，树数据将通过接口引擎获取；为空则使用数据库表获取数据 |
| 筛选条件 | 对以上获取到的数据进行筛选 |
五、字段设计
列表数据源配置完成后需要对展示字段做设计。
1.新增字段
点击【设计】->【+新增字段】打开表单，填写完成后点击【确定】，保存成功后列表自动更新
1.1 基础配置
| 字段名称 | 说明 |
|---|---|
| 字段 (KEY) | 绑定数据的Key |
| 英文标题 | 列展示英文名称 |
| 绑定字段 | 关联数据源字段，下拉选择系统已存在的数据字段，实现数据来源绑定。 |
| 卡片插槽 | 卡片模式下，当前列数据放置的插槽位置，下拉选择预设插槽。 |
| 最小宽度 | 列允许压缩的最小宽度，窗口缩小时列宽不会小于该值。 |
| 调整宽度 | 开关：开启后，页面支持鼠标拖拽手动调整该列宽度；关闭则列宽不可拖拽。 |
| 支持导出 | 开关：开启后，导出表格时包含当前列数据；关闭导出时忽略该列。 |
| 标题 | 表格表头显示的中文名称 |
| 类型 | 列类型包含：字段、选择列、序号列、引用、关联、操作、更多、宏 |
| 插槽 | 提供内置插槽组件嵌入列 |
| 宽度 | 列初始宽度，表格初始化默认宽度。 |
| 对齐 | 单元格内容对齐方式：左对齐 / 居中 / 右对齐。 |
| 固定 | 设置表格列冻结。 |
| 隐藏 | 开关：开启后，表格默认不展示该列，可在列筛选面板手动勾选显示。 |
1.2 转换命令
将原始数据用命令行做转换处理
举例：状态数据0/1转换为开启/关闭
if(App.Body.Table.Cell.Value==0)return '关闭'
return '开启'1.3 数据掩码
对敏感数据处理，仅影响页面前端展示，不会修改原始数据源，导出不受掩码影响。
| 配置 | 说明 |
|---|---|
| 开启掩码 | 开启后，对当前列敏感数据进行脱敏展示（手机号、身份证、账号等），掩码规则由系统统一配置 |
| 掩码格式 | 使用示例：手机号掩码格式 ???****????，展示结果 138****1234 |
1.4 移动端
移动端字段显示配置
| 配置 | 说明 |
|---|---|
| 移动端展示 | 开启后在移动端展示字段 |
| 移动端插槽 | 支持自动（键值行）、左侧主图 / 头像、主标题、副标题、主题行（如邮件主题）、摘要 / 预览、右上 / 行尾元信息、标签行 |
2.编辑字段
点击更多图标按钮->【修改字段】打开表单，修改信息后点击【确定】保存成功后列表自动更新显示；字段排序可拖拽自定义。
3.删除字段
点击更多图标按钮->【删除字段】，二次确认后，删除成功列表自动更新
提示：若列表数据源来自数据表，列表查询接口会根据字段设计返回字段，对于一些列表不展示但是实际需要的字段需要做处理
六、按钮设计
设计工具栏、操作列、树操作等按钮功能；新增的按钮不能直接显示，需要到角色管理页面为角色授权
1.新增按钮
点击【设计】->【+新增按钮】打开表单，填写完成后点击【确定】，保存成功后前往角色管理授权，刷新页面后按钮显示
| 字段名称 | 必填 | 说明 |
|---|---|---|
| 别名 | 必填 | 仅用于权限配置识别，页面运行时不会展示，不可重复。 |
| 显示名称 | 页面上展示的按钮文字；留空时按钮只显示图标，不展示文字。 | |
| 英文名称 | 按钮英文文本，用于国际化场景，无多语言需求可留空。 | |
| 类型 | 按钮动作类型，除基础新增、编辑等操作支持自定义 | |
| 位置 | 按钮摆放区域，支持：工具栏、操作列、行右键、更多列、树右键、树更多、树操作、树搜索 | |
| 父级按钮 | 下拉配置父按钮，实现下拉菜单分组；选择「无父级（不下拉）」代表独立一级按钮。 | |
| 式 | 选择按钮外观样式（主按钮、成功、警告、信息、危险按钮等）。 | |
| 对齐 | 工具栏内按钮排布位置：左侧 / 右侧。 | |
| 图标 | 为按钮配置前置图标，支持图标库选择。 | |
| 移动端显示 | 开启后，App 移动端页面展示该按钮；关闭则移动端隐藏按钮。 | |
| 命令 | 执行动作表达式，支持内置函数。 示例： openDialog('edit')作用：点击按钮后触发的业务逻辑（弹窗、跳转、接口请求、导出等）。 | |
| 显示条件 | 条件表达式（可选），通过表达式控制按钮是否可见； 不填写则默认跟随权限 |
2.编辑按钮
点击更多图标按钮->【修改按钮】打开表单，修改信息后点击【确定】保存成功后页面自动更新显示；按钮排序可拖拽自定义。
3.删除按钮
点击更多图标按钮->【删除】，二次确认后，删除成功页面自动更新，按钮移除。
七、数据筛选
对列表数据条件过滤配置;
八、筛选策略
筛选策略用于按用户身份或部门等+ 自定义条件动态控制数据访问范围，实现行级数据权限：不同角色用户打开同一份列表，只能看到符合自身策略规则的数据。系统按照策略优先级依次匹配当前登录用户，匹配成功后执行对应数据过滤动作。
| 字段 | 说明 |
|---|---|
| 启用策略 | 总开关；开启后当前筛选策略生效，关闭则全部策略不生效，不做数据权限拦截。 |
| 未命中时 | 用户没有匹配到任何一条策略时的兜底规则： • 拒绝：看不到任何数据（推荐，严格权限控制） • 允许：展示全部数据 |
九、数据搜索
用于可视化配置列表页面顶部的搜索栏，自定义搜索条件项。支持配置多个查询字段、组件样式、布局排版与中英文文案，用户在页面输入内容后，组合条件筛选表格数据。
| 项 | 说明 |
|---|---|
| 拖拽图标 | 拖动调整搜索项展示先后顺序 |
| 列 | 选择绑定的数据字段，作为搜索条件对应的数据库字段 |
| 标签 | 搜索框左侧中文名称（表单 label） |
| 标签英文 | 多语言场景下，label 对应的英文文本 |
| 占位符 | 输入框内中文提示文字 |
| 占位符英文 | 多语言场景下，输入框提示英文文本 |
| 运算符 | 条件匹配方式，例如：等于、包含、大于、区间等 |
| 输入框 | 选择前端组件类型：单行输入框、下拉选择、日期选择器等 |
| 值类型 | 定义搜索参数的数据类型：字符串、数字、日期等 |
| 布局占比 | 设置该项在搜索栏宽度占比（示例 1/4），控制一行摆放多少个搜索项 |
| 内置 | 勾选代表系统内置搜索项，不可删除 / 修改（根据平台规则） |
| 换行 | 勾选后，当前搜索项强制换行，开启新一行布局 |
| 删除 | 移除本条搜索配置项 |
十、排序
用于配置列表页面默认数据排序规则，支持设置单字段或多字段组合排序；页面加载时，自动按照配置规则对表格数据进行排序展示。
| 配置项 | 说明 |
|---|---|
| 字段 | 选择需要参与排序的数据列，作为排序依据 |
| 排序方式 | 可选：升序 / 降序 升序：数值从小到大、文字按编码正序； 降序：数值从大到小、文字按编码倒序 |
| 删除 | 移除当前这一条排序规则 |