更新记录

1.0.0 下载此版本

• 初始版本发布
• 实现首页展示功能
• 实现菜单浏览功能
• 实现商品详情页面
• 实现购物车功能
• 实现订单管理系统
• 实现个人中心功能
• 支持移动端响应式设计
• 采用咖啡色系主题设计

平台兼容性

uni-app(4.06)

uni-app x(4.06)

瑞祥咖啡点餐系统 - 插件使用说明

📖 项目简介

瑞祥咖啡点餐系统是一款基于 Vue 3 + *** + Vite 开发的现代化移动端咖啡点餐应用。该应用提供完整的点餐流程，包括商品浏览、购物车管理、订单处理和用户中心等功能，采用咖啡色系主题设计，为用户提供优雅的点餐体验。

✨ 主要特性

• 🎨 现代化UI设计: 采用咖啡色系主题，温暖优雅的视觉体验
• 📱 移动端优先: 完全响应式设计，适配各种移动设备
• ⚡ 高性能: 基于 Vite 构建，快速的开发和构建体验
• 🛒 完整购物流程: 从商品浏览到订单完成的完整电商流程
• 🔍 智能搜索: 支持商品名称和描述的模糊搜索
• 💾 本地存储: 购物车和用户偏好本地持久化存储
• 🎯 ***: 完整的类型安全保障

🛠️ 技术栈

• 前端框架: Vue 3 (Composition API)
• 开发语言: ***
• 构建工具: Vite
• 样式框架: *** CSS
• 路由管理: Vue Router 4
• 状态管理: Zustand (轻量级状态管理)
• 图标库: Lucide Vue Next
• 通知组件: Vue Sonner
• 工具库: clsx, ***-merge

📦 安装与运行

环境要求

• Node.js >= 16.0.0
• npm >= 7.0.0 或 pnpm >= 6.0.0

安装步骤

1. 克隆项目

   git clone [项目地址]
   cd 瑞祥咖啡点餐系统

2. 安装依赖

   npm install
   # 或者使用 pnpm
   pnpm install

3. 启动开发服务器

   npm run dev
   # 或者使用 pnpm
   pnpm dev

4. 访问应用 打开浏览器访问 http://localhost:5173

构建部署

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

# 类型检查
npm run check

# 代码检查
npm run lint

# 自动修复代码格式
npm run lint:fix

🏗️ 项目结构

瑞祥咖啡点餐系统/
├── public/                 # 静态资源
│   └── favicon.svg        # 网站图标
├── src/                   # 源代码目录
│   ├── assets/           # 静态资源
│   ├── components/       # 公共组件
│   │   ├── BottomNavigation.vue  # 底部导航
│   │   └── Empty.vue            # 空状态组件
│   ├── composables/      # 组合式函数
│   │   └── useTheme.ts   # 主题相关
│   ├── lib/              # 工具库
│   │   └── utils.ts      # 通用工具函数
│   ├── pages/            # 页面组件
│   │   ├── HomePage.vue      # 首页
│   │   ├── MenuPage.vue      # 菜单页
│   │   ├── ProductDetail.vue # 商品详情
│   │   ├── CartPage.vue      # 购物车
│   │   ├── OrderPage.vue     # 订单页
│   │   └── ProfilePage.vue   # 个人中心
│   ├── router/           # 路由配置
│   │   └── index.ts      # 路由定义
│   ├── stores/           # 状态管理
│   │   └── index.ts      # 全局状态
│   ├── App.vue           # 根组件
│   ├── main.ts           # 应用入口
│   └── style.css         # 全局样式
├── .gitignore            # Git忽略文件
├── index.html            # HTML模板
├── package.json          # 项目配置
├── ***.config.js    # ***配置
├── tsconfig.json         # ***配置
└── vite.config.ts        # Vite配置

🎯 核心功能

1. 首页 (HomePage)

• 轮播图展示: 展示最新活动和推荐商品
• 分类导航: 快速进入不同咖啡分类
• 推荐商品: 展示热销和新品咖啡
• 搜索功能: 支持商品名称模糊搜索

