更新记录

1.0.0（2025-08-03） 下载此版本

初版上传

平台兼容性

uni-app(4.07)

uni-app x(4.07)

蛋糕点餐系统 - 插件使用说明

📖 项目简介

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

✨ 主要特性

• 🎨 现代化UI设计: 采用蛋糕色系主题，温馨甜美的视觉体验
• 📱 移动端优先: 完全响应式设计，适配各种移动设备
• ⚡ 高性能: 基于 Vite 构建，快速的开发和构建体验
• 🛒 完整购物流程: 从商品浏览到订单完成的完整电商流程
• 🔍 智能搜索: 支持商品名称和描述的模糊搜索
• 💾 本地存储: 购物车和收藏商品本地持久化存储
• 🎯 TypeScript: 完整的类型安全保障
• 🖼️ 本地图片: 所有商品图片使用本地资源，加载更快

🛠️ 技术栈

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

📦 安装与运行

环境要求

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

安装步骤

1. 下载项目

   cd cake-orde

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

🏗️ 项目结构

cake-orde/
├── 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          # 项目配置
├── tailwind.config.js    # Tailwind配置
├── tsconfig.json         # TypeScript配置
└── vite.config.ts        # Vite配置

🎯 核心功能

1. 首页 (HomePage)

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

2. 菜单页 (MenuPage)

• 商品分类: 按蛋糕类型分类展示（生日蛋糕、下午茶、季节限定等）
• 商品列表: 网格布局展示商品，包含热销和新品标签
• 搜索过滤: 实时搜索商品名称和描述
• 快速加购: 一键添加到购物车
• 收藏功能: 支持商品收藏和取消收藏

3. 商品详情 (ProductDetail)

• 商品信息: 详细的商品描述和高清图片展示
• 价格展示: 清晰的价格显示
• 数量调节: 购买数量控制
• 加入购物车: 添加到购物车功能
• 收藏功能: 支持商品收藏

4. 购物车 (CartPage)

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

5. 订单页 (OrderPage)

• 订单列表: 显示所有历史订单
• 订单状态: 显示订单状态（待处理、制作中、待取餐、已完成、已取消）
• 订单筛选: 按状态筛选订单
• 订单详情: 查看订单商品信息

6. 个人中心 (ProfilePage)

• 用户信息: 显示用户头像和基本信息
• 快捷操作: 常用功能快速入口（我的订单、我的收藏、购物车等）
• 设置选项: 应用设置和偏好配置
• 帮助支持: 帮助文档和客服联系

🎨 设计系统

色彩规范

• 主色调: 蛋糕色系 (#EC4899 - pink-500, #F472B6 - pink-400)
• 辅助色: 奶油色 (#FEF3C7 - amber-100), 深粉色 (#BE185D - pink-700)
• 中性色: 白色 (#FFFFFF), 灰色系 (slate)
• 功能色: 成功绿色, 警告橙色, 错误红色

组件规范

• 按钮: 圆角设计，纯色背景，轻微阴影
• 卡片: 圆角卡片，白色背景，阴影效果
• 图标: 线性图标，甜点主题元素
• 字体: 标题18px，正文14px，小字12px
• 间距: 标准8px间距系统

🔧 配置说明

Tailwind CSS 配置

项目使用 Tailwind CSS 进行样式开发，配置文件位于 tailwind.config.js。已配置蛋糕色系主题（cake色系）。

TypeScript 配置

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

Vite 配置

Vite 配置文件位于 vite.config.ts，包含了 Vue 插件和开发服务器配置，支持本地图片资源处理。

📱 移动端适配

• 响应式设计: 使用 Tailwind CSS 响应式类名
• 触摸优化: 优化触摸手势和点击体验
• 性能优化: 本地图片资源，组件按需加载
• 滚动优化: 防止横向滚动，优化滚动体验
• 兼容性: 支持主流移动浏览器

🔍 开发指南

添加新页面

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

添加新组件

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

状态管理

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

样式开发

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

🐛 常见问题

Q: 开发服务器启动失败

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

Q: 构建失败

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

Q: 样式不生效

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

Q: 路由跳转异常

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

📄 许可证

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

🤝 贡献指南

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