添加左上角logo

2025-11-03 13:49:07 +08:00 · 2025-11-03 13:49:07 +08:00 · 1a19afdce2
commit 1a19afdce2
parent 08ac441870
4 changed files with 194 additions and 43 deletions
--- a/README.md
+++ b/README.md
@ -1,75 +1,232 @@
-# Nuxt Minimal Starter
+# 小鹿骑行 - 共享电动车系统官网

-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+这是一个基于 Nuxt 4 开发的官网项目，展示创特物联科技的 OEM 电动车共享系统解决方案。

-## Setup
+## 项目简介

-Make sure to install dependencies:
+本项目是创特物联科技（福鼎）有限公司的官方网站，主要展示公司提供的共享电动车系统解决方案，包括客户端/商户端小程序、智能中控硬件及管理系统等服务内容。
+
+## 技术栈
+
+- **框架**: 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
-# npm
-npm install
-
-# pnpm
+# 使用 pnpm (推荐)
 pnpm install

-# yarn
+# 或使用 npm
+npm install
+
+# 或使用 yarn
 yarn install

-# bun
+# 或使用 bun
 bun install
 ```

-## Development Server
+### 开发服务器

-Start the development server on `http://localhost:3000`:
+启动开发服务器（默认端口 3008）：

 ```bash
-# npm
-npm run dev
-
-# pnpm
+# 使用 pnpm
 pnpm dev

-# yarn
+# 或使用 npm
+npm run dev
+
+# 或使用 yarn
 yarn dev

-# bun
+# 或使用 bun
 bun run dev
 ```

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

-Build the application for production:
+### 构建生产版本

 ```bash
-# npm
-npm run build
-
-# pnpm
+# 使用 pnpm
 pnpm build

-# yarn
+# 或使用 npm
+npm run build
+
+# 或使用 yarn
 yarn build

-# bun
+# 或使用 bun
 bun run build
 ```

-Locally preview production build:
+### 预览生产构建

 ```bash
-# npm
-npm run preview
-
-# pnpm
+# 使用 pnpm
 pnpm preview

-# yarn
+# 或使用 npm
+npm run preview
+
+# 或使用 yarn
 yarn preview

-# bun
+# 或使用 bun
 bun run preview
 ```

-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+## 配置说明
+
+### 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
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@ -25,7 +25,9 @@
      :ui="{root:'fixed right-0 left-0 h-8 lg:h-16'}">
    <!-- 标题部分 -->
    <template #title>
-      <view class="h-6 w-auto text-primary">
+
+      <view class="h-6 w-auto text-primary flex items-center gap-1">
+        <img src="https://api.ccttiot.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250429085112-1757670595288.png" alt="" class="w-6 h-6 object-cover">
        小鹿骑行
      </view>
    </template>
--- a/app/components/ScrollToTop.vue
+++ b/app/components/ScrollToTop.vue
@ -15,16 +15,13 @@
    </button>
  </Transition>
 </template>
-
 <script lang="ts" setup>
 // 响应式状态
 const showScrollToTop = ref(false)
-
 // 滚动监听函数
 const handleScroll = () => {
  showScrollToTop.value = window.scrollY > 300
 }
-
 // 滚动到顶部函数
 const scrollToTop = () => {
  window.scrollTo({
--- a/app/pages/article/[id].vue
+++ b/app/pages/article/[id].vue
@ -16,7 +16,6 @@ const formatTime = (timeString: string): string => {
  if (!timeString) return ''
  const date = new Date(timeString)
  if (isNaN(date.getTime())) return timeString
-  
  const Y = date.getFullYear()
  const M = String(date.getMonth() + 1).padStart(2, '0')
  const D = String(date.getDate()).padStart(2, '0')
@ -31,10 +30,8 @@ const fetchArticleDetail = async (): Promise<void> => {
    error.value = '文章ID不存在'
    return
  }
-
  loading.value = true
  error.value = ''
-
  try {
    const data = await getArticleDetail(articleId)
    if (data) {
@ -113,8 +110,6 @@ onMounted(() => {
            暂无内容
          </div>
        </article>
-
-
      </div>
    </UPageBody>
  </UPage>