办公家具销售商城 - 前端项目

基于 Vue 3 + TypeScript + Tailwind CSS 的办公家具销售商城前台系统。

技术栈

• 框架: Vue 3 (Composition API <script setup>)
• 语言: TypeScript
• 构建工具: Vite
• 样式: Tailwind CSS v3
• 状态管理: Pinia
• 路由: Vue Router 4 (History 模式)
• 图标: Font Awesome 6 Free (CDN)
• HTTP 客户端: Axios
• Excel 导出: ExcelJS

项目特性

核心功能

1. 商品展示系统

   • 两级品类筛选（8个父级品类，131个子品类）
   • 多维度标签筛选（适配空间/工艺材质/颜色/座椅特性/销售状态）
   • SKU 级展示与商品组合展示
   • 商品详情页（规格选择、颜色选择、同组商品切换）

2. 方案系统（替代传统购物车）

   • 三层结构：方案 → 空间 → 商品
   • 客户信息管理
   • 空间管理（添加、删除、重命名、拖拽排序）
   • 商品管理（添加、删除、数量调整、拖拽排序）
   • 三级折扣系统（商品级/空间级/方案级）
   • 自定义商品支持
   • Excel 导出功能

3. 数据持久化

   • 所有数据通过后端 API 管理
   • 方案数据持久化到后端 JSON 文件
   • 自定义商品支持持久化存储

数据模型

品类结构

ParentCategory（8个）→ SubCategory（131个）← Product.subCategoryId

子品类 ID 规则：parentId × 100 + 序号（例：台桌类子品类 101-125）

方案系统

Solution {
  id, name, customer: CustomerInfo,
  spaces: SolutionSpace[],
  totalPrice, actualPrice,
  createdAt, updatedAt
}

SolutionSpace {
  id, name,
  products: SolutionProduct[],
  order
}

SolutionProduct {
  mid, pid, name, model, series,
  image, color, material, dimensions,
  weight?, volume?, description?,
  originalPrice, salePrice, actualPrice,
  quantity, order,
  isCustom, customDescription?, isUserCreated?
}

开发指南

环境要求

• Node.js v17.9.1
• npm 或 yarn

安装依赖

npm install

开发模式

npm run dev

访问 http://localhost:5173

生产构建

npm run build

构建输出到 dist/ 目录

预览生产构建

npm run preview

项目结构

src/
├── components/          # 可复用组件
│   ├── AppHeader.vue   # 顶部导航栏
│   ├── AppFooter.vue   # 底部信息栏
│   ├── AppBreadcrumb.vue  # 面包屑导航
│   ├── SolutionModal.vue  # 方案管理弹窗
│   ├── CustomerModal.vue  # 客户信息录入
│   ├── DiscountModal.vue  # 折扣设置弹窗
│   ├── ConfirmModal.vue   # 确认对话框
│   ├── InputModal.vue     # 输入对话框
│   └── Toast.vue          # 消息提示
├── views/              # 页面组件
│   ├── HomeView.vue    # 首页
│   ├── ProductListView.vue   # 商品列表
│   ├── ProductDetailView.vue # 商品详情
│   └── PlaceholderView.vue   # 占位页面
├── stores/             # Pinia 状态管理
│   ├── solution.ts     # 方案系统 Store（API 版本）
│   └── solutionAPI.ts  # 方案 API（已废弃）
├── services/           # API 服务层
│   └── api.ts          # 统一 API 接口
├── router/             # 路由配置
│   └── index.ts
├── types/              # TypeScript 类型定义
│   └── index.ts
├── utils/              # 工具函数
│   └── excelExport.ts  # Excel 导出
├── data/               # Mock 数据（已废弃，改用后端 API）
│   └── mock.ts
├── style.css           # 全局样式
└── App.vue             # 根组件

主题配置

主题色定义在 tailwind.config.js：

Token	用途	值
primary	主色/导航背景	#1E3A5F
accent	强调/CTA 按钮	#2E86C1
surface	页面背景	#F5F7FA
ink	正文	#2C3E50
ink-muted	次要文字	#6B7A8D

API 集成

前端通过 services/api.ts 与后端通信：

// 商品 API
productsAPI.getList()
productsAPI.getDetail(mid)
productsAPI.getGroup(pid)

// 品类 API
categoriesAPI.getAll()

// 方案 API
solutionsAPI.getAll()
solutionsAPI.create(data)
solutionsAPI.update(id, data)
solutionsAPI.delete(id)

// 空间 API
solutionsAPI.addSpace(solutionId, data)
solutionsAPI.updateSpace(solutionId, spaceId, data)
solutionsAPI.deleteSpace(solutionId, spaceId)
solutionsAPI.reorderSpaces(solutionId, spaceIds)

// 商品 API
solutionsAPI.addProduct(solutionId, spaceId, data)
solutionsAPI.updateProduct(solutionId, spaceId, mid, data)
solutionsAPI.removeProduct(solutionId, spaceId, mid)
solutionsAPI.reorderProducts(solutionId, spaceId, productMids)

// 折扣 API
solutionsAPI.applyProductDiscount(solutionId, spaceId, mid, discount)
solutionsAPI.applySpaceDiscount(solutionId, spaceId, discount)
solutionsAPI.applySolutionDiscount(solutionId, discount)

开发规范

禁止使用浏览器原生弹窗

项目中禁止使用 alert、confirm、prompt 等浏览器原生弹窗，必须使用自定义组件：

• 确认对话框：使用 ConfirmModal
• 输入对话框：使用 InputModal
• 消息提示：使用 Toast

全局样式工具类

优先使用 src/style.css 中定义的工具类：

• 按钮：.btn-primary / .btn-outline / .btn-accent
• 卡片：.card
• 布局：.page-container
• 标题：.section-title / .section-subtitle

IDE 推荐配置

• VS Code
• Volar (禁用 Vetur)
• TypeScript Vue Plugin (Volar)

相关项目

• 后端项目：my-market-backend

许可证

私有项目