案例简介：本前端项目依托华为云码道生成基础代码，基于 Vue3、Element Plus、ECharts 搭建。系统分为顾客点餐页面与商家管理后台，数据大屏集成在后台内。通过路由区分两类用户权限，顾客可浏览菜品、下单并查看个人订单；管理员负责菜品、订单管理，借助各类图表直观查看门店经营数据，完整实现餐饮点餐与经营数据可视化相关前端业务。

完整案例在线体验地址：商家点餐系统

商家点餐系统案例基于 AI 生成搭建，每次生成的项目效果略有不同，如需完整体验该案例可在商家点餐系统源码处下载并体验。

一、概述

1.1 案例介绍

本前端项目依托华为云码道生成基础代码，基于 Vue3、Element Plus、ECharts 搭建。系统分为顾客点餐页面与商家管理后台，数据大屏集成在后台内。通过路由区分两类用户权限，顾客可浏览菜品、下单并查看个人订单；管理员负责菜品、订单管理，借助各类图表直观查看门店经营数据，完整实现餐饮点餐与经营数据可视化相关前端业务。

• 基于 Vue3 + Element Plus + ECharts 技术栈搭建一套前后端分离的商家点餐系统前端实战项目。

• 华为云码道（CodeArts）代码智能体：一个理解项目需求，懂得编码之道，善用百器的实干派AI研发专家，开启你的编码自动驾驶模式。本案例中作为核心开发工具，通过智能体模式快速构建商家点餐系统前端项目代码。

• 技能（Skills）：是一种能力封装机制，用于将专业知识（如编码经验、常见问题、解决方案等）组织为可复用的模块。技能本质上是由指令、脚本和资源构成的集合，智能体可按需动态加载这些专业化的“技能包”，从而提升特定任务的执行能力与执行效率。本案例使用UI-UX-Pro-Max技能，指导AI生成更专业、更有审美的界面。

1.2 适用对象

• 企业
• 个人开发者
• 高校学生

1.3 案例时间

本案例总时长预计120分钟。

1.4 案例流程

说明：

1. 开发者安装华为云码道 CodeArts 代码智能体；
2. 码道安装UI-UX-Pro-Max技能；
3. 配置Node.js和Python开发环境并安装Vue和Python插件；
4. 准备前端需求文档和服务端的API接口文档；
5. 基于码道、前端需求文档和接口文档，生成商家点餐系统的完整代码；
6. 使用UI-UX-Pro-Max技能优化界面；
7. 浏览器测试验证商家点餐系统。

1.5 资源总览

本案例预计花费0元。

资源名称	规格	单价（元）
华为云码道（CodeArts）代码智能体	体验版	免费

二、基础环境与资源准备

2.1 AI IDE 华为云码道安装部署

访问此专属开通链接，免费开通华为云码道（CodeArts）代码智能体体验版，无需复杂配置：一键开通华为云码道体验版！

参考案例《AI IDE华为云码道（CodeArts）代码智能体安装部署》完成Windows版AI IDE华为云码道（CodeArts）代码智能体安装部署。

2.2 码道安装UI-UX-Pro-Max技能

在华为云码道对话框中，输入以下提示词安装UI-UX-Pro-Max技能。

从https://gitcode.com/u014005316/ui-ux-pro-max 安装skills 到 ~/.codeartsdoer/skills/

关于UI-UX-Pro-Max技能的介绍和使用，请参考案例《智码美形：华为云码道 × UI-UX-Pro-Max 高品质界面智能生成实践》

2.3 安装 Node.js 和 Python 环境

