# react-oneself-web

**Repository Path**: volatchange/react-oneself-web

## Basic Information

- **Project Name**: react-oneself-web
- **Description**: 用react写的个人网站
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-09
- **Last Updated**: 2026-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 个人网站, React, vite

## README

# React Practice Project

一个基于 React + TypeScript + Vite 构建的现代化前端项目，包含主题切换、设备检测、路由管理、状态管理等核心功能。

## 技术栈

### 核心框架
- **React 18** - 现代化前端框架
- **TypeScript** - 类型安全的 JavaScript 超集
- **Vite** - 下一代前端构建工具

### UI 组件库
- **Ant Design** - 企业级 UI 设计语言
- **Tailwind CSS** - 实用优先的 CSS 框架

### 状态管理
- **Zustand** - 轻量级状态管理库

### 路由管理
- **React Router DOM v7** - 声明式路由库

### 动画效果
- **Framer Motion** - 强大的动画库

### HTTP 客户端
- **Axios** - 基于 Promise 的 HTTP 客户端

### 代码规范
- **ESLint** - JavaScript/TypeScript 代码检查工具
- **Stylelint** - CSS/SCSS 代码检查工具
- **Prettier** - 代码格式化工具
- **Husky** - Git 钩子工具
- **Lint-staged** - 只检查已暂存的文件

### 测试框架
- **Vitest** - 下一代测试框架
- **React Testing Library** - React 组件测试库

## 项目特点

- ✅ **组件化设计** - 清晰的组件结构和复用机制
- ✅ **主题切换** - 支持多种主题模式切换
- ✅ **响应式布局** - 适配不同设备尺寸
- ✅ **设备检测** - 自动检测设备类型并调整布局
- ✅ **状态管理** - 统一的状态管理方案
- ✅ **代码规范** - 严格的代码质量控制
- ✅ **单元测试** - 完善的测试覆盖
- ✅ **动画效果** - 流畅的交互动画

## 开发流程

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm run dev
```

### 构建生产版本

```bash
pnpm run build
```

### 预览构建结果

```bash
pnpm run preview
```

### 代码检查与修复

```bash
pnpm run lint
```

### 类型检查

```bash
pnpm run type:check
```

### 运行测试

```bash
# 运行所有测试
pnpm run test

# 运行测试并生成报告
pnpm run test:run

# 启动测试 UI
pnpm run test:ui
```

## 目录结构

```
src/
├── apis/            # API 接口定义
├── assets/          # 静态资源
│   └── images/      # 图片资源
├── components/      # 通用组件
│   ├── NavBar/      # 导航栏组件
│   ├── WaveAnimation/ # 波浪动画组件
│   ├── ui/          # 基础 UI 组件
│   └── ThemeSwitcher.tsx # 主题切换组件
├── config/          # 配置文件
├── enums/           # 枚举类型
├── hooks/           # 自定义 Hooks
│   ├── useDeviceDetector.ts # 设备检测 Hook
│   └── useTheme.ts  # 主题管理 Hook
├── lib/             # 工具库
├── pages/           # 页面组件
│   ├── 404/         # 404 页面
│   ├── Home/        # 首页
│   └── UserInfo/    # 用户信息页
├── router/          # 路由配置
├── store/           # 状态管理
│   ├── deviceStore.ts # 设备状态
│   ├── themeStore.ts # 主题状态
│   ├── tokenStore.ts # Token 状态
│   ├── userStore.ts # 用户状态
│   └── index.ts     # Store 入口
├── styles/          # 全局样式
├── tests/           # 测试文件
│   ├── components/  # 组件测试
│   └── store/       # Store 测试
├── themes/          # 主题定义
├── utils/           # 工具函数
│   ├── authenthication.ts # 认证相关
│   ├── device.ts    # 设备检测
│   ├── request.ts   # HTTP 请求封装
│   └── theme.ts     # 主题工具
├── AppWapper.tsx    # 应用入口组件
├── index.css        # 全局 CSS
└── main.tsx         # 应用入口
```

## 核心功能

### 1. 主题切换

支持多种主题模式切换，包括：
- 浅色主题
- 深色主题
- 系统主题

### 2. 设备检测

自动检测设备类型，支持：
- 移动端检测
- 响应式布局调整
- 窗口大小变化监听
- 屏幕方向变化监听

### 3. 路由管理

基于 React Router DOM v7 的路由管理，支持：
- 声明式路由配置
- 懒加载组件
- 路由守卫

### 4. 状态管理

基于 Zustand 的状态管理，包含：
- 用户状态
- Token 管理
- 主题状态
- 设备状态

### 5. 动画效果

使用 Framer Motion 实现流畅的动画效果，包括：
- 波浪动画
- 页面过渡动画
- 组件交互动画

## 代码规范

项目采用严格的代码规范，包括：

- **JavaScript/TypeScript**：ESLint + Prettier
- **CSS/SCSS**：Stylelint
- **Git**：Husky + Lint-staged
- **提交信息**：Commitlint

## 浏览器支持

- Chrome (最新版)
- Firefox (最新版)
- Safari (最新版)
- Edge (最新版)

## 许可证

MIT