xlqx/README.md

# 小鹿骑行 - 共享电动车系统官网

这是一个基于 Nuxt 4 开发的官网项目，展示创特物联科技的 OEM 电动车共享系统解决方案。

## 项目简介

本项目是创特物联科技（福鼎）有限公司的官方网站，主要展示公司提供的共享电动车系统解决方案，包括客户端/商户端小程序、智能中控硬件及管理系统等服务内容。

## 技术栈

- **框架**: Nuxt 4
- **UI 组件库**: @nuxt/ui (基于 Tailwind CSS)
- **地图服务**: 高德地图 (AMap)
- **语言**: TypeScript
- **包管理工具**: pnpm

## 项目结构

```
bike/
├── app/
│   ├── components/        # 组件目录
│   │   ├── AMapComponent.vue      # 高德地图组件
│   │   ├── AppHeader.vue          # 页面头部组件
│   │   ├── AppFooter.vue          # 页面底部组件
│   │   ├── ScrollToTop.vue        # 返回顶部组件
│   │   └── ...
│   ├── config/            # 配置文件目录
│   │   ├── api.ts         # API 接口配置
│   │   └── amap.ts        # 高德地图配置
│   ├── pages/             # 页面目录
│   │   └── index/         # 首页
│   ├── layouts/           # 布局文件
│   └── assets/            # 静态资源
├── public/                # 公共静态文件
└── nuxt.config.ts         # Nuxt 配置文件
```

## 功能说明

### 1. 首页轮播图功能

**功能描述**: 首页顶部轮播图从后端 API 动态获取图片数据。

**API 接口**: 
- **地址**: `https://ele.ccttiot.com/prod-api/app/owBanner/list`
- **方法**: GET
- **返回格式**: 
```json
{
  "msg": "操作成功",
  "code": 200,
  "data": [
    {
      "id": "7",
      "imgUrl": "https://api.ccttiot.com/index23-1760143682052.png",
      "status": "1",
      "orderNum": "100",
      ...
    }
  ]
}
```

**实现位置**:
- **API 配置**: `app/config/api.ts` - 定义了 `getBannerList()` 函数
- **页面使用**: `app/pages/index/index.vue` - 首页中调用并显示轮播图

**功能特点**:
- 自动过滤启用的轮播图（status === '1'）
- 按 orderNum 降序排列（数字越大越靠前）
- 加载状态显示
- 错误处理：API 请求失败时显示默认图片
- 空数据时显示默认横幅图片

**使用方法**:
```typescript
import { getBannerList } from '~/config/api'

// 获取轮播图列表
const banners = await getBannerList()
// 返回已过滤和排序的轮播图数组
```

### 2. 高德地图组件

**功能描述**: 在首页展示公司位置的高德地图，包含自定义标记点。

**配置文件**: `app/config/amap.ts`
- 配置高德地图 API Key 和安全密钥
- 提供地图脚本 URL 生成函数

**组件使用**: `app/components/AMapComponent.vue`
- 支持 2D/3D 视图切换
- 支持自定义标记点
- 支持地图事件监听

### 3. 服务保障展示

首页展示三个服务保障模块：
- 协助维权
- 虚假赔偿
- 欺诈赔偿

### 4. 联系信息展示

展示公司联系方式：
- 电话：15280659990
- 邮箱：564737095@qq.com
- 地址：福建省福鼎市太姥山镇海埕路13号
- 工作时间：周一至周六 (8:30-12:00 13:30-18:00)

## 安装和运行

### 前置要求

- Node.js 18+ 
- pnpm (推荐) 或 npm/yarn/bun

### 安装依赖

```bash
# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install

# 或使用 yarn
yarn install

# 或使用 bun
bun install
```

### 开发服务器

启动开发服务器（默认端口 3008）：

```bash
# 使用 pnpm
pnpm dev

# 或使用 npm
npm run dev

# 或使用 yarn
yarn dev

# 或使用 bun
bun run dev
```

开发服务器将在 `http://localhost:3008` 启动。

### 构建生产版本

```bash
# 使用 pnpm
pnpm build

# 或使用 npm
npm run build

# 或使用 yarn
yarn build

# 或使用 bun
bun run build
```

### 预览生产构建

```bash
# 使用 pnpm
pnpm preview

# 或使用 npm
npm run preview

# 或使用 yarn
yarn preview

# 或使用 bun
bun run preview
```

## 配置说明

### API 配置

在 `app/config/api.ts` 中可以配置：
- **API_BASE_URL**: API 基础地址（默认：`https://ele.ccttiot.com/prod-api`）

### 高德地图配置

在 `app/config/amap.ts` 中需要配置：
- **AMAP_KEY**: 高德地图 API Key
- **AMAP_SECURITY_KEY**: 高德地图安全密钥

## 项目特点

1. **响应式设计**: 使用 Tailwind CSS 实现完全响应式布局
2. **SEO 优化**: 首页包含完整的 SEO meta 标签和结构化数据
3. **错误处理**: API 请求包含完善的错误处理机制
4. **类型安全**: 使用 TypeScript 确保代码类型安全
5. **组件化**: 功能模块化，便于维护和扩展

## 开发注意事项

1. **API 接口**: 确保后端 API 服务正常运行，轮播图功能才能正常工作
2. **地图配置**: 使用高德地图功能前，需要在配置文件中设置正确的 API Key
3. **图片资源**: 部分静态图片位于 `public/img/` 目录下
4. **环境变量**: 如需在不同环境使用不同配置，建议使用环境变量

## 待改进项

1. 考虑将 API 配置迁移到环境变量
2. 添加图片懒加载优化
3. 考虑添加轮播图缓存机制
4. 完善错误日志记录
5. 添加单元测试

## 部署

请参考 [Nuxt 部署文档](https://nuxt.com/docs/getting-started/deployment) 了解更多部署选项。

---

**开发公司**: 创特物联科技（福鼎）有限公司  
**联系电话**: 15280659990  
**联系邮箱**: 564737095@qq.com