initial commit

2026-02-04 13:39:12 +08:00
commit 199940e958
175 changed files with 19963 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,188 @@
+# 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) - 字体系统配置详解