Skip to content

Commit 88e6b63

Browse files
mingxingmeng-ctrlmingxingmeng-ctrl
committed
refactor: 移除 CSS 变量内联引用，统一使用 Tailwind 类名
- 将所有 `var(--color-*)` 内联样式替换为对应的 Tailwind 类名（如 `bg-warning`、`text-success`、`border-border-dark`） - 移除 `getCssVar` 辅助函数及 `COLORS` 常量定义 - 删除多余的 `textShadow` 和 `boxShadow` 内联样式 - 修正骨架屏中的 `bg-gradient-to-r` 为 `bg-linear-to-r` - 统一组件样式系统，提升代码可维护性与一致性
1 parent 8ec5a00 commit 88e6b63

17 files changed

Lines changed: 181 additions & 278 deletions

‎.husky/pre-commit‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Pre-commit Hook: 本地测试必须通过才能提交
22

3+
# Husky 运行环境 PATH 受限，需手动加载 Cargo 环境
4+
if [ -f "$HOME/.cargo/env" ]; then
5+
. "$HOME/.cargo/env"
6+
fi
7+
38
echo ""
49
echo "================================================"
510
echo "🧪 Running Rust tests before commit..."

‎package-lock.json‎

Lines changed: 0 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.tsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -424,36 +424,36 @@ function App() {
424424
<div className="bg-terminal-bg p-2 md:p-3">
425425
<div className="h-full flex flex-col justify-end">
426426
<div className="space-y-1 animate-pulse">
427-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
428-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
429-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
430-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
431-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
432-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
433-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
434-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
435-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
436-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
437-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
438-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
427+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
428+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
429+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
430+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
431+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
432+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
433+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
434+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
435+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
436+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
437+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
438+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
439439
</div>
440440
</div>
441441
</div>
442442
{/* 买单区骨架（顶部对齐） */}
443443
<div className="bg-terminal-bg p-2 md:p-3">
444444
<div className="space-y-1 animate-pulse">
445-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
446-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
447-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
448-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
449-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
450-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
451-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
452-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
453-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
454-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
455-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
456-
<div className="h-3 bg-gradient-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
445+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
446+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
447+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
448+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
449+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
450+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
451+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
452+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
453+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
454+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
455+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
456+
<div className="h-3 bg-linear-to-r from-gray-700/40 via-gray-600/30 to-gray-700/40 rounded" />
457457
</div>
458458
</div>
459459
</div>
@@ -474,7 +474,7 @@ function App() {
474474
{/* ========== 交易表单区域 (仅 MOCK 模式下显示) ========== */}
475475
{/* LIVE 模式下隐藏交易表单，只展示数据 */}
476476
{dataSource === 'mock' && (
477-
<section className="hidden xl:block h-full min-h-0 border-l border-[var(--color-border-dark)]">
477+
<section className="hidden xl:block h-full min-h-0 border-l border-border-dark">
478478
<TradeForm
479479
symbol="BTC"
480480
currentPrice={latestData?.price ?? 40000}

‎src/components/Dashboard/Chart/ChartToolbar.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ function ToolbarButton({
7474
px-2 py-1 text-[11px] font-medium rounded transition-colors
7575
${
7676
active
77-
? 'text-[var(--color-warning)] bg-[var(--color-warning)]/10'
77+
? 'text-warning bg-warning/10'
7878
: 'text-gray-400 hover:text-white hover:bg-white/5'
7979
}
8080
`}
@@ -105,7 +105,7 @@ function IconButton({ icon, onClick, title }: IconButtonProps) {
105105

106106
/** Vertical divider */
107107
function Divider() {
108-
return <div className="w-px h-5 bg-[var(--color-border-dark)] mx-1" />;
108+
return <div className="w-px h-5 bg-border-dark mx-1" />;
109109
}
110110

111111
/* ============================================
@@ -129,7 +129,7 @@ function ChartToolbar({
129129
onScreenshotClick,
130130
}: ChartToolbarProps) {
131131
return (
132-
<div className="h-9 md:h-10 bg-[var(--color-bg-surface-alt)] border-b border-[var(--color-border-dark)] px-1 md:px-2 flex items-center justify-between overflow-hidden">
132+
<div className="h-9 md:h-10 bg-bg-surface-alt border-b border-border-dark px-1 md:px-2 flex items-center justify-between overflow-hidden">
133133
{/* ========== Left Section: 横向滚动容器 ========== */}
134134
<div className="flex-1 overflow-x-auto scrollbar-hide">
135135
<div className="flex items-center gap-1 min-w-max">

‎src/components/Dashboard/Chart/LightweightChart/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ const LightweightChart = forwardRef<LightweightChartHandle, LightweightChartProp
121121
return (
122122
<div className="w-full h-full flex items-center justify-center">
123123
<div className="text-center">
124-
<div className="inline-block w-8 h-8 border-2 border-[var(--color-neon-cyan)] border-t-transparent rounded-full animate-spin mb-3" />
124+
<div className="inline-block w-8 h-8 border-2 border-warning-alt border-t-transparent rounded-full animate-spin mb-3" />
125125
<p className="text-neutral-500 font-mono text-sm">等待 K 线数据...</p>
126126
</div>
127127
</div>
@@ -160,7 +160,7 @@ const LightweightChart = forwardRef<LightweightChartHandle, LightweightChartProp
160160
<div
161161
className="absolute top-1 left-1 z-10 flex flex-wrap items-center gap-x-3 gap-y-0.5
162162
text-[10px] md:text-xs font-mono pointer-events-none
163-
bg-[var(--color-bg-surface-alt)]/80 backdrop-blur-sm rounded px-2 py-1"
163+
bg-bg-surface-alt/80 backdrop-blur-sm rounded px-2 py-1"
164164
>
165165
{/* 时间 */}
166166
<span className="text-neutral-400">{displayCandle.timeStr}</span>
@@ -269,7 +269,7 @@ const LightweightChart = forwardRef<LightweightChartHandle, LightweightChartProp
269269
<button
270270
onClick={handleReSync}
271271
className="flex items-center gap-1.5 px-3 py-1.5
272-
bg-[var(--color-success)] hover:opacity-80
272+
bg-success hover:opacity-80
273273
text-white text-[10px] md:text-xs font-medium
274274
rounded-md transition-colors shadow-lg"
275275
>

‎src/components/Dashboard/OrderBook.tsx‎

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,6 @@
11
import { memo, useMemo, useState, useEffect, useRef } from 'react';
22
import type { OrderBookProps } from '../../types/index';
33

4-
/* ============================================
5-
CSS 变量辅助函数
6-
============================================ */
7-
8-
/**
9-
* 获取 CSS 变量值（用于内联样式）
10-
*/
11-
function getCssVar(varName: string): string {
12-
if (typeof window === 'undefined') return '';
13-
return getComputedStyle(document.documentElement)
14-
.getPropertyValue(varName)
15-
.trim();
16-
}
17-
18-
// Binance 颜色常量（从 CSS 变量获取，用于内联样式）
19-
const COLORS = {
20-
bidGreen: '#0ECB81', // var(--color-success)
21-
askRed: '#F6465D', // var(--color-danger)
22-
textGray: '#9ca3af',
23-
} as const;
24-
254
/** 视图模式类型 */
265
type ViewMode = 'both' | 'bids' | 'asks';
276

@@ -65,7 +44,7 @@ function ViewModeButton({ mode, active, onClick, title }: ViewModeButtonProps) {
6544
<button
6645
onClick={onClick}
6746
className={`w-6 h-6 rounded flex flex-col items-center justify-center gap-0.5 p-1 transition-colors ${
68-
active ? 'bg-[var(--color-border-dark)]' : 'hover:bg-white/5'
47+
active ? 'bg-border-dark' : 'hover:bg-white/5'
6948
}`}
7049
title={title}
7150
>
@@ -150,7 +129,7 @@ function OrderRow({
150129
{/* 价格列 - 左对齐 */}
151130
<span
152131
className={`relative z-10 font-mono text-[10px] md:text-[11px] tabular-nums text-left ${
153-
isBid ? 'text-[var(--color-success)]' : 'text-[var(--color-danger)]'
132+
isBid ? 'text-success' : 'text-danger'
154133
}`}
155134
>
156135
{price.toFixed(pricePrecision)}
@@ -274,7 +253,7 @@ function OrderBook({
274253
<div className="bg-terminal-bg flex flex-col h-full overflow-hidden">
275254
{/* ========== 工具栏 ========== */}
276255
{/* 高度与 ChartToolbar 对齐: h-9 md:h-10 */}
277-
<div className="shrink-0 h-9 md:h-10 px-2 md:px-3 flex items-center justify-between border-b border-[var(--color-border-dark)]">
256+
<div className="shrink-0 h-9 md:h-10 px-2 md:px-3 flex items-center justify-between border-b border-border-dark">
278257
{/* 小数精度选择器 */}
279258
<button
280259
onClick={cyclePrecision}
@@ -320,7 +299,7 @@ function OrderBook({
320299

321300
{/* ========== 表头 ========== */}
322301
{/* 高度与图表子标题对齐: h-7 md:h-8 */}
323-
<div className="shrink-0 h-7 md:h-8 grid grid-cols-[1fr_1fr] px-2 items-center text-[9px] md:text-[10px] text-gray-500 border-b border-[var(--color-border-dark)] bg-[var(--color-bg-black)]">
302+
<div className="shrink-0 h-7 md:h-8 grid grid-cols-[1fr_1fr] px-2 items-center text-[9px] md:text-[10px] text-gray-500 border-b border-border-dark bg-bg-black">
324303
<span className="text-left">Price</span>
325304
<span className="text-right">Amount</span>
326305
</div>
@@ -347,7 +326,7 @@ function OrderBook({
347326
)}
348327

349328
{/* ========== 中间价格 Ticker (Sticky) ========== */}
350-
<div className="shrink-0 h-8 md:h-10 px-2 md:px-3 bg-[var(--color-bg-surface-alt)] flex items-center gap-1.5 md:gap-2 border-y border-[var(--color-border-dark)]">
329+
<div className="shrink-0 h-8 md:h-10 px-2 md:px-3 bg-bg-surface-alt flex items-center gap-1.5 md:gap-2 border-y border-border-dark">
351330
{/* 当前价格 - 使用 clamp 流体字体 */}
352331
<span
353332
className="font-mono text-[clamp(14px,4vw,18px)] md:text-lg font-semibold tabular-nums flex items-center gap-1"

‎src/components/Dashboard/StatsPanel.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ function StatCell({
3535
<div className="flex items-baseline gap-0.5 md:gap-1">
3636
<span
3737
className={`text-[clamp(12px,3vw,16px)] md:text-base font-bold font-mono tabular-nums leading-none ${colorClass}`}
38-
style={{ textShadow: '0 0 8px currentColor' }}
3938
>
4039
{value}
4140
</span>
@@ -70,8 +69,8 @@ function StatsPanel({
7069
return (
7170
<div
7271
className="
73-
shrink-0 h-10 md:h-12 bg-[var(--color-bg-black)] border-t border-[var(--color-border-dark)]
74-
grid grid-cols-3 divide-x divide-[var(--color-border-dark)]
72+
shrink-0 h-10 md:h-12 bg-bg-black border-t border-border-dark
73+
grid grid-cols-3 divide-x divide-border-dark
7574
"
7675
>
7776
{/* Last Price */}
@@ -85,14 +84,14 @@ function StatsPanel({
8584
<StatCell
8685
label="Spread"
8786
value={`$${analysisResult?.spread?.toFixed(4) ?? '--'}`}
88-
colorClass="text-[var(--color-warning-alt)]"
87+
colorClass="text-warning-alt"
8988
/>
9089

9190
{/* SMA5 */}
9291
<StatCell
9392
label="SMA (5)"
9493
value={formatSma5()}
95-
colorClass="text-[var(--color-cyan)]"
94+
colorClass="text-cyan"
9695
/>
9796
</div>
9897
);

0 commit comments

Comments
 (0)