Merge branch 'master' of http://59.110.91.129:3000/zhangmengying/AIClass into wanzi

src/components/blockly/BlocklyEditor.vue

@@ -110,11 +110,13 @@
         </div>
 
         <div class="json-section">
-          <h3>JSON 数据</h3>
-          <textarea v-model="jsonData" placeholder="在此输入JSON格式的积木块数据..."></textarea>
+          <h3> 数据</h3>
+          <textarea v-model="jsonData" rows="10" placeholder="在此输入JSON格式的积木块数据..."></textarea>
           <div class="controls">
             <button @click="loadWorkspaceFromJson">加载JSON到工作区</button>
             <button @click="exportWorkspaceToJson">导出工作区为JSON</button>
+            <button id="generateCode" @click="generateCode('javascript')">生成JavaScript代码</button>
+            <button id="generateCode" @click="generateCode('python')">生成Python代码</button>
           </div>
           <div v-if="statusMessage" :class="['status', statusType]">
             {{ statusMessage }}
@@ -153,8 +155,6 @@
         <h2>工作区</h2>
         <div id="blocklyDiv"></div>
         <div class="controls">
-          <button id="generateCode" @click="generateCode('javascript')">生成JavaScript代码</button>
-          <button id="generateCode" @click="generateCode('python')">生成Python代码</button>
           <button id="runCode" @click="runCode">运行代码</button>
           <button @click="clearWorkspace">清空工作区</button>
         </div>
@@ -1580,9 +1580,14 @@ const showStatus = (message, type = 'success') => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(255, 255, 255, 0.95);
+  background-image: url('@/assets/images/desklamp.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  /* 添加黑色透明遮挡层 */
+  background-color: rgba(0, 0, 0, 0.5);
+  background-blend-mode: overlay;
   overflow-y: auto;
-  overflow-x: hidden;
 }
 /* 自定义滚动条样式 */
 .container::-webkit-scrollbar {
@@ -1606,32 +1611,42 @@ const showStatus = (message, type = 'success') => {
   min-height: 600px;
 }
 
+//工具箱
 .toolbox-section {
   flex: 1;
-  min-width: 250px;
-  background: #f8f9fa;
+  //min-width: 250px;
+  background: rgba(248, 249, 250, 0.82);
   padding: 15px;
-  border-right: 1px solid #e0e0e0;
+  border-radius: 15px;
   display: flex;
   flex-direction: column;
+  width: 30%;
+  margin-left: 10px;
+  margin-right: 10px;
 }
 
+//工作区
 .workspace-section {
   flex: 3;
-  min-width: 400px;
+  //min-width: 400px;
   padding: 15px;
   position: relative;
+  width: 65%;
   height: 70%;
+  background: rgba(248, 249, 250, 0.82);
+  border-radius: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
 }
 
 .output-section {
-  margin-top: 15px;
-  background: #f1f8ff;
+  background: rgba(241, 248, 255, 84%);
   color: black;
   padding: 15px;
   border-radius: 8px;
   border: 1px solid #d1e7ff;
   width: 100%;
+  margin: 15px 10px;
 }
 
 /* AI模块样式 */
@@ -1982,7 +1997,7 @@ textarea {
 .title-box {
   position: relative;
   top: 10px;
-  left: 20px;
+  padding-left: 15px;
   margin-bottom: 20px;
   z-index: 10;
 }
@@ -1992,7 +2007,7 @@ textarea {
   align-items: center;
   gap: 10px;
   padding: 10px 20px;
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 80%);
   border-radius: 30px;
   backdrop-filter: blur(10px);
   cursor: pointer;
@@ -2004,7 +2019,7 @@ textarea {
 }
 
 .box-icon:hover {
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 90%);
   transform: translateX(-3px);
 }