初始化 assetx 项目，首次提交

2026-01-26 17:44:27 +08:00
commit f901590dce
492 changed files with 25203 additions and 0 deletions
--- a/COMPONENTS.md
+++ b/COMPONENTS.md
@@ -0,0 +1,200 @@
+# 组件说明文档
+
+## 已完成的组件
+
+### 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 图标