assetx/COMPONENTS.md

组件说明文档

已完成的组件

1. Sidebar 组件

文件: components/Sidebar.tsx

左侧导航栏，包含：

• Logo 展示
• 7个导航菜单项（Assets, ALP, Swap, Lending, Transparency, Ecosystem, Points）
• Global TVL 信息卡片
• FAQs 链接
• 激活状态管理

使用示例:

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）

使用示例:

import TopBar from "@/components/TopBar";
<TopBar />

---

4. Breadcrumb 组件

文件: components/Breadcrumb.tsx

面包屑导航组件，支持：

• 多级导航展示
• 自动添加分隔符（>）
• 最后一项高亮显示

Props:

interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface BreadcrumbProps {
  items: BreadcrumbItem[];
}

使用示例:

import Breadcrumb from "@/components/Breadcrumb";

const items = [
  { label: "ASSETX" },
  { label: "Product" },
  { label: "Detail" }
];

<Breadcrumb items={items} />

---

5. TabNavigation 组件

文件: components/TabNavigation.tsx

标签页导航组件，支持：

• 多个标签切换
• 激活状态下划线
• 点击事件回调
• 默认激活标签设置

Props:

interface Tab {
  id: string;
  label: string;
}

interface TabNavigationProps {
  tabs: Tab[];
  defaultActiveId?: string;
  onTabChange?: (tabId: string) => void;
}

使用示例:

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 集成
• 内容展示区域
• 标签状态管理

使用示例:

import ContentSection from "@/components/ContentSection";
<ContentSection />

---

组件依赖关系

page.tsx
├── Sidebar
│   └── NavItem (多个)
├── TopBar
│   └── Breadcrumb
└── ContentSection
    └── TabNavigation

样式系统

所有组件使用 Tailwind CSS，自定义颜色：

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