Merge pull request #285 from caorushizi/feature

Feature
caorushizi · Sep 26, 2024 · 58f5513 · 58f5513
2 parents aa5886f + bb4ec28
commit 58f5513
Show file tree

Hide file tree

Showing 17 changed files with 257 additions and 119 deletions.
diff --git a/packages/renderer/src/App.tsx b/packages/renderer/src/App.tsx
@@ -13,6 +13,7 @@ import { useAsyncEffect } from "ahooks";
 import { ThemeContext } from "./context/ThemeContext";
 import { SessionStore, useSessionStore } from "./store/session";
 import { useShallow } from "zustand/react/shallow";
+import { DOWNLOAD_FAIL, DOWNLOAD_SUCCESS, PAGE_LOAD } from "./const";
 
 const AppLayout = lazy(() => import("./layout/App"));
 const HomePage = lazy(() => import("./pages/HomePage"));
@@ -71,12 +72,20 @@ const App: FC = () => {
     const checkingForUpdate = () => {
       setUploadChecking(true);
     };
+    const onDownloadSuccess = () => {
+      tdApp.onEvent(DOWNLOAD_SUCCESS);
+    };
+    const onDownloadFailed = () => {
+      tdApp.onEvent(DOWNLOAD_FAIL);
+    };
     addIpcListener("store-change", onAppStoreChange);
     addIpcListener("download-item-notifier", onReceiveDownloadItem);
     addIpcListener("change-privacy", onChangePrivacy);
     addIpcListener("updateAvailable", updateAvailable);
     addIpcListener("updateNotAvailable", updateNotAvailable);
     addIpcListener("checkingForUpdate", checkingForUpdate);
+    addIpcListener("download-success", onDownloadSuccess);
+    addIpcListener("download-failed", onDownloadFailed);
 
     return () => {
       removeIpcListener("store-change", onAppStoreChange);
@@ -85,12 +94,14 @@ const App: FC = () => {
       removeIpcListener("updateAvailable", updateAvailable);
       removeIpcListener("updateNotAvailable", updateNotAvailable);
       removeIpcListener("checkingForUpdate", checkingForUpdate);
+      removeIpcListener("download-success", onDownloadSuccess);
+      removeIpcListener("download-failed", onDownloadFailed);
     };
   }, []);
 
   useAsyncEffect(async () => {
     const deviceId = await getMachineId();
-    tdApp.onEvent("页面加载", { deviceId });
+    tdApp.onEvent(PAGE_LOAD, { deviceId });
   }, []);
 
   useEffect(() => {

diff --git a/packages/renderer/src/assets/svg/FavIcon.tsx b/packages/renderer/src/assets/svg/FavIcon.tsx
@@ -10,18 +10,12 @@ export function FavIcon(props: React.SVGProps<SVGSVGElement>) {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g clipPath="url(#clip0_126_9)">
-        <path
-          d="M18.6508 8.79885L14.1178 12.2394L15.864 17.8376C15.8912 17.9243 15.9063 18.018 15.9063 18.1141C15.9063 18.604 15.5284 19 15.0625 19C14.8776 19 14.7073 18.9368 14.5681 18.8313L10 15.3648L5.43196 18.8312C5.29304 18.9368 5.12234 19 4.93749 19C4.47138 19 4.09373 18.6039 4.09373 18.114C4.09373 18.0179 4.10876 17.9242 4.13598 17.8375L5.88218 12.2394L1.34903 8.79885C1.13752 8.63829 1 8.37697 1 8.08164C1 7.59297 1.37765 7.19686 1.84373 7.19686H7.45543L9.19312 1.62576C9.29915 1.26252 9.6201 1 10 1C10.3799 1 10.7009 1.2625 10.8066 1.62576L12.5446 7.19686H18.1563C18.6224 7.19686 19 7.59297 19 8.08164C19 8.37697 18.8622 8.63829 18.6508 8.79885Z"
-          stroke="#515151"
-          strokeWidth="1.8"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_126_9">
-          <rect width="20" height="20" fill="white" />
-        </clipPath>
-      </defs>
+      <path
+        d="M18.6508 8.79885L14.1178 12.2394L15.864 17.8376C15.8912 17.9243 15.9063 18.018 15.9063 18.1141C15.9063 18.604 15.5284 19 15.0625 19C14.8776 19 14.7073 18.9368 14.5681 18.8313L10 15.3648L5.43196 18.8312C5.29304 18.9368 5.12234 19 4.93749 19C4.47138 19 4.09373 18.6039 4.09373 18.114C4.09373 18.0179 4.10876 17.9242 4.13598 17.8375L5.88218 12.2394L1.34903 8.79885C1.13752 8.63829 1 8.37697 1 8.08164C1 7.59297 1.37765 7.19686 1.84373 7.19686H7.45543L9.19312 1.62576C9.29915 1.26252 9.6201 1 10 1C10.3799 1 10.7009 1.2625 10.8066 1.62576L12.5446 7.19686H18.1563C18.6224 7.19686 19 7.59297 19 8.08164C19 8.37697 18.8622 8.63829 18.6508 8.79885Z"
+        fill="none"
+        strokeWidth="1.8"
+        stroke="#000"
+      />
     </svg>
   );
 }
diff --git a/packages/renderer/src/components/DownloadForm.tsx b/packages/renderer/src/components/DownloadForm.tsx
@@ -7,6 +7,8 @@ import { useShallow } from "zustand/react/shallow";
 import { useMemoizedFn } from "ahooks";
 import { DownloadType } from "@/types";
 import { EpisodeNumber } from "./EpisodeNumber";
+import { tdApp } from "@/utils";
+import { ADD_TO_LIST, DOWNLOAD_NOW } from "@/const";
 
 export interface DownloadFormType {
   batch?: boolean;
@@ -25,6 +27,7 @@ export interface DownloadFormProps {
   onAddToList: (values: DownloadFormType) => Promise<boolean | void>;
   onDownloadNow: (values: DownloadFormType) => Promise<boolean | void>;
   onFormVisibleChange?: (open: boolean) => void;
+  id: string;
 }
 
 export interface DownloadFormRef {
@@ -52,6 +55,7 @@ export default forwardRef<DownloadFormRef, DownloadFormProps>(
       onDownloadNow,
       usePrevData,
       onFormVisibleChange,
+      id,
     },
     ref,
   ) {
@@ -100,6 +104,7 @@ export default forwardRef<DownloadFormRef, DownloadFormProps>(
         if (close) {
           setModalOpen(false);
         }
+        tdApp.onEvent(ADD_TO_LIST, { id });
       } catch (e: any) {
         console.error(e);
         messageApi.error(e?.message || t("pleaseEnterCorrectFomeInfo"));
@@ -114,6 +119,7 @@ export default forwardRef<DownloadFormRef, DownloadFormProps>(
         if (close) {
           setModalOpen(false);
         }
+        tdApp.onEvent(DOWNLOAD_NOW, { id });
       } catch (e: any) {
         console.error(e);
         messageApi.error(e?.message || t("pleaseEnterCorrectFomeInfo"));

diff --git a/packages/renderer/src/components/DownloadTag.tsx b/packages/renderer/src/components/DownloadTag.tsx
@@ -5,13 +5,20 @@ interface DownloadTagProps {
   icon?: React.ReactNode;
   text: string;
   color: string;
+  className?: string;
 }
 
-export function DownloadTag({ icon, text, color }: DownloadTagProps) {
+export function DownloadTag({
+  icon,
+  text,
+  color,
+  className,
+}: DownloadTagProps) {
   return (
     <div
       className={cn(
-        "flex flex-shrink-0 cursor-default flex-row items-center gap-[3px] rounded-2xl rounded-bl-lg pl-1.5 pr-2",
+        "flex flex-shrink-0 cursor-default flex-row items-center gap-0.5 rounded-2xl rounded-bl-lg py-0.5 pl-1 pr-1.5",
+        className,
       )}
       style={{ background: color }}
     >

diff --git a/packages/renderer/src/const.ts b/packages/renderer/src/const.ts
@@ -0,0 +1,21 @@
+export const CHANGE_PAGE = "CHANGE_PAGE";
+export const CLICK_DOWNLOAD = "CLICK_DOWNLOAD";
+export const PAGE_LOAD = "PAGE_LOAD";
+export const ADD_TO_LIST = "ADD_TO_LIST";
+export const DOWNLOAD_NOW = "DOWNLOAD_NOW";
+export const DOWNLOAD_SUCCESS = "DOWNLOAD_SUCCESS";
+export const DOWNLOAD_FAIL = "DOWNLOAD_FAIL";
+export const EDIT_DOWNLOAD = "EDIT_DOWNLOAD";
+export const STOP_DOWNLOAD = "STOP_DOWNLOAD";
+export const PLAY_VIDEO = "PLAY_VIDEO";
+export const RESTART_DOWNLOAD = "RESTART_DOWNLOAD";
+export const CONTINUE_DOWNLOAD = "CONTINUE_DOWNLOAD";
+
+export const ADD_CONVERT_TASK = "ADD_CONVERT_TASK";
+export const START_CONVERT = "START_CONVERT";
+export const DELETE_CONVERT = "DELETE_CONVERT";
+
+export const ADD_FAVORITE = "ADD_FAVORITE";
+export const OPEN_FAVORITE = "OPEN_FAVORITE";
+export const OPEN_URL = "OPEN_URL";
+export const CHECK_UPDATE = "CHECK_UPDATE";
diff --git a/packages/renderer/src/i18n/index.ts b/packages/renderer/src/i18n/index.ts
@@ -168,6 +168,8 @@ Referer: http://www.example.com`,
           updateNotAvailable: "Update not available",
           closeMainWindow: "Close Main Window",
           minimizeToTray: "Minimize to tray",
+          failReason: "Fail Reason",
+          viewDetails: "View Details",
         },
       },
       zh: {
@@ -322,6 +324,8 @@ Referer: http://www.example.com`,
           updateNotAvailable: "当前已是最新版本",
           closeMainWindow: "关闭主窗口",
           minimizeToTray: "最小化到托盘",
+          failReason: "失败原因",
+          viewDetails: "查看详情",
         },
       },
     },

diff --git a/packages/renderer/src/layout/App.tsx b/packages/renderer/src/layout/App.tsx
@@ -1,21 +1,28 @@
-import React, { FC } from "react";
-import { Outlet } from "react-router-dom";
+import React, { FC, useEffect } from "react";
+import { Outlet, useLocation } from "react-router-dom";
 import useElectron from "../hooks/electron";
 import { useDispatch } from "react-redux";
 import { setAppStore } from "../store";
 import { useAsyncEffect } from "ahooks";
 import { AppHeader } from "./AppHeader";
 import { AppSideBar } from "./AppSideBar";
+import { tdApp } from "@/utils";
+import { CHANGE_PAGE } from "@/const";
 
 const App: FC = () => {
   const { getAppStore: ipcGetAppStore } = useElectron();
   const dispatch = useDispatch();
+  const location = useLocation();
 
   useAsyncEffect(async () => {
     const store = await ipcGetAppStore();
     dispatch(setAppStore(store));
   }, []);
 
+  useEffect(() => {
+    tdApp.onEvent(CHANGE_PAGE, { page: location.pathname });
+  }, [location.pathname]);
+
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
       <AppHeader className="flex-shrink-0" />

diff --git a/packages/renderer/src/layout/AppHeader.tsx b/packages/renderer/src/layout/AppHeader.tsx
@@ -43,8 +43,8 @@ export function AppHeader({ className }: Props) {
           onClick={openHelpUrl}
         >
           <div className="flex flex-row items-center gap-2 rounded-full rounded-br-sm bg-[#F9FBFC] p-2 dark:bg-[#2F3035]">
-            <HelpIcon />
-            <span className="text-xs text-[#137BF4] dark:text-white">
+            <HelpIcon height={18} width={18} />
+            <span className="text-sm text-[#137BF4] dark:text-white">
               {t("help")}
             </span>
           </div>

diff --git a/packages/renderer/src/pages/Converter/index.tsx b/packages/renderer/src/pages/Converter/index.tsx
@@ -1,15 +1,16 @@
 import React, { ReactNode, useState } from "react";
 import PageContainer from "../../components/PageContainer";
 import { useTranslation } from "react-i18next";
-import { Empty, Space, message } from "antd";
+import { Empty, message } from "antd";
 import useElectron from "../../hooks/electron";
-import { usePagination } from "ahooks";
-import { getFileName } from "../../utils";
+import { useMemoizedFn, usePagination } from "ahooks";
+import { getFileName, tdApp } from "../../utils";
 import { Conversion } from "../../../../main/types/entity/Conversion";
 import { DeleteOutlined, SyncOutlined } from "@ant-design/icons";
 import { produce } from "immer";
 import { Button } from "@/components/ui/button";
 import { IconButton } from "@/components/IconButton";
+import { ADD_CONVERT_TASK, DELETE_CONVERT, START_CONVERT } from "@/const";
 
 const Converter = () => {
   const { t } = useTranslation();
@@ -36,11 +37,12 @@ const Converter = () => {
     },
   );
 
-  const onClickConvertToAudio = async (item: Conversion) => {
+  const onClickConvertToAudio = useMemoizedFn(async (item: Conversion) => {
     const nextState = produce((draft) => {
       draft[item.id] = true;
     });
     setConverting(nextState);
+    tdApp.onEvent(START_CONVERT);
     try {
       await convertToAudio(item.id);
       messageApi.success(t("convertSuccess"));
@@ -52,12 +54,13 @@ const Converter = () => {
       });
       setConverting(nextState);
     }
-  };
+  });
 
-  const onDeleteConversion = async (id: number) => {
+  const onDeleteConversion = useMemoizedFn(async (id: number) => {
+    tdApp.onEvent(DELETE_CONVERT);
     await deleteConversion(id);
     refresh();
-  };
+  });
 
   const renderActionButtons = (dom: ReactNode, item: Conversion): ReactNode => {
     // 下载成功
@@ -79,25 +82,20 @@ const Converter = () => {
     ];
   };
 
+  const handleSelectFile = useMemoizedFn(async () => {
+    const file = await selectFile();
+    await addConversion({
+      name: getFileName(file),
+      path: file,
+    });
+    refresh();
+    tdApp.onEvent(ADD_CONVERT_TASK);
+  });
+
   return (
     <PageContainer
       title={t("converter")}
-      rightExtra={
-        <Space>
-          <Button
-            onClick={async () => {
-              const file = await selectFile();
-              await addConversion({
-                name: getFileName(file),
-                path: file,
-              });
-              refresh();
-            }}
-          >
-            {t("addFile")}
-          </Button>
-        </Space>
-      }
+      rightExtra={<Button onClick={handleSelectFile}>{t("addFile")}</Button>}
       className="rounded-lg bg-white dark:bg-[#1F2024]"
     >
       {contextHolder}
@@ -122,9 +120,7 @@ const Converter = () => {
             );
           })
         ) : (
-          <>
-            <Empty />
-          </>
+          <Empty />
         )}
       </div>
     </PageContainer>