摩配专家 - 摩托车配件电商网站

项目概述

这是一个专业的摩托车配件电商展示网站，采用静态网页技术构建，具有完整的产品展示、多语言支持和后台管理功能。

🎯 已完成功能

1. 全局语言翻译持久化 ✅

• localStorage持久化：用户选择的语言在浏览器中持久保存
• 跨页面一致性：语言选择在所有页面间保持一致，页面导航时不会重置
• 支持语言：中文（zh-CN）、英文（en）、西班牙文（es）、俄文（ru）
• 实现方式：
  • 全局语言管理器（js/global-lang.js）
  • Observer模式通知所有组件语言变化
  • 自动保存/恢复语言设置

2. 多语言产品内容显示 ✅

• 产品名称多语言：根据选择语言显示对应的产品名称（name, name_en, name_es, name_ru）
• 产品描述多语言：支持多语言产品描述（description, description_en, description_es, description_ru）
• 产品标签多语言：标签系统支持多语言显示（tags, tags_en, tags_es, tags_ru）
• 分类名称翻译：产品分类根据语言自动翻译
• 实时切换：切换语言后产品内容立即更新

3. 批量删除功能 ✅

• 批量选择：支持单个产品选择和全选功能
• 选择状态显示：实时显示已选择的产品数量
• 批量删除：支持同时删除多个选中的产品
• 进度反馈：删除过程中显示进度和结果反馈
• 错误处理：完善的错误处理和用户提示
• 界面组件：
  • 全选复选框
  • 产品卡片选择框
  • 批量操作按钮区域
  • 清除选择功能

📁 项目结构

├── index.html                 # 主页
├── products-stable.html       # 产品展示页面（稳定版）
├── admin/
│   └── product-manager.html   # 后台产品管理
├── js/
│   ├── global-lang.js        # 全局语言管理器（新增）
│   ├── product-manager.js    # 产品管理功能
│   ├── products-display.js   # 产品展示功能
│   ├── translation.js        # 翻译系统（保持兼容）
│   └── main.js              # 主要功能脚本
├── css/
│   └── style.css            # 样式文件
├── products/
│   ├── power-system.html    # 动力系统配件
│   ├── brake-system.html    # 制动系统配件
│   ├── control-system.html  # 控制系统配件
│   ├── exterior.html        # 外观美学配件
│   ├── accessories.html     # 配件
│   └── riding-gear.html     # 骑行装备
├── capabilities.html         # 制造能力页面
├── how-it-works.html        # 订购流程页面
├── resources.html           # 知识库页面
├── about.html              # 关于我们页面
├── contact.html            # 联系我们页面
└── README.md              # 项目说明文档

🔧 核心技术实现

全局语言管理器

class GlobalLanguageManager {
    constructor() {
        this.currentLanguage = this.getSavedLanguage() || 'zh-CN';
        this.translations = {};
        this.observers = [];
    }
    
    // localStorage持久化
    saveLanguage() {
        localStorage.setItem('moto-expert-language', this.currentLanguage);
    }
    
    // 获取产品本地化内容
    getLocalizedProductContent(product, field) {
        // 支持 name, description, tags 的多语言字段
    }
}

批量删除功能

async handleBatchDelete() {
    const selectedIds = Array.from(this.selectedProducts);
    const deletePromises = selectedIds.map(async (productId) => {
        const response = await fetch(`../tables/products/${productId}`, {
            method: 'DELETE'
        });
        return { success: response.ok, id: productId };
    });
    
    await Promise.all(deletePromises);
    // 更新UI和显示结果
}

🌐 多语言支持

支持的语言

• 🇨🇳 中文（简体）- zh-CN
• 🇺🇸 英文 - en
• 🇪🇸 西班牙文 - es
• 🇷🇺 俄文 - ru

产品数据结构

{
    id: "product_id",
    name: "中文产品名称",
    name_en: "English Product Name",
    name_es: "Nombre del Producto",
    name_ru: "Название продукта",
    description: "中文描述",
    description_en: "English description",
    description_es: "Descripción en español",
    description_ru: "Описание на русском",
    tags: ["中文标签1", "中文标签2"],
    tags_en: ["English tag1", "English tag2"],
    tags_es: ["etiqueta1", "etiqueta2"],
    tags_ru: ["русский тег1", "русский тег2"]
}

🛠 后台管理功能

产品管理

• ✅ 产品列表展示（分页）
• ✅ 产品添加/编辑/删除
• ✅ 批量选择和批量删除
• ✅ Excel批量导入
• ✅ 产品搜索和筛选
• ✅ 多语言产品内容管理

批量操作界面

