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

@@ -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%);
 }

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',