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

package/dist/package/src/bi-core.ts

@@ -0,0 +1,43 @@
+/** BI 图表内核：真实结果的字段映射、数据转换、图表引擎、布局与主题。 */
+
+// Schema 与缺省
+export * from "./schema/types";
+export { flowPlace } from "./schema/layout";
+
+// 数据集解析
+export { getColumns, toNumber, unique } from "./dataset";
+
+// 主题
+export { BI_THEME_DARK, BI_THEME_LIGHT, detectDark, resolveTheme, watchDark } from "./theme";
+export type { BiResolvedTheme } from "./theme";
+export { BI_PALETTES, BI_PALETTE_KEYS, resolvePalette } from "./theme/palettes";
+export {
+  BI_DASHBOARD_THEMES,
+  BI_SEMANTIC_COLORS,
+  BI_THEME_PRESET_KEYS,
+  getDashboardThemePreset,
+  resolveDashboardTheme,
+  resolveStageColors
+} from "./theme/presets";
+export type { BiDashboardThemePreset, BiStageColors } from "./theme/presets";
+
+// 数据变换（过滤/聚合/排序/TopN + 字段类型推断 + 数值格式化）
+export { applyFilters, aggregateRows, sortRows, transformRows, inferFieldType, formatNumber } from "./dataset/transform";
+export type { BiFieldType } from "./dataset/transform";
+
+// 引擎
+export { createEchartsEngine, compileEcharts, installEchartsEngine } from "./engine/echarts";
+export type { BiEChartsOption } from "./engine/echarts";
+export { getEngine, hasEngine, registerEngine } from "./engine/types";
+export type { BiChartEvent, ChartEngine, ChartHandle } from "./engine/types";
+
+// 图型注册表（引擎适配器包扩展设计器图型）
+export { registerChartType, getChartTypes, getEngineForType } from "./engine/chart-types";
+
+// 文案包（纯数据）
+export { BI_MESSAGES_ZH, BI_MESSAGES_EN } from "./bi-messages";
+
+import { installEchartsEngine } from "./engine/echarts";
+
+// 包加载即注册内置引擎
+installEchartsEngine();

package/dist/package/src/bi-dashboard-schema.ts

@@ -0,0 +1,69 @@
+import { flowPlace } from "./schema/layout";
+import { normalizeBiQueryResult, normalizeBiQuerySpec } from "./bi-response";
+import type { BiCard } from "./rpc/bi/admin/v1/bi_card";
+import type { BiDashboardDataResponse } from "./rpc/bi/admin/v1/bi_dashboard";
+import type { BiQuerySpec } from "./rpc/bi/admin/v1/bi_query";
+
+/** 仪表盘只保存名称、卡片引用与栅格位置，外观跟随管理端主题。 */
+export interface DashboardLayout {
+  schemaVersion: 3;
+  name: string;
+  cards: DashboardCardLayout[];
+}
+
+/** 单张数据卡片的布局与服务端发布快照。 */
+export interface DashboardCardLayout {
+  id: string;
+  card_id: number;
+  query_record_id?: number;
+  x?: number;
+  y?: number;
+  w: number;
+  h: number;
+  name?: string;
+  chart_type?: string;
+  chart_json?: string;
+  query?: BiQuerySpec;
+}
+
+/** 读取当前协议的仪表盘布局，不接收旧图表与数据集结构。 */
+export function parseDashboardLayout(value: string): DashboardLayout {
+  if (!value) return { schemaVersion: 3, name: "", cards: [] };
+  const layout = JSON.parse(value) as DashboardLayout;
+  if (layout.schemaVersion !== 3 || !Array.isArray(layout.cards)) throw new Error("仪表盘布局格式无效");
+  return { schemaVersion: 3, name: layout.name, cards: layout.cards };
+}
+
+/** 将发布快照还原成只读数据卡片，保留当次图表配置。 */
+export function dashboardSnapshotCard(item: DashboardCardLayout): BiCard {
+  return {
+    id: item.card_id,
+    tenant_id: 0,
+    project_id: 0,
+    owner_id: 0,
+    query_record_id: item.query_record_id || 0,
+    name: item.name || "",
+    source_code: item.query?.source_code || "",
+    query: item.query ? normalizeBiQuerySpec(item.query) : undefined,
+    chart_type: item.chart_type || "bar",
+    chart_json: item.chart_json || "",
+    refresh_seconds: 0,
+    is_shared: false,
+    updated_at: "",
+    category: "shared",
+    can_edit: false
+  };
+}
+
+/** 按发布快照匹配真实查询结果，并补齐 HTTP 省略的空集合。 */
+export function dashboardResults(data: BiDashboardDataResponse) {
+  return new Map((data.cards ?? []).map(item => [item.item_id, item.result ? normalizeBiQueryResult(item.result) : undefined]));
+}
+
+/** 复用现有栅格算法整理卡片位置，避免拖动排序后互相覆盖。 */
+export function reflowDashboardCards(cards: DashboardCardLayout[]): DashboardCardLayout[] {
+  return flowPlace(
+    cards.map(item => ({ ...item, x: undefined as number | undefined, y: undefined as number | undefined })),
+    12
+  ).map(item => ({ ...item, x: item.x ?? 0, y: item.y ?? 0 }));
+}

