# Lurmix Web Template

## 项目概述

这是一个基于 Astro + Tailwind CSS 的多语言企业官网模板，适用于 AI 玩具制造商、ODM/OEM 服务商等 B2B2C 业务场景。

## 技术栈

- **框架**: Astro 6.4.3
- **样式**: Tailwind CSS 3.4.17
- **交互**: Alpine.js 3.x (CDN)
- **内容管理**: Astro Content Collections
- **多语言**: Astro i18n (支持 en/zh/ja/es/ar)

## 项目结构

```
lurmix-web/
├── src/
│   ├── components/          # 可复用组件
│   │   ├── CategoryCard.astro    # 产品分类卡片
│   │   ├── ProductCard.astro     # 产品卡片
│   │   └── CaseCard.astro        # 客户案例卡片
│   ├── content/            # 内容数据
│   │   ├── products/       # 产品数据 (按分类组织)
│   │   │   ├── companion/
│   │   │   ├── plush/
│   │   │   ├── figure/
│   │   │   └── badge/
│   │   └── cases/          # 客户案例数据
│   ├── i18n/              # 多语言翻译文件
│   │   └── utils.ts       # 语言工具函数
│   ├── layouts/           # 页面布局
│   │   ├── BaseLayout.astro    # 基础布局
│   │   ├── Header.astro        # 顶部导航
│   │   └── Footer.astro        # 页脚
│   ├── pages/             # 路由页面
│   │   ├── index.astro         # 首页
│   │   ├── products/           # 产品系列页
│   │   │   ├── companion.astro
│   │   │   ├── plush.astro
│   │   │   ├── figure.astro
│   │   │   └── badge.astro
│   │   ├── custom.astro        # 定制开发页
│   │   ├── about.astro         # 关于我们页
│   │   └── contact.astro       # 联系页
│   ├── styles/
│   │   └── global.css          # 全局样式
│   └── content.config.js       # Content Collections 配置
├── astro.config.mjs            # Astro 配置
├── tailwind.config.js          # Tailwind 配置
└── package.json
```

## 核心功能

### 1. 内容集合 (Content Collections)

#### 产品集合 (products)
```javascript
{
  id: string,
  name: string,
  category: "companion" | "plush" | "figure" | "badge",
  price: number,
  image: string,
  description: string,
  features: string[],
  specs: {
    connectivity?: string,
    ageRange?: string,
    weight?: string,
    dimensions?: string
  },
  badge?: string  // "Best Seller" | "New" 等
}
```

#### 案例集合 (cases)
```javascript
{
  id: string,
  client: string,
  logo: string,
  industry: string,
  summary: string,
  result: string,
  tags: string[]
}
```

### 2. 可复用组件

#### CategoryCard
产品分类卡片，用于首页展示产品线
- Props: category, title, description, image, productCount
- 交互: hover 效果，点击跳转到分类页

#### ProductCard
产品展示卡片
- Props: id, name, category, price, image, description, badge
- 特性: 支持徽章显示，价格展示，跳转到产品详情

#### CaseCard
客户案例卡片
- Props: client, logo, industry, summary, result, tags
- 特性: logo 展示，结果高亮，标签分类

### 3. 页面结构

#### 首页 (index.astro)
1. Hero 区 - 主标语 + CTA
2. 产品系列概览 - 4个分类卡片
3. 分类产品展示 - 每个系列4款产品（共4组）
4. ODM 能力展示 - 4个核心能力卡片
5. 客户案例 - 成功案例展示
6. 最终 CTA - 联系引导

#### 产品系列页 (products/[category].astro)
1. Hero 区 - 系列名称 + 描述
2. 系列特性 - 3个特性卡片
3. 产品列表 - 该系列所有产品
4. CTA - 定制服务引导

#### 定制开发页 (custom.astro)
1. Hero 区 - 主标语
2. 目标客户 - 品牌商 + IP 方（2列）
3. ODM 能力 - 8个能力卡片
4. 成功案例 - 案例展示
5. 合作流程 - 4步流程图
6. 最终 CTA

#### 关于我们页 (about.astro)
1. Hero 区
2. 公司数据统计 - 4个关键指标
3. 公司介绍 - 文字 + 图片
4. 研发能力 - 3个核心能力
5. 价值观 - 4个价值观卡片
6. CTA

#### 联系页 (contact.astro)
1. Hero 区
2. 联系表单 - 包含表单验证和提交反馈
3. 联系方式 - 邮箱/电话/地址（3列）
4. FAQ 引导

### 4. 多语言支持

当前模板为英文版，支持扩展到多语言：

