ibsp-fg-page 4.0.2

package/src/views/designer/modules/scriptModule/ScriptIndexPlus.vue

@@ -0,0 +1,1308 @@
+<script setup>
+import {
+  ref,
+  watch,
+  defineAsyncComponent,
+  onMounted,
+  reactive,
+  computed,
+  onBeforeUnmount,
+  onActivated,
+  nextTick
+} from 'vue';
+import {
+  CloseBold,
+  SemiSelect,
+  Search,
+  Setting,
+  CircleCloseFilled,
+  Folder,
+  Operation,
+  ArrowDown,
+  Orange
+} from '@element-plus/icons-vue';
+
+
+import Contextmenu from './components/Contextmenu.vue';
+import useScript from './hooks/useScript';
+import useKeyboard from '../../hooks/useKeyboard';
+import useComponentEditor from './hooks/useComponentEditor'
+import Console from './components/console/Console.vue';
+
+import Draggable from '@/libs/vuedraggable/vuedraggable.js'
+import { AnalysisScript } from '@/models/useJavascriptAnalysis'
+import Drag from '@/views/designer/components/drag/index.vue';
+import IbspMonacoCode from '@/components/ibsp/IbspMonacoCode.vue';
+import SvgIcon from '@/components/globals/SvgIcon.vue';
+
+const props = defineProps({
+  page: {
+    type: Object,
+    default: () => ({})
+  },
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  scriptExtraLib: {
+    type: Object,
+    default: () => (null)
+  },
+  options: {
+    type: Object,
+    default: () => ({
+      defaultType: 'script', // script, method, component, null
+      defaultCategory: 'app', // app, platform, null
+      minPanel: false // true, false
+    })
+  }
+})
+
+const state = reactive({
+  type: props.options.defaultType,
+  category: props.options.defaultCategory
+})
+
+const ScriptExtraLib = reactive({
+  content: useComponentEditor(props.scriptExtraLib.content)
+})
+
+watch(() => state.type, () => {
+
+  const scriptExtraLib = state.type === 'component' ? useComponentEditor(props.scriptExtraLib.content) : props.scriptExtraLib.content;
+  ScriptExtraLib.content = scriptExtraLib;
+  console.log(ScriptExtraLib);
+})
+const emit = defineEmits(['close', 'switchScreen', 'narrow'])
+
+const currentScript = ref({
+  value: '',
+  temporaryValue: ''
+})
+const analysisScript = new AnalysisScript();
+const currentSelectConsoleTab = ref('question')
+const currentSelectNav = ref('script-list')
+const codeTips = ref([])
+let monacoRef = null
+const scriptPanelData = reactive([])
+const svgList = {
+  CSS: '<svg t="1705243713719" class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17390" width="200" height="200"><path d="M110.592 108.544h808.96v808.96H110.592z" fill="#FFEA00" p-id="17391"></path><path d="M944.128 0H83.968C38.912 0 2.048 36.864 2.048 81.92v143.36h61.44V102.4c0-22.528 18.432-40.96 40.96-40.96h819.2c22.528 0 40.96 18.432 40.96 40.96v122.88h61.44V81.92c0-45.056-36.864-81.92-81.92-81.92z m20.48 921.6c0 22.528-18.432 40.96-40.96 40.96H104.448c-22.528 0-40.96-18.432-40.96-40.96v-122.88H2.048v143.36c0 45.056 36.864 81.92 81.92 81.92h860.16c45.056 0 81.92-36.864 81.92-81.92v-143.36h-61.44v122.88z" fill="" p-id="17392"></path><path d="M63.488 286.72h901.12v450.56H63.488z" fill="#FFEA00" p-id="17393"></path><path d="M38.912 366.592c0 36.864 4.096 61.44 4.096 94.208 0 18.432-10.24 36.864-43.008 38.912v30.72c34.816 0 43.008 20.48 43.008 38.912 0 32.768-4.096 57.344-4.096 94.208 0 53.248 18.432 69.632 61.44 69.632H124.928v-28.672h-10.24c-26.624 0-32.768-10.24-32.768-43.008 0-28.672 2.048-55.296 2.048-88.064 0-34.816-10.24-51.2-32.768-55.296v-2.048c24.576-8.192 32.768-22.528 32.768-57.344 0-32.768-2.048-59.392-2.048-88.064 0-30.72 6.144-43.008 32.768-43.008H124.928v-28.672H100.352c-40.96-2.048-61.44 14.336-61.44 67.584z m534.528 129.024l-45.056-18.432c-26.624-10.24-53.248-22.528-53.248-49.152 0-26.624 22.528-43.008 55.296-43.008 28.672 0 53.248 10.24 73.728 30.72l26.624-32.768c-24.576-26.624-61.44-40.96-100.352-40.96-63.488 0-108.544 38.912-108.544 92.16 0 49.152 34.816 73.728 67.584 86.016l45.056 20.48c30.72 14.336 53.248 22.528 53.248 53.248 0 28.672-22.528 47.104-63.488 47.104-32.768 0-63.488-14.336-88.064-38.912l-26.624 30.72-22.528-26.624c-20.48 22.528-43.008 34.816-73.728 34.816-59.392 0-96.256-49.152-96.256-126.976 0-77.824 38.912-124.928 96.256-124.928 26.624 0 47.104 12.288 65.536 30.72l28.672-32.768c-20.48-22.528-53.248-40.96-94.208-40.96-81.92-8.192-147.456 57.344-147.456 165.888s63.488 169.984 147.456 169.984c40.96 0 73.728-16.384 98.304-43.008 30.72 26.624 69.632 43.008 112.64 43.008 71.68 0 116.736-43.008 116.736-96.256 0-49.152-28.672-71.68-67.584-90.112z m229.376 0l-45.056-18.432c-26.624-10.24-53.248-22.528-53.248-49.152 0-26.624 22.528-43.008 55.296-43.008 28.672 0 53.248 10.24 73.728 30.72l26.624-32.768c-24.576-26.624-61.44-40.96-100.352-40.96-63.488 0-108.544 38.912-108.544 92.16 0 49.152 34.816 73.728 67.584 86.016l45.056 20.48c30.72 14.336 53.248 22.528 53.248 53.248 0 28.672-22.528 47.104-63.488 47.104-32.768 0-63.488-14.336-88.064-38.912L634.88 634.88c30.72 30.72 71.68 49.152 118.784 49.152 71.68 0 116.736-43.008 116.736-96.256 0-51.2-28.672-73.728-67.584-92.16z m182.272-34.816c0-32.768 4.096-57.344 4.096-94.208 0-53.248-18.432-69.632-61.44-69.632H903.168v28.672h12.288c26.624 0 32.768 12.288 32.768 43.008 0 28.672-2.048 55.296-2.048 88.064 0 34.816 8.192 51.2 32.768 55.296v2.048c-26.624 8.192-34.816 24.576-34.816 59.392 0 32.768 2.048 59.392 2.048 88.064 0 30.72-6.144 43.008-32.768 43.008H903.168v28.672h24.576c40.96 0 61.44-16.384 61.44-69.632 0-36.864-4.096-61.44-4.096-94.208 0-18.432 10.24-38.912 43.008-38.912v-30.72c-34.816 0-43.008-20.48-43.008-38.912z" fill="" p-id="17394"></path></svg>',
+  JS: '<svg t="1705242101309" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10655" width="200" height="200"><path d="M238.592 155.648H399.36v450.56C399.36 809.984 302.08 880.64 146.432 880.64c-37.888 0-87.04-6.144-118.784-17.408l18.432-130.048c22.528 7.168 51.2 12.288 82.944 12.288 67.584 0 110.592-30.72 110.592-141.312V155.648h-1.024z m301.056 547.84c41.984 22.528 110.592 44.032 179.2 44.032 73.728 0 113.664-30.72 113.664-78.848 0-43.008-33.792-69.632-119.808-99.328-118.784-40.96-197.632-107.52-197.632-211.968C515.072 235.52 617.472 143.36 785.408 143.36c81.92 0 139.264 16.384 182.272 35.84L931.84 308.224c-27.648-13.312-79.872-33.792-148.48-33.792-69.632 0-103.424 32.768-103.424 68.608 0 45.056 38.912 65.536 132.096 101.376 125.952 46.08 184.32 112.64 184.32 214.016 0 119.808-91.136 221.184-286.72 221.184-81.92 0-161.792-22.528-201.728-44.032l31.744-132.096z" fill="#F4DE51" p-id="10656"></path></svg>'
+}
+const visibleScriptConsole = ref(false)
+const drag = reactive({
+  x: 0,
+  y: 0,
+  w: '60%',
+  h: 800,
+  draggable: true,
+  direction: 'center' // left ,center, end
+})
+const dragRef = ref(null)
+let prevPosition = null
+const scriptIndexRef = ref(null)
+const visibleScriptNavTab = ref(true)
+const { save } = useScript()
+
+
+const getScriptPanelWidth = computed(() => {
+  if (props.options.minPanel) {
+    return '100%'
+  }
+  if (visibleScriptNavTab.value) {
+    return 'calc(100% - 270px)'
+  }
+  return 'calc(100% - 40px)'
+
+})
+
+const scriptTypeMap = {
+  script: {
+    label: '脚本',
+    icon: {
+      type: 'svg',
+      value: '脚本库'
+    }
+  },
+  method: {
+    label: '方法',
+    icon: {
+      type: 'svg',
+      value: '方法库'
+    }
+  },
+  component: {
+    label: '组件',
+    icon: {
+      type: 'svg',
+      value: '组件脚本'
+    }
+  }
+}
+const headerRightBtn = [
+  {
+    id: 'narrow',
+    icon: {
+      type: 'element-plus',
+      value: SemiSelect
+    },
+    click: () => {
+      emit('narrow')
+
+    }
+  },
+  {
+    id: 'switchScreen',
+    icon: {
+      type: 'svg',
+      value: '放大'
+    },
+    click: () => {
+      if (drag.w === '100%') {
+        drag.w = '60%'
+        drag.h = 800
+        drag.draggable = true
+        if (prevPosition) {
+          dragRef.value.setPosition(prevPosition)
+        }
+        return
+      }
+      drag.w = '100%'
+      drag.h = '100%'
+      prevPosition = {
+        left: dragRef.value.left,
+        top: dragRef.value.top
+      }
+      dragRef.value.setPosition({
+        top: 0,
+        left: 0
+      })
+      console.log(dragRef.value);
+      drag.draggable = false
+
+
+    }
+  },
+  {
+    id: 'close',
+    icon: {
+      type: 'element-plus',
+      value: CloseBold
+    },
+    click: () => {
+      emit('switchScreen')
+    }
+  }
+]
+
+const componentPreview = reactive({
+  show: false,
+  component: null
+})
+
+const scriptTools = reactive([
+  {
+    id: 'search',
+    icon: {
+      type: 'element-plus',
+      value: Search
+    },
+    show: true,
+    label: '搜索',
+    click: () => {
+
+    }
+  },
+  {
+    id: 'run',
+    icon: {
+      type: 'svg',
+      value: '运行脚本'
+    },
+    show: true,
+    label: '运行',
+    click: () => {
+      let remark = null;
+      visibleScriptConsole.value = true;
+      try {
+        remark = JSON.parse(currentScript.value.remark)
+      } catch (error) {
+        remark = null;
+      }
+      if (remark && remark?.type === 'component') {
+        let componentItem = props.page.store.componentStore.getComponentById(remark.componentId);
+        if (componentItem) {
+          componentPreview.component = componentItem;
+          componentItem?.reload()
+          currentSelectConsoleTab.value = 'console';
+        }
+      } else {
+        analysisScript.run(currentScript.value.temporaryValue, {
+          page: props.page
+        })
+      }
+    }
+  },
+  {
+    id: 'save',
+    icon: {
+      type: 'svg',
+      value: '保存'
+    },
+    show: computed(() => !props.options.minPanel),
+    label: '保存',
+    click: () => {
+      if (state.type && currentScript.value && !props.options.minPanel) {
+        save(currentScript.value, state.type === 'method' ? 'method' : 'script')
+      }
+    }
+  },
+  {
+    id: 'console',
+    icon: {
+      type: 'svg',
+      value: '控制台'
+    },
+    show: true,
+    label: '控制台',
+    click: () => {
+      visibleScriptConsole.value = !visibleScriptConsole.value
+
+    }
+  },
+  {
+    id: 'setting',
+    icon: {
+      type: 'element-plus',
+      value: Setting
+    },
+    show: true,
+    label: '设置',
+    click: () => {
+
+    }
+  }
+])
+
+const consoleTabData = [
+  {
+    id: 'question',
+    label: '问题'
+  },
+  {
+    id: 'console',
+    label: '输出'
+  },
+  {
+    id: 'terminal',
+    label: '终端'
+  }
+
+]
+const leftNavData = [
+  {
+    id: 'script-list',
+    icon: {
+      type: 'element-plus',
+      value: Folder
+    },
+    component: defineAsyncComponent(() => import('./components/ScriptList.vue')),
+    select(item) {
+      nextTick(() => {
+        setTimeout(() => {
+          document.getElementById(`scriptTab${item.id}`)
+            .scrollIntoView({
+              behavior: 'smooth',
+              block: 'center',
+              inline: 'center'
+            })
+        }, 50);
+      })
+      const exit = scriptPanelData.find(i => i.id === item.id)
+      if (exit) {
+        currentScript.value = exit
+        monacoRef.setValue(item.scriptContent)
+        return
+      }
+      currentScript.value = item
+      currentScript.value.temporaryValue = item.scriptContent
+      currentScript.value.value = item.scriptContent
+      monacoRef.setValue(item.scriptContent)
+      scriptPanelData.push(currentScript.value)
+
+    }
+  },
+  {
+    id: 'env-list',
+    component: defineAsyncComponent(() => import('./components/EnvData.vue')),
+    icon: {
+      type: 'element-plus',
+      value: Orange
+    }
+  }
+]
+
+
+const getSvgIcon = (data) => {
+  const type = data.scriptType?.split?.('-')
+    ?.at
+    ?.(-1) || data.funcType?.split?.('-')
+    ?.at
+    ?.(-1)
+  if (svgList[type]) {
+    return svgList[type]
+  }
+  return ''
+}
+
+
+const onCreatedIbspMonacoCode = (editor, monaco_Ref) => {
+  monacoRef = monaco_Ref
+}
+
+const onCodeTips = (tips) => {
+  codeTips.value = tips
+}
+
+const onClickScriptItem = (item) => {
+  currentScript.value = item
+  currentScript.value.temporaryValue = item.temporaryValue
+  monacoRef.setValue(item.temporaryValue)
+  document.getElementById(`scriptTab${item.id}`)
+    .scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'center'
+    })
+}
+
+const setValue = (item) => {
+  const i = scriptPanelData.findIndex(i => i.id === item.id)
+  scriptPanelData.splice(i, 1)
+  if (i <= 0) {
+    if (scriptPanelData.length > 0) {
+      currentScript.value = scriptPanelData[0]
+      monacoRef.setValue(scriptPanelData[0].temporaryValue)
+    } else {
+      currentScript.value = {
+        value: '',
+        temporaryValue: ''
+      }
+      monacoRef.setValue('')
+    }
+  } else {
+    currentScript.value = scriptPanelData[i - 1]
+    monacoRef.setValue(scriptPanelData[i - 1].temporaryValue)
+  }
+}
+
+const onClickCloseIcon = (item) => {
+  if (item.temporaryValue !== item.value) {
+    ElMessageBox.confirm('是否保存当前脚本?', '提示', {
+      confirmButtonText: '保存',
+      cancelButtonText: '不保存',
+      type: 'warning'
+    })
+      .then((res) => {
+        if (res === 'confirm') {
+          item.value = item.temporaryValue
+          ElMessage.success('保存成功')
+          setValue(item)
+        }
+      })
+      .catch(() => {
+        setValue(item)
+      })
+    return
+  }
+  setValue(item)
+}
+
+const shortcutCtrlS = (state) => {
+  if (state && !props.options.minPanel) {
+    save(currentScript.value, state.type === 'method' ? 'method' : 'script')
+  }
+
+}
+
+onMounted(() => {
+  useKeyboard()
+    .onKey('Ctrl_S', shortcutCtrlS)
+})
+
+
+const onClickClose = () => {
+  visibleScriptConsole.value = false
+}
+
+const onScriptDragStop = () => {
+  const el = scriptIndexRef.value
+  // 查看el是否有三分之一在屏幕外
+  const { left, width, right } = el.getBoundingClientRect()
+  if (left < 0 && Math.abs(left) > width / 3) {
+    drag.h = '100%'
+    drag.w = 500
+    dragRef.value.setPosition({
+      left: 0,
+      top: 0
+    })
+    drag.direction = 'left'
+  } else if (right > window.innerWidth + (width / 3)) {
+    drag.h = '100%'
+    drag.w = 500
+    dragRef.value.setPosition({
+      left: 0,
+      top: 0
+    })
+    drag.direction = 'end'
+  } else {
+    drag.h = 800
+    drag.w = '60%'
+  }
+}
+
+const onCloseScriptNav = () => {
+  visibleScriptNavTab.value = false
+  currentSelectNav.value = ''
+
+}
+
+const onClickScriptNavTab = (id) => {
+  if (id !== currentSelectNav.value) {
+    currentSelectNav.value = id
+    visibleScriptNavTab.value = true;
+  } else {
+    visibleScriptNavTab.value = !visibleScriptNavTab.value;
+  }
+  // if (visibleScriptNavTab.value) {
+  //   visibleScriptNavTab.value = false
+  //   currentSelectNav.value = ''
+  // } else {
+  //   currentSelectNav.value = id
+  //   visibleScriptNavTab.value = !visibleScriptNavTab.value
+  // }
+}
+
+
+</script>
+
+<template>
+  <div :style="{
+         'justify-content':drag.direction
+       }"
+       class="script-index-plus">
+    <Drag
+      ref="dragRef"
+      :drag-cancel="'.script-left-panel'"
+      :draggable="drag.draggable"
+      :h="drag.h"
+      :resizable="false"
+      :w="drag.w"
+      :x="drag.x"
+      :y="drag.y"
+      :z="98"
+      class="script-index-drag"
+      @dragging="onDragging"
+      @dragstop="onScriptDragStop"
+      @drag-start="()=>{}"
+    >
+      <div ref='scriptIndexRef' class="script-index">
+        <!-- --------------------- header -- start -->
+        <header>
+          <div class="head-left">
+            <div class="logo">
+              <img :src="page.data.platformInfo?.orgLog" alt=""/>
+            </div>
+            <template v-if="!options.minPanel">
+              <div class="head-menu">
+                <el-icon>
+                  <Operation/>
+                </el-icon>
+              </div>
+              <el-dropdown style="width: auto"
+                           trigger="click"
+                           @command="(command) => {state.type = command}">
+                <div class="nav-menu" style="height: 100%;outline: none">
+                  <i>
+                    <SvgIcon :icon="scriptTypeMap[state.type]?.icon"/>
+                  </i>
+                  <span>{{ scriptTypeMap[state.type]?.label }}</span>
+                  <el-icon>
+                    <ArrowDown/>
+                  </el-icon>
+                </div>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item v-for="(item , key) in scriptTypeMap"
+                                      :key="key"
+                                      :command="key">
+                      <div style="height: 100%;outline: none;display: flex;align-items: center;">
+                        <i style="display: flex;">
+                          <SvgIcon :icon="item.icon"/>
+                        </i>
+                        <span style="flex: 1">{{ item.label }}</span>
+                      </div>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+              <!-- <div ref="scriptNavRef"
+                   class="nav-menu"
+                   v-if="state.type"
+                   @click.stop="onClickScriptNav">
+                <i>
+                  <SvgIcon :icon="scriptTypeMap[state.type]?.icon"></SvgIcon>
+                </i>
+                <span>{{ scriptTypeMap[state.type]?.label }}</span>
+                <el-icon>
+                  <ArrowDown />
+                </el-icon>
+              </div> -->
+            </template>
+          </div>
+          <div class="edit-name"
+               @dblclick="headerRightBtn[1].click">
+            <span>IbspCode</span></div>
+          <div class="right-btn">
+            <div v-for="item in headerRightBtn"
+                 :key="item.id"
+                 @click="item.click">
+              <SvgIcon :icon="item.icon">
+              </SvgIcon>
+            </div>
+          </div>
+        </header>
+        <!-- --------------------- header -- end -->
+
+        <main class="script-index-main">
+
+          <!-- ------------------------------ script-nav--- start------------------ -->
+          <aside v-if="!options.minPanel"
+                 :style="{
+                   width: visibleScriptNavTab ? '270px' : '40px'
+                 }"
+                 class="script-container">
+            <div class="nav">
+              <div v-for="item in leftNavData"
+                   :key="item.id"
+                   :class="{
+                     'active': item.id === currentSelectNav
+                   }"
+                   @click="onClickScriptNavTab(item.id)"
+              >
+                <SvgIcon :icon="item.icon"></SvgIcon>
+              </div>
+            </div>
+            <div v-show="visibleScriptNavTab" class="script-nav-content">
+              <template v-for="item in leftNavData"
+                        :key="item.id"
+              >
+                <component :is="item.component"
+                           v-show="item.id === currentSelectNav"
+                           :item="item"
+                           :page="page"
+                           :type="state.type"
+                           @close="onCloseScriptNav"/>
+              </template>
+
+
+            </div>
+
+          </aside>
+          <!-- ------------------------------ script-nav--- end------------------ -->
+
+          <section :style="{
+                     width:getScriptPanelWidth,
+                   }"
+                   class="script-panel">
+            <div class="script-left-panel">
+              <div :style="{
+                     height:visibleScriptConsole ? 'calc(100% - 200px)' : '100%'
+                   }"
+                   class="container"
+              >
+                <!-- ----------------------------- current-script-list --- start -->
+                <div v-if="!options.minPanel" class="script-nav-header">
+                  <Draggable ref="el"
+                             :animation="400"
+                             :list="scriptPanelData"
+                             class="component-list-container"
+                             dragClass="component-drag-list"
+                             ghostClass="component-drag-list"
+                             group="script-editor">
+                    <template #item="{ element: item }">
+                      <div :id="`scriptTab${item.id}`"
+                           :key="item.id"
+                           :class="{
+                             'component-item': true,
+                             'active': item.id === currentScript?.id
+                           }"
+                           @click="onClickScriptItem(item)">
+                        <i class="svg-icon" v-html="getSvgIcon(item)"></i>
+                        <span class="name">
+                          {{ item.showLabel || item.label }}
+                        </span>
+                        <i class="close-btn" @click.stop="onClickCloseIcon(item)">
+                          <el-icon :style="{
+                            opacity: (item.temporaryValue === item.value) ? 1 : 0
+                          }">
+                            <CloseBold/>
+                          </el-icon>
+                          <span :style="{
+                                  opacity: !(item.temporaryValue === item.value) ? 1 : 0
+                                }"
+                                class="dot"></span>
+                        </i>
+
+                      </div>
+                    </template>
+
+                  </Draggable>
+                </div>
+                <!-- ----------------------------- current-script-list --- end -->
+
+                <div id="script-edit-container"
+                     :style="{
+                       height: options.minPanel ? '100%' : 'calc(100% - 40px)'
+                     }">
+                  <IbspMonacoCode ref="IbspMonacoCodeCode"
+                                  v-model="currentScript.temporaryValue"
+                                  :extraLib="ScriptExtraLib"
+                                  @created="onCreatedIbspMonacoCode"
+                                  @tips="onCodeTips"></IbspMonacoCode>
+                </div>
+              </div>
+
+              <!-- 组件预览  -->
+              <!-- <div v-show="componentPreview.show" class="component-preview">
+
+              </div> -->
+
+              <!----------------------------- console --- start --------------------- -->
+              <div v-show="visibleScriptConsole" class="script-tools-container">
+                <header>
+                  <el-tabs v-model="currentSelectConsoleTab"
+                           type="card"
+                  >
+                    <el-tab-pane v-for="item in consoleTabData"
+                                 :key="item.id"
+                                 :label="item.label"
+                                 :name="item.id"/>
+                  </el-tabs>
+                  <div class="console-operation">
+                    <el-icon @click="onClickClose">
+                      <CloseBold/>
+                    </el-icon>
+                  </div>
+
+                </header>
+                <main style="width: 100%;">
+                  <div v-show="currentSelectConsoleTab === 'question'" class="problem-container">
+                    <p v-for="(item, index) in codeTips" :key="index">
+                      <el-icon>
+                        <CircleCloseFilled/>
+                      </el-icon>
+                      {{ item.message }} &nbsp;[行 {{ item.startLineNumber }}, 列 {{ item.startColumn }}]
+                    </p>
+                  </div>
+                  <Console v-show="currentSelectConsoleTab === 'console'"></Console>
+
+                </main>
+
+              </div>
+              <!----------------------------- console --- end --------------------- -->
+            </div>
+
+            <div class="script-tools">
+              <div v-for="item in scriptTools"
+                   v-show="item.show"
+                   :key="item.id">
+                <el-tooltip
+                  :content="item.label"
+                  :show-arrow='false'
+                  class="box-item"
+                  effect="dark"
+                  placement="left"
+                >
+                  <SvgIcon :icon="item.icon" @click="item.click"></SvgIcon>
+                </el-tooltip>
+              </div>
+            </div>
+          </section>
+        </main>
+
+
+        <Teleport to="body">
+          <Contextmenu/>
+        </Teleport>
+
+
+      </div>
+    </Drag>
+
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.script-index-plus {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+
+}
+
+.script-index-drag {
+  background-color: var(--theme-bg);
+  transform: translate(calc(50vw - 30%), calc(50vh - 400px));
+  pointer-events: all;
+  border: none;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 0 10px 0 var(--theme-border-color);
+  backdrop-filter: blur(20px);
+}
+
+.script-index {
+  width: 100%;
+  height: 100%;
+
+  header {
+    width: 100%;
+    height: 40px;
+    border-bottom: 1px solid var(--theme-border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    user-select: none;
+
+    .head-left {
+      display: flex;
+      padding: 0 5px;
+      line-height: 40px;
+      height: 40px;
+      align-items: center;
+
+      .head-menu {
+        display: flex;
+        align-items: center;
+        border-radius: 5px;
+        cursor: pointer;
+        margin: 0 10px;
+        // margin-right: 10px;
+        // margin-left: 10px;
+
+        &:hover {
+          background-color: #414245;
+
+        }
+      }
+
+      > div {
+        height: 30px;
+        width: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 5px;
+
+      }
+
+
+      .nav-menu {
+        width: auto;
+        display: flex;
+        align-items: center;
+        border-radius: 5px;
+        padding: 0 10px;
+        cursor: pointer;
+        padding-right: 5px;
+
+        &:hover {
+          background-color: #414245;
+
+        }
+
+        > * {
+          margin-right: 5px;
+        }
+
+        .el-icon {
+          width: 16px;
+          height: 16px;
+        }
+
+        i {
+          display: flex;
+          align-items: center;
+          margin-right: 5px;
+        }
+      }
+
+      :deep(svg),
+      .el-icon {
+        width: 22px;
+        height: 22px;
+        object-fit: cover;
+      }
+
+      img {
+        width: 18px;
+        height: 18px;
+        object-fit: cover;
+        margin-left: 5px
+      }
+    }
+
+    .edit-name {
+      margin-left: 10px;
+      font-size: 18px;
+      font-family: JetBrains Mono, pinia, Menlo, Monaco, Consolas, 'Courier New', monospace;
+      user-select: none;
+      flex: 1;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .right-btn {
+      display: flex;
+      align-items: center;
+
+      .quick-actions {
+        width: auto;
+        display: flex;
+        padding: 0 5px;
+        line-height: 30px;
+        height: 30px;
+        align-items: center;
+
+        > div {
+          height: 30px;
+          width: 30px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 5px;
+          margin-right: 8px;
+
+          &:hover {
+            background-color: #414245;
+
+          }
+
+          svg,
+          .icon,
+          .el-icon {
+            width: 20px;
+            height: 20px;
+            object-fit: cover;
+          }
+        }
+
+      }
+
+      > div {
+        width: 50px;
+        height: 40px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:hover:not(.quick-actions) {
+          background-color: var(--theme-gl-bg);
+          color: var(--theme-gl-color);
+
+          path {
+            fill: var(--theme-gl-color);
+          }
+        }
+      }
+
+      svg {
+        font-size: 20px;
+
+        flex-shrink: 0;
+        cursor: pointer;
+      }
+
+      .icon {
+        width: 20px;
+        height: 20px;
+
+        path {
+          fill: var(--theme-font-color);
+        }
+      }
+
+      .el-icon {
+        width: 100%;
+        height: 100%;
+
+
+      }
+    }
+  }
+
+  main {
+    display: flex;
+    height: calc(100% - 40px);
+
+    .script-container {
+      width: 270px;
+      height: 100%;
+      border-right: 1px solid var(--theme-border-color);
+      display: flex;
+
+      .nav {
+        width: 40px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border-right: 1px solid var(--theme-border-color);
+
+        .active {
+          background-color: var(--theme-gl-bg);
+        }
+
+        > div {
+          width: 30px;
+          height: 30px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          border-radius: 5px;
+          margin: 5px 0;
+
+          &:hover {
+            background-color: var(--theme-gl-bg);
+          }
+
+          :deep(i) {
+            width: 20px;
+            height: 20px;
+
+            > svg {
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+        }
+
+        //
+      }
+
+      .script-nav-content {
+        flex: 1;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        border-right: 1px solid var(--theme-border-color);
+        overflow: auto;
+
+        .script-nav-content-layout {
+          flex: 1;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+
+        }
+      }
+    }
+
+    .script-panel {
+      width: calc(100% - 270px);
+      height: 100%;
+      display: flex;
+      overflow: hidden;
+
+      .script-left-panel {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+
+        .container {
+
+
+          .script-nav-header {
+            overflow: auto;
+            height: 40px;
+            border-bottom: 1px solid var(--theme-border-color);
+
+            .component-list-container {
+              width: 100%;
+              height: 100%;
+              display: flex;
+              overflow: auto;
+
+              // 清除滚动条
+
+
+              &::-webkit-scrollbar {
+                display: none;
+              }
+
+
+              .component-item {
+                height: 100%;
+                display: flex;
+                align-items: center;
+                padding: 0 10px;
+                padding-right: 0;
+                border-right: 1px solid var(--theme-border-color);
+                background-color: var(--theme-block-bg);
+                flex-shrink: 0;
+                cursor: pointer;
+                position: relative;
+
+                &::after {
+                  content: '';
+                  position: absolute;
+                  bottom: 0;
+                  left: 0;
+                  height: 4px;
+                  width: 100%;
+                  border-radius: 4px;
+                }
+
+                .svg-icon {
+                  display: flex;
+                  margin-right: 5px;
+
+                  :deep(svg) {
+                    width: 14px;
+                    height: 14px;
+                  }
+                }
+
+                .name {
+                }
+
+
+                span {
+                  white-space: nowrap;
+                  /*超出的空白区域不换行*/
+                  overflow: hidden;
+                  /*超出隐藏*/
+                  text-overflow: ellipsis;
+                  /*文本超出显示省略号*/
+
+                }
+
+
+                .close-btn {
+                  width: 30px;
+                  display: flex;
+                  justify-content: center;
+                  position: relative;
+
+                  &:hover {
+                    .el-icon {
+                      opacity: 1 !important;
+                      color: var(--theme-gl-bg);
+                    }
+
+                    .dot {
+                      opacity: 0 !important;
+                    }
+                  }
+
+                  .el-icon {
+                    position: absolute;
+                    inset: 0;
+                    margin: auto;
+                    transition: .3s;
+                  }
+                }
+
+                .dot {
+                  transition: .3s;
+                  background-color: #fff;
+                  width: 0.7rem;
+                  height: 0.7rem;
+                  border-radius: 100%;
+                }
+              }
+
+              .active {
+
+                // border-bottom: 2px solid var(--theme-gl-bg);
+                // color: var(--theme-gl-bg);
+                &::after {
+                  background-color: var(--theme-gl-bg);
+                }
+
+                .close-btn {
+                  .el-icon {
+                    opacity: 1;
+                  }
+                }
+              }
+
+              &::-webkit-scrollbar {
+                width: 5px;
+                height: 5px;
+              }
+
+              &::-webkit-scrollbar-thumb {
+                border-radius: 5px;
+                background-color: var(--theme-btn-bg);
+              }
+
+              &::-webkit-scrollbar-track {
+                border-radius: 5px;
+                background-color: var(--theme-bg);
+              }
+
+            }
+          }
+
+          #script-edit-container {
+            height: calc(100% - 48px);
+            width: 100%;
+          }
+        }
+
+        .script-tools-container {
+          height: 200px;
+          width: 100%;
+          border-top: 1px solid var(--theme-border-color);
+          display: flex;
+          flex-direction: column;
+
+
+          header {
+            width: 100%;
+            height: 30px;
+            display: flex;
+            justify-content: space-between;
+            border-bottom: 1px solid var(--theme-border-color);
+
+
+            .el-tabs {
+              height: 30px;
+              --el-bg-color: var(--theme-gl-bg);
+
+              --el-tabs-header-height: 30px;
+              --el-border-color-light: var(--theme-border-color);
+              width: 100%;
+
+              :deep(.el-tabs__item) {
+                &.is-active, &:hover {
+                  color: var(--theme-gl-bg);
+                }
+              }
+
+              :deep(.el-tabs__header) {
+                border-bottom: none;
+              }
+            }
+
+            .console-operation {
+              width: 100px;
+              height: 30px;
+              display: flex;
+              justify-content: flex-end;
+              align-items: center;
+              padding-right: 10px;
+
+              .el-icon {
+                margin-left: 10px;
+
+                svg {
+                  font-size: 20px;
+                  cursor: pointer;
+
+                  &:hover {
+                    color: var(--theme-gl-bg);
+                  }
+                }
+              }
+            }
+          }
+
+          main {
+            width: 100%;
+            height: calc(100% - 30px);
+
+            .problem-container {
+              height: 100%;
+              overflow: auto;
+              padding: 10px;
+              width: 100%;
+
+
+              > p {
+                display: flex;
+                align-items: center;
+                user-select: text;
+              }
+
+              .el-icon {
+                margin-right: 5px;
+                color: var(--el-color-error);
+                display: flex;
+              }
+            }
+          }
+
+
+        }
+      }
+
+      .script-tools {
+        width: 40px;
+        height: 100%;
+        border-left: 1px solid var(--theme-border-color);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        > div {
+          width: 30px;
+          height: 30px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          border-radius: 6px;
+          margin: 6px 0;
+          // margin-top: 5px;
+          &:hover {
+            background-color: var(--theme-gl-bg);
+          }
+
+          :deep(i) {
+            width: 20px;
+            height: 20px;
+
+            > svg {
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+        }
+      }
+
+
+    }
+  }
+
+}
+</style>