AIClass/src/views/Blockly.vue

<template>
    <!-- 智能台灯 -->
  <div v-if="showLampPreview" class="desk-lamp-container">
    <!-- 标题框 -->
    <div class="desk-lamp-title-box">
      <div class="desk-lamp-box-icon" @click="goBackLab">
        <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
        智能台灯
      </div>
    </div>

    <img src="@/assets/images/desklamp.png" alt="智能台灯" class="full-screen-image" />
    <!-- 使用动态样式设置灯光遮罩 -->
     <div v-if="isLightOn"  :style="{ '--lamp-color': state.lamp.color,'--lamp-opacity': state.lamp.brightness / 100 }" class="lamp-light-mask"></div>

    <!-- 右下角按钮组 -->
    <div class="button-group">
      <el-button class="control-button run-button" @click="toggleLight">运行</el-button>
      <el-button class="control-button code-button" @click="handleViewCode">查看代码</el-button>
    </div>

    <!-- 显示当前灯光信息 -->
    <div v-if="isLightOn" class="lamp-info">
      <p>颜色: {{ state.lamp.color }}</p>
      <p>亮度: {{ state.lamp.brightness }}%</p>
    </div>
  </div>

  <!-- Blockly -->
  <div class="page-container">
    <!-- 返回 -->
    <div class="title-box">
      <div class="box-icon" @click="goBack">
        <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
        Blockly编程
      </div>
    </div>

    <div class="home-container">
      <div class="box-blockly">
        <div
          id="blocklyDiv"
          style="height: 100%; width: 100%; background-color: #cccccc"
        ></div>

      <!-- blockly工具栏 -->
      <template>
        <xml id="toolbox" style="display: none">
          <!-- AI模块分类 - 扩展更多功能 -->
          <category name="AI模块" categorystyle="ai_category">
            <block type="ai_voice_input"></block>
            <block type="ai_text_to_image"></block>
            <block type="ai_text_to_video"></block>
            <block type="ai_text_to_text"></block>
            <block type="ai_smart_lamp_single_param"></block>
            <block type="ai_smart_lamp"></block>
            <block type="ai_lamp_set_brightness"></block>
            <block type="ai_lamp_set_color"></block>
          </category>

            <!-- 其他原有分类保持不变 -->
            <category name="逻辑" categorystyle="logic_category">
              <block type="controls_if"></block>
              <block type="logic_compare"></block>
              <block type="logic_operation"></block>
              <block type="logic_negate"></block>
              <block type="logic_boolean"></block>
              <block type="logic_null" disabled="true"></block>
              <block type="logic_ternary"></block>
            </category>
            <category name="循环" categorystyle="loop_category">
              <block type="controls_repeat_ext">
                <value name="TIMES">
                  <shadow type="math_number">
                    <field name="NUM">10</field>
                  </shadow>
                </value>
              </block>
              <block type="controls_repeat" disabled="true"></block>
              <block type="controls_whileUntil"></block>
              <block type="controls_for">
                <value name="FROM">
                  <shadow type="math_number">
                    <field name="NUM">1</field>
                  </shadow>
                </value>
                <value name="TO">
                  <shadow type="math_number">
                    <field name="NUM">10</field>
                  </shadow>
                </value>
                <value name="BY">
                  <shadow type="math_number">
                    <field name="NUM">1</field>
                  </shadow>
                </value>
              </block>
              <block type="controls_forEach"></block>
              <block type="controls_flow_statements"></block>
            </category>
            <category name="数值" categorystyle="math_category">
              <block type="math_number" gap="32">
                <field name="NUM">123</field>
              </block>
              <block type="math_arithmetic">
                <value name="A">
                  <shadow type="math_number">
                    <field name="NUM">1</field>
                  </shadow>
                </value>
                <value name="B">
                  <shadow type="math_number">
                    <field name="NUM">1</field>
                  </shadow>
                </value>
              </block>
              <block type="math_single">
                <value name="NUM">
                  <shadow type="math_number">
                    <field name="NUM">9</field>
                  </shadow>
                </value>
              </block>
              <block type="math_trig">
                <value name="NUM">
                  <shadow type="math_number">
                    <field name="NUM">45</field>
                  </shadow>
                </value>
              </block>
              <block type="math_constant"></block>
              <block type="math_number_property">
                <value name="NUMBER_TO_CHECK">
                  <shadow type="math_number">
                    <field name="NUM">0</field>
                  </shadow>
                </value>
              </block>
              <block type="math_round">
                <value name="NUM">
                  <shadow type="math_number">
                    <field name="NUM">3.1</field>
                  </shadow>
                </value>
              </block>
              <block type="math_on_list"></block>
              <block type="math_modulo">
                <value name="DIVIDEND">
                  <shadow type="math_number">
                    <field name="NUM">64</field>
                  </shadow>
                </value>
                <value name="DIVISOR">
                  <shadow type="math_number">
                    <field name="NUM">10</field>
                  </shadow>
                </value>
              </block>
              <block type="math_constrain">
                <value name="VALUE">
                  <shadow type="math_number">
                    <field name="NUM">50</field>
                  </shadow>
                </value>
                <value name="LOW">
                  <shadow type="math_number">
                    <field name="NUM">1</field>
                  </shadow>
                </value>
                <value name="HIGH">
                  <shadow type="math_number">
                    <field name="NUM">100</field>
                  </shadow>
                </value>
              </block>
              <block type="math_random_int">
                <value name="FROM">
                  <shadow type="math_number">
                    <field name="NUM">1</field>
                  </shadow>
                </value>
                <value name="TO">
                  <shadow type="math_number">
                    <field name="NUM">100</field>
                  </shadow>
                </value>
              </block>
              <block type="math_random_float"></block>
              <block type="math_atan2">
                <value name="X">
                  <shadow type="math_number">
                    <field name="NUM">1</field>
                  </shadow>
                </value>
                <value name="Y">
                  <shadow type="math_number">
                    <field name="NUM">1</field>
                  </shadow>
                </value>
              </block>
            </category>
            <category name="文本" categorystyle="text_category">
              <block type="text"></block>
              <block type="text_join"></block>
              <block type="text_append">
                <value name="TEXT">
                  <shadow type="text"></shadow>
                </value>
              </block>
              <block type="text_length">
                <value name="VALUE">
                  <shadow type="text">
                    <field name="TEXT">abc</field>
                  </shadow>
                </value>
              </block>
              <block type="text_isEmpty">
                <value name="VALUE">
                  <shadow type="text">
                    <field name="TEXT"></field>
                  </shadow>
                </value>
              </block>
              <block type="text_indexOf">
                <value name="VALUE">
                  <block type="variables_get">
                    <field name="VAR">text</field>
                  </block>
                </value>
                <value name="FIND">
                  <shadow type="text">
                    <field name="TEXT">abc</field>
                  </shadow>
                </value>
              </block>
              <block type="text_charAt">
                <value name="VALUE">
                  <block type="variables_get">
                    <field name="VAR">text</field>
                  </block>
                </value>
              </block>
              <block type="text_getSubstring">
                <value name="STRING">
                  <block type="variables_get">
                    <field name="VAR">text</field>
                  </block>
                </value>
              </block>
              <block type="text_changeCase">
                <value name="TEXT">
                  <shadow type="text">
                    <field name="TEXT">abc</field>
                  </shadow>
                </value>
              </block>
              <block type="text_trim">
                <value name="TEXT">
                  <shadow type="text">
                    <field name="TEXT">abc</field>
                  </shadow>
                </value>
              </block>
              <block type="text_count">
                <value name="SUB">
                  <shadow type="text"></shadow>
                </value>
                <value name="TEXT">
                  <shadow type="text"></shadow>
                </value>
              </block>
              <block type="text_replace">
                <value name="FROM">
                  <shadow type="text"></shadow>
                </value>
                <value name="TO">
                  <shadow type="text"></shadow>
                </value>
                <value name="TEXT">
                  <shadow type="text"></shadow>
                </value>
              </block>
              <block type="text_reverse">
                <value name="TEXT">
                  <shadow type="text"></shadow>
                </value>
              </block>
              <label text="Input/Output:" web-class="ioLabel"></label>
              <block type="text_print">
                <value name="TEXT">
                  <shadow type="text">
                    <field name="TEXT">abc</field>
                  </shadow>
                </value>
              </block>
              <block type="text_prompt_ext">
                <value name="TEXT">
                  <shadow type="text">
                    <field name="TEXT">abc</field>
                  </shadow>
                </value>
              </block>
            </category>
            <category name="列表" categorystyle="list_category">
              <block type="lists_create_with">
                <mutation items="0"></mutation>
              </block>
              <block type="lists_create_with"></block>
              <block type="lists_repeat">
                <value name="NUM">
                  <shadow type="math_number">
                    <field name="NUM">5</field>
                  </shadow>
                </value>
              </block>
              <block type="lists_length"></block>
              <block type="lists_isEmpty"></block>
              <block type="lists_indexOf">
                <value name="VALUE">
                  <block type="variables_get">
                    <field name="VAR">list</field>
                  </block>
                </value>
              </block>
              <block type="lists_getIndex">
                <value name="VALUE">
                  <block type="variables_get">
                    <field name="VAR">list</field>
                  </block>
                </value>
              </block>
              <block type="lists_setIndex">
                <value name="LIST">
                  <block type="variables_get">
                    <field name="VAR">list</field>
                  </block>
                </value>
              </block>
              <block type="lists_getSublist">
                <value name="LIST">
                  <block type="variables_get">
                    <field name="VAR">list</field>
                  </block>
                </value>
              </block>
              <block type="lists_split">
                <value name="DELIM">
                  <shadow type="text">
                    <field name="TEXT">,</field>
                  </shadow>
                </value>
              </block>
              <block type="lists_sort"></block>
              <block type="lists_reverse"></block>
            </category>
            <sep></sep>
            <category
              name="Variables"
              categorystyle="variable_category"
              custom="VARIABLE"
            ></category>
            <category
              name="Functions"
              categorystyle="procedure_category"
              custom="PROCEDURE"
            ></category>
          </xml>
        </template>
      </div>

      <div class="box-code">
        <div class="button-container">
          <el-button type="danger" plain id="run-code" @click="runCode()"
            >运行代码</el-button
          >
          <el-button type="warning" plain id="import" @click="load()"
            >重新加载</el-button
          >
        </div>
        <br />

        <div class="button-container">
          <el-button
            type="primary"
            plain
            id="to-code-js"
            @click="generateCode('javascript')"
            >生成 JavaScript</el-button
          >
          <el-button
            type="success"
            plain
            id="to-code-py"
            @click="generateCode('python')"
            >生成 Python</el-button
          >
          <el-button type="info" plain id="save-json" @click="saveJson()"
            >保存 JSON</el-button
          >
          <el-button type="info" plain id="save-xml" @click="saveXml()"
            >保存 XML</el-button
          >
        </div>

        <!-- 代码显示区 -->
        <div class="code-section">
          <h4>生成的代码</h4>
          <textarea name="" id="textarea" class="box-code-textarea"></textarea>
        </div>

        <!-- 运行结果区 -->
        <div class="result-section">
          <h4>运行结果</h4>
          <div id="run-result" class="run-result-content"></div>

          <!-- 额外的图片预览区域 -->
          <div
            v-if="state.generatedContent.imageUrl"
            class="extra-image-preview"
          >
            <h5>生成的图片:</h5>
            <img
              :src="state.generatedContent.imageUrl"
              class="extra-preview-image"
              alt="AI生成图片"
            />
          </div>
          <div
            v-if="state.generatedContent.videoUrl"
            class="extra-image-preview"
          >
            <h5>生成的视频:</h5>
            <video
              :src="state.generatedContent.videoUrl"
              controls
              class="preview-video"
              alt="AI生成视频"
            ></video>
          </div>

          <!-- 添加台灯显示区域 -->
          <!-- <div class="lamp-preview-container">
                <h5>AI智能台灯</h5>
                <div
                  class="lamp-display"
                  :style="{
                    filter: `brightness(${state.lamp.brightness / 100})`,
                  }"
                >
                  <div
                    class="lamp-image"
                    :style="{ boxShadow: `0 0 40px 20px ${state.lamp.color}80` }"
                  ></div>
                </div>
                <div class="lamp-info">
                  <p>亮度: {{ state.lamp.brightness }}%</p>
                  <p>颜色: {{ state.lamp.color }}</p>
                </div>
              </div> -->
        </div>
      </div>

      <!-- AI结果预览模态框 -->
      <el-dialog
        title="AI生成结果"
        :visible.sync="state.previewVisible"
        width="80%"
        :before-close="handleClosePreview"
      >
        <div
          v-if="state.previewType === 'image'"
          class="preview-image-container"
        >
          <img
            :src="state.previewContent"
            class="preview-image"
            alt="生成的图片"
          />
        </div>
        <div
          v-if="state.previewType === 'video'"
          class="preview-video-container"
        >
          <video
            :src="state.previewContent"
            controls
            class="preview-video"
          ></video>
        </div>
        <div v-if="state.previewType === 'text'" class="preview-text-container">
          <p>{{ state.previewContent }}</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClosePreview">关闭</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { ArrowLeftBold } from "@element-plus/icons-vue";
