ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-script/src/components/ScriptPanel.vue

@@ -0,0 +1,415 @@
+<script setup lang='ts'>
+import { reactive, ref } from 'vue'
+import { NextUiMonacoCode } from '@nextui/index'
+import { Close } from '@element-plus/icons-vue'
+import { ElMessageBox } from 'element-plus'
+import { AnalysisScript } from '@models/useJavascriptAnalysis'
+import { useKeyboard } from '@hooks/useKeyboard';
+import { useEditorEnv } from '@models/useEditorEnv';
+
+import Console from './console/Console.vue';
+
+import SvgIcon from '@/components/globals/SvgIcon.vue'
+import { injectService } from '@/models'
+
+const props = defineProps<{
+  page: any
+}>()
+const monacoEditorRef = ref<any>()
+const editableTabsValue = ref('2')
+const scriptService = injectService('script')
+const editableTabs = scriptService.monacoEditorScriptQueue
+const monacoEditorScript = scriptService.monacoEditorScript
+const monacoEditorTabId = scriptService.monacoEditorTabId
+const scriptConsole = ref(false)
+const svgList: any = {
+  CSS: 'file_type_css',
+  JS: 'file_type_js',
+  VUE: 'file_type_vue',
+  JSON: 'file_type_json'
+}
+
+const tips = [
+  'async异步函数体',
+  '具有return返回值',
+  '全局变量 “ibsp” ',
+  '智能提示 代码补全',
+  '支持: vue、js、css、json',
+  '编辑器中的代码将在提交时自动格式化',
+  '按 Ctrl + S 保存脚本',
+  '按 Ctrl + F 快速搜索代码'
+]
+
+const analysisScript = new AnalysisScript(props.page)
+const editorEnv = useEditorEnv()
+
+const extraLib = [
+  { content: analysisScript.ibspTip },
+  { content: editorEnv.string() }
+]
+const onCtrlS = () => {
+  useKeyboard()
+    .onKey('Command_S')
+    .onKey('Ctrl_S')
+    .selector('.nextui-ibsp-monaco-code')
+    .subscribe(() => {
+
+      scriptService.saveScriptValue(monacoEditorScript.value)
+
+    })
+
+}
+
+const handleTabRemove = (id: string) => {
+  scriptService.removeEditorScript(id)
+}
+
+const handleTabChange = (id: string) => {
+  document.getElementById(`tab-${id}`)?.scrollIntoView?.({
+    behavior: 'smooth',
+    block: 'center',
+    inline: 'center'
+  })
+
+  scriptService.addEditorScript((editableTabs.value.find(item => item.id === id)) as any)
+}
+
+const onClickCloseTab = (item: any) => {
+  if (item.value !== item._temporaryValue) {
+    ElMessageBox.confirm('是否保存当前脚本？', '提示', {
+      confirmButtonText: '保存',
+      cancelButtonText: '不保存',
+      type: 'warning'
+    }).then((res: string) => {
+      if (res === 'confirm') {
+        scriptService.saveScriptValue(item).then(() => {
+          handleTabRemove(item.id)
+        })
+      }
+    })
+      .catch((err: string) => {
+        if (err === 'cancel') {
+          handleTabRemove(item.id)
+        }
+      });
+  } else {
+    handleTabRemove(item.id)
+  }
+}
+
+const onCreated = () => {
+  scriptService.monacoEditorRef = monacoEditorRef.value
+  onCtrlS()
+  scriptService.changeEditorConfig()
+}
+
+const getSvgIcon = (data: any) => {
+  const type = data.scriptType
+  // 转成小写
+  const lowerType = type?.toLowerCase?.()
+  if (svgList[lowerType]) {
+    return svgList[lowerType]
+  }
+  const sType = type?.split?.('-')?.at?.(-1) || type?.split?.('-')?.at?.(-1)
+  if (svgList[sType]) {
+    return svgList[sType]
+  }
+  return 'default_file'
+}
+
+</script>
+
+<template>
+  <div class="ibsp-script-panel">
+    <header v-if="editableTabs.length">
+      <el-tabs v-model="monacoEditorTabId"
+               type="card"
+               :closable="false"
+               @tab-change="handleTabChange"
+               @tab-remove="handleTabRemove">
+        <el-tab-pane v-for="item in editableTabs"
+                     :key="item.id"
+                     :label="item.name"
+                     :name="item.id">
+          <template #label>
+            <span :class="{
+                    'value-change': item.value !== item._temporaryValue
+                  }"
+                  class="tab-item-script">
+              <SvgIcon :icon="{
+                type: 'svg',
+                value: getSvgIcon(item)
+              }" />
+              <span>{{ item.name }}</span>
+              <el-icon :class="{
+                         'value-change': item.value !== item._temporaryValue
+                       }"
+                       @click.stop="onClickCloseTab(item)">
+                <Close />
+              </el-icon>
+            </span>
+          </template>
+        </el-tab-pane>
+
+      </el-tabs>
+    </header>
+    <main>
+      <NextUiMonacoCode v-model="monacoEditorScript._temporaryValue"
+                        ref="monacoEditorRef"
+                        :extraLib="extraLib"
+                        :page="page"
+                        @created="onCreated" />
+      <div class="empty-container" v-if="!editableTabs.length">
+        <div class="empty-content">
+          <SvgIcon :icon="{
+            type: 'svg',
+            value: '脚本'
+          }"></SvgIcon>
+          <el-tag v-for="(item, index) in tips" :key="index">
+            {{ item }}
+          </el-tag>
+        </div>
+
+      </div>
+
+      <div class="script-console" v-show="scriptConsole">
+        <div class="script-tab">
+          <div class="script-table-header">
+            <el-tag type="success">输出</el-tag>
+            <el-icon><Close/></el-icon>
+          </div>
+          <div class="scrpt-table-main">
+            <Console />
+
+          </div>
+
+        </div>
+      </div>
+
+
+    </main>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.ibsp-script-panel {
+  width: 100%;
+  height: 100%;
+  padding-top: 3px;
+  display: flex;
+  flex-direction: column;
+
+  >header {
+    height: 35px;
+    width: 700px;
+    display: flex;
+    align-items: center;
+
+    .el-tabs {
+      width: 100%;
+      height: 30px;
+      // overflow: auto;
+
+     :deep( .el-tabs__nav-next) {
+          line-height: 30px;
+        }
+        :deep(.el-tabs__nav-prev) {
+          line-height: 30px;
+        }
+      :deep(.el-tabs__nav) {
+        border: none;
+
+
+      }
+
+      :deep(.el-tabs__item) {
+        border: none;
+        padding: 0;
+        padding-right: 10px;
+        padding-left: 0 !important;
+
+        &.is-active{
+          .tab-item-script{
+            background-color: var(--theme-next-btn-bg);
+            color: var(--theme-font-color);
+
+          }
+        }
+
+        >span {
+
+          padding: 3px 8px;
+          border-radius: 4px;
+        }
+      }
+
+      .tab-item-script {
+
+        display: inline-flex;
+        align-items: center;
+
+        :deep(.ibsp-svg-icon){
+          margin-right: 4px;
+        }
+
+        .el-icon {
+          margin-left: 5px;
+          transition: all 0.2s;
+          font-size: 16px;
+          padding: 1px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 4px;
+
+          &.value-change {
+            background-color: var(--theme-font-color);
+            color: var(--theme-font-color);
+            font-size: 12px;
+          }
+
+          &:hover {
+            background-color: var(--theme-border-color);
+            color: var(--theme-gl-bg);
+            font-size: 16px;
+          }
+        }
+      }
+
+      :deep(.el-tabs__nav-scroll) {
+        overflow: auto;
+        border: none;
+      }
+    }
+
+    user-select: none;
+
+    .el-alert {
+      padding: 5px 10px;
+    }
+
+    .el-tag {
+      margin-right: 10px;
+    }
+
+    .el-tabs {
+      --el-tabs-header-height: 30px;
+
+      :deep(.el-tabs__header) {
+        margin: 0;
+        border-bottom: none;
+      }
+
+      :deep(.el-tabs__new-tab) {
+        display: none;
+      }
+    }
+  }
+
+  >main {
+    flex: 1;
+
+    position: relative;
+    .script-console {
+      width: 100%;
+      height: 200px;
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      bottom: 0;
+      z-index: 111;
+
+      .script-tab {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        .script-table-header {
+          width: 100%;
+          height: 30px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 10px;
+          border-bottom: 1px solid var(--theme-border-color);
+
+          .el-tag {
+            margin-right: 10px;
+          }
+
+          .el-icon {
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 16px;
+            padding: 1px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 4px;
+
+            &:hover {
+              background-color: var(--theme-border-color);
+              color: var(--theme-gl-bg);
+              font-size: 16px;
+            }
+          }
+        }
+
+        .scrpt-table-main {
+          width: 100%;
+          height: calc(100% - 30px);
+          display: flex;
+          flex-direction: column;
+          position: relative;
+        }
+      }
+
+    }
+
+    .empty-container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      background-color: var(--ibsp-code-editor-bg);
+
+      .empty-content {
+        margin-top: -60px;
+        width: 300px;
+        height: 500px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        :deep(.ibsp-svg-icon) {
+          --width: 200px !important;
+          --height: 200px !important;
+          --fill: var(--theme-gl-bg);
+
+          svg {
+            --width: 200px !important;
+            --height: 200px !important;
+          }
+
+
+        }
+
+        .el-tag {
+          margin-top: 20px;
+          width: fit-content;
+
+        }
+      }
+    }
+  }
+}
+</style>

