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

# Super Tabs

##资源链接

### 任务链接

https://project.feishu.cn/v2qint/projectm/detail/6435266680

### Figma 设计稿链接

https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=11756-200013

### Figma 完整 MCP 链接

Analyze the structure of this selection, and make a plan for implementation.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=11756-200014&m=dev

## 组件概述

- 组件名称（英文）： Super Tabs
- 组件编号： pcp_na_super_tabs_V1.0
- 组件类型： Pro Components
- 组件分类：Navigation
- 简介: SuperTabs 是通用导航框架封装的全能型 Tab 组件，用于构建多种导航模式（如菜单、标签页、导航栏等），支持动态配置、多级嵌套和自定义样式，覆盖横向/竖向布局、动态增删、样式自定义等核心能力。

## 2. 版本

- 版本： 1.0
- 更新简介: 首次发布

## 3. 需求来源

- 统一不同业务场景（如电商、内容管理）的导航逻辑，避免重复开发。
- 统一标签页、移动端底部导航栏、页面锚点导航等交互逻辑。
- 支持复杂层级结构（一级、二级、三级嵌套），例如商品分类或页面锚点导航。
- 提供动态操作能力（排序、显隐、增删改查），满足权限控制和用户自定义需求。
- 不同产品有不同变体（如顶部标签、侧边标签、底部图标＋文字标签、锚点滚动标签等）。

## 4. 组件设计目的

1. 统一导航逻辑：将多种导航模式（菜单、标签页、锚点标签等）整合为单一组件体系，减少开发冗余。
2. 提高复用性：通过配置项快速适配不同场景（如移动端 TabBar 或桌面端 NavBar），降低跨模块实现成本。
3. 保证一致性：视觉风格、交互反馈、状态切换统一，提高用户体验。
4. 增强灵活性：支持自定义样式（颜色、尺寸、布局）和功能（徽标显示、层级控制），适应多样化需求。
5. 直观性 ​：用户能清晰理解当前导航状态和选项。
6. 极致配置化：通过参数切换模式（mode）、布局（orientation）、样式（type）。

## 适用场景

- 电商平台： 商品分类导航
- 后台系统：权限管理菜单
- 桌面端侧边导航：后台管理系统左侧菜单（三级嵌套权限控制），支持折叠/展开
- 用户自定义导航：门户网站自定义首页导航栏（用户拖拽调整顺序/隐藏栏目）
- 锚点导航：长页面产品介绍（快速定位“功能/价格/案例”），滚动时自动高亮当前章节

## UI 设计

### 6.1 展示样式

遵循以下结构设计：
由 N 个 PisellCards.XXX 形成 TabItem;
由 PisellBasicGrid 进行 dataSource 渲染和布局;
由 PisellScrollView 进行滚动;

最终形成 Super Tabs 组件。

## 7. 配置项

SuperTabs 的 Props：

1. 支持 value 和 onChange 控制当前激活的 TabItem;
2. 支持 dataSource 设置数据源。
3. 支持自定义 TabItem 的渲染;
4. 支持透传 PisellCards PisellBasicGrid PisellScrollView 的 Props;

## 8. 内置以下 Card 组件

PisellCards.TabCard
PisellCards.MenuCard
PisellCards.IconCard
PisellCards.TextCard
PisellCards.ImageCard
PisellCards.VideoCard
PisellCards.AudioCard
PisellCards.LinkCard
PisellCards.ButtonCard
PisellCards.FormCard
PisellCards.TableCard
PisellCards.ChartCard
