189 lines
5.9 KiB
Markdown
189 lines
5.9 KiB
Markdown
# 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) - 字体系统配置详解
|