# mystock

**Repository Path**: wangdong_cmcc/mystock

## Basic Information

- **Project Name**: mystock
- **Description**: A股实时行情看板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-05
- **Last Updated**: 2026-03-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# A股实时行情看板

## 项目描述
这是一个基于 React + Vite 的 A 股实时行情看板应用，用于展示大盘指数和热门个股的实时数据。通过 Node.js 代理服务器获取新浪财经免费 API 数据，支持用户自定义添加/删除股票，并提供相关新闻资讯。

![详情界面截图](screenshot_main_dark.png)

![新闻界面截图](screenshot_after_click.png)

![主界面截图](screenshot_main_light.png)



## 功能特性
- 实时展示上证指数、深证成指、创业板指等大盘数据
- 热门个股表格，支持添加和删除自定义股票
- 股票详情面板，包含价格、涨跌幅等信息
- 新闻面板，提供股票相关资讯和十大新闻
- 自动数据刷新，保持实时性
- **白天/黑夜模式** - 支持浅色和深色主题切换，主题偏好自动保存
- 响应式设计，支持不同设备

## 技术栈
- **前端**: React + TypeScript + Vite
- **后端**: Node.js + Express
- **数据源**: 新浪财经API
- **样式**: CSS (深色主题)

## 安装步骤
1. 克隆或下载项目到本地。
2. 安装前端依赖：
   ```
   cd client
   npm install
   ```
3. 安装后端依赖：
   ```
   cd ../server
   npm install
   ```

## 使用方式
在两个终端分别启动服务器和前端：

### 终端1: 启动代理服务器
```
cd server
node index.js
```

### 终端2: 启动前端开发服务器
```
cd client
npm run dev
```

然后在浏览器中打开 http://localhost:5173/ 即可访问应用。

## 构建和部署
- 前端构建：
  ```
  cd client
  npm run build
  ```
  构建后的静态文件位于 `client/dist/` 目录。

- 后端部署：将 `server/` 目录部署到支持 Node.js 的服务器上，运行 `node index.js`。

- 建议部署到云服务器（如阿里云、腾讯云）或使用平台如 Vercel（前端）+ Heroku（后端）。

## 架构

```
React前端 (localhost:5173) ──> Vite代理 ──> Express代理 (localhost:3001) ──> 新浪财经API
                                      │
                                      ├─> 新闻API (模拟/新浪财经)
                                      │
                                      └─> 十大新闻API (模拟数据)
```

- **前端**: React + Vite + TypeScript，负责数据展示和自动刷新
- **代理服务器**: Express，负责请求新浪API、GBK转UTF-8转码、返回JSON
- **Vite开发代理**: 将前端 `/api` 请求代理到 Express 服务器，避免配置CORS
- **新闻服务**: 提供股票相关新闻资讯，支持降级到模拟数据

## 项目结构

```
mystock/
├── client/                      # React前端 (Vite创建)
│   ├── package.json
│   ├── vite.config.ts           # 配置 /api 代理到 localhost:3001
│   ├── index.html
│   └── src/
│       ├── main.tsx
│       ├── App.tsx              # 主组件，组装所有子组件
│       ├── App.css              # 全局/主样式 (深色主题)
│       ├── types/
│       │   └── stock.ts         # IndexData / StockData 类型 (更新: 添加新闻类型)
│       ├── services/
│       │   └── api.ts           # axios封装，请求 /api/quotes (更新: 支持动态股票列表、删除和新闻)
│       ├── hooks/
│       │   └── useStockData.ts  # 轮询Hook，管理数据/loading/error状态 (更新: 添加refresh函数)
│       ├── components/
│       │   ├── Header.tsx       # 标题 + 当前时间 + 市场状态
│       │   ├── IndexCard.tsx    # 单个大盘指数卡片
│       │   ├── StockTable.tsx   # 热门个股表格 (更新: 支持删除股票)
│       │   ├── PriceChange.tsx  # 涨跌幅颜色组件 (红涨绿跌)
│       │   ├── AddStock.tsx     # 添加新股票组件 (新增)
│       │   ├── NewsPanel.tsx    # 股票新闻面板 (新增)
│       │   ├── TopNewsPanel.tsx # 十大新闻面板 (新增)
│       │   └── StockDetail.tsx  # 股票详情面板 (更新: 包含新闻)
│       └── utils/
│           ├── stockParser.ts   # 新浪API字符串响应解析
│           └── formatters.ts    # 数字格式化(万/亿)、时间格式化
├── server/                      # Node.js代理服务器
│   ├── package.json
│   └── index.js                 # Express入口 + /api/quotes路由
├── Readme.md                    # 本文件
├── Readme.txt                   # 纯文本版本
├── a-stock-realtime-dashboard.md # 详细实现方案
├── screenshot_main.png.png      # 主界面截图
├── screenshot_after_click.png.png # 详情界面截图
└── screenshot_news.png          # 新闻界面截图
```

