Internalize all IM channel implementations

2026-10-09 03:03:24 +08:00 · 2026-08-15 15:40:53 +08:00 · 2026-08-15 15:40:53 +08:00 · bd469f58f8
commit bd469f58f8
parent 8996476693
95 changed files with 25012 additions and 100 deletions
--- a/plugin-src/client/channels/dingtalk/api.js
+++ b/plugin-src/client/channels/dingtalk/api.js
@ -0,0 +1,202 @@
+export const DINGTALK_RPC_CHANNEL = '/dingtalk';
+
+export const DINGTALK_ENDPOINTS = Object.freeze({
+  status: 'connection.status',
+  beginProvisioning: 'provision.begin',
+  pollProvisioning: 'provision.poll',
+  cancelProvisioning: 'provision.cancel',
+  reconnectBot: 'bot.reconnect',
+  deleteBot: 'bot.delete',
+});
+
+const ACCOUNT_STATES = new Set(['connected', 'connecting', 'offline', 'error']);
+const SNAPSHOT_STATES = new Set(['disconnected', 'offline', 'provisioning', 'connected', 'degraded']);
+const PROVISION_STATES = new Set([
+  'starting',
+  'pending',
+  'scanned',
+  'authorizing',
+  'creating',
+  'connecting',
+  'connected',
+  'expired',
+  'failed',
+  'cancelled',
+]);
+const HEALTH_STATES = new Set(['healthy', 'checking', 'degraded', 'offline']);
+const FORBIDDEN_ERROR_FIELDS = /(client[_-]?secret|secret[_-]?ref|device[_-]?code|app[_-]?secret|access[_-]?token|token)/i;
+const QR_DATA_URL = /^data:image\/(?:png|webp);base64,[a-z\d+/]+={0,2}$/i;
+const MAX_QR_SOURCE_LENGTH = 2 * 1024 * 1024;
+
+function isRecord(value) {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+function optionalString(value, maxLength = 240) {
+  if (typeof value !== 'string') return undefined;
+  const trimmed = value.trim();
+  return trimmed ? trimmed.slice(0, maxLength) : undefined;
+}
+
+function opaqueId(value) {
+  const id = optionalString(value, 128);
+  return id && /^[a-z\d_-]+$/i.test(id) ? id : undefined;
+}
+
+function timestamp(value) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string' && value.trim()) {
+    const parsed = Date.parse(value);
+    return Number.isNaN(parsed) ? undefined : parsed;
+  }
+  return undefined;
+}
+
+function nonNegativeInteger(value) {
+  const number = Number(value);
+  return Number.isSafeInteger(number) && number >= 0 ? number : 0;
+}
+
+function clamp(value, min, max, fallback) {
+  const number = Number(value);
+  return Number.isFinite(number) ? Math.min(max, Math.max(min, number)) : fallback;
+}
+
+function safeErrorCode(value, fallback) {
+  const code = optionalString(value, 80);
+  return code && /^[a-z][a-z\d_.:-]*$/i.test(code) && !FORBIDDEN_ERROR_FIELDS.test(code)
+    ? code
+    : fallback;
+}
+
+function sanitizeMessage(value, fallback) {
+  const message = optionalString(value, 480) ?? fallback;
+  if (FORBIDDEN_ERROR_FIELDS.test(message)) return fallback;
+  return message.replace(/([=:]\s*)[^\s,;，。]+/g, '$1••••••').slice(0, 240);
+}
+
+function normalizeError(value, fallbackCode, fallbackMessage) {
+  if (!isRecord(value)) return undefined;
+  return {
+    code: safeErrorCode(value.code, fallbackCode),
+    message: sanitizeMessage(value.message, fallbackMessage),
+  };
+}
+
+export function unwrapRpcResult(result) {
+  if (!isRecord(result) || typeof result.ok !== 'boolean') {
+    throw new Error('钉钉服务返回了无法识别的响应');
+  }
+  if (!result.ok) {
+    const error = new Error(sanitizeMessage(result.error?.message, '钉钉操作失败'));
+    error.code = safeErrorCode(result.error?.code, 'DINGTALK_RPC_ERROR');
+    throw error;
+  }
+  return result.value;
+}
+
+export function safeQrSource(value) {
+  if (typeof value !== 'string' || value.length > MAX_QR_SOURCE_LENGTH) return undefined;
+  return QR_DATA_URL.test(value) ? value : undefined;
+}
+
+export function normalizeProvisioning(value, now = Date.now()) {
+  const source = isRecord(value?.provisioning) ? value.provisioning : value;
+  if (!isRecord(source)) throw new Error('钉钉服务没有返回扫码绑定进度');
+  const attemptId = opaqueId(source.attemptId);
+  if (!attemptId) throw new Error('钉钉扫码服务没有返回有效的绑定任务');
+
+  const reportedStatus = optionalString(source.status, 32) ?? optionalString(source.state, 32);
+  const status = PROVISION_STATES.has(reportedStatus) ? reportedStatus : 'failed';
+  const expiresAt = timestamp(source.expiresAt)
+    ?? now + clamp(source.expiresIn, 1, 2 * 60 * 60, 10 * 60) * 1_000;
+  const result = {
+    attemptId,
+    status,
+    expiresAt,
+    pollIntervalMs: clamp(source.pollIntervalMs, 1_000, 10_000, 3_000),
+  };
+  const qrCodeDataUrl = safeQrSource(source.qrCodeDataUrl);
+  if (qrCodeDataUrl) result.qrCodeDataUrl = qrCodeDataUrl;
+  if (opaqueId(source.botId)) result.botId = opaqueId(source.botId);
+  if (source.alreadyConnected === true) result.alreadyConnected = true;
+  const error = normalizeError(
+    source.error,
+    'DINGTALK_PROVISION_FAILED',
+    '钉钉机器人没有接入完成',
+  );
+  if (error) result.error = error;
+  return result;
+}
+
+function normalizeBot(value) {
+  if (!isRecord(value)) return undefined;
+  const botId = opaqueId(value.botId);
+  if (!botId) return undefined;
+  const bot = isRecord(value.bot) ? value.bot : {};
+  const connected = value.connected === true;
+  const reportedState = ACCOUNT_STATES.has(value.state) ? value.state : 'offline';
+  const state = connected ? 'connected' : reportedState === 'connected' ? 'connecting' : reportedState;
+  const health = isRecord(value.health) ? value.health : {};
+  const stats = isRecord(value.stats) ? value.stats : {};
+  return {
+    botId,
+    state,
+    connected,
+    configured: value.configured !== false,
+    bot: {
+      name: optionalString(bot.name, 100) ?? '钉钉机器人',
+      clientIdMasked: optionalString(bot.clientIdMasked, 140) ?? '已安全保存',
+    },
+    health: {
+      status: HEALTH_STATES.has(health.status)
+        ? health.status
+        : connected ? 'healthy' : 'offline',
+      summary: optionalString(health.summary, 200)
+        ?? (connected ? '钉钉 Stream 长连接运行正常' : '钉钉连接尚未就绪'),
+      lastCheckedAt: timestamp(health.lastCheckedAt),
+      lastConnectedAt: timestamp(health.lastConnectedAt),
+    },
+    stats: {
+      messagesReceived: nonNegativeInteger(stats.messagesReceived),
+      messagesReplied: nonNegativeInteger(stats.messagesReplied),
+    },
+    error: normalizeError(value.error, 'DINGTALK_ACCOUNT_ERROR', '钉钉连接尚未就绪') ?? null,
+  };
+}
+
+export function normalizeSnapshot(value) {
+  const source = isRecord(value?.snapshot) ? value.snapshot : value;
+  if (!isRecord(source) || !Array.isArray(source.bots)) {
+    throw new Error('钉钉服务没有返回有效的机器人列表');
+  }
+  const seen = new Set();
+  const bots = source.bots.map(normalizeBot).filter((bot) => {
+    if (!bot || seen.has(bot.botId)) return false;
+    seen.add(bot.botId);
+    return true;
+  });
+  return {
+    schemaVersion: Number.isSafeInteger(source.schemaVersion) ? source.schemaVersion : 1,
+    revision: nonNegativeInteger(source.revision),
+    state: SNAPSHOT_STATES.has(source.state) ? source.state : 'offline',
+    bots,
+    totals: {
+      configured: bots.length,
+      connected: bots.filter((bot) => bot.connected).length,
+    },
+    provisioning: source.provisioning ? normalizeProvisioning(source.provisioning) : null,
+  };
+}
+
+export function presentError(error) {
+  return {
+    code: safeErrorCode(error?.code, 'DINGTALK_ERROR'),
+    message: sanitizeMessage(error?.message, '钉钉操作失败，请稍后重试'),
+  };
+}
+
+export function formatRemaining(milliseconds) {
+  const seconds = Math.max(0, Math.ceil(Number(milliseconds) / 1_000) || 0);
+  return `${String(Math.floor(seconds / 60)).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;
+}
--- a/plugin-src/client/channels/dingtalk/index.js
+++ b/plugin-src/client/channels/dingtalk/index.js
@ -0,0 +1,661 @@
+import * as React from 'react';
+
+import {
+  DINGTALK_ENDPOINTS,
+  DINGTALK_RPC_CHANNEL,
+  formatRemaining,
+  normalizeProvisioning,
+  normalizeSnapshot,
+  presentError,
+  safeQrSource,
+  unwrapRpcResult,
+} from './api.js';
+import { installDingtalkStyles } from './styles.js';
+
+const h = React.createElement;
+const ACTIVE_PROVISION_STATES = new Set(['pending', 'scanned', 'authorizing', 'creating', 'connecting']);
+
+export const name = 'dingtalk-settings';
+export const inject = ['slots', 'connection'];
+
+function DingtalkIcon({ size = 28 }) {
+  return h('svg', {
+    width: size,
+    height: size,
+    viewBox: '0 0 48 48',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+    'aria-hidden': 'true',
+    focusable: 'false',
+  }, h('path', {
+    fill: 'currentColor',
+    d: 'M37.05 22.783c-6.758-5.216-14.378-12.128-22.73-19.538-.655-.585-1.242-.354-1.536.42-1.88 4.973-.058 9.386 2.889 11.932s7.368 4.912 10.058 6.155c.105.049.013.203-.093.163-4.953-2.182-8.397-3.765-13.07-7.368-.497-.388-1.01-.242-1.07.521-.384 4.748 2.657 8.483 6.058 9.745 2.1.781 4.398 1.212 6.53 1.474.109.015.084.178-.027.178-2.747.01-6.058-.654-8.935-1.751-.606-.233-.818.25-.722.633.491 2.008 2.974 5.076 6.926 5.73a12 12 0 0 0 2.228.115c.164 0 .208.089.154.217q-2.685 4.6-2.803 4.797c-.091.152-.036.275.156.275h3.543c.164 0 .264.106.18.246l-4.958 8.196c-.191.328.035.565.395.301s15.212-11.133 15.636-11.448c.195-.142.148-.327-.124-.327h-3.18c-.206 0-.252-.14-.111-.28.14-.141 3.602-3.594 4.837-4.888 1.283-1.35 1.938-3.825-.231-5.498',
+  }));
+}
+
+const Button = React.forwardRef(function Button(
+  { children, kind = 'secondary', className = '', ...props },
+  ref,
+) {
+  return h('button', {
+    ...props,
+    ref,
+    type: 'button',
+    className: `ddt-button ${className}`.trim(),
+    'data-kind': kind,
+  }, children);
+});
+
+function Heading({ totals, adding, busy, onAdd, addButtonRef }) {
+  return h('div', { className: 'ddt-heading' },
+    h('div', { className: 'ddt-headingCopy' },
+      h('div', { className: 'ddt-eyebrow' }, 'Channel'),
+      h('h2', null, '钉钉机器人'),
+      h('p', null, '通过扫码把钉钉机器人接入 DeepSeek Harness')),
+    h('div', { className: 'ddt-tools' },
+      totals.configured > 0
+        ? h('div', { className: 'ddt-badge' },
+            h('span', {
+              className: 'ddt-dot',
+              'data-tone': totals.connected > 0 ? 'success' : 'warning',
+            }),
+            h('span', null, `${totals.connected} / ${totals.configured} 在线`))
+        : null,
+      h('div', {
+        className: 'ddt-badge',
+        title: '应用密钥只写入 Harness Host 凭据服务，不会发送到浏览器',
+      }, '凭据仅保存在本机'),
+      h(Button, {
+        kind: 'primary',
+        onClick: onAdd,
+        disabled: adding || busy,
+        ref: addButtonRef,
+      }, adding ? '正在接入' : '扫码接入钉钉')));
+}
+
+function LoadingView() {
+  return h('div', { className: 'ddt-card ddt-loading', 'aria-busy': 'true' },
+    h('div', { className: 'ddt-spinner' }),
+    h('span', null, '正在读取钉钉连接状态…'));
+}
+
+function EmptyView({ busy, onStart }) {
+  return h('div', { className: 'ddt-card' },
+    h('div', { className: 'ddt-cardBody ddt-empty' },
+      h('div', null,
+        h('div', { className: 'ddt-stateLabel' },
+          h('span', { className: 'ddt-dot' }), h('span', null, '尚未接入钉钉机器人')),
+        h('h3', null, '扫一次码，自动创建并连接机器人'),
+        h('p', null, '授权由钉钉官方页面完成。扫码账号必须已加入一个企业/组织并有权创建机器人；创建成功后，应用凭据会直接写入 Harness Host。'),
+        h('div', { className: 'ddt-actions' },
+          h(Button, { kind: 'primary', onClick: onStart, disabled: busy },
+            busy ? '正在生成二维码…' : '生成钉钉二维码'))),
+      h('div', { className: 'ddt-brandMark', 'aria-hidden': 'true' },
+        h(DingtalkIcon, { size: 68 }))));
+}
+
+function QrPanel({ provision, now, busy, onRefresh, onCancel }) {
+  const [imageFailed, setImageFailed] = React.useState(false);
+  const source = safeQrSource(provision.qrCodeDataUrl);
+  const remaining = Math.max(0, provision.expiresAt - now);
+  const expired = remaining === 0 || provision.status === 'expired';
+  const duration = Math.max(1, provision.durationMs ?? 10 * 60_000);
+  const progress = Math.round(Math.min(1, remaining / duration) * 100);
+
+  React.useEffect(() => setImageFailed(false), [source]);
+
+  return h('div', { className: 'ddt-card' },
+    h('div', { className: 'ddt-cardBody ddt-qrLayout' },
+      h('div', { className: 'ddt-qrColumn' },
+        h('div', { className: 'ddt-qrFrame' },
+          source && !imageFailed
+            ? h('img', {
+                src: source,
+                alt: '用于把钉钉机器人接入 DeepSeek Harness 的一次性二维码',
+                onError: () => setImageFailed(true),
+              })
+            : h('div', { className: 'ddt-qrFallback' }, '二维码图片未就绪，请重新生成。'),
+          expired ? h('div', { className: 'ddt-expired' }, '二维码已过期\n请重新生成') : null),
+        h('div', { className: 'ddt-countdown' },
+          h('div', { className: 'ddt-countdownTop' },
+            h('span', null, '二维码有效时间'), h('strong', null, formatRemaining(remaining))),
+          h('div', { className: 'ddt-progress', 'aria-hidden': 'true' },
+            h('span', { style: { '--ddt-progress': `${progress}%` } })))),
+      h('div', { className: 'ddt-qrCopy' },
+        h('div', { className: 'ddt-stateLabel' },
+          h('span', { className: 'ddt-dot', 'data-tone': expired ? 'error' : 'warning' }),
+          h('span', null, expired ? '二维码已失效' : '等待钉钉扫码授权')),
+        h('h3', null, expired ? '重新生成二维码后继续' : '使用钉钉 App 完成机器人授权'),
+        h('p', null, '扫码账号必须已加入企业/组织。如果钉钉提示尚未加入组织，请在提示页创建组织，或换用已加入组织的账号。'),
+        h('ol', { className: 'ddt-steps' },
+          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 }, '重新生成二维码')
+            : null,
+          !expired ? h(Button, { onClick: onRefresh, disabled: busy }, '换一个二维码') : null,
+          h(Button, { onClick: onCancel, disabled: busy }, '取消')))));
+}
+
+function ProgressPanel({ status, busy, onCancel }) {
+  const connecting = status === 'connecting';
+  const creating = status === 'creating';
+  return h('div', { className: 'ddt-card ddt-loading', 'aria-busy': 'true' },
+    h('div', { className: 'ddt-spinner' }),
+    h('h3', null, connecting
+      ? '机器人已创建，正在建立消息连接'
+      : creating ? '授权已确认，正在创建钉钉机器人' : '正在确认钉钉授权'),
+    h('p', null, connecting
+      ? '正在检查钉钉 Stream 长连接，成功后会自动显示为在线。'
+      : '请勿关闭本页，钉钉完成授权后将自动继续。'),
+    h('div', { className: 'ddt-actions', style: { justifyContent: 'center', marginTop: 14 } },
+      h(Button, { onClick: onCancel, disabled: busy }, '取消接入')));
+}
+
+function ProvisionError({ provision, busy, onRetry, onClose }) {
+  const error = provision.error ?? {
+    code: 'DINGTALK_PROVISION_FAILED',
+    message: '钉钉机器人没有接入完成',
+  };
+  return h('div', { className: 'ddt-card' },
+    h('div', { className: 'ddt-inlineError', role: 'alert' },
+      h('h3', null, provision.status === 'expired' ? '二维码已过期' : '钉钉机器人没有接入完成'),
+      h('p', null, error.message),
+      h('span', { className: 'ddt-errorCode' }, error.code),
+      h('div', { className: 'ddt-actions' },
+        h(Button, { kind: 'primary', onClick: onRetry, disabled: busy }, '重新生成二维码'),
+        h(Button, { onClick: onClose, disabled: busy }, '关闭'))));
+}
+
+function checkedTime(value) {
+  if (!value) return '尚未检查';
+  try {
+    return new Intl.DateTimeFormat('zh-CN', {
+      hour: '2-digit', minute: '2-digit', second: '2-digit',
+    }).format(new Date(value));
+  } catch {
+    return '刚刚';
+  }
+}
+
+function RemoveConfirmation({ account, busy, onConfirm, onCancel }) {
+  const cancelRef = React.useRef(null);
+  React.useEffect(() => cancelRef.current?.focus(), []);
+  return h('div', {
+    className: 'ddt-confirm',
+    role: 'alertdialog',
+    'aria-label': `移除${account.bot.name}`,
+    onKeyDown: (event) => {
+      if (event.key === 'Escape' && !busy) onCancel();
+    },
+  },
+  h('strong', null, `从 DeepSeek Harness 移除“${account.bot.name}”？`),
+  h('p', null, '这会停止消息连接，并删除本机保存的应用凭据、机器人配置及会话映射。钉钉开放平台中的机器人不会被自动删除。'),
+  h('div', { className: 'ddt-actions' },
+    h(Button, { ref: cancelRef, onClick: onCancel, disabled: busy }, '保留机器人'),
+    h(Button, { kind: 'danger', onClick: onConfirm, disabled: busy },
+      busy ? '正在移除…' : '确认移除接入')));
+}
+
+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';
+  const stateLabel = account.connected ? '运行正常' : state === 'connecting' ? '正在连接' : '连接未就绪';
+  return h('article', { className: 'ddt-card', tabIndex: -1, 'data-bot-id': account.botId },
+    h('div', { className: 'ddt-cardBody' },
+      h('div', { className: 'ddt-accountTop' },
+        h('div', { className: 'ddt-accountIdentity' },
+          h('div', { className: 'ddt-avatar', 'aria-hidden': 'true' }, h(DingtalkIcon, { size: 29 })),
+          h('div', null,
+            h('h3', { title: account.bot.name }, account.bot.name),
+            h('p', { title: account.bot.clientIdMasked }, account.bot.clientIdMasked))),
+        h('div', { className: 'ddt-health' },
+          h('span', { className: 'ddt-dot', 'data-tone': tone }), h('span', null, stateLabel))),
+      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' },
+        h('div', { className: 'ddt-summary' }, account.error?.message ?? account.health.summary),
+        h('div', { className: 'ddt-actions' },
+          h(Button, { onClick: onReconnect, disabled: Boolean(busy) },
+            busy === 'reconnect' ? '检查中…' : account.connected ? '检查连接' : '重试连接'),
+          h(Button, { kind: 'danger', onClick: onRequestRemove, disabled: Boolean(busy) },
+            '移除接入')))),
+    removing ? h(RemoveConfirmation, {
+      account,
+      busy: busy === 'delete',
+      onConfirm: onConfirmRemove,
+      onCancel: onCancelRemove,
+    }) : null);
+}
+
+function AccountList(props) {
+  return h('section', null,
+    h('div', { className: 'ddt-listHeading' },
+      h('h3', null, '已接入的钉钉机器人'), h('span', null, `${props.bots.length} 个`)),
+    h('ul', { className: 'ddt-list' }, props.bots.map((account) => h('li', { key: account.botId },
+      h(AccountCard, {
+        account,
+        busy: props.busyByBot[account.botId],
+        removing: props.removeTarget === account.botId,
+        onReconnect: () => props.onReconnect(account),
+        onRequestRemove: () => props.onRequestRemove(account),
+        onConfirmRemove: () => props.onConfirmRemove(account),
+        onCancelRemove: props.onCancelRemove,
+      })))));
+}
+
+const EMPTY_TOTALS = Object.freeze({ configured: 0, connected: 0 });
+
+export function DingtalkSettingsTab({ rpcCall }) {
+  const [model, setModel] = React.useState({
+    phase: 'loading', bots: [], totals: EMPTY_TOTALS, revision: 0, error: null,
+  });
+  const [provision, setProvision] = React.useState(null);
+  const [busy, setBusy] = React.useState(false);
+  const [busyByBot, setBusyByBot] = React.useState({});
+  const [removeTarget, setRemoveTarget] = React.useState(null);
+  const [notice, setNotice] = React.useState('');
+  const [now, setNow] = React.useState(() => Date.now());
+  const addButtonRef = React.useRef(null);
+  const mountedRef = React.useRef(true);
+  const statusRequestRef = React.useRef(0);
+  const noticeFrameRef = React.useRef(null);
+  const focusFrameRef = React.useRef(null);
+
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      statusRequestRef.current += 1;
+      if (noticeFrameRef.current !== null) {
+        window.cancelAnimationFrame(noticeFrameRef.current);
+        noticeFrameRef.current = null;
+      }
+      if (focusFrameRef.current !== null) {
+        window.cancelAnimationFrame(focusFrameRef.current);
+        focusFrameRef.current = null;
+      }
+    };
+  }, []);
+
+  React.useEffect(() => installDingtalkStyles(), []);
+
+  const announce = React.useCallback((message) => {
+    if (!mountedRef.current) return;
+    if (noticeFrameRef.current !== null) {
+      window.cancelAnimationFrame(noticeFrameRef.current);
+      noticeFrameRef.current = null;
+    }
+    setNotice('');
+    if (message) {
+      noticeFrameRef.current = window.requestAnimationFrame(() => {
+        noticeFrameRef.current = null;
+        if (mountedRef.current) setNotice(message);
+      });
+    }
+  }, []);
+
+  const focusAddButton = React.useCallback(() => {
+    if (!mountedRef.current) return;
+    if (focusFrameRef.current !== null) window.cancelAnimationFrame(focusFrameRef.current);
+    focusFrameRef.current = window.requestAnimationFrame(() => {
+      focusFrameRef.current = null;
+      if (mountedRef.current) addButtonRef.current?.focus();
+    });
+  }, []);
+
+  const invoke = React.useCallback(async (endpoint, payload = {}, signal) => {
+    if (typeof rpcCall !== 'function') throw new TypeError('钉钉设置页缺少 RPC 连接');
+    return unwrapRpcResult(await rpcCall(endpoint, payload, signal));
+  }, [rpcCall]);
+
+  const loadStatus = React.useCallback(async ({
+    signal,
+    silent = false,
+    restoreProvisioning = false,
+  } = {}) => {
+    if (!mountedRef.current || signal?.aborted) return undefined;
+    const requestId = statusRequestRef.current + 1;
+    statusRequestRef.current = requestId;
+    const canCommit = () => mountedRef.current
+      && !signal?.aborted
+      && statusRequestRef.current === requestId;
+    if (!silent && canCommit()) {
+      setModel((current) => ({ ...current, phase: 'loading', error: null }));
+    }
+    try {
+      const snapshot = normalizeSnapshot(await invoke(DINGTALK_ENDPOINTS.status, {}, signal));
+      if (!canCommit()) return undefined;
+      setModel({
+        phase: 'ready',
+        bots: snapshot.bots,
+        totals: snapshot.totals,
+        revision: snapshot.revision,
+        error: null,
+      });
+      if (restoreProvisioning && snapshot.provisioning) {
+        setProvision((current) => !current || current.attemptId === snapshot.provisioning.attemptId
+          ? {
+              ...current,
+              ...snapshot.provisioning,
+              durationMs: current?.durationMs
+                ?? Math.max(1, snapshot.provisioning.expiresAt - Date.now()),
+            }
+          : current);
+      }
+      return snapshot;
+    } catch (error) {
+      if (error?.name === 'AbortError' || !canCommit()) return undefined;
+      setModel((current) => ({
+        ...current,
+        phase: silent && current.phase === 'ready' ? 'ready' : 'error',
+        error: presentError(error),
+      }));
+      return undefined;
+    }
+  }, [invoke]);
+
+  React.useEffect(() => {
+    const controller = new AbortController();
+    void loadStatus({ signal: controller.signal, restoreProvisioning: true });
+    return () => controller.abort();
+  }, [loadStatus]);
+
+  React.useEffect(() => {
+    if (model.phase !== 'ready') return undefined;
+    const controller = new AbortController();
+    let running = false;
+    const timer = window.setInterval(async () => {
+      if (running || controller.signal.aborted || !mountedRef.current) return;
+      running = true;
+      await loadStatus({
+        signal: controller.signal,
+        silent: true,
+        restoreProvisioning: false,
+      });
+      running = false;
+    }, 15_000);
+    return () => {
+      controller.abort();
+      window.clearInterval(timer);
+    };
+  }, [loadStatus, model.phase]);
+
+  React.useEffect(() => {
+    if (!provision || !ACTIVE_PROVISION_STATES.has(provision.status)) return undefined;
+    const timer = window.setInterval(() => {
+      if (mountedRef.current) setNow(Date.now());
+    }, 1_000);
+    return () => window.clearInterval(timer);
+  }, [provision?.attemptId, provision?.status]);
+
+  const startProvisioning = React.useCallback(async ({ replace = false } = {}) => {
+    if (!mountedRef.current) return;
+    setBusy(true);
+    try {
+      if (replace && provision?.attemptId) {
+        await invoke(DINGTALK_ENDPOINTS.cancelProvisioning, {
+          attemptId: provision.attemptId,
+        });
+        if (!mountedRef.current) return;
+      }
+      setProvision({ status: 'starting' });
+      const started = normalizeProvisioning(await invoke(
+        DINGTALK_ENDPOINTS.beginProvisioning,
+        { locale: 'zh-CN' },
+      ));
+      if (!mountedRef.current) return;
+      if (!started.qrCodeDataUrl) {
+        throw new Error('钉钉扫码服务没有返回安全的二维码');
+      }
+      setNow(Date.now());
+      setProvision({
+        ...started,
+        durationMs: Math.max(1, started.expiresAt - Date.now()),
+      });
+      announce('钉钉二维码已生成，请使用钉钉 App 扫描。');
+    } catch (error) {
+      if (!mountedRef.current) return;
+      setProvision({
+        attemptId: provision?.attemptId,
+        status: 'failed',
+        error: presentError(error),
+      });
+    } finally {
+      if (mountedRef.current) setBusy(false);
+    }
+  }, [announce, invoke, provision?.attemptId]);
+
+  const cancelProvisioning = React.useCallback(async () => {
+    if (!mountedRef.current) return;
+    setBusy(true);
+    try {
+      if (provision?.attemptId && !['failed', 'expired', 'cancelled'].includes(provision.status)) {
+        await invoke(DINGTALK_ENDPOINTS.cancelProvisioning, { attemptId: provision.attemptId });
+        if (!mountedRef.current) return;
+      }
+      setProvision(null);
+      announce('已取消钉钉机器人接入。');
+      focusAddButton();
+    } catch (error) {
+      if (!mountedRef.current) return;
+      setProvision((current) => ({ ...current, status: 'failed', error: presentError(error) }));
+    } finally {
+      if (mountedRef.current) setBusy(false);
+    }
+  }, [announce, focusAddButton, invoke, provision?.attemptId, provision?.status]);
+
+  React.useEffect(() => {
+    const attemptId = provision?.attemptId;
+    if (!attemptId || !ACTIVE_PROVISION_STATES.has(provision.status)) return undefined;
+    const controller = new AbortController();
+    let disposed = false;
+    let timer = null;
+    const canCommit = () => !disposed && !controller.signal.aborted && mountedRef.current;
+    const schedule = (delay) => {
+      if (!canCommit()) return;
+      if (timer !== null) window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        timer = null;
+        if (canCommit()) void poll();
+      }, delay);
+    };
+    const poll = async () => {
+      try {
+        const response = await invoke(
+          DINGTALK_ENDPOINTS.pollProvisioning,
+          { attemptId },
+          controller.signal,
+        );
+        if (!canCommit()) return;
+        const result = normalizeProvisioning(response);
+        if (result.status === 'connected') {
+          const snapshot = await loadStatus({
+            signal: controller.signal,
+            silent: true,
+            restoreProvisioning: false,
+          });
+          if (!canCommit()) return;
+          const account = result.botId
+            ? snapshot?.bots.find((bot) => bot.botId === result.botId)
+            : snapshot?.bots.find((bot) => bot.connected);
+          if (!account?.connected) {
+            setProvision((current) => current?.attemptId === attemptId
+              ? { ...current, ...result, status: 'connecting' }
+              : current);
+            schedule(result.pollIntervalMs);
+            return;
+          }
+          setProvision(null);
+          announce(result.alreadyConnected
+            ? '这个钉钉机器人已经接入并保持在线。'
+            : '钉钉机器人已接入，可以开始发送消息。');
+          return;
+        }
+        if (!canCommit()) return;
+        setProvision((current) => current?.attemptId === attemptId
+          ? { ...current, ...result, durationMs: current.durationMs }
+          : current);
+        if (ACTIVE_PROVISION_STATES.has(result.status)) {
+          schedule(result.pollIntervalMs);
+        }
+      } catch (error) {
+        if (error?.name === 'AbortError' || !canCommit()) return;
+        setProvision((current) => current?.attemptId === attemptId
+          ? { ...current, status: 'failed', error: presentError(error) }
+          : current);
+      }
+    };
+    schedule(provision.pollIntervalMs ?? 3_000);
+    return () => {
+      disposed = true;
+      controller.abort();
+      if (timer !== null) window.clearTimeout(timer);
+      timer = null;
+    };
+  }, [announce, invoke, loadStatus, provision?.attemptId, provision?.pollIntervalMs, provision?.status]);
+
+  const setBotBusy = React.useCallback((botId, operation) => {
+    if (!mountedRef.current) return;
+    setBusyByBot((current) => {
+      const next = { ...current };
+      if (operation) next[botId] = operation;
+      else delete next[botId];
+      return next;
+    });
+  }, []);
+
+  const runBotAction = React.useCallback(async ({ account, operation, endpoint, payload, success }) => {
+    if (!mountedRef.current) return undefined;
+    setBotBusy(account.botId, operation);
+    try {
+      await invoke(endpoint, payload);
+      if (!mountedRef.current) return undefined;
+      const snapshot = await loadStatus({ silent: true, restoreProvisioning: false });
+      if (!mountedRef.current) return undefined;
+      announce(typeof success === 'function' ? success(snapshot) : success);
+      return snapshot;
+    } catch (error) {
+      if (!mountedRef.current) return undefined;
+      announce(`操作失败：${presentError(error).message}`);
+      return undefined;
+    } finally {
+      if (mountedRef.current) setBotBusy(account.botId, null);
+    }
+  }, [announce, invoke, loadStatus, setBotBusy]);
+
+  const reconnect = React.useCallback((account) => runBotAction({
+    account,
+    operation: 'reconnect',
+    endpoint: DINGTALK_ENDPOINTS.reconnectBot,
+    payload: { botId: account.botId },
+    success: (snapshot) => snapshot?.bots.find((bot) => bot.botId === account.botId)?.connected
+      ? '钉钉连接检查完成。'
+      : '钉钉仍未连接，插件会继续自动重试。',
+  }), [runBotAction]);
+
+  const remove = React.useCallback(async (account) => {
+    const snapshot = await runBotAction({
+      account,
+      operation: 'delete',
+      endpoint: DINGTALK_ENDPOINTS.deleteBot,
+      payload: { botId: account.botId, confirm: true },
+      success: '钉钉机器人及本机凭据已移除。',
+    });
+    if (snapshot && mountedRef.current) setRemoveTarget(null);
+  }, [runBotAction]);
+
+  let provisionView = null;
+  if (provision?.status === 'starting') {
+    provisionView = h('div', { className: 'ddt-card ddt-loading', 'aria-busy': 'true' },
+      h('div', { className: 'ddt-spinner' }), h('span', null, '正在申请钉钉授权二维码…'));
+  } else if (provision?.status === 'pending') {
+    provisionView = h(QrPanel, {
+      provision,
+      now,
+      busy,
+      onRefresh: () => void startProvisioning({ replace: true }),
+      onCancel: () => void cancelProvisioning(),
+    });
+  } else if (['scanned', 'authorizing', 'creating', 'connecting'].includes(provision?.status)) {
+    provisionView = h(ProgressPanel, {
+      status: provision.status,
+      busy,
+      onCancel: () => void cancelProvisioning(),
+    });
+  } else if (provision && ['failed', 'expired', 'cancelled'].includes(provision.status)) {
+    provisionView = h(ProvisionError, {
+      provision,
+      busy,
+      onRetry: () => void startProvisioning({ replace: Boolean(provision.attemptId) }),
+      onClose: () => void cancelProvisioning(),
+    });
+  }
+
+  return h('section', { className: 'ddt-page', 'aria-label': '钉钉设置' },
+    h(Heading, {
+      totals: model.totals,
+      adding: Boolean(provision),
+      busy,
+      onAdd: () => void startProvisioning(),
+      addButtonRef,
+    }),
+    h('div', { className: 'ddt-visuallyHidden', role: 'status', 'aria-live': 'polite' }, notice),
+    model.error && model.phase === 'ready'
+      ? h('div', { className: 'ddt-statusNotice', role: 'alert' }, `状态刷新失败：${model.error.message}`)
+      : null,
+    model.phase === 'loading'
+      ? h(LoadingView)
+      : model.phase === 'error'
+        ? h('div', { className: 'ddt-card' },
+            h('div', { className: 'ddt-inlineError', role: 'alert' },
+              h('h3', null, '无法读取钉钉机器人状态'),
+              h('p', null, model.error?.message ?? '请稍后重试'),
+              h(Button, { onClick: () => void loadStatus() }, '重新读取')))
+        : h(React.Fragment, null,
+            provisionView,
+            model.bots.length === 0 && !provision
+              ? h(EmptyView, { busy, onStart: () => void startProvisioning() })
+              : null,
+            model.bots.length > 0
+              ? h(AccountList, {
+                  bots: model.bots,
+                  busyByBot,
+                  removeTarget,
+                  onReconnect: (account) => void reconnect(account),
+                  onRequestRemove: (account) => setRemoveTarget(account.botId),
+                  onConfirmRemove: (account) => void remove(account),
+                  onCancelRemove: () => setRemoveTarget(null),
+                })
+              : null));
+}
+
+export function apply(ctx) {
+  ctx.effect(() => installDingtalkStyles(), 'dingtalk-settings: install client styles');
+  const rpcCall = (endpoint, payload, signal) =>
+    ctx.connection.rpc.call(DINGTALK_RPC_CHANNEL, endpoint, payload, signal);
+  ctx.slots.inject('settings.plugins.tab', () => ctx.slots.register({
+    name: 'settings.plugins.tab',
+    id: 'dingtalk',
+    order: 40,
+    label: '钉钉',
+    inject: () => ({ rpcCall }),
+  }, DingtalkSettingsTab));
+}
--- a/plugin-src/client/channels/dingtalk/styles.js
+++ b/plugin-src/client/channels/dingtalk/styles.js
@ -0,0 +1,141 @@
+export const DINGTALK_STYLE_ID = 'xmanrui-dsh-dingtalk-settings';
+
+const CSS = String.raw`
+.ddt-page {
+  --ddt-accent: #1677ff;
+  --ddt-accent-deep: #0958d9;
+  --ddt-accent-wash: #eaf3ff;
+  --ddt-success: var(--dsw-alias-state-success-primary, #20a162);
+  --ddt-warning: var(--dsw-alias-state-warning-primary, #d97706);
+  --ddt-error: var(--dsw-alias-state-error-primary, #d54941);
+  width: 100%;
+  max-width: 880px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 2px 0 28px;
+  container-type: inline-size;
+  color: var(--dsw-alias-label-primary, #1f2329);
+  box-sizing: border-box;
+}
+.ddt-page *, .ddt-page *::before, .ddt-page *::after { box-sizing: border-box; }
+.ddt-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
+.ddt-headingCopy { min-width: 0; }
+.ddt-heading h2, .ddt-heading p, .ddt-card h3, .ddt-card h4, .ddt-card p { margin: 0; }
+.ddt-eyebrow { margin-bottom: 3px; color: var(--dsw-alias-label-tertiary, #8f959e); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
+.ddt-heading h2 { font-size: 20px; line-height: 28px; font-weight: 680; }
+.ddt-heading p { margin-top: 5px; color: var(--dsw-alias-label-secondary, #646a73); font-size: 13px; line-height: 20px; white-space: nowrap; }
+.ddt-tools, .ddt-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
+.ddt-tools { justify-content: flex-end; }
+.ddt-badge { min-height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border-radius: 999px; color: var(--dsw-alias-label-secondary, #646a73); background: var(--dsw-alias-fill-secondary, #f2f3f5); font-size: 12px; white-space: nowrap; }
+.ddt-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #aeb3bb; }
+.ddt-dot[data-tone="success"] { background: var(--ddt-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ddt-success) 14%, transparent); }
+.ddt-dot[data-tone="warning"] { background: var(--ddt-warning); }
+.ddt-dot[data-tone="error"] { background: var(--ddt-error); }
+.ddt-button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid var(--dsw-alias-line-border, #dfe1e5); border-radius: 8px; color: var(--dsw-alias-label-primary, #1f2329); background: var(--dsw-alias-bg-body, #fff); font: inherit; font-size: 13px; font-weight: 560; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
+.ddt-button:hover:not(:disabled) { border-color: #aeb3bb; background: var(--dsw-alias-fill-tertiary, #f7f8fa); }
+.ddt-button:active:not(:disabled) { transform: translateY(1px); }
+.ddt-button:focus-visible { outline: 2px solid color-mix(in srgb, var(--ddt-accent) 70%, white); outline-offset: 2px; }
+.ddt-button:disabled { cursor: not-allowed; opacity: .55; }
+.ddt-button[data-kind="primary"] { color: #fff; border-color: var(--ddt-accent); background: var(--ddt-accent); }
+.ddt-button[data-kind="primary"]:hover:not(:disabled) { border-color: var(--ddt-accent-deep); background: var(--ddt-accent-deep); }
+.ddt-button[data-kind="danger"] { color: var(--ddt-error); }
+.ddt-button[data-kind="quiet"] { min-height: 30px; padding: 0 10px; border-color: transparent; background: transparent; }
+.ddt-card { overflow: hidden; border: 1px solid var(--dsw-alias-line-border, #e5e6eb); border-radius: 14px; background: var(--dsw-alias-bg-body, #fff); box-shadow: 0 1px 2px rgb(31 35 41 / 3%); }
+.ddt-cardBody { padding: 24px; }
+.ddt-empty { min-height: 230px; display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: center; gap: 30px; }
+.ddt-empty h3 { margin: 8px 0; font-size: 18px; }
+.ddt-empty p { max-width: 560px; color: var(--dsw-alias-label-secondary, #646a73); line-height: 1.65; }
+.ddt-empty .ddt-actions { margin-top: 20px; }
+.ddt-brandMark { width: 110px; height: 110px; display: grid; place-items: center; justify-self: center; border-radius: 28px; color: #fff; background: linear-gradient(145deg, #2997ff, var(--ddt-accent)); box-shadow: 0 18px 45px rgb(22 119 255 / 23%); }
+.ddt-brandMark svg { filter: drop-shadow(0 3px 8px rgb(0 35 96 / 16%)); }
+.ddt-qrLayout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 34px; align-items: start; }
+.ddt-qrColumn { display: flex; flex-direction: column; align-items: center; gap: 12px; }
+.ddt-qrFrame { position: relative; width: min(270px, 100%); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; padding: 10px; border: 1px solid var(--dsw-alias-line-border, #e5e6eb); border-radius: 16px; background: #fff; }
+.ddt-qrFrame::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgb(22 119 255 / 10%); border-radius: 11px; pointer-events: none; }
+.ddt-qrFrame img { display: block; width: 100%; height: 100%; object-fit: contain; }
+.ddt-qrFallback { padding: 24px; color: #646a73; text-align: center; }
+.ddt-expired { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; color: #fff; text-align: center; font-weight: 650; white-space: pre-line; background: rgb(31 35 41 / 76%); backdrop-filter: blur(3px); }
+.ddt-countdown { width: min(270px, 100%); color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; }
+.ddt-countdownTop { display: flex; justify-content: space-between; margin-bottom: 6px; }
+.ddt-countdown strong { color: var(--dsw-alias-label-primary, #1f2329); font-variant-numeric: tabular-nums; }
+.ddt-progress { height: 4px; overflow: hidden; border-radius: 99px; background: #eef0f3; }
+.ddt-progress span { display: block; width: var(--ddt-progress); height: 100%; background: var(--ddt-accent); transition: width .2s linear; }
+.ddt-stateLabel { display: inline-flex; align-items: center; gap: 8px; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; font-weight: 600; }
+.ddt-qrCopy { min-width: 0; overflow-wrap: anywhere; }
+.ddt-qrCopy h3 { margin: 9px 0 8px; font-size: 18px; }
+.ddt-qrCopy > p { color: var(--dsw-alias-label-secondary, #646a73); line-height: 1.65; }
+.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; }
+.ddt-spinner { width: 24px; height: 24px; margin: 0 auto 13px; border: 3px solid #e6e8eb; border-top-color: var(--ddt-accent); border-radius: 50%; animation: ddt-spin .8s linear infinite; }
+.ddt-statusNotice, .ddt-inlineError { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--ddt-error) 28%, transparent); border-radius: 10px; color: var(--ddt-error); background: color-mix(in srgb, var(--ddt-error) 7%, transparent); font-size: 13px; }
+.ddt-inlineError { flex-direction: column; padding: 22px; }
+.ddt-inlineError h3 { font-size: 17px; }
+.ddt-inlineError p { line-height: 1.55; }
+.ddt-errorCode { font: 11px ui-monospace, SFMono-Regular, monospace; opacity: .8; }
+.ddt-listHeading { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 9px; }
+.ddt-listHeading h3 { margin: 0; font-size: 14px; }
+.ddt-listHeading span { color: var(--dsw-alias-label-tertiary, #8f959e); font-size: 12px; }
+.ddt-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
+.ddt-accountTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
+.ddt-accountIdentity { min-width: 0; display: flex; align-items: center; gap: 12px; }
+.ddt-avatar { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #2997ff, var(--ddt-accent)); }
+.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-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; }
+.ddt-accountFooter { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 16px; border-top: 1px solid var(--dsw-alias-line-divider, #eef0f3); }
+.ddt-summary { color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; }
+.ddt-confirm { padding: 18px 24px; border-top: 1px solid color-mix(in srgb, var(--ddt-error) 25%, transparent); background: color-mix(in srgb, var(--ddt-error) 5%, transparent); }
+.ddt-confirm strong { display: block; margin-bottom: 6px; font-size: 14px; }
+.ddt-confirm p { color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; line-height: 1.55; }
+.ddt-confirm .ddt-actions { margin-top: 13px; }
+.ddt-visuallyHidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes ddt-spin { to { transform: rotate(360deg); } }
+@container (max-width: 680px) {
+  .ddt-heading { flex-direction: column; align-items: stretch; }
+  .ddt-tools { width: 100%; flex-wrap: nowrap; gap: 6px; }
+  .ddt-tools .ddt-badge { min-height: 34px; padding-inline: 8px; }
+  .ddt-tools .ddt-button { flex: none; padding-inline: 10px; white-space: nowrap; }
+  .ddt-empty { grid-template-columns: minmax(0, 1fr); }
+  .ddt-brandMark { display: none; }
+  .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, .ddt-accountFooter { flex-direction: column; align-items: stretch; }
+  .ddt-heading p { white-space: normal; }
+  .ddt-tools { justify-content: flex-start; }
+  .ddt-empty { grid-template-columns: minmax(0, 1fr); }
+  .ddt-brandMark { display: none; }
+  .ddt-qrLayout { grid-template-columns: minmax(0, 1fr); justify-items: center; }
+  .ddt-qrCopy { width: 100%; }
+  .ddt-cardBody { padding: 20px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ddt-page *, .ddt-page *::before, .ddt-page *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
+}
+`;
+
+export function installDingtalkStyles() {
+  if (typeof document === 'undefined') return () => {};
+  const existing = document.querySelector(`style[data-plugin-css="${DINGTALK_STYLE_ID}"]`);
+  if (existing) return () => {};
+  const style = document.createElement('style');
+  style.dataset.plugin = '@xmanrui/dsh-dingtalk';
+  style.dataset.pluginCss = DINGTALK_STYLE_ID;
+  style.textContent = CSS;
+  document.head.appendChild(style);
+  return () => style.remove();
+}