AppCard 增强卡片

增强型卡片组件，支持可配置阴影、圆角、悬停效果、玻璃态背景。提供 header、actions、default、footer 四个插槽。

基本用法

<template>
  <AppCard title="用户管理" icon="i-carbon-user" tag="NEW" tag-type="info">
    <p>卡片内容</p>

    <template #actions>
      <n-button size="small">操作</n-button>
    </template>

    <template #footer>
      <span>底部信息</span>
    </template>
  </AppCard>
</template>

<script setup>
import { AppCard } from '@/components/common'
</script>

带玻璃态和阴影

<AppCard
  title="数据面板"
  glass
  shadow="xl"
  radius="lg"
  hover
>
  <p>Glassmorphism 风格卡片</p>
</AppCard>

Props

属性	类型	默认值	说明
title	String	—	卡片标题，设置后显示标题栏
icon	String	—	标题旁边显示的图标 CSS 类名
tag	String	—	标题栏小型标签文本
tagType	String	'default'	标签 Naive UI 类型，如 info、success、error
bordered	Boolean	true	是否显示边框
hover	Boolean	false	启用悬停阴影加深效果
glass	Boolean	false	启用玻璃态背景（backdrop-filter: blur）
shadow	String	'md'	阴影级别：none、xs、sm、md、lg、xl、2xl
radius	String	'lg'	圆角级别：none、sm、md、lg、xl、2xl、full
padding	Boolean	true	是否对 body 区域应用默认内边距

Slots

插槽名	说明
header	自定义完整头部区域（替换默认标题+图标+标签行）
actions	头部右侧操作按钮区域
default	卡片主体内容
footer	卡片底部固定区域（带顶部边框分隔线）