update

src/App.tsx

@@ -1,26 +0,0 @@
-import React, { useEffect, useState } from "react";
-import "./App.css";
-import {
-  Button,
-  Container,
-  Input,
-  InputAdornment,
-  Paper,
-  TextField,
-} from "@mui/material";
-import CountriesInput, { Country } from "./component/signin/countriesInput";
-import Telegram, {
-  inputFile,
-  uploadBigFile,
-  sendFile,
-  downloadFile,
-} from "./telegram/telegram";
-import SendIcon from "@mui/icons-material/Send";
-import { User } from "./user";
-import { Download, Upload } from "@mui/icons-material";
-
-function App() {
-  return <div>App</div>;
-}
-
-export default App;

src/component/homeButton/index.tsx

@@ -0,0 +1,83 @@
+import style from "./style.module.css";
+import { useEffect, useState } from "react";
+import { Close } from "@mui/icons-material";
+import { IconButton } from "@mui/material";
+
+enum Status {
+  normal,
+  addFile,
+  receive,
+}
+
+export function HomeButton() {
+  let [status, setStatus] = useState(Status.normal);
+  let [boxStyle, setBoxStyle] = useState([style.box]);
+  let [isReceive, setIsReceive] = useState(false);
+  let onNormal = () => {
+    setStatus(Status.normal);
+  };
+  let onAddFile = () => {
+    setStatus(Status.addFile);
+  };
+  let onReceive = () => {
+    setStatus(Status.receive);
+  };
+
+  useEffect(() => {
+    switch (status) {
+      case Status.normal:
+        setBoxStyle([style.box]);
+        break;
+      case Status.addFile:
+        setBoxStyle([style.box, style.boxActivePlus]);
+        break;
+      case Status.receive:
+        setBoxStyle([style.box, style.boxActiveReceive]);
+        break;
+    }
+  }, [status]);
+
+  return (
+    <div className={boxStyle.join(" ")}>
+      {!isReceive ? (
+        <>
+          <div className={style.plus}>➕</div>
+          <div
+            className={style.addFile}
+            onMouseEnter={onAddFile}
+            onMouseLeave={onNormal}
+          >
+            添加文件
+          </div>
+          <button
+            className={style.receive}
+            onMouseEnter={onReceive}
+            onMouseLeave={onNormal}
+            onClick={() => {
+              setIsReceive(true);
+            }}
+          >
+            接收文件
+          </button>
+        </>
+      ) : (
+        <>
+          <input
+            placeholder={"输入6位传输口令获取文件"}
+            style={{}}
+            className={isReceive ? style.receiveInput : style.receiveInputNone}
+          />
+          <IconButton
+            className={style.receiveInputClose}
+            aria-label="delete"
+            onClick={() => {
+              setIsReceive(false);
+            }}
+          >
+            <Close />
+          </IconButton>
+        </>
+      )}
+    </div>
+  );
+}

src/component/homeButton/style.module.css

@@ -0,0 +1,99 @@
+body {
+  /*background-color: yellow;*/
+}
+
+.box {
+  width: 400px;
+  height: 80px;
+  border-radius: 50px;
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  box-shadow: 0 0 15px #a7a7a7;
+  transition: 0.5s;
+  color: #252525;
+}
+
+.boxActivePlus {
+  transform: translateX(-20px);
+}
+
+.boxActiveReceive {
+  transform: translateX(20px);
+}
+
+.plus {
+  font-size: 40px;
+  margin-left: 30px;
+  height: 100px;
+  text-align: center;
+  line-height: 100px;
+  cursor: pointer;
+}
+
+.addFile {
+  font-size: 24px;
+  padding-left: 30px;
+  margin-right: 140px;
+  font-weight: bold;
+  flex-grow: 1;
+  cursor: pointer;
+}
+
+.receive {
+  position: absolute;
+  height: 60px;
+  width: 120px;
+  right: 10px;
+  font-size: 18px;
+  color: black;
+  border-radius: 35px;
+  border: 0;
+  background-color: #f2f2f2;
+}
+
+.receive:hover {
+  background-color: #fdda65;
+  cursor: pointer;
+}
+
+.receiveInput {
+  position: absolute;
+  width: 348px;
+  height: 48px;
+  background-color: white;
+  font-size: 18px;
+  color: #252525;
+  border-radius: 35px;
+  margin: 0 0 0 10px;
+  padding: 0 0 0 20px;
+  line-height: 60px;
+  outline: none;
+  border: #f1f1f1 solid 6px;
+  transition: 0.3s;
+  -webkit-user-drag: none;
+  right: 10px;
+}
+
+.receiveInputNone {
+  width: 120px;
+  transition: 0.3s;
+}
+
+.receiveInput:hover {
+  border: #fdda65 solid 6px;
+}
+
+.receiveInput:active {
+  border: 0;
+}
+
+.receiveInput::selection {
+  background-color: #ffd95a;
+}
+
+.receiveInputClose {
+  position: absolute;
+  right: 20px;
+}

src/component/homeMenu/index.tsx

@@ -0,0 +1,23 @@
+import { Button } from "@mui/material";
+import style from "./style.module.css";
+
+interface Props {
+  isSignIn: boolean;
+  onOpenSignIn: () => void;
+  className?: string;
+}
+
+export function HomeMenu(props: Props) {
+  return (
+    <div className={props.className}>
+      <Button className={style.text}>定价</Button>
+      {props.isSignIn ? (
+        <Button className={style.text}>文件列表</Button>
+      ) : (
+        <Button className={style.text} onClick={props.onOpenSignIn}>
+          注册 / 登录
+        </Button>
+      )}
+    </div>
+  );
+}

src/component/homeMenu/style.module.css

