ibsp-fg-page 4.0.2

package/src/views/designer/modules/headerWidgetModule/components/CodeEditor.vue

@@ -0,0 +1,315 @@
+<script setup>
+import { ref, computed, watch, shallowRef, } from 'vue';
+import { Codemirror } from 'vue-codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
+
+import QuoteConfig from './quoteConfig/index.vue'
+
+import { AnalysisScript as JavascriptAnalysis } from '@/models/useJavascriptAnalysis'
+import { getUuid } from '@/utils'
+// import pageDataValues from '@/stores/pageDataValues'
+import CascaderContextMenu from '@/components/common/CascaderContextMenu.vue';
+import component from '@/stores/useComponentStore';
+const props = defineProps({
+  language: {
+    type: String,
+    default: 'javascript'
+  },
+  height: {
+    type: String,
+    default: '100%'
+  },
+  readOnly: {
+    type: Boolean,
+    default: false
+  },
+  codeFontFamily: {
+    type: String,
+    default: '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
+  }
+})
+const emit = defineEmits(['onChangeCode', 'onCloseView', 'selectedCallback'])
+// import PageDrawerPopup from '@/components/common/PageDrawerPopup.vue';
+const contextMenuRef = ref(null)
+const codeValue = defineModel()
+const componentStore = component()
+
+const javascriptAnalysis = new JavascriptAnalysis()
+
+const { pageDataValueType } = pageDataValues()
+const inputCodeValue = ref('')
+const consoleTip = ref('')
+
+const codeStyle = computed(() => {
+  return {
+    height: props.height,
+    display: 'flex'
+  }
+})
+
+// let monacoEditor;
+const extensions = [javascript(), oneDark];
+
+const componentData = computed(() => {
+  return componentStore.componentData.filter(item => {
+    return item.data.staticData?.length || item.data.dynamicData?.length
+  })
+})
+
+
+/** */
+const onChangeCode = (value)=>{
+  emit('onChangeCode', value)
+}
+const pos = ref({ line: 0, ch: 0 })
+const onBlur = () =>{
+
+  const state = view.value.state
+
+  const ranges = state.selection.ranges
+  const cursor = ranges[0].anchor
+  const lines = state.doc.lines
+  pos.value.line = lines
+  pos.value.ch = cursor
+  console.log('onBlur', ranges, cursor, lines, state);
+}
+const view = shallowRef()
+const handleReady = (payload) => {
+  view.value = payload.view
+}
+
+const updateCode = (obj)=> {
+  const { type, data } = obj
+  codeValue.value = codeValue.value.substr(0, pos.value.ch) + `#${type}[${data.configCode}]` + codeValue.value.substr(pos.value.ch)
+}
+const onContextMenu = (e)=>{
+  contextMenuRef.value.show(e, {
+    width: 200,
+    height: 500
+  })
+  // return false
+
+}
+
+const dataOptions = computed(()=>{
+  return []
+})
+
+const onChangeContextMenu = (value)=>{
+  const val = `$(${value.join('.')})`
+  const str1 = codeValue.value.substr(0, pos.value.ch)
+  const str2 = codeValue.value.substr(pos.value.ch)
+  codeValue.value = str1 + val + str2
+}
+
+
+const onClickTestScript2 = ()=>{
+  // eslint-disable-next-line complexity
+  javascriptAnalysis.run(codeValue.value, (successMessage, errorMessage, time)=>{
+    if (time) {
+      consoleTip.value = `脚本运行成功! 执行时间：${time}毫秒 --- <span style='color:var(--theme-gl-bg)'>您写的脚本已超越全国 ${
+        time < 50 ? '99.99%' :
+          time < 100 ? '99.9%' :
+            time < 150 ? '99%' :
+              time < 200 ? '95%' :
+                time < 350 ? '90%' :
+                  time < 400 ? '85%' :
+                    time < 450 ? '80%' :
+                      time < 500 ? '75%' :
+                        time < 550 ? '70%' :
+                          time < 600 ? '65%' :
+                            time < 650 ? '60%' :
+                              time < 700 ? '55%' :
+                                time < 750 ? '50%' :
+                                  time < 800 ? '45%' :
+                                    time < 850 ? '40%' :
+                                      time < 900 ? '35%' :
+                                        time < 950 ? '30%' :
+                                          time < 1000 ? '25%' :
+                                            time < 1050 ? '20%' :
+                                              time < 1100 ? '15%' :
+                                                time < 1150 ? '10%' :
+                                                  time < 1200 ? '5%' :
+                                                    time < 1250 ? '1%' :
+                                                      time < 1300 ? '0.1%' :
+                                                        time < 1350 ? '0.01%' :
+                                                          time < 1400 ? '0.001%' :
+                                                            time < 1450 ? '0.0001%' :
+                                                              time < 1500 ? '0.00001%' :
+                                                                time < 1550 ? '0.000001%' :
+                                                                  time < 1600 ? '0.0000001%' :
+                                                                    time < 1650 ? '0.00000001%' :
+                                                                      time < 1700 ? '0.000000001%' :
+                                                                        time < 1750 ? '0.0000000001%' :
+                                                                          time < 1800 ? '0.00000000001%' :
+                                                                            time < 1850 ? '0.000000000001%' :
+                                                                              time < 1900 ? '0.0000000000001%' :
+                                                                                time < 1950 ? '0.00000000000001%' :
+                                                                                  time < 2000 ? '0.000000000000001%' :
+                                                                                    time < 2050 ? '0.0000000000000001%' :
+                                                                                      time < 2100 ? '0.00000000000000001%' :
+                                                                                        time < 2150 ? '0.000000000000000001%' :
+                                                                                          time < 2200 ? '0.0000000000000000001%' :
+                                                                                            time < 2250 ? '0.00000000000000000001%' :
+                                                                                              time < 3000 ? '0.000000000000000000001%' :
+                                                                                                time < 4000 ? '0.0000000000000000000001%' :
+                                                                                                  time < 5000 ? '0.00000000000000000000001%' :
+                                                                                                    time < 6000 ? '0.000000000000000000000001%' :
+                                                                                                      time < 7000 ? '0.0000000000000000000000001%' :
+                                                                                                        time < 8000 ? '0.00000000000000000000000001%' :
+                                                                                                          time < 9000 ? '0.000000000000000000000000001%' :
+                                                                                                            time < 10000 ? '0.0000000000000000000000000001%' :
+                                                                                                              time < 11000 ? '0.00000000000000000000000000001%' :
+                                                                                                                time < 12000 ? '0.000000000000000000000000000001%' :
+                                                                                                                  time < 13000 ? '0.0000000000000000000000000000001%' : '0.00000000000000000000000000000001%'
+      } 的用户 !</span>`
+    }
+    const id = getUuid()
+    if (successMessage) {
+      inputCodeValue.value += `<p id=${id}>${successMessage}</p>`
+    } else if (errorMessage) {
+      consoleTip.value = '脚本运行失败!'
+      inputCodeValue.value += `<p id=${id}><span style='color:red;'>err</span>: ${errorMessage} </p>`
+    }
+    if (!isShowOutput.value) {
+      return
+    }
+    setTimeout(()=>{
+      const el = document.getElementById(id)
+      el?.scrollIntoView?.()
+    }, 100)
+  })
+
+
+}
+const isShowOutput = ref(false)
+const onClickToggleOutput = ()=>{
+  isShowOutput.value = !isShowOutput.value
+}
+
+const onClickClearOutput = ()=>{
+  inputCodeValue.value = ''
+}
+
+
+</script>
+<template>
+  <div class="code-editor-container-1">
+    <QuoteConfig @selectedCallback="updateCode" @onClickTestScript="onClickTestScript2" />
+    <Codemirror
+      v-model="codeValue"
+      placeholder="Code goes here..."
+      @contextmenu.stop.prevent="onContextMenu"
+      :style="codeStyle"
+      :class="{
+        'code-editor-1':true,
+        'code-editor-max': isShowOutput
+      }"
+      :autofocus="true"
+      :tabSize="2"
+      @change="onChangeCode"
+      @blur="onBlur($event)"
+      @ready="handleReady"
+      ref="codemirror"
+      :extensions="extensions" />
+
+    <CascaderContextMenu @on-change="onChangeContextMenu"
+                         ref="contextMenuRef"
+                         :options="dataOptions" />
+    <div class="tools-row">
+      <el-tooltip
+        content="控制台"
+        placement="top-start"
+      >
+        <i @click="onClickToggleOutput" class="pi pi-server"></i>
+      </el-tooltip>
+      <el-tooltip
+        v-if="isShowOutput"
+        content="清空控制台内容"
+        placement="top-start"
+      >
+        <i  @click="onClickClearOutput" class="pi pi-eraser"></i>
+      </el-tooltip>
+
+    </div>
+    <div v-if="isShowOutput"
+         class="output-console"
+         v-html="inputCodeValue">
+
+    </div>
+    <div class="console-tip" v-html="consoleTip"></div>
+  </div>
+
+</template>
+
+<style scoped lang="less">
+.tools-row{
+  display: flex;
+  padding: 10px;
+  i{
+    cursor: pointer;
+    font-size: 16px;
+    color: var(--theme-font-color);
+    margin-right: 10px;
+  }
+}
+.output-console{
+  background-color: var(--theme-bg);
+  color: var(--theme-font-color);
+  overflow: auto;
+  padding: 10px;
+  height: 150px;
+  flex-shrink: 0;
+  border: 2px solid var(--theme-btn-bg);
+  border-radius: 4px;
+  :deep(p){
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+    user-select: text;
+  }
+}
+</style>
+
+<style>
+.page-popup-container{
+  .code-editor-1{
+    max-height: 120px;
+    .ͼ1 .cm-scroller{
+    font-family: 'pinia','Courier New', Courier, monospace;
+  }
+}
+.tools-row{
+  display: none !important;
+}
+}
+.full-screen-code-editor-1{
+  .tools-row{
+  display: flex !important;
+}
+}
+.full-screen-code-editor{
+  .code-editor-1{
+  display: block !important;
+  max-height: calc(150px + 395px);
+}
+.code-editor-max{
+  max-height: 395px;
+}
+}
+
+</style>
+

