ibsp-fg-page 4.0.2

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

@@ -0,0 +1,365 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { ArrowDown, Plus, EditPen, Delete } from '@element-plus/icons-vue';
+import { ulid } from 'ulid'
+
+import ScriptNavContentLayout from './ScriptNavContentLayout.vue';
+
+import SvgIcon from '@/components/globals/SvgIcon.vue';
+import usePlatformLibStore from '@/stores/usePlatformLibStore';
+import useComponentStore from '@/stores/useComponentStore';
+import IbspTree from '@/components/ibsp/IbspTree.vue';
+import IbspInput from '@/components/ibsp/IbspInput.vue';
+import { getPageScriptApi, saveOrUpdateApi, deleteBatchApi, editScriptVar } from '@/api/ibsp-bg-app'
+import { useContextmenu } from '@/components/nextui/Contextmenu';
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  page: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  type: {
+    type: String,
+    default: ''
+  }
+})
+
+const componentStore = useComponentStore();
+
+const components = computed(() => {
+  return componentStore.componentData.filter(item => item.type !== 'layout');
+})
+
+const categoryList = [
+  {
+    id: 'app',
+    label: '应用级',
+    icon: {
+      type: 'svg',
+      value: '应用级',
+    }
+  },
+  {
+    id: 'platform',
+    label: '平台级',
+    icon: {
+      type: 'svg',
+      value: '平台级',
+
+    }
+  }
+]
+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 emit = defineEmits(['close'])
+
+
+const currentCategory = ref({
+  id: 'app',
+  label: '应用级',
+  icon: {
+    type: 'svg',
+    value: '应用级',
+  }
+},)
+
+const platformLibStore = usePlatformLibStore();
+
+const data = computed(() => {
+  return props.type === 'component' ? platformLibStore.getScriptByType(currentCategory.value.id, props.type) : platformLibStore.getScriptExcludeType(currentCategory.value.id, 'component')
+})
+// const data = computed(() => {
+//   return platformLibStore.platformLibData.script[currentCategory.value.id]
+// })
+
+
+console.log(data);
+
+const onClickScriptItem = (node) => {
+  props.item.select(node)
+}
+/**
+ * @description 添加新的组件脚本
+ * @param id 关联组件的ID
+ */
+const addComponentScript = (item) => {
+  let newItem = {
+    setName: true,
+    remark: JSON.stringify({
+      componentId: item.id,
+      type: 'component',
+      pid: null
+    }),
+    label: `${item.label}脚本`,
+    scriptType: 'PT-PTK-JBLX-JS',
+    status: 'PT-PTK-ZT-QY',
+    scriptContent: `
+// 可以使用vue3的所有生命周期，如：onMounted , onUnmounted等
+// 更多vue3的生命周期可查询官方文档：https://cn.vuejs.org/api/composition-api-lifecycle.html
+    `,
+    scriptName: '',
+    scriptCode: ulid()
+  }
+  platformLibStore.platformLibData.script[currentCategory.value.id].push(newItem);
+}
+
+const saveScript = (data) => {
+
+  data.setName = false;
+
+  if (data.label === data.scriptName) return;
+
+  let newItem = {
+    remark: data.remark,
+    scriptType: data.scriptType,
+    status: data.status,
+    scriptContent: data.scriptContent,
+    scriptName: data.label,
+    scriptCode: data.scriptCode,
+    appId: currentCategory.value.id === 'app' ? window.appId : null,
+    id: data.id || undefined
+  }
+
+  console.log(newItem);
+
+  saveOrUpdateApi({
+    ...newItem,
+  })
+
+}
+
+const contextmenu = useContextmenu([
+  {
+    icon: EditPen,
+    label: '重命名',
+    code: 'rename'
+  },
+  {
+    icon: Delete,
+    label: '删除脚本',
+    code: 'delete'
+  }
+]);
+
+const nodeContextmenu = (ev, data) => {
+  contextmenu.show((item) => {
+    if (item.code === 'rename') {
+      data.setName = true;
+    }
+  })
+}
+
+</script>
+
+<template>
+  <div class="script-list">
+    <ScriptNavContentLayout @close="()=>emit('close')" :item="item">
+
+      <template #header>
+        <div class="header">
+          <el-dropdown style="width: auto"
+                       trigger="click"
+                       @command="(command) => {currentCategory = command}">
+            <div class="script-cate">
+              <i>
+                <SvgIcon :icon="currentCategory.icon"/>
+              </i>
+              <span>{{ currentCategory.label }}</span>
+              <el-icon>
+                <ArrowDown/>
+              </el-icon>
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item v-for="(item) of categoryList"
+                                  :key="item.id"
+                                  :command="item">
+                  <div style="height: 100%;outline: none;display: flex;align-items: center;">
+                    <i style="display: flex;">
+                      <SvgIcon :icon="item.icon"/>
+                    </i>
+                    <span style="flex: 1">{{ item.label }}</span>
+                  </div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <!-- <div class="script-cate"
+               ref="scriptCateRef"
+               @click.stop="onClickScriptCate">
+            <i>
+              <SvgIcon :icon="currentCategory.icon" />
+            </i>
+
+            <span>{{ currentCategory.label }}</span>
+            <el-icon>
+              <ArrowDown />
+            </el-icon>
+          </div> -->
+        </div>
+      </template>
+      <template #header-menu>
+        <el-dropdown v-if="type === 'component'"
+                     trigger="click"
+                     @command="addComponentScript">
+          <div >
+            <el-icon><Plus /></el-icon>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="item of components"
+                                :key="item.id"
+                                :command="item">
+                <div style="height: 100%;outline: none;display: flex;align-items: center;">
+                  <i style="display: flex;">
+                    <SvgIcon :icon="item.icon" />
+                  </i>
+                  <span style="flex: 1">{{ item.label }}</span>
+                </div>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </template>
+
+      <el-tree
+        :data="data"
+        :highlight-current="true"
+        :props="{
+          children: 'children',
+          label: 'label'
+        }"
+        @node-click="onClickScriptItem"
+        @node-contextmenu="nodeContextmenu"
+      >
+        <template #default="{ data }">
+          <div class="tree-item">
+            <i v-if="!data.setName"
+               class="svg-icon"
+               v-html="getSvgIcon(data)"></i>
+            <IbspInput
+              v-if="data.setName"
+              v-model="data.label"
+              :autofocus="true"
+              @blur="saveScript(data)"
+            ></IbspInput>
+            <span v-else>{{ data.label }}</span>
+          </div>
+        </template>
+      </el-tree>
+
+      <!-- <IbspTree :data="data"
+                :highlight-current="true"
+                node-key="id"
+                :isSelectScrollIntoView="false"
+                :isOpenSearch="true"
+                searchPlaceholder="请输入脚本名称"
+                @select="onClickScriptItem">
+        <template #icon="values">
+          <i v-if="values.scriptType && !values.setName"
+             class="svg-icon"
+             v-html="getSvgIcon(values)"></i>
+        </template>
+        <template #title="titleValues">
+          <IbspInput
+            v-if="titleValues.setName"
+            v-model="titleValues.label"
+            :autofocus="true"
+            @blur="saveScript(titleValues)"
+          ></IbspInput>
+          <span v-else>{{ titleValues.label }}</span>
+        </template>
+      </IbspTree> -->
+
+    </ScriptNavContentLayout>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.tree-item{
+  display: flex;
+  align-items: center;
+}
+.script-list{
+    width: 100%;
+    height: 100%;
+    .header{
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      .script-cate {
+      display: flex;
+      align-items: center;
+      height: 34px;
+      border-radius: 5px;
+      padding: 0 10px;
+      cursor: pointer;
+
+      i {
+        display: flex;
+        margin-right: 5px;
+      }
+
+      :deep(.icon) {
+        width: 23px;
+        height: 23px;
+        margin-right: 5px;
+        color: #fff;
+
+        overflow: hidden;
+
+      }
+
+      &:hover {
+        background-color: #414245;
+      }
+
+      span {
+        margin-right: 5px;
+      }
+    }
+    }
+    .svg-icon{
+      width: 14px;
+      height: 14px;
+      margin-right: 5px;
+      display: flex;
+      :deep(svg){
+        width: 100%;
+        height: 100%;
+      }
+    }
+  .el-tree{
+    --el-color-primary-light-9: var(--theme-gl-bg);
+    :deep(.el-tree-node){
+      padding: 3px 0;
+    }
+    :deep(.is-current) {
+      .el-tree-node__content {
+        color: var(--theme-gl-color);
+      }
+    }
+  }
+
+}
+
+</style>

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

