前端设计器

设计器概述

CodeWave 前端设计器是一个基于 Web 的可视化页面搭建工具，通过拖拽组件、配置属性、绑定数据，无需编写 HTML/CSS/JavaScript 即可构建专业的企业应用界面。

设计器界面

┌──────────────────────────────────────────────────────────────┐
│  工具栏：保存 | 预览 | 发布 | 撤销/重做 | 设备切换           │
├──────────┬───────────────────────────────┬───────────────────┤
│          │                               │                   │
│  组件面板 │         画布区域              │   属性配置面板     │
│          │                               │                   │
│  ├ 基础  │  ┌─────────────────────────┐  │  组件属性         │
│  ├ 表单  │  │                         │  │  ├ 基础属性       │
│  ├ 数据  │  │   拖拽组件到此处         │  │  ├ 样式           │
│  ├ 导航  │  │                         │  │  ├ 数据绑定       │
│  └ 图表  │  └─────────────────────────┘  │  └ 事件           │
│          │                               │                   │
└──────────┴───────────────────────────────┴───────────────────┘
│  大纲树（页面结构）                                           │
└──────────────────────────────────────────────────────────────┘

数据绑定

绑定实体数据

表格组件数据绑定
├── 数据源：Employee 实体
├── 查询条件：{ status: 'active', departmentId: currentUser.departmentId }
├── 排序：created_at DESC
├── 分页：每页 20 条
└── 列配置：
    ├── 姓名 → employee.name
    ├── 部门 → employee.department.name（关联查询）
    ├── 状态 → employee.status（枚举显示）
    └── 操作 → 编辑/删除按钮

绑定 API 数据

绑定外部 API
├── API：GET /api/weather?city=${city}
├── 触发时机：页面加载时 / 城市变化时
├── 数据映射：
│   ├── 温度 → response.data.temperature
│   └── 天气 → response.data.weather
└── 加载状态：显示 Loading 动画

表单数据绑定

表单双向绑定
├── 输入框 ↔ formData.name
├── 下拉框 ↔ formData.departmentId
│   └── 选项来源：Department 实体列表
└── 日期选择器 ↔ formData.hireDate

样式配置

主题定制

主题配置
├── 主色调（影响按钮、链接、选中状态）
├── 字体（字体族、基础字号）
├── 圆角（组件圆角大小）
└── 间距（组件内外边距基准值）

响应式布局

断点配置
├── 桌面端（> 1200px）：显示完整布局
├── 平板端（768-1200px）：侧边栏折叠
└── 移动端（< 768px）：单列布局，底部导航

组件响应式配置
├── 在移动端隐藏某些列（表格）
├── 在移动端改变布局方向（Flex）
└── 在移动端调整字号

高级功能

条件渲染

// 按钮只有管理员可见
visible: currentUser.roles.includes('admin')

// 编辑按钮只有数据创建者可见
visible: record.createdBy === currentUser.id

// 金额字段只有财务可见
visible: currentUser.department === 'finance'

动态样式

// 状态标签颜色
style.backgroundColor: {
  'active': '#52c41a',
  'inactive': '#ff4d4f',
  'pending': '#faad14'
}[record.status]

// 超期任务高亮
style.color: new Date(record.dueDate) < new Date() ? 'red' : 'inherit'

自定义 CSS

对于设计器无法满足的样式需求，可以直接编写 CSS：

/* 自定义表格斑马纹 */
.custom-table .ant-table-row:nth-child(even) {
  background-color: #fafafa;
}

/* 自定义卡片悬停效果 */
.employee-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transition: all 0.3s ease;
}