rht

apps/web/src/components/common/editor/MindEditor.tsx

@@ -7,22 +7,24 @@ import {
 	PostDto,
 	PostType,
 	Prisma,
+	RolePerms,
 	Taxonomy,
 } from "@nice/common";
 import TermSelect from "../../models/term/term-select";
 import DepartmentSelect from "../../models/department/department-select";
-import { useEffect, useRef, useState } from "react";
+import { 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";
 const MIND_OPTIONS = {
 	direction: MindElixir.SIDE,
 	draggable: true,
 	contextMenu: true,
 	toolBar: true,
-	nodeMenu: true,
+	//nodeMenu: true,
 	keypress: true,
 	locale: "zh_CN" as const,
 	theme: {
@@ -53,6 +55,7 @@ const MIND_OPTIONS = {
 export default function MindEditor({ id }: { id?: string }) {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const [instance, setInstance] = useState<MindElixirInstance | null>(null);
+	const { isAuthenticated, user, hasSomePermissions } = useAuth();
 
 	const { data: post, isLoading }: { data: PostDto; isLoading: boolean } =
 		api.post.findFirst.useQuery({
@@ -61,6 +64,11 @@ export default function MindEditor({ id }: { id?: string }) {
 			},
 			select: postDetailSelect,
 		});
+	const canEdit: boolean = useMemo(() => {
+		//登录了且是作者、超管、无id新建模式
+		const isAuth = isAuthenticated && user?.id == post?.authorId; 
+		return !id || isAuth || hasSomePermissions(RolePerms.MANAGE_ANY_POST);
+	}, [user])
 	const navigate = useNavigate();
 	const { create, update } = usePost();
 	const { data: taxonomies } = api.taxonomy.getAll.useQuery({
@@ -89,11 +97,21 @@ export default function MindEditor({ id }: { id?: string }) {
 		const mind = new MindElixir({
 			...MIND_OPTIONS,
 			el: containerRef.current,
+			before:{
+				beginEdit(){
+					return canEdit
+				}
+			},
+			draggable: canEdit, // 禁用拖拽
+			contextMenu: canEdit, // 禁用右键菜单
+			toolBar: canEdit, // 禁用工具栏
+			nodeMenu: canEdit, // 禁用节点右键菜单
+			keypress: canEdit, // 禁用键盘快捷键
 		});
 		mind.init(MindElixir.new("新学习路径"));
 		containerRef.current.hidden = true;
 		setInstance(mind);
-	}, []);
+	}, [canEdit]);
 	useEffect(() => {
 		if ((!id || post) && instance) {
 			containerRef.current.hidden = false;
@@ -160,13 +178,13 @@ export default function MindEditor({ id }: { id?: string }) {
 				}
 				console.log(result);
 			},
-			(error) => {},
+			(error) => { },
 			`mind-thumb-${new Date().toString()}`
 		);
 	};
 	return (
-		<div className=" flex flex-col  border rounded-lg overflow-hidden">
+		<div className=" flex flex-col w-screen max-h-screen border rounded-lg overflow-hidden">
-			{taxonomies && (
+			{canEdit && taxonomies && (
 				<Form
 					onFinish={(values) => {
 						console.log(values);
@@ -205,8 +223,8 @@ export default function MindEditor({ id }: { id?: string }) {
 					</div>
 				</Form>
 			)}
-			<div ref={containerRef} className="mind-editor min-h-screen" />
+			<div ref={containerRef} className="mind-editor min-h-screen" onContextMenu={(e)=>e.preventDefault()} />
-			{instance && <NodeMenu mind={instance} />}
+			{canEdit && instance && <NodeMenu mind={instance} />}
 			{isLoading && (
 				<div
 					className="py-64 justify-center flex"