@xmanrui/dsh-im 0.1.0

package/plugin-src/client/channels/weixin/styles.js

@@ -0,0 +1,120 @@
+export const WEIXIN_STYLE_ID = 'xmanrui-dsh-weixin-settings';
+
+const CSS = String.raw`
+.dxw-page {
+  --dxw-accent: #07c160;
+  --dxw-accent-dark: #05994c;
+  --dxw-success: var(--dsw-alias-state-success-primary, #20a162);
+  --dxw-warning: var(--dsw-alias-state-warning-primary, #d97706);
+  --dxw-error: var(--dsw-alias-state-error-primary, #d54941);
+  width: 100%;
+  max-width: 880px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 2px 0 28px;
+  color: var(--dsw-alias-label-primary, #1f2329);
+  box-sizing: border-box;
+}
+.dxw-page *, .dxw-page *::before, .dxw-page *::after { box-sizing: border-box; }
+.dxw-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
+.dxw-heading h2, .dxw-heading p, .dxw-card h3, .dxw-card p { margin: 0; }
+.dxw-eyebrow { color: var(--dsw-alias-label-tertiary, #8f959e); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
+.dxw-heading h2 { font-size: 20px; line-height: 28px; font-weight: 680; }
+.dxw-heading p { color: var(--dsw-alias-label-secondary, #646a73); font-size: 13px; line-height: 20px; margin-top: 5px; white-space: nowrap; }
+.dxw-tools, .dxw-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
+.dxw-tools { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
+.dxw-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; 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; }
+.dxw-dot { width: 8px; height: 8px; border-radius: 50%; background: #aeb3bb; flex: none; }
+.dxw-dot[data-tone="success"] { background: var(--dxw-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dxw-success) 14%, transparent); }
+.dxw-dot[data-tone="warning"] { background: var(--dxw-warning); }
+.dxw-dot[data-tone="error"] { background: var(--dxw-error); }
+.dxw-button { min-height: 34px; border: 1px solid var(--dsw-alias-line-border, #dfe1e5); border-radius: 8px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--dsw-alias-label-primary, #1f2329); background: var(--dsw-alias-bg-body, #fff); font: inherit; font-size: 13px; font-weight: 560; cursor: pointer; text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
+.dxw-button:hover:not(:disabled) { border-color: #aeb3bb; background: var(--dsw-alias-fill-tertiary, #f7f8fa); }
+.dxw-button:active:not(:disabled) { transform: translateY(1px); }
+.dxw-button:focus-visible, .dxw-input:focus-visible { outline: 2px solid color-mix(in srgb, var(--dxw-accent) 70%, white); outline-offset: 2px; }
+.dxw-button:disabled { cursor: not-allowed; opacity: .55; }
+.dxw-button[data-kind="primary"] { color: white; border-color: var(--dxw-accent); background: var(--dxw-accent); }
+.dxw-button[data-kind="primary"]:hover:not(:disabled) { border-color: var(--dxw-accent-dark); background: var(--dxw-accent-dark); }
+.dxw-button[data-kind="danger"] { color: var(--dxw-error); }
+.dxw-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%); }
+.dxw-cardBody { padding: 24px; }
+.dxw-empty { min-height: 230px; display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: center; gap: 30px; }
+.dxw-empty h3 { font-size: 18px; margin-bottom: 8px; }
+.dxw-empty p { max-width: 560px; color: var(--dsw-alias-label-secondary, #646a73); line-height: 1.65; }
+.dxw-empty .dxw-actions { margin-top: 20px; }
+.dxw-logo { width: 110px; height: 110px; display: grid; place-items: center; justify-self: center; border-radius: 28px; color: white; background: var(--dxw-accent); box-shadow: 0 18px 45px rgb(7 193 96 / 22%); }
+.dxw-logo svg { width: 62px; height: 62px; }
+.dxw-qrLayout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 34px; align-items: center; }
+.dxw-qrColumn { display: flex; flex-direction: column; align-items: center; gap: 12px; }
+.dxw-qrFrame { position: relative; width: 270px; 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: white; }
+.dxw-qrFrame img { display: block; width: 100%; height: 100%; object-fit: contain; }
+.dxw-qrFallback { padding: 24px; text-align: center; color: #646a73; }
+.dxw-expired { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; color: white; text-align: center; font-weight: 650; background: rgb(31 35 41 / 76%); backdrop-filter: blur(3px); }
+.dxw-countdown { width: 270px; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; }
+.dxw-countdown div { display: flex; justify-content: space-between; margin-bottom: 6px; }
+.dxw-progress { height: 4px; overflow: hidden; border-radius: 99px; background: #eef0f3; }
+.dxw-progress span { display: block; width: var(--dxw-progress); height: 100%; background: var(--dxw-accent); transition: width .2s linear; }
+.dxw-qrCopy h3 { margin: 9px 0 8px; font-size: 18px; }
+.dxw-qrCopy > p { color: var(--dsw-alias-label-secondary, #646a73); line-height: 1.65; }
+.dxw-steps { margin: 18px 0 22px; padding-left: 22px; color: var(--dsw-alias-label-secondary, #646a73); font-size: 13px; line-height: 1.9; }
+.dxw-stateLabel { display: inline-flex; align-items: center; gap: 8px; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; font-weight: 600; }
+.dxw-verify { max-width: 560px; margin: 0 auto; padding: 32px; text-align: center; }
+.dxw-verify h3 { margin: 8px 0; font-size: 19px; }
+.dxw-verify p { color: var(--dsw-alias-label-secondary, #646a73); line-height: 1.6; }
+.dxw-codeRow { display: flex; justify-content: center; gap: 10px; margin: 24px 0 10px; }
+.dxw-input { width: 190px; height: 42px; padding: 0 14px; border: 1px solid var(--dsw-alias-line-border, #dfe1e5); border-radius: 9px; background: var(--dsw-alias-bg-body, white); color: inherit; font: inherit; font-size: 18px; letter-spacing: .16em; text-align: center; }
+.dxw-statusNotice, .dxw-error { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--dxw-error) 28%, transparent); border-radius: 10px; color: var(--dxw-error); background: color-mix(in srgb, var(--dxw-error) 7%, transparent); font-size: 13px; }
+.dxw-error { align-items: flex-start; flex-direction: column; padding: 22px; }
+.dxw-error h3 { font-size: 17px; }
+.dxw-errorCode { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; opacity: .8; }
+.dxw-listHeading { display: flex; justify-content: space-between; align-items: center; margin: 2px 0 9px; }
+.dxw-listHeading h3 { margin: 0; font-size: 14px; }
+.dxw-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
+.dxw-accountTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
+.dxw-accountIdentity { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.dxw-avatar { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 12px; color: white; background: var(--dxw-accent); }
+.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-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; }
+.dxw-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); }
+.dxw-accountFooter .dxw-actions { flex: none; flex-wrap: nowrap; gap: 8px; margin-top: 0; }
+.dxw-accountFooter .dxw-button { flex: none; white-space: nowrap; }
+.dxw-summary { color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; }
+.dxw-confirm { padding: 18px 24px; border-top: 1px solid color-mix(in srgb, var(--dxw-error) 25%, transparent); background: color-mix(in srgb, var(--dxw-error) 5%, transparent); }
+.dxw-confirm strong { display: block; font-size: 14px; margin-bottom: 6px; }
+.dxw-confirm p { color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; line-height: 1.55; }
+.dxw-confirm .dxw-actions { margin-top: 13px; }
+.dxw-loading { padding: 36px; color: var(--dsw-alias-label-secondary, #646a73); text-align: center; }
+.dxw-spinner { width: 24px; height: 24px; margin: 0 auto 12px; border: 3px solid #e6e8eb; border-top-color: var(--dxw-accent); border-radius: 50%; animation: dxw-spin .8s linear infinite; }
+.dxw-visuallyHidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes dxw-spin { to { transform: rotate(360deg); } }
+@media (max-width: 720px) {
+  .dxw-heading, .dxw-accountTop { flex-direction: column; align-items: stretch; }
+  .dxw-empty { grid-template-columns: minmax(0, 1fr); }
+  .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) {
+  .dxw-page *, .dxw-page *::before, .dxw-page *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
+}
+`;
+
+export function installWeixinStyles() {
+  if (typeof document === 'undefined') return () => {};
+  const existing = document.querySelector(`style[data-plugin-css="${WEIXIN_STYLE_ID}"]`);
+  if (existing) return () => {};
+  const style = document.createElement('style');
+  style.dataset.plugin = '@xmanrui/dsh-weixin';
+  style.dataset.pluginCss = WEIXIN_STYLE_ID;
+  style.textContent = CSS;
+  document.head.appendChild(style);
+  return () => style.remove();
+}