• 全选复选框：一键选择/取消选择所有产品
• 选择计数器：实时显示已选择的产品数量
• 批量删除按钮：删除所有选中的产品
• 清除选择按钮：取消所有选择

📋 API 接口

产品管理 API

• GET /tables/products - 获取产品列表（支持分页、搜索、排序）
• GET /tables/products/{id} - 获取单个产品详情
• POST /tables/products - 创建新产品
• PUT /tables/products/{id} - 更新产品信息
• PATCH /tables/products/{id} - 部分更新产品
• DELETE /tables/products/{id} - 删除产品（批量删除使用）

批量上传 API

• GET /api/upload-product.html?action=upload&name=产品名称&... - 通过URL参数批量上传产品

🚀 新增功能：Python批量上传工具

工具概述

我们提供了完整的Python工具包来解决图片上传问题，现在支持：

• Excel解析: 自动解析产品Excel文件
• 图片上传: 支持多个免费图床服务（ImgBB、SM.MS、PostImage）
• API调用: 自动调用网站API批量创建产品
• 断点续传: 支持从指定位置继续上传
• 多语言: 完整支持多语言产品信息

使用步骤

1. 下载工具包: 访问 /scripts/ 目录
2. 准备Excel: 按照模板格式准备产品数据
3. 运行脚本:

   pip install pandas requests openpyxl
   python excel_to_api.py products.xlsx http://your-website.com

文件结构

scripts/
├── excel_to_api.py          # 主上传脚本
├── requirements.txt         # Python依赖包
├── create_sample_excel.py   # 创建示例Excel
├── README.md               # 详细使用说明
└── example_products.xlsx   # Excel模板文件

🎨 前端技术栈

• HTML5 - 语义化结构
• CSS3 - 响应式设计
• JavaScript (ES6+) - 现代JavaScript特性
• Tailwind CSS - 实用优先的CSS框架
• Font Awesome - 图标库
• Google Fonts - Web字体

🔄 语言切换流程

1. 用户在任意页面选择语言
2. GlobalLanguageManager 更新当前语言
3. 语言设置保存到 localStorage
4. 通知所有观察者组件语言变化
5. 各组件重新渲染内容以应用新语言
6. 产品数据根据语言字段显示对应内容

📱 响应式设计

• 移动优先设计
• 支持桌面、平板、手机等设备
• 自适应网格布局
• 触摸友好的交互设计

🚀 部署说明

1. 所有文件均为静态资源，无需服务器端处理
2. 可直接部署到任何静态网站托管服务
3. 建议使用 HTTPS 以支持现代浏览器特性
4. 推荐使用 CDN 加速静态资源加载

📞 联系方式

• 网站: 摩配专家
• 邮箱: 通过联系页面获取
• 地址: 通过关于我们页面获取

---

🎉 最新更新

已完成的核心功能：

1. ✅ 全局语言翻译持久化: 语言选择在所有页面间保持一致，使用localStorage持久化存储，页面导航时不会重置语言设置。

2. ✅ 多语言产品内容显示: 产品卡片内容（名称、标签、尺寸、产品描述等详情信息）根据用户选择的翻译语言显示对应的多语言内容。

3. ✅ 批量删除功能: 后台管理系统支持批量选择产品（包括全选功能）和批量删除操作，提供完整的用户反馈和错误处理。

4. ✅ Python批量上传工具: 全新的批量上传解决方案，支持Excel解析、图片自动上传到图床、API批量创建产品，解决了之前图片上传不稳定的问题。

5. ✅ 全局翻译功能修复: 修复了语言切换后页面内容不更新的问题，现在所有页面元素都支持实时语言切换，真正实现全局翻译效果。

6. ✅ 首页视觉优化: 更新了首页产品中心的6个分类卡片，使用真实产品图片替换原有的纯色背景+图标，并更新了banner右侧的制造工厂图片。

功能优势总结：

批量上传工具：

• 🖼️ 图片自动上传: 支持ImgBB、SM.MS、PostImage等多个图床
• 📊 Excel智能解析: 自动识别中英文列名，支持多语言产品信息
• 🔄 断点续传: 上传中断可从指定位置继续
• 🚀 高效稳定: Python脚本处理，比网页端更稳定
• 🌍 完全免费: 使用免费图床服务，无需额外费用

全局翻译系统：

• 🌐 真正的全局翻译: 语言选择在所有页面间保持一致
• 💾 持久化存储: 使用localStorage保存语言偏好
• ⚡ 实时切换: 点击语言按钮立即更新所有文本内容
• 🎯 完整覆盖: 导航菜单、产品信息、页面内容全部支持翻译
• 🔄 Observer模式: 组件间自动同步语言变化

所有功能均已完成测试，确保在不影响其他现有功能的前提下正常工作。