# nuxtmodules

**Repository Path**: zzh-company/nuxtmodules

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-26
- **Last Updated**: 2025-11-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @ys_front/core - 生态警务智慧平台核心模块

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

一个功能丰富的Nuxt.js核心模块，为生态警务智慧平台提供完整的解决方案。

- [✨  更新日志](/CHANGELOG.md)

## 🚀 主要功能

### 核心功能
- 🎯 **全局配置管理** - 统一的配置系统，支持多环境配置
- 🎨 **UI组件库集成** - 集成Ant Design Vue和Vant移动端组件库
- 📱 **响应式设计** - 支持PC端和移动端自适应
- 🔧 **插件系统** - 模块化的插件架构，易于扩展

### 视频播放功能
- 🎥 **H5播放器** - 基于WebRTC的H.265视频播放器
- 🎬 **插件播放器** - 支持多种视频格式的插件播放器
- 📺 **回放功能** - 完整的视频回放和录制功能
- 🎮 **播放控制** - 丰富的播放控制选项

### 地图功能
- 🗺️ **3D地图引擎** - 基于Cesium的3D地图渲染
- 🛰️ **Mars3D集成** - 集成Mars3D地图框架
- 📍 **地理定位** - 支持GPS定位和坐标转换
- 🎯 **图层管理** - 支持KML、SHP等多种图层格式

### 微信集成
- 📱 **微信JS-SDK** - 完整的微信JS-SDK封装
- 🔐 **签名验证** - 自动处理微信签名验证
- 📤 **分享功能** - 支持微信分享和朋友圈分享
- 📷 **扫码功能** - 集成微信扫码功能

### 构建优化
- 📦 **自动打包** - 构建完成后自动创建ZIP压缩包
- 🧹 **文件清理** - 自动清理构建目录中的冗余文件
- ⚡ **性能优化** - 智能文件复制和缓存机制
- 🔄 **增量更新** - 支持增量文件更新，提升构建速度

## 📦 安装

```bash
npm install @ys_front/core
```

## ⚙️ 配置

在 `nuxt.config.ts` 中添加模块配置：

```typescript
export default defineNuxtConfig({
  modules: [
    '@ys_front/core'
  ],
  ysCoreConfig: {
    // 播放器配置
    player: {
      open: true,
      mode: 'h5', // 'h5' | 'plugin'
      appKey: 'your-app-key',
      appSecret: 'your-app-secret',
      port: 8080,
      protocol: 'http',
      ip: 'localhost',
      autoIp: true
    },
    
    // 微信配置
    wx: {
      open: true,
      appId: 'your-wechat-app-id',
      appSecret: 'your-wechat-app-secret'
    },
    
    // 地图配置
    map: {
      open: true,
      lazyLoad: false, // 是否懒加载地图资源
      kml: true,       // 支持KML格式
      shp: true        // 支持SHP格式
    },
    
    // PC端配置
    pc: {
      open: true
    },
    
    // 移动端配置
    h5: true,
    
    // 可视化弹窗配置
    visualDialog: {
      open: true,
      background: 'linear-gradient(135deg, #0a2a4a 0%, #1a3a5a 100%)',
      prefixCls: 'visual-dialog'
    },
    
    // 构建配置
    zip: {
      open: true,
      indexName: 'index.html',
      deleteOldZips: true,
      deleteBuildDir: false,
      singlePage: false,
      cleanHtmlFiles: true
    }
  }
})
```

## 🎯 使用方法

### 全局弹窗

```vue
<template>
  <div>
    <button @click="showInfo">显示信息弹窗</button>
    <button @click="showConfirm">显示确认弹窗</button>
  </div>
</template>

<script setup>
const { $globalDialog, $visualDialog } = useNuxtApp()

const showInfo = () => {
  $globalDialog.info('这是一条信息提示')
}

const showConfirm = () => {
  $globalDialog.confirm('确认删除吗？', {}, {
    onOk: () => {
      console.log('用户确认')
    }
  })
}
</script>
```

### 视频播放器

```vue
<template>
  <div>
    <!-- H5播放器 -->
    <CustomPlay 
      v-if="playerMode === 'h5'"
      :stream-url="streamUrl"
      :options="playerOptions"
    />
    
    <!-- 插件播放器 -->
    <CustomPlay 
      v-else
      :stream-url="streamUrl"
      :options="playerOptions"
    />
  </div>
</template>

<script setup>
const { $appConfig } = useNuxtApp()
const playerMode = $appConfig.player?.mode || 'plugin'
const streamUrl = 'rtsp://example.com/stream'
const playerOptions = {
  autoplay: true,
  controls: true
}
</script>
```

### 地图组件