package/src/views/designer/modules/headerWidgetModule/components/DirectionTooltip.vue

@@ -0,0 +1,164 @@
+<script setup>
+/**
+ * 左右插入弹性布局容器按钮
+ */
+import { computed, inject, ref } from 'vue';
+
+import useContainer from '@/hooks/useContainer';
+import useContainerStore from '@/stores/container';
+const { activeContainer, addContainer } = useContainer();
+const containerStore = useContainerStore();
+const $bus = inject('$bus');
+// #region  **************  左右插入弹性布局容器按钮  **************
+
+/** 激活容器的父容器布局 */
+const activeParentLayoutContainer = computed(() => {
+  const activeContainerParentId = activeContainer.value?.parentId;
+  return containerStore.pageContainerList.find((item) => item.id === activeContainerParentId);
+});
+/** 左右插入弹性布局容器按钮数据 */
+const directionTooltip = computed(() => {
+  const flexDirection =
+      activeParentLayoutContainer.value?.layout?.flexStyles?.flexDirection;
+  const {
+    x,
+    y,
+    width = 0,
+    height = 0
+  } = activeContainer.value?.dom?.getBoundingClientRect() || {};
+
+  /**
+   *  ! ! ! 这里是使用定位的方式,后期可以考虑使用transform的方式, 原因: transform不会影响其他元素的布局
+   */
+  if (!flexDirection || flexDirection === 'row') {
+    return [
+      {
+        content: '在左侧插入弹性布局容器',
+        placement: 'left',
+        position: {
+          left: x - 20 || -100, // 20为按钮宽度
+          top: y + height / 2 - 20 + 10 || -100 // 40为按钮高度, 10为偏移量, 使按钮居中
+        },
+        show: !!x
+      },
+      {
+        content: '在右侧插入弹性布局容器',
+        placement: 'right',
+        position: {
+          left: x + width,
+          top: y + height / 2 - 20 + 10
+        },
+        show: !!x
+      }
+    ];
+  }
+  return [
+    {
+      content: '在上方插入弹性布局容器',
+      placement: 'top',
+      position: {
+        left: x + width / 2 - 10,
+        top: y - 20
+      },
+      show: !!x
+    },
+    {
+      content: '在下方插入弹性布局容器',
+      placement: 'bottom',
+      position: {
+        left: x + width / 2 - 10,
+        top: y + height
+      },
+      show: !!x
+    }
+  ];
+});
+
+/** 左右插入弹性布局容器按钮点击事件 */
+const insertItem = (type) => {
+  const currentIndex = containerStore.pageContainerList.findIndex(
+    (item) => item.id === activeContainer.value?.id
+  );
+
+  addContainer(
+    activeContainer.value.containerInfo,
+    activeContainer.value?.parentId,
+    (containerOption, pageAllContainer) => {
+      if (type === 'left' || type === 'top') {
+        containerStore.pageContainerList.splice(currentIndex, 0, containerOption);
+      } else if (type === 'right' || type === 'bottom') {
+        containerStore.pageContainerList.splice(currentIndex + 1, 0, containerOption);
+      }
+    });
+};
+// #endregion
+
+
+// const mouseInContainerState = ref(false);
+
+const isShow = computed(() => {
+  const parentId = activeContainer.value?.parentId;
+  return parentId &&
+  activeContainer.value?.containerInfo?.type === 'layoutContainer' &&
+  containerStore.pageContainerList.find(item => item.id === parentId)?.type === 'layoutContainer'
+});
+
+// $bus.on('mouseInContainerState', (state) => {
+//   mouseInContainerState.value = state;
+// })
+
+/** 鼠标进入 */
+const onMouseEnter = () => {
+  // mouseInContainerState.value = true;
+}
+
+/** 鼠标离开 */
+const onMouseLeave = () => {
+  // mouseInContainerState.value = false;
+}
+
+
+</script>
+
+<template>
+
+  <div class="direction-tooltip" v-show="isShow">
+    <template v-for="(item, i) in directionTooltip" :key="i">
+      <i
+        :style="{
+          left: item.position.left + 'px',
+          top: item.position.top + 'px',
+          opacity: item.show ? 1 : 0,
+        }"
+        class="insertItem"
+        @click.stop="insertItem(item.placement)"
+      >+</i
+      >
+    </template>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.insertItem {
+  position: fixed;
+  font-style: normal;
+  background: rgba(0, 102, 254, 0.7);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  line-height: 17px;
+  color: #ffffff;
+  font-size: 25px;
+  z-index: 100;
+  cursor: pointer;
+  font-weight: bold;
+  user-select: none;
+  // transition: 0.5s ease-out;
+
+  &:hover {
+    background: rgba(0, 102, 254, 1);
+  }
+}
+</style>

