feat(gui+ohos): 同步 WebUI 总览改版 —— 桌面版补运行态面板,两端补内核身份与开源许可

WebUI 那边这几轮改完,桌面 app(Electron)与鸿蒙 app(ArkTS)要跟上。
先摸了底:**两个 app 此前都没有运行态面板**(阶段管道 / 中断队列),
所以这不是"移植",是新做;emoji 图标两端本来就没有,无需处理。

## 桌面 app(cmd/gui/renderer)

1) 运行态面板(新)—— 与 WebUI 同一套设计语言:**等大表框**
   - 数据源 /api/v1/runtime(此前只拉 /status 与 /kernel)。
   - 四个数字块沿用本 app 的 statCard(排队/中断/栈/子代理)。
   - 阶段管道:5 个等大框,框内是本阶段本轮发生的事件 chip;
     当前阶段整框点亮。图标一律内联 SVG(含「工具会循环」标记)。
   - 中断队列:5 个等大框(L4/L3/L2/L1 + 排队)一行排开,
     级别名 16px/800、深度 26px/800、可见格槽(0 时也有形状);
     有积压整框描边点亮;排队队列虚线框区分(另一类别,不是另一优先级)。
   - stage SSE 事件接上轨迹(rtTrailPush,同阶段同一条累加 xN),
     2.5s 无新事件回空闲。
   - 列宽 repeat(auto-fit, minmax(100px,1fr)):窄容器也保证 5 框一行,
     不出「4 个 + 1 个」的孤行。

2) 版本身份(修一个真缺陷)
   旧实现是 `s.version || "0.1.0"`:拿不到数据时**向用户展示一个不存在的
   版本号** 0.1.0。改为取 /kernel 的 build(-ldflags 注入的真实版本/commit),
   并在版本号下补一行「内核名 · commit」。

3) 开源许可卡(新)
   协议标识 + 协议全文 + 源码仓库 + §13 说明;网络条款按标识是否含 AGPL
   决定是否渲染,不硬写协议名。

## 鸿蒙 app(cmd/ohos/HomeAgent)

4) StatusStore 解析 /kernel 的 build:补 内核版本 / Commit / SDK 兼容 /
   构建时间 到「内核」分组;K_VERSION 统一成 v<版本>,新增 K_BUILD 广播
   「内核名 · commit」给摘要卡(版本号本身没有内核身份)。

5) 新增「开源许可」分组:许可协议 / 协议全文 / 源码仓库 / 网络条款说明。

## 验证

- 桌面:共享浏览器加载 renderer(桩掉 preload 桥)后喂真实形状数据渲染 ——
  版本卡 `v1.4.0+hotfix.8d0ce2c` + `HomeAgent · 8d0ce2c`;管道
  `输入=输入 | 行动=思考 | 工具=qq_get_message x3 qq* | 输出=生成 | 结束=完成`;
  队列 `L4:0 | L3:3 on=3[active] | L2:2 on=2[active] | L1:0 | 排队:2 on=2[active]`;
  许可卡两个链接均为 target=_blank + rel=noopener noreferrer;无 emoji。
  node --check 通过。
- 鸿蒙:/opt/huawei/command-line-tools/bin/hvigorw assembleHap **BUILD SUCCESSFUL**。

## 未做(下一条腿)

鸿蒙端的运行态面板(阶段管道 + 中断队列)**还没有**。它比桌面端贵:
需要新组件(5 框管道 + 5 框队列)、把 /runtime 快照接入 StatusStore,
以及把 SSE 的 stage 事件从 ChatSse 的 sink 引到状态侧——后者是接口改动。
「状态」Tab 此前已被有意删除(并入设置页 + 二级明细),面板落点也要定
(建议放二级明细页顶部)。桌面的实现可直接作参照。
This commit is contained in:
JianFeeeee
2026-09-14 18:53:25 +08:00
parent 7ae87ac14c
commit c7218157eb
4 changed files with 601 additions and 13 deletions

View File

