feat: 新增剪切板历史窗口

src/layouts/Default/index.tsx

@@ -13,6 +13,8 @@ const DefaultLayout = () => {
 	const { isDark } = useSnapshot(store);
 
 	useMount(() => {
+		createWindow("/clipboard-history");
+
 		listen("github", () => {
 			open("https://github.com/ayangweb/EcoCopy");
 		});

src/pages/Clipboard/History/index.tsx

@@ -0,0 +1,15 @@
+import { appWindow } from "@tauri-apps/api/window";
+
+const ClipboardWindow = () => {
+	useMount(() => {
+		frostedWindow();
+	});
+
+	return (
+		<div className="h-screen" onMouseDown={() => appWindow.startDragging()}>
+			ClipboardWindow
+		</div>
+	);
+};
+
+export default ClipboardWindow;

src/router/index.ts

@@ -3,7 +3,8 @@ import { createBrowserRouter } from "react-router-dom";
 
 import DefaultLayout from "@/layouts/Default";
 import About from "@/pages/About";
-import Clipboard from "@/pages/Clipboard";
+import ClipboardHistory from "@/pages/Clipboard/History";
+import ClipboardSettings from "@/pages/Clipboard/Settings";
 import Settings from "@/pages/Settings";
 import type { Route } from "@/types/router";
 
@@ -14,7 +15,7 @@ export const routes: Route[] = [
 		children: [
 			{
 				path: "/",
-				Component: Clipboard,
+				Component: ClipboardSettings,
 				meta: {
 					title: "剪切板",
 					icon: "i-lucide-clipboard-list",
@@ -38,6 +39,22 @@ export const routes: Route[] = [
 			},
 		],
 	},
+	{
+		path: "/clipboard-history",
+		Component: ClipboardHistory,
+		meta: {
+			windowOptions: {
+				width: 360,
+				height: 600,
+				resizable: false,
+				maximizable: false,
+				decorations: false,
+				// visible: false,
+				transparent: true,
+				alwaysOnTop: true,
+			},
+		},
+	},
 ];
 
 export const router = createBrowserRouter(routes);

src/stores/index.tsx

@@ -7,8 +7,6 @@ import { subscribeKey } from "valtio/utils";
 export const store = proxyWithPersist<GlobalStore>({
 	name: "global",
 	initialState: {
-		theme: "auto",
-		isDark: false,
 		autoStart: false,
 		tabTrigger: "click",
 	},
@@ -30,9 +28,11 @@ subscribeKey(store._persist, "loaded", async (loaded) => {
 		name: await getName(),
 		version: await getVersion(),
 	};
+
+	store.theme ??= "auto";
 });
 
-subscribeKey(store, "theme", async (value) => {
+subscribeKey(store, "theme", async (value = "auto") => {
 	let theme: Theme = value;
 
 	if (theme === "auto") {

src/types/router.d.ts

@@ -1,7 +1,7 @@
 import type { WindowOptions } from "@tauri-apps/api/window";
 import type { ComponentType } from "react";
 
-export type Path = "/" | "/settings" | "/about";
+export type Path = "/" | "/settings" | "/about" | "/clipboard-history";
 
 export interface Route {
 	path: Path;

src/types/store.d.ts

@@ -5,8 +5,8 @@ export type Theme = "auto" | "light" | "dark";
 export type TabTrigger = "click" | "hover";
 
 export interface GlobalStore {
-	theme: Theme;
-	isDark: boolean;
+	theme?: Theme;
+	isDark?: boolean;
 	autoStart: boolean;
 	tabTrigger: TabTrigger;
 	wakeUpKey?: Key[];

src/utils/window.ts

@@ -41,7 +41,7 @@ export const frostedWindow = () => invoke("frosted_window");
 export const quitApp = () => invoke("quit_app");
 
 /**
- * 切换窗口是否可见
+ * 切换窗口的显示和隐藏
  */
 export const toggleWindowVisible = async () => {
 	const focused = await appWindow.isFocused();