data-driven-design/src/engineer/components/Activity.vue

<script setup lang="ts">
import { ref, unref } from 'vue'
import Draggable from 'vuedraggable'
import type { Block, Module } from '../types'
import { useContext } from '../context'
import { hash } from '../utils'

defineOptions({
  name: 'DddActivity',
})

const currentTab = ref(0)
const ctx = useContext()

// 递归重建所有 ID
function clone(v: any): any {
  if (v == null || typeof v != 'object')
    return v

  if (Array.isArray(v))
    return v.slice().map(clone)

  const s = Object.create(null)
  for (const [key, val] of Object.entries(v)) {
    if (key === 'vid' && typeof val === 'string' && val.length === 8)
      s[key] = hash(`${++ctx.nextId}`)
    else
      s[key] = clone(val)
  }
  return s
}

function cloneModule(src: Module): Block {
  // eslint-disable-next-line unused-imports/no-unused-vars
  const { maxReferenceCount, referenceCount, image, configs, ...attrs } = unref(src)
  return clone(attrs)
}
</script>

<template>
  <div class="ddd-activity">
    <div class="ddd-activity-header">
      <slot name="header" />
    </div>
    <div class="ddd-activity-content">
      <div class="ddd-activity-tabs">
        <div
          v-for="(c, i) in ctx.categories"
          :key="i"
          class="ddd-activity-tabs-item"
          :class="{ 'is-active': currentTab === i }"
          @click.stop="currentTab = i"
        >
          <!-- <Icon :name="c.icon" /> -->
          <span>{{ c.text }}</span>
        </div>
      </div>
      <template v-for="(cat, idx) in ctx.categories" :key="idx">
        <Draggable
          v-show="currentTab === idx"
          class="ddd-activity-tabs-content"
          :list="cat.modules"
          :group="{ name: 'modules', pull: 'clone' }"
          :clone="cloneModule"
          :component-dat="{ sort: false }"
          :sort="false"
          item-key="id"
        >
          <template #item="{ element }">
            <div class="ddd-activity-module">
              <img v-if="element.image" class="ddd-activity-module-image" :src="element.image" />
              <div v-else class="ddd-activity-module-image">{{ element.title }}</div>
              <div class="ddd-activity-module-title">{{ element.title }}</div>
              <span class="ddd-activity-module-tips">释放鼠标将组件添加到此处</span>
            </div>
          </template>
        </Draggable>
      </template>
    </div>
    <div class="ddd-activity-footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.ddd-activity {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 13px;

  &-header,
  &-footer {
    width: 100%;
    flex-shrink: 0;
  }

  &-content {
    flex: 1;
    display: flex;
    align-items: stretch;
    overflow: hidden;
  }

  &-tabs {
    position: relative;
    flex-shrink: 0;
    width: 64px;
    padding: 12px 0;

    &::after {
      z-index: 0;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      content: "";
      border-right: 1px solid #ddd;
    }

    &-item {
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 64px;
      height: 64px;
      user-select: none;
      position: relative;
      cursor: pointer;
      gap: 2px;
      transition: all 200ms;

      &::after {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        bottom: 0;
        width: 2px;
        background: transparent;
        transition: all 200ms;
      }

      &:hover {
        background: rgba(#000, 0.08);
      }

      &.is-active {
        color: blue;
        background: rgba(2, 86, 255, 0.1);

        &::after {
          background: blue;
        }
      }
    }

    &-content {
      padding: 12px;
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-items: flex-start;
      align-content: flex-start;
      overflow-y: auto;
    }
  }

  &-module {
    // 在左边预览图时的样式
    &:not(.is-ghost) {
      width: 100px;
      border: 1px solid #eee;
      user-select: none;
      display: flex;
      flex-direction: column;
      text-align: center;
      background: #fff;
    }

    &-image {
      height: 68px;
      width: 98px;
      line-height: 68px;
      color: #eee;
      font-size: 24px;
      overflow: hidden;
    }

    &-title {
      height: 24px;
      line-height: 24px;
      background: #eee;
      font-size: 13px;
    }

    &-tips {
      display: none;
    }

    // 拖拽到模拟器上的样式
    // 此时，内部内容会变成字符串 “释放鼠标讲组件添加到此处”。
    &.is-ghost {
      background: rgba(0, 0, 255, 0.1);
      color: blue;
      padding: 8px;
      text-align: center;
      border: 1px dashed blue;
      font-size: 12px;
    }

    &.is-ghost &-image,
    &.is-ghost &-title {
      display: none;
    }

    &.is-ghost &-tips {
      display: block;
    }
  }
}
</style>