5. 美食点餐系统（technical-architecture）

1. 架构设计

2. 技术描述

3. 路由定义

4. 组件架构

4.1 核心组件结构

src/
├── components/           # 公共组件
│   ├── common/          # 通用组件
│   │   ├── Header.vue   # 顶部导航
│   │   ├── Footer.vue   # 底部导航
│   │   ├── Loading.vue  # 加载组件
│   │   └── Empty.vue    # 空状态组件
│   ├── dish/            # 菜品相关组件
│   │   ├── DishCard.vue # 菜品卡片
│   │   ├── DishList.vue # 菜品列表
│   │   └── DishSpecs.vue # 规格选择
│   └── cart/            # 购物车组件
│       ├── CartItem.vue # 购物车商品项
│       └── CartFooter.vue # 购物车底部
├── views/               # 页面组件
├── stores/             # 状态管理
├── router/             # 路由配置
├── api/                # API接口
├── utils/              # 工具函数
└── assets/             # 静态资源

4.2 状态管理设计

Cart Store（购物车状态）

// stores/cart.js
export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [], // 购物车商品列表
    totalAmount: 0, // 总金额
    deliveryFee: 5, // 配送费
    discount: 0 // 优惠金额
  }),
  
  actions: {
    addToCart(dish, specs, quantity) {
      // 添加商品到购物车
    },
    removeFromCart(itemId) {
      // 从购物车移除商品
    },
    updateQuantity(itemId, quantity) {
      // 更新商品数量
    },
    clearCart() {
      // 清空购物车
    },
    calculateTotal() {
      // 计算总金额
    }
  }
})

User Store（用户状态）

// stores/user.js
export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null, // 用户信息
    addresses: [], // 用户地址列表
    defaultAddress: null // 默认地址
  }),
  
  actions: {
    login(mobile, code) {
      // 用户登录
    },
    logout() {
      // 用户登出
    },
    updateAddress(address) {
      // 更新地址
    },
    setDefaultAddress(addressId) {
      // 设置默认地址
    }
  }
})

5. 图片懒加载策略

5.1 实现方案

使用 Vue3-lazyload 插件实现图片懒加载：

// main.js
import VueLazyload from 'vue3-lazyload'

app.use(VueLazyload, {
  loading: '/images/loading.gif', // 加载中占位图
  error: '/images/error.png',     // 加载失败占位图
  preLoad: 1.3,                   // 预加载高度比例
  attempt: 1                      // 加载尝试次数
})

5.2 组件中使用

<template>
  <img v-lazy="dish.image" :alt="dish.name" />
</template>

5.3 性能优化

• 图片压缩：使用 WebP 格式，压缩至 80% 质量
• CDN 加速：静态资源使用 CDN 分发
• 响应式图片：根据屏幕尺寸加载不同尺寸图片
• 骨架屏：图片加载时显示骨架屏占位

6. 购物车逻辑设计

6.1 数据结构

interface CartItem {
  id: string;           // 购物车项ID
  dishId: string;       // 菜品ID
  dishName: string;     // 菜品名称
  image: string;        // 菜品图片
  specs: Specs;         // 规格信息
  quantity: number;   // 数量
  price: number;      // 单价
  totalPrice: number; // 小计
}

interface Specs {
  name: string;       // 规格名称（如：大份/小份）
  price: number;      // 规格价格
  attributes: object; // 其他属性
}

6.2 核心业务逻辑

1. 添加商品：检查是否已存在相同商品和规格，存在则增加数量
2. 更新数量：同步更新小计和总价
3. 删除商品：从列表中移除，重新计算总价
4. 清空购物车：一键清空所有商品
5. 持久化存储：使用 localStorage 保存购物车数据

6.3 同步机制

• 登录后同步本地购物车到服务器
• 退出登录时清空本地购物车
• 网络恢复后自动同步数据

7. API 接口设计

7.1 菜品相关接口

GET /api/dishes          # 获取菜品列表
GET /api/dishes/:id      # 获取菜品详情
GET /api/categories      # 获取分类列表
GET /api/dishes/search   # 搜索菜品

7.2 购物车接口

POST /api/cart/add       # 添加到购物车
PUT /api/cart/update     # 更新购物车商品
DELETE /api/cart/remove  # 移除购物车商品
GET /api/cart/list       # 获取购物车列表

7.3 订单接口

POST /api/orders/create  # 创建订单
GET /api/orders/list     # 获取订单列表
GET /api/orders/:id      # 获取订单详情
PUT /api/orders/cancel   # 取消订单

7.4 地址管理接口

GET /api/addresses       # 获取地址列表
POST /api/addresses      # 添加地址
PUT /api/addresses/:id   # 更新地址
DELETE /api/addresses/:id # 删除地址

8. 性能优化策略

8.1 代码分割

• 路由级代码分割
• 组件级按需加载
• 第三方库 CDN 引入

8.2 缓存策略

• 接口数据缓存
• 图片资源缓存
• 购物车数据本地