# CLAUDE.md

本文件为 Claude Code (claude.ai/code) 提供在操作本代码仓库时的指导信息。

## 项目概述

一个精简的 React + TypeScript + Vite 入门项目。
主要功能是在页面上显示数码风格的时钟。

- **Node 版本**: v24.14.0（在 `.nvmrc` 中指定）
- **包管理器**: npm
- **构建工具**: Vite 8
- **框架**: React 19.2 + TypeScript 5.9

## 常用命令

```bash
# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

# 运行 ESLint
npm run lint
```

## TypeScript 配置

使用项目引用（project references），包含三个配置文件：
- `tsconfig.json` - 根配置，包含项目引用
- `tsconfig.app.json` - 应用代码设置（严格模式、ES2023、DOM 库）
- `tsconfig.node.json` - Node/Vite 工具设置

关键编译器选项：
- `target`: ES2023
- `jsx`: react-jsx（转换）
- `moduleResolution`: bundler
- 启用严格模式，检查未使用的局部变量和参数

## ESLint 配置

使用新的扁平配置格式（`eslint.config.js`）：
- `@eslint/js` 推荐规则
- `typescript-eslint` 推荐规则
- `eslint-plugin-react-hooks` 推荐规则
- `eslint-plugin-react-refresh` Vite 专用规则

## 项目结构

```
src/
├── main.tsx      # 入口文件 - 使用 StrictMode 挂载 React 应用
├── App.tsx       # 主应用组件
├── App.css       # 组件样式
├── index.css     # 全局样式（CSS 变量、暗黑模式支持）
└── assets/       # 静态资源（图片、SVG）
```

## 样式

`index.css` 中定义的 CSS 变量通过 `prefers-color-scheme` 媒体查询支持浅色和深色模式。应用采用固定宽度居中布局（1126px），在 1024px 处有响应式断点。

## 构建输出

生产构建输出到 `dist/` 目录（ESLint 会忽略该目录）。

## 本地存储

本地存储使用localStorage，用于保存用户设置。