package/dist/package/src/bi-messages.ts

@@ -0,0 +1,249 @@
+/**
+ * BI 文案包（纯数据，零依赖）：渲染器只用 common.noData/Loading，
+ * 设计器（designer-vue）消费 designer.* 与 types.*。
+ * 键值取自 go-wind-admin 设计语言口径；改键同步两端包装包。
+ */
+
+export const BI_MESSAGES_ZH = {
+  common: {
+    noData: "暂无数据",
+    loading: "加载中…",
+    back: "返回上一层",
+    resetDrill: "重置下钻",
+    exportImage: "导出图片",
+    fullscreen: "全屏",
+  },
+  designer: {
+    addChart: "新增图表",
+    addDataset: "新增数据集",
+    undo: "撤销",
+    redo: "重做",
+    compact: "整理布局",
+    import: "导入",
+    exportTemplate: "导出模板",
+    export: "导出",
+    preview: "预览",
+    edit: "编辑",
+    delete: "删除",
+    charts: "图表",
+    datasets: "数据集",
+    property: "属性",
+    selectChart: "点击画布中的图表进行编辑",
+    title: "标题",
+    type: "图型",
+    dataset: "数据集",
+    encoding: "视觉映射",
+    dimension: "维度",
+    measure: "度量",
+    series: "系列拆分",
+    position: "位置 (x / y)",
+    size: "大小 (宽 × 高)",
+    datasetName: "数据集名称",
+    datasetType: "类型",
+    rowsJson: "行数据 (JSON 数组)",
+    apiParams: "API 参数 (JSON)",
+    typeStatic: "静态数据",
+    typeApi: "API 取数",
+    noDataset: "请先创建数据集",
+    invalidJson: "JSON 格式错误",
+    save: "保存",
+    cancel: "取消",
+    importFailed: "导入失败",
+    confirmDeleteChart: "确定删除该图表吗？",
+    columns: "列",
+    tabData: "数据",
+    tabStyle: "样式",
+    tabLayout: "布局",
+    duplicate: "复制",
+    paste: "粘贴",
+    aggregation: "聚合方式",
+    aggNone: "不聚合",
+    aggSum: "求和",
+    aggAvg: "平均",
+    aggCount: "计数",
+    aggMax: "最大",
+    aggMin: "最小",
+    measures: "多度量（宽表）",
+    sortLabel: "排序",
+    sortByDim: "按维度",
+    sortByMeasure: "按度量",
+    asc: "升序",
+    desc: "降序",
+    topN: "取前 N 项",
+    filters: "过滤器",
+    addFilter: "+ 添加条件",
+    filterField: "字段",
+    opEq: "等于",
+    opNe: "不等于",
+    opGt: "大于",
+    opGte: "大于等于",
+    opLt: "小于",
+    opLte: "小于等于",
+    opContains: "包含",
+    opIn: "属于（逗号分隔）",
+    showLegend: "显示图例",
+    showLabel: "数值标签",
+    stack: "堆叠",
+    dataZoom: "数据缩放",
+    palette: "色盘",
+    paletteDefault: "默认",
+    paletteOcean: "海洋",
+    paletteSunset: "夕照",
+    paletteForest: "森林",
+    paletteMono: "墨阶",
+    numberFormat: "数字格式",
+    decimals: "小数位",
+    thousand: "千分位",
+    prefix: "前缀",
+    suffix: "后缀",
+    typeNumber: "数值",
+    typeString: "文本",
+    typeDate: "日期",
+    drillPath: "下钻路径",
+    addDrillLevel: "+ 添加下钻层级",
+    linkage: "跨图联动",
+    linkageTip: "开启后，点击图表以维度值过滤同数据集的其它图表",
+    templates: "模板",
+    themePreset: "仪表盘主题",
+    themeAuto: "跟随宿主亮暗",
+  },
+  types: {
+    bar: "柱状图",
+    line: "折线图",
+    area: "面积图",
+    pie: "饼图",
+    donut: "环形图",
+    scatter: "散点图",
+    radar: "雷达图",
+    gauge: "仪表图",
+    pivot: "透视表",
+    graph: "关系图",
+    funnel: "漏斗图",
+    treemap: "矩形树图",
+    sunburst: "旭日图",
+    sankey: "桑基图",
+    heatmap: "热力图",
+  },
+};
+
+export const BI_MESSAGES_EN = {
+  common: {
+    noData: "No data",
+    loading: "Loading…",
+    back: "Back",
+    resetDrill: "Reset drill",
+    exportImage: "Export PNG",
+    fullscreen: "Fullscreen",
+  },
+  designer: {
+    addChart: "Add Chart",
+    addDataset: "Add Dataset",
+    undo: "Undo",
+    redo: "Redo",
+    compact: "Tidy Layout",
+    import: "Import",
+    exportTemplate: "Export template",
+    export: "Export",
+    preview: "Preview",
+    edit: "Edit",
+    delete: "Delete",
+    charts: "Charts",
+    datasets: "Datasets",
+    property: "Properties",
+    selectChart: "Click a chart on the canvas to edit",
+    title: "Title",
+    type: "Type",
+    dataset: "Dataset",
+    encoding: "Encoding",
+    dimension: "Dimension",
+    measure: "Measure",
+    series: "Series",
+    position: "Position (x / y)",
+    size: "Size (W × H)",
+    datasetName: "Dataset name",
+    datasetType: "Type",
+    rowsJson: "Rows (JSON array)",
+    apiParams: "API params (JSON)",
+    typeStatic: "Static",
+    typeApi: "API",
+    noDataset: "Create a dataset first",
+    invalidJson: "Invalid JSON",
+    save: "Save",
+    cancel: "Cancel",
+    importFailed: "Import failed",
+    confirmDeleteChart: "Delete this chart?",
+    columns: "columns",
+    tabData: "Data",
+    tabStyle: "Style",
+    tabLayout: "Layout",
+    duplicate: "Duplicate",
+    paste: "Paste",
+    aggregation: "Aggregation",
+    aggNone: "None",
+    aggSum: "Sum",
+    aggAvg: "Average",
+    aggCount: "Count",
+    aggMax: "Max",
+    aggMin: "Min",
+    measures: "Multi-measure (wide)",
+    sortLabel: "Sort",
+    sortByDim: "By dimension",
+    sortByMeasure: "By measure",
+    asc: "Ascending",
+    desc: "Descending",
+    topN: "Top N",
+    filters: "Filters",
+    addFilter: "+ Add condition",
+    filterField: "Field",
+    opEq: "equals",
+    opNe: "not equals",
+    opGt: "greater than",
+    opGte: "≥",
+    opLt: "less than",
+    opLte: "≤",
+    opContains: "contains",
+    opIn: "in (comma separated)",
+    showLegend: "Show legend",
+    showLabel: "Data labels",
+    stack: "Stack",
+    dataZoom: "Data zoom",
+    palette: "Palette",
+    paletteDefault: "Default",
+    paletteOcean: "Ocean",
+    paletteSunset: "Sunset",
+    paletteForest: "Forest",
+    paletteMono: "Mono",
+    numberFormat: "Number format",
+    decimals: "Decimals",
+    thousand: "Thousands separator",
+    prefix: "Prefix",
+    suffix: "Suffix",
+    typeNumber: "Number",
+    typeString: "Text",
+    typeDate: "Date",
+    drillPath: "Drill path",
+    addDrillLevel: "+ Add drill level",
+    linkage: "Cross-filter",
+    linkageTip: "Clicking a chart filters sibling charts on the same dataset",
+    templates: "Templates",
+    themePreset: "Dashboard theme",
+    themeAuto: "Follow host",
+  },
+  types: {
+    bar: "Bar",
+    line: "Line",
+    area: "Area",
+    pie: "Pie",
+    donut: "Donut",
+    scatter: "Scatter",
+    radar: "Radar",
+    gauge: "Gauge",
+    pivot: "Pivot table",
+    graph: "Graph",
+    funnel: "Funnel",
+    treemap: "Treemap",
+    sunburst: "Sunburst",
+    sankey: "Sankey",
+    heatmap: "Heatmap",
+  },
+};