2. 菜单页 (MenuPage)

• 商品分类: 按咖啡类型分类展示
• 商品列表: 瀑布流布局展示商品
• 搜索过滤: 实时搜索商品
• 快速加购: 一键添加到购物车

3. 商品详情 (ProductDetail)

• 商品信息: 详细的商品描述和图片
• 规格选择: 杯型大小选择
• 温度选择: 热饮/冰饮选择
• 数量调节: 购买数量控制
• 加入购物车: 添加到购物车功能

4. 购物车 (CartPage)

• 商品管理: 查看、修改、删除购物车商品
• 数量调节: 增减商品数量
• 价格计算: 实时计算总价
• 清空购物车: 一键清空功能
• 去结算: 跳转到订单页面

5. 订单页 (OrderPage)

• 订单列表: 显示所有历史订单
• 订单状态: 实时显示订单状态
• 订单详情: 查看订单商品和配送信息
• 订单筛选: 按状态筛选订单

6. 个人中心 (ProfilePage)

• 用户信息: 显示用户头像和基本信息
• 快捷操作: 常用功能快速入口
• 设置选项: 应用设置和偏好配置
• 帮助支持: 帮助文档和客服联系

🎨 设计系统

色彩规范

• 主色调: 咖啡色系 (#8B4513, #D2691E)
• 辅助色: 奶茶色 (#F5DEB3), 深棕色 (#654321)
• 中性色: 白色 (#FFFFFF), 灰色系
• 功能色: 成功绿色, 警告橙色, 错误红色

组件规范

• 按钮: 圆角设计，渐变效果，轻微阴影
• 卡片: 圆角卡片，阴影效果
• 图标: 线性图标，咖啡主题元素
• 字体: 标题18px，正文14px，小字12px

🔧 配置说明

*** CSS 配置

项目使用 CSS 进行样式开发，配置文件位于 `.config.js`。

*** 配置

*** 配置文件位于 tsconfig.json，启用了严格模式和完整的类型检查。

Vite 配置

Vite 配置文件位于 vite.config.ts，包含了 Vue 插件和开发服务器配置。

📱 移动端适配

• 响应式设计: 使用 *** CSS 响应式类名
• 触摸优化: 优化触摸手势和点击体验
• 性能优化: 图片懒加载，组件按需加载
• 兼容性: 支持主流移动浏览器

🔍 开发指南

添加新页面

1. 在 src/pages/ 目录下创建新的 Vue 组件
2. 在 src/router/index.ts 中添加路由配置
3. 如需要，在底部导航中添加入口

添加新组件

1. 在 src/components/ 目录下创建组件
2. 使用 *** 定义 props 和 emits
3. 遵循项目的命名和代码规范

状态管理

项目使用轻量级的状态管理方案，主要状态定义在 src/stores/index.ts 中。

样式开发

• 优先使用 *** CSS 工具类
• 复杂样式可以在组件内使用 <style scoped>
• 全局样式定义在 src/style.css 中

🐛 常见问题

***: 开发服务器启动失败

A: 检查 Node.js 版本是否符合要求，清除 node_modules 重新安装依赖。

***: 构建失败

A: 运行 npm run check 检查 *** 类型错误，修复后重新构建。

***: 样式不生效

A: 检查 *** CSS 类名是否正确，确保没有被其他样式覆盖。

***: 路由跳转异常

A: 检查路由配置是否正确，确保组件路径和路由路径匹配。

📄 许可证

本项目采用 MIT 许可证，详情请查看 LICENSE 文件。

🤝 贡献指南

1. Fork 本项目
2. 创建特性分支 (git checkout -b feature/***)
3. 提交更改 (git commit -m 'Add some ***')
4. 推送到分支 (git push origin feature/***)
5. 创建 Pull Re***uest

📞 技术支持

如果您在使用过程中遇到问题，可以通过以下方式获取帮助：

• 查看项目文档和常见问题
• 在 中提交问题
• 联系项目维护者

感谢您使用瑞祥咖啡点餐系统！ ☕️