import * as Blockly from "blockly";
import { javascriptGenerator } from "blockly/javascript";
import { pythonGenerator } from "blockly/python";
import * as hans from "blockly/msg/zh-hans";
import { ElDialog, ElButton, ElMessage } from "element-plus";
// 引入DeskLampView组件
// import DeskLampView from "./virtuallaboratory/DeskLampView.vue";

const router = useRouter();
const isLightOn = ref(false)
const lampColor = ref('#fff') // 默认白色
const lampBrightness = ref(50) // 默认亮度50%
const showLampPreview = ref(true)
// 返回虚拟实验室
const goBackLab = () => {
  router.push("/virtual-laboratory");
};
const goBack = () => {
  showLampPreview.value = true
};
// 切换灯光状态
const toggleLight = () => {
  isLightOn.value = true;

  generateCode('javascript');
  runCode()
}
// 查看代码编程界面显示状态
const handleViewCode = () =>{
  showLampPreview.value = false
}

//【文生图】文生图
import {
  AiImageStatusEnum,
  CreatePainting,
  PaintingGetMys,
  CreateVideo,
  VideoGetMys,
  sendChatMessageStream,
  CreateDialogue,
} from "@/api/questions.js";
import { getModelIdByType, ModelPlatformEnum } from "@/api/teachers.js";
import { ModelTypeEnum } from "@/api/teachers.js";
import { globalState } from "@/utils/globalState.js";

