diff --git a/docs/项目架构和Antd集成文档.md b/docs/项目架构和Antd集成文档.md deleted file mode 100644 index c9d9b85..0000000 --- a/docs/项目架构和Antd集成文档.md +++ /dev/null @@ -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：** `` -- **新 API：** `` -- **原因：** `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 开发团队 -**联系方式：** [项目负责人信息] \ No newline at end of file