* 输入「模板 Schema + 报告上下文」，输出可直接打印的 HTML 文档。 * 渲染顺序固定为「先判定、后渲染」：PASS/FAIL 由 report-evaluator 算好写进上下文， * 模板里只做取值，因此同一份数据在任何模板下判定一致，模板也无法左右判定结果。 *
* 这里不依赖 GrapesJS，只吃 GrapesJS 导出的项目数据（组件树 + 样式），
* 后续换成服务端渲染时这套投影逻辑可以照搬。
*/
import type { ReportContext } from './context';
import type { QualityRuleDefinition } from './report-evaluator';
import {
QUALITY_ID_ATTR,
QUALITY_PROP_PREFIX,
QUALITY_REPEAT_ATTR,
QUALITY_REPEAT_ROW_ATTR,
QUALITY_TYPE_ATTR,
} from '../core/attrs';
import { cssStyle, escapeHtml } from '../core/html';
import { resolveTextWithReport } from './binding';
import type { PageSetting } from './page';
import { readPath } from './path';
import { evaluateReport } from './report-evaluator';
import { resolvePageMm } from './page';
/** 渲染用到的 GrapesJS 项目数据节点（只声明渲染需要的字段） */
export interface RenderNode {
attributes?: Record
* 项目数据只在标签与类型默认值不同时才写 tagName（例如 th、span、h2），
* 表格结构（table/thead/tbody/row/cell）在数据里都只有 type，
* 所以漏掉这张表就会把整张表格渲染成一堆 div。未收录的类型回退到 div，
* 与 GrapesJS 基础组件的默认标签一致。
*/
const TYPE_TAGS: Record
* 有子组件时忽略 content——与 GrapesJS 一致：往一个带文本的组件里再拖入组件后，
* 文本就让位给子组件，这里必须同规则，否则渲染产物会和设计器看到的不一样。
*/
function renderChildren(node: RenderNode, state: RenderState): string {
if (Array.isArray(node.components) && node.components.length > 0) {
return node.components.map((child) => renderNode(child, state)).join('');
}
return typeof node.content === 'string' ? renderText(node.content, state) : '';
}
/**
* 重复容器：按数组路径展开行模板，其余子节点在原位置渲染一次。
*
* 行模板上的 data-qc-repeat-row 声明了行内的循环变量名（如 item），
* 行内容用 {{item.xxx}} 取值，与设计期在组件里约定的绑定路径一致。
*/
function renderRepeat(node: RenderNode, path: string, state: RenderState): string {
const list = toRowList(readPath(state.scope, path));
const children = Array.isArray(node.components) ? node.components : [];
const inner = children
.map((child) => {
const rowVar = child.attributes?.[QUALITY_REPEAT_ROW_ATTR];
if (!rowVar) {
return renderNode(child, state);
}
return list
.map((element, index) => {
const rowState: RenderState = {
...state,
scope: { ...state.scope, [rowVar]: element, index: index + 1 },
where: `第 ${index + 1} 行`,
};
return renderNode(child, rowState);
})
.join('');
})
.join('');
const tag = resolveTag(node);
return `<${tag}${renderAttributes(node, state)}${renderStyle(node)}>${inner}`;
}
/** 非数组按单行处理，空值得到空表；比抛错更贴合"数据没填全"的报告场景 */
function toRowList(value: unknown): unknown[] {
if (Array.isArray(value)) {
return value;
}
if (value === undefined || value === null) {
return [];
}
return [value];
}
/**
* 渲染节点属性。
*
* 设计器标记（data-quality-type / data-qc-*）不进入产物；
* 属性值里的 {{path}} 一并解析，图片地址、链接等也能绑定数据。
*/
function renderAttributes(node: RenderNode, state: RenderState): string {
const attributes = node.attributes ?? {};
const parts: string[] = [];
Object.entries(attributes).forEach(([name, value]) => {
if (name === QUALITY_TYPE_ATTR || name.startsWith(QUALITY_PROP_PREFIX)) {
return;
}
const text = renderText(String(value ?? ''), state);
if (text === '') {
return;
}
// GrapesJS 的组件 id 换成 data 属性：重复行里 id 会重名，data 属性不会
parts.push(` ${name === 'id' ? QUALITY_ID_ATTR : name}="${escapeHtml(text)}"`);
});
return parts.join('');
}
/** 节点自身的行内样式 */
function renderStyle(node: RenderNode): string {
const style = cssStyle(node.style ?? {});
return style ? ` style="${escapeHtml(style)}"` : '';
}
/** 取文本里的绑定值，取不到的路径记进问题清单（未解析的 {{}} 不会留在产物里） */
function renderText(template: string, state: RenderState): string {
return resolveTextWithReport(template, state.scope, (path) => {
const key = `${state.where}|${path}`;
if (state.reported.has(key)) {
return;
}
state.reported.add(key);
state.errors.push(`${state.where}绑定「{{${path}}}」在当前数据中取不到值，已渲染为空`);
});
}
/** 样式规则数组 → CSS 文本；GrapesJS 用 #组件id 选择器，这里改写成 data 属性选择器 */
function buildCss(styles: RenderStyleRule[] | string | undefined): string {
if (typeof styles === 'string') {
return styles;
}
if (!Array.isArray(styles)) {
return '';
}
const blocks: string[] = [];
const mediaBlocks = new Map