1、优化配置页面样式

2、物品必须拾取、任务限制通行分开字段

src/views/blockly/blockly/BlocklyForm.vue

@@ -294,19 +294,19 @@
           <!-- 右侧配置项 -->
           <el-col :span="14">
             <div class="point-config-container" v-if="selectedBlocklyPoint">
-              <el-form
-                label-width="100px"
-                :model="selectedBlocklyPoint"
-                class="config-form"
-                size="large"
-              >
-                <el-card class="config-card" shadow="hover">
-                  <template #header>
-                    <div class="card-header">
-                      <span>坐标配置</span>
-                      <el-tag size="small" type="info">{{ selectedBlocklyPoint.x }},{{ selectedBlocklyPoint.y }}</el-tag>
-                    </div>
-                  </template>
+              <el-card class="config-card" shadow="hover">
+                <template #header>
+                  <div class="card-header">
+                    <span>坐标配置</span>
+                    <el-tag size="small" type="info">{{ selectedBlocklyPoint.x }},{{ selectedBlocklyPoint.y }}</el-tag>
+                  </div>
+                </template>
+                <el-form
+                  label-width="100px"
+                  :model="selectedBlocklyPoint"
+                  class="config-form"
+                  size="large"
+                >
 
                   <!-- 第一行：是否可行走 -->
                   <div class="config-row">
@@ -322,8 +322,9 @@
 
                   <template v-if="selectedBlocklyPoint.walkable">
                     <!-- 第二行：地图类型 -->
-                    <div class="config-row">
-                      <el-form-item label="地图类型" class="config-item">
+                    <div class="config-row" style="display: flex; flex-wrap: wrap; gap: 20px;">
+                      <el-form-item label="地图类型" class="config-item" 
+                        :style="(selectedBlocklyPoint.type === 'task' || selectedBlocklyPoint.type === 'item') ? 'width: calc(50% - 20px);' : 'width: 100%;'">
                         <el-select
                           v-model="selectedBlocklyPoint.type"
                           placeholder="选择地图类型"
@@ -341,9 +342,10 @@
                       </el-form-item>
 
                       <el-form-item
-                        :label="selectedBlocklyPoint.type === 'task' ? '限制通行' : '必须拾取'"
+                        label="必须拾取"
                         class="config-item"
-                        v-if="selectedBlocklyPoint.type === 'task' || selectedBlocklyPoint.type === 'item'"
+                        v-if="selectedBlocklyPoint.type === 'item'"
+                        style="width: calc(50% - 20px);"
                       >
                         <el-switch
                           v-model="selectedBlocklyPoint.must"
@@ -352,11 +354,25 @@
                           size="large"
                         />
                       </el-form-item>
+                      <el-form-item
+                        label="限制通行"
+                        class="config-item"
+                        v-if="selectedBlocklyPoint.type === 'task'"
+                        style="width: calc(50% - 20px);"
+                      >
+                        <el-switch
+                          v-model="selectedBlocklyPoint.noPassing"
+                          active-text="是"
+                          inactive-text="否"
+                          size="large"
+                        />
+                      </el-form-item>
                     </div>
 
                     <!-- 第三行：图标上传 -->
-                    <div class="config-row">
-                      <el-form-item label="初始图标" class="config-item">
+                    <div class="config-row" style="display: flex; flex-wrap: wrap; gap: 20px;">
+                      <el-form-item label="初始图标" class="config-item"
+                        :style="selectedBlocklyPoint.type === 'task' ? 'width: calc(50% - 20px);' : 'width: 100%;'">
                         <div class="icon-upload-wrapper">
                           <UploadImg
                             v-model="selectedBlocklyPoint.img"
@@ -371,6 +387,7 @@
                         label="完成图标"
                         class="config-item"
                         v-if="selectedBlocklyPoint.type && selectedBlocklyPoint.type === 'task'"
+                        style="width: calc(50% - 20px);"
                       >
                         <div class="icon-upload-wrapper">
                           <UploadImg
@@ -442,8 +459,8 @@
                       />
                     </el-form-item>
                   </template>
-                </el-card>
-              </el-form>
+                </el-form>
+              </el-card>
             </div>
 
             <div v-else class="no-selection">
