web

web/README.md

@@ -0,0 +1,143 @@
+# 电商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