diff --git a/packages/renderer/src/assets/svg/CloseIcon.tsx b/packages/renderer/src/assets/svg/CloseIcon.tsx new file mode 100644 index 00000000..dd71b9c1 --- /dev/null +++ b/packages/renderer/src/assets/svg/CloseIcon.tsx @@ -0,0 +1,15 @@ +import React from "react"; + +export function CloseIcon(props: React.SVGProps) { + return ( + + + + ); +} diff --git a/packages/renderer/src/assets/svg/ConsoleIcon.tsx b/packages/renderer/src/assets/svg/ConsoleIcon.tsx new file mode 100644 index 00000000..09e3d1c2 --- /dev/null +++ b/packages/renderer/src/assets/svg/ConsoleIcon.tsx @@ -0,0 +1,34 @@ +import React from "react"; + +export function ConsoleIcon(props: React.SVGProps) { + return ( + + + + + + + + + + + + + ); +} diff --git a/packages/renderer/src/assets/svg/DeleteIcon.tsx b/packages/renderer/src/assets/svg/DeleteIcon.tsx new file mode 100644 index 00000000..7239964d --- /dev/null +++ b/packages/renderer/src/assets/svg/DeleteIcon.tsx @@ -0,0 +1,23 @@ +import React, { SVGProps } from "react"; + +export function DeleteIcon(props: SVGProps) { + return ( + + + + + ); +} diff --git a/packages/renderer/src/assets/svg/DownloadListIcon.tsx b/packages/renderer/src/assets/svg/DownloadListIcon.tsx new file mode 100644 index 00000000..dc817e8a --- /dev/null +++ b/packages/renderer/src/assets/svg/DownloadListIcon.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +export function DownloadListIcon(props: React.SVGProps) { + return ( + + + + + ); +} diff --git a/packages/renderer/src/assets/svg/EditIcon.tsx b/packages/renderer/src/assets/svg/EditIcon.tsx new file mode 100644 index 00000000..753f9e99 --- /dev/null +++ b/packages/renderer/src/assets/svg/EditIcon.tsx @@ -0,0 +1,34 @@ +import React from "react"; + +export function EditIcon(props: React.SVGProps) { + return ( + + + + + + + + + + + + + ); +} diff --git a/packages/renderer/src/assets/svg/FavFillIcon.tsx b/packages/renderer/src/assets/svg/FavFillIcon.tsx new file mode 100644 index 00000000..c782de37 --- /dev/null +++ b/packages/renderer/src/assets/svg/FavFillIcon.tsx @@ -0,0 +1,15 @@ +import React from "react"; + +export function FavFillIcon(props: React.SVGProps) { + return ( + + + + ); +} diff --git a/packages/renderer/src/assets/svg/FavIcon.tsx b/packages/renderer/src/assets/svg/FavIcon.tsx index c3dfca39..53ae402c 100644 --- a/packages/renderer/src/assets/svg/FavIcon.tsx +++ b/packages/renderer/src/assets/svg/FavIcon.tsx @@ -6,10 +6,22 @@ export function FavIcon(props: React.SVGProps) { width="20" height="20" viewBox="0 0 20 20" + fill="none" xmlns="http://www.w3.org/2000/svg" {...props} > - + + + + + + + + ); } diff --git a/packages/renderer/src/assets/svg/HomeIcon.tsx b/packages/renderer/src/assets/svg/HomeIcon.tsx index b92db19d..6069de24 100644 --- a/packages/renderer/src/assets/svg/HomeIcon.tsx +++ b/packages/renderer/src/assets/svg/HomeIcon.tsx @@ -9,7 +9,7 @@ export function HomeIcon(props: React.SVGProps) { xmlns="http://www.w3.org/2000/svg" {...props} > - + ); } diff --git a/packages/renderer/src/assets/svg/PCIcon.tsx b/packages/renderer/src/assets/svg/PCIcon.tsx new file mode 100644 index 00000000..5c9cb0e9 --- /dev/null +++ b/packages/renderer/src/assets/svg/PCIcon.tsx @@ -0,0 +1,17 @@ +import React from "react"; + +export function PCIcon(props: React.SVGProps) { + return ( + + + + + + ); +} diff --git a/packages/renderer/src/assets/svg/PhoneIcon.tsx b/packages/renderer/src/assets/svg/PhoneIcon.tsx index 6d8965e7..6077768c 100644 --- a/packages/renderer/src/assets/svg/PhoneIcon.tsx +++ b/packages/renderer/src/assets/svg/PhoneIcon.tsx @@ -9,7 +9,8 @@ export function PhoneIcon(props: React.SVGProps) { xmlns="http://www.w3.org/2000/svg" {...props} > - + + ); } diff --git a/packages/renderer/src/assets/svg/PrivacyIcon.tsx b/packages/renderer/src/assets/svg/PrivacyIcon.tsx new file mode 100644 index 00000000..f1672bd6 --- /dev/null +++ b/packages/renderer/src/assets/svg/PrivacyIcon.tsx @@ -0,0 +1,15 @@ +import React from "react"; + +export function PrivacyIcon(props: React.SVGProps) { + return ( + + + + ); +} diff --git a/packages/renderer/src/assets/svg/index.ts b/packages/renderer/src/assets/svg/index.ts index 6add50cd..4c5f6fc0 100644 --- a/packages/renderer/src/assets/svg/index.ts +++ b/packages/renderer/src/assets/svg/index.ts @@ -13,7 +13,15 @@ export { PauseIcon } from "./PauseIcon"; export { BackIcon } from "./BackIcon"; export { HomeIcon } from "./HomeIcon"; export { PhoneIcon } from "./PhoneIcon"; +export { FavFillIcon } from "./FavFillIcon"; export { FavIcon } from "./FavIcon"; export { RefreshIcon } from "./RefreshIcon"; export { SendIcon } from "./SendIcon"; export { FolderIcon } from "./FolderIcon"; +export { DeleteIcon } from "./DeleteIcon"; +export { CloseIcon } from "./CloseIcon"; +export { PCIcon } from "./PCIcon"; +export { PrivacyIcon } from "./PrivacyIcon"; +export { DownloadListIcon } from "./DownloadListIcon"; +export { EditIcon } from "./EditIcon"; +export { ConsoleIcon } from "./ConsoleIcon"; diff --git a/packages/renderer/src/components/DownloadTag.tsx b/packages/renderer/src/components/DownloadTag.tsx new file mode 100644 index 00000000..c665d696 --- /dev/null +++ b/packages/renderer/src/components/DownloadTag.tsx @@ -0,0 +1,22 @@ +import { cn } from "@/utils"; +import React from "react"; + +interface DownloadTagProps { + icon?: React.ReactNode; + text: string; + color: string; +} + +export function DownloadTag({ icon, text, color }: DownloadTagProps) { + return ( +
+ {icon} + {text} +
+ ); +} diff --git a/packages/renderer/src/components/IconButton.tsx b/packages/renderer/src/components/IconButton.tsx new file mode 100644 index 00000000..9a149e23 --- /dev/null +++ b/packages/renderer/src/components/IconButton.tsx @@ -0,0 +1,49 @@ +import { cn } from "@/utils"; +import { useMemoizedFn } from "ahooks"; +import React, { cloneElement, PropsWithChildren, ReactElement } from "react"; + +interface Props extends PropsWithChildren { + title?: string; + onClick?: () => void; + disabled?: boolean; + icon?: ReactElement; + highlight?: boolean; +} + +export function IconButton({ + children, + disabled, + title, + onClick, + icon, + highlight, +}: Props) { + const handleClick = useMemoizedFn(() => { + if (disabled) { + return; + } + onClick && onClick(); + }); + + return ( +
+ {icon && + cloneElement(icon, { + className: cn("w-full h-full", icon.props.className), + })} + {children} +
+ ); +} diff --git a/packages/renderer/src/components/PageContainer.tsx b/packages/renderer/src/components/PageContainer.tsx index 56470280..fed38f51 100644 --- a/packages/renderer/src/components/PageContainer.tsx +++ b/packages/renderer/src/components/PageContainer.tsx @@ -7,6 +7,7 @@ interface PageContainerProps { rightExtra?: React.ReactNode | null; title?: React.ReactNode | null; className?: string; + wrapperClassName?: string; } const PageContainer: FC = ({ @@ -15,13 +16,16 @@ const PageContainer: FC = ({ rightExtra, title, className, + wrapperClassName, }) => { return ( -
+
{title && ( -
+
-
{title}
+
+ {title} +
{titleExtra &&
{titleExtra}
}
{rightExtra &&
{rightExtra}
} diff --git a/packages/renderer/src/i18n/index.ts b/packages/renderer/src/i18n/index.ts index 565b1458..55f62b49 100644 --- a/packages/renderer/src/i18n/index.ts +++ b/packages/renderer/src/i18n/index.ts @@ -142,6 +142,7 @@ Referer: http://www.example.com`, "After turning on the switch, the browser will not save any data", converter: "Converter", addFile: "Add File", + addFavorite: "Add Favorite", }, }, zh: { @@ -270,6 +271,7 @@ Referer: http://www.example.com`, privacyTooltip: "打开开关后浏览器将不保存任何数据", converter: "格式转换", addFile: "添加文件", + addFavorite: "添加收藏", }, }, }, diff --git a/packages/renderer/src/layout/App.tsx b/packages/renderer/src/layout/App.tsx index 74ca34ce..c8643497 100644 --- a/packages/renderer/src/layout/App.tsx +++ b/packages/renderer/src/layout/App.tsx @@ -19,7 +19,7 @@ const App: FC = () => { return (
-
+
diff --git a/packages/renderer/src/layout/AppHeader.tsx b/packages/renderer/src/layout/AppHeader.tsx index d1ef332f..d20a132e 100644 --- a/packages/renderer/src/layout/AppHeader.tsx +++ b/packages/renderer/src/layout/AppHeader.tsx @@ -1,11 +1,10 @@ import useElectron from "@/hooks/electron"; import { selectAppStore } from "@/store"; import { cn } from "@/utils"; -import { EyeInvisibleOutlined } from "@ant-design/icons"; import React from "react"; import { useTranslation } from "react-i18next"; import { useSelector } from "react-redux"; -import { HelpIcon } from "@/assets/svg"; +import { HelpIcon, PrivacyIcon } from "@/assets/svg"; interface Props { className?: string; @@ -24,25 +23,25 @@ export function AppHeader({ className }: Props) { return (
-
-
- Media Go - +
+
+ Media Go + v{import.meta.env.APP_VERSION} -
+
{/* help */}
{appStore.privacy && ( -
- 隐私模式 +
+ 隐私模式
)}
void; link: string; activeKey: string; className?: string; - icon?: React.ReactNode; + icon?: ReactElement; } function AppMenuItem({ @@ -51,7 +50,7 @@ function AppMenuItem({ {icon && - React.cloneElement(icon as React.ReactElement, { + cloneElement(icon as React.ReactElement, { fill: isActive ? "#fff" : "#AAB5CB", })} {children} @@ -174,7 +173,7 @@ export function AppSideBar({ className }: Props) { ); return ( -
+
{finalItems.map((item) => cloneElement(item.label, { key: item.key }))}
diff --git a/packages/renderer/src/pages/Converter/index.tsx b/packages/renderer/src/pages/Converter/index.tsx index b5c19612..8f64d236 100644 --- a/packages/renderer/src/pages/Converter/index.tsx +++ b/packages/renderer/src/pages/Converter/index.tsx @@ -102,7 +102,7 @@ const Converter = () => { } - className="rounded-lg bg-white" + className="rounded-lg bg-white dark:bg-[#1F2024]" > {contextHolder}
diff --git a/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx b/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx index 0b93560c..17bd0bc8 100644 --- a/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx +++ b/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx @@ -2,11 +2,9 @@ import { cn } from "@/utils"; import React, { ReactNode } from "react"; import { Checkbox } from "@/components/ui/checkbox"; import { DownloadStatus } from "@/types"; -import { Button, Progress, Space } from "antd"; +import { Progress, Space } from "antd"; import { CodeOutlined, - DownloadOutlined, - EditOutlined, PauseCircleOutlined, PlayCircleOutlined, } from "@ant-design/icons"; @@ -16,26 +14,16 @@ import { selectAppStore } from "@/store"; import selectedBg from "@/assets/images/select-item-bg.png"; import { CurrTerminal } from "./types"; import DownloadForm from "@/components/DownloadForm"; -import { DownloadIcon, FailedIcon, PauseIcon } from "@/assets/svg"; +import { + DownloadIcon, + DownloadListIcon, + EditIcon, + FailedIcon, + PauseIcon, +} from "@/assets/svg"; import useElectron from "@/hooks/electron"; - -interface DownloadTagProps { - icon?: React.ReactNode; - text: string; - color: string; -} - -function DownloadTag({ icon, text, color }: DownloadTagProps) { - return ( -
- {icon} - {text} -
- ); -} +import { DownloadTag } from "@/components/DownloadTag"; +import { IconButton } from "@/components/IconButton"; interface Props { item: DownloadItem; @@ -73,9 +61,9 @@ export function DownloadItem({ if (!appStore.showTerminal) return null; return ( -
} - className="rounded-lg bg-white p-3" + className="rounded-lg bg-white p-3 dark:bg-[#1F2024]" > +
{title} diff --git a/packages/renderer/src/pages/SourceExtract/components/BrowserView.tsx b/packages/renderer/src/pages/SourceExtract/components/BrowserView.tsx index af0d7643..680066bf 100644 --- a/packages/renderer/src/pages/SourceExtract/components/BrowserView.tsx +++ b/packages/renderer/src/pages/SourceExtract/components/BrowserView.tsx @@ -1,10 +1,13 @@ +import { DeleteIcon } from "@/assets/svg"; import DownloadForm, { DownloadFormRef } from "@/components/DownloadForm"; +import { IconButton } from "@/components/IconButton"; import { Button } from "@/components/ui/button"; import WebView from "@/components/WebView"; import useElectron from "@/hooks/electron"; import { addSource, BrowserStatus, + deleteSource, PageMode, selectBrowserStore, setBrowserStore, @@ -179,20 +182,31 @@ export function BrowserView() {
{store.sources.map((item, index) => { return ( -
+
{item.name} {item.url} -
+
+
+ } + onClick={() => { + dispatch(deleteSource(item.id)); + }} + /> +