feat: cos upload support

.claude/settings.local.json

@@ -5,7 +5,8 @@
       "Bash(mvn clean package:*)",
       "Bash(echo:*)",
       "Bash(git add:*)",
-      "Bash(git commit:*)"
+      "Bash(git commit:*)",
+      "Bash(ls:*)"
     ],
     "deny": [],
     "ask": []

plus-ui/package.json

@@ -40,7 +40,8 @@
     "vue-json-pretty": "2.4.0",
     "vue-router": "4.5.0",
     "vue-types": "6.0.0",
-    "vxe-table": "4.13.7"
+    "vxe-table": "4.13.7",
+    "cos-js-sdk-v5": "^1.8.7"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.276",

plus-ui/src/api/inspection/cos/index.ts

@@ -0,0 +1,69 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import COS from 'cos-js-sdk-v5';
+
+/**
+ * COS临时凭证响应
+ */
+export interface CosCredentialResponse {
+  credentials: {
+    tmpSecretId: string;
+    tmpSecretKey: string;
+    sessionToken: string;
+  };
+  startTime: number;
+  expiredTime: number;
+  expiration: string;
+}
+
+/**
+ * COS配置响应
+ */
+export interface CosConfigResponse {
+  bucket: string;
+  region: string;
+}
+
+/**
+ * 获取COS临时凭证
+ */
+export const getCosCredential = (): AxiosPromise<CosCredentialResponse> => {
+  return request({
+    url: '/inspection/cos/credential',
+    method: 'get'
+  });
+};
+
+/**
+ * 获取COS配置信息
+ */
+export const getCosConfig = (): AxiosPromise<CosConfigResponse> => {
+  return request({
+    url: '/inspection/cos/config',
+    method: 'get'
+  });
+};
+
+/**
+ * 创建COS实例(包含自动获取凭证)
+ */
+export const createCosInstance = (): COS => {
+  return new COS({
+    getAuthorization: (options, callback) => {
+      getCosCredential()
+        .then((res) => {
+          const credentials = res.data.credentials;
+          callback({
+            TmpSecretId: credentials.tmpSecretId,
+            TmpSecretKey: credentials.tmpSecretKey,
+            SecurityToken: credentials.sessionToken,
+            StartTime: res.data.startTime,
+            ExpiredTime: res.data.expiredTime
+          });
+        })
+        .catch((error) => {
+          console.error('获取COS临时凭证失败:', error);
+        });
+    }
+  });
+};

plus-ui/src/api/inspection/cos/types.ts

@@ -0,0 +1,18 @@
+/**
+ * COS上传回调参数
+ */
+export interface CosUploadCallbackData {
+  Location: string; // 完整URL(不含协议)
+  statusCode: number;
+  headers: any;
+}
+
+/**
+ * COS上传进度回调
+ */
+export interface CosUploadProgress {
+  loaded: number; // 已上传字节数
+  total: number; // 总字节数
+  speed: number; // 上传速度(字节/秒)
+  percent: number; // 上传进度(0-1)
+}

