<template>
  <div class="kole-quicknav">
    <div
      v-for="(it, i) in items"
      :key="i"
      class="kole-quicknav-item"
      @click="emit('select', it)"
    >
      <div class="kole-quicknav-icon">{{ it.icon }}</div>
      <div class="kole-quicknav-label">{{ it.label }}</div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  items: {
    type: Array,
    default: () => [
      { icon: '📊', label: '数据看板' },
      { icon: '👥', label: '用户管理' },
      { icon: '📦', label: '订单管理' },
      { icon: '⚙️', label: '系统设置' },
      { icon: '📝', label: '审批中心' },
      { icon: '🔔', label: '消息通知' },
      { icon: '📁', label: '文件中心' },
      { icon: '🛡️', label: '权限管理' }
    ]
  }
});
const emit = defineEmits(['select']);
</script>

<style src="./QuickNav.css"></style>