@ -37,6 +37,8 @@ export const K_TOOLS: string = 'statTools';
export const K_ERR: string = 'statErr';
export const K_LOADING: string = 'statLoading';
export const K_REV: string = 'statRev';
/** 内核身份副行:内核名 · commit。版本号光有一个号码分不清是哪个内核、哪次构建。 */
export const K_BUILD: string = 'statBuildSub';
class StatusStore {
/** 明细分组:只有明细页读它,不进 AppStorage(数组同步语义太脆) */
@ -52,6 +54,7 @@ class StatusStore {
AppStorage.setOrCreate<string>(K_ERR, '');
AppStorage.setOrCreate<boolean>(K_LOADING, false);
AppStorage.setOrCreate<number>(K_REV, 0);
AppStorage.setOrCreate<string>(K_BUILD, '');
}
getGroups(): StatGroup[] {
@ -133,8 +136,66 @@ class StatusStore {
if (startTime.length > 0) {
kernelFields.push({ label: '内核启动', value: formatTime(startTime) });
}
// 构建身份:版本 / commit / SDK 兼容都取自 /kernel 的 build(-ldflags 注入)。
// 为何不能只用 /status 的 version:那里只有一个版本号,分不清是哪个内核、
// 哪次构建;许可标识更是完全没有。
const build: Record<string, Object> | undefined = k['build'] as Record<string, Object>;
let lic: string = '';
let licURL: string = '';
let srcURL: string = '';
if (build !== undefined && build !== null) {
const bVer: string = build['version'] as string ?? '';
const bCommit: string = build['commit'] as string ?? '';
const bName: string = build['kernel_name'] as string ?? 'HomeAgent';
const bSdk: string = build['sdk_compatible'] as string ?? '';
const bTime: string = build['build_time'] as string ?? '';
lic = build['license'] as string ?? '';
licURL = build['license_url'] as string ?? '';
srcURL = build['source_url'] as string ?? '';
if (bVer.length > 0) {
AppStorage.set<string>(K_VERSION, 'v' + bVer);
kernelFields.push({ label: '内核版本', value: 'v' + bVer });
}
let sub: string = bName;
if (bCommit.length > 0 && bCommit !== 'unknown') {
sub = sub + ' · ' + bCommit.substring(0, 7);
}
AppStorage.set<string>(K_BUILD, sub);
if (bCommit.length > 0) {
kernelFields.push({ label: 'Commit', value: bCommit });
}
if (bSdk.length > 0) {
kernelFields.push({ label: 'SDK 兼容', value: bSdk });
}
if (bTime.length > 0 && bTime !== 'unknown') {
kernelFields.push({ label: '构建时间', value: formatTime(bTime) });
}
}
groups.push({ title: '内核', fields: kernelFields });
// 开源许可:只给一个源码链接、不写协议名,使用者看不出这受什么许可约束,
// 也看不出网络服务场景下的 §13 义务。
const legalFields: StatField[] = [];
if (lic.length > 0) {
legalFields.push({ label: '许可协议', value: lic });
}
if (licURL.length > 0) {
legalFields.push({ label: '协议全文', value: licURL });
}
if (srcURL.length > 0) {
legalFields.push({ label: '源码仓库', value: srcURL });
}
if (legalFields.length > 0) {
if (lic.toUpperCase().indexOf('AGPL') >= 0) {
legalFields.push({
label: '网络条款',
value: '把修改后的版本作为网络服务对外提供时,必须向使用者提供取得对应源码的途径(§13)',
});
}
groups.push({ title: '开源许可', fields: legalFields });
}
// LLM:provider / 可用源 / 是否可用
const llm: Record<string, Object> | undefined = k['llm'] as Record<string, Object>;
if (llm !== undefined && llm !== null) {

View File

@ -4,7 +4,7 @@ import { COLOR_ACCENT, COLOR_SUCCESS, COLOR_CYAN, COLOR_ERROR } from '../common/
import { MotionBase } from './MotionBase';
import {
statusStore, StatGroup, StatField, compactDuration,
K_UP, K_VERSION, K_STARTED, K_AGENTS, K_PLUGINS, K_TOOLS, K_ERR, K_LOADING, K_REV,
K_UP, K_VERSION, K_STARTED, K_AGENTS, K_PLUGINS, K_TOOLS, K_ERR, K_LOADING, K_REV, K_BUILD,
} from '../common/StatusStore';
/**
@ -19,6 +19,8 @@ export struct StatusSummaryCard {
@StorageProp('themeIsDark') private isDark: boolean = true;
@StorageProp(K_UP) private up: boolean = false;
@StorageProp(K_VERSION) private version: string = '-';
/** 内核名 · commit。与版本号分开一行:版本号本身没有内核身份。 */
@StorageProp(K_BUILD) private buildSub: string = '';
@StorageProp(K_STARTED) private startedAt: string = '';
@StorageProp(K_AGENTS) private agents: number = 0;
@StorageProp(K_PLUGINS) private plugins: number = 0;
@ -130,14 +132,24 @@ export struct StatusSummaryCard {
Text('版本')
.fontSize(12)
.fontColor(this.palette().textMuted)
Text(this.version)
.fontSize(12)
.fontWeight(FontWeight.Medium)
.fontColor(this.palette().textSecondary)
.layoutWeight(1)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({ left: 10 })
Column() {
Text(this.version)
.fontSize(12)
.fontWeight(FontWeight.Medium)
.fontColor(this.palette().textSecondary)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
// 内核名 + commit:光有版本号会分不清是哪个内核、哪次构建
Text(this.buildSub)
.fontSize(10)
.fontColor(this.palette().textMuted)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.visibility(this.buildSub.length > 0 ? Visibility.Visible : Visibility.None)
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
.margin({ left: 10 })
Text('明细')
.fontSize(12)
.fontColor(this.palette().accent)