Browse Source

blockly编程游戏
1、新增配置项:任务条件和完成状态
调整课程上传方法

liyanbo 5 months ago
parent
commit
b07ab2711e
2 changed files with 36 additions and 6 deletions
  1. 1 1
      src/components/UploadFile/src/useUpload.ts
  2. 35 5
      src/views/ai/mapgame/MapGameForm.vue

+ 1 - 1
src/components/UploadFile/src/useUpload.ts

@@ -7,7 +7,7 @@ import axios from 'axios'
  * 获得上传 URL
  */
 export const getUploadUrl = (): string => {
-  return import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/infra/file/upload'
+  return '/infra/file/upload'
 }
 
 export const useUpload = (directory?: string) => {

+ 35 - 5
src/views/ai/mapgame/MapGameForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="900px">
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1250px">
     <el-form
       ref="formRef"
       :model="formData"
@@ -94,6 +94,15 @@
       <!-- 地图可行走坐标 - 动态添加 -->
       <el-form-item label="地图可行走坐标" required>
         <div class="walkable-points-container">
+          <div class="walkable-point-item">
+            <span style="width: 130px"> 横坐标</span>
+            <span style="width: 130px"> 纵坐标</span>
+            <span style="width: 120px"> 方格类型</span>
+            <span style="width: 120px"> 任务类型</span>
+            <span style="width: 100px"> 方格图标</span>
+            <span style="width: 100px"> 完成状态</span>
+            <span style="width: 200px"> 提示语</span>
+          </div>
           <div v-for="(point, index) in walkablePoints" :key="index" class="walkable-point-item">
             X:
             <el-input-number
@@ -119,6 +128,16 @@
                 :value="dict.value"
               />
             </el-select>
+            <el-select v-model="point.need" placeholder="任务" style="width: 120px" clearable>
+              <el-option
+                v-for="dict in getStrDictOptions(DICT_TYPE.AI_BLOCKLY_MAP_TYPE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+            <UploadImg v-model="point.img" title="点击上传图标" />
+            <UploadImg v-model="point.needImg" title="点击上传图标" />
             <el-input v-model="point.tip" placeholder="提示语" style="flex: 1; min-width: 200px" />
             <el-button
               @click="removeWalkablePoint(index)"
@@ -212,11 +231,14 @@ interface WalkablePoint {
   x: number
   y: number
   type: string
+  need: string
+  img: string
+  needImg: string
   tip: string
 }
 
 // 可行走点数组
-const walkablePoints = ref<WalkablePoint[]>([{ x: 0, y: 0, type: '', tip: '' }])
+const walkablePoints = ref<WalkablePoint[]>([{ x: 0, y: 0, type: '', need: '', img:'', needImg:'', tip: '' }])
 
 const formRules = reactive({
   name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
@@ -269,7 +291,7 @@ const open = async (type: string, id?: number) => {
           walkablePoints.value = JSON.parse(data.mapWalkablePoints)
         } catch (e) {
           console.error('解析地图可行走坐标失败:', e)
-          walkablePoints.value = [{ x: 0, y: 0, type: '', tip: '' }]
+          walkablePoints.value = [{ x: 0, y: 0, type: '', need: '', img:'', needImg:'', tip: '' }]
         }
       }
     } finally {
@@ -281,7 +303,7 @@ defineExpose({ open }) // 提供 open 方法,用于打开弹窗
 
 /** 添加可行走点 */
 const addWalkablePoint = () => {
-  walkablePoints.value.push({ x: 0, y: 0, type: '', tip: '' })
+  walkablePoints.value.push({ x: 0, y: 0, type: '', need: '', img:'', needImg:'', tip: '' })
 }
 
 /** 移除可行走点 */
@@ -368,7 +390,7 @@ const resetForm = () => {
   mapStartPointY.value = undefined
   mapEndPointX.value = undefined
   mapEndPointY.value = undefined
-  walkablePoints.value = [{ x: 0, y: 0, type: '', tip: '' }]
+  walkablePoints.value = [{ x: 0, y: 0, type: '', need: '', img:'', needImg:'', tip: '' }]
 
   formRef.value?.resetFields()
 }
@@ -406,9 +428,17 @@ const resetForm = () => {
   background-color: #fff;
   border-radius: 4px;
   border: 1px solid #e4e7ed;
+  text-align: center;
 }
 
 .walkable-point-item:last-child {
   margin-bottom: 0;
 }
+
+/* 确保上传组件预览图不超过行高 */
+.walkable-point-item :deep(.el-upload) {
+  max-height: 32px;
+  max-width: 100px;
+  margin-bottom: -6px;
+}
 </style>