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

package/dist/package/src/components/BiChart.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="bi-chart">
+    <div ref="hostRef" class="bi-chart__host" :style="{ visibility: ready ? 'visible' : 'hidden' }" />
+    <div v-if="error" class="bi-chart__error" :title="error">!</div>
+    <div v-else-if="!rows.length" class="bi-chart__empty">{{ emptyText }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * 单图表渲染：引擎挂载 + 行数据/主题变化重编译 + ResizeObserver 跟随。
+ * 空数据不挂引擎，只显示占位文案。
+ */
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { getEngine, transformRows } from "../bi-core";
+import type { BiChartEvent, BiChartSchema, BiResolvedTheme, ChartHandle } from "../bi-core";
+
+const props = withDefaults(
+  defineProps<{
+    chart: BiChartSchema;
+    rows: any[];
+    theme: BiResolvedTheme;
+    loading?: boolean;
+    error?: string | null;
+    emptyText?: string;
+  }>(),
+  { loading: false, error: null, emptyText: "" }
+);
+
+const emit = defineEmits<{
+  "chart-click": [event: BiChartEvent];
+}>();
+
+const hostRef = ref<HTMLElement | null>(null);
+const ready = ref(false);
+let handle: ChartHandle | null = null;
+let observer: ResizeObserver | null = null;
+let frame = 0;
+
+/** 释放图表及尚未执行的尺寸更新。 */
+function teardown() {
+  cancelAnimationFrame(frame);
+  observer?.disconnect();
+  observer = null;
+  handle?.dispose();
+  handle = null;
+  ready.value = false;
+}
+
+function compileAndApply() {
+  if (!handle) return;
+  const engine = getEngine(props.chart.engine);
+  handle.update(engine.compile(props.chart, transformRows(props.chart, props.rows), props.theme));
+}
+
+/** 等弹窗或折叠区域实际显示后再挂载图表，避免以零尺寸初始化。 */
+function setup() {
+  teardown();
+  if (!hostRef.value || !props.rows.length) return;
+  observer = new ResizeObserver(() => {
+    cancelAnimationFrame(frame);
+    frame = requestAnimationFrame(() => {
+      const host = hostRef.value;
+      if (!host?.clientWidth || !host.clientHeight) return;
+      if (handle) {
+        handle.resize();
+        return;
+      }
+      const engine = getEngine(props.chart.engine);
+      handle = engine.mount(host, engine.compile(props.chart, transformRows(props.chart, props.rows), props.theme));
+      engine.bindEvents(handle, (e) => emit("chart-click", { ...e, chartId: props.chart.id }));
+      ready.value = true;
+    });
+  });
+  observer.observe(hostRef.value);
+}
+
+onMounted(setup);
+
+watch(
+  () => [props.rows, props.theme, props.chart] as const,
+  () => {
+    // 数据从空到有 / 引擎未挂时重建；否则原地重编译
+    if (!handle || !props.rows.length) {
+      setup();
+    } else {
+      compileAndApply();
+    }
+  },
+  { deep: true }
+);
+
+onBeforeUnmount(teardown);
+</script>
+
+<style scoped>
+.bi-chart {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.bi-chart__host {
+  width: 100%;
+  height: 100%;
+}
+
+.bi-chart__empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--el-text-color-secondary, #909399);
+  font-size: 13px;
+  user-select: none;
+}
+
+.bi-chart__error {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--el-color-danger, #f56c6c);
+  color: #fff;
+  font-size: 11px;
+  cursor: help;
+}
+</style>

package/dist/package/src/components/BiDashboard.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="bi-dashboard-grid">
+    <div
+      v-for="item in schema.cards"
+      :key="item.id"
+      class="bi-dashboard-grid__item"
+      :style="{ gridColumn: `${(item.x || 0) + 1} / span ${item.w}`, gridRow: `${(item.y || 0) + 1} / span ${item.h}` }"
+    >
+      <BiDataCard v-if="results.get(item.id)" :card="dashboardSnapshotCard(item)" :preview-result="results.get(item.id)" :show-category="false" />
+      <el-empty v-else :description="t('common.message.no_data')" />
+    </div>
+    <el-empty v-if="!schema.cards.length" :description="t('bi.dashboard.empty')" />
+  </div>
+</template>
+<script setup lang="ts">
+import { t } from "@liujitcn/kratos-admin-core";
+import type { BiQueryResult } from "../rpc/bi/admin/v1/bi_query";
+import { dashboardSnapshotCard } from "../bi-dashboard-schema";
+import type { DashboardLayout } from "../bi-dashboard-schema";
+import BiDataCard from "./BiDataCard.vue";
+defineProps<{ schema: DashboardLayout; results: Map<string, BiQueryResult | undefined> }>();
+</script>
+<style scoped>
+.bi-dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-auto-rows: 80px;
+  gap: 12px;
+}
+.bi-dashboard-grid__item {
+  min-width: 0;
+  min-height: 0;
+}
+.bi-dashboard-grid__item :deep(.bi-data-card) {
+  height: 100%;
+}
+.bi-dashboard-grid__item :deep(.bi-data-card__chart) {
+  flex: 1;
+  min-height: 80px;
+  height: auto;
+}
+@media (max-width: 700px) {
+  .bi-dashboard-grid {
+    grid-template-columns: 1fr;
+    grid-auto-rows: auto;
+  }
+  .bi-dashboard-grid__item {
+    grid-column: 1 !important;
+    grid-row: auto !important;
+    min-height: 360px;
+  }
+}
+</style>