Blockly.setLocale(hans);

// 状态管理
const state = reactive({
  workspace: null,
  generatedContent: {
    imageUrl: "",
    videoUrl: "",
    text: "",
  },
  previewVisible: false,
  previewType: "",
  previewContent: "",
  isProcessing: false,

  //年级
  gradeId: "",

  //【文生图】文生图
  inProgressImageMap: {},

  //【文生视频】文生视频
  inProgressVideoMap: {},

  // 台灯状态
  lamp: {
    brightness: 0, // 默认亮度50%
    color: "#ffffff", // 默认颜色白色
  },

  // 【文本文】对话相关状态
  activeConversationId: null,
  conversationInProgress: false,
  conversationInAbortController: null,
});

// 【文生图】自动刷新image列表的定时器
const inProgressTimer = ref();

// 【文生视频】自动刷新video列表的定时器
const inProgressVideoTimer = ref();

// 初始化Blockly工作区和自定义积木
onMounted(async () => {
  // 从全局状态初始化年级ID
  state.gradeId = globalState.initGradeId();

  // 注册AI语音输入积木
  Blockly.Blocks["ai_voice_input"] = {
    init: function () {
      this.appendDummyInput().appendField("语音输入");
      this.appendValueInput("PROMPT")
        .setCheck("String")
        .appendField("提示文字:");
      this.appendDummyInput()
        .appendField("语言:")
        .appendField(
          new Blockly.FieldDropdown([
            ["中文", "zh-CN"],
            ["英文", "en-US"],
          ]),
          "LANGUAGE"
        );
      this.setOutput(true, "String");
      this.setColour(310);
      this.setTooltip("使用语音识别获取文本输入");
      this.setHelpUrl("");
    },
  };

  // 注册AI文本生成图片积木
  Blockly.Blocks["ai_text_to_image"] = {
    init: function () {
      this.appendDummyInput().appendField("AI生成图片");
      this.appendValueInput("PROMPT").setCheck("String").appendField("提示词:");
      this.appendDummyInput()
        .appendField("等待完成:", "WAIT_LABEL")
        .appendField(new Blockly.FieldCheckbox("TRUE"), "WAIT_FOR_COMPLETION");
      this.setInputsInline(false);
      this.setPreviousStatement(true, null);
      this.setNextStatement(true, null);
      this.setColour(340);
      this.setTooltip("使用AI将文本描述转换为图片");
      this.setHelpUrl("");
    },
  };

  // 注册AI文本生成视频积木
  Blockly.Blocks["ai_text_to_video"] = {
    init: function () {
      this.appendDummyInput().appendField("AI生成视频");
      this.appendValueInput("PROMPT").setCheck("String").appendField("提示词:");
      this.appendDummyInput()
        .appendField("等待完成:", "WAIT_LABEL")
        .appendField(new Blockly.FieldCheckbox("TRUE"), "WAIT_FOR_COMPLETION");
      this.setInputsInline(false);
      this.setPreviousStatement(true, null);
      this.setNextStatement(true, null);
      this.setColour(340);
      this.setTooltip("使用AI将文本描述转换为视频");
      this.setHelpUrl("");
    },
  };

  // 注册AI文本生成文本积木
  Blockly.Blocks["ai_text_to_text"] = {
    init: function () {
      this.appendDummyInput().appendField("AI文本处理");
      this.appendValueInput("PROMPT")
        .setCheck("String")
        .appendField("输入文本:");
      this.appendDummyInput()
        .appendField("模型:")
        .appendField(
          new Blockly.FieldDropdown([
            ["默认", "default"],
            ["对话", "chat"],
            ["分析", "analysis"],
          ]),
          "MODEL"
        );
      this.setOutput(true, "String");
      this.setColour(300);
      this.setTooltip("使用AI处理文本并返回结果");
      this.setHelpUrl("");
    },
  };

  //AI智能台灯单参数积木
  Blockly.Blocks['ai_smart_lamp_single_param'] = {
    init: function() {
      this.appendDummyInput()
          .appendField('智能台灯控制(单参数)');
      this.appendValueInput('PARAMS')
          .setCheck('String')
          .appendField('参数(格式: 颜色,亮度,音乐):');
      this.appendDummyInput()
          .appendField('例如: 蓝,50,平静');
      this.setInputsInline(false);
      this.setPreviousStatement(true, null);
      this.setNextStatement(true, null);
      this.setColour(280);
      this.setTooltip('通过一个参数字符串控制智能台灯的亮度、颜色和音乐\n格式: 颜色,亮度,音乐\n例如: 蓝,50,平静');
      this.setHelpUrl('');
    }
  };

  // 注册AI智能台灯积木
  Blockly.Blocks["ai_smart_lamp"] = {
    init: function () {
      this.appendDummyInput().appendField("智能台灯控制");
      this.appendValueInput("BRIGHTNESS")
        .setCheck(["Number", "String"])
        .appendField("亮度 (0-100):");
      this.appendValueInput("COLOR").setCheck("String").appendField("颜色:");
      this.setInputsInline(false);
      this.setPreviousStatement(true, null);
      this.setNextStatement(true, null);
      this.setColour(280);
      this.setTooltip("控制智能台灯的亮度和颜色");
      this.setHelpUrl("");
    },
  };

  // 注册AI台灯设置亮度积木
  Blockly.Blocks["ai_lamp_set_brightness"] = {
    init: function () {
      this.appendDummyInput().appendField("设置台灯亮度");
      this.appendValueInput("BRIGHTNESS")
        .setCheck(["Number", "String"])
        .appendField("亮度 (0-100):");
      this.setInputsInline(false);
      this.setPreviousStatement(true, null);
      this.setNextStatement(true, null);
      this.setColour(270);
      this.setTooltip("设置智能台灯的亮度");
      this.setHelpUrl("");
    },
  };

  // 注册AI台灯设置颜色积木
  Blockly.Blocks["ai_lamp_set_color"] = {
    init: function () {
      this.appendDummyInput().appendField("设置台灯颜色");
      this.appendValueInput("COLOR").setCheck("String").appendField("颜色:");
      this.appendDummyInput().appendField("可选颜色: 红,蓝,绿,黄,青,靛,紫");
      this.setInputsInline(false);
      this.setPreviousStatement(true, null);
      this.setNextStatement(true, null);
      this.setColour(275);
      this.setTooltip("设置智能台灯的颜色");
      this.setHelpUrl("");
    },
  };

  // 注册JavaScript代码生成器
  registerJavaScriptGenerators();

  // 注册Python代码生成器
  registerPythonGenerators();

  // 初始化工作区
  state.workspace = Blockly.inject("blocklyDiv", {
    toolbox: document.getElementById("toolbox"),
    grid: { spacing: 20, length: 3, colour: "#ccc", snap: true },
    trashcan: true,
  });

// 加载初始XML内容
  try {
    // 使用字符串拼接代替模板字符串，避免特殊字符问题
    const initialXml = '<xml xmlns="https://developers.google.com/blockly/xml">\n' +
        '  <block type="ai_smart_lamp_single_param" id="]t3dfZuv34^1VI%c+Vww" x="50" y="90">\n' +
        '    <value name="PARAMS">\n' +
        '      <block type="ai_text_to_text" id="iIw6Y|#j@Kh_}]!6A;Ef">\n' +
        '        <field name="MODEL">default</field>\n' +
        '        <value name="PROMPT">\n' +
        '          <block type="ai_voice_input" id="qo`+VHZpJ0^Y_;J2T!VT">\n' +
        '            <field name="LANGUAGE">zh-CN</field>\n' +
        '            <value name="PROMPT">\n' +
        '              <block type="text" id="uoH(8P)Q{|IMHBw=Gv">\n' +
        '                <field name="TEXT">请说话：</field>\n' +
        '              </block>\n' +
        '            </value>\n' +
        '          </block>\n' +
        '        </value>\n' +
        '      </block>\n' +
        '    </value>\n' +
        '  </block>\n' +
        '</xml>';

    const xml = Blockly.utils.xml.textToDom(initialXml);
    Blockly.Xml.domToWorkspace(xml, state.workspace);

    // 强制重新渲染工作区
    state.workspace.render();

    // 添加更长的延迟确保DOM完全更新后再设置属性
    setTimeout(() => {
      // 确保所有块都可移动和可删除
      const blocks = state.workspace.getAllBlocks();
      blocks.forEach(block => {
        // 直接设置块的可移动和可删除属性为true
        block.setMovable(true);
        block.setDeletable(true);
        // 设置嵌套连接点也可编辑
        if (block.inputList) {
          block.inputList.forEach(input => {
            if (input.connection) {
              input.connection.setCheck(null); // 允许任何类型的连接
              input.connection.setHangingPriority(10); // 设置较高的连接优先级
            }
          });
        }
      });

      // 再次渲染以应用属性更改
      state.workspace.render();

      // 初始化完成后手动生成一次代码
      generateCode("javascript");

      // 初始化完成后添加工作区变化监听器
      setTimeout(() => {
        state.workspace.addChangeListener(() => generateCode("javascript"));
      }, 500);
    }, 1500);
  } catch (error) {
    console.error('加载初始XML内容失败:', error);
  }

// 工作区变化时自动生成JavaScript代码
// 注意：这里设置监听器的位置移到了初始化完成后
  setTimeout(() => {
    state.workspace.addChangeListener(() => generateCode("javascript"));
  }, 1500);
});
// 组件卸载时清除定时器
onUnmounted(() => {
  if (inProgressTimer.value) {
    clearInterval(inProgressTimer.value);
  }

  if (inProgressVideoTimer.value) {
    clearInterval(inProgressVideoTimer.value);
  }
});