## 关键依赖

**服务端**: express, axios, iconv-lite, cors
**客户端**: react, react-dom, typescript, axios (Vite脚手架自带构建工具)
**数据源**: 新浪财经API (股票行情 + 新闻资讯)

## 数据源

新浪财经API: `https://hq.sinajs.cn/list=sh000001,sz399001,...`

| 展示项 | 代码 |
|--------|------|
| 上证指数 | sh000001 |
| 深证成指 | sz399001 |
| 创业板指 | sz399006 |
| 贵州茅台 | sh600519 |
| 宁德时代 | sz300750 |
| 比亚迪 | sz002594 |
| 中国平安 | sh601318 |
| 招商银行 | sh600036 |
| 中芯国际 | sh688981 |
| 立讯精密 | sz002475 |

## 实现步骤

### 1. 创建代理服务器 (server/)
- 初始化 server/package.json
- 编写 server/index.js:
  - Express + cors 中间件
  - `GET /api/quotes?symbols=sh000001,sz399001,...` 路由
  - axios请求新浪API，iconv-lite解码GBK响应
  - 解析新浪格式字符串，返回JSON数组

### 2. 创建React前端 (client/)
- `npm create vite@latest client -- --template react-ts`
- 安装 axios 依赖
- 配置 vite.config.ts 代理 `/api` 到 `http://localhost:3001`

### 3. 实现类型定义和工具函数
- types/stock.ts: IndexData, StockData 接口
- utils/stockParser.ts: 解析新浪API响应字符串
- utils/formatters.ts: 数字格式化(亿/万)
- services/api.ts: 封装 /api/quotes 请求

### 4. 实现数据Hook
- hooks/useStockData.ts:
  - 每8秒轮询一次
  - 页面不可见时暂停轮询
  - 返回 { indices, stocks, loading, error, lastUpdated }

### 5. 实现UI组件
- Header.tsx: 标题 + 实时时钟 + 市场状态(交易中/已收盘)
- IndexCard.tsx: 指数卡片(名称、点位、涨跌、成交额)
- PriceChange.tsx: 涨跌幅颜色展示(红涨绿跌灰平)
- StockTable.tsx: 个股表格(代码、名称、现价、涨跌幅、成交量、成交额)
- StockDetail.tsx: 股票详情面板(盘口数据 + 相关新闻)
- NewsPanel.tsx: 新闻展示组件
- App.tsx: 组装以上组件

### 6. 实现新闻功能
- server/index.js: 添加 `/api/news` 路由获取股票新闻
- services/api.ts: 添加 `fetchStockNews()` 函数
- types/stock.ts: 添加 `NewsItem` 和 `NewsResponse` 接口
- NewsPanel.tsx: 实现新闻列表展示和外部链接跳转

### 7. 实现十大新闻功能
- server/index.js: 添加 `/api/top-news` 路由获取十大新闻和十大国际新闻
- services/api.ts: 添加 `fetchTopNews()` 函数
- TopNewsPanel.tsx: 实现十大新闻面板，带排名显示
- App.tsx: 在主页面添加新闻部分，显示两大类新闻
- App.css: 添加十大新闻样式，包括排名徽章和网格布局

### 8. 实现股票管理功能
- 添加股票: 支持用户自定义添加A股股票代码
- 删除股票: 仅自定义股票可删除，默认股票保护
- 持久化存储: 使用localStorage保存用户配置
- 实时更新: 添加/删除后立即刷新数据

## 股票管理和新闻功能实现

### 功能需求
原有的热门个股列表是固定的，无法动态添加新的股票。为此添加了用户自定义股票的功能，允许用户实时添加新的A股个股到监控列表中。同时，为每个股票提供相关新闻资讯，帮助用户了解公司动态。

### 实现方案

#### 1. 修改API服务 (services/api.ts)
- 将固定的 `STOCK_SYMBOLS` 数组改为动态获取
- 添加 `getStockSymbols()` 函数：合并默认股票和用户自定义股票
- 添加 `addStockSymbol(symbol)` 函数：添加新股票到localStorage
- 添加 `removeStockSymbol(symbol)` 函数：移除自定义股票
- 使用localStorage实现数据持久化，key为 `'customStocks'`

