ibsp-fg-page 4.0.2

package/src/views/designer/modules/scriptModule/components/ScriptEditPanel.vue

@@ -0,0 +1,658 @@
+<script setup>
+import loader from '@monaco-editor/loader'
+import { onBeforeMount, onMounted, nextTick, ref, watch, onBeforeUnmount } from 'vue';
+import { SemiSelect } from '@element-plus/icons-vue';
+import { CloseBold, CircleCloseFilled, Document, Refresh, MoreFilled, Operation, CircleCheck, Plus, ChromeFilled, Tickets, Collection, Scissor, Opportunity, InfoFilled } from '@element-plus/icons-vue'
+import { VueDraggable } from 'vue-draggable-plus'
+
+import { IbspScript } from '../hooks/useIbspScript'
+
+import Draggable from '@/libs/vuedraggable/vuedraggable.js'
+import { AnalysisScript } from '@/models/useJavascriptAnalysis'
+import { props_map } from '@/stores/usePlatformLibStore';
+import { getPageScriptApi, saveOrUpdateApi, deleteBatchApi } from '@/api/ibsp-bg-app'
+const props = defineProps({
+  language: {
+    type: String,
+    default: 'javascript'
+  },
+  height: {
+    type: String,
+    default: '100%'
+  },
+  readOnly: {
+    type: Boolean,
+    default: false
+  },
+  codeFontFamily: {
+    type: String,
+    default: 'JetBrains Mono,pinia,Consolas, "Courier New", "微软雅黑", "Microsoft YaHei", "宋体", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+  },
+  codeFontSize: {
+    type: Number,
+    default: 14
+  },
+  isView: {
+    type: Boolean,
+    default: false
+  },
+  openView: {
+    type: Boolean,
+    default: null
+  },
+  // activeScript: {
+  //   type: Object,
+  //   default: () => ({
+  //     id: '',
+  //     value: '',
+  //     temporaryValue: '',
+  //   })
+  // },
+  page: {
+    type: Object,
+    default: () => ({})
+  },
+  tipCodes: {
+    type: Array,
+    default: () => []
+  }
+})
+let monacoRef = null
+let monacoInstanceRef = null
+const consoleIf = ref(false)
+const consoleShow = ref(false)
+const emit = defineEmits(['select', 'runScript', 'save'])
+const questionList = ref([])
+const ibspScript = new IbspScript()
+
+
+const activeScript = defineModel()
+
+const analysisScript = new AnalysisScript(props.page)
+
+
+const initMonacoEditor = (value) => {
+  nextTick(() => {
+    loader.init()
+      .then((monacoInstance) => {
+        monacoInstanceRef = monacoInstance
+        monacoInstance.languages.typescript.javascriptDefaults.setExtraLibs([{
+          content: analysisScript.ibspTip,
+        }, ...props.tipCodes])
+        const el = document.getElementById('scriptEditorContainer')
+        monacoRef = monacoInstance.editor.create(el, {
+          value: value || 'function fn(){}',
+          theme: localStorage.getItem('ibsp-theme') === 'light' ? 'vs' : 'vs-dark', // 官方自带三种主题vs, hc-black, or vs-dark
+          readOnly: false, // 是否可编辑 // 是否为只读模式
+          language: 'javascript', // 语言类型
+          acceptSuggestionOnCommitCharacter: true, // 接受关于提交字符的建议
+          acceptSuggestionOnEnter: 'on', // 接受输入建议 "on" | "off" | "smart" //-如果设置off 编辑器上的代码补全显示了,但却不补上
+          accessibilityPageSize: 5, // 辅助功能页面大小 Number 说明：控制编辑器中可由屏幕阅读器读出的行数。警告：这对大于默认值的数字具有性能含义。
+          accessibilitySupport: 'off', // 辅助功能支持 控制编辑器是否应在为屏幕阅读器优化的模式下运行。
+          autoClosingBrackets: 'always', // 是否自动添加结束括号(包括中括号) "always" | "languageDefined" | "beforeWhitespace" | "never"
+          autoClosingDelete: 'always', // 是否自动删除结束括号(包括中括号) "always" | "never" | "auto"
+          autoClosingOvertype: 'always', // 是否关闭改写 即使用insert模式时是覆盖后面的文字还是不覆盖后面的文字 "always" | "never" | "auto"
+          autoClosingQuotes: 'always', // 是否自动添加结束的单引号 双引号 "always" | "languageDefined" | "beforeWhitespace" | "never"
+          autoIndent: 'None', // 控制编辑器在用户键入、粘贴、移动或缩进行时是否应自动调整缩进
+          automaticLayout: true, // 自动布局
+          foldingStrategy: 'indentation', // 折叠方式  auto | indentation
+          codeLens: true, // 是否显示codeLens 通过 CodeLens，你可以在专注于工作的同时了解代码所发生的情况 – 而无需离开编辑器。 可以查找代码引用、代码更改、关联的 Bug、工作项、代码评审和单元测试。
+          codeLensFontFamily: props.codeFontFamily, // codeLens的字体样式
+          codeLensFontSize: props.codeFontSize, // codeLens的字体大小
+          colorDecorators: true, // 呈现内联色彩装饰器和颜色选择器
+          comments: {
+            ignoreEmptyLines: true, // 插入行注释时忽略空行。默认为真。
+            insertSpace: true // 在行注释标记之后和块注释标记内插入一个空格。默认为真。
+          }, // 注释配置
+          contextmenu: true, // 启用上下文菜单
+          columnSelection: false, // 启用列编辑 按下shift键位然后按↑↓键位可以实现列选择 然后实现列编辑
+          autoSurround: 'never', // 是否应自动环绕选择
+          copyWithSyntaxHighlighting: true, // 是否应将语法突出显示复制到剪贴板中 即 当你复制到word中是否保持文字高亮颜色
+          cursorBlinking: 'Solid', // 光标动画样式
+          cursorSmoothCaretAnimation: true, // 是否启用光标平滑插入动画  当你在快速输入文字的时候 光标是直接平滑的移动还是直接"闪现"到当前文字所处位置
+          cursorStyle: 'UnderlineThin', // "Block"|"BlockOutline"|"Line"|"LineThin"|"Underline"|"UnderlineThin" 光标样式
+          cursorSurroundingLines: 0, // 光标环绕行数 当文字输入超过屏幕时 可以看见右侧滚动条中光标所处位置是在滚动条中间还是顶部还是底部 即光标环绕行数 环绕行数越大 光标在滚动条中位置越居中
+          cursorSurroundingLinesStyle: 'all', // "default" | "all" 光标环绕样式
+          cursorWidth: 2, // <=25 光标宽度
+          minimap: {
+            enabled: true // 是否启用预览图
+          }, // 预览图设置
+          folding: true, // 是否启用代码折叠
+          links: true, // 是否点击链接
+          overviewRulerBorder: false, // 是否应围绕概览标尺绘制边框
+          renderLineHighlight: 'gutter', // 当前行突出显示方式
+          roundedSelection: false, // 选区是否有圆角
+          scrollBeyondLastLine: false // 设置编辑器是否可以滚动到最后一行之后
+        });
+        // onChangeTheme(state.settingForm.theme)
+        monacoRef.onDidChangeModelContent(() => {
+          const value = monacoRef.getValue() // 获取编辑器中的语句
+          // eslint-disable-next-line no-unused-expressions
+          ibspScript.state.currentOperatingItem?.temporaryValue && (ibspScript.state.currentOperatingItem.temporaryValue = value)
+        })
+        monacoInstance.editor.onDidChangeMarkers(([uri]) => {
+          const markers = monaco.editor.getModelMarkers({ resource: uri })
+          questionList.value = markers
+        })
+        // monacoRef.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, () => {
+        //   console.log('Ctrl + S 保存')
+        // })
+        // monacoInstance.editor.colorize('console.log("Hello world!");', 'javascript').then((data) => {
+        //   // console.log(data);
+        // });
+        // monacoEditor.setModelLanguage(language);
+
+      })
+  })
+
+}
+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 getSvgIcon = (data) => {
+  const type = data.scriptType?.split?.('-')?.at?.(-1) || data.funcType?.split?.('-')?.at?.(-1)
+  if (svgList[type]) {
+    return svgList[type]
+  }
+  return ''
+}
+
+const onClickScriptItem = (item) => {
+  ibspScript.state.currentOperatingItem = item
+  nextTick(() => {
+    document.getElementById(`scriptTab${item.id}`).scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'center'
+    })
+  })
+}
+
+const onClickCloseIcon = (item) => {
+  const openScriptData = ibspScript.state.scriptPanelDataList
+  const state = ibspScript.state
+  const index = openScriptData.findIndex((i) => i.id === item.id)
+  openScriptData.splice(index, 1)
+  if (state.currentOperatingItem?.id === item.id) {
+    state.currentOperatingItem = index <= 0 ? openScriptData?.[0] : openScriptData[index - 1]
+    monacoRef.setValue(state.currentOperatingItem?.temporaryValue || state.currentOperatingItem?.value || '')
+  }
+}
+
+onMounted(() => {
+  initMonacoEditor()
+})
+
+
+const currentSelectConsoleTab = ref('question')
+const consoleTabData = [
+  {
+    label: '问题',
+    id: 'question',
+  },
+  {
+    label: '输出',
+    id: 'output',
+  },
+]
+const onClickNarrow = () => {
+  ibspScript.state.consoleShow = false
+}
+const onClickClose = () => {
+  ibspScript.state.consoleShow = false
+}
+
+onBeforeUnmount(() => {
+  console.log(monacoInstanceRef, '---', monacoRef);
+  monacoRef.dispose()
+
+
+})
+
+
+watch(() => ibspScript.state.currentOperatingItem, (val) => {
+  if (val) {
+    monacoRef.setValue(val?.temporaryValue || val?.value)
+  }
+})
+
+
+</script>
+
+<template>
+
+  <div class="script-edit-panel"
+       :style="{
+         '--script-edit-panel-header-height': (consoleShow) ? '234px' : '34px'
+       }">
+    <header class="script-edit-panel-header">
+      <Draggable ref="el"
+                 :list="ibspScript.state.scriptPanelDataList"
+                 group="script-editor"
+                 ghostClass="component-drag-list"
+                 dragClass="component-drag-list"
+                 :animation="400"
+                 class="component-list-container">
+        <template #item="{ element: item }">
+          <div :key="item.id"
+               @click="onClickScriptItem(item)"
+               :id="`scriptTab${item.id}`"
+               :class="{
+                 'component-item': true,
+                 'active': item.id === ibspScript.state.currentOperatingItem?.id
+               }">
+            <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 class="script-edit-panel-header-operation"
+
+      >
+        <svg t="1709707097557"
+             class="icon"
+             viewBox="0 0 1024 1024"
+             version="1.1"
+             xmlns="http://www.w3.org/2000/svg"
+             p-id="13690"
+             width="200"
+             @click="onClickSaveScript"
+             height="200"><path d="M814.805 128a51.179 51.179 0 0 1 51.179 51.179V844.01a51.179 51.179 0 0 1-51.179 51.157H201.173a51.179 51.179 0 0 1-51.178-51.157V179.179A51.179 51.179 0 0 1 201.173 128h613.654zM329.024 434.837a51.093 51.093 0 0 1-51.179-51.093V179.157h-76.672v664.854h613.76V179.179H738.22v204.48a51.179 51.179 0 0 1-51.179 51.178H329.024z m0-51.093h357.995V179.157H329.024v204.587z m357.91 204.501a25.557 25.557 0 1 1 0.085 51.072H329.024a25.536 25.536 0 1 1 0-51.072h357.91z"
+                                fill="#333333"
+                                p-id="13691"></path></svg>
+        <svg t="1709700811381"
+             class="icon"
+             viewBox="0 0 1024 1024"
+             version="1.1"
+             xmlns="http://www.w3.org/2000/svg"
+             p-id="1471"
+             width="200"
+             @click="onClickOpenConsole"
+             height="200"><path d="M64 128h896v768H64V128z m102.4 665.6h691.2V230.4H166.4v563.2z m379.968-102.4V588.8H768v102.4H546.368zM222.08 631.232L366.72 486.4 222.08 341.568 294.4 269.184 511.616 486.4 294.4 703.616 222.016 631.232z"
+                                p-id="1472"
+                                data-spm-anchor-id="a313x.search_index.0.i0.74533a816VBNKF"
+                                class="selected"></path></svg>
+        <svg t="1709701551949"
+             class="icon"
+             viewBox="0 0 1024 1024"
+             version="1.1"
+             xmlns="http://www.w3.org/2000/svg"
+             p-id="8977"
+             width="200"
+             @click="onClickRunScript"
+             height="200"><path d="M322.4 928l519.9-416L322.4 96v832z" p-id="8978"></path></svg>
+        <svg t="1709701444926"
+             class="icon"
+             viewBox="0 0 1024 1024"
+             version="1.1"
+             xmlns="http://www.w3.org/2000/svg"
+             p-id="5282"
+             width="200"
+             height="200"><path d="M499.72 872.52c-179.31 0-325.19-143.88-325.19-320.75 0-176.84 145.88-320.72 325.19-320.72 54.31 0 108.12 13.5 155.62 39.03 23.31 12.56 32.06 41.69 19.5 65.03-12.44 23.38-41.56 32.12-65 19.53-33.56-18.06-71.62-27.59-110.12-27.59-126.38 0-229.19 100.81-229.19 224.72 0 123.94 102.81 224.75 229.19 224.75 104.5 0 195.75-69.22 221.87-168.31 6.81-25.62 33.12-40.88 58.69-34.16 25.62 6.78 40.94 33.03 34.19 58.66-37.32 141.18-166.75 239.81-314.75 239.81z"
+
+                                p-id="5283"></path><path d="M799.24 407.04l-89.26-228.19c-6.2-15.85-27.38-18.78-37.64-5.2l-154.62 204.6c-10.26 13.58-1.67 33.16 15.27 34.8l243.89 23.59c16.15 1.57 28.27-14.48 22.36-29.6z"
+
+                                                         p-id="5284"></path></svg>
+      </div> -->
+    </header>
+    <div id="scriptEditorContainer" v-show="ibspScript.state.currentOperatingItem">
+    </div>
+    <div v-show="!ibspScript.state.currentOperatingItem" class="empty-container">暂无脚本, 请添加</div>
+    <footer v-resize.top v-if="ibspScript.state.consoleShow">
+      <div class="ibsp-console" >
+        <header>
+          <el-tabs v-model="currentSelectConsoleTab"
+                   type="card"
+                   @tab-click="handleClick">
+            <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="onClickNarrow">
+              <SemiSelect />
+            </el-icon>
+            <el-icon @click="onClickClose">
+              <CloseBold />
+            </el-icon>
+          </div>
+
+        </header>
+        <main>
+          <div v-show="currentSelectConsoleTab === 'question'" class="problem-container">
+            <p v-for="(item, index) in questionList" :key="index">
+              <el-icon>
+                <CircleCloseFilled />
+              </el-icon>
+              {{ item.message }} &nbsp;[行 {{ item.startLineNumber }}, 列 {{ item.startColumn }}]
+            </p>
+          </div>
+
+        </main>
+
+      </div>
+    </footer>
+  </div>
+
+
+</template>
+
+<style lang="less" scoped>
+.script-edit-panel {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(30, 31, 34, .7);
+  backdrop-filter: blur(20px);
+  display: flex;
+  flex-direction: column;
+
+  #scriptEditorContainer,
+  .empty-container {
+    width: 100%;
+    flex: 1;
+
+    :deep(.view-lines) {
+      // font-family: pinia, consolas, "courier new", "微软雅黑", "microsoft yahei", "宋体", sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol" !important;
+    }
+
+
+  }
+
+  header{
+    flex-shrink: 0;
+  }
+
+  footer {
+    width: 100%;
+    height: 200px;
+
+    background-color: var(--theme-bg);
+    user-select: none;
+    border-top: 1px solid var(--theme-border-color);
+
+    .ibsp-console {
+      width: 100%;
+      height: 100%;
+      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__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;
+
+
+          >p {
+            display: flex;
+            align-items: center;
+            user-select: text;
+          }
+
+          .el-icon {
+            margin-right: 5px;
+            color: var(--el-color-error);
+            display: flex;
+          }
+        }
+      }
+
+
+    }
+
+  }
+}
+</style>
+
+<style lang="less">
+.script-edit-panel-header {
+  width: 100%;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid var(--theme-border-color);
+  // background-color:#1E1F22;
+  user-select: none;
+
+  .script-edit-panel-header-operation {
+    width: 130px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    background-color: var(--theme-bg);
+    padding-left: 10px;
+
+    .icon {
+      width: 20px;
+      height: 20px;
+      margin-right: 10px;
+
+      path {
+        fill: var(--theme-font-color);
+      }
+
+      &:hover {
+        path {
+          fill: var(--theme-gl-bg);
+        }
+      }
+    }
+
+  }
+
+  .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;
+
+        .icon {
+          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);
+    }
+
+  }
+
+  .setUp-list {
+    width: 100px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    padding-right: 10px;
+    cursor: pointer;
+
+    .more {
+      font-size: 20px;
+    }
+
+    .run {
+      width: 20px;
+      height: 20px;
+      margin-right: 15px;
+
+      path {
+        fill: var(--theme-font-color);
+      }
+    }
+  }
+}
+</style>