package/src/views/designer/modules/ibsp-script/src/components/ScriptSetting.vue

@@ -0,0 +1,48 @@
+<script setup lang='ts'>
+import { Modal } from '@nextui/index'
+const visible = defineModel()
+defineProps({
+  settingForm: {
+    type: Object,
+    default: () => ({
+      theme: 'vscode',
+      themeMode: 'system',
+      fontSize: 14,
+    })
+  }
+})
+
+</script>
+
+<template>
+  <Modal title="脚本配置"
+         v-model="visible"
+         :style="{
+           width: '400px',
+           height: '300px',
+         }">
+    <el-form :model="settingForm"
+             label-width="auto"
+             style="width: 100%;height: 100%;padding: 20px;">
+      <el-form-item label="主题">
+        <el-select v-model="settingForm.theme" placeholder="please select your zone">
+          <el-option label="vscode主题" value="vscode" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="明亮模式">
+        <el-select v-model="settingForm.themeMode">
+          <el-option label="明亮" value="light" />
+          <el-option label="暗黑" value="dark" />
+          <el-option label="跟随设计器" value="system" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="字体大小">
+        <el-input-number v-model="settingForm.fontSize"
+                         :min="10"
+                         :max="50" />
+      </el-form-item>
+    </el-form>
+  </Modal>
+
+
+</template>

