fix:网页面板下，右侧pin的面板拖拽事件丢失问题 || fix: Under the web page panel, the panel drag event on the right pin is lost

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 {

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 ;
+}
+

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<DragState['isDraging']>
+    ) {
+      state.isDraging = action.payload;
+    },
+  },
+});
+
+export const dragActions = globalSlice.actions;
+export const dragReducer = globalSlice.reducer;

client/shared/redux/slices/index.ts

@@ -4,13 +4,15 @@ 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,
   user: userReducer,
   chat: chatReducer,
   group: groupReducer,
   ui: uiReducer,
+  drag:dragReducer
 });
 
 export type AppState = ReturnType<typeof appReducer>;
@@ -20,3 +22,4 @@ export { userActions } from './user';
 export { chatActions } from './chat';
 export { groupActions } from './group';
 export { uiActions } from './ui';
+export {dragActions} from './drag'

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,18 +14,25 @@ interface SplitPanelProps extends PropsWithChildren {
 }
 export const SplitPanel: React.FC<SplitPanelProps> = 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 (
     <Split
       className={clsx('split', props.className)}
       sizes={sizes}
       minSize={250}
       expandToMin={true}
       onDragEnd={handleDragEnd}
+      onDragStart={handleDragEnter}
     >
       {props.children}
     </Split>

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,25 +17,27 @@ interface WebviewProps {
 export const Webview: React.FC<WebviewProps> = (props) => {
   const ref = useRef<HTMLIFrameElement>(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 (
     <Loading
       spinning={spinning}
       className="w-full h-full"
       tip={t('加载网页中...')}
     >
-      <iframe ref={ref} className="w-full h-full" src={props.url} />
+      <iframe ref={ref} style={{pointerEvents}} className="w-full h-full" src={props.url} />
     </Loading>
   );
 };