@liujitcn/kratos-admin-bi 0.0.0-stage → 0.1.6

package/dist/package/src/components/BiCardFormDialog.vue

@@ -0,0 +1,289 @@
+<template>
+  <FormDialog
+    ref="dialogRef"
+    :model-value="modelValue"
+    :title="card ? t('bi.card.edit') : t('bi.card.create')"
+    width="min(1040px, 94vw)"
+    label-width="7em"
+    :model="form"
+    :fields="fields"
+    :rules="rules"
+    :confirm-loading="saving"
+    :close-on-click-modal="!saving"
+    :form-props="{ disabled: saving }"
+    @update:model-value="emit('update:modelValue', $event)"
+    @confirm="submit"
+    :destroy-on-close="true"
+    @closed="reset"
+  >
+    <template #measures>
+      <div class="bi-card-measures">
+        <div v-for="(measure, index) in form.measures" :key="index" class="bi-card-measures__row">
+          <el-select disabled v-model="measure.code" :aria-label="t('bi.card.measure')">
+            <el-option v-for="item in source?.measures ?? []" :key="item.code" :label="item.name" :value="item.code" />
+          </el-select>
+          <el-select disabled v-model="measure.aggregation" :aria-label="t('bi.card.aggregation')">
+            <el-option
+              v-for="aggregation in source?.measures.find(item => item.code === measure.code)?.aggregations ?? []"
+              :key="aggregation"
+              :label="t(`bi.card.aggregation.${aggregation}`)"
+              :value="aggregation"
+            />
+          </el-select>
+        </div>
+      </div>
+    </template>
+    <template #chart>
+      <BiCardChartEditor v-model="chartConfig" v-model:chart-type="form.chart_type" :query="query" :result="previewResult" />
+    </template>
+    <template #preview>
+      <BiDataCard v-if="previewResult" :card="previewCard" :preview-result="previewResult" :source-name="source?.name" />
+      <el-empty v-else :image-size="36" :description="t('bi.card.preview_empty')" />
+    </template>
+    <template #footer>
+      <el-button :disabled="saving" @click="emit('update:modelValue', false)">{{ t("common.action.cancel") }}</el-button>
+      <el-button :loading="previewing" :disabled="saving" @click="preview">{{ t("bi.card.preview") }}</el-button>
+      <el-button type="primary" :loading="saving" @click="submit">{{ t("bi.card.save") }}</el-button>
+    </template>
+  </FormDialog>
+</template>
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue";
+import { t } from "@liujitcn/kratos-admin-core";
+import FormDialog from "@liujitcn/kratos-admin-core/components/Dialog/FormDialog.vue";
+import type { ProFormField } from "@liujitcn/kratos-admin-core/components/ProForm/interface";
+import type { BiCard } from "../rpc/bi/admin/v1/bi_card";
+import type { BiMeasureSpec, BiQueryResult, BiQuerySpec, BiSourceDescriptor } from "../rpc/bi/admin/v1/bi_query";
+import { defBiCardService } from "../api/bi/admin/v1/bi_card";
+import { defBiQueryService } from "../api/bi/admin/v1/bi_query";
+import BiDataCard from "./BiDataCard.vue";
+import BiCardChartEditor from "./BiCardChartEditor.vue";
+import { parseCardChart } from "../card-schema";
+import type { CardChartConfig } from "../card-schema";
+
+/** 卡片编辑状态，查询条件沿用原语义计划。 */
+interface BiCardEditState {
+  name: string;
+  source_code: string;
+  dimensions: string[];
+  measures: BiMeasureSpec[];
+  chart_type: string;
+  refresh_seconds: number;
+  is_shared: boolean;
+}
+
+const props = defineProps<{
+  modelValue: boolean;
+  sources: BiSourceDescriptor[];
+  card?: BiCard;
+  initialQuery?: BiQuerySpec;
+  initialResult?: BiQueryResult;
+  initialTitle?: string;
+  initialChartType?: string;
+}>();
+const emit = defineEmits<{ "update:modelValue": [value: boolean]; saved: [card: BiCard] }>();
+const dialogRef = ref<InstanceType<typeof FormDialog>>();
+const form = reactive<BiCardEditState>(defaultForm());
+const baseQuery = ref<BiQuerySpec>();
+const previewResult = ref<BiQueryResult>();
+const sourceRecordID = ref(0);
+const chartConfig = ref<CardChartConfig>({ encoding: {}, style: { showLegend: true, showLabel: false } });
+const saving = ref(false);
+const previewing = ref(false);
+let previewRequest = 0;
+const source = computed(() => props.sources.find(item => item.code === form.source_code));
+const query = computed<BiQuerySpec>(() => ({
+  source_code: form.source_code,
+  dimensions: [...form.dimensions],
+  measures: form.measures.map(item => ({ ...item })),
+  filters: baseQuery.value?.filters ?? [],
+  limit: baseQuery.value?.limit || 100,
+  time_range: baseQuery.value?.time_range,
+  orders: baseQuery.value?.orders ?? []
+}));
+const previewCard = computed<BiCard>(() => ({
+  id: 0,
+  tenant_id: 0,
+  project_id: 0,
+  owner_id: 0,
+  name: form.name,
+  source_code: form.source_code,
+  query: query.value,
+  chart_type: form.chart_type,
+  chart_json: JSON.stringify(chartConfig.value),
+  query_record_id: sourceRecordID.value,
+  refresh_seconds: form.refresh_seconds,
+  is_shared: form.is_shared,
+  updated_at: "",
+  category: "mine",
+  can_edit: true
+}));
+const fields = computed<ProFormField[]>(() => [
+  { prop: "name", label: t("bi.card.name"), component: "input", colSpan: 12, props: { maxlength: 128 } },
+  {
+    prop: "source_code",
+    label: t("bi.card.source"),
+    component: "select",
+    colSpan: 12,
+    options: props.sources.map(item => ({ label: item.name, value: item.code })),
+    props: { disabled: true }
+  },
+  {
+    prop: "dimensions",
+    label: t("bi.card.dimensions"),
+    component: "select",
+    colSpan: 12,
+    options: (source.value?.dimensions ?? []).map(item => ({ label: item.name, value: item.code })),
+    props: {
+      multiple: true,
+      multipleLimit: 2,
+      disabled: true
+    }
+  },
+  { prop: "measures", label: t("bi.card.measure"), component: "slot", slotName: "measures", colSpan: 12 },
+  { prop: "chart", label: t("bi.card.chart_type"), component: "slot", slotName: "chart", colSpan: 12 },
+  { prop: "preview", label: t("bi.card.preview"), component: "slot", slotName: "preview", colSpan: 12 },
+  {
+    prop: "refresh_seconds",
+    label: t("bi.card.refresh"),
+    component: "select",
+    colSpan: 12,
+    options: [0, 300, 86400].map(value => ({ label: t(`bi.card.refresh.${value}`), value }))
+  },
+  { prop: "is_shared", label: t("bi.card.share"), component: "switch", colSpan: 12 }
+]);
+const rules = computed(() => ({
+  name: [{ required: true, whitespace: true, message: t("bi.card.validation.name"), trigger: "blur" }],
+  source_code: [{ required: true, message: t("bi.card.validation.source"), trigger: "change" }],
+  measures: [{ type: "array" as const, required: true, min: 1, message: t("bi.card.validation.measures"), trigger: "change" }]
+}));
+
+/** 创建独立表单状态，关闭后不保留上次卡片。 */
+function defaultForm(): BiCardEditState {
+  return {
+    name: "",
+    source_code: "",
+    dimensions: [],
+    measures: [],
+    chart_type: "bar",
+    refresh_seconds: 0,
+    is_shared: false
+  };
+}
+
+/** 打开弹窗时复制原查询，保留问数生成的过滤、排序和时间范围。 */
+watch(
+  () => props.modelValue,
+  visible => {
+    if (!visible) return;
+    const current = props.card?.query ?? props.initialQuery;
+    baseQuery.value = current ? (JSON.parse(JSON.stringify(current)) as BiQuerySpec) : undefined;
+    Object.assign(form, defaultForm(), {
+      name: props.card?.name ?? props.initialTitle ?? "",
+      source_code: current?.source_code || props.sources[0]?.code || "",
+      dimensions: [...(current?.dimensions ?? [])],
+      measures: (current?.measures ?? []).map(item => ({ ...item })),
+      chart_type: props.card?.chart_type || (current && !current.dimensions.length ? "metric" : props.initialChartType || "bar"),
+      refresh_seconds: props.card?.refresh_seconds ?? 0,
+      is_shared: props.card?.is_shared ?? false
+    });
+    previewResult.value = props.initialResult;
+    sourceRecordID.value = props.card?.query_record_id || props.initialResult?.query_record_id || 0;
+    chartConfig.value = parseCardChart(props.card ?? { chart_json: "" });
+  }
+);
+watch(
+  query,
+  () => {
+    previewRequest++;
+    previewResult.value = undefined;
+    sourceRecordID.value = 0;
+    chartConfig.value = { encoding: {}, style: { ...chartConfig.value.style } };
+  },
+  { deep: true, flush: "sync" }
+);
+
+/** 预览当前语义配置，忽略配置变化前的迟到响应。 */
+async function preview() {
+  if (!(await dialogRef.value?.validate()) || previewing.value) return;
+  if (!sourceRecordID.value) {
+    ElMessage.warning(t("bi.card.ask_required"));
+    return;
+  }
+  const request = ++previewRequest;
+  previewing.value = true;
+  try {
+    const result = await defBiQueryService.PreviewBiQuery({ query: query.value });
+    if (request === previewRequest) {
+      previewResult.value = result;
+    }
+  } catch (cause) {
+    ElMessage.error(cause instanceof Error ? cause.message : t("bi.query.error"));
+  } finally {
+    previewing.value = false;
+  }
+}
+
+/** 仅保存与原始智能问数关联的卡片，图表编辑不改变查询定义。 */
+async function submit() {
+  if (!(await dialogRef.value?.validate()) || saving.value || previewing.value) return;
+  if (!sourceRecordID.value) {
+    ElMessage.warning(t("bi.card.ask_required"));
+    return;
+  }
+  if (!previewResult.value) await preview();
+  if (!previewResult.value || !sourceRecordID.value) return;
+  saving.value = true;
+  try {
+    const saved = await defBiCardService.SaveBiCard({
+      id: props.card?.id ?? 0,
+      card: {
+        name: form.name,
+        query: query.value,
+        chart_type: form.chart_type,
+        chart_json: JSON.stringify(chartConfig.value),
+        query_record_id: sourceRecordID.value,
+        refresh_seconds: form.refresh_seconds,
+        is_shared: form.is_shared
+      }
+    });
+    emit("saved", saved);
+    emit("update:modelValue", false);
+    ElMessage.success(t("bi.card.saved"));
+  } catch (cause) {
+    ElMessage.error(cause instanceof Error ? cause.message : t("bi.card.save_failed"));
+  } finally {
+    saving.value = false;
+  }
+}
+
+/** 关闭弹窗后清空表单、预览与校验状态。 */
+function reset() {
+  previewRequest++;
+  baseQuery.value = undefined;
+  Object.assign(form, defaultForm());
+  previewResult.value = undefined;
+  sourceRecordID.value = 0;
+  chartConfig.value = { encoding: {}, style: { showLegend: true, showLabel: false } };
+  dialogRef.value?.clearValidate();
+}
+</script>
+
+<style scoped>
+.bi-card-measures {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 8px;
+}
+.bi-card-measures__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(90px, 0.65fr) auto;
+  gap: 8px;
+}
+@media (max-width: 480px) {
+  .bi-card-measures__row {
+    grid-template-columns: minmax(0, 1fr) 90px auto;
+  }
+}
+</style>