package/dist/package/src/components/BiDashboardMenuDialog.vue

@@ -0,0 +1,177 @@
+<template>
+  <FormDialog
+    ref="dialog"
+    :model-value="modelValue"
+    :title="t('bi.dashboard.configure_menu')"
+    :model="form"
+    :fields="fields"
+    :rules="rules"
+    :confirm-loading="saving"
+    :form-props="{ disabled: loading || saving }"
+    :close-on-click-modal="!saving"
+    @update:model-value="emit('update:modelValue', $event)"
+    @confirm="submit"
+    @closed="reset"
+  >
+    <template #i18ns>
+      <DynamicI18nEditor v-model="i18nValues" :source="form.title" :maxlength="100" :disabled="loading || saving" />
+    </template>
+    <template #icon>
+      <SelectIcon v-model:icon-value="form.icon" :placeholder="t('system.base.menu.placeholder.icon')" />
+    </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 SelectIcon from "@liujitcn/kratos-admin-core/components/SelectIcon/index.vue";
+import type { ProFormField, ProFormOption } from "@liujitcn/kratos-admin-core/components/ProForm/interface";
+import { defBaseMenuService } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_menu";
+import { loadEnabledBaseLanguages } from "@liujitcn/kratos-admin-system/api/system/admin/v1/base_language";
+import DynamicI18nEditor from "@liujitcn/kratos-admin-system/components/i18n/DynamicI18nEditor.vue";
+import {
+  normalizeDynamicI18ns,
+  serializeDynamicI18ns,
+  type DynamicI18nRecord,
+  type DynamicI18nValue
+} from "@liujitcn/kratos-admin-system/components/i18n/dynamicI18n";
+import type { BaseMenu, BaseMenuForm } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_menu";
+import { BaseMenuType } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/common";
+import { Status } from "@liujitcn/kratos-admin-system/rpc/common/v1/enum";
+import type { BiDashboard } from "../rpc/bi/admin/v1/bi_dashboard";
+
+const props = defineProps<{ modelValue: boolean; dashboard?: BiDashboard }>();
+const emit = defineEmits<{ "update:modelValue": [value: boolean] }>();
+const dialog = ref<InstanceType<typeof FormDialog>>();
+const form = reactive({ title: "", icon: "DataAnalysis", parent_id: undefined as number | undefined });
+const options = ref<ProFormOption[]>([]);
+const existing = ref<BaseMenuForm>();
+const i18nValues = ref<DynamicI18nValue[]>([]);
+const loading = ref(false),
+  saving = ref(false);
+let request = 0;
+const fields = computed<ProFormField[]>(() => [
+  {
+    prop: "title",
+    label: t("system.base.menu.field.title"),
+    component: "input",
+    suffixSlotName: "i18ns",
+    props: { maxlength: 100 }
+  },
+  { prop: "icon", label: t("system.base.menu.field.icon"), component: "slot", slotName: "icon" },
+  {
+    prop: "parent_id",
+    label: t("bi.dashboard.menu_position"),
+    component: "tree-select",
+    options: options.value,
+    props: { nodeKey: "value", props: { label: "label", children: "children" }, checkStrictly: true, filterable: true }
+  }
+]);
+const rules = computed(() => ({
+  title: [{ required: true, whitespace: true, message: t("system.base.menu.placeholder.title"), trigger: "blur" }],
+  icon: [{ required: true, message: t("system.base.menu.placeholder.icon"), trigger: "change" }],
+  parent_id: [{ required: true, message: t("system.base.menu.placeholder.parent"), trigger: "change" }]
+}));
+
+/** 加载可放置的管理端目录，并回填当前仪表盘已存在的菜单。 */
+async function load() {
+  const current = ++request;
+  loading.value = true;
+  existing.value = undefined;
+  i18nValues.value = [];
+  Object.assign(form, { title: props.dashboard?.name || "", icon: "DataAnalysis", parent_id: undefined });
+  try {
+    await loadEnabledBaseLanguages();
+    if (current !== request) return;
+    i18nValues.value = normalizeDynamicI18ns(undefined);
+    const data = await defBaseMenuService.TreeBaseMenu({ lazy: false });
+    if (current !== request) return;
+    options.value = folderOptions(data.base_menus || []);
+    const queue = [...(data.base_menus || [])];
+    for (const item of queue) {
+      queue.push(...(item.children || []));
+      if (item.name !== `BiDashboard${props.dashboard?.id}` || item.component !== "bi/dashboard/index") continue;
+      const value = await defBaseMenuService.GetBaseMenu({ id: item.id });
+      if (current !== request) return;
+      existing.value = value;
+      i18nValues.value = normalizeDynamicI18ns(value.i18ns as DynamicI18nRecord[] | undefined);
+      Object.assign(form, {
+        title: value.meta?.title || props.dashboard?.name || "",
+        icon: value.meta?.icon || "DataAnalysis",
+        parent_id: value.parent_id
+      });
+      break;
+    }
+  } catch (cause) {
+    ElMessage.error(cause instanceof Error ? cause.message : t("bi.query.error"));
+  } finally {
+    if (current === request) loading.value = false;
+  }
+}
+
+/** 目录作为唯一可选父级，排除移动端分支和页面、按钮节点。 */
+function folderOptions(items: BaseMenu[]): ProFormOption[] {
+  return items
+    .filter(item => item.type === BaseMenuType.BASE_MENU_TYPE_FOLDER && item.id !== 99000000)
+    .map(item => ({ label: item.meta?.title || item.name, value: item.id, children: folderOptions(item.children || []) }));
+}
+
+/** 固定仪表盘路由与权限，保存菜单标题、译文、图标和父目录。 */
+async function submit() {
+  if (!props.dashboard || loading.value || saving.value || !(await dialog.value?.validate())) return;
+  saving.value = true;
+  try {
+    const payload: BaseMenuForm = {
+      id: existing.value?.id || 0,
+      parent_id: form.parent_id,
+      type: BaseMenuType.BASE_MENU_TYPE_MENU,
+      path: `/reports/dashboard/${props.dashboard.id}`,
+      name: `BiDashboard${props.dashboard.id}`,
+      component: "bi/dashboard/index",
+      redirect: "",
+      meta: {
+        title: form.title,
+        icon: form.icon,
+        hidden: false,
+        always_show: false,
+        keep_alive: false,
+        full: false,
+        affix: false,
+        params: [],
+        app: undefined
+      },
+      api: ["/bi.admin.v1.BiDashboardService/GetBiDashboardData"],
+      i18ns: serializeDynamicI18ns(i18nValues.value, "base_menu.meta.title", existing.value?.id || 0, form.title),
+      sort: existing.value?.sort || 1,
+      status: Status.STATUS_ENABLE
+    };
+    if (payload.id) await defBaseMenuService.UpdateBaseMenu({ base_menu: payload });
+    else await defBaseMenuService.CreateBaseMenu({ base_menu: payload });
+    ElMessage.success(t("bi.dashboard.menu_saved"));
+    emit("update:modelValue", false);
+  } catch (cause) {
+    ElMessage.error(cause instanceof Error ? cause.message : t("bi.query.error"));
+  } finally {
+    saving.value = false;
+  }
+}
+
+/** 关闭时清空草稿与校验，并丢弃迟到的目录请求。 */
+function reset() {
+  request++;
+  loading.value = false;
+  existing.value = undefined;
+  i18nValues.value = [];
+  options.value = [];
+  Object.assign(form, { title: "", icon: "DataAnalysis", parent_id: undefined });
+  dialog.value?.clearValidate();
+}
+watch(
+  () => [props.modelValue, props.dashboard?.id],
+  () => {
+    if (props.modelValue && props.dashboard) void load();
+  }
+);
+</script>

