{
  "slug": "dashboardcard",
  "end": "vue3",
  "curated": true,
  "summary": "Vue 3 数据卡片：五个纯展示 prop，趋势值直接当类名挂在数值下方。",
  "usage": [
    "trend 的取值直接当类名用（DashboardCard.vue3.vue:8 的 :class 绑 trend），传 up 得到的 class 就是 up，不是 is-up 也不是 trend-up；它由 defineProps 声明且默认 up（第 17 行）。",
    "组件是 <script setup> 加一个 defineProps，五个 prop 全是展示数据，没有 emit、没有插槽，也没有内部状态。",
    "icon 的默认值 📊 写在 defineProps 声明里（第 16 行），以文本节点渲染，不经过图标组件或 SVG sprite。",
    "value 在 defineProps 里声明为 String 或 Number（第 15 行），组件不做千分位、单位或小数位处理，格式化要在传进来之前做完。",
    "卡片结构固定为标题加图标一行、数值一行、趋势一行（第 3-8 行），组件不提供具名插槽，要加副标题只能在外面包一层。"
  ],
  "bestPractices": [
    "trend 只负责挂类名，样式表里若没有对应的 up/down 规则，涨跌颜色不会出现，拼错值会静默变成无样式类名。",
    "五个 prop 都带默认值（icon 是 📊，其余空串），漏传不报错但会渲染出空标题与空数值，容易被当成布局错位排查。",
    "trendText 与 trend 是两件事：前者是显示的文案，后者只用来挂类，要显示较昨日涨 12% 得自己拼进 trendText。"
  ],
  "a11y": [
    "涨跌只用类名表达颜色，没有文字说明或 ARIA 状态；只给一个箭头字符时读屏器会念成符号，建议 trendText 里同时写清上升或下降。",
    "结构是 div 堆叠，读屏器按顺序念标题、数值、趋势，没有标题层级也没有分组标记，一屏多张卡片时难以分辨归属。",
    "图标是文本 emoji，读屏器会念出图标名，纯装饰时它反而干扰了对标题的首个播报内容。"
  ],
  "apiCarrier": {
    "kind": "props",
    "note": "Vue 3 端载体是 defineProps 声明的五个展示型 prop（title / value / icon / trend / trendText）；其中 trend 的值还会作为类名落到 .kole-dashcard-trend 上（frameworks/DashboardCard.vue3.vue:8,13-19）。",
    "table": [
      {
        "name": "icon",
        "type": "String",
        "desc": "图标（frameworks/DashboardCard.vue3.vue:5）"
      },
      {
        "name": "title",
        "type": "String",
        "desc": "标题（frameworks/DashboardCard.vue3.vue:4）"
      },
      {
        "name": "trend",
        "type": "String",
        "desc": "趋势值（frameworks/DashboardCard.vue3.vue:8）"
      },
      {
        "name": "trendText",
        "type": "String",
        "desc": "趋势文案（frameworks/DashboardCard.vue3.vue:8）"
      },
      {
        "name": "value",
        "type": "String | Number",
        "desc": "绑定值（frameworks/DashboardCard.vue3.vue:7）"
      }
    ]
  },
  "resources": [
    {
      "file": "frameworks/DashboardCard.vue3.vue",
      "kind": "Vue 3",
      "desc": "该端实现（本页 API 与用法的唯一权威来源）。"
    },
    {
      "file": "frameworks/DashboardCard.css",
      "kind": "样式",
      "desc": "该组件的样式文件，类名口径以它为准。"
    }
  ],
  "exampleIds": [
    "dashboardcard-ex-1",
    "dashboardcard-ex-2"
  ],
  "notes": [
    "props 声明见 frameworks/DashboardCard.vue3.vue:13-19，value 在第 15 行接受 String 或 Number，icon 默认值在第 16 行。",
    "trend 作为类名绑定见 frameworks/DashboardCard.vue3.vue:8，卡片三段结构见 frameworks/DashboardCard.vue3.vue:3-8。",
    "实现里没有 defineEmits 与 slot（facts.consumedApi 的 emits 与 slots 均为空），故本页不写事件与插槽。",
    "契约声明的驱动维度 action / layout 属设计词汇层，未作为 prop 写入本页。"
  ]
}