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

# 资源链接

## 任务链接

&#x20;

## Figma链接

横向
Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=14225-20058&m=dev
Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=14225-20125&m=dev

竖向
Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=14226-21944&m=dev
Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=14226-22025&m=dev

# 1. 组件概述

| **组件名称（英文）** | Time Navigator               |
|--------------|------------------------------|
| **组件编号**     | pcp\_de\_timeNavigator\_V1.0 |
| **组件类型**     | Pro Components               |
| **组件分类**     | Data Entry                   |

# 2. 版本

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

# 3. 组件概述

## 3.1 组件简介

Time Navigator是一个可拖动的时间导航轴组件，用于在指定时间范围内进行时间浏览、选择与控制。该组件不接入业务数据，仅提供时间刻度渲染、当前时间指示、拖动浏览、吸附选择与时间变更事件输出能力，是多视图共享的全局时间控制器。

## 3.2 设计目标

1. **统一时间导航交互模型**

建立一套标准化时间拖动与选择逻辑，避免各业务模块重复实现时间轴。

* **解耦时间控制与业务数据**

组件仅负责时间展示与交互输出，不承担业务状态渲染与数据计算。

* **支持高频拖动与流畅浏览体验**

保证拖动顺滑、吸附稳定、实时预览低延迟。

* **支持跨端复用与多视图联动**

同一组件可应用于 Floor Plan、Timeline、排班视图、统计视图等。

* **可扩展为多变体时间控制器**

支持横向/纵向、轴移动/指针移动、实时模式/浏览模式等变体。

# 4. 适用场景

1. 餐饮系统 Floor Plan 时间浏览

2. 预订系统时间跳转与创建

3. 日程/排班时间轴导航

4. 统计报表时间快速跳转

5. Kiosk 或大屏实时状态展示

# 5. UI 设计

## 5.1 组件构成

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

### 5.1.1 **AxisViewport（时间轴容器）**

* 固定高度

* 控制可视宽度

* 可内部横向滚动

* 作为时间坐标系的可视窗口

### 5.1.2 **BackgroundLayer（背景区间层）**

用于表达时间区间状态，不涉及业务数据，仅负责视觉区分：

可支持：

* 当前时间渐变区

* 禁用时间段

* 营业时间范围

* 选中时间区间

该层在 ScaleLayer 下方。

### 5.1.3 **ScaleLayer（刻度层）**

负责渲染时间刻度与标签：

包含：

* Major Tick（整点刻度）

* Minor Tick（细分刻度，如 15min）

* Time Label（小时文本）

* 日期分隔线（跨天时）

该层可横向滚动。

### 5.1.4 **CursorLayer（时间指示器层）**

用于展示当前选中时间。

包含：

* 竖线（Cursor Line）

* 时间气泡（Time Bubble）

支持两种模式：

#### **模式 A：Axis Moves（默认推荐）**

* 指示器固定在视口中央

* 时间刻度移动

* 视觉稳定

* 更符合餐饮系统时间浏览习惯

#### **模式 B：Cursor Moves**

* 刻度固定

* 指示器在轴上移动

* 更适合排班系统

### 5.1.5 **GestureLayer（交互层）**

负责：

* 拖动监听

* 点击跳转

* 惯性滑动

* 键盘控制

* 吸附逻辑触发

该层不负责数据，仅触发事件。

## 5.2 展示样式

* 组件默认展示样式

  * 时间从左到右递增

  * 支持跨天

  * 可配置时间粒度

  * 当前时间可实时推进

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

* 竖向模式

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

### 5.2.1 交互步骤

1. 当前时间模式

必须支持：

* 实时时钟跟随

* 点击 “Now” 跳回当前

* 当前时间光标闪动

- 自动吸附至最近 step刻度

- 点击刻度跳转至该时间点

- 点击Now按钮，时间轴自动回到当前时间并进入 Realtime

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

* 组件宽度默认撑满整个容器，当宽度减少时，开启横向滚动

* 当总刻度宽度小于组件整体宽度时，所有刻度平分剩余空间宽度

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

### 5.4.1 颜色规范

### 5.4.2 尺寸规范

### 5.4.3 间距规范

# 6. 配置项

## 6.1 样式自定义

* 可以在默认基础上更改容器的样式，背景、阴影、圆角、padding、gap、边框

* 可更改组件的宽度和高度，默认为宽度撑满容器

* 可以开启和关闭刻度分割线，可以更改大刻度和小刻度的颜色

*

## 6.2 基础配置

* 可以配置横向展示还是竖向展示

* 默认为一小时为一个大刻度，半小时为一个小刻度，可以更改这个大小刻度

* 默认显示当前时间刻度和当前时间气泡（12:30 / 15:57），可以更改颜色

* 默认拖动指针模式：固定刻度条，拖动中间指针，可更改为拖动轴模式：轴整体滑动，中间有固定中线

* 默认支持点击跳转，点击刻度时直接跳转当前刻度

* 过去时间淡化，可以更改背景颜色

* 可配置营业时间范围（如 10:00–23:00），可支持24小时完整刻度

* 支持横向滚动，滚动时显示左右箭头，使用Scroll View组件

* 默认开启时间吸附，拖动后自动吸附到：整点、15分钟、30分钟、自定义粒度

*

# 7. 示例