@@ -516,6 +533,7 @@ interface BlocklyWalkablePoint {
   walkable: boolean
   type: string
   must: boolean
+  noPassing: boolean
   img: string
   endImg: string
   finishAnimation: string
@@ -635,6 +653,7 @@ const selectBlocklyCell = (cell: { x: number, y: number }) => {
       walkable: false,
       type: '',
       must: false,
+      noPassing: false,
       img: '',
       endImg: '',
       finishAnimation: '',
@@ -716,6 +735,7 @@ const open = async (type: string, id?: number) => {
             walkable: true,
             type: p.type || '',
             must: p.must || false,
+            noPassing: p.noPassing || false,
             img: p.img || '',
             endImg: p.endImg || '',
             finishAnimation: p.finishAnimation || '',
@@ -904,80 +924,56 @@ const getbcTypeTree = async () => {
 }
 </script>
 
-<style>
-.demo-tabs > .el-tabs__content {
-  padding: 32px;
-  color: #6b778c;
-  font-size: 32px;
-  font-weight: 600;
-}
-.demo-tabs .custom-tabs-label .el-icon {
-  vertical-align: middle;
+<style scoped>
+/* 大纲课程树选择器样式 */
+:deep(.el-tree-select__dropdown .el-tree-node__content) {
+  font-size: 14px;
 }
-.demo-tabs .custom-tabs-label span {
-  vertical-align: middle;
-  margin-left: 4px;
-}
-.uploadProgress{
-  width: 50%;
+
+/* 上传进度条样式 */
+.uploadProgress {
+  width: 85%;
+  margin-top: 10px;
 }
 
-/* 与MapGameForm.vue保持一致的样式 */
+/* 地图坐标输入组样式 */
 .coordinate-group {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
 }
 
+/* 地图网格容器样式 */
 .map-grid-container {
-  overflow: auto;
+  padding: 10px;
   border: 1px solid #dcdfe6;
   border-radius: 4px;
-  padding: 10px;
-  background-color: #f9f9f9;
+  background-color: #f5f7fa;
+  height: 400px;
+  overflow: auto;
 }
 
 .map-grid {
   display: grid;
-  gap: 2px;
-  width: 100%;
+  gap: 1px;
+  background-color: #dcdfe6;
+  border-radius: 4px;
+  padding: 1px;
 }
 
 .grid-cell {
   aspect-ratio: 1;
-  border: 1px solid #dcdfe6;
-  background-color: rgba(255, 255, 255, 0.9);
-  cursor: pointer;
+  background-color: rgba(255, 255, 255, 0.5);
   position: relative;
+  cursor: pointer;
+  transition: all 0.2s ease;
   display: flex;
-  align-items: center;
   justify-content: center;
-  transition: all 0.3s;
-  min-height: 40px;
+  align-items: center;
 }
 
 .grid-cell:hover {
-  border-color: #409eff;
-}
-
-.grid-cell.selected {
-  border: 3px solid #409eff;
-  background-color: rgba(236, 245, 255, 0.8);
-  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.3);
-  transform: scale(1.05);
-  z-index: 10;
-}
-
-.grid-cell.selected.walkable {
-  border: 3px solid #409eff;
-  background-color: rgba(230, 247, 233, 0.8);
-  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.3);
-}
-
-.grid-cell.selected.has-icon {
-  border: 3px solid #409eff;
-  background-color: rgba(255, 243, 230, 0.8);
-  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.3);
+  background-color: rgba(0, 150, 136, 0.2);
 }
 
 .grid-cell.walkable {
@@ -985,16 +981,21 @@ const getbcTypeTree = async () => {
   border: 3px solid rgb(103, 194, 58);
 }
 
-.grid-cell.has-icon {
-  background-color: rgba(253, 246, 236, 0.8);
+.grid-cell.selected {
+  background-color: rgba(64, 158, 255, 0.5);
+  box-shadow: 0 0 0 2px #409eff;
+  z-index: 1;
 }
 
 .cell-coordinate {
   position: absolute;
   top: 2px;
-  left: 4px;
-  font-size: 12px;
-  color: #909399;
+  left: 2px;
+  background-color: rgba(255, 255, 255, 0.7);
+  padding: 1px 3px;
+  border-radius: 3px;
+  height: 15px;
+  line-height: 12px;
 }
 
 .cell-icon {
@@ -1010,24 +1011,83 @@ const getbcTypeTree = async () => {
 
 /* 右侧配置区域样式 - 修复高度显示问题 */
 .point-config-container {
-  overflow-y: auto;
   padding: 10px;
+  //height: 400px;
+}
+
+.config-card {
+  height: calc(100% - 20px);
+  display: flex;
+  flex-direction: column;
+}
+
+.config-card .el-card__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 15px;
 }
 
 .config-form {
   width: 100%;
+  max-height: 400px;
+  overflow-y: auto;
 }
 
 .config-card {
-  margin-bottom: 0;
-  border-radius: 8px;
+margin-bottom: 0;
+border-radius: 8px;
 }
 
 .card-header {
+display: flex;
+justify-content: space-between;
+align-items: center;
+font-weight: bold;
+color: #303133;
+}
+
+/* 配置项行间距 */
+.config-row {
+  margin-bottom: 15px;
+}
+
+/* 配置项样式 */
+.config-item {
+  margin-bottom: 0;
+}
+
+/* 表单项全宽样式 */
+.form-item-full {
+  margin-bottom: 15px;
+}
+
+/* 图标上传包装器 */
+.icon-upload-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* 上传提示 */
+.upload-tip {
+  font-size: 12px;
+  color: #67c23a;
+  margin-top: 5px;
+}
+
+/* 无选择状态样式 */
+.no-selection {
+  height: 400px;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  font-weight: bold;
-  color: #303133;
+  background-color: #f5f7fa;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+
+/* 自定义上传组件样式 */
+.custom-upload {
+  margin-bottom: 5px;
 }
 </style>