middleground_code_v2/src/views/LinkUp/compoment/addDialogChunk.vue

<template>
  <div class="addDialogChunk">
    <base-right-dialog
      @handleClose="examineHandleClose"
      :dialogVisible="examineOperateDialog"
      size="100%"
      :appendBody="true"
      :loading="sceneLoading"
      :footerShow="true"
      :submitShow="true"
      @handleConfirmClick="handleConfirmClick"
      :submitTitle="'发布'"
      :submitIcon="'el-icon-upload2'"
      :title="sceneName"
    >
      <template #operateTitle>
        <img
          style="width: 15px; height: 15px; margin-left: 10px; cursor: pointer"
          src="../images/edit.svg"
          @click="editSceneName"
        />
      </template>
      <div
        class="rightDialogClass_main drawContent"
        v-if="drawShowList.length > 0"
        style="background: #fff"
      >
        <!-- 步骤画布 -->
        <div class="drawCanvas" v-show="!representation">
          <div
            class="drawItem"
            v-for="(ele, index) in drawShowList"
            :key="ele.value"
          >
            <div class="title">{{ ele.title }}</div>
            <div
              @click="selectDrawItem(index)"
              class="drawBox"
              :class="{ active: index == drawSelectIndex }"
            >
              <template v-if="index == 0">
                <div class="img">
                  <img src="../images/pingtai.svg" v-if="triggerMode == 2" />
                  <img
                    src="../images/naozhong.svg"
                    v-else-if="triggerMode == 1"
                  />
                  <img src="../images/api.svg" v-else-if="triggerMode == 4" />
                  <img src="../images/point.svg" v-else-if="triggerMode == 3" />
                </div>
                <div style="width: calc(100% - 60px)">
                  <div class="actionName">
                    {{ index + 1 + "." + ele.actionName }}
                  </div>
                  <div
                    class="content DescribeContent"
                    v-if="!ele.options.taskType"
                  >
                    {{ ele.content }}
                  </div>
                  <div class="content" v-else>
                    {{ getTimeDivide(ele.options.taskType) }}
                  </div>
                </div>
              </template>
              <template v-else>
                <div
                  :class="
                    ele.options && ele.options.iconUrl ? 'iconStyle' : 'img'
                  "
                >
                  <img
                    v-if="ele.options && ele.options.iconUrl"
                    :src="
                      ele.options.iconUrl
                        ? ele.options.iconUrl.split('/wwwroot')[1]
                        : ''
                    "
                  />
                  <img v-else src="../images/huaO.svg" />
                </div>
                <div style="width: calc(100% - 60px)">
                  <div class="actionName" v-if="!ele.options.appName">
                    {{ index + 1 + "." + ele.actionName }}
                  </div>
                  <div
                    class="actionName"
                    style="display: flex; align-items: center"
                    v-else
                  >
                    {{ index + 1 + "." + ele.options.appName }}
                  </div>

                  <div
                    class="content DescribeContent"
                    v-if="ele.options.stepDescribe"
                  >
                    {{ ele.options.stepDescribe }}
                  </div>
                  <div class="content" v-else>{{ ele.content }}</div>
                </div>
              </template>

              <div
                @click.stop="delDrawItem(ele, index)"
                v-if="index != 0"
                class="del"
              >
                <img src="../images/close.svg" />
              </div>
            </div>
            <div class="line-wrapper" v-if="index != drawShowList.length - 1">
              <div class="line"></div>
              <img
                src="../images/addBtn.svg"
                @click.stop="insertDrawItem(ele, index)"
              />
            </div>
          </div>

          <div @click="addDrwaItem" class="drawItem drawItemBtn">
            添加新步骤
          </div>
        </div>
        <!-- 动态内容及其表达式 -->
        <div
          class="drawCanvas"
          style="align-items: flex-start; padding: 0"
          v-show="representation"
        >
          <div class="repContainer">
            <el-tabs v-model="representationActiveName">
              <el-tab-pane label="动态内容" name="first"></el-tab-pane>
              <el-tab-pane label="表达式" name="second"></el-tab-pane>
            </el-tabs>
            <div class="closeRepContainer" @click="closeRepContainer">
              <i class="el-icon-close"></i> 关闭
            </div>
            <div class="treeNodeBox" v-if="representationActiveName == 'first'">
              <tree-node
                v-for="(value, key) in treeData"
                :key="key"
                :node-key="key"
                :node-value="value"
                :path="key"
                :selected-node="selectedNode"
                @node-selected="handleNodeSelected"
              />
            </div>
            <div
              class="treeNodeBox"
              v-if="representationActiveName == 'second'"
            >
              <el-tabs tab-position="left" style="height: 100%">
                <el-tab-pane
                  v-for="(item, index) in representationData"
                  :label="item.label"
                >
                  <template v-for="(row, rowIndex) in item.children">
                    <div class="repItem" @click="handleTagSelected(row.label)">
                      <el-tag size="small">
                        {{ row.label }}
                      </el-tag>
                      <span class="repItemValue">{{ row.value }}</span>
                    </div>
                  </template>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
        <!-- 操作区 -->
        <!-- 第一步的时候单独处理 -->
        <div class="drawAction" v-if="drawSelectIndex == 0">
          <el-tabs v-model="activeTabName">
            <el-tab-pane label="1. 选择操作" name="选择操作">
              <div
                class="currentDrawBox"
                style="padding: 10px"
                v-if="drawShowList.length > 0"
              >
                <div class="drawimg">
                  <img src="../images/pingtai.svg" v-if="triggerMode == 2" />
                  <img
                    src="../images/naozhong.svg"
                    v-else-if="triggerMode == 1"
                  />
                  <img src="../images/api.svg" v-else-if="triggerMode == 4" />
                  <img src="../images/point.svg" v-else-if="triggerMode == 3" />
                </div>
                <div style="width: calc(100% - 60px)">
                  <div class="actionName">
                    {{ 1 + "." + drawShowList[0].actionName }}
                  </div>
                  <div class="content" v-if="!drawShowList[0].options.taskType">
                    {{ drawShowList[0].content }}
                  </div>
                  <div class="content" v-else>
                    {{ getTimeDivide(drawShowList[0].options.taskType) }}
                  </div>
                </div>
              </div>
              <div class="timeWrap">
                <template v-for="(item, index) in timeDivide">
                  <div
                    @click="handleTimeItem(item, index)"
                    :class="{ activTimeItem: activTimeIndex == item.id }"
                    class="timeItem"
                  >
                    <div class="imgBox">
                      <img src="../images/shandian.svg" />
                    </div>
                    <div>
                      <div class="title">{{ item.title }}</div>
                      <div class="content">{{ item.content }}</div>
                    </div>
                  </div>
                </template>
              </div>
            </el-tab-pane>
            <el-tab-pane
              label="2. 配置"
              name="配置"
              :disabled="!this.activTimeIndex"
            >
              <div
                class="currentDrawBox"
                style="padding: 10px"
                v-if="drawShowList.length > 0"
              >
                <div class="drawimg">
                  <img src="../images/pingtai.svg" v-if="triggerMode == 2" />
                  <img
                    src="../images/naozhong.svg"
                    v-else-if="triggerMode == 1"
                  />
                  <img src="../images/api.svg" v-else-if="triggerMode == 4" />
                  <img src="../images/point.svg" v-else-if="triggerMode == 3" />
                </div>
                <div style="width: calc(100% - 60px)">
                  <div class="actionName">
                    {{ 1 + "." + drawShowList[0].actionName }}
                  </div>
                  <div class="content" v-if="!drawShowList[0].options.taskType">
                    {{ drawShowList[0].content }}
                  </div>
                  <div class="content" v-else>
                    {{ getTimeDivide(drawShowList[0].options.taskType) }}
                  </div>
                </div>
              </div>
              <div class="crontabBox">
                <div class="crontabBoxTitle">cron表达式</div>
                <FishCrontab
                  ref="fishCrontab"
                  class="crontab"
                  @fill="crontabFill"
                  :expression="expression"
                  :fiveTimes="false"
                ></FishCrontab>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 其他步骤 -->
        <div class="drawAction" v-else v-loading="drawMask">
          <el-tabs
            v-model="activeOtherTabName"
            @tab-click="handleOtherTabClick"
          >
            <el-tab-pane label="1. 选择应用" name="选择应用">
              <!-- 选中的操作步骤 -->
              <div class="drawItemBox">
                <div class="currentDrawBox" style="width: 100%">
                  <div class="img">
                    <img class="appIcon" src="../images/applicotion.svg" />
                  </div>
                  <div style="width: calc(100% - 64px)">
                    <!-- 应用名称 -->
                    <div class="actionName" v-if="CurrentAppRow.appName">
                      {{ CurrentAppRow.appName }}
                    </div>
                    <!-- 步骤描述 -->
                    <div class="content" v-if="CurrentAppRow.description">
                      {{ CurrentAppRow.description }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="search">
                <el-input
                  class="input"
                  v-model="appCodeOrName"
                  placeholder="请输入"
                  clearable
                  style="width: 210px"
                  @keydown.enter.native="searchApp"
                ></el-input>
                <el-button
                  type="primary"
                  style="margin-right: 5px"
                  size="small"
                  @click="searchApp"
                  >查询</el-button
                >
              </div>
              <div
                class="app"
                style="max-height: calc(-345px + 100vh); overflow: auto"
              >
                <div class="applist">
                  <div
                    v-for="(app, index) in appList"
                    class="appItem"
                    @click="hangleAppItem(app, index)"
                    :class="{ active: appActivIndex == app.id }"
                  >
                    <img class="appIcon" src="../images/applicotion.svg" />
                    <div class="name">{{ app.name }}</div>
                  </div>
                </div>
              </div>
              <div class="DescribeDataBox">
                <span style="font-size: 14px">步骤描述</span>
                <el-input
                  class="input"
                  v-model="description"
                  placeholder="请输入步骤描述"
                  clearable
                  @blur="changeDescription"
                  type="textarea"
                ></el-input>
              </div>
            </el-tab-pane>
            <el-tab-pane
              label="2. 选择操作"
              name="选择操作"
              :disabled="!this.appActivIndex"
            >
              <!-- 选中的操作步骤 -->
              <div class="drawItemBox">
                <div class="currentDrawBox" style="width: 100%">
                  <div class="img">
                    <img class="appIcon" src="../images/applicotion.svg" />
                  </div>
                  <div style="width: calc(100% - 64px)">
                    <!-- 应用名称 -->
                    <div class="actionName" v-if="CurrentAppRow.appName">
                      {{ CurrentAppRow.appName }}
                    </div>
                    <!-- 步骤描述 -->
                    <div class="content" v-if="CurrentAppRow.description">
                      {{ CurrentAppRow.description }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="search">
                <el-input
                  class="input"
                  v-model="operateCodeOrName"
                  placeholder="请输入"
                  style="width: 210px"
                  clearable
                  @keydown.enter.native="searchApiPlugin"
                ></el-input>
                <el-button type="primary" size="small" @click="searchApiPlugin"
                  >查询</el-button
                >
              </div>

              <el-radio-group
                v-model="activeApiPliginTabName"
                @change="ApiPliginTabChangeEvent"
              >
                <el-radio-button label="API接口">API接口</el-radio-button>
                <el-radio-button label="插件">插件</el-radio-button>
              </el-radio-group>
              <div class="ApiPliginBox app">
                <div
                  class="applist"
                  v-show="activeApiPliginTabName == 'API接口'"
                >
                  <div
                    v-for="(item, index) in apiList"
                    class="appItem"
                    @click="hangleApiClickEvent(item, index)"
                    :class="{ active: apiIdActiv == item.id }"
                  >
                    <div class="imgBox">
                      <img src="../images/shandian.svg" />
                    </div>
                    <div>
                      <div class="name">{{ item.apiName }}</div>
                      <div class="name">{{ item.apiPath }}</div>
                    </div>
                  </div>
                </div>

                <div class="applist" v-show="activeApiPliginTabName == '插件'">
                  <div
                    v-for="(item, index) in pluginList"
                    class="appItem"
                    @click="hanglePluginClickEvent(item, index)"
                    :class="{ active: pluginActiv == item.id }"
                  >
                    <div class="imgBox">
                      <img src="../images/shandian.svg" />
                    </div>
                    <div>
                      <div class="name">{{ item.plugName }}</div>
                      <div class="name">{{ item.plugDescribe }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane
              label="3. 选择账号"
              name="选择账号"
              :disabled="
                !this.appActivIndex || !(this.apiIdActiv || this.pluginActiv)
              "
            >
              <!-- 选中的操作步骤 -->
              <div class="drawItemBox">
                <div class="currentDrawBox" style="width: 100%">
                  <div class="img">
                    <img class="appIcon" src="../images/applicotion.svg" />
                  </div>
                  <div style="width: calc(100% - 64px)">
                    <!-- 应用名称 -->
                    <div class="actionName" v-if="CurrentAppRow.appName">
                      {{ CurrentAppRow.appName }}
                    </div>
                    <!-- 步骤描述 -->
                    <div class="content" v-if="CurrentAppRow.description">
                      {{ CurrentAppRow.description }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="userList">
                <div @click="addAccount" class="userItem userBtn">
                  <i
                    class="el-icon-plus"
                    style="font-size: 12px; margin-right: 5px"
                  ></i>
                  添加账户
                </div>
                <div class="userContentBox">
                  <div
                    v-for="(item, index) in userList"
                    class="userItem"
                    style="justify-content: flex-start"
                    @click="handleUserClickEvent(item, index)"
                    :class="{ active: userActivId == item.id }"
                  >
                    <div class="status">
                      <i
                        class="el-icon-success"
                        style="color: #7ec050"
                        v-if="item.status == 1"
                      ></i>
                      <i
                        class="el-icon-error"
                        style="color: #f56c6c"
                        v-else-if="item.status == 0"
                      ></i>
                      <i
                        class="el-icon-remove"
                        style="color: #919398"
                        v-else
                      ></i>
                    </div>
                    <div>
                      <div class="userName">{{ item.name }}</div>
                      <div class="content" style="margin-top: 5px">
                        最新编辑时间：{{ item.modify_time }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane
              label="4. 配置"
              name="配置应用"
              :disabled="
                !this.appActivIndex ||
                !(this.apiIdActiv || this.pluginActiv) ||
                !this.userActivId
              "
            >
              <!-- 选中的操作步骤 -->
              <div class="drawItemBox">
                <div class="currentDrawBox" style="width: 100%">
                  <div class="img">
                    <img class="appIcon" src="../images/applicotion.svg" />
                  </div>
                  <div style="width: calc(100% - 64px)">
                    <!-- 应用名称 -->
                    <div class="actionName" v-if="CurrentAppRow.appName">
                      {{ CurrentAppRow.appName }}
                    </div>
                    <!-- 步骤描述 -->
                    <div class="content" v-if="CurrentAppRow.description">
                      {{ CurrentAppRow.description }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="outsideContent">
                <!-- 选择表 -->
                <el-form
                  ref="outsideForm"
                  :model="outsideFormData"
                  :rules="outsideRules"
                  label-width="80px"
                  label-position="top"
                  style="margin-bottom: 10px"
                >
                  <el-form-item label="选择表">
                    <el-select
                      v-model="outsideFormData.tableName"
                      placeholder="请选择表"
                      @change="outsideSelectChange"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(el, index) in outsideOptions"
                        :key="index"
                        :label="el.table_name"
                        :value="el.table_name"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>

                <!-- 表字段 -->
                <el-collapse
                  v-model="activeNames"
                  v-if="outsideColumns.length > 0"
                >
                  <el-collapse-item title="查询条件配置" name="1">
                    <el-form
                      ref="ColumnsForm"
                      :model="ColumnsFormData"
                      :rules="ColumnsRules"
                      label-width="80px"
                      label-position="top"
                      style="margin: 0 10px"
                    >
                      <div ref="editorContainer">
                        <div
                          v-for="(row, rowIndex) in outsideColumns"
                          :key="rowIndex"
                        >
                          <el-form-item :label="row.column_name">
                            <div class="editor-container">
                              <div
                                class="content-editor"
                                :ref="
                                  'contentEditor' + row.column_name + rowIndex
                                "
                                contenteditable="true"
                                @keydown="
                                  handleKeyDown(
                                    $event,
                                    row.column_name,
                                    rowIndex
                                  )
                                "
                                @input="
                                  handleInput($event, row.column_name, rowIndex)
                                "
                                @click="
                                  handleEditorClick(
                                    $event,
                                    row.column_name,
                                    rowIndex
                                  )
                                "
                                @paste="
                                  handlePaste($event, row.column_name, rowIndex)
                                "
                                @focus="
                                  handleEditorFocus(
                                    $event,
                                    row.column_name,
                                    rowIndex
                                  )
                                "
                                @blur="
                                  handleEditorBlur(
                                    $event,
                                    row.column_name,
                                    rowIndex
                                  )
                                "
                              ></div>
                              <div
                                class="editorIcon"
                                @click.stop="
                                  handleAddNodeToEditor(
                                    row.column_name,
                                    rowIndex
                                  )
                                "
                              >
                                <i class="el-icon-circle-plus"></i>
                              </div>
                              <div
                                class="clearIcon"
                                @click.stop="
                                  handleClearNodeToEditor(
                                    row.column_name,
                                    rowIndex
                                  )
                                "
                              >
                                <i class="el-icon-circle-close"></i>
                              </div>
                            </div>
                          </el-form-item>
                        </div>
                      </div>
                    </el-form>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </base-right-dialog>
    <editSence ref="editSence" @handleConfirmClick="updateTitle"></editSence>
    <addAccount
      ref="addAccount"
      @handleConfirmClick="addAccountConfirmClick"
    ></addAccount>
  </div>
</template>

<script>
// 导入编辑场景组件
import baseRightDialog from "@/components/base/baseRightDialog/index.vue";
import editSence from "./editSence.vue";
import { authApi } from "@/api/apis/auth";
// 导入步骤添加和使用的常量
import { stepAdd, stepUse, timeDivide, representationData } from "./constant";
// 导入 cron 表达式组件
import FishCrontab from "fish-crontab";
// 导入添加账号组件
import addAccount from "./addAccount.vue";
import baseForm from "@/components/base/baseNewForm";
import treeNode from "./TreeNode";
import IconsDialog from "../../tool/build/IconsDialog.vue";
export default {
  components: {
    editSence,
    baseRightDialog,
    FishCrontab,
    addAccount,
    baseForm,
    treeNode,
    IconsDialog,
  },
  data() {
    return {
      examineOperateDialog: false, //判断是都打开弹窗
      sceneLoading: false, //遮照
      sceneName: "", //场景名称
      sceneID: "", //场景ID
      // 画布列表，对应右侧操作区域
      drawShowList: [],
      drawSelectIndex: 0, // 当前选中的画布索引

      //当步骤为1时
      timeDivide: timeDivide,
      activeTabName: "选择操作", // 显示的操作栏
      activTimeIndex: "", // 当前选择操作的类型
      expression: "", //cron表达式
      // 其他步骤
      activeOtherTabName: "",
      CurrentAppRow: {}, // 当前选择的应用数据
      appCodeOrName: "", //应用搜索条件
      drawMask: false,

      // 应用列表
      appList: [],
      appCodeOrName: "", // 应用搜索关键字
      appActivIndex: "", // 当前选中的应用 ID
      description: "", //应用描述
      operateCodeOrName: "", //api 或者 插件的搜索
      activeApiPliginTabName: "API接口", // 当前操作是 API 还是插件
      // API 插件列表
      pluginList: [],
      // API 接口列表
      apiList: [],
      apiIdActiv: "", // 选择的 API ID
      pluginActiv: "", // 选择的插件 ID
      // 用户列表
      userList: [],
      userActivId: "", // 选择的用户 ID
      outsideFormRow: [
        {
          elCol: [
            {
              label: "选择表",
              prop: "tableName",
              tag: "elSelect",
              span: 24,
            },
          ],
        },
      ],
      outsideRules: {
        tableName: [
          {
            required: true,
            message: "请选择表",
            trigger: "change, blur",
          },
        ],
      },
      outsideFormData: {
        tableName: "",
      },
      outsideOptions: [],
      outsideColumns: [], //表字段
      activeNames: "1", //展开
      ColumnsFormData: {},
      ColumnsRules: {},

      representation: false,
      selectedNode: "",
      representationActiveName: "first",
      treeData: {
        user: {
          id: 1001,
          profile: {
            name: "李四",
            email: "lisi@example.com",
            settings: {
              theme: "dark",
              notifications: {
                email: true,
                sms: false,
                push: true,
              },
            },
          },
          permissions: ["read", "write", "admin"],
          metadata: {
            created_at: "2023-01-15T10:30:00Z",
            updated_at: "2024-03-20T15:45:30Z",
            version: 2.1,
          },
        },
        config: {
          database: {
            host: "localhost",
            port: 5432,
            ssl: false,
          },
          features: {
            experimental: ["ai_assist", "real_time_sync"],
            stable: ["user_management", "data_export"],
          },
        },
      },
      currenrActiveNodeRef: "",
      lastSelectedTokenIndex: -1,
      tokenCounter: 0,
      representationData: representationData,
    };
  },
  methods: {
    /**
     * 打开弹窗
     * @param {string} sceneID 场景 ID
     * @param {string} sceneName 场景名称
     * @param {string} type 操作类型
     * @param {number} triggerMode 触发模式
     */
    openDialog(sceneID, sceneName, type, triggerMode) {
      // 更新场景 ID
      this.sceneID = sceneID;
      // 更新场景类型
      this.sceneType = type;
      // 更新场景名称
      this.sceneName = sceneName;
      // 更新触发模式
      this.triggerMode = triggerMode;
      // 显示审核操作弹窗
      this.examineOperateDialog = true;
      // 显示场景加载状态
      this.sceneLoading = true;
      // 5 秒后隐藏场景加载状态
      setTimeout(() => {
        this.sceneLoading = false;
      }, 5000);

      if (type === "add") {
        // 新增时生成第一步
        let params = {
          flowId: this.sceneID,
          step: 1,
          stepType: 2,
        };
        this.SaveSceneStepData(params, "first");
      }

      if (type === "edit") {
        // 编辑时获取场景步骤列表
        this.GetSceneStepList();
      }
    },
    /**
     * 获取场景步骤列表
     */
    async GetSceneStepList() {
      // 清空画布列表
      this.drawShowList = [];
      // 获取场景步骤列表的参数
      let params = {
        flowId: this.sceneID,
      };
      let res = await authApi(
        "sysFlowStepService",
        "",
        "queryList",
        "",
        params
      );
      // 隐藏场景加载状态
      this.sceneLoading = false;
      if (res.status == "200") {
        if (res.attribute.length > 0) {
          res.attribute.forEach((item, index) => {
            if (index === 0) {
              let obj = {
                ...stepAdd,
                options: {
                  ...item,
                  stepID: item.id,
                  taskType: item.apiId,
                },
              };
              if (this.triggerMode === 2) {
                obj.actionName = "定时触发";
              } else if (this.triggerMode === 1) {
                obj.actionName = "应用程序触发";
              } else if (this.triggerMode === 4) {
                obj.actionName = "Webhook触发";
              } else if (this.triggerMode === 3) {
                obj.actionName = "手动触发";
              }
              // 将第一个步骤添加到画布列表
              this.drawShowList.push(obj);
            } else {
              // 将其他步骤添加到画布列表
              this.drawShowList.push({
                ...stepUse,
                options: {
                  ...item,
                  stepID: item.id,
                  stepDescribe: item.apiName || item.plugName,
                },
              });
            }
          });
          // 在下一个 DOM 更新周期后执行操作
          this.$nextTick(() => {
            // 选中第一个步骤
            this.drawSelectIndex = 0;
            this.selectDrawItem(this.drawSelectIndex);
          });
        } else {
          // 新增时生成第一步
          let params = {
            flowId: this.sceneID,
            step: 1,
            stepType: 2,
          };
          this.SaveSceneStepData(params, "first");
        }
      }
    },
    /**
     * 新增、实时修改场景步骤基本信息
     * @param {Object} params 请求参数
     * @param {string} type 操作类型
     * @param {string} insertIndex 用于插入
     */
    async SaveSceneStepData(params, type, insertIndex) {
      let res = await authApi(
        "sysFlowStepService",
        "",
        "saveOrUpdateFlowStep",
        "",
        params
      );
      // 隐藏场景加载状态
      this.sceneLoading = false;
      if (res.status == "200") {
        // 第一次打开弹窗
        if (type === "first") {
          let obj = [
            {
              ...stepAdd,
              options: {
                // 步骤 id
                stepID: res.attribute.id,
                step: 1,
                stepType: 2, // 步骤类型（1、触发方式 2、应用 3、 数据集 4、条件
              },
            },
          ];
          if (this.triggerMode === 2) {
            obj[0].actionName = "定时触发";
          } else if (this.triggerMode === 1) {
            obj[0].actionName = "应用程序触发";
          } else if (this.triggerMode === 4) {
            obj[0].actionName = "Webhook触发";
          } else if (this.triggerMode === 3) {
            obj[0].actionName = "手动触发";
          }
          // 更新画布列表
          this.drawShowList = obj;
          // 在下一个 DOM 更新周期后执行操作
          this.$nextTick(() => {
            // 选中第一个步骤
            this.drawSelectIndex = 0;
            this.selectDrawItem(this.drawSelectIndex);
            // 获取应用列表
            this.getAppList();
          });
        }
        // 手动新增时
        if (type === "add") {
          // 将新步骤添加到画布列表
          this.drawShowList.push({
            ...stepUse,
            options: {
              // 步骤 id
              stepID: res.attribute.id,
            },
          });
          // 在下一个 DOM 更新周期后执行操作
          this.$nextTick(() => {
            // 选中当前新增的步骤
            this.drawSelectIndex = this.drawShowList.length - 1;
            this.selectDrawItem(this.drawSelectIndex);
          });
        }
        // 插入时
        if (type == "insert") {
          this.drawShowList.splice(insertIndex + 1, 0, {
            ...stepUse,
            options: {
              // 步骤 id
              stepID: res.attribute.id,
            },
          });
          // 在下一个 DOM 更新周期后执行操作
          this.$nextTick(() => {
            // 选中当前新增的步骤
            this.drawSelectIndex = insertIndex + 1;
            this.selectDrawItem(this.drawSelectIndex);
          });
        }
        if (type === "time") {
          this.activeTabName = "配置";
        }
        // cron表达式保存后
        if (type === "expression") {
          if (this.drawShowList.length === 1) {
            // 自动添加一个步骤
            this.addDrwaItem();
          } else {
            // 在下一个 DOM 更新周期后执行操作
            this.$nextTick(() => {
              // 选中第二个步骤
              this.drawSelectIndex = 1;
              this.selectDrawItem(this.drawSelectIndex);
            });
          }
        }
      }
    },
    /**
     * 手动新增场景步骤
     */
    addDrwaItem() {
      // 新增步骤的参数
      let params = {
        flowId: this.sceneID,
        step: this.drawShowList.length + 1,
        stepType: 2,
      };
      // 保存场景步骤数据
      this.SaveSceneStepData(params, "add");
    },
    /**
     * 切换步骤时
     * @param {number} index 步骤索引
     */
    async selectDrawItem(index) {
      // 更新当前选中的步骤索引
      this.drawSelectIndex = index;
      // 先清空
      this.pluginActiv = "";
      this.apiIDActiv = "";
      this.userActivId = "";
      this.CurrentAppRow = {};
      if (index === 0) {
        this.activeTabName = "选择操作";
      } else {
        this.activeOtherTabName = "选择应用";
        // 清空应用搜索关键字
        this.appCodeOrName = "";
        // 获取应用列表
        await this.getAppList();
        // 获取场景步骤数据
        await this.GetSceneStepData();
      }
    },
    /**
     * 获取场景步骤数据
     */
    async GetSceneStepData() {
      // 获取场景步骤数据的参数
      let params = {
        id: this.drawShowList[this.drawSelectIndex].options.stepID,
      };
      let res = await authApi(
        "sysFlowStepService",
        "",
        "getFlowStep",
        "",
        params
      );
      if (res.status == "200") {
        let obj = {
          ...this.drawShowList[this.drawSelectIndex].options,
          ...res.attribute,
        };
        // 更新当前步骤的选项
        obj.stepDescribe = obj.apiName || obj.plugName;
        this.drawShowList[this.drawSelectIndex].options = obj;
        // 更新当前选择的应用步骤描述
        this.CurrentAppRow.description = obj.stepDescribe;
        if (this.drawSelectIndex == 0) {
          this.expression = obj.taskCorn;
          this.activTimeIndex = obj.apiId;
        } else {
          this.activeApiPliginTabName = obj.actionType || "API接口";

          // 清空 API 或插件搜索关键字
          this.operateCodeOrName = "";
          // 清空 API 列表
          this.apiList = [];
          // 清空插件列表
          this.pluginList = [];
          // 清空用户列表
          this.userList = [];
          if (this.drawShowList[this.drawSelectIndex].options.appId) {
            // 更新当前选中的应用 ID
            this.appActivIndex =
              this.drawShowList[this.drawSelectIndex].options.appId;
            // 更新当前选择的应用名称
            this.CurrentAppRow.appName =
              this.drawShowList[this.drawSelectIndex].options.appName;
            // 获取当前步骤的 api、插件、账号
            await this.GetApiList(this.appActivIndex);
            // this.getPluginList(this.appActivIndex);
            await this.GetAccountListAPI(this.appActivIndex);
          } else {
            // 重置当前选中的应用 ID
            this.appActivIndex = "";
            // 重置当前选择的应用数据
            this.CurrentAppRow = {};
          }
          this.$nextTick(() => {
            if (this.drawShowList[this.drawSelectIndex].options.description) {
              // 更新步骤描述
              this.description =
                this.drawShowList[this.drawSelectIndex].options.description;
            } else {
              // 重置步骤描述
              this.description = "";
            }

            if (this.drawShowList[this.drawSelectIndex].options.apiId) {
              // 更新选择的 API ID
              this.apiIdActiv =
                this.drawShowList[this.drawSelectIndex].options.apiId;
            } else {
              // 重置选择的 API ID
              this.apiIdActiv = "";
            }
            // 插件
            if (this.drawShowList[this.drawSelectIndex].options.plugId) {
              // 更新选择的插件 ID
              this.pluginActiv =
                this.drawShowList[this.drawSelectIndex].options.plugId;
            } else {
              // 重置选择的插件 ID
              this.pluginActiv = "";
            }
            // 账号
            if (this.drawShowList[this.drawSelectIndex].options.step_acc_id) {
              // 更新选择的用户 ID
              this.userActivId =
                this.drawShowList[this.drawSelectIndex].options.step_acc_id;
              // 更新当前选择的应用账号名称
              this.CurrentAppRow.step_acc_name =
                this.drawShowList[this.drawSelectIndex].options.step_acc_name;
            } else {
              // 重置选择的用户 ID
              this.userActivId = "";
              // 重置当前选择的应用账号名称
              this.CurrentAppRow.step_acc_name = "";
            }
          });
        }
      }
    },
    /**
     * 删除场景步骤
     * @param {Object} ele 步骤数据
     * @param {number} index 步骤索引
     */
    delDrawItem(ele, index) {
      // 获取步骤 ID
      let stepID = ele.options.stepID || null;
      if (!stepID) {
        this.$vmNews("删除失败！步骤ID丢失，请联系管理员处理");
        return;
      }
      // 弹出确认删除对话框
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          if (stepID) {
            let res = await authApi(
              "sysFlowStepService",
              "",
              "saveFlowStep",
              "",
              {
                id: stepID,
              }
            );
            if (res.status == "200") {
              // 提示删除成功
              this.$vmNews("删除成功", "success");
              // 从画布列表中删除该步骤
              this.drawShowList.splice(index, 1);
              if (this.drawSelectIndex === index) {
                // 选中第一个步骤
                this.drawSelectIndex = 0;
                this.selectDrawItem(this.drawSelectIndex);
              } else if (this.drawSelectIndex >= this.drawShowList.length) {
                // 选中最后一个步骤
                this.drawSelectIndex = this.drawShowList.length - 1;
                this.selectDrawItem(this.drawSelectIndex);
              }
            }
          } else {
            // 提示删除成功
            this.$vmNews("删除成功", "success");
            // 从画布列表中删除该步骤
            this.drawShowList.splice(index, 1);
            if (this.drawSelectIndex === index) {
              // 选中第一个步骤
              this.drawSelectIndex = 0;
              this.selectDrawItem(this.drawSelectIndex);
            } else if (this.drawSelectIndex >= this.drawShowList.length) {
              // 选中最后一个步骤
              this.drawSelectIndex = this.drawShowList.length - 1;
              this.selectDrawItem(this.drawSelectIndex);
            }
          }
        })
        .catch(() => {});
    },
    /**
     * 插入场景步骤
     * @param {any} value 标签页值
     */

    insertDrawItem(ele, index) {
      let params = {
        flowId: this.sceneID,
        step: index + 1,
        stepType: 2,
      };
      // 保存场景步骤数据
      this.SaveSceneStepData(params, "insert", index);
    },
    // ----------------------------------------------步骤一相关操作
    /**
     * 处理时间项点击事件
     * @param {Object} item 时间项数据
     * @param {number} index 时间项索引
     */
    handleTimeItem(item, index) {
      // 更新当前选择操作的类型
      this.activTimeIndex = item.id;
      // 更新当前步骤的任务类型
      this.drawShowList[this.drawSelectIndex].options.taskType = item.id;
      let params = {
        flowId: this.sceneID,
        id: this.drawShowList[this.drawSelectIndex].options.stepID,
        apiId: item.id,
        apiName: this.getTimeDivide(item.id),
      };
      // 保存场景步骤数据
      this.SaveSceneStepData(params, "time");
    },
    /**
     * cron 表达式点击确定时时间插件回调
     * @param {string} value cron 表达式的值
     */
    crontabFill(value) {
      // 更新 cron 表达式
      this.expression = value;
      // 更新当前步骤的任务值
      this.drawShowList[this.drawSelectIndex].options.taskValue = value;
      let params = {
        flowId: this.sceneID,
        id: this.drawShowList[this.drawSelectIndex].options.stepID,
        taskCorn: value,
      };
      // 保存场景步骤数据
      this.SaveSceneStepData(params, "expression");
    },
    // ----------------------------------------------其他步骤--相关操作
    /**
     * 处理 其他步骤的tab点击事件
     * @param {any} value 标签页值
     */
    handleOtherTabClick(value) {},
    /**
     * 应用搜索
     */
    searchApp() {
      // 显示搜索遮罩
      this.drawMask = true;
      // 5 秒后隐藏搜索遮罩
      setTimeout(() => {
        this.drawMask = false;
      }, 5000);
      // 获取应用列表
      this.getAppList();
    },
    /**
     * 获取应用列表
     */
    async getAppList() {
      // 获取应用列表的参数
      let params = {
        name: this.appCodeOrName,
      };
      // 调用获取应用列表的 API
      let res = await authApi(
        "sysApplicationService",
        "",
        "queryEntity",
        "",
        params
      );
      // 隐藏搜索遮罩
      this.drawMask = false;
      if (res.status == "200") {
        // 更新应用列表
        this.appList = res.attribute;
      }
    },
    /**
     * 步骤描述变化时保存数据
     */
    changeDescription() {
      // 更新当前步骤的步骤描述
      this.drawShowList[this.drawSelectIndex].options.description =
        this.description;
      let params = {
        flowId: this.sceneID,
        id: this.drawShowList[this.drawSelectIndex].options.stepID,
        description: this.description,
      };
      // 保存场景步骤数据
      this.SaveSceneStepData(params);
    },
    /**
     * 选择应用时触发的方法
     * @param {Object} row 应用数据
     * @param {number} index 应用索引
     */
    async hangleAppItem(row, index) {
      if (!this.appActivIndex) {
        // 保存应用信息
        this.matchAppData(row);
      } else if (this.appActivIndex !== row.appId) {
        this.$confirm(
          "切换应用会清空操作、账号及配置内的所有数据，确定切换吗?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(async () => {
            // 重置当前选择的应用插件名称
            this.CurrentAppRow.plugName = "";
            // 重置当前选择的应用账号名称
            this.CurrentAppRow.step_acc_name = "";
            this.CurrentAppRow.description = "";
            // 重置当前步骤的资源类型
            this.drawShowList[this.drawSelectIndex].options.actionType = "";
            // 重置当前步骤的 API ID
            this.drawShowList[this.drawSelectIndex].options.apiId = "";
            this.drawShowList[this.drawSelectIndex].options.apiName = "";
            // 重置当前步骤的插件 ID
            this.drawShowList[this.drawSelectIndex].options.plugId = "";
            // 重置当前步骤的插件名称
            this.drawShowList[this.drawSelectIndex].options.plugName = "";
            // 重置当前步骤的账号 ID
            this.drawShowList[this.drawSelectIndex].options.step_acc_id = "";
            // 重置当前步骤的账号名称
            this.drawShowList[this.drawSelectIndex].options.step_acc_name = "";
            this.drawShowList[this.drawSelectIndex].options.stepDescribe = "";
            this.apiIdActiv = "";
            this.apiList = [];
            this.pluginActiv = "";
            this.pluginList = [];
            this.userActivId = "";
            this.userList = [];
            // 保存应用信息
            this.matchAppData(row);
            // 清空步骤配置
            await this.clearFlowStep();
          })
          .catch(() => {});
      }
    },
    async matchAppData(row) {
      // 更新当前选中的应用 ID
      this.appActivIndex = row.id;
      // 更新当前选择的应用 ID
      this.CurrentAppRow.appId = row.id;
      // 更新当前选择的应用名称
      this.CurrentAppRow.appName = row.name;
      // 更新当前步骤的应用 ID
      this.drawShowList[this.drawSelectIndex].options.appId = row.id;
      // 更新当前步骤的应用名称
      this.drawShowList[this.drawSelectIndex].options.appName = row.name;

      // 切换到选择操作标签页
      this.activeOtherTabName = "选择操作";
      // 切换到 API 接口标签页
      this.activeApiPliginTabName = "API接口";
      // 清空 API 或插件搜索关键字
      this.operateCodeOrName = "";
      // 更新当前步骤的资源类型
      this.drawShowList[this.drawSelectIndex].options.actionType = "API接口";
      // 实时保存配置
      let params = {
        flowId: this.sceneID,
        id: this.drawShowList[this.drawSelectIndex].options.stepID,
        appId: row.id,
        appName: row.name,
        actionType: "",
        plugId: "",
        plugName: "",
        apiId: "",
        apiName: "",
        step_acc_name: "",
        step_acc_id: "",
      };
      // 保存场景步骤数据
      await this.SaveSceneStepData(params);
      // 获取 API 列表
      await this.GetApiList(row.id);
      // 获取插件列表
      // await this.getPluginList(row.id);
      // // 获取用户列表
      await this.GetAccountListAPI(row.id);
    },
    async clearFlowStep() {
      let params = {
        id: this.drawShowList[this.drawSelectIndex].options.stepID,
      };
      let res = await authApi(
        "sysFlowStepService",
        "",
        "clearFlowStep",
        "",
        params
      );
    },
    /**
     * API 或者插件的搜索
     */
    searchApiPlugin() {
      // 检查是否选择了应用
      if (!this.drawShowList[this.drawSelectIndex].options.appId) {
        this.$vmNews("请先选择应用");
        return;
      }
      if (this.activeApiPliginTabName === "API接口") {
        // 显示搜索遮罩
        this.drawMask = true;
        // 5 秒后隐藏搜索遮罩
        setTimeout(() => {
          this.drawMask = false;
        }, 5000);
        // 获取 API 列表
        this.GetApiList(this.drawShowList[this.drawSelectIndex].options.appId);
      } else if (this.activeApiPliginTabName === "插件") {
        // 显示搜索遮罩
        this.drawMask = true;
        // 5 秒后隐藏搜索遮罩
        setTimeout(() => {
          this.drawMask = false;
        }, 5000);
        // 获取插件列表
        this.getPluginList(
          this.drawShowList[this.drawSelectIndex].options.appId
        );
      }
    },
    /**
     * 切换 API 插件标签页
     * @param {string} e 标签页值
     */
    ApiPliginTabChangeEvent(e) {
      // 更新当前操作是 API 还是插件
      this.activeApiPliginTabName = e;
    },
    // 选择API
    hangleApiClickEvent(item) {
      this.pluginActiv = "";
      this.drawShowList[this.drawSelectIndex].options.plugId = "";
      this.drawShowList[this.drawSelectIndex].options.plugName = "";
      // 更新选择的 API ID
      this.apiIdActiv = item.id;
      // 更新当前步骤的 API ID
      this.drawShowList[this.drawSelectIndex].options.apiId = item.id;
      this.drawShowList[this.drawSelectIndex].options.apiName = item.apiName;
      // 更新当前选择的应用步骤描述
      this.CurrentAppRow.description = item.apiName;
      this.drawShowList[this.drawSelectIndex].options.stepDescribe =
        item.apiName;
      // 更新当前步骤的资源类型
      this.drawShowList[this.drawSelectIndex].options.actionType =
        this.activeApiPliginTabName;
      // 切换到选择账号标签页
      this.activeOtherTabName = "选择账号";
      let params = {
        flowId: this.sceneID,
        id: this.drawShowList[this.drawSelectIndex].options.stepID,
        actionType: this.activeApiPliginTabName,
        plugId: "",
        plugName: "",
        apiId: item.id,
        apiName: item.apiName,
      };
      // 保存场景步骤数据
      this.SaveSceneStepData(params);
    },
    // 选择插件
    hanglePluginClickEvent(item) {
      // 更新选择的 API ID
      this.apiIdActiv = "";
      // 更新当前步骤的 API ID
      this.drawShowList[this.drawSelectIndex].options.apiId = "";
      this.drawShowList[this.drawSelectIndex].options.apiName = "";
      this.pluginActiv = item.id;
      this.drawShowList[this.drawSelectIndex].options.plugId = item.id;
      this.drawShowList[this.drawSelectIndex].options.plugName = item.plugName;
      // 更新当前选择的应用步骤描述
      this.CurrentAppRow.description = item.plugName;
      this.drawShowList[this.drawSelectIndex].options.stepDescribe =
        item.plugName;
      // 更新当前步骤的资源类型
      this.drawShowList[this.drawSelectIndex].options.actionType =
        this.activeApiPliginTabName;
      // 切换到选择账号标签页
      this.activeOtherTabName = "选择账号";
      let params = {
        flowId: this.sceneID,
        id: this.drawShowList[this.drawSelectIndex].options.stepID,
        actionType: this.activeApiPliginTabName,
        plugId: item.id,
        plugName: item.plugName,
        apiId: "",
        apiName: "",
      };
      // 保存场景步骤数据
      this.SaveSceneStepData(params);
    },
    /**
     * 选择账号 --》 添加账号
     */
    addAccount() {
      if (!this.appActivIndex) {
        this.$vmNews("请选择应用");
        return;
      }
      // 打开添加账号弹窗
      this.$refs.addAccount.openDialog(
        this.appActivIndex,
        this.sceneID,
        this.drawShowList[this.drawSelectIndex].options.stepID
      );
    },
    /**
     * 重新加载用户列表
     */
    addAccountConfirmClick() {
      // 获取用户列表
      this.GetAccountListAPI(this.appActivIndex);
    },
    /**
     * 当前选中的用户
     * @param {Object} item 用户数据
     */
    async handleUserClickEvent(item) {
      // 更新选择的用户 ID
      this.userActivId = item.id;
      // 更新当前选择的应用账号名称
      this.CurrentAppRow.step_acc_name = item.name;
      // 更新当前步骤的用户 ID
      this.drawShowList[this.drawSelectIndex].options.step_acc_id = item.id;
      // 更新当前步骤的用户账号名称
      this.drawShowList[this.drawSelectIndex].options.step_acc_name = item.name;
      this.outsideFormData = {
        tableName: "",
      };
      this.ColumnsFormData = {};
      this.outsideOptions = [];
      this.outsideColumns = [];
      let params = {
        flowId: this.sceneID,
        id: this.drawShowList[this.drawSelectIndex].options.stepID,
        step_acc_name: item.name,
        step_acc_id: item.id,
      };
      // 保存场景步骤数据
      await this.SaveSceneStepData(params);
      // 切换到配置应用
      this.activeOtherTabName = "配置应用";
      // 获取表数据
      await this.queryTables(item.id);
      this.$nextTick(() => {
        this.resetForm("outsideForm");
      });
    },
    /**
     * 重置表单
     * @param {string} formName 表单的ref
     */
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /**
     * 获取表列表
     * @param {string} stepAccountId 账号ID
     */
    async queryTables(stepAccountId) {
      let params = {
        stepAccountId: stepAccountId,
      };
      let res = await authApi(
        "sysFlowDataBaseExtServiceImpl",
        "",
        "queryTables",
        "",
        params
      );
      this.drawMask = false;
      if (res.status == "200") {
        this.outsideOptions = res.attribute;
      }
    },
    // 切换表时
    outsideSelectChange(val) {
      if (val) {
        this.outsideColumns = [];
        this.queryColumns(val);
      }
    },
    // 获取表字段
    async queryColumns(tableName) {
      let params = {
        stepAccountId: this.userActivId, //账户id
        tableName: tableName,
      };
      let res = await authApi(
        "sysFlowDataBaseExtServiceImpl",
        "",
        "queryColumns",
        "",
        params
      );
      this.drawMask = false;
      if (res.status == "200") {
        this.outsideColumns = res.attribute.cloums || [];
        this.ColumnsRules = res.attribute.rules || {};
        this.$nextTick(() => {
          this.ColumnsFormData = {};
          this.resetForm("ColumnsForm");
        });
      }
    },
    /**
     * 获取插件列表
     * @param {string} appId 应用 ID
     */
    async getPluginList(appId) {
      let params = {
        appId: appId,
        name: this.operateCodeOrName,
      };
      let res = await authApi(
        "sysApplicationApiService",
        "",
        "queryEntity",
        "",
        params
      );
      this.drawMask = false;
      if (res.status == "200") {
        this.pluginList = res.attribute;
      }
    },
    /**
     * 获取 api 列表
     * @param {string} appId 应用 ID
     */
    async GetApiList(appId) {
      let params = {
        appId: appId,
        name: this.operateCodeOrName,
      };
      let res = await authApi(
        "sysApplicationApiService",
        "",
        "queryEntity",
        "",
        params
      );
      this.drawMask = false;
      if (res.status == "200") {
        this.apiList = res.attribute;
      }
    },
    /**
     * 获取用户列表
     * @param {string} appId 应用 ID
     */
    async GetAccountListAPI(appId) {
      let params = {
        appId: appId,
      };
      let res = await authApi(
        "sysApplicationAccountService",
        "",
        "queryAccountList",
        "",
        params
      );
      this.drawMask = false;
      if (res.status == "200") {
        this.userList = res.attribute;
      }
    },
    /**
     * 根据任务类型获取时间划分的标题
     * @param {number} taskType 任务类型
     * @returns {string} 时间划分的标题
     */
    getTimeDivide(taskType) {
      if (taskType === 1) {
        return "秒级";
      } else if (taskType === 2) {
        return "分钟级";
      } else if (taskType === 3) {
        return "小时级";
      } else if (taskType === 4) {
        return "天级";
      }
    },
    /**
     * 编辑场景名称
     */
    editSceneName() {
      // 编辑场景名称的参数
      let row = {
        flowId: this.sceneID,
      };
      // 在下一个 DOM 更新周期后打开编辑场景名称的弹窗
      this.$nextTick(() => {
        this.$refs.editSence.openDialog(row, "edit");
      });
    },
    /**
     * 更新场景名称
     * @param {string} sceneID 场景 ID
     * @param {Object} res 响应数据
     */
    updateTitle(sceneID, res) {
      // 更新场景名称
      this.sceneName = res.sceneName;
      this.title = res.sceneName;
      // 更新触发模式
      this.triggerMode = res.triggerMode;
      if (this.triggerMode === 2) {
        this.drawShowList[this.drawSelectIndex].actionName = "定时触发";
      } else if (this.triggerMode === 1) {
        this.drawShowList[this.drawSelectIndex].actionName = "应用程序触发";
      } else if (this.triggerMode === 4) {
        this.drawShowList[this.drawSelectIndex].actionName = "Webhook触发";
      } else if (this.triggerMode === 3) {
        this.drawShowList[this.drawSelectIndex].actionName = "手动触发";
      }
    },
    // 场景步骤---【确定】
    handleConfirmClick() {
      this.examineHandleClose();
    },
    // 关闭场景步骤弹窗
    examineHandleClose() {
      // 触发关闭事件
      this.$emit("examineHandleClose");
      this.examineOperateDialog = false;
      this.sceneName = "";
      // 清空画布列表
      this.drawShowList = [];
      // 重置当前选中的步骤索引
      this.drawSelectIndex = "";
      // 重置当前选择操作的类型
      this.activTimeIndex = "";
      // 重置 cron 表达式
      this.expression = "";
      // 清空应用搜索关键字
      this.appCodeOrName = "";
      // 重置当前选中的应用 ID
      this.appActivIndex = "";
      // 清空 API 或插件搜索关键字
      this.operateCodeOrName = "";
      // 重置当前操作是 API 还是插件
      this.activeApiPliginTabName = "API接口";
      // 重置选择的 API ID
      this.apiIdActiv = "";
      // 清空 API 列表
      this.apiList = [];
      // 重置选择的插件 ID
      this.pluginActiv = "";
      // 清空插件列表
      this.pluginList = [];
      // 重置选择的用户 ID
      this.userActivId = "";
      // 清空用户列表
      this.userList = [];
      this.representation = false;
    },

    handleKeyDown(e, columnName, rowIndex) {
      const editor = this.$refs["contentEditor" + columnName + rowIndex][0];

      if (e.key === "Backspace") {
        // 检查是否在光标前有token需要删除
        const selection = window.getSelection();
        if (selection.rangeCount > 0) {
          const range = selection.getRangeAt(0);

          // 如果光标在文本开头或者前一个兄弟节点是token
          if (range.startOffset === 0) {
            const prevSibling = range.startContainer.previousSibling;
            if (
              prevSibling &&
              prevSibling.classList &&
              prevSibling.classList.contains("content-token")
            ) {
              e.preventDefault();
              prevSibling.remove();
              this.$message.success("已删除元素");
              return;
            }
          }
        }
      }

      // 清除token选中状态（除了特殊键）
      if (
        ![
          "Backspace",
          "Delete",
          "ArrowLeft",
          "ArrowRight",
          "ArrowUp",
          "ArrowDown",
        ].includes(e.key)
      ) {
        this.clearTokenSelection(columnName, rowIndex);
      }
    },
    // 清除token选中状态
    clearTokenSelection(columnName, rowIndex) {
      const editor = this.$refs["contentEditor" + columnName + rowIndex][0];

      this.lastSelectedTokenIndex = -1;
    },
    // 处理输入事件
    handleInput(e, columnName, rowIndex) {
      // 清除token选中状态
      this.clearTokenSelection(columnName, rowIndex);

      // 强制更新computed属性
      this.$forceUpdate();
    },
    // 处理编辑器点击
    handleEditorClick(e, columnName, rowIndex) {
      const editor = this.$refs["contentEditor" + columnName + rowIndex][0];
      this.currenrActiveNodeRef = "contentEditor" + columnName + rowIndex;

      // 如果点击的不是token，清除选中状态
      if (
        !e.target.classList.contains("content-token") &&
        !e.target.closest(".content-token")
      ) {
        this.clearTokenSelection(columnName, rowIndex);
      }

      // 确保编辑器获得焦点
      if (e.target === editor || editor.contains(e.target)) {
        editor.focus();
      }
    },
    // 处理粘贴事件
    handlePaste(e, columnName, rowIndex) {
      // 清除token选中状态
      this.clearTokenSelection(columnName, rowIndex);
    },
    // 处理编辑器获得焦点
    handleEditorFocus(e, columnName, rowIndex) {
      const editor = this.$refs["contentEditor" + columnName + rowIndex][0];

      // 如果编辑器为空，设置光标到开始位置
      if (this.isEmpty(columnName, rowIndex)) {
        setTimeout(() => {
          const range = document.createRange();
          const selection = window.getSelection();
          range.setStart(editor, 0);
          range.setEnd(editor, 0);
          selection.removeAllRanges();
          selection.addRange(range);
        }, 0);
      }
    },
    // 判断当前编辑器是否为空
    isEmpty(columnName, rowIndex) {
      const editor = this.$refs["contentEditor" + columnName + rowIndex][0];
      if (!editor) return true;
      const content = editor.textContent.trim();
      const hasTokens = editor.querySelectorAll(".content-token").length > 0;
      return content === "" && !hasTokens;
    },
    // 处理编辑器失去焦点
    handleEditorBlur(e, columnName, rowIndex) {
      // 可以在这里处理失去焦点的逻辑
    },
    handleClearNodeToEditor(columnName, rowIndex) {
      const editor = this.$refs["contentEditor" + columnName + rowIndex][0];
      if (!editor) return;
      let nodeRef = "contentEditor" + columnName + rowIndex;
      this.currenrActiveNodeRef = nodeRef;

      editor.innerHTML = ""; // 先清空内容
      this.$forceUpdate();
      this.$nextTick(() => {
        // 创建 range 和 selection
        const range = document.createRange();
        const selection = window.getSelection();

        // 将 range 定位到 editor 的最后一个子节点
        range.selectNodeContents(editor);
        range.collapse(false); // 折叠到末尾
        // 清空现有选区并设置新 range
        selection.removeAllRanges();
        selection.addRange(range);
        // 确保编辑器有焦点
        editor.focus();
      });
    },

    //添加节点
    handleAddNodeToEditor(columnName, rowIndex) {
      let nodeRef = "contentEditor" + columnName + rowIndex;
      this.currenrActiveNodeRef = nodeRef;
      this.representation = true;
      this.representationActiveName = "first";

      // 这段代码的目的是 让光标停留在最后一个span标签后面
      const editor = this.$refs[this.currenrActiveNodeRef][0];
      if (!editor) return;
      // 创建 range 和 selection
      const range = document.createRange();
      const selection = window.getSelection();

      // 将 range 定位到 editor 的最后一个子节点
      range.selectNodeContents(editor);
      range.collapse(false); // 折叠到末尾
      // 清空现有选区并设置新 range
      selection.removeAllRanges();
      selection.addRange(range);
      // 确保编辑器有焦点
      editor.focus();
    },
    handleNodeSelected(path) {
      this.selectedNode = path;
      this.insertToken(path, "node-reference");
    },
    handleTagSelected(label){

    },
    // 插入token到编辑器
    insertToken(text, type) {
      if (!this.currenrActiveNodeRef) return;

      const editor = this.$refs[this.currenrActiveNodeRef][0];
      if (!editor) return;

      // 确保编辑器有焦点
      editor.focus();

      const token = this.createTokenElement(text, type);

      // 获取当前光标位置
      const selection = window.getSelection();
      if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        range.deleteContents();

        // 插入token
        range.insertNode(token);

        // 在token后添加一个空格
        const space = document.createTextNode(" ");
        range.setStartAfter(token);
        range.insertNode(space);

        // 使用setTimeout确保DOM更新完成后设置光标
        setTimeout(() => {
          if (!this.setCursorAfter(space)) {
            // 如果设置失败，则设置到编辑器末尾
            this.setCursorToEnd();
          }
        }, 10); // 增加延迟时间确保DOM完全更新
      } else {
        // 如果没有选中区域，直接添加到末尾
        editor.appendChild(token);
        const space = document.createTextNode(" ");
        editor.appendChild(space);

        // 使用setTimeout确保DOM更新完成后设置光标
        setTimeout(() => {
          if (!this.setCursorAfter(space)) {
            this.setCursorToEnd();
          }
        }, 10);
      }

      // 强制更新
      this.$forceUpdate();
    },
    // 设置光标到末尾
    setCursorToEnd() {
      if (!this.currenrActiveNodeRef) return;

      const editor = this.$refs[this.currenrActiveNodeRef][0];
      if (!editor) return;

      const range = document.createRange();
      const selection = window.getSelection();
      range.selectNodeContents(editor);
      range.collapse(false);
      selection.removeAllRanges();
      selection.addRange(range);
    },

    // 设置光标到指定节点后面
    setCursorAfter(node) {
      try {
        const selection = window.getSelection();
        const range = document.createRange();
        range.setStartAfter(node);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);
        return true;
      } catch (error) {
        return false;
      }
    },
    // 创建token元素
    createTokenElement(text, type) {
      const token = document.createElement("span");
      token.className = `content-token token-function`;
      token.contentEditable = false;
      token.setAttribute("data-token-id", ++this.tokenCounter);
      token.setAttribute("data-token-type", type);
      token.setAttribute("data-token-text", text);

      if (type === "node-reference") {
        token.innerHTML = `<i class="el-icon-connection"></i> ${text}`;
      }
      return token;
    },
    // 设置光标到末尾
    setCursorToEnd() {
      // 清除之前的选中状态
      if (!this.currenrActiveNodeRef) return;
      const editor = this.$refs[this.currenrActiveNodeRef][0];
      if (!editor) return;

      const range = document.createRange();
      const selection = window.getSelection();
      range.selectNodeContents(editor);
      range.collapse(false);
      selection.removeAllRanges();
      selection.addRange(range);
    },
    closeRepContainer() {
      this.representationActiveName = "first";
      this.representation = false;
      this.selectedNode = "";
      this.currenrActiveNodeRef = "";
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-radio-group {
  background: #fff;
  padding: 2px;
  margin: 0 10px 0 10px;
  border-radius: 4px;
}
::v-deep .el-radio-button__inner {
  border: 0 !important;
  background-color: #fff;
  color: #999999;
  font-weight: 400;
  font-size: 14px;
  padding: 7px 15px;
}

::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: #f5f5f5;
  color: #333333;
  box-shadow: none;
  border-radius: 4px;
}
.drawContent {
  width: 100%;
  height: calc(100vh - 100px);
  display: flex;

  .drawCanvas {
    width: 40%;
    height: 100%;
    background: url("../images/background.png") no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow-y: auto;
    padding: 50px 0;

    .drawItem {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .title {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        margin-bottom: 5px;
      }

      .drawBox {
        width: 300px;
        height: 58px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #dbdde1;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        display: flex;
        // justify-content: center;
        align-items: center;
        position: relative;

        .img {
          margin: 0 10px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #f18709;

          img {
            width: 60%;
            height: 60%;
          }
        }
        .iconStyle {
          margin: 0 10px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .actionName {
          font-weight: 400;
          font-size: 14px;
          color: #333333;
        }

        .content {
          font-weight: 500;
          font-size: 14px;
          color: #333333;
          margin-top: 5px;
        }
      }
      .drawBox:hover {
        background: #f2fcff;
        border: 1px solid #1478f5;
      }

      .del {
        position: absolute;
        right: -5px;
        top: -3px;
        cursor: pointer;
        width: 16px;
        height: 16px;
        background: #fff;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .active {
        background: #f2fcff;
        border: 1px solid #1478f5;
      }

      .line-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;

        img {
          position: absolute;
          cursor: pointer;
          width: 20px;
          height: 20px;
          top: 33px;
          left: 140px;
          display: none;
        }
      }
      .line-wrapper:hover img {
        display: block;
      }
      .line {
        width: 1px;
        height: 60px;
        border: 1px solid #dbdde1;
        margin: 10px 0;
      }
    }
  }

  .drawAction {
    width: 60%;
    height: 100%;
    background-color: #f5f5f5;
    position: relative;

    .nextButton {
      position: absolute;
      right: 15px;
      top: 8px;
      color: #1477f3;
      cursor: pointer;
      font-size: 14px;
    }
    ::v-deep .el-tabs__header {
      margin: 0;
      background: #ffffff;

      .el-tabs__nav {
        margin-left: 10px;
      }
    }
  }
}
// cron表达式样式
.crontabBox {
  padding: 15px;

  .crontabBoxTitle {
    margin-bottom: 15px;
    color: #333333;
  }
  ::v-deep .el-tabs--border-card {
    border-radius: 8px;
    box-shadow: unset;
    border: 1px solid #dadce0;
  }
  ::v-deep .popup-main {
    border-radius: 8px;
    border: 1px solid #dadce0;
    font-size: 14px;
  }
  ::v-deep .popup-result {
    border: unset;
    margin: 0 auto;
    padding: 15px 10px 5px 15px;

    .title {
      width: unset;
      margin-left: unset;
      background: transparent;
      color: #333;
    }
  }
  ::v-deep .el-tabs__header {
    border-radius: 8px 8px 0 0;
    margin: 0;
    background: #f5f7fa !important;
    .el-tabs__nav {
      margin-left: 0 !important;
    }
  }

  ::v-deep .el-tabs__header .el-tabs__item:first-child {
    border-radius: 8px 0 0 0;
    margin-left: -2px;
    margin-top: 0px;
  }
  ::v-deep .pop_btn {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    .el-button:last-child {
      display: none;
    }
  }
}
.drawItemBox {
  display: flex;
  background: #ffffff;
  padding: 10px;

  .title {
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }

  .drawBox {
    background: #ffffff;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    display: flex;
    position: relative;
    align-items: center;

    .img {
      margin-right: 20px;
    }

    .actionName {
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      margin-bottom: 5px;
    }

    .content {
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      margin-top: 5px;
    }
  }

  .del {
    position: absolute;
    right: 5px;
    top: 2px;
    cursor: pointer;
  }

  .active {
    background: #f2fcff;
    border: 1px solid #1478f5;
  }

  .line {
    width: 1px;
    height: 60px;
    border: 1px solid #dbdde1;
    margin: 10px 0;
  }
}

// 选择操作
.timeWrap {
  padding: 15px;
  box-sizing: border-box;

  .timeItem {
    width: 100%;
    height: 58px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #dbdde1;
    padding: 10px 14px;
    box-sizing: border-box;
    margin-bottom: 10px;
    display: flex;

    .imgBox {
      width: 15px;
      height: 20px;
      margin-right: 3px;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      font-weight: 500;
      font-size: 14px;
      color: #333333;
    }

    .content {
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }
  }

  .timeItem:hover {
    background: #f2fcff;
    border: 1px solid #1478f5;
  }

  .activTimeItem {
    background: #f2fcff;
    border-radius: 4px;
    border: 1px solid #1478f6;
  }
}

.app {
  .applist {
    display: flex;
    padding: 10px;
    flex-wrap: wrap;

    .appItem {
      width: 202px;
      height: 58px;
      background: #ffffff;
      border-radius: 4px;
      padding: 0 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-right: 10px;
      border: 1px solid #fff;
      margin-bottom: 10px;
      cursor: pointer;

      .imgBox {
        width: 15px;
        height: 22px;
        margin-right: 3px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .appIcon {
        width: 44px;
        height: 44px;
        margin-right: 10px;
        border-radius: 50%;
      }

      .name {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        flex: 1;
      }
    }
    .appItem:hover {
      background: #f2fcff;
      border: 1px solid #1478f5;
    }
    .active {
      background: #f2fcff;
      border: 1px solid #1478f5;
    }
  }
}

.DescribeDataBox {
  display: flex;
  flex-direction: column;
  padding: 10px 15px 10px 10px;
  font-size: 15px;
  color: #333;

  span {
    margin-bottom: 10px;
  }
}
.search {
  display: flex;
  margin: 10px;

  .input {
    margin-right: 10px;
  }
}

.ApiPliginBox {
  height: calc(100vh - 270px);
  overflow: auto;
  padding-right: 5px;
  .appItem {
    height: unset !important;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    padding: 10px !important;
    align-items: flex-start !important;
    margin-right: 0 !important;
    color: #333333 !important;
    font-size: 14px !important;

    .name:first-child {
      font-weight: 500;
      color: #333333;
    }
  }
}

.userList {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 15px 10px 10px;
  font-size: 14px;

  .userItem {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #dbdde1;
    margin-bottom: 10px;
    padding: 15px;
    cursor: pointer;
  }
  .status {
    margin-right: 10px;
    font-size: 18px !important;
  }
  .userAccountIcon {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .userItem:hover {
    background: #f2fcff;
    border: 1px solid #1478f5;
  }
  .userBtn {
    padding: 15px 10px;
    border: 1px dashed #dbdde1;
  }
  .userBtn:hover {
    background: #f2fcff;
    border: 1px dashed #1478f6;
  }
}

.userContentBox {
  width: 100%;
  height: calc(100vh - 200px);
  overflow: auto;

  .active {
    background: #f2fcff;
    border: 1px solid #1478f5;
  }
}
.redBox {
  background: #fff1eb;
  border-radius: 4px;
  border: 1px solid #ffb999;
  color: #ff5100;
  font-size: 12px;
  text-align: center;
  padding: 2px 8px;
  margin-left: 5px;
}

.successBox {
  background: #f6ffed;
  border-radius: 4px;
  border: 1px solid #b7eb8f;
  color: #52c41a;
  font-size: 12px;
  text-align: center;
  padding: 2px 8px;
  margin-left: 5px;
}

.settingBox {
  padding: 10px;

  .title {
    margin-bottom: 10px;
    color: #333333;
    font-weight: 500;
    font-size: 14px;
  }
}
.settingbtn {
  width: 20px;
  height: 20px;
  font-size: 16px;
  color: #1478f6;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
  margin: 0 auto;
  position: absolute;
  top: 90px;
  left: 19px;
  z-index: 999;
  padding: 6px;
}

.settingTabs {
  width: 100%;
  padding: 10px 15px 10px 10px;
  .tabs {
    display: flex;
    align-items: center;
    height: 32px;
    background: #fff;
    border-radius: 4px;
    padding: 2px;
    width: fit-content;

    .tabsItem {
      height: 28px;
      line-height: 28px;
      background: #fff;
      border-radius: 3px;
      font-size: 14px;
      color: #999;
      padding: 0 10px;
      cursor: pointer;
    }

    .active {
      background: #f5f5f5;
      color: #333;
    }
  }

  ::v-deep .el-switch {
    height: 23px !important;
    line-height: 23px !important;
  }
}

.currentDrawBox {
  background: #ffffff;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  .img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .actionName {
    font-weight: 400;
    color: #333333;
    margin-bottom: 5px;
  }
  .content {
    font-weight: 500;
    color: #333333;
    margin-bottom: 5px;
  }

  .drawimg {
    margin-right: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f18709;

    img {
      width: 60%;
      height: 60%;
    }
  }
}

.drawItemBtn {
  background: #ffffff;
  padding: 10px 50px;
  font-size: 14px;
  color: #1478f6;
  border: 1px dashed #dbdde1;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 50px;
}
.drawItemBtn:hover {
  background: #f2fcff;
  border: 1px dashed #1478f6;
}

.DescribeContent {
  display: -webkit-box;
  /*作为弹性伸缩盒子模型显示。*/
  -webkit-box-orient: vertical;
  /*作为弹性伸缩盒子模型显示。*/
  -webkit-line-clamp: 1; //*显示的行*/
  overflow: hidden;
  /*溢出隐藏*/
  /* 对于连字情况或者纯字母，可以解决 */
  word-break: break-all;
  // max-width: 100px;
}

.InterfaceConfiguration {
  background: #fff;
  margin: 10px;
  padding: 10px;
  border-radius: 4px;

  .InterCigTitle {
    font-size: 14px;
    margin-bottom: 10px;
  }
}

::v-deep .operatingClass {
  display: flex;
  align-items: center;
  .el-radio-group {
    background: unset !important;
  }
}

::v-deep .CodeMirror {
  height: 100% !important;
}

.toolbar {
  background: #fff;
  padding: 8px;
  font-size: 14px;
  border-radius: 4px 4px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  select {
    width: 100px;
    margin-left: 10px;
    padding: 2px;
  }
}
.fullScreen {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-left: 10px;
  cursor: pointer;

  > img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
}

.acionImg {
  width: 15px;
  height: 15px;
  margin-left: 5px;
}

::v-deep .el-form-item {
  margin-bottom: 0 !important;
}
::v-deep .el-form-item__label {
  padding-bottom: 0 !important;
  font-weight: bold;
}

.outsideContent {
  height: calc(100vh - 220px);
  overflow: auto;
  padding: 0 10px 10px 10px;
}
::v-deep .el-collapse-item__header.is-active {
  padding-left: 10px !important;
}
// ------------------------
.editor-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.editorIcon {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 20px;
  color: #999999;
}

.clearIcon {
  display: none;
  position: absolute;
  top: 0;
  right: 35px;
  font-size: 20px;
  color: #999999;
}
.editor-container:hover .clearIcon {
  display: block;
}
/* hover 时显示 close-icon */
.editor-container:hover .close-icon {
  display: inline-flex; /* 或 block，根据你的布局 */
}
.content-editor {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  min-height: 36px;
  padding: 0 50px 0 15px;
  background: #fff;
  position: relative;
  font-size: 14px;
  // line-height: 1.6;
  overflow-y: auto;
  outline: none;
  word-wrap: break-word;
}

.content-editor:focus {
  border-color: #409eff;
}

.content-editor:empty:before {
  content: attr(data-placeholder);
  color: #9ca3af;
  font-style: italic;
  pointer-events: none;
}

.content-editor:focus:empty:before {
  content: "";
}

/* 确保空编辑器也能显示光标 */
.content-editor:empty {
  min-height: 20px;
}

.content-editor:focus {
  outline: none;
}

// --------------------------------
::v-deep .content-token {
  display: inline-table;
  padding: 0 10px;
  border-radius: 4px;
  margin: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 500;
  user-select: none;
}
::v-deep .token-function {
  background: #e0e7ff;
  color: #5b21b6;
  border: 1px solid #8b5cf6;
}

::v-deep .repContainer {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  padding: 10px;
  position: relative;
}
.treeNodeBox {
  height: calc(100% - 50px);
  overflow-y: auto;
}

.closeRepContainer {
  position: absolute;
  top: 20px;
  right: 12px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;

  i {
    margin-right: 5px;
  }
}
.closeRepContainer:hover {
  color: #409eff;
}

.repItem {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer;
}

.repItem:hover .repItemValue{
  color: #409eff;
}

.repItemValue {
  color: #6b7280;
  font-size: 13px;
  margin-left: 10px;
}
</style>