feat: backend entrypoint

src/components/alert-info/block.tsx

@@ -1,4 +1,8 @@
-import { WarningFilled } from '@ant-design/icons';
+import {
+  CheckCircleFilled,
+  LoadingOutlined,
+  WarningFilled
+} from '@ant-design/icons';
 import { Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
@@ -122,6 +126,17 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
     overlayScrollerProps = {}
   } = props;
   const { styles } = useStyles();
+
+  const renderIcon = () => {
+    if (type === 'transition') {
+      return <LoadingOutlined />;
+    }
+    if (type === 'success') {
+      return <CheckCircleFilled />;
+    }
+    return <WarningFilled />;
+  };
+
   return (
     <>
       {message ? (
@@ -139,7 +154,7 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
           >
             <div className={classNames('title', type)}>
               <span className={classNames('info-icon', type)}>
-                {icon ?? <WarningFilled />}
+                {icon ?? renderIcon()}
               </span>
             </div>
             {title && (

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

@@ -102,7 +102,7 @@ const SealTextArea: React.FC<InputTextareaProps & SealFormItemProps> = (
     <InputWrapper>
       <Wrapper
         status={status}
-        label={<LabelWrapper>{label}</LabelWrapper>}
+        label={label && <LabelWrapper>{label}</LabelWrapper>}
         isFocus={alwaysFocus || isFocus}
         required={required}
         description={description}

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

@@ -0,0 +1,75 @@
+import { Switch, Tooltip } from 'antd';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import LabelInfo from '../seal-form/components/label-info';
+
+const SwitchContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+  border: 1px solid var(--ant-color-border);
+  border-radius: var(--ant-border-radius);
+  padding: 12px 14px;
+  min-height: 54px;
+`;
+
+const LabelContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+interface SwitchInputProps {
+  label?: React.ReactNode;
+  description?: string;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  alwaysShowChildren?: boolean;
+  btnTips?: React.ReactNode;
+  size?: 'small' | 'default';
+}
+
+const SwitchInput: React.FC<SwitchInputProps> = (props) => {
+  const {
+    label,
+    description,
+    checked,
+    defaultChecked,
+    onChange,
+    children,
+    style,
+    alwaysShowChildren = true,
+    size,
+    btnTips
+  } = props;
+  const [internalChecked, setInternalChecked] = useState<boolean>(
+    defaultChecked || false
+  );
+
+  const handleChange = (checked: boolean) => {
+    setInternalChecked(checked);
+    onChange?.(checked);
+  };
+
+  return (
+    <SwitchContainer style={style}>
+      <LabelContainer>
+        <LabelInfo label={label} description={description} />
+        <Tooltip title={btnTips}>
+          <Switch
+            size={size}
+            checked={checked !== undefined ? checked : internalChecked}
+            onChange={handleChange}
+          />
+        </Tooltip>
+      </LabelContainer>
+      {(alwaysShowChildren || internalChecked) && children}
+    </SwitchContainer>
+  );
+};
+
+export default SwitchInput;