---
id: shared-ui
name: 共享 UI 组件库
area: shared
status: concept
---

## 概述

跨 app 复用的 React UI 组件集合，以 packages/ui 形式发布到 workspace 内部。面向移动端适配（触摸友好、响应式）。

## 任务卡

### 💭 搭建组件库骨架
- status: concept
- complexity: M
- files: packages/ui/package.json, packages/ui/src/index.ts, packages/ui/vite.config.ts
- acceptance: packages/ui 可被 apps/* 通过 workspace:* 引入，支持 tree-shaking，导出类型声明文件

### 💭 基础原子组件
- status: concept
- complexity: M
- files: packages/ui/src/components/Button.tsx, packages/ui/src/components/Input.tsx, packages/ui/src/components/Card.tsx
- acceptance: Button/Input/Card 组件覆盖常用变体，props 类型完整，支持 className 扩展

### 💭 移动端导航组件
- status: concept
- complexity: M
- files: packages/ui/src/components/BottomNav.tsx, packages/ui/src/components/TopBar.tsx
- acceptance: BottomNav 支持图标+文字标签，TopBar 支持返回按钮和标题插槽，两者均适配 safe-area-inset

### 💭 反馈类组件（Toast / Modal / Loading）
- status: concept
- complexity: M
- files: packages/ui/src/components/Toast.tsx, packages/ui/src/components/Modal.tsx, packages/ui/src/components/Loading.tsx
- acceptance: Toast 支持 success/error/info 三种类型，Modal 支持受控和非受控，Loading 可全屏覆盖