ai_dianshang/web/README.md

电商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. 或者使用本地服务器：

   # 使用 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 对象添加新语言配置：

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

自定义主题颜色

修改 assets/css/common.css 中的 CSS 变量：

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

许可证

MIT License