{props?.footer}
}
+ {!props?.footer && (
+ <>
+
+ {
+ // console.log(e, direction, ref, d);
+ }}
+ enable={{
+ bottom: true,
+ right: true,
+ bottomRight: true,
+ }}>
+ {props.content}
+
+
+ {props.title || 'Move'}
+ {
+ e.stopPropagation();
+ props.onClick?.();
+ }}>
+
+ );
+};
+
+export const getComputedHeight = () => {
+ const height = window.innerHeight;
+ const width = window.innerWidth;
+ return { height, width };
+};
+
+export const useComputedHeight = () => {
+ const [computedHeight, setComputedHeight] = useState({
+ height: 0,
+ width: 0,
+ });
+ useEffect(() => {
+ const height = window.innerHeight;
+ const width = window.innerWidth;
+ setComputedHeight({ height, width });
+ }, []);
+ return computedHeight;
+};
+
+export const useDragSize = (width = 600, heigth = 400) => {
+ const computedHeight = getComputedHeight();
+ const isMin = computedHeight.width < width;
+ return {
+ defaultSize: {
+ width: isMin ? computedHeight.width : 600,
+ height: 400,
+ },
+ style: {
+ left: isMin ? 0 : computedHeight.width / 2 - width / 2,
+ top: computedHeight.height / 2 - heigth / 2,
+ },
+ };
+};
diff --git a/src/components/a/input.tsx b/src/components/a/input.tsx
new file mode 100644
index 0000000..bba456d
--- /dev/null
+++ b/src/components/a/input.tsx
@@ -0,0 +1,92 @@
+import { Input as UIInput } from '@/components/ui/input';
+import React, { useState, useRef, useEffect } from 'react';
+
+export type InputProps = { label?: string } & React.ComponentProps<'input'>;
+export const Input = (props: InputProps) => {
+ return
+ {props.title}
+ {props.children}
+
+ {
+ e.stopPropagation();
+ props.onClose?.();
+ }}>
+
+
+ {showLabel && label && (
+
+ )}
+
+ );
+};
diff --git a/src/components/a/menu.tsx b/src/components/a/menu.tsx
new file mode 100644
index 0000000..7727cec
--- /dev/null
+++ b/src/components/a/menu.tsx
@@ -0,0 +1,39 @@
+import {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuItem,
+} from '@/components/ui/dropdown-menu';
+import { useEffect, useState } from 'react';
+type Props = {
+ children?: React.ReactNode;
+ className?: string;
+ options?: { label: string; value: string }[];
+ onSelect?: (value: string) => void;
+};
+
+export const Menu = (props: Props) => {
+ const [open, setOpen] = useState(false);
+ const [selectedValue, setSelectedValue] = useState('');
+
+ const handleSelect = (value: string) => {
+ setSelectedValue(value);
+ props.onSelect?.(value);
+ setOpen(false);
+ };
+ const showSelectedValue = selectedValue || 'Select an option';
+ return (
+ inputRef.current?.focus()}
+ >
+ {value.map((tag, idx) => (
+
+ {tag}
+
+
+ ))}
+
+
+ {props.title}
+
+ {images.map((image) => {
+ const isUrl = refFiles.current[image]?.dataURL?.startsWith?.('http');
+ const dataURL = refFiles.current[image]?.dataURL;
+ return (
+
+ );
+};
+
+export const ExcalidrawExpand = (props: { onClose: () => void }) => {
+ const { onClose } = props;
+ const [docked, setDocked] = useState(false);
+ const store = useMarkStore(
+ useShallow((state) => {
+ return {
+ loading: state.loading,
+ updateMark: state.updateMark,
+ api: state.api,
+ };
+ }),
+ );
+ const { lang, setLang, isZh } = useListenLang();
+ return (
+ <>
+ {store.loading && (
+
+ 
+
+ );
+ })}
+
+ {isUrl &&
+ {dataURL}
}
+ {refFiles.current[image]?.name}
+ {refFiles.current[image]?.type}
+ {refFiles.current[image]?.id}
+
+
+
+ )}
+
+
+
+
+
+
+
+ {
+ if (data.id !== id) {
+ setId('');
+ const url = new URL(location.href);
+ url.searchParams.set('id', data.id);
+ console.log('set url', url.toString());
+ setHistoryState({}, url.toString());
+ setTimeout(() => {
+ setId(data.id);
+ }, 200);
+ const _store = useManagerStore.getState();
+ if (_store.markData) {
+ _store.setCurrentMarkId('');
+ // _store.setOpen(false);
+ _store.setMarkData(undefined);
+ }
+ } else if (data.id === id) {
+ toast.success('已选择当前画布');
+ }
+ console.log('onClick', data, id);
+ }}>
+
+
+ );
+};
+
+export const DrawWrapper = (props: { id?: string; setId: (id: string) => void }) => {
+ const { id, setId } = props;
+ const store = useManagerStore(
+ useShallow((state) => {
+ return {
+ currentMarkId: state.currentMarkId,
+ };
+ }),
+ );
+ console.log('DrawApp store', store);
+ return (
+ <>
+ {id ? (
+
+
+ {store.currentMarkId ? '' : '请先选择一个画布'}
+ )}
+
+ );
+};
diff --git a/src/pages/draw/store/index.ts b/src/pages/draw/store/index.ts
new file mode 100644
index 0000000..d74f7c3
--- /dev/null
+++ b/src/pages/draw/store/index.ts
@@ -0,0 +1,215 @@
+import { StoreManager } from '@kevisual/store';
+import { useContextKey } from '@kevisual/context';
+import { StateCreator, StoreApi, UseBoundStore } from 'zustand';
+import { queryMark } from '../modules/query';
+import { useStore, BoundStore } from '@kevisual/store/react';
+import { createStore, set as setCache, get as getCache } from 'idb-keyval';
+import { OrderedExcalidrawElement } from '@excalidraw/excalidraw/element/types';
+import { toast } from 'sonner';
+import { BinaryFileData, ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types';
+export const cacheStore = createStore('excalidraw-store', 'excalidraw');
+
+export const store = useContextKey('store', () => {
+ return new StoreManager();
+});
+
+type MarkStore = {
+ id: string;
+ setId: (id: string) => void;
+ mark: any;
+ setMark: (mark: any) => void;
+ info: any;
+ setInfo: (info: any) => void;
+ getList: () => Promise
+
+ );
+};
+
+export const EditMark = () => {
+ const { markData } = useManagerStore(
+ useShallow((state) => {
+ return {
+ markData: state.markData,
+ };
+ }),
+ );
+ const mark = markData;
+ if (!mark) {
+ return null;
+ }
+ if (mark) {
+ return
+
+
+ (
+
+
+ {
+ if (event.key === 'Enter') {
+ setSearch(field.value);
+ if (!field.value) {
+ getList();
+ }
+ }
+ }}
+ />
+
+ )}
+ />
+
+ setSearch(field.value)} />
+
+
+ {showSelect && (
+ <>
+
+
+ )}
+
+ {markData && (
+
+ )}
+
+
+ {list.map((item, index) => {
+ const isCurrent = item.id === currentMarkId;
+ return (
+
+ {
+ onClick?.(item, e as any);
+ e.stopPropagation();
+ e.preventDefault();
+ }}>
+
+ );
+ })}
+
+
+ {item.title}
+
+
+
+
+ 类型: {item.markType}
+ 概要: {item.summary}
+ 标签: {item.tags?.join?.(', ')}
+ {/* 描述: {item.description}
*/}
+ {
+ window.open(item.link, '_blank');
+ }}>
+ 链接: {item.link}
+
+ 创建时间: {dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}
+ 更新时间: {dayjs(item.updatedAt).format('YYYY-MM-DD HH:mm:ss')}
+
+ {list.length < pagination.total && (
+
+ )}
+
+
+
+ );
+};
+export type AppProps = {
+ /**
+ * 标记类型， wallnote md excalidraw
+ */
+ markType?: MarkType;
+ /**
+ * 是否显示搜索框
+ */
+ showSearch?: boolean;
+ /**
+ * 是否显示添加按钮
+ */
+ showAdd?: boolean;
+ /**
+ * 点击事件
+ */
+ onClick?: (data?: any) => void;
+ /**
+ * 管理器id, 存储到store的id
+ */
+ managerId?: string;
+ children?: React.ReactNode;
+ showSelect?: boolean;
+ openMenu?: boolean;
+ hasTopTitle?: boolean; // 是否有顶部标题
+};
+export const ProviderManagerName = 'mark-manager';
+export const App = (props: AppProps) => {
+ return (
+
+ {
+ setOpenMenu(!openMenu);
+ }}>
+
+
+ {props.children}
+ {(!props.expandChildren || isEdit) && (
+
+
+ )}
+ {props.expandChildren && {props.expandChildren}
}
+ Home Page
-}
+import App from './draw/page'
-export default Home;
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index dc7587d..434db06 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,6 +1,7 @@
import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
import { Toaster } from "@/components/ui/sonner"
+import { Auth } from '@/pages/auth/layout'
export const Route = createRootRoute({
component: RootComponent,
@@ -8,7 +9,7 @@ export const Route = createRootRoute({
function RootComponent() {
return (
- <>
+