# 电商PC端项目

基于 HTML + CSS + jQuery 的电商PC端项目，支持国际化多语言切换（中文/英文/日文）。

## 项目特点

- 📱 响应式设计，支持多种屏幕尺寸
- 🌍 国际化支持（中文、英文、日文）
- 🎨 现代简洁的UI设计
- 🛒 完整的购物车功能
- 🔍 商品搜索和筛选
- 📄 分页展示

## 技术栈

- HTML5
- CSS3 (使用CSS变量、Grid、Flexbox)
- jQuery 3.6.0
- LocalStorage (用于数据持久化)

## 项目结构

```
web/
├── index.html              # 商品列表页面
├── assets/
│   ├── css/
│   │   ├── reset.css      # CSS重置样式
│   │   ├── common.css     # 公共样式
│   │   ├── header.css     # 头部样式
│   │   ├── footer.css     # 底部样式
│   │   └── product-list.css  # 商品列表样式
│   └── js/
│       ├── i18n.js        # 国际化配置
│       ├── common.js      # 公共函数
│       └── product-list.js   # 商品列表逻辑
```

## 功能模块

### 1. 多语言切换
- 支持中文、英文、日文三种语言
- 语言偏好保存在 localStorage
- 实时切换，无需刷新页面

### 2. 商品筛选
- 按库存状态筛选
- 按价格区间筛选
- 按商品分类筛选
- 支持多条件组合筛选

### 3. 商品排序
- 推荐排序
- 最畅销排序
- 价格升序/降序
- 最新上架排序

### 4. 购物车
- 添加商品到购物车
- 购物车数量实时更新
- 数据持久化存储

## 使用方法

1. 直接在浏览器中打开 `index.html`
2. 或者使用本地服务器：
   ```bash
   # 使用 Python
   python -m http.server 8000
   
   # 使用 Node.js http-server
   npx http-server
   ```

## API接口说明

当前版本使用模拟数据，实际项目中需要对接后端API：

### 商品列表 API
```
GET /api/products
参数：
- page: 页码
- limit: 每页数量
- category: 分类
- minPrice: 最低价格
- maxPrice: 最高价格
- sort: 排序方式
```

## 浏览器兼容性

- Chrome (推荐)
- Firefox
- Safari
- Edge

## 待开发功能

- [ ] 商品详情页
- [ ] 购物车页面
- [ ] 用户登录/注册
- [ ] 订单管理
- [ ] 支付集成
- [ ] 个人中心

## 后续优化

1. 图片懒加载优化
2. 添加骨架屏加载效果
3. 性能优化（防抖、节流）
4. SEO优化
5. 添加单元测试

## 开发说明

### 添加新语言
在 `assets/js/i18n.js` 中的 `messages` 对象添加新语言配置：

```javascript
messages: {
    'zh-CN': { ... },
    'en-US': { ... },
    'new-lang': {
        // 添加翻译
    }
}
```

### 自定义主题颜色
修改 `assets/css/common.css` 中的 CSS 变量：

```css
:root {
    --primary-color: #ff6b6b;
    --secondary-color: #4ecdc4;
    /* ... */
}
```

## 许可证

MIT License