assetx/COMPONENTS.md

# 组件说明文档

## 已完成的组件

### 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 图标