From f5536517d5ff3fd874fdf3a84d9bcd68d129803f Mon Sep 17 00:00:00 2001 From: xmanrui <841206367@qq.com> Date: Wed, 26 Aug 2026 12:18:08 +0800 Subject: [PATCH] fix: show version beside brand --- lib/client.js | 32 ++++++++++---------------------- plugin-src/client/index.js | 20 +++++--------------- plugin-src/client/styles.js | 8 +++----- test/client-ui.test.mjs | 15 +++++++-------- 4 files changed, 25 insertions(+), 50 deletions(-) diff --git a/lib/client.js b/lib/client.js index 772111e..d6faf35 100644 --- a/lib/client.js +++ b/lib/client.js @@ -10329,13 +10329,11 @@ var CSS11 = String.raw` } .dim-page *, .dim-page *::before, .dim-page *::after { box-sizing: border-box; } .dim-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; } -.dim-brand { position: relative; min-width: 0; width: max-content; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: -2px -6px; padding: 2px 6px; border-radius: 8px; cursor: help; } -.dim-brand:focus-visible { outline: 2px solid color-mix(in srgb, var(--dim-blue) 70%, white); outline-offset: 2px; } +.dim-brand { min-width: 0; width: max-content; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: -2px -6px; padding: 2px 6px; border-radius: 8px; } +.dim-brandHeading { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; } .dim-brandName { color: var(--dsw-alias-label-primary, #1f2329); font-size: 20px; line-height: 24px; font-weight: 800; letter-spacing: .04em; } +.dim-brandVersion { color: var(--dsw-alias-label-tertiary, #8f959e); font: 500 10px/16px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; } .dim-title p { margin: 0; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; } -.dim-versionTooltip { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: max-content; max-width: min(220px, 80vw); display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--dsw-alias-border-l2, #dfe1e5); border-radius: 7px; color: var(--dsw-alias-label-secondary, #646a73); background: var(--dsw-alias-bg-layer-3, #fff); box-shadow: 0 8px 24px rgb(31 35 41 / 14%); font-size: 11px; line-height: 16px; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(-3px); pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility .15s ease; } -.dim-versionTooltip strong { color: var(--dsw-alias-label-primary, #1f2329); font: 600 11px/16px ui-monospace, SFMono-Regular, Menlo, monospace; } -.dim-brand:hover .dim-versionTooltip, .dim-brand:focus .dim-versionTooltip { opacity: 1; visibility: visible; transform: translateY(0); } .dim-githubAction { position: relative; display: inline-flex; flex: none; } .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); } @@ -10755,7 +10753,6 @@ function IMSettingsTab({ }) { const [selected, setSelected] = React20.useState("weixin"); const [loopbackRecovery, setLoopbackRecovery] = React20.useState(null); - const versionTooltipId = React20.useId(); const githubTooltipId = React20.useId(); const active = CHANNELS.find((channel4) => channel4.id === selected) ?? CHANNELS[0]; const reportLoopbackRecovery = React20.useCallback((recovery) => { @@ -10800,23 +10797,14 @@ function IMSettingsTab({ { className: "dim-title" }, h2( "div", - { - className: "dim-brand", - tabIndex: 0, - "aria-describedby": versionTooltipId - }, - h2("strong", { className: "dim-brandName" }, "DSH-IM"), - h2("p", null, "\u8BA9 DeepSeek Harness \u89E6\u624B\u53EF\u53CA"), + { className: "dim-brand" }, h2( - "span", - { - id: versionTooltipId, - className: "dim-versionTooltip", - role: "tooltip" - }, - h2("span", null, "\u5F53\u524D\u7248\u672C"), - h2("strong", null, `v${IM_PLUGIN_VERSION}`) - ) + "div", + { className: "dim-brandHeading" }, + h2("strong", { className: "dim-brandName" }, "DSH-IM"), + h2("span", { className: "dim-brandVersion" }, `v${IM_PLUGIN_VERSION}`) + ), + h2("p", null, "\u8BA9 DeepSeek Harness \u89E6\u624B\u53EF\u53CA") ), h2( "span", diff --git a/plugin-src/client/index.js b/plugin-src/client/index.js index 5265d13..19ec534 100644 --- a/plugin-src/client/index.js +++ b/plugin-src/client/index.js @@ -161,7 +161,6 @@ export function IMSettingsTab({ }) { const [selected, setSelected] = React.useState('weixin'); const [loopbackRecovery, setLoopbackRecovery] = React.useState(null); - const versionTooltipId = React.useId(); const githubTooltipId = React.useId(); const active = CHANNELS.find((channel) => channel.id === selected) ?? CHANNELS[0]; const reportLoopbackRecovery = React.useCallback((recovery) => { @@ -198,20 +197,11 @@ export function IMSettingsTab({ return h(WorkspaceDirectoryPickerContext.Provider, { value: workspaceDirectoryPicker }, h('section', { className: 'dim-page', 'aria-label': 'IM机器人设置' }, h('header', { className: 'dim-title' }, - h('div', { - className: 'dim-brand', - tabIndex: 0, - 'aria-describedby': versionTooltipId, - }, - h('strong', { className: 'dim-brandName' }, 'DSH-IM'), - h('p', null, '让 DeepSeek Harness 触手可及'), - h('span', { - id: versionTooltipId, - className: 'dim-versionTooltip', - role: 'tooltip', - }, - h('span', null, '当前版本'), - h('strong', null, `v${IM_PLUGIN_VERSION}`))), + h('div', { className: 'dim-brand' }, + h('div', { className: 'dim-brandHeading' }, + h('strong', { className: 'dim-brandName' }, 'DSH-IM'), + h('span', { className: 'dim-brandVersion' }, `v${IM_PLUGIN_VERSION}`)), + h('p', null, '让 DeepSeek Harness 触手可及')), h('span', { className: 'dim-githubAction' }, h('a', { className: 'dim-githubLink', diff --git a/plugin-src/client/styles.js b/plugin-src/client/styles.js index b76761e..3923f9f 100644 --- a/plugin-src/client/styles.js +++ b/plugin-src/client/styles.js @@ -12,13 +12,11 @@ const CSS = String.raw` } .dim-page *, .dim-page *::before, .dim-page *::after { box-sizing: border-box; } .dim-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; } -.dim-brand { position: relative; min-width: 0; width: max-content; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: -2px -6px; padding: 2px 6px; border-radius: 8px; cursor: help; } -.dim-brand:focus-visible { outline: 2px solid color-mix(in srgb, var(--dim-blue) 70%, white); outline-offset: 2px; } +.dim-brand { min-width: 0; width: max-content; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: -2px -6px; padding: 2px 6px; border-radius: 8px; } +.dim-brandHeading { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; } .dim-brandName { color: var(--dsw-alias-label-primary, #1f2329); font-size: 20px; line-height: 24px; font-weight: 800; letter-spacing: .04em; } +.dim-brandVersion { color: var(--dsw-alias-label-tertiary, #8f959e); font: 500 10px/16px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; } .dim-title p { margin: 0; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; } -.dim-versionTooltip { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: max-content; max-width: min(220px, 80vw); display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--dsw-alias-border-l2, #dfe1e5); border-radius: 7px; color: var(--dsw-alias-label-secondary, #646a73); background: var(--dsw-alias-bg-layer-3, #fff); box-shadow: 0 8px 24px rgb(31 35 41 / 14%); font-size: 11px; line-height: 16px; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(-3px); pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility .15s ease; } -.dim-versionTooltip strong { color: var(--dsw-alias-label-primary, #1f2329); font: 600 11px/16px ui-monospace, SFMono-Regular, Menlo, monospace; } -.dim-brand:hover .dim-versionTooltip, .dim-brand:focus .dim-versionTooltip { opacity: 1; visibility: visible; transform: translateY(0); } .dim-githubAction { position: relative; display: inline-flex; flex: none; } .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); } diff --git a/test/client-ui.test.mjs b/test/client-ui.test.mjs index cf5bd8e..edff4fa 100644 --- a/test/client-ui.test.mjs +++ b/test/client-ui.test.mjs @@ -121,11 +121,10 @@ test('IM settings renders nine IM channels plus the AI Office connector', async assert.match(markup, /让 DeepSeek Harness 触手可及/); assert.match(markup, /class="dim-brand"/); assert.equal(IM_PLUGIN_VERSION, packageVersion); - assert.match(markup, /class="dim-brand" tabindex="0" aria-describedby="[^"]+"/); - assert.match(markup, /DSH-IM<\/strong>/); assert.match(markup, new RegExp( - `class="dim-versionTooltip" role="tooltip">当前版本<\\/span>v${packageVersion.replaceAll('.', '\\.')}`, + `
DSH-IM<\\/strong>v${packageVersion.replaceAll('.', '\\.')}<\\/span><\\/div>`, )); + assert.doesNotMatch(markup, /dim-versionTooltip|当前版本/); assert.doesNotMatch(markup, /dim-brandLogo|]*>帮助与反馈 · 前往 GitHubCurrent version<\\/span>v${IM_PLUGIN_VERSION.replaceAll('.', '\\.')}`, + `class="dim-brandVersion">v${IM_PLUGIN_VERSION.replaceAll('.', '\\.')}<\\/span>`, )); assert.match(markup, /Help & feedback · Open GitHub/); assert.match(markup, />WeChat<|>Feishu<|>DingTalk<|>WeCom