EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/.trae/documents/upload-sdk-split-env.md

# 上传功能按环境拆分：本地用 van-uploader，生产强制现场拍摄/录制

## Context（背景）

[NosDetailMaterialsTab.vue](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/nos/components/NosDetailMaterialsTab.vue) 第 48-63 行使用单个 `van-uploader` 同时处理图片/视频/PDF。生产环境（beeworks 容器/深 i 企）内合规要求：**线上不能用相册的图片和视频，必须是现场拍摄和录制**，且**拍照必须带水印与经纬度**。

按环境拆分上传入口：

- **开发环境（dev）**：保留现有 `van-uploader` 不变（支持图片/视频/PDF）。
- **生产环境（prod）**：只允许两种方式，均来自设备现场采集：
  1. **拍照** → [`w6s.image.takePhotoAndAddWaterMark`](https://open.beeworks.cn/js-sdk/image.html#%E5%9B%BE%E7%89%87%E6%B7%BB%E5%8A%A0%E6%B0%B4%E5%8D%B0)（`timeEnable: true, locationEnable: true` 自动叠加时间戳与经纬度水印）
  2. **录制视频** → [`w6s.video.startVideoRecoder`](https://open.beeworks.cn/js-sdk/video.html#%E8%A7%86%E9%A2%91%E5%BD%95%E5%88%B6)
  3. 上传到后端 → [`w6s.file.upload`](https://open.beeworks.cn/js-sdk/file.html#%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0)（原生 FileTransfer，直接传本地路径，无需 base64 转换）
  4. 经纬度获取（可选） → [`w6s.location.getLocation`](https://open.beeworks.cn/js-sdk/location.html)

> **关键约束**：生产环境**不提供**相册选择、文件选择器入口，避免用户上传已有图片/视频。PDF 上传在生产环境是否保留待用户确认（见开放问题 1）。

## 关键复用点

- **环境判断**：[src/config/env.js](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/config/env.js) 的 `appEnv`，生产值为 `'prod'`。
- **w6s SDK 导入**：`import * as w6s from 'szient-js-sdk'`（参考 [qrCode.vue#L42](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/qr/qrCode.vue#L42)）。鉴权已在 [enterpriseHome.vue#L295-L344](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/home/enterpriseHome.vue#L295-L344) 完成。
- **后端上传地址**：[src/util/fileUpload.js](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/util/fileUpload.js) 中 `/app-enf/common/file/upload`，完整 URL 为 `${baseUrl}/app-enf/common/file/upload`。
- **认证头**：[src/http/http.js#L26-L31](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/http/http.js#L26-L31) 拦截器加 `Authorization: Bearer + token` 与 `clientid: 9e6eb24cd4e169a98b0d2cd8034d877b`，`w6s.file.upload` 需手动传入。
- **URL 拼接**：复用 [src/util/fileUrl.js](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/util/fileUrl.js) 的 `toFullFileUrl`。
- **全局状态**：`$globalStore.useCommon`（取 `token`、`enterpriseName`）。

## 实施步骤

### 步骤 1：新建 `src/util/w6sMedia.js`

Promise 化封装 4 个方法：

```js
import * as w6s from 'szient-js-sdk'
import { baseUrl } from '@/config/env'
import { $globalStore } from '@/common/globalStore'

// 1. 拍照并加水印（时间戳 + 经纬度自动叠加）
export const takePhotoWithWaterMark = ({
  content = '',
  fontSize = 14,
  color = '#FF5858',
  timeEnable = true,
  locationEnable = true,
} = {}) => new Promise((resolve, reject) => {
  w6s.image.takePhotoAndAddWaterMark({
    content, fontSize, color,
    markDisable: false,
    timeEnable, locationEnable,
    success: resolve,
    fail: reject,
  })
})

// 2. 录制视频
export const startVideoRecorder = ({
  duration = 60,
  quality = 1,          // 0 高清 / 1 一般 / 2 流畅
  front = false,
  syncSystemAlbum = false,
} = {}) => new Promise((resolve, reject) => {
  w6s.video.startVideoRecoder({
    duration,
    quality,
    front,
    sync_system_album: syncSystemAlbum,
    success: resolve,
    fail: reject,
  })
})

// 3. 获取定位（可选，用于单独保存经纬度元数据）
export const getLocation = () => new Promise((resolve, reject) => {
  w6s.location.getLocation({ success: resolve, fail: reject })
})

// 4. 上传本地文件到后端 /app-enf/common/file/upload
export const uploadLocalFileToBackend = ({
  fileURL,                  // SDK 返回的本地路径
  fileName = 'upload',
  mimeType = 'image/jpeg',
}) => new Promise((resolve, reject) => {
  const token = $globalStore.useCommon.token || ''
  // w6s.file.upload 需要完整 URL
  const api = `${baseUrl}/app-enf/common/file/upload`
  const server = /^https?:/.test(api) ? api : `${window.location.origin}${api}`

  const opts = new window.FileUploadOptions()
  opts.fileKey = 'file'
  opts.fileName = fileName
  opts.mimeType = mimeType
  opts.headers = {
    'Authorization': token ? `Bearer ${token}` : '',
    'clientid': '9e6eb24cd4e169a98b0d2cd8034d877b',
  }
  const fileIns = new w6s.file.upload(opts)
  fileIns.upload({
    fileURL,
    server,
    trustAllHosts: false,
    success: (res) => {
      // Cordova FileTransfer 返回 res.response 为字符串
      try {
        const parsed = typeof res.response === 'string' ? JSON.parse(res.response) : res.response
        resolve(parsed)
      } catch (e) {
        resolve(res.response)
      }
    },
    fail: reject,
  })
})
```

### 步骤 2：修改 `NosDetailMaterialsTab.vue`

#### 2.1 新增引入

```js
import { appEnv } from '@/config/env'
import {
  takePhotoWithWaterMark,
  startVideoRecorder,
  uploadLocalFileToBackend,
} from '@/util/w6sMedia'

const isProd = computed(() => appEnv === 'prod')
const showUploadAction = ref(false)
const activeUploadItem = ref(null)
const uploadActions = [
  { name: '拍照（带水印与经纬度）' },
  { name: '录制视频' },
]
```

#### 2.2 模板改造（替换第 47-64 行）

```html
<div class="material-media-edit" v-else>
  <!-- 开发环境：原 van-uploader 不变 -->
  <van-uploader
    v-if="!isProd"
    v-model="item.fileList"
    multiple
    :max-count="20"
    :max-size="200 * 1024 * 1024"
    accept="image/*,video/*,.pdf"
    :after-read="onAfterReadImage"
    :before-read="onBeforeRead"
    @oversize="onOversize"
  >
    <template #default>
      <div class="uploader-custom-btn">
        <van-icon name="photograph" size="24" color="#dcdee0" />
      </div>
    </template>
  </van-uploader>

  <!-- 生产环境：自定义上传按钮 -->
  <div v-else class="uploader-custom-btn" @click="onOpenUploadAction(item)">
    <van-icon name="photograph" size="24" color="#dcdee0" />
  </div>
</div>

<!-- 与现有 van-popup 同级 -->
<van-action-sheet
  v-model:show="showUploadAction"
  :actions="uploadActions"
  cancel-text="取消"
  close-on-click-action
  @select="onSelectUploadAction"
/>
```

#### 2.3 脚本逻辑

```js
const onOpenUploadAction = (item) => {
  if ((item.fileList?.length || 0) >= 20) {
    showToast('已达到最多 20 个文件上限')
    return
  }
  activeUploadItem.value = item
  showUploadAction.value = true
}

const onSelectUploadAction = ({ name }) => {
  const item = activeUploadItem.value
  if (!item) return
  if (name === '拍照（带水印与经纬度）') onTakePhoto(item)
  else if (name === '录制视频') onRecordVideo(item)
}

// 拍照带水印
const onTakePhoto = async (item) => {
  try {
    const watermarkContent = $globalStore.useCommon.enterpriseName || '深圳市行政执法监督码'
    const res = await takePhotoWithWaterMark({ content: watermarkContent })
    await pushSdkFileToFileList(item, {
      localPath: res.imageURL || res.key,
      fileName: `photo-${Date.now()}.jpg`,
      mimeType: 'image/jpeg',
      isImage: true,
    })
  } catch (err) {
    console.error('w6s 拍照失败', err)
    showToast('拍照失败或已取消')
  }
}

// 录制视频
const onRecordVideo = async (item) => {
  try {
    const res = await startVideoRecorder({ duration: 60, quality: 1 })
    // res.info.video_path 是本地视频路径
    const info = res.info || res
    await pushSdkFileToFileList(item, {
      localPath: info.video_path,
      fileName: `video-${Date.now()}.mp4`,
      mimeType: 'video/mp4',
      isImage: false,
    })
  } catch (err) {
    console.error('w6s 录制失败', err)
    showToast('录制失败或已取消')
  }
}

// 通用：把本地文件上传后端 → 写入 fileList
const pushSdkFileToFileList = async (item, { localPath, fileName, mimeType, isImage }) => {
  if (!localPath) return
  const fileObj = {
    url: '',
    isImage,
    status: 'uploading',
    message: '上传中...',
  }
  item.fileList.push(fileObj)
  try {
    const res = await uploadLocalFileToBackend({ fileURL: localPath, fileName, mimeType })
    const data = res && res.data ? res.data : res
    const filePath = typeof data === 'string'
      ? data
      : (data && (data.data || data.url || data.fileUrl || data.path)) || ''
    if (filePath) {
      fileObj.url = toFullFileUrl(filePath)
      fileObj.status = 'done'
      fileObj.message = ''
    } else {
      fileObj.status = 'failed'
      fileObj.message = '上传失败'
    }
  } catch (err) {
    console.error('w6s 上传后端失败', err)
    fileObj.status = 'failed'
    fileObj.message = '上传失败'
  }
}
```

> 注意：`$globalStore` 在该组件需确认已注入。若未注入，可改为 `import { $globalStore } from '@/common/globalStore'`（与 [http.js#L3](file:///d:/Enforcementcode/EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/http/http.js#L3) 一致）。

## 待用户确认的开放问题

1. **PDF 上传在生产如何处理？** 你强调"线上不能用相册的图片和视频，必须现场拍摄/录制"。PDF 是文档，无法现场采集。请选择：
   - (A) 生产环境**不支持 PDF**，只允许拍照和录制视频。
   - (B) 生产环境**保留 PDF**，用 `w6s.file.chooseFiles`（文件选择器）入口，作为 action-sheet 第 3 项。
2. **水印文案**：默认"企业名称 || '深圳市行政执法监督码'"，是否需要加入其他信息（如执法人员姓名、时间）？
3. **视频录制时长上限**：默认 60 秒，是否需要调整（例如 30 秒 / 120 秒）？
4. **视频清晰度**：默认 `quality: 1`（一般），可选 0 高清 / 2 流畅。考虑到 200MB 上限，建议保持一般。
5. **经纬度是否单独存储**：`takePhotoAndAddWaterMark` 的 `locationEnable: true` 已把经纬度叠加到照片水印。是否还需要在 `item.fileList` 元数据中单独保存经纬度（用于后端记录）？若需要，会在 `onTakePhoto` 中额外调 `getLocation()` 并保存。
6. **文件上限**：现模板文案是"最多 30 个文件"但 `max-count` 为 20，本计划沿用 20。是否需要统一？

## 验证方式

1. **开发环境**（`VITE_APP_ENV=dev`）：
   - 进入 NOS 详情材料 Tab 编辑态，确认仍显示原 van-uploader，可选图片/视频/PDF，上传后端成功。
2. **生产环境**（`VITE_APP_ENV=prod`，beeworks 容器内）：
   - 编辑态下点击上传按钮，弹出 action-sheet：拍照（带水印与经纬度）/ 录制视频 / 取消。
   - **拍照**：调起原生相机，拍完照片带时间戳+经纬度水印，自动上传后端，卡片显示缩略图。
   - **录制视频**：调起原生视频录制，录完自动上传后端，卡片显示视频缩略图（可点击预览）。
   - **无相册/文件选择入口**，确认不会出现从相册选择图片或视频的选项。
   - 文件数达 20 时点击按钮提示上限。
3. 检查后端 `/app-enf/common/file/upload` 收到的 `file` 字段非空，返回 URL 正确写入 `item.fileList`，`status: 'done'`。
4. 预览/删除等既有功能不受影响。

## 涉及文件

- 新增：`src/util/w6sMedia.js`
- 修改：`src/views/enterprise/nos/components/NosDetailMaterialsTab.vue`（模板 47-64 行 + script 新增方法）
- 复用：`src/config/env.js`、`src/util/fileUrl.js`、`src/common/globalStore.js`、`szient-js-sdk`