<template>
  <div class="h-full space-y-5">
    <div>
      <div class="mb-2 text-xs tracking-wide text-muted-foreground">常用入口</div>
      <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
        <button
          v-for="(item, index) in shortcuts"
          :key="index"
          class="group flex w-full items-center gap-3 rounded-lg border border-black/10 bg-white/70 p-2.5 text-left transition-all duration-200 hover:border-[var(--el-color-primary)] hover:shadow-sm dark:border-white/10 dark:bg-white/[0.02]"
          type="button"
          @click="toPath(item)"
        >
          <span
            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-base-text transition-colors group-hover:bg-[var(--el-color-primary)] group-hover:text-white"
          >
            <el-icon><component :is="item.icon" /></el-icon>
          </span>
          <span class="min-w-0 text-sm text-base-text">{{ item.title }}</span>
        </button>
      </div>
    </div>

  </div>
</template>

<script setup>
  import {
    Menu,
    Link,
    User,
    Service,
    Bell,
    Message
  } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()

  const toPath = (item) => {
    router.push({ name: item.path })
  }

  const shortcuts = [
    { icon: Menu, title: '菜单管理', path: 'menu' },
    { icon: Link, title: 'API管理', path: 'api' },
    { icon: Service, title: '角色管理', path: 'authority' },
    { icon: User, title: '用户管理', path: 'user' },
    { icon: Bell, title: '公告管理', path: 'anInfo' },
    { icon: Message, title: '邮件发送', path: 'email' }
  ]
</script>

<style scoped lang="scss"></style>
