ysm
ec06bdc29f
- 将样式选择器移到页面顶部 - 添加响应式时钟尺寸，根据浏览器宽度自适应 - 修复样式选择器与时钟数字的重叠问题 - 优化 CSS 布局结构 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
75 lines
1.9 KiB
Markdown
75 lines
1.9 KiB
Markdown
# 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，用于保存用户设置。
|
||
|