# AssetX Dashboard - Next.js

这是一个使用 Next.js 和 TypeScript 复刻的 DeFi 资产管理平台界面。

## 技术栈

- **Next.js 15** - React 框架
- **TypeScript** - 类型安全
- **Tailwind CSS** - 样式框架
- **React 19** - UI 库

## 项目结构

```
asset-dashboard-next/
├── app/                    # Next.js App Router
│   ├── layout.tsx         # 根布局
│   ├── page.tsx           # 首页
│   └── globals.css        # 全局样式
├── components/               # React 组件 (14个)
│   ├── Sidebar.tsx           # 侧边栏主组件
│   ├── NavItem.tsx           # 导航项组件
│   ├── TopBar.tsx            # 顶部导航栏组件
│   ├── Breadcrumb.tsx        # 面包屑导航组件
│   ├── TabNavigation.tsx     # 标签页导航组件
│   ├── ContentSection.tsx    # 内容区域组件
│   ├── OverviewTab.tsx       # Overview 标签页主组件
│   ├── ProductHeader.tsx     # 产品标题组件
│   ├── StatsCards.tsx        # 数据统计卡片组件
│   ├── AssetOverviewCard.tsx # 资产概览卡片组件
│   ├── APYHistoryCard.tsx    # APY 历史图表组件
│   └── AssetDescriptionCard.tsx # 资产描述卡片组件
├── public/                # 静态资源
│   ├── logo.svg          # ASSETX Logo
│   └── icon-*.svg        # 导航图标
├── tailwind.config.ts     # Tailwind 配置
├── tsconfig.json          # TypeScript 配置
└── package.json           # 项目依赖

```

## 已完成功能

### ✅ 左侧菜单栏 (Sidebar)

- **Logo 展示**: 顶部 ASSETX 品牌标志
- **导航菜单**:
  - Assets (资产)
  - ALP (资产流动性池)
  - Swap (交易兑换)
  - Lending (借贷)
  - Transparency (透明度)
  - Ecosystem (生态系统)
  - Points (积分)
- **激活状态**: 点击菜单项显示激活背景色
- **Global TVL 展示**: 显示全局总锁仓价值 $465,000,000
- **FAQs 链接**: 底部帮助入口

### ✅ 顶部导航栏 (TopBar)

- **面包屑导航**: ASSETX > Product > Detail
- **钱包按钮**: 连接钱包图标和通知
- **地址按钮**: 显示钱包地址 0x12...4F82，带复制图标

### ✅ 标签页导航 (TabNavigation)

- **5个标签页**: Overview, Asset Description, Analytics, Performance Analysis, Asset Custody & Verification
- **激活状态**: 点击切换标签，激活标签底部显示下划线
- **状态管理**: 使用 React Hooks 管理当前激活标签

### ✅ Overview 标签页内容

**产品标题区域** (ProductHeader):
- 产品 Logo 展示
- 中英文产品名称：高盈美股量化策略 / High-Yield US Equity Quantitative Strategy
- 智能合约地址：Contract: 0x1b19...4f2c

**数据统计卡片** (StatsCards):
- APY: 22% (+2.5% WoW) - 橙色高亮
- Total TVL: $240.5M (+$2.3M Today)
- 24h Volume: $12.8M (↑ 23% vs Avg)
- Your Balance: 0.00 ($0.00 USD)
- Your Earnings: $0.00 (All Time)

**资产概览卡片** (AssetOverviewCard):
- Asset Overview 标题 + Medium Risk 标签
- Underlying Assets: US Equity Index
- Maturity Range: 05 Feb 2026
- Cap: $50,000,000
- Min. Investment: 100 USDC
- Pool Capacity: 75% (带进度条)
- Current Price: 1 GY-US = 1.04 USDC

**APY 历史图表** (APYHistoryCard):
- APY History / Price History 切换标签
- Last 30 days 时间范围
- 简单柱状图展示
- Highest: 24.8% / Lowest: 18.2%

**资产描述** (AssetDescriptionCard):
- 完整的产品描述文本
- 中英文混合内容
- 机构级 RWA 产品介绍

### 组件化设计

**导航组件** (6个):
- `Sidebar.tsx`: 主侧边栏组件，包含完整布局和状态管理
- `NavItem.tsx`: 可复用的导航项组件，支持激活状态切换
- `TopBar.tsx`: 顶部导航栏，包含面包屑和操作按钮
- `Breadcrumb.tsx`: 可复用的面包屑导航组件
- `TabNavigation.tsx`: 可复用的标签页导航组件
- `ContentSection.tsx`: 内容区域容器组件，管理标签页切换

**Overview 内容组件** (6个):
- `OverviewTab.tsx`: Overview 标签页主容器，管理布局
- `ProductHeader.tsx`: 产品标题和基本信息
- `StatsCards.tsx`: 5个数据统计卡片网格
- `AssetOverviewCard.tsx`: 资产概览详细信息
- `APYHistoryCard.tsx`: 带标签切换的历史数据图表
- `AssetDescriptionCard.tsx`: 产品描述文本内容

**总计**: 12个功能组件 + 2个布局组件 = 14个组件

### 样式特点

- **完整复刻原型设计**: 像素级还原原型 UI
- **响应式布局**: Grid/Flexbox 布局系统
- **交互效果**: 悬停、点击、激活状态
- **Tailwind CSS**: 自定义颜色、字号、间距主题
- **字体系统**:
  - Inter (400/500/700/800) - UI 文本
  - JetBrains Mono (500/700/800) - 代码/数字
  - 详见 [FONT-SYSTEM.md](./FONT-SYSTEM.md)

## 运行项目

```bash
# 安装依赖
npm install

# 开发模式运行
npm run dev

# 构建生产版本
npm run build

# 启动生产服务器
npm start
```

开发服务器将在 [http://localhost:3000](http://localhost:3000) 启动。

## 进度跟踪

### 已完成 ✅

- [x] 左侧导航栏 (Sidebar + NavItem)
- [x] 顶部导航栏 (TopBar + Breadcrumb)
- [x] 标签页导航 (TabNavigation)
- [x] Overview 标签页完整内容
  - [x] 产品标题和基本信息
  - [x] 5个数据统计卡片
  - [x] 资产概览卡片
  - [x] APY 历史图表
  - [x] 资产描述
- [x] 字体系统配置 (Inter + JetBrains Mono)

### 进行中 🚧

- [ ] 右侧交易面板 (Mint/Swap/Deposit 表单)
- [ ] Asset Description 标签页内容
- [ ] Analytics 标签页内容

### 待开发 📋

- [ ] Performance Analysis 标签页 (日历视图)
- [ ] Asset Custody & Verification 标签页 (验证表格)
- [ ] 协议信息模块
- [ ] Season 1 Rewards 模块
- [ ] 响应式适配移动端
- [ ] 深色模式支持

## 文档

- [README.md](./README.md) - 项目总览
- [COMPONENTS.md](./COMPONENTS.md) - 组件 API 文档
- [FONT-SYSTEM.md](./FONT-SYSTEM.md) - 字体系统配置详解