From ba2e27217cdc4a9116b45b39dcf7c1975932e2ce Mon Sep 17 00:00:00 2001 From: xmanrui <841206367@qq.com> Date: Mon, 17 Aug 2026 17:02:08 +0800 Subject: [PATCH] feat: add GitHub link to IM settings --- lib/client.js | 24 ++++++++++++++++++++---- plugin-src/client/i18n.js | 2 +- plugin-src/client/index.js | 11 ++++++++++- plugin-src/client/styles.js | 8 ++++++-- test/client-ui.test.mjs | 10 ++++++++-- 5 files changed, 45 insertions(+), 10 deletions(-) diff --git a/lib/client.js b/lib/client.js index ccb3abc..4d9e9c1 100644 --- a/lib/client.js +++ b/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 p { margin: 0; color: var(--dsw-alias-label-secondary, #646a73); font-size: 13px; line-height: 20px; white-space: nowrap; } +.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-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", diff --git a/plugin-src/client/i18n.js b/plugin-src/client/i18n.js index 1fed170..8df5f02 100644 --- a/plugin-src/client/i18n.js +++ b/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', diff --git a/plugin-src/client/index.js b/plugin-src/client/index.js index aae1e66..62602f4 100644 --- a/plugin-src/client/index.js +++ b/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 渠道' }, diff --git a/plugin-src/client/styles.js b/plugin-src/client/styles.js index b44c609..7a2db4f 100644 --- a/plugin-src/client/styles.js +++ b/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 p { margin: 0; color: var(--dsw-alias-label-secondary, #646a73); font-size: 13px; line-height: 20px; white-space: nowrap; } +.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-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; } diff --git a/test/client-ui.test.mjs b/test/client-ui.test.mjs index 63e75ed..614218d 100644 --- a/test/client-ui.test.mjs +++ b/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, />微信飞书WeChat<|>Feishu<|>DingTalk<|>WeComQQ<[^]*>Slack<[^]*>Telegram<[^]*>Discord<[^]*>WhatsApp