页面
页面（Page）是 Chameleon 平台的前端展示单元，由多个组件组装而成。通过可视化设计器搭建，支持组件拖拽、布局配置、数据绑定和交互配置。
概述
页面是用户与应用交互的界面载体。Chameleon 平台提供了丰富的页面组件和灵活的布局能力，让用户可以快速搭建各种业务页面：
- 组件拖拽：通过拖拽组件快速搭建页面
- 布局配置：灵活的栅格和容器布局
- 数据绑定：组件与数据源的关联
- 交互配置：页面交互和事件处理
页面的核心价值
- 可视化设计：所见即所得的页面设计体验
- 组件复用：丰富的内置组件和自定义组件
- 响应式布局：自适应不同设备屏幕
- 动态数据：支持动态数据绑定和更新
页面结构
页面类型
标准页面
通用的业务页面，可自由组装组件，适用于：
- 数据录入 页面
- 数据展示页面
- 综合业务页面
表单页面
以表单为核心的页面，用于数据录入：
- 自动绑定实体字段
- 支持表单验证
- 支持表单联动
列表页面
以列表为核心的页面，用于数据浏览：
- 自动绑定实体数据
- 支持筛选和排序
- 支持批量操作
仪表盘
数据可视化页面，展示统计图表：
- 多种图表类型
- 数据实时更新
- 支持钻取分析
组件体系
基础组件
| 组件 | 说明 | 使用场景 |
|---|---|---|
| 容器 | 布局容器 | 内容分组 |
| 栅格 | 栅格布局 | 响应式布局 |
| 标签页 | 标签页切换 | 内容分类展示 |
| 折叠面板 | 可折叠容器 | 内容收纳 |
业务组件
| 组件 | 说明 | 使用场景 |
|---|---|---|
| 表单 | 数据录入表单 | 数据新增、编辑 |
| 列表 | 数据列表视图列表 | 数据浏览、管理 |
| 详情 | 数据详情展示 | 数据查看 |
| 树形控件 | 层级数据展示 | 组织架构、分类 |
图表组件
| 组件 | 说明 | 使用场景 |
|---|---|---|
| 柱状图 | 数据对比展示 | 销量对比、排名 |
| 折线图 | 趋势变化展示 | 趋势分析、走势 |
| 饼图 | 占比分布展示 | 占比分析、分布 |
| 仪表盘 | 指标展示 | KPI 展示、进度 |
扩展组件
| 组件 | 说明 | 使用场景 |
|---|---|---|
| 微应用 | 嵌入外部应用 | 集成第三方系统 |
| 自定义组件 | 自定义开发组件 | 特殊业务需求 |
| HTML 容器 | 嵌入 HTML 内容 | 自定义内容展示 |
页面权限
支持页面级别的权限控制：
访问权限
控制用户是否可以访问该页面：
| 权限类型 | 说明 |
|---|---|
| 公开 | 所有用户可访问 |
| 登录用户 | 需登录后访问 |
| 指定角色 | 仅指定角色可访问 |
最佳实践
页面设计
- 保持页面简洁，避免组件过多
- 合理使用布局容器组织内容
- 重要信息放在显眼位置
性能优化
- 避免加载过多数据
- 使用分页加载列表数据
- 图表数据做聚合处理
用户体验
- 提供清晰的页面标题 和说明
- 操作按钮位置合理
- 错误提示友好明确