// AI服务配置
const aiServiceConfig = {
  baseUrl: import.meta.env.VITE_BASE_URL + "/bjdxWeb/ai",
  endpoints: {
    voiceRecognition: "/voice-recognition",
    textToImage: "/create-painting",
    textToVideo: "/text-to-video",
    textToText: "/text-to-text",
    semanticAnalysis: "/semantic-analysis",
  },
};

// AI服务模块 - 统一管理API调用
const aiService = {
  // 语音识别
  async recognizeVoice(promptText = "", language = "zh-CN") {
    console.log("recognizeVoice", promptText, language);
    // 前端语音采集
    const recognitionResult = await this.captureVoice(language, promptText);
    if (!recognitionResult) return "";

    // 可选：将语音识别结果发送到后端进行优化处理
    // try {
    //   const response = await fetch(`${aiServiceConfig.baseUrl}${aiServiceConfig.endpoints.voiceRecognition}`, {
    //     method: 'POST',
    //     headers: { 'Content-Type': 'application/json' },
    //     body: JSON.stringify({
    //       text: recognitionResult,
    //       language
    //     })
    //   });
    //
    //   if (response.ok) {
    //     const data = await response.json();
    //     return data.optimizedText || recognitionResult;
    //   }
    // } catch (error) {
    //   console.warn('语音识别优化失败，使用原始结果', error);
    // }

    return recognitionResult;
  },

  // 前端语音采集
  captureVoice(language, promptText) {
    console.log("captureVoice", language, promptText);
    return new Promise((resolve) => {
      if (
        !("webkitSpeechRecognition" in window) &&
        !("SpeechRecognition" in window)
      ) {
        ElMessage.warning("您的浏览器不支持语音识别功能");
        resolve("");
        return;
      }

      const SpeechRecognition =
        window.SpeechRecognition || window.webkitSpeechRecognition;
      const recognition = new SpeechRecognition();

      recognition.lang = language;
      recognition.interimResults = false;
      recognition.maxAlternatives = 1;

      if (promptText) {
        ElMessage.info(promptText + "\n请开始说话...");
      } else {
        ElMessage.info("请开始说话...");
      }

      recognition.onresult = (event) => {
        const speechResult = event.results[0][0].transcript;
        console.log("语音识别结果:", speechResult);
        resolve(speechResult);
      };

      recognition.onerror = (event) => {
        console.error("语音识别错误:", event.error);
        ElMessage.error("语音识别发生错误: " + event.error);
        resolve("");
      };

      recognition.onend = () => {
        console.log("语音识别已结束");
      };

      recognition.start();
    });
  },

  // 文本生成图片
  async textToImage(prompt, waitForCompletion = true) {
    console.log("textToImage", prompt, waitForCompletion);

    state.isProcessing = true;
    try {
      //获取文生图-模型id
      const modelRes = await getModelIdByType({
        type: ModelTypeEnum.TEXT_TO_IMAGE,
        platform: ModelPlatformEnum.DOUBAO,
      });
      if (!modelRes.data) {
        ElMessage.error("获取模型ID失败");
        return null;
      }

      // 使用CreatePainting API创建图片任务
      const createRes = await CreatePainting({
        modelId: modelRes.data,
        prompt: prompt,
        width: 1024,
        height: 1024,
      });

      // 记录任务ID到映射中
      state.inProgressImageMap[createRes.data] = {
        id: createRes.data,
        status: AiImageStatusEnum.IN_PROGRESS,
      };

      // 开始轮询任务状态
      if (!inProgressTimer.value) {
        this.startImagePolling();
      }

      // 如果需要等待完成，等待图片生成完成
      if (waitForCompletion) {
        return await this.waitForImageCompletion(createRes.data);
      }

      return createRes.data; // 返回任务ID
    } catch (error) {
      console.error("生成图片失败:", error);
      ElMessage.error("生成图片失败: " + error.message);
      return null;
    } finally {
      state.isProcessing = false;
    }
  },

  // 【文生图】开始轮询图片生成状态
  startImagePolling() {
    if (inProgressTimer.value) {
      clearInterval(inProgressTimer.value);
    }

    inProgressTimer.value = setInterval(async () => {
      await this.refreshWatchImages();
    }, 3000); // 每3秒轮询一次
  },

  // 【文生图】轮询生成中的image列表
  async refreshWatchImages() {
    const imageIds = Object.keys(state.inProgressImageMap).map(Number);
    if (imageIds.length === 0) {
      if (inProgressTimer.value) {
        clearInterval(inProgressTimer.value);
        inProgressTimer.value = null;
      }
      return;
    }

    try {
      const list = await PaintingGetMys(imageIds);
      const newWatchImages = {};

      list.data.forEach((image) => {
        if (image.status === AiImageStatusEnum.IN_PROGRESS) {
          newWatchImages[image.id] = image;
        } else if (image.status === AiImageStatusEnum.SUCCESS) {
          // 图片生成完成，更新状态并显示预览
          state.generatedContent.imageUrl = image.picUrl;
          state.previewType = "image";
          state.previewContent = image.picUrl;
          state.previewVisible = true;

          // 打印到控制台，便于在结果区域显示
          console.log("图片生成完成:", image.picUrl);
        } else if (image.status === AiImageStatusEnum.FAIL) {
          // 图片生成失败
          ElMessage.error("图片生成失败: " + (image.error || "未知错误"));
          console.error("图片生成失败:", image.id, image.error);
        }
      });

      state.inProgressImageMap = newWatchImages;

      // 如果没有正在处理的图片，清除定时器
      if (Object.keys(newWatchImages).length === 0 && inProgressTimer.value) {
        clearInterval(inProgressTimer.value);
        inProgressTimer.value = null;
      }
    } catch (error) {
      console.error("轮询图片状态失败:", error);
    }
  },

  // 【文生图】等待图片生成完成
  async waitForImageCompletion(imageId) {
    return new Promise((resolve, reject) => {
      const checkInterval = setInterval(async () => {
        try {
          const list = await PaintingGetMys([imageId]);
          if (list.data && list.data.length > 0) {
            const image = list.data[0];
            console.log(
              "图片状态:",
              image.status,
              image.picUrl,
              AiImageStatusEnum
            );
            if (image.status === AiImageStatusEnum.SUCCESS) {
              clearInterval(checkInterval);
              resolve(image.picUrl);
            } else if (image.status === AiImageStatusEnum.FAIL) {
              clearInterval(checkInterval);
              reject(new Error(image.error || "图片生成失败"));
            }
          }
        } catch (error) {
          clearInterval(checkInterval);
          reject(error);
        }
      }, 3000);
    });
  },

  // 文本生成视频
  async textToVideo(prompt, waitForCompletion = true) {
    console.log("textToVideo", prompt, waitForCompletion);

    state.isProcessing = true;
    try {
      //获取视频生成模型id
      const modelRes = await getModelIdByType({
        type: ModelTypeEnum.IMAGE_TO_VIDEO,
        platform: ModelPlatformEnum.DOUBAO,
      });
      if (!modelRes.data) {
        ElMessage.error("获取模型ID失败");
        return null;
      }

      // 使用CreateVideo API创建视频任务
      const createRes = await CreateVideo({
        modelId: modelRes.data,
        prompt: prompt,
        duration: 4,
        resolution: "1080P",
      });

      // 记录任务ID到视频专用映射中
      state.inProgressVideoMap[createRes.data] = {
        id: createRes.data,
        status: AiImageStatusEnum.IN_PROGRESS,
      };

      // 开始视频专用的轮询任务状态
      if (!inProgressVideoTimer.value) {
        this.startVideoPolling();
      }

      // 如果需要等待完成，等待视频生成完成
      if (waitForCompletion) {
        return await this.waitForVideoCompletion(createRes.data);
      }

      return createRes.data; // 返回任务ID
    } catch (error) {
      console.error("生成视频失败:", error);
      ElMessage.error("生成视频失败: " + error.message);
      return null;
    } finally {
      state.isProcessing = false;
    }
  },

  // 【视频生成】开始轮询视频生成状态
  startVideoPolling() {
    if (inProgressVideoTimer.value) {
      clearInterval(inProgressVideoTimer.value);
    }

    inProgressVideoTimer.value = setInterval(async () => {
      await this.refreshWatchVideos();
    }, 3000); // 每3秒轮询一次
  },

  // 【视频生成】轮询生成中的视频列表
  async refreshWatchVideos() {
    const videoIds = Object.keys(state.inProgressVideoMap).map(Number);
    if (videoIds.length === 0) {
      if (inProgressVideoTimer.value) {
        clearInterval(inProgressVideoTimer.value);
        inProgressVideoTimer.value = null;
      }
      return;
    }

    try {
      const list = await VideoGetMys(videoIds);
      const newWatchVideos = {};

      list.data.forEach((video) => {
        if (video.status === AiImageStatusEnum.IN_PROGRESS) {
          newWatchVideos[video.id] = video;
        } else if (video.status === AiImageStatusEnum.SUCCESS) {
          // 视频生成完成，更新状态并显示预览
          state.generatedContent.videoUrl = video.videoUrl;
          state.previewType = "video";
          state.previewContent = video.videoUrl;
          state.previewVisible = true;

          // 打印到控制台，便于在结果区域显示
          console.log("视频生成完成:", video.videoUrl);
        } else if (video.status === AiImageStatusEnum.FAIL) {
          // 视频生成失败
          ElMessage.error("视频生成失败: " + (video.error || "未知错误"));
          console.error("视频生成失败:", video.id, video.error);
        }
      });

      state.inProgressVideoMap = newWatchVideos;

      // 如果没有正在处理的视频，清除定时器
      if (
        Object.keys(newWatchVideos).length === 0 &&
        inProgressVideoTimer.value
      ) {
        clearInterval(inProgressVideoTimer.value);
        inProgressVideoTimer.value = null;
      }
    } catch (error) {
      console.error("轮询视频状态失败:", error);
    }
  },

  // 【视频生成】等待视频生成完成
  async waitForVideoCompletion(videoId) {
    return new Promise((resolve, reject) => {
      const checkInterval = setInterval(async () => {
        try {
          const list = await VideoGetMys([videoId]);
          if (list.data && list.data.length > 0) {
            const video = list.data[0];
            console.log("视频状态:", video.status, video.videoUrl);
            if (video.status === AiImageStatusEnum.SUCCESS) {
              clearInterval(checkInterval);
              // 视频生成完成，设置预览状态
              state.generatedContent.videoUrl = video.videoUrl;
              state.previewType = "video";
              state.previewContent = video.videoUrl;
              state.previewVisible = true;
              resolve(video.videoUrl);
            } else if (video.status === AiImageStatusEnum.FAIL) {
              clearInterval(checkInterval);
              reject(new Error(video.error || "视频生成失败"));
            }
          }
        } catch (error) {
          clearInterval(checkInterval);
          reject(error);
        }
      }, 3000);
    });
  },

  // 文本生成文本（如AI对话）
  async textToText(prompt, model = "default") {
    console.log("textToText", prompt, model);
    state.isProcessing = true;

    try {
      // 如果没有活跃的对话ID，创建新对话
      if (!state.activeConversationId) {
        // 使用与TextToText.vue相同的方式创建对话
        const res = await CreateDialogue({ roleId: 75 });
        state.activeConversationId = res.data;
        console.log("创建会话：", res.data);
      }

      // 创建AbortController实例
      state.conversationInAbortController = new AbortController();
      state.conversationInProgress = true;

      // 使用流式API发送消息
      let resultText = "";
      let isFirstChunk = true;

      await sendChatMessageStream(
        state.activeConversationId,
        prompt,
        null,
        state.conversationInAbortController,
        true, // 启用上下文
        async (res) => {
          try {
            const { code, data, msg } = JSON.parse(res.data);
            if (code !== 0) {
              console.log(`对话异常! ${msg}`);
              return;
            }

            // 根据事件类型处理
            if (data.eventType === "TEXT") {
              // 如果内容为空，就不处理
              if (data.receive?.content === "") {
                return;
              }

              // 处理文本消息
              resultText += data.receive.content;

              // 首次返回时更新预览内容
              if (isFirstChunk) {
                isFirstChunk = false;
                // 设置预览内容
                state.generatedContent.text = resultText;
                state.previewType = "text";
                state.previewContent = resultText;
                if (!state.previewVisible) {
                  state.previewVisible = true;
                }
              } else {
                // 更新预览内容
                state.generatedContent.text = resultText;
                state.previewContent = resultText;
              }
            }
          } catch (error) {
            console.error("处理流式响应失败:", error);
          }
        },
        (error) => {
          console.log(`对话异常! ${error}`);
          this.stopTextToTextStream();
          throw error;
        },
        () => {
          console.log(`结束对话！`);
          this.stopTextToTextStream();
        }
      );

      // 确保最终结果被设置
      if (resultText) {
        state.generatedContent.text = resultText;
        state.previewType = "text";
        state.previewContent = resultText;
        if (!state.previewVisible) {
          state.previewVisible = true;
        }
      }

      return resultText;
    } catch (error) {
      console.error("AI文本处理失败:", error);
      ElMessage.error("AI文本处理失败: " + error.message);
      return null;
    } finally {
      state.isProcessing = false;
    }
  },

  // 停止文本生成流
  stopTextToTextStream() {
    if (state.conversationInAbortController) {
      state.conversationInAbortController.abort();
    }
    state.conversationInProgress = false;
  },

  // 设置台灯亮度
  async setLampBrightness(brightness) {
    // console.log('setLampBrightness', brightness);

    // 验证亮度值在0-100之间
    const validBrightness = Math.max(0, Math.min(100, parseInt(brightness) || 0));

    // 更新状态
    state.lamp.brightness = validBrightness;

    // 模拟API调用（实际项目中可替换为真实API）
    console.log(`台灯亮度已设置为: ${validBrightness}%`);

    return validBrightness;
  },

  // 设置台灯颜色
  async setLampColor(color) {
    console.log("setLampColor", color);

    // 预定义的颜色映射
    const colorMap = {
      '红': '#ff0000',
      '蓝': '#0000ff',
      '绿': '#00ff00',
      '黄': '#ffff00',
      '青': '#00ffff',
      '靛': '#4b0082',
      '紫': '#800080',
      '白': '#ffffff',
      '黑': '#000000'
    };

    // 获取有效的颜色值
    let validColor = colorMap[color] || color;

    // 检查是否是有效的颜色格式
    if (!/^#[0-9A-F]{6}$/i.test(validColor)) {
      validColor = "#ffffff"; // 默认白色
    }

    // 更新状态
    state.lamp.color = validColor;

    // 模拟API调用（实际项目中可替换为真实API）
    console.log(`台灯颜色已设置为: ${validColor}`);

    return validColor;
  },

  // 综合控制台灯(参数格式："颜色, 亮度, 音乐")
  async controlLampWithSingleParam(params) {
    // 解析参数字符串
    let color = '白'; // 默认颜色
    let brightness = 0; // 默认亮度
    let music = ''; // 音乐信息（暂不处理）

    if (params && typeof params === 'string') {
      // 根据逗号分割参数
      const paramArray = params.split('，').map(p => p.trim());

      // 提取颜色（第一个参数）
      if (paramArray.length > 0 && paramArray[0]) {
        color = paramArray[0];
      }

      // 提取亮度（第二个参数）
      if (paramArray.length > 1 && paramArray[1]) {
        brightness = paramArray[1];
      }

      // 提取音乐（第三个参数，暂不处理）
      if (paramArray.length > 2 && paramArray[2]) {
        music = paramArray[2];
        console.log('音乐信息（暂不处理）:', music);
      }
    }
    // 调用控制台灯方法
    return await this.controlLamp(brightness, color);
  },

  // 综合控制台灯(参数格式："颜色, 亮度, 音乐")
  async controlLamp(brightness, color) {
    console.log("controlLamp", brightness, color);

    // 先设置亮度
    await this.setLampBrightness(brightness);

    // 再设置颜色
    await this.setLampColor(color);

    return { brightness: state.lamp.brightness, color: state.lamp.color };
  },
};

