initial commit

2026-02-04 13:39:12 +08:00
commit 199940e958
175 changed files with 19963 additions and 0 deletions
--- a/STYLE-FIXES.md
+++ b/STYLE-FIXES.md
@@ -0,0 +1,272 @@
+# 样式修正记录
+
+## 修正内容
+
+### 1. Your Earnings 数字颜色 ✅
+
+**问题**: Your Earnings 卡片的数字显示为黑色
+
+**原型样式**:
+```css
+._0-002 {
+  color: var(--green-normal-1, #10b981); /* 绿色 */
+}
+```
+
+**修正**:
+- 文件: `components/StatsCards.tsx`
+- 修改: 为 Your Earnings 卡片添加 `valueColor="#10b981"` 属性
+- 结果: 数字显示为绿色 (#10b981)
+
+```tsx
+<StatCard
+  label="Your Earnings"
+  value="$0.00"
+  change="All Time"
+  changeColor="text-text-tertiary"
+  valueColor="#10b981"  // ✅ 修正
+/>
+```
+
+---
+
+### 2. Asset Overview 布局 ✅
+
+**问题**: 标签和值是上下排列（垂直布局），应该左右排列（横向布局）
+
+**原型样式**:
+```css
+.component-3 {
+  display: flex;
+  flex-direction: row;              /* 横向布局 */
+  align-items: center;
+  justify-content: space-between;   /* 两端对齐 */
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+}
+```
+
+**修正前**:
+```tsx
+<div className="flex flex-col gap-3">  {/* 垂直布局 ❌ */}
+  <div className="flex items-center gap-2">
+    <Image ... />
+    <span>Underlying Assets</span>
+  </div>
+  <span>US Equity Index</span>
+</div>
+```
+
+**修正后**:
+```tsx
+<div className="flex items-center justify-between w-full">  {/* 横向布局 ✅ */}
+  <div className="flex items-center gap-1">
+    <Image ... />
+    <span>Underlying Assets</span>
+  </div>
+  <span>US Equity Index</span>
+</div>
+```
+
+**修改点**:
+- 文件: `components/AssetOverviewCard.tsx`
+- 外层容器: `flex-col` → `flex items-center justify-between`
+- 图标间距: `gap-2` → `gap-1` (4px)
+- 图标大小: 保持 20x24px
+- 字体大小: `text-body-default` → `text-body-small` (14px)
+- 字体粗细: `font-bold` → `font-medium` (500)
+
+---
+
+### 3. Medium Risk 标签样式 ✅
+
+**问题**: 标签样式不完整，缺少黄色圆点
+
+**原型样式**:
+```css
+.background-border {
+  background: var(--tag-yellow, #fffbf5);      /* 浅黄色背景 */
+  border-radius: var(--999, 999px);             /* 完全圆角 */
+  border-color: var(--border-yellow, #ffedd5);  /* 黄色边框 */
+  padding: 6px 12px 6px 12px;
+  gap: var(--item-spacing-xs, 8px);             /* 8px 间距 */
+}
+
+.background {
+  background: var(--other-yellow, #ffb933);     /* 黄色圆点 */
+  width: 6px;
+  height: 6px;
+  border-radius: 9999px;
+}
+
+.medium-risk {
+  color: var(--other-yellow, #ffb933);          /* 黄色文字 */
+  font-size: 12px;
+  font-weight: 600;                             /* semi-bold */
+}
+```
+
+**修正**:
+- 文件: `components/AssetOverviewCard.tsx`
+- 添加 6x6px 黄色圆点
+- 背景色: #fffbf5
+- 边框色: #ffedd5
+- 文字色: #ffb933
+- 字体粗细: 600 (semi-bold)
+- 圆角: 完全圆形 (rounded-full)
+
+```tsx
+<div
+  className="rounded-full border flex items-center gap-2 px-3 py-1.5"
+  style={{
+    backgroundColor: "#fffbf5",
+    borderColor: "#ffedd5",
+  }}
+>
+  <div
+    className="w-1.5 h-1.5 rounded-full flex-shrink-0"  {/* 6px x 6px 圆点 */}
+    style={{ backgroundColor: "#ffb933" }}
+  />
+  <span
+    className="text-xs font-semibold leading-4"
+    style={{ color: "#ffb933" }}
+  >
+    Medium Risk
+  </span>
+</div>
+```
+
+---
+
+## 样式对比总结
+
+| 组件 | 属性 | 原型 | 修正前 | 修正后 | 状态 |
+|------|------|------|--------|--------|------|
+| Your Earnings 数字 | 颜色 | #10b981 | #111827 | #10b981 | ✅ |
+| Overview Item | 布局 | 横向 (row) | 纵向 (column) | 横向 (row) | ✅ |
+| Overview Item | 对齐 | space-between | flex-start | space-between | ✅ |
+| Overview Item 图标 | 间距 | 4px | 8px | 4px | ✅ |
+| Overview Item 值 | 字号 | 14px | 16px | 14px | ✅ |
+| Overview Item 值 | 粗细 | 500 | 700 | 500 | ✅ |
+| Medium Risk 标签 | 背景色 | #fffbf5 | #fefce8 | #fffbf5 | ✅ |
+| Medium Risk 标签 | 边框色 | #ffedd5 | #fef3c7 | #ffedd5 | ✅ |
+| Medium Risk 标签 | 文字色 | #ffb933 | #ca8a04 | #ffb933 | ✅ |
+| Medium Risk 标签 | 圆点 | 有 (6px) | 无 | 有 (6px) | ✅ |
+| Medium Risk 标签 | 圆角 | 999px | 8px | 999px | ✅ |
+
+---
+
+## 原型 CSS 文件分析
+
+原型样式分布在 3 个文件中：
+
+### style.css (主样式文件)
+- 包含主要组件样式
+- 定义布局、间距、颜色
+- 大约 2485 行
+
+### style1.css (补充样式)
+- 特定文本样式
+- 组件变体样式
+- 大约 2324 行
+
+### style2.css (额外样式)
+- 扩展样式定义
+- 特殊组件样式
+- 大约 455 行
+
+### vars.css (变量定义)
+- CSS 变量占位符
+- 原型中几乎为空
+- 所有变量内联定义在其他文件中
+
+---
+
+## 关键颜色定义
+
+从原型中提取的精确颜色：
+
+```css
+/* 绿色 */
+--green-normal-1: #10b981
+
+/* 黄色系 */
+--tag-yellow: #fffbf5       /* 标签背景 */
+--border-yellow: #ffedd5    /* 标签边框 */
+--other-yellow: #ffb933     /* 文字和圆点 */
+
+/* 橙色 */
+--orange-normal-1: #ff6900  /* APY 颜色 */
+
+/* 灰色系 */
+--texticon-primary-1: #111827      /* 主文本 */
+--texticon-tertiary-3: #9ca1af     /* 次要文本 */
+--texticon-secondary-2: #4b5563    /* 描述文本 */
+
+/* 背景色 */
+--bg-subtle: #f9fafb              /* 浅灰背景 */
+--bg-surface-1: #ffffff           /* 白色背景 */
+
+/* 边框色 */
+--border-normal-1: #e5e7eb        /* 标准边框 */
+--border-gray: #f3f4f6            /* 灰色边框 */
+```
+
+---
+
+## 字体配置验证
+
+| 用途 | 原型 | Next.js 实现 | 状态 |
+|------|------|-------------|------|
+| body-small | 14px / 500 | 14px / 500 | ✅ |
+| body-default | 16px / 500 | 16px / 500 | ✅ |
+| body-large | 18px / 700 | 18px / 700 | ✅ |
+| heading-h3 | 24px / 700 | 24px / 700 | ✅ |
+| caption-tiny | 12px / 700 | 12px / 700 | ✅ |
+| Inter 权重 | 400/500/700/800 | 400/500/700/800 | ✅ |
+| JetBrains Mono | 500/700/800 | 500/700/800 | ✅ |
+
+---
+
+## 间距系统验证
+
+| 间距名称 | 原型值 | Tailwind | 状态 |
+|---------|--------|----------|------|
+| --4 | 4px | gap-1 | ✅ |
+| --8 | 8px | gap-2 | ✅ |
+| --16 | 16px | gap-4 | ✅ |
+| --24 | 24px | gap-6 | ✅ |
+| --32 | 32px | gap-8 | ✅ |
+| --48 | 48px | gap-12 | ✅ |
+| --font-size-20 | 20px | gap-5 | ✅ |
+
+---
+
+## 修正清单
+
+- [x] Your Earnings 数字颜色改为绿色
+- [x] Asset Overview 布局改为横向
+- [x] Overview Item 间距调整为 4px
+- [x] Overview Item 字号改为 14px
+- [x] Overview Item 字重改为 500
+- [x] Medium Risk 标签添加黄色圆点
+- [x] Medium Risk 标签颜色精确匹配
+- [x] Medium Risk 标签圆角改为完全圆形
+
+---
+
+## 测试验证
+
+刷新浏览器查看以下修正：
+
+1. ✅ Your Earnings 卡片数字显示绿色
+2. ✅ Asset Overview 每个项目横向排列
+3. ✅ 标签和值之间有合适间距
+4. ✅ Medium Risk 标签有黄色圆点
+5. ✅ 整体布局与原型一致
+
+---
+
+更新时间: 2026-01-26
+版本: v0.2.1