# 入舍智能家装 - 前端项目

<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>

## 📖 项目简介

**入舍智能家装**是一款面向家装行业的智能化服务平台，旨在为用户提供从装修预算计算、设计方案推荐到施工进度跟踪的一站式家装解决方案。通过AI智能助手、设计师对接、团购优惠等核心功能，帮助用户轻松完成家装全流程。

### 项目目标

- 🏠 **智能化服务**：通过AI助手提供装修咨询、预算计算等智能服务
- 🎨 **设计对接**：连接专业设计师，提供个性化设计方案
- 🛒 **团购优惠**：整合优质家装资源，提供团购套餐优惠
- 📊 **进度追踪**：实时跟踪装修进度，透明化施工流程

---

## ✨ 核心功能

### 用户端功能

| 模块 | 功能描述 |
|------|----------|
| **首页** | 轮播Banner、快捷入口、团购秒杀、精选案例展示 |
| **智能管家** | AI对话助手、装修预算计算、语音交互支持 |
| **逛逛** | 设计师案例分享、业主装修日记、视频内容浏览 |
| **团购** | 团购套餐、商品详情、班车预约 |
| **我的** | 个人中心、装修进度、数据资产、合伙人中心 |

### 特色功能

- 🔔 **通知中心**：订单通知、优惠活动、系统消息实时推送
- 🎯 **秒杀倒计时**：团购套餐限时秒杀，倒计时实时更新
- 🌓 **主题切换**：支持亮色/暗色/深蓝三种主题模式
- 📱 **响应式设计**：完美适配移动端和桌面端

---

## 🛠️ 技术栈

### 前端框架

- **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配置
```

---

## 🚀 快速开始

### 环境要求

- 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
```

---

## ⚙️ 环境变量配置

项目使用 Vite 内置的环境变量系统，支持多环境配置。所有环境变量均以 `VITE_` 前缀开头，可在代码中通过 `import.meta.env` 访问。

### 配置文件说明

| 文件 | 说明 | 加载时机 |
|------|------|----------|
| `.env` | 公共默认配置 | 所有环境 |
| `.env.development` | 开发环境配置 | `npm run dev` |
| `.env.production` | 生产环境配置 | `npm run build` |
| `.env.local` | 本地覆盖配置（不提交Git） | 所有环境 |

### 配置项详解

#### 基础配置

| 变量名 | 说明 | 默认值 | 示例 |
|--------|------|--------|------|
| `VITE_APP_NAME` | 应用名称 | `入舍智能家装` | `入舍智能家装` |
| `VITE_APP_TITLE` | 浏览器标签页标题 | `入舍 - 智能家装` | `入舍Demo-1.0` |
| `VITE_APP_VERSION` | 应用版本号 | `1.0.0` | `1.0.0` |

#### 路径配置

| 变量名 | 说明 | 默认值 | 示例 |
|--------|------|--------|------|
| `VITE_BASE_PATH` | 应用部署基础路径 | `/` | `/demo/rs-demo/` |
| `VITE_API_BASE_URL` | API 接口基础地址 | `/api` | `/demo/rs-demo/api` |

#### 调试配置

| 变量名 | 说明 | 默认值 | 可选值 |
|--------|------|--------|--------|
| `VITE_DEBUG` | 是否启用调试模式 | `false` | `true` / `false` |
| `VITE_ENABLE_MOCK` | 是否启用 Mock 数据 | `false` | `true` / `false` |

### 使用示例

#### 修改应用标题

在 `.env.development` 或 `.env.production` 中设置：

```env
# 开发环境标题
VITE_APP_TITLE=入舍Demo-1.0

# 生产环境标题
VITE_APP_TITLE=入舍 - 智能家装
```

#### 配置部署路径

当应用部署到子目录时，需要配置基础路径：

```env
# 部署到子目录 /demo/rs-demo/
VITE_BASE_PATH=/demo/rs-demo/
VITE_API_BASE_URL=/demo/rs-demo/api

# 部署到根目录
VITE_BASE_PATH=/
VITE_API_BASE_URL=/api
```

#### 在代码中使用

```typescript
import { APP_TITLE, APP_CONFIG } from '@/config'

// 获取应用标题
console.log(APP_TITLE) // 输出: 入舍Demo-1.0

// 获取完整配置
console.log(APP_CONFIG.base.title)
console.log(APP_CONFIG.api.baseURL)
```

### 配置优先级

环境变量按以下优先级加载（从高到低）：

1. `.env.[mode].local` - 本地环境特定配置（不提交Git）
2. `.env.[mode]` - 环境特定配置
3. `.env.local` - 本地通用配置（不提交Git）
4. `.env` - 公共默认配置

### Fallback 机制

所有配置项均内置默认值，当环境变量未设置时自动使用：

```typescript
// src/config/index.ts
export const APP_CONFIG = {
  base: {
    title: import.meta.env.VITE_APP_TITLE || '入舍 - 智能家装',
    // ...
  },
  // ...
}
```

---

## 📱 功能演示

### 首页模块

首页集成了轮播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>