fix(表单): 修复表单验证错误样式并统一规则

修复表单验证错误状态下的样式问题，包括输入框、选择器、时间选择器等组件的边框和阴影颜色。使用 CSS 变量统一错误阴影样式，提高可维护性。同时为演示表单的所有字段统一添加必填规则，并移除数字字段的冗余后缀配置。

apps/web-antd/src/views/演示使用自行删除/form/index.vue

@@ -147,7 +147,6 @@ const [BaseForm, baseFormApi] = useVbenForm({
       },
       fieldName: 'number',
       label: '数字(带后缀)',
-      suffix: () => '¥',
     },
     {
       component: 'IconPicker',
@@ -279,6 +278,12 @@ const [BaseForm, baseFormApi] = useVbenForm({
       label: '范围选择器',
       rules: 'selectRequired',
     },
+    {
+      component: 'TimeRangePicker',
+      fieldName: 'timeRangePicker',
+      label: '时间范围选择器',
+      rules: 'selectRequired',
+    },
     {
       component: 'TimePicker',
       fieldName: 'timePicker',
@@ -333,7 +338,10 @@ const [BaseForm, baseFormApi] = useVbenForm({
       fieldName: 'treeSelect',
       label: '树选择',
     },
-  ],
+  ].map((i) => ({
+    ...i,
+    rules: 'required',
+  })),
   // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
 });

packages/styles/src/antd/index.css

@@ -39,29 +39,63 @@
 
 .form-valid-error {
   /** select 选择器的样式 */
+  --vben-form-error-shadow: 0 0 0 2px rgba(255, 35, 5, 0.1);
 
   .ant-select:not(.valid-success) .ant-select-selector:not(.valid-success) {
     border-color: hsl(var(--destructive)) !important;
   }
 
   .ant-select-focused .ant-select-selector {
-    box-shadow: 0 0 0 2px rgb(255 38 5 / 6%) !important;
+    box-shadow: var(--vben-form-error-shadow) !important;
   }
 
   /** 数字输入框样式 */
   .ant-input-number-focused {
-    box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
+    box-shadow: var(--vben-form-error-shadow);
+  }
+
+  .ant-input-number.ant-input-number-mode-input {
+    border-color: hsl(var(--destructive));
   }
 
   /** 密码输入框样式 */
   .ant-input-affix-wrapper:hover {
     border-color: hsl(var(--destructive));
-    box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
+    box-shadow: var(--vben-form-error-shadow);
   }
 
   .ant-input:not(.valid-success) {
     border-color: hsl(var(--destructive)) !important;
   }
+
+  /* select focus-within样式 */
+  .ant-picker-outlined:focus,
+  .ant-picker-outlined:focus-within {
+    border-color: hsl(var(--destructive));
+  }
+  /* focus样式 shadow */
+  .ant-select.ant-select-outlined:not(.ant-select-disabled).ant-select-focused {
+    /* --ant-select-active-outline-color: var(--vben-form-error-shadow); */
+    box-shadow: var(--vben-form-error-shadow);
+  }
+
+  /* InputNumber */
+  .ant-input-number-outlined:focus,
+  .ant-input-number-outlined:focus-within {
+    --ant-input-number-active-border-color: hsl(var(--destructive));
+  }
+
+  .ant-mentions-outlined:focus,
+  .ant-mentions-outlined:focus-within {
+    --ant-mentions-active-border-color: hsl(var(--destructive));
+    --ant-mentions-active-shadow: var(--vben-form-error-shadow);
+  }
+
+  .ant-input-outlined:focus,
+  .ant-input-outlined:focus-within {
+    --ant-input-active-border-color: hsl(var(--destructive));
+    --ant-input-active-shadow: var(--vben-form-error-shadow);
+  }
 }
 
 /** 区间选择器下面来回切换时的样式 */
@@ -71,7 +105,7 @@
 
 /** 时间选择器的样式 */
 .form-valid-error .ant-picker-focused {
-  box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
+  box-shadow: var(--vben-form-error-shadow);
 }
 
 /** 前后置小圆点样式 */