package/src/views/designer/modules/ibsp-script/src/components/console/Console.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+import { useConsole } from '@models/useConsole';
+
+import ConsoleError from './components/ConsoleError.vue';
+import ConsoleLog from './components/ConsoleLog.vue';
+
+
+const consoleRef = ref<HTMLDivElement>();
+
+const mConsole = useConsole();
+const msgList = computed(() => {
+  return mConsole.list;
+})
+
+watch(() => msgList.value.length, () => {
+  nextTick(() => {
+    if (consoleRef.value) {
+      consoleRef.value.scrollTo({
+        behavior: 'smooth',
+        top: 9999999
+      })
+    }
+  })
+}, {
+  immediate: true
+})
+
+
+</script>
+<template>
+  <div class="console-wrap" ref="consoleRef">
+
+    <div class="console-wrap-line"
+         v-for="(item , index) of msgList"
+         :key="index">
+      <ConsoleError v-if="item.type === 'error'" :data="item.data"></ConsoleError>
+      <ConsoleLog v-if="item.type === 'log'" :data="item.data"></ConsoleLog>
+    </div>
+  </div>
+</template>
+<style lang="less" scoped>
+.console-wrap{
+  width: 100%;
+  padding: 10px;
+  height: 100%;
+  overflow: auto;
+  .console-wrap-line{
+    border-bottom: 1px solid var(--theme-border-color);
+    padding: 5px 0
+  }
+}
+</style>

package/src/views/designer/modules/ibsp-script/src/components/console/components/ConsoleError.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { MConsoleStack } from '@models/useConsole';
+
+import ConsoleLine from './ConsoleLine.vue';
+
+
+const props = defineProps<{
+  data: any[]
+}>()
+
+
+</script>
+<template>
+  <ConsoleLine v-for="(item , index) of data"
+               :data="item"
+               :key="index">
+    <template v-slot="{showDetail}">
+      <div class="console-error">
+        <p v-if="!showDetail">{{ item }}</p>
+        <p v-else>{{ item.stack }}</p>
+      </div>
+    </template>
+  </ConsoleLine>
+  <!-- <div v-for="(item , index) of data" :key="index">
+    <p>{{ item }}</p>
+    <p>{{ item.stack }}</p>
+  </div> -->
+</template>
+<style lang="less" scoped>
+.console-error{
+  color: var(--el-color-error)
+}
+</style>

