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

运行项目

# 安装依赖
npm install

# 开发模式运行
npm run dev

# 构建生产版本
npm run build

# 启动生产服务器
npm start

开发服务器将在 http://localhost:3000 启动。

进度跟踪

已完成 ✅

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

进行中 🚧

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

待开发 📋

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

文档

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