fix: 修复表单校验触发时机问题

client/packages/design/components/WebMetaForm/types/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Form, Checkbox } from 'antd';
 import type { FastifyFormFieldComponent } from 'react-fastify-form';
 import { getValidateStatus } from '../utils';

client/packages/design/components/WebMetaForm/types/Password.tsx

@@ -5,8 +5,16 @@ import { getValidateStatus } from '../utils';
 
 export const FastifyFormPassword: FastifyFormFieldComponent = React.memo(
   (props) => {
-    const { name, label, value, onChange, error, maxLength, placeholder } =
-      props;
+    const {
+      name,
+      label,
+      value,
+      onChange,
+      onBlur,
+      error,
+      maxLength,
+      placeholder,
+    } = props;
 
     return (
       <Form.Item
@@ -22,6 +30,7 @@ export const FastifyFormPassword: FastifyFormFieldComponent = React.memo(
           placeholder={placeholder}
           value={value}
           onChange={(e) => onChange(e.target.value)}
+          onBlur={onBlur}
         />
       </Form.Item>
     );

client/packages/design/components/WebMetaForm/types/Select.tsx

@@ -14,7 +14,7 @@ interface FastifyFormSelectOptionsItem {
 export const FastifyFormSelect: FastifyFormFieldComponent<{
   options: FastifyFormSelectOptionsItem[];
 }> = React.memo((props) => {
-  const { name, label, value, onChange, options } = props;
+  const { name, label, value, onChange, onBlur, options } = props;
 
   useEffect(() => {
     if (_isNil(value) || value === '') {
@@ -25,7 +25,12 @@ export const FastifyFormSelect: FastifyFormFieldComponent<{
 
   return (
     <Form.Item label={label}>
-      <Select size="large" value={value} onChange={(value) => onChange(value)}>
+      <Select
+        size="large"
+        value={value}
+        onChange={(value) => onChange(value)}
+        onBlur={onBlur}
+      >
         {options.map((option, i) => (
           <Option key={`${option.value}${i}`} value={option.value}>
             {option.label}

client/packages/design/components/WebMetaForm/types/Text.tsx

@@ -5,8 +5,16 @@ import { getValidateStatus } from '../utils';
 
 export const FastifyFormText: FastifyFormFieldComponent = React.memo(
   (props) => {
-    const { name, label, value, onChange, error, maxLength, placeholder } =
-      props;
+    const {
+      name,
+      label,
+      value,
+      onChange,
+      onBlur,
+      error,
+      maxLength,
+      placeholder,
+    } = props;
 
     return (
       <Form.Item
@@ -21,6 +29,7 @@ export const FastifyFormText: FastifyFormFieldComponent = React.memo(
           placeholder={placeholder}
           value={value}
           onChange={(e) => onChange(e.target.value)}
+          onBlur={onBlur}
         />
       </Form.Item>
     );

client/packages/design/components/WebMetaForm/types/TextArea.tsx

@@ -5,8 +5,16 @@ import { getValidateStatus } from '../utils';
 
 export const FastifyFormTextArea: FastifyFormFieldComponent = React.memo(
   (props) => {
-    const { name, label, value, onChange, error, maxLength, placeholder } =
-      props;
+    const {
+      name,
+      label,
+      value,
+      onChange,
+      onBlur,
+      error,
+      maxLength,
+      placeholder,
+    } = props;
 
     return (
       <Form.Item
@@ -21,6 +29,7 @@ export const FastifyFormTextArea: FastifyFormFieldComponent = React.memo(
           placeholder={placeholder}
           value={value}
           onChange={(e) => onChange(e.target.value)}
+          onBlur={onBlur}
         />
       </Form.Item>
     );

client/packages/design/package.json

@@ -25,7 +25,7 @@
     "@iconify/react": "^3.2.1",
     "antd": "^4.19.5",
     "lodash": "^4.17.21",
-    "react-fastify-form": "1.0.9",
+    "react-fastify-form": "1.0.10",
     "str2int": "^1.1.0"
   },
   "devDependencies": {

client/web/src/styles/antd/dark.less

@@ -53,22 +53,36 @@
   }
 
   // 表单
-  .ant-form-item-label > label {
-    color: white;
-  }
-
-  // 表单错误
-  .ant-form-item-has-error {
-    .ant-input:not(.ant-input-disabled) {
-      background-color: transparent;
-      border-color: var(--antd-primary-dangerous-color);
+  .ant-form {
+    // 表单
+    .ant-form-item-label > label {
+      color: white;
+    }
 
-      &:hover {
+    // 表单错误
+    .ant-form-item-has-error {
+      .ant-input:not(.ant-input-disabled) {
         background-color: transparent;
+        border-color: var(--antd-primary-dangerous-color);
+
+        &:hover {
+          background-color: transparent;
+        }
       }
     }
+
+    .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper, .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:hover {
+      background: transparent;
+      border-color: var(--antd-primary-dangerous-color);
+    }
+  }
+
+  // 图标
+  .anticon {
+    color: rgba(255, 255, 255, 0.45)
   }
 
+
   // 分割线
   .ant-divider {
     border-top-color: rgba(255, 255, 255, 0.12);

pnpm-lock.yaml

@@ -67,7 +67,7 @@ importers:
       lodash: ^4.17.21
       react: 17.0.2
       react-dom: 17.0.2
-      react-fastify-form: 1.0.9
+      react-fastify-form: 1.0.10
       str2int: ^1.1.0
       typescript: ^4.5.2
       webpack: ^5.72.0
@@ -75,7 +75,7 @@ importers:
       '@iconify/react': 3.2.2_react@17.0.2
       antd: 4.22.8_sfoxds7t5ydpegc3knd667wn6m
       lodash: 4.17.21
-      react-fastify-form: 1.0.9_react@17.0.2
+      react-fastify-form: 1.0.10_react@17.0.2
       str2int: 1.1.0
     devDependencies:
       '@babel/core': 7.18.13
@@ -19923,8 +19923,8 @@ packages:
   /react-fast-compare/3.2.0:
     resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==}
 
-  /react-fastify-form/1.0.9_react@17.0.2:
-    resolution: {integrity: sha512-hZ1gEgDfUBFeVkuYW8b21FWW2Hmhabh1QoDvEwrZlRrgpxxQ7wYUWxDZtILRlwMcaLCmhs5ZDSrlDSoat+qqAg==}
+  /react-fastify-form/1.0.10_react@17.0.2:
+    resolution: {integrity: sha512-eEInsE5SJg6pbPaaeqgcFFydy6CPgSv/D3IqxGOp52oSPGSpYrW9RhI4W9RBDlO+LVtJBqcWWz3loBLkuLvIEQ==}
     peerDependencies:
       react: ^16.14.0
     dependencies: