0.1.4

0.1.4

package.json

@@ -1,7 +1,7 @@
 {
   "name": "alley",
   "private": true,
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "scripts": {
     "install:all": "pnpm i && cd static && pnpm i",

src/lazy.ts

@@ -48,6 +48,12 @@ export const LazySwitch = lazy(
 export const LazySpace = lazy(
   () => import("alley-components/lib/components/space"),
 );
+export const LazyTypographyText = lazy(
+  () => import("alley-components/lib/components/typography/text"),
+);
+export const LazyToast = lazy(
+  () => import("alley-components/lib/components/toast"),
+);
 export const LazyQrcode = lazy(() => import("~/components/qrcode"));
 
 export const LazySend = lazy(() => import("~/pages/send"));

src/pages/receive/fileListItem.tsx

@@ -1,3 +1,4 @@
+import { Show } from "solid-js";
 import { open } from "@tauri-apps/api/shell";
 import { AiFillCheckCircle } from "solid-icons/ai";
 import fileType from "./fileType";
@@ -7,6 +8,7 @@ import {
   LazyProgress,
   LazySpace,
   LazyTooltip,
+  LazyTypographyText,
 } from "~/lazy";
 
 interface FileListItemProps {
@@ -29,9 +31,17 @@ const FileListItem = (props: FileListItemProps) => {
           {props.index !== undefined ? (
             <span class="label">{props.index + 1}.</span>
           ) : null}
-          <LazyTooltip text="单击使用默认程序打开此文件" placement="top">
-            <LazyLink onClick={() => open(props.path)}>{props.name}</LazyLink>
-          </LazyTooltip>
+
+          <Show
+            when={props.percent === 100}
+            fallback={
+              <LazyTypographyText disabled>{props.name}</LazyTypographyText>
+            }
+          >
+            <LazyTooltip text="单击使用默认程序打开此文件" placement="top">
+              <LazyLink onClick={() => open(props.path)}>{props.name}</LazyLink>
+            </LazyTooltip>
+          </Show>
         </span>
       }
       description={

src/pages/receive/header.tsx

@@ -4,7 +4,7 @@ import { createEffect, createSignal, onMount } from "solid-js";
 import { changeDownloadsDir, getDownloadsDir, isLinux } from "~/api";
 import type { MenuItemProps } from "alley-components/lib/components/dropdown";
 import Loading from "alley-components/lib/components/spinner";
-import { LazyCol, LazyDropdown, LazyLink, LazyRow } from "~/lazy";
+import { LazyCol, LazyDropdown, LazyLink, LazyRow, LazyTooltip } from "~/lazy";
 
 const baseClassName = "receive-header";
 
@@ -57,27 +57,39 @@ const Header = () => {
 
   return (
     <LazyRow class={baseClassName}>
-      <LazyCol span={5} class={`${baseClassName}-label`} align="center">
+      <LazyCol
+        span={4}
+        class={`${baseClassName}-label`}
+        align="center"
+        justify="center"
+      >
         <LazyDropdown
           open={openDropDown()}
           menu={dropdownItems}
           top={dropdownTop()}
           left={18}
         >
-          <span class={`${baseClassName}-label-text`}>保存目录：</span>
+          <span class={`${baseClassName}-label-text`}>保存目录</span>
         </LazyDropdown>
       </LazyCol>
 
-      <LazyCol span={14} class={`${baseClassName}-directory-entry`}>
-        <LazyLink
-          onClick={async () => {
-            setOpenDropDown(false);
-            open(downloadDir()!);
-          }}
-          wrap
-        >
-          {downloadDir()!}
-        </LazyLink>
+      <LazyCol
+        span={15}
+        class={`${baseClassName}-directory-entry`}
+        align="center"
+        justify="center"
+      >
+        <LazyTooltip text="单击在文件管理器中打开" placement="bottom">
+          <LazyLink
+            onClick={async () => {
+              setOpenDropDown(false);
+              open(downloadDir()!);
+            }}
+            wrap
+          >
+            {downloadDir()!}
+          </LazyLink>
+        </LazyTooltip>
       </LazyCol>
     </LazyRow>
   );

src/pages/receive/index.scss

@@ -2,36 +2,13 @@
   margin-top: 10px;
   width: 100vw;
   padding-bottom: 5px;
+  padding-left: 8px;
   box-shadow: 3px 16px 2px -15px rgba(0, 0, 0, 0.22);
 
   &-label {
-    display: flex !important;
-    justify-content: right;
-    align-items: center;
-
     &-text {
       font-size: 0.8rem;
-      color: var(--color-weak);
-      font-weight: bold;
-    }
-  }
-
-  &-directory-entry {
-    max-width: 100%;
-    padding-left: 0;
-    display: flex !important;
-    justify-content: start;
-    align-items: center;
-    cursor: pointer;
-
-    >div {
-      display: flex;
-    }
-
-    span {
-      max-width: 100%;
-      overflow-wrap: break-word;
-      white-space: normal;
+      color: var(--alley-color-weak);
     }
   }
 }
@@ -73,12 +50,12 @@
 
       .label {
         font-weight: normal;
-        font-size: var(--font-size-4);
+        font-size: var(--alley-font-size-sm);
         margin-right: 4px;
         color: var(--color-weak);
         text-shadow:
-          0.1px 0.1px 0.1px var(--color-weak),
-          -0.1px -0.1px 0.1px var(--color-light);
+          0.1px 0.1px 0.1px var(--alley-color-weak),
+          -0.1px -0.1px 0.1px var(--alley-color-light);
       }
     }
 
@@ -89,9 +66,9 @@
     }
 
     .done {
-      color: var(--color-success);
+      color: var(--alley-color-success);
       margin-right: 10px;
-      font-size: var(--font-size-8);
+      font-size: var(--alley-font-size-8);
     }
   }
 }

src/pages/receive/index.tsx

@@ -5,9 +5,9 @@ import {
   createSignal,
   onCleanup,
   onMount,
+  Show,
 } from "solid-js";
 import { appWindow } from "@tauri-apps/api/window";
-import { OrderedSet } from "~/utils";
 import { getUploadQrCode, getQrCodeState } from "~/api";
 import FileListItem from "./fileListItem";
 import "./index.scss";
@@ -18,8 +18,13 @@ import {
   LazyFlex,
   LazyEmpty,
   LazyQrcode,
+  LazyList,
+  LazyFloatButtonGroup,
+  LazyToast,
 } from "~/lazy";
 import { TbHome } from "solid-icons/tb";
+import { createStore } from "solid-js/store";
+import { AiFillDelete } from "solid-icons/ai";
 
 interface ReceiveProps {
   toHome: () => void;
@@ -28,15 +33,11 @@ interface ReceiveProps {
 const Receive = ({ toHome }: ReceiveProps) => {
   const [qrcode, setQrcode] = createSignal<QrCode | null>(null);
 
-  const [taskList, setTaskList] = createSignal<OrderedSet<TaskMessage>>(
-    new OrderedSet("name"),
-  );
-  const [fileList, setFileList] = createSignal<Omit<TaskMessage, "speed">[]>(
-    [],
-  );
+  const [taskList, setTaskList] = createStore<TaskMessage[]>([]);
+  const [fileList, setFileList] = createStore<Omit<TaskMessage, "speed">[]>([]);
 
   onMount(() => {
-    if (qrcode() || !taskList().empty() || fileList().length) return;
+    if (qrcode() || taskList.length || fileList.length) return;
 
     getUploadQrCode().then((c) => setQrcode(c));
   });
@@ -45,24 +46,30 @@ const Receive = ({ toHome }: ReceiveProps) => {
     const unlisten = appWindow.listen<TaskMessage>("upload://progress", (e) => {
       if (qrcode()) setQrcode(null);
 
-      setTaskList((pre) => pre.push(e.payload));
-
-      const { path, name, percent, aborted } = e.payload;
+      const { path, percent, aborted } = e.payload;
+
+      const taskIndex = taskList.findIndex((prev) => prev.path === path);
+      if (taskIndex === -1) {
+        setTaskList(taskList.length, e.payload);
+      } else {
+        setTaskList(taskIndex, (item) => ({
+          ...item,
+          percent: e.payload.percent,
+          speed: e.payload.speed,
+        }));
+      }
 
       if (aborted) {
-        setFileList((pre) => pre.filter((i) => i.path !== path));
-        setTaskList((pre) => pre.remove(e.payload));
+        setFileList((prev) => prev.filter((i) => i.path !== path));
+        setTaskList((prev) => prev.filter((i) => i.path !== path));
         return;
       }
 
       if (percent === 100) {
-        setTaskList((pre) => pre.remove(e.payload));
-
-        setFileList((pre) => {
-          const t = pre.find((v) => v.name === name);
+        setTaskList((prev) => prev.filter((i) => i.path !== path));
 
-          return t ? pre : [...pre, e.payload];
-        });
+        const doneIndex = fileList.findIndex((prev) => prev.path === path);
+        if (doneIndex === -1) setFileList(fileList.length, e.payload);
       }
     });
 
@@ -87,27 +94,45 @@ const Receive = ({ toHome }: ReceiveProps) => {
     onCleanup(() => clearTimeout(timer));
   });
 
-  const homeButton = () =>
+  const floatButtons = () =>
     suspense(
-      <LazyFloatButton
-        tooltip="回到主页"
-        icon={<TbHome />}
-        onClick={() => {
-          setTaskList(new OrderedSet<TaskMessage>("name"));
-          setFileList([]);
-          toHome();
-        }}
-      />,
+      <LazyFloatButtonGroup>
+        <Show when={fileList.length}>
+          <LazyFloatButton
+            tooltip="清空已完成列表"
+            icon={<AiFillDelete />}
+            onClick={() => setFileList([])}
+            danger
+          />
+        </Show>
+
+        <LazyFloatButton
+          tooltip="回到主页"
+          icon={<TbHome />}
+          onClick={() => {
+            setTaskList([]);
+            setFileList([]);
+            toHome();
+          }}
+        />
+      </LazyFloatButtonGroup>,
     );
 
   return (
     <Switch>
       <Match when={qrcode() !== null}>
         <LazyQrcode qrcode={qrcode()!} />
 
-        {homeButton()}
+        <LazyToast
+          placement="top"
+          open={true}
+          message="请使用手机扫描此二维码"
+          onClose={() => {}}
+        />
+
+        {floatButtons()}
       </Match>
-      <Match when={taskList().empty() && !fileList().length}>
+      <Match when={!taskList.length && !fileList.length}>
         <LazyFlex
           direction="vertical"
           align="center"
@@ -124,38 +149,42 @@ const Receive = ({ toHome }: ReceiveProps) => {
           </LazyFlex>
         </LazyFlex>
 
-        {homeButton()}
+        {floatButtons()}
       </Match>
-      <Match
-        when={qrcode() === null && (!taskList().empty() || fileList().length)}
-      >
+      <Match when={qrcode() === null && (taskList.length || fileList.length)}>
         <LazyFlex direction="vertical" style={{ height: "100vh" }}>
           {suspense(<LazyReceiveHeader />)}
 
           <ul class="receive-file-list">
-            {fileList().map((t, i) => (
-              <FileListItem
-                index={i}
-                name={t.name}
-                percent={100}
-                size={t.size}
-                path={t.path}
-              />
-            ))}
-
-            {taskList().map((task) => (
-              <FileListItem
-                path={task.path}
-                name={task.name}
-                percent={Math.round(task.percent)}
-                speed={task.speed}
-                size={task.size}
-              />
-            ))}
+            <LazyList
+              dataSource={fileList}
+              renderItem={(item, index) => (
+                <FileListItem
+                  index={index}
+                  name={item.name}
+                  percent={100}
+                  size={item.size}
+                  path={item.path}
+                />
+              )}
+            />
+
+            <LazyList
+              dataSource={taskList}
+              renderItem={(item) => (
+                <FileListItem
+                  path={item.path}
+                  name={item.name}
+                  percent={Math.round(item.percent)}
+                  speed={item.speed}
+                  size={item.size}
+                />
+              )}
+            />
           </ul>
         </LazyFlex>
 
-        {homeButton()}
+        {floatButtons()}
       </Match>
     </Switch>
   );