# Power Leasing - 电商系统

一个基于 Vue 2 + Element UI 的轻量级电商系统，包含商品展示、购物车、结算等完整功能。

## 🚀 功能特性

### 核心功能
- **商品列表页面** - 展示所有商品，支持添加到购物车
- **商品详情页面** - 商品详细信息展示，数量选择
- **购物车页面** - 商品管理、数量修改、删除
- **结算页面** - 订单摘要、收货信息填写、订单提交

### 技术特点
- 轻量级架构，不依赖 Vuex 状态管理
- 使用 localStorage 持久化购物车数据
- 响应式设计，支持移动端
- 完整的无障碍访问支持
- 错误处理和用户反馈

## 🏗️ 项目结构

```
src/
├── components/           # 公共组件
│   ├── header.vue       # 顶部导航栏（含面包屑导航）
│   └── content.vue      # 内容容器
├── Layout/              # 布局组件
│   └── idnex.vue        # 主布局
├── views/               # 页面组件
│   ├── productList/     # 商品列表
│   │   └── index.vue
│   ├── productDetail/   # 商品详情
│   │   └── index.vue
│   ├── cart/           # 购物车
│   │   └── index.vue
│   └── checkout/       # 结算页面
│       └── index.vue
├── utils/               # 工具函数
│   ├── productService.js # 商品数据服务
│   ├── cartManager.js   # 购物车管理
│   ├── navigation.js    # 导航配置
│   └── routeTest.js     # 路由测试工具
├── router/              # 路由配置
│   ├── index.js         # 主路由文件
│   └── routes.js        # 路由配置文件
├── store/               # 状态管理（轻量使用）
│   └── index.js
├── App.vue              # 根组件
└── main.js              # 入口文件
```

## 🔧 技术栈

- **前端框架**: Vue 2.6.14
- **UI 组件库**: Element UI 2.15.14
- **路由**: Vue Router 3.5.1
- **状态管理**: Vuex 3.6.2（轻量使用）
- **样式**: SCSS + CSS Grid/Flexbox
- **构建工具**: Vue CLI 5.0

## 🧭 路由配置

### 完整路由列表

| 路径 | 名称 | 描述 | 权限 |
|------|------|------|------|
| `/productList` | 商品列表 | 浏览所有可用商品 | all |
| `/product/:id` | 商品详情 | 查看商品详细信息 | all |
| `/cart` | 购物车 | 管理购物车商品 | all |
| `/checkout` | 订单结算 | 完成订单结算 | all |

### 路由特性

- **嵌套路由**: 所有页面都在 Layout 组件内渲染
- **动态路由**: 商品详情页支持动态 ID 参数
- **路由守卫**: 自动设置页面标题和权限检查
- **错误处理**: 404 页面自动重定向到商品列表
- **面包屑导航**: 自动生成页面导航路径

### 路由文件结构

```
src/router/
├── index.js          # 主路由文件，包含路由守卫和错误处理
└── routes.js         # 路由配置文件，按功能模块组织
```

## 📱 页面说明

### 1. 商品列表页面 (`/productList`)
- 网格布局展示所有商品
- 商品卡片包含图片、标题、描述、价格
- 支持点击查看详情
- 一键添加到购物车

### 2. 商品详情页面 (`/product/:id`)
- 商品图片和详细信息展示
- **自定义数量选择器**：美观的加减按钮设计，支持1-99数量范围
- 数量选择器特性：
  - 减号按钮（-）：减少数量，最小值为1时自动禁用
  - 数量输入框：支持直接输入，实时验证范围
  - 加号按钮（+）：增加数量，最大值为99时自动禁用
  - 悬停效果和焦点状态
  - 响应式设计，移动端适配
- 添加到购物车功能
- 返回商品列表

### 3. 购物车页面 (`/cart`)
- 购物车商品列表
- 数量修改和删除功能
- 实时计算总价和商品数量
- 清空购物车功能
- 跳转到结算页面

### 4. 结算页面 (`/checkout`)
- 订单摘要展示
- 收货信息表单（姓名、电话、地址、备注）
- 表单验证
- 订单提交功能

## 🛠️ 安装和运行

```bash
# 安装依赖
npm install

# 开发环境运行
npm run serve

# 生产环境构建
npm run build

# 代码检查
npm run lint
```

## 🧪 路由测试

项目包含完整的路由测试工具，可以在浏览器控制台中运行：

