feat: 新增图标组件

src/components/Icon/index.tsx

@@ -0,0 +1,27 @@
+import clsx from "clsx";
+import type { FC, HTMLAttributes } from "react";
+
+export interface IconProps extends HTMLAttributes<HTMLElement> {
+	name?: string;
+	size?: number;
+	hoverable?: boolean;
+}
+
+const Icon: FC<IconProps> = (props) => {
+	const { name, className, size, hoverable, style, ...rest } = props;
+
+	return (
+		<i
+			{...rest}
+			className={clsx(name, className, "inline-flex", {
+				"cursor-pointer transition hover:text-primary": hoverable,
+			})}
+			style={{
+				...style,
+				fontSize: `${size}px`,
+			}}
+		/>
+	);
+};
+
+export default Icon;

src/layouts/Default/index.tsx

@@ -1,3 +1,4 @@
+import Icon from "@/components/Icon";
 import { ConfigProvider, Flex, theme } from "antd";
 import zhCN from "antd/locale/zh_CN";
 import clsx from "clsx";
@@ -39,21 +40,18 @@ const DefaultLayout = () => {
 									})}
 								>
 									<Flex vertical align="center" gap={4}>
-										<i className={clsx(icon, "text-22")} />
+										<Icon name={icon} size={22} />
 										<span>{title}</span>
 									</Flex>
 								</Link>
 							);
 						})}
 					</Flex>
-					<i
-						className={clsx(
-							"cursor-pointer text-24 transition hover:text-primary",
-							[isDark ? "i-iconamoon-mode-light" : "i-iconamoon-mode-dark"],
-						)}
-						onMouseDown={() => {
-							store.theme = isDark ? "light" : "dark";
-						}}
+					<Icon
+						hoverable
+						size={24}
+						name={isDark ? "i-iconamoon-mode-light" : "i-iconamoon-mode-dark"}
+						onMouseDown={() => toggleTheme(isDark ? "light" : "dark")}
 					/>
 				</Flex>
 

src/pages/About/index.tsx

@@ -1,4 +1,5 @@
 import logo from "@/assets/img/logo.png";
+import Icon from "@/components/Icon";
 import { listen } from "@tauri-apps/api/event";
 import { open } from "@tauri-apps/api/shell";
 import { Button, Flex, Tooltip } from "antd";
@@ -24,13 +25,13 @@ const About = () => {
 		>
 			<img src={logo} className="h-120 w-120" alt="logo" />
 			<Flex vertical align="center" gap="small">
-				<div className="color-1 font-medium text-22 transition">
+				<div className="color-1 font-bold text-22 transition">
 					{appInfo?.name}
 				</div>
 				<Flex align="center" gap={4}>
 					<span>v{appInfo?.version}</span>
 					<Tooltip title="检查更新">
-						<i className="i-iconamoon-restart cursor-pointer hover:text-primary" />
+						<Icon hoverable name="i-iconamoon-restart" size={16} />
 					</Tooltip>
 				</Flex>
 				<span>开源的跨平台剪切板工具，让您的工作更加高效便捷。</span>

src/pages/Settings/components/ThemeMode/index.tsx

@@ -1,5 +1,4 @@
 import type { Theme } from "@/types/store";
-import { invoke } from "@tauri-apps/api";
 import { appWindow } from "@tauri-apps/api/window";
 import { Flex, Segmented } from "antd";
 import { useSnapshot } from "valtio";
@@ -38,17 +37,7 @@ const ThemeMode = () => {
 	return (
 		<Flex align="center">
 			<span>主题模式：</span>
-			<Segmented
-				value={theme}
-				options={options}
-				onChange={(value) => {
-					store.theme = value;
-
-					invoke("plugin:theme|set_theme", {
-						theme: value,
-					});
-				}}
-			/>
+			<Segmented value={theme} options={options} onChange={toggleTheme} />
 		</Flex>
 	);
 };

src/utils/shared.ts

@@ -0,0 +1,11 @@
+import type { Theme } from "@/types/store";
+import { invoke } from "@tauri-apps/api";
+
+/**
+ * 切换主题
+ */
+export const toggleTheme = (theme: Theme) => {
+	store.theme = theme;
+
+	invoke("plugin:theme|set_theme", { theme });
+};