Merge branch 'main' of https://git.wjx.im/admin/MYXY_Web
This commit is contained in:
Stev_Wang
@@ -1,5 +0,0 @@
|
|||||||
请基于目前的项目架构和引入的Ant Design 6.1.0 UI 组件库为【梦幻西游一站式运营管理系统】开发2个页面：
|
|
||||||
|
|
||||||
1. 玩家服务中心入口：/player，目前只需要开发一个登录页面即可。
|
|
||||||
2. 运营管理系统后台入口：/admin，目前也只需要开发一个登录页面即可。
|
|
||||||
|
|
||||||
@@ -1,321 +0,0 @@
|
|||||||
# 梦幻西游一站式运营管理系统 项目架构和 Ant Design 集成文档
|
|
||||||
|
|
||||||
## 📋 项目概述
|
|
||||||
|
|
||||||
**项目名称：** 梦幻西游一站式运营管理系统
|
|
||||||
**项目类型：** React + TypeScript + Vite 前端项目
|
|
||||||
**当前版本：** 0.0.1 dev
|
|
||||||
**创建日期：** 2025年12月11日
|
|
||||||
**文档版本：** v1.0
|
|
||||||
|
|
||||||
### 项目特性
|
|
||||||
- ✅ 现代化 React 19 开发环境
|
|
||||||
- ✅ TypeScript 类型安全
|
|
||||||
- ✅ Vite 快速构建工具
|
|
||||||
- ✅ Ant Design 6.1.0 UI 组件库
|
|
||||||
- ✅ ESLint 代码质量检查
|
|
||||||
- ✅ 热模块替换 (HMR)
|
|
||||||
|
|
||||||
## 🏗️ 技术栈
|
|
||||||
|
|
||||||
### 核心框架
|
|
||||||
- **React：** 19.2.0 - 最新的 React 版本
|
|
||||||
- **TypeScript：** 5.9.3 - 类型安全的 JavaScript
|
|
||||||
- **Vite：** 7.2.4 - 快速的构建工具和开发服务器
|
|
||||||
|
|
||||||
### UI 组件库
|
|
||||||
- **Ant Design：** 6.1.0 - 企业级 UI 设计语言和组件库
|
|
||||||
- **版本状态：** ✅ 最新稳定版
|
|
||||||
|
|
||||||
### 开发工具
|
|
||||||
- **ESLint：** 9.39.1 - 代码质量检查
|
|
||||||
- **@eslint/js：** 9.39.1 - ESLint JavaScript 规则
|
|
||||||
- **@vitejs/plugin-react：** 5.1.1 - Vite React 插件
|
|
||||||
- **typescript-eslint：** 8.46.4 - TypeScript ESLint 规则
|
|
||||||
|
|
||||||
### 类型定义
|
|
||||||
- **@types/node：** 24.10.1 - Node.js 类型定义
|
|
||||||
- **@types/react：** 19.2.5 - React 类型定义
|
|
||||||
- **@types/react-dom：** 19.2.3 - React DOM 类型定义
|
|
||||||
|
|
||||||
## 📁 项目结构
|
|
||||||
|
|
||||||
```
|
|
||||||
MHXY_Web_new/
|
|
||||||
├── public/ # 静态资源目录
|
|
||||||
│ └── vite.svg # Vite Logo
|
|
||||||
├── src/ # 源代码目录
|
|
||||||
│ ├── assets/ # 项目资源
|
|
||||||
│ │ └── react.svg # React Logo
|
|
||||||
│ ├── App.css # App 组件样式
|
|
||||||
│ ├── App.tsx # 主应用组件
|
|
||||||
│ ├── index.css # 全局样式
|
|
||||||
│ └── main.tsx # 应用入口文件
|
|
||||||
├── docs/ # 项目文档目录
|
|
||||||
│ └── 项目架构和Antd集成文档.md
|
|
||||||
├── .gitignore # Git 忽略文件
|
|
||||||
├── eslint.config.js # ESLint 配置
|
|
||||||
├── index.html # HTML 入口文件
|
|
||||||
├── package-lock.json # 依赖版本锁定文件
|
|
||||||
├── package.json # 项目配置和依赖
|
|
||||||
├── tsconfig.app.json # 应用 TypeScript 配置
|
|
||||||
├── tsconfig.json # TypeScript 主配置
|
|
||||||
├── tsconfig.node.json # Node 环境 TypeScript 配置
|
|
||||||
└── vite.config.ts # Vite 构建配置
|
|
||||||
```
|
|
||||||
|
|
||||||
## ⚙️ 配置文件详解
|
|
||||||
|
|
||||||
### package.json
|
|
||||||
项目的核心配置文件，包含项目元数据、脚本命令和依赖信息。
|
|
||||||
|
|
||||||
**主要依赖：**
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"dependencies": {
|
|
||||||
"antd": "^6.1.0",
|
|
||||||
"react": "^19.2.0",
|
|
||||||
"react-dom": "^19.2.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**脚本命令：**
|
|
||||||
- `npm run dev` - 启动开发服务器
|
|
||||||
- `npm run build` - 构建生产版本
|
|
||||||
- `npm run lint` - 运行 ESLint 检查
|
|
||||||
- `npm run preview` - 预览生产构建
|
|
||||||
|
|
||||||
### TypeScript 配置
|
|
||||||
|
|
||||||
#### tsconfig.json
|
|
||||||
TypeScript 项目的主配置文件，采用项目引用模式：
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"files": [],
|
|
||||||
"references": [
|
|
||||||
{ "path": "./tsconfig.app.json" },
|
|
||||||
{ "path": "./tsconfig.node.json" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### tsconfig.app.json
|
|
||||||
应用级别的 TypeScript 配置，定义编译选项和包含的文件。
|
|
||||||
|
|
||||||
#### tsconfig.node.json
|
|
||||||
Node.js 环境的 TypeScript 配置，用于构建工具和脚本。
|
|
||||||
|
|
||||||
### Vite 配置 (vite.config.ts)
|
|
||||||
```typescript
|
|
||||||
import { defineConfig } from 'vite'
|
|
||||||
import react from '@vitejs/plugin-react'
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [react()],
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
### ESLint 配置 (eslint.config.js)
|
|
||||||
项目代码质量检查配置，包含 React 相关的规则集。
|
|
||||||
|
|
||||||
## 🎨 Ant Design 6.1.0 集成
|
|
||||||
|
|
||||||
### 安装信息
|
|
||||||
- **版本：** 6.1.0 (最新稳定版)
|
|
||||||
- **安装方式：** npm install antd
|
|
||||||
- **样式导入：** `import 'antd/dist/reset.css'`
|
|
||||||
|
|
||||||
### 集成步骤
|
|
||||||
|
|
||||||
#### 1. 依赖安装
|
|
||||||
```bash
|
|
||||||
npm install antd
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 2. 样式配置
|
|
||||||
在 `src/main.tsx` 中添加样式导入：
|
|
||||||
```typescript
|
|
||||||
import { StrictMode } from 'react'
|
|
||||||
import { createRoot } from 'react-dom/client'
|
|
||||||
import 'antd/dist/reset.css' // Ant Design 样式
|
|
||||||
import './index.css'
|
|
||||||
import App from './App.tsx'
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 3. 组件使用示例
|
|
||||||
在 `src/App.tsx` 中展示了主要组件的使用：
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
import { Button, Card, Input, Space, Typography, Row, Col } from 'antd'
|
|
||||||
|
|
||||||
const { Title, Text } = Typography
|
|
||||||
```
|
|
||||||
|
|
||||||
### 已实现的功能组件
|
|
||||||
|
|
||||||
#### 1. Button 组件
|
|
||||||
- 主按钮 (type="primary")
|
|
||||||
- 默认按钮
|
|
||||||
- 虚线按钮 (type="dashed")
|
|
||||||
- 文本按钮 (type="text")
|
|
||||||
|
|
||||||
#### 2. Card 组件
|
|
||||||
- 用于内容分组和布局
|
|
||||||
- 支持自定义标题
|
|
||||||
|
|
||||||
#### 3. Input 组件
|
|
||||||
- 文本输入框
|
|
||||||
- 实时状态显示
|
|
||||||
|
|
||||||
#### 4. Space 组件
|
|
||||||
- 使用 `orientation` 属性 (替代已弃用的 `direction`)
|
|
||||||
- 垂直布局控制
|
|
||||||
|
|
||||||
#### 5. Typography 组件
|
|
||||||
- Title 标题组件
|
|
||||||
- Text 文本组件
|
|
||||||
|
|
||||||
#### 6. Layout 组件
|
|
||||||
- Row 栅格行
|
|
||||||
- Col 栅格列
|
|
||||||
- 响应式布局支持
|
|
||||||
|
|
||||||
### API 变更注意事项
|
|
||||||
|
|
||||||
#### Space 组件 API 变更
|
|
||||||
- **旧 API：** `<Space direction="vertical">`
|
|
||||||
- **新 API：** `<Space orientation="vertical">`
|
|
||||||
- **原因：** `direction` 属性在 v6 中已弃用
|
|
||||||
|
|
||||||
## 🚀 开发指南
|
|
||||||
|
|
||||||
### 环境要求
|
|
||||||
- Node.js (最新 LTS 版本)
|
|
||||||
- npm 或 yarn 包管理器
|
|
||||||
|
|
||||||
### 快速开始
|
|
||||||
|
|
||||||
#### 1. 安装依赖
|
|
||||||
```bash
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 2. 启动开发服务器
|
|
||||||
```bash
|
|
||||||
npm run dev
|
|
||||||
```
|
|
||||||
- 开发服务器地址：http://localhost:5174/
|
|
||||||
- 支持热模块替换 (HMR)
|
|
||||||
|
|
||||||
#### 3. 代码检查
|
|
||||||
```bash
|
|
||||||
npm run lint
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 4. 构建生产版本
|
|
||||||
```bash
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 5. 预览生产构建
|
|
||||||
```bash
|
|
||||||
npm run preview
|
|
||||||
```
|
|
||||||
|
|
||||||
### 开发最佳实践
|
|
||||||
|
|
||||||
#### 1. 组件导入
|
|
||||||
按需导入 antd 组件，避免引入整个库：
|
|
||||||
```typescript
|
|
||||||
// ✅ 推荐
|
|
||||||
import { Button, Card } from 'antd'
|
|
||||||
|
|
||||||
// ❌ 不推荐
|
|
||||||
import { Button } from 'antd'
|
|
||||||
import { Card } from 'antd'
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 2. 样式处理
|
|
||||||
- 使用 CSS Modules 或 styled-components
|
|
||||||
- 遵循 antd 的设计规范
|
|
||||||
- 利用 antd 的主题定制功能
|
|
||||||
|
|
||||||
#### 3. TypeScript 集成
|
|
||||||
- 充分利用 TypeScript 类型检查
|
|
||||||
- 使用 antd 提供的类型定义
|
|
||||||
- 避免使用 `any` 类型
|
|
||||||
|
|
||||||
#### 4. 响应式设计
|
|
||||||
- 使用 antd 的栅格系统
|
|
||||||
- 合理配置断点
|
|
||||||
- 移动端优先的设计理念
|
|
||||||
|
|
||||||
## 📦 构建和部署
|
|
||||||
|
|
||||||
### 构建配置
|
|
||||||
- **构建工具：** Vite
|
|
||||||
- **输出目录：** `dist/`
|
|
||||||
- **代码分割：** 自动处理
|
|
||||||
- **资源优化：** 自动压缩和优化
|
|
||||||
|
|
||||||
### 部署建议
|
|
||||||
1. 使用静态网站托管服务 (Vercel, Netlify)
|
|
||||||
2. 配置适当的缓存策略
|
|
||||||
3. 启用 GZIP 压缩
|
|
||||||
4. 配置 HTTPS
|
|
||||||
|
|
||||||
## 🔧 故障排除
|
|
||||||
|
|
||||||
### 常见问题
|
|
||||||
|
|
||||||
#### 1. antd 样式不生效
|
|
||||||
**解决方案：** 确保在入口文件正确导入 `antd/dist/reset.css`
|
|
||||||
|
|
||||||
#### 2. TypeScript 类型错误
|
|
||||||
**解决方案：**
|
|
||||||
- 检查 @types 包是否正确安装
|
|
||||||
- 确保 tsconfig.json 配置正确
|
|
||||||
|
|
||||||
#### 3. 开发服务器启动失败
|
|
||||||
**解决方案：**
|
|
||||||
- 检查端口是否被占用
|
|
||||||
- 确保 Node.js 版本兼容
|
|
||||||
- 清除 node_modules 重新安装
|
|
||||||
|
|
||||||
#### 4. Space 组件弃用警告
|
|
||||||
**解决方案：** 将 `direction` 属性替换为 `orientation`
|
|
||||||
|
|
||||||
## 📚 相关资源
|
|
||||||
|
|
||||||
### 官方文档
|
|
||||||
- [React 官方文档](https://react.dev/)
|
|
||||||
- [TypeScript 官方文档](https://www.typescriptlang.org/)
|
|
||||||
- [Vite 官方文档](https://vitejs.dev/)
|
|
||||||
- [Ant Design 官方文档](https://ant.design/)
|
|
||||||
|
|
||||||
### 开发工具
|
|
||||||
- [VS Code](https://code.visualstudio.com/) - 推荐 IDE
|
|
||||||
- [React Developer Tools](https://react.dev/learn/react-developer-tools) - 浏览器扩展
|
|
||||||
|
|
||||||
## 📝 更新日志
|
|
||||||
|
|
||||||
### v1.0 (2025-12-11)
|
|
||||||
- ✅ 项目初始化
|
|
||||||
- ✅ React 19 + TypeScript + Vite 环境配置
|
|
||||||
- ✅ Ant Design 6.1.0 集成
|
|
||||||
- ✅ 基础组件演示实现
|
|
||||||
- ✅ 项目文档编写
|
|
||||||
|
|
||||||
## 🤝 贡献指南
|
|
||||||
|
|
||||||
1. 遵循现有的代码风格和命名规范
|
|
||||||
2. 添加适当的注释和文档
|
|
||||||
3. 确保所有测试通过
|
|
||||||
4. 遵循语义化版本控制
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**最后更新：** 2025年12月11日
|
|
||||||
**文档维护者：** MHXY 开发团队
|
|
||||||
**联系方式：** [项目负责人信息]
|
|
||||||
Reference in New Issue
Block a user