hansjone/dsh-im-ops
1
0
Fork 0
mirror of https://github.com/hansjone/dsh-im-ops.git synced 2026-10-09 05:20:46 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ui): compact bot connection metadata

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

23
plugin-src/client/channels/dingtalk/index.js
View file

@ -9,6 +9,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 {
DINGTALK_ENDPOINTS,
DINGTALK_RPC_CHANNEL,
@ -235,13 +236,14 @@ export function AccountCard({
h('div', { className: 'dim-botName' },
h('h3', { title: account.bot.name }, account.bot.name),
h('p', { title: account.bot.clientIdMasked }, account.bot.clientIdMasked))),
h('div', { className: 'ddt-health dim-botHealth' },
h('span', { className: 'ddt-dot dim-healthDot', 'data-tone': tone }), h('span', null, stateLabel))),
h('dl', { className: 'ddt-metrics dim-botMetrics' },
h('div', { className: 'ddt-metric dim-botMetric' }, h('dt', null, '消息通道'),
h('dd', null, account.connected ? 'Stream 长连接' : '离线')),
h('div', { className: 'ddt-metric dim-botMetric' }, h('dt', null, '最近检查'),
h('dd', null, checkedTime(account.health.lastCheckedAt)))),
h(BotStatusMeta, {
className: 'ddt-health',
dotClassName: 'ddt-dot',
tone,
stateLabel,
lastCheckedAt: account.health.lastCheckedAt,
formatCheckedTime: checkedTime,
})),
h(WorkspaceEditor, {
workspace: account.workspace,
disabled: Boolean(busy),
@ -274,8 +276,11 @@ export function AccountCard({
function AccountList(props) {
return h('section', { className: 'dim-listSection' },
h('div', { className: 'ddt-listHeading dim-listHeading' },
h('h3', null, '已接入的钉钉机器人')),
h(ChannelListHeading, {
className: 'ddt-listHeading',
title: '已接入的钉钉机器人',
connectionLabel: 'Stream 长连接',
}),
h('ul', { className: 'ddt-list dim-botList' }, props.bots.map((account) => h('li', { key: account.botId },
h(AccountCard, {
account,

6
plugin-src/client/channels/dingtalk/styles.js
View file

@ -86,10 +86,6 @@ const CSS = String.raw`
.ddt-accountIdentity h3 { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.ddt-accountIdentity p { margin-top: 4px; color: var(--dsw-alias-label-secondary, #646a73); font: 12px ui-monospace, SFMono-Regular, monospace; }
.ddt-health { display: inline-flex; align-items: center; gap: 7px; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; white-space: nowrap; }
.ddt-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.ddt-metric { min-width: 0; padding: 12px; border-radius: 9px; background: var(--dsw-alias-interactive-bg-hover, #f7f8fa); }
.ddt-metric dt { color: var(--dsw-alias-label-tertiary, #8f959e); font-size: 11px; }
.ddt-metric dd { overflow: hidden; margin: 5px 0 0; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ddt-accountFooter { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 16px; border-top: 1px solid var(--dsw-alias-border-l1, #eef0f3); }
.ddt-accountFooter .ddt-actions { flex: none; flex-wrap: nowrap; gap: 8px; margin-top: 0; }
.ddt-accountFooter .ddt-button { flex: none; white-space: nowrap; }
@ -110,8 +106,6 @@ const CSS = String.raw`
.ddt-qrLayout { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; }
.ddt-qrColumn { width: 100%; min-width: 0; }
.ddt-qrCopy { width: 100%; }
.ddt-metrics { gap: 8px; }
.ddt-metric { padding: 10px; }
}
@media (max-width: 720px) {
.ddt-heading, .ddt-accountTop { flex-direction: column; align-items: stretch; }

27
plugin-src/client/channels/feishu/index.js
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, {

5
plugin-src/client/channels/feishu/styles.js
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; }

21
plugin-src/client/channels/qq/index.js
View file

@ -10,6 +10,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 { installDingtalkStyles } from '../dingtalk/styles.js';
import {
QQ_ENDPOINTS,
@ -176,11 +177,14 @@ export function AccountCard({
h('div', { className: 'ddt-avatar dim-botAvatar dqq-avatar', 'aria-hidden': 'true' }, h(QqLogoGlyph, { size: 29 })),
h('div', { className: 'dim-botName' },
h('h3', null, account.bot.name), h('p', null, account.bot.appIdMasked))),
h('div', { className: 'ddt-health dim-botHealth' },
h('span', { className: 'ddt-dot dim-healthDot', 'data-tone': tone }), h('span', null, stateLabel))),
h('dl', { className: 'ddt-metrics dim-botMetrics' },
h('div', { className: 'ddt-metric dim-botMetric' }, h('dt', null, '消息通道'), h('dd', null, account.connected ? 'WebSocket 长连接' : '离线')),
h('div', { className: 'ddt-metric dim-botMetric' }, h('dt', null, '最近检查'), h('dd', null, checkedTime(account.health.lastCheckedAt)))),
h(BotStatusMeta, {
className: 'ddt-health',
dotClassName: 'ddt-dot',
tone,
stateLabel,
lastCheckedAt: account.health.lastCheckedAt,
formatCheckedTime: checkedTime,
})),
h(WorkspaceEditor, {
workspace: account.workspace,
disabled: Boolean(busy),
@ -433,8 +437,11 @@ export function QqSettingsTab({ rpcCall }) {
const botList = model.bots.length > 0
? h('section', { className: 'dim-listSection' },
h('div', { className: 'ddt-listHeading dim-listHeading' },
h('h3', null, '已绑定的 QQ 机器人')),
h(ChannelListHeading, {
className: 'ddt-listHeading',
title: '已绑定的 QQ 机器人',
connectionLabel: 'WebSocket 长连接',
}),
h('ul', { className: 'ddt-list dim-botList' }, model.bots.map((account) =>
h('li', { key: account.botId }, h(AccountCard, {
account,

24
plugin-src/client/channels/shared/token-channel.js
View file

@ -10,6 +10,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';
const Button = React.forwardRef(function Button(
{ children, kind = 'secondary', className = '', ...props },
@ -82,14 +83,14 @@ export function createTokenChannelSettings(definition) {
h(LogoGlyph, { size: 29 })),
h('div', { className: 'dim-botName' },
h('h3', null, account.bot.name), h('p', null, identity))),
h('div', { className: 'ddt-health dim-botHealth' },
h('span', { className: 'ddt-dot dim-healthDot', 'data-tone': tone }),
h('span', null, stateLabel))),
h('dl', { className: 'ddt-metrics dim-botMetrics' },
h('div', { className: 'ddt-metric dim-botMetric' },
h('dt', null, '消息通道'), h('dd', null, account.connected ? connectionLabel : '离线')),
h('div', { className: 'ddt-metric dim-botMetric' },
h('dt', null, '最近检查'), h('dd', null, checkedTime(account.health.lastCheckedAt)))),
h(BotStatusMeta, {
className: 'ddt-health',
dotClassName: 'ddt-dot',
tone,
stateLabel,
lastCheckedAt: account.health.lastCheckedAt,
formatCheckedTime: checkedTime,
})),
h(WorkspaceEditor, {
workspace: account.workspace,
disabled: Boolean(busy),
@ -271,8 +272,11 @@ export function createTokenChannelSettings(definition) {
const botList = model.bots.length > 0
? h('section', { className: 'dim-listSection' },
h('div', { className: 'ddt-listHeading dim-listHeading' },
h('h3', null, `已接入的 ${channel} 机器人`)),
h(ChannelListHeading, {
className: 'ddt-listHeading',
title: `已接入的 ${channel} 机器人`,
connectionLabel,
}),
h('ul', { className: 'ddt-list dim-botList' }, model.bots.map((account) =>
h('li', { key: account.botId }, h(AccountCard, {
account,

21
plugin-src/client/channels/wecom/index.js
View file

@ -10,6 +10,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 { installDingtalkStyles } from '../dingtalk/styles.js';
import {
WECOM_ENDPOINTS,
@ -175,11 +176,14 @@ export function AccountCard({
h('div', { className: 'ddt-avatar dim-botAvatar dwecom-avatar', 'aria-hidden': 'true' }, h(WecomLogoGlyph, { size: 29 })),
h('div', { className: 'dim-botName' },
h('h3', null, account.bot.name), h('p', null, account.bot.appIdMasked))),
h('div', { className: 'ddt-health dim-botHealth' },
h('span', { className: 'ddt-dot dim-healthDot', 'data-tone': tone }), h('span', null, stateLabel))),
h('dl', { className: 'ddt-metrics dim-botMetrics' },
h('div', { className: 'ddt-metric dim-botMetric' }, h('dt', null, '消息通道'), h('dd', null, account.connected ? 'WebSocket 长连接' : '离线')),
h('div', { className: 'ddt-metric dim-botMetric' }, h('dt', null, '最近检查'), h('dd', null, checkedTime(account.health.lastCheckedAt)))),
h(BotStatusMeta, {
className: 'ddt-health',
dotClassName: 'ddt-dot',
tone,
stateLabel,
lastCheckedAt: account.health.lastCheckedAt,
formatCheckedTime: checkedTime,
})),
h(WorkspaceEditor, {
workspace: account.workspace,
disabled: Boolean(busy),
@ -464,8 +468,11 @@ export function WecomSettingsTab({ rpcCall }) {
const botList = model.bots.length > 0
? h('section', { className: 'dim-listSection' },
h('div', { className: 'ddt-listHeading dim-listHeading' },
h('h3', null, '已绑定的企业微信机器人')),
h(ChannelListHeading, {
className: 'ddt-listHeading',
title: '已绑定的企业微信机器人',
connectionLabel: 'WebSocket 长连接',
}),
h('ul', { className: 'ddt-list dim-botList' }, model.bots.map((account) =>
h('li', { key: account.botId }, h(AccountCard, {
account,

23
plugin-src/client/channels/weixin/index.js
View file

@ -22,6 +22,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 { installWeixinStyles } from './styles.js';
export const name = 'weixin-settings';
@ -221,14 +222,14 @@ export function AccountCard({
h('div', { className: 'dxw-accountIdentity dim-botIdentity' },
h('div', { className: 'dxw-avatar dim-botAvatar', 'aria-hidden': 'true' }, h(WeixinLogoGlyph, { size: 27 })),
h('div', { className: 'dim-botName' }, h('h3', null, account.bot.name), h('p', null, account.bot.accountIdMasked))),
h('div', { className: 'dxw-health dim-botHealth' },
h('span', { className: 'dxw-dot dim-healthDot', 'data-tone': tone }),
h('span', null, account.connected ? '运行正常' : state === 'connecting' ? '正在连接' : '连接未就绪'))),
h('dl', { className: 'dxw-metrics dim-botMetrics' },
h('div', { className: 'dxw-metric dim-botMetric' }, h('dt', null, '消息通道'),
h('dd', null, account.connected ? 'iLink 长轮询' : '离线')),
h('div', { className: 'dxw-metric dim-botMetric' }, h('dt', null, '最近检查'),
h('dd', null, checkedTime(account.health.lastCheckedAt)))),
h(BotStatusMeta, {
className: 'dxw-health',
dotClassName: 'dxw-dot',
tone,
stateLabel: account.connected ? '运行正常' : state === 'connecting' ? '正在连接' : '连接未就绪',
lastCheckedAt: account.health.lastCheckedAt,
formatCheckedTime: checkedTime,
})),
h(WorkspaceEditor, {
workspace: account.workspace,
disabled: Boolean(busy),
@ -267,7 +268,11 @@ export function AccountCard({
function AccountList(props) {
return h('section', { className: 'dim-listSection' },
h('div', { className: 'dxw-listHeading dim-listHeading' }, h('h3', null, '已接入的微信账号')),
h(ChannelListHeading, {
className: 'dxw-listHeading',
title: '已接入的微信账号',
connectionLabel: 'iLink 长轮询',
}),
h('ul', { className: 'dxw-list dim-botList' }, props.bots.map((account) => h('li', { key: account.botId },
h(AccountCard, {
account,

5
plugin-src/client/channels/weixin/styles.js
View file

@ -77,10 +77,6 @@ const CSS = String.raw`
.dxw-accountIdentity h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.dxw-accountIdentity p { color: var(--dsw-alias-label-secondary, #646a73); font: 12px ui-monospace, SFMono-Regular, monospace; margin-top: 4px; }
.dxw-health { display: inline-flex; align-items: center; gap: 7px; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; white-space: nowrap; }
.dxw-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.dxw-metric { padding: 12px 14px; border-radius: 9px; background: var(--dsw-alias-interactive-bg-hover, #f7f8fa); }
.dxw-metric dt { color: var(--dsw-alias-label-tertiary, #8f959e); font-size: 11px; }
.dxw-metric dd { overflow: hidden; margin: 5px 0 0; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dxw-accountFooter { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 16px; border-top: 1px solid var(--dsw-alias-border-l1, #eef0f3); }
.dxw-accountFooter .dxw-actions { flex: none; flex-wrap: nowrap; gap: 8px; margin-top: 0; }
.dxw-accountFooter .dxw-button { flex: none; white-space: nowrap; }
@ -99,7 +95,6 @@ const CSS = String.raw`
.dxw-logo { display: none; }
.dxw-qrLayout { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.dxw-qrCopy { width: 100%; }
.dxw-metrics { grid-template-columns: minmax(0, 1fr); }
.dxw-cardBody { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {

25
plugin-src/client/channels/whatsapp/index.js
View file

@ -10,6 +10,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 { installDingtalkStyles } from '../dingtalk/styles.js';
import {
WHATSAPP_ENDPOINTS,
@ -197,15 +198,14 @@ export function WhatsappAccountCard({
}, h(WhatsappLogoGlyph, { size: 29 })),
h('div', { className: 'dim-botName' },
h('h3', null, account.bot.name), h('p', null, account.bot.idMasked))),
h('div', { className: 'ddt-health dim-botHealth' },
h('span', { className: 'ddt-dot dim-healthDot', 'data-tone': tone }),
h('span', null, stateLabel))),
h('dl', { className: 'ddt-metrics dim-botMetrics' },
h('div', { className: 'ddt-metric dim-botMetric' },
h('dt', null, '消息通道'),
h('dd', null, account.connected ? 'WhatsApp Web' : '离线')),
h('div', { className: 'ddt-metric dim-botMetric' },
h('dt', null, '最近检查'), h('dd', null, checkedTime(account.health.lastCheckedAt)))),
h(BotStatusMeta, {
className: 'ddt-health',
dotClassName: 'ddt-dot',
tone,
stateLabel,
lastCheckedAt: account.health.lastCheckedAt,
formatCheckedTime: checkedTime,
})),
h(WorkspaceEditor, {
workspace: account.workspace,
disabled: Boolean(busy),
@ -440,8 +440,11 @@ export function WhatsappSettingsTab({ rpcCall }) {
const botList = model.bots.length > 0
? h('section', { className: 'dim-listSection' },
h('div', { className: 'ddt-listHeading dim-listHeading' },
h('h3', null, '已接入的 WhatsApp 机器人')),
h(ChannelListHeading, {
className: 'ddt-listHeading',
title: '已接入的 WhatsApp 机器人',
connectionLabel: 'WhatsApp Web',
}),
h('ul', { className: 'ddt-list dim-botList' }, model.bots.map((account) =>
h('li', { key: account.botId }, h(WhatsappAccountCard, {
account,