浏览代码

feat: 添加触摸屏双击支持以解决任务清单进入检查问题

- 新增 src/hooks/useTouchDoubleClick.ts: 实现触摸双击检测逻辑
- 修改 src/pages/patient/components/WorklistTable.tsx: 集成触摸双击功能
- 解决触摸屏设备无法通过双击进入检查界面的问题
- 保持鼠标双击功能的向后兼容性

close #11
dengdx 3 周之前
父节点
当前提交
9a65ba3642
共有 2 个文件被更改,包括 64 次插入5 次删除
  1. 46 0
      src/hooks/useTouchDoubleClick.ts
  2. 18 5
      src/pages/patient/components/WorklistTable.tsx

+ 46 - 0
src/hooks/useTouchDoubleClick.ts

@@ -0,0 +1,46 @@
+import { useRef, useCallback } from 'react';
+
+interface UseTouchDoubleClickOptions {
+  onDoubleClick: () => void;
+  delay?: number; // 双击间隔时间,默认300ms
+}
+
+export const useTouchDoubleClick = ({
+  onDoubleClick,
+  delay = 300,
+}: UseTouchDoubleClickOptions) => {
+  const touchTimeRef = useRef<number>(0);
+  const touchCountRef = useRef<number>(0);
+
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      console.log(`${e.type} event detected`);
+      const now = Date.now();
+      const timeDiff = now - touchTimeRef.current;
+
+      if (timeDiff < delay && timeDiff > 0) {
+        touchCountRef.current += 1;
+        if (touchCountRef.current === 2) {
+          onDoubleClick();
+          touchCountRef.current = 0;
+          touchTimeRef.current = 0;
+          return;
+        }
+      } else {
+        touchCountRef.current = 1;
+      }
+
+      touchTimeRef.current = now;
+
+      // 重置计数器
+      setTimeout(() => {
+        if (touchCountRef.current === 1) {
+          touchCountRef.current = 0;
+        }
+      }, delay);
+    },
+    [onDoubleClick, delay]
+  );
+
+  return { handleTouchStart };
+};

+ 18 - 5
src/pages/patient/components/WorklistTable.tsx

@@ -5,6 +5,7 @@ import { Task, Task as DataType } from '@/domain/work';
 import type { ResizeCallbackData } from 'react-resizable';
 import { Resizable } from 'react-resizable';
 import { WorkFilter } from '@/states/patient/worklist/types/workfilter';
+import { useTouchDoubleClick } from '@/hooks/useTouchDoubleClick';
 
 const columnsDef = [
   {
@@ -430,11 +431,23 @@ const WorklistTable: React.FC<WorklistTableProps> = ({
       components={{ header: { cell: ResizableTitle } }}
       dataSource={worklistData}
       rowKey="StudyID"
-      onRow={(record, index) => ({
-        onClick: () => handleRowClick(record),
-        onDoubleClick: () => handleRowDoubleClick(record),
-        'data-testid': `row-${index}`,
-      })}
+      onRow={(record, index) => {
+        const { handleTouchStart } = useTouchDoubleClick({
+          onDoubleClick: () => handleRowDoubleClick(record),
+          delay: 300,
+        });
+
+        return {
+          onClick: () => handleRowClick(record),
+          onDoubleClick: () => handleRowDoubleClick(record),
+          onTouchStart: handleTouchStart,
+          'data-testid': `row-${index}`,
+          style: {
+            cursor: 'pointer',
+            userSelect: 'none', // 防止文本选择
+          },
+        };
+      }}
       rowHoverable={false}
       rowClassName={(record) =>
         selectedIds.includes(record.StudyID)