sgcUI 实时 UI 包：面向 Delphi、C++Builder 和 .NET 的在线状态、通知、活动与实时日志

运维控制台、帮助台、管理面板和交易界面，在数据不断变化的同时，都要回答同样的问题：此刻谁在线，哪些事情需要我关注，谁修改了什么，以及现在哪里出了故障。sgcUI 实时 UI 包用一个模型加一组原生控件来回答每一个问题，并通过同一种 JSON 消息把它们全部连接到实时数据源。

一分钟了解 Realtime UI 包：在线状态、通知、活动和实时日志，全部由同一种 JSON 消息驱动。 YouTube 上也有.

实时 UI 包不是一个独立产品。每个部分都位于它所扩展的 sgcUI 产品中，即 sgcUICore、sgcNavigation、sgcToolbar、sgcDashboard 和 sgcGrid，包含在你已在使用的单元、包和 NuGet 包里，并遵循该产品的版本。它运行在面向 Delphi 和 C++Builder 的 VCL 与 FireMonkey 上，以及面向 .NET 的 WinForms、WPF 和 Avalonia 上，支持浅色、深色和高对比度主题、从右到左布局以及 12 种语言。

在线状态：谁在线

TsgcUIPresenceModel 保存应用用户的姓名、首字母、颜色、头像图片、状态（在线、离开、忙碌或离线）、状态文本和最后在线时间。控件读取该模型，状态变化时会自行重绘。

• 头像（TsgcVCLAvatar）：首字母或图片，带状态点。
• 头像组（TsgcVCLAvatarGroup）：团队的重叠头像，超过 MaxVisible 后折叠为 “+N” 标签。
• 在线状态指示器（TsgcVCLPresenceIndicator）：状态点加文本，适用于成员名册和列表。
• sgcChat 的用户现在也是在线状态用户，因此聊天和团队名册共享同一批人员。

uses
  sgcUICore_Presence, sgcUICore_Presence_VCL;

procedure TfrmMain.LoadTeam;
begin
  // usually set in the Object Inspector
  sgcVCLAvatarGroup1.Model := FPresence;
  sgcVCLAvatarGroup1.MaxVisible := 5;

  FPresence.AddOrUpdate('u1', 'Alex Morgan');
  FPresence.AddOrUpdate('u2', 'Bianca Ruiz', uprAway, 'Back at 3');
  // later, when the status changes
  FPresence.SetStatus('u1', uprBusy, 'In a meeting');
end;

通知：弹出通知、收件箱和铃铛徽章

TsgcNotificationModel 保存当前用户的通知，包含标题、正文、严重程度、时间、已读状态、操作和分组，并维护未读数。由四个部分来展示它：

• 弹出通知（TsgcVCLToastManager）：堆叠在窗体或屏幕一角，不会抢占焦点，会自动隐藏，鼠标悬停时暂停，并提供操作按钮。严重程度的颜色来自主题。
• 收件箱（TsgcVCLNotificationInbox）：按天分组的虚拟化列表，带有全部和未读过滤器、全部标为已读、关闭和操作。
• 偏好设置（TsgcVCLNotificationPrefsEditor）：类别与渠道的网格，渠道包括应用内、弹出通知、电子邮件和推送。弹出通知管理器只显示用户要求的内容。
• 铃铛徽章（TsgcToolbarBadgeLink）：把未读数显示为工具栏项的徽章，超过 99 显示 “99+”，在注册版中也可用于功能区项。

uses
  sgcNavigation_Notification, sgcNavigation_Toast_VCL,
  sgcNavigation_Inbox_VCL, sgcToolbar_BadgeLink;

procedure TfrmMain.SetupNotifications;
begin
  sgcVCLToastManager1.Model := FNotifications;
  sgcVCLToastManager1.Preferences := FPreferences;
  sgcVCLNotificationInbox1.Model := FNotifications;
  // the unread count as the badge of the first toolbar item
  sgcToolbarBadgeLink1.Source := FNotifications;
  sgcToolbarBadgeLink1.Target := sgcVCLToolbar1;
  sgcToolbarBadgeLink1.ItemIndex := 0;

  FNotifications.Add('Deployed billing', 'Version 1.8 is live in 3 regions',
    nsvSuccess, 'deploy');
end;

活动源与审核跟踪：谁做了什么

TsgcDashboardActivityModel 记录谁在何时做了什么：操作者、动词、对象、结果，并且为了审核，还记录每个被修改字段的前后值。操作者的名称、颜色和头像来自在线状态模型，因此活动源和名册始终保持一致。

• 活动源（TsgcVCLActivityFeed）：按天分组的时间线，相对时间支持 12 种语言，可按操作者、动词、对象类型和文本过滤，并支持加载更早记录的分页。
• 审核跟踪（TsgcVCLAuditTrail）：同样的条目以行的形式呈现，展开后显示每个被修改字段的旧值和新值。
• 仪表板磁贴：用于 sgcDashboard 的活动源磁贴和审核跟踪磁贴，带搜索框，并保存在仪表板布局中。

uses
  sgcDashboard_Activity, sgcDashboard_Activity_VCL;

procedure TfrmMain.RecordApproval;
var
  oItem: TsgcDashboardActivity;
begin
  FActivity.Presence := FPresence; // actor names, colours and avatars
  sgcVCLActivityFeed1.Model := FActivity;
  sgcVCLAuditTrail1.Model := FActivity;

  oItem := TsgcDashboardActivity.Create;
  oItem.Id := 'a18';
  oItem.Time := FActivity.NowUTC;
  oItem.ActorId := 'u2';
  oItem.Verb := 'approved';
  oItem.ObjectName := 'Change request 102';
  oItem.Outcome := 'success';
  oItem.Changes.Add('status', 'pending', 'approved');
  // the model owns the item and inserts it by Time
  FActivity.AddActivity(oItem);
