feat: 在偏好设置-历史记录中统一管理删除多项剪切板内容

src/components/EcoSelect/index.tsx

@@ -1,19 +1,23 @@
 import { Select, type SelectProps } from "antd";
 
+const DEFAULT_WIDTH = 100;
+
 const EcoSelect = <T,>(props: SelectProps<T>) => {
 	const { style, ...rest } = props;
 
 	const width = useCreation(() => {
+		if (!rest.options) return DEFAULT_WIDTH;
+
 		let width = 0;
 
 		const canvas = document.createElement("canvas");
 		const context = canvas.getContext("2d");
 
-		if (!context) return 100;
+		if (!context) return DEFAULT_WIDTH;
 
 		context.font = getComputedStyle(document.body).font;
 
-		for (const option of rest.options!) {
+		for (const option of rest.options) {
 			const textWidth = context.measureText(option.label as string).width;
 
 			if (textWidth > width) {

src/constants/index.ts

@@ -10,7 +10,7 @@ export const LISTEN_KEY = {
 	CLEAR_HISTORY: "clear-history",
 	UPDATE: "update",
 	TRAY_CLICK: "tray-click",
-	CHANGE_DATA_FILE: "change-data-file",
+	REFRESH_CLIPBOARD_LIST: "refresh-clipboard-list",
 	CHANGE_LANGUAGE: "change-language",
 	TOGGLE_LISTENING: "toggle-listening",
 	SHOW_WINDOW: "show-window",

src/layouts/Preference/index.tsx

@@ -1,6 +1,7 @@
 import Icon from "@/components/Icon";
 import Update from "@/components/Update";
 import MacosPermissions from "@/pages/General/components/MacosPermissions";
+import type { ClipboardItem } from "@/types/database";
 import type { Language } from "@/types/store";
 import { emit, listen } from "@tauri-apps/api/event";
 import { open } from "@tauri-apps/api/shell";
@@ -18,28 +19,34 @@ const Preference = () => {
 	const { t } = useTranslation();
 
 	useMount(async () => {
+		// 监听全局状态变化
 		subscribe(globalStore, () => {
 			emit(LISTEN_KEY.GLOBAL_STORE_CHANGED, globalStore);
 		});
 
+		// 监听剪切板状态变化
 		subscribe(clipboardStore, () => {
 			emit(LISTEN_KEY.CLIPBOARD_STORE_CHANGED, clipboardStore);
 		});
 
+		// 监听打开 github 地址
 		listen(LISTEN_KEY.GITHUB, () => {
 			open(GITHUB_LINK);
 		});
 
+		// 监听打开关于页面
 		listen(LISTEN_KEY.ABOUT, () => {
 			showWindow();
 
 			navigate("about");
 		});
 
+		// 监听语言变更
 		listen<Language>(LISTEN_KEY.CHANGE_LANGUAGE, ({ payload }) => {
 			globalStore.appearance.language = payload;
 		});
 
+		// 监听自动启动变更
 		watchKey(globalStore.app, "autoStart", async (value) => {
 			const enabled = await isEnabled();
 
@@ -52,12 +59,16 @@ const Preference = () => {
 			}
 		});
 
+		// 监听语言变更
 		watchKey(globalStore.appearance, "language", () => {
+			setLocale();
+
 			requestAnimationFrame(() => {
 				appWindow.setTitle(t("preference.title"));
 			});
 		});
 
+		// 监听主题变更
 		subscribeKey(globalStore.appearance, "theme", async (value) => {
 			let nextTheme = value;
 
@@ -70,15 +81,37 @@ const Preference = () => {
 			setTheme(value);
 		});
 
+		// 监听是否隐藏托盘图标
 		watchKey(globalStore.app, "hideTray", (value) => {
 			setTrayVisible(!value);
 		});
-
-		watchKey(globalStore.appearance, "language", setLocale);
 	});
 
+	// 监听快捷键切换窗口显隐
 	useRegister(toggleWindowVisible, [shortcut.preference]);
 
+	// 每 30 分钟删除过期的历史数据
+	useInterval(
+		async () => {
+			const { duration, unit } = clipboardStore.history;
+
+			if (duration === 0) return;
+
+			const list = await selectSQL<ClipboardItem[]>("history");
+
+			for (const item of list) {
+				const { id, createTime, favorite } = item;
+
+				if (dayjs().diff(createTime, "days") >= duration * unit) {
+					if (favorite) continue;
+
+					deleteSQL("history", id);
+				}
+			}
+		},
+		1000 * 60 * 30,
+	);
+
 	return (
 		<Flex className="h-screen">
 			<Flex

src/locales/en-US.json

@@ -191,11 +191,7 @@
 				"download_image": "Download Image",
 				"show_in_finder": "Show in Finder",
 				"show_in_file_explorer": "Show in File Explorer",
-				"delete": "Delete",
-				"delete_above": "Delete Above",
-				"delete_below": "Delete Below",
-				"delete_other": "Delete Others",
-				"delete_all": "Delete All"
+				"delete": "Delete"
 			}
 		},
 		"label": {

src/locales/ja-JP.json

@@ -191,11 +191,7 @@
 				"download_image": "画像をダウンロード",
 				"show_in_finder": "Finder で表示",
 				"show_in_file_explorer": "ファイルエクスプローラで表示",
-				"delete": "削除",
-				"delete_above": "上記を削除",
-				"delete_below": "以下を削除 ",
-				"delete_other": "その他を削除",
-				"delete_all": "すべて削除"
+				"delete": "削除"
 			}
 		},
 		"label": {

src/locales/zh-CN.json

@@ -191,11 +191,7 @@
 				"download_image": "下载图片",
 				"show_in_finder": "在 Finder 中显示",
 				"show_in_file_explorer": "在文件资源管理器中显示",
-				"delete": "删除",
-				"delete_above": "删除上方",
-				"delete_below": "删除下方",
-				"delete_other": "删除其它",
-				"delete_all": "删除所有"
+				"delete": "删除"
 			}
 		},
 		"label": {

src/locales/zh-TW.json

@@ -191,11 +191,7 @@
 				"download_image": "下載圖片",
 				"show_in_finder": "在 Finder 中顯示",
 				"show_in_file_explorer": "在檔案總管中顯示",
-				"delete": "刪除",
-				"delete_above": "刪除上方",
-				"delete_below": "刪除下方",
-				"delete_other": "刪除其他",
-				"delete_all": "刪除所有"
+				"delete": "刪除"
 			}
 		},
 		"label": {

src/pages/Backup/components/Manual/index.tsx

@@ -29,7 +29,7 @@ const Manual: FC<{ state: State }> = (props) => {
 			merge(globalStore, store.globalStore);
 			merge(clipboardStore, store.clipboardStore);
 
-			emit(LISTEN_KEY.CHANGE_DATA_FILE);
+			emit(LISTEN_KEY.REFRESH_CLIPBOARD_LIST);
 
 			message.success(
 				t("preference.data_backup.import_export.hints.import_success"),

src/pages/Backup/components/SavePath/index.tsx

@@ -35,7 +35,7 @@ const SavePath: FC<{ state: State }> = (props) => {
 
 			state.spinning = false;
 
-			emit(LISTEN_KEY.CHANGE_DATA_FILE);
+			emit(LISTEN_KEY.REFRESH_CLIPBOARD_LIST);
 
 			message.success(
 				t("preference.data_backup.storage_path.hints.save_success"),

src/pages/Clipboard/Panel/components/List/components/Item/index.tsx

@@ -16,7 +16,6 @@ import RTF from "./components/RTF";
 import Text from "./components/Text";
 
 interface ItemProps extends Partial<FlexProps> {
-	index: number;
 	data: ClipboardItem;
 }
 
@@ -25,8 +24,8 @@ interface MenuItem extends ContextMenu.Item {
 }
 
 const Item: FC<ItemProps> = (props) => {
-	const { index, data, className, ...rest } = props;
-	const { id, type, value, search, group, favorite, createTime } = data;
+	const { data, className, ...rest } = props;
+	const { id, type, value, search, group, favorite } = data;
 	const { state, getClipboardList } = useContext(ClipboardPanelContext);
 	const { t } = useTranslation();
 	const { env, appearance } = useSnapshot(globalStore);
@@ -119,50 +118,6 @@ const Item: FC<ItemProps> = (props) => {
 		getClipboardList?.();
 	};
 
-	const deleteAbove = async () => {
-		const list = state.data.list.filter((item) => {
-			const isMore = item.createTime > createTime;
-			const isDifferent = item.createTime === createTime && item.id !== id;
-
-			return isMore || isDifferent;
-		});
-
-		await deleteAll(list);
-
-		state.scrollToIndex?.(0);
-	};
-
-	const deleteBelow = async () => {
-		const list = state.data.list.filter((item) => {
-			const isLess = item.createTime < createTime;
-			const isDifferent = item.createTime === createTime && item.id !== id;
-
-			return isLess || isDifferent;
-		});
-
-		deleteAll(list);
-	};
-
-	const deleteOther = async () => {
-		const list = state.data.list.filter((item) => item.id !== id);
-
-		deleteAll(list);
-	};
-
-	const deleteAll = async (list: ClipboardItem[]) => {
-		let filteredList = list;
-
-		if (!state.favorite) {
-			filteredList = list.filter((item) => !item.favorite);
-		}
-
-		for await (const item of filteredList) {
-			await deleteSQL("history", item.id);
-		}
-
-		getClipboardList?.();
-	};
-
 	const pasteValue = async () => {
 		if (state.activeId !== id) return;
 
@@ -233,26 +188,6 @@ const Item: FC<ItemProps> = (props) => {
 				label: t("clipboard.button.context_menu.delete"),
 				event: deleteItem,
 			},
-			{
-				label: t("clipboard.button.context_menu.delete_above"),
-				hide: index === 0,
-				event: deleteAbove,
-			},
-			{
-				label: t("clipboard.button.context_menu.delete_below"),
-				hide: index === state.data.list.length - 1,
-				event: deleteBelow,
-			},
-			{
-				label: t("clipboard.button.context_menu.delete_other"),
-				hide: state.data.list.length === 1,
-				event: deleteOther,
-			},
-			{
-				label: t("clipboard.button.context_menu.delete_all"),
-				hide: state.data.list.length === 1,
-				event: () => deleteAll(state.data.list),
-			},
 		];
 
 		showMenu({

src/pages/Clipboard/Panel/components/List/index.tsx

@@ -17,10 +17,6 @@ const List = () => {
 		getItemKey: (index) => state.data.list[index].id,
 	});
 
-	useMount(() => {
-		state.scrollToIndex = rowVirtualizer.scrollToIndex;
-	});
-
 	const isFocusWithin = useFocusWithin(document.body);
 
 	useEffect(() => {
@@ -60,7 +56,7 @@ const List = () => {
 
 				state.activeId = state.data.list[nextIndex].id;
 
-				state.scrollToIndex?.(nextIndex);
+				rowVirtualizer.scrollToIndex?.(nextIndex);
 			}
 		},
 		{
@@ -86,7 +82,6 @@ const List = () => {
 						return (
 							<Item
 								key={key}
-								index={index}
 								data={{ ...data, value }}
 								style={{ height: size, transform: `translateY(${start}px)` }}
 							/>

src/pages/Clipboard/Panel/index.tsx

@@ -20,7 +20,6 @@ interface State extends TablePayload {
 		loading: boolean;
 	};
 	$eventBus?: EventEmitter<string>;
-	scrollToIndex?: (index: number) => void;
 }
 
 const INITIAL_STATE: State = {
@@ -86,7 +85,8 @@ const ClipboardPanel = () => {
 			getClipboardList();
 		});
 
-		listen(LISTEN_KEY.CHANGE_DATA_FILE, getClipboardList);
+		// 监听刷新列表
+		listen(LISTEN_KEY.REFRESH_CLIPBOARD_LIST, getClipboardList);
 
 		// 监听监听状态变更
 		listen<boolean>(LISTEN_KEY.TOGGLE_LISTENING, ({ payload }) => {
@@ -140,21 +140,7 @@ const ClipboardPanel = () => {
 		state.data.list = list;
 
 		if (state.data.page === 1) {
-			state.activeId = list[0]?.id;
-		}
-
-		const { duration, unit } = clipboardStore.history;
-
-		if (duration === 0) return;
-
-		for (const item of list) {
-			const { id, createTime } = item;
-
-			if (dayjs().diff(createTime, "days") >= duration * unit) {
-				if (item.favorite) continue;
-
-				deleteSQL("history", id);
-			}
+			state.activeId ||= list[0]?.id;
 		}
 	};