<!--
 * @Date: 2026-01-28 16:57:21
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-01-28 16:57:41
 * @FilePath: /mlaj/src/components/welcome/WelcomeEntryItem.vue
 * @Description: 欢迎页入口项组件
-->
<template>
  <div
    class="entry-item"
    :class="{ 'is-external': entry.isExternal }"
    @click="handleClick"
  >
    <div class="entry-icon-wrapper">
      <img
        :src="entry.icon"
        :alt="entry.title"
        class="entry-icon"
      />
    </div>
    <div class="entry-title">{{ entry.title }}</div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  entry: {
    type: Object,
    required: true,
    validator: (value) => {
      return value.id && value.title && value.icon && value.route
    }
  }
})

const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click', props.entry)
}
</script>

<style lang="less" scoped>
.entry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
  }

  &.is-external {
    // 外部链接的特殊样式（如果需要）
  }

  .entry-icon-wrapper {
    position: relative;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    .entry-icon {
      width: 5rem;
      height: 5rem;
      object-fit: contain;
    }
  }

  .entry-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
  }
}
</style>