Merge pull request #293 from caorushizi/fix-list-style

fix: 🐛 fix list style
caorushizi · Sep 28, 2024 · fc4ee51 · fc4ee51
2 parents 751e659 + f3caa54
commit fc4ee51
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 110 deletions.
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
   "type": "module",
   "scripts": {
     "dev": "tsx scripts/dev.ts && pnpm --parallel -F \"./packages/*\" run dev",
+    "dev:web": "pnpm -F backend run mysql && pnpm --parallel -F \"./packages/*\" run start",
     "build": "tsx scripts/build.ts",
     "build:plugin": "pnpm -F plugin run build",
     "build:main": "pnpm -F main run build",

diff --git a/packages/main/src/services/VideoService.ts b/packages/main/src/services/VideoService.ts
@@ -69,8 +69,14 @@ export class VideoService {
     });
 
     // 直接使用Koa的listen方法启动服务器
-    app.listen(this.port, "0.0.0.0", () => {
-      this.logger.info("Server is running on http://localhost:3222");
-    });
+    app
+      .listen(this.port, "0.0.0.0", () => {
+        this.logger.info("Server is running on http://localhost:3222");
+      })
+      .on("error", (err) => {
+        this.logger.error(
+          `Server failed to start on http://localhost:3222, error: ${err}`,
+        );
+      });
   }
 }
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
@@ -6,6 +6,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "start": "cross-env APP_TARGET=web vite --port 8557",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "report": "vite-bundle-visualizer",
@@ -54,6 +55,7 @@
     "@types/sort-by": "^1.2.3",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "autoprefixer": "^10.4.19",
+    "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",

diff --git a/packages/renderer/src/App.tsx b/packages/renderer/src/App.tsx
@@ -8,7 +8,7 @@ import zhCN from "antd/locale/zh_CN";
 import useElectron from "./hooks/electron";
 import Loading from "./components/Loading";
 import { DownloadFilter } from "./types";
-import { tdApp } from "./utils";
+import { isWeb, tdApp } from "./utils";
 import { useAsyncEffect } from "ahooks";
 import { ThemeContext } from "./context/ThemeContext";
 import { SessionStore, useSessionStore } from "./store/session";
@@ -47,6 +47,8 @@ const App: FC = () => {
     }
   };
 
+  console.log("App", isWeb);
+
   // 监听store变化
   const onAppStoreChange = (event: any, store: AppStore) => {
     dispatch(setAppStore(store));

diff --git a/packages/renderer/src/layout/AppSideBar.tsx b/packages/renderer/src/layout/AppSideBar.tsx
@@ -5,7 +5,7 @@ import useElectron from "../hooks/electron";
 import { useDispatch, useSelector } from "react-redux";
 import { selectAppStore, setAppStore, clearCount, selectCount } from "../store";
 import { useTranslation } from "react-i18next";
-import { cn } from "@/utils";
+import { cn, isWeb } from "@/utils";
 import {
   ConverterIcon,
   DoneIcon,
@@ -103,7 +103,7 @@ export function AppSideBar({ className }: Props) {
     await showBrowserWindow();
   };
 
-  const items: MenuItem[] = [
+  const items1: MenuItem[] = [
     {
       label: (
         <AppMenuItem
@@ -178,6 +178,9 @@ export function AppSideBar({ className }: Props) {
       key: "settings",
     },
   ];
+  const items = items1.filter((i) =>
+    isWeb ? i.key !== "source" && i.key !== "converter" : true,
+  );
 
   const finalItems = items.filter((item) =>
     appStore.openInNewWindow ? item?.key !== "source" : true,

diff --git a/packages/renderer/src/pages/Converter/index.tsx b/packages/renderer/src/pages/Converter/index.tsx
@@ -99,13 +99,13 @@ const Converter = () => {
       className="rounded-lg bg-white dark:bg-[#1F2024]"
     >
       {contextHolder}
-      <div className="p-3">
+      <div className="flex flex-col gap-3 rounded-lg bg-white p-3 dark:bg-[#1F2024]">
         {data && data.list.length ? (
           data.list.map((item) => {
             return (
               <div
                 key={item.id}
-                className="flex flex-col gap-3 rounded-lg bg-[#FAFCFF] p-3 dark:bg-[#27292F]"
+                className="flex flex-1 flex-col gap-3 rounded-lg bg-[#FAFCFF] p-3 dark:bg-[#27292F]"
               >
                 <div className="flex flex-row items-center justify-between">
                   <div className="text-sm text-[#343434] dark:text-[#B4B4B4]">

diff --git a/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx b/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx
@@ -174,6 +174,19 @@ export function DownloadItem({
   };
 
   const renderTitle = (item: VideoStat): ReactNode => {
+    return (
+      <div
+        className={cn("truncate text-sm dark:text-[#B4B4B4]", {
+          "text-[#127af3]": selected,
+        })}
+        title={item.name}
+      >
+        {item.name}
+      </div>
+    );
+  };
+
+  const handleRenderTag = useMemoizedFn(() => {
     let tag = null;
     if (item.status === DownloadStatus.Downloading) {
       tag = (
@@ -225,23 +238,15 @@ export function DownloadItem({
         />
       );
     }
-
     return (
-      <div className="flex flex-row gap-2">
-        <div
-          className={cn("text-sm dark:text-[#B4B4B4]", {
-            "text-[#127af3]": selected,
-          })}
-        >
-          {item.name}
-        </div>
+      <div className="flex flex-shrink-0 flex-grow flex-row gap-2">
         {item.isLive && (
           <DownloadTag text={t("liveResource")} color="#9abbe2" />
         )}
         {tag}
       </div>
     );
-  };
+  });
 
   const renderDescription = (item: DownloadItem): ReactNode => {
     if (progress) {
@@ -258,10 +263,10 @@ export function DownloadItem({
     }
     return (
       <div
-        className="relative flex flex-col gap-1 truncate text-xs text-[#B3B3B3] dark:text-[#515257]"
+        className="relative flex flex-col gap-1 text-xs text-[#B3B3B3] dark:text-[#515257]"
         title={item.url}
       >
-        <div>{item.url}</div>
+        <div className="truncate">{item.url}</div>
         {item.status === DownloadStatus.Failed && (
           <TerminalDrawer
             asChild
@@ -303,8 +308,9 @@ export function DownloadItem({
             className="absolute bottom-0 right-[126px] top-0 block h-full select-none"
           />
         )}
-        <div className="relative flex flex-row items-center justify-between">
+        <div className="relative flex flex-row items-center gap-2">
           {renderTitle(item)}
+          {handleRenderTag()}
           <div className="flex flex-row items-center gap-3 rounded-md bg-[#eff4fa] px-1.5 py-1.5 dark:bg-[#3B3F48]">
             {renderActionButtons(item)}
           </div>