online-order-vue/CLAUDE.md

YShop Drink Vue 管理后台 - Claude Code 配置

2级子项目配置 | 继承自 yshop (1级)

项目信息

属性	值
项目名称	yshop-drink-vue
所属项目	yshop
项目类型	frontend (管理后台)
版本	3.2.3
Node 版本	>= 16.0.0
包管理器	pnpm >= 8.6.0

技术栈

技术	版本	用途
Vue	3.4.21	核心框架
Vite	5.1.4	构建工具
TypeScript	5.3.3	类型系统
Element Plus	2.6.1	UI 组件库
Pinia	2.1.7	状态管理
Vue Router	4.3.0	路由管理
UnoCSS	0.58.5	原子化 CSS
Axios	1.6.8	HTTP 请求
ECharts	5.5.0	图表
BPMN.js	8.9.0	流程设计

项目结构

yshop-drink-vue/
├── src/
│   ├── api/                   # API 接口定义
│   ├── assets/                # 静态资源
│   ├── components/            # 公共组件
│   ├── config/                # 配置
│   ├── directives/            # 自定义指令
│   ├── hooks/                 # 组合式函数
│   ├── layout/                # 布局组件
│   ├── locales/               # 国际化
│   ├── plugins/               # 插件
│   ├── router/                # 路由配置
│   ├── store/                 # Pinia 状态
│   ├── styles/                # 全局样式
│   ├── types/                 # TypeScript 类型
│   ├── utils/                 # 工具函数
│   ├── views/                 # 页面视图
│   ├── App.vue                # 根组件
│   ├── main.ts                # 入口文件
│   └── permission.ts          # 权限控制
├── public/                    # 公共资源
├── types/                     # 全局类型定义
├── vite.config.ts             # Vite 配置
├── tsconfig.json              # TS 配置
├── uno.config.ts              # UnoCSS 配置
└── package.json

页面模块

src/views/
├── mall/                      # 商城管理
│   ├── product/               # 商品管理
│   ├── order/                 # 订单管理
│   ├── store/                 # 门店管理
│   ├── shop/                  # 店铺设置
│   ├── desk/                  # 桌号管理
│   ├── member/                # 会员管理
│   ├── coupon/                # 优惠券
│   ├── cashier/               # 收银台
│   └── statistics/            # 数据统计
├── pay/                       # 支付管理
├── market/                    # 营销管理
├── score/                     # 积分管理
├── mp/                        # 公众号管理
├── message/                   # 消息管理
├── express/                   # 物流管理
├── system/                    # 系统设置
├── infra/                     # 基础设施
├── Login/                     # 登录页
├── Home/                      # 首页
├── Profile/                   # 个人中心
└── Error/                     # 错误页

开发命令

# 安装依赖
pnpm install

# 本地开发
pnpm dev

# 连接开发服务器
pnpm dev-server

# 类型检查
pnpm ts:check

# 构建
pnpm build:local      # 本地环境
pnpm build:dev        # 开发环境
pnpm build:test       # 测试环境
pnpm build:prod       # 生产环境

# 预览构建结果
pnpm preview

# 代码检查
pnpm lint:eslint      # ESLint
pnpm lint:format      # Prettier
pnpm lint:style       # Stylelint

# 清理
pnpm clean            # 删除 node_modules
pnpm clean:cache      # 清理缓存

环境配置

.env                  # 基础配置
.env.dev              # 开发环境
.env.test             # 测试环境
.env.stage            # 预发布环境
.env.prod             # 生产环境

API 规范

// src/api/mall/product/index.ts
import request from '@/config/axios'

// 获取商品列表
export const getProductPage = (params: ProductPageReqVO) => {
  return request.get({ url: '/mall/product/page', params })
}

// 创建商品
export const createProduct = (data: ProductVO) => {
  return request.post({ url: '/mall/product/create', data })
}

组件规范

<template>
  <ContentWrap>
    <!-- 内容 -->
  </ContentWrap>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as ProductApi from '@/api/mall/product'

defineOptions({ name: 'ProductList' })

const loading = ref(false)
const list = ref([])

const getList = async () => {
  loading.value = true
  try {
    list.value = await ProductApi.getProductPage({})
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getList()
})
</script>

权限控制

// 按钮权限
<el-button v-hasPermi="['mall:product:create']">新增</el-button>

// 路由权限 (在菜单配置中设置)

主要功能

模块	功能
商品管理	CRUD、规格、分类、库存
订单管理	列表、详情、发货、退款
门店管理	门店信息、营业时间、结算
桌号管理	桌号、二维码
会员管理	会员列表、等级、余额
优惠券	发券、核销
收银台	堂食点餐
数据统计	销售报表、趋势图

核心文档

文档	位置	内容
系统架构	../architecture.canvas	整体架构图
后端 API	Swagger UI	接口文档