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

Refine unified IM settings UI

Browse source
This commit is contained in:
xmanrui 2026-08-15 16:24:20 +08:00
parent bd469f58f8
commit 828a50398a
12 changed files with 797 additions and 740 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -131,8 +131,6 @@ function QrPanel({ provision, now, busy, onRefresh, onCancel }) {
h('li', null, '使用已加入企业/组织的钉钉账号扫描左侧二维码'),
h('li', null, '在授权页点击“一键创建新机器人”'),
h('li', null, '保持本页打开，等待机器人自动连接')),
h('div', { className: 'ddt-brandNotice' },
'钉钉官方授权页目前可能显示 OpenClaw 品牌，这是官方连接器授权页面，不影响机器人接入 DeepSeek Harness。'),
h('div', { className: 'ddt-actions' },
expired
? h(Button, { kind: 'primary', onClick: onRefresh, disabled: busy }, '重新生成二维码')
@ -201,7 +199,7 @@ function RemoveConfirmation({ account, busy, onConfirm, onCancel }) {
busy ? '正在移除…' : '确认移除接入')));
}
function AccountCard({
export function AccountCard({
account,
busy,
removing,
@ -226,8 +224,6 @@ function AccountCard({
h('dl', { className: 'ddt-metrics' },
h('div', { className: 'ddt-metric' }, h('dt', null, '消息通道'),
h('dd', null, account.connected ? 'Stream 长连接' : '离线')),
h('div', { className: 'ddt-metric' }, h('dt', null, '收到 / 回复'),
h('dd', null, `${account.stats.messagesReceived} / ${account.stats.messagesReplied}`)),
h('div', { className: 'ddt-metric' }, h('dt', null, '最近检查'),
h('dd', null, checkedTime(account.health.lastCheckedAt)))),
h('div', { className: 'ddt-accountFooter' },

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

@ -68,7 +68,6 @@ const CSS = String.raw`
.ddt-steps { margin: 18px 0 16px; padding: 0; list-style: none; counter-reset: ddt-step; }
.ddt-steps li { position: relative; min-height: 28px; padding: 3px 0 3px 36px; color: var(--dsw-alias-label-secondary, #646a73); font-size: 13px; line-height: 22px; counter-increment: ddt-step; }
.ddt-steps li::before { content: counter(ddt-step); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--ddt-accent-deep); background: var(--ddt-accent-wash); font-size: 12px; font-weight: 700; }
.ddt-brandNotice { margin: 0 0 18px; padding: 10px 12px; border-left: 3px solid #91caff; border-radius: 0 8px 8px 0; color: var(--dsw-alias-label-secondary, #646a73); background: #f5f9ff; font-size: 12px; line-height: 1.55; }
.ddt-loading { padding: 38px; color: var(--dsw-alias-label-secondary, #646a73); text-align: center; }
.ddt-loading h3 { margin: 0 0 7px; color: var(--dsw-alias-label-primary, #1f2329); font-size: 17px; }
.ddt-loading p { line-height: 1.6; }
@ -88,7 +87,7 @@ 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(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.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-fill-tertiary, #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; }

30
plugin-src/client/channels/feishu/index.js
View file

@ -1,5 +1,6 @@
import * as React from "react";
import { FeishuLogoGlyph } from "../../channel-logos.js";
import {
FEISHU_ENDPOINTS,
FEISHU_RPC_CHANNEL,
@ -70,13 +71,6 @@ function SparkIcon({ size = 18 }) {
);
}
function PlusIcon({ size = 17 }) {
return h(SvgIcon, { size }, h("path", {
d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "1.8",
strokeLinecap: "round",
}));
}
function RefreshIcon({ size = 16 }) {
return h(SvgIcon, { size }, h("path", {
d: "M19 7.5V4m0 0h-3.5M19 4l-2.1 2.1A7 7 0 1 0 19 13",
@ -127,9 +121,8 @@ const Button = React.forwardRef(function Button(
}, icon, h("span", null, children));
});
function BrandMark({ compact = false }) {
return h("div", { className: compact ? "bxf-avatar" : "bxf-brandMark" },
h(RobotIcon, { size: compact ? 25 : 34 }));
function BrandMark() {
return h("div", { className: "bxf-brandMark" }, h(RobotIcon, { size: 34 }));
}
function Heading({ totals, onAdd, adding, busy, addButtonRef }) {
@ -149,12 +142,12 @@ function Heading({ totals, onAdd, adding, busy, addButtonRef }) {
h(Button, {
kind: "primary",
size: "small",
icon: h(PlusIcon),
className: "bxf-bindButton",
onClick: onAdd,
disabled: adding || busy,
ref: addButtonRef,
"aria-busy": busy ? "true" : undefined,
}, adding ? "正在添加" : "添加机器人"),
}, adding ? "正在绑定" : "扫码绑定机器人"),
),
);
}
@ -363,7 +356,7 @@ function RemoveConfirmation({ bot, busy, onConfirm, onCancel }) {
);
}
function BotCard({
export function BotCard({
connection,
busy,
actionError,
@ -388,8 +381,6 @@ function BotCard({
?? connection.error?.message
?? health.summary;
const titleId = `bxf-bot-${connection.botId.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
const domainLabel = bot.domain === "lark" ? "Lark" : "飞书";
return h("article", {
className: "bxf-card bxf-botCard",
"aria-labelledby": titleId,
@ -400,12 +391,11 @@ function BotCard({
h("div", { className: "bxf-cardBody" },
h("div", { className: "bxf-connectedTop" },
h("div", { className: "bxf-botIdentity" },
bot.avatarUrl
? h("div", { className: "bxf-avatar" }, h("img", { src: bot.avatarUrl, alt: "" }))
: h(BrandMark, { compact: true }),
h("div", { className: "bxf-avatar", "aria-hidden": "true" },
h(FeishuLogoGlyph, { size: 34 })),
h("div", { className: "bxf-botName" },
h("h3", { id: titleId, title: bot.name }, bot.name),
h("p", null, bot.tenantName ? `${bot.tenantName} · ${domainLabel}机器人` : `${domainLabel}机器人`)),
h("p", { title: bot.appIdMasked }, bot.appIdMasked ?? "应用标识已安全保存")),
),
h("div", { className: "bxf-healthPill", "data-health": stateForDisplay },
h("span", { className: "bxf-dot", "data-tone": tone }),
@ -414,8 +404,6 @@ function BotCard({
h("dl", { className: "bxf-statusGrid" },
h("div", { className: "bxf-metric" }, h("dt", null, "消息通道"),
h("dd", null, connected ? "长连接" : stateForDisplay === "connecting" ? "连接中" : "已断开")),
h("div", { className: "bxf-metric" }, h("dt", null, "应用标识"),
h("dd", { title: bot.appIdMasked }, bot.appIdMasked ?? "已安全保存")),
h("div", { className: "bxf-metric" }, h("dt", null, "最近检查"),
h("dd", null, formatCheckedTime(health.lastCheckedAt))),
),

21
plugin-src/client/channels/feishu/styles.js
View file

@ -56,11 +56,12 @@ const CSS = String.raw`
}
.bxf-headingTools {
width: 100%;
flex: none;
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
flex-wrap: nowrap;
gap: 8px;
}
@ -246,6 +247,7 @@ const CSS = String.raw`
.bxf-button[data-kind="danger"] { color: var(--bxf-error); }
.bxf-button[data-size="small"] { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.bxf-bindButton { flex: none; white-space: nowrap; }
.bxf-provisionCard {
border-color: color-mix(in srgb, var(--bxf-accent) 32%, var(--dsw-alias-border-l2, #dee0e3));
@ -408,17 +410,16 @@ const CSS = String.raw`
.bxf-connectedTop { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.bxf-botIdentity { min-width: 0; display: flex; align-items: center; gap: 13px; }
.bxf-avatar { flex: none; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; color: var(--bxf-accent); background: color-mix(in srgb, var(--bxf-accent) 9%, var(--dsw-alias-bg-layer-1, #fff)); }
.bxf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bxf-avatar { flex: none; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--dsw-alias-line-border, #e5e6eb); border-radius: 14px; background: var(--dsw-alias-bg-layer-1, #fff); box-shadow: 0 1px 3px rgb(31 35 41 / 7%); }
.bxf-botName { min-width: 0; }
.bxf-botName h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 24px; font-weight: 650; }
.bxf-botName p { color: var(--dsw-alias-label-tertiary, #8f959e); font-size: 12px; line-height: 18px; margin-top: 2px; }
.bxf-botName p { overflow: hidden; color: var(--dsw-alias-label-tertiary, #8f959e); font-family: var(--ds-font-family-code, monospace); font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.bxf-healthPill { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 28px; border-radius: 999px; padding: 4px 10px; color: var(--bxf-success); background: color-mix(in srgb, var(--bxf-success) 10%, transparent); font-size: 12px; font-weight: 600; line-height: 18px; }
.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(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.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; }
@ -476,15 +477,13 @@ const CSS = String.raw`
@keyframes bxf-shimmer { to { background-position: -220% 0; } }
@container (max-width: 620px) {
.bxf-heading { flex-direction: column; gap: 10px; }
.bxf-headingTools { width: 100%; justify-content: flex-start; }
.bxf-headingTools .bxf-button { margin-left: auto; }
.bxf-headingTools { gap: 6px; }
.bxf-headingTools .bxf-totalBadge, .bxf-headingTools .bxf-localBadge { padding-inline: 8px; }
.bxf-headingTools .bxf-localBadge { gap: 4px; }
.bxf-headingTools .bxf-bindButton { padding-inline: 10px; }
}
@media (max-width: 680px) {
.bxf-heading { flex-direction: column; gap: 10px; }
.bxf-headingTools { width: 100%; justify-content: flex-start; }
.bxf-headingTools .bxf-button { margin-left: auto; }
.bxf-intro { grid-template-columns: minmax(0, 1fr); }
.bxf-markStage { display: none; }
.bxf-qrLayout { grid-template-columns: minmax(0, 1fr); justify-items: center; }

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

@ -1,5 +1,6 @@
import * as React from 'react';
import { WeixinLogoGlyph } from '../../channel-logos.js';
import {
WEIXIN_ENDPOINTS,
WEIXIN_RPC_CHANNEL,
@ -19,29 +20,6 @@ const h = React.createElement;
export const name = 'weixin-settings';
export const inject = ['slots', 'connection'];
function WeixinIcon({ size = 26 }) {
return h('svg', {
width: size,
height: size,
viewBox: '0 0 24 24',
fill: 'none',
xmlns: 'http://www.w3.org/2000/svg',
'aria-hidden': 'true',
},
h('path', {
d: 'M9.7 4.2c-4.15 0-7.5 2.72-7.5 6.08 0 1.91 1.08 3.61 2.78 4.72l-.7 2.35 2.75-1.37c.84.25 1.73.38 2.67.38 4.14 0 7.5-2.72 7.5-6.08S13.84 4.2 9.7 4.2Z',
fill: 'currentColor', opacity: '.96',
}),
h('path', {
d: 'M14.4 8.2c4.08 0 7.4 2.66 7.4 5.95 0 1.78-.97 3.38-2.5 4.47l.58 2-2.36-1.18c-.97.43-2.03.65-3.12.65-4.09 0-7.4-2.66-7.4-5.94 0-3.29 3.31-5.95 7.4-5.95Z',
fill: 'currentColor', stroke: 'white', strokeWidth: '.8',
}),
h('circle', { cx: '7.25', cy: '9.5', r: '1', fill: 'white' }),
h('circle', { cx: '11.55', cy: '9.5', r: '1', fill: 'white' }),
h('circle', { cx: '12.1', cy: '13.2', r: '.9', fill: 'white' }),
h('circle', { cx: '16.3', cy: '13.2', r: '.9', fill: 'white' }));
}
const Button = React.forwardRef(function Button(
{ children, kind = 'secondary', className = '', ...props },
ref,
@ -93,7 +71,7 @@ function EmptyView({ onStart, busy }) {
h(Button, { kind: 'primary', onClick: onStart, disabled: busy },
busy ? '正在生成二维码…' : '生成微信二维码')),
),
h('div', { className: 'dxw-logo', 'aria-hidden': 'true' }, h(WeixinIcon, { size: 64 })),
h('div', { className: 'dxw-logo', 'aria-hidden': 'true' }, h(WeixinLogoGlyph, { size: 64 })),
));
}
@ -216,14 +194,14 @@ function checkedTime(timestamp) {
}
}
function AccountCard({ account, busy, removing, onReconnect, onRequestRemove, onConfirmRemove, onCancelRemove }) {
export function AccountCard({ account, busy, removing, onReconnect, onRequestRemove, onConfirmRemove, onCancelRemove }) {
const state = busy === 'reconnect' ? 'connecting' : account.state;
const tone = account.connected ? 'success' : state === 'error' ? 'error' : 'warning';
return h('article', { className: 'dxw-card', tabIndex: -1, 'data-bot-id': account.botId },
h('div', { className: 'dxw-cardBody' },
h('div', { className: 'dxw-accountTop' },
h('div', { className: 'dxw-accountIdentity' },
h('div', { className: 'dxw-avatar', 'aria-hidden': 'true' }, h(WeixinIcon, { size: 27 })),
h('div', { className: 'dxw-avatar', 'aria-hidden': 'true' }, h(WeixinLogoGlyph, { size: 27 })),
h('div', null, h('h3', null, account.bot.name), h('p', null, account.bot.accountIdMasked))),
h('div', { className: 'dxw-health' },
h('span', { className: 'dxw-dot', 'data-tone': tone }),
@ -231,8 +209,6 @@ function AccountCard({ account, busy, removing, onReconnect, onRequestRemove, on
h('dl', { className: 'dxw-metrics' },
h('div', { className: 'dxw-metric' }, h('dt', null, '消息通道'),
h('dd', null, account.connected ? 'iLink 长轮询' : '离线')),
h('div', { className: 'dxw-metric' }, h('dt', null, '收到 / 回复'),
h('dd', null, `${account.stats.messagesReceived} / ${account.stats.messagesReplied}`)),
h('div', { className: 'dxw-metric' }, h('dt', null, '最近检查'),
h('dd', null, checkedTime(account.health.lastCheckedAt)))),
h('div', { className: 'dxw-accountFooter' },

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

@ -78,7 +78,7 @@ 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(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.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-fill-tertiary, #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; }