```vue
<template>
  <div style="height: 500px;">
    <Map 
      :center="mapCenter"
      :zoom="mapZoom"
      :layers="mapLayers"
    />
  </div>
</template>

<script setup>
const mapCenter = [116.397428, 39.90923]
const mapZoom = 12
const mapLayers = [
  {
    type: 'kml',
    url: 'path/to/layer.kml'
  }
]
</script>
```

### 微信功能

```javascript
// 在组件中使用微信功能
const { $wx } = useNuxtApp()

// 分享到微信
$wx.updateAppMessageShareData({
  title: '分享标题',
  desc: '分享描述',
  link: '分享链接',
  imgUrl: '分享图片'
})

// 获取位置
$wx.getLocation({
  type: 'gcj02',
  success: (res) => {
    console.log('位置信息:', res)
  }
})
```

## 🔌 插件系统

### 已集成的插件

1. **glob.plugin.js** - 全局配置管理
   - 解析URL查询参数
   - 构建应用配置对象
   - 提供全局配置访问

2. **dialog.plugin.js** - 弹窗系统
   - 全局弹窗管理
   - 支持多种弹窗类型
   - 可视化主题配置

3. **axios.plugin.js** - HTTP请求
   - 基于axios的HTTP客户端
   - 请求拦截和响应拦截
   - 错误处理和重试机制

4. **artemis.plugin.js** - Artemis API
   - Artemis服务集成
   - 认证和授权
   - API请求封装

5. **wx.plugin.js** - 微信SDK
   - 微信JS-SDK封装
   - 签名验证
   - 微信API调用

6. **h5player.plugin.js** - H5播放器
   - H.265视频播放
   - WebRTC支持
   - 播放控制

7. **webplayer.plugin.js** - 插件播放器
   - 多种视频格式支持
   - 插件播放器集成
   - 回放功能

8. **map.plugin.js** - 地图组件
   - Cesium 3D地图
   - Mars3D集成
   - 图层管理

9. **pc.plugin.js** - PC端组件
   - Ant Design Vue集成
   - PC端UI组件

10. **app.plugin.js** - 移动端组件
    - Vant组件库集成
    - 移动端UI组件

## 🛠️ 开发

### 本地开发

```bash
# 安装依赖
npm install

# 生成类型存根
npm run dev:prepare

# 启动开发环境
npm run dev

# 构建测试
npm run dev:build

# 运行测试
npm run test

# 发布新版本
npm run build:prod
```

### 构建流程

1. **文件复制** - 自动复制静态资源文件
2. **插件注册** - 根据配置注册相应插件
3. **页面扩展** - 添加内置页面路由
4. **HTML清理** - 清理构建目录中的冗余HTML文件
5. **ZIP打包** - 创建部署压缩包

## 📁 项目结构

```
src/
├── module.ts              # 模块主文件
├── runtime/
│   ├── plugins/           # 插件目录
│   │   ├── app.plugin.js      # 移动端组件
│   │   ├── artemis.plugin.js  # Artemis API
│   │   ├── axios.plugin.js    # HTTP请求
│   │   ├── dialog.plugin.js   # 弹窗系统
│   │   ├── glob.plugin.js     # 全局配置
│   │   ├── h5player.plugin.js # H5播放器
│   │   ├── map.plugin.js      # 地图组件
│   │   ├── pc.plugin.js       # PC端组件
│   │   ├── webplayer.plugin.js # 插件播放器
│   │   └── wx.plugin.js       # 微信SDK
│   ├── pages/             # 内置页面
│   ├── components/        # 组件目录
│   └── static/           # 静态资源
└── test/                 # 测试文件
```

## 🔧 配置选项

### player 配置
- `open`: 是否启用播放器功能
- `mode`: 播放器模式 ('h5' | 'plugin')
- `appKey`: 应用密钥
- `appSecret`: 应用密钥
- `port`: 服务端口
- `protocol`: 协议类型
- `ip`: 服务器IP
- `autoIp`: 是否自动获取IP

### wx 配置
- `open`: 是否启用微信功能
- `appId`: 微信应用ID
- `appSecret`: 微信应用密钥

### map 配置
- `open`: 是否启用地图功能
- `lazyLoad`: 是否懒加载地图资源
- `kml`: 是否支持KML格式
- `shp`: 是否支持SHP格式

### zip 配置
- `open`: 是否启用ZIP打包
- `indexName`: 主页面文件名
- `deleteOldZips`: 是否删除旧的ZIP文件
- `deleteBuildDir`: 是否删除构建目录
- `singlePage`: 是否为单页面应用
- `cleanHtmlFiles`: 是否清理HTML文件

## 📄 许可证

MIT License

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@ys_front/core/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/@ys_front/core

[npm-downloads-src]: https://img.shields.io/npm/dm/@ys_front/core.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/@ys_front/core

[license-src]: https://img.shields.io/npm/l/@ys_front/core.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/@ys_front/core

[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com