// 注册JavaScript代码生成器
function registerJavaScriptGenerators() {
  // 语音输入
  javascriptGenerator.forBlock['ai_voice_input'] = function(block, generator) {
    const prompt = generator.valueToCode(block, 'PROMPT', javascriptGenerator.ORDER_ATOMIC);
    const language = block.getFieldValue('LANGUAGE');
    const code = `await aiService.recognizeVoice(${prompt || "''"}, '${language}')`;
    console.log('ai_voice_input', prompt, language);
    return [code, javascriptGenerator.ORDER_ATOMIC];
  };

  // 文本生成图片
  javascriptGenerator.forBlock['ai_text_to_image'] = function(block, generator) {
    const prompt = generator.valueToCode(block, 'PROMPT', javascriptGenerator.ORDER_ATOMIC);
    const waitForCompletion = block.getFieldValue('WAIT_FOR_COMPLETION') === 'TRUE';
    const code = `await aiService.textToImage(${prompt}, ${waitForCompletion});`;
    console.log('ai_text_to_image', prompt, waitForCompletion);
    return code;
  };

  // 文本生成视频
  javascriptGenerator.forBlock['ai_text_to_video'] = function(block, generator) {
    const prompt = generator.valueToCode(block, 'PROMPT', javascriptGenerator.ORDER_ATOMIC);
    const waitForCompletion = block.getFieldValue('WAIT_FOR_COMPLETION') === 'TRUE';
    const code = `await aiService.textToVideo(${prompt}, ${waitForCompletion});`;
    console.log('ai_text_to_video', prompt, waitForCompletion);
    return code;
  };

  // 文本生成文本
  javascriptGenerator.forBlock['ai_text_to_text'] = function(block, generator) {
    const prompt = generator.valueToCode(block, 'PROMPT', javascriptGenerator.ORDER_ATOMIC);
    const model = block.getFieldValue('MODEL');
    const code = `await aiService.textToText(${prompt}, '${model}')`;
    console.log('ai_text_to_text', prompt, model);
    return [code, javascriptGenerator.ORDER_ATOMIC];
  };

  // 智能台灯控制（单参数）
  javascriptGenerator.forBlock['ai_smart_lamp_single_param'] = function(block, generator) {
    const params = generator.valueToCode(block, 'PARAMS', javascriptGenerator.ORDER_ATOMIC);
    const code = `await aiService.controlLampWithSingleParam(${params || "'白,0,平静'"});`;
    return code;
  };

  // 智能台灯控制（多参数）
  javascriptGenerator.forBlock['ai_smart_lamp'] = function(block, generator) {
    const brightness = generator.valueToCode(block, 'BRIGHTNESS', javascriptGenerator.ORDER_ATOMIC);
    const color = generator.valueToCode(block, 'COLOR', javascriptGenerator.ORDER_ATOMIC);
    const code = `await aiService.controlLamp(${brightness || '0'}, ${color || "'白'"});`;
    return code;
  };

  // 设置台灯亮度
  javascriptGenerator.forBlock['ai_lamp_set_brightness'] = function(block, generator) {
    const brightness = generator.valueToCode(block, 'BRIGHTNESS', javascriptGenerator.ORDER_ATOMIC);
    const code = `await aiService.setLampBrightness(${brightness || '0'});`;
    return code;
  };

  // 设置台灯颜色
  javascriptGenerator.forBlock['ai_lamp_set_color'] = function(block, generator) {
    const color = generator.valueToCode(block, 'COLOR', javascriptGenerator.ORDER_ATOMIC);
    const code = `await aiService.setLampColor(${color || "'白'"});`;
    return code;
  };
}

