aurora-admin/site/examples/dashboardcard.json

{
 "slug": "dashboardcard",
 "mode": "scenarios",
 "curated": true,
 "examples": [
  {
   "id": "dashboardcard-ex-1",
   "title": "仪表板卡片 DashboardCard 示例 1",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-dashcard\">\n  <div class=\"kole-dashcard-head\">\n    <span class=\"kole-dashcard-title\">今日订单</span>\n    <span class=\"kole-dashcard-icon\">📦</span>\n  </div>\n  <div class=\"kole-dashcard-value\">1,284</div>\n  <div class=\"kole-dashcard-trend up\">↑ 12.5% 较昨日</div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [
     [
      1
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-dashcard\">\n  <div class=\"kole-dashcard-head\">\n    <span class=\"kole-dashcard-title\">今日订单</span>\n    <span class=\"kole-dashcard-icon\">📦</span>\n  </div>\n  <div class=\"kole-dashcard-value\">1,284</div>\n  <div class=\"kole-dashcard-trend up\">↑ 12.5% 较昨日</div>\n</div>",
    "jsx": "import { KoleDashboardCard } from 'kole-ui/react';\n\n<KoleDashboardCard\n  title=\"今日订单\"\n  value=\"1,284\"\n  icon=\"📦\"\n  trend=\"up\"\n  trendText=\"↑ 12.5% 较昨日\"\n/>",
    "vue3": "<template>\n  <KoleDashboardCard title=\"今日订单\" value=\"1,284\" icon=\"📦\" trend=\"up\" trend-text=\"↑ 12.5% 较昨日\" />\n</template>\n\n<script setup>\nimport { KoleDashboardCard } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <KoleDashboardCard title=\"今日订单\" value=\"1,284\" icon=\"📦\" trend=\"up\" trend-text=\"↑ 12.5% 较昨日\" />\n</template>\n\n<script>\nimport { KoleDashboardCard } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleDashboardCard },\n};\n</script>",
    "tsx": "import { KoleDashboardCard } from 'kole-ui/react';\n\nexport default function KoleDashboardCardDemo(): JSX.Element {\n  return (\n    <KoleDashboardCard\n      title=\"今日订单\"\n      value=\"1,284\"\n      icon=\"📦\"\n      trend=\"up\"\n      trendText=\"↑ 12.5% 较昨日\"\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleDashboardCard title=\"今日订单\" value=\"1,284\" icon=\"📦\" trend=\"up\" trend-text=\"↑ 12.5% 较昨日\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleDashboardCard } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('仪表板卡片 DashboardCard 示例 1');\n\n</script>",
    "vue2ts": "<template>\n\n  <KoleDashboardCard title=\"今日订单\" value=\"1,284\" icon=\"📦\" trend=\"up\" trend-text=\"↑ 12.5% 较昨日\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDashboardCard } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleDashboardCard },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/DashboardCard.html:12-16 第一张卡（今日订单 / 📦 / 1,284 / up「↑ 12.5% 较昨日」）；prop 取 frameworks/DashboardCard.jsx:4 的 title/value/icon/trend/trendText"
   ]
  },
  {
   "id": "dashboardcard-ex-2",
   "title": "仪表板卡片 DashboardCard 示例 2",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-dashcard\">\n  <div class=\"kole-dashcard-head\">\n    <span class=\"kole-dashcard-title\">退款率</span>\n    <span class=\"kole-dashcard-icon\">↩️</span>\n  </div>\n  <div class=\"kole-dashcard-value\">2.3%</div>\n  <div class=\"kole-dashcard-trend down\">↑ 0.4% 需关注</div>\n</div>",
   "preview": {
    "show": [
     [
      1
     ]
    ],
    "hide": [
     [
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-dashcard\">\n  <div class=\"kole-dashcard-head\">\n    <span class=\"kole-dashcard-title\">退款率</span>\n    <span class=\"kole-dashcard-icon\">↩️</span>\n  </div>\n  <div class=\"kole-dashcard-value\">2.3%</div>\n  <div class=\"kole-dashcard-trend down\">↑ 0.4% 需关注</div>\n</div>",
    "jsx": "import { KoleDashboardCard } from 'kole-ui/react';\n\nconst METRIC = { title: '退款率', value: '2.3%', icon: '↩️', trend: 'down', trendText: '↑ 0.4% 需关注' };\n\nexport default function Demo() {\n  return (\n    <KoleDashboardCard\n      title={METRIC.title}\n      value={METRIC.value}\n      icon={METRIC.icon}\n      trend={METRIC.trend}\n      trendText={METRIC.trendText}\n    />\n  );\n}",
    "vue3": "<template>\n  <KoleDashboardCard\n    :title=\"metric.title\"\n    :value=\"metric.value\"\n    :icon=\"metric.icon\"\n    :trend=\"metric.trend\"\n    :trend-text=\"metric.trendText\"\n  />\n</template>\n\n<script setup>\nimport { KoleDashboardCard } from 'kole-ui/vue3';\n\nconst metric = { title: '退款率', value: '2.3%', icon: '↩️', trend: 'down', trendText: '↑ 0.4% 需关注' };\n</script>",
    "vue2": "<template>\n  <KoleDashboardCard\n    :title=\"metric.title\"\n    :value=\"metric.value\"\n    :icon=\"metric.icon\"\n    :trend=\"metric.trend\"\n    :trend-text=\"metric.trendText\"\n  />\n</template>\n\n<script>\nimport { KoleDashboardCard } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleDashboardCard },\n  data() {\n    return {\n      metric: { title: '退款率', value: '2.3%', icon: '↩️', trend: 'down', trendText: '↑ 0.4% 需关注' },\n    };\n  },\n};\n</script>",
    "tsx": "import { KoleDashboardCard } from 'kole-ui/react';\n\nconst METRIC = { title: '退款率', value: '2.3%', icon: '↩️', trend: 'down', trendText: '↑ 0.4% 需关注' };\n\nexport default function Demo(): JSX.Element {\n  return (\n    <KoleDashboardCard\n      title={METRIC.title}\n      value={METRIC.value}\n      icon={METRIC.icon}\n      trend={METRIC.trend}\n      trendText={METRIC.trendText}\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleDashboardCard\n    :title=\"metric.title\"\n    :value=\"metric.value\"\n    :icon=\"metric.icon\"\n    :trend=\"metric.trend\"\n    :trend-text=\"metric.trendText\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleDashboardCard } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('仪表板卡片 DashboardCard 示例 2');\nconst metric = { title: '退款率', value: '2.3%', icon: '↩️', trend: 'down', trendText: '↑ 0.4% 需关注' };\n</script>",
    "vue2ts": "<template>\n\n  <KoleDashboardCard\n    :title=\"metric.title\"\n    :value=\"metric.value\"\n    :icon=\"metric.icon\"\n    :trend=\"metric.trend\"\n    :trend-text=\"metric.trendText\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDashboardCard } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleDashboardCard },\n  data(): Record<string, unknown> {\n    return {\n      metric: { title: '退款率', value: '2.3%', icon: '↩️', trend: 'down', trendText: '↑ 0.4% 需关注' },\n    };\n  },\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/DashboardCard.html:17-21 第二张卡（退款率 / ↩️ / 2.3% / down「↑ 0.4% 需关注」）；trend=down 渲染为 .kole-dashcard-trend down（DashboardCard.jsx:12），数值改用对象绑定以展示 String|Number 型 value"
   ]
  }
 ]
}