diff --git a/client/shared/index.tsx b/client/shared/index.tsx index 611c0301bc8..12085ade555 100644 --- a/client/shared/index.tsx +++ b/client/shared/index.tsx @@ -212,6 +212,7 @@ export { useHasGroupPermission, } from './redux/hooks/useGroupPermission'; export { useUserInfo, useUserId } from './redux/hooks/useUserInfo'; +export { useDragstatus, updateDragStatus } from './redux/hooks/usePanel' export { useInboxList, useInboxItem } from './redux/hooks/useInbox'; export { useUnread } from './redux/hooks/useUnread'; export { diff --git a/client/shared/redux/hooks/usePanel.ts b/client/shared/redux/hooks/usePanel.ts new file mode 100644 index 00000000000..fe0846475e3 --- /dev/null +++ b/client/shared/redux/hooks/usePanel.ts @@ -0,0 +1,27 @@ +import { useAppSelector ,useAppDispatch} from './useAppSelector'; +import {dragActions} from '../slices/drag' +import { useMemoizedFn } from '../..'; + +/** + * 返回面板拖拽状态 + */ +export function useDragstatus():boolean { + return useAppSelector((state) => state.drag.isDraging ?? []); +} + +export function updateDragStatus(){ + const dispatch = useAppDispatch(); + const setStatus = useMemoizedFn( + (status:boolean) => { + dispatch(dragActions.setDragStatus(status))} + ); + + /** + * 更新 + */ + const updateStatus= useMemoizedFn((status: boolean) => { + setStatus(status); + }); + return updateStatus ; +} + diff --git a/client/shared/redux/slices/drag.ts b/client/shared/redux/slices/drag.ts new file mode 100644 index 00000000000..83fa2de5d78 --- /dev/null +++ b/client/shared/redux/slices/drag.ts @@ -0,0 +1,29 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit'; + +export interface DragState { + /** + * 拖拽 + */ + isDraging:boolean + +} + +const initialState: DragState = { + isDraging: false, +}; + +const globalSlice = createSlice({ + name: 'global', + initialState, + reducers: { + setDragStatus( + state, + action: PayloadAction + ) { + state.isDraging = action.payload; + }, + }, +}); + +export const dragActions = globalSlice.actions; +export const dragReducer = globalSlice.reducer; diff --git a/client/shared/redux/slices/index.ts b/client/shared/redux/slices/index.ts index 968e9ca9669..55c2d3c3b76 100644 --- a/client/shared/redux/slices/index.ts +++ b/client/shared/redux/slices/index.ts @@ -4,6 +4,7 @@ import { chatReducer } from './chat'; import { groupReducer } from './group'; import { uiReducer } from './ui'; import { globalReducer } from './global'; +import { dragReducer } from './drag' export const appReducer = combineReducers({ global: globalReducer, @@ -11,6 +12,7 @@ export const appReducer = combineReducers({ chat: chatReducer, group: groupReducer, ui: uiReducer, + drag:dragReducer }); export type AppState = ReturnType; @@ -20,3 +22,4 @@ export { userActions } from './user'; export { chatActions } from './chat'; export { groupActions } from './group'; export { uiActions } from './ui'; +export {dragActions} from './drag' diff --git a/client/web/src/components/SplitPanel.tsx b/client/web/src/components/SplitPanel.tsx index 68caa588f6c..b2b888c2550 100644 --- a/client/web/src/components/SplitPanel.tsx +++ b/client/web/src/components/SplitPanel.tsx @@ -1,9 +1,10 @@ import clsx from 'clsx'; import React, { PropsWithChildren } from 'react'; import Split from 'react-split'; -import { useStorage } from 'tailchat-shared'; +import { useStorage, updateDragStatus} from 'tailchat-shared'; import './SplitPanel.less'; + /** * Reference: https://split.js.org/#/ */ @@ -13,11 +14,17 @@ interface SplitPanelProps extends PropsWithChildren { } export const SplitPanel: React.FC = React.memo((props) => { const [sizes, { save: saveSizes }] = useStorage('pin-sizes', [90, 10]); - + const updateStatus = updateDragStatus() const handleDragEnd = (sizes: number[]) => { saveSizes(sizes); + updateStatus(false) + }; + const handleDragEnter = ()=>{ + updateStatus(true) + } + return ( = React.memo((props) => { minSize={250} expandToMin={true} onDragEnd={handleDragEnd} + onDragStart={handleDragEnter} > {props.children} diff --git a/client/web/src/components/Webview.tsx b/client/web/src/components/Webview.tsx index cd2b0e451d7..811cbd37ffa 100644 --- a/client/web/src/components/Webview.tsx +++ b/client/web/src/components/Webview.tsx @@ -1,8 +1,10 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { t } from 'tailchat-shared'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; +import { t , useDragstatus } from 'tailchat-shared'; import { withKeepAliveOverlay } from './KeepAliveOverlay'; import { Loading } from './Loading'; + + interface WebviewProps { className?: string; style?: React.CSSProperties; @@ -15,17 +17,19 @@ interface WebviewProps { export const Webview: React.FC = (props) => { const ref = useRef(null); const [spinning, setSpinning] = useState(true); - + const status = useDragstatus() useEffect(() => { const callback = () => { setSpinning(false); }; ref.current?.addEventListener('load', callback); - return () => { ref.current?.removeEventListener('load', callback); }; }, []); + const pointerEvents =useMemo(()=>{ + return status ? 'none' : 'auto' + },[status]) return ( = (props) => { className="w-full h-full" tip={t('加载网页中...')} > -