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;

sidepanel/sidepanel.module.less

@@ -0,0 +1,33 @@
+.root {
+  color: #333;
+  font-size: 14px;
+
+  .nav {
+    display: flex;
+    text-align: center;
+    border-bottom: 1px solid #eee;
+
+    a {
+      flex: 1;
+      cursor: pointer;
+      position: relative;
+      padding: .75em 1em;
+
+      &.active {
+        color: #28b9be;
+
+        &::after {
+          margin-top: .25em;
+          position: absolute;
+          left: calc(50% - .25em);
+
+          content: "";
+          width: .75em;
+          height: 2px;
+          display: block;
+          background-color: currentColor;
+        }
+      }
+    }
+  }
+}