Move forms to sidepanel

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

sidepanel/index.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import Read from "~components/biz/read";
+import Toy from "~components/biz/toy";
+import Message from "~components/ui/message";
+import { clsn } from "~utils";
+
+import "~assets/global.less";
+import styles from "./sidepanel.module.less";
+
+const initialType = new URLSearchParams(location.search).get("type") || "read";
+
+const tabItems = [
+  { title: "在读", value: "read" },
+  { title: "手办", value: "toy" },
+  { title: "语录", value: "say" },
+];
+
+function SidePanel() {
+  const [type, setType] = useState(initialType);
+
+  return (
+    <div className={styles.root}>
+      <nav className={styles.nav}>
+        {tabItems.map((item) => (
+          <a className={clsn(type === item.value && styles.active)}
+            onClick={() => setType(item.value)}
+          >
+            {item.title}
+          </a>
+        ))}
+      </nav>
+      {type === "read" && <Read />}
+      {type === "toy" && <Toy />}
+      <Message />
+    </div>
+  );
+}
+
+export default SidePanel;