From b7f45497197276d0e04dbce42654bbab75e33568 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 10 Sep 2022 17:19:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C=E8=A7=A6=E5=8F=91=E6=97=B6=E6=9C=BA=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/WebMetaForm/types/Checkbox.tsx |  2 +-
 .../components/WebMetaForm/types/Password.tsx | 13 +++++--
 .../components/WebMetaForm/types/Select.tsx   |  9 +++--
 .../components/WebMetaForm/types/Text.tsx     | 13 +++++--
 .../components/WebMetaForm/types/TextArea.tsx | 13 +++++--
 client/packages/design/package.json           |  2 +-
 client/web/src/styles/antd/dark.less          | 34 +++++++++++++------
 pnpm-lock.yaml                                |  8 ++---
 8 files changed, 70 insertions(+), 24 deletions(-)

diff --git a/client/packages/design/components/WebMetaForm/types/Checkbox.tsx b/client/packages/design/components/WebMetaForm/types/Checkbox.tsx
index ba7501f3..1fe4470a 100644
--- a/client/packages/design/components/WebMetaForm/types/Checkbox.tsx
+++ b/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';
diff --git a/client/packages/design/components/WebMetaForm/types/Password.tsx b/client/packages/design/components/WebMetaForm/types/Password.tsx
index a169a69a..a8a230e5 100644
--- a/client/packages/design/components/WebMetaForm/types/Password.tsx
+++ b/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>
     );
diff --git a/client/packages/design/components/WebMetaForm/types/Select.tsx b/client/packages/design/components/WebMetaForm/types/Select.tsx
index bed1961c..19bafb29 100644
--- a/client/packages/design/components/WebMetaForm/types/Select.tsx
+++ b/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}
diff --git a/client/packages/design/components/WebMetaForm/types/Text.tsx b/client/packages/design/components/WebMetaForm/types/Text.tsx
index 5d15756d..6fc59fd7 100644
--- a/client/packages/design/components/WebMetaForm/types/Text.tsx
+++ b/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>
     );
diff --git a/client/packages/design/components/WebMetaForm/types/TextArea.tsx b/client/packages/design/components/WebMetaForm/types/TextArea.tsx
index 89493dd1..c852d0b3 100644
--- a/client/packages/design/components/WebMetaForm/types/TextArea.tsx
+++ b/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>
     );
diff --git a/client/packages/design/package.json b/client/packages/design/package.json
index 083b79fc..80a4f82e 100644
--- a/client/packages/design/package.json
+++ b/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": {
diff --git a/client/web/src/styles/antd/dark.less b/client/web/src/styles/antd/dark.less
index e65d38d3..f5df598b 100644
--- a/client/web/src/styles/antd/dark.less
+++ b/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);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9423f079..18f40714 100644
--- a/pnpm-lock.yaml
+++ b/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: