@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/src/visual/config-page/ComponentList.vue

@@ -0,0 +1,580 @@
+<script>
+// @jsx-vue3（T33：T30 JSX 批漏掉的 6 个文件，见 .claude/codemod/codemod-jsx-vue3-tail6.mjs）
+// 已选组件
+import draggable from '@epxing/core/src/components/draggable'
+import { ensureIcons, collectIconNames } from '@epxing/icons/src/runtime.mjs'
+export default {
+  name: 'epx-visual-config-component-list',
+  components: {
+    draggable
+  },
+  props: {
+    componentList: Array,
+    allComponentList: Array,
+    component: Object
+  },
+  inject: ['getItemConfigs', 'changeItemConfigs', 'deleteItemConfigs'],
+  data () {
+    return {
+      foldMap: {},
+      showModal: false,
+      beforeMoveUpId: null,
+      afterMoveUpId: null,
+      componentType: [],
+      componentTypeList: [],
+      collapseList: [],
+      searchKey: '',
+      TERMINAL: 'pc',
+      LEVEL: '01',
+      selectComponent: {},
+      loadInfo: true,
+      activeType: 'common'
+    }
+  },
+  computed: {
+    itemConfigs () {
+      return this.getItemConfigs()
+    },
+    componentImage () {
+      return v => {
+        if ('PICTURE' in v) {
+          return v.PICTURE ? this.$util.getFileUrl(v.PICTURE) : ''
+        }
+        const component = this.allComponentList.find(item => item.ID === v.id) || {}
+        return component.PICTURE ? this.$util.getFileUrl(component.PICTURE) : ''
+      }
+    },
+    commonComponentList () {
+      return this.allComponentList.filter(item => item.IS_FRE_USE === '1' && item.TITLE.includes(this.searchKey) && item.TERMINAL.includes(this.TERMINAL) && item.LEVEL.includes(this.LEVEL))
+    },
+    activeComponentList () {
+      if (this.activeType === 'common') {
+        return this.commonComponentList
+      } else {
+        const active = this.componentTypeList.find(item => item.componentType === this.activeType) || {}
+        return active.children || []
+      }
+    }
+  },
+  watch: {
+    // 图标按需：组件类型图标（componentInfo.ICON）来自组件元数据，既不在页面配置里、
+    // 也不走 <epx-icon>，两个接入点都够不着。接在收到清单这一刻**批量**补一次，
+    // 而不是在 render 里逐个调 —— 后者每个名字一次请求，白白拆散批量。
+    // allComponentList 是 prop，不管上游从哪个 fetch 来的都会到这儿。
+    allComponentList: {
+      immediate: true,
+      handler (list) {
+        if (list && list.length) ensureIcons(collectIconNames(list))
+      }
+    },
+    selectComponent () {
+      this.loadInfo = false
+      this.$nextTick(() => {
+        this.loadInfo = true
+      })
+    }
+  },
+  methods: {
+    getComponentInfo (component) {
+      return this.allComponentList.find(item => (item.componentName || item.CODE) === component.contentType) || {}
+    },
+    foldComponent (id, e) {
+      // 设置其为
+      // 判断其是否为
+      e.stopPropagation()
+      this.foldMap[id] = !this.foldMap[id]
+    },
+    closeModal () {
+      this.showModal = false
+      this.selectComponent = {}
+    },
+    addComponent (component) {
+      // 判断当前组件类型
+      const compId = new Date().getTime() + ''
+      this.$emit('add', [{ id: compId, ...component }, this.showModal])
+      this.showModal = false
+    },
+    selectComponentFn (id) {
+      const component = this.allComponentList.find(comp => comp.ID === id)
+      this.selectComponent = component
+    },
+    renderItem (component, upId, upComponent, level) {
+      const componentInfo = this.getComponentInfo(component)
+      const componentId = upId === 'root' ? component.id : upId + '-' + component.id
+      if (componentInfo.COMPONENT_TYPE === 'page' || componentInfo.COMPONENT_TYPE === 'container' || componentInfo.CONTAINER === '1') {
+        if (!component.items) {
+          component.items = []
+        }
+      }
+      return (
+        <li class={['select-component-item', { active: this.component && this.component.id === componentId }, { fold: this.foldMap[componentId] }]} component-id={componentId}>
+          <p class="select-component-item__header" style={{ paddingLeft: level * 16 + 8 + 'px' }} onClick={() => this.$emit('click', componentId, componentInfo, component, upId)}>
+            <span >
+              {(componentInfo.CONTAINER === '1' || (component.items && component.items.length > 0)) && <i style={{ left: (level - 1) * 16 + 8 + 'px' }} class={['fold-icon', 'el-icon-arrow-down']} onClick={ this.foldComponent.bind(this, componentId) }></i>}
+              <i class={['component-icon', 'fa', componentInfo.ICON || 'el-icon-box']}></i>
+              <span >{component.title}</span>
+              {
+                componentInfo.STATUS === 'deprecated' && (
+                  <el-tooltip placement="top" content={componentInfo.REMARK}>
+                    <i class="component__warning-icon el-icon-warning-outline" ></i>
+                  </el-tooltip>
+                )
+              }
+              {
+                componentInfo.STATUS === 'abandon' && (
+                  <el-tooltip placement="top" content={componentInfo.REMARK || '此组件已经废除，请替换新的组件使用'}>
+                    <span class="component__abandon-icon">废</span>
+                  </el-tooltip>
+                )
+              }
+            </span>
+            <span class="select-component__operate" onClick={e => e.stopPropagation()}>
+              {componentInfo.CONTAINER === '1' && <i class="el-icon-plus" onClick={(e) => { e.stopPropagation(); this.showModal = componentId }}></i>}
+              <i class="el-icon-copy-document" onClick={this.$emit.bind(this, 'copy', component, upId)}></i>
+              <i class="el-icon-close" onClick={this.$emit.bind(this, 'delete', componentId)}></i>
+            </span>
+          </p>
+          <div class="select-component-child" >
+            {(componentInfo.COMPONENT_TYPE === 'page' || componentInfo.COMPONENT_TYPE === 'container' || componentInfo.CONTAINER === '1' || (component.items && component.items.length > 0)) && !component.fold &&
+              this.renderList(component.items || [], componentId, component.contentType, level)
+            }
+          </div>
+        </li>
+      )
+    },
+    /**
+     * @param { Array } componentList 组件列表
+     * @param { String } upId 上级组件id
+     * @param { upComponent } 上级组件 epx-xxxx
+     */
+    renderList (componentList = [], upId = 'root', upComponent, level = 0) {
+      if (!componentList) return
+      return (
+        <div class="select-component-container">
+          <draggable class="select-component-list" tag="ul" draggable-id={upId} list={componentList} componentData={{ attrs: { 'up-id': upId } }} group={{ name: 'g1' }} ghostClass="drag-component__ghost" move={this.move.bind(this)} onChange={this.change.bind(this)}>
+            {
+              componentList.map(component => {
+                return this.renderItem(component, upId, upComponent, level + 1)
+              })
+            }
+          </draggable>
+          {
+            upId === 'root' && (
+              <el-button class="add-component-add root" type="primary" size="default" onClick={(e) => { e.stopPropagation(); this.showModal = upId }}>+ {this.$t('new add component')}</el-button>
+            )
+          }
+        </div>
+      )
+    },
+
+    renderModal () {
+      return (
+        <el-dialog
+          title={this.$t('Page Component Query')}
+          modelValue={!!this.showModal}
+          width="960px"
+          // top="4.7vh"
+          append-to-body
+          // class="visual-component-select-dialog"
+          onClick={e => e.stopPropagation()}
+          onClose={() => { this.showModal = false; this.selectComponent = {} }}
+        >
+          <epx-visual-component-library-dialog onClick={this.addComponent.bind(this)}></epx-visual-component-library-dialog>
+        </el-dialog>
+      )
+    },
+    getChildrenById (id, componentList = this.componentList, upId) {
+      for (const item of componentList) {
+        const itemId = upId ? upId + '-' + item.id : item.id
+        if (itemId === id) {
+          return item.items
+        } else if (item.items) {
+          const children = this.getChildrenById(id, item.items, itemId)
+          if (children) return children
+        }
+      }
+    },
+    move (evt, orginEvt) {
+      this.beforeMoveUpId = evt.from.getAttribute('up-id')
+      this.afterMoveUpId = evt.to.getAttribute('up-id')
+    },
+    change (e) {
+      if (e.removed || e.added) {
+        // 寻找之前的配置
+        const { element = {} } = e.added || e.removed
+        // 跨级移动
+        if (this.beforeMoveUpId !== null && element.id && this.beforeMoveUpId !== this.afterMoveUpId) {
+          const beforeElementId = this.beforeMoveUpId !== 'root' ? (this.beforeMoveUpId + '-' + element.id) : element.id
+          const afterElementId = this.afterMoveUpId !== 'root' ? (this.afterMoveUpId + '-' + element.id) : element.id
+          // 获取子节点
+          const beforeMoveConfig = this.itemConfigs[beforeElementId]
+          if (beforeMoveConfig) {
+            this.changeItemConfigs(afterElementId, beforeMoveConfig)
+            this.deleteItemConfigs(beforeElementId)
+          }
+          const children = this.getChildrenById(afterElementId)
+          if (children) {
+            const changeConfigs = (arr, beforeElementId, afterElementId) => {
+              arr.forEach(item => {
+                const beforeMoveConfig = this.itemConfigs[beforeElementId + '-' + item.id]
+                if (beforeMoveConfig) {
+                  this.changeItemConfigs(afterElementId + '-' + item.id, beforeMoveConfig)
+                  this.deleteItemConfigs(beforeElementId + '-' + item.id)
+                }
+                if (item.items) {
+                  changeConfigs(item.items, beforeElementId + '-' + item.id, afterElementId + '-' + item.id)
+                }
+              })
+            }
+            changeConfigs(children, beforeElementId, afterElementId)
+          }
+        }
+        this.beforeMoveUpId = null
+        this.afterMoveUpId = null
+      }
+    }
+  },
+  render () {
+    return (
+      <div class="config-select-container">
+        <div class="select-container__header">
+          <span>{this.$t('Outline of the component')}</span>
+          <i class="el-icon-close" onClick={() => this.$emit('close')}></i>
+        </div>
+        { this.renderList(this.componentList)}
+        { this.renderModal()}
+      </div>
+    )
+  },
+  created () {
+    window.addEventListener('click', this.closeModal, false)
+  },
+  unmounted () {
+    window.removeEventListener('click', this.closeModal, false)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+ .config-select-container {
+   margin-left: 2px;
+   width: 360px;
+   height: 100%;
+   display: flex;
+   flex-direction: column;
+   background: var(--epx-bg-card);
+   position: relative;
+
+    :deep(.el-dialog) {
+      height: 500px
+    }
+
+ }
+ .select-container__header {
+   height: 48px;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding: 0 20px;
+   border-bottom: 1px solid #e3e3e3;
+   >span {
+    font-size: var(--epx-font-size-l);
+    font-weight: 600;
+   }
+  >i {
+    color: rgba(0, 0, 0, 0.65);
+    cursor: pointer;
+  }
+ }
+ .select-component-container {
+  flex: 1;
+  overflow: auto;
+ }
+.select-component-item {
+  padding: 4px 0;
+  font-weight: 500;
+  cursor: pointer;
+  position: relative;
+  .fold-icon{
+    position: absolute;
+    left: 0px;
+    top: 20px;
+    margin-right: 2px;
+    transition: all .5s;
+  }
+  &.fold {
+    .select-component-container {
+      display: none;
+    }
+    .fold-icon{
+      transform: rotate(-90deg);
+      transform-origin: 50%;
+    }
+  }
+  &.active {
+    >.select-component-item__header {
+       &::before {
+        display: block;
+        content: '';
+        position: absolute;
+        z-index: 0;
+        left: 0;
+        width: 100%;
+        height: 48px;
+        @include bg_color_primary(.2);
+      }
+    }
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
+  .select-component__operate {
+    display: none;
+    &> i {
+      cursor: pointer;
+      margin: 0 5px;
+      color: #666;
+    }
+  }
+  .el-icon-arrow-up {
+    transition: all .5s;
+  }
+  >span:hover {
+      @include font_color_primary
+  }
+}
+.select-component-item__header {
+  cursor: pointer;
+  font-weight: 500;
+  padding: 0 20px;
+  height: 48px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  &:hover {
+    &::before {
+      display: block;
+      content: '';
+      position: absolute;
+      z-index: 0;
+      left: 0;
+      width: 100%;
+      height: 48px;
+      @include bg_color_primary(.2);
+    }
+    .select-component__operate {
+      display: block;
+    }
+    >span {
+      z-index: 1;
+    }
+  }
+  &.active {
+    @include bg_color_primary(.2);
+    @include font_color_primary;
+  }
+}
+.select-component-child {
+  // padding-left: 20px;
+}
+.select-component-list {
+  min-height: 20px;
+}
+.collapse {
+  // padding: 0 20px;
+
+    :deep(.el-collapse-item__header) {
+      padding: 0 12px;
+      font-size: var(--epx-font-size-base);
+    }
+    :deep(.el-collapse-item__header),
+    :deep(.el-collapse-item__wrap) {
+      border: none;
+    }
+
+}
+.fold-item {
+  padding: 0 12px;
+  height: 48px;
+  line-height: 48px;
+  background-color: var(--epx-bg-card);
+  color: #333;
+  cursor: pointer;
+  &:hover, &.active {
+    @include bg_color_primary(.2)
+  }
+}
+.fold-list {
+  .fold-item {
+    padding: 0 24px;
+  }
+}
+.component-list {
+  flex: 1;
+  overflow: auto;
+}
+
+.component-item {
+  width: calc(25% - 20px);
+  margin: 10px;
+  float: left;
+  cursor: pointer;
+  &:hover, &.active {
+    .component-item__preview{
+      padding: 0;
+      border: 2px solid;
+      @include border_color_primary;
+    }
+  }
+
+}
+.component-item__preview {
+  border: 1px dashed #e3e3e3;
+  padding: 1px;
+  box-sizing: border-box;
+  transition: all .3s;
+  width: 100%;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  &>img {
+    height: 100%;
+  }
+}
+.component-item__title {
+  color: #666;
+  margin-top: 4px;
+  text-align: center;
+}
+.component-desc {
+  padding: 20px 0;
+}
+.add-component-add  {
+  margin: 0 20px;
+  margin-top: -10px;
+  &.root {
+    margin: 16px 20px;
+    display: block;
+    width: calc(100% - 40px);
+  }
+}
+.find {
+  max-height: 400px;
+}
+.component-icon {
+  font-weight: 500;
+  color: #666;
+  // @include font_color_primary;
+  margin-right: 6px;
+}
+.filter {
+  padding: 12px 16px;
+  border-bottom: 1px solid #D8DCE6;
+}
+.component-select-item {
+  display: flex;
+}
+.component-menu-item {
+  padding-right: 16px;
+  &:hover {
+    .component-select-btn {
+      display: inline;
+    }
+  }
+}
+.filter-item {
+
+    :deep(.el-button) {
+      color: #444;
+      &:hover, &.active {
+        @include font_color_primary
+      }
+    }
+
+}
+.component-title {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 4px;
+}
+.component-select-btn {
+  display: none;
+}
+.component-content {
+  padding: 0 16px;
+}
+.component-header {
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  >span {
+    font-weight: bold;
+    color: #333;
+    font-size: var(--epx-font-size-l);
+  }
+}
+.component-style {
+  >img {
+    width: 100%;
+  }
+}
+.component-info-title {
+  font-size: var(--epx-font-size-l);
+  font-weight: bold;
+  padding: 16px 0;
+}
+
+.component-nav {
+  width: 360px;
+  box-shadow: 2px 0px 6px 0px rgba(0, 0, 0, 0.15);
+  overflow: auto;
+  flex-shrink: 0;
+}
+
+.component-content {
+  flex: 1;
+  overflow: auto;
+}
+.component__warning-icon {
+  color: #E6A23C;
+  margin-left: 4px;
+}
+.component__abandon-icon {
+  color:#fff;
+  font-size: 13px;
+  padding: 0 6px;
+  background: #AAAAAA;
+  border-radius: 10px;
+  line-height: 18px;
+  margin-left: 4px;
+}
+</style>
+<style lang="scss">
+.visual-component-select-dialog.el-dialog {
+  // height: 90%;
+  .el-dialog__body {
+    // padding: 0;
+    // height: calc(100% - 55px);
+  }
+}
+.drag-component__ghost {
+    width: 100%!important;
+    font-size: 0;
+    height: 0px;
+    box-sizing: border-box;
+    background: $--color-primary;
+    border: 1px ;
+    border-style: solid;
+    @include border_color_primary;
+    outline-width: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+</style>