docs: 更新README.md项目文档
This commit is contained in:
MaeLucia
parent
0551fb9e20
commit
5801077aa6
317
README.md
317
README.md
|
|
@ -1,73 +1,274 @@
|
||||||
# React + TypeScript + Vite
|
# 入舍智能家装 - 前端项目
|
||||||
|
|
||||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
<p align="center">
|
||||||
|
<img src="https://img.shields.io/badge/React-18.2.0-61DAFB?style=flat-square&logo=react" alt="React">
|
||||||
|
<img src="https://img.shields.io/badge/TypeScript-5.2.2-3178C6?style=flat-square&logo=typescript" alt="TypeScript">
|
||||||
|
<img src="https://img.shields.io/badge/Vite-5.1.0-646CFF?style=flat-square&logo=vite" alt="Vite">
|
||||||
|
<img src="https://img.shields.io/badge/TailwindCSS-3.4.1-38B2AC?style=flat-square&logo=tailwindcss" alt="TailwindCSS">
|
||||||
|
</p>
|
||||||
|
|
||||||
Currently, two official plugins are available:
|
## 📖 项目简介
|
||||||
|
|
||||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
**入舍智能家装**是一款面向家装行业的智能化服务平台，旨在为用户提供从装修预算计算、设计方案推荐到施工进度跟踪的一站式家装解决方案。通过AI智能助手、设计师对接、团购优惠等核心功能，帮助用户轻松完成家装全流程。
|
||||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
||||||
|
|
||||||
## React Compiler
|
### 项目目标
|
||||||
|
|
||||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
- 🏠 **智能化服务**：通过AI助手提供装修咨询、预算计算等智能服务
|
||||||
|
- 🎨 **设计对接**：连接专业设计师，提供个性化设计方案
|
||||||
|
- 🛒 **团购优惠**：整合优质家装资源，提供团购套餐优惠
|
||||||
|
- 📊 **进度追踪**：实时跟踪装修进度，透明化施工流程
|
||||||
|
|
||||||
## Expanding the ESLint configuration
|
---
|
||||||
|
|
||||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
## ✨ 核心功能
|
||||||
|
|
||||||
```js
|
### 用户端功能
|
||||||
export default defineConfig([
|
|
||||||
globalIgnores(['dist']),
|
|
||||||
{
|
|
||||||
files: ['**/*.{ts,tsx}'],
|
|
||||||
extends: [
|
|
||||||
// Other configs...
|
|
||||||
|
|
||||||
// Remove tseslint.configs.recommended and replace with this
|
| 模块 | 功能描述 |
|
||||||
tseslint.configs.recommendedTypeChecked,
|
|------|----------|
|
||||||
// Alternatively, use this for stricter rules
|
| **首页** | 轮播Banner、快捷入口、团购秒杀、精选案例展示 |
|
||||||
tseslint.configs.strictTypeChecked,
|
| **智能管家** | AI对话助手、装修预算计算、语音交互支持 |
|
||||||
// Optionally, add this for stylistic rules
|
| **逛逛** | 设计师案例分享、业主装修日记、视频内容浏览 |
|
||||||
tseslint.configs.stylisticTypeChecked,
|
| **团购** | 团购套餐、商品详情、班车预约 |
|
||||||
|
| **我的** | 个人中心、装修进度、数据资产、合伙人中心 |
|
||||||
|
|
||||||
// Other configs...
|
### 特色功能
|
||||||
],
|
|
||||||
languageOptions: {
|
- 🔔 **通知中心**：订单通知、优惠活动、系统消息实时推送
|
||||||
parserOptions: {
|
- 🎯 **秒杀倒计时**：团购套餐限时秒杀，倒计时实时更新
|
||||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
- 🌓 **主题切换**：支持亮色/暗色/深蓝三种主题模式
|
||||||
tsconfigRootDir: import.meta.dirname,
|
- 📱 **响应式设计**：完美适配移动端和桌面端
|
||||||
},
|
|
||||||
// other options...
|
---
|
||||||
},
|
|
||||||
},
|
## 🛠️ 技术栈
|
||||||
])
|
|
||||||
|
### 前端框架
|
||||||
|
|
||||||
|
- **React 18** - 渐进式UI框架
|
||||||
|
- **TypeScript** - 类型安全的JavaScript超集
|
||||||
|
- **Vite** - 下一代前端构建工具
|
||||||
|
|
||||||
|
### UI & 样式
|
||||||
|
|
||||||
|
- **TailwindCSS** - 原子化CSS框架
|
||||||
|
- **Framer Motion** - React动画库
|
||||||
|
- **Lucide React** - 精美图标库
|
||||||
|
|
||||||
|
### 状态管理
|
||||||
|
|
||||||
|
- **Zustand** - 轻量级状态管理
|
||||||
|
- **React Router** - 路由管理
|
||||||
|
|
||||||
|
### 工具链
|
||||||
|
|
||||||
|
- **ESLint** - 代码质量检查
|
||||||
|
- **PostCSS** - CSS后处理器
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📁 项目结构
|
||||||
|
|
||||||
|
```
|
||||||
|
rushe-ui/
|
||||||
|
├── src/
|
||||||
|
│ ├── components/ # 公共组件
|
||||||
|
│ │ ├── AIChatModal.tsx # AI聊天弹窗
|
||||||
|
│ │ ├── NotificationModal.tsx # 通知弹窗
|
||||||
|
│ │ └── ThemeProvider.tsx # 主题提供者
|
||||||
|
│ ├── layouts/ # 布局组件
|
||||||
|
│ │ ├── AdminLayout.tsx # 管理端布局
|
||||||
|
│ │ └── UserLayout.tsx # 用户端布局
|
||||||
|
│ ├── pages/ # 页面组件
|
||||||
|
│ │ ├── admin/ # 管理端页面
|
||||||
|
│ │ └── user/ # 用户端页面
|
||||||
|
│ │ ├── ai/ # 智能管家
|
||||||
|
│ │ ├── explore/ # 逛逛
|
||||||
|
│ │ ├── group/ # 团购
|
||||||
|
│ │ ├── home/ # 首页
|
||||||
|
│ │ ├── mine/ # 我的
|
||||||
|
│ │ └── progress/ # 进度
|
||||||
|
│ ├── mock/ # 模拟数据
|
||||||
|
│ ├── store/ # 状态存储
|
||||||
|
│ ├── App.tsx # 应用入口
|
||||||
|
│ ├── main.tsx # 渲染入口
|
||||||
|
│ └── index.css # 全局样式
|
||||||
|
├── public/ # 静态资源
|
||||||
|
├── package.json # 项目配置
|
||||||
|
├── tailwind.config.js # Tailwind配置
|
||||||
|
├── tsconfig.json # TypeScript配置
|
||||||
|
└── vite.config.ts # Vite配置
|
||||||
```
|
```
|
||||||
|
|
||||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
---
|
||||||
|
|
||||||
```js
|
## 🚀 快速开始
|
||||||
// eslint.config.js
|
|
||||||
import reactX from 'eslint-plugin-react-x'
|
|
||||||
import reactDom from 'eslint-plugin-react-dom'
|
|
||||||
|
|
||||||
export default defineConfig([
|
### 环境要求
|
||||||
globalIgnores(['dist']),
|
|
||||||
{
|
- Node.js >= 16.0.0
|
||||||
files: ['**/*.{ts,tsx}'],
|
- npm >= 8.0.0 或 pnpm >= 7.0.0
|
||||||
extends: [
|
|
||||||
// Other configs...
|
### 安装步骤
|
||||||
// Enable lint rules for React
|
|
||||||
reactX.configs['recommended-typescript'],
|
1. **克隆项目**
|
||||||
// Enable lint rules for React DOM
|
|
||||||
reactDom.configs.recommended,
|
```bash
|
||||||
],
|
git clone http://localhost:3000/feeling/rushe-ui.git
|
||||||
languageOptions: {
|
cd rushe-ui
|
||||||
parserOptions: {
|
|
||||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
||||||
tsconfigRootDir: import.meta.dirname,
|
|
||||||
},
|
|
||||||
// other options...
|
|
||||||
},
|
|
||||||
},
|
|
||||||
])
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
2. **安装依赖**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
# 或使用 pnpm
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **启动开发服务器**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **访问应用**
|
||||||
|
|
||||||
|
打开浏览器访问 `http://localhost:5173`
|
||||||
|
|
||||||
|
### 构建生产版本
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
构建产物将输出到 `dist` 目录。
|
||||||
|
|
||||||
|
### 预览生产构建
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📱 功能演示
|
||||||
|
|
||||||
|
### 首页模块
|
||||||
|
|
||||||
|
首页集成了轮播Banner、快捷功能入口、团购秒杀（带倒计时）、精选案例等核心内容，支持横向滚动浏览商品。
|
||||||
|
|
||||||
|
### 智能管家
|
||||||
|
|
||||||
|
- AI对话交互，支持装修咨询
|
||||||
|
- 装修预算智能计算
|
||||||
|
- 快捷问题一键发送
|
||||||
|
- 语音输入支持
|
||||||
|
|
||||||
|
### 团购模块
|
||||||
|
|
||||||
|
- 团购套餐展示
|
||||||
|
- 商品详情页
|
||||||
|
- 班车预约服务
|
||||||
|
- 门店导航
|
||||||
|
|
||||||
|
### 个人中心
|
||||||
|
|
||||||
|
- 用户信息管理
|
||||||
|
- 装修进度跟踪
|
||||||
|
- 数据资产查看
|
||||||
|
- 合伙人中心
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 主题定制
|
||||||
|
|
||||||
|
项目支持三种主题模式：
|
||||||
|
|
||||||
|
| 主题 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| **亮色模式** | 默认主题，白色背景 |
|
||||||
|
| **暗色模式** | 深色背景，护眼模式 |
|
||||||
|
| **深蓝模式** | 深蓝色调，专业风格 |
|
||||||
|
|
||||||
|
主题通过CSS变量实现，可在 `src/index.css` 中自定义颜色配置。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 常见问题
|
||||||
|
|
||||||
|
### Q: 启动时提示端口被占用？
|
||||||
|
|
||||||
|
修改 `vite.config.ts` 中的端口配置：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
export default defineConfig({
|
||||||
|
server: {
|
||||||
|
port: 5174 // 修改为其他端口
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### Q: 如何添加新页面？
|
||||||
|
|
||||||
|
1. 在 `src/pages/user/` 下创建页面组件
|
||||||
|
2. 在 `src/App.tsx` 中添加路由配置
|
||||||
|
3. 如需底部导航，在 `src/layouts/UserLayout.tsx` 中添加tab配置
|
||||||
|
|
||||||
|
### Q: 如何修改主题色？
|
||||||
|
|
||||||
|
修改 `tailwind.config.js` 中的 primary 颜色配置：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: {
|
||||||
|
500: '#f97316', // 修改为主题色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🤝 贡献指南
|
||||||
|
|
||||||
|
欢迎参与项目贡献！请遵循以下步骤：
|
||||||
|
|
||||||
|
1. Fork 本仓库
|
||||||
|
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
|
||||||
|
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
||||||
|
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
||||||
|
5. 提交 Pull Request
|
||||||
|
|
||||||
|
### 代码规范
|
||||||
|
|
||||||
|
- 使用 TypeScript 编写代码
|
||||||
|
- 遵循 ESLint 规则
|
||||||
|
- 组件使用函数式组件 + Hooks
|
||||||
|
- 样式使用 TailwindCSS
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📄 版权信息
|
||||||
|
|
||||||
|
Copyright © 2024 入舍智能家装
|
||||||
|
|
||||||
|
本项目仅供学习和研究使用，未经授权不得用于商业用途。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📞 联系方式
|
||||||
|
|
||||||
|
如有问题或建议，欢迎通过以下方式联系：
|
||||||
|
|
||||||
|
- 项目地址：[http://localhost:3000/feeling/rushe-ui](http://localhost:3000/feeling/rushe-ui)
|
||||||
|
- 问题反馈：请提交 Issue
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
Made with ❤️ by 入舍团队
|
||||||
|
</p>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue