assetx/STYLE-FIXES.md

样式修正记录

修正内容

1. Your Earnings 数字颜色 ✅

问题: Your Earnings 卡片的数字显示为黑色

原型样式:

._0-002 {
  color: var(--green-normal-1, #10b981); /* 绿色 */
}

修正:

• 文件: components/StatsCards.tsx
• 修改: 为 Your Earnings 卡片添加 valueColor="#10b981" 属性
• 结果: 数字显示为绿色 (#10b981)

<StatCard
  label="Your Earnings"
  value="$0.00"
  change="All Time"
  changeColor="text-text-tertiary"
  valueColor="#10b981"  // ✅ 修正
/>

---

2. Asset Overview 布局 ✅

问题: 标签和值是上下排列（垂直布局），应该左右排列（横向布局）

原型样式:

.component-3 {
  display: flex;
  flex-direction: row;              /* 横向布局 */
  align-items: center;
  justify-content: space-between;   /* 两端对齐 */
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

修正前:

<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>

修正后:

<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 标签样式 ✅

问题: 标签样式不完整，缺少黄色圆点

原型样式:

.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)

<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 变量占位符
• 原型中几乎为空
• 所有变量内联定义在其他文件中

---

关键颜色定义

从原型中提取的精确颜色：

/* 绿色 */
--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	✅

---

修正清单

• Your Earnings 数字颜色改为绿色
• Asset Overview 布局改为横向
• Overview Item 间距调整为 4px
• Overview Item 字号改为 14px
• Overview Item 字重改为 500
• Medium Risk 标签添加黄色圆点
• Medium Risk 标签颜色精确匹配
• Medium Risk 标签圆角改为完全圆形

---

测试验证

刷新浏览器查看以下修正：

1. ✅ Your Earnings 卡片数字显示绿色
2. ✅ Asset Overview 每个项目横向排列
3. ✅ 标签和值之间有合适间距
4. ✅ Medium Risk 标签有黄色圆点
5. ✅ 整体布局与原型一致

---

更新时间: 2026-01-26 版本: v0.2.1