四个全新 sgcHTML 组件，五个全新在线演示

2026年8月27日 · 组件

sgcWebSockets 2026.9.0 新增了四个全新的 sgcHTML 组件，我们没有孤立地展示它们，而是用它们构建了五个完整的应用：一个仓库管理系统、一台零售收银终端、一个报表与分析门户、一个多租户 SaaS 控制平台，以及一个现场服务调度应用。这五个演示如今都在 eSeGeCe 演示服务器上在线运行，与此前已有的 ERP、后台 CRUD、实时监控、客户门户和帮助台演示并列在一起。

这些新组件分别是 CameraScanner（通过浏览器自身摄像头实现实时条形码和二维码扫描，无需额外添加任何库）、NumPad（专为零售收银打造的触屏数字键盘）、CommandPalette（Ctrl+K 快速启动面板模式，供您自己的应用使用）以及 EmptyState（网格或搜索结果在没有内容可显示时展示的面板）。本文将逐一介绍这些组件，然后介绍用它们构建的五个演示。

CameraScanner — 条形码与二维码扫描，无需额外添加任何库

TsgcHTMLComponent_CameraScanner 会打开浏览器的摄像头，并使用浏览器自身原生的 BarcodeDetector API 解码条形码和二维码。它不捆绑任何解码器，也不从 CDN 拉取任何内容：当 BarcodeDetector 不可用时，面板会给出提示，并继续通过手动输入和拍照捕获正常工作，因为这两种方式本来就不依赖它。摄像头会在每一条退出路径上（标签页隐藏、页面跳转离开、后退按钮）被关闭，确保摄像头指示灯始终熄灭。

uses
  sgcHTML_Component_CameraScanner;

var
  oScanner: TsgcHTMLComponent_CameraScanner;
begin
  oScanner := TsgcHTMLComponent_CameraScanner.Create(nil);
  try
    oScanner.ScannerID := 'receiving_scan';
    oScanner.Mode := smBoth;               // scan barcodes AND capture a photo
    oScanner.Formats := 'qr_code,ean_13,code_128';
    oScanner.FieldName := 'sku';
    oScanner.ContinuousScan := True;
    oScanner.BeepOnScan := True;

    WebModule.Response := oScanner.HTML;   // camera panel + hidden fields + inline script
  finally
    oScanner.Free;
  end;
end;

NumPad — 一个绝不会发送错误小数分隔符的键盘

TsgcHTMLComponent_NumPad 是一个为零售收银录入打造的触屏数字与货币键盘。值得指出的工程要点是：该组件写入标记和自身脚本中的每一个数字，都经过一个与区域设置无关的格式化器处理，绝不会经过任何遵循浏览器区域设置的例程。它提交的隐藏字段始终携带像 12.50 这样的数字，而不是 12,50，因此同一份表单无论从西班牙语、德语还是英语浏览器提交，字节内容都完全相同。

uses
  sgcHTML_Component_NumPad;

var
  oPad: TsgcHTMLComponent_NumPad;
begin
  oPad := TsgcHTMLComponent_NumPad.Create(nil);
  try
    oPad.PadID := 'till_amount';
    oPad.FieldName := 'amount';
    oPad.Mode := npCurrency;
    oPad.CurrencySymbol := '$';
    oPad.DecimalPlaces := 2;
    oPad.QuickAmounts.CommaText := '5,10,20,50';   // tender shortcut buttons

    WebModule.Response := oPad.HTML;   // display + calculator-style keys + quick amounts
  finally
    oPad.Free;
  end;
end;

CommandPalette — 为您自己的应用打造的 Ctrl+K

TsgcHTMLComponent_CommandPalette 是您在 VS Code、Slack 和 Linear 中熟悉的那种 Ctrl+K / Cmd+K 覆盖层启动面板：在热键打开之前始终隐藏，可通过 Esc 或点击背景关闭，输入时会先进行子字符串匹配，再进行模糊子序列匹配的双重过滤，因此输入 nu 仍能匹配到 “New User”。条目在服务器端渲染为标记，而不是作为 JSON 发送到浏览器再在客户端过滤，因此每个标题都只会被 HTML 编码一次。

