Report Designer
TsgcHTMLComponent_ReportDesigner：在浏览器中运行的报表设计器。它编辑 TsgcHTMLReport 的定义，包括带区、项目、参数、字体和页面设置，并带有由报表引擎自己绘制的 PDF 预览。开发者用它构建应用程序的报表，最终用户无需桌面工具即可按需调整报表。适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_ReportDesigner：在浏览器中运行的报表设计器。它编辑 TsgcHTMLReport 的定义，包括带区、项目、参数、字体和页面设置，并带有由报表引擎自己绘制的 PDF 预览。开发者用它构建应用程序的报表，最终用户无需桌面工具即可按需调整报表。适用于 Delphi、C++ Builder 和 .NET。
把它链接到一个 TsgcHTMLReport 并渲染。所有编辑都在浏览器中进行，用户设计时不会发出任何请求。“保存”把定义提交到服务器，服务器验证后以 JSON 形式交给 undefined。启用 AutoApply 后，报表会立即更改，因此同一份报表的 Report Viewer 会打印新的设计。
TsgcHTMLComponent_ReportDesigner，编辑所链接的 TsgcHTMLReport 的定义
工具栏、工具箱、数据字段、带区的页面、检查器、参数和 PDF 预览，基于 Bootstrap 5.3 CSS 和 Bootstrap Icons CSS
Delphi, C++ Builder, .NET
报表用 LoadFromJSON 加载其最近一次保存的设计。设计器编辑它，undefined 为服务器下次启动保存定义，启用 AutoApply 后，每次保存都会立即更改报表。
uses
sgcHTML_Report, sgcHTML_Component_ReportDesigner;
// 报表
oReport := TsgcHTMLReport.Create(Self);
oReport.Name := 'OrdersReport';
oReport.Title := 'Orders';
oReport.DataSet := qryOrders;
oReport.LoadFromJSON(LoadDefinition('orders')); // 最近一次保存的设计
// 设计器
oDesigner := TsgcHTMLComponent_ReportDesigner.Create(Self);
oDesigner.Name := 'OrdersDesigner';
oDesigner.HTMXEngine := sgcHTMXEngine1;
oDesigner.Report := oReport;
oDesigner.OnSave := DesignerSave;
oTemplate.BodyContent := oDesigner.HTML;
procedure TForm1.DesignerSave(Sender: TObject; const aJSON: string;
var aAccept: Boolean; var aErrorMessage: string);
begin
// aJSON 是定义，服务器已将其加载到临时报表中
StoreDefinition('orders', aJSON); // 您的数据库或文件
end;@* Views/Reports/Design.cshtml：OrdersReport 是长期存在的 TsgcHTMLReport *@
@model ReportsModel
<sgc-report-designer name="orders" report="@Model.OrdersReport"
auto-apply="false" css-height="760px" sub-reports="LinesReport"
on-get-report="Model.GetReport" on-save="Model.SaveReport" />using esegece.sgcWebSockets;
// 报表
var report = new TsgcHTMLReport();
report.Name = "OrdersReport";
report.Title = "Orders";
report.LoadFromJSON(LoadDefinition("orders"));
// 设计器，每个用户有各自的设计
var designer = new TsgcHTMLComponent_ReportDesigner();
designer.Name = "OrdersDesigner";
designer.HTMXEngine = engine;
designer.Report = report;
designer.AutoApply = false;
designer.OnSave += (object sender, string json, ref bool accept, ref string error) =>
accept = SaveUserReport(CurrentUserID(), json, ref error);
designer.OnGetReport += (object sender, ref TsgcHTMLReport? report) =>
report = GetUserReport(CurrentUserID()) ?? report;
template.BodyContent = designer.HTML;浏览器中的报表设计器，以及由打印报表的同一个引擎打印的预览。
新建、从用户的计算机打开 .json 定义的“打开”、保存、撤销和重做、缩放、对齐网格，以及带有页面大小、方向和页边距的页面设置。对齐（左对齐、居中、右对齐、顶端对齐、垂直居中、底端对齐、相同宽度、相同高度或相同大小）、置于顶层、置于底层、复制、粘贴、复制副本和删除，以及在设计与预览之间切换。
工具箱提供文本、图像、线条、矩形、图表、富文本、条形码、二维码和子报表：单击会把项目添加到所选带区，拖动则把它放到任意带区的指定位置。数据字段列出数据源的字段，单击或拖放会添加一个绑定到该字段的文本项目。
画布按所选缩放显示带有各带区的页面，每个带区都有标题和用来调整高度的手柄。带区列表可添加报表页眉、页眉、分组页眉、明细、分组页脚、页脚或报表页脚，移动和删除它们，并设置分组带区的分组字段。
单击选择，Ctrl+单击或 Shift+单击添加到选择，或在画布的空白处拖出选框。拖动会移动所选内容，也可以移到另一个带区，八个手柄用于调整大小，被拖到上方的带区会高亮显示。每次更改都是一个撤销步骤。
检查器为所选内容、带区或报表编辑报表引擎的每个已发布属性，并用“插入字段”“聚合”和“报表值”来编写表达式。“参数”选项卡保存 Report Viewer 要求的内容，报表的字体可以把 .ttf、.ttc 或 .otf 文件嵌入定义中。
预览打印的是正在编辑的定义，而不是已保存的定义，它在一个与报表共享数据和事件的临时报表上进行，因此 PDF 就是报表将要打印的内容。它显示在内嵌的 PDF 查看器中，或显示在使用浏览器 PDF 查看器的 iframe 中，由 PreviewMode 设置。
Tab 在画布的项目之间移动，方向键按一个网格步长移动所选内容，Shift+方向键调整大小，Alt+上和 Alt+下将其移到上一个或下一个带区。Ctrl+C、Ctrl+V 和 Ctrl+D 复制、粘贴和复制副本，Ctrl+Z 和 Ctrl+Y 撤销和重做，Ctrl+S 在设计器的任何位置保存。
设计中有未保存的更改时，设计器会显示“有未保存的更改”，离开页面之前浏览器会先询问。没有名称的参数或字体会在提交任何内容之前被选中并获得焦点。设计器跟随页面的 data-bs-theme="dark" 和 dir="rtl"，polite 实时区域会播报其消息。
您最常用到的成员。
Report 是正在设计的 TsgcHTMLReport。启用 AutoApply（默认开启）时，保存会在其 Lock 内把定义加载到其中，而预览绝不会更改它。ReadOnly 显示设计和预览，允许用户查看属性，并在服务器上同样拒绝保存。
OnSave(Sender, aJSON, aAccept, aErrorMessage) 在服务器用 LoadFromJSON 把定义加载到临时报表之后接收该定义，因此无法加载的定义绝不会到达您的代码。请把它保存在您存放数据的地方，或把 aAccept 设为 False 并在 aErrorMessage 中给出您自己的文本。
一个设计器为所有用户服务。把 AutoApply 设为 False，在 undefined 中保存用户的定义，并在设计器和 Report Viewer 的 OnGetReport 中返回该用户的报表。它在请求的线程上触发，sgcHTMLRequestSession 在该线程上提供会话。
OnGetFieldNames(Sender, aFields) 接收数据源的字段，可用来更改设计器显示的列表。SubReports 和 Charts 指定可用于子报表项目和图表数据源的组件，留空时为报表所有者的全部组件，FontNames 是字体编辑器的字体系列。
MaxSize 限制提交的定义大小（默认 1 MB），由浏览器检查，服务器再次检查，PreviewMaxSize 限制预览 PDF（8 MB）。请求之间服务器上不保存任何内容。设计报表的用户可以打印其数据源的每个字段，因此请从数据源本身移除用户不得看到的字段。
双击窗体上的 TsgcHTMLReport，或在其右键菜单中选择“Design report...”，即可在 IDE 的窗口中打开同一个设计器，其中包含窗体上的数据字段、子报表和图表。每次保存都会写入窗体上的报表。它需要 Windows 上的 Delphi 10.4 或更高版本以及 WebView2 运行时，“Open in browser”会在默认浏览器中打开同一个设计器。
设置 ActionURL 且没有 HTMXEngine 时，脚本会把保存、预览和字段请求提交到您的 URL，由您的宿主把它们交给 DispatchComponentEvent。在页面中，window.sgcReportDesigner 提供 getJSON、setJSON、isDirty、save、preview、undo 和 redo。
在 Razor 视图中，<sgc-report-designer> Tag Helper 渲染设计器，“保存”和“预览”提交到 UseSgcHtml 的组件事件端点。report 接受一个长期存在的 TsgcHTMLReport，Kestrel 的 MaxRequestBodySize（默认 30 MB）仍会限制请求大小。
Demos\60.HTML\01.RunTime\32.ReportDesigner 是 sgc Report Studio，一个在端口 8134 上的服务器，在浏览器中设计四份报表：带嵌套子报表的订单、跨两页排布的富文本客户信函、英文、日文、中文、韩文、阿拉伯文或俄文的发票，以及带图表的销售报表。每个浏览器保存自己的设计，“预览”选项卡用 Report Viewer 打印它。设计时、Lazarus 和 .NET 版本与之对应。