clock/CLAUDE.md

CLAUDE.md

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

项目概述

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

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

常用命令

# 启动开发服务器
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，用于保存用户设置。