tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): 浅色模式交互反馈 — 发送按钮hover可见性+侧栏分界线+cursor:pointer (#121) (#134)

Browse Source 
三处浅色模式视觉可用性问题修复：

1. 创作工作室发送按钮 hover 白底白字（严重 bug）
   - 根因：globals.css L4944 .creation-chat-submit:hover 全局设 background:#fff，
     而浅色模式 L4947 html:not(.dark) 覆盖了正常态为 #202328 + color:#fff，
     hover 未被浅色覆盖 → 白底白字，按钮完全消失
   - 修复：新增 html:not(.dark) .creation-chat-submit:hover 覆盖为 #2d3139

2. antd primary 按钮 hover 过微（画布助手等全局）
   - 根因：app-theme.ts Button 组件覆盖只在暗色模式有，浅色模式 colorPrimary #171717
     hover 经 antd 算法加暗到 #000000，#171717→#000000 几乎不可见
   - 修复：浅色模式新增 colorPrimaryHover #404040 / colorPrimaryActive #525252
     （提亮而非加暗，让交互反馈可感知）

3. 侧栏与工作区边界模糊
   - 根因：--workspace-border 浅色值 rgba(15,23,42,0.1) 仅 10% 不透明度
   - 修复：提到 0.14，增强分界可见性

4. cursor:pointer 缺失
   - 根因：Tailwind v4 preflight 不自动给 <button> 加 cursor:pointer，
     .creation-chat-submit / .creation-studio-submit 仅 disabled 有 cursor:not-allowed
   - 修复：两按钮基础样式补充 cursor:pointer

Co-authored-by: sikongyue <3155157671@qq.com>
This commit is contained in:
爱笑的毛毛虫
2026-08-04 21:53:56 +08:00
committed by GitHub
parent fd100c3626
commit 660da45fdf
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/lib/app-theme.ts
View File

@@ -95,7 +95,12 @@ export function getAntThemeConfig(dark: boolean): ThemeConfig {
defaultActiveColor: "#ffffff",
defaultActiveBorderColor: "#525252",
}
: {}),
: {
/* 浅色模式：primary 近黑(#171717)，antd 默认 hover 加暗到 #000000 几乎不可见。
改为提亮 hover/active，让交互反馈可感知（审计 #121）*/
colorPrimaryHover: "#404040",
colorPrimaryActive: "#525252",
}),
},
Input: {
paddingInline: 11,

5
web/src/styles/globals.css
View File

@@ -306,7 +306,7 @@
--workspace-canvas: #ffffff;
--workspace-surface: rgba(255, 255, 255, 0.82);
--workspace-surface-strong: #ffffff;
--workspace-border: rgba(15, 23, 42, 0.1);
--workspace-border: rgba(15, 23, 42, 0.14);
--workspace-border-strong: rgba(15, 23, 42, 0.18);
--workspace-grid-line: rgba(51, 65, 85, 0.045);
--workspace-nav: rgba(255, 255, 255, 0.88);
@@ -2484,6 +2484,7 @@
background: #383d47;
color: #e5e8ec;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
cursor: pointer;
transition: transform 150ms var(--motion-ease-out), background-color 150ms ease, color 150ms ease;
}
.creation-studio-submit:hover:not(:disabled) { background: #f4f5f6; color: #111317; transform: translateY(-1px); }
@@ -4937,6 +4938,7 @@ html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-m
border-radius: 9px;
background: #f3f4f5;
color: #1b1d21;
cursor: pointer;
transition: transform 140ms var(--motion-ease-out), background-color 140ms ease;
}
@@ -4944,6 +4946,7 @@ html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-m
.creation-chat-submit:disabled { background: #292d34; color: #606771; cursor: not-allowed; }
.creation-chat-submit.is-stopping { background: #d06060; color: #fff; }
html:not(.dark) .creation-chat-submit { background: #202328; color: #fff; }
html:not(.dark) .creation-chat-submit:hover:not(:disabled) { background: #2d3139; }
.creation-control-popover-surface,
.creation-model-picker-surface {