ibsp-fg-page 4.0.2

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

@@ -0,0 +1,686 @@
+<script setup>
+import { ref, watch, defineAsyncComponent, onMounted, reactive, markRaw, onBeforeUnmount, onActivated, onDeactivated } from 'vue';
+import { CloseBold, SemiSelect, Search, Setting, Orange, Folder, Operation, ArrowDown } from '@element-plus/icons-vue';
+import { useDraggable } from '@vueuse/core'
+
+import useKeyboard from '../../hooks/useKeyboard';
+import Contextmenu from './components/Contextmenu.vue';
+import ScriptEditPanel from './components/ScriptEditPanel.vue';
+import useContextmenu from './hooks/useContextmenu';
+import { IbspScript } from './hooks/useIbspScript'
+import { IbspScriptPlus } from './hooks/useIbspScriptPlus';
+import { useScriptStore } from './useScriptStore.js'
+
+import Drag from '@/views/designer/components/drag/index.vue';
+import { AnalysisScript } from '@/models/useJavascriptAnalysis'
+const props = defineProps({
+  page: {
+    type: Object,
+    default: () => ({})
+  },
+  visible: {
+    type: Boolean,
+    default: false
+  }
+})
+const openScriptData = ref([]);
+const scriptEditPanelRef = ref(null)
+const scriptDataRef = ref(null)
+const tipContent = ref('')
+const activeScript = ref('')
+const analysisScript = new AnalysisScript(props.page)
+
+const scriptStore = useScriptStore()
+
+const { open } = useContextmenu()
+
+const ibspScript = new IbspScript(props.page)
+
+// // ref ////
+const scriptContextmenuRef = ref(null)
+const scriptNavRef = ref(null)
+
+const isNarrow = ref(true)
+
+
+const headerData = reactive({
+  navMenu: [
+    {
+      id: 'setting',
+      label: '首选项',
+      icon: markRaw(Setting)
+    }
+  ],
+  scriptMenu: [
+    {
+      id: 'script',
+      label: '脚本',
+      icon: `          <svg t="1709985468338" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="13516" width="200" height="200">
+            <path
+              d="M0 341.333333a341.333333 341.333333 0 0 1 341.333333-341.333333h341.333334a341.333333 341.333333 0 0 1 341.333333 341.333333v341.333334a341.333333 341.333333 0 0 1-341.333333 341.333333H341.333333a341.333333 341.333333 0 0 1-341.333333-341.333333V341.333333z"
+              fill="#27AD9A" p-id="13517"></path>
+            <path
+              d="M620.202667 298.666667l2.986666 0.853333a24.149333 24.149333 0 0 1 13.781334 34.816c-11.093333 20.096-22.229333 40.192-33.408 60.245333l-8.021334 14.506667-55.893333 100.821333-0.128 0.256-111.616 201.386667a26.453333 26.453333 0 0 1-8.789333 10.069333 27.434667 27.434667 0 0 1-8.021334 3.242667 4.138667 4.138667 0 0 0-1.066666 0.469333h-5.930667c-0.725333-0.298667-1.450667-0.597333-2.218667-0.768a23.808 23.808 0 0 1-17.834666-24.576 23.808 23.808 0 0 1 2.944-10.581333l61.952-111.829333a285738.666667 285738.666667 0 0 0 61.994666-111.786667l32.341334-58.410667 0.085333-0.085333 52.906667-95.530667a24.064 24.064 0 0 1 11.434666-11.093333c1.194667-0.512 2.474667-0.853333 3.754667-1.194667l1.536-0.426666a4.821333 4.821333 0 0 0 0.853333-0.384h6.357334zM170.666667 526.08a14.293333 14.293333 0 0 1 0.298666-0.554667 5.205333 5.205333 0 0 0 0.512-1.237333 23.509333 23.509333 0 0 1 6.570667-11.690667l30.72-30.421333 92.16-91.178667a22.528 22.528 0 0 1 24.021333-5.674666c9.088 2.858667 14.506667 9.301333 16.042667 18.645333a22.229333 22.229333 0 0 1-6.698667 20.138667l-42.624 42.197333-42.666666 42.24h-0.042667l-23.722667 23.552-1.194666 1.194667a25.770667 25.770667 0 0 0 1.493333 1.664l108.714667 107.605333c12.970667 12.8 7.338667 34.432-10.325334 39.168a22.698667 22.698667 0 0 1-22.954666-5.973333c-5.12-4.992-10.197333-10.069333-15.274667-15.104l-7.594667-7.552c-33.024-32.768-66.133333-65.493333-99.242666-98.261334a24.576 24.576 0 0 1-7.466667-12.928 3.157333 3.157333 0 0 0-0.512-1.024A6.826667 6.826667 0 0 1 170.666667 540.586667v-14.506667z m681.941333 18.048l0.725333-2.432-0.042666-16.896-0.128-0.128a0.810667 0.810667 0 0 1-0.213334-0.341333 20.181333 20.181333 0 0 0-5.973333-11.306667 2179.84 2179.84 0 0 0-10.965333-10.837333l-7.296-7.253334-0.128-0.085333-55.210667-54.528-24.874667-24.576-24.874666-24.576a23.125333 23.125333 0 0 0-21.973334-6.570667 22.528 22.528 0 0 0-17.834666 16.085334 21.973333 21.973333 0 0 0 5.76 23.125333c5.589333 5.717333 11.349333 11.349333 17.066666 16.981333l5.76 5.632 31.146667 30.805334c10.453333 10.24 20.821333 20.522667 31.232 30.805333 5.333333 5.290667 10.666667 10.624 16.085333 15.914667l8.021334 7.936 1.109333 1.152 0.426667 0.426666a1097.728 1097.728 0 0 1-10.069334 9.728l-23.210666 22.954667-23.210667 22.912c-8.96 8.96-18.005333 17.834667-27.008 26.709333l-27.008 26.709334a22.144 22.144 0 0 0-6.912 19.882666 22.186667 22.186667 0 0 0 16 18.944 22.997333 22.997333 0 0 0 24.234667-5.504 743.893333 743.893333 0 0 0 18.218666-18.048l49.493334-48.810666 7.04-6.954667 7.04-6.997333 13.824-13.653334c9.258667-9.216 18.56-18.346667 27.861333-27.52a22.954667 22.954667 0 0 0 5.888-9.685333z"
+              fill="#FFFFFF" p-id="13518"></path>
+          </svg>`,
+      type: 'scriptMenu'
+    },
+    {
+      id: 'method',
+      label: '方法',
+      icon: `        <svg t="1709994082647" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+          p-id="32547" width="200" height="200">
+          <path
+            d="M812.373333 1024h-600.746666c-116.053333 0-211.626667-95.573333-211.626667-211.626667v-600.746666c0-116.053333 95.573333-211.626667 211.626667-211.626667h600.746666c116.053333 0 211.626667 95.573333 211.626667 211.626667v600.746666c0 116.053333-95.573333 211.626667-211.626667 211.626667z"
+            fill="#5E65EF" p-id="32548"></path>
+          <path
+            d="M477.866667 375.466667l-47.786667 184.32c-20.48 88.746667-40.96 150.186667-61.44 184.32-20.48 40.96-40.96 68.266667-75.093333 88.746666s-61.44 27.306667-95.573334 27.306667c-20.48 0-40.96-6.826667-47.786666-13.653333-13.653333-6.826667-13.653333-20.48-13.653334-27.306667 0-13.653333 6.826667-20.48 13.653334-27.306667 6.826667-6.826667 20.48-13.653333 34.133333-13.653333s20.48 0 27.306667 6.826667 6.826667 13.653333 6.826666 20.48c0 6.826667 0 13.653333-6.826666 20.48l-6.826667 6.826666h6.826667c6.826667 0 13.653333 0 20.48-6.826666 13.653333-13.653333 27.306667-27.306667 34.133333-47.786667 6.826667-13.653333 13.653333-40.96 27.306667-95.573333l81.92-314.026667h-54.613334l13.653334-47.786667c20.48 0 34.133333 0 40.96-6.826666 6.826667-6.826667 20.48-13.653333 27.306666-34.133334 27.306667-54.613333 61.44-88.746667 88.746667-116.053333 34.133333-20.48 68.266667-34.133333 109.226667-34.133333 27.306667 0 40.96 6.826667 54.613333 13.653333 13.653333 6.826667 20.48 20.48 20.48 40.96 0 13.653333-6.826667 27.306667-13.653333 34.133333-6.826667 6.826667-13.653333 13.653333-27.306667 13.653334s-20.48 0-27.306667-6.826667c-6.826667-6.826667-13.653333-13.653333-13.653333-20.48 0-6.826667 0-13.653333 6.826667-20.48 6.826667-6.826667 6.826667-13.653333 6.826666-13.653333v-6.826667h-6.826666c-13.653333 0-34.133333 6.826667-47.786667 27.306667-27.306667 34.133333-47.786667 81.92-61.44 143.36h54.613333l-13.653333 47.786666-54.613333-6.826666zM566.613333 395.946667l116.053334-20.48c20.48 34.133333 34.133333 68.266667 40.96 109.226666 20.48-34.133333 34.133333-54.613333 47.786666-68.266666l34.133334-34.133334c6.826667-6.826667 20.48-6.826667 27.306666-6.826666 13.653333 0 20.48 0 27.306667 6.826666s6.826667 13.653333 6.826667 27.306667 0 20.48-6.826667 27.306667-13.653333 6.826667-27.306667 6.826666c-6.826667 0-13.653333 0-27.306666-6.826666-6.826667 0-13.653333-6.826667-20.48-6.826667-6.826667 0-20.48 0-27.306667 6.826667-13.653333 6.826667-27.306667 27.306667-40.96 54.613333 20.48 68.266667 34.133333 102.4 47.786667 122.88 6.826667 6.826667 13.653333 13.653333 20.48 13.653333 6.826667 0 13.653333 0 13.653333-6.826666 6.826667-6.826667 13.653333-13.653333 27.306667-34.133334l13.653333 6.826667c-20.48 34.133333-40.96 54.613333-54.613333 68.266667-13.653333 6.826667-27.306667 13.653333-40.96 13.653333-13.653333 0-27.306667 0-34.133334-6.826667-6.826667-6.826667-20.48-13.653333-27.306666-27.306666-6.826667-13.653333-13.653333-34.133333-27.306667-68.266667-27.306667 34.133333-47.786667 54.613333-61.44 68.266667s-27.306667 27.306667-34.133333 27.306666c-6.826667 6.826667-20.48 6.826667-27.306667 6.826667-13.653333 0-20.48 0-27.306667-6.826667-6.826667-6.826667-6.826667-13.653333-6.826666-27.306666s6.826667-20.48 13.653333-27.306667c6.826667-6.826667 13.653333-13.653333 27.306667-13.653333 6.826667 0 13.653333 0 20.48 6.826666 13.653333 6.826667 20.48 6.826667 20.48 6.826667 6.826667 0 13.653333 0 20.48-6.826667 6.826667 0 13.653333-13.653333 27.306666-20.48 6.826667-6.826667 20.48-20.48 34.133334-40.96-20.48-75.093333-34.133333-122.88-47.786667-136.533333-6.826667-6.826667-20.48-13.653333-27.306667-13.653333h-20.48z"
+            fill="#FFFFFF" p-id="32549"></path>
+        </svg>`,
+      type: 'scriptMenu'
+    },
+    {
+      id: 'component',
+      label: '组件',
+      icon: `  <svg t="1709994277244" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="47942" width="200" height="200">
+    <path
+      d="M0 0m279.272727 0l465.454546 0q279.272727 0 279.272727 279.272727l0 465.454546q0 279.272727-279.272727 279.272727l-465.454546 0q-279.272727 0-279.272727-279.272727l0-465.454546q0-279.272727 279.272727-279.272727Z"
+      fill="#9254DE" p-id="47943"></path>
+    <path
+      d="M483.700364 512l-200.285091 289.28A23.272727 23.272727 0 0 0 302.545455 837.818182h465.454545a23.272727 23.272727 0 1 0 0-46.545455H346.949818l184.180364-266.007272a23.272727 23.272727 0 0 0 0-26.53091L346.949818 232.727273H768a23.272727 23.272727 0 1 0 0-46.545455h-465.454545a23.272727 23.272727 0 0 0-19.130182 36.538182L483.700364 512z"
+      fill="#FFFFFF" p-id="47944"></path>
+  </svg>`,
+      type: 'scriptMenu'
+    }
+  ],
+  settingMenu: [],
+})
+
+const currentHeaderScript = ref(headerData.scriptMenu[0])
+
+const emit = defineEmits(['close', 'switchScreen', 'narrow'])
+
+const onSelectScript = (item) => {
+  activeScript.value = {
+    ...item,
+    temporaryValue: item.value
+  }
+  scriptEditPanelRef.value.addScriptQueues(item)
+}
+
+
+const onSelectScriptTab = (item) => {
+
+  scriptDataRef?.value?.setCurrentNodeKey?.(openScriptData?.value.length ? item.id : '')
+
+
+}
+
+
+const setTipContent = () => {
+  const str = analysisScript.ibspTip
+  tipContent.value = str
+}
+
+
+// setTipContent()
+
+const onClickSwitchScreen = () => {
+  emit('switchScreen')
+  isNarrow.value = !isNarrow.value
+}
+
+const onClickNarrow = () => {
+  emit('narrow')
+
+}
+
+const onClickClose = () => {
+  emit('close')
+}
+
+const navData = [
+  {
+    id: 'script',
+    label: '脚本库',
+    component: defineAsyncComponent(() => import('./components/ScriptData.vue')),
+    icon: Folder
+  },
+  {
+    id: 'env',
+    label: '环境变量',
+    component: defineAsyncComponent(() => import('./components/EnvData.vue')),
+    icon: Orange
+  }
+]
+
+const currentSelectNav = ref(navData[0].id) // 当前选中脚本
+
+
+const onClickNav = (id) => {
+  currentSelectNav.value = id
+}
+
+const onSelectEnvData = (data) => {
+
+}
+
+const onRunScript = (script) => {
+  analysisScript.run(script)
+}
+
+const shortcutCtrlS = ()=>{
+  console.log('Ctrl_S');
+}
+
+watch(()=>props.visible, (val)=>{
+  if (val) {
+    useKeyboard().onKey('Ctrl_S', shortcutCtrlS)
+  } else {
+    useKeyboard().offKey('Ctrl_S', shortcutCtrlS)
+  }
+}, {
+  immediate: true
+})
+
+onMounted(() => {
+  setTipContent()
+})
+
+
+const onClickScriptNav = (e) => {
+  const { left, bottom } = scriptNavRef.value.getBoundingClientRect()
+  open(
+    { x: left, y: bottom },
+    headerData.scriptMenu,
+    (item) => {
+      currentHeaderScript.value = item
+      ibspScript.state.type = item.id
+      scriptStore.panelState.scriptType = item.id
+    })
+}
+
+const onClickHeadMenu = (e) => {
+  const { left, bottom } = e.target.getBoundingClientRect()
+  open(
+    { x: left, y: bottom },
+    headerData.navMenu,
+    (item) => {
+      console.log(item)
+    })
+}
+
+
+const openConsole = ()=>{
+  ibspScript.state.consoleShow = true
+}
+
+const onClickSave = ()=>{
+  const data = ibspScript.state.currentOperatingItem
+  if (!data) return
+  ibspScript.updateContent(data).then(()=>{
+    data.value = data.temporaryValue
+  })
+}
+
+</script>
+
+<template>
+
+  <div class="script-index"
+       :style="{
+         height:isNarrow ? '700px':'100%',
+       }">
+    <header>
+      <div class="head-left">
+        <div class="logo">
+          <img :src="page.data.platformInfo?.orgLog" alt="" />
+        </div>
+        <div class="head-menu" @click="onClickHeadMenu">
+          <el-icon>
+            <Operation />
+          </el-icon>
+        </div>
+        <el-dropdown>
+          <div>
+            <i v-html="currentHeaderScript.icon"></i>
+            <span>{{ currentHeaderScript.label }}</span>
+            <el-icon>
+              <ArrowDown />
+            </el-icon>
+          </div>
+        </el-dropdown>
+        <div ref="scriptNavRef"
+             class="nav-menu"
+             @click.stop="onClickScriptNav">
+          <i v-html="currentHeaderScript.icon"></i>
+          <span>{{ currentHeaderScript.label }}</span>
+          <el-icon>
+            <ArrowDown />
+          </el-icon>
+        </div>
+      </div>
+      <div class="edit-name"><span>IbspCode</span></div>
+      <div class="right-btn">
+        <div class="quick-actions">
+          <div @click="onClickSave" >
+            <svg t="1710058516384"
+                 class="icon"
+                 viewBox="0 0 1024 1024"
+                 version="1.1"
+                 xmlns="http://www.w3.org/2000/svg"
+                 p-id="5125"
+                 width="200"
+                 height="200">
+              <path
+                d="M847.8 65.2h-31.6v-0.8H207.9v0.8h-31.6c-61.8 0-111.9 50-111.9 111.8v670.8c0 61.8 50.1 111.8 111.9 111.8h671.5c61.8 0 111.9-50.1 111.9-111.8V177c0-61.7-50.2-111.8-111.9-111.8z m-567.9 71.1H744v143.8c0 26.5-23.1 48-51.6 48H331.5c-28.5 0-51.6-21.5-51.6-48V136.3z m608.6 698.4c0 29.6-24.1 53.7-53.8 53.7H189.2c-29.7 0-53.8-24-53.8-53.7V190c0-29.6 24.1-53.7 53.8-53.7h18.6V288c0 61.8 49.5 111.8 110.6 111.8h387.1c61.1 0 110.6-50.1 110.6-111.8V136.3h18.5c29.7 0 53.8 24 53.8 53.7v644.7z"
+                fill="#333333"
+                p-id="5126"></path>
+              <path d="M628 288.4c19.8 0 36-16.2 36-36v-40c0-19.8-16.2-36-36-36s-36 16.2-36 36v40c0 19.8 16.2 36 36 36z"
+                    fill="#333333"
+                    p-id="5127"></path>
+            </svg>
+          </div>
+          <div>
+            <svg t="1709987695869"
+                 class="icon"
+                 viewBox="0 0 1024 1024"
+                 version="1.1"
+                 xmlns="http://www.w3.org/2000/svg"
+                 p-id="17233"
+                 width="200"
+                 height="200">
+              <path
+                d="M264.3 141.6l275.4 179.3 284 184.8c1 0.6 3.6 2.4 3.6 6.7 0 4.3-2.6 6.1-3.6 6.7L539.8 704 264.3 883.3c-0.2-1-0.3-2.1-0.3-3.5V145.1c0-1.3 0.2-2.5 0.3-3.5M262 66.2c-36.5 0-70 32.9-70 78.9v734.6c0 46 33.5 78.9 70 78.9 11.6 0 23.6-3.3 34.8-10.7L579 764.2l284-184.8c48.5-31.6 48.5-102.5 0-134.1L579 260.5 296.9 76.9c-11.3-7.3-23.2-10.7-34.9-10.7z"
+                p-id="17234"></path>
+            </svg>
+          </div>
+          <div @click="openConsole">
+            <svg t="1709700811381"
+                 class="icon"
+                 viewBox="0 0 1024 1024"
+                 version="1.1"
+                 xmlns="http://www.w3.org/2000/svg"
+                 p-id="1471"
+                 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>
+          </div>
+          <div>
+            <el-icon>
+              <Search />
+            </el-icon>
+          </div>
+          <div>
+            <el-icon>
+              <Setting />
+            </el-icon>
+          </div>
+        </div>
+
+        <div @click="onClickNarrow">
+          <el-icon>
+            <SemiSelect />
+          </el-icon>
+        </div>
+        <div @click="onClickSwitchScreen">
+          <svg t="1709986519718"
+               class="icon"
+               viewBox="0 0 1024 1024"
+               version="1.1"
+               xmlns="http://www.w3.org/2000/svg"
+               p-id="14499"
+               width="200"
+               height="200">
+            <path
+              d="M885.333333 938.666667H138.666667a53.393333 53.393333 0 0 1-53.333334-53.333334V138.666667a53.393333 53.393333 0 0 1 53.333334-53.333334h746.666666a53.393333 53.393333 0 0 1 53.333334 53.333334v746.666666a53.393333 53.393333 0 0 1-53.333334 53.333334zM138.666667 128a10.666667 10.666667 0 0 0-10.666667 10.666667v746.666666a10.666667 10.666667 0 0 0 10.666667 10.666667h746.666666a10.666667 10.666667 0 0 0 10.666667-10.666667V138.666667a10.666667 10.666667 0 0 0-10.666667-10.666667z"
+              p-id="14500"></path>
+          </svg>
+        </div>
+        <div @click="onClickClose">
+          <el-icon>
+            <CloseBold />
+          </el-icon>
+        </div>
+
+
+      </div>
+    </header>
+
+    <main>
+      <aside>
+        <nav>
+          <div v-for="item in navData"
+               :class="{
+                 'nav-item': true,
+                 'active': item.id === currentSelectNav
+               }"
+               @click="onClickNav(item.id)"
+               :key="item.id">
+            <el-tooltip class="box-item"
+                        effect="dark"
+                        :content="item.label"
+                        placement="left">
+              <el-icon>
+                <component :is="item.icon"></component>
+              </el-icon>
+            </el-tooltip>
+
+          </div>
+
+        </nav>
+
+      </aside>
+      <section class="aside-data" v-resize.right>
+        <KeepAlive>
+          <component :is="navData.find(i=>i.id === currentSelectNav)?.component"
+                     ref="scriptDataRef"
+                     :page="page"
+                     @selectEnvData="onSelectEnvData"
+                     @selectScript="onSelectScript" />
+        </KeepAlive>
+        <!-- <ScriptData ref="scriptDataRef" @selectScript="onSelectScript" /> -->
+      </section>
+      <section class="edit-panel">
+        <ScriptEditPanel @select="onSelectScriptTab"
+                         @runScript="onRunScript"
+                         ref="scriptEditPanelRef"
+                         :page="page"
+                         v-model="openScriptData" />
+
+      </section>
+
+    </main>
+    <footer>
+
+    </footer>
+
+    <Teleport to="body">
+      <Contextmenu />
+    </Teleport>
+
+
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.script-index {
+  width: 100%;
+  border-radius: 20px;
+  // position: relative;
+
+  header {
+    width: 100%;
+    height: 40px;
+    border-bottom: 1px solid var(--theme-border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    // background-color: #2B2D30;
+    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: 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: 50px;
+        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 {
+    width: 100%;
+    height: calc(100% - 60px);
+    overflow: hidden;
+    display: flex;
+    // position: absolute;
+    // top: 40px;
+
+    aside {
+      width: 45px;
+      height: 100%;
+      border-right: 1px solid var(--theme-border-color);
+      flex-shrink: 0;
+
+      nav {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        // background-color: #2B2D30;
+
+        .nav-item {
+          height: 40px;
+          width: 100%;
+          margin-top: 5px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          &:hover {
+            .el-icon {
+              background-color: #414245;
+
+            }
+          }
+
+          .el-icon {
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 5px;
+
+            svg {
+              font-size: 20px;
+              flex-shrink: 0;
+              cursor: pointer;
+            }
+
+          }
+        }
+
+        .active {
+
+
+          .el-icon {
+            background-color: var(--theme-gl-bg) !important;
+            color: var(--theme-gl-color);
+
+            svg {
+              color: var(--theme-gl-color);
+            }
+
+          }
+        }
+      }
+    }
+
+    .aside-data {
+      width: 260px;
+      border-right: 1px solid var(--theme-border-color);
+    }
+
+    .edit-panel {
+      width: calc(100% - 260px - 45px);
+      height: 100%;
+    }
+  }
+
+  footer {
+    width: 100%;
+    height: 30px;
+    border-top: 1px solid var(--theme-border-color);
+  }
+}
+</style>