end;

实时日志查看器：此刻哪里出了问题

TsgcGridLogModel 是线程安全的日志行环形缓冲区，级别从 trace 到 fatal，每行包含来源、消息和属性，支持按级别、来源和文本过滤，并可导出为文本、JSON 和 CSV。任何线程都可以向其追加内容，变更会分批到达屏幕。TsgcGridLogLink 可以把任意 sgcGrid 变成日志查看器。

• 级别颜色来自主题，并支持文本或正则表达式高亮。
• Follow tail 让最新的一行始终可见，当用户向上滚动阅读时会自动停止。
• Pause 和 Resume，以及用于复制选中行的 Copy lines。
• 新行到达、最旧的行移出环形缓冲区时，可见的行保持原位。

uses
  sgcGrid_Log, sgcGrid_LogLink;

procedure TfrmMain.SetupLog;
begin
  FLog.Capacity := 100000;
  sgcGridLogLink1.Model := FLog;
  sgcGridLogLink1.Grid := sgcVCLGrid1;
  sgcGridLogLink1.FollowTail := True;
  sgcGridLogLink1.Active := True;
end;

// from any thread
FLog.Append(gllWarning, 'gateway', 'slow query 668 ms');

实时数据：一条消息供所有数据源使用

四个模型读取同一种 JSON 消息，因此一个连接就能承载全部数据。每条消息都指明自己的 type 和 op，每个模型只取属于自己的消息：

{"type":"presence","op":"upsert","user":{"id":"u7","presence":"away","statusText":"Lunch"}}
{"type":"notification","op":"add","notification":{"id":"n2","title":"Build 812 passed","severity":"success"}}
{"type":"activity","op":"add","item":{"id":"a20","actorId":"u7","verb":"updated","objectName":"Invoice INV-17"}}
{"type":"log","op":"append","entry":{"level":"warning","source":"api","message":"Slow query"}}

三种实时数据源通过 sgcWebSockets 把模型连接到服务器：TsgcUILiveSource_WebSocket、TsgcUILiveSource_MQTT 和 TsgcUILiveSource_SSE。每个数据源都挂接到你已配置好的客户端，沿用其 URL、凭据、TLS 和重新连接设置，并把每条消息交给它的绑定。在工作线程上到达的消息会在主线程中一次批量应用，因此一千行日志的突发只会访问一次用户界面。绑定还可以选择 MQTT 主题、SSE 事件名称、过滤器，或应用信封内的路径。

uses
  sgcWebSocket, sgcUICoreWS_Live, sgcUICoreWS_Live_WebSocket;

procedure TfrmMain.ConnectLive;
var
  oSource: TsgcUILiveSource_WebSocket;
begin
  oSource := TsgcUILiveSource_WebSocket.Create(Self);
  oSource.Client := sgcWebSocketClient1;
  // every message carries its type, so each model takes only its own
  oSource.Bindings.Add.Target := FPresence;
  oSource.Bindings.Add.Target := FNotifications;
  oSource.Bindings.Add.Target := FActivity;
  oSource.Bindings.Add.Target := FLog;
end;

实时数据源属于注册版，并且需要 sgcWebSockets，与 sgcUI 的所有 sgcWebSockets 桥接一样。没有服务器时，或在社区版中，应用改为调用模型 API：AddOrUpdate 和 SetStatus、Add 或 Post、AddActivity 以及 Append。

全平台，浅色与深色

相同的模型和相同的 JSON 可在每个平台上运行。.NET 控件是原生的 WinForms、WPF 和 Avalonia 控件，名称相同，位于 esegece.sgcUICore、esegece.sgcNavigation、esegece.sgcToolbar、esegece.sgcDashboard 和 esegece.sgcGrid 包中，套件的每个主题，包括深色和高对比度，都适用于这些新控件。

实时运维演示

实时运维演示把所有部分放在同一个界面上：团队名册、带收件箱和偏好设置的弹出通知、铃铛徽章、活动源和审核跟踪，以及实时日志，全部由内置模拟器驱动，因此无需服务器即可运行。它随 Delphi 套件演示中的 VCL、FireMonkey 和 C++Builder 版本发布，也随 .NET 套件演示中的 WinForms、WPF 和 Avalonia 版本发布，模拟器在每个平台上产生相同的序列。第二个 VCL 演示 RealtimeLive 通过进程内的 WebSocket 服务器和 TsgcUILiveSource_WebSocket 发送同样的消息，还可以通过 URL 输入框改为连接你自己的服务器。

版本

每个部分都遵循其所属产品的版本。sgcUICore 的在线状态部分和 sgcGrid 的日志部分在所有版本中都有，包括社区版，在线状态消息也是如此。通知和徽章部分需要 sgcNavigation 和 sgcToolbar，即 sgcUI Standard 及以上版本，活动部分需要 sgcDashboard，即 sgcUI Professional 及以上版本。免费的 .NET 社区版包也包含这些部分，而 Delphi 社区版只提供 sgcGrid。实时通知、活动和日志消息、作为徽章目标的功能区，以及三种实时数据源属于注册版。有关各产品的详细信息，请阅读实时 UI 包页面和实时 UI 包帮助。

有问题或反馈？联系我们，你将得到编写这些代码的人的回复。