ln-web/src/components/furnitureItem/index.vue

<template>
  <div class="furnitureItem">
    <furniture-icon :icon="props.icon" :width="width" :height="height" />
    <div class="contant">
      <span class="text">{{ furnitureIconNameMap[props.icon] }}</span>
      <div class="action" @click="addHandler">
        <slot name="action">
          <PlusCircleOutlined />
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { FurnitureIconType } from '@/types/furniture'
import { furnitureIconNameMap } from '@/const/furniture'
import { PlusCircleOutlined } from '@ant-design/icons-vue'

defineOptions({
  name: 'FurnitureItem',
})

type Props = {
  icon: FurnitureIconType
  width?: number
  height?: number
}

const emit = defineEmits<{
  (e: 'add', icon: FurnitureIconType): void
}>()
const props = withDefaults(defineProps<Props>(), {
  icon: 'bed',
  width: 30,
  height: 30,
})

const addHandler = () => {
  emit('add', props.icon)
}
</script>

<style scoped lang="less">
.furnitureItem {
  display: flex;
  align-items: center;
  padding: 5px;
  .text {
    font-size: 14px;
    user-select: none;
  }

  .contant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 8px;

    .action {
      cursor: pointer;
      font-size: 16px;
      transition: color 0.2s;
    }
  }
  .contant:hover {
    color: #1890ff;
    .action:hover {
      color: green;
    }
  }
  &:hover {
    box-shadow: 0 4px 12px rgba(220, 220, 220, 0.7);
    box-sizing: border-box;
    border-radius: 5px;
  }
}
</style>