plus-ui/src/components/AudioUpload/index.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="audio-upload-container">
+    <el-upload
+      ref="audioUploadRef"
+      :auto-upload="false"
+      :show-file-list="false"
+      :accept="fileAccept"
+      :on-change="handleFileChange"
+      :disabled="disabled || uploading"
+    >
+      <el-button type="primary" :icon="Upload" :disabled="disabled || uploading">
+        {{ uploading ? '上传中...' : '选择音频文件' }}
+      </el-button>
+    </el-upload>
+
+    <!-- 上传提示 -->
+    <div v-if="showTip" class="el-upload__tip">
+      支持格式: <b style="color: #f56c6c">{{ fileType.join('、') }}</b>,
+      大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+    </div>
+
+    <!-- 上传进度 -->
+    <div v-if="uploading" class="upload-progress">
+      <el-progress :percentage="uploadPercent" :status="uploadStatus" />
+      <span class="progress-text">{{ progressText }}</span>
+    </div>
+
+    <!-- 已上传文件显示 -->
+    <div v-if="currentFile && !uploading" class="file-preview">
+      <div class="file-info">
+        <el-icon class="file-icon"><Headset /></el-icon>
+        <span class="file-name">{{ currentFile.name }}</span>
+      </div>
+      <div class="file-actions">
+        <el-button v-if="currentFile.url" type="primary" link @click="previewAudio">试听</el-button>
+        <el-button v-if="!disabled" type="danger" link @click="handleRemove">删除</el-button>
+      </div>
+    </div>
+
+    <!-- 音频预览对话框 -->
+    <el-dialog v-model="previewVisible" title="音频预览" width="500px" append-to-body>
+      <audio v-if="previewUrl" :src="previewUrl" controls style="width: 100%"></audio>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, getCurrentInstance, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Upload, Headset } from '@element-plus/icons-vue';
+import { createCosInstance, getCosConfig } from '@/api/inspection/cos';
+import type { CosUploadProgress } from '@/api/inspection/cos/types';
+import type { ComponentInternalInstance } from 'vue';
+
+interface Props {
+  modelValue?: string; // v-model绑定的URL
+  fileSize?: number; // 文件大小限制(MB)
+  fileType?: string[]; // 支持的文件类型
+  disabled?: boolean; // 是否禁用
+  showTip?: boolean; // 是否显示提示
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  fileSize: 10,
+  fileType: () => ['mp3', 'wav', 'm4a', 'aac', 'ogg'],
+  disabled: false,
+  showTip: true
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  'upload-success': [url: string];
+  'upload-error': [error: any];
+}>();
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const audioUploadRef = ref();
+const currentFile = ref<{ name: string; url?: string } | null>(null);
+const uploading = ref(false);
+const uploadPercent = ref(0);
+const uploadStatus = ref<'success' | 'exception' | 'warning'>('success');
+const previewVisible = ref(false);
+const previewUrl = ref('');
+
+// COS配置
+const cosConfig = ref<{ bucket: string; region: string }>();
+
+// 计算accept属性
+const fileAccept = computed(() => props.fileType.map((type) => `.${type}`).join(','));
+
+// 进度文本
+const progressText = computed(() => {
+  if (uploadPercent.value < 100) {
+    return `正在上传: ${uploadPercent.value}%`;
+  }
+  return '上传完成';
+});
+
+// 监听modelValue变化
+watch(
+  () => props.modelValue,
+  (url) => {
+    if (url) {
+      // 从URL提取文件名
+      const fileName = url.substring(url.lastIndexOf('/') + 1);
+      currentFile.value = { name: decodeURIComponent(fileName), url };
+    } else {
+      currentFile.value = null;
+    }
+  },
+  { immediate: true }
+);
+
+// 初始化COS配置
+const initCosConfig = async () => {
+  try {
+    const res = await getCosConfig();
+    cosConfig.value = res.data;
+  } catch (error) {
+    console.error('获取COS配置失败:', error);
+  }
+};
+
+// 组件挂载时初始化
+onMounted(() => {
+  initCosConfig();
+});
+
+// 文件选择变化
+const handleFileChange = (file: any) => {
+  // 校验文件类型
+  const fileName = file.name;
+  const fileExt = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
+  if (!props.fileType.includes(fileExt)) {
+    proxy?.$modal.msgError(`文件格式不正确,请上传${props.fileType.join('、')}格式的音频文件!`);
+    return;
+  }
+
+  // 校验文件大小
+  const fileSizeMB = file.size / 1024 / 1024;
+  if (fileSizeMB > props.fileSize) {
+    proxy?.$modal.msgError(`文件大小不能超过${props.fileSize}MB!`);
+    return;
+  }
+
+  // 开始上传
+  uploadToCos(file.raw, fileName);
+};
+
+// 上传到COS
+const uploadToCos = async (file: File, fileName: string) => {
+  if (!cosConfig.value) {
+    ElMessage.error('COS配置未加载,请稍后重试');
+    return;
+  }
+
+  uploading.value = true;
+  uploadPercent.value = 0;
+  uploadStatus.value = 'success';
+
+  try {
+    const cos = createCosInstance();
+    const timestamp = Date.now();
+    const key = `audio/${timestamp}_${fileName}`;
+
+    cos.uploadFile(
+      {
+        Bucket: cosConfig.value.bucket,
+        Region: cosConfig.value.region,
+        Key: key,
+        Body: file,
+        SliceSize: 1024 * 1024 * 100, // 大于100MB使用分块上传
+        onProgress: (progressData: CosUploadProgress) => {
+          uploadPercent.value = Math.round(progressData.percent * 100);
+        }
+      },
+      (err: any, data: any) => {
+        uploading.value = false;
+
+        if (err) {
+          uploadStatus.value = 'exception';
+          ElMessage.error('上传失败: ' + err.message);
+          emit('upload-error', err);
+          return;
+        }
+
+        // 上传成功
+        const url = 'https://' + data.Location;
+        currentFile.value = { name: fileName, url };
+        emit('update:modelValue', url);
+        emit('upload-success', url);
+        ElMessage.success('上传成功');
+      }
+    );
+  } catch (error) {
+    uploading.value = false;
+    uploadStatus.value = 'exception';
+    ElMessage.error('上传失败: ' + error);
+    emit('upload-error', error);
+  }
+};
+
+// 删除文件
+const handleRemove = () => {
+  currentFile.value = null;
+  uploadPercent.value = 0;
+  emit('update:modelValue', '');
+};
+
+// 预览音频
+const previewAudio = () => {
+  if (currentFile.value?.url) {
+    previewUrl.value = currentFile.value.url;
+    previewVisible.value = true;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.audio-upload-container {
+  .el-upload__tip {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #606266;
+  }
+
+  .upload-progress {
+    margin-top: 12px;
+
+    .progress-text {
+      display: block;
+      margin-top: 8px;
+      font-size: 12px;
+      color: #606266;
+    }
+  }
+
+  .file-preview {
+    margin-top: 12px;
+    padding: 8px 12px;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .file-info {
+      display: flex;
+      align-items: center;
+      flex: 1;
+
+      .file-icon {
+        font-size: 20px;
+        margin-right: 8px;
+        color: #409eff;
+      }
+
+      .file-name {
+        font-size: 14px;
+        color: #606266;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .file-actions {
+      display: flex;
+      gap: 8px;
+    }
+  }
+}
+</style>

plus-ui/src/views/inspection/step/index.vue

@@ -140,8 +140,8 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="内容语音URL" prop="contentVoice">
+            <el-form-item label="内容语音" prop="contentVoice">
-              <el-input v-model="form.contentVoice" placeholder="请输入内容语音URL" />
+              <AudioUpload v-model="form.contentVoice" :file-size="10" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -172,8 +172,8 @@
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="复述语音URL" prop="rephraseVoice">
+            <el-form-item label="复述语音" prop="rephraseVoice">
-              <el-input v-model="form.rephraseVoice" placeholder="语音URL" />
+              <AudioUpload v-model="form.rephraseVoice" :file-size="10" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -189,8 +189,8 @@
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="确认语音URL" prop="confirmVoice">
+            <el-form-item label="确认语音" prop="confirmVoice">
-              <el-input v-model="form.confirmVoice" placeholder="语音URL" />
+              <AudioUpload v-model="form.confirmVoice" :file-size="10" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -243,6 +243,7 @@ import { listArTask } from '@/api/inspection/task';
 import { ArTaskVO } from '@/api/inspection/task/types';
 import { listArPoint } from '@/api/inspection/point';
 import { ArPointVO } from '@/api/inspection/point/types';
+import AudioUpload from '@/components/AudioUpload/index.vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const route = useRoute();

ruoyi-admin/src/main/resources/application-dev.yml

@@ -268,3 +268,13 @@ justauth:
       client-id: 10**********6
       client-secret: 1f7d08**********5b7**********29e
       redirect-uri: ${justauth.address}/social-callback?source=gitea
+
+--- # 腾讯云COS配置
+tencent:
+  cos:
+    secret-id: AKIDBDu22pdIn8Tjx9D6nGWt68wY0JQJ0T3U
+    secret-key: HJ6i6MtHRP9fzDD3f3EBuPjqmUzGJ8qK
+    duration-seconds: 1800
+    bucket: nc-1375092979
+    region: ap-nanjing
+    app-id: 1375092979

ruoyi-admin/src/main/resources/application-prod.yml

@@ -270,3 +270,13 @@ justauth:
       client-id: 10**********6
       client-secret: 1f7d08**********5b7**********29e
       redirect-uri: ${justauth.address}/social-callback?source=gitea
+
+--- # 腾讯云COS配置
+tencent:
+  cos:
+    secret-id: AKIDBDu22pdIn8Tjx9D6nGWt68wY0JQJ0T3U
+    secret-key: HJ6i6MtHRP9fzDD3f3EBuPjqmUzGJ8qK
+    duration-seconds: 1800
+    bucket: nc-1375092979
+    region: ap-nanjing
+    app-id: 1375092979

ruoyi-modules/ruoyi-inspection/pom.xml

@@ -78,6 +78,13 @@
             <artifactId>ruoyi-common-oss</artifactId>
         </dependency>
 
+        <!-- 腾讯云COS临时密钥生成 -->
+        <dependency>
+            <groupId>com.qcloud</groupId>
+            <artifactId>cos-sts_api</artifactId>
+            <version>3.1.0</version>
+        </dependency>
+
     </dependencies>
 
 </project>

ruoyi-modules/ruoyi-inspection/src/main/java/org/dromara/inspection/config/TencentCosProperties.java

@@ -0,0 +1,46 @@
+package org.dromara.inspection.config;
+
+import lombok.Data;
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import org.springframework.stereotype.Component;
+
+/**
+ * 腾讯云COS配置属性
+ *
+ * @author LionLi
+ */
+@Data
+@Component
+@ConfigurationProperties(prefix = "tencent.cos")
+public class TencentCosProperties {
+
+    /**
+     * 腾讯云SecretId
+     */
+    private String secretId;
+
+    /**
+     * 腾讯云SecretKey
+     */
+    private String secretKey;
+
+    /**
+     * 临时密钥有效期(秒),默认1800秒=30分钟
+     */
+    private Integer durationSeconds = 1800;
+
+    /**
+     * 存储桶名称
+     */
+    private String bucket;
+
+    /**
+     * 存储桶所在地域
+     */
+    private String region;
+
+    /**
+     * 腾讯云AppId
+     */
+    private String appId;
+}

ruoyi-modules/ruoyi-inspection/src/main/java/org/dromara/inspection/controller/TencentCosController.java

@@ -0,0 +1,125 @@
+package org.dromara.inspection.controller;
+
+import cn.dev33.satoken.annotation.SaCheckPermission;
+import com.tencent.cloud.CosStsClient;
+import com.tencent.cloud.Policy;
+import com.tencent.cloud.Response;
+import com.tencent.cloud.Statement;
+import com.tencent.cloud.cos.util.Jackson;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.dromara.common.core.domain.R;
+import org.dromara.common.log.annotation.Log;
+import org.dromara.common.log.enums.BusinessType;
+import org.dromara.common.redis.utils.RedisUtils;
+import org.dromara.inspection.config.TencentCosProperties;
+import org.springframework.validation.annotation.Validated;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.time.Duration;
+import java.util.HashMap;
+import java.util.Map;
+import java.util.TreeMap;
+
+/**
+ * 腾讯云COS临时凭证Controller
+ *
+ * @author LionLi
+ */
+@Slf4j
+@Validated
+@RequiredArgsConstructor
+@RestController
+@RequestMapping("/inspection/cos")
+public class TencentCosController {
+
+    private final TencentCosProperties cosProperties;
+
+    private static final String CACHE_KEY = "inspection:cos:credential";
+    private static final int CACHE_EXPIRE_SECONDS = 1500; // 缓存25分钟,临时密钥30分钟过期
+
+    /**
+     * 获取腾讯云COS临时上传凭证
+     */
+    @SaCheckPermission("inspection:step:edit")
+    @Log(title = "获取COS临时凭证", businessType = BusinessType.OTHER)
+    @GetMapping("/credential")
+    public R<Response> getCredential() {
+        // 先从缓存获取
+        Response cachedCredential = RedisUtils.getCacheObject(CACHE_KEY);
+        if (cachedCredential != null) {
+            return R.ok(cachedCredential);
+        }
+
+        try {
+            // 构建配置参数
+            TreeMap<String, Object> config = new TreeMap<>();
+            config.put("secretId", cosProperties.getSecretId());
+            config.put("secretKey", cosProperties.getSecretKey());
+            config.put("durationSeconds", cosProperties.getDurationSeconds());
+            config.put("bucket", cosProperties.getBucket());
+            config.put("region", cosProperties.getRegion());
+
+            // 初始化 policy
+            Policy policy = new Policy();
+
+            // 开始构建一条 statement
+            Statement statement = new Statement();
+            // 声明设置的结果是允许操作
+            statement.setEffect("allow");
+
+            // 添加操作权限
+            statement.addActions(new String[]{
+                // 简单上传
+                "cos:PutObject",
+                "cos:PostObject",
+                // 分块上传
+                "cos:InitiateMultipartUpload",
+                "cos:ListMultipartUploads",
+                "cos:ListParts",
+                "cos:UploadPart",
+                "cos:CompleteMultipartUpload"
+            });
+
+            // 设置允许操作的资源路径(限定只能上传到audio目录)
+            // 格式: qcs::cos:{region}:uid/{appid}:{bucket}/{path}
+            statement.addResources(new String[]{
+                "qcs::cos:" + cosProperties.getRegion() +
+                    ":uid/" + cosProperties.getAppId() +
+                    ":" + cosProperties.getBucket() +
+                    "/audio/*"
+            });
+
+            // 把一条 statement 添加到 policy
+            policy.addStatement(statement);
+
+            // 将 Policy 实例转化成 String
+            config.put("policy", Jackson.toJsonPrettyString(policy));
+
+            // 获取临时密钥
+            Response response = CosStsClient.getCredential(config);
+
+            // 缓存凭证(25分钟,临时密钥30分钟过期)
+            RedisUtils.setCacheObject(CACHE_KEY, response, Duration.ofSeconds(CACHE_EXPIRE_SECONDS));
+
+            return R.ok(response);
+        } catch (Exception e) {
+            log.error("获取临时COS凭证失败", e);
+            return R.fail("获取临时凭证失败:" + e.getMessage());
+        }
+    }
+
+    /**
+     * 获取COS配置信息(供前端使用)
+     */
+    @SaCheckPermission("inspection:step:edit")
+    @GetMapping("/config")
+    public R<Map<String, String>> getConfig() {
+        Map<String, String> config = new HashMap<>();
+        config.put("bucket", cosProperties.getBucket());
+        config.put("region", cosProperties.getRegion());
+        return R.ok(config);
+    }
+}