drawing-board-service/src/example/fuse/views/overview/slide-icons.vue

<template>
  <ElCollapse class="icon-layout" v-model="activeGroups">
    <ElCollapseItem
      v-for="group in searchGroups"
      :name="group.name"
      v-if="searchGroups.length"
    >
      <template #title>
        <h2>{{ group.name }}</h2>
      </template>

      <div class="type-children" v-for="typeChildren in group.children">
        <h3 v-if="typeChildren.name">{{ typeChildren.name }}</h3>
        <div class="icon-items">
          <div
            v-for="item in typeChildren.children"
            @click="drawIcon(`./icons/${item.icon}.svg`, item.name, item)"
          >
            <Icon :name="item.icon" size="32px" :color="item.color" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </ElCollapseItem>
    <el-empty description="暂无数据" v-else />
  </ElCollapse>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { ElCollapse, ElCollapseItem, ElEmpty } from "element-plus";
import { getSvgContent, parseSvgContent } from "@/utils/resource";
import { Draw } from "../../../components/container/use-draw.ts";
import { iconGroups as groups } from "../../../constant";

const props = defineProps<{ draw: Draw }>();
const emit = defineEmits<{ (e: "exit"): void }>();

const drawIcon = async (url: string, name: string, item: any) => {
  const svgContent = parseSvgContent(await getSvgContent(url));
  const maxSize = 100;
  const addHeight = (maxSize / svgContent.width) * svgContent.height;
  const size = {
    width: maxSize,
    height: addHeight,
  };
  if (size.height > maxSize) {
    size.height = maxSize;
    size.width = (maxSize / svgContent.height) * svgContent.width;
  }

  const color = {
    fill: svgContent.paths[0]?.fill,
    stroke: svgContent.paths[0]?.stroke,
  };
  if (!color.fill && !color.stroke) {
    color.stroke = "#000000";
  }

  props.draw.enterDrawShape(
    "icon",
    {
      url,
      ...size,
      name,
      ...color,
      ...(item.parse || {}),
    },
    true
  );
  emit("exit");
};

const activeGroups = ref(groups.map((item) => item.name));
const keyword = ref("");
const searchGroups = computed(() => {
  return groups
    .map((typeChildren) => {
      const filterTypeChildren = typeChildren.children
        .map((type) => {
          const children = type.children.filter((item) =>
            item.name.includes(keyword.value)
          );
          return {
            ...type,
            children,
          };
        })
        .filter((type) => type.children.length > 0);
      return {
        ...typeChildren,
        children: filterTypeChildren,
      };
    })
    .filter((typeChildren) => typeChildren.children.length > 0);
});
</script>

<style lang="scss" scoped>
.icon-layout {
  width: 320px;
  height: 100%;
  background-color: var(--el-menu-bg-color);
  border-right: solid 1px var(--el-menu-border-color);
  overflow-y: auto;
  padding: 0 20px;
  font-size: 14px;
  color: #333;

  h2,
  h3 {
    font-size: inherit;
    color: inherit;
  }

  // .type-children:not(:first-child) {
  //   margin-top: 20px;
  // }
  h3 {
    margin-bottom: 20px;
  }
}

.icon-items {
  display: flex;
  flex-wrap: wrap;

  > div {
    width: 25%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    span {
      margin-top: 10px;
    }
  }
}
</style>