diff --git a/README.md b/README.md index d2e7761..2bb977f 100644 --- a/README.md +++ b/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. +

+ React + TypeScript + Vite + TailwindCSS +

-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 -- [@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 +**入舍智能家装**是一款面向家装行业的智能化服务平台，旨在为用户提供从装修预算计算、设计方案推荐到施工进度跟踪的一站式家装解决方案。通过AI智能助手、设计师对接、团购优惠等核心功能，帮助用户轻松完成家装全流程。 -## 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 - tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - tseslint.configs.stylisticTypeChecked, +| 模块 | 功能描述 | +|------|----------| +| **首页** | 轮播Banner、快捷入口、团购秒杀、精选案例展示 | +| **智能管家** | AI对话助手、装修预算计算、语音交互支持 | +| **逛逛** | 设计师案例分享、业主装修日记、视频内容浏览 | +| **团购** | 团购套餐、商品详情、班车预约 | +| **我的** | 个人中心、装修进度、数据资产、合伙人中心 | - // 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']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - // Enable lint rules for React - reactX.configs['recommended-typescript'], - // Enable lint rules for React DOM - reactDom.configs.recommended, - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) +### 环境要求 + +- Node.js >= 16.0.0 +- npm >= 8.0.0 或 pnpm >= 7.0.0 + +### 安装步骤 + +1. **克隆项目** + +```bash +git clone http://localhost:3000/feeling/rushe-ui.git +cd rushe-ui ``` + +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 + +--- + +

+ Made with ❤️ by 入舍团队 +