feat: 新增剪贴板内容备注功能 (#618)

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

@@ -2,7 +2,6 @@ import type { ClipboardItem } from "@/types/database";
 import { Flex } from "antd";
 import clsx from "clsx";
 import type { CSSProperties, FC } from "react";
-import styles from "./index.module.scss";
 
 const Text: FC<ClipboardItem> = (props) => {
 	const { value } = props;
@@ -37,7 +36,7 @@ const Text: FC<ClipboardItem> = (props) => {
 		return value;
 	};
 
-	return <div className={styles.root}>{renderContent()}</div>;
+	return <div className="line-clamp-4">{renderContent()}</div>;
 };
 
 export default memo(Text);

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

@@ -1,3 +1,4 @@
+import Icon from "@/components/Icon";
 import { ClipboardPanelContext } from "@/pages/Clipboard/Panel";
 import type { ClipboardItem } from "@/types/database";
 import { copyFile, writeFile } from "@tauri-apps/api/fs";
@@ -19,15 +20,16 @@ import Text from "./components/Text";
 interface ItemProps extends Partial<FlexProps> {
 	index: number;
 	data: ClipboardItem;
+	openRemarkModel: () => void;
 }
 
 interface ContextMenuItem extends ContextMenu.Item {
 	hide?: boolean;
 }
 
 const Item: FC<ItemProps> = (props) => {
-	const { index, data, className, ...rest } = props;
-	const { id, type, value, search, group, favorite } = data;
+	const { index, data, className, openRemarkModel, ...rest } = props;
+	const { id, type, value, search, group, favorite, remark } = data;
 	const { state } = useContext(ClipboardPanelContext);
 	const { t } = useTranslation();
 	const { env, appearance } = useSnapshot(globalStore);
@@ -166,6 +168,10 @@ const Item: FC<ItemProps> = (props) => {
 				label: t("clipboard.button.context_menu.copy"),
 				event: copy,
 			},
+			{
+				label: "备注",
+				event: openRemarkModel,
+			},
 			{
 				label: t("clipboard.button.context_menu.paste_ocr_text"),
 				hide: type !== "image" || /^[\s]*$/.test(search),
@@ -274,8 +280,30 @@ const Item: FC<ItemProps> = (props) => {
 				deleteItem={deleteItem}
 			/>
 
-			<div className="flex-1 select-auto overflow-hidden break-words">
-				{renderContent()}
+			<div className="relative flex-1 select-auto overflow-hidden break-words children:transition">
+				<div
+					className={clsx(
+						"absolute inset-0 line-clamp-4 opacity-100 group-hover:opacity-0",
+						{
+							"opacity-0!": !remark,
+						},
+					)}
+				>
+					<Icon
+						name="i-hugeicons:task-edit-01"
+						className="mr-2 translate-y-2"
+					/>
+
+					{remark}
+				</div>
+
+				<div
+					className={clsx("h-full opacity-0 group-hover:opacity-100", {
+						"opacity-100!": !remark,
+					})}
+				>
+					{renderContent()}
+				</div>
 			</div>
 		</Flex>
 	);

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

@@ -0,0 +1,68 @@
+import { ClipboardPanelContext } from "@/pages/Clipboard/Panel";
+import type { ClipboardItem } from "@/types/database";
+import { Form, Input, Modal } from "antd";
+import { find } from "lodash-es";
+
+export interface RemarkModalRef {
+	open: () => void;
+}
+
+interface FormFields {
+	remark: string;
+}
+
+const RemarkModal = forwardRef<RemarkModalRef>((_, ref) => {
+	const { state } = useContext(ClipboardPanelContext);
+	const [open, { toggle }] = useBoolean();
+	const [item, setItem] = useState<ClipboardItem>();
+	const [form] = Form.useForm<FormFields>();
+
+	useImperativeHandle(ref, () => ({
+		open: () => {
+			const findItem = find(state.list, { id: state.activeId });
+
+			form.setFieldsValue({
+				remark: findItem?.remark,
+			});
+
+			setItem(findItem);
+
+			toggle();
+		},
+	}));
+
+	const handleOk = () => {
+		const { remark } = form.getFieldsValue();
+
+		if (item) {
+			item.remark = remark;
+
+			updateSQL("history", { id: item.id, remark });
+		}
+
+		toggle();
+	};
+
+	return (
+		<Modal
+			forceRender
+			centered
+			title="备注"
+			open={open}
+			onOk={handleOk}
+			onCancel={toggle}
+		>
+			<Form
+				form={form}
+				initialValues={{ remark: item?.remark }}
+				onFinish={handleOk}
+			>
+				<Form.Item name="remark" className="mb-0!">
+					<Input placeholder="请输入备注" />
+				</Form.Item>
+			</Form>
+		</Modal>
+	);
+});
+
+export default RemarkModal;

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

@@ -4,10 +4,12 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import { FloatButton } from "antd";
 import { findIndex } from "lodash-es";
 import Item from "./components/Item";
+import RemarkModal, { type RemarkModalRef } from "./components/RemarkModel";
 
 const List = () => {
 	const { state, getList } = useContext(ClipboardPanelContext);
 	const outerRef = useRef<HTMLDivElement>(null);
+	const remarkModelRef = useRef<RemarkModalRef>(null);
 
 	const rowVirtualizer = useVirtualizer({
 		count: state.list.length,
@@ -98,6 +100,7 @@ const List = () => {
 								index={index}
 								data={{ ...data, value }}
 								style={{ height: size, transform: `translateY(${start}px)` }}
+								openRemarkModel={() => remarkModelRef.current?.open()}
 							/>
 						);
 					})}
@@ -106,6 +109,8 @@ const List = () => {
 
 			{/* @ts-ignore */}
 			<FloatButton.BackTop duration={0} target={() => outerRef.current} />
+
+			<RemarkModal ref={remarkModelRef} />
 		</>
 	);
 };