chore: preview field use switch

src/components/seal-form/config/components.ts

@@ -2,6 +2,7 @@ import { Checkbox } from 'antd';
 import SealInput from '../seal-input';
 import SealSelect from '../seal-select';
 import Slider from '../seal-slider';
+import Switch from '../seal-switch';
 
 const components: {
   InputNumber: typeof SealInput.Number;
@@ -10,13 +11,15 @@ const components: {
   TextArea: typeof SealInput.TextArea;
   Input: typeof SealInput.Input;
   Checkbox: typeof Checkbox;
+  Switch: typeof Switch;
 } = {
   InputNumber: SealInput.Number,
   Select: SealSelect,
   Slider: Slider as React.ComponentType<typeof Slider>,
   TextArea: SealInput.TextArea,
   Input: SealInput.Input,
-  Checkbox: Checkbox
+  Checkbox: Checkbox,
+  Switch: Switch
 };
 
 export default components;

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

@@ -0,0 +1,71 @@
+import { Form, Switch, type SwitchProps } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+import LabelInfo from './components/label-info';
+import Wrapper from './wrapper';
+
+const Inner = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-inline: 14px;
+  .ant-switch {
+    margin-top: 0 !important;
+  }
+`;
+
+interface SealSwitchProps extends SwitchProps {
+  required?: boolean;
+  label?: React.ReactNode;
+  labelWidth?: number | string;
+  description?: string;
+  isInFormItems?: boolean;
+  checkStatus?: 'success' | 'error' | 'warning' | '';
+}
+
+const SealSlider: React.FC<SealSwitchProps> = (props) => {
+  const {
+    label,
+    value,
+    required,
+    description,
+    isInFormItems = true,
+    defaultValue,
+    checkStatus,
+    labelWidth,
+    ...rest
+  } = props;
+
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
+
+  const handleChange = (value: boolean, event: any) => {
+    props.onChange?.(value, event);
+  };
+
+  return (
+    <Wrapper
+      required={required}
+      status={checkStatus || status}
+      className="no-focus"
+    >
+      <Inner>
+        <LabelInfo label={label} description={description}></LabelInfo>
+        <Switch
+          {...rest}
+          size="small"
+          defaultValue={defaultValue}
+          style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
+          value={value}
+          onChange={handleChange}
+        ></Switch>
+      </Inner>
+    </Wrapper>
+  );
+};
+
+export default SealSlider;

src/components/seal-form/wrapper/index.tsx

@@ -52,7 +52,7 @@ const WrapperBox = styled.div`
     border-color: var(--ant-input-hover-border-color);
     transition: all 0.2s ease;
   }
-  &:focus-within {
+  &:focus-within:not(.no-focus, .borderless) {
     border-color: var(--ant-input-active-border-color);
     box-shadow: var(--ant-input-active-shadow);
     outline: 0;