package/dist/package/src/bi-response.ts

@@ -0,0 +1,39 @@
+import type { BiCard, BiWorkbench } from "./rpc/bi/admin/v1/bi_card";
+import type { BiQueryResult, BiQuerySpec } from "./rpc/bi/admin/v1/bi_query";
+
+/** 补齐 HTTP JSON 省略的查询集合字段，保留服务端返回的过滤、排序与时间范围。 */
+export function normalizeBiQuerySpec(query: BiQuerySpec): BiQuerySpec {
+  return {
+    ...query,
+    dimensions: query.dimensions ?? [],
+    measures: query.measures ?? [],
+    filters: (query.filters ?? []).map(filter => ({ ...filter, values: filter.values ?? [] })),
+    orders: query.orders ?? []
+  };
+}
+
+/** 将无数据查询的省略字段统一为可渲染的空结果。 */
+export function normalizeBiQueryResult(result: BiQueryResult): BiQueryResult {
+  return {
+    ...result,
+    columns: result.columns ?? [],
+    rows: (result.rows ?? []).map(row => ({ values: row.values ?? [] })),
+    truncated: result.truncated ?? false,
+    elapsed_ms: result.elapsed_ms ?? 0,
+    query_record_id: result.query_record_id ?? 0
+  };
+}
+
+/** 在卡片 API 边界补齐查询配置，页面不再重复处理缺省集合。 */
+export function normalizeBiCard(card: BiCard): BiCard {
+  return { ...card, query: card.query ? normalizeBiQuerySpec(card.query) : undefined };
+}
+
+/** 新账号和清空后的工作台使用相同的空集合结构。 */
+export function normalizeBiWorkbench(workbench: BiWorkbench): BiWorkbench {
+  return {
+    dashboard_ids: workbench.dashboard_ids ?? [],
+    favorite_ids: workbench.favorite_ids ?? [],
+    dashboards: workbench.dashboards ?? []
+  };
+}

