fuse-code/src/views/setting/select-back.vue

<template>
  <div class="back-layout">
    <template v-for="back in backs" :key="back.value">
      <div v-if="back.children" class="child-layout-parent">
        <Dropdown placement="bottom">
          <div class="child-layout" :class="{ active: activeParent === back.value }">
            <ui-icon type="menu" />
            <BackItem
              :type="back.type"
              :label="back.label"
              :url="back.image"
              :active="activeParent === back.value"
            />
          </div>
          <template #overlay>
            <Menu
              :selectedKeys="[value]"
              :default-active="value[1]?.toString()"
              active-text-color="#ffd04b"
            >
              <MenuItem
                v-for="item in back.children"
                @click="
                  value[1] !== item.value && $emit('update:value', [null, item.value])
                "
                :index="item.value.toString()"
              >
                <span
                  :style="{
                    color:
                      value[1] === item.value ? 'var(--colors-primary-base) ' : '#fff',
                  }"
                  >{{ item.label }}</span
                >
              </MenuItem>
            </Menu>
          </template>
        </Dropdown>
      </div>
      <BackItem
        v-else
        :type="back.type"
        :label="back.label"
        :url="back.image"
        :active="value[0] === back.value"
        @click="value[0] !== back.value && $emit('update:value', [back.value, null])"
      />
    </template>
  </div>
</template>

<script lang="ts" setup>
import { Dropdown, MenuItem, Menu } from "ant-design-vue";
import { computed, ref } from "vue";
import BackItem from "./back-item.vue";
import { fetchMapTiles } from "@/api/map-tile";
import { sysTiles } from "@/store";

const props = defineProps<{
  value: [string | null | undefined, number | null | undefined];
}>();
defineEmits<{
  (e: "update:value", value: [string | null, number | null]): void;
}>();

const backs = computed(() => [
  { label: "无", type: "icon", image: "icon-without", value: "none" },
  {
    label: "地图",
    type: "map",
    image: "https://4dkk.4dage.com/fusion/default/images/map.png",
    value: "dt",
    children: sysTiles.value.map((t) => ({ label: t.name, value: t.id })),
  },
  {
    label: "蓝天白云",
    type: "img",
    image: "https://4dkk.4dage.com/fusion/default/images/pic_ltby@2x.png",
    value: "https://4dkk.4dage.com/fusion/default/images/蓝天白云.jpg",
  },
  {
    label: "乌云密布",
    type: "img",
    image: "https://4dkk.4dage.com/fusion/default/images/pic_wymb@2x.png",
    value: "https://4dkk.4dage.com/fusion/default/images/乌云密布.jpg",
  },
  {
    label: "夜空",
    type: "img",
    image: "https://4dkk.4dage.com/fusion/default/images/pic_yk@2x.png",
    value: "https://4dkk.4dage.com/fusion/default/images/夜空.jpg",
  },
  {
    label: "傍晚",
    type: "img",
    image: "https://4dkk.4dage.com/fusion/default/images/pic_bw@2x.png",
    value: "https://4dkk.4dage.com/fusion/default/images/傍晚.jpg",
  },
]);

const activeParent = computed(() => {
  for (const back of backs.value) {
    if (back.value === props.value[0]) {
      return back.value;
    } else if (back.children) {
      for (const c of back.children) {
        if (c.value === props.value[1]) {
          return back.value;
        }
      }
    }
  }
});
</script>
<style lang="scss" scoped>
.back-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.child-layout-parent {
  position: relative;
}
.child-layout {
  position: absolute;
  top: 0;
  left: 0;
  height: 88px;
  > .icon {
    position: absolute;
    font-size: 22px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  &::after {
    content: "";
    position: absolute;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
    inset: 0;
    border-radius: 4px;
    cursor: pointer;
  }
  &.active::after {
    inset: 0px;
  }
}
</style>