visualization-design/src/views/components/Graphics.vue

<template>
  <div class="graphics">
    <div class="input-search">
      <div class="btn">
        <t-icon name="search" />
      </div>
      <t-input placeholder="搜索" />
    </div>
    <div class="groups">
      <div class="sub-groups">
        <div
          v-for="group in groups"
          :class="group.active ? 'active' : ''"
          @click="groupChange(group.name)"
        >
          <t-icon :name="group.icon" />
          {{ group.name }}
        </div>
      </div>
      <div class="list">
        <div
          class="show-item"
          v-for="item in showList"
          :draggable="true"
          @dragstart="dragStart($event, item)"
          @drag="drag($event, item)"
          @dragend="dragEnd()"
        >
          <t-image
            v-if="item.image"
            :src="item.image"
            fit="cover"
            :style="{ width: '88px', height: '88px' }"
          />
          <i v-else class="t-icon" :class="item.icon"></i>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, reactive } from 'vue';

const groups = reactive([
  {
    icon: 'desktop',
    name: '场景',
    key: '',
    active: false,
  },
  {
    icon: 'root-list',
    name: '模板',
    key: '',
    active: false,
  },
  {
    icon: 'chart',
    name: '图表',
    key: '',
    active: false,
  },
  {
    icon: 'control-platform',
    name: '控件',
    key: '',
    active: false,
  },
  {
    icon: 'file-icon',
    name: '图标',
    key: '',
    active: false,
  },
  {
    icon: 'chart-bubble',
    name: '图形',
    key: '',
    active: true,
  },
  {
    icon: 'app',
    name: '我的',
    key: '',
    active: false,
  },
]);

const groupChange = (name: string) => {
  if (name === '图形') {
  }
};

const showList = [
  {
    name: 'square',
    icon: 't-icon t-rect',
    id: '',
    data: {
      text: '正方形',
      width: 100,
      height: 100,
      name: 'square',
    },
  },
  {
    name: 'rectangle',
    icon: 't-icon t-rectangle',
    id: 2,
    data: {
      text: '圆角矩形',
      width: 200,
      height: 50,
      borderRadius: 0.1,
      name: 'rectangle',
    },
  },
  {
    name: 'circle',
    icon: 't-icon t-circle',
    image: '',
    id: 3,
    data: {
      text: '圆',
      width: 100,
      height: 100,
      name: 'circle',
    },
  },
  {
    name: 'triangle',
    icon: 't-icon t-triangle',
    id: 4,
    data: {
      text: '三角形',
      width: 100,
      height: 100,
      name: 'triangle',
    },
  },
];

const dragStart = (event: DragEvent, item: any) => {
  if (!item || !event.dataTransfer) {
    return;
  }

  event.dataTransfer.setData(
    'Meta2d',
    JSON.stringify(item.componentData || item.data)
  );
  event.stopPropagation();
};

const drag = (event: DragEvent, item: any) => {};

const dragEnd = () => {};

const dragstart = (event: any) => {
  event.target.style.opacity = 0.5;
};

const dragend = (event: any) => {
  event.target.style.opacity = 1;
};

onMounted(() => {
  document.removeEventListener('dragstart', dragstart);
  document.removeEventListener('dragend', dragend);
});

onUnmounted(() => {
  document.addEventListener('dragstart', dragstart, false);
  document.addEventListener('dragend', dragend, false);
});
</script>
<style lang="postcss" scoped>
.graphics {
  display: flex;
  flex-direction: column;

  .input-search {
    flex-shrink: 0;
    height: 40px;
  }

  .groups {
    display: grid;
    grid-template-columns: 50px 1fr;
    border-top: 1px solid var(--color-background-input);
    flex-grow: 1;
    overflow-y: auto;
    font-size: 12px;

    .sub-groups {
      & > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px 4px;
        line-height: 1;
        cursor: pointer;

        .t-icon {
          font-size: 20px;
          margin-bottom: 5px;
        }

        &:hover {
          color: var(--color-primary);
        }
      }

      .active {
        background-color: var(--color-background-active);
        color: var(--color-primary);
        border-left: 2px solid var(--color-primary);
      }
    }

    .list {
      background-color: var(--color-background-active);
      padding: 12px;
      display: grid;
      grid-template-columns: 112px 112px;
      grid-template-rows: 142px;

      .show-item {
        padding: 12px;
        p {
          margin-top: 10px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          font-size: 14px;
        }

        i {
          background-color: #fff;
          border-radius: 4px;
          height: 88px;
          width: 88px;
        }
        .t-image {
          background-color: #fff;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>