collect-system/apps/web/src/components/common/editor/MindEditor.tsx

import { Button, Empty, Form, Spin } from "antd";
import NodeMenu from "./NodeMenu";
import { api, usePost, useVisitor } from "@nice/client";
import {
	ObjectType,
	PathDto,
	postDetailSelect,
	PostType,
	Prisma,
	RolePerms,
	VisitType,
} from "@nice/common";
import TermSelect from "../../models/term/term-select";
import DepartmentSelect from "../../models/department/department-select";
import { useContext, useEffect, useMemo, useRef, useState } from "react";
import toast from "react-hot-toast";
import { MindElixirInstance } from "mind-elixir";
import MindElixir from "mind-elixir";
import { useTusUpload } from "@web/src/hooks/useTusUpload";
import { useNavigate } from "react-router-dom";
import { useAuth } from "@web/src/providers/auth-provider";
import { MIND_OPTIONS } from "./constant";
import { LinkOutlined, SaveOutlined } from "@ant-design/icons";
import JoinButton from "../../models/course/detail/CourseOperationBtns/JoinButton";
import { CourseDetailContext } from "../../models/course/detail/PostDetailContext";
import ReactDOM from "react-dom";
import { createRoot } from "react-dom/client";
export default function MindEditor({ id }: { id?: string }) {
	const containerRef = useRef<HTMLDivElement>(null);
	const {
		post,
		isLoading,
		// userIsLearning,
		// setUserIsLearning,
	} = useContext(CourseDetailContext);
	const [instance, setInstance] = useState<MindElixirInstance | null>(null);
	const { isAuthenticated, user, hasSomePermissions } = useAuth();
	const { read } = useVisitor();
	// const { data: post, isLoading }: { data: PathDto; isLoading: boolean } =
	// 	api.post.findFirst.useQuery(
	// 		{
	// 			where: {
	// 				id,
	// 			},
	// 			select: postDetailSelect,
	// 		},
	// 		{ enabled: Boolean(id) }
	// 	);

	const canEdit: boolean = useMemo(() => {
		const isAuth = isAuthenticated && user?.id === post?.author?.id;
		return (
			isAuthenticated &&
			(!id || isAuth || hasSomePermissions(RolePerms.MANAGE_ANY_POST))
		);
	}, [user]);

	const navigate = useNavigate();
	const { create, update } = usePost();
	const { data: taxonomies } = api.taxonomy.getAll.useQuery({
		type: ObjectType.COURSE,
	});
	const { handleFileUpload } = useTusUpload();
	const [form] = Form.useForm();
	const handleIcon = () => {
		const hyperLinkElement =document.querySelectorAll(".hyper-link");
		console.log("hyperLinkElement", hyperLinkElement);
		hyperLinkElement.forEach((item) => {
			const hyperLinkDom = createRoot(item);
			hyperLinkDom.render(<LinkOutlined />);
		});
	}
	const CustomLinkIconPlugin = (mind) => {
		mind.bus.addListener("operation", handleIcon)
	};
	useEffect(() => {
		if (post?.id && id) {
			read.mutateAsync({
				data: {
					visitorId: user?.id || null,
					postId: post?.id,
					type: VisitType.READED,
				},
			});
		}
	}, [post]);
	useEffect(() => {
		if (post && form && instance && id) {
			instance.refresh((post as any).meta);
			const deptIds = (post?.depts || [])?.map((dept) => dept.id);
			const formData = {
				title: post.title,
				deptIds: deptIds,
			};
			// post.terms?.forEach((term) => {
			// 	formData[term.taxonomyId] = term.id; // 假设 taxonomyName是您在 Form.Item 中使用的name
			// });

			// 按 taxonomyId 分组所有 terms
			const termsByTaxonomy = {};
			post.terms?.forEach((term) => {
				if (!termsByTaxonomy[term.taxonomyId]) {
					termsByTaxonomy[term.taxonomyId] = [];
				}
				termsByTaxonomy[term.taxonomyId].push(term.id);
			});

			// 将分组后的 terms 设置到 formData
			Object.entries(termsByTaxonomy).forEach(([taxonomyId, termIds]) => {
				formData[taxonomyId] = termIds;
			});
			form.setFieldsValue(formData);
		}
	}, [post, form, instance, id]);
	useEffect(() => {
		if (!containerRef.current) return;
		const mind = new MindElixir({
			...MIND_OPTIONS,
			el: containerRef.current,
			before: {
				beginEdit() {
					return canEdit;
				},
			},
			draggable: canEdit, // 禁用拖拽
			contextMenu: canEdit, // 禁用右键菜单
			toolBar: canEdit, // 禁用工具栏
			nodeMenu: canEdit, // 禁用节点右键菜单
			keypress: canEdit, // 禁用键盘快捷键
		});
		mind.install(CustomLinkIconPlugin);
		mind.init(MindElixir.new("新思维导图"));
		containerRef.current.hidden = true;
		//挂载实例
		setInstance(mind);
		
	}, [canEdit]);
	useEffect(() => {
		handleIcon()
	});
	useEffect(() => {
		if ((!id || post) && instance) {
			containerRef.current.hidden = false;
			instance.toCenter();
			if ((post as any as PathDto)?.meta?.nodeData) {
				instance.refresh((post as any as PathDto)?.meta);
			}
		}
	}, [id, post, instance]);
	//保存 按钮 函数
	const handleSave = async () => {
		if (!instance) return;
		const values = form.getFieldsValue();
		//以图片格式导出思维导图以作为思维导图封面
		const imgBlob = await instance?.exportPng();
		handleFileUpload(
			imgBlob,
			async (result) => {
				const termIds = taxonomies
					.flatMap((tax) => values[tax.id] || []) // 获取每个 taxonomy 对应的选中值并展平
					.filter((id) => id); // 过滤掉空值
				const deptIds = (values?.deptIds || []) as string[];
				const { theme, ...data } = instance.getData();
				try {
					if (post && id) {
						const params: Prisma.PostUpdateArgs = {
							where: {
								id,
							},
							data: {
								title: data.nodeData.topic,
								meta: {
									...data,
									thumbnail: result.compressedUrl,
								},
								terms: {
									set: termIds.map((id) => ({ id })),
								},
								depts: {
									set: deptIds.map((id) => ({ id })),
								},
								updatedAt: new Date(),
							},
						};
						await update.mutateAsync(params);
						toast.success("更新成功");
					} else {
						const params: Prisma.PostCreateInput = {
							type: PostType.PATH,
							title: data.nodeData.topic,
							meta: { ...data, thumbnail: result.compressedUrl },
							terms: {
								connect: termIds.map((id) => ({ id })),
							},
							depts: {
								connect: deptIds.map((id) => ({ id })),
							},
							updatedAt: new Date(),
						};

						const res = await create.mutateAsync({ data: params });
						navigate(`/path/editor/${res.id}`, { replace: true });
						toast.success("创建成功");
					}
				} catch (error) {
					toast.error("保存失败");
					throw error;
				}
				console.log(result);
			},
			(error) => { },
			`mind-thumb-${new Date().toString()}`
		);
	};
	useEffect(() => {
		containerRef.current.style.height = `${Math.floor(window.innerHeight - 271)}px`;
	}, []);
	return (
		<div className={` flex-col  flex `}>
			{taxonomies && (
				<Form form={form} className=" bg-white p-4 border-b">
					<div className="flex items-center   justify-between gap-4">
						<div className="flex items-center gap-4">
							{taxonomies.map((tax, index) => (
								<Form.Item
									key={tax.id}
									name={tax.id}
									// rules={[{ required: true }]}
									noStyle>
									<TermSelect
										maxTagCount={1}
										multiple
										disabled={!canEdit}
										className=" w-56"
										placeholder={`请选择${tax.name}`}
										taxonomyId={tax.id}
									/>
								</Form.Item>
							))}
							<Form.Item
								// rules={[{ required: true }]}
								name="deptIds"
								noStyle>
								<DepartmentSelect
									disabled={!canEdit}
									className="w-96"
									placeholder="请选择制作单位"
									multiple
								/>
							</Form.Item>
							{post && id ? <JoinButton></JoinButton> : <></>}
						</div>
						<div>
							{canEdit && (
								<Button
									ghost
									type="primary"
									icon={<SaveOutlined></SaveOutlined>}
									onSubmit={(e) => e.preventDefault()}
									onClick={handleSave}>
									{id ? "更新" : "保存"}
								</Button>
							)}
						</div>
					</div>
				</Form>
			)}
			<div
				ref={containerRef}
				className="w-full"
				onContextMenu={(e) => e.preventDefault()}
			/>
			{canEdit && instance && <NodeMenu mind={instance} />}
			{isLoading && (
				<div
					className="py-64 justify-center flex"
					style={{ height: "calc(100vh - 271px)" }}>
					<Spin size="large"></Spin>
				</div>
			)}
			{!post && id && !isLoading && (
				<div
					className="py-64"
					style={{ height: "calc(100vh - 271px)" }}>
					<Empty></Empty>
				</div>
			)}
		</div>
	);
}