@veltra/sheet 2.3.3 → 2.4.0

package/dist/report/print.js

@@ -0,0 +1,197 @@
+import { BORDER_SIDES } from "@veltra/sheet-core";
+//#region src/report/print.ts
+/**
+* 默认列宽 / 行高（px）：与 grid 层 vtable-theme 的
+* SHEET_DEFAULT_COL_WIDTH / SHEET_DEFAULT_ROW_HEIGHT 对齐；
+* report 内核保持 headless，不引 grid 入口。
+*/
+const PRINT_DEFAULT_COL_WIDTH = 80;
+const PRINT_DEFAULT_ROW_HEIGHT = 28;
+const IMAGE_MIME = {
+	png: "image/png",
+	jpeg: "image/jpeg",
+	gif: "image/gif",
+	svg: "image/svg+xml",
+	webp: "image/webp"
+};
+/** 模型边框线型 → CSS 线型（thin/medium/thick 为实线粗细分级，宽度由 edge.width 表达） */
+const BORDER_CSS_LINE = {
+	thin: "solid",
+	medium: "solid",
+	thick: "solid",
+	dashed: "dashed",
+	dotted: "dotted"
+};
+function escapeHtml(text) {
+	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr(text) {
+	return escapeHtml(text).replace(/"/g, "&quot;");
+}
+/** Uint8Array → base64（分块避免栈溢出；btoa 在浏览器 / Node >=16 / Bun / happy-dom 均可用） */
+function bytesToBase64(data) {
+	let binary = "";
+	const CHUNK = 32768;
+	for (let i = 0; i < data.length; i += CHUNK) binary += String.fromCharCode(...data.subarray(i, i + CHUNK));
+	return btoa(binary);
+}
+/** 模型有效样式 → td 内联 CSS（字号 pt 直出，与屏幕 px ×4/3 物理尺寸一致） */
+function styleToCss(style) {
+	const decls = [];
+	if (style.fill?.color) decls.push(`background-color:${style.fill.color}`);
+	for (const side of BORDER_SIDES) {
+		const edge = style.border?.[side];
+		if (edge) decls.push(`border-${side}:${edge.width}px ${BORDER_CSS_LINE[edge.style]} ${edge.color}`);
+	}
+	const font = style.font;
+	if (font) {
+		if (font.color) decls.push(`color:${font.color}`);
+		if (font.bold) decls.push("font-weight:bold");
+		if (font.italic) decls.push("font-style:italic");
+		const decoration = [font.underline ? "underline" : "", font.strikethrough ? "line-through" : ""].filter(Boolean).join(" ");
+		if (decoration) decls.push(`text-decoration:${decoration}`);
+		if (typeof font.size === "number") decls.push(`font-size:${font.size}pt`);
+	}
+	const align = style.align;
+	if (align) {
+		if (align.horizontal) decls.push(`text-align:${align.horizontal}`);
+		if (align.vertical) decls.push(`vertical-align:${align.vertical}`);
+		if (align.wrap) decls.push("white-space:normal;word-break:break-all");
+	}
+	return decls.join(";");
+}
+/**
+* 浮动图打印定位（镜像 grid image-layer `computeImageRect`）：
+* left/top = from 格左上 + 格内像素偏移；宽高优先 image.width/height（两者都有才用），
+* 缺失且有 to 时按 from→to 跨度兜底，都缺失则省略尺寸（浏览器取自然尺寸）。
+*/
+function computePrintImageRect(image, colWidths, rowHeights) {
+	const { from, to } = image.anchor;
+	let left = from.offsetX ?? 0;
+	for (let c = 0; c < from.col; c++) left += colWidths[c] ?? PRINT_DEFAULT_COL_WIDTH;
+	let top = from.offsetY ?? 0;
+	for (let r = 0; r < from.row; r++) top += rowHeights[r] ?? PRINT_DEFAULT_ROW_HEIGHT;
+	if (image.width != null && image.height != null) return {
+		left,
+		top,
+		width: image.width,
+		height: image.height
+	};
+	if (to) {
+		let width = 0;
+		for (let c = from.col; c <= to.col; c++) width += colWidths[c] ?? PRINT_DEFAULT_COL_WIDTH;
+		let height = 0;
+		for (let r = from.row; r <= to.row; r++) height += rowHeights[r] ?? PRINT_DEFAULT_ROW_HEIGHT;
+		return {
+			left,
+			top,
+			width,
+			height
+		};
+	}
+	return {
+		left,
+		top
+	};
+}
+/**
+* 将已填充的 Sheet（Filled Report）构建为打印专用 HTML 文档（纯 TS、headless、无 DOM）。
+*
+* 路线说明：网格渲染层是 canvas + 虚拟滚动（视口外不绘制），无法直接 window.print；
+* 这里从模型单一事实源（与 exportFilledReportXlsx 同一读取路径）重建 `<table>`——
+* 矢量文字清晰、浏览器原生分页、合并格天然映射 rowspan/colspan。
+*
+* 保真范围：值 / 合并 / 有效样式（fill + border + font + align/wrap，条件样式已在
+* 展开阶段打平进 StylePool）/ 行高 / 列宽 / 浮动图（data URL 内嵌，跨页被裁剪属预期）。
+* 与 Excel 默认一致：不打印屏幕网格线（仅模型显式边框）。
+*/
+function buildFilledReportPrintHtml(sheet, options) {
+	const title = options?.title ?? sheet.name ?? "";
+	const orientation = options?.orientation ?? "portrait";
+	let maxRow = -1;
+	let maxCol = -1;
+	const grow = (row, col) => {
+		if (row > maxRow) maxRow = row;
+		if (col > maxCol) maxCol = col;
+	};
+	for (const [addr] of sheet.store.peekEntries()) grow(addr.row, addr.col);
+	for (const [row] of sheet.getRowHeights()) grow(row, 0);
+	for (const [col] of sheet.getColWidths()) grow(0, col);
+	const merges = sheet.merges.getMerges();
+	for (const range of merges) grow(range.end.row, range.end.col);
+	const images = sheet.getImages();
+	for (const image of images) {
+		grow(image.anchor.from.row, image.anchor.from.col);
+		if (image.anchor.to) grow(image.anchor.to.row, image.anchor.to.col);
+	}
+	const colWidths = [];
+	for (let c = 0; c <= maxCol; c++) colWidths.push(sheet.getColWidth(c) ?? PRINT_DEFAULT_COL_WIDTH);
+	const rowHeights = [];
+	for (let r = 0; r <= maxRow; r++) rowHeights.push(sheet.getRowHeight(r) ?? PRINT_DEFAULT_ROW_HEIGHT);
+	const spanByAnchor = /* @__PURE__ */ new Map();
+	const covered = /* @__PURE__ */ new Set();
+	for (const range of merges) {
+		const rowSpan = range.end.row - range.start.row + 1;
+		const colSpan = range.end.col - range.start.col + 1;
+		spanByAnchor.set(`${range.start.row},${range.start.col}`, {
+			rowSpan,
+			colSpan
+		});
+		for (let r = range.start.row; r <= range.end.row; r++) for (let c = range.start.col; c <= range.end.col; c++) if (r !== range.start.row || c !== range.start.col) covered.add(`${r},${c}`);
+	}
+	const css = [
+		`@page { size: A4 ${orientation}; margin: 12mm; }`,
+		"html, body { margin: 0; padding: 0; }",
+		"body { font-family: Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; font-size: 12px; color: #1f2329; -webkit-print-color-adjust: exact; print-color-adjust: exact; }",
+		".sheet-print-root { position: relative; }",
+		"table { border-collapse: collapse; table-layout: fixed; }",
+		"tr { break-inside: avoid; }",
+		"td { box-sizing: border-box; padding: 2px 6px; overflow: hidden; white-space: nowrap; vertical-align: middle; text-align: left; }",
+		".sheet-print-root img { position: absolute; }"
+	].join("\n");
+	const parts = [];
+	parts.push("<!doctype html><html><head><meta charset=\"utf-8\">");
+	parts.push(`<title>${escapeHtml(title || "报表")}</title>`);
+	parts.push(`<style>\n${css}\n</style></head><body>`);
+	parts.push("<div class=\"sheet-print-root\">");
+	parts.push("<table>");
+	if (colWidths.length > 0) {
+		parts.push("<colgroup>");
+		for (const width of colWidths) parts.push(`<col style="width:${width}px">`);
+		parts.push("</colgroup>");
+	}
+	for (let r = 0; r <= maxRow; r++) {
+		parts.push(`<tr style="height:${rowHeights[r]}px">`);
+		for (let c = 0; c <= maxCol; c++) {
+			if (covered.has(`${r},${c}`)) continue;
+			const attrs = [];
+			const span = spanByAnchor.get(`${r},${c}`);
+			if (span && span.colSpan > 1) attrs.push(`colspan="${span.colSpan}"`);
+			if (span && span.rowSpan > 1) attrs.push(`rowspan="${span.rowSpan}"`);
+			const style = sheet.getEffectiveStyle({
+				row: r,
+				col: c
+			});
+			const cellCss = style ? styleToCss(style) : "";
+			if (cellCss) attrs.push(`style="${escapeAttr(cellCss)}"`);
+			const value = sheet.getDisplayValue({
+				row: r,
+				col: c
+			});
+			const text = value == null ? "" : escapeHtml(String(value));
+			parts.push(`<td${attrs.length > 0 ? ` ${attrs.join(" ")}` : ""}>${text}</td>`);
+		}
+		parts.push("</tr>");
+	}
+	parts.push("</table>");
+	for (const image of images) {
+		const rect = computePrintImageRect(image, colWidths, rowHeights);
+		const size = rect.width != null && rect.height != null ? `width:${rect.width}px;height:${rect.height}px;` : "";
+		const src = `data:${IMAGE_MIME[image.type]};base64,${bytesToBase64(image.data)}`;
+		parts.push(`<img src="${src}" style="left:${rect.left}px;top:${rect.top}px;${size}" alt="${escapeAttr(image.altText ?? "")}">`);
+	}
+	parts.push("</div></body></html>");
+	return parts.join("");
+}
+//#endregion
+export { buildFilledReportPrintHtml };

package/dist/report/render/aggregate.js

@@ -165,5 +165,29 @@ function resolvePlacementRecord(placement, index, data, aggregateIndex) {
 	const filter = resolveAncestorFilters(binding, placement, index, data);
 	return aggregateIndex.rowsFor(binding.dataset, filter)[placement.listIndex];
 }
+/**
+* 解析落点的上下文记录（下钻字段映射用）：
+* `list` 明细取源数据行；分组/汇总格取祖先分组过滤值合成的上下文
+* （分组格含自身分组值，如地区分组格 → `{ region: '华东' }`；
+* 汇总聚合格如 sum/avg/count/max/min 也将本格聚合计算值并入上下文，如 `{ region: '华东', total: 300 }`）。
+*/
+function resolvePlacementContext(placement, index, data, aggregateIndex) {
+	const binding = placement.binding;
+	if (!binding) return void 0;
+	if (binding.aggregate === "list") return resolvePlacementRecord(placement, index, data, aggregateIndex);
+	const filter = resolveAncestorFilters(binding, placement, index, data);
+	if (binding.aggregate === "group") {
+		const value = filter[binding.field] ?? resolveOwnGroupValue(binding, placement, index, data);
+		return value === void 0 ? filter : {
+			...filter,
+			[binding.field]: value
+		};
+	}
+	const value = resolvePlacementValue(placement, index, data, aggregateIndex);
+	return value === void 0 ? filter : {
+		...filter,
+		[binding.field]: value
+	};
+}
 //#endregion
-export { AggregateIndex, aggregateField, resolvePlacementRecord, resolvePlacementValue };
+export { AggregateIndex, aggregateField, resolvePlacementContext, resolvePlacementRecord, resolvePlacementValue };

package/dist/report/types.d.ts

@@ -24,6 +24,22 @@ interface ConditionalRule {
   /** 作用范围；缺省 `'cell'` */
   scope?: 'cell' | 'row';
 }
+/** 绑定格下钻配置（存于 Cell Meta namespace `report`，随绑定序列化；旧查看器忽略该字段） */
+interface ReportDrillConfig {
+  /** 目标模板引用（宿主模板列表项的 ref，不支持手填） */
+  target: string;
+  /** 字段 → 详情报参数映射：源记录字段名 → 目标报表 Filter Bar 参数 id */
+  mapping: Record<string, string>;
+  /** 打开方式：查看器内切换 | UDialog 弹框 */
+  openMode: 'switch' | 'dialog';
+}
+/** 宿主提供的可下钻模板列表项（设计器下拉与查看器 resolveTemplate 契约共用） */
+interface ReportTemplateListItem {
+  /** 模板引用，作为下钻 target 并传给宿主 resolveTemplate */
+  ref: string;
+  /** 可读名，用于设计器下拉展示 */
+  label: string;
+}
 /** 设计格上的报表绑定（存于 Cell Meta namespace `report`） */
 interface ReportBinding {
   dataset: string;
@@ -42,6 +58,8 @@ interface ReportBinding {
   conditionalRules?: ConditionalRule[];
   /** 设计器预设；引擎不读 */
   preset?: ReportPreset;
+  /** 下钻配置；缺省不可下钻 */
+  drill?: ReportDrillConfig;
 }
 /**
  * 字段 schema（来自数据集配置，非运行时推断）。
@@ -82,4 +100,4 @@ interface QueryParamDef {
 /** 运行时参数值 */
 type ParamValues = Record<string, unknown>;
 //#endregion
-export { ConditionalOperator, ConditionalRule, DatasetCatalogItem, DatasetField, DatasetRecords, ParamValues, QueryParamDef, QueryParamOption, QueryParamType, ReportAggregate, ReportBinding, ReportExpand, ReportPreset, ReportSort };
+export { ConditionalOperator, ConditionalRule, DatasetCatalogItem, DatasetField, DatasetRecords, ParamValues, QueryParamDef, QueryParamOption, QueryParamType, ReportAggregate, ReportBinding, ReportDrillConfig, ReportExpand, ReportPreset, ReportSort, ReportTemplateListItem };

package/dist/tools/download.js

@@ -2,7 +2,7 @@ import { saveBlob } from "@cat-kit/fe";
 import { exportSheetCsv, exportWorkbookXlsx } from "@veltra/sheet-core/core/io/export";
 //#region src/tools/download.ts
 /**
-* 大工作簿的 XLSX 导出（hucre 序列化 + ZIP 压缩为秒级同步重活）移入 Web Worker：
+* 大工作簿的 XLSX 导出（sheet-core 序列化 + ZIP 压缩为秒级同步重活）移入 Web Worker：
 * 主线程只采集快照（结构化克隆友好的纯数据，行高随 SheetSnapshot.rowHeights
 * 携带），序列化与压缩在 worker 线程进行。worker 不可用（极端环境 / 打包产物
 * 缺文件）回退主线程导出——与导入侧 parseXlsxAsync 同一模式。
@@ -48,7 +48,7 @@ async function exportWorkbookXlsxAsync(workbook) {
 /**
 * 导出当前工作簿为 .xlsx（无 workbook 时空操作）。
 * 下载动作复用 @cat-kit/fe 的 saveBlob（#28：不再自研 Object URL + a.click）。
-* hucre 1.0 起 writeXlsx 会校验 sheet 名（Excel 非法字符 / 超长 / 保留名）并抛
+* 导出侧 sheet-core 的 writeXlsx 会校验 sheet 名（Excel 非法字符 / 超长 / 保留名）并抛
 * InvalidArgumentError——失败经返回的 Promise 传播，调用方（导出面板）负责提示。
 */
 async function exportWorkbookFile(ctx) {

package/dist/types/report-designer.d.ts

@@ -1,5 +1,7 @@
+import { ReportTemplateListItem } from "../report/types.js";
 import { DataConnection, DataConnector } from "../report/connector.js";
 import { ReportTemplate } from "../report/template.js";
+import { ResolveReportTemplate } from "../report/drill.js";
 import "../report/index.js";
 import { DeconstructValue } from "@veltra/utils";
 import { Workbook } from "@veltra/sheet-core/core/workbook";
@@ -20,6 +22,17 @@ interface ReportDesignerProps {
   template?: ReportTemplate;
   /** 承载设计态的工作簿（USheet 先例：缺省内部自建单 sheet 工作簿） */
   workbook?: Workbook;
+  /**
+   * 宿主提供的可下钻目标模板列表（ref + 可读名）：
+   * 传入后绑定格 Action Pill 出现下钻配置入口（目标仅从列表选择，不支持手填引用）；不传则无入口
+   */
+  drillTemplates?: ReportTemplateListItem[];
+  /**
+   * 宿主模板解析契约（按下钻 target 引用取回目标模板，失败抛错）：
+   * 下钻配置对话框据此解析目标模板的查询参数（字段→参数映射）；
+   * 预览模式原样转发给内嵌 UReportViewer，使预览内可下钻（含 switch / dialog）与逐级回退
+   */
+  resolveTemplate?: ResolveReportTemplate;
 }
 /** 报表设计器组件定义的事件 */
 interface ReportDesignerEmits {

package/dist/types/report-viewer.d.ts

@@ -1,6 +1,9 @@
+import { ParamValues } from "../report/types.js";
 import { ReportColWidthEntry } from "../report/export-xlsx.js";
 import { DataConnector } from "../report/connector.js";
 import { ReportTemplate } from "../report/template.js";
+import { ResolveReportTemplate } from "../report/drill.js";
+import { ReportPrintOptions } from "../report/print.js";
 import "../report/index.js";
 import { DeconstructValue } from "@veltra/utils";
 import { Workbook } from "@veltra/sheet-core/core/workbook";
@@ -21,6 +24,17 @@ interface ReportViewerProps {
    * 列宽已进 `SheetSnapshot.colWidths`，通常无需再传。
    */
   colWidths?: ReadonlyArray<ReportColWidthEntry>;
+  /**
+   * 下钻目标模板解析契约（可选，内核共享类型）：单击配了下钻的绑定格时按 `target` 引用取目标模板。
+   * 解析失败（抛错 / reject，或宿主实现返回空值）时查看器给出可读提示并停留当前报。
+   * 缺省时下钻不生效（无点击行为与可点视觉提示）。
+   */
+  resolveTemplate?: ResolveReportTemplate;
+  /**
+   * Filter Bar 初值（可选）：与当前模板参数默认值合并，显式键覆盖默认值。
+   * 仅在根模板载入时播种（下钻弹框传入映射参数）；缺省则只用参数默认值。
+   */
+  initialValues?: ParamValues;
 }
 /** 在组件内部引用 */
 interface _ReportViewerExposed {
@@ -31,6 +45,11 @@ interface _ReportViewerExposed {
    * 不内置导出按钮，工具栏由下游决定。
    */
   exportXlsx: () => Promise<void>;
+  /**
+   * 打印填充报表（纯前端：模型 → 打印 HTML → 隐藏 iframe 调起浏览器打印；
+   * 取数完成前拒绝）。不内置打印按钮，工具栏由下游决定。
+   */
+  print: (options?: ReportPrintOptions) => void;
 }
 /** 报表查看器组件暴露的方法 */
 type ReportViewerExposed = DeconstructValue<_ReportViewerExposed>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/sheet",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"
@@ -33,18 +33,15 @@
       "import": "./dist/*"
     }
   },
-  "dependencies": {
-    "hucre": "^1.1.0"
-  },
   "peerDependencies": {
     "@cat-kit/core": ">=1.1.8",
     "@cat-kit/fe": ">=1.1.8",
-    "@veltra/compositions": "^1.6.4",
-    "@veltra/desktop": "^1.6.4",
+    "@veltra/compositions": "^1.6.5",
+    "@veltra/desktop": "^1.6.5",
     "@veltra/icons": "^1.5.0",
-    "@veltra/sheet-core": "^2.3.3",
-    "@veltra/styles": "^1.6.4",
-    "@veltra/utils": "^1.6.4",
+    "@veltra/sheet-core": "^2.4.0",
+    "@veltra/styles": "^1.6.5",
+    "@veltra/utils": "^1.6.5",
     "vue": ">=3.5.41"
   }
 }

package/src/components/report/__test__/binding-badge.test.ts

@@ -0,0 +1,92 @@
+import { Sheet } from '@veltra/sheet-core'
+import type { CellAddress } from '@veltra/sheet-core'
+import { describe, expect, it } from 'vitest'
+
+import { REPORT_META_NAMESPACE, createReportBinding } from '../../../report/binding'
+import type { DatasetCatalogItem, ReportBinding } from '../../../report/types'
+import { badgeLayoutProps, createBindingBadgeRenderer } from '../binding-badge'
+
+// ---- 内联 fixtures ----
+
+const ORDERS_DATASET: DatasetCatalogItem = {
+  id: 'orders',
+  label: '销售明细',
+  fields: [
+    { name: 'customer', label: '客户', type: 'string' },
+    { name: 'amount', label: '金额', type: 'number' }
+  ]
+}
+
+const ADDR = { row: 1, col: 3 }
+
+function bindingMap(entries: Array<{ addr: CellAddress; binding: ReportBinding }>) {
+  const map = new Map<string, ReportBinding>()
+  for (const { addr, binding } of entries) map.set(`${addr.row},${addr.col}`, binding)
+  return (addr: CellAddress) => map.get(`${addr.row},${addr.col}`)
+}
+
+describe('badgeLayoutProps（单元格对齐 → 徽章容器 flex 映射）', () => {
+  it('缺省对齐 → 主轴起点 + 交叉轴居中（向后兼容）', () => {
+    expect(badgeLayoutProps(undefined)).toEqual({
+      justifyContent: 'flex-start',
+      alignItems: 'center'
+    })
+    expect(badgeLayoutProps({})).toEqual({ justifyContent: 'flex-start', alignItems: 'center' })
+  })
+
+  it('horizontal center / right / left → justifyContent', () => {
+    expect(badgeLayoutProps({ horizontal: 'center' }).justifyContent).toBe('center')
+    expect(badgeLayoutProps({ horizontal: 'right' }).justifyContent).toBe('flex-end')
+    expect(badgeLayoutProps({ horizontal: 'left' }).justifyContent).toBe('flex-start')
+  })
+
+  it('vertical bottom / top / middle → alignItems', () => {
+    expect(badgeLayoutProps({ vertical: 'bottom' }).alignItems).toBe('flex-end')
+    expect(badgeLayoutProps({ vertical: 'top' }).alignItems).toBe('flex-start')
+    expect(badgeLayoutProps({ vertical: 'middle' }).alignItems).toBe('center')
+  })
+})
+
+describe('createBindingBadgeRenderer', () => {
+  it('未绑定格返回 undefined 回落默认渲染', () => {
+    const renderer = createBindingBadgeRenderer(bindingMap([]))
+    expect(renderer(ADDR, undefined)).toBeUndefined()
+  })
+
+  it('绑定格不传 resolveAlign 保持左对齐徽章（向后兼容）', () => {
+    const binding = createReportBinding(ORDERS_DATASET, 'amount')
+    const renderer = createBindingBadgeRenderer(bindingMap([{ addr: ADDR, binding }]))
+    const layout = renderer(ADDR, undefined)
+    expect(layout?.renderDefault).toBe(false)
+    expect(layout?.rootContainer.attribute.justifyContent).toBe('flex-start')
+    expect(layout?.rootContainer.attribute.alignItems).toBe('center')
+  })
+
+  it('绑定格容器跟随 resolveAlign 的水平 / 垂直对齐', () => {
+    const binding = createReportBinding(ORDERS_DATASET, 'amount')
+    const renderer = createBindingBadgeRenderer(
+      bindingMap([{ addr: ADDR, binding }]),
+      undefined,
+      () => ({ horizontal: 'center', vertical: 'bottom' })
+    )
+    const layout = renderer(ADDR, undefined)
+    expect(layout?.rootContainer.attribute.justifyContent).toBe('center')
+    expect(layout?.rootContainer.attribute.alignItems).toBe('flex-end')
+  })
+
+  it('接线冒烟：经 Sheet.getEffectiveStyle 读取有效样式对齐（含行默认样式叠加）', () => {
+    const sheet = new Sheet()
+    sheet.setCellMeta(ADDR, REPORT_META_NAMESPACE, createReportBinding(ORDERS_DATASET, 'amount'))
+    sheet.setCellStyle({ start: ADDR, end: ADDR }, { align: { horizontal: 'center' } })
+    sheet.setRowStyle(ADDR.row, { align: { vertical: 'bottom' } })
+
+    const renderer = createBindingBadgeRenderer(
+      (addr) => sheet.getCellMeta<ReportBinding>(addr, REPORT_META_NAMESPACE),
+      undefined,
+      (addr) => sheet.getEffectiveStyle(addr)?.align
+    )
+    const layout = renderer(ADDR, undefined)
+    expect(layout?.rootContainer.attribute.justifyContent).toBe('center')
+    expect(layout?.rootContainer.attribute.alignItems).toBe('flex-end')
+  })
+})

package/src/components/report/__test__/report-designer.test.ts

@@ -1,4 +1,5 @@
 import { Workbook } from '@veltra/sheet-core'
+import { SheetGrid } from '@veltra/sheet-core/grid'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { createApp, h, nextTick, ref, type App } from 'vue'
 
@@ -6,7 +7,7 @@ import { UReportDesigner } from '../../../index'
 import { REPORT_META_NAMESPACE } from '../../../report/binding'
 import type { DataConnection, DataConnector } from '../../../report/connector'
 import type { ReportTemplate } from '../../../report/template'
-import type { ParamValues, ReportBinding } from '../../../report/types'
+import type { ParamValues, ReportBinding, ReportTemplateListItem } from '../../../report/types'
 import type { ReportDesignerExposed } from '../../../types'
 import * as cellCoords from '../designer/cell-coords'
 import * as gridOverlay from '../designer/use-grid-overlay'
@@ -64,7 +65,14 @@ function createStubConnector() {
 const apps: App[] = []
 const containers: HTMLElement[] = []
 
-function mountDesigner(workbook: Workbook, options?: { template?: ReportTemplate }) {
+function mountDesigner(
+  workbook: Workbook,
+  options?: {
+    template?: ReportTemplate
+    drillTemplates?: ReportTemplateListItem[]
+    resolveTemplate?: (ref: string) => Promise<ReportTemplate>
+  }
+) {
   const { connector, calls, state } = createStubConnector()
   const el = document.createElement('div')
   el.style.width = '960px'
@@ -80,6 +88,8 @@ function mountDesigner(workbook: Workbook, options?: { template?: ReportTemplate
         workbook,
         connections: connections.value,
         template: options?.template,
+        drillTemplates: options?.drillTemplates,
+        resolveTemplate: options?.resolveTemplate,
         'onUpdate:connections': (value: DataConnection[]) => {
           connections.value = value
         },
@@ -142,8 +152,9 @@ function dispatchFieldDragOver(target: HTMLElement, clientX = 100, clientY = 100
 afterEach(() => {
   while (apps.length) apps.pop()!.unmount()
   while (containers.length) containers.pop()!.remove()
-  // drawer Teleport 到 body，卸载后清理残留
+  // drawer / dialog Teleport 到 body，卸载后清理残留
   document.querySelectorAll('.u-drawer-overlay').forEach((node) => node.remove())
+  document.querySelectorAll('.u-dialog-overlay').forEach((node) => node.remove())
 })
 
 describe('UReportDesigner 最小闭环（数据中枢 + 拖拽绑定 + getTemplate）', () => {
@@ -347,6 +358,37 @@ describe('UReportDesigner 全量：template 载入与预览模式（内嵌查看
     saveBlobSpy.mockRestore()
   })
 
+  it('预览模式向内嵌查看器转发 resolveTemplate，预览内可下钻', async () => {
+    const workbook = new Workbook()
+    const template = buildTemplate()
+    ;(template.meta![0]!.payload as ReportBinding).drill = {
+      target: 'tpl-preview-detail',
+      mapping: { customer: 'keyword' },
+      openMode: 'switch'
+    }
+    const resolveTemplate = vi.fn(() => Promise.resolve(template))
+    const { el } = mountDesigner(workbook, { template, resolveTemplate })
+    await flush()
+
+    await click(findButton('预览模式')!)
+    expect(el.querySelector('.u-report-viewer')).toBeTruthy()
+
+    const hitSpy = vi
+      .spyOn(SheetGrid.prototype, 'hitTestSheetAddr')
+      .mockReturnValue({ row: 1, col: 0 })
+    const gridEl = el.querySelector('.u-sheet__grid-instance')!
+    gridEl.dispatchEvent(
+      new PointerEvent('pointerdown', { bubbles: true, clientX: 10, clientY: 10 })
+    )
+    gridEl.dispatchEvent(new MouseEvent('click', { bubbles: true, clientX: 10, clientY: 10 }))
+    await flush()
+    await flush()
+
+    expect(resolveTemplate).toHaveBeenCalledWith('tpl-preview-detail')
+    expect(el.querySelector('.u-report-viewer__drill-bar')).toBeTruthy()
+    hitSpy.mockRestore()
+  })
+
   it('字段拖拽 dragover 时落点高亮随 hit-test 更新；落空时提示回退当前选区', async () => {
     const workbook = new Workbook()
     workbook.activeSheet.selectCell({ row: 2, col: 1 })
@@ -461,4 +503,57 @@ describe('UReportDesigner Action Pill', () => {
     expect(panel!.querySelector('.u-report-float-panel__select--aggregate')).toBeNull()
     restore()
   })
+
+  function seedBindingCell(workbook: Workbook): void {
+    workbook.activeSheet.setCellMeta({ row: 0, col: 0 }, REPORT_META_NAMESPACE, {
+      dataset: 'ds',
+      field: 'customer',
+      aggregate: 'group',
+      expand: 'down',
+      preset: 'groupHeader'
+    } satisfies ReportBinding)
+    workbook.activeSheet.selectCell({ row: 0, col: 0 })
+  }
+
+  function findPanelButton(panel: Element, text: string): HTMLButtonElement | undefined {
+    return [...panel.querySelectorAll<HTMLButtonElement>('button')].find((button) =>
+      button.textContent?.includes(text)
+    )
+  }
+
+  it('宿主传入模板列表时绑定格 Action Pill 出现下钻入口，点击打开下钻配置对话框', async () => {
+    const workbook = new Workbook()
+    seedBindingCell(workbook)
+
+    const restore = spyOverlay()
+    const { el } = mountDesigner(workbook, {
+      drillTemplates: [{ ref: 'tpl-detail', label: '订单详情' }]
+    })
+    await flush()
+
+    const panel = el.querySelector('.u-report-float-panel')!
+    expect(panel).toBeTruthy()
+    const drillButton = findPanelButton(panel, '下钻')
+    expect(drillButton).toBeTruthy()
+
+    await click(drillButton!)
+    const dialog = document.querySelector('.u-report-drill-dialog')
+    expect(dialog).toBeTruthy()
+    expect(dialog!.textContent).toContain('目标模板')
+    restore()
+  })
+
+  it('宿主不传模板列表时下钻配置入口不出现', async () => {
+    const workbook = new Workbook()
+    seedBindingCell(workbook)
+
+    const restore = spyOverlay()
+    const { el } = mountDesigner(workbook)
+    await flush()
+
+    const panel = el.querySelector('.u-report-float-panel')!
+    expect(panel).toBeTruthy()
+    expect(findPanelButton(panel, '下钻')).toBeUndefined()
+    restore()
+  })
 })