diff --git a/package.json b/package.json index f6d800b..21a66cb 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "license": "MIT", "dependencies": { "@kevisual/query-mark": "workspace:*", + "@kevisual/components": "workspace:*", "@kevisual/router": "0.0.9", "@kevisual/store": "workspace:*", "@types/lodash-es": "^4.17.12", @@ -28,6 +29,7 @@ "react": "^19.0.0", "react-dom": "^19.0.0", "react-hook-form": "^7.54.2", + "react-i18next": "^15.4.1", "react-toastify": "^11.0.5", "zustand": "^5.0.3" }, diff --git a/src/Module.tsx b/src/Module.tsx new file mode 100644 index 0000000..7e5d634 --- /dev/null +++ b/src/Module.tsx @@ -0,0 +1,3 @@ +import { App as Manager } from './manager/Manager'; + +export { Manager }; diff --git a/src/manager/Manager.tsx b/src/manager/Manager.tsx index 67c8f6c..6516d94 100644 --- a/src/manager/Manager.tsx +++ b/src/manager/Manager.tsx @@ -2,7 +2,7 @@ import { useManagerStore } from './store'; import { useEffect, useMemo, useState } from 'react'; import { useShallow } from 'zustand/shallow'; import { ManagerProvider } from './Provider'; -import { ChevronDown, ChevronLeft, Edit, Plus, Search, Trash, Menu as MenuIcon, MenuSquare } from 'lucide-react'; +import { ChevronDown, ChevronLeft, X, Edit, Plus, Search, Trash, Menu as MenuIcon, MenuSquare } from 'lucide-react'; import dayjs from 'dayjs'; import { useTranslation } from 'react-i18next'; import { EditMark as EditMarkComponent } from './edit/Edit'; @@ -16,17 +16,19 @@ type ManagerProps = { showAdd?: boolean; onClick?: (data?: any) => void; markType?: MarkType; + showSelect?: boolean; }; export const Manager = (props: ManagerProps) => { - const { showSearch = true, showAdd = false, onClick } = props; + const { showSearch = true, showAdd = false, onClick, showSelect = true } = props; const { control } = useForm({ defaultValues: { search: '' } }); - const { list, init, setCurrentMarkId, currentMarkId, deleteMark, getMark, setMarkData, pagination, setPagination, getList, search, setSearch } = + const { list, init, setCurrentMarkId, currentMarkId, markData, deleteMark, getMark, setMarkData, pagination, setPagination, getList, search, setSearch } = useManagerStore( useShallow((state) => { return { list: state.list, init: state.init, + markData: state.markData, currentMarkId: state.currentMarkId, setCurrentMarkId: state.setCurrentMarkId, deleteMark: state.deleteMark, @@ -87,8 +89,9 @@ export const Manager = (props: ManagerProps) => { } }; console.log('list', list.length, pagination.total); + return ( -
+
{ />
- - - - { - console.log('e', e); - }}> - {['md', 'mdx', 'wallnote', 'excalidraw'].map((option) => ( - { - handleMenuItemClick(option); + {showSelect && ( + <> + + + + { + console.log('e', e); }}> - {option} - - ))} - + {['md', 'mdx', 'wallnote', 'excalidraw'].map((option) => ( + { + handleMenuItemClick(option); + }}> + {option} + + ))} + + + )} + {markData && ( + + )}
@@ -259,11 +276,25 @@ export const EditMark = () => { } return
; }; -export const LayoutMain = (props: { children?: React.ReactNode }) => { +export const LayoutMain = (props: { children?: React.ReactNode; expandChildren?: React.ReactNode }) => { const [openMenu, setOpenMenu] = useState(false); + const getDocumentHeight = () => { + return document.documentElement.scrollHeight; + }; + const markData = useManagerStore((state) => state.markData); + const isEdit = !!markData; + const hasExpandChildren = !!props.expandChildren; + const style = useMemo(() => { + if (!hasExpandChildren || openMenu) { + return {}; + } + return { + top: getDocumentHeight() / 2 + 10, + }; + }, [getDocumentHeight, hasExpandChildren, openMenu]); return (
-
+
{props.children}
- + {(!props.expandChildren || isEdit) && ( + + )} + {props.expandChildren &&
{props.expandChildren}
}
); }; @@ -305,12 +339,19 @@ export type AppProps = { * 管理器id, 存储到store的id */ managerId?: string; + children?: React.ReactNode; + showSelect?: boolean; }; export const App = (props: AppProps) => { return ( - - + + ); diff --git a/src/manager/edit/Edit.tsx b/src/manager/edit/Edit.tsx index 627701b..7aaee87 100644 --- a/src/manager/edit/Edit.tsx +++ b/src/manager/edit/Edit.tsx @@ -91,9 +91,20 @@ export const EditMark = () => { defaultValue={mark?.thumbnail || ''} render={({ field }) => } /> - +
+ + +
); }; diff --git a/src/manager/store/index.ts b/src/manager/store/index.ts index 3957827..d9b4e86 100644 --- a/src/manager/store/index.ts +++ b/src/manager/store/index.ts @@ -61,7 +61,7 @@ export const createManagerStore: StateCreator = (set, }, updateMark: async (mark: Mark) => { const queryMark = get().queryMark; - const res = await queryMark.updateMark(mark.id, mark); + const res = await queryMark.updateMark(mark); if (res.code === 200) { set((state) => { const oldList = state.list; diff --git a/vite.lib.config.ts b/vite.lib.config.ts new file mode 100644 index 0000000..f9660b8 --- /dev/null +++ b/vite.lib.config.ts @@ -0,0 +1,30 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import path from 'path'; +import tailwindcss from '@tailwindcss/vite'; +import pkgs from './package.json' with { type: 'json' }; +const version = pkgs.version || '0.0.1'; +const isDev = process.env.NODE_ENV === 'development'; + +const basename = isDev ? '/' : pkgs?.basename || '/'; +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react(), tailwindcss()], + resolve: { + alias: { + '@': path.resolve(__dirname, './src'), + }, + }, + base: basename, + define: { + BASE_NAME: JSON.stringify(basename), + }, + build: { + target: 'esnext', + lib: { + entry: path.resolve(__dirname, './src/pages/App.tsx'), + name: 'Mark', + fileName: (format) => `mark.${format}.js`, + }, + }, +});