@@ -0,0 +1,66 @@
+<script setup>
+import { SemiSelect, Plus } from '@element-plus/icons-vue'
+import { onMounted } from 'vue'
+defineProps({
+  item: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits(['close', 'create'])
+
+const onClickClose = (item) => {
+  emit('close', item)
+}
+</script>
+
+<template>
+  <div class="script-nav-content-layout">
+    <header>
+      <div style="flex: 1;height: 100%;">
+        <slot name="header" v-bind="item"></slot>
+      </div>
+      <div class="right-container">
+        <slot name="header-menu"></slot>
+        <el-icon @click="onClickClose(item)">
+          <SemiSelect  />
+        </el-icon>
+      </div>
+    </header>
+    <main>
+      <slot></slot>
+    </main>
+
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.script-nav-content-layout{
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    header{
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        height: 40px;
+        border-bottom: 1px solid var(--theme-border-color);
+        padding: 0 10px;
+        .el-icon{
+            cursor: pointer;
+        }
+        .right-container{
+          display: flex;
+          column-gap: 5px;
+        }
+    }
+    main{
+        flex: 1;
+        overflow: auto;
+    }
+}
+
+</style>

package/src/views/designer/modules/scriptModule/components/console/Console.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+
+import ConsoleError from './components/ConsoleError.vue';
+import ConsoleLog from './components/ConsoleLog.vue';
+
+import { useConsole } from '@/models/useConsole';
+
+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/scriptModule/components/console/components/ConsoleError.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import ConsoleLine from './ConsoleLine.vue';
+
+import type { MConsoleStack } from '@/models/useConsole';
+
+
+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/scriptModule/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/scriptModule/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/scriptModule/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'
+
+}