# cc-skill-use

**Repository Path**: my-doc/cc-skill-use

## Basic Information

- **Project Name**: cc-skill-use
- **Description**: Claude Code 技能Skill使用，纯文档介绍静态页
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React 19 + Vite 8 + TypeScript 项目模板

这是一个面向生产环境的现代前端 React 模板项目，集成了最新的 React 19、Vite 8、TypeScript、Tailwind CSS 4 以及流行的 Shadcn UI 和 Zustand 状态管理，开箱即用。

## 🛠 技术栈

- **核心框架**: [React 19](https://react.dev/) + [Vite 8](https://cn.vitejs.dev/) + [TypeScript](https://www.typescriptlang.org/)
- **样式与UI**: [Tailwind CSS 4](https://tailwindcss.com/) + [Shadcn UI](https://ui.shadcn.com/) (基于 [Radix UI](https://www.radix-ui.com/))
- **状态管理**: [Zustand 5](https://zustand-demo.pmnd.rs/)
- **路由管理**: [React Router v7](https://reactrouter.com/)
- **图标库**: [Lucide React](https://lucide.dev/icons/)
- **表单与验证**: [React Hook Form](https://react-hook-form.com/) + [Zod](https://zod.dev/)
- **其他工具**: 日期处理 `date-fns`、数学计算 `decimal.js`、消息提示 `sonner`

## 🚀 快速开始

### 安装依赖

建议使用 `pnpm` 进行依赖管理：

```shell
pnpm install
# 或使用 npm
npm install
```

### 启动开发环境

```shell
pnpm dev
# 或
npm run dev
```

默认在 `8383` 端口启动，端口配置及代理配置可修改环境变量文件（如 `.env.development`）。

### 构建项目

```shell
pnpm build
# 包含 TypeScript 类型检查并打包
```

### 类型检查

```shell
pnpm type-check
```

## 🏗️ 项目结构

```text
src/
├── api/             # API 接口请求与类型定义
├── assets/          # 静态资源及全局样式 (如 tailwind.css)
├── components/      # 全局公共组件 (包含 Shadcn UI 基础组件)
├── hooks/           # 自定义 Hooks (如 useDepLog, useFetch 等)
├── lib/             # 工具类函数 (如 utils.ts 样式合并)
├── pages/           # 页面级业务组件
├── router/          # 路由配置与拦截器
├── stores/          # Zustand 状态管理库
├── types/           # 全局 TypeScript 类型声明
├── utils/           # 常用工具函数 (auth, fetch, format 等)
├── App.tsx          # 根组件
└── main.tsx         # 项目入口文件
```

## ⚙️ 环境与配置

### 环境变量

项目默认包含不同环境的配置文件：
- `.env`: 通用环境变量
- `.env.development`: 开发环境专属变量
- `.env.production`: 生产环境专属变量

### 跨域代理

在开发环境中，可通过配置环境变量中的 `VITE_PROXY_PATH` 和 `VITE_API` 配合 `vite.config.ts` 中的 server proxy 设置，实现接口的本地代理转发，解决开发环境的跨域问题。

## 🔧 开发指南与内置工具

### 1. Shadcn UI 组件使用

本项目已集成 Shadcn UI，如需添加新组件，可以直接使用官方 CLI 安装。例如添加 `Card` 组件：

```shell
pnpm dlx shadcn@latest add card
```
安装后的组件会自动放置在 `src/components/ui/` 目录下，并可直接在项目中使用。请优先使用 Tailwind CSS 类名模式来开发和调整样式。

### 2. useDepLog 调试 Hook

项目内置了一个强大的依赖项调试工具 `useDepLog`，用于追踪 React Hook 依赖项的变化，帮助快速定位性能问题和不必要的重新渲染。

**使用方法:**
```tsx
import { useDepLog } from '@/hooks/useDepLog';

function MyComponent({ count, name }) {
  // 追踪依赖项变化
  useDepLog({ count, name }, 'MyComponent-useEffect');
  
  useEffect(() => {
    // 你的 effect 逻辑
  }, [count, name]);
  
  return <div>内容</div>;
}
```
**特性:** 开发环境输出详细日志带高亮（新增、修改、删除等），生产环境自动禁用。

### 3. 打包时间戳记录

项目在执行打包（`build`）时会自动在全局变量 `__BUILD_TIME__` 中注入打包时间戳（北京时间），并在 `dist` 目录下生成 `version.json` 文件。可以在前端页面进行版本检测或在日志中打印打包时间，便于线上问题的版本追溯。

## 📖 参考资料

- [React 官方文档](https://react.dev/)
- [Vite 官方文档](https://cn.vitejs.dev/)
- [Tailwind CSS 官方文档](https://tailwindcss.com/docs)
- [shadcn/ui 组件文档](https://ui.shadcn.com/docs/components)
- [Lucide 图标库](https://lucide.dev/icons/)
- [Zustand 文档](https://zustand-demo.pmnd.rs/)