// 注册Python代码生成器
function registerPythonGenerators() {
  // 语音输入
  pythonGenerator.forBlock['ai_voice_input'] = function(block, generator) {
    const prompt = generator.valueToCode(block, 'PROMPT', pythonGenerator.ORDER_ATOMIC);
    const language = block.getFieldValue('LANGUAGE');
    const code = `ai_service.recognize_voice(${prompt || "''"}, '${language}')`;
    return [code, pythonGenerator.ORDER_ATOMIC];
  };

  // 文本生成图片
  pythonGenerator.forBlock['ai_text_to_image'] = function(block, generator) {
    const prompt = generator.valueToCode(block, 'PROMPT', pythonGenerator.ORDER_ATOMIC);
    const waitForCompletion = block.getFieldValue('WAIT_FOR_COMPLETION') === 'TRUE';
    const code = `ai_service.text_to_image(${prompt}, ${waitForCompletion})\n`;
    return code;
  };

  // 文本生成视频
  pythonGenerator.forBlock['ai_text_to_video'] = function(block, generator) {
    const prompt = generator.valueToCode(block, 'PROMPT', pythonGenerator.ORDER_ATOMIC);
    const waitForCompletion = block.getFieldValue('WAIT_FOR_COMPLETION') === 'TRUE';
    const code = `ai_service.text_to_video(${prompt}, ${waitForCompletion})\n`;
    return code;
  };

  // 文本生成文本
  pythonGenerator.forBlock['ai_text_to_text'] = function(block, generator) {
    const prompt = generator.valueToCode(block, 'PROMPT', pythonGenerator.ORDER_ATOMIC);
    const model = block.getFieldValue('MODEL');
    const code = `ai_service.text_to_text(${prompt}, '${model}')`;
    return [code, pythonGenerator.ORDER_ATOMIC];
  };

  // 智能台灯控制
  pythonGenerator.forBlock['ai_smart_lamp'] = function(block, generator) {
    const brightness = generator.valueToCode(block, 'BRIGHTNESS', pythonGenerator.ORDER_ATOMIC);
    const color = generator.valueToCode(block, 'COLOR', pythonGenerator.ORDER_ATOMIC);
    const code = `ai_service.control_lamp(${brightness || '0'}, ${color || "'白'"})`;
    return code;
  };

  // 设置台灯亮度
  pythonGenerator.forBlock['ai_lamp_set_brightness'] = function(block, generator) {
    const brightness = generator.valueToCode(block, 'BRIGHTNESS', pythonGenerator.ORDER_ATOMIC);
    const code = `ai_service.set_lamp_brightness(${brightness || '0'})`;
    return code;
  };

  // 设置台灯颜色
  pythonGenerator.forBlock['ai_lamp_set_color'] = function(block, generator) {
    const color = generator.valueToCode(block, 'COLOR', pythonGenerator.ORDER_ATOMIC);
    const code = `ai_service.set_lamp_color(${color || "'白'"})`;
    return code;
  };
}