package/plugin-src/client/credential-binding.js

@@ -0,0 +1,117 @@
+import * as React from 'react';
+
+const h = React.createElement;
+
+function ActionIcon({ children }) {
+  return h('svg', {
+    className: 'dim-actionIcon',
+    width: 15,
+    height: 15,
+    viewBox: '0 0 20 20',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+    'aria-hidden': 'true',
+    focusable: 'false',
+  }, children);
+}
+
+export function QrActionIcon() {
+  return h(ActionIcon, null,
+    h('path', {
+      d: 'M2.5 2.5h5v5h-5v-5Zm10 0h5v5h-5v-5Zm-10 10h5v5h-5v-5Z',
+      stroke: 'currentColor', strokeWidth: '1.6', strokeLinejoin: 'round',
+    }),
+    h('path', {
+      d: 'M11.5 11.5h2v2h-2v-2Zm4 0h2v3h-2v-3Zm-4 4h3v2h-3v-2Zm5 1h1v1h-1v-1Z',
+      fill: 'currentColor',
+    }));
+}
+
+export function CredentialActionIcon() {
+  return h(ActionIcon, null,
+    h('circle', {
+      cx: '6.25', cy: '10', r: '3.5', stroke: 'currentColor', strokeWidth: '1.6',
+    }),
+    h('path', {
+      d: 'M9.75 10h7.75m-2.5 0v2m-2.5-2v2',
+      stroke: 'currentColor', strokeWidth: '1.6', strokeLinecap: 'round', strokeLinejoin: 'round',
+    }));
+}
+
+export function CredentialBindingPanel({
+  channel,
+  identityLabel,
+  identityPlaceholder,
+  secretLabel,
+  secretPlaceholder,
+  busy = false,
+  error = null,
+  onSubmit,
+  onCancel,
+}) {
+  const [identity, setIdentity] = React.useState('');
+  const [secret, setSecret] = React.useState('');
+  const headingId = React.useId();
+  const hasIdentity = Boolean(identityLabel);
+
+  const submit = (event) => {
+    event.preventDefault();
+    const normalizedIdentity = identity.trim();
+    const normalizedSecret = secret.trim();
+    if ((hasIdentity && !normalizedIdentity) || !normalizedSecret || busy) return;
+    void onSubmit?.({ identity: normalizedIdentity, secret: normalizedSecret });
+  };
+
+  return h('section', {
+    className: 'ddt-card dim-surfaceCard dim-credentialPanel',
+    'aria-labelledby': headingId,
+  },
+  h('h3', { id: headingId, className: 'dim-credentialTitle' }, `手动接入${channel}机器人`),
+  h('form', {
+    className: `dim-credentialForm${hasIdentity ? '' : ' dim-credentialFormSingle'}`,
+    onSubmit: submit,
+  },
+    hasIdentity ? h('label', { className: 'dim-credentialField' },
+      h('span', null, identityLabel),
+      h('input', {
+        value: identity,
+        onChange: (event) => setIdentity(event.target.value),
+        placeholder: identityPlaceholder,
+        maxLength: 512,
+        autoCapitalize: 'none',
+        autoCorrect: 'off',
+        spellCheck: false,
+        autoComplete: 'off',
+        disabled: busy,
+        required: true,
+      })) : null,
+    h('label', { className: 'dim-credentialField' },
+      h('span', null, secretLabel),
+      h('input', {
+        type: 'password',
+        value: secret,
+        onChange: (event) => setSecret(event.target.value),
+        placeholder: secretPlaceholder,
+        maxLength: 1024,
+        autoCapitalize: 'none',
+        autoCorrect: 'off',
+        spellCheck: false,
+        autoComplete: 'new-password',
+        disabled: busy,
+        required: true,
+      })),
+    error ? h('p', { className: 'dim-credentialError', role: 'alert' }, error.message ?? String(error)) : null,
+    h('div', { className: 'ddt-actions dim-viewActions dim-credentialActions' },
+      h('button', {
+        type: 'submit',
+        className: 'ddt-button',
+        'data-kind': 'primary',
+        disabled: busy || (hasIdentity && !identity.trim()) || !secret.trim(),
+      }, busy ? '正在绑定…' : '绑定并连接'),
+      h('button', {
+        type: 'button',
+        className: 'ddt-button',
+        onClick: onCancel,
+        disabled: busy,
+      }, '取消'))));
+}

