# b2b_website_longxia

**Repository Path**: fireduck_admin/b2b_website_longxia

## Basic Information

- **Project Name**: b2b_website_longxia
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-01
- **Last Updated**: 2026-04-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# B2B Vue3 Website

专业的 B2B 外贸自建站 - Vue3 + TypeScript 版本

## 🚀 技术栈

- **Vue 3** - 渐进式 JavaScript 框架（Composition API）
- **TypeScript** - 类型安全的 JavaScript 超集
- **Vue Router 4** - 官方路由管理器
- **Vite** - 下一代前端构建工具
- **CSS3** - 原生 CSS 变量 + 响应式设计

## 📁 项目结构

```
b2b-vue3-website/
├── index.html              # 入口 HTML
├── package.json            # 项目依赖配置
├── vite.config.ts          # Vite 配置文件
├── tsconfig.json           # TypeScript 配置
├── public/                 # 静态资源目录
├── src/
│   ├── main.ts             # 应用入口
│   ├── App.vue             # 根组件
│   ├── assets/             # 静态资源
│   │   └── main.css        # 全局样式
│   ├── components/         # 可复用组件
│   │   ├── NavBar.vue      # 导航栏
│   │   └── Footer.vue      # 页脚
│   ├── router/             # 路由配置
│   │   └── index.ts        # 路由定义
│   ├── types/              # TypeScript 类型定义
│   │   └── index.ts        # 接口定义
│   └── views/              # 页面组件
│       ├── HomeView.vue    # 首页
│       ├── ProductsView.vue # 产品页
│       ├── AboutView.vue   # 关于页
│       └── ContactView.vue # 联系页
└── README.md               # 项目说明
```

## 🛠️ 快速开始

### 1. 安装依赖

```bash
cd b2b-vue3-website
npm install
```

### 2. 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:3000

### 3. 构建生产版本

```bash
npm run build
```

构建输出到 `dist/` 目录

### 4. 预览生产构建

```bash
npm run preview
```

## ✨ 功能特性

### B 端获客核心功能
- ✅ **5 种询盘类型** - 询价/索样/预约回电/OEM/其他
- ✅ **快速询盘** - 简化表单，仅需邮箱即可询价
- ✅ **智能表单** - 从产品页自动传递产品信息
- ✅ **多种联系方式** - 表单/邮件/WhatsApp/电话
- ✅ **24 小时响应保证** - 提升客户信任度
- ✅ **后端集成指南** - EmailJS/Formspree/自建站/CRM

### 核心功能
- ✅ **响应式设计** - 完美适配桌面、平板、手机
- ✅ **TypeScript 类型安全** - 完整的类型定义
- ✅ **Vue Router 路由** - SPA 单页应用体验
- ✅ **Composition API** - 现代化的 Vue 3 写法
- ✅ **产品筛选** - 按类别过滤产品（香水/护肤/彩妆/护发）
- ✅ **产品详情弹窗** - 完整的产品信息展示（价格、MOQ、认证等）
- ✅ **12+ 产品数据** - 预置丰富的产品示例数据
- ✅ **动画效果** - 平滑过渡、hover 效果、模态框动画

### 页面路由
| 路由 | 页面 | 说明 |
|------|------|------|
| `/` | HomeView | 首页（英雄区、特色、产品预览） |
| `/products` | ProductsView | 产品列表（筛选、详情） |
| `/about` | AboutView | 关于我们（历程、团队、资质） |
| `/contact` | ContactView | 联系我们（表单、FAQ） |

## 🎨 自定义配置

### 修改品牌信息

编辑 `src/components/NavBar.vue` 和 `src/components/Footer.vue`：
- 公司名称
- Logo
- 联系信息

### 修改颜色主题

编辑 `src/assets/main.css` 中的 CSS 变量：

```css
:root {
  --primary-color: #0066cc;      /* 主色调 */
  --primary-dark: #004c99;       /* 主色深色 */
  --primary-light: #3399ff;      /* 主色浅色 */
  --secondary-color: #00cc99;    /* 辅助色 */
}
```

### 添加产品数据

编辑 `src/views/ProductsView.vue` 中的 `products` 数组：

```typescript
const products = ref<Product[]>([
  {
    id: 1,
    name: '产品名称',
    category: 'industrial',  // industrial | machinery | electronic
    description: '产品描述',
    specs: ['规格 1', '规格 2'],
    image: '📦'  // 或实际图片路径
  }
])
```

### 配置表单提交

编辑 `src/views/ContactView.vue` 中的 `handleSubmit` 函数：

```typescript
const handleSubmit = () => {
  if (validateForm()) {
    // 发送到你的后端 API
    fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify(form)
    })
  }
}
```

## 📱 浏览器兼容性

- ✅ Chrome (最新)
- ✅ Firefox (最新)
- ✅ Safari (最新)
- ✅ Edge (最新)
- ✅ 移动端浏览器

## 🔧 开发说明

### TypeScript 类型定义

所有数据类型定义在 `src/types/index.ts`：

```typescript
export interface Product {
  id: number
  name: string
  category: 'industrial' | 'machinery' | 'electronic'
  description: string
  specs: string[]
  image: string
}
```

### 组件通信

- 使用 `props` 传递数据给子组件
- 使用 `emits` 向父组件发送事件
- 使用 Vue Router 进行页面间导航

### 状态管理

当前项目使用 `ref` 和 `reactive` 进行本地状态管理。
如需全局状态，可添加 Pinia。

## 🚀 部署

### 静态托管

构建后的 `dist/` 目录可直接部署到：
- Vercel
- Netlify
- GitHub Pages
- 阿里云 OSS
- 腾讯云 COS

### Nginx 配置

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

## 📝 待办事项

部署前请完成：
- [ ] 替换所有占位图片为真实产品图
- [ ] 更新公司联系信息
- [ ] 配置表单提交后端 API
- [ ] 添加 favicon.ico
- [ ] 配置域名和 SSL 证书
- [ ] 添加 Google Analytics
- [ ] SEO 优化（meta 标签、sitemap）
- [ ] 多语言支持（i18n）

## 📄 许可证

MIT License

---

**祝您使用愉快！** 🎉