package/src/views/designer/modules/headerWidgetModule/components/DirectionTooltipComponent.vue

@@ -0,0 +1,164 @@
+<script setup>
+/**
+ * 左右插入弹性布局容器按钮
+ */
+import { computed, inject, ref } from 'vue';
+
+import useContainer from '@/hooks/useContainer';
+import useContainerStore from '@/stores/container';
+const { activeContainer, addContainer } = useContainer();
+const containerStore = useContainerStore();
+const $bus = inject('$bus');
+// #region  **************  左右插入弹性布局容器按钮  **************
+
+/** 激活容器的父容器布局 */
+const activeParentLayoutContainer = computed(() => {
+  const activeContainerParentId = activeContainer.value?.parentId;
+  return containerStore.pageContainerList.find((item) => item.id === activeContainerParentId);
+});
+/** 左右插入弹性布局容器按钮数据 */
+const directionTooltip = computed(() => {
+  const flexDirection =
+      activeParentLayoutContainer.value?.layout?.flexStyles?.flexDirection;
+  const {
+    x,
+    y,
+    width = 0,
+    height = 0
+  } = activeContainer.value?.dom?.getBoundingClientRect() || {};
+
+  /**
+   *  ! ! ! 这里是使用定位的方式,后期可以考虑使用transform的方式, 原因: transform不会影响其他元素的布局
+   */
+  if (!flexDirection || flexDirection === 'row') {
+    return [
+      {
+        content: '在左侧插入弹性布局容器',
+        placement: 'left',
+        position: {
+          left: 0, // 20为按钮宽度
+          top: height / 2 - 10
+        },
+        show: !!x
+      },
+      {
+        content: '在右侧插入弹性布局容器',
+        placement: 'right',
+        position: {
+          left: x + width,
+          top: y + height / 2 - 20 + 10
+        },
+        show: !!x
+      }
+    ];
+  }
+  return [
+    {
+      content: '在上方插入弹性布局容器',
+      placement: 'top',
+      position: {
+        left: x + width / 2 - 10,
+        top: y - 20
+      },
+      show: !!x
+    },
+    {
+      content: '在下方插入弹性布局容器',
+      placement: 'bottom',
+      position: {
+        left: x + width / 2 - 10,
+        top: y + height
+      },
+      show: !!x
+    }
+  ];
+});
+
+/** 左右插入弹性布局容器按钮点击事件 */
+const insertItem = (type) => {
+  const currentIndex = containerStore.pageContainerList.findIndex(
+    (item) => item.id === activeContainer.value?.id
+  );
+
+  addContainer(
+    activeContainer.value.containerInfo,
+    activeContainer.value?.parentId,
+    (containerOption, pageAllContainer) => {
+      if (type === 'left' || type === 'top') {
+        containerStore.pageContainerList.splice(currentIndex, 0, containerOption);
+      } else if (type === 'right' || type === 'bottom') {
+        containerStore.pageContainerList.splice(currentIndex + 1, 0, containerOption);
+      }
+    });
+};
+// #endregion
+
+
+// const mouseInContainerState = ref(false);
+
+const isShow = computed(() => {
+  const parentId = activeContainer.value?.parentId;
+  return parentId &&
+  activeContainer.value?.containerInfo?.type === 'layoutContainer' &&
+  containerStore.pageContainerList.find(item => item.id === parentId)?.type === 'layoutContainer'
+});
+
+// $bus.on('mouseInContainerState', (state) => {
+//   mouseInContainerState.value = state;
+// })
+
+/** 鼠标进入 */
+const onMouseEnter = () => {
+  // mouseInContainerState.value = true;
+}
+
+/** 鼠标离开 */
+const onMouseLeave = () => {
+  // mouseInContainerState.value = false;
+}
+
+
+</script>
+
+<template>
+
+  <div class="direction-tooltip" v-show="isShow">
+    <template v-for="(item, i) in directionTooltip" :key="i">
+      <i
+        :style="{
+          left: item.position.left + 'px',
+          top: item.position.top + 'px',
+          opacity: item.show ? 1 : 0,
+        }"
+        class="insertItem"
+        @click.stop="insertItem(item.placement)"
+      >+</i
+      >
+    </template>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.insertItem {
+  position: fixed;
+  font-style: normal;
+  background: rgba(0, 102, 254, 0.7);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  line-height: 17px;
+  color: #ffffff;
+  font-size: 25px;
+  z-index: 100;
+  cursor: pointer;
+  font-weight: bold;
+  user-select: none;
+  // transition: 0.5s ease-out;
+
+  &:hover {
+    background: rgba(0, 102, 254, 1);
+  }
+}
+</style>