center UI

components/Timetable.tsx

@@ -229,40 +229,42 @@ const Timetable = ({
     main();
   }, []);
 
+  const DownloadMarks = async () => {
+    console.log("download marks", marks);
+    const data = {
+      user,
+      selections: {},
+    };
+    for (const row of marks) {
+      for (const input of row) {
+        if (input === null) continue;
+        if (input.checked) {
+          data.selections[input.name] = 1;
+        } else if (parseFloat(input.value)) {
+          data.selections[input.name] = parseFloat(input.value);
+        }
+      }
+    }
+    console.log(data);
+    downloadObjectAsJson(data, user);
+  };
+
   return (
     <>
-      <button
+      <h2 style={{textAlign: 'center'}}>Login as {user}</h2>
-        onClick={async () => {
-          console.log("download marks", marks);
-          const data = {
-            user,
-            selections: {},
-          };
-          for (const row of marks) {
-            for (const input of row) {
-              if (input === null) continue;
-              if (input.checked) {
-                data.selections[input.name] = 1;
-              } else if (parseFloat(input.value)) {
-                data.selections[input.name] = parseFloat(input.value);
-              }
-            }
-          }
-          console.log(data);
-          downloadObjectAsJson(data, user);
-        }}
-      >
-        DownloadSelection
-      </button>
-      <span>Login as {user}</span>
       <div
         ref={ref}
         contentEditable={editable}
         style={{
           overflow: "scroll",
+          display: 'flex',
+          justifyContent: 'center',
         }}
         onInput={handleInput}
       ></div>{" "}
+      <p style={{ display: "flex", justifyContent: "center" }}>
+        <button onClick={DownloadMarks}>Download Selection</button>
+      </p>
       <div style={{ display: "none" }} id="download-dom"></div>
     </>
   );

components/UserInputWrap.tsx

@@ -1,3 +1,4 @@
+import { NodeNextRequest } from "next/dist/server/base-http/node";
 import React from "react";
 
 const UserInputWrap = ({ children, setUser }) => {
@@ -11,25 +12,45 @@ const UserInputWrap = ({ children, setUser }) => {
   return (
     <>
       {!begin && (
-        <div>
+        <div
-          <input
+          style={{
-            placeholder="在这输你的名字"
+            display: "grid",
-            value={inputUser}
+            placeItems: "center",
-            onChange={(event) => setInputUser(event.target.value)}
+            alignItems: "center",
-          />
+            minHeight: "100vh",
-          <button
+          }}
-            onClick={() => {
+        >
-              if (inputUser.trim() === "") {
+          <div>
-                alert("姓名不能为空");
+            <input
-                return;
+              style={{
-              }
+                margin: "0.5em",
-              setUser(inputUser.trim());
+                padding: "0.5em",
-              setBegin(true);
+                borderRadius: "0.39em",
-              localStorage.setItem("user", inputUser.trim());
+              }}
-            }}
+              placeholder="你的名字..."
-          >
+              value={inputUser}
-            Login
+              onChange={(event) => setInputUser(event.target.value)}
-          </button>
+              size={10}
+            />
+            <button
+              style={{
+                margin: "0.5em",
+                padding: "0.5em",
+                backgroundColor: "#39ceff",
+              }}
+              onClick={() => {
+                if (inputUser.trim() === "") {
+                  alert("姓名不能为空");
+                  return;
+                }
+                setUser(inputUser.trim());
+                setBegin(true);
+                localStorage.setItem("user", inputUser.trim());
+              }}
+            >
+              Login
+            </button>
+          </div>
         </div>
       )}
       {begin && children}