# react19_ts

**Repository Path**: xiaoli-account/react19_ts

## Basic Information

- **Project Name**: react19_ts
- **Description**: 本项目是一个基于 react19 和 TypeScript 的AI IDE前端项目，主要应用于AI方向的后台管理系统，集成了常用的页面级权限、按钮级权限、echarts可视化图表、logicflow 2.x可视化流程插件、多布局切换、多主题切换、国际化多语言切换，同时将当下风靡的AI IDE自动生成代码，进行了物理隔离设计与规则边界设计，便于不同水平的同学放心使用AI IDE，降低AI代码风险。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2026-01-07
- **Last Updated**: 2026-04-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, TypeScript, llmstxt, AI, logicFlow

## README

# 🚀 React 19 企业级后台管理系统

> 基于 React 19 + TypeScript + Vite 7 构建的现代化企业级后台管理系统框架

[![React](https://img.shields.io/badge/React-19.2.0-blue.svg)](https://react.dev/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue.svg)](https://www.typescriptlang.org/)
[![Vite](https://img.shields.io/badge/Vite-7.2-purple.svg)](https://vitejs.dev/)
[![Ant Design](https://img.shields.io/badge/Ant%20Design-6.1-blue.svg)](https://ant.design/)
[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)

---

## 📋 目录

- [技术栈](#-技术栈)
- [功能特性](#-功能特性)
- [项目结构](#-项目结构)
- [快速开始](#-快速开始)
- [开发规范](#-开发规范)
- [配置说明](#-配置说明)
- [相关文档](#-相关文档)

---

## 🛠 技术栈

### 核心框架

| 技术         | 版本   | 说明                  |
| ------------ | ------ | --------------------- |
| React        | 19.2.0 | UI 框架，支持并发渲染 |
| TypeScript   | 5.9.x  | 类型安全              |
| Vite         | 7.2.x  | 构建工具              |
| React Router | 7.12.x | 路由管理              |

### UI 框架

| 技术              | 版本   | 说明             |
| ----------------- | ------ | ---------------- |
| Ant Design        | 6.1.x  | 企业级 UI 组件库 |
| TailwindCSS       | 4.1.x  | 原子化 CSS 框架  |
| SCSS              | 1.97.x | CSS 预处理器     |
| @ant-design/icons | 6.1.x  | 图标库           |

### 状态管理

| 技术        | 版本  | 说明           |
| ----------- | ----- | -------------- |
| Zustand     | 5.0.x | 轻量级状态管理 |
| React Hooks | -     | 组件状态管理   |

### 工具库

| 技术          | 版本   | 说明             |
| ------------- | ------ | ---------------- |
| Axios         | 1.13.x | HTTP 请求库      |
| i18next       | 25.7.x | 国际化解决方案   |
| react-i18next | 16.5.x | React 国际化集成 |
| js-cookie     | 3.0.x  | Cookie 操作      |
| lodash-es     | 4.17.x | 工具函数库       |
| localforage   | 1.10.x | 本地存储         |
| nprogress     | 0.2.x  | 进度条           |
| animate.css   | 4.1.x  | CSS 动画库       |

### 可视化

| 技术      | 版本  | 说明       |
| --------- | ----- | ---------- |
| LogicFlow | 2.1.x | 流程编辑器 |

### 开发工具

| 技术                 | 版本   | 说明       |
| -------------------- | ------ | ---------- |
| ESLint               | 9.39.x | 代码检查   |
| Prettier             | -      | 代码格式化 |
| @vitejs/plugin-react | 5.1.x  | React 插件 |

---

## ✨ 功能特性

### 🎨 界面设计

- ✅ **多布局模式** - 支持基础布局、侧边栏布局、顶部菜单布局
- ✅ **主题切换** - 明暗主题无缝切换，CSS 变量驱动
- ✅ **国际化** - 中英文语言支持，运行时切换
- ✅ **响应式** - 适配桌面端和移动端

### 🔐 权限管理

- ✅ **用户认证** - 完整的登录认证流程
- ✅ **Token 管理** - JWT Token + Cookie 双重存储
- ✅ **路由守卫** - 页面级权限控制
- 🚧 **角色权限** - 基于角色的访问控制
- 🚧 **动态菜单** - 根据权限动态生成菜单

### 🛠️ 开发体验

- ✅ **TypeScript** - 严格的类型检查
- ✅ **热更新** - 毫秒级热更新
- ✅ **代码规范** - ESLint + Prettier
- ✅ **路径别名** - `@/` 简化导入路径

### 📊 业务功能

- ✅ **登录页面** - 多方式登录（账户/手机/邮箱）
- ✅ **仪表盘** - 数据展示页面
- 🚧 **用户管理** - 用户增删改查
- 🚧 **角色管理** - 角色权限配置
- 🚧 **系统设置** - 系统参数配置
- 📋 **流程编辑器** - LogicFlow 可视化流程编辑

**图例**：✅ 已完成 | 🚧 开发中 | 📋 规划中

---

## 📁 项目结构

```text
react19_ts/
├── public/                         # 静态资源（不参与构建）
│   └── vite.svg
│
├── src/                            # 源代码目录（手动编写）
│   ├── assets/                     # 静态资源（参与构建）
│   │   ├── fonts/                  # 字体文件
│   │   ├── icons/                  # 图标文件
│   │   └── images/                 # 图片文件
│   │
│   ├── components/                 # 全局通用组件
│   │
│   ├── config/                     # 全局配置中心
│   │   └── index.ts
│   │
│   ├── hooks/                      # 通用 Hooks
│   │   ├── use-auth.ts
│   │   ├── use-permission.ts
│   │   └── use-routes.ts
│   │
│   ├── i18n/                       # 业务页面国际化
│   │   ├── index.ts
│   │   ├── zh-CN/
│   │   └── en-US/
│   │
│   ├── layout/                     # 布局系统
│   │   ├── index.tsx               # LayoutManager 入口
│   │   ├── lee-basic-layout/       # 基础布局
│   │   ├── lee-sidebar-layout/     # 侧边栏布局
│   │   ├── lee-top-menu-layout/    # 顶部菜单布局
│   │   ├── constants/              # 布局常量
│   │   ├── hooks/                  # 布局 Hooks
│   │   ├── i18n/                   # 布局国际化
│   │   ├── stores/                 # 布局状态
│   │   ├── themes/                 # 布局主题
│   │   └── utils/                  # 布局工具
│   │
│   ├── pages/                      # 路由级页面
│   │   ├── dashboard/              # 仪表盘
│   │   ├── error/                  # 错误页面 (403/404/500)
│   │   ├── examples/               # 示例页面
│   │   ├── login/                  # 登录页面
│   │   ├── role-management/        # 角色管理
│   │   ├── system-settings/        # 系统设置
│   │   └── user-management/        # 用户管理
│   │
│   ├── plugins/                    # 插件封装
│   │   ├── analytics.ts
│   │   ├── cache.ts
│   │   ├── i18n.ts
│   │   └── logger.ts
│   │
│   ├── router/                     # 路由系统
│   │   ├── index.tsx
│   │   ├── routes.ts               # 路由配置
│   │   └── routes.tsx              # 路由渲染
│   │
│   ├── services/                   # API 服务层
│   │   ├── auth.ts
│   │   ├── dashboard.ts
│   │   └── user.ts
│   │
│   ├── store/                      # 全局状态管理
│   │   ├── index.ts
│   │   ├── app.ts
│   │   └── user.ts
│   │
│   ├── styles/                     # 全局样式
│   │   ├── global.scss
│   │   ├── variables.scss          # 业务层变量 ($lee-xxx)
│   │   ├── mixins.scss
│   │   └── reset.scss
│   │
│   ├── types/                      # 全局类型定义
│   │   └── route.ts
│   │
│   ├── utils/                      # 工具函数
│   │   ├── request.ts              # Axios 封装
│   │   ├── storage.ts
│   │   ├── cookie.ts
│   │   ├── auth.ts
│   │   └── format.ts
│   │
│   ├── App.tsx                     # 根组件
│   ├── index.css                   # 全局样式入口
│   └── main.tsx                    # 应用入口
│
├── src_ai/                         # AI 代码目录（AI 生成）
│   ├── ai-knowledge/               # AI 知识库
│   │   ├── readme.md               # 知识库说明
│   │   ├── llms.txt.md             # llms.txt 标准文档
│   │   ├── lee-custom-llms-text/   # 项目自定义知识库
│   │   │   ├── llms.txt            # 简洁版知识库
│   │   │   └── llms.full.txt       # 完整版知识库
│   │   ├── ant-design-llms-text/   # Ant Design 知识库
│   │   │   ├── readme.md
│   │   │   ├── llms.txt
│   │   │   └── llms-full.txt
│   │   └── ai-tools-config/        # AI 工具配置文档
│   │       ├── Cursor.md           # Cursor 配置指南
│   │       ├── Windsurf.md         # Windsurf 配置指南
│   │       ├── Antigravity.md      # Antigravity 配置指南
│   │       ├── Qoder.md            # Qoder 配置指南
│   │       ├── Kiro.md             # Kiro 配置指南
│   │       └── VScode.md           # VS Code 配置指南
│   │
│   ├── components/                 # AI 生成的组件
│   ├── pages/                      # AI 生成的页面
│   ├── assets/                     # AI 生成的资源
│   ├── test/                       # AI 生成的测试
│   └── readme.md                   # AI 目录说明
│
├── docs/                           # 项目文档
│   ├── 项目开发规范/
│   ├── 项目设计方案/
│   └── 项目需求/
│
├── .vscode/                        # VS Code 配置
│   └── settings.json               # 工作区配置（含 AI 扩展）
│
├── .windsurf/                      # Windsurf AI 配置
│   └── config.json
│
├── .antigravity/                   # Antigravity AI 配置
│   └── config.yaml
│
├── .continue/                      # Continue AI 配置
│   └── config.json
│
├── .cursorrules                    # Cursor AI 配置
├── .qoder.json                     # Qoder AI 配置
├── .kiro.yaml                      # Kiro AI 配置
│
├── .env.development                # 开发环境变量
├── .env.production                 # 生产环境变量
├── .eslintrc.cjs                   # ESLint 配置
├── .gitignore                      # Git 忽略规则
├── .prettierrc                     # Prettier 配置
├── .stylelintrc.cjs                # Stylelint 配置
├── eslint.config.js                # ESLint Flat Config
├── index.html                      # HTML 模板
├── package.json                    # 项目依赖
├── postcss.config.js               # PostCSS 配置
├── tailwind.config.js              # TailwindCSS 配置
├── tsconfig.json                   # TypeScript 配置
├── vite.config.ts                  # Vite 配置
└── README.md                       # 项目说明
```

---

## 🚀 快速开始

### 环境要求

| 环境     | 版本要求                     |
| -------- | ---------------------------- |
| Node.js  | >= 18.0.0                    |
| npm/pnpm | npm >= 8.0.0 / pnpm >= 8.0.0 |

### 安装依赖

```bash
# 使用 npm
npm install

# 或使用 pnpm（推荐）
pnpm install

# 或使用 yarn
yarn install
```

### 开发环境

```bash
# 启动开发服务器
npm run dev

# 访问地址
http://localhost:4200
```

### 构建部署

```bash
# 构建生产版本
npm run build

# 预览构建结果
npm run preview
```

### 服务器部署目录参考
> /usr/local/react19_ts
> /usr/local/web
临时路径：/usr/local/techflame

### 代码检查

```bash
# ESLint 检查
npm run lint
```

### 版本发布流程

1. 更新版本号（package.json）
2. 更新最新代码(git pull origin dev / git pull origin dev --no-rebase)注意`:wq`退出
3. 补充版本更新日志(version-log.md)
4. 检查项目运行是否正常，检查开发环境与生产环境配置(.env.production/.env.development)
5. 提交最新代码，备注v0.0.X版本发布节点
6. 切换master分支(git checkout master)
7. 合并dev分支（git merge dev）
8. 推送master分支（git push origin master）
9. 查看版本标签列表（git tag）
10. 创建递增版本标签（git tag v0.0.X）
11. 推送标签（git push origin v0.0.X）
12. 构建生产版本（npm run build:skip-ts）
13. 将生成的dist目录文件，替换到服务器对应目录（/usr/local/plm-web）
14. 至此版本发布完成

---

## 📐 开发规范

### 命名规范

| 类型     | 规范                             | 示例                               |
| -------- | -------------------------------- | ---------------------------------- |
| 目录     | kebab-case                       | `user-management/`                 |
| 页面入口 | index.tsx                        | `pages/login/index.tsx`            |
| 组件文件 | index.tsx                        | `components/page-header/index.tsx` |
| Hooks    | use-xxx.ts                       | `hooks/use-auth.ts`                |
| 样式文件 | styles.scss / styles.module.scss | `styles.scss`                      |
| 类型文件 | types.ts                         | `types.ts`                         |
| 常量文件 | constants.ts                     | `constants.ts`                     |

### 变量命名规范

| 层级   | SCSS 变量         | CSS 变量                                |
| ------ | ----------------- | --------------------------------------- |
| 业务层 | `$lee-xxx`        | `--lee-xxx`                             |
| 框架层 | `$lee-layout-xxx` | `--lee-basic-xxx` / `--lee-sidebar-xxx` |

### 国际化命名空间

| 层级   | 命名空间前缀  | 示例                                     |
| ------ | ------------- | ---------------------------------------- |
| 框架层 | `lee-layout-` | `lee-layout-header`、`lee-layout-routes` |
| 业务层 | 页面/模块名   | `login`、`user`、`dashboard`             |

---

## ⚙️ 配置说明

### 环境变量

```bash
# .env.development - 开发环境
VITE_APP_PORT=4200
VITE_APP_API_URL=http://localhost:8080

# .env.production - 生产环境
VITE_APP_API_URL=https://api.example.com
```

### Vite 配置

```typescript
// vite.config.ts
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/variables.scss" as *;`,
      },
    },
  },
  server: {
    port: Number(process.env.VITE_APP_PORT) || 4200,
    proxy: {
      '/api': {
        target: process.env.VITE_APP_API_URL || 'http://localhost:8080',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
});
```

### 路由配置

```typescript
// src/router/routes.ts
export const asyncRoutes: RouteItem[] = [
  {
    path: '/',
    name: 'Layout',
    component: () => import('@/layout'),
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/pages/dashboard'),
        meta: {
          title: '仪表盘',
          i18n: 'lee-layout-routes.Dashboard',
          icon: 'DashboardOutlined',
          requiresAuth: true,
        },
      },
    ],
  },
];
```

---

## 📚 相关文档

| 文档                                                                                | 说明               |
| ----------------------------------------------------------------------------------- | ------------------ |
| [React 企业级项目设计规则](docs/项目开发规范/React%20企业级项目设计规则.md)         | 项目结构与开发规范 |
| [React 企业级项目需求文档](docs/项目需求/React%20企业级项目需求文档.md)             | 功能需求说明       |
| [React 主题色开发说明](docs/项目需求/React%20主题色开发说明.md)                     | 主题系统开发指南   |
| [React i18n国际化语言包开发说明](docs/项目需求/React%20i18n国际化语言包开发说明.md) | 国际化开发指南     |
| [React layout布局模式开发说明](docs/项目需求/React%20layout布局模式开发说明.md)     | 布局系统开发指南   |

---

## 🏗️ 项目架构

### 分层设计

```text
┌─────────────────────────────────────────────────────────────┐
│                    Pages Layer (页面层)                      │
│              路由级页面 - 业务逻辑入口                        │
├─────────────────────────────────────────────────────────────┤
│                 Components Layer (组件层)                    │
│              全局通用组件 + 页面私有组件                      │
├─────────────────────────────────────────────────────────────┤
│                   Hooks Layer (逻辑层)                       │
│              业务逻辑抽象 - 状态 + 副作用                     │
├─────────────────────────────────────────────────────────────┤
│                 Services Layer (服务层)                      │
│              API 接口封装 - 数据获取                         │
├─────────────────────────────────────────────────────────────┤
│                   Store Layer (状态层)                       │
│              全局状态管理 - Zustand                          │
├─────────────────────────────────────────────────────────────┤
│                   Utils Layer (工具层)                       │
│              工具函数 - 纯函数                               │
└─────────────────────────────────────────────────────────────┘
```

### 设计原则

| 原则         | 说明                   |
| ------------ | ---------------------- |
| **单一职责** | 每个模块只负责一个功能 |
| **松耦合**   | 模块间依赖最小化       |
| **高内聚**   | 相关功能聚合在一起     |
| **可扩展**   | 易于添加新功能         |
| **可维护**   | 代码清晰易懂           |

---

## 🔒 安全特性

| 特性       | 说明                        |
| ---------- | --------------------------- |
| Token 认证 | JWT Token + Cookie 双重存储 |
| 路由守卫   | 页面级权限验证              |
| XSS 防护   | React 默认转义              |
| 请求拦截   | 统一的错误处理              |

---

## 🌐 浏览器支持

| 浏览器  | 版本  |
| ------- | ----- |
| Chrome  | >= 87 |
| Firefox | >= 78 |
| Safari  | >= 14 |
| Edge    | >= 88 |

---

## 📝 更新日志

### v0.1.0 (2026-01-21)

- ✨ 项目初始化
- 🎨 三种布局模式（basic / sidebar / top-menu）
- 🌓 明暗主题切换
- 🌐 中英文国际化
- 🔐 登录认证流程
- 📦 Zustand 状态管理
- 🛠️ 完整的开发工具链

---

## 📄 许可证

本项目采用 [MIT](LICENSE) 许可证。

---

## 🙏 致谢

感谢以下开源项目：

- [React](https://react.dev/)
- [Vite](https://vitejs.dev/)
- [Ant Design](https://ant.design/)
- [TypeScript](https://www.typescriptlang.org/)
- [TailwindCSS](https://tailwindcss.com/)
- [Zustand](https://docs.pmnd.rs/zustand)
- [i18next](https://www.i18next.com/)
- [LogicFlow](https://site.logic-flow.cn/)

---