feat: add GitHub link to IM settings

lib/client.js

@@ -366,7 +366,7 @@ var EN = Object.freeze({
   "IM\u673A\u5668\u4EBA": "IM bots",
   "IM\u673A\u5668\u4EBA\u8BBE\u7F6E": "IM bot settings",
   "IM \u6E20\u9053": "IM channels",
-  "\u628A\u673A\u5668\u4EBA\u63A5\u5165 DeepSeek Harness": "Connect bots to DeepSeek Harness",
+  "\u8BA9\u804A\u5929\u673A\u5668\u4EBA\u8F7B\u677E\u63A5\u5165 DeepSeek Harness": "Connect chatbots to DeepSeek Harness with ease",
   "\u5FAE\u4FE1": "WeChat",
   "\u98DE\u4E66": "Feishu",
   "\u9489\u9489": "DingTalk",
@@ -7232,8 +7232,12 @@ var CSS10 = String.raw`
   box-sizing: border-box;
 }
 .dim-page *, .dim-page *::before, .dim-page *::after { box-sizing: border-box; }
-.dim-title { margin: 0 0 26px; }
+.dim-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 26px; }
-.dim-title p { margin: 0; color: var(--dsw-alias-label-secondary, #646a73); font-size: 13px; line-height: 20px; white-space: nowrap; }
+.dim-title p { margin: 0; color: var(--dsw-alias-label-primary, #1f2329); font-size: 14px; line-height: 20px; font-weight: 700; white-space: nowrap; }
+.dim-githubLink { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 0 10px; border: 1px solid var(--dsw-alias-border-l2, #dfe1e5); border-radius: 8px; color: var(--dsw-alias-label-secondary, #646a73); background: var(--dsw-alias-bg-layer-1, #fff); font-size: 12px; line-height: normal; font-weight: 560; text-decoration: none; transition: border-color .15s ease, color .15s ease, background .15s ease; }
+.dim-githubLink:hover { border-color: #aeb3bb; color: var(--dsw-alias-label-primary, #1f2329); background: var(--dsw-alias-interactive-bg-hover, #f7f8fa); }
+.dim-githubLink:focus-visible { outline: 2px solid color-mix(in srgb, var(--dim-blue) 70%, white); outline-offset: 2px; }
+.dim-githubArrow { font-size: 13px; line-height: 1; }
 .dim-layout { display: grid; grid-template-columns: 174px 1px minmax(0, 1fr); gap: 24px; align-items: start; }
 .dim-rail { max-height: 520px; display: grid; align-content: start; gap: 8px; overflow-y: auto; padding: 1px 4px 1px 1px; scrollbar-width: thin; scrollbar-color: var(--dsw-alias-border-l2, #dfe1e5) transparent; }
 .dim-rail::-webkit-scrollbar { width: 4px; }
@@ -7522,7 +7526,19 @@ function IMSettingsTab({
     h2(
       "header",
       { className: "dim-title" },
-      h2("p", null, "\u628A\u673A\u5668\u4EBA\u63A5\u5165 DeepSeek Harness")
+      h2("p", null, "\u8BA9\u804A\u5929\u673A\u5668\u4EBA\u8F7B\u677E\u63A5\u5165 DeepSeek Harness"),
+      h2(
+        "a",
+        {
+          className: "dim-githubLink",
+          href: "https://github.com/xmanrui/dsh-im",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          "aria-label": "dsh-im GitHub"
+        },
+        h2("span", null, "GitHub"),
+        h2("span", { className: "dim-githubArrow", "aria-hidden": "true" }, "\u2197")
+      )
     ),
     h2(
       "div",

plugin-src/client/i18n.js

@@ -7,7 +7,7 @@ const EN = Object.freeze({
   'IM机器人': 'IM bots',
   'IM机器人设置': 'IM bot settings',
   'IM 渠道': 'IM channels',
-  '把机器人接入 DeepSeek Harness': 'Connect bots to DeepSeek Harness',
+  '让聊天机器人轻松接入 DeepSeek Harness': 'Connect chatbots to DeepSeek Harness with ease',
   '微信': 'WeChat',
   '飞书': 'Feishu',
   '钉钉': 'DingTalk',

plugin-src/client/index.js

@@ -125,7 +125,16 @@ export function IMSettingsTab({
   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('p', null, '让聊天机器人轻松接入 DeepSeek Harness'),
+      h('a', {
+        className: 'dim-githubLink',
+        href: 'https://github.com/xmanrui/dsh-im',
+        target: '_blank',
+        rel: 'noopener noreferrer',
+        'aria-label': 'dsh-im GitHub',
+      },
+      h('span', null, 'GitHub'),
+      h('span', { className: 'dim-githubArrow', 'aria-hidden': 'true' }, '↗')),
     ),
     h('div', { className: 'dim-layout' },
       h('nav', { className: 'dim-rail', role: 'tablist', 'aria-label': 'IM 渠道' },

plugin-src/client/styles.js

@@ -11,8 +11,12 @@ const CSS = String.raw`
   box-sizing: border-box;
 }
 .dim-page *, .dim-page *::before, .dim-page *::after { box-sizing: border-box; }
-.dim-title { margin: 0 0 26px; }
+.dim-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 26px; }
-.dim-title p { margin: 0; color: var(--dsw-alias-label-secondary, #646a73); font-size: 13px; line-height: 20px; white-space: nowrap; }
+.dim-title p { margin: 0; color: var(--dsw-alias-label-primary, #1f2329); font-size: 14px; line-height: 20px; font-weight: 700; white-space: nowrap; }
+.dim-githubLink { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 0 10px; border: 1px solid var(--dsw-alias-border-l2, #dfe1e5); border-radius: 8px; color: var(--dsw-alias-label-secondary, #646a73); background: var(--dsw-alias-bg-layer-1, #fff); font-size: 12px; line-height: normal; font-weight: 560; text-decoration: none; transition: border-color .15s ease, color .15s ease, background .15s ease; }
+.dim-githubLink:hover { border-color: #aeb3bb; color: var(--dsw-alias-label-primary, #1f2329); background: var(--dsw-alias-interactive-bg-hover, #f7f8fa); }
+.dim-githubLink:focus-visible { outline: 2px solid color-mix(in srgb, var(--dim-blue) 70%, white); outline-offset: 2px; }
+.dim-githubArrow { font-size: 13px; line-height: 1; }
 .dim-layout { display: grid; grid-template-columns: 174px 1px minmax(0, 1fr); gap: 24px; align-items: start; }
 .dim-rail { max-height: 520px; display: grid; align-content: start; gap: 8px; overflow-y: auto; padding: 1px 4px 1px 1px; scrollbar-width: thin; scrollbar-color: var(--dsw-alias-border-l2, #dfe1e5) transparent; }
 .dim-rail::-webkit-scrollbar { width: 4px; }

test/client-ui.test.mjs

@@ -111,7 +111,13 @@ test('IM settings renders nine compact logo channel tabs without enable switches
   }));
 
   assert.match(markup, /IM机器人/);
-  assert.match(markup, /把机器人接入 DeepSeek Harness/);
+  assert.match(markup, /让聊天机器人轻松接入 DeepSeek Harness/);
+  assert.match(markup, /href="https:\/\/github\.com\/xmanrui\/dsh-im"/);
+  assert.match(markup, /target="_blank"/);
+  assert.match(markup, /rel="noopener noreferrer"/);
+  assert.match(markup, /aria-label="dsh-im GitHub"/);
+  assert.match(styles, /\.dim-title p \{[^}]*color: var\(--dsw-alias-label-primary, #1f2329\);[^}]*font-size: 14px;[^}]*font-weight: 700;/);
+  assert.match(styles, /\.dim-githubLink \{[^}]*border: 1px solid var\(--dsw-alias-border-l2, #dfe1e5\);[^}]*text-decoration: none;/);
   assert.doesNotMatch(markup, /\d+ 个渠道|dim-channelCount/);
   assert.match(markup, />微信</);
   assert.match(markup, />飞书</);
@@ -589,7 +595,7 @@ test('client registers a live bilingual locale seat for the IM settings tab', ()
       registrations[0].component,
       registrations[0].options.inject(),
     ));
-    assert.match(markup, /Connect bots to DeepSeek Harness/);
+    assert.match(markup, /Connect chatbots to DeepSeek Harness with ease/);
     assert.match(markup, />WeChat<|>Feishu<|>DingTalk<|>WeCom</);
     assert.match(markup, />QQ<[^]*>Slack<[^]*>Telegram<[^]*>Discord<[^]*>WhatsApp</);
     assert.doesNotMatch(markup, /[\p{Script=Han}]/u);