add
This commit is contained in:
parent
49d3f613fc
commit
e6e2050ce1
|
@ -1,4 +1,4 @@
|
||||||
import { Input, Layout, Avatar, Button, Dropdown } from "antd";
|
import { Input, Button } from "antd";
|
||||||
import {
|
import {
|
||||||
EditFilled,
|
EditFilled,
|
||||||
PlusOutlined,
|
PlusOutlined,
|
||||||
|
@ -10,7 +10,6 @@ import { useNavigate, useParams, useSearchParams } from "react-router-dom";
|
||||||
import { UserMenu } from "./UserMenu/UserMenu";
|
import { UserMenu } from "./UserMenu/UserMenu";
|
||||||
import { NavigationMenu } from "./NavigationMenu";
|
import { NavigationMenu } from "./NavigationMenu";
|
||||||
import { useMainContext } from "./MainProvider";
|
import { useMainContext } from "./MainProvider";
|
||||||
import { Header } from "antd/es/layout/layout";
|
|
||||||
|
|
||||||
export function MainHeader() {
|
export function MainHeader() {
|
||||||
const { isAuthenticated, user } = useAuth();
|
const { isAuthenticated, user } = useAuth();
|
||||||
|
|
|
@ -3,12 +3,11 @@ import NodeMenu from "./NodeMenu";
|
||||||
import { api, usePost } from "@nice/client";
|
import { api, usePost } from "@nice/client";
|
||||||
import {
|
import {
|
||||||
ObjectType,
|
ObjectType,
|
||||||
|
PathDto,
|
||||||
postDetailSelect,
|
postDetailSelect,
|
||||||
PostDto,
|
|
||||||
PostType,
|
PostType,
|
||||||
Prisma,
|
Prisma,
|
||||||
RolePerms,
|
RolePerms,
|
||||||
Taxonomy,
|
|
||||||
} from "@nice/common";
|
} from "@nice/common";
|
||||||
import TermSelect from "../../models/term/term-select";
|
import TermSelect from "../../models/term/term-select";
|
||||||
import DepartmentSelect from "../../models/department/department-select";
|
import DepartmentSelect from "../../models/department/department-select";
|
||||||
|
@ -19,45 +18,12 @@ import MindElixir from "mind-elixir";
|
||||||
import { useTusUpload } from "@web/src/hooks/useTusUpload";
|
import { useTusUpload } from "@web/src/hooks/useTusUpload";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { useAuth } from "@web/src/providers/auth-provider";
|
import { useAuth } from "@web/src/providers/auth-provider";
|
||||||
const MIND_OPTIONS = {
|
import { MIND_OPTIONS } from "./constant";
|
||||||
direction: MindElixir.SIDE,
|
|
||||||
draggable: true,
|
|
||||||
contextMenu: true,
|
|
||||||
toolBar: true,
|
|
||||||
nodeMenu: true,
|
|
||||||
keypress: true,
|
|
||||||
locale: "zh_CN" as const,
|
|
||||||
theme: {
|
|
||||||
name: "Latte",
|
|
||||||
palette: [
|
|
||||||
"#dd7878",
|
|
||||||
"#ea76cb",
|
|
||||||
"#8839ef",
|
|
||||||
"#e64553",
|
|
||||||
"#fe640b",
|
|
||||||
"#df8e1d",
|
|
||||||
"#40a02b",
|
|
||||||
"#209fb5",
|
|
||||||
"#1e66f5",
|
|
||||||
"#7287fd",
|
|
||||||
],
|
|
||||||
cssVar: {
|
|
||||||
"--main-color": "#444446",
|
|
||||||
"--main-bgcolor": "#ffffff",
|
|
||||||
"--color": "#777777",
|
|
||||||
"--bgcolor": "#f6f6f6",
|
|
||||||
"--panel-color": "#444446",
|
|
||||||
"--panel-bgcolor": "#ffffff",
|
|
||||||
"--panel-border-color": "#eaeaea",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
export default function MindEditor({ id }: { id?: string }) {
|
export default function MindEditor({ id }: { id?: string }) {
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
const [instance, setInstance] = useState<MindElixirInstance | null>(null);
|
const [instance, setInstance] = useState<MindElixirInstance | null>(null);
|
||||||
const { isAuthenticated, user, hasSomePermissions } = useAuth();
|
const { isAuthenticated, user, hasSomePermissions } = useAuth();
|
||||||
|
const { data: post, isLoading }: { data: PathDto; isLoading: boolean } =
|
||||||
const { data: post, isLoading }: { data: PostDto; isLoading: boolean } =
|
|
||||||
api.post.findFirst.useQuery({
|
api.post.findFirst.useQuery({
|
||||||
where: {
|
where: {
|
||||||
id,
|
id,
|
||||||
|
@ -66,9 +32,9 @@ export default function MindEditor({ id }: { id?: string }) {
|
||||||
});
|
});
|
||||||
const canEdit: boolean = useMemo(() => {
|
const canEdit: boolean = useMemo(() => {
|
||||||
//登录了且是作者、超管、无id新建模式
|
//登录了且是作者、超管、无id新建模式
|
||||||
const isAuth = isAuthenticated && user?.id == post?.author.id
|
const isAuth = isAuthenticated && user?.id === post?.author?.id;
|
||||||
return !Boolean(id) || isAuth || hasSomePermissions(RolePerms.MANAGE_ANY_POST);
|
return !!id || isAuth || hasSomePermissions(RolePerms.MANAGE_ANY_POST);
|
||||||
}, [user])
|
}, [user]);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { create, update } = usePost();
|
const { create, update } = usePost();
|
||||||
const { data: taxonomies } = api.taxonomy.getAll.useQuery({
|
const { data: taxonomies } = api.taxonomy.getAll.useQuery({
|
||||||
|
@ -91,7 +57,6 @@ export default function MindEditor({ id }: { id?: string }) {
|
||||||
form.setFieldsValue(formData);
|
form.setFieldsValue(formData);
|
||||||
}
|
}
|
||||||
}, [post, form, instance, id]);
|
}, [post, form, instance, id]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!containerRef.current) return;
|
if (!containerRef.current) return;
|
||||||
const mind = new MindElixir({
|
const mind = new MindElixir({
|
||||||
|
@ -99,8 +64,8 @@ export default function MindEditor({ id }: { id?: string }) {
|
||||||
el: containerRef.current,
|
el: containerRef.current,
|
||||||
before: {
|
before: {
|
||||||
beginEdit() {
|
beginEdit() {
|
||||||
return canEdit
|
return canEdit;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
draggable: canEdit, // 禁用拖拽
|
draggable: canEdit, // 禁用拖拽
|
||||||
contextMenu: canEdit, // 禁用右键菜单
|
contextMenu: canEdit, // 禁用右键菜单
|
||||||
|
@ -116,7 +81,9 @@ export default function MindEditor({ id }: { id?: string }) {
|
||||||
if ((!id || post) && instance) {
|
if ((!id || post) && instance) {
|
||||||
containerRef.current.hidden = false;
|
containerRef.current.hidden = false;
|
||||||
instance.toCenter();
|
instance.toCenter();
|
||||||
instance.refresh((post as any)?.meta);
|
if (post?.meta?.nodeData) {
|
||||||
|
instance.refresh(post?.meta);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, [id, post, instance]);
|
}, [id, post, instance]);
|
||||||
const handleSave = async () => {
|
const handleSave = async () => {
|
||||||
|
@ -185,9 +152,7 @@ export default function MindEditor({ id }: { id?: string }) {
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-1 flex-col w-[90vw] my-5 h-[90vh] border rounded-lg mx-auto">
|
<div className="grid grid-cols-1 flex-col w-[90vw] my-5 h-[90vh] border rounded-lg mx-auto">
|
||||||
{canEdit && taxonomies && (
|
{canEdit && taxonomies && (
|
||||||
<Form
|
<Form form={form} className=" bg-white p-4 ">
|
||||||
form={form}
|
|
||||||
className=" bg-white p-4 ">
|
|
||||||
<div className="flex items-center justify-between gap-4">
|
<div className="flex items-center justify-between gap-4">
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
{taxonomies.map((tax, index) => (
|
{taxonomies.map((tax, index) => (
|
||||||
|
@ -214,13 +179,21 @@ export default function MindEditor({ id }: { id?: string }) {
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</div>
|
</div>
|
||||||
<Button ghost type="primary" onSubmit={(e) => e.preventDefault()} onClick={handleSave}>
|
<Button
|
||||||
|
ghost
|
||||||
|
type="primary"
|
||||||
|
onSubmit={(e) => e.preventDefault()}
|
||||||
|
onClick={handleSave}>
|
||||||
{id ? "更新" : "保存"}
|
{id ? "更新" : "保存"}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
)}
|
)}
|
||||||
<div ref={containerRef} className="mind-editor" onContextMenu={(e)=>e.preventDefault()} />
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className="mind-editor"
|
||||||
|
onContextMenu={(e) => e.preventDefault()}
|
||||||
|
/>
|
||||||
{canEdit && instance && <NodeMenu mind={instance} />}
|
{canEdit && instance && <NodeMenu mind={instance} />}
|
||||||
{isLoading && (
|
{isLoading && (
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -0,0 +1,34 @@
|
||||||
|
import MindElixir from "mind-elixir";
|
||||||
|
export const MIND_OPTIONS = {
|
||||||
|
direction: MindElixir.SIDE,
|
||||||
|
draggable: true,
|
||||||
|
contextMenu: true,
|
||||||
|
toolBar: true,
|
||||||
|
nodeMenu: true,
|
||||||
|
keypress: true,
|
||||||
|
locale: "zh_CN" as const,
|
||||||
|
theme: {
|
||||||
|
name: "Latte",
|
||||||
|
palette: [
|
||||||
|
"#dd7878",
|
||||||
|
"#ea76cb",
|
||||||
|
"#8839ef",
|
||||||
|
"#e64553",
|
||||||
|
"#fe640b",
|
||||||
|
"#df8e1d",
|
||||||
|
"#40a02b",
|
||||||
|
"#209fb5",
|
||||||
|
"#1e66f5",
|
||||||
|
"#7287fd",
|
||||||
|
],
|
||||||
|
cssVar: {
|
||||||
|
"--main-color": "#444446",
|
||||||
|
"--main-bgcolor": "#ffffff",
|
||||||
|
"--color": "#777777",
|
||||||
|
"--bgcolor": "#f6f6f6",
|
||||||
|
"--panel-color": "#444446",
|
||||||
|
"--panel-bgcolor": "#ffffff",
|
||||||
|
"--panel-border-color": "#eaeaea",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
Loading…
Reference in New Issue