From dbe5b33db6d23af6a671dccfbe3772b3ec71b2f8 Mon Sep 17 00:00:00 2001
From: LinaBell <15891557205@163.com>
Date: Sat, 21 Sep 2024 20:09:43 +0800
Subject: [PATCH] fix: some antd components failed to verify styles (#4458)

* fix: hover border style same as antd style when validate error

* fix: hover border style same as antd style when validate error

* feat(@vben-core/form-ui): Default form validation rules applicable to selector components

* fix: Missing the default required label style for components such as select

* fix: the focus style and antd of the input box validation failure should be consistent

* fix: the focus style and antd of the input box validation failure should be consistent

* fix: some antd components failed to verify styles

---------

Co-authored-by: vince <vince292007@gmail.com>
---
 packages/styles/src/antd/index.css           | 28 +++++++++++++++++++-
 playground/src/views/examples/form/rules.vue |  9 +++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/packages/styles/src/antd/index.css b/packages/styles/src/antd/index.css
index c41716bcfcf..001fe9e67ba 100644
--- a/packages/styles/src/antd/index.css
+++ b/packages/styles/src/antd/index.css
@@ -12,6 +12,32 @@
   @apply dark:border-border/60 dark:border;
 }
 
-.form-valid-error .ant-select-selector {
+/** select 选择器的样式 */
+.form-valid-error .ant-select .ant-select-selector {
+  border-color: hsl(var(--destructive)) !important;
+}
+
+.form-valid-error .ant-select-focused .ant-select-selector {
+  box-shadow: 0 0 0 2px rgb(255 38 5 / 6%) !important;
+}
+
+/** 数字输入框样式 */
+.form-valid-error .ant-input-number-focused {
+  box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
+}
+
+/** 密码输入框样式 */
+.form-valid-error .ant-input-affix-wrapper:hover {
   border-color: hsl(var(--destructive));
+  box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
+}
+
+/** 区间选择器下面来回切换时的样式 */
+.ant-app .form-valid-error .ant-picker-active-bar {
+  background-color: hsl(var(--destructive));
+}
+
+/** 时间选择器的样式 */
+.ant-app .form-valid-error .ant-picker-focused {
+  box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
 }
diff --git a/playground/src/views/examples/form/rules.vue b/playground/src/views/examples/form/rules.vue
index 5915c2c5083..20dd88ee75d 100644
--- a/playground/src/views/examples/form/rules.vue
+++ b/playground/src/views/examples/form/rules.vue
@@ -166,6 +166,15 @@ const [Form, formApi] = useVbenForm({
       label: '区间选择框',
       rules: 'selectRequired',
     },
+    {
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'password',
+      label: '密码',
+      rules: 'required',
+    },
   ],
   // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',