ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-component-lib/src/index.vue

@@ -0,0 +1,530 @@
+<script setup lang="ts">
+import { ref, reactive, onBeforeMount, computed, watch, nextTick, onMounted, watchEffect } from 'vue';
+import { VueDraggable } from 'vue-draggable-plus'
+import { Tabs, TabPane } from 'ant-design-vue'
+import { ElMessage } from 'element-plus';
+import IbspSelect from '@components-ibsp/IbspSelect.vue';
+import IbspSearchInputVue from '@components-ibsp/IbspSearchInput.vue';
+import IbspDrawer from '@components-ibsp/IbspDrawer.vue';
+
+import ColorPalette from './components/ColorPalette.vue'
+
+import SvgIcon from '@/components/globals/SvgIcon.vue';
+import { emitGlobalEvent } from '@models/useGlobalEvents';
+
+
+const props = defineProps({
+  page: {
+    type: Object,
+    default: () => ({})
+  },
+  app: {
+    type: Object as ()=>IBSP.IbspAPP.APP,
+    default: () => ({})
+  }
+})
+
+const state = reactive({
+  activeComponentCategory: 'layout',
+  activeComponentLib: null,
+  activeComponentChildrenId: 'all',
+  openComponentCategory: ['1'],
+  searchComponentName: ''
+})
+
+
+const openColorPalette = ref(false)
+
+const libs = ref<any>([])
+
+const outerModuleLib = computed(()=>props.app.componentLib.componentData.filter(item=>item.code !== 'common'))
+const commonModuleLib = ref<any>(props.app.componentLib.componentData.find(item => item.code === 'common'))
+
+/**
+ * 处理组件库切换, 进行平滑滚动
+ */
+const onChangeComponentCategory = (val:string) => {
+  document.getElementById(`component-category-${val}`)!.scrollIntoView({
+    behavior: 'smooth',
+    block: 'start',
+    inline: 'start'
+  })
+}
+
+
+/**
+ * 过滤搜索组件名称
+ */
+const getComponentCategoryList = computed(() => {
+  const label = state.searchComponentName
+  if (!label) return componentCategoryList.value
+  return componentCategoryList.value
+    .map(item => ({
+      ...item,
+      components: item.components.filter(componentItem => componentItem.label.includes(label))
+    }))
+    .filter(item => item.components.length > 0)
+})
+
+
+const componentCategoryList = computed(() => {
+  const result = [
+    ...(
+      commonModuleLib.value.children
+        .sort((a, b) => a.sort - b.sort)
+        .map(item => ({ ...item, label: item.name, value: item.id })) || []
+    ),
+    ...(
+      outerModuleLib.value
+        .find(item => item.id === state.activeComponentLib)?.children
+        .sort((a, b) => a.sort - b.sort)
+        .map(item => ({ ...item, label: item.name, value: item.id })) || []
+    )
+  ]
+  return result
+})
+
+const openComponentCategory = computed(() => {
+  return componentCategoryList.value.map(item => item.id)
+})
+
+
+const onDragstart = (event:DragEvent, item:any) => {
+  if (item.disabled) {
+    event.preventDefault()
+    ElMessage.warning('当前组件不可用')
+    return
+  }
+  const source = {
+    ...item.source
+  }
+  event.dataTransfer!.setData('componentSource', JSON.stringify(source))
+  emitGlobalEvent('dragComponent', {
+    type: 'source',
+    data: source
+  });
+}
+
+const onClickOpenColorPalette = () => {
+  openColorPalette.value = true
+}
+
+
+onMounted(()=>{
+  libs.value = props.app.componentLib.libs.filter(item=>item.compCode !== 'common')
+  state.activeComponentLib = libs.value?.[0]?.compCode
+})
+
+
+</script>
+
+<template>
+  <div class="component-lib-module">
+    <header>
+      <IbspSelect v-model="state.activeComponentLib"
+                  placeholder="请选择组件库"
+                  :options="libs"
+                  :defaultProps="{
+                    label:'sysLibComp',
+                    value:'compCode'
+                  }"
+                  size="default" />
+      <div class="operation" v-if="state.activeComponentLib">
+        <i @click="onClickOpenColorPalette" class="color">
+          <svg t="1710602077528"
+               class="icon"
+               viewBox="0 0 1024 1024"
+               version="1.1"
+               xmlns="http://www.w3.org/2000/svg"
+               p-id="25964"
+               width="200"
+               height="200">
+            <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
+                  fill="var(--theme-gl-bg)"
+                  p-id="25965">
+            </path>
+            <path
+              d="M512 199.3728c-228.864 0-313.6 199.68-313.6 311.552 0 111.9744 81.408 313.6 306.944 313.6 0 0 56.064 1.024 56.064-49.408 0-50.3808-25.1904-34.304-25.1904-70.5536 0-36.352 25.1904-52.4288 37.3248-52.4288 12.0832 0 91.7504 6.0416 136.1408-11.1104 44.288-17.1008 115.9168-71.5776 115.9168-164.352 0-81.664-84.6848-277.2992-313.6-277.2992zM320.8192 512a54.4256 54.4256 0 1 1 0-108.8512 54.4256 54.4256 0 0 1 0 108.8512z m102.7072-134.7584a54.4256 54.4256 0 1 1-0.0512-108.8512 54.4256 54.4256 0 0 1 0 108.8512z m174.6432 0a54.4768 54.4768 0 1 1 0-108.9536 54.4768 54.4768 0 0 1 0 108.9536zM701.8496 512a54.4768 54.4768 0 1 1 0-108.9536 54.4768 54.4768 0 0 1 0 108.9536z"
+              fill="#FFFFFF"
+              p-id="25966"></path>
+          </svg>
+        </i>
+      </div>
+    </header>
+    <main v-if="!state.activeComponentCategory || outerModuleLib?.length">
+
+      <div class="component-category">
+        <Tabs v-model:activeKey="state.activeComponentCategory"
+              tab-position="left"
+              :tabBarStyle="{
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+              }"
+              @change="onChangeComponentCategory">
+          <TabPane :key="item.id" v-for="item in componentCategoryList">
+            <template #tab>
+              <div class="tab-title">
+                <SvgIcon :icon="item.icon" />
+                <span class="title">{{ item.label }}</span>
+              </div>
+            </template>
+          </TabPane>
+
+        </Tabs>
+      </div>
+      <section id="ComponentCategoryListContainer">
+        <div class="search">
+          <IbspSearchInputVue placeholder="请输入组件名称"
+
+                              v-model="state.searchComponentName" />
+        </div>
+        <el-collapse v-show="getComponentCategoryList.length > 0"
+                     v-model="openComponentCategory"
+        >
+          <el-collapse-item v-for="item in getComponentCategoryList"
+                            :key="item.id"
+                            :class="{
+                              'active': state.activeComponentCategory === item.id
+                            }"
+                            :id="`component-category-${item.id}`"
+                            :name="item.id">
+            <template #title>
+              <span class="title">{{ item.label || item.name }}</span>
+            </template>
+            <VueDraggable ref="el"
+                          :sort="false"
+                          v-model="item.components"
+                          :removeCloneOnHide="false"
+                          :group="`component-category-${item.id}`"
+                          ghostClass="component-drag-list"
+                          dragClass="component-drag-list"
+                          :animation="400"
+                          class="component-category-list">
+              <div class="component-item"
+                   v-for="componentItem in item.components"
+                   :key="componentItem?.id"
+                   draggable="true"
+                   v-show="componentItem?.visible ?? true"
+                   :class="{
+                     disabled: componentItem.disabled
+                   }"
+                   @dragstart.stop="(e) => onDragstart(e, componentItem)">
+                <div class="icon">
+                  <SvgIcon :icon="{
+                    ...(componentItem?.icon || []),
+                    size: {
+                      width: '30px', height: '30px'
+                    }
+                  }" />
+                </div>
+                <div class="title">{{ componentItem?.label }}</div>
+              </div>
+            </VueDraggable>
+          </el-collapse-item>
+        </el-collapse>
+        <div v-show="getComponentCategoryList.length <= 0">暂无组件...</div>
+      </section>
+
+    </main>
+
+    <main v-else>
+      <el-empty description="暂无组件..." />
+    </main>
+
+    <IbspDrawer v-model="openColorPalette"
+                title="组件库调色盘"
+                direction="ltr"
+                width="auto"
+    >
+      <ColorPalette :theme="outerModuleLib.find(item => item.id === state.activeComponentLib)?.theme" />
+    </IbspDrawer>
+
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.component-lib-module {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+
+  header {
+    height: 45px;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    padding-right: 10px;
+    justify-content: space-between;
+
+    :deep(.ibsp-select) {
+      flex: 1;
+      height: 30px;
+
+    }
+
+    .operation {
+      padding-left: 10px;
+
+      >i {
+        cursor: pointer;
+        width: 20px;
+        height: 20px;
+
+        svg {
+          width: 20px;
+          height: 20px;
+
+        }
+      }
+    }
+  }
+
+  :deep(.ant-tabs) {
+    .ant-tabs-tab:hover {
+      color: var(--theme-gl-bg) !important;
+    }
+  }
+
+  main {
+    display: flex;
+    height: 100%;
+    height: calc(100% - 45px);
+    overflow: hidden;
+    justify-content: center;
+
+    section {
+      flex: 1;
+
+      .search {
+        height: 35px;
+        padding: 0 5px;
+      }
+    }
+
+    .el-collapse {
+      --el-collapse-content-bg-color: transparent;
+      --el-collapse-header-bg-color: transparent;
+      --el-collapse-border-color: transparent;
+      --el-collapse-content-text-color: var(--theme-font-color);
+      --el-collapse-header-height: 38px;
+      overflow: auto;
+
+      :deep(.el-collapse-item.active){
+        .el-collapse-item__header{
+          color: var(--theme-gl-bg);
+        }
+      }
+
+      // 滚动条
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      height: calc(100% - 35px);
+
+      :deep(.el-collapse-item__content) {
+        padding-bottom: 0 !important;
+      }
+
+      .title {
+        flex: 1;
+      }
+
+      .component-category-list {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 5px;
+        padding-right: 0;
+
+        .component-item {
+          width: 70px;
+          height: 80px;
+          margin-right: 5px;
+          margin-bottom: 5px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          border: 1px solid var(--theme-border-color);
+          background-color: var(--theme-block-bg);
+          padding-top: 2px;
+          &.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+          }
+        }
+      }
+    }
+
+    :deep(.el-collapse-item__header) {
+      color: var(--theme-font-color);
+      flex-direction: row-reverse;
+
+      .el-collapse-item__arrow {
+        margin-left: 5px;
+      }
+    }
+
+    .component-category {
+      flex: 1;
+      user-select: none;
+      max-width: 48px;
+      border-right: 1px solid var(--theme-border-color);
+      overflow: auto;
+
+      // 滚动条
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      :deep(.ant-tabs-tab) {
+        padding: 5px 0 !important;
+        margin: 5px 0 0 0 !important;
+        display: flex;
+        justify-content: center;
+
+
+      }
+
+      :deep(.ant-tabs-content-holder) {
+        display: none;
+      }
+
+      :deep(.ant-tabs-ink-bar) {
+        background: var(--theme-gl-bg) !important;
+      }
+
+      :deep(.ant-tabs-tab-active) {
+        .ant-tabs-tab-btn {
+          color: var(--theme-gl-bg) !important;
+        }
+
+        .tab-title {
+          color: var(--theme-gl-bg) !important;
+        }
+      }
+    }
+
+    .tab-title {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+      color: var(--theme-font-color);
+
+      :deep(.anticon) {
+        // font-size: 20px;
+        margin-right: 0 !important;
+      }
+
+      .title {
+        // 超出换行
+        width: 40px;
+        text-align: center;
+        word-break: break-all;
+      }
+
+    }
+  }
+
+  .component-children-name {
+    flex: 1;
+
+    // overflow: auto;
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+
+    :deep(.ant-btn) {
+      margin: 5px 0;
+      padding: 0;
+      border-radius: 2px;
+
+      span {
+        font-size: 12px;
+        // 超出省略号
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline;
+
+      }
+    }
+  }
+
+  .component-list {
+    flex: 2;
+    overflow: auto;
+    padding: 5px;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background-color: #99999962;
+    }
+
+
+    :deep(.component-item) {
+      display: flex;
+      width: 100%;
+      height: 100px;
+      flex-direction: column;
+      padding: 5px;
+      border-radius: 2px;
+      background-color: #99999962;
+      margin: 5px 0;
+      align-items: center;
+      padding-right: 5px;
+
+      .title {
+        font-size: 12px;
+        // 超出省略号
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline;
+        margin-bottom: 5px;
+      }
+
+      .icon {
+        flex: 1;
+        width: 100%;
+        font-size: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .anticon {
+          font-size: 50px;
+        }
+      }
+    }
+  }
+
+
+}
+</style>
+
+<style lang="less">
+.component-drag-list {
+  // opacity: 0.5;
+  background: var(--theme-gl-bg) !important;
+  color: var(--theme-gl-color);
+  border: 1px solid var(--theme-gl-bg);
+  opacity: 0.7;
+  cursor: move !important;
+
+  span {
+    cursor: move;
+    color: var(--theme-gl-color);
+  }
+}
+</style>