package/plugin-src/client/index.js

@@ -0,0 +1,192 @@
+import * as React from 'react';
+
+import {
+  DingtalkLogoGlyph,
+  DiscordLogoGlyph,
+  FeishuLogoGlyph,
+  QqLogoGlyph,
+  TelegramLogoGlyph,
+  WecomLogoGlyph,
+  WeixinLogoGlyph,
+} from './channel-logos.js';
+import { DINGTALK_RPC_CHANNEL } from './channels/dingtalk/api.js';
+import { DingtalkSettingsTab } from './channels/dingtalk/index.js';
+import { DISCORD_RPC_CHANNEL } from './channels/discord/api.js';
+import { DiscordSettingsTab } from './channels/discord/index.js';
+import { installDiscordStyles } from './channels/discord/styles.js';
+import { FeishuSettingsTab } from './channels/feishu/index.js';
+import { FEISHU_RPC_CHANNEL } from './channels/feishu/api.js';
+import { installFeishuStyles } from './channels/feishu/styles.js';
+import { QQ_RPC_CHANNEL } from './channels/qq/api.js';
+import { QqSettingsTab } from './channels/qq/index.js';
+import { installQqStyles } from './channels/qq/styles.js';
+import { TELEGRAM_RPC_CHANNEL } from './channels/telegram/api.js';
+import { TelegramSettingsTab } from './channels/telegram/index.js';
+import { installTelegramStyles } from './channels/telegram/styles.js';
+import { WECOM_RPC_CHANNEL } from './channels/wecom/api.js';
+import { WecomSettingsTab } from './channels/wecom/index.js';
+import { installWecomStyles } from './channels/wecom/styles.js';
+import { WeixinSettingsTab } from './channels/weixin/index.js';
+import { WEIXIN_RPC_CHANNEL } from './channels/weixin/api.js';
+import { installWeixinStyles } from './channels/weixin/styles.js';
+import { installImStyles } from './styles.js';
+
+const h = React.createElement;
+
+export const name = 'im-settings';
+export const inject = ['slots', 'connection'];
+
+const CHANNELS = Object.freeze([
+  { id: 'weixin', label: '微信' },
+  { id: 'feishu', label: '飞书' },
+  { id: 'dingtalk', label: '钉钉' },
+  { id: 'wecom', label: '企业微信' },
+  { id: 'qq', label: 'QQ' },
+  { id: 'telegram', label: 'Telegram' },
+  { id: 'discord', label: 'Discord' },
+]);
+
+function WeixinLogo() {
+  return h('span', { className: 'dim-logo dim-logoWeixin', 'aria-hidden': 'true' },
+    h(WeixinLogoGlyph));
+}
+
+function FeishuLogo() {
+  return h('span', { className: 'dim-logo dim-logoFeishu', 'aria-hidden': 'true' },
+    h(FeishuLogoGlyph));
+}
+
+function DingtalkLogo() {
+  return h('span', { className: 'dim-logo dim-logoDingtalk', 'aria-hidden': 'true' },
+    h(DingtalkLogoGlyph));
+}
+
+function QqLogo() {
+  return h('span', { className: 'dim-logo dim-logoQq', 'aria-hidden': 'true' }, h(QqLogoGlyph));
+}
+
+function WecomLogo() {
+  return h('span', { className: 'dim-logo dim-logoWecom', 'aria-hidden': 'true' }, h(WecomLogoGlyph));
+}
+
+function TelegramLogo() {
+  return h('span', { className: 'dim-logo dim-logoTelegram', 'aria-hidden': 'true' },
+    h(TelegramLogoGlyph));
+}
+
+function DiscordLogo() {
+  return h('span', { className: 'dim-logo dim-logoDiscord', 'aria-hidden': 'true' },
+    h(DiscordLogoGlyph));
+}
+
+function ChannelLogo({ channel }) {
+  if (channel === 'weixin') return h(WeixinLogo);
+  if (channel === 'feishu') return h(FeishuLogo);
+  if (channel === 'dingtalk') return h(DingtalkLogo);
+  if (channel === 'wecom') return h(WecomLogo);
+  if (channel === 'qq') return h(QqLogo);
+  if (channel === 'telegram') return h(TelegramLogo);
+  return h(DiscordLogo);
+}
+
+export function IMSettingsTab({
+  dingtalkRpcCall,
+  discordRpcCall,
+  feishuRpcCall,
+  qqRpcCall,
+  telegramRpcCall,
+  wecomRpcCall,
+  weixinRpcCall,
+}) {
+  const [selected, setSelected] = React.useState('weixin');
+  const active = CHANNELS.find((channel) => channel.id === selected) ?? CHANNELS[0];
+  return h('section', { className: 'dim-page', 'aria-label': 'IM机器人设置' },
+    h('header', { className: 'dim-title' },
+      h('p', null, '把机器人接入 DeepSeek Harness'),
+    ),
+    h('div', { className: 'dim-layout' },
+      h('nav', { className: 'dim-rail', role: 'tablist', 'aria-label': 'IM 渠道' },
+        CHANNELS.map((channel) => h('button', {
+          key: channel.id,
+          type: 'button',
+          role: 'tab',
+          id: `dim-tab-${channel.id}`,
+          className: 'dim-channel',
+          'aria-selected': channel.id === active.id,
+          'aria-controls': `dim-panel-${channel.id}`,
+          onClick: () => setSelected(channel.id),
+        },
+        h(ChannelLogo, { channel: channel.id }),
+        h('span', { className: 'dim-channelCopy' },
+          h('strong', null, channel.label),
+        )))),
+      h('div', { className: 'dim-divider', 'aria-hidden': 'true' }),
+      h('main', {
+        className: 'dim-panel',
+        role: 'tabpanel',
+        id: `dim-panel-${active.id}`,
+        'aria-labelledby': `dim-tab-${active.id}`,
+      }, active.id === 'weixin'
+        ? h(WeixinSettingsTab, { rpcCall: weixinRpcCall })
+        : active.id === 'feishu'
+          ? h(FeishuSettingsTab, { rpcCall: feishuRpcCall })
+          : active.id === 'dingtalk'
+            ? h(DingtalkSettingsTab, { rpcCall: dingtalkRpcCall })
+            : active.id === 'wecom'
+              ? h(WecomSettingsTab, { rpcCall: wecomRpcCall })
+              : active.id === 'qq'
+                ? h(QqSettingsTab, { rpcCall: qqRpcCall })
+                : active.id === 'telegram'
+                  ? h(TelegramSettingsTab, { rpcCall: telegramRpcCall })
+                  : h(DiscordSettingsTab, { rpcCall: discordRpcCall })),
+    ),
+  );
+}
+
+export function apply(ctx) {
+  ctx.effect(() => {
+    const disposers = [
+      installFeishuStyles(),
+      installWeixinStyles(),
+      installWecomStyles(),
+      installQqStyles(),
+      installTelegramStyles(),
+      installDiscordStyles(),
+      installImStyles(),
+    ];
+    return () => {
+      for (const dispose of disposers.reverse()) dispose();
+    };
+  }, 'im-settings: install combined channel styles');
+
+  const feishuRpcCall = (endpoint, payload, signal) =>
+    ctx.connection.rpc.call(FEISHU_RPC_CHANNEL, endpoint, payload, signal);
+  const weixinRpcCall = (endpoint, payload, signal) =>
+    ctx.connection.rpc.call(WEIXIN_RPC_CHANNEL, endpoint, payload, signal);
+  const dingtalkRpcCall = (endpoint, payload, signal) =>
+    ctx.connection.rpc.call(DINGTALK_RPC_CHANNEL, endpoint, payload, signal);
+  const qqRpcCall = (endpoint, payload, signal) =>
+    ctx.connection.rpc.call(QQ_RPC_CHANNEL, endpoint, payload, signal);
+  const wecomRpcCall = (endpoint, payload, signal) =>
+    ctx.connection.rpc.call(WECOM_RPC_CHANNEL, endpoint, payload, signal);
+  const telegramRpcCall = (endpoint, payload, signal) =>
+    ctx.connection.rpc.call(TELEGRAM_RPC_CHANNEL, endpoint, payload, signal);
+  const discordRpcCall = (endpoint, payload, signal) =>
+    ctx.connection.rpc.call(DISCORD_RPC_CHANNEL, endpoint, payload, signal);
+
+  ctx.slots.inject('settings.plugins.tab', () => ctx.slots.register({
+    name: 'settings.plugins.tab',
+    id: 'im',
+    order: 20,
+    label: 'IM机器人',
+    inject: () => ({
+      dingtalkRpcCall,
+      discordRpcCall,
+      feishuRpcCall,
+      qqRpcCall,
+      telegramRpcCall,
+      wecomRpcCall,
+      weixinRpcCall,
+    }),
+  }, IMSettingsTab));
+}