// 生成代码
const generateCode = (language) => {
  if (!state.workspace) {
    console.error("workspace 未正确初始化");
    return;
  }

  let generator;
  if (language === "javascript") {
    generator = javascriptGenerator;
  } else if (language === "python") {
    generator = pythonGenerator;
  } else {
    console.error("不支持的语言类型");
    return;
  }

  const code = generator.workspaceToCode(state.workspace);
  document.getElementById("textarea").value = code;
};

// 运行代码
async function runCode() {
  try {
    const codeTextarea = document.getElementById("textarea");
    const code = codeTextarea.value;
    const resultElement = document.getElementById("run-result");

    // 清空之前的结果
    resultElement.innerHTML = '<div class="running-indicator">代码运行中...</div>';

    // 保存原始console方法
    const originalConsoleLog = console.log;
    const originalConsoleError = console.error;
    const originalConsoleWarn = console.warn;

    // 创建输出缓冲区
    let outputBuffer = "";

    // 重定义console方法
    console.log = (...args) => {
      // 过滤掉包含Vue警告的日志
      const message = args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : arg).join(' ');

      // 只显示不包含Vue warn的日志
      if (!message.includes('[Vue warn]')) {
        outputBuffer += '<div class="log-message">' + message + '</div>';
        resultElement.innerHTML = outputBuffer;
      }
      originalConsoleLog.apply(console, args);
    };

    console.error = (...args) => {
      // 过滤掉包含Vue警告的日志
      const message = args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : arg).join(' ');

      // 只显示不包含Vue warn的日志
      if (!message.includes('[Vue warn]')) {
        outputBuffer += '<div class="error-message">' + message + '</div>';
        resultElement.innerHTML = outputBuffer;
      }
      originalConsoleError.apply(console, args);
    };

    console.warn = (...args) => {
      // 过滤掉包含Vue警告的日志
      const message = args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : arg).join(' ');

      // 只显示不包含Vue warn的日志
      if (!message.includes('[Vue warn]')) {
        outputBuffer += '<div class="warn-message">' + message + '</div>';
        resultElement.innerHTML = outputBuffer;
      }
      originalConsoleWarn.apply(console, args);
    };

    try {
      // 添加安全检查
      if (code.includes('eval(') || code.includes('Function(') ||
          code.includes('document.write') || code.includes('window.location')) {
        throw new Error('代码包含不安全的操作');
      }

      // 包装代码为异步函数执行，支持await
      const wrappedCode = `(async () => { ${code} })()`;
      await new Function(wrappedCode)();

      if (outputBuffer === '') {
        outputBuffer += '<div class="success-message">代码执行成功</div>';
        resultElement.innerHTML = outputBuffer;
      }
    } catch (error) {
      outputBuffer += `<div class="error-message">执行错误: ${error.message}</div>`;
      resultElement.innerHTML = outputBuffer;
    } finally {
      // 恢复原始console方法
      console.log = originalConsoleLog;
      console.error = originalConsoleError;
      console.warn = originalConsoleWarn;
    }
  } catch (err) {
    console.error('运行代码时发生错误:', err);
    document.getElementById('run-result').innerHTML =
        `<div class="error-message">运行代码时发生错误: ${err.message}</div>`;
  }
}

