ibsp-fg-page 4.0.2

package/src/views/designer/modules/headerWidgetModule/HeaderWidgetIndex.vue

@@ -0,0 +1,937 @@
+<script setup>
+import { useRoute, useRouter } from 'vue-router';
+import { onMounted, ref, reactive, defineAsyncComponent, markRaw, computed, inject, onBeforeMount, watch } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import {
+  Download,
+  FolderChecked,
+  FullScreen,
+  Moon,
+  RefreshRight,
+  Setting,
+  Sunny,
+  Upload,
+  View,
+  HelpFilled,
+  Plus,
+  Close
+} from '@element-plus/icons-vue';
+import { toggleFull } from 'be-full';
+import { Modal } from '@nextui';
+import NewScriptIndex from '@ibsp-script/src/index.vue'
+import { _app } from '@models'
+
+import SvgIcon from '@/components/globals/SvgIcon.vue'
+// import useKeyboard from '../../hooks/useKeyboard';
+import { useKeyboard } from '@/hooks/useKeyboard';
+// import BindValueConfig from '@/views/designer/components/BindValueConfig/index.vue'
+import IbspSelect from '@/components/ibsp/IbspSelect.vue';
+import { pageVersionListApi, savePageVersionApi, copyPageVersion, startPageVersion, deletePageVersion } from '@/api/ibsp-bg-page'
+import IbspButton from '@/components/ibsp/IbspButton.vue';
+import ScriptEditorModule from '@/views/designer/modules/scriptModule/ScriptIndex.vue';
+import ScriptEditorModulePlus from '@/views/designer/modules/scriptModule/ScriptIndexPlus.vue';
+import IbspDialog from '@/components/ibsp/IbspDialog.vue';
+// import PageDrawerPopup from '@/components/common/PageDrawerPopup.vue';
+import { getPagePlatformSysParamApi } from '@/api/ibsp-bg-app'
+import { AnalysisScript } from '@/models/useJavascriptAnalysis'
+import { registerCommand } from '@/models/command'
+const props = defineProps({
+  activeComponent: {
+    type: Object,
+    default: () => ({})
+  },
+  page: {
+    type: Object,
+    default: () => ({})
+  },
+  loadPage: {
+    type: Function,
+    default: () => { }
+  }
+})
+
+const switchTheme = inject('switchTheme');
+const router = useRouter();
+const route = useRoute()
+const activeTheme = ref(localStorage.getItem('ibsp-theme') || 'dark');
+const jumpTagRef = ref(null);
+const scriptModuleRef = ref(null);
+const platformConfig = ref({})
+const isShowScriptEditor = ref(false);
+const isShowScriptEditor2 = ref(false);
+const versionList = ref([])
+let isLoadingCompleted = false
+const visibleScriptModuleIf = ref(false)
+const visibleScriptModuleShow = ref(false)
+const bindValueState = ref(false)
+const scriptIndexVisible = ref(false)
+const analysisScript = new AnalysisScript(props.page)
+const scriptExtraLib = reactive({
+  content: ''
+})
+
+const savePage = () => {
+  if (!isLoadingCompleted) {
+    ElMessage.warning('页面加载中, 请等待加载完成后再保存');
+    return
+  }
+  // 暂时保存到localStorage, 后续调用接口保存
+  const data = props.page.generatePreviewData()
+  const id = props.page.id;
+  console.log('id', id, data);
+  if (!id || id === 'designer') {
+    ElMessage.warning('保存失败, 请前往数字中台创建页面, 已保存到本地');
+  } else {
+    savePageVersionApi({
+      id,
+      viewJson: JSON.stringify(data) || '{}'
+    })
+      .then(res => {
+        ElMessage.success(res.success ? '保存成功' : '保存失败');
+      })
+  }
+  localStorage.setItem('ibsp-page', JSON.stringify(data));
+}
+
+const previewPage = () => {
+  if (jumpTagRef.value) {
+    jumpTagRef.value.href = '/preview/' + route.params?.id
+    jumpTagRef.value.click()
+  }
+}
+
+
+const headerBtnWidgetList = [
+  {
+    id: 0,
+    label: '页面设置',
+    icon: {
+      type: 'element-icon',
+      value: Setting
+    },
+    handleFn: () => {
+      props.activeComponent?.clearActiveComponent?.()
+    }
+  },
+  // {
+  //   id: 1,
+  //   label: '上传',
+  //   icon: {
+  //     type: 'element-icon',
+  //     value: Upload
+  //   },
+  //   handleFn: () => {
+  //   }
+  // },
+  // {
+  //   id: 4,
+  //   label: '导出',
+  //   icon: {
+  //     type: 'element-icon',
+  //     value: Download
+  //   },
+  //   handleFn: () => {
+  //   }
+  // },
+  {
+    id: 2,
+    label: '保存',
+    icon: {
+      type: 'element-icon',
+      value: FolderChecked
+    },
+    handleFn: savePage
+  },
+  {
+    id: 3,
+    label: '预览',
+    icon: {
+      type: 'element-icon',
+      value: View
+    },
+    handleFn: previewPage
+  }
+];
+
+/**
+ * 平台库列表
+ */
+const platformLibList = reactive([
+  {
+    label: '素材库',
+    id: 'materialLib',
+    open: false,
+    component: markRaw(defineAsyncComponent(() => import('@platform-material'))),
+    height: '70%',
+    data: {
+      id: 'materialLib',
+      active: false,
+      position: {
+        x: 0,
+        y: 0
+      }
+    }
+  },
+  {
+    label: '变量库',
+    id: 'variableLib',
+    open: false,
+    component: markRaw(defineAsyncComponent(() => import('@platform-var'))),
+    data: {
+      id: 'variableLib',
+      active: false,
+      position: {
+        x: 0,
+        y: 0
+      }
+    }
+  },
+  {
+    label: '常量库',
+    id: 'constantLib',
+    open: false,
+    component: markRaw(defineAsyncComponent(() => import('@platform-const'))),
+    data: {
+      id: 'constantLib',
+      active: false,
+      position: {
+        x: 0,
+        y: 0
+      }
+    }
+
+  },
+  {
+    label: '方法库',
+    id: 'methodLib',
+    open: false,
+    component: null,
+    click: () => {
+      visibleScriptModuleIf.value = true
+      visibleScriptModuleShow.value = true
+    },
+    data: {
+      id: 'methodLib',
+      active: false,
+      position: {
+        x: 0,
+        y: 0
+      }
+    }
+  },
+  {
+    label: '脚本库',
+    id: 'scriptLib',
+    open: false,
+    component: null,
+    click: () => {
+      visibleScriptModuleIf.value = true
+      visibleScriptModuleShow.value = true
+    },
+    data: {
+      id: 'scriptLib',
+      active: false,
+      position: {
+        x: 0,
+        y: 0
+      }
+    }
+  },
+  {
+    label: '图标库',
+    id: 'iconLib',
+    open: false,
+    component: markRaw(defineAsyncComponent(() => import('@platform-icon'))),
+    data: {
+      id: 'iconLib',
+      active: false,
+      position: {
+        x: 0,
+        y: 0
+      }
+    }
+  },
+  {
+    label: '数据模型',
+    id: 'dataSource',
+    open: false,
+    component: markRaw(defineAsyncComponent(() => import('@data-model'))),
+    height: '620px',
+    width: '1020px',
+    closeDestroyContent: true,
+    hideFooter: false,
+    data: {
+      id: 'dataSource',
+      active: false,
+      position: {
+        x: 0,
+        y: 0
+      }
+    }
+  }
+])
+
+registerCommand('dataSource.open', () => {
+  platformLibList.find(item => item.id === 'dataSource').open = true
+})
+
+/**
+ *  点击平台库列表项事件
+ */
+const onClickPlatform = (index) => {
+  const handleFn = platformLibList[index]?.click
+  if (handleFn) {
+    handleFn()
+  } else {
+    platformLibList[index].open = true;
+  }
+}
+
+/**
+ *  主题切换
+ * @param {*} theme
+ */
+const handleThemeChange = (theme) => {
+  activeTheme.value = theme;
+  if (theme === 'light') {
+    document.documentElement.classList.remove('dark');
+    document.documentElement.classList.remove('ibsp-next-ui-dark');
+    document.documentElement.classList.add('theme-light');
+    document.documentElement.classList.add('ibsp-next-ui-light');
+  } else {
+    document.documentElement.classList.remove('theme-light');
+    document.documentElement.classList.remove('ibsp-next-ui-light');
+    document.documentElement.classList.add('dark');
+    document.documentElement.classList.add('ibsp-next-ui-dark');
+  }
+  localStorage.setItem('ibsp-theme', theme);
+  switchTheme(theme)
+};
+
+
+/**
+ * 点击全屏图标事件
+ */
+const onclickFullScreen = () => {
+  toggleFull();
+}
+
+/**
+ * 点击刷新图标事件
+ */
+const onClickRefresh = () => {
+  router.go(0);
+}
+
+
+onBeforeMount(async () => {
+  const res = await getPagePlatformSysParamApi()
+  platformConfig.value = res.data
+  props.page.data.platformInfo = res.data
+})
+
+onMounted(() => {
+
+  useKeyboard()
+    .onKey('Command_S')
+    .onKey('Ctrl_S')
+    .selector('#app-designer-container')
+    .subscribe(() => {
+      savePage()
+    })
+  useKeyboard()
+    .onKey('Command_D')
+    .onKey('Ctrl_D')
+    .selector('#app-designer-container')
+    .subscribe(() => {
+      previewPage()
+    })
+  // useKeyboard().onKey('Ctrl_S', () => {
+  //   savePage()
+  // }, true)
+  // useKeyboard().onKey('Command_S', (e) => {
+  //   if (e) {
+  //     savePage()
+  //   }
+  // }, true)
+  // useKeyboard().onKey('Ctrl_D', () => {
+  //   previewPage()
+  // }, true)
+  // useKeyboard().onKey('Command_D', (e) => {
+  //   if (e) {
+  //     previewPage()
+  //   }
+  // }, true)
+  // document.addEventListener('keydown', (e) => {
+  //   if ((e.ctrlKey && e.key === 's') || (e.metaKey && e.key === 's') || (e.ctrlKey && e.key === 'd') || (e.metaKey && e.key === 'd')) {
+  //     e.preventDefault()
+  //   }
+  // })
+});
+
+const onClickOpenScriptEditor = () => {
+  isShowScriptEditor.value = true
+}
+const onClickOpenScriptEditor2 = () => {
+  scriptExtraLib.content = analysisScript.ibspTip
+  // isShowScriptEditor2.value = true
+  visibleScriptModuleIf.value = true
+  visibleScriptModuleShow.value = true
+}
+
+const scriptFullScreenStatus = ref(false);
+const isCloseDestructionScriptDialog = ref(false);
+const onCloseScriptModule = () => {
+  isCloseDestructionScriptDialog.value = true
+  isShowScriptEditor.value = false
+}
+
+const onClickNarrow = () => {
+  isCloseDestructionScriptDialog.value = false
+  isShowScriptEditor.value = false
+  visibleScriptModuleShow.value = false
+}
+
+const onClickSwitchScreen = () => {
+  scriptFullScreenStatus.value = !scriptFullScreenStatus.value
+  visibleScriptModuleIf.value = false
+  visibleScriptModuleShow.value = false
+}
+
+
+const updateVersionList = async (page) => {
+  const res = await pageVersionListApi({
+    'appId': page.appId,
+    'pageConfigId': page._pageVersionInfo.idPageConfig,
+    'pageNo': 1,
+    'pageSize': 20
+  })
+  versionList.value = (res.data?.records || [])
+    .sort((a, b) => a.versionIndex - b.versionIndex)
+    .map(item => ({
+      ...item,
+      label: `v${item.versionIndex}`,
+      value: item.id
+    }))
+}
+
+/**
+ * 更新版本列表
+ */
+watch(() => props.page?.id, async () => {
+  isLoadingCompleted = true
+  await updateVersionList(props.page)
+}, {
+  immediate: true
+})
+
+const onChangeVersion = (val) => {
+  props.loadPage(val)
+  startPageVersion(val)
+}
+
+const onClickAddVersion = () => {
+  const id = versionList.value.find(item => item.value === props.page.id)?.id
+  if (!id) {
+    return
+  }
+  copyPageVersion(id).then(res => {
+    if (res.success) {
+      ElMessage.success('添加成功')
+      updateVersionList(props.page)
+    } else {
+      ElMessage.error('添加失败')
+    }
+  })
+}
+const onClickDelVersion = (item) => {
+  if (versionList.value.length === 1) {
+    return ElMessage.error('至少保留一个版本')
+  }
+  ElMessageBox.confirm(`确定删除 V${item.versionIndex} 版本吗?`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    deletePageVersion(item.id).then(res => {
+      if (res.success) {
+        if (props.page.id === item.id) {
+          versionList.value = versionList.value.filter(i => i.id !== item.id)
+          onChangeVersion(versionList.value[versionList.value.length - 1]?.id)
+        }
+
+        updateVersionList(props.page)
+        ElMessage.success('删除成功')
+      } else {
+        ElMessage.error('删除失败')
+      }
+    })
+  })
+    .catch(() => {
+      ElMessage.info('已取消删除')
+    })
+}
+
+const onClickOpenScriptEditor3 = () => {
+  scriptIndexVisible.value = true
+}
+</script>
+
+<template>
+  <div class="header-container">
+    <div class="app-logo">
+      <div class="logo-container">
+        <img :src="platformConfig?.sysLog" alt="">
+      </div>
+      <h1>{{ `${platformConfig?.sysName}-页面设计器` || '综合业务平台-页面设计器' }}</h1>
+    </div>
+
+    <div class="app-project-title">
+      <span>{{ page.name }}</span>
+      <IbspSelect v-model="page.versionId"
+                  @change="onChangeVersion"
+                  style="width: 100px;margin-left: 5px;"
+                  size="small"
+                  popper-class="page-version-select"
+                  :options="versionList">
+        <template #footer>
+          <div class="app-project-version-add" @click="onClickAddVersion">
+            <el-icon>
+              <Plus></Plus>
+            </el-icon>
+          </div>
+        </template>
+        <template #option="{ item }">
+          <div class="app-project-title-label">
+            <span>{{ item.label }}</span>
+            <el-icon @click.stop="onClickDelVersion(item)">
+              <Close></Close>
+            </el-icon>
+          </div>
+        </template>
+
+      </IbspSelect>
+    </div>
+
+    <div class="header-widgets">
+      <!--      刷新-->
+      <div class="refresh" @click="onClickRefresh">
+        <el-icon>
+          <RefreshRight />
+        </el-icon>
+      </div>
+      <!--      全屏-->
+      <div class="full-screen" @click="onclickFullScreen">
+        <el-icon>
+          <FullScreen />
+        </el-icon>
+      </div>
+
+
+      <!-- <div class="refresh script" @click="onClickOpenScriptEditor2">
+        <svg t="1709974019050"
+             class="icon"
+             viewBox="0 0 1024 1024"
+             version="1.1"
+             xmlns="http://www.w3.org/2000/svg"
+             p-id="4700"
+             width="200"
+             height="200">
+          <path
+            d="M919.113143 325.485714H104.813714v-67.803428h814.299429v-133.12a36.571429 36.571429 0 0 0-36.571429-36.571429H141.385143a36.571429 36.571429 0 0 0-36.571429 36.571429L103.862857 865.645714a36.425143 36.425143 0 0 0 36.571429 36.571429h673.865143a33.938286 33.938286 0 1 1 0 67.876571h-705.097143-0.146286a73.142857 73.142857 0 0 1-73.069714-73.142857L36.937143 93.184a73.142857 73.142857 0 0 1 73.142857-73.142857h803.693714a73.142857 73.142857 0 0 1 73.142857 73.142857v703.268571a33.938286 33.938286 0 0 1-67.803428 0V325.485714zM206.628571 215.844571a33.938286 33.938286 0 1 1 0-67.803428 33.938286 33.938286 0 0 1 0 67.803428z m203.556572 0a33.938286 33.938286 0 1 1 0-67.803428 33.938286 33.938286 0 0 1 0 67.803428z m-101.814857 0a33.938286 33.938286 0 1 1 0-67.803428 33.938286 33.938286 0 0 1 0 67.803428z m34.889143 250.148572c7.168-7.094857 26.112-7.094857 33.28 0 7.168 7.094857 7.168 29.476571 0 37.156571L265.874286 610.742857 373.76 712.923429c7.168 7.094857 8.118857 27.355429 0 35.328-9.801143 9.728-29.842286 8.192-36.571429 1.609142l-126.025142-125.805714a18.432 18.432 0 0 1 0-25.965714l132.096-132.096z m343.478857 0l132.096 132.096a18.432 18.432 0 0 1 0 26.038857l-126.098286 125.732571c-6.656 6.582857-25.6 10.752-36.571429 0-10.313143-10.24-7.094857-31.305143 0-38.4l108.397715-100.717714-111.908572-108.690286c-7.168-7.68-9.508571-26.624 0-36.059428 9.289143-9.142857 26.916571-7.094857 34.084572 0z m-135.68-26.331429c3.657143-9.508571 21.430857-15.506286 32.768-11.264 10.825143 4.022857 17.188571 19.017143 14.189714 28.525715l-119.808 329.947428c-3.657143 9.508571-20.699429 13.238857-30.281143 9.728-10.166857-3.584-21.211429-17.554286-17.554286-27.062857l120.685715-329.874286z"
+            fill="#000000"
+            p-id="4701"></path>
+        </svg>
+      </div> -->
+      <div class="refresh script" @click="onClickOpenScriptEditor3">
+        <SvgIcon :icon="{
+          type:'svg',
+          value:'脚本2'
+        }" />
+      </div>
+      <!--      主题切换-->
+      <div class="theme-switch">
+        <div :class="{
+               active: activeTheme === 'dark'
+             }"
+             @click="handleThemeChange('dark')">
+          <el-icon>
+            <Moon />
+          </el-icon>
+        </div>
+        <div :class="{
+               active: activeTheme === 'light'
+             }"
+             @click="handleThemeChange('light')">
+          <el-icon>
+            <Sunny />
+          </el-icon>
+        </div>
+      </div>
+
+      <el-dropdown @command="onClickPlatform" trigger="click">
+        <IbspButton size="small"
+                    text
+                    :icon="HelpFilled"
+                    class="dropdown-btn"
+                    type="primary">平台库</IbspButton>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item :command="index"
+                              v-for="(item, index) in platformLibList"
+                              :key="item.id">{{ item.label
+                              }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <IbspButton v-for="item in headerBtnWidgetList"
+                  :key="item.id"
+                  :icon="item.icon.value"
+                  size="small"
+                  text
+                  type="primary"
+                  @click="item.handleFn">{{ item.label }}
+      </IbspButton>
+
+      <a ref="jumpTagRef" target="preview"></a>
+      <IbspDialog v-model="isShowScriptEditor"
+                  title="脚本编辑器"
+                  width="80%"
+                  bodyPadding="0"
+                  align-center
+                  :modal="false"
+                  class="script-dialog-1"
+                  :destroy-on-close="isCloseDestructionScriptDialog"
+                  :fullscreen="scriptFullScreenStatus"
+                  :headerVisible="false">
+        <ScriptEditorModule @switchScreen="onClickSwitchScreen"
+                            @narrow="onClickNarrow"
+                            @close="onCloseScriptModule"
+                            ref="scriptModuleRef"
+                            :visible="isShowScriptEditor"
+                            :page="page" />
+      </IbspDialog>
+      <Teleport to="body">
+        <ScriptEditorModulePlus @switchScreen="onClickSwitchScreen"
+                                @narrow="onClickNarrow"
+                                v-if="visibleScriptModuleIf"
+                                v-show="visibleScriptModuleShow"
+                                @close="onCloseScriptModule"
+                                ref="scriptModuleRef"
+                                :scriptExtraLib="scriptExtraLib"
+                                :visible="visibleScriptModuleShow"
+                                :page="page" />
+      </Teleport>
+
+      <!--      平台库弹窗-->
+      <Teleport to="body">
+        <template v-for="(item) in platformLibList" :key="item.id">
+          <Modal v-model="item.open"
+                 :title="item.label + '配置'"
+                 :style="{
+                   width: item.width || '65%',
+                   height: item.height || '60%'
+                 }"
+                 :clickMaskClose="false"
+                 closeDestroyContent
+                 :hideFooter="true">
+            <component v-if="item.open"
+                       :is="item.component"
+                       :page="page"></component>
+          </Modal>
+        </template>
+
+      </Teleport>
+
+
+    </div>
+
+    <NewScriptIndex
+      :page="page"
+      v-model:visible="scriptIndexVisible"
+    />
+
+
+  </div>
+</template>
+
+<style lang="less" scoped>
+.el-drawer {
+  :deep(&.page_setting) {
+    height: calc(100% - 50px);
+    top: 0;
+    bottom: 0;
+    margin-top: 50px;
+    width: 330px !important;
+    background-color: var(--theme-bg);
+    pointer-events: all;
+
+    .el-drawer__body {
+      padding: 0;
+
+      .el-input__wrapper {
+        background-color: var(--theme-block-bg);
+        box-shadow: none;
+        border: 1px solid var(--theme-border-color);
+        --el-input-text-color: var(--theme-font-color);
+      }
+    }
+
+    .el-drawer__header {
+      margin-bottom: 0;
+      padding: 10px 0;
+
+      .el-drawer__title {
+        text-align: center;
+        color: var(--theme-font-color);
+      }
+    }
+  }
+}
+
+.header-container {
+  height: 100%;
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .app-project-title {
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    font-family: pinia, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  .header-widgets {
+    display: flex;
+    align-items: center;
+
+    .script {
+
+      :deep(i){
+        width: 20px;
+        height: 20px;
+        svg{
+          width: 100%;
+          height: 100%;
+          --fill:var(--theme-btn-color);
+        }
+        &:hover {
+          svg {
+            --fill: var(--theme-gl-color);
+          }
+        }
+      }
+
+      // svg {
+      //   width: 20px;
+      //   height: 20px;
+
+      //   &:hover {
+      //     path {
+      //       fill: var(--theme-gl-color) !important;
+      //     }
+
+      //   }
+
+      //   path {
+      //     fill: var(--theme-btn-color);
+      //   }
+      // }
+    }
+
+
+  }
+
+  .el-button {
+    background-color: var(--theme-btn-bg);
+    color: var(--theme-btn-color) !important;
+    border: 1px solid var(--theme-btn-border-color);
+    border-radius: 3px;
+    --el-fill-color-light: var(--theme-btn-bg);
+    outline: none !important;
+    height: 26px;
+    font-size: 14px;
+
+
+    &:hover {
+      background-color: var(--theme-gl-bg);
+      color: var(--theme-gl-color) !important;
+
+    }
+  }
+
+  .theme-switch {
+    flex-shrink: 0;
+    margin-right: 10px;
+    width: 60px;
+    height: 26px;
+    display: flex;
+    background-color: var(--theme-btn-bg);
+    color: var(--theme-btn-color) !important;
+    border: 1px solid var(--theme-btn-border-color);
+    cursor: pointer;
+    border-radius: 2px;
+
+    >div {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--theme-btn-bg);
+      border-radius: 2px;
+      transition: .2s;
+
+    }
+
+
+    .active {
+      background-color: var(--theme-gl-bg);
+      color: var(--theme-gl-color) !important;
+    }
+
+    :deep(i) {
+      font-size: 14px !important;
+
+    }
+  }
+
+  .el-button.is-text:not(.is-disabled):active {
+    background-color: var(--theme-btn-bg);
+  }
+
+
+  .app-logo {
+    display: flex;
+    align-items: center;
+    color: var(--theme-gl-bg);
+    -webkit-text-fill-color: transparent;
+    background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, #ffffff, rgba(255, 255, 255, 0) 60%) -100% / 50% no-repeat currentColor;
+    -webkit-background-clip: text;
+    animation: shark-txt 3s infinite;
+
+
+    img {
+      width: 28px;
+      height: 30px;
+
+    }
+
+    h1 {
+      margin: 0 10px;
+      font-size: 16px;
+      font-family: "Microsoft YaHei", pinia, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    }
+
+    .el-tag {
+      padding: 1px 10px;
+      font-weight: bold;
+      height: inherit;
+      font-size: 12px;
+    }
+  }
+
+
+}
+
+.full-screen,
+.refresh {
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--theme-btn-border-color);
+  background-color: var(--theme-btn-bg);
+  color: var(--theme-btn-color) !important;
+  margin-right: 10px;
+  cursor: pointer;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: var(--theme-gl-bg);
+    color: var(--theme-gl-color) !important;
+
+  }
+
+}
+
+.dropdown-btn {
+  margin-right: 10px;
+}
+</style>
+<style>
+@keyframes shark-txt {
+  from{
+    background-position: -100%;
+  }
+
+  to {
+    background-position: 200%;
+  }
+}
+
+.page-setting-modal {
+  background-color: rgba(0, 0, 0, 0.136);
+  z-index: 1000 !important;
+}
+
+.script-dialog-1 {
+  border-radius: 8px;
+  overflow: hidden;
+
+  &.ibsp-dialog {
+    border: none !important;
+    background-color: rgba(43, 45, 48, .9);
+    backdrop-filter: blur(15px);
+
+    .el-dialog__body {
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+
+}
+
+.page-version-select {
+  .el-select-dropdown__item {
+    padding: 0 10px;
+
+  }
+
+  .app-project-title-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    .el-icon {
+      opacity: 0;
+
+      &:hover {
+        color: var(--theme-gl-bg);
+      }
+    }
+
+    &:hover {
+      .el-icon {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.app-project-version-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--theme-gl-bg);
+  }
+}
+</style>