package/dist/package/src/components/BiDataCard.vue

@@ -0,0 +1,231 @@
+<template>
+  <article class="bi-data-card">
+    <header class="bi-data-card__header">
+      <div class="bi-data-card__heading">
+        <h3 class="bi-data-card__title">
+          <el-icon class="bi-data-card__icon"><component :is="icon" /></el-icon>{{ card.name }}
+        </h3>
+        <div class="bi-data-card__meta">
+          <el-tag v-if="showCategory" size="small" effect="plain" type="info">{{ t(`bi.card.category.${card.category || "mine"}`) }}</el-tag>
+          <el-select
+            v-if="showPeriodFilter"
+            :model-value="effectiveRangeDays"
+            class="bi-data-card__period"
+            size="small"
+            :aria-label="t('bi.card.period', { name: card.name })"
+            @update:model-value="emit('update:rangeDays', $event)"
+          >
+            <el-option :value="0" :label="t('bi.card.period.default')" />
+            <el-option v-for="days in [7, 30]" :key="days" :value="days" :label="t('bi.card.period.recent_days', { days })" />
+          </el-select>
+          <span v-if="periodLabel">{{ periodLabel }}</span>
+          <el-tag v-if="data?.truncated" size="small" type="warning">{{ t("bi.query.truncated") }}</el-tag>
+        </div>
+      </div>
+      <slot name="actions" />
+    </header>
+    <div v-loading="loading" class="bi-data-card__chart" :aria-busy="loading">
+      <div v-if="error" class="bi-data-card__error" role="alert">
+        <span>{{ error }}</span>
+        <el-button link type="primary" @click="loadData">{{ t("bi.card.retry") }}</el-button>
+      </div>
+      <BiCardVisualization v-else-if="data" :card="card" :result="data" />
+      <el-empty v-else-if="!loading" :image-size="48" :description="t('common.message.no_data')" />
+    </div>
+    <div v-if="sourceName" class="bi-data-card__source">
+      <el-icon><component :is="sourceIcon" /></el-icon>{{ sourceName }}
+    </div>
+    <footer v-if="$slots.footer" class="bi-data-card__footer"><slot name="footer" /></footer>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { computed, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from "vue";
+import { t } from "@liujitcn/kratos-admin-core";
+import BiCardVisualization from "./BiCardVisualization.vue";
+import { cardRefreshDelay } from "../card-schema";
+import { defBiCardService } from "../api/bi/admin/v1/bi_card";
+import type { BiCard } from "../rpc/bi/admin/v1/bi_card";
+import type { BiQueryResult } from "../rpc/bi/admin/v1/bi_query";
+
+const icon = DataAnalysis;
+const sourceIcon = Coin;
+const props = withDefaults(
+  defineProps<{
+    card: BiCard;
+    sourceName?: string;
+    previewResult?: BiQueryResult;
+    refreshKey?: number;
+    rangeDays?: number;
+    showPeriodFilter?: boolean;
+    showCategory?: boolean;
+  }>(),
+  { sourceName: "", refreshKey: 0, rangeDays: 0, showPeriodFilter: false, showCategory: true }
+);
+const emit = defineEmits<{ "update:rangeDays": [value: number] }>();
+const effectiveRangeDays = computed(() => (props.showPeriodFilter ? props.rangeDays : 0));
+const periodLabel = computed(() => {
+  const range = props.card.query?.time_range;
+  return !effectiveRangeDays.value && range ? `${range.start.slice(0, 10)} — ${range.end.slice(0, 10)}` : "";
+});
+const result = ref<BiQueryResult>();
+const loading = ref(false);
+const error = ref("");
+let timer: ReturnType<typeof setTimeout> | undefined;
+let active = true;
+let requestID = 0;
+const data = computed(() => props.previewResult ?? result.value);
+
+/** 按当前卡片周期加载数据，关闭或切换卡片后丢弃迟到响应。 */
+async function loadData() {
+  clearTimeout(timer);
+  if (!active || props.card.id === 0 || props.previewResult) return;
+  const current = ++requestID;
+  loading.value = true;
+  error.value = "";
+  try {
+    const loadedResult = await defBiCardService.GetBiCardData({ id: props.card.id, range_days: effectiveRangeDays.value });
+    if (current === requestID) result.value = loadedResult;
+  } catch (cause) {
+    if (current === requestID) {
+      error.value = cause instanceof Error ? cause.message : t("bi.query.error");
+      result.value = undefined;
+    }
+  } finally {
+    if (current === requestID) {
+      loading.value = false;
+      scheduleRefresh();
+    }
+  }
+}
+
+/** 隐藏标签页时延后自动取数，避免后台持续查询。 */
+function scheduleRefresh() {
+  clearTimeout(timer);
+  if (active && props.card.refresh_seconds > 0)
+    timer = setTimeout(() => {
+      if (document.hidden) scheduleRefresh();
+      else void loadData();
+    }, cardRefreshDelay(props.card.refresh_seconds));
+}
+
+/** 标签页重新可见后补一次刷新，避免错过每日刷新时间。 */
+function handleVisibility() {
+  if (active && !document.hidden && props.card.refresh_seconds > 0 && !loading.value) void loadData();
+}
+
+/** 停止非活动页面的定时器与响应回填。 */
+function stop() {
+  active = false;
+  requestID++;
+  loading.value = false;
+  clearTimeout(timer);
+}
+watch(
+  () => [props.card.id, props.card.updated_at, props.refreshKey, effectiveRangeDays.value],
+  () => {
+    result.value = undefined;
+    void loadData();
+  },
+  { immediate: true }
+);
+onActivated(() => {
+  if (!active) {
+    active = true;
+    void loadData();
+  }
+});
+onDeactivated(stop);
+onMounted(() => document.addEventListener("visibilitychange", handleVisibility));
+onBeforeUnmount(() => {
+  stop();
+  document.removeEventListener("visibilitychange", handleVisibility);
+});
+</script>
+
+<style scoped>
+.bi-data-card {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: var(--admin-page-radius);
+  background: var(--el-bg-color);
+}
+.bi-data-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 16px 16px 0;
+}
+.bi-data-card__heading {
+  min-width: 0;
+}
+.bi-data-card__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  color: var(--el-text-color-primary);
+  overflow-wrap: anywhere;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 500;
+}
+.bi-data-card__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+.bi-data-card__chart {
+  box-sizing: border-box;
+  height: 280px;
+  padding: 12px 16px;
+}
+.bi-data-card__period {
+  width: 130px;
+}
+
+.bi-data-card__error {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+.bi-data-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.bi-data-card__source {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 16px 12px;
+  color: var(--el-text-color-secondary);
+  font-size: 11px;
+}
+.bi-data-card__icon {
+  flex: none;
+  width: 27px;
+  height: 27px;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  border-radius: var(--admin-page-radius);
+}
+</style>