feat: add report charts and drilldowns

This commit is contained in:
2026-01-15 10:27:03 +08:00
parent 235a216b0c
commit d66b9f2dfa
4 changed files with 368 additions and 49 deletions

View File

@@ -14,7 +14,15 @@ const props = defineProps({
<template>
<div :class="props.containerClass">
<div class="flex flex-wrap items-center justify-between gap-6">
<div v-for="(item, idx) in props.items" :key="item.key ?? idx" class="flex items-center gap-4 flex-1 min-w-[220px]">
<component
:is="item.onClick ? 'button' : 'div'"
v-for="(item, idx) in props.items"
:key="item.key ?? idx"
class="flex items-center gap-4 flex-1 min-w-[220px] text-left"
:class="item.onClick ? 'cursor-pointer transition-colors hover:bg-surface-100 dark:hover:bg-surface-800 rounded-lg p-2 -m-2 border-0 bg-transparent' : ''"
:type="item.onClick ? 'button' : undefined"
@click="item.onClick && item.onClick()"
>
<div class="w-12 h-12 rounded-full flex items-center justify-center bg-surface-100 dark:bg-surface-800">
<i class="pi text-primary text-xl" :class="item.icon" />
</div>
@@ -23,7 +31,7 @@ const props = defineProps({
<span class="text-surface-900 dark:text-surface-0 text-xl font-semibold" :class="item.valueClass">{{ item.value }}</span>
</div>
<div v-if="idx !== props.items.length - 1" class="hidden xl:block w-px self-stretch bg-surface-200 dark:bg-surface-700 ml-auto"></div>
</div>
</component>
</div>
</div>
</template>