hansjone/dsh-im-ops
1
0
Fork 0
mirror of https://github.com/hansjone/dsh-im-ops.git synced 2026-10-09 01:53:21 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ui): show plugin version on brand hover

Browse source
This commit is contained in:
xmanrui 2026-08-25 13:15:27 +08:00
parent 7211534aef
commit b42fc411c2
5 changed files with 173 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

1
plugin-src/client/i18n.js
View file

@ -8,6 +8,7 @@ const EN = Object.freeze({
'IM机器人设置': 'IM bot settings',
'IM 渠道': 'IM channels',
'让 DeepSeek Harness 触手可及': 'DeepSeek Harness, always within reach',
'当前版本': 'Current version',
'AI Office': 'AI Office',
'（实验功能）': '(Experimental)',
'AI Office 设置': 'AI Office settings',

18
plugin-src/client/index.js
View file

@ -1,4 +1,5 @@
import * as React from 'react';
import manifest from '../../package.json' with { type: 'json' };
import {
DingtalkLogoGlyph,
@ -51,6 +52,7 @@ import { WorkspaceDirectoryPickerContext } from './workspace-editor.js';
export const name = 'im-settings';
export const inject = ['slots', 'connection', 'locale', 'workspaces'];
export const IM_PLUGIN_VERSION = manifest.version;
const CHANNELS = Object.freeze([
{ id: 'weixin', label: '微信' },
@ -159,6 +161,7 @@ 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) => {
@ -195,9 +198,20 @@ 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' },
h('div', {
className: 'dim-brand',
tabIndex: 0,
'aria-describedby': versionTooltipId,
},
h('strong', { className: 'dim-brandName' }, 'DSH-IM'),
h('p', null, '让 DeepSeek Harness 触手可及')),
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('span', { className: 'dim-githubAction' },
h('a', {
className: 'dim-githubLink',

6
plugin-src/client/styles.js
View file

@ -12,9 +12,13 @@ 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 { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.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-brandName { color: var(--dsw-alias-label-primary, #1f2329); font-size: 20px; line-height: 24px; font-weight: 800; letter-spacing: .04em; }
.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; left: 0; bottom: calc(100% + 8px); 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); }