traffic-laser/src/views/graphic/imageLabel.vue

<template>
  <div class="graphic-child-menus">
    <div class="header">
      <ui-icon type="return" class="icon" ctrl @click="$emit('quit')" />
      <p>{{ config.title }}</p>
    </div>
    <ui-input type="text" width="100%" v-model="keyword">
      <template v-slot:preIcon>
        <ui-icon type="magnify_g" color="rgba(255,255,255,0.6)" />
      </template>
    </ui-input>

    <template v-if="typeMenus.length">
      <div v-for="typeMenu in typeMenus" :key="typeMenu.title" class="type-menu">
        <h2
          @click="showTypeMenu = showTypeMenu?.title === typeMenu.title ? null : typeMenu"
        >
          {{ typeMenu.title }}
          <ui-icon :type="showTypeMenu?.title === typeMenu.title ? 'fold' : 'unfold'" />
        </h2>
        <div class="menu-list" v-show="showTypeMenu?.title === typeMenu.title">
          <div
            v-for="menu in typeMenu.children"
            :key="menu.key"
            class="menu"
            :class="{ active: uiType.current === menu.key }"
            @click="clickHandler(menu.key)"
          >
            <ui-icon :type="menu.icon" class="icon" />
            <p>{{ menu.text }}</p>
          </div>
        </div>
      </div>
    </template>
    <div v-else class="empty-images">
      <div>
        <img src="@/assets/images/empty-label.png" />
        <p>无结果</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import UiIcon from "@/components/base/components/icon/index.vue";
import { uiType } from "@/hook/useGraphic";
import icons, {
  imageTypeKeys,
  structureTypeKeys,
} from "@/graphic/CanvasStyle/ImageLabels/SVGIcons";
import { computed, ref, watch } from "vue";
import UiInput from "@/components/base/components/input/index.vue";
import { uses } from "@/store/SVGLabel";
import { UITypeExtend } from "./menus";

const props = defineProps<{ type: string }>();
const config = computed(() =>
  props.type === UITypeExtend.image
    ? { title: "图例", data: imageTypeKeys, enableUse: true }
    : { title: "道路结构", data: structureTypeKeys, enableUse: false }
);

const typeMenusRaw = computed(() =>
  config.value.data.map(({ type, children }) => ({
    title: type,
    children: children.map((key) => ({
      key: key,
      text: icons[key].text,
      icon: key.substring(0, key.lastIndexOf(".")),
    })),
  }))
);
const keyword = ref("");
const typeMenus = computed(() => {
  const raws = typeMenusRaw.value.map((typeMenu) => ({
    ...typeMenu,
    children: typeMenu.children
      .filter((item) => item.text.includes(keyword.value))
      .sort((a, b) => a.icon.localeCompare(b.icon)),
  }));

  const items =
    keyword.value || !config.value.enableUse
      ? raws
      : [
          {
            title: "常用",
            children: uses.value
              .sort((item1, item2) => (item2.count || 0) - (item1.count || 0))
              .slice(0, 10)
              .map((item) => {
                for (let menu of typeMenusRaw.value) {
                  const findItem = menu.children.find(
                    (menuItem) => menuItem.key === item.key
                  );
                  if (findItem) {
                    return findItem;
                  }
                }
              })
              .filter((item) => !!item),
          },
          ...raws,
        ];

  return items.filter((item) => item.children.length);
});
const showTypeMenu = ref();
watch(typeMenus, () => (showTypeMenu.value = typeMenus.value[0]), { immediate: true });

const clickHandler = (key) => {
  if (config.value.enableUse) {
    const findUse = uses.value.find((use) => use.key === key);
    const lastUpdateTime = new Date().getTime();
    if (findUse) {
      findUse.count++;
      findUse.lastUpdateTime = lastUpdateTime;
    } else {
      uses.value.push({ key, count: 1, lastUpdateTime });
    }
  }
  uiType.change(key as any);
};

defineEmits<{ (e: "quit") }>();
</script>

<style lang="scss" scoped>
.graphic-child-menus {
  background-color: var(--editor-menu-back);
  position: absolute;
  top: calc(var(--editor-head-height) + var(--header-top));
  bottom: 0;
  left: calc(var(--editor-menu-left) + var(--editor-menu-width));
  padding: 16px;
  overflow-y: auto;
  width: 304px;

  .menu-list {
    display: grid;
    grid-template-columns: repeat(3, 80px);
    grid-gap: 16px;
    padding-bottom: 16px;
  }
}

.menu {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  height: 100px;
  transition: color 0.3s ease;

  //&:hover,
  &.active {
    color: var(--colors-primary-base);
  }

  &.active {
    background-color: rgba(255, 255, 255, 0.06);
  }

  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 40px;
    text-align: center;
    background: #383838;
  }
  p {
    padding: 4px;
    font-size: 12px;
    text-align: center;
  }
}

.header {
  margin-bottom: 10px;
  padding: 5px 0;
  text-align: center;
  font-size: 16px;
  position: relative;

  .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
  }
}

.type-menu {
  margin-top: 21px;
  h2 {
    margin: 16px 0;
    font-size: 16px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .icon {
      font-size: 16px;
    }
  }
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.empty-images {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: calc(100% - 80px);
  div img {
    display: block;
    width: 128px;
  }
  div p {
    margin-top: 10px;
    color: rgba(255, 255, 255, 1);
  }
}
</style>