使用快捷键 Ctrl+Shift+`，新建终端，输入以下命令查看Node.js和Python环境是否安装？

python --version
node -v
npm -v

如果没有安装，请参考案例《SKILL快速构建你的Java、Python和Node.js开发环境》一键配置Node.js和Python开发环境。

2.4 安装Vue和Python插件

本案例项目代码前端使用Vue，需要手动安装插件。打开码道AI IDE插件市场，在OPEN VSX页签搜索并安装Vue（Official）、Vue2 Snippets、Vue3 Snippets插件。

同样，安装Python、Python Debugger、Python Environments插件。

三、MerchantDine 商家点餐系统需求分析

参考案例《码道赋能：MerchantDine 商家点餐系统服务端开发（Spring Boot）》中的“三、MerchantDine 商家点餐系统需求分析”章节。

四、MerchantDine 商家点餐系统前端需求文档

4.1 前端技术架构

层级	技术选型	版本
前端框架	Vue	3.4
构建工具	Vite	5.1
UI组件库	Element Plus	2.6
状态管理	Pinia	2.1
图表库	ECharts	5.5
路由管理	Vue Router	4.3
HTTP请求	Axios	1.6

4.2 用户角色与权限

4.2.1 角色定义

角色	标识	权限范围	体验账号
管理员	role=1	全部权限（含普通用户所有功能 + 后台管理 + 数据大屏）	admin / 123456
普通用户	role=0	点餐、购物车、订单查询	user / 123456

4.2.2 权限控制

• 路由守卫自动校验角色权限
• 未登录用户 仅可访问：首页、商品列表、登录、注册
• 普通用户 可访问：购物车、结算、订单列表、订单详情（需登录）
• 管理员 可访问：所有页面（包含普通用户功能 + 管理后台全部功能）

4.3 功能模块需求

4.3.1 认证模块

登录页面 ( /login )

功能需求 :

• 用户名/密码表单登录
• 密码可见性切换
• 体验账号快捷填充（管理员/用户）
• 登录成功后跳转首页
• 失败提示错误信息

界面要素 :

• 左侧品牌展示区（Logo、品牌名、副标题、三大卖点）
• 右侧登录表单区（用户名、密码输入框、登录按钮）
• 注册跳转链接

注册页面 ( /register )

功能需求 :

• 用户注册（用户名、密码、确认密码、昵称、手机号）
• 密码一致性校验
• 必填项校验
• 注册成功跳转登录页

界面要素 :

• 左侧品牌展示区（含注册进度指示器）
• 右侧注册表单区
• 密码可见性切换
• 返回登录链接

4.3.2 用户端模块

首页 ( / )

功能需求 :

• Hero轮播区展示品牌宣传
• 热门分类展示（点击跳转商品页）
• 热销菜品展示（按销量排序，显示前4个）
• 商品快捷加入购物车
• 登录状态检测（未登录提示）

界面要素 :

• 顶部导航栏（Logo、导航链接、购物车、订单、用户信息）
• Hero横幅区域（品牌口号、立即点餐按钮）
• 分类网格卡片
• 商品网格卡片（含图片、名称、描述、价格、加购按钮）

商品列表页 ( /products )

功能需求 :

• 商品分类筛选（侧边栏分类导航）
• 商品关键词搜索
• 商品数量控制（加减按钮）
• 批量加入购物车
• 商品统计展示

界面要素 :

• 左侧分类筛选栏
• 顶部搜索与统计栏
• 商品卡片网格（图片、名称、描述、价格、数量控制、加购按钮）

购物车页 ( /cart )

功能需求 :

• 购物车商品列表展示
• 商品数量增减
• 商品删除
• 清空购物车
• 订单金额汇总
• 跳转结算页

界面要素 :

• 购物车头部（标题、清空按钮）
• 空购物车状态（提示图标、去购物按钮）
• 商品列表（图片、名称、价格、数量、小计、删除按钮）
• 订单摘要（商品总数、合计金额、去结算按钮）

结算页 ( /checkout )

功能需求 :

• 确认订单商品清单
• 订单备注输入
• 订单金额明细（商品金额、配送费、实付金额）
• 提交订单
• 成功后跳转订单列表

界面要素 :

• 返回购物车链接
• 商品清单卡片
• 订单备注输入区
• 订单摘要卡片（含提交按钮）

订单列表页 ( /orders )

功能需求 :

• 用户订单列表展示
• 订单状态标签（待支付、已支付、已取消、已完成）
• 订单商品预览
• 订单金额与时间展示
• 点击跳转订单详情

界面要素 :

• 订单统计
• 订单卡片列表（订单编号、状态标签、商品预览、时间、金额）
• 空订单状态提示

订单详情页 ( /order-detail/:id )

功能需求 :

• 订单基本信息展示（编号、时间、支付时间、备注）
• 商品明细表格
• 订单总额展示

界面要素 :

• 返回列表链接
• 订单状态标签
• 订单信息网格
• 商品明细表格
• 订单总额

4.3.3 管理后台模块

后台布局 ( /admin )

功能需求 :

• 侧边导航栏（数据大屏、分类管理、商品管理、订单管理）
• 用户信息展示与退出登录
• 子页面路由渲染

界面要素 :

• 左侧深色侧边栏（Logo、导航菜单、用户信息、退出按钮）
• 右侧主内容区

数据大屏 ( /admin/screen )

功能需求 :

• 核心指标展示（今日营业额、今日订单数、本月营业额、商品总数）
• 24小时营业额趋势折线图
• 商品分类销量占比饼图
• 商品销量排行柱状图
• 最新订单列表
• 定时自动刷新（30秒）
• 手动刷新按钮

界面要素 :

• 顶部标题与刷新按钮
• 四宫格指标卡片
• 图表网格布局（趋势图、饼图、柱状图、订单列表）

分类管理 ( /admin/category )

功能需求 :

• 分类列表展示（名称、状态、创建时间）
• 添加分类（弹窗表单）
• 删除分类（确认弹窗）
• 状态标识（启用/禁用）

界面要素 :

• 顶部标题与添加按钮
• 分类卡片网格（编号、状态标签、名称、创建时间、删除按钮）
• 添加/删除弹窗

商品管理 ( /admin/product )

功能需求 :

• 商品列表表格展示（序号、商品信息、分类、价格、库存、销量、时间、操作）
• 分类筛选
• 关键词搜索
• 添加商品（弹窗表单）
• 编辑商品（弹窗表单）
• 删除商品（确认弹窗）
• 库存状态标识（充足/低库存/缺货）

界面要素 :

• 顶部标题与添加按钮
• 筛选搜索栏
• 商品数据表格
• 添加/编辑/删除弹窗

订单管理 ( /admin/order )

功能需求 :

• 所有订单列表展示
• 订单编号搜索
• 订单状态标签
• 删除订单（确认弹窗）

界面要素 :

• 顶部标题
• 搜索栏与统计
• 订单数据表格（订单编号、用户、金额、状态、时间、操作）
• 删除确认弹窗

4.3.4 退出登录功能模块

用户登录成功后，存储用户信息到localStorage，退出登录的业务逻辑：

• 清除购物车数据
• 清除用户状态重置所有字段 + 删除 localStorage）
• 跳转首页

前端需求文档请参考： 商家点餐可视化系统 - 前端需求文档。

4.4 API 接口需求

API 接口文档请参考： 商家点餐可视化系统-API接口文档。

五、MerchantDine 商家点餐系统前端代码实战

5.1 码道生成基础架构代码

在华为云码道对话框中，输入以下提示词：

在 MerchantDine/MerchantDineWeb 目录下，首先读取商家点餐可视化系统 - 前端需求文档和商家点餐可视化系统 - API接口文档，然后基于这两个文档，自动生成前端项目的完整代码。

开始读取需求文档和接口文档：

创建项目所有文件：

创建用户端界面：

创建管理端界面：

安装依赖并验证项目：

项目构建完成：

5.2 前后端联调并验证功能

在华为云码道对话框中，输入以下提示词：

启动 MerchantDine 商家点餐系统的前后端。

前后端均启动成功：

浏览器输入：http://localhost:5173/

验证用户注册：

注册成功后，验证登录：

商品列表页面：

购物车页面：

我的订单页面：

管理后台-数据大屏页：

管理后台-分类管理页：

管理后台-商品管理页：

管理后台-订单管理页：

备注：代码联调阶段若出现各类异常问题，可直接同步至码道协助定位与处理。

5.3 使用UI-UX-Pro-Max技能优化界面

在码道对话框中，输入以下提示词：

调用UI-UX-Pro-Max技能，按照餐饮Web页面的最佳实践对商家点餐系统前端所有界面进行优化。

备注：依托 UI-UX-Pro-Max 技能能力完成界面优化输出，该技能每次生成的页面结构存在差异化，交付后仍需开发者针对界面细节做二次适配微调。

通过自然语言交互驱动码道完成页面精细化调整，经多轮迭代优化后，最终交付页面效果如下：

登录界面：

注册界面：

首页：

商品页：

购物车页面：

确认订单页：

我的订单页：

管理后台-数据大屏页：

管理后台-分类管理：

管理后台-商品管理：

管理后台-订单管理：

至此，码道赋能：MerchantDine 商家点餐系统前端开发（Vue）的案例已全部完成。

商家点餐系统服务端开发，请参考案例《码道赋能：MerchantDine 商家点餐系统服务端开发（Spring Boot）》。

六、反馈改进建议

如您在案例实操过程中遇到问题或有改进建议，可以到论坛帖 评论区反馈即可，我们会及时响应处理，谢谢！