uses
  sgcHTML_Component_CommandPalette;

var
  oPalette: TsgcHTMLComponent_CommandPalette;
begin
  oPalette := TsgcHTMLComponent_CommandPalette.Create(nil);
  try
    oPalette.PaletteID := 'app_commands';

    oPalette.AddItem('New Invoice', '/invoices/new', 'invoice:new', 'Create', 'Ctrl+N');
    oPalette.AddItem('Customer Search', '/customers', '', 'Navigate');
    with oPalette.Items.Add do
    begin
      Caption := 'Export Report';
      Icon := 'bi bi-download';
      DataAction := 'report:export';
      Category := 'Actions';
    end;

    WebModule.Response := oPalette.HTML;   // hidden overlay + inline script
  finally
    oPalette.Free;
  end;
end;

EmptyState — 恰当地表达此处暂无内容

TsgcHTMLComponent_EmptyState 是网格、列表或搜索结果在没有任何行数据时展示的面板：一个图标或图片、一个标题、一段描述，以及最多两个按钮。它完全不输出任何脚本，因此可以安全地作为带外片段在一个页面中按需推送任意多次。有一点安全事项值得强调：Icon 既可以接受 CSS 图标类名，也可以接受内联 SVG 标记，内联标记在经过一次简单的安全检查后会被原样输出，因此绝不应绑定到最终用户输入；不受信任的文本应绑定到 Title 和 Description，这两者始终会经过 HTML 编码。

uses
  sgcHTML_Enums, sgcHTML_Component_EmptyState;

var
  oEmpty: TsgcHTMLComponent_EmptyState;
begin
  oEmpty := TsgcHTMLComponent_EmptyState.Create(nil);
  try
    oEmpty.Icon := 'bi bi-inbox';
    oEmpty.Title := 'No results';
    oEmpty.Description := 'Try a different search, or clear your filters.';
    oEmpty.ActionCaption := 'Clear filters';
    oEmpty.ActionHref := '/orders';
    oEmpty.ActionStyle := bsPrimary;

    WebModule.Response := oEmpty.HTML;
  finally
    oEmpty.Free;
  end;
end;

// Or the one-line static helper for the simple case:
WebModule.Response := TsgcHTMLComponent_EmptyState.Build('No results', 'Try a different search.');

五个基于这些组件构建的全新演示

代码示例能说明的问题终究有限。因此在这四个新组件之外，我们完全用 sgcHTML 构建了五个完整的应用，每一个都有自己的登录、真实的 SQLite 数据库和可打印的报表。这五个演示目前都在 eSeGeCe 演示服务器上在线运行。

仓库管理 (WMS) — 收货、拣货、打包、发货和循环盘点，还有一个使用 CameraScanner 直接将条形码扫描进拣货单的手持终端。打开在线演示 →

零售收银 (POS) — 一个围绕 NumPad 构建的零售收银终端：商品、促销、客户、班次结账和销售报表。打开在线演示 →

报表与分析 — 销售、利润与运营仪表盘，一个透视表构建器，已保存视图和定时导出任务，并预置了约 25,000 条订单明细，让屏幕上的数字都是真实数据。打开在线演示 →

多租户 SaaS — 租户入驻、账单、团队与角色管理（构建在同一个 RolesPermissions 组件之上，现在除了 WebSocket 通道外还新增了普通表单提交选项），以及一个用于管理套餐和功能开关的平台管理控制台。打开在线演示 →

现场服务 — 工单调度、实时技术人员地图、Gantt 排程、客户、资产与备件管理，并再次使用 CameraScanner 将备件直接扫描到工单上。打开在线演示 →

立即体验

全部十个在线演示，包括以上这五个，均可从顶部导航栏的 sgcHTML › 在线演示 中打开，CameraScanner、NumPad、CommandPalette 和 EmptyState 的完整属性、方法与事件参考请参阅在线帮助文档。

有疑问、反馈，或希望我们添加特定的演示场景？联系我们 — 回复你的将是编写这些代码的人。