sctj-components 1.0.0

package/README.md

@@ -0,0 +1,1112 @@
+# SCTJ Components 组件库
+
+这是一个基于 Vue 3 + Element Plus 的组件库，包含了后台管理系统中常用的各种组件。
+
+## 📦 安装
+
+```bash
+npm install sctj-components
+# 或
+yarn add sctj-components
+# 或
+pnpm add sctj-components
+```
+
+## 🚀 快速开始
+
+### 第一步：安装必需依赖
+
+组件库使用 `peerDependencies` 管理依赖，需要手动安装以下依赖：
+
+```bash
+# 基础必需依赖
+npm install vue@^3.2.0 element-plus@^2.2.0 @element-plus/icons-vue@^2.0.0
+
+# 根据使用的组件选择性安装
+# 使用图表组件时
+npm install echarts@^5.0.0
+
+# 使用 3D/BIM 组件时
+npm install three@^0.150.0
+
+# 使用地图组件时
+npm install @amap/amap-jsapi-loader@^1.0.0
+
+# 使用 SCTJYsyPlayer 萤石云播放器组件时
+npm install ezuikit-js@^8.1.0
+```
+
+### 第二步：引入组件库
+
+#### 完整引入
+
+在 main.js 中引入组件库：
+
+```javascript
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import SctjComponents from 'sctj-components'
+// 引入组件库样式（如果构建后生成了 style.css）
+import 'sctj-components/lib/style.css'
+
+const app = createApp(App)
+app.use(ElementPlus)
+app.use(SctjComponents)
+app.mount('#app')
+```
+
+#### 按需引入
+
+组件名称均带前缀 `SCTJ`：
+```javascript
+import { SCTJDictTag, SCTJTable, SCTJSearch } from 'sctj-components'
+```
+
+模板中使用时可用 PascalCase 或 kebab-case：
+```vue
+<template>
+  <SCTJDictTag :options="dictOptions" :value="status" />
+  <sctj-table :data="tableData" />
+  <sctj-search :visible="visible" />
+</template>
+```
+
+## 📚 组件列表
+
+### 基础组件
+- `SCTJDictTag` - 字典标签
+- `SCTJTreeSelect` - 树形选择器
+- `SCTJSvgIcon` - SVG 图标组件
+
+### 表单组件
+- `SCTJFileUpload` - 文件上传
+- `SCTJImageUpload` - 图片上传
+- `SCTJImagePreview` - 图片预览
+- `SCTJIconSelect` - 图标选择器
+- `SCTJSearch` - 搜索组件
+- `SCTJDateRangePicker` - 日期范围选择器
+
+### 表格组件
+- `SCTJTable` - 表格组件
+- `SCTJTableContainer` - 表格容器（布局组件）
+- `SCTJTablePageContainer` - 表格页面容器
+- `SCTJTableTopActionContainer` - 表格顶部操作容器
+- `SCTJRightToolbar` - 右侧工具栏
+
+### 布局组件
+- `SCTJBtnContainer` - 按钮容器
+
+### 图表组件
+- `SCTJBaseChart` - 基础图表
+- `SCTJCommonChart` - 通用图表
+- `SCTJPieChart` - 饼图
+
+### 播放器组件
+- `SCTJFlvPlayer` - FLV 播放器
+- `SCTJH5hkPlayer` - H5 海康播放器
+- `SCTJHelmetPlayer` - 头盔播放器
+- `SCTJYsyPlayer` - 萤石云播放器
+
+### 其他组件
+- `SCTJIframe` - iframe 组件
+- `SCTJImportDialog` - 导入对话框
+- `SCTJDialogTable` - 对话框表格
+
+### 地图组件
+- `SCTJMapViewer` - 地图查看器
+- `SCTJMapDrawingDialog` - 地图绘制对话框
+- `SCTJBusinessMapDrawingDialog` - 业务地图绘制对话框
+
+### Bim组件
+- `SCTJBimViewer` - Bim 查看器
+- `SCTJDwgViewer` - DWG 查看器
+
+## 📝 使用示例
+
+### SCTJDictTag 字典标签
+
+```vue
+<template>
+  <SCTJDictTag :options="dictOptions" :value="status" />
+</template>
+
+<script setup>
+import { SCTJDictTag } from 'sctj-components'
+
+const dictOptions = [
+  { label: '启用', value: '1', elTagType: 'success' },
+  { label: '禁用', value: '0', elTagType: 'danger' }
+]
+const status = '1'
+</script>
+```
+
+### SCTJTreeSelect 树形选择器
+
+```vue
+<template>
+  <SCTJTreeSelect
+    v-model="selectedValue"
+    :options="treeData"
+    :obj-map="{ value: 'id', label: 'label', children: 'children' }"
+    placeholder="请选择"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJTreeSelect } from 'sctj-components'
+
+const selectedValue = ref('')
+const treeData = [
+  {
+    id: '1',
+    label: '一级',
+    children: [
+      { id: '1-1', label: '二级' }
+    ]
+  }
+]
+</script>
+```
+
+### SCTJTable 表格组件
+
+```vue
+<template>
+  <SCTJTable
+    :request="fetchTableData"
+    :request-params="queryParams"
+    row-key="id"
+    :show-select="true"
+    :show-index="true"
+    @selection-change="handleSelectionChange"
+  >
+    <el-table-column prop="name" label="姓名" />
+    <el-table-column prop="age" label="年龄" />
+    <el-table-column prop="email" label="邮箱" />
+  </SCTJTable>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJTable } from 'sctj-components'
+
+const queryParams = ref({ keyword: '' })
+
+// request 函数需要返回 Promise，格式: { total: number, rows: Array }
+const fetchTableData = async (params) => {
+  const response = await fetch('/api/users', {
+    method: 'POST',
+    body: JSON.stringify({
+      pageNum: params.pageNum,
+      pageSize: params.pageSize,
+      ...queryParams.value
+    })
+  })
+  return await response.json()
+}
+
+const handleSelectionChange = (selection) => {
+  console.log('选中的行:', selection)
+}
+</script>
+```
+
+### SCTJSearch 搜索组件
+
+```vue
+<template>
+  <SCTJSearch v-model:visible="showSearch">
+    <el-form :model="queryParams" :inline="true">
+      <el-form-item label="姓名">
+        <el-input v-model="queryParams.name" placeholder="请输入姓名" />
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-select v-model="queryParams.status" placeholder="请选择">
+          <el-option label="启用" value="1" />
+          <el-option label="禁用" value="0" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </SCTJSearch>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJSearch } from 'sctj-components'
+
+const showSearch = ref(true)
+const queryParams = ref({
+  name: '',
+  status: ''
+})
+</script>
+```
+
+### SCTJDateRangePicker 日期范围选择器
+
+```vue
+<template>
+  <SCTJDateRangePicker
+    v-model="dateRange"
+    value-format="YYYY-MM-DD"
+    @change="handleDateChange"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJDateRangePicker } from 'sctj-components'
+
+const dateRange = ref([])
+
+const handleDateChange = (val) => {
+  console.log('选择的日期范围:', val)
+}
+</script>
+```
+
+### SCTJH5hkPlayer 海康播放器
+
+> ⚠️ **前置准备**：使用此组件前，需要拷贝静态资源：
+> 1. 从 `node_modules/sctj-components/public/hkPlayerPlugin/` 目录（及其所有文件）拷贝到宿主项目的 `public/` 根目录
+> 2. 在宿主 `index.html` 中添加：`<script src="/hkPlayerPlugin/h5player.min.js" type="application/javascript"></script>`
+
+```vue
+<template>
+  <SCTJH5hkPlayer
+    :device-serial="deviceSerial"
+    :channel-no="channelNo"
+    :device-name="deviceName"
+    :channel-name="channelName"
+    :get-live-address="getLiveAddress"
+    :get-replay-address="getReplayAddress"
+    :download-certificate="downloadCertificate"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJH5hkPlayer } from 'sctj-components'
+
+const deviceSerial = ref('your-device-serial')
+const channelNo = ref('1')
+const deviceName = ref('摄像头名称')
+const channelName = ref('通道名称')
+
+// 获取实时播放地址的函数，需要返回 Promise<{ code: number, data: { url: string }, msg?: string }>
+const getLiveAddress = async (params) => {
+  const response = await fetch('/api/camera/live', {
+    method: 'POST',
+    body: JSON.stringify(params)
+  })
+  return await response.json()
+}
+
+// 获取回放地址的函数，需要返回 Promise<{ code: number, data: { url: string }, msg?: string }>
+const getReplayAddress = async (params) => {
+  const response = await fetch('/api/camera/replay', {
+    method: 'POST',
+    body: JSON.stringify(params)
+  })
+  return await response.json()
+}
+
+// 下载证书的函数，需要返回 Promise
+const downloadCertificate = async (deviceSerial) => {
+  const response = await fetch(`/api/camera/certificate/${deviceSerial}`, {
+    method: 'GET'
+  })
+  return await response.blob()
+}
+</script>
+```
+
+### SCTJHelmetPlayer 头盔播放器
+
+```vue
+<template>
+  <SCTJHelmetPlayer
+    :device-id="deviceId"
+    :call-api="callApi"
+    :handle-streaming-api="handleStreamingApi"
+    :query-admin-sip-info-api="queryAdminSipInfoApi"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJHelmetPlayer } from 'sctj-components'
+
+const deviceId = ref('your-device-id')
+
+// 发起通话的 API 函数，需要返回 Promise<{ status: boolean, sip_id?: string, msg?: string }>
+// 参数: { deviceId: string, v_type: number }
+const callApi = async (params) => {
+  const response = await fetch('/api/helmet/call', {
+    method: 'POST',
+    body: JSON.stringify(params)
+  })
+  return await response.json()
+}
+
+// 处理流媒体的 API 函数，需要返回 Promise<any>
+// 参数: { deviceId: string, isPush: number } (isPush: 1-开启, 0-停止)
+const handleStreamingApi = async (params) => {
+  const response = await fetch('/api/helmet/streaming', {
+    method: 'POST',
+    body: JSON.stringify(params)
+  })
+  return await response.json()
+}
+
+// 获取管理员 SIP 信息的 API 函数，需要返回 Promise<{ status: boolean, admin_info: { sip_info: any }, msg?: string }>
+const queryAdminSipInfoApi = async () => {
+  const response = await fetch('/api/helmet/sip-info')
+  return await response.json()
+}
+</script>
+```
+
+### SCTJYsyPlayer 萤石云播放器
+
+> ⚠️ **前置准备**：使用此组件前，需要安装依赖：
+> ```bash
+> npm install ezuikit-js@^8.1.0
+> ```
+
+```vue
+<template>
+  <SCTJYsyPlayer
+    :device-serial="deviceSerial"
+    :channel-no="channelNo"
+    :play-type="playType"
+    :start-time="startTime"
+    :end-time="endTime"
+    :get-ys-token="getYsToken"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJYsyPlayer } from 'sctj-components'
+
+const deviceSerial = ref('your-device-serial')
+const channelNo = ref(1)
+const playType = ref(0) // 0-直播, 1-回放
+const startTime = ref('2023-01-01 12:00:00')
+const endTime = ref('2023-01-01 13:00:00')
+
+// 获取 Token 的函数，需要返回 Promise<{ code: number, data: { accessToken: string, expireTime: number }, msg?: string }>
+const getYsToken = async () => {
+  const response = await fetch('/api/threeController/getYsToken', {
+    method: 'GET'
+  })
+  return await response.json()
+}
+</script>
+```
+
+### SCTJFileUpload 文件上传
+
+```vue
+<template>
+  <SCTJFileUpload
+    v-model="fileList"
+    :upload-file-url="'/api/upload'"
+    :limit="5"
+    :file-size="10"
+    :file-type="['docx', 'xlsx', 'pdf', 'png', 'jpg']"
+    :base-url="baseUrl"
+    :http-request="customUpload"
+    :response-config="{
+      code: 'code',
+      fileName: 'fileName',
+      fileUrl: 'url',
+      msg: 'msg'
+    }"
+    @success="handleUploadSuccess"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJFileUpload } from 'sctj-components'
+
+const fileList = ref('')
+const baseUrl = import.meta.env.VITE_APP_BASE_API // 可选，用于处理相对路径
+
+// 可选：自定义上传函数，如果不传则使用 el-upload 默认的 XHR 行为
+const customUpload = async (options) => {
+  const formData = new FormData()
+  formData.append('file', options.file)
+  const response = await fetch('/api/upload', {
+    method: 'POST',
+    body: formData
+  })
+  return await response.json()
+}
+
+const handleUploadSuccess = (response) => {
+  console.log('上传成功:', response)
+}
+</script>
+```
+
+### SCTJImageUpload 图片上传
+
+```vue
+<template>
+  <SCTJImageUpload
+    v-model="imageList"
+    :upload-img-url="'/api/upload/image'"
+    :limit="3"
+    :file-size="5"
+    :file-type="['png', 'jpg', 'jpeg']"
+    :base-url="baseUrl"
+    :http-request="customUpload"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJImageUpload } from 'sctj-components'
+
+const imageList = ref([])
+const baseUrl = import.meta.env.VITE_APP_BASE_API
+
+// 可选：自定义上传函数
+const customUpload = async (options) => {
+  // 自定义上传逻辑
+}
+</script>
+```
+
+### SCTJImagePreview 图片预览
+
+```vue
+<template>
+  <SCTJImagePreview
+    :value="imageUrl"
+    :width="100"
+    :height="100"
+    :base-url="baseUrl"
+    :enable-delete="true"
+  />
+</template>
+
+<script setup>
+import { SCTJImagePreview } from 'sctj-components'
+
+const imageUrl = 'image1.jpg,image2.jpg,image3.jpg' // 多张图片用逗号分隔
+const baseUrl = import.meta.env.VITE_APP_BASE_API
+</script>
+```
+
+### SCTJIconSelect 图标选择器
+
+```vue
+<template>
+  <el-dialog v-model="dialogVisible" title="选择图标">
+    <SCTJIconSelect @selected="handleIconSelected" />
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJIconSelect } from 'sctj-components'
+
+const dialogVisible = ref(false)
+const selectedIcon = ref('')
+
+const handleIconSelected = (iconName) => {
+  selectedIcon.value = iconName
+  dialogVisible.value = false
+  console.log('选中的图标:', iconName)
+}
+</script>
+```
+
+### SCTJSvgIcon SVG 图标
+
+```vue
+<template>
+  <SCTJSvgIcon icon-class="user" :color="'#409EFF'" />
+</template>
+
+<script setup>
+import { SCTJSvgIcon } from 'sctj-components'
+</script>
+```
+
+### SCTJTableContainer 表格容器
+
+```vue
+<template>
+  <SCTJTableContainer>
+    <SCTJTableTopActionContainer
+      v-model:show-search="showSearch"
+      :show-refresh="true"
+      @refresh="handleRefresh"
+    >
+      <template #left>
+        <el-button type="primary" @click="handleAdd">新增</el-button>
+      </template>
+    </SCTJTableTopActionContainer>
+    
+    <SCTJSearch v-model:visible="showSearch">
+      <!-- 搜索表单内容 -->
+    </SCTJSearch>
+    
+    <SCTJTable :request="fetchData" />
+  </SCTJTableContainer>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { 
+  SCTJTableContainer, 
+  SCTJTableTopActionContainer,
+  SCTJSearch,
+  SCTJTable 
+} from 'sctj-components'
+
+const showSearch = ref(true)
+
+const handleRefresh = () => {
+  // 刷新表格数据
+}
+
+const handleAdd = () => {
+  // 新增逻辑
+}
+
+const fetchData = async (params) => {
+  // 获取表格数据
+}
+</script>
+```
+
+### SCTJRightToolbar 右侧工具栏
+
+```vue
+<template>
+  <SCTJRightToolbar
+    v-model:show-search="showSearch"
+    :columns="columns"
+    :show-refresh="true"
+    @query-table="handleQuery"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJRightToolbar } from 'sctj-components'
+
+const showSearch = ref(true)
+const columns = ref([
+  { key: 0, label: '姓名', visible: true },
+  { key: 1, label: '年龄', visible: true },
+  { key: 2, label: '邮箱', visible: false }
+])
+
+const handleQuery = () => {
+  // 查询表格数据
+}
+</script>
+```
+
+### SCTJBtnContainer 按钮容器
+
+```vue
+<template>
+  <SCTJBtnContainer>
+    <el-button type="primary">按钮1</el-button>
+    <el-button type="success">按钮2</el-button>
+    <el-button type="warning">按钮3</el-button>
+  </SCTJBtnContainer>
+</template>
+
+<script setup>
+import { SCTJBtnContainer } from 'sctj-components'
+</script>
+```
+
+### SCTJBaseChart 基础图表
+
+```vue
+<template>
+  <SCTJBaseChart
+    :option="chartOption"
+    width="100%"
+    height="400px"
+    @chart-click="handleChartClick"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJBaseChart } from 'sctj-components'
+
+const chartOption = ref({
+  title: { text: '示例图表' },
+  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
+  yAxis: { type: 'value' },
+  series: [{ data: [120, 200, 150], type: 'bar' }]
+})
+
+const handleChartClick = (params) => {
+  console.log('图表点击:', params)
+}
+</script>
+```
+
+### SCTJCommonChart 通用图表
+
+```vue
+<template>
+  <SCTJCommonChart
+    :data="chartData"
+    :series-config="seriesConfig"
+    category-name="name"
+    title="销售统计"
+    :height="'400px'"
+    :loading="loading"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJCommonChart } from 'sctj-components'
+
+const loading = ref(false)
+const chartData = ref([
+  { name: '一月', value: 100 },
+  { name: '二月', value: 200 },
+  { name: '三月', value: 150 }
+])
+
+const seriesConfig = ref([
+  {
+    name: '销售额',
+    type: 'bar',
+    dataKey: 'value'
+  }
+])
+</script>
+```
+
+### SCTJPieChart 饼图
+
+```vue
+<template>
+  <SCTJPieChart
+    title="数据分布"
+    :data="pieData"
+    type="pie"
+    :center="['50%', '50%']"
+    :radius="['0%', '70%']"
+    :show-center-text="true"
+    :height="'400px'"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJPieChart } from 'sctj-components'
+
+const pieData = ref([
+  { name: '类型A', value: 335 },
+  { name: '类型B', value: 310 },
+  { name: '类型C', value: 234 }
+])
+</script>
+```
+
+### SCTJFlvPlayer FLV 播放器
+
+```vue
+<template>
+  <SCTJFlvPlayer
+    :src="flvUrl"
+    :player-id="'flv-player-1'"
+    :autoplay="true"
+    :controls="true"
+    :is-live="true"
+    :max-retries="3"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJFlvPlayer } from 'sctj-components'
+
+const flvUrl = ref('https://example.com/video.flv')
+</script>
+```
+
+### SCTJBimViewer Bim 查看器
+
+> ⚠️ **前置准备**：使用此组件前，需要拷贝静态资源：
+> 1. 从 `node_modules/sctj-components/public/BimfaceSDKLoader@latest-release.js` 文件拷贝到宿主项目的 `public/` 根目录
+> 2. 在宿主 `index.html` 中添加：`<script src="/BimfaceSDKLoader@latest-release.js" type="application/javascript" charset="utf-8"></script>`
+
+```vue
+<template>
+  <SCTJBimViewer
+    :view-token="viewToken"
+    :extra-context-menu="contextMenu"
+    @context-menu-click="handleContextMenuClick"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJBimViewer } from 'sctj-components'
+
+const viewToken = ref('your-view-token')
+const contextMenu = ref([
+  {
+    label: '其他',
+    key: 'extraOther',
+    children: [
+      { label: '添加养护', key: 'addMaintain' },
+      { label: '养护记录', key: 'maintainRecord' }
+    ]
+  }
+])
+
+const handleContextMenuClick = (key) => {
+  console.log('点击了菜单项:', key)
+}
+</script>
+```
+
+### SCTJDwgViewer DWG 查看器
+
+```vue
+<template>
+  <SCTJDwgViewer
+    :view-token="viewToken"
+    :extra-context-menu="contextMenu"
+    @context-menu-click="handleContextMenuClick"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJDwgViewer } from 'sctj-components'
+
+const viewToken = ref('your-view-token')
+const contextMenu = ref([
+  {
+    label: '其他',
+    key: 'extraOther',
+    children: [
+      { label: '添加养护', key: 'addMaintain' },
+      { label: '养护记录', key: 'maintainRecord' }
+    ]
+  }
+])
+
+const handleContextMenuClick = (key) => {
+  console.log('点击了菜单项:', key)
+}
+</script>
+```
+
+### SCTJIframe iframe 组件
+
+```vue
+<template>
+  <SCTJIframe :src="iframeUrl" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJIframe } from 'sctj-components'
+
+const iframeUrl = ref('https://example.com')
+</script>
+```
+
+### SCTJImportDialog 导入对话框
+
+```vue
+<template>
+  <el-button @click="dialogVisible = true">导入数据</el-button>
+  <SCTJImportDialog
+    v-model:open="dialogVisible"
+    title="用户"
+    :upload-url="'/api/import/users'"
+    :template-title="'用户导入模板'"
+    :template-url="'/api/import/template/users'"
+    :show-check-box="true"
+    @success="handleImportSuccess"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJImportDialog } from 'sctj-components'
+
+const dialogVisible = ref(false)
+
+const handleImportSuccess = (response) => {
+  console.log('导入成功:', response)
+  dialogVisible.value = false
+}
+</script>
+```
+
+### SCTJDialogTable 对话框表格
+
+```vue
+<template>
+  <el-button @click="dialogVisible = true">选择数据</el-button>
+  <SCTJDialogTable
+    v-model:open="dialogVisible"
+    title="选择用户"
+    :columns="columns"
+    :request="fetchUsers"
+    :select-options="{
+      show: true,
+      multiple: true,
+      valueKey: 'id',
+      reserveSelection: true
+    }"
+    :query-columns="queryColumns"
+    @confirm="handleConfirm"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJDialogTable } from 'sctj-components'
+
+const dialogVisible = ref(false)
+
+const columns = ref([
+  { prop: 'name', label: '姓名' },
+  { prop: 'age', label: '年龄' },
+  { prop: 'email', label: '邮箱' }
+])
+
+const queryColumns = ref([
+  {
+    prop: 'name',
+    label: '姓名',
+    query: {
+      type: 'input',
+      queryKey: 'name',
+      placeholder: '请输入姓名'
+    }
+  }
+])
+
+const fetchUsers = async (params) => {
+  const response = await fetch('/api/users', {
+    method: 'POST',
+    body: JSON.stringify(params)
+  })
+  return await response.json()
+}
+
+const handleConfirm = (selectedRows) => {
+  console.log('选中的行:', selectedRows)
+  dialogVisible.value = false
+}
+</script>
+```
+
+### SCTJMapViewer 地图查看器
+
+```vue
+<template>
+  <SCTJMapViewer
+    :height="'600px'"
+    :width="'100%'"
+    :center="[116.397428, 39.90923]"
+    :static-markers="staticMarkers"
+    :dynamic-markers="dynamicMarkers"
+    :polylines="polylines"
+    :polygons="polygons"
+    :legend-config="legendConfig"
+    :change-map-type="true"
+    @marker-click="handleMarkerClick"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJMapViewer } from 'sctj-components'
+
+const staticMarkers = ref([
+  {
+    position: [116.397428, 39.90923],
+    title: '标记点1',
+    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
+  }
+])
+
+const dynamicMarkers = ref([
+  {
+    id: '1',
+    position: [116.407428, 39.91923],
+    title: '动态标记点',
+    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'
+  }
+])
+
+const polylines = ref([
+  {
+    path: [
+      [116.397428, 39.90923],
+      [116.407428, 39.91923]
+    ],
+    strokeColor: '#3366FF',
+    strokeWeight: 3
+  }
+])
+
+const polygons = ref([
+  {
+    path: [
+      [116.397428, 39.90923],
+      [116.407428, 39.91923],
+      [116.417428, 39.92923]
+    ],
+    fillColor: '#FF0000',
+    strokeColor: '#0000FF',
+    strokeWeight: 2
+  }
+])
+
+const legendConfig = ref([
+  { label: '类型A', value: 'typeA' },
+  { label: '类型B', value: 'typeB' }
+])
+
+const handleMarkerClick = (marker) => {
+  console.log('点击了标记点:', marker)
+}
+</script>
+```
+
+### SCTJMapDrawingDialog 地图绘制对话框
+
+```vue
+<template>
+  <el-button @click="dialogVisible = true">绘制地图</el-button>
+  <SCTJMapDrawingDialog
+    v-model:open="dialogVisible"
+    title="绘制区域"
+    @confirm="handleConfirm"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJMapDrawingDialog } from 'sctj-components'
+
+const dialogVisible = ref(false)
+
+const handleConfirm = (drawingData) => {
+  console.log('绘制的数据:', drawingData)
+  dialogVisible.value = false
+}
+</script>
+```
+
+### SCTJBusinessMapDrawingDialog 业务地图绘制对话框
+
+```vue
+<template>
+  <el-button @click="dialogVisible = true">业务绘制</el-button>
+  <SCTJBusinessMapDrawingDialog
+    v-model:open="dialogVisible"
+    title="业务区域绘制"
+    @confirm="handleConfirm"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { SCTJBusinessMapDrawingDialog } from 'sctj-components'
+
+const dialogVisible = ref(false)
+
+const handleConfirm = (drawingData) => {
+  console.log('业务绘制数据:', drawingData)
+  dialogVisible.value = false
+}
+</script>
+```
+
+## ⚠️ 注意事项
+
+### 1. 组件特殊依赖说明
+
+部分组件需要通过 props 传入业务 API 函数：
+
+- **SCTJH5hkPlayer**：需要传入 `getLiveAddress`、`getReplayAddress`、`downloadCertificate` 函数
+- **SCTJHelmetPlayer**：需要传入 `callApi`、`handleStreamingApi`、`queryAdminSipInfoApi` 函数
+- **SCTJYsyPlayer**：需要传入 `getYsToken` 函数
+- **SCTJFileUpload、SCTJImageUpload、SCTJImagePreview**：可选传入 `baseUrl` prop 处理相对路径
+
+### 2. 样式
+
+需要引入 Element Plus 的样式文件：
+```javascript
+import 'element-plus/dist/index.css'
+```
+
+### 3. 按需引入
+
+推荐使用按需引入以减少打包体积。
+
+### 4. TypeScript
+
+如果需要 TypeScript 支持，需要额外配置类型声明文件。
+
+## 🔧 常见问题
+
+### 1. 组件无法正常工作
+
+**原因**：缺少必要的依赖或配置
+
+**解决**：
+- 检查组件依赖的工具函数
+- 确保使用者安装了所有 peerDependencies
+- 查看组件的使用文档
+
+### 2. 播放器组件报错
+
+**原因**：未提供必需的 API 函数
+
+**解决**：
+- 确保通过 props 传入了所有必需的 API 函数
+- 检查 API 函数的返回格式是否正确
+
+### 3. 静态资源加载失败
+
+**原因**：未正确拷贝静态资源文件
+
+**解决**：
+- 确保已将 `public/` 目录下的文件拷贝到宿主项目
+- 检查 `index.html` 中的 script 标签路径是否正确
+
+## 📚 更多信息
+
+- 详细发布指南：查看 `PUBLISH_GUIDE.md`（仅限组件库维护者）
+
+## 📄 许可证
+
+MIT
+
+## 👥 作者
+
+铁建
+