package/dist/package/src/bi-vue.ts

@@ -0,0 +1,13 @@
+/**
+ * Vue 3 BI 仪表盘：BiDashboard 只读渲染器 + BiDesigner 画布设计器。
+ * 数据查询与卡片配置由服务端提供，设计器仅调整卡片布局。
+ */
+import "./styles.scss";
+
+export { default as BiDashboard } from "./components/BiDashboard.vue";
+export { default as BiDesigner } from "./components/BiDesigner.vue";
+export { default as BiChart } from "./components/BiChart.vue";
+
+// 环境注入（主题跟随 / resolvers / 项目 i18n）
+export { provideBiEnv, useBiEnv, useBiTheme, useBiI18n } from "./env";
+export type { BiEnv } from "./env";

package/dist/package/src/card-schema.ts

@@ -0,0 +1,111 @@
+import type { BiDashboard } from "./rpc/bi/admin/v1/bi_dashboard";
+import type { BiChartEncoding, BiChartStyle, BiChartSchema, BiRow } from "./schema/types";
+import type { BiCard } from "./rpc/bi/admin/v1/bi_card";
+import type { BiQueryResult, BiSourceDescriptor } from "./rpc/bi/admin/v1/bi_query";
+
+/** 将卡片查询结果映射到现有图表引擎，保留分组及全部所选指标。 */
+export function buildCardChart(
+  card: BiCard,
+  result: BiQueryResult
+): { chart: BiChartSchema; rows: BiRow[]; metrics: Array<{ code: string; name: string; value: string }>; metricOnly: boolean } {
+  const config = parseCardChart(card);
+  const numericFields = result.columns.filter(column => column.type === "number");
+  const measure =
+    config.encoding.measure ||
+    (card.chart_type === "scatter" ? numericFields[1]?.code : undefined) ||
+    card.query?.measures[0]?.code ||
+    result.columns.find(column => column.type === "number")?.code ||
+    result.columns[0]?.code ||
+    "";
+  const dimension =
+    config.encoding.dimension ||
+    (card.chart_type === "scatter" ? numericFields[0]?.code : undefined) ||
+    (card.query ? card.query.dimensions[0] : result.columns.find(column => column.code !== measure)?.code);
+  const rows = result.rows.map(row =>
+    Object.fromEntries(result.columns.map((column, index) => [column.code, row.values[index] ?? ""]))
+  );
+  const measures = config.encoding.measures?.length
+    ? config.encoding.measures
+    : card.query?.measures.length
+      ? card.query.measures.map(item => item.code)
+      : [measure];
+  return {
+    chart: {
+      id: `card_${card.id}`,
+      datasetId: `card_${card.id}`,
+      type: card.chart_type,
+      encoding: {
+        dimension,
+        measure,
+        measures: ["bar", "line", "area"].includes(card.chart_type) && measures.length > 1 ? measures : undefined,
+        series: card.chart_type === "scatter" ? undefined : card.query?.dimensions[1],
+        ...config.encoding
+      },
+      aggregation: "none",
+      style: {
+        showLabel: false,
+        showLegend: measures.length > 1 || card.chart_type === "pie" || card.chart_type === "donut",
+        ...config.style
+      }
+    },
+    rows,
+    metrics: measures.map(code => ({
+      code,
+      name: result.columns.find(column => column.code === code)?.name || code,
+      value: String(rows[0]?.[code] ?? "—")
+    })),
+    metricOnly: card.chart_type === "metric"
+  };
+}
+
+/** 数据卡片统一保存字段映射与受控样式。 */
+export interface CardChartConfig {
+  encoding: BiChartEncoding;
+  style: Pick<BiChartStyle, "showLabel" | "showLegend" | "stack" | "dataZoom" | "palette">;
+}
+
+/** 从服务端配置读取图表字段，预览卡片允许使用默认映射。 */
+export function parseCardChart(card: Pick<BiCard, "chart_json">): CardChartConfig {
+  return card.chart_json
+    ? (JSON.parse(card.chart_json) as CardChartConfig)
+    : { encoding: {}, style: { showLegend: true, showLabel: false } };
+}
+
+/** 仅在卡片明确指定时间字段或只有一个可过滤日期分组时开放周期切换。 */
+export function supportsCardPeriod(card: BiCard, source?: BiSourceDescriptor): boolean {
+  const fields =
+    source?.dimensions.filter(
+      dimension =>
+        dimension.type === "date" &&
+        dimension.filterable &&
+        (card.query?.time_range
+          ? dimension.code === card.query.time_range.field
+          : card.query?.dimensions.includes(dimension.code))
+    ) ?? [];
+  return fields.length === 1;
+}
+
+/** 计算刷新等待时间，86400对应浏览器本地时区的下一次02:00。 */
+export function cardRefreshDelay(seconds: number, now = new Date()): number {
+  if (seconds !== 86400) return seconds * 1000;
+  const next = new Date(now.getTime());
+  next.setHours(2, 0, 0, 0);
+  if (next.getTime() <= now.getTime()) next.setDate(next.getDate() + 1);
+  return next.getTime() - now.getTime();
+}
+
+/** 按当前四种界面语言的分组习惯显示数字字符串，不转换浮点数或丢弃小数位。 */
+export function formatCardMetric(value: string): string {
+  if (!/^[+-]?\d+(?:\.\d+)?$/.test(value)) return value;
+  const [integer, fraction] = value.split(".");
+  return integer.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (fraction === undefined ? "" : "." + fraction);
+}
+
+/** 保持工作台入口顺序，忽略已删除或撤销权限的仪表盘。 */
+export function orderWorkbenchDashboards(ids: number[], dashboards: BiDashboard[]): BiDashboard[] {
+  const byID = new Map(dashboards.map(item => [item.id, item]));
+  return ids.flatMap(id => {
+    const item = byID.get(id);
+    return item ? [item] : [];
+  });
+}

