# CloudCC 自定义页面说明文档

## 一、什么是自定义页面

自定义页面是 CloudCC
平台提供的可视化页面构建工具，基于**自定义组件**创建，通过**拖拉拽**的方式调整页面布局、配置组件属性，实现各种业务需求。

### 核心特点

- 🎨 **可视化编辑** - 无需编码，通过拖拽组件快速搭建页面
- 🧩 **组件化** - 基于自定义组件构建，支持复用和扩展
- 📱 **自适应布局** - 支持像素、百分比、视口等多种单位
- 🔌 **灵活集成** - 支持菜单、内嵌、代码调用等多种使用方式

---

## 二、自定义页面能干什么

### 1. 快速构建业务页面

通过物料库中的基础组件和数据组件，快速搭建符合业务需求的页面，无需从零开始编码。

### 2. 灵活布局设计

- 支持固定宽高布局（像素单位）
- 支持自适应布局（百分比单位）
- 支持响应式布局（视口单位）

### 3. 组件间通信

通过 `$CCDK.CCBus` 实现组件间的消息传递，支持复杂业务逻辑的协同工作。

### 4. 多场景集成

- 创建独立菜单页面
- 内嵌到系统详情页
- 通过 `ccdk.openCustomPage()` 代码调用

### 5. 移动端调试

支持使用 eruda 插件在移动端 App 中调试 H5 页面。

### 6. 在线更新页面组件

同一个页面可通过更新操作切换绑定的自定义组件，无需先删除再新建页面。

---

## 三、主要作用

| 作用            | 说明                         |
| --------------- | ---------------------------- |
| 🚀 **加速开发** | 可视化搭建，减少重复编码工作 |
| 🔄 **组件复用** | 一次开发组件，多处页面使用   |
| 🎯 **业务适配** | 灵活配置，快速响应业务变化   |
| 📦 **降低门槛** | 非开发人员也可参与页面搭建   |
| 🔧 **易于维护** | 组件化设计，修改影响范围可控 |

---

## 四、为什么要用自定义页面

### 传统开发方式的问题

- ❌ 每个页面都需要单独编码，重复工作多
- ❌ 样式和布局不统一，维护成本高
- ❌ 业务变更时需要修改代码，发布周期长
- ❌ 非开发人员无法参与，依赖开发资源

### 自定义页面的优势

- ✅ **标准化** - 统一的组件规范和页面结构
- ✅ **高效** - 拖拽式操作，分钟级完成页面搭建
- ✅ **灵活** - 组件可配置，适应不同业务场景
- ✅ **可扩展** - 支持自定义组件开发，满足特殊需求
- ✅ **低代码** - 业务人员可参与，减少开发依赖

---

## 五、自定义页面能解决哪些问题

### 1. 个性化业务需求

标准页面无法满足的个性化业务场景，通过自定义页面快速实现。

**示例**：特殊的审批流程页面、定制化的数据展示面板

### 2. 复杂数据展示

需要多维度、多格式展示数据的场景。

**示例**：仪表盘、统计报表、数据可视化大屏

### 3. 特殊交互需求

标准组件无法满足的交互逻辑。

**示例**：拖拽排序、动态表单、联动筛选

### 4. 第三方系统集成

需要嵌入外部系统或调用外部 API 的场景。

**示例**：嵌入 BI 报表、调用外部服务接口

### 5. 移动端适配

需要同时支持 PC 和移动端的页面。

**示例**：外勤人员使用的移动审批页面

### 6. 快速原型验证

业务需求不明确时，快速搭建原型进行验证。

**示例**：新功能 MVP 验证、用户反馈收集

---

## 六、使用场景与业务场景

### 6.1 推荐使用自定义页面的场景

| 场景类型        | 具体场景                     | 推荐理由             |
| --------------- | ---------------------------- | -------------------- |
| 📊 **数据展示** | 仪表盘、统计报表、数据大屏   | 灵活布局，多组件组合 |
| 📝 **表单录入** | 复杂表单、动态表单、多级表单 | 组件可配置，校验灵活 |
| 🔍 **查询搜索** | 高级搜索、多条件筛选         | 组件间通信方便       |
| 📋 **审批流程** | 定制化审批页、特殊流程       | 业务逻辑可定制       |
| 📱 **移动端**   | 外勤应用、移动办公           | 自适应布局支持好     |
| 🔗 **系统集成** | 嵌入外部系统、API 调用       | 扩展性强             |
| 🎨 **品牌定制** | 企业个性化页面               | 样式可完全定制       |

### 6.2 不推荐使用自定义页面的场景

| 场景           | 原因         | 建议方案         |
| -------------- | ------------ | ---------------- |
| 标准 CRUD 操作 | 杀鸡用牛刀   | 使用系统标准页面 |
| 简单信息展示   | 过度设计     | 使用系统详情页   |
| 一次性使用     | 投入产出比低 | 评估是否需要     |

---

## 七、最佳实践

### 7.1 页面设计原则

```
┌─────────────────────────────────┐
│         Custom Page (100%)        │
│  ┌───────────────────────────┐  │
│  │      Custom Component (100%)     │  │
│  │                           │  │
│  │   Free layout inside the component         │  │
│  │                           │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘
```

- 📐 **一页一组件** - 一个页面只放一个组件，画布和组件都设置 100% 宽高
- 🧩 **组件内布局** - 复杂布局在组件内部实现，保持页面简洁
- 🔄 **组件复用** - 通用功能封装成组件，多处复用

### 7.2 组件通信规范

```javascript
// Component A - receive message
mounted() {
  this.$CCDK.CCBus.$on('demoB2A', (args) => {
    console.log("Message received", args)
  })
},
beforeDestroy() {
  this.$CCDK.CCBus.$off('demoB2A') // Remember to unbind
}

// Component B - send message
methods: {
  emit() {
    this.$CCDK.CCBus.$emit("demoB2A", "Message content")
  }
}
```

### 7.3 页面入口选择

| 入口方式   | 适用场景           | 配置方式                |
| ---------- | ------------------ | ----------------------- |
| 菜单       | 独立功能模块       | 自定义页面菜单          |
| 内嵌详情页 | 关联业务展示       | 系统详情页配置          |
| 代码调用   | 动态跳转、条件打开 | `ccdk.openCustomPage()` |

---

## 八、快速开始

### 8.1 创建自定义页面

1. 登录 CloudCC 系统
2. 点击右上角头像 → 开发者控制台
3. 自定义布局 → 自定义页面 → 新建
4. 从物料库拖拽组件到画布
5. 配置组件属性
6. 保存页面

### 8.4 调试与发布

- 使用预览功能测试页面
- 移动端使用 eruda 调试
- 发布后配置页面入口

---

## 九、总结

自定义页面是 CloudCC 平台提供的**低代码页面构建解决方案**，核心价值在于：

- 🎯 **提效** - 减少重复开发，加速交付
- 🔧 **灵活** - 适应各种业务场景
- 📦 **复用** - 组件化设计，一次开发多处使用
- 🚀 **扩展** - 支持自定义组件，无上限扩展

**适用原则**：标准功能优先，个性化需求用自定义页面。

---

_文档版本：1.0_\
_最后更新：2026-03-25_