201 lines
3.7 KiB
Markdown
201 lines
3.7 KiB
Markdown
# 组件说明文档
|
||
|
||
## 已完成的组件
|
||
|
||
### 1. Sidebar 组件
|
||
**文件**: `components/Sidebar.tsx`
|
||
|
||
左侧导航栏，包含：
|
||
- Logo 展示
|
||
- 7个导航菜单项（Assets, ALP, Swap, Lending, Transparency, Ecosystem, Points）
|
||
- Global TVL 信息卡片
|
||
- FAQs 链接
|
||
- 激活状态管理
|
||
|
||
**使用示例**:
|
||
```tsx
|
||
import Sidebar from "@/components/Sidebar";
|
||
<Sidebar />
|
||
```
|
||
|
||
---
|
||
|
||
### 2. NavItem 组件
|
||
**文件**: `components/NavItem.tsx`
|
||
|
||
可复用的导航项组件，支持：
|
||
- 图标展示
|
||
- 文本标签
|
||
- 激活/未激活状态
|
||
- 点击事件处理
|
||
|
||
**Props**:
|
||
- `icon`: 图标路径
|
||
- `label`: 显示文本
|
||
- `isActive`: 是否激活
|
||
- `onClick`: 点击回调函数
|
||
|
||
---
|
||
|
||
### 3. TopBar 组件
|
||
**文件**: `components/TopBar.tsx`
|
||
|
||
顶部导航栏，包含：
|
||
- 面包屑导航（ASSETX > Product > Detail）
|
||
- 钱包按钮
|
||
- 地址按钮（0x12...4F82）
|
||
|
||
**使用示例**:
|
||
```tsx
|
||
import TopBar from "@/components/TopBar";
|
||
<TopBar />
|
||
```
|
||
|
||
---
|
||
|
||
### 4. Breadcrumb 组件
|
||
**文件**: `components/Breadcrumb.tsx`
|
||
|
||
面包屑导航组件，支持：
|
||
- 多级导航展示
|
||
- 自动添加分隔符（>）
|
||
- 最后一项高亮显示
|
||
|
||
**Props**:
|
||
```typescript
|
||
interface BreadcrumbItem {
|
||
label: string;
|
||
href?: string;
|
||
}
|
||
|
||
interface BreadcrumbProps {
|
||
items: BreadcrumbItem[];
|
||
}
|
||
```
|
||
|
||
**使用示例**:
|
||
```tsx
|
||
import Breadcrumb from "@/components/Breadcrumb";
|
||
|
||
const items = [
|
||
{ label: "ASSETX" },
|
||
{ label: "Product" },
|
||
{ label: "Detail" }
|
||
];
|
||
|
||
<Breadcrumb items={items} />
|
||
```
|
||
|
||
---
|
||
|
||
### 5. TabNavigation 组件
|
||
**文件**: `components/TabNavigation.tsx`
|
||
|
||
标签页导航组件，支持：
|
||
- 多个标签切换
|
||
- 激活状态下划线
|
||
- 点击事件回调
|
||
- 默认激活标签设置
|
||
|
||
**Props**:
|
||
```typescript
|
||
interface Tab {
|
||
id: string;
|
||
label: string;
|
||
}
|
||
|
||
interface TabNavigationProps {
|
||
tabs: Tab[];
|
||
defaultActiveId?: string;
|
||
onTabChange?: (tabId: string) => void;
|
||
}
|
||
```
|
||
|
||
**使用示例**:
|
||
```tsx
|
||
import TabNavigation from "@/components/TabNavigation";
|
||
|
||
const tabs = [
|
||
{ id: "overview", label: "Overview" },
|
||
{ id: "description", label: "Asset Description" },
|
||
{ id: "analytics", label: "Analytics" },
|
||
];
|
||
|
||
<TabNavigation
|
||
tabs={tabs}
|
||
defaultActiveId="overview"
|
||
onTabChange={(tabId) => console.log(tabId)}
|
||
/>
|
||
```
|
||
|
||
---
|
||
|
||
### 6. ContentSection 组件
|
||
**文件**: `components/ContentSection.tsx`
|
||
|
||
内容区域容器组件，包含：
|
||
- TabNavigation 集成
|
||
- 内容展示区域
|
||
- 标签状态管理
|
||
|
||
**使用示例**:
|
||
```tsx
|
||
import ContentSection from "@/components/ContentSection";
|
||
<ContentSection />
|
||
```
|
||
|
||
---
|
||
|
||
## 组件依赖关系
|
||
|
||
```
|
||
page.tsx
|
||
├── Sidebar
|
||
│ └── NavItem (多个)
|
||
├── TopBar
|
||
│ └── Breadcrumb
|
||
└── ContentSection
|
||
└── TabNavigation
|
||
```
|
||
|
||
## 样式系统
|
||
|
||
所有组件使用 Tailwind CSS，自定义颜色：
|
||
|
||
```typescript
|
||
// tailwind.config.ts
|
||
colors: {
|
||
'bg-subtle': '#f9fafb',
|
||
'bg-surface': '#ffffff',
|
||
'border-normal': '#e5e7eb',
|
||
'border-gray': '#f3f4f6',
|
||
'text-primary': '#111827',
|
||
'text-tertiary': '#9ca1af',
|
||
'fill-secondary-click': '#f3f4f6',
|
||
}
|
||
```
|
||
|
||
## 状态管理
|
||
|
||
当前使用 React Hooks 进行本地状态管理：
|
||
- `Sidebar`: 使用 `useState` 管理激活菜单项
|
||
- `TabNavigation`: 使用 `useState` 管理激活标签
|
||
- 所有组件都是客户端组件（"use client"）
|
||
|
||
## 图标资源
|
||
|
||
所有图标位于 `public/` 目录：
|
||
- `logo.svg` - ASSETX Logo
|
||
- `icon-assets.svg` - Assets 图标
|
||
- `icon-alp.svg` - ALP 图标
|
||
- `icon-swap.svg` - Swap 图标
|
||
- `icon-lending.svg` - Lending 图标
|
||
- `icon-transparency.svg` - Transparency 图标
|
||
- `icon-ecosystem.svg` - Ecosystem 图标
|
||
- `icon-points.svg` - Points 图标
|
||
- `icon-chevron-right.svg` - 面包屑箭头
|
||
- `icon-wallet.svg` - 钱包图标
|
||
- `icon-notification.svg` - 通知图标
|
||
- `icon-copy.svg` - 复制图标
|
||
- `icon-faq.png` - FAQ 图标
|