// 保存JSON
function saveJson() {
  try {
    const output = document.getElementById('textarea');
    const json = Blockly.serialization.workspaces.save(state.workspace);
    output.value = JSON.stringify(json, null, 2);
    output.focus();
    output.select();
    taChange();
    ElMessage.success('JSON保存成功');
  } catch (error) {
    console.error('保存JSON失败:', error);
    ElMessage.error('保存JSON失败: ' + error.message);
  }
}

// 保存XML
function saveXml() {
  const output = document.getElementById('textarea');
  const xml = Blockly.Xml.workspaceToDom(state.workspace);
  output.value = Blockly.Xml.domToPrettyText(xml);
  output.focus();
  output.select();
  taChange();
}

// 重新加载
function load() {
  const input = document.getElementById('textarea');
  if (!input.value) return;

  try {
    //关闭预览
    handleClosePreview();

    const valid = saveIsValid(input.value);
    if (valid.json) {
      const parsedState = JSON.parse(input.value);
      Blockly.serialization.workspaces.load(parsedState, state.workspace);
    } else if (valid.xml) {
      const xml = Blockly.utils.xml.textToDom(input.value);
      Blockly.Xml.domToWorkspace(xml, state.workspace);
    }
    taChange();
  } catch (error) {
    console.error("加载失败:", error);
    ElMessage.error("加载失败: " + error.message);
  }
}

function taChange() {
  const textarea = document.getElementById("textarea");
  if (sessionStorage) {
    sessionStorage.setItem("textarea", textarea.value);
  }
  const valid = saveIsValid(textarea.value);
  document.getElementById("import").disabled = !valid.json && !valid.xml;
}

function saveIsValid(save) {
  let validJson = true;
  try {
    JSON.parse(save);
  } catch (e) {
    validJson = false;
  }

  let validXml = true;
  try {
    Blockly.utils.xml.textToDom(save);
  } catch (e) {
    validXml = false;
  }

  return { json: validJson, xml: validXml };
}

// 关闭预览
function handleClosePreview() {
  state.previewVisible = false;
  state.previewContent = "";
  state.previewType = "";
  state.generatedContent.text = null;
  state.generatedContent.imageUrl = null;
  state.generatedContent.videoUrl = null;
}

// 将aiService挂载到window，以便执行生成的代码时可以访问
window.aiService = aiService;
</script>

<style scoped lang="scss">
/* 原有样式保持不变 */
@use "sass:math";

@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}
// 智能台灯
.desk-lamp-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.full-screen-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 台灯灯光样式 - 使用动态颜色 */
.lamp-light-mask {
  position: absolute;
  width: rpx(78);
  height: rpx(350);
  margin-top: rpx(148.5);
  margin-left: rpx(192);
  background: linear-gradient(to bottom, var(--lamp-color) 0%, var(--lamp-color) 20%, rgba(255, 255, 255, 0) 80%);
  filter: blur(40px);
  transform: rotate(8.5deg);
  transform-origin: top center;
  opacity: var(--lamp-opacity, 0.6);
  /* 创建扇形效果 */
  clip-path: polygon(0% 0%, 100% 0%, 200% 100%, -100% 100%);
}

/* 灯光信息显示 */
.lamp-info {
  position: absolute;
  bottom: 100px;
  right: 30px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-radius: 8px;
  backdrop-filter: blur(10px);
  color: white;
  font-size: 14px;
  z-index: 1000;
}

/* 标题框样式 */
.desk-lamp-title-box {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
}

.desk-lamp-box-icon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  color: white;
  font-weight: 500;
}

.desk-lamp-box-icon:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateX(-3px);
}

.left-icon {
  font-size: 18px;
}

/* 右下角按钮组样式 */
.button-group {
  position: absolute;
  bottom: 30px;
  right: 30px;
  display: flex;
  gap: 15px;
  z-index: 1000;
}

.control-button {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.run-button {
  background-color: rgba(64, 169, 255, 0.8);
  color: white;
  border: none;
}

.run-button:hover {
  background-color: rgba(64, 169, 255, 1);
  transform: translateY(-2px);
}

.code-button {
  background-color: rgba(132, 94, 255, 0.8);
  color: white;
  border: none;
}

.code-button:hover {
  background-color: rgba(132, 94, 255, 1);
  transform: translateY(-2px);
}

// 页面主容器样式
.page-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #001169, #b4a8e1);
  display: flex;
  flex-direction: column;
}

// 标题样式
.title-box {
  height: rpx(30);
}
.box-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  color: white;
  padding-left: rpx(15);
  font-size: rpx(10);
  cursor: pointer;
}
.box-icon .left-icon {
  margin-left: rpx(10);
  margin-right: rpx(5);
}

.home-container {
  flex: 1;
  display: flex;
  // padding-top: rpx(10);
}

.box-blockly {
  width: 60%;
  height: 90%;
  padding: rpx(10) rpx(10);
  float: left;
}

.box-code {
  color: white;
  width: 35%;
  height: 90%;
  padding: rpx(10) rpx(10);
  display: flex;
  flex-direction: column;

  .button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
  }

  .button-container :deep(.el-button) {
    flex-shrink: 0;
  }

  .code-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;

    .box-code-textarea {
      flex: 1;
      resize: none;
      background-color: #f8f9fa;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 10px;
      overflow-y: auto;
      font-family: monospace;
      font-size: 14px;
    }
  }

  .result-section {
    flex: 1;
    display: flex;
    flex-direction: column;

    .run-result-content {
      color: black;
      flex: 1;
      background-color: #f8f9fa;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 10px;
      overflow-y: auto;
      font-family: monospace;
      font-size: 14px;
    }
  }
}

// AI模块样式
[categorystyle="ai_category"] > .blocklyTreeRow {
  background-color: #9c27b0 !important;
}

// 运行结果样式
.running-indicator {
  color: #666;
}
.log-message {
  color: #333;
}
.error-message {
  color: #dc3545;
}
.warn-message {
  color: #ffc107;
}
.success-message {
  color: #28a745;
}

// 预览样式
.preview-image-container,
.preview-video-container {
  display: flex;
  justify-content: center;
}

.preview-image,
.preview-video {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 4px;
}

.preview-text-container {
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

//【文生图预览】
.extra-image-preview {
  color: black;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.extra-preview-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 4px;
}

//台灯
.lamp-preview-container {
  margin-top: 20px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  text-align: center;
}

.lamp-display {
  margin: 15px auto;
  position: relative;
  transition: all 0.3s ease;
}

.lamp-image {
  width: 100px;
  height: 150px;
  margin: 0 auto;
  background-color: #e0e0e0;
  border-radius: 10px 10px 0 0;
  position: relative;
  box-shadow: 0 0 40px 20px #ffffff80;
  transition: box-shadow 0.5s ease;

  &::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 40px;
    background-color: #f5f5f5;
    border-radius: 5px;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 40px;
    width: 20px;
    height: 30px;
    background-color: #888888;
  }
}

.lamp-info {
  margin-top: 10px;
  font-size: 14px;
  color: #ffffff;
}
</style>