Merge pull request #16 from jayzcoder/dev

修复 & 改进
jayzcoder · Apr 22, 2024 · 25a587e · 25a587e
2 parents bb49e93 + 14da97f
commit 25a587e
Show file tree

Hide file tree

Showing 23 changed files with 228 additions and 91 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Download dbip database
-        run: wget -nv -O- "https://download.db-ip.com/free/dbip-country-lite-2024-02.mmdb.gz" | zcat > dbip.mmdb
+        run: wget -nv -O- "https://download.db-ip.com/free/dbip-country-lite-2024-04.mmdb.gz" | zcat > dbip.mmdb
       - uses: actions/upload-artifact@v3
         with:
           name: dbip

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "trguing",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "sideEffects": [
     "*.css"
   ],

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "trguing"
-version = "1.2.0"
+version = "1.3.0"
 description = "Remote control GUI for Transmission torrent daemon"
 authors = ["qu1ck"]
 license = "GNU-AGPL-3.0"

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "TrguiNG",
-    "version": "1.2.0"
+    "version": "1.3.0"
   },
   "build": {
     "distDir": "../dist",

diff --git a/src/components/details.tsx b/src/components/details.tsx
@@ -446,7 +446,19 @@ function Details(props: DetailsProps) {
 
     return (
         <Tabs variant="outline" defaultValue={defaultTab} keepMounted={false}
-            h="100%" w="100%" sx={{ display: "flex", flexDirection: "column" }}>
+            h="100%" w="100%"
+            styles={((theme) => ({
+                root: {
+                    display: "flex",
+                    flexDirection: "column",
+                },
+                tab: {
+                    borderColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2],
+                    "&[data-active]": {
+                        borderColor: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5],
+                    },
+                },
+            }))}>
             <Tabs.List px="sm" pt="xs" onContextMenu={handler}>
                 <MemoSectionsContextMenu
                     sections={tabs} setSections={setTabs}

diff --git a/src/components/filters.tsx b/src/components/filters.tsx
@@ -24,11 +24,13 @@ import * as StatusIcons from "./statusicons";
 import type { FilterSectionName, SectionsVisibility, StatusFilterName } from "../config";
 import { ConfigContext, ServerConfigContext } from "../config";
 import { Box, Button, Divider, Flex, Menu, Portal } from "@mantine/core";
-import {bytesToHumanReadableStr, eventHasModKey, useForceRender} from "trutil";
+import {bytesToHumanReadableStr, ensurePathDelimiter, eventHasModKey, useForceRender} from "trutil";
 import { useContextMenu } from "./contextmenu";
 import { MemoSectionsContextMenu, getSectionsMap } from "./sectionscontextmenu";
 import {useServerSelectedTorrents, useServerTorrentData} from "../rpc/torrent";
 import {TableSelectReducer} from "./tables/common";
+import {notifications} from "@mantine/notifications";
+import {copyToClipboard} from "../taurishim";
 
 export interface TorrentFilter {
     id: string,
@@ -141,12 +143,57 @@ interface FilterRowProps extends WithCurrentFilters {
     selectAllOnDbClk: boolean,
 }
 
+function focusNextFilter(element: HTMLElement, next: boolean) {
+    let nextElement: HTMLElement | null | undefined;
+    const parent = element.parentElement as HTMLElement;
+    const order = parseInt(parent.style.order);
+    if (next) {
+        if (element.nextElementSibling?.hasAttribute("tabIndex") === true) {
+            nextElement = element.nextElementSibling as HTMLElement;
+        } else {
+            for (const node of parent.parentElement?.children ?? []) {
+                if (parseInt((node as HTMLElement).style.order) === order + 1) {
+                    nextElement = node.firstElementChild?.nextElementSibling as HTMLElement | null | undefined;
+                }
+            }
+        }
+    } else {
+        if (element.previousElementSibling?.hasAttribute("tabIndex") === true) {
+            nextElement = element.previousElementSibling as HTMLElement;
+        } else {
+            for (const node of parent.parentElement?.children ?? []) {
+                if (parseInt((node as HTMLElement).style.order) === order - 1) {
+                    nextElement = node.lastElementChild as HTMLElement | null | undefined;
+                }
+            }
+        }
+    }
+
+    if (nextElement !== undefined && nextElement != null) {
+        nextElement.focus();
+        nextElement.click?.();
+    }
+}
+
+function filterOnKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+    if (event.key === "ArrowDown") {
+        event.stopPropagation();
+        event.preventDefault();
+        focusNextFilter(event.currentTarget, true);
+    }
+    if (event.key === "ArrowUp") {
+        event.stopPropagation();
+        event.preventDefault();
+        focusNextFilter(event.currentTarget, false);
+    }
+}
+
 const FilterRow = React.memo(function FilterRow(props: FilterRowProps) {
     const serverData = useServerTorrentData();
     const filterTorrents = serverData.torrents.filter(props.filter.filter);
     const serverSelected = useServerSelectedTorrents();
     let filterSize = props.showSize ? bytesToHumanReadableStr(filterTorrents.reduce((p, t) => p + (t.sizeWhenDone as number), 0)) : "";
-    return <Flex align="center" gap="sm" px="xs"
+    return <Flex align="center" gap="sm" px="xs" tabIndex={-1}
         className={props.currentFilters.find((f) => f.id === props.id) !== undefined ? "selected" : ""}
         onClick={(event) => {
             props.setCurrentFilters({
@@ -167,7 +214,8 @@ const FilterRow = React.memo(function FilterRow(props: FilterRowProps) {
                 }
             }
             props.setSearchTracker("");
-        }}>
+        }}
+        onKeyDown={filterOnKeyDown}>
         <div className="icon-container"><props.filter.icon /></div>
         <div style={{ flexShrink: 1, overflow: "hidden", textOverflow: "ellipsis" }} title={props.filter.name}>{props.filter.name}</div>
         <div style={{ flexShrink: 0, fontSize: "small", opacity: 0.8 }}>{`(${props.count})`}</div>
@@ -231,10 +279,31 @@ function DirFilterRow(props: DirFilterRowProps) {
     const serverSelected = useServerSelectedTorrents();
     const dirTorrents = serverData.torrents.filter(filter);
     let dirSize = props.showSize ? bytesToHumanReadableStr(dirTorrents.reduce((p, t) => p + (t.sizeWhenDone as number), 0)) : ""
+    const [iconColor, setIconColor] = useState<string>("green");
+    const dirPath = ensurePathDelimiter(props.dir.path);
+    const onCopyPath = useCallback(() => {
+        copyToClipboard(dirPath);
+        notifications.show({
+            message: `已复制路径到剪切板:` + dirPath,
+            color: "green",
+        });
+    }, [dirPath])
+
+    const onKeyDown = useCallback((event: React.KeyboardEvent<HTMLElement>) => {
+        if (expandable && !props.dir.expanded && event.key === "ArrowRight") {
+            props.dir.expanded = true;
+            props.expandedReducer({ verb: "add", value: props.dir.path });
+        } else if (expandable && props.dir.expanded && event.key === "ArrowLeft") {
+            props.dir.expanded = false;
+            props.expandedReducer({ verb: "remove", value: props.dir.path });
+        } else {
+            filterOnKeyDown(event);
+        }
+    }, [expandable, props]);
 
     return (
-        <Flex align="center" gap="sm" px="xs"
-            style={{ paddingLeft: `${props.dir.level * 1.4 + 0.25}em`, cursor: "default" }}
+        <Flex align="center" gap="sm" px="xs" tabIndex={-1}
+            style={{ paddingLeft: `${props.dir.level * 1.2 + 0.2}rem`, cursor: "default" }}
             className={props.currentFilters.find((f) => f.id === props.id) !== undefined ? "selected" : ""}
             onClick={(event) => {
                 props.setCurrentFilters({
@@ -255,7 +324,8 @@ function DirFilterRow(props: DirFilterRowProps) {
                     }
                 }
                 props.setSearchTracker("");
-            }}>
+            }}
+            onKeyDown={onKeyDown}>
             <div className="icon-container">
                 {expandable
                     ? props.dir.expanded
@@ -267,6 +337,17 @@ function DirFilterRow(props: DirFilterRowProps) {
             <div style={{ flexShrink: 1, overflow: "hidden", textOverflow: "ellipsis" }}>{props.dir.name}</div>
             <div style={{ flexShrink: 0, fontSize: "small", opacity: 0.8 }}>{`(${props.dir.count})`}</div>
             {props.showSize && <div style={{ flexShrink: 0, marginLeft: "auto", fontSize: "small", opacity: 0.8 }}>{`[${dirSize}]`}</div>}
+            <Icon.FileEarmarkTextFill
+                style={{ flexShrink: 0, marginLeft: props.showSize?undefined:"auto" }}
+                title={"点击复制：" + dirPath}
+                size="1.1rem" cursor="pointer" opacity={0.9}
+                color={iconColor}
+                onMouseOver={()=>setIconColor("blue")}
+                onMouseOut={()=>setIconColor("green")}
+                onMouseDown={()=>setIconColor("gray")}
+                onMouseUp={()=>setIconColor("green")}
+                onClick={onCopyPath}
+            />
         </Flex>
     );
 }
@@ -408,7 +489,6 @@ export const Filters = React.memo(function Filters({ torrents, currentFilters, s
         return [labels, trackers, errors];
     }, [config, torrents]);
 
-
     const [sections, setSections] = useReducer(
         (_: SectionsVisibility<FilterSectionName>, sections: SectionsVisibility<FilterSectionName>) => {
             setCurrentFilters({ verb: "set", filter: { id: "", filter: DefaultFilter } });
@@ -518,13 +598,13 @@ export const Filters = React.memo(function Filters({ torrents, currentFilters, s
                 <Menu.Dropdown miw="10rem">
                     {statusFilters.map((f, index) =>
                         f.required !== true &&
-                            <Menu.Item
-                                key={f.name}
-                                onClick={ () => { onStatusFiltersSubmenuItemClick(index); }}
-                                icon={statusFiltersVisibility[f.name] ? <Icon.Check size="1rem" /> : <Box miw="1rem" />}
-                            >
-                                {f.name}
-                            </Menu.Item>)}
+                        <Menu.Item
+                            key={f.name}
+                            onClick={() => { onStatusFiltersSubmenuItemClick(index); }}
+                            icon={statusFiltersVisibility[f.name] ? <Icon.Check size="1rem" /> : <Box miw="1rem" />}
+                        >
+                            {f.name}
+                        </Menu.Item>)}
                 </Menu.Dropdown>
             </Portal>
         </Menu>
@@ -543,7 +623,7 @@ export const Filters = React.memo(function Filters({ torrents, currentFilters, s
                 onSectionItemMouseEnter={closeStatusFiltersSubmenu}
                 closeOnClickOutside={!statusFiltersSubmenuOpened}
             >
-                <Menu.Divider/>
+                <Menu.Divider />
                 <Menu.Item
                     ref={statusFiltersItemRef}
                     icon={<Box miw="1rem" />}

diff --git a/src/components/mantinetheme.tsx b/src/components/mantinetheme.tsx
@@ -39,16 +39,6 @@ const Theme: (colorScheme: ColorScheme, font?: string) => MantineThemeOverride =
                 },
             },
         },
-        Tabs: {
-            styles: (theme) => ({
-                tab: {
-                    borderColor: colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2],
-                    "&[data-active]": {
-                        borderColor: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5],
-                    },
-                },
-            }),
-        },
         Checkbox: {
             styles: {
                 input: {

diff --git a/src/components/modals/common.tsx b/src/components/modals/common.tsx
@@ -116,7 +116,11 @@ export interface LocationData {
 export function useTorrentLocation(): LocationData {
     const config = useContext(ConfigContext);
     const serverConfig = useContext(ServerConfigContext);
-    const [lastPaths, setLastPaths] = useState(serverConfig.lastSaveDirs);
+    const [lastPaths, setLastPaths] = useState([] as string[]);
+
+    useEffect(() => {
+        setLastPaths(serverConfig.lastSaveDirs);
+    }, [serverConfig]);
 
     const [path, setPath] = useState<string>("");
 
@@ -221,6 +225,8 @@ export function Label({
                 rightSection={
                     <CloseButton
                         onMouseDown={onRemove}
+                        title="删除"
+                        color="gray.0"
                         variant="transparent"
                         size={22}
                         iconSize={14}

diff --git a/src/components/modals/move.tsx b/src/components/modals/move.tsx
@@ -44,6 +44,10 @@ export function MoveModal(props: ModalState) {
             {
                 onSuccess: () => {
                     addPath(location.path);
+                    notifications.show({
+                        message: "移动种子完成",
+                        color: "green",
+                    });
                 },
                 onError: (e) => {
                     console.log("移动种子异常", e);

diff --git a/src/components/modals/remove.tsx b/src/components/modals/remove.tsx
@@ -101,6 +101,14 @@ export function RemoveModal(props: ModalState) {
                         deleteData: false,
                     },
                     {
+                        onSuccess: () => {
+                            if (deleteDataIds.length <= 0) {
+                                notifications.show({
+                                    message: "删除种子完成",
+                                    color: "green",
+                                });
+                            }
+                        },
                         onError: (e) => {
                             console.log("删除种子出错", e);
                             notifications.show({
@@ -118,6 +126,12 @@ export function RemoveModal(props: ModalState) {
                         deleteData: true,
                     },
                     {
+                        onSuccess: () => {
+                            notifications.show({
+                                message: "删除种子完成",
+                                color: "green",
+                            });
+                        },
                         onError: (e) => {
                             console.log("删除种子(含数据)出错", e);
                             notifications.show({
@@ -135,6 +149,12 @@ export function RemoveModal(props: ModalState) {
                     deleteData,
                 },
                 {
+                    onSuccess: () => {
+                        notifications.show({
+                            message: "删除种子完成",
+                            color: "green",
+                        });
+                    },
                     onError: (e) => {
                         console.log("删除种子出错", e);
                         notifications.show({