#### 2. 创建添加股票组件 (components/AddStock.tsx)
- 输入框：支持股票代码输入，如 `sh600519` 或 `sz000001`
- 按钮：点击添加股票到监控列表
- 格式验证：正则表达式 `^(sh|sz)\d{6}$` 验证A股代码格式
- 防重复：检查是否已存在相同股票代码
- 添加成功后清空输入框并触发数据刷新

#### 3. 更新数据Hook (hooks/useStockData.ts)
- 添加 `refresh` 函数：手动触发数据重新加载
- 返回值增加 `refresh` 方法供组件调用

#### 4. 更新主应用 (App.tsx)
- 导入并使用 `AddStock` 组件
- 将 `AddStock` 放置在股票表格上方
- 传递 `refresh` 函数作为 `onStockAdded` 回调

#### 5. 更新股票表格组件 (components/StockTable.tsx)
- 添加删除按钮：为自定义股票显示删除按钮（×）
- 事件处理：阻止删除按钮点击事件冒泡，避免触发行点击
- 条件显示：只有自定义股票（非默认股票）才显示删除按钮
- 添加操作列：在表格末尾添加"操作"列

#### 6. 更新主应用 (App.tsx)
- 添加删除处理函数：`handleStockDelete` 包含确认对话框
- 传递删除回调：将 `onStockDelete` 传递给 `StockTable` 组件
- 状态同步：删除股票时同步更新选中状态

#### 7. 添加新闻API路由 (server/index.js)
- 新增 `GET /api/news?symbol=sh600519&limit=10` 路由
- 集成新浪财经新闻API获取股票相关新闻
- 支持失败降级，返回模拟新闻数据确保功能可用性

#### 8. 创建新闻面板组件 (components/NewsPanel.tsx)
- 自动加载指定股票的最新新闻
- 显示新闻标题、摘要、发布时间和来源
- 支持外部链接跳转
- 加载状态和错误处理

#### 9. 集成新闻面板到详情页 (components/StockDetail.tsx)
- 在股票详情页底部添加新闻面板
- 传递股票代码和名称参数
- 无缝集成到现有UI布局

#### 10. 添加新闻样式 (App.css)
- `.news-panel`：新闻面板整体样式
- `.news-item`：单个新闻项样式，支持hover效果
- `.news-loading/.news-error`：加载和错误状态样式
- 响应式设计，适配深色主题

#### 11. 实现十大新闻功能
- server/index.js: 新增 `/api/top-news` 路由，支持 `type=general|international` 参数
- services/api.ts: 添加 `fetchTopNews()` 函数
- TopNewsPanel.tsx: 创建十大新闻面板组件，带排名数字显示
- App.tsx: 在主页面底部添加新闻区域，包含国内财经新闻和国际新闻两大类面板
- App.css: 添加 `.top-news-panel`、`.news-rank` 等样式，实现网格布局和排名徽章

### 功能特点
- **持久化存储**：用户添加的股票保存在浏览器localStorage中，页面刷新后仍然存在
- **实时更新**：添加/删除股票后立即重新获取并显示数据
- **格式验证**：严格验证A股股票代码格式
- **防重复添加**：自动过滤重复的股票代码
- **安全删除**：删除前显示确认对话框，避免误操作
- **智能显示**：只有自定义股票显示删除按钮，默认股票不可删除
- **新闻资讯**：每个股票详情页显示相关最新新闻，支持外部链接跳转
- **十大新闻**：主页面显示今日十大新闻和十大国际新闻，带排名展示
- **容错处理**：网络异常时显示友好提示，支持降级到模拟数据
- **用户友好**：输入错误时显示提示信息，删除时有确认提示

### 使用方法
1. **添加股票**：
   - 在"热门个股"表格上方找到添加股票区域
   - 输入股票代码（如：`sh600036` 表示招商银行）
   - 点击"添加股票"按钮
   - 新股票会立即出现在表格中，并开始实时更新数据

2. **删除股票**：
   - 在股票表格最右列找到自定义股票的删除按钮（×）
   - 点击删除按钮
   - 确认删除对话框中点击确定
   - 股票会立即从列表中移除

3. **查看新闻**：
   - 点击股票表格中的任意股票行
   - 在弹出的详情面板底部查看"相关新闻"区域
   - 点击新闻标题可跳转到原文页面
   - 新闻自动加载最新的5条相关资讯

