Преглед на файлове

fix: 退出案件确认框主按钮打开时误用 hover 色

- 原因:Ant Design ConfirmDialog 默认 autoFocus 主按钮,原样式把 :focus 与 :hover 写成同一套浅红背景,弹框一打开就像被 hover;点空白失焦后恢复。- 修复:焦点态不再改变背景,只保留 :focus-visible 的可见焦点框;hover 才使用浅红,active 使用深红。- 退出案件(破坏性操作)默认焦点改到「取消」按钮,避免主按钮一打开即聚焦,也降低误触 Enter 风险。
cc преди 2 дни
родител
ревизия
127a43cb91
променени са 2 файла, в които са добавени 12 реда и са изтрити 3 реда
  1. 10 3
      ai-electron/frontend/src/core/design/ant/index.less
  2. 2 0
      ai-electron/frontend/src/core/logics/exitCaseConfirm.ts

+ 10 - 3
ai-electron/frontend/src/core/design/ant/index.less

@@ -237,16 +237,23 @@ html[data-theme='dark'] {
   border-color: @error-color !important;
   box-shadow: 0 6px 16px fade(@error-color, 18%) !important;
 
+  /* 注意:不要给 :focus 加深/变浅背景。
+     Ant Design ConfirmDialog 默认 autoFocus 主按钮,:focus 若复用 hover 色,
+     弹框刚打开时主按钮就会呈浅红,看起来像“一直 hover”,点空白失焦后才恢复。
+     focus 只保留可见焦点框,背景始终是静止态红色。 */
   &:hover,
-  &:focus,
-  &:not(:disabled):hover,
-  &:not(:disabled):focus {
+  &:not(:disabled):hover {
     color: #fff !important;
     background: lighten(@error-color, 8%) !important;
     border-color: lighten(@error-color, 8%) !important;
     box-shadow: 0 8px 18px fade(@error-color, 24%) !important;
   }
 
+  &:focus-visible {
+    outline: 2px solid fade(@error-color, 38%);
+    outline-offset: 2px;
+  }
+
   &:active,
   &:not(:disabled):active {
     color: #fff !important;

+ 2 - 0
ai-electron/frontend/src/core/logics/exitCaseConfirm.ts

@@ -27,6 +27,8 @@ export function exitCaseConfirmOptions(onOk: () => void | Promise<void>, caseNam
     okButtonProps: { danger: true },
     // 独立 wrap className:确认框主按钮的红色/hover 只针对退出案件,避免被主题或页面级按钮样式覆盖
     wrapClassName: 'jeesite-exit-case-confirm',
+    // 破坏性操作默认聚焦「取消」,避免主按钮一打开就处于 focus 态(也降低误触 Enter 的风险)
+    autoFocusButton: 'cancel' as const,
     cancelText: '取消',
     onOk,
   };