Move forms to sidepanel

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

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;
+  }
 }