4. **浏览十大新闻**：
   - 在主页面底部查看"今日十大新闻"和"十大国际新闻"区域
   - 新闻按重要性排序，显示排名数字
   - 点击任意新闻标题可跳转到详细内容
   - 新闻实时更新，展示最新的市场资讯

## 验证方法

1. 启动代理服务器: `cd server && node index.js`
2. 启动前端: `cd client && npm run dev`
3. 浏览器访问 http://localhost:5173
4. 验证:
   - 3个大盘指数卡片正确显示数据
   - 热门个股表格正确显示
   - 涨跌幅颜色正确(红涨绿跌)
   - 数据每8秒自动刷新
   - 添加股票功能正常工作：
     - 输入有效股票代码（如 sh600036）并点击添加
     - 新股票立即出现在表格中
     - 刷新页面后自定义股票仍然存在
     - 尝试添加重复股票或无效格式时显示适当提示
   - 删除股票功能正常工作：
     - 自定义股票显示删除按钮（×），默认股票不显示
     - 点击删除按钮弹出确认对话框
     - 确认删除后股票立即从列表中移除
     - 删除当前选中的股票时自动清空选中状态
   - 新闻功能正常工作：
     - 点击任意股票行打开详情面板
     - 底部显示"相关新闻"区域
     - 新闻列表自动加载并显示标题、摘要、时间和来源
     - 点击新闻标题可跳转到外部链接
     - 网络异常时显示友好错误信息
   - 十大新闻功能正常工作：
     - 主页面底部显示"今日十大新闻"和"十大国际新闻"两个面板
     - 每个面板显示10条新闻，带排名数字(1-10)
     - 新闻包含标题、摘要、时间和来源
     - 点击新闻标题可跳转到外部链接
     - 新闻数据自动加载，支持加载状态显示
   - 代理服务器API: 
     - `http://localhost:3001/api/quotes?symbols=sh000001` 返回股票数据
     - `http://localhost:3001/api/news?symbol=sh600519` 返回新闻数据
     - `http://localhost:3001/api/top-news?type=general` 返回十大新闻数据
     - `http://localhost:3001/api/top-news?type=international` 返回十大国际新闻数据

## UI效果预期

```
+----------------------------------------------------------------------+
|  A股实时行情          2026-03-05 14:32:18           交易中             |
+----------------------------------------------------------------------+
|  [上证指数]          [深证成指]           [创业板指]                    |
|   3,350.66           10,882.34            2,156.78                    |
|   +12.34 +0.37%      -45.21 -0.41%       +8.90 +0.41%               |
|   成交额: 2,341亿     成交额: 3,102亿      成交额: 892亿              |
+----------------------------------------------------------------------+
|  热门个股                                                             |
|  [输入股票代码，如 sh600519] [添加股票]                              |
|  代码    名称      现价      涨跌幅    成交量     成交额     操作      |
|  600519  贵州茅台  1,698.00  +1.23%   12,345手   20.97亿             |
|  300750  宁德时代    245.50  -0.82%   89,234手   21.90亿             |
|  600036  招商银行    38.50   +0.45%   45,678手   17.52亿      ×      |
|  ...                                                                  |
+----------------------------------------------------------------------+
|  数据来源: 新浪财经  |  上次更新: 14:32:18  |  8秒后刷新               |
+----------------------------------------------------------------------+
|  今日十大新闻                    |  十大国际新闻                      |
|  1. A股三大指数集体上涨...       |  1. 中美关系缓和迹象显现...       |
|  2. 央行降准0.25个百分点...       |  2. 全国两会即将召开...           |
|  3. 新能源汽车销量创历史新高...   |  3. 嫦娥六号探测器成功发射...     |
|  ...                             |  ...                               |
|  10. 消费市场回暖，零售板块...   |  10. 教育公平取得突破性进展...    |
+----------------------------------------------------------------------+
```

### 股票详情面板效果

