@xmanrui/dsh-im 4.24.0 → 4.25.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xmanrui/dsh-im",
-  "version": "4.24.0",
-  "description": "把十一种 IM 渠道和公网 AI Office 接入本机 DeepSeek Harness。 Connect eleven IM channels and a public AI Office to a local DeepSeek Harness.",
+  "version": "4.25.0",
+  "description": "把十二种 IM 渠道和公网 AI Office 接入本机 DeepSeek Harness。 Connect twelve IM channels and a public AI Office to a local DeepSeek Harness.",
   "keywords": [
     "deepseek-harness",
     "dsh",
@@ -21,6 +21,7 @@
     "discord",
     "whatsapp",
     "imessage",
+    "matrix",
     "ai-office"
   ],
   "author": "xmanrui (https://github.com/xmanrui)",
@@ -80,6 +81,10 @@
     {
       "name": "wings1848",
       "url": "https://github.com/wings1848"
+    },
+    {
+      "name": "Zhe (Phil) Yang",
+      "url": "https://github.com/yangzhe1991"
     }
   ],
   "license": "MIT",
@@ -162,6 +167,7 @@
     "node": ">=22.19"
   },
   "dependencies": {
+    "@matrix-org/olm": "3.2.15",
     "@tencent-connect/qqbot-connector": "1.2.0",
     "@tencent-connect/qqbot-nodejs": "1.0.4",
     "@wecom/aibot-node-sdk": "1.0.7",

package/plugin-src/client/channel-card-meta.js

@@ -7,7 +7,7 @@ export const BotSettingsContext = React.createContext(Object.freeze({
   openBotSettings() {},
 }));
 
-function SettingsGlyph() {
+export function SettingsGlyph() {
   return h('svg', {
     viewBox: '0 0 24 24',
     width: 16,
@@ -32,14 +32,12 @@ export function BotSettingsButton({
   channelSettings,
 }) {
   const { openBotSettings } = React.useContext(BotSettingsContext);
-  const tooltipId = React.useId();
   return h('span', { className: 'dim-botSettingsAction' },
     h('button', {
       type: 'button',
       className: 'dim-botSettingsButton',
       'data-delivery-channel': channel,
       'aria-label': '更多机器人设置',
-      'aria-describedby': tooltipId,
       onClick: () => openBotSettings?.({
         ...(channelSettings && typeof channelSettings === 'object' ? channelSettings : {}),
         channel,
@@ -48,12 +46,8 @@ export function BotSettingsButton({
         connected: Boolean(connected),
         accessPolicy,
       }),
-    }, h(SettingsGlyph)),
-    h('span', {
-      id: tooltipId,
-      className: 'dim-botSettingsTooltip',
-      role: 'tooltip',
-    }, '更多机器人设置'));
+    }, h(SettingsGlyph), h('span', null, '更多设置'),
+    h('span', { className: 'dim-moreSettingsChevron', 'aria-hidden': 'true' })));
 }
 
 function messageErrorTime(value) {

package/plugin-src/client/channel-logos.js

@@ -155,6 +155,17 @@ export function IMessageLogoGlyph({ size } = {}) {
   }));
 }
 
+export function MatrixLogoGlyph({ size } = {}) {
+  return h('svg', {
+    ...dimensions(size), viewBox: '0 0 24 24', focusable: 'false',
+    'aria-hidden': 'true', 'data-im-channel-logo': 'matrix',
+  }, h('path', {
+    fill: 'currentColor',
+    'fill-rule': 'evenodd',
+    d: 'M4 4h16a2.4 2.4 0 0 1 2.4 2.4v8.2A2.4 2.4 0 0 1 20 17h-7.55l-4.2 3.3a.6.6 0 0 1-.98-.47V17H4A2.4 2.4 0 0 1 1.6 14.6V6.4A2.4 2.4 0 0 1 4 4Zm3 4.1a1.45 1.45 0 1 0 0 2.9 1.45 1.45 0 0 0 0-2.9Zm5.6 0a1.45 1.45 0 1 0 0 2.9 1.45 1.45 0 0 0 0-2.9Zm5.6 0a1.45 1.45 0 1 0 0 2.9 1.45 1.45 0 0 0 0-2.9Z',
+  }));
+}
+
 export function OfficeLogoGlyph({ size } = {}) {
   return h('svg', {
     ...dimensions(size),

package/plugin-src/client/channels/dingtalk/index.js

@@ -3,7 +3,7 @@ import { BotName } from '../../bot-alias.js';
 import * as React from 'react';
 
 import { CredentialActionIcon, CredentialBindingPanel, QrActionIcon } from '../../credential-binding.js';
-import { CollapsibleAccountSection } from '../shared/collapsible-account.js';
+import { AccountSettingsToggle, CollapsibleAccountSection } from '../shared/collapsible-account.js';
 import { h } from '../../i18n.js';
 import { WorkspaceEditor } from '../../workspace-editor.js';
 import { ContextEnhancementEditor } from '../../context-enhancement.js';
@@ -251,6 +251,13 @@ export function AccountCard({
   return h('article', { className: 'ddt-card dim-botCard', tabIndex: -1, 'data-bot-id': account.botId },
     h('div', { className: 'ddt-cardBody dim-botCardBody' },
       h(CollapsibleAccountSection, {
+        settings: h(BotSettingsButton, {
+          channel: 'dingtalk',
+          botId: account.botId,
+          botName: account.bot.name,
+          connected: account.connected,
+          accessPolicy: account.accessPolicy,
+        }),
         id: `ddt-settings-${account.botId.replace(/[^a-zA-Z0-9_-]/g, '-')}`,
         header: h('div', { className: 'ddt-accountTop dim-botCardTop' },
         h('div', { className: 'ddt-accountIdentity dim-botIdentity' },
@@ -272,13 +279,7 @@ export function AccountCard({
             lastCheckedAt: account.health.lastCheckedAt,
             formatCheckedTime: checkedTime,
           }),
-          h(BotSettingsButton, {
-            channel: 'dingtalk',
-            botId: account.botId,
-            botName: account.bot.name,
-            connected: account.connected,
-            accessPolicy: account.accessPolicy,
-          })))
+          h(AccountSettingsToggle)))
       },
         h(WorkspaceEditor, {
         workspace: account.workspace,

package/plugin-src/client/channels/feishu/index.js

@@ -4,7 +4,7 @@ import * as React from "react";
 
 import { FeishuLogoGlyph } from "../../channel-logos.js";
 import { CredentialActionIcon, CredentialBindingPanel, QrActionIcon } from "../../credential-binding.js";
-import { CollapsibleAccountSection } from "../shared/collapsible-account.js";
+import { AccountSettingsToggle, CollapsibleAccountSection } from "../shared/collapsible-account.js";
 import { h } from "../../i18n.js";
 import {
   FEISHU_ENDPOINTS,
@@ -600,6 +600,18 @@ export function BotCard({
   },
     h("div", { className: "bxf-cardBody dim-botCardBody" },
       h(CollapsibleAccountSection, {
+        settings: h(BotSettingsButton, {
+          channel: "feishu",
+          botId: connection.botId,
+          botName: bot.name,
+          connected,
+          accessPolicy: connection.accessPolicy,
+          channelSettings: {
+            groupResponseMode: connection.groupResponseMode,
+            groupTopicReply: connection.groupTopicReply,
+            groupMessagePermissionGranted: connection.groupMessagePermissionGranted,
+          },
+        }),
         id: `bxf-settings-${connection.botId.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
         header: h("div", { className: "bxf-connectedTop dim-botCardTop" },
           h("div", { className: "bxf-botIdentity dim-botIdentity" },
@@ -624,18 +636,7 @@ export function BotCard({
               formatCheckedTime,
               healthState: stateForDisplay,
             }),
-            h(BotSettingsButton, {
-              channel: "feishu",
-              botId: connection.botId,
-              botName: bot.name,
-              connected,
-              accessPolicy: connection.accessPolicy,
-              channelSettings: {
-                groupResponseMode: connection.groupResponseMode,
-                groupTopicReply: connection.groupTopicReply,
-                groupMessagePermissionGranted: connection.groupMessagePermissionGranted,
-              },
-            }))),
+            h(AccountSettingsToggle))),
       },
         h(WorkspaceEditor, {
           workspace: connection.workspace,

package/plugin-src/client/channels/matrix/api.js

@@ -0,0 +1,11 @@
+import { TOKEN_BOT_ENDPOINTS, createTokenChannelApi } from '../shared/token-api.js';
+
+export const MATRIX_RPC_CHANNEL = '/matrix';
+export const MATRIX_ENDPOINTS = TOKEN_BOT_ENDPOINTS;
+
+const api = createTokenChannelApi('Matrix', ' CS API 长轮询');
+
+export const unwrapRpcResult = api.unwrapRpcResult;
+export const normalizeSnapshot = api.normalizeSnapshot;
+export const presentError = api.presentError;
+export { api as matrixClientApi };

package/plugin-src/client/channels/matrix/index.js

@@ -0,0 +1,151 @@
+import * as React from 'react';
+
+import { MatrixLogoGlyph } from '../../channel-logos.js';
+import { h } from '../../i18n.js';
+import { createTokenChannelSettings } from '../shared/token-channel.js';
+import { MATRIX_ENDPOINTS, matrixClientApi } from './api.js';
+import { installMatrixStyles } from './styles.js';
+
+const MATRIX_USER_ID_PATTERN = /^@[^:@\s]+:[^:@\s]+(?::\d{1,5})?$/u;
+
+function validHomeserver(value) {
+  if (!value || value.length > 2_048) return false;
+  try {
+    const url = new URL(value);
+    return (url.protocol === 'https:' || url.protocol === 'http:')
+      && !url.username && !url.password && !url.hash;
+  } catch {
+    return false;
+  }
+}
+
+export function MatrixCredentialPanel({ busy, error, onSubmit, onCancel }) {
+  const [homeserver, setHomeserver] = React.useState('');
+  const [accessToken, setAccessToken] = React.useState('');
+  const [userId, setUserId] = React.useState('');
+  const [password, setPassword] = React.useState('');
+  const headingId = React.useId();
+
+  const normalizedHomeserver = homeserver.trim();
+  const normalizedUserId = userId.trim();
+  const tokenMode = Boolean(accessToken.trim());
+  const loginMode = Boolean(normalizedUserId) && Boolean(password);
+  const canSubmit = validHomeserver(normalizedHomeserver)
+    && (tokenMode
+      ? (!normalizedUserId && !password && accessToken.trim().length >= 8)
+      : (!accessToken.trim() && MATRIX_USER_ID_PATTERN.test(normalizedUserId) && password.length >= 1));
+
+  const submit = (event) => {
+    event.preventDefault();
+    if (!canSubmit || busy) return;
+    void onSubmit?.(tokenMode
+      ? { homeserver: normalizedHomeserver, accessToken: accessToken.trim() }
+      : {
+        homeserver: normalizedHomeserver,
+        userId: normalizedUserId,
+        password,
+      });
+  };
+
+  return h('section', {
+    className: 'ddt-card dim-surfaceCard dim-credentialPanel dmt-setup',
+    'aria-labelledby': headingId,
+  },
+  h('h3', { id: headingId, className: 'dim-credentialTitle' }, '接入 Matrix 机器人'),
+  h('div', { className: 'dmt-guide' },
+    h('div', { className: 'dmt-guideCopy' },
+      h('strong', null, '连接你的 Matrix homeserver'),
+      h('p', null, '填写 homeserver 地址，并提供访问令牌，或者用户 ID 与密码的组合。机器人只访问该 homeserver，不连接第三方服务器。'))),
+  h('form', { className: 'dim-credentialForm dim-credentialFormSingle', onSubmit: submit },
+    h('div', { className: 'dmt-fields' },
+      h('label', { className: 'dim-credentialField dmt-fieldWide' },
+        h('span', null, 'Homeserver 地址'),
+        h('input', {
+          type: 'url',
+          value: homeserver,
+          onChange: (event) => setHomeserver(event.target.value),
+          placeholder: 'https://matrix.example.org',
+          maxLength: 2048,
+          autoCapitalize: 'none',
+          autoCorrect: 'off',
+          spellCheck: false,
+          disabled: busy,
+          required: true,
+        })),
+      h('label', { className: 'dim-credentialField dmt-fieldWide' },
+        h('span', null, '访问令牌（与用户 ID、密码二选一）'),
+        h('input', {
+          type: 'password',
+          value: accessToken,
+          onChange: (event) => setAccessToken(event.target.value),
+          placeholder: 'syt_…',
+          maxLength: 4096,
+          autoCapitalize: 'none',
+          autoCorrect: 'off',
+          spellCheck: false,
+          autoComplete: 'new-password',
+          disabled: busy,
+        })),
+      h('label', { className: 'dim-credentialField' },
+        h('span', null, '用户 ID（可选）'),
+        h('input', {
+          type: 'text',
+          value: userId,
+          onChange: (event) => setUserId(event.target.value),
+          placeholder: '@bot:example.org',
+          maxLength: 512,
+          autoCapitalize: 'none',
+          autoCorrect: 'off',
+          spellCheck: false,
+          disabled: busy,
+        })),
+      h('label', { className: 'dim-credentialField' },
+        h('span', null, '密码（可选）'),
+        h('input', {
+          type: 'password',
+          value: password,
+          onChange: (event) => setPassword(event.target.value),
+          maxLength: 1024,
+          autoComplete: 'new-password',
+          disabled: busy,
+        })),
+      h('p', { className: 'dmt-tokenHint' }, '访问令牌来自 Element 设置 → 帮助 → 编辑设置，或 homeserver 的登录接口；用户 ID 与密码方式会为本安装派生稳定设备会话。')),
+    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 || !canSubmit,
+      }, busy ? '正在验证并连接…' : '验证并连接'),
+      h('button', {
+        type: 'button',
+        className: 'ddt-button',
+        onClick: onCancel,
+        disabled: busy,
+      }, '取消'))));
+}
+
+const channel = createTokenChannelSettings({
+  channel: 'Matrix',
+  endpoints: MATRIX_ENDPOINTS,
+  api: matrixClientApi,
+  LogoGlyph: MatrixLogoGlyph,
+  installStyles: installMatrixStyles,
+  pageClass: 'dmt-page',
+  avatarClass: 'dmt-avatar',
+  connectionLabel: 'CS API 长轮询',
+  emptyTitle: '接入 Matrix 机器人',
+  emptyDescription: '填写 homeserver 地址与访问令牌，或者用户 ID 与密码，即可让机器人以 CS API 长轮询接收消息并以富文本回复。',
+  platformLabel: 'Matrix homeserver',
+  CredentialPanel: MatrixCredentialPanel,
+  credentialPayload: ({ homeserver, accessToken, userId, password }) => ({ homeserver, accessToken, userId, password }),
+  credentialAriaLabel: '使用 homeserver 与凭据接入 Matrix 机器人',
+  credentialOpenLabel: '接入机器人',
+  credentialCloseLabel: '收起接入',
+  credentialNoun: '访问令牌或用户 ID 与密码',
+  emptyActionLabel: '开始接入',
+});
+
+export const MatrixSettingsTab = channel.SettingsTab;
+export const MatrixAccountCard = channel.AccountCard;

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

@@ -0,0 +1,36 @@
+export const MATRIX_STYLE_ID = 'xmanrui-dsh-im-matrix-settings';
+
+const CSS = String.raw`
+.dmt-page { --ddt-accent: #1a8f6f; --ddt-accent-deep: #12654f; --ddt-accent-wash: #eef8f4; }
+.dmt-avatar { background: linear-gradient(145deg, #fff, #f6faf8); border: 1px solid #e2eae7; }
+.dmt-avatar svg { display: block; }
+.dim-logoMatrix { color: white; background: #0dbd8b; }
+.dim-logoMatrix svg { width: 22px; height: 22px; }
+.dmt-setup { display: grid; gap: 18px; }
+.dmt-guide { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 18px; padding: 16px; border: 1px solid color-mix(in srgb, #1a8f6f 18%, var(--dsw-alias-border-l2, #e5e6eb)); border-radius: 11px; background: color-mix(in srgb, #1a8f6f 4%, var(--dsw-alias-bg-layer-1, #fff)); }
+.dmt-guideCopy { min-width: 0; }
+.dmt-guideCopy strong { display: block; margin-bottom: 5px; color: var(--dsw-alias-label-primary, #1f2329); font-size: 13px; }
+.dmt-guideCopy p { margin: 0; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; line-height: 1.6; }
+.dmt-guideActions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
+.dmt-guideActions .ddt-button { white-space: nowrap; }
+.dmt-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.dmt-fields .dmt-fieldWide { grid-column: 1 / -1; }
+.dmt-tokenHint { grid-column: 1 / -1; margin: -4px 0 0; color: var(--dsw-alias-label-tertiary, #8f959e); font-size: 11px; line-height: 1.55; }
+@container (max-width: 680px) {
+  .dmt-guide { grid-template-columns: minmax(0, 1fr); }
+  .dmt-guideActions { justify-content: flex-start; }
+  .dmt-fields { grid-template-columns: minmax(0, 1fr); }
+}
+`;
+
+export function installMatrixStyles() {
+  if (typeof document === 'undefined') return () => {};
+  const existing = document.querySelector(`style[data-plugin-css="${MATRIX_STYLE_ID}"]`);
+  if (existing) return () => {};
+  const style = document.createElement('style');
+  style.dataset.plugin = '@xmanrui/dsh-im';
+  style.dataset.pluginCss = MATRIX_STYLE_ID;
+  style.textContent = CSS;
+  document.head.appendChild(style);
+  return () => style.remove();
+}

package/plugin-src/client/channels/qq/index.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { QqLogoGlyph } from '../../channel-logos.js';
 import { CredentialActionIcon, CredentialBindingPanel, QrActionIcon } from '../../credential-binding.js';
-import { CollapsibleAccountSection } from '../shared/collapsible-account.js';
+import { AccountSettingsToggle, CollapsibleAccountSection } from '../shared/collapsible-account.js';
 import { h } from '../../i18n.js';
 import { WorkspaceEditor } from '../../workspace-editor.js';
 import { ContextEnhancementEditor } from '../../context-enhancement.js';
@@ -189,6 +189,13 @@ export function AccountCard({
   return h('article', { className: 'ddt-card dim-botCard', 'data-bot-id': account.botId },
     h('div', { className: 'ddt-cardBody dim-botCardBody' },
       h(CollapsibleAccountSection, {
+        settings: h(BotSettingsButton, {
+          channel: 'qq',
+          botId: account.botId,
+          botName: account.bot.name,
+          connected: account.connected,
+          accessPolicy: account.accessPolicy,
+        }),
         id: `qq-settings-${account.botId.replace(/[^a-zA-Z0-9_-]/g, '-')}`,
         header: h('div', { className: 'ddt-accountTop dim-botCardTop' },
         h('div', { className: 'ddt-accountIdentity dim-botIdentity' },
@@ -209,13 +216,7 @@ export function AccountCard({
             lastCheckedAt: account.health.lastCheckedAt,
             formatCheckedTime: checkedTime,
           }),
-          h(BotSettingsButton, {
-            channel: 'qq',
-            botId: account.botId,
-            botName: account.bot.name,
-            connected: account.connected,
-            accessPolicy: account.accessPolicy,
-          })))
+          h(AccountSettingsToggle)))
       },
         h(WorkspaceEditor, {
         workspace: account.workspace,

package/plugin-src/client/channels/shared/collapsible-account.js

@@ -3,32 +3,64 @@
  *
  * When several accounts are connected, each account's workspace / preset /
  * context-enhancement editors make the list extremely long. This component
- * renders the account header as the toggle itself: collapsed, the card shows
- * only the header line; clicking the header expands the settings details.
+ * keeps one settings toggle in the existing header tools slot. Clicking the
+ * header also expands the settings details; more settings live in the body.
  *
  * Design notes:
- * - The whole header is the toggle (click + keyboard). Buttons rendered inside
- *   the header must call stopPropagation so they keep their own behaviour.
- * - A chevron sits at the end of the header line as the affordance.
+ * - The native toggle owns keyboard interaction. Header controls stop click
+ *   propagation so editing a name cannot accidentally toggle the card.
  * - Height animation uses grid-template-rows: 0fr -> 1fr (pure CSS).
- * - Full a11y: the header is a button-like region with aria-expanded /
- *   aria-controls; the details region keeps native semantics.
+ * - The toggle exposes aria-expanded / aria-controls; the body keeps native
+ *   semantics and hides collapsed controls from focus and accessibility.
  * - Honors prefers-reduced-motion.
  * - Styles are managed by the IM settings plugin, not individual accounts.
  */
 import * as React from 'react';
 import { h } from '../../i18n.js';
+import { SettingsGlyph } from '../../channel-card-meta.js';
+
+const AccountSectionContext = React.createContext(null);
+
+/** Renders in the original settings-button slot, beside the status metadata. */
+export function AccountSettingsToggle() {
+  const { open, toggle, contentId } = React.useContext(AccountSectionContext);
+  return h('button', {
+    type: 'button',
+    className: 'dim-accountSettingsToggle',
+    'aria-label': open ? '收起该账号的设置' : '展开该账号的设置',
+    'aria-expanded': open ? 'true' : 'false',
+    'aria-controls': contentId,
+    onClick: (event) => {
+      event.stopPropagation();
+      toggle();
+    },
+  }, h(SettingsGlyph),
+  h('svg', {
+    className: 'dim-collapsibleChevron',
+    viewBox: '0 0 12 16',
+    width: 12,
+    height: 16,
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.8,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    'aria-hidden': 'true',
+  }, h('path', { d: 'M2 6 6 10 10 6' })));
+}
 
 /**
  * Collapsible account card.
  *
  * `header` renders the always-visible header line; clicking it toggles.
  * Any interactive control inside the header should stop the click event so it
- * does not toggle the section (e.g. the bot settings button).
+ * does not toggle the section (e.g. the alias editor).
+ * `settings` is the original more-settings action, shown above the editors.
  * `children` is the collapsed details region.
  */
 export function CollapsibleAccountSection({
   header,
+  settings,
   defaultOpen = false,
   open: controlledOpen,
   onToggle,
@@ -37,44 +69,35 @@ export function CollapsibleAccountSection({
   children,
 }) {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const generatedId = React.useId();
   const open = controlledOpen ?? uncontrolledOpen;
-  const contentId = id ? `${id}-content` : undefined;
+  const contentId = `${id ?? generatedId}-content`;
 
   const toggle = () => {
     if (controlledOpen === undefined) setUncontrolledOpen((value) => !value);
     onToggle?.(!open);
   };
 
-  const onKeyDown = (event) => {
-    if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
-      event.preventDefault();
-      toggle();
-    }
-  };
-
-  return h('div', {
+  return h(AccountSectionContext.Provider, { value: { open, toggle, contentId } },
+  h('div', {
     className: `dim-collapsibleAccount ${open ? 'is-open' : ''} ${className}`.trim(),
     'data-open': open ? 'true' : 'false',
   },
     h('div', {
       className: 'dim-collapsibleHead',
-      role: 'button',
-      tabIndex: 0,
       onClick: toggle,
-      onKeyDown,
-      'aria-expanded': open ? 'true' : 'false',
-      'aria-controls': contentId,
-      'aria-label': open ? '收起该账号的设置' : '展开该账号的设置',
     },
       h('div', { className: 'dim-collapsibleHeaderContent' }, header),
-      h('span', { className: 'dim-collapsibleChevron', 'aria-hidden': 'true' }),
     ),
     h('div', {
       id: contentId,
       className: 'dim-collapsibleBody',
       role: 'region',
     },
-      h('div', { className: 'dim-collapsibleBodyInner' }, children),
+      h('div', { className: 'dim-collapsibleBodyInner' },
+        settings ? h('div', { className: 'dim-accountSettingsHeader' },
+          h('span', null, '常用配置'), settings) : null,
+        children),
     ),
-  );
+  ));
 }

package/plugin-src/client/channels/shared/token-channel.js

@@ -3,7 +3,7 @@ import { BotName } from '../../bot-alias.js';
 import * as React from 'react';
 
 import { CredentialActionIcon, CredentialBindingPanel } from '../../credential-binding.js';
-import { CollapsibleAccountSection } from './collapsible-account.js';
+import { AccountSettingsToggle, CollapsibleAccountSection } from './collapsible-account.js';
 import { h } from '../../i18n.js';
 import { installDingtalkStyles } from '../dingtalk/styles.js';
 import { WorkspaceEditor } from '../../workspace-editor.js';
@@ -92,6 +92,13 @@ export function createTokenChannelSettings(definition) {
     return h('article', { className: 'ddt-card dim-botCard', 'data-bot-id': account.botId },
       h('div', { className: 'ddt-cardBody dim-botCardBody' },
         h(CollapsibleAccountSection, {
+          settings: h(BotSettingsButton, {
+            channel: channel.toLowerCase(),
+            botId: account.botId,
+            botName: account.bot.name,
+            connected: account.connected,
+            accessPolicy: account.accessPolicy,
+          }),
           id: `tok-settings-${account.botId.replace(/[^a-zA-Z0-9_-]/g, '-')}`,
           header: h('div', { className: 'ddt-accountTop dim-botCardTop' },
             h('div', { className: 'ddt-accountIdentity dim-botIdentity' },
@@ -113,13 +120,7 @@ export function createTokenChannelSettings(definition) {
                 lastCheckedAt: account.health.lastCheckedAt,
                 formatCheckedTime: checkedTime,
               }),
-              h(BotSettingsButton, {
-                channel: channel.toLowerCase(),
-                botId: account.botId,
-                botName: account.bot.name,
-                connected: account.connected,
-                accessPolicy: account.accessPolicy,
-              }))),
+              h(AccountSettingsToggle))),
         },
           h(WorkspaceEditor, {
             workspace: account.workspace,

package/plugin-src/client/channels/wecom/index.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { WecomLogoGlyph } from '../../channel-logos.js';
 import { CredentialActionIcon, CredentialBindingPanel, QrActionIcon } from '../../credential-binding.js';
-import { CollapsibleAccountSection } from '../shared/collapsible-account.js';
+import { AccountSettingsToggle, CollapsibleAccountSection } from '../shared/collapsible-account.js';
 import { h } from '../../i18n.js';
 import { WorkspaceEditor } from '../../workspace-editor.js';
 import { ContextEnhancementEditor } from '../../context-enhancement.js';
@@ -188,6 +188,13 @@ export function AccountCard({
   return h('article', { className: 'ddt-card dim-botCard', 'data-bot-id': account.botId },
     h('div', { className: 'ddt-cardBody dim-botCardBody' },
       h(CollapsibleAccountSection, {
+        settings: h(BotSettingsButton, {
+          channel: 'wecom',
+          botId: account.botId,
+          botName: account.bot.name,
+          connected: account.connected,
+          accessPolicy: account.accessPolicy,
+        }),
         id: `wec-settings-${account.botId.replace(/[^a-zA-Z0-9_-]/g, '-')}`,
         header: h('div', { className: 'ddt-accountTop dim-botCardTop' },
         h('div', { className: 'ddt-accountIdentity dim-botIdentity' },
@@ -208,13 +215,7 @@ export function AccountCard({
             lastCheckedAt: account.health.lastCheckedAt,
             formatCheckedTime: checkedTime,
           }),
-          h(BotSettingsButton, {
-            channel: 'wecom',
-            botId: account.botId,
-            botName: account.bot.name,
-            connected: account.connected,
-            accessPolicy: account.accessPolicy,
-          })))
+          h(AccountSettingsToggle)))
       },
         h(WorkspaceEditor, {
         workspace: account.workspace,

package/plugin-src/client/channels/wecom-app/index.js

@@ -3,7 +3,7 @@ import { BotName } from '../../bot-alias.js';
 import * as React from 'react';
 
 import { WecomLogoGlyph } from '../../channel-logos.js';
-import { CollapsibleAccountSection } from '../shared/collapsible-account.js';
+import { AccountSettingsToggle, CollapsibleAccountSection } from '../shared/collapsible-account.js';
 import { h } from '../../i18n.js';
 import { WorkspaceEditor } from '../../workspace-editor.js';
 import { ContextEnhancementEditor } from '../../context-enhancement.js';
@@ -263,6 +263,13 @@ export function AccountCard({
   return h('article', { className: 'ddt-card dim-botCard', 'data-bot-id': account.botId },
     h('div', { className: 'ddt-cardBody dim-botCardBody' },
       h(CollapsibleAccountSection, {
+        settings: h(BotSettingsButton, {
+          channel: 'wecomApp',
+          botId: account.botId,
+          botName: account.bot.name,
+          connected: account.connected,
+          accessPolicy: account.accessPolicy,
+        }),
         id: elementId,
         header: h('div', { className: 'ddt-accountTop dim-botCardTop' },
         h('div', { className: 'ddt-accountIdentity dim-botIdentity' },
@@ -283,13 +290,7 @@ export function AccountCard({
             lastCheckedAt: account.health.lastCheckedAt,
             formatCheckedTime: checkedTime,
           }),
-          h(BotSettingsButton, {
-            channel: 'wecomApp',
-            botId: account.botId,
-            botName: account.bot.name,
-            connected: account.connected,
-            accessPolicy: account.accessPolicy,
-          })))
+          h(AccountSettingsToggle)))
       },
         h(CallbackUrlBox, {
           url: account.bot.callbackUrl,