package/dist/package/src/components/BiCardLibrary.vue

@@ -0,0 +1,310 @@
+<template>
+  <main class="bi-card-library">
+    <el-card class="admin-page-card" shadow="never">
+      <el-tabs v-model="category" @tab-change="search">
+        <el-tab-pane v-for="item in categories" :key="item" :name="item">
+          <template #label>
+            <span>{{ t(`bi.card.category.${item || "all"}`) }}</span>
+            <small class="bi-card-library__count">{{ counts[item || "all"] }}</small>
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+      <div class="bi-card-library__filters">
+        <el-input v-model="name" :placeholder="t('bi.card.search')" clearable @keyup.enter="search" @clear="search" />
+        <el-select v-model="sourceCode" :placeholder="t('bi.card.all_sources')" clearable @change="search">
+          <el-option v-for="item in sources" :key="item.code" :label="item.name" :value="item.code" />
+        </el-select>
+        <el-button type="primary" :icon="icons.Search" :loading="loading" @click="search">{{
+          t("common.action.search")
+        }}</el-button>
+        <span>{{ t("bi.card.total", { count: total }) }}</span>
+      </div>
+    </el-card>
+    <el-skeleton v-if="loading" :rows="6" animated /><el-empty v-else-if="!cards.length" :description="t('bi.card.empty')" />
+    <div v-else class="bi-card-library__grid">
+      <BiDataCard
+        v-for="card in cards"
+        :key="card.id"
+        :card="card"
+        :source-name="sources.find(item => item.code === card.source_code)?.name || card.source_code"
+        ><template #actions>
+          <el-tooltip :content="t(workbench.favorite_ids.includes(card.id) ? 'bi.card.unfavorite' : 'bi.card.favorite', { name: card.name })">
+            <el-button
+              text
+              circle
+              :type="workbench.favorite_ids.includes(card.id) ? 'warning' : 'default'"
+              :icon="workbench.favorite_ids.includes(card.id) ? icons.StarFilled : icons.Star"
+              :aria-label="t(workbench.favorite_ids.includes(card.id) ? 'bi.card.unfavorite' : 'bi.card.favorite', { name: card.name })"
+              :aria-pressed="workbench.favorite_ids.includes(card.id)"
+              @click="toggleFavorite(card)"
+            />
+          </el-tooltip>
+        </template
+        ><template #footer
+          ><div>
+            <el-button link type="primary" @click="previewCard = card">{{ t("bi.card.preview") }}</el-button
+            ><el-button v-if="card.can_edit" link @click="openEditor(card)">{{ t("common.action.edit") }}</el-button
+            ><el-button v-if="card.can_edit" link type="danger" @click="remove(card)">{{ t("common.action.delete") }}</el-button>
+          </div>
+          <el-button size="small" type="primary" @click="pickDashboard(card)">{{ t("bi.card.add_to_dashboard") }}</el-button
+          ><el-button
+            v-if="card.query_record_id"
+            link
+            :disabled="!card.can_edit"
+            @click="router.push({ path: '/bi/query', query: { record_id: String(card.query_record_id) } })"
+            >{{ t("bi.card.source_record", { id: card.query_record_id }) }}</el-button
+          ></template
+        ></BiDataCard
+      >
+    </div>
+    <el-pagination
+      v-if="total > 100"
+      v-model:current-page="page"
+      :page-size="100"
+      :total="total"
+      layout="prev,pager,next"
+      @current-change="loadCards"
+    /><BiCardFormDialog v-model="editorOpen" :sources="sources" :card="editingCard" @saved="reload" /><el-dialog
+      :model-value="Boolean(previewCard)"
+      :title="t('bi.card.preview')"
+      width="min(760px,94vw)"
+      destroy-on-close
+      @close="previewCard = undefined"
+      ><BiDataCard
+        v-if="previewCard"
+        :card="previewCard"
+        :source-name="sources.find(item => item.code === previewCard?.source_code)?.name || previewCard.source_code" /></el-dialog
+    ><FormDialog
+      v-model="dashboardOpen"
+      :model="target"
+      :title="t('bi.card.add_to_dashboard')"
+      :fields="dashboardFields"
+      :rules="{ id: [{ required: true, message: t('bi.card.select_dashboard'), trigger: 'change' }] }"
+      :confirm-loading="saving"
+      @confirm="addToDashboard"
+      @closed="target.id = undefined"
+    />
+  </main>
+</template>
+<script setup lang="ts">
+import { computed, onMounted, onActivated, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import { t } from "@liujitcn/kratos-admin-core";
+import FormDialog from "@liujitcn/kratos-admin-core/components/Dialog/FormDialog.vue";
+import type { ProFormField } from "@liujitcn/kratos-admin-core/components/ProForm/interface";
+import type { BiCard, BiCardCounts, BiWorkbench } from "../rpc/bi/admin/v1/bi_card";
+import type { BiDashboard } from "../rpc/bi/admin/v1/bi_dashboard";
+import type { BiSourceDescriptor } from "../rpc/bi/admin/v1/bi_query";
+import { defBiCardService } from "../api/bi/admin/v1/bi_card";
+import { defBiQueryService } from "../api/bi/admin/v1/bi_query";
+import { defBiDashboardService } from "../api/bi/admin/v1/bi_dashboard";
+import { parseDashboardLayout, reflowDashboardCards } from "../bi-dashboard-schema";
+import BiDataCard from "./BiDataCard.vue";
+import BiCardFormDialog from "./BiCardFormDialog.vue";
+const icons = { Star, StarFilled, Search };
+const router = useRouter(),
+  cards = ref<BiCard[]>([]),
+  sources = ref<BiSourceDescriptor[]>([]),
+  name = ref(""),
+  sourceCode = ref(""),
+  category = ref(""),
+  page = ref(1),
+  total = ref(0),
+  loading = ref(false),
+  saving = ref(false),
+  editorOpen = ref(false),
+  dashboardOpen = ref(false),
+  editingCard = ref<BiCard>(),
+  previewCard = ref<BiCard>(),
+  addingCard = ref<BiCard>(),
+  dashboards = ref<BiDashboard[]>([]);
+const categories = ["", "mine", "favorite", "shared", "system"];
+const counts = ref<BiCardCounts>({ all: 0, system: 0, mine: 0, favorite: 0, shared: 0 });
+const workbench = ref<BiWorkbench>({ dashboard_ids: [], favorite_ids: [], dashboards: [] });
+const target = reactive({ id: undefined as number | undefined });
+let request = 0,
+  loaded = false;
+const dashboardFields = computed<ProFormField[]>(() => [
+  {
+    prop: "id",
+    label: t("bi.dashboard.title"),
+    component: "select",
+    options: dashboards.value.map(item => ({ label: item.name, value: item.id })),
+    props: { filterable: true }
+  }
+]);
+/** 按同一过滤条件查询当前可见卡片，丢弃迟到请求。 */
+async function loadCards() {
+  const current = ++request;
+  loading.value = true;
+  try {
+    const data = await defBiCardService.PageBiCard({
+      name: name.value,
+      source_code: sourceCode.value,
+      category: category.value,
+      search_source_codes: sources.value.filter(item => item.name.includes(name.value)).map(item => item.code),
+      page_num: page.value,
+      page_size: 100
+    });
+    if (current !== request) return;
+    cards.value = data.cards;
+    total.value = data.total;
+    counts.value = data.counts!;
+    loaded = true;
+  } catch (cause) {
+    ElMessage.error(cause instanceof Error ? cause.message : t("bi.query.error"));
+  } finally {
+    if (current === request) loading.value = false;
+  }
+}
+/** 搜索或切换分类时从第一页开始。 */
+function search() {
+  page.value = 1;
+  void loadCards();
+}
+/** 预加载查询目录和收藏后刷新列表。 */
+async function reload() {
+  try {
+    const [dictionary, config] = await Promise.all([defBiQueryService.ListBiSources({}), defBiCardService.GetBiWorkbench({})]);
+    sources.value = dictionary.sources;
+    workbench.value = config;
+    await loadCards();
+  } catch (cause) {
+    ElMessage.error(cause instanceof Error ? cause.message : t("bi.query.error"));
+  }
+}
+/** 打开已有卡片的编辑表单。 */
+function openEditor(card: BiCard) {
+  editingCard.value = card;
+  editorOpen.value = true;
+}
+/** 保存收藏后只更新星标选中状态，保持当前列表和图表实例。 */
+async function toggleFavorite(card: BiCard) {
+  try {
+    const latest = await defBiCardService.GetBiWorkbench({});
+    const ids = latest.favorite_ids.includes(card.id)
+      ? latest.favorite_ids.filter(id => id !== card.id)
+      : [...latest.favorite_ids, card.id];
+    const saved = await defBiCardService.SaveBiWorkbench({ dashboard_ids: latest.dashboard_ids, favorite_ids: ids });
+    workbench.value.favorite_ids = saved.favorite_ids;
+  } catch (cause) {
+    ElMessage.error(cause instanceof Error ? cause.message : t("bi.card.save_failed"));
+  }
+}
+/** 删除当前用户自己的卡片，确认时展示卡片名称。 */
+async function remove(card: BiCard) {
+  try {
+    await ElMessageBox.confirm(t("bi.card.delete_confirm", { name: card.name }), t("common.action.delete"), { type: "warning" });
+  } catch {
+    return;
+  }
+  try {
+    await defBiCardService.DeleteBiCard({ id: card.id });
+    await reload();
+  } catch (cause) {
+    ElMessage.error(cause instanceof Error ? cause.message : t("bi.card.delete_failed"));
+  }
+}
+/** 选择当前用户可编辑的仪表盘草稿。 */
+async function pickDashboard(card: BiCard) {
+  try {
+    const result: BiDashboard[] = [];
+    let current = 1;
+    while (true) {
+      const data = await defBiDashboardService.PageBiDashboard({ name: "", page_num: current, page_size: 100 });
+      result.push(...data.dashboards.filter(item => item.can_edit));
+      if (current * 100 >= data.total || !data.dashboards.length) break;
+      current++;
+    }
+    if (!result.length) {
+      ElMessage.info(t("bi.card.create_dashboard_first"));
+      return;
+    }
+    dashboards.value = result;
+    addingCard.value = card;
+    target.id = undefined;
+    dashboardOpen.value = true;
+  } catch (cause) {
+    ElMessage.error(cause instanceof Error ? cause.message : t("bi.query.error"));
+  }
+}
+/** 只追加卡片引用，发布之前不改变正式仪表盘。 */
+async function addToDashboard() {
+  if (!target.id || !addingCard.value || saving.value) return;
+  saving.value = true;
+  try {
+    const item = await defBiDashboardService.GetBiDashboard({ id: target.id });
+    const layout = parseDashboardLayout(item.schema_json);
+    if (layout.cards.some(item => item.card_id === addingCard.value!.id)) {
+      ElMessage.info(t("bi.card.already_in_dashboard"));
+      return;
+    }
+    layout.cards = reflowDashboardCards([
+      ...layout.cards,
+      { id: `card_${addingCard.value.id}`, card_id: addingCard.value.id, w: 6, h: 4 }
+    ]);
+    await defBiDashboardService.SaveBiDashboard({ dashboard: { ...item, schema_json: JSON.stringify(layout) } });
+    dashboardOpen.value = false;
+    ElMessage.success(t("bi.card.add_dashboard_success"));
+  } catch (cause) {
+    ElMessage.error(cause instanceof Error ? cause.message : t("bi.card.save_failed"));
+  } finally {
+    saving.value = false;
+  }
+}
+onMounted(() => void reload());
+onActivated(() => {
+  if (loaded) void reload();
+});
+</script>
+<style scoped>
+.bi-card-library {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+.bi-card-library__count {
+  margin-left: 8px;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+.bi-card-library__filters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.bi-card-library__filters > .el-input {
+  width: 260px;
+}
+.bi-card-library__filters > .el-select {
+  width: 200px;
+}
+.bi-card-library__filters > span {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+.bi-card-library__grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+.bi-card-library :deep(.el-pagination) {
+  justify-content: flex-end;
+}
+@media (max-width: 1100px) {
+  .bi-card-library__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 650px) {
+  .bi-card-library__grid {
+    grid-template-columns: 1fr;
+  }
+  .bi-card-library__filters > .el-input,
+  .bi-card-library__filters > .el-select {
+    width: 100%;
+  }
+}
+</style>

package/dist/package/src/components/BiCardVisualization.vue

@@ -0,0 +1,95 @@
+<template>
+  <div v-if="data.metricOnly" class="bi-card-metrics" :class="{ 'is-multiple': data.metrics.length > 1, 'is-compact': compact }">
+    <div v-for="metric in data.metrics" :key="metric.code" class="bi-card-metrics__item">
+      <span v-if="data.metrics.length > 1">{{ metric.name }}</span
+      ><strong>{{ formatCardMetric(metric.value) }}</strong>
+    </div>
+  </div>
+  <div v-else class="bi-card-plot">
+    <BiChart :chart="data.chart" :rows="data.rows" :theme="theme" :empty-text="t('common.message.no_data')" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { t } from "@liujitcn/kratos-admin-core";
+import type { BiCard } from "../rpc/bi/admin/v1/bi_card";
+import type { BiQueryResult } from "../rpc/bi/admin/v1/bi_query";
+import { buildCardChart, formatCardMetric } from "../card-schema";
+import { useBiTheme } from "../env";
+import BiChart from "./BiChart.vue";
+
+const props = defineProps<{ card: BiCard; result: BiQueryResult; compact?: boolean }>();
+const theme = useBiTheme();
+const data = computed(() => {
+  const value = buildCardChart(props.card, props.result);
+  if (props.compact) {
+    value.chart.style = { ...value.chart.style, showLegend: false, showLabel: false, dataZoom: false };
+    value.chart.options = { tooltip: { show: false }, visualMap: { show: false } };
+    if (["bar", "line", "area", "scatter", "heatmap"].includes(props.card.chart_type)) {
+      value.chart.options.grid = { left: 4, right: 4, top: 6, bottom: 4 };
+      value.chart.options.xAxis = { type: props.card.chart_type === "scatter" ? "value" : "category", show: false };
+      value.chart.options.yAxis = { type: props.card.chart_type === "heatmap" ? "category" : "value", show: false };
+    }
+  }
+  return value;
+});
+</script>
+
+<style scoped>
+.bi-card-metrics {
+  display: grid;
+  height: 100%;
+  align-content: center;
+  gap: 16px;
+  overflow: auto;
+  color: var(--el-text-color-primary);
+}
+.bi-card-metrics__item {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+.bi-card-metrics__item strong {
+  font-size: 32px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+.bi-card-metrics__item span,
+.bi-card-gauge__details span {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+.bi-card-metrics:not(.is-multiple) {
+  align-content: start;
+  padding-top: 4px;
+}
+.bi-card-metrics:not(.is-multiple) .bi-card-metrics__item {
+  text-align: left;
+}
+.bi-card-metrics.is-multiple {
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
+}
+.bi-card-metrics.is-multiple strong {
+  font-size: 22px;
+}
+.bi-card-metrics.is-compact .bi-card-metrics__item strong {
+  font-size: 20px;
+}
+.bi-card-plot {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+.bi-card-plot :deep(.bi-chart) {
+  flex: 1;
+  min-height: 0;
+  height: auto;
+}
+</style>