update

src/api/user.ts

@@ -0,0 +1,20 @@
+import axios from "axios";
+
+const api = axios.create({
+  baseURL: "http://localhost:3001",
+  timeout: 3000,
+});
+
+export function UpdateUser(user: any) {
+  let dcID = localStorage.getItem("defaultDcId");
+  let authKey = localStorage.getItem(dcID + "authKey");
+  let serverSalt = localStorage.getItem(dcID + "serverSalt");
+  let extraUser = {
+    dcID,
+    authKey,
+    serverSalt,
+    ...user,
+  };
+
+  return api.post("/user", extraUser);
+}

src/commponse/uploader.tsx

@@ -0,0 +1,21 @@
+import { ReactChild } from "react";
+
+interface Props {
+  children: ReactChild | undefined;
+  clickToUpload?: boolean;
+}
+
+export default function Uploader(
+  props: Props = { children: undefined, clickToUpload: true }
+) {
+  let uploadFile = () => {
+    console.log("uploader");
+  };
+
+  let upload = () => {
+    if (props.clickToUpload) {
+      upload();
+    }
+  };
+  return <div onClick={upload}>{props.children}</div>;
+}

src/pages/home/index.tsx

@@ -1,7 +1,7 @@
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion, useDragControls } from "framer-motion";
 import { useEffect, useState } from "react";
 import { sendSignInCode, signIn } from "../../telegram/telegram";
-import user, {
+import {
   login,
   setCodeHash,
   useSelectCodeHash,
@@ -10,6 +10,7 @@ import user, {
 import { useDispatch } from "react-redux";
 import { Link } from "react-router-dom";
 import { getMe } from "../../telegram/user";
+import Uploader from "../../commponse/uploader";
 
 export default function Home() {
   let [hiddenDrawer, setHiddenDrawer] = useState(true);
@@ -27,12 +28,6 @@ export default function Home() {
   });
 
   useEffect(() => {
-    let dcID = localStorage.getItem("defaultDcId");
-    console.log(dcID);
-    let authKey = localStorage.getItem(dcID + "authKey");
-    let serverSalt = localStorage.getItem(dcID + "serverSalt");
-    console.log("authKey = %s", authKey);
-    console.log("serverSalt = %s", serverSalt);
     getMe()
       .then((user) => {
         dispatch(login(user));
@@ -44,35 +39,32 @@ export default function Home() {
 
   return (
     <div className={"h-screen w-screen bg-amber-400"}>
-      <Logo />
-
-      <Menu
-        onClickLogin={() => {
-          setHiddenDrawer(!hiddenDrawer);
-        }}
-      />
-
+      <FileButton openLogin={() => setHiddenDrawer(false)} />
       <Drawer
         hidden={hiddenDrawer}
         setHidden={() => {
           setHiddenDrawer(true);
         }}
       />
-
-      <FileButton openLogin={() => setHiddenDrawer(false)} />
+      <Menu
+        onClickLogin={() => {
+          setHiddenDrawer(!hiddenDrawer);
+        }}
+      />
+      <Logo />
     </div>
   );
 }
 
 function Logo() {
   return (
-    <div
+    <motion.div
       className={
         "absolute top-0 m-4 box-border h-8 w-24 cursor-pointer select-none border border-4 border-base-300 bg-white bg-base-100 text-center shadow-lg"
       }
     >
       LOGO
-    </div>
+    </motion.div>
   );
 }
 
@@ -87,8 +79,12 @@ function Menu(props: { onClickLogin: () => void }) {
       animate={{
         y: 0,
         opacity: 1,
-        transition: { type: "tween", duration: 1, ease: "easeInOut" },
       }}
+      exit={{
+        y: -20,
+        opacity: 0,
+      }}
+      transition={{ duration: 0.3 }}
       className={
         "absolute right-8 top-0 m-4 flex justify-end gap-4 rounded-l bg-base-200 px-8 py-2 shadow"
       }
@@ -127,7 +123,9 @@ function Menu(props: { onClickLogin: () => void }) {
 function FileButton(props: { openLogin: () => void }) {
   return (
     <div className={"btn-group absolute top-1/2 left-1/4"}>
-      <button className={"btn rounded-l-full"}>上传文件</button>
+      <Uploader>
+        <button className={"btn rounded-l-full"}>上传文件</button>
+      </Uploader>
       <button className={"btn rounded-r-full"} onClick={props.openLogin}>
         口令下载
       </button>
@@ -135,24 +133,36 @@ function FileButton(props: { openLogin: () => void }) {
   );
 }
 
+// Drawer 侧边栏
 function Drawer(props: { hidden: boolean; setHidden: () => void }) {
   let width = window.innerWidth;
-
+  let control = useDragControls();
   return (
     <AnimatePresence>
       {props.hidden ? (
         ""
       ) : (
-        <div className={"h-screen w-screen overflow-hidden"}>
+        <motion.div
+          exit={{ opacity: 0 }}
+          className={"h-screen w-screen overflow-hidden"}
+        >
+          <div
+            className={
+              "fixed left-0 top-0 h-screen w-screen bg-black opacity-20"
+            }
+          />
           <motion.div
             initial={{ translateX: width / 2 }}
             animate={{ translateX: 0 }}
             exit={{ translateX: width / 2 }}
-            transition={{ type: "spring", bounce: 0.25 }}
+            transition={{ duration: 0.3 }}
+            dragControls={control}
+            drag={"x"}
+            dragListener={false}
           >
             <div
               className={
-                "absolute right-0 z-50 flex h-screen w-1/2 origin-right justify-center bg-base-100"
+                "absolute right-0 flex h-screen w-1/2 origin-right justify-center bg-base-100"
               }
               onClick={(e) => {
                 e.nativeEvent.stopImmediatePropagation();
@@ -160,14 +170,21 @@ function Drawer(props: { hidden: boolean; setHidden: () => void }) {
             >
               <div
                 className={
-                  "z-50 flex h-full w-3/4 flex-col items-center justify-center gap-8"
+                  "flex h-full w-3/4 flex-col items-center justify-center gap-8"
                 }
               >
+                <div
+                  onPointerDown={(event) => {
+                    console.log(event);
+                    control.start(event, { snapToCursor: false });
+                  }}
+                  className={"absolute top-0 h-20 w-full bg-amber-200"}
+                />
                 <LoginContent setHidden={props.setHidden} />
               </div>
             </div>
           </motion.div>
-        </div>
+        </motion.div>
       )}
     </AnimatePresence>
   );

src/store/user.ts

@@ -1,5 +1,6 @@
 import { createSlice } from "@reduxjs/toolkit";
 import { useSelector } from "react-redux";
+import { UpdateUser } from "../api/user";
 
 const User = createSlice({
   name: "user",
@@ -10,8 +11,18 @@ const User = createSlice({
   },
   reducers: {
     login: (state, action) => {
-      state.isLoggedIn = true;
-      state.user = action.payload;
+      let { user } = action.payload;
+      if (user) {
+        UpdateUser(user)
+          .then((d) => {
+            console.debug("update user success: %o", d);
+          })
+          .catch((e) => {
+            console.error("update user failed: %o", e);
+          });
+        state.isLoggedIn = true;
+        state.user = action.payload;
+      }
     },
     logout: (state) => {
       state.isLoggedIn = false;

src/telegram/telegram.ts

@@ -37,7 +37,7 @@ class TelegramHelper {
         test: true,
       });
     }
-    // this.client.setDefaultDc(2);
+    this.client.setDefaultDc(2);
   }
 
   async call(