```
+--------------------------------------------------------------+
|  ← 返回        贵州茅台 (600519) 上海                        |
+--------------------------------------------------------------+
|  1,698.00                                                    |
|  +12.50 (+0.74%)                    2026-03-05 14:32:18      |
+--------------------------------------------------------------+
|  今开: 1,685.00    昨收: 1,685.50    最高: 1,702.00          |
|  最低: 1,680.00    成交量: 12,345手  成交额: 20.97亿         |
|  振幅: 1.23%      换手率: --                                  |
+--------------------------------------------------------------+
|  五档盘口                                                     |
|  卖5: 1,699.00 (100手)          买1: 1,698.00 (200手)        |
|  卖4: 1,698.50 (150手)          买2: 1,697.50 (180手)        |
|  ...                           ...                           |
+--------------------------------------------------------------+
|  相关新闻                                                     |
|  ┌─────────────────────────────────────────────────────────┐  |
|  │ 贵州茅台最新动态：公司业绩稳健增长                      │  |
|  │ 根据最新财报显示，贵州茅台公司业绩保持稳健增长态势...   │  |
|  │ 来源: 新浪财经                    2小时前               │  |
|  └─────────────────────────────────────────────────────────┘  |
|  ┌─────────────────────────────────────────────────────────┐  |
|  │ 贵州茅台获机构看好，目标价上调                          │  |
|  │ 多家券商机构上调贵州茅台目标价，预计未来增长潜力巨大... │  |
|  │ 来源: 东方财富                    5小时前               │  |
|  └─────────────────────────────────────────────────────────┘  |
+--------------------------------------------------------------+
```



# 亮色模式改善记录

## 概述

改善了项目在亮色主题模式下的显示效果，提高了可读性和视觉体验。

**更新时间**: 2026年3月5日

---

## 改善详情

### 1. 优化亮色主题 CSS 变量 (`src/index.css`)

#### 变更前

```css
[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #24292f;
  --border-color: #d1d9e0;
  --card-bg: #f6f8fa;
  --button-bg: #f6f8fa;
  --hover-bg: #f3f4f6;
  --error-bg: rgba(245, 34, 45, 0.1);
  --loading-bg: rgba(0, 0, 0, 0.05);
}
```

#### 变更后

```css
[data-theme="light"] {
  --bg-color: #fafbfc;
  --text-color: #24292f;
  --border-color: #d0d7de;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --button-bg: #f6f8fa;
  --hover-bg: #f3f4f6;
  --error-bg: rgba(245, 34, 45, 0.15);
  --loading-bg: rgba(0, 0, 0, 0.08);
}
```

#### 改变说明

- **背景色**: `#ffffff` → `#fafbfc`（柔和的浅灰白色，减少长时间阅读的眼睛疲劳）
- **卡片背景**: 保持 `#ffffff`（纯白色，提高对比度）
- **边框色**: `#d1d9e0` → `#d0d7de`（更清晰的元素分界线）
- **错误背景**: 透明度 `0.1` → `0.15`（提高可见性）
- **加载背景**: 透明度 `0.05` → `0.08`（更明显的加载效果）
- **Color Scheme**: `dark` → `dark light`（支持两种主题）

---

### 2. 将硬编码颜色改为主题变量 (`src/App.css`)

#### 改变的样式类

##### `.section-title` (分区标题)

- **前**: `color: #ffffff`
- **后**: `color: var(--text-color)`
- **效果**: 在亮色模式下使用正确的文本色

##### `.stock-table th` (表头)

- **前**: `border-bottom: 1px solid #21262d`
- **后**: `border-bottom: 1px solid var(--border-color)`
- **亮色调整**: `color: #6e7681`
- **效果**: 表头在两种主题下都清晰可见

##### `.stock-table td` (表格单元格)

- **前**: `border-bottom: 1px solid #161b22`
- **后**: `border-bottom: 1px solid var(--border-color)`
- **效果**: 统一使用主题变量

##### `.stock-code` (股票代码)

- **前**: `color: #58a6ff`（浅蓝）
- **后**: `color: #0969da`（深蓝）
  - **暗色模式**: `color: #58a6ff`（保持浅蓝）
- **效果**: 亮色模式下对比度更高，代码可读性更好

##### `.stock-name` (股票名称)

- **前**: `color: #e0e0e0`
- **后**: `color: var(--text-color)`
- **效果**: 使用主题文本色

##### `.stock-table tbody tr:hover` (表格行悬停)

- **前**: `background: rgba(255, 255, 255, 0.05)`
- **亮色添加**: `background: rgba(0, 0, 0, 0.04)`
- **效果**: 两种主题下都有适当的悬停反馈

##### `.detail-back` (返回按钮)

- **前**: `border: 1px solid #30363d`, `color: #e0e0e0 (hover)`
- **后**: `border: 1px solid var(--border-color)`, `color: var(--text-color) (hover)`
- **亮色调整**: `color: #6e7681`, hover 时 `color: #24292f`
- **效果**: 按钮在两种主题下都清晰可交互

