1、blockly配置任务完成动画上传视频进度限制确定

src/views/blockly/blockly/BlocklyForm.vue

@@ -392,11 +392,16 @@
                             v-model="selectedBlocklyPoint.finishAnimation"
                             title="点击上传完成动画"
                             class="custom-upload"
-                            @upload-progress="handleUploadProgress"
-                            @upload-start="handleUploadStart"
-                            @upload-complete="handleUploadComplete"
+                            @upload-progress="handleBlocklyUploadProgress"
+                            @upload-start="handleBlocklyUploadStart"
+                            @upload-complete="handleBlocklyUploadComplete"
                           />
                           <div v-if="selectedBlocklyPoint.finishAnimation" class="upload-tip">已上传</div>
+                          <!-- Blockly配置弹框中的视频上传进度条 -->
+                          <div v-if="blocklyIsUploading" class="uploadProgress">
+                            <el-progress :percentage="blocklyUploadProgress" />
+                            <div class="text-xs text-gray-500 text-right mt-1">{{ blocklyUploadProgress }}% 已上传</div>
+                          </div>
                         </div>
                       </el-form-item>
                     </div>
@@ -465,7 +470,7 @@
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button @click="saveBlocklyConfig" type="primary">确 定</el-button>
+      <el-button @click="saveBlocklyConfig" type="primary" :disabled="blocklyIsUploading">确 定</el-button>
       <el-button @click="blocklyConfigVisible = false">取 消</el-button>
     </template>
   </Dialog>
@@ -549,6 +554,10 @@ const formData = ref({
 const uploadProgress = ref(0)
 const isUploading = ref(false)
 
+// 为Blockly配置弹框中的完成动画视频上传添加独立的进度状态
+const blocklyUploadProgress = ref(0)
+const blocklyIsUploading = ref(false)
+
 // 所有格子数据
 const blocklyGridCells = computed(() => {
   const cells = []
@@ -627,6 +636,7 @@ const selectBlocklyCell = (cell: { x: number, y: number }) => {
       must: false,
       img: '',
       endImg: '',
+      finishAnimation: '',
       tip: '',
       unfinishedTip: '',
       finishedTip: ''
@@ -707,6 +717,7 @@ const open = async (type: string, id?: number) => {
             must: p.must || false,
             img: p.img || '',
             endImg: p.endImg || '',
+            finishAnimation: p.finishAnimation || '',
             tip: p.tip || '',
             unfinishedTip: p.unfinishedTip || '',
             finishedTip: p.finishedTip || ''
@@ -808,7 +819,7 @@ const submitForm = async () => {
   }
 }
 
-// 添加处理上传进度的方法
+// 外层表单上传进度处理方法
 const handleUploadProgress = (progress: number) => {
   uploadProgress.value = progress
 }
@@ -823,6 +834,21 @@ const handleUploadComplete = () => {
   uploadProgress.value = 100
 }
 
+// Blockly配置弹框中完成动画视频上传的进度处理方法
+const handleBlocklyUploadProgress = (progress: number) => {
+  blocklyUploadProgress.value = progress
+}
+
+const handleBlocklyUploadStart = () => {
+  blocklyIsUploading.value = true
+  blocklyUploadProgress.value = 0
+}
+
+const handleBlocklyUploadComplete = () => {
+  blocklyIsUploading.value = false
+  blocklyUploadProgress.value = 100
+}
+
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
@@ -859,6 +885,12 @@ const resetForm = () => {
   blocklyWalkablePoints.value = []
   selectedBlocklyPoint.value = null
 
+  // 重置上传进度状态
+  uploadProgress.value = 0
+  isUploading.value = false
+  blocklyUploadProgress.value = 0
+  blocklyIsUploading.value = false
+
   formRef.value?.resetFields()
 }
 /** 获得课程-类型树 */
@@ -997,78 +1029,4 @@ const getbcTypeTree = async () => {
   font-weight: bold;
   color: #303133;
 }
-
-/* 配置项行布局 */
-.config-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  margin-bottom: 20px;
-  align-items: flex-start;
-}
-
-.config-item {
-  flex: 1;
-  min-width: 200px;
-  margin-bottom: 0 !important;
-}
-
-.form-item-full {
-  margin-bottom: 20px;
-}
-
-/* 图标上传包装器 */
-.icon-upload-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.upload-tip {
-  font-size: 12px;
-  color: #67c23a;
-  margin-top: 4px;
-}
-
-.no-selection {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 300px;
-  background-color: #f5f7fa;
-  border-radius: 8px;
-  border: 1px dashed #dcdfe6;
-}
-
-/* 优化滚动条样式 */
-.point-config-container::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-.point-config-container::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background: #c0c4cc;
-}
-
-.point-config-container::-webkit-scrollbar-track {
-  background: #f0f0f0;
-  border-radius: 4px;
-}
-
-/* 调整标签宽度以适应行布局 */
-:deep(.el-form-item__label) {
-  white-space: nowrap;
-}
-
-/* 响应式调整 */
-@media screen and (max-width: 768px) {
-  .config-row {
-    flex-direction: column;
-  }
-
-  .config-item {
-    width: 100%;
-  }
-}
 </style>