package/dist/package/src/components/BiCardChartEditor.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="bi-card-chart-editor">
+    <div class="bi-card-chart-editor__types">
+      <el-button
+        v-for="type in types"
+        :key="type"
+        :type="type === chartType ? 'primary' : 'default'"
+        :plain="type !== chartType"
+        :disabled="Boolean(reason(type))"
+        :title="reason(type)"
+        @click="changeType(type)"
+        >{{ type === "metric" ? t("bi.card.chart.metric") : messages(`types.${type}`) }}</el-button
+      >
+    </div>
+    <p class="bi-card-chart-editor__hint">{{ t("bi.card.chart_hint") }}</p>
+    <el-form label-position="top">
+      <el-form-item v-if="chartType !== 'metric' && chartType !== 'gauge'" :label="t('bi.card.dimension_field')">
+        <el-select :model-value="modelValue.encoding.dimension || dimensionFields[0]?.code" @change="patchEncoding({ dimension: $event })"
+          ><el-option v-for="field in dimensionFields" :key="field.code" :value="field.code" :label="field.name"
+        /></el-select>
+      </el-form-item>
+      <el-form-item :label="t('bi.card.value_field')"
+        ><el-select :model-value="modelValue.encoding.measure || numbers[chartType === 'scatter' ? 1 : 0]?.code" @change="patchEncoding({ measure: $event })"
+          ><el-option v-for="field in numbers" :key="field.code" :value="field.code" :label="field.name" /></el-select
+      ></el-form-item>
+      <el-form-item v-if="['sankey', 'heatmap', 'sunburst'].includes(chartType)" :label="t('bi.card.series_field')"
+        ><el-select :model-value="modelValue.encoding.series || categories[1]?.code" @change="patchEncoding({ series: $event })"
+          ><el-option v-for="field in categories" :key="field.code" :value="field.code" :label="field.name" /></el-select
+      ></el-form-item>
+      <el-form-item v-if="['bar', 'line', 'area'].includes(chartType)" :label="t('bi.card.measure')"
+        ><el-checkbox-group
+          :model-value="modelValue.encoding.measures || []"
+          @change="patchEncoding({ measures: $event as string[] })"
+          ><el-checkbox v-for="field in numbers" :key="field.code" :value="field.code">{{
+            field.name
+          }}</el-checkbox></el-checkbox-group
+        ></el-form-item
+      >
+      <div class="bi-card-chart-editor__style">
+        <el-checkbox :model-value="modelValue.style.showLegend" @change="patchStyle({ showLegend: Boolean($event) })">{{
+          t("bi.card.show_legend")
+        }}</el-checkbox
+        ><el-checkbox :model-value="modelValue.style.showLabel" @change="patchStyle({ showLabel: Boolean($event) })">{{
+          t("bi.card.show_label")
+        }}</el-checkbox
+        ><el-checkbox :model-value="modelValue.style.stack" @change="patchStyle({ stack: Boolean($event) })">{{
+          t("bi.card.stack")
+        }}</el-checkbox
+        ><el-checkbox :model-value="modelValue.style.dataZoom" @change="patchStyle({ dataZoom: Boolean($event) })">{{
+          t("bi.card.data_zoom")
+        }}</el-checkbox>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+import { t } from "@liujitcn/kratos-admin-core";
+import type { BiQueryResult, BiQuerySpec } from "../rpc/bi/admin/v1/bi_query";
+import type { CardChartConfig } from "../card-schema";
+import type { BiChartEncoding } from "../schema/types";
+import { getChartTypes } from "../engine/chart-types";
+import { useBiI18n } from "../env";
+const props = defineProps<{ modelValue: CardChartConfig; chartType: string; query: BiQuerySpec; result?: BiQueryResult }>();
+const emit = defineEmits<{ "update:modelValue": [value: CardChartConfig]; "update:chartType": [value: string] }>();
+const { t: messages } = useBiI18n();
+const types = [...getChartTypes(), "metric"];
+const numbers = computed(
+  () =>
+    props.result?.columns.filter(field => field.type === "number") ??
+    props.query.measures.map(field => ({ code: field.code, name: field.code, type: "number" }))
+);
+const categories = computed(() =>
+  props.query.dimensions.map(
+    code => props.result?.columns.find(field => field.code === code) ?? { code, name: code, type: "string" }
+  )
+);
+const dimensionFields = computed(() => (props.chartType === "scatter" ? numbers.value : categories.value));
+/** 根据真实结果结构启用图型，避免产生不能渲染的卡片。 */
+function reason(type: string): string {
+  if (["metric", "gauge"].includes(type)) return props.query.dimensions.length ? t("bi.card.need_ungrouped") : "";
+  if (type === "scatter") return numbers.value.length < 2 ? t("bi.card.need_two_numbers") : "";
+  if (["sankey", "heatmap", "sunburst"].includes(type))
+    return categories.value.length < 2 ? t("bi.card.need_two_dimensions") : "";
+  return categories.value.length ? "" : t("bi.card.need_dimension");
+}
+/** 切换图型时复用当前查询结果，并补齐该图型的默认字段映射。 */
+function changeType(type: string) {
+  emit("update:chartType", type);
+  emit("update:modelValue", {
+    encoding: {
+      dimension: type === "scatter" ? numbers.value[0]?.code : categories.value[0]?.code,
+      measure: type === "scatter" ? numbers.value[1]?.code : numbers.value[0]?.code,
+      series: type === "scatter" ? undefined : categories.value[1]?.code,
+      measures:
+        ["bar", "line", "area"].includes(type) && categories.value.length < 2 ? numbers.value.map(field => field.code) : undefined
+    },
+    style: { ...props.modelValue.style }
+  });
+}
+/** 同步字段映射，不重新执行已完成的查询。 */
+function patchEncoding(value: Partial<BiChartEncoding>) {
+  emit("update:modelValue", { ...props.modelValue, encoding: { ...props.modelValue.encoding, ...value } });
+}
+/** 同步受控样式选项。 */
+function patchStyle(value: Partial<CardChartConfig["style"]>) {
+  emit("update:modelValue", { ...props.modelValue, style: { ...props.modelValue.style, ...value } });
+}
+</script>
+<style scoped>
+.bi-card-chart-editor__types {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+.bi-card-chart-editor__types :deep(.el-button) {
+  margin: 0;
+  padding: 8px;
+  min-width: 0;
+}
+.bi-card-chart-editor__hint {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  margin: 10px 0 16px;
+}
+.bi-card-chart-editor__style {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 18px;
+}
+.bi-card-chart-editor :deep(.el-select) {
+  width: 100%;
+}
+@media (max-width: 600px) {
+  .bi-card-chart-editor__types {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+</style>