```javascript
// 导入测试工具
import { runFullTest } from './src/utils/routeTest'

// 运行完整测试
runFullTest()

// 或者单独测试
import { testRoutes, testNavigation } from './src/utils/routeTest'
testRoutes()
testNavigation()
```

## 🔍 问题修复记录

### 页面重复渲染问题
**问题描述**: 页面出现重复渲染，显示两次相同内容

**根本原因**:
1. 路由配置存在冲突 - 两个相同路径的路由
2. Layout 组件嵌套问题 - 多层 router-view 嵌套
3. Vue 版本不匹配 - header.vue 使用了 Vue 3 语法

**解决方案**:
1. 修复路由配置，移除重复路由
2. 简化 Layout 组件结构，避免多层嵌套
3. 将 header.vue 改为 Vue 2 语法
4. 优化组件渲染逻辑

### 路由配置完善
**新增功能**:
1. 完整的路由配置文件 (`routes.js`)
2. 导航配置工具 (`navigation.js`)
3. 路由测试工具 (`routeTest.js`)
4. 面包屑导航支持
5. 路由守卫和错误处理

### 具体修复内容
- `src/router/index.js`: 清理重复路由，添加电商页面路由
- `src/router/routes.js`: 新增路由配置文件
- `src/utils/navigation.js`: 新增导航配置工具
- `src/utils/routeTest.js`: 新增路由测试工具
- `src/components/header.vue`: Vue 3 → Vue 2 语法转换，添加面包屑导航
- `src/components/content.vue`: 简化组件，移除不必要的 router-view
- 新增完整的电商页面组件

## 🎨 设计原则

- **DRY 原则**: 避免代码重复，提取公共组件和工具函数
- **KISS 原则**: 保持代码简单易懂
- **SOLID 原则**: 单一职责，开闭原则
- **YAGNI 原则**: 只实现当前需要的功能
- **无障碍访问**: 支持键盘导航和屏幕阅读器

## 🔢 数量选择器组件

### 组件特性
- **现代化设计**：圆角边框、阴影效果、悬停状态
- **交互反馈**：按钮点击动画、焦点状态高亮
- **数量验证**：自动限制范围（1-99），输入验证
- **无障碍支持**：包含aria-label属性，支持键盘操作
- **响应式布局**：移动端和桌面端自适应

### 使用方法
```vue
<template>
  <div class="quantity-selector">
    <button 
      class="quantity-btn minus-btn"
      @click="handleDecreaseQuantity"
      :disabled="quantity <= 1"
      aria-label="减少数量"
    >
      <span class="btn-icon">−</span>
    </button>
    
    <input 
      type="number"
      class="quantity-input"
      v-model.number="quantity"
      :min="1"
      :max="99"
      aria-label="数量输入"
    />
    
    <button 
      class="quantity-btn plus-btn"
      @click="handleIncreaseQuantity"
      :disabled="quantity >= 99"
      aria-label="增加数量"
    >
      <span class="btn-icon">+</span>
    </button>
  </div>
</template>
```

### 样式定制
支持以下CSS类名和状态：
- `.quantity-selector`：主容器样式
- `.quantity-btn`：按钮基础样式
- `.minus-btn` / `.plus-btn`：减号/加号按钮
- `.quantity-input`：数量输入框
- `.btn-icon`：按钮图标样式
- 悬停状态、焦点状态、禁用状态

## 📱 响应式设计

- 使用 CSS Grid 和 Flexbox 布局
- 移动端优先的响应式设计
- 支持触摸操作和手势
- 适配不同屏幕尺寸

## 🔒 数据安全

- 购物车数据本地存储
- 表单验证和错误处理
- 用户输入过滤和清理
- 安全的订单提交流程

## 🚀 未来优化

- [ ] 用户登录注册系统
- [ ] 订单历史记录
- [ ] 商品搜索和筛选
- [ ] 支付集成
- [ ] 商品评价系统
- [ ] 库存管理
- [ ] 后台管理系统

## 📝 更新日志

### v1.2.0 - 数量选择器组件优化 (2024)
- ✨ 新增自定义数量选择器组件，替换Element UI数字输入框
- 🎨 现代化UI设计：圆角边框、阴影效果、悬停状态
- 🔧 功能增强：支持1-99数量范围，实时验证
- ♿ 无障碍优化：添加aria-label属性，支持键盘操作
- 📱 响应式设计：移动端和桌面端自适应
- 🐛 修复：移除重复代码，优化组件结构
- 📚 文档更新：添加组件使用说明和样式定制指南

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

**注意**: 这是一个演示项目，商品数据为静态数据，实际使用时需要连接后端 API。