---
title: 设计文档
order: 2
category: pro
---

# 资源链接

# 1. 组件概述

| **组件名称（英文）** | Floor Map Layout              |
|--------------|-------------------------------|
| **组件编号**     | pcp\_dd\_floorMapLayout\_V1.0 |
| **组件类型**     | Pro Components                |
| **组件分类**     | Data Display                  |

# 2. 版本

| **版本**   | 1.0  |
|----------|------|
| **更新简介** | 首次发布 |

# 3. 简介

Floor Map Layout 是一种“空间布局视图”的 Layout Pro
组件：在二维平面中按坐标渲染资源（桌台/房间/工位/设备等），并将资源状态映射为颜色/边框/标签等视觉表现，同时输出点击/悬停/缩放/平移等交互事件。该组件仅负责展示与交互，不负责数据获取与业务规则。

> 该组件定位为 Sales Management 框架中的 Layout 扩展方向，属于纯展示层：负责空间布局视觉呈现、资源图形渲染、状态颜色映射；不负责业务逻辑与数据获取，只接收资源配置与状态数据并输出交互事件。

# 4. 设计目标

1. 空间可视化：支持二维平面布局，以图形化方式展示资源空间分布。

2. 资源通用性：不限于桌台/房间，可适配任何资源类型（医生、教练、设备等）。

3. 布局可配置：支持通过配置定义资源位置、大小与形状（Phase 1 以矩形/正方形为主）。

4. 状态可映射：支持将资源绑定数据的状态映射为视觉表现（颜色/边框/标签等）。

5. 可扩展性：为后续 Plus 组件层提供稳定接口，支持不同业务场景的拓展。

# 5. 适用场景

# 6. UI 设计

## 6.1 组件结构

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=ZWFjYjFhNDUxYmU2MThjN2RlMDFhYjMyYmNhYmU2M2FfYW5La2I1S2tKcVg5N1Nhbk9wNXVmb3JaRUpKbHZOUWFfVG9rZW46WlNQQmJSUjZqb0pNUWR4QUlGTGNmYzR4bkxjXzE3NzA5NDYzMDI6MTc3MDk0OTkwMl9WNA)

* **底层区域**：地图的最底层，提供坐标

* **展示层**：地图主体区域，承载“资源图形”的渲染与状态呈现。

* **视图控制**：仅影响“如何看”，不影响数据拉取；默认包含缩放、复位、区域定位等。

## 6.2 平面图编辑态（产品/界面结构）

在「楼层图 / 平面图」业务中，除底层 + 展示层 + 视图控制外，编辑模式还提供：

* **顶栏**：**非全屏**为多楼层 **Tab + 全屏**入口；**全屏**后 Tab 仍在，并含保存、退出全屏、区域定位（与 `controls` 一致）。
* **左侧工具栏**：图元卡片可**拖拽到画布**生成实例；亦可点击后画布点击落点；数据源类图元可先绑定数据行；保存见
  `toolbarShowSave`（非全屏时多在侧栏）。
* **右侧编辑面板**：选中图元后编辑坐标、名称、所属画布；**数据源记录**区可切换绑定行，并以「简单列表单」或「业务自定义表单」编辑行字段。

视觉与间距遵循 Pisell 设计 token；实现侧栏与主画布为 **双栏 flex**，地图区需避免异常 min-height 撑破外层（实现上已做编辑态内容区下限与
flex 约束）。详细实现结构见 [开发文档](./pisellFloorMapLayout.$tab-dev.md)。

## 6.3 展示样式

* 本期默认样式，只做矩形，默认规则排列

Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=14004-1168&m=dev

后期示例，开启无规则排列，支持形状自定义

Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=13998-648&m=dev

## 6.4 响应式与自适应规则

* **跨端输入方式自适应**：

  * PC：鼠标滚轮缩放、鼠标拖拽平移、hover（可开关）。

  * 移动端/Pad：捏合缩放与手势拖拽平移。

## 6.5 **视觉设计规范（需要主题模块完成）**

### 6.5.1 颜色规范

### 6.5.2 尺寸规范

### 6.5.3 间距规范

# 7. 交互准则

# 8. 配置项

## 8.1 样式自定义

* map底层的底色可以自定义，无背景 / 纯色背景 / 图片背景 / SVG 背景

* 显示底层网格线，默认不展示

* map底层的padding、gap可以进行自定义

## 8.2 功能配置

* 默认为规则排序，Z字形排序，可开启无规则排序

* 支持自定义展示层形状，矩形、圆形、三边形、不规则形状和支持上传底图

* **zoom**：默认缩放、最小/最大缩放、步进（默认 50%-200%，10%）

* 是否允许平移、边界策略，默认不开启

* 显示/隐藏；包含项（缩放、复位、区域定位）

* 当规则排序时，可自定义展示一行几列

* 可自定义底层坐标的可吸附间隔值

