Move forms to sidepanel

表单组件迁移到 SidePanel
原 Popup 引导打开 SidePanel
优化表单组件和 Hooks，获取 Form 组件 Ref

components/ui/form/index.tsx

@@ -1,4 +1,4 @@
-import type { FormHTMLAttributes } from "react";
+import { useImperativeHandle, type FormHTMLAttributes, useRef, forwardRef, type Ref } from "react";
 import { clsn } from "~utils";
 import styles from "./form.module.less";
 
@@ -6,12 +6,18 @@ interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
 
 }
 
-function Form({ children, className, ...props }: FormProps) {
+function Form({ children, className, ...props }: FormProps, ref: Ref<HTMLFormElement>) {
+  const formRef = useRef();
+
+  useImperativeHandle(ref, () => {
+    return formRef.current;
+  }, []);
+
   return (
-    <form className={clsn(styles.form, className)} {...props}>
+    <form ref={formRef} className={clsn(styles.form, className)} {...props}>
       {children}
     </form>
   );
 }
 
-export default Form;
+export default forwardRef(Form);

components/ui/tab/index.tsx

@@ -35,4 +35,12 @@ Tab.Body = function Body({ children }: PropsWithChildren) {
   );
 }
 
+Tab.Footer = function Footer({ children }: PropsWithChildren) {
+  return (
+    <footer className={styles.footer}>
+      {children}
+    </footer>
+  );
+}
+
 export default Tab;

components/ui/tab/tab.module.less

@@ -1,7 +1,14 @@
 .tab {
+  .header, .footer {
+    left: 0;
+    right: 0;
+    padding: .75em 1em;
+    position: sticky;
+    background-color: #fff;
+  }
+
   .header {
-    padding: .75em;
-    position: relative;
+    top: 0;
     text-align: center;
     border-bottom: 1px solid #eee;
 
@@ -27,4 +34,12 @@
   .body {
     padding: 1em;
   }
+
+  .footer {
+    bottom: 0;
+    border-top: 1px solid #eee;
+
+    display: flex;
+    align-items: flex-end;
+  }
 }