##### `.detail-name` (详情面板标题)

- **前**: `color: #ffffff`
- **后**: `color: var(--text-color)`
- **效果**: 自适应主题

##### `.detail-code` (详情中的代码)

- **前**: `color: #58a6ff`
- **后**: `color: #0969da`
  - **暗色模式**: `color: #58a6ff`
- **效果**: 改善亮色模式的可读性

##### `.detail-market` (市场标签)

- **前**: `background: #21262d`
- **后**: `background: var(--button-bg)`
- **效果**: 自适应主题背景

##### `.detail-price-section` (价格区域)

- **前**: `border-bottom: 1px solid #21262d`
- **后**: `border-bottom: 1px solid var(--border-color)`
- **效果**: 统一边框色

##### `.detail-grid` 和 `.detail-grid-item` (详情网格)

- **前**: `background: #21262d` / `background: #161b22`
- **后**: `background: var(--border-color)` / `background: var(--card-bg)`
- **效果**: 自适应主题

##### `.order-book-container` 和 `.order-book-divider` (订单簿)

- **前**: `background: #161b22`, `border: 1px solid #21262d`, `background: #30363d (divider)`
- **后**: `background: var(--card-bg)`, `border: 1px solid var(--border-color)`, `background: var(--border-color) (divider)`
- **效果**: 统一使用主题变量

##### `.order-row` (订单行)

- **前**: `border-bottom: 1px solid rgba(33, 38, 45, 0.5)`
- **后**: `border-bottom: 1px solid var(--border-color)`, `opacity: 0.8` (亮色: `opacity: 1`)
- **效果**: 两种主题下都清晰

##### `.news-link` (新闻链接)

- **前**: `color: #58a6ff`
- **后**: `color: #0969da`
  - **暗色模式**: `color: #58a6ff`
- **效果**: 亮色模式下链接更清晰

##### `.news-rank` (排名徽章)

- **前**: `background: #58a6ff`, `color: #ffffff`
- **后**: `background: #0969da`, `color: #ffffff`
  - **暗色模式**: `background: #58a6ff`, `color: #0d1117`
- **效果**: 两种主题下都有良好的对比度

##### `.add-stock-button` (添加股票按钮)

- **前**: `background: #238636` (hover: `#2ea043`), disabled: `#21262d`
- **后**: 
  - **亮色模式**: `background: #1a7f37` (hover: `#22863a`), disabled: `#d0d7de`
  - **暗色模式**: 保持原样
- **效果**: 两种模式下按钮都清晰可见

##### `.news-spinner` (加载动画)

- **前**: `border-top: 2px solid #58a6ff`
- **后**: `border-top: 2px solid #0969da`
  - **暗色模式**: `border-top: 2px solid #58a6ff`
- **效果**: 加载指示器在两种主题下都清晰

---



## 显示效果改善

### 视觉改善

- ✅ 亮色模式下文本对比度提高，阅读更清晰
- ✅ 链接和代码颜色调整为更深的蓝色，在浅色背景下更突出
- ✅ 卡片和表格的边界更清晰，空间布局更清楚
- ✅ 按钮和交互元素在两种主题下都有良好的视觉反馈

### 用户体验改善

- ✅ 表格行悬停效果在亮色模式下更柔和，不刺眼
- ✅ 错误消息更明显，但不会过度刺激
- ✅ 加载状态提示更清晰
- ✅ 所有颜色都使用 CSS 变量，便于未来主题定制

### 代码质量改善

- ✅ 移除了大量硬编码的颜色值
- ✅ 统一使用 CSS 变量，便于维护
- ✅ 支持深色和浅色两种主题的完整适配

---

## 涉及文件

1. **src/index.css** - 主题 CSS 变量定义
2. **src/App.css** - 应用样式和主题适配

---

## 测试建议

1. 切换亮色模式，检查所有文本的可读性
2. 验证表格、卡片、按钮的显示效果
3. 检查链接和代码的对比度是否充分
4. 测试所有交互元素（悬停、点击）在两种主题下的表现

---

## 后续优化方向

- 考虑为暗色模式的某些颜色进行进一步微调
- 如需添加更多主题（如系统主题），可继续扩展 CSS 变量
- 可考虑添加过渡动画使主题切换更流畅





## 贡献

欢迎提交Issue和Pull Request来改进项目。

## 许可证
本项目采用MIT许可证。