9.3 KiB

Raw Permalink Blame History

入舍智能家装 - 前端项目

📖 项目简介

入舍智能家装是一款面向家装行业的智能化服务平台，旨在为用户提供从装修预算计算、设计方案推荐到施工进度跟踪的一站式家装解决方案。通过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

安装步骤

克隆项目

git clone http://localhost:3000/feeling/rushe-ui.git
cd rushe-ui

安装依赖

npm install
# 或使用 pnpm
pnpm install

启动开发服务器

npm run dev

访问应用

打开浏览器访问 http://localhost:5173

构建生产版本

npm run build

构建产物将输出到 dist 目录。

预览生产构建

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 中设置：

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

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

配置部署路径

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

# 部署到子目录 /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

在代码中使用

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)

配置优先级

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

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

Fallback 机制

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

// 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 中的端口配置：

export default defineConfig({
  server: {
    port: 5174 // 修改为其他端口
  }
})

Q: 如何添加新页面？

在 src/pages/user/ 下创建页面组件
在 src/App.tsx 中添加路由配置
如需底部导航，在 src/layouts/UserLayout.tsx 中添加tab配置

Q: 如何修改主题色？

修改 tailwind.config.js 中的 primary 颜色配置：

theme: {
  extend: {
    colors: {
      primary: {
        500: '#f97316', // 修改为主题色
      }
    }
  }
}

🤝 贡献指南

欢迎参与项目贡献！请遵循以下步骤：

Fork 本仓库
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
提交 Pull Request

代码规范

使用 TypeScript 编写代码
遵循 ESLint 规则
组件使用函数式组件 + Hooks
样式使用 TailwindCSS

📄 版权信息

本项目仅供学习和研究使用，未经授权不得用于商业用途。

📞 联系方式

如有问题或建议，欢迎通过以下方式联系：

项目地址：http://localhost:3000/feeling/rushe-ui
问题反馈：请提交 Issue

Made with ❤️ by 入舍团队

9.3 KiB Raw Permalink Blame History Unescape Escape