feat: login page

src/components/form-buttons/index.tsx

@@ -1,20 +1,27 @@
 import { Button, Space } from 'antd';
 
 type FormButtonsProps = {
-  onOk: () => void;
-  onCancel: () => void;
+  onOk?: () => void;
+  onCancel?: () => void;
   cancelText?: string;
   okText?: string;
+  htmlType?: 'submit' | 'button';
 };
 const FormButtons: React.FC<FormButtonsProps> = ({
   onOk,
   onCancel,
   cancelText,
-  okText
+  okText,
+  htmlType = 'button'
 }) => {
   return (
     <Space size={40} style={{ marginTop: '80px' }}>
-      <Button type="primary" onClick={onOk} style={{ width: '120px' }}>
+      <Button
+        type="primary"
+        onClick={onOk}
+        style={{ width: '120px' }}
+        htmlType={htmlType}
+      >
         {okText || '保存'}
       </Button>
       <Button onClick={onCancel} style={{ width: '98px' }}>

src/components/seal-form/components/wrapper.less

@@ -1,6 +1,7 @@
 :local(.wrapper) {
   @wrapheight: 54px;
   @inputheight: 32px;
+  @borderRadius: 24px;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -9,7 +10,7 @@
   border-width: var(--ant-line-width);
   border-style: var(--ant-line-type);
   border-color: var(--ant-color-border);
-  border-radius: 28px;
+  border-radius: @borderRadius;
   padding-inline: 12px;
   padding-block: 20px 0;
 
@@ -121,6 +122,13 @@
     height: @inputheight !important;
   }
   :global(.ant-input-outlined) {
+    display: flex;
+    align-items: center;
+    border: none;
+    box-shadow: none;
+    padding-block: 5px;
+    padding-inline: 12px;
+    height: @inputheight !important;
     &.seal-textarea {
       min-height: 100px !important;
     }
@@ -138,7 +146,7 @@
   }
   :global(.ant-input-group-addon) {
     inset-inline-start: unset !important;
-    border-radius: 0 28px 28px 0;
+    border-radius: 0 @borderRadius @borderRadius 0;
     width: 30px;
     background-color: transparent;
   }
@@ -155,7 +163,7 @@
     position: absolute;
     top: -20px;
     right: -11px;
-    border-radius: 0 28px 28px 0 !important;
+    border-radius: 0 @borderRadius @borderRadius 0 !important;
     overflow: hidden;
     border: none;
     height: 52px;
@@ -170,4 +178,9 @@
   :global(.ant-input-group-addon) {
     border: none;
   }
+  :global(.ant-input-prefix) {
+    position: absolute;
+    top: 1px;
+    left: -4px;
+  }
 }

src/components/seal-form/input-number.tsx

@@ -20,7 +20,9 @@ const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
 
   const handleClickWrapper = () => {
     if (!props.disabled && !isFocus) {
-      inputRef.current?.focus?.();
+      inputRef.current?.focus?.({
+        cursor: 'all'
+      });
       setIsFocus(true);
     }
   };

src/components/seal-form/password.tsx

@@ -18,7 +18,9 @@ const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
 
   const handleClickWrapper = () => {
     if (!props.disabled && !isFocus) {
-      inputRef.current?.focus?.();
+      inputRef.current?.focus?.({
+        cursor: 'all'
+      });
       setIsFocus(true);
     }
   };

src/components/seal-form/seal-input.tsx

@@ -33,7 +33,9 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
 
   const handleClickWrapper = useCallback(() => {
     if (!props.disabled && !isFocus) {
-      inputRef.current?.focus?.();
+      inputRef.current?.focus?.({
+        cursor: 'all'
+      });
       setIsFocus(true);
     }
   }, [props.disabled, isFocus]);
@@ -109,7 +111,9 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
 
   const handleClickWrapper = () => {
     if (!props.disabled && !isFocus) {
-      inputRef.current?.focus?.();
+      inputRef.current?.focus?.({
+        cursor: 'all'
+      });
       setIsFocus(true);
     }
   };