@xmanrui/dsh-im 0.2.1 → 0.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xmanrui/dsh-im",
-  "version": "0.2.1",
-  "description": "通过扫码或机器人凭据把IM机器人接入DeepSeek Harness（支持飞书、微信、钉钉、企业微信、QQ、Telegram、Discord和WhatsApp）。",
+  "version": "0.3.0",
+  "description": "通过扫码、App Manifest或机器人凭据把IM机器人接入DeepSeek Harness（支持飞书、微信、钉钉、企业微信、QQ、Slack、Telegram、Discord和WhatsApp）。",
   "license": "MIT",
   "type": "module",
   "repository": {

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

@@ -106,6 +106,19 @@ export function DiscordLogoGlyph({ size } = {}) {
   }));
 }
 
+export function SlackLogoGlyph({ size } = {}) {
+  return h('svg', {
+    ...dimensions(size),
+    viewBox: '0 0 24 24',
+    focusable: 'false',
+    'aria-hidden': 'true',
+    'data-im-channel-logo': 'slack',
+  }, h('path', {
+    fill: 'currentColor',
+    d: 'M6 15a2 2 0 1 1-2-2h2v2Zm1 0a2 2 0 1 1 4 0v5a2 2 0 1 1-4 0v-5Zm2-8a2 2 0 1 1 2-2v2H9Zm0 1a2 2 0 1 1 0 4H4a2 2 0 1 1 0-4h5Zm8 2a2 2 0 1 1 2 2h-2v-2Zm-1 0a2 2 0 1 1-4 0V5a2 2 0 1 1 4 0v5Zm-2 8a2 2 0 1 1-2 2v-2h2Zm0-1a2 2 0 1 1 0-4h5a2 2 0 1 1 0 4h-5Z',
+  }));
+}
+
 export function WhatsappLogoGlyph({ size } = {}) {
   return h('svg', {
     ...dimensions(size),

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { CredentialActionIcon, CredentialBindingPanel, QrActionIcon } from '../../credential-binding.js';
+import { h } from '../../i18n.js';
 import {
   DINGTALK_ENDPOINTS,
   DINGTALK_RPC_CHANNEL,
@@ -13,7 +14,6 @@ import {
 } 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';

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

@@ -6,7 +6,7 @@ const CSS = String.raw`
   --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-warning: var(--dsw-alias-state-warn-primary, #d97706);
   --ddt-error: var(--dsw-alias-state-error-primary, #d54941);
   width: 100%;
   max-width: 880px;
@@ -27,13 +27,13 @@ const CSS = String.raw`
 .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 { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
-.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-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-bg-module-platform, #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 { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid var(--dsw-alias-border-l2, #dfe1e5); border-radius: 8px; color: var(--dsw-alias-label-primary, #1f2329); background: var(--dsw-alias-bg-layer-1, #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-interactive-bg-hover, #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; }
@@ -41,7 +41,7 @@ const CSS = String.raw`
 .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-card { overflow: hidden; border: 1px solid var(--dsw-alias-border-l2, #e5e6eb); border-radius: 14px; background: var(--dsw-alias-bg-layer-1, #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; }
@@ -51,7 +51,7 @@ const CSS = String.raw`
 .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 { position: relative; width: min(270px, 100%); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; padding: 10px; border: 1px solid var(--dsw-alias-border-l2, #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; }
@@ -87,10 +87,10 @@ const CSS = String.raw`
 .ddt-accountIdentity p { margin-top: 4px; color: var(--dsw-alias-label-secondary, #646a73); font: 12px ui-monospace, SFMono-Regular, monospace; }
 .ddt-health { display: inline-flex; align-items: center; gap: 7px; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; white-space: nowrap; }
 .ddt-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
-.ddt-metric { min-width: 0; padding: 12px; border-radius: 9px; background: var(--dsw-alias-fill-tertiary, #f7f8fa); }
+.ddt-metric { min-width: 0; padding: 12px; border-radius: 9px; background: var(--dsw-alias-interactive-bg-hover, #f7f8fa); }
 .ddt-metric dt { color: var(--dsw-alias-label-tertiary, #8f959e); font-size: 11px; }
 .ddt-metric dd { overflow: hidden; margin: 5px 0 0; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
-.ddt-accountFooter { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 16px; border-top: 1px solid var(--dsw-alias-line-divider, #eef0f3); }
+.ddt-accountFooter { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 16px; border-top: 1px solid var(--dsw-alias-border-l1, #eef0f3); }
 .ddt-accountFooter .ddt-actions { flex: none; flex-wrap: nowrap; gap: 8px; margin-top: 0; }
 .ddt-accountFooter .ddt-button { flex: none; white-space: nowrap; }
 .ddt-summary { color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; }

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

@@ -2,6 +2,7 @@ import * as React from "react";
 
 import { FeishuLogoGlyph } from "../../channel-logos.js";
 import { CredentialActionIcon, CredentialBindingPanel, QrActionIcon } from "../../credential-binding.js";
+import { h } from "../../i18n.js";
 import {
   FEISHU_ENDPOINTS,
   FEISHU_RPC_CHANNEL,
@@ -15,8 +16,6 @@ import {
 import { useAnimationFrameScheduler } from "../../lifecycle.js";
 import { installFeishuStyles } from "./styles.js";
 
-const h = React.createElement;
-
 export const name = "feishu-settings";
 export const inject = ["slots", "connection"];
 

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

@@ -4,7 +4,7 @@ const CSS = String.raw`
 .bxf-page {
   --bxf-accent: var(--dsw-alias-state-business-primary, #3370ff);
   --bxf-success: var(--dsw-alias-state-success-primary, #20a162);
-  --bxf-warning: var(--dsw-alias-state-warning-primary, #d97706);
+  --bxf-warning: var(--dsw-alias-state-warn-primary, #d97706);
   --bxf-error: var(--dsw-alias-state-error-primary, #d54941);
   box-sizing: border-box;
   width: 100%;
@@ -393,7 +393,7 @@ const CSS = String.raw`
 
 .bxf-connectedTop { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
 .bxf-botIdentity { min-width: 0; display: flex; align-items: center; gap: 13px; }
-.bxf-avatar { flex: none; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--dsw-alias-line-border, #e5e6eb); border-radius: 14px; background: var(--dsw-alias-bg-layer-1, #fff); box-shadow: 0 1px 3px rgb(31 35 41 / 7%); }
+.bxf-avatar { flex: none; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--dsw-alias-border-l2, #e5e6eb); border-radius: 14px; background: var(--dsw-alias-bg-layer-1, #fff); box-shadow: 0 1px 3px rgb(31 35 41 / 7%); }
 .bxf-botName { min-width: 0; }
 .bxf-botName h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 24px; font-weight: 650; }
 .bxf-botName p { overflow: hidden; color: var(--dsw-alias-label-tertiary, #8f959e); font-family: var(--ds-font-family-code, monospace); font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
@@ -407,7 +407,7 @@ const CSS = String.raw`
 .bxf-metric dt { color: var(--dsw-alias-label-tertiary, #8f959e); font-size: 11px; line-height: 17px; }
 .bxf-metric dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-primary, #1f2329); font-size: 12px; line-height: 18px; font-weight: 550; margin: 3px 0 0; }
 
-.bxf-connectedFooter { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--dsw-alias-line-divider, #eef0f3); }
+.bxf-connectedFooter { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--dsw-alias-border-l1, #eef0f3); }
 .bxf-healthSummary { min-width: 0; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; line-height: 18px; }
 .bxf-healthSummary[data-error="true"] { color: var(--bxf-error); }
 .bxf-botActions { flex: none; flex-wrap: nowrap; gap: 8px; margin-top: 0; justify-content: flex-end; }

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { QqLogoGlyph } from '../../channel-logos.js';
 import { CredentialActionIcon, CredentialBindingPanel, QrActionIcon } from '../../credential-binding.js';
+import { h } from '../../i18n.js';
 import { installDingtalkStyles } from '../dingtalk/styles.js';
 import {
   QQ_ENDPOINTS,
@@ -15,7 +16,6 @@ import {
 } from './api.js';
 import { installQqStyles } from './styles.js';
 
-const h = React.createElement;
 const ACTIVE_STATES = new Set(['pending', 'refreshing', 'connecting']);
 
 const Button = React.forwardRef(function Button({ children, kind = 'secondary', className = '', ...props }, ref) {

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

@@ -1,10 +1,9 @@
 import * as React from 'react';
 
 import { CredentialActionIcon, CredentialBindingPanel } from '../../credential-binding.js';
+import { h } from '../../i18n.js';
 import { installDingtalkStyles } from '../dingtalk/styles.js';
 
-const h = React.createElement;
-
 const Button = React.forwardRef(function Button(
   { children, kind = 'secondary', className = '', ...props },
   ref,

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

@@ -0,0 +1,11 @@
+import { TOKEN_BOT_ENDPOINTS, createTokenChannelApi } from '../shared/token-api.js';
+
+export const SLACK_RPC_CHANNEL = '/slack';
+export const SLACK_ENDPOINTS = TOKEN_BOT_ENDPOINTS;
+
+const api = createTokenChannelApi('Slack', ' Socket Mode 长连接');
+
+export const unwrapRpcResult = api.unwrapRpcResult;
+export const normalizeSnapshot = api.normalizeSnapshot;
+export const presentError = api.presentError;
+export { api as slackClientApi };

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

@@ -0,0 +1,130 @@
+import * as React from 'react';
+
+import { SlackLogoGlyph } from '../../channel-logos.js';
+import { h } from '../../i18n.js';
+import { createTokenChannelSettings } from '../shared/token-channel.js';
+import {
+  SLACK_CREATE_APP_URL,
+  SLACK_APP_MANIFEST_YAML,
+} from '../../../../src/channels/slack/manifest.mjs';
+import { SLACK_ENDPOINTS, slackClientApi } from './api.js';
+import { installSlackStyles } from './styles.js';
+
+export function SlackCredentialPanel({ busy, error, onSubmit, onCancel }) {
+  const [botToken, setBotToken] = React.useState('');
+  const [appToken, setAppToken] = React.useState('');
+  const [copied, setCopied] = React.useState(false);
+  const headingId = React.useId();
+
+  const copyManifest = async () => {
+    try {
+      await navigator.clipboard.writeText(SLACK_APP_MANIFEST_YAML);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2_000);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  const submit = (event) => {
+    event.preventDefault();
+    const normalizedBotToken = botToken.trim();
+    const normalizedAppToken = appToken.trim();
+    if (!normalizedBotToken || !normalizedAppToken || busy) return;
+    void onSubmit?.({ botToken: normalizedBotToken, appToken: normalizedAppToken });
+  };
+
+  return h('section', {
+    className: 'ddt-card dim-surfaceCard dim-credentialPanel dsl-setup',
+    'aria-labelledby': headingId,
+  },
+  h('h3', { id: headingId, className: 'dim-credentialTitle' }, '接入 Slack 机器人'),
+  h('div', { className: 'dsl-guide' },
+    h('div', { className: 'dsl-guideCopy' },
+      h('strong', null, '先用 Manifest 创建并配置 Slack App'),
+      h('p', null, '复制配置后，在 Slack 选择 From a manifest；创建完成后生成 connections:write App Token，并将应用安装到工作区。')),
+    h('div', { className: 'dsl-guideActions' },
+      h('button', {
+        type: 'button',
+        className: 'ddt-button',
+        onClick: () => void copyManifest(),
+        disabled: busy,
+      }, copied ? h('span', { className: 'dsl-copyState' }, '已复制 Manifest') : '复制 Manifest'),
+      h('a', {
+        className: 'ddt-button',
+        href: SLACK_CREATE_APP_URL,
+        target: '_blank',
+        rel: 'noreferrer',
+      }, '打开 Slack 创建页'))),
+  h('form', { className: 'dim-credentialForm dim-credentialFormSingle', onSubmit: submit },
+    h('div', { className: 'dsl-fields' },
+      h('label', { className: 'dim-credentialField' },
+        h('span', null, 'Bot Token'),
+        h('input', {
+          type: 'password',
+          value: botToken,
+          onChange: (event) => setBotToken(event.target.value),
+          placeholder: 'xoxb-…',
+          maxLength: 4096,
+          autoCapitalize: 'none',
+          autoCorrect: 'off',
+          spellCheck: false,
+          autoComplete: 'new-password',
+          disabled: busy,
+          required: true,
+        })),
+      h('label', { className: 'dim-credentialField' },
+        h('span', null, 'App Token'),
+        h('input', {
+          type: 'password',
+          value: appToken,
+          onChange: (event) => setAppToken(event.target.value),
+          placeholder: 'xapp-…',
+          maxLength: 4096,
+          autoCapitalize: 'none',
+          autoCorrect: 'off',
+          spellCheck: false,
+          autoComplete: 'new-password',
+          disabled: busy,
+          required: true,
+        })),
+      h('p', { className: 'dsl-tokenHint' }, 'Bot Token 来自 OAuth & Permissions；App Token 来自 Basic Information，并且必须包含 connections:write。')),
+    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 || !botToken.trim() || !appToken.trim(),
+      }, busy ? '正在验证并连接…' : '验证并连接'),
+      h('button', {
+        type: 'button',
+        className: 'ddt-button',
+        onClick: onCancel,
+        disabled: busy,
+      }, '取消'))));
+}
+
+const channel = createTokenChannelSettings({
+  channel: 'Slack',
+  endpoints: SLACK_ENDPOINTS,
+  api: slackClientApi,
+  LogoGlyph: SlackLogoGlyph,
+  installStyles: installSlackStyles,
+  pageClass: 'dsl-page',
+  avatarClass: 'dsl-avatar',
+  connectionLabel: 'Socket Mode 长连接',
+  emptyTitle: '接入 Slack 机器人',
+  emptyDescription: '使用官方 App Manifest 快速配置机器人，再填写 Bot Token 与 App Token 建立本地 Socket Mode 连接。',
+  platformLabel: 'Slack 工作区',
+  CredentialPanel: SlackCredentialPanel,
+  credentialPayload: ({ botToken, appToken }) => ({ botToken, appToken }),
+  credentialAriaLabel: '使用 Manifest 和双 Token 接入 Slack 机器人',
+  credentialOpenLabel: '接入机器人',
+  credentialCloseLabel: '收起接入',
+  credentialNoun: 'Bot Token 与 App Token',
+  emptyActionLabel: '开始接入',
+});
+
+export const SlackSettingsTab = channel.SettingsTab;
+export const SlackAccountCard = channel.AccountCard;

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

@@ -0,0 +1,34 @@
+export const SLACK_STYLE_ID = 'xmanrui-dsh-im-slack-settings';
+
+const CSS = String.raw`
+.dsl-page { --ddt-accent: #4a154b; --ddt-accent-deep: #321033; --ddt-accent-wash: #f7eef7; }
+.dsl-avatar { color: #fff; background: #4a154b; }
+.dsl-avatar svg { display: block; }
+.dsl-setup { display: grid; gap: 18px; }
+.dsl-guide { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 18px; padding: 16px; border: 1px solid color-mix(in srgb, #4a154b 18%, var(--dsw-alias-border-l2, #e5e6eb)); border-radius: 11px; background: color-mix(in srgb, #4a154b 4%, var(--dsw-alias-bg-layer-1, #fff)); }
+.dsl-guideCopy { min-width: 0; }
+.dsl-guideCopy strong { display: block; margin-bottom: 5px; color: var(--dsw-alias-label-primary, #1f2329); font-size: 13px; }
+.dsl-guideCopy p { margin: 0; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; line-height: 1.6; }
+.dsl-guideActions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
+.dsl-guideActions .ddt-button { white-space: nowrap; }
+.dsl-copyState { color: var(--dsw-alias-state-success-primary, #20a162); }
+.dsl-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.dsl-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) {
+  .dsl-guide { grid-template-columns: minmax(0, 1fr); }
+  .dsl-guideActions { justify-content: flex-start; }
+  .dsl-fields { grid-template-columns: minmax(0, 1fr); }
+}
+`;
+
+export function installSlackStyles() {
+  if (typeof document === 'undefined') return () => {};
+  const existing = document.querySelector(`style[data-plugin-css="${SLACK_STYLE_ID}"]`);
+  if (existing) return () => {};
+  const style = document.createElement('style');
+  style.dataset.plugin = '@xmanrui/dsh-im';
+  style.dataset.pluginCss = SLACK_STYLE_ID;
+  style.textContent = CSS;
+  document.head.appendChild(style);
+  return () => style.remove();
+}

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { WecomLogoGlyph } from '../../channel-logos.js';
 import { CredentialActionIcon, CredentialBindingPanel, QrActionIcon } from '../../credential-binding.js';
+import { h } from '../../i18n.js';
 import { installDingtalkStyles } from '../dingtalk/styles.js';
 import {
   WECOM_ENDPOINTS,
@@ -15,7 +16,6 @@ import {
 } from './api.js';
 import { installWecomStyles } from './styles.js';
 
-const h = React.createElement;
 const ACTIVE_STATES = new Set(['pending', 'refreshing', 'connecting']);
 
 const Button = React.forwardRef(function Button({ children, kind = 'secondary', className = '', ...props }, ref) {

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

@@ -2,7 +2,7 @@ export const WECOM_STYLE_ID = 'xmanrui-dsh-im-wecom-settings';
 
 const CSS = String.raw`
 .dwecom-page { --ddt-accent: #3370ff; --ddt-accent-deep: #245bdb; --ddt-accent-wash: #eef4ff; }
-.dwecom-avatar, .dwecom-brand { color: #3370ff; background: #fff; border: 1px solid var(--dsw-alias-line-border, #e5e6eb); }
+.dwecom-avatar, .dwecom-brand { color: #3370ff; background: #fff; border: 1px solid var(--dsw-alias-border-l2, #e5e6eb); }
 .dwecom-avatar svg, .dwecom-brand svg { display: block; }
 `;
 

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { WeixinLogoGlyph } from '../../channel-logos.js';
 import { QrActionIcon } from '../../credential-binding.js';
+import { h } from '../../i18n.js';
 import {
   WEIXIN_ENDPOINTS,
   WEIXIN_RPC_CHANNEL,
@@ -16,8 +17,6 @@ import {
 import { createPollScheduler, useAnimationFrameScheduler } from '../../lifecycle.js';
 import { installWeixinStyles } from './styles.js';
 
-const h = React.createElement;
-
 export const name = 'weixin-settings';
 export const inject = ['slots', 'connection'];
 

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

@@ -5,7 +5,7 @@ const CSS = String.raw`
   --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-warning: var(--dsw-alias-state-warn-primary, #d97706);
   --dxw-error: var(--dsw-alias-state-error-primary, #d54941);
   width: 100%;
   max-width: 880px;
@@ -24,20 +24,20 @@ const CSS = String.raw`
 .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-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-bg-module-platform, #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 { min-height: 34px; border: 1px solid var(--dsw-alias-border-l2, #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-layer-1, #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-interactive-bg-hover, #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-card { overflow: hidden; border: 1px solid var(--dsw-alias-border-l2, #e5e6eb); border-radius: 14px; background: var(--dsw-alias-bg-layer-1, #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; }
@@ -47,7 +47,7 @@ const CSS = String.raw`
 .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 { position: relative; width: 270px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; padding: 10px; border: 1px solid var(--dsw-alias-border-l2, #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); }
@@ -63,7 +63,7 @@ const CSS = String.raw`
 .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-input { width: 190px; height: 42px; padding: 0 14px; border: 1px solid var(--dsw-alias-border-l2, #dfe1e5); border-radius: 9px; background: var(--dsw-alias-bg-layer-1, 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; }
@@ -78,10 +78,10 @@ const CSS = String.raw`
 .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 { padding: 12px 14px; border-radius: 9px; background: var(--dsw-alias-interactive-bg-hover, #f7f8fa); }
 .dxw-metric dt { color: var(--dsw-alias-label-tertiary, #8f959e); font-size: 11px; }
 .dxw-metric dd { overflow: hidden; margin: 5px 0 0; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
-.dxw-accountFooter { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 16px; border-top: 1px solid var(--dsw-alias-line-divider, #eef0f3); }
+.dxw-accountFooter { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 16px; border-top: 1px solid var(--dsw-alias-border-l1, #eef0f3); }
 .dxw-accountFooter .dxw-actions { flex: none; flex-wrap: nowrap; gap: 8px; margin-top: 0; }
 .dxw-accountFooter .dxw-button { flex: none; white-space: nowrap; }
 .dxw-summary { color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; }

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { WhatsappLogoGlyph } from '../../channel-logos.js';
 import { QrActionIcon } from '../../credential-binding.js';
+import { h } from '../../i18n.js';
 import { installDingtalkStyles } from '../dingtalk/styles.js';
 import {
   WHATSAPP_ENDPOINTS,
@@ -14,7 +15,6 @@ import {
 } from './api.js';
 import { installWhatsappStyles } from './styles.js';
 
-const h = React.createElement;
 const ACTIVE_STATES = new Set(['pending', 'connecting']);
 
 const Button = React.forwardRef(function Button(

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
-
-const h = React.createElement;
+import { h } from './i18n.js';
 
 function ActionIcon({ children }) {
   return h('svg', {