package/plugin-src/client/lifecycle.js

@@ -0,0 +1,86 @@
+import * as React from 'react';
+
+export function createPollScheduler({ setTimeoutFn, clearTimeoutFn }) {
+  let disposed = false;
+  let timer;
+
+  return {
+    get disposed() {
+      return disposed;
+    },
+    schedule(callback, delayMs) {
+      if (disposed) return false;
+      if (timer !== undefined) clearTimeoutFn(timer);
+      timer = setTimeoutFn(() => {
+        timer = undefined;
+        if (!disposed) void callback();
+      }, delayMs);
+      return true;
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      if (timer !== undefined) clearTimeoutFn(timer);
+      timer = undefined;
+    },
+  };
+}
+
+export function createAnimationFrameScheduler({ requestFrame, cancelFrame }) {
+  let disposed = false;
+  const frames = new Set();
+  const keyedFrames = new Map();
+
+  return {
+    schedule(callback, key) {
+      if (disposed) return false;
+      const previous = key === undefined ? undefined : keyedFrames.get(key);
+      if (previous !== undefined) {
+        keyedFrames.delete(key);
+        frames.delete(previous);
+        cancelFrame(previous);
+      }
+      let frame;
+      let completed = false;
+      frame = requestFrame(() => {
+        completed = true;
+        if (frame !== undefined) frames.delete(frame);
+        if (key !== undefined && keyedFrames.get(key) === frame) keyedFrames.delete(key);
+        if (!disposed) callback();
+      });
+      if (!completed) {
+        frames.add(frame);
+        if (key !== undefined) keyedFrames.set(key, frame);
+      }
+      return true;
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      for (const frame of frames) cancelFrame(frame);
+      frames.clear();
+      keyedFrames.clear();
+    },
+  };
+}
+
+export function useAnimationFrameScheduler() {
+  const schedulerRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const scheduler = createAnimationFrameScheduler({
+      requestFrame: (callback) => window.requestAnimationFrame(callback),
+      cancelFrame: (frame) => window.cancelAnimationFrame(frame),
+    });
+    schedulerRef.current = scheduler;
+    return () => {
+      scheduler.dispose();
+      if (schedulerRef.current === scheduler) schedulerRef.current = null;
+    };
+  }, []);
+
+  return React.useCallback(
+    (callback, key) => schedulerRef.current?.schedule(callback, key) ?? false,
+    [],
+  );
+}