#### i18n 配置
```javascript
// astro.config.mjs
i18n: {
  defaultLocale: 'en',
  locales: ['en', 'zh', 'ja', 'es', 'ar'],
  routing: {
    prefixDefaultLocale: false
  }
}
```

#### 翻译文件结构
```
src/i18n/
├── en.json
├── zh.json
├── ja.json
├── es.json
└── ar.json
```

#### 使用方式
```astro
---
import { getLangFromUrl, useTranslations } from '../i18n/utils';
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---
<h1>{t('nav.home')}</h1>
```

### 5. 样式系统

#### Tailwind 配置
```javascript
theme: {
  extend: {
    colors: {
      primary: {...},    // 主色
      secondary: {...},  // 辅助色
      neutral: {...}     // 中性色
    },
    fontFamily: {
      display: ['...'],  // 标题字体
      body: ['...']      // 正文字体
    }
  }
}
```

#### 常用样式模式
- 渐变背景: `bg-gradient-to-br from-primary-50 via-white to-primary-50`
- 卡片阴影: `shadow-sm hover:shadow-xl transition-all`
- 圆角: `rounded-2xl` (大卡片), `rounded-xl` (按钮/表单)
- 响应式网格: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4`

### 6. 交互效果

使用 Alpine.js 实现：
- 导航菜单展开/折叠
- 语言切换器
- 表单提交状态
- 移动端菜单

## 快速开始

### 1. 安装依赖
```bash
npm install
```

### 2. 启动开发服务器
```bash
npm run dev
```

### 3. 构建生产版本
```bash
npm run build
```

## 自定义指南

### 修改品牌色
编辑 `tailwind.config.js`:
```javascript
colors: {
  primary: {
    50: '#fff7ed',
    // ... 其他色阶
    600: '#ea580c',  // 主色
    // ... 其他色阶
  }
}
```

### 添加新产品分类
1. 在 `src/content/products/` 创建新目录
2. 更新 `src/content.config.js` 的 category enum
3. 创建对应的产品页面 `src/pages/products/[new-category].astro`
4. 更新首页和导航的分类列表

### 添加新页面
1. 在 `src/pages/` 创建新的 `.astro` 文件
2. 使用 `BaseLayout` 包裹内容
3. 在 Header/Footer 中添加导航链接

### 添加新组件
1. 在 `src/components/` 创建 `.astro` 文件
2. 定义 Props interface
3. 在页面中引入并使用

## 数据管理

### 添加产品
在对应分类目录下创建 JSON 文件：
```json
{
  "id": "product-slug",
  "name": "Product Name",
  "category": "companion",
  "price": 299,
  "image": "/images/products/product.jpg",
  "description": "Product description",
  "features": ["Feature 1", "Feature 2"],
  "specs": {
    "connectivity": "WiFi + Bluetooth",
    "ageRange": "3-12 years"
  },
  "badge": "New"
}
```

### 添加案例
在 `src/content/cases/` 创建 JSON 文件：
```json
{
  "id": "case-slug",
  "client": "Client Name",
  "logo": "/images/clients/logo.jpg",
  "industry": "Industry",
  "summary": "Brief summary",
  "result": "Key result achieved",
  "tags": ["tag1", "tag2"]
}
```

## SEO 优化

### 页面元数据
每个页面通过 BaseLayout 设置：
```astro
<BaseLayout
  title="Page Title | Lurmix"
  description="Page description for SEO"
  image="/og-image.jpg"
>
```

### 结构化数据
可在 BaseLayout 中添加 JSON-LD 结构化数据

### 性能优化
- 图片使用懒加载 `loading="lazy"`
- 使用占位符避免布局偏移
- Astro 自动进行代码分割和优化

## 部署

### Vercel
```bash
npm run build
vercel --prod
```

### Netlify
```bash
npm run build
netlify deploy --prod
```

### 自托管
```bash
npm run build
# 部署 dist/ 目录到服务器
```

## 注意事项

1. **图片路径**：当前使用占位图 `/images/placeholder.jpg`，需要替换为真实图片
2. **多语言**：当前仅英文版，需要补充翻译文件
3. **表单提交**：当前为前端演示，需要连接后端 API 或第三方服务
4. **联系信息**：需要更新真实的邮箱、电话、地址

## 扩展建议

- 添加博客/新闻模块
- 集成 CMS (如 Strapi, Sanity)
- 添加搜索功能
- 集成分析工具 (Google Analytics, Plausible)
- 添加在线客服 (Intercom, Crisp)
- 实现购物车功能（如果需要直接销售）

## 许可证

此模板可自由用于商业项目。