Эх сурвалжийг харах

fix: 退出案件确认框主按钮在深色主题/画像页保持红色并恢复 hover

- 主按钮选择器提高到 .ant-btn.ant-btn-primary.ant-btn-dangerous(4 类)并加 !important,覆盖 dark 主题后加载的同权重蓝色规则与数据画像页 body.case-portrait-active 的 !important 覆盖。- 退出案件确认框增加独立 wrapClassName=jeesite-exit-case-confirm,额外兜一层红色主按钮与 hover 样式,避免依赖 okButtonProps.danger 是否生效。- 补齐 :active 态与红色 hover 阴影,静止态即红,hover/active 有明确反馈。
cc 2 өдөр өмнө
parent
commit
530b434fdb

+ 23 - 8
ai-electron/frontend/src/core/design/ant/index.less

@@ -224,18 +224,33 @@ html[data-theme='dark'] {
 
 /* 退出 / 删除类确认框的主按钮必须为红色(静止态即红,不靠 hover):
    antd v4 的 okType 只接受按钮类型,危险色来自 okButtonProps.danger;
-   这里显式兜一层,避免其它全局按钮样式把它盖成蓝/白。 */
-.ant-modal-confirm .ant-btn-primary.ant-btn-dangerous {
-  color: #fff;
-  background: @error-color;
-  border-color: @error-color;
+   这里显式兜一层,避免其它全局按钮样式把它盖成蓝/白。
+   ★ 选择器刻意写到 `.ant-btn.ant-btn-primary`(4 个类):
+     - dark 主题的 `.ant-btn.ant-btn-primary` 规则与本规则同权重且更晚加载;
+     - 数据画像页还有 `body.case-portrait-active ... !important` 的蓝色主按钮覆盖;
+   用更高权重 + !important 保证两种情况都保持红色,并且 hover 有明确的浅红反馈。 */
+.ant-modal-confirm .ant-btn.ant-btn-primary.ant-btn-dangerous,
+[data-theme='dark'] .ant-modal-confirm .ant-btn.ant-btn-primary.ant-btn-dangerous,
+.jeesite-exit-case-confirm .ant-modal-confirm-btns .ant-btn.ant-btn-primary {
+  color: #fff !important;
+  background: @error-color !important;
+  border-color: @error-color !important;
+  box-shadow: 0 6px 16px fade(@error-color, 18%) !important;
 
   &:hover,
   &:focus,
   &:not(:disabled):hover,
   &:not(:disabled):focus {
-    color: #fff;
-    background: lighten(@error-color, 8%);
-    border-color: lighten(@error-color, 8%);
+    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;
+  }
+
+  &:active,
+  &:not(:disabled):active {
+    color: #fff !important;
+    background: darken(@error-color, 6%) !important;
+    border-color: darken(@error-color, 6%) !important;
   }
 }

+ 3 - 4
ai-electron/frontend/src/core/logics/exitCaseConfirm.ts

@@ -12,10 +12,7 @@ import { h } from 'vue';
  * 说明:内容用 VNode 而不是字符串 —— createConfirm 对字符串走 innerHTML,
  * 案件名属于用户数据,不能拼进 HTML。
  */
-export function exitCaseConfirmOptions(
-  onOk: () => void | Promise<void>,
-  caseName?: string | null,
-) {
+export function exitCaseConfirmOptions(onOk: () => void | Promise<void>, caseName?: string | null) {
   return {
     iconType: 'warning' as const,
     title: '退出案件',
@@ -28,6 +25,8 @@ export function exitCaseConfirmOptions(
     okText: '退出案件',
     okType: 'primary' as const,
     okButtonProps: { danger: true },
+    // 独立 wrap className:确认框主按钮的红色/hover 只针对退出案件,避免被主题或页面级按钮样式覆盖
+    wrapClassName: 'jeesite-exit-case-confirm',
     cancelText: '取消',
     onOk,
   };