package/src/views/designer/modules/ibsp-script/src/components/console/components/ConsoleLine.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { CaretRight, CaretBottom } from '@element-plus/icons-vue';
+
+import { getDataType } from '../console';
+
+const props = defineProps<{
+  data: any
+}>()
+
+const showDetail = ref<boolean>(false);
+
+</script>
+<template>
+  <div class="console-line" :class="{'console-line-inline': getDataType(data) === 'BaseType'}">
+    <div class="console-line-btn"
+         v-show="getDataType(data) !== 'BaseType'"
+         @click="showDetail = !showDetail">
+      <el-icon v-if="!showDetail"><CaretRight /></el-icon>
+      <el-icon v-else><CaretBottom /></el-icon>
+    </div>
+    <div class="console-line-content">
+      <slot v-bind="{showDetail}"></slot>
+    </div>
+  </div>
+</template>
+<style lang="less" scoped>
+.console-line{
+  display: flex;
+  width: 100%;
+  line-height: 18px;
+  .console-line-btn{
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+  .console-line-content{
+    flex: 1;
+    word-break: break-all;
+    white-space: break-spaces;
+  }
+}
+.console-line-inline{
+  display: inline;
+  margin-right: 10px;
+  .console-line-content{
+    display: inline-flex;
+  }
+}
+</style>

package/src/views/designer/modules/ibsp-script/src/components/console/components/ConsoleLog.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+
+import ConsoleLine from './ConsoleLine.vue';
+import { getDataType } from '../console';
+
+
+const props = defineProps<{
+  data: any[]
+}>()
+
+
+const getData = (item: any) => {
+  let result = null;
+  try {
+    result = JSON.stringify(item, null, 2);
+  } catch (error) {
+    try {
+      result = item.toString();
+    } catch (error) {
+      result = null;
+    }
+  }
+  return result;
+}
+
+const getTextClass = (item: any) => {
+  let prefix = 'console-color-text';
+  if (typeof item === 'boolean') {
+    return `${prefix}-boolean`;
+  }
+  if (typeof item === 'number') {
+    return `${prefix}-number`;
+  }
+  if (typeof item === 'string') {
+    return `${prefix}-string`;
+  }
+  if (item === null) {
+    return `${prefix}-null`;
+  }
+  if (item === undefined) {
+    return `${prefix}-undefined`;
+  }
+  return '';
+}
+
+
+</script>
+<template>
+  <ConsoleLine v-for="(item , index) of data"
+               :data="item"
+               :key="index"
+  >
+    <template v-slot="{showDetail}">
+      <div class="console-log">
+        <template v-if="getDataType(item) === 'BaseType'">
+          <p :class="getTextClass(item)">{{ item === null ? 'null' : item === undefined ? 'undefined' : item }}</p>
+        </template>
+        <template v-else>
+          <template v-if="!showDetail">
+            <p v-if="getDataType(item) === 'array'">Arrar({{item.length}})</p>
+            <p v-if="getDataType(item) === 'object'">Object({{ Object.keys(item).length }})</p>
+            <p v-if="getDataType(item) === 'function'">Function</p>
+          </template>
+          <p v-else>{{ getData(item) }}</p>
+        </template>
+      </div>
+    </template>
+  </ConsoleLine>
+  <!-- <div v-for="(item , index) of data" :key="index">
+    <p>{{ item }}</p>
+    <p>{{ item.stack }}</p>
+  </div> -->
+</template>
+<style lang="less" scoped>
+.console-log{
+  color: var(--theme-font-color);
+  .console-color-text-string{
+    color: #31A49A;
+  }
+  .console-color-text-number{
+    color: #D33682;
+  }
+  .console-color-text-null{
+    color: #B58900;
+  }
+  .console-color-text-undefined{
+    color: #B58900;
+  }
+  .console-color-text-boolean{
+    color: #19B6FE;
+  }
+}
+</style>

package/src/views/designer/modules/ibsp-script/src/components/console/console.ts

@@ -0,0 +1,11 @@
+export const getDataType = (item: any) => {
+  if (Array.isArray(item)) {
+    return 'array';
+  } else if (typeof item === 'object' && item !== null && item !== undefined) {
+    return 'object';
+  } else if (typeof item === 'function') {
+    return 'function'
+  }
+  return 'BaseType'
+
+}