diff --git a/apps/web-antd/src/views/演示使用自行删除/form/index.vue b/apps/web-antd/src/views/演示使用自行删除/form/index.vue
index edf49c1c..7478ca9c 100644
--- a/apps/web-antd/src/views/演示使用自行删除/form/index.vue
+++ b/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',
 });
diff --git a/packages/styles/src/antd/index.css b/packages/styles/src/antd/index.css
index 5fa685f8..076914ec 100644
--- a/packages/styles/src/antd/index.css
+++ b/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);
 }
 
 /** 前后置小圆点样式 */