ibsp-fg-page 4.0.2

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

@@ -0,0 +1,541 @@
+<script setup>
+import { DocumentAdd, FolderAdd, RefreshRight, ArrowDown, SemiSelect, Delete, Edit } from '@element-plus/icons-vue'
+import { computed, reactive, ref, watch } from 'vue';
+import { ulid } from 'ulid'
+
+import { useScriptStore } from '../useScriptStore';
+import useContextmenu from '../hooks/useContextmenu';
+import { IbspScript } from '../hooks/useIbspScript'
+
+import usePlatformLibStore from '@/stores/usePlatformLibStore';
+import useComponentStore from '@/stores/useComponentStore';
+const platformLibStore = usePlatformLibStore();
+const ibspScript = new IbspScript()
+const componentStore = useComponentStore()
+
+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 emit = defineEmits(['selectScript'])
+const treeRef = ref(null)
+const scriptContextmenuRef = ref(null)
+const scriptCateRef = ref(null)
+const currentNodeKey = ref(null)
+const { open } = useContextmenu()
+const scriptStore = useScriptStore()
+const temporaryCreateItem = ref(null)
+let pathMap = {
+  all: []
+}
+const handleScript = (list) => {
+  pathMap = {
+    all: []
+  }
+  // 用正则匹配item.value中以---开头与---结尾的字符串
+  const reg = /\/\*---(.*?)---\*\//;
+  const res = list.map(item => {
+
+    const match = reg.exec(item.value);
+    if (match?.[1]) {
+      item.path = match[1]?.split?.('/')
+      item.value = item.value.replace(reg, '')
+      ; (pathMap[item.path] || (pathMap[item.path] = [])).push(item)
+    } else {
+      item.path = null
+      pathMap.all.push(item)
+    }
+    item.temporaryValue = item.value
+    return item
+  })
+  return res
+
+}
+
+
+const scriptCateData = [
+  {
+    id: 'app',
+    label: '应用级',
+    icon: `
+    <svg t="1709989874832" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+          p-id="25193" width="200" height="200" >
+    <path
+            d="M0 0m349.206261 0l325.587478 0q349.206261 0 349.206261 349.206261l0 325.587478q0 349.206261-349.206261 349.206261l-325.587478 0q-349.206261 0-349.206261-349.206261l0-325.587478q0-349.206261 349.206261-349.206261Z"
+            fill="#3271FD" p-id="25194"></path>
+          <path
+            d="M442.189913 298.284522c9.728 0 18.053565 3.372522 24.976696 10.128695 6.912 6.745043 10.373565 14.981565 10.373565 24.731826v140.566261c0 9.750261-3.450435 18.086957-10.373565 25.021218a34.003478 34.003478 0 0 1-24.976696 10.395826H301.924174a33.090783 33.090783 0 0 1-24.698435-10.395826A34.626783 34.626783 0 0 1 267.130435 473.711304V333.145043c0-9.750261 3.361391-17.986783 10.095304-24.742956 6.733913-6.745043 14.970435-10.117565 24.698435-10.117565h140.265739zM442.189913 579.417043c9.728 0 18.053565 3.372522 24.976696 10.128696 6.912 6.733913 10.373565 14.981565 10.373565 24.731826v141.133913c0 9.73913-3.450435 17.986783-10.373565 24.731826-6.92313 6.745043-15.248696 10.128696-24.976696 10.128696H301.924174c-9.728 0-17.964522-3.383652-24.698435-10.128696C270.491826 773.398261 267.130435 765.150609 267.130435 755.400348V614.266435c0-9.73913 3.361391-17.986783 10.095304-24.731826 6.733913-6.745043 14.970435-10.128696 24.698435-10.128696h140.265739zM723.311304 579.417043c9.71687 0 17.953391 3.372522 24.687305 10.128696 6.733913 6.733913 10.095304 14.981565 10.095304 24.731826v141.133913c0 9.73913-3.361391 17.986783-10.095304 24.731826-6.733913 6.745043-14.970435 10.128696-24.687305 10.128696H583.034435a34.482087 34.482087 0 0 1-24.976696-10.128696 33.224348 33.224348 0 0 1-10.373565-24.742956V614.266435c0-9.73913 3.450435-17.986783 10.373565-24.731826a34.482087 34.482087 0 0 1 24.976696-10.128696h140.276869z"
+            fill="#FFFFFF" p-id="25195"></path>
+          <path
+            d="M667.826087 243.287534m23.611218 23.611218l110.185682 110.185682q23.611218 23.611218 0 47.222436l-110.185682 110.185683q-23.611218 23.611218-47.222436 0l-110.185683-110.185683q-23.611218-23.611218 0-47.222436l110.185683-110.185682q23.611218-23.611218 47.222436 0Z"
+            fill="#FFFFFF" fill-opacity=".7" p-id="25196"></path>
+          </svg>
+    `
+  },
+  {
+    id: 'platform',
+    label: '平台级',
+    icon: `
+    <svg t="1709989874832" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+          p-id="25193" width="200" height="200" >
+    <path
+      d="M839.68 0C962.56 0 1024 61.44 1024 184.32v655.36c0 122.88-61.44 184.32-184.32 184.32H184.32C61.44 1024 0 962.56 0 839.68V184.32C0 61.44 61.44 0 184.32 0h655.36z"
+      fill="#A77CFE" p-id="53948"></path>
+    <path
+      d="M791.210667 551.722667V768c11.093333 0 21.333333 6.101333 26.88 16a32.853333 32.853333 0 0 1 0 32 30.848 30.848 0 0 1-26.88 16H232.704a31.530667 31.530667 0 0 1-31.018667-32c0-17.664 13.909333-32 31.018667-32v-216.277333A145.152 145.152 0 0 1 170.666667 432c0-26.453333 6.954667-51.968 19.626666-73.685333l84.138667-150.314667a30.848 30.848 0 0 1 26.88-16h421.333333c11.093333 0 21.333333 6.101333 26.88 16l83.797334 149.845333c38.442667 65.834667 19.882667 151.253333-42.112 193.92z m-178.432-20.138667A137.472 137.472 0 0 1 512 576.085333a137.472 137.472 0 0 1-100.821333-44.458666 137.088 137.088 0 0 1-116.352 43.52v176.853333c0 4.266667 1.621333 8.32 4.522666 11.306667s6.826667 4.693333 10.965334 4.693333h403.370666c4.096 0 8.064-1.706667 10.965334-4.693333a16.256 16.256 0 0 0 4.522666-11.306667V575.146667a137.216 137.216 0 0 1-116.352-43.562667z m-369.024-140.8c-15.189333 38.826667 1.109333 83.114667 37.418666 101.717333 36.352 18.602667 80.426667 5.162667 101.12-30.762666a30.677333 30.677333 0 0 1 57.6 0A77.653333 77.653333 0 0 0 512 512.085333a77.653333 77.653333 0 0 0 72.064-50.346666 30.677333 30.677333 0 0 1 57.6 0 77.866667 77.866667 0 0 0 65.194667 49.578666 76.842667 76.842667 0 0 0 72.490666-37.418666 82.133333 82.133333 0 0 0 0.554667-83.626667L704.64 256H319.274667l-75.52 134.826667z"
+      fill="#FFFFFF" p-id="53949"></path>
+      </svg>
+    `
+  }
+]
+
+
+const data = computed(() => [
+  {
+    label: '应用级',
+    id: 'app',
+    children: [
+      {
+        id: 'script',
+        label: '脚本库',
+        children: handleScript(platformLibStore.platformLibData.script.app)
+      },
+      {
+        id: 'method',
+        label: '方法库',
+        children: platformLibStore.platformLibData.method.app
+      }
+    ]
+  },
+  {
+    label: '平台级',
+    id: 'platform',
+    children: [
+      {
+        id: 'script',
+        label: '脚本库',
+        children: platformLibStore.platformLibData.script.platform
+      },
+      {
+        id: 'method',
+        label: '方法库',
+        children: platformLibStore.platformLibData.method.platform
+      }
+    ]
+  }
+])
+
+
+const currentSelectScriptType = ref(scriptCateData[0])
+
+const defaultProps = {
+  children: 'children',
+  label: 'label',
+}
+
+const onClickNode = (data) => {
+  if (data.scriptType) {
+    // emit('selectScript', data)
+    const isExit = ibspScript.state.scriptPanelDataList.find(item => item.id === data.id)
+    if (!isExit) {
+      ibspScript.state.scriptPanelDataList.push(data)
+    }
+    ibspScript.state.currentOperatingItem = data
+  }
+  ibspScript.state.currentSelectItem = data
+
+}
+
+const getSvgIcon = (data) => {
+  const type = data.scriptType?.split?.('-')?.at?.(-1) || data.funcType?.split?.('-')?.at?.(-1)
+  if (svgList[type]) {
+    return svgList[type]
+  }
+
+  return ''
+}
+
+const onClickScriptCate = () => {
+  const { left, bottom } = scriptCateRef.value.getBoundingClientRect()
+  open(
+    { x: left, y: bottom },
+    scriptCateData,
+    (item) => {
+      console.log(234);
+      currentSelectScriptType.value = item
+      ibspScript.state.category = item.id
+      scriptStore.panelState.scriptCategory = item.id
+    })
+}
+
+defineExpose({
+  setCurrentNodeKey(id) {
+    currentNodeKey.value = id
+
+  }
+})
+
+
+const onClickAddScript = (e) => {
+  const { type, category } = ibspScript.state
+  if (type === 'component') {
+    open({
+      x: e.clientX,
+      y: e.clientY
+    },
+    componentStore.componentData.filter((item)=>true)
+    , (item) => {
+      item.click(data)
+    })
+    return
+  }
+
+
+  const current = ibspScript.state.currentSelectItem
+  const currentIndex = ibspScript.data.findIndex(item => item.id === current?.id)
+  const newItem = {
+    id: `new-${new Date().getTime()}`,
+    label: '',
+    isUpdating: true,
+    isAdd: true,
+  }
+  ibspScript.platformLibStore.platformLibData[type][category].splice(currentIndex + 1, 0, newItem)
+}
+const onClickRefresh = () => {
+  ibspScript.platformLibStore.refreshPlatformLibData({
+    mode: ibspScript.state.category,
+    types: [ibspScript.state.type]
+  })
+}
+const onChangeScript = (item) => {
+  const labels = item.label.split('.')
+  // 截取除开最后一个
+  const label = labels.slice(0, -1)?.[0] || ''
+  const type = labels?.at?.(-1) === 'js' ? 'PT-PTK-FFLX-JS' : (labels?.at?.(-1) === 'css' ? 'PT-PTK-FFLX-CSS' : 'PT-PTK-FFLX-OTHER')
+  if (item.isAdd) {
+    ibspScript.save({
+      scriptName: label,
+      scriptType: type,
+      status: 'PT-PTK-ZT-QY',
+      remark: JSON.stringify({
+        path: 'aa/bb/cc'
+      }),
+      scriptContent: '',
+      scriptCode: ulid()
+    }).then(data => {
+      onClickRefresh()
+      console.log(data, '--');
+      const item = reactive({
+        ...data,
+        value: '',
+        temporaryValue: '',
+        label: data.scriptName,
+        type: ibspScript.state.type,
+        category: ibspScript.state.category,
+      })
+      ibspScript.state.currentOperatingItem = item
+      ibspScript.state.currentSelectItem = item
+      ibspScript.state.scriptPanelDataList.push(item)
+      currentNodeKey.value = item.id
+    })
+  }
+
+}
+
+const onClickAddFolder = () => {
+  const parent = treeRef.value.currentNode.parent
+  const item = {
+    label: '',
+    id: 'temporaryId',
+    isUpdating: true,
+
+  }
+  console.log(treeRef.value);
+  if (Array.isArray(parent.data)) {
+    // temporaryCreateItem.value = item
+    scriptData.value.unshift(item)
+  }
+
+}
+
+const nodeContextmenuData = [
+  {
+    id: 'edit',
+    label: '编辑',
+    icon: Edit,
+    click: () => {
+
+    }
+  },
+  {
+    id: 'del',
+    label: '删除',
+    icon: Delete,
+    click: (data) => {
+      ibspScript.del(data.id).then(() => {
+        const rightIsExitIndex = ibspScript.state.scriptPanelDataList.findIndex(item => item.id === data.id)
+        if (rightIsExitIndex >= 0) {
+          ibspScript.state.scriptPanelDataList.splice(rightIsExitIndex, 1)
+        }
+        if (ibspScript.state.currentOperatingItem.id === data.id) {
+          ibspScript.state.currentOperatingItem = null
+        }
+        onClickRefresh()
+      })
+    }
+  }
+]
+
+const onClickNodeContextmenu = (e, data) => {
+  open({
+    x: e.clientX,
+    y: e.clientY
+  }, nodeContextmenuData, (item) => {
+    item.click(data)
+  })
+}
+
+const scriptData = computed(() => {
+  let list
+  if (scriptStore.panelState.scriptType === 'script') {
+    return scriptStore.baseScriptTree
+  } else if (scriptStore.panelState.scriptType === 'component') {
+    list = scriptStore.componentScriptTree
+  }
+  list = scriptStore.baseMethodTree
+  return temporaryCreateItem.value ? [temporaryCreateItem.value, ...list] : list
+})
+
+
+</script>
+
+<template>
+
+  <div class="script-data">
+    <header>
+      <div class="script-cate"
+           ref="scriptCateRef"
+           @click.stop="onClickScriptCate">
+        <i v-html="currentSelectScriptType.icon"></i>
+
+        <span>{{ currentSelectScriptType.label }}</span>
+        <el-icon>
+          <ArrowDown />
+        </el-icon>
+      </div>
+      <div class="operation">
+        <el-icon @click="onClickAddScript">
+          <DocumentAdd />
+        </el-icon>
+        <el-icon @click="onClickAddFolder">
+          <FolderAdd />
+        </el-icon>
+        <el-icon @click="onClickRefresh">
+          <RefreshRight />
+        </el-icon>
+        <el-icon>
+          <SemiSelect />
+        </el-icon>
+      </div>
+
+
+    </header>
+    <el-tree style="max-width: 600px"
+             :data="scriptData"
+             ref="treeRef"
+             :props="defaultProps"
+             @node-click="onClickNode"
+             indent="10"
+             default-expand-all
+             highlight-current
+             :current-node-key="currentNodeKey"
+             :expand-on-click-node="false"
+             node-key="id">
+      <template #default="{ node, data }">
+        <span :class="{
+                'ibsp-node': true,
+                'sticky-node': data.id === 'app' || data.id === 'platform'
+              }"
+              @contextmenu.prevent="(e) => onClickNodeContextmenu(e, data)">
+          <i v-if="data.scriptType"
+             class="svg-icon"
+             v-html="getSvgIcon(data)"></i>
+
+          <el-input @change="onChangeScript(data)"
+                    v-if="data.isUpdating"
+                    style="height: 30px;"
+                    type="small"
+                    @click.stop="() => { }"
+                    v-model="data.label"></el-input>
+          <span v-else>{{ data.label }}</span>
+        </span>
+      </template>
+    </el-tree>
+  </div>
+
+
+</template>
+
+<style lang="less" scoped>
+.script-data {
+  width: 100%;
+  height: 100%;
+  // background-color: #2B2D30;
+
+  header {
+    height: 48px;
+    width: 100%;
+    display: flex;
+    padding: 0 5px;
+    justify-content: space-between;
+    align-items: center;
+    user-select: none;
+
+    border-bottom: 1px solid var(--theme-border-color);
+
+    .script-cate {
+      display: flex;
+      align-items: center;
+      height: 34px;
+      border-radius: 5px;
+      padding: 0 10px;
+      cursor: pointer;
+
+      i {
+        display: flex;
+      }
+
+      :deep(.icon) {
+        width: 23px;
+        height: 23px;
+        margin-right: 5px;
+        color: #fff;
+
+        overflow: hidden;
+
+      }
+
+      &:hover {
+        background-color: #414245;
+      }
+
+      span {
+        margin-right: 5px;
+      }
+    }
+
+    .operation {
+      display: flex;
+
+      .el-icon {
+        margin-right: 5px;
+        width: 28px;
+        height: 28px;
+        border-radius: 5px;
+        cursor: pointer;
+
+        svg {
+          font-size: 20px;
+          flex-shrink: 0;
+          cursor: pointer;
+
+        }
+
+        &:hover {
+          background-color: #414245;
+
+        }
+      }
+    }
+
+
+  }
+
+  .el-tree {
+    padding: 10px;
+    --el-tree-node-content-height: 26px;
+    overflow: auto;
+    width: 100%;
+    height: calc(100% - 30px);
+    --el-color-primary-light-9: var(--theme-gl-bg);
+
+
+    :deep(.el-tree-node) {
+      padding: 3px 0;
+
+      .el-tree-node__content {
+        border-radius: 5px;
+      }
+    }
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background-color: var(--theme-btn-bg);
+    }
+
+    &::-webkit-scrollbar-track {
+      border-radius: 5px;
+      background-color: var(--theme-bg);
+    }
+
+
+    :deep(.is-current) {
+      .el-tree-node__content {
+        color: var(--theme-gl-color);
+      }
+    }
+
+    :deep(.ibsp-node) {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .svg-icon {
+        width: 14px;
+        height: 14px;
+        display: flex;
+        margin-right: 5px;
+
+        svg {
+          flex-shrink: 0;
+          width: 14px;
+          height: 14px;
+        }
+      }
+    }
+
+  }
+
+  :deep(.top-node) {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+
+    &:hover {
+      .operation {
+        opacity: 1;
+      }
+
+    }
+
+    .operation {
+      display: flex;
+      align-items: center;
+      opacity: 0;
+
+    }
+  }
+
+  :deep(.sticky-node) {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+}
+</style>