v0.1.0-alpha.7

v0.1.0-alpha.7

.github/workflows/publish.yml

@@ -50,7 +50,7 @@ jobs:
           TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
         with:
           tagName: v__VERSION__
-          releaseName: "Alley v__VERSION__"
+          releaseName: "v__VERSION__"
           releaseBody: "See the assets to download this version and install."
           releaseDraft: true
           prerelease: false

README.md

@@ -33,15 +33,13 @@
 
 选择接收模式后会出现一个二维码，使用手机扫描二维码会通过默认浏览器打开一个页面，同时 PC 端的页面也会变化。
 
-| PC 端扫描前                                 | 手机端                                         | PC 端扫描后                                   |
-| ------------------------------------------- | ---------------------------------------------- | --------------------------------------------- |
-| ![output](./docs/images/receive-qrcode.png) | ![output](./docs/images/mobile-send-index.jpg) | ![output](./docs/images/pc-receive-empty.png) |
-
 在手机上点击页面最下面的的`选择文件`按钮即可上传多个文件，同时 PC 端也能看到收取文件的进度。
 
-| 手机端上传                                    | PC端接收                                  |
-| --------------------------------------------- | ----------------------------------------- |
-| ![output](./docs/images/mobile-uploading.png) | ![output](./docs/images/pc-receiving.png) |
+> 点击图片可查看大图。
+
+| PC 端扫描前                                 | 手机端                                         | PC 端扫描后                                   | 手机上传                                      | PC端接收                                  |
+| ------------------------------------------- | ---------------------------------------------- | --------------------------------------------- | --------------------------------------------- | ----------------------------------------- |
+| ![output](./docs/images/receive-qrcode.png) | ![output](./docs/images/mobile-send-index.jpg) | ![output](./docs/images/pc-receive-empty.png) | ![output](./docs/images/mobile-uploading.png) | ![output](./docs/images/pc-receiving.png) |
 
 所有平台的 PC 端接收到的文件默认保存路径均为`~/Downloads/alley`，你可以自行修改保存目录。
 
@@ -51,6 +49,8 @@
 
 _受限于手机操作系统的限制，手机浏览器无法实现批量下载，只能逐个下载。_
 
+> 点击图片可查看大图。
+
 | PC 端待选文件                               | PC 端待发文件列表                     | PC 端发送二维码                          | 手机端接收页                                      |
 | ------------------------------------------- | ------------------------------------- | ---------------------------------------- | ------------------------------------------------- |
 | ![output](./docs/images/wait-selecting.png) | ![output](./docs/images/selected.png) | ![output](./docs/images/send-qrcode.png) | ![output](./docs/images/mobile-download-list.png) |

src-tauri/src/server/mod.rs

@@ -86,14 +86,16 @@ struct Task<'a> {
     name: &'a str,
     percent: f64,
     speed: f64, // MB/s
+    size: &'a str,
 }
 
 impl<'a> Task<'a> {
-    fn new(name: &'a str, percent: f64, speed: f64) -> Self {
+    fn new(name: &'a str, size: &'a str, percent: f64, speed: f64) -> Self {
         Self {
             name,
             percent,
             speed,
+            size,
         }
     }
 }
@@ -287,6 +289,8 @@ async fn upload(req: &mut Request) -> Result<()> {
 
     let start = Instant::now();
 
+    let formatted_size = format_file_size(size);
+
     let body = req.take_body();
     let stream = ReadProgressStream::new(
         body,
@@ -304,7 +308,10 @@ async fn upload(req: &mut Request) -> Result<()> {
                 let speed = progress / cost_senconds;
 
                 if let Some(w) = MAIN_WINDOW.get() {
-                    let _ = w.emit(UPLOAD_EVENT, Task::new(&name, percent, speed));
+                    let _ = w.emit(
+                        UPLOAD_EVENT,
+                        Task::new(&name, &formatted_size, percent, speed),
+                    );
                 }
             }
         }),

src/App.scss

@@ -15,22 +15,3 @@
   justify-content: center;
   align-items: center;
 }
-
-.header {
-  .directory-button-label {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .directory-button {
-    max-width: 100%;
-    padding-left: 0;
-
-    span {
-      max-width: 100%;
-      overflow-wrap: break-word;
-      white-space: normal;
-    }
-  }
-}

src/App.tsx

@@ -1,8 +1,8 @@
-import { Button, Space } from "antd";
-import "./App.scss";
 import { useState } from "react";
-import Receive from "./pages/receive";
-import Send from "./pages/send";
+import { Button, Space } from "antd";
+import { suspense } from "~/advance/index";
+import { LazyReceive, LazySend } from "~/lazy";
+import "~/App.scss";
 
 enum Mode {
   Send,
@@ -12,7 +12,7 @@ enum Mode {
 const App = () => {
   const [mode, setMode] = useState<Mode | null>(null);
 
-  console.log(mode);
+  const toHome = () => setMode(null);
 
   if (mode === null)
     return (
@@ -28,8 +28,10 @@ const App = () => {
         </Space>
       </div>
     );
-  else if (mode === Mode.Receive) return <Receive />;
-  else return <Send />;
+  else
+    return mode === Mode.Send
+      ? suspense(<LazySend toHome={toHome} />)
+      : suspense(<LazyReceive toHome={toHome} />);
 };
 
 export default App;

src/advance/index.tsx

@@ -0,0 +1,6 @@
+import React, { Suspense } from "react";
+import Loading from "~/components/loading";
+
+export const suspense = (component: React.ReactNode) => (
+  <Suspense fallback={<Loading />}>{component}</Suspense>
+);

src/components/floatButtons.tsx

@@ -0,0 +1,29 @@
+import { HomeOutlined, ClearOutlined } from "@ant-design/icons";
+import { FloatButton } from "antd";
+
+interface HomeButtonProps {
+  onClick: () => void;
+  clear?: () => void;
+}
+
+const HomeButton = ({ onClick, clear }: HomeButtonProps) => {
+  const homeBtn = (
+    <FloatButton tooltip="回到首页" icon={<HomeOutlined />} onClick={onClick} />
+  );
+
+  if (!clear) return homeBtn;
+
+  return (
+    <FloatButton.Group>
+      <FloatButton
+        icon={<ClearOutlined />}
+        tooltip="清空文件列表"
+        onClick={clear}
+      />
+
+      {homeBtn}
+    </FloatButton.Group>
+  );
+};
+
+export default HomeButton;

src/components/loading.tsx

@@ -0,0 +1,20 @@
+import { Spin } from "antd";
+
+const Loading = () => {
+  return (
+    <div
+      style={{
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Spin />
+    </div>
+  );
+};
+
+export default Loading;

src/lazy.ts

@@ -0,0 +1,10 @@
+import { lazy } from "react";
+
+export const LazyFloatButtons = lazy(() => import("~/components/floatButtons"));
+
+export const LazySend = lazy(() => import("~/pages/send"));
+export const LazySendFileList = lazy(() => import("~/pages/send/list"));
+
+export const LazyReceive = lazy(() => import("~/pages/receive"));
+export const LazyReceiveHeader = lazy(() => import("~/pages/receive/header"));
+export const LazyReceiveQrCode = lazy(() => import("~/pages/receive/qrcode"));

src/pages/receive/fileListItem.tsx

@@ -0,0 +1,37 @@
+import { Col, Progress, Row } from "antd";
+
+interface FileListItemProps {
+  name: string;
+  percent: number;
+  speed?: number;
+  size: string;
+}
+
+const FileListItem = ({ name, percent, speed, size }: FileListItemProps) => (
+  <li className="receive-file-list-item">
+    <div
+      style={{
+        textAlign: "left",
+        fontSize: "0.8rem",
+        color: percent < 100 ? "#959595" : "var(--ant-color-text-base)",
+      }}
+    >
+      <Row gutter={10}>
+        <Col span={speed ? 12 : 18}>
+          <h4 className="filename">{name}</h4>
+        </Col>
+
+        {speed ? (
+          <Col span={6} className="speed">{`${speed.toFixed(1)} MB/s`}</Col>
+        ) : null}
+
+        <Col span={6} className="filesize">
+          {size}
+        </Col>
+      </Row>
+    </div>
+    <Progress percent={percent} />
+  </li>
+);
+
+export default FileListItem;

src/pages/receive/header.tsx

@@ -0,0 +1,80 @@
+import { useState, useEffect } from "react";
+import { Row, Col, Dropdown, Button } from "antd";
+import type { MenuProps } from "antd";
+import { open as pick } from "@tauri-apps/api/dialog";
+import { open } from "@tauri-apps/api/shell";
+import { changeDownloadsDir, getDownloadsDir } from "~/api";
+import Loading from "~/components/loading";
+
+const Header = () => {
+  const [downloadDir, setDownloadDir] = useState<string | undefined>(undefined);
+  const [openDropDown, setOpenDropDown] = useState(false);
+
+  useEffect(() => {
+    if (downloadDir) return;
+
+    getDownloadsDir().then((d) => setDownloadDir(d));
+  }, []);
+
+  const pickDirectory = async () => {
+    const dir = (await pick({
+      directory: true,
+      defaultPath: downloadDir,
+      multiple: false,
+    })) as string | null;
+
+    if (!dir) return;
+
+    await changeDownloadsDir(dir);
+
+    setDownloadDir(dir);
+  };
+
+  const DirectoryDropdownItems: MenuProps["items"] = [
+    {
+      key: "1",
+      label: <a>打开</a>,
+      onClick: () => open(downloadDir!),
+    },
+    {
+      key: "2",
+      label: <a>修改</a>,
+      onClick: () => pickDirectory(),
+    },
+  ];
+
+  if (!downloadDir) return <Loading />;
+
+  return (
+    <Row className="header">
+      <Col span={6} className="directory-button-label">
+        <span style={{ fontSize: "0.8rem" }}>保存目录：</span>
+      </Col>
+
+      <Col span={18}>
+        <Dropdown
+          open={openDropDown}
+          onOpenChange={() => setOpenDropDown((pre) => !pre)}
+          menu={{ items: DirectoryDropdownItems }}
+          placement="bottomRight"
+          arrow
+          overlayStyle={{ minWidth: 0 }}
+        >
+          <Button
+            className="directory-button"
+            type="link"
+            onClick={async () => {
+              setOpenDropDown(false);
+              open(downloadDir);
+            }}
+            style={{ textOverflow: "ellipsis" }}
+          >
+            {downloadDir}
+          </Button>
+        </Dropdown>
+      </Col>
+    </Row>
+  );
+};
+
+export default Header;

src/pages/receive/index.scss

@@ -1,3 +1,52 @@
+.header {
+  width: 100vw;
+
+  .directory-button-label {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+  }
+
+  .directory-button {
+    max-width: 100%;
+    padding-left: 0;
+
+    span {
+      max-width: 100%;
+      overflow-wrap: break-word;
+      white-space: normal;
+    }
+  }
+}
+
+.receive-file-list {
+  flex-grow: 14;
+  overflow-y: auto;
+  max-width: 100vw;
+  margin: 10px;
+  padding: 10px;
+  border: 1px #666 dashed;
+  border-radius: 10px;
+
+  &-item {
+    max-width: 100vw;
+
+    .filename {
+      white-space: normal;
+      word-break: break-all;
+    }
+
+    .speed,
+    .filesize {
+      text-align: right;
+    }
+
+    .ant-progress-line {
+      margin-inline-end: 0;
+    }
+  }
+}
+
 .send-button {
   white-space: normal;
   word-wrap: normal;