# Flame-Plus 开发页面结构分析

> 分析时间: 2026-04-06
> 页面 URL: http://localhost:5173/
> 页面标题: flame-plus

## 页面总览

页面分为两大区域：**背景层**（主页面内容）和**前景对话框**（全屏表单设计器）。

---

## 1. 背景层 - 主页面

### 1.1 顶部工具栏

| 元素 | 类型 | 说明 |
|------|------|------|
| 从缓存回显 | button | 从 localStorage 恢复表单设计器状态 |
| 清空缓存 | button | 清除 localStorage 中的缓存数据 |
| 关闭全屏设计器 | button | 关闭当前对话框 |
| 提示文本 | static text | "保存时会写入 localStorage，刷新后自动回显" |

### 1.2 flmCascader 测试区域

- **标题**: "flmCascader 选项直传"
- **级联选择器**: 只读文本框，placeholder="请选择（直传 options 测试）"
- **选中值显示**: "选中值：（空）"

### 1.3 flmDynamicForm 回显测试区域

- **标题**: "flmDynamicForm 回显测试"

#### 折叠面板 1: 基本信息（已展开）

| 字段 | 值 |
|------|------|
| 姓名 | 张三 |
| 性别 | 1 |

#### 折叠面板 2: 家庭信息（已展开）

**家庭信息 1:**

| 字段 | 值 |
|------|------|
| 姓名 | 李四 |
| 性别 | 选项2 |

**家庭信息 2:**

| 字段 | 值 |
|------|------|
| 姓名 | 王五 |
| 性别 | 选项1 |

---

## 2. 前景对话框 - 全屏表单设计器（核心区域）

对话框为模态（modal）状态，占据整个视口，是页面的核心交互区域。

### 2.1 对话框头部

| 元素 | 类型 | 说明 |
|------|------|------|
| Close this dialog | button | 关闭设计器对话框 |

### 2.2 左侧面板 - 控件列表

分为以下 Tab 分组：

#### Tab: 预设
- 密码

#### Tab: 业务组件
- 示例业务块

#### Tab: 基础控件
- 输入框
- 选择器
- 数字输入框
- 日期选择器
- 时间选择器
- 时间选择
- 级联选择器
- 多选框
- 取色器
- 单选框
- 评分
- 查看
- 滑块
- 开关
- 穿梭框

#### Tab: 表单插槽
（当前选中状态）

### 2.3 中间区域 - 表单设计区

#### 操作按钮行

| 按钮 | 说明 |
|------|------|
| 预览 | 预览当前设计结果 |
| 保存 | 保存设计到缓存 |
| 重置 | 重置设计区 |
| 新增分组 | 添加新的表单分组 |

#### 功能按钮区

- 提交
- 取消
- 重置

### 2.4 右侧面板 - 属性编辑区

- **标题**: "属性"
- **提示**: "点击设计区中的控件以编辑属性"

---

## 3. 页面结构树形图

```
RootWebArea "flame-plus"
├── [工具栏]
│   ├── button "从缓存回显"
│   ├── button "清空缓存"
│   └── button "关闭全屏设计器"
├── [提示信息]
├── [flmCascader 测试]
│   ├── textbox (readonly)
│   └── 选中值文本
├── [flmDynamicForm 测试]
│   ├── 折叠面板: 基本信息
│   │   └── form (姓名, 性别)
│   └── 折叠面板: 家庭信息
│       ├── form 1 (姓名, 性别)
│       └── form 2 (姓名, 性别)
└── dialog (modal, 全屏设计器)
    ├── header (关闭按钮)
    ├── [左侧控件面板]
    │   ├── tab: 预设 → 密码
    │   ├── tab: 业务组件 → 示例业务块
    │   ├── tab: 基础控件 → 15个基础控件
    │   └── tab: 表单插槽
    ├── [中间设计区]
    │   ├── 操作按钮 (预览/保存/重置/新增分组)
    │   └── 功能按钮 (提交/取消/重置)
    └── [右侧属性面板]
        └── 属性编辑区
```

## 4. 组件映射关系

| 页面区域 | 对应组件 | 类型 |
|----------|----------|------|
| 级联选择器测试 | flmCascader | 基础组件 (base) |
| 动态表单测试 | flmDynamicForm | 复合组件 (complex) |
| 折叠面板 | el-collapse (Element-Plus) | 基础组件 |
| 全屏设计器 | 自定义对话框 | 页面组件 |
| 控件列表面板 | 拖拽控件面板 | 设计器内部组件 |
| 表单设计区 | 设计画布 | 设计器内部组件 |
| 属性编辑区 | 属性面板 | 设计器内部组件 |
