feat(ui): compact bot connection metadata

This commit is contained in:
xmanrui 2026-08-23 01:20:58 +08:00
parent 59ed364856
commit 2803bbcbab
22 changed files with 632 additions and 556 deletions

View file

@ -23,6 +23,7 @@ import {
EMPTY_AGENT_PRESET_CATALOG,
} from "../../agent-preset.js";
import { useWorkspaceSnapshotFence } from "../../workspace-snapshot-fence.js";
import { BotStatusMeta, ChannelListHeading } from "../../channel-card-meta.js";
import { installFeishuStyles } from "./styles.js";
export const name = "feishu-settings";
@ -591,15 +592,15 @@ export function BotCard({
h("h3", { id: titleId, title: bot.name }, bot.name),
h("p", { title: bot.appIdMasked }, bot.appIdMasked ?? "应用标识已安全保存")),
),
h("div", { className: "bxf-healthPill dim-botHealth", "data-health": stateForDisplay },
h("span", { className: "bxf-dot dim-healthDot", "data-tone": tone }),
h("span", null, HEALTH_LABELS[stateForDisplay] ?? "状态未知")),
),
h("dl", { className: "bxf-statusGrid dim-botMetrics" },
h("div", { className: "bxf-metric dim-botMetric" }, h("dt", null, "消息通道"),
h("dd", null, connected ? "长连接" : stateForDisplay === "connecting" ? "连接中" : "已断开")),
h("div", { className: "bxf-metric dim-botMetric" }, h("dt", null, "最近检查"),
h("dd", null, formatCheckedTime(health.lastCheckedAt))),
h(BotStatusMeta, {
className: "bxf-healthPill",
dotClassName: "bxf-dot",
tone,
stateLabel: HEALTH_LABELS[stateForDisplay] ?? "状态未知",
lastCheckedAt: health.lastCheckedAt,
formatCheckedTime,
healthState: stateForDisplay,
}),
),
h(WorkspaceEditor, {
workspace: connection.workspace,
@ -669,8 +670,12 @@ export function BotCard({
function BotList(props) {
return h("section", { className: "bxf-listSection dim-listSection", "aria-labelledby": "bxf-bot-list-title" },
h("div", { className: "bxf-listHeading dim-listHeading" },
h("h3", { id: "bxf-bot-list-title" }, "已接入的机器人")),
h(ChannelListHeading, {
className: "bxf-listHeading",
id: "bxf-bot-list-title",
title: "已接入的机器人",
connectionLabel: "长连接",
}),
h("ul", { className: "bxf-botList dim-botList", role: "list" },
props.bots.map((bot) => h("li", { key: bot.botId },
h(BotCard, {

View file

@ -402,10 +402,6 @@ const CSS = String.raw`
.bxf-healthPill[data-health="degraded"], .bxf-healthPill[data-health="checking"], .bxf-healthPill[data-health="connecting"] { color: var(--bxf-warning); background: color-mix(in srgb, var(--bxf-warning) 10%, transparent); }
.bxf-healthPill[data-health="offline"], .bxf-healthPill[data-health="error"] { color: var(--bxf-error); background: color-mix(in srgb, var(--bxf-error) 10%, transparent); }
.bxf-statusGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.bxf-metric { min-width: 0; border: 1px solid var(--dsw-alias-border-l2, #dee0e3); border-radius: 9px; padding: 12px 13px; background: var(--dsw-alias-bg-module-platform, #f7f8fa); }
.bxf-metric dt { color: var(--dsw-alias-label-tertiary, #8f959e); font-size: 11px; line-height: 17px; }
.bxf-metric dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-primary, #1f2329); font-size: 12px; line-height: 18px; font-weight: 550; margin: 3px 0 0; }
.bxf-responseMode { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; column-gap: 10px; row-gap: 5px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--dsw-alias-border-l1, #eef0f3); border-radius: 9px; background: var(--dsw-alias-bg-module-platform, #f7f8fa); }
.bxf-responseModeHeader { display: contents; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; line-height: normal; }
@ -517,7 +513,6 @@ const CSS = String.raw`
.bxf-qrLayout { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.bxf-botProvision .bxf-qrLayout { grid-template-columns: minmax(0, 1fr); }
.bxf-qrCopy { width: 100%; }
.bxf-statusGrid { grid-template-columns: minmax(0, 1fr); }
.bxf-connectedTop { align-items: flex-start; flex-direction: column; }
.bxf-inlineError { grid-template-columns: minmax(0, 1fr); padding: 20px; }
.bxf-statusNotice { align-items: flex-start; flex-wrap: wrap; }