(null);
+ if (!html) return 空
;
+ const [highlightHtml, setHighlightHtml] = useState('');
+ const highlight = async (html: string) => {
+ const _html = html.replace(/([\s\S]*?)<\/code><\/pre>/g, (match, p1, p2) => {
+ return `${hljs.highlight(p2, { language: p1 }).value}
`;
+ });
+ return _html;
+ };
+ useEffect(() => {
+ highlight(html).then((res) => {
+ setHighlightHtml(res);
+ });
+ }, [html]);
+
+ return (
+
+ );
+};
+
+export const CustomNode = (props: { id: string; data: WallData; selected: boolean }) => {
+ const data = props.data;
+ const contentRef = useRef(null);
+ const selected = props.selected;
+ const wallStore = useWallStore(
+ useShallow((state) => {
+ return {
+ setOpen: state.setOpen,
+ setSelectedNode: state.setSelectedNode,
+ saveNodes: state.saveNodes,
+ };
+ }),
+ );
+ const store = useStore((state) => {
+ return {
+ updateWallRect: (id: string, rect: { width: number; height: number }) => {
+ const nodes = state.nodes.map((node) => {
+ if (node.id === id) {
+ node.data.width = rect.width;
+ node.data.height = rect.height;
+ }
+ return node;
+ });
+ state.setNodes(nodes);
+ wallStore.saveNodes(nodes);
+ },
+ getNode: (id: string) => {
+ return state.nodes.find((node) => node.id === id);
+ },
+ deleteNode: (id: string) => {
+ const nodes = state.nodes.filter((node) => node.id !== id);
+ state.setNodes(nodes);
+ wallStore.saveNodes(nodes);
+ },
+ };
+ });
+ useEffect(() => {
+ if (selected) {
+ const handleDelete = (e: KeyboardEvent) => {
+ if (e.key === 'Delete') {
+ store.deleteNode(props.id);
+ }
+ };
+ window.addEventListener('keydown', handleDelete);
+ return () => window.removeEventListener('keydown', handleDelete);
+ }
+ }, [selected]);
+ const width = data.width || 100;
+ const height = data.height || 100;
+ const style: React.CSSProperties = {};
+ style.width = width;
+ style.height = height;
+ const showOpen = () => {
+ const node = store.getNode(props.id);
+ if (node) {
+ wallStore.setOpen(true);
+ wallStore.setSelectedNode(node);
+ } else {
+ message.error('节点不存在');
+ }
+ };
+ return (
+ <>
+ {
+ showOpen();
+ // e.stopPropagation();
+ e.preventDefault();
+ }}
+ className={clsx('w-full h-full border relative border-gray-300 min-w-[100px] min-h-[50px] tiptap-preview')}
+ style={style}>
+
+
+
+
+
+ {}}
+ isVisible={props.selected}
+ onResizeEnd={(e) => {
+ const parent = contentRef.current?.parentElement;
+ if (!parent) return;
+ const width = parent.style.width;
+ const height = parent.style.height;
+ const widthNum = parseInt(width);
+ const heightNum = parseInt(height);
+ if (!heightNum || !widthNum) return;
+ store.updateWallRect(props.id, { width: widthNum, height: heightNum });
+ }}
+ />
+
+ );
+};
+export const WallNoteNode = memo(CustomNode);
+export const CustomNodeType = {
+ wall: WallNoteNode,
+};
diff --git a/src/pages/wall/modules/Drawer.tsx b/src/pages/wall/modules/Drawer.tsx
new file mode 100644
index 0000000..e7eefab
--- /dev/null
+++ b/src/pages/wall/modules/Drawer.tsx
@@ -0,0 +1,106 @@
+import { useWallStore } from '../store/wall'; // 确保导入正确的路径
+import clsx from 'clsx';
+import { X } from 'lucide-react'; // 导入 Close 图标
+import { Editor } from '@/pages/editor';
+import { useEffect, useState } from 'react';
+import { useStore, useStoreApi } from '@xyflow/react';
+import { BlankNoteText } from '../constants';
+import { message } from '@/modules/message';
+import { useShallow } from 'zustand/react/shallow';
+import { isMac } from '../utils/is-mac';
+const Drawer = () => {
+ const { open, setOpen, selectedNode, setSelectedNode, editValue, setEditValue } = useWallStore(
+ useShallow((state) => ({
+ open: state.open,
+ setOpen: state.setOpen,
+ selectedNode: state.selectedNode,
+ setSelectedNode: state.setSelectedNode,
+ editValue: state.editValue,
+ setEditValue: state.setEditValue,
+ })),
+ );
+ const store = useStore((state) => state);
+ const storeApi = useStoreApi();
+ useEffect(() => {
+ if (open && selectedNode) {
+ setEditValue(selectedNode?.data.html);
+ }
+ }, [open, selectedNode]);
+ useEffect(() => {
+ return () => {
+ setOpen(false);
+ setSelectedNode(null);
+ };
+ }, []);
+ const listener = async (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ setOpen(false);
+ }
+
+ const systemKey = e.metaKey || e.ctrlKey;
+
+ // mac command+s windows ctrl+s
+ if (systemKey && e.key === 's') {
+ onSave();
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ };
+ useEffect(() => {
+ window.addEventListener('keydown', listener);
+ return () => {
+ window.removeEventListener('keydown', listener);
+ };
+ }, []);
+ const onSave = () => {
+ const wallStore = useWallStore.getState();
+ const selectedNode = wallStore.selectedNode;
+ const _editValue = wallStore.editValue;
+ if (selectedNode && _editValue) {
+ selectedNode.data.html = _editValue;
+ const newNodes = storeApi.getState().nodes.map((node) => (node.id === selectedNode.id ? selectedNode : node));
+ storeApi.setState({ nodes: newNodes });
+ if (wallStore.id) {
+ message.success('保存成功', {
+ closeOnClick: true,
+ });
+ }
+ wallStore.saveNodes(newNodes);
+ }
+ };
+ let html = selectedNode?.data?.html || '';
+ if (html === BlankNoteText) {
+ html = '';
+ }
+ return (
+
+
+
+ {selectedNode && (
+
+
+
+ )}
+
+
+ {selectedNode && open && }
+
+
+ {children}
+
+ );
+};
+// 空白处点击，当不包函toolbar时候，关闭toolbar
+export const useBlankClick = () => {
+ const { setToolbarOpen } = useWallStore(
+ useShallow((state) => {
+ return {
+ setToolbarOpen: state.setToolbarOpen,
+ };
+ }),
+ );
+ useEffect(() => {
+ const handleClick = (e: MouseEvent) => {
+ // 点击的内容，closest('.toolbar')
+ const target = e.target as HTMLElement;
+ const toolbar = target.closest('.toolbar'); // 往上找，找到toolbar为止
+ console.log('toolbar', target, toolbar);
+ // if (!toolbar) {
+ // setToolbarOpen(false);
+ // }
+ };
+ console.log('add event');
+ document.addEventListener('click', handleClick);
+ return () => {
+ document.removeEventListener('click', handleClick);
+ };
+ }, []);
+};
+export const ToolbarContent = ({ open }) => {
+ if (!open) {
+ return null;
+ }
+ const wallStore = useWallStore(useShallow((state) => state));
+ const userWallStore = useUserWallStore(useShallow((state) => state));
+ const store = useStore((state) => state);
+ const hasLogin = !!userWallStore.user;
+ const navigate = useNavigate();
+ type MenuItem = {
+ label: string;
+ key: string;
+ icon?: React.ReactNode;
+ children?: React.ReactNode;
+ className?: string;
+ onClick: () => any;
+ };
+ const menuList: MenuItem[] = [
+ {
+ label: '导出',
+ key: 'export',
+ icon: ,
+ onClick: () => {
+ wallStore.exportWall(store.nodes);
+ },
+ },
+ {
+ label: '导入',
+ key: 'import',
+ icon: ,
+ children: (
+ <>
+
+
+
+ 导入
+ {
+ const file = e.target.files?.[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const data = e.target?.result;
+ const json = JSON.parse(data as string);
+ const keys = ['id', 'type', 'position', 'data'];
+ if (Array.isArray(json) && json.every((item) => keys.every((key) => item[key]))) {
+ const nodes = store.nodes;
+ const newNodes = json.filter((item) => {
+ return !nodes.find((node) => node.id === item.id);
+ });
+ const _nodes = [...nodes, ...newNodes];
+ store.setNodes(_nodes);
+ wallStore.saveNodes(_nodes);
+ } else {
+ message.error('文件格式错误');
+ }
+ };
+ reader.readAsText(file);
+ }
+ }}
+ />
+
+ ),
+ onClick: () => {
+ const input = document.querySelector('#import-file')! as HTMLInputElement;
+ if (input) {
+ input.click();
+ } else {
+ message.error('请选择文件');
+ }
+ },
+ },
+ {
+ label: '清空',
+ key: 'clear',
+ icon: ,
+ onClick: async () => {
+ await wallStore.clear();
+ message.success('清空成功');
+ store.setNodes([]);
+ },
+ },
+ ];
+
+ if (!hasLogin) {
+ menuList.push({
+ label: '登录',
+ key: 'login',
+ icon: ,
+ onClick: () => {
+ redirectToLogin();
+ },
+ });
+ if (wallStore.id) {
+ menuList.push({
+ label: '删除',
+ key: 'delete',
+ icon: ,
+ onClick: async () => {
+ const res = await userWallStore.deleteWall(wallStore.id!);
+ if (res.code === 200) {
+ navigate('/');
+ }
+ },
+ });
+ }
+ } else {
+ if (!wallStore.id) {
+ menuList.push({
+ label: '保存到账号',
+ key: 'saveToAccount',
+ icon: ,
+ onClick: () => {
+ wallStore.setShowFormDialog(true);
+ wallStore.setFormDialogData({
+ title: '',
+ description: '',
+ tags: [],
+ summary: '',
+ });
+ },
+ });
+ } else {
+ menuList.push({
+ label: '编辑信息',
+ key: 'saveToAccount',
+ icon: ,
+ onClick: () => {
+ wallStore.setShowFormDialog(true);
+ const data = wallStore.data;
+ wallStore.setFormDialogData({
+ title: data?.title,
+ description: data?.description,
+ tags: data?.tags,
+ summary: data?.summary,
+ });
+ },
+ });
+ menuList.push({
+ label: '新增',
+ key: 'add',
+ icon: ,
+ onClick: () => {
+ navigate(`/`);
+ wallStore.clearQueryWall();
+ },
+ });
+ menuList.push({
+ label: '删除',
+ key: 'delete',
+ icon: ,
+ className: 'text-red-500',
+ onClick: async () => {
+ const res = await userWallStore.deleteWall(wallStore.id!);
+ if (res.code === 200) {
+ message.success('删除成功，返回首页');
+ wallStore.clearQueryWall();
+ navigate('/');
+ }
+ },
+ });
+ }
+ menuList.push({
+ label: '退出 ',
+ key: 'logout',
+ icon: ,
+ onClick: () => {
+ userWallStore.logout();
+ },
+ });
+ }
+ return (
+ wallStore.setToolbarOpen(false)}>
+
+ {menuList.map((item) => (
+
{
+ item.onClick?.();
+ if (item.key !== 'import') {
+ wallStore.setToolbarOpen(false);
+ }
+ }}>
+ {item.children ? (
+ <>{item.children}
+ ) : (
+ <>
+ {item.icon}
+ {item.label}
+
+ )}
+
+ ))}
+
{wallStore.id ? 'id:' + wallStore.id : '临时编辑，资源缓存在本地'}
+ {hasLogin &&
用户: {userWallStore.user?.username}
}
+
+
setToolbarOpen(!toolbarOpen)}>
+
+
+
+
+
+
+
+
+ {wallStore.wallList.map((wall) => {
+ return (
+
{
+ navigate(`/wall/${wall.id}`);
+ }}>
+
+
+
{wall.summary}
+
+ {wall?.tags?.map?.((tag) => {
+ return (
+
+ {tag}
+
+ );
+ })}
+
+
+
+
{formatDate(wall?.createdAt, 'YYYY-MM-DD')}
+
{formatRelativeDate(wall?.createdAt)}
+
+
+ );
+ })}
+
+
+