# reactHouseAdmin

**Repository Path**: li-chuwei/react-house-admin

## Basic Information

- **Project Name**: reactHouseAdmin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-30
- **Last Updated**: 2026-08-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 租房后台管理系统（React 版）

由 Vue3 + Element Plus 版本的 `rentHouseAdmin` 重构而来，技术栈迁移为 **React 19 + TypeScript + Vite + Ant Design 6**。

## 技术栈

| 能力      | 旧版（Vue3）    | 新版（React）                |
| --------- | --------------- | ---------------------------- |
| 框架      | Vue 3           | React 19                     |
| UI 组件库 | Element Plus    | Ant Design 6                 |
| 路由      | Vue Router 4    | React Router 7               |
| 状态管理  | Pinia（持久化） | Zustand（persist 持久化）    |
| 请求      | Axios 封装      | Axios 封装（同一套响应协议） |
| 构建      | Vite 4          | Vite 8                       |

## 快速开始

```bash
pnpm install      # 安装依赖
pnpm dev          # 启动开发服务器（默认 5173，被占用会自动 +1）
pnpm build        # 类型检查 + 生产构建
pnpm preview      # 预览生产构建
pnpm lint         # ESLint 检查
pnpm fix          # ESLint 自动修复
pnpm lint:style   # Stylelint 检查/修复 CSS
pnpm format       # Prettier 格式化
```

## 工程化（与旧版 rentHouseAdmin 对齐）

- **Prettier**：`.prettierrc.json`（无分号、单引号），`pnpm format` 全量格式化
- **ESLint**：flat config，集成 `eslint-config-prettier` 避免格式规则冲突
- **Stylelint**：`.stylelintrc.cjs`（standard + recess-order 属性顺序）
- **husky + lint-staged**：提交前自动对暂存文件执行 eslint/stylelint/prettier
- **commitlint**：提交信息需符合 Conventional Commits（feat/fix/docs/style/...），详见 `commitlint.config.cjs`

## 后端接口配置

接口协议与旧版保持一致（响应结构 `{ code, message, data }`，成功码 200，token 失效码 305/601/602，请求头 `access-token`）。

- 开发环境：请求 `/admin/*` 由 Vite 代理转发，后端地址在 `.env.development` 的 `VITE_PROXY_TARGET` 中修改
- 生产环境：直连 `.env.production` 的 `VITE_API_BASE_URL`

## 目录结构

```
src/
├── api/                # 接口定义（按模块拆分 index.ts + types.ts）
│   ├── types.ts        # 通用响应/分页类型
│   └── user/           # 登录、验证码、用户信息、退出
├── assets/             # 静态资源
├── components/         # 通用业务组件（待补充）
├── config/             # 全局配置（路径常量、菜单配置）
│   ├── index.ts
│   └── menus.tsx       # 侧边菜单树，与路由自动同步
├── enums/              # 枚举（ResultEnum 等）
├── layouts/
│   └── AdminLayout/    # 后台布局：侧边菜单 + 面包屑 + 用户下拉
├── router/
│   ├── guard.tsx       # 登录守卫
│   └── index.tsx       # 路由表（菜单叶子自动生成占位路由）
├── store/
│   └── user.ts         # 用户 store（token 持久化到 localStorage）
├── styles/             # 全局样式
├── utils/
│   └── request.ts      # axios 封装（拦截器、统一错误提示、token 失效处理）
├── views/
│   ├── home/           # 首页
│   ├── login/          # 登录页（用户名 + 密码 + 图形验证码）
│   ├── placeholder/    # 模块占位页（建设中）
│   └── error/          # 404
├── App.tsx             # 根组件（RouterProvider）
└── main.tsx            # 入口（antd 中文环境 + 主题）
```

## 开发约定

- **新增页面**：先在 `src/config/menus.tsx` 加菜单项，再把 `src/router/index.tsx` 里对应的占位路由换成真实页面组件
- **新增接口**：在 `src/api/<模块>/types.ts` 定义类型，`index.ts` 里通过 `http.get/post` 导出函数，自动获得泛型推导
- 路径别名 `@` 指向 `src/`
- TypeScript 已开启 `strict` 模式