@@ -0,0 +1,3 @@
+.text {
+  color: #252525;
+}

src/component/homeSignIn/index.tsx

@@ -0,0 +1,60 @@
+import { Button, Paper, TextField } from "@mui/material";
+import style from "./style.module.css";
+import CountriesInput, { Country } from "../signin/countriesInput";
+import { useState } from "react";
+
+export function HomeSignIn() {
+  let [country, setCountry] = useState({} as Country | null);
+
+  return (
+    <Paper
+      elevation={0}
+      sx={{
+        width: "400px",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        border: "1px solid #e0e0e0",
+        padding: "50px 0",
+      }}
+    >
+      <h1 className={style.h1}>登录 / 注册</h1>
+      <div className={style.describe}>可通过登录码验证或二维码注册/登录</div>
+      <div className={style.signInInput}>
+        <CountriesInput
+          onChange={(value) => {
+            setCountry(value);
+          }}
+        />
+        <TextField
+          label="Phone Number"
+          className={style.phone}
+          variant="standard"
+          placeholder={"手机号码"}
+        />
+      </div>
+      <Button
+        size={"large"}
+        style={{ alignSelf: "flex-end", marginRight: "50px" }}
+        variant="contained"
+      >
+        下一步
+      </Button>
+
+      <div className={style.explain}>
+        <h1 className={style.h1}>重要说明</h1>
+        <div className={style.explainContent}>
+          本服务基于Telegram官方文件上传API，符合
+          Telegram用户协议和隐私政策。但请您不要滥
+          用此服务，以避免账号被telegram封禁或导致 服务不可使用。
+        </div>
+      </div>
+
+      <div className={style.describe}>
+        未注册账号自动创建为新账号
+        <br /> 登录注册均视为已同意 用户协议 和 隐私政策。
+      </div>
+    </Paper>
+  );
+}

src/component/homeSignIn/style.module.css

@@ -0,0 +1,38 @@
+.h1 {
+  font-size: 36px;
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+}
+
+.describe {
+  color: #a7a7a7;
+  font-size: 14px;
+  text-align: center;
+}
+
+.signInInput {
+  display: flex;
+  flex-direction: row;
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+
+.phone {
+  /*margin-left: 50px;*/
+}
+
+.explain {
+  margin: 30px 0;
+  padding: 30px 0;
+  width: 100%;
+  text-align: center;
+  background-color: #f7f7f7;
+}
+
+.explainContent {
+  padding: 20px;
+  font-size: 14px;
+  text-align: left;
+  letter-spacing: 2px;
+}

src/component/signin/countriesInput.tsx

@@ -52,7 +52,7 @@ function CountriesInput(props: {
         // names must be equal
         return 0;
       })}
-      sx={{ width: 300 }}
+      sx={{ width: 200 }}
       onChange={(_event, value) => {
         props.onChange(value as Country);
       }}

src/component/signin/index.tsx

@@ -127,6 +127,7 @@ function SignIn() {
         flexDirection: "column",
         justifyContent: "space-around",
         height: "40%",
+        width: "40%",
       }}
     >
       <CountriesInput

src/index.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import Dashboard from "./pages/dashboard";
 import { BrowserRouter, Routes, Route } from "react-router-dom";

src/pages/home/index.tsx

@@ -1,13 +1,19 @@
 import { useEffect, useState } from "react";
 import { getMe } from "../../telegram/user";
-import SignIn from "component/signin";
+import { HomeButton } from "../../component/homeButton";
+import style from "./style.module.css";
+import { Box, Drawer } from "@mui/material";
+import { HomeMenu } from "../../component/homeMenu";
+import { HomeSignIn } from "../../component/homeSignIn";
 
 function Home() {
   let [isSignIn, setIsSignIn] = useState(false);
+  let [isOpenSignIn, setIsOpenSignIn] = useState(false);
 
   useEffect(function () {
     getMe()
       .then(function (user) {
+        // 已登录
         setIsSignIn(true);
       })
       .catch(function (error) {
@@ -19,8 +25,36 @@ function Home() {
   }, []);
 
   return (
-    <div>
-      <div>{!isSignIn ? <SignIn /> : <div>Home</div>}</div>
+    <div className={style.box}>
+      <div className={style.homeButton}>
+        <HomeButton />
+      </div>
+
+      <HomeMenu
+        className={style.homeMenu}
+        isSignIn={isSignIn}
+        onOpenSignIn={() => {
+          setIsOpenSignIn(true);
+        }}
+      />
+
+      <Drawer
+        anchor={"right"}
+        open={isOpenSignIn && !isSignIn}
+        onClose={() => {
+          setIsOpenSignIn(false);
+        }}
+        ModalProps={{
+          keepMounted: true,
+        }}
+        transitionDuration={500}
+      >
+        <Box sx={{ width: "600px", height: "100%" }}>
+          <div className={style.homeSignIn}>
+            <HomeSignIn />
+          </div>
+        </Box>
+      </Drawer>
     </div>
   );
 }

src/pages/home/style.module.css

@@ -0,0 +1,27 @@
+.homeButton {
+  position: absolute;
+  top: 50%;
+  left: 88px;
+}
+
+.homeSignIn {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.homeMenu {
+  position: absolute;
+  right: 0;
+  margin-top: 20px;
+  margin-right: 50px;
+  padding: 10px 20px;
+  background-color: white;
+  color: black;
+}
+
+body {
+  background-color: #eae4de;
+}

src/telegram/telegram.ts

@@ -8,7 +8,7 @@ class TelegramHelper {
     this.client = new Client({
       api_id: appID,
       api_hash: appHash,
-      test: false,
+      test: true,
     });
     this.client.setDefaultDc(1);
   }