diff --git a/src/layouts/RightContent.tsx b/src/layouts/RightContent.tsx index efb8132..659ccff 100644 --- a/src/layouts/RightContent.tsx +++ b/src/layouts/RightContent.tsx @@ -7,6 +7,7 @@ import { getDemoClock, resetDemoData, switchDemoScenario } from '@/services/syst import { avatarColor, avatarText } from '@/utils/avatar'; import { formatDateTime } from '@/utils/format'; import { + DownOutlined, FieldTimeOutlined, GithubOutlined, LogoutOutlined, @@ -32,7 +33,8 @@ const localeOptions = [ /** * 顶栏右侧:主题切换、语言、GitHub、账户菜单(演示场景 / 重置演示数据 / 退出登录)。 - * 菜单均为 antd Dropdown(hover 与 click 均可展开,键盘可聚焦、回车打开、方向键选择)。 + * 菜单均为 antd Dropdown(仅 click 展开,键盘可聚焦、回车打开、方向键选择——hover 展开菜单 + * 容易在扫过顶栏时误弹,不符合「点击才出菜单」的惯例)。 * 受控演示模式下额外展示「演示时间」标记——冻结时钟必须显式可见,不假装数据正按现实时间刷新。 */ const RightContent = () => { @@ -138,13 +140,17 @@ const RightContent = () => { }; const displayName = initialState?.nickName || initialState?.name || ''; + const identity = avatarColor(displayName); const themeLabel = intl.formatMessage( { id: 'header.switchTheme' }, { mode: t(dark ? 'header.themeLight' : 'header.themeDark') }, ); return ( -
+ // backgroundColor 内联写死:ProLayout 会给 actions 容器的这个直接子元素刷一层淡底(hover 时 + // rgba(0,0,0,.03)/深色对应值),与本区域内按钮自身的 hover 药丸叠成「整体 + 账号」两层背景; + // 其 CSS-in-JS 注入难枚举,内联声明对任何选择器都成立,压掉容器层、只留每个按钮自己的反馈 +
{clock?.mode === 'frozen' && ( } className="m-0 hidden sm:inline-flex"> @@ -161,7 +167,7 @@ const RightContent = () => { onClick={toggleTheme} /> - +
diff --git a/tailwind.css b/tailwind.css index 52c3746..d8bfb07 100644 --- a/tailwind.css +++ b/tailwind.css @@ -78,3 +78,30 @@ div.ant-spin-description { /* antd 6 Spin 的 section 用 colorPrimary 当文字色,说明文字在暗色卡片上只有 3.06:1 */ color: var(--ant-color-text-description, var(--ant-color-text)); } + +/* + * 顶栏右侧按钮的 hover / 菜单展开反馈:antd 6 文本按钮默认铺 fill-tertiary + * (浅色 4% 黑 / 深色 8% 白),在顶栏底色上几乎不可见;统一升到 fill-secondary。 + * 选择器特异性 (0,3,1) 压过组件自身的 (0,2,1) hover 规则;变量挂在按钮自身的 + * .css-var-* 作用域上,浅深主题各自取值。作用域类 admin-header-actions 见 RightContent.tsx。 + */ +.admin-header-actions .ant-btn-text:not(:disabled):hover, +.admin-header-actions .ant-btn-text.ant-dropdown-open { + background-color: var(--ant-color-fill-secondary); +} + +/* + * 头像字母居中的度量补偿(4x 截图像素级实测,墨迹包围盒中心 vs 圆环中心): + * antd Avatar 的基线摆放让两种文字的墨迹都整体上偏约 1.4px(拉丁 −1.46 / 汉字 −1.40), + * 水平方向拉丁字母右偏约 0.5px、汉字(全宽 advance)水平居中。 + * 补偿值经两步实测标定(1.5→残差−0.46、2.5→残差+0.51,近似 1:1 生效),2.0px 时双语言残差均为 0。 + * 用 margin 而非 transform:antd 给 .ant-avatar-string 设了内联 transform(scale),CSS transform 会被压。 + */ +.admin-header-actions .ant-avatar-string { + margin-top: 2px; + margin-left: -0.4px; +} + +:lang(zh) .admin-header-actions .ant-avatar-string { + margin-left: 0; +}