update

2022-03-14 03:58:22 +08:00 · 2022-03-14 03:58:22 +08:00 · 8fbdeba60d
parent 4fba4f2b27
commit 8fbdeba60d
5 changed files with 136 additions and 23 deletions
--- a/index.html
+++ b/index.html
@ -1,13 +1,13 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fileset</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -11,6 +11,7 @@
    "@reduxjs/toolkit": "^1.8.0",
    "autoprefixer": "^10.4.2",
    "axios": "^0.26.1",
+    "daisyui": "^2.6.4",
    "filesize": "^8.0.7",
    "mtproton": "^6.0.0",
    "postcss": "^8.4.8",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -9,6 +9,7 @@ specifiers:
  '@vitejs/plugin-react': ^1.2.0
  autoprefixer: ^10.4.2
  axios: ^0.26.1
+  daisyui: ^2.6.4
  filesize: ^8.0.7
  mtproton: ^6.0.0
  postcss: ^8.4.8
@ -27,6 +28,7 @@ dependencies:
  '@reduxjs/toolkit': 1.8.0_react-redux@7.2.6+react@17.0.2
  autoprefixer: 10.4.2_postcss@8.4.8
  axios: 0.26.1
+  daisyui: 2.6.4_554c024960c0d85659bdf1e5e950b7f7
  filesize: 8.0.7
  mtproton: 6.0.0
  postcss: 8.4.8
@ -639,6 +641,21 @@ packages:
    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
    dev: false

+  /color-string/1.9.0:
+    resolution: {integrity: sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==}
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+    dev: false
+
+  /color/4.2.1:
+    resolution: {integrity: sha512-MFJr0uY4RvTQUKvPq7dh9grVOTYSFeXja2mBXioCGjnjJoXrAp9jJ1NQTDR73c9nwBSAQiNKloKl5zq9WB9UPw==}
+    engines: {node: '>=12.5.0'}
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.0
+    dev: false
+
  /configstore/5.0.1:
    resolution: {integrity: sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==}
    engines: {node: '>=8'}
@ -673,6 +690,13 @@ packages:
    engines: {node: '>=8'}
    dev: false

+  /css-selector-tokenizer/0.8.0:
+    resolution: {integrity: sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==}
+    dependencies:
+      cssesc: 3.0.0
+      fastparse: 1.1.2
+    dev: false
+
  /cssesc/3.0.0:
    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
    engines: {node: '>=4'}
@ -682,6 +706,22 @@ packages:
  /csstype/3.0.11:
    resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}

+  /daisyui/2.6.4_554c024960c0d85659bdf1e5e950b7f7:
+    resolution: {integrity: sha512-3l7WHgpOTdyUBVu2TD6uZH4+IbwaBnPXdoWjjvmzT6hxR5+WUHMl4vvPP+7/VB+CcoxSB296qaYWXQcoWcbISw==}
+    peerDependencies:
+      autoprefixer: ^10.0.2
+      postcss: ^8.1.6
+    dependencies:
+      autoprefixer: 10.4.2_postcss@8.4.8
+      color: 4.2.1
+      css-selector-tokenizer: 0.8.0
+      postcss: 8.4.8
+      postcss-js: 4.0.0_postcss@8.4.8
+      tailwindcss: 3.0.23_autoprefixer@10.4.2
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
  /debug/4.3.3:
    resolution: {integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==}
    engines: {node: '>=6.0'}
@ -967,6 +1007,10 @@ packages:
      micromatch: 4.0.4
    dev: false

+  /fastparse/1.1.2:
+    resolution: {integrity: sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==}
+    dev: false
+
  /fastq/1.13.0:
    resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==}
    dependencies:
@ -1085,6 +1129,10 @@ packages:
    resolution: {integrity: sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=}
    dev: false

+  /is-arrayish/0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+    dev: false
+
  /is-binary-path/2.1.0:
    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
    engines: {node: '>=8'}
@ -1518,6 +1566,12 @@ packages:
    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
    dev: false

+  /simple-swizzle/0.2.2:
+    resolution: {integrity: sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=}
+    dependencies:
+      is-arrayish: 0.3.2
+    dev: false
+
  /source-map-js/1.0.2:
    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
    engines: {node: '>=0.10.0'}
--- a/src/index.css
+++ b/src/index.css
@ -3,5 +3,5 @@
@tailwind utilities;

 body {
-  background-color: #eae4de;
+  letter-spacing: 0.1rem;
 }
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@ -1,9 +1,25 @@
+import { useState } from "react";
+
 export default function Home() {
+  let [hiddenDrawer, setHiddenDrawer] = useState(true);
  return (
-    <div className={"grid grid-cols-2 grid-rows-2"}>
+    <div className={""}>
      <Logo />

-      <Menu />
+      <Menu
+        onClickLogin={() => {
+          setHiddenDrawer(!hiddenDrawer);
+        }}
+      />
+
+      <Drawer
+        hidden={hiddenDrawer}
+        setHidden={() => {
+          setHiddenDrawer(true);
+        }}
+      />
+
+      <FileButton openLogin={() => setHiddenDrawer(false)} />
    </div>
  );
 }
@ -12,7 +28,7 @@ function Logo() {
  return (
    <div
      className={
-        "m-4 box-border w-16 cursor-pointer select-none border border-4 border-red-900 bg-white text-center shadow-lg"
+        "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
@ -20,27 +36,69 @@ function Logo() {
  );
 }

-function Menu() {
+function Menu(props: { onClickLogin: () => void }) {
  return (
-    <div
+    <ul
      className={
-        "top-2 right-2 flex origin-center items-center justify-end gap-2 pr-5 align-middle underline underline-offset-2"
+        "absolute right-8 top-0 m-4 flex justify-end gap-4 rounded-xl bg-base-200 px-12 py-4 shadow"
      }
    >
-      <div className={"cursor-pointer bg-green-300"}>定价</div>
-      <div className={"cursor-pointer bg-green-300"}>注册/登录</div>
-      <input type="date" className="mt-1 block w-full" />
-      <select className="form-select px-4 py-3">
-        <optgroup label={"xxx"}>
-          <title>xxx</title>
-          <option>中文</option>
-          <option>英文</option>
-        </optgroup>
-        <optgroup label={"www"}>
-          <option>中文</option>
-          <option>英文</option>
-        </optgroup>
-      </select>
+      <li
+        className={"cursor-pointer select-none text-base hover:text-base-300"}
+      >
+        定价
+      </li>
+      <li
+        className={"cursor-pointer select-none text-base hover:text-base-300"}
+        onClick={props.onClickLogin}
+      >
+        注册/登录
+      </li>
+    </ul>
+  );
+}
+
+function FileButton(props: { openLogin: () => void }) {
+  return (
+    <div className={"btn-group absolute top-1/2 left-1/4"}>
+      <button className={"btn"}>上传文件</button>
+      <button className={"btn"} onClick={props.openLogin}>
+        口令下载
+      </button>
+    </div>
+  );
+}
+
+function Drawer(props: { hidden: boolean; setHidden: () => void }) {
+  return props.hidden ? (
+    <></>
+  ) : (
+    <div className={"absolute right-0 z-0 h-screen w-screen transition-all"}>
+      <div
+        className={"absolute z-40 h-screen w-screen bg-gray-400 opacity-60"}
+        onClick={() => {
+          console.log("hidden");
+          props.setHidden();
+        }}
+      ></div>
+      <div
+        className={
+          "absolute right-0 z-50 h-screen w-1/3 origin-right animate-fade-in-down bg-base-100"
+        }
+      >
+        <div className={"container mt-20 flex items-center justify-center"}>
+          <LoginContent />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LoginContent() {
+  return (
+    <div className={"flex bg-base-100"}>
+      <label className={"label mr-5 text-base-content"}>手机号</label>
+      <input className={"input input-primary"} />
    </div>
  );
 }