feat (1.74.0 -> 1.75.0): 实现工作流设置表格拖拽排序功能

- 集成 @dnd-kit 库，实现现代化的拖拽排序功能
- 在 Workflow.tsx 中添加拖拽上下文、排序组件和拖拽句柄
- 为任务清单和历史清单配置表格添加垂直拖拽排序功能
- 新增 deploy:h5 脚本，支持 H5 应用的部署
- 移除过时的 @cypress/webpack-preprocessor 依赖
- 更新 package-lock.json 同步依赖变更

改动文件：
- package.json
- package-lock.json
- src/pages/system/SettingsModal/sections/Preferences/Workflow.tsx

CHANGELOG.md

@@ -2,6 +2,23 @@
 
 本项目的所有重要变更都将记录在此文件中.
 
+## [1.75.0] - 2026-01-19 19:50
+
+feat (1.74.0 -> 1.75.0): 实现工作流设置表格拖拽排序功能，支持任务清单和历史清单的拖拽重新排序
+
+- 集成 @dnd-kit 库，实现现代化的拖拽排序功能
+- 在 Workflow.tsx 中添加拖拽上下文、排序组件和拖拽句柄
+- 为任务清单和历史清单配置表格添加垂直拖拽排序功能
+- 新增 deploy:h5 脚本，支持 H5 应用的部署
+- 移除过时的 @cypress/webpack-preprocessor 依赖
+- 更新 package-lock.json 同步依赖变更
+
+改动文件：
+
+- package.json
+- package-lock.json
+- src/pages/system/SettingsModal/sections/Preferences/Workflow.tsx
+
 ## [1.74.0] - 2026-01-19 14:43
 
 feat (1.73.0 -> 1.74.0): 重构工作流设置配置，支持命名空间键并优化API响应处理

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zsis",
-  "version": "1.74.0",
+  "version": "1.75.0",
   "private": true,
   "description": "医学成像系统",
   "main": "main.js",
@@ -45,7 +45,8 @@
     "h5:browser": "cross-env TARO_API_URL= TARO_MQTT_URL=/mqtt node ./.build/h5_for_production.js",
     "h5:electron": "cross-env TARO_API_URL=http://localhost:6001 TARO_MQTT_URL=ws://localhost:8083/mqtt node ./.build/h5_for_production.js",
     "extract:i18n": "node scripts/extract-i18n-json.js",
-    "clean:cache": "node ./.build/clean-cache.js"
+    "clean:cache": "node ./.build/clean-cache.js",
+    "deploy:h5": "node ./.build/deploy-h5.js"
   },
   "browserslist": [
     "defaults and fully supports es6-module",
@@ -57,6 +58,9 @@
     "@cornerstonejs/core": "^3.28.0",
     "@cornerstonejs/dicom-image-loader": "^3.28.0",
     "@cornerstonejs/tools": "^3.28.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
     "@reduxjs/toolkit": "^2.8.2",
     "@tarojs/components": "4.1",
     "@tarojs/helper": "4.1.1",
@@ -101,7 +105,6 @@
     "@babel/core": "^7.24.4",
     "@babel/plugin-transform-class-properties": "7.25.9",
     "@babel/preset-react": "^7.24.1",
-    "@cypress/webpack-preprocessor": "^7.0.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@svgr/webpack": "^8.1.0",
     "@tarojs/cli": "4.1.1",

src/pages/system/SettingsModal/sections/Preferences/Workflow.tsx

@@ -1,7 +1,7 @@
 /**
  * 工作流 - 工作流设置组件
  */
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import {
   Form,
   Card,
@@ -13,13 +13,25 @@ import {
   Table,
   Button,
   Space,
-  Row,
   Col,
+  Row,
   message,
 } from 'antd';
 import { SPACING } from '../../constants';
 import { getConfig, modifyConfig } from '@/API/system/options';
-
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import { HolderOutlined } from '@ant-design/icons';
+import { DndContext } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import {
+  arrayMove,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+
+import { CSS } from '@dnd-kit/utilities';
+import { DragEndEvent } from '@dnd-kit/core';
 const { Group: RadioGroup } = Radio;
 
 // 字段配置数据类型
@@ -76,6 +88,55 @@ const initValues = {
   //是否启用剂量调整功能
   'System/DoseAdjustmentEnabled': false,
 };
+
+interface RowContextProps {
+  setActivatorNodeRef?: (element: HTMLElement | null) => void;
+  listeners?: SyntheticListenerMap;
+}
+
+const RowContext = React.createContext<RowContextProps>({});
+const DragHandle: React.FC = () => {
+  const { setActivatorNodeRef, listeners } = useContext(RowContext);
+  return (
+    <HolderOutlined
+      style={{ cursor: 'move' }}
+      ref={setActivatorNodeRef}
+      {...listeners}
+    />
+  );
+};
+interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  'data-row-key': string;
+}
+const _Row: React.FC<RowProps> = (props) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: props['data-row-key'] });
+
+  const style: React.CSSProperties = {
+    ...props.style,
+    transform: CSS.Translate.toString(transform),
+    transition,
+    ...(isDragging ? { position: 'relative', zIndex: 9999 } : {}),
+  };
+
+  const contextValue = useMemo<RowContextProps>(
+    () => ({ setActivatorNodeRef, listeners }),
+    [setActivatorNodeRef, listeners]
+  );
+
+  return (
+    <RowContext.Provider value={contextValue}>
+      <tr {...props} ref={setNodeRef} style={style} {...attributes} />
+    </RowContext.Provider>
+  );
+};
 /**
  * 工作流组件
  * 实现图像采集、多任务管理、APR编辑等设置功能
@@ -112,6 +173,12 @@ const Workflow: React.FC = () => {
       dataIndex: 'Display',
       key: 'Display',
     },
+    // {
+    //   key: 'drag-sort',
+    //   align: 'center',
+    //   width: 0,
+    //   render: () => <DragHandle />,
+    // },
   ];
 
   // 处理任务清单配置变更
@@ -206,8 +273,18 @@ const Workflow: React.FC = () => {
     getWorkFlowData();
   }, []);
 
-  const onChange = (value) => {
-    console.log('changed', value, typeof value);
+  const onDragEnd = ({ active, over }: DragEndEvent, setData) => {
+    if (active.id !== over?.id) {
+      setData((prevState) => {
+        const activeIndex = prevState.findIndex(
+          (record) => record.Order === active?.id
+        );
+        const overIndex = prevState.findIndex(
+          (record) => record.Order === over?.id
+        );
+        return arrayMove(prevState, activeIndex, overIndex);
+      });
+    }
   };
 
   return (
@@ -267,7 +344,7 @@ const Workflow: React.FC = () => {
                     },
                   ]}
                 >
-                  <InputNumber min={0} max={60} onChange={onChange} />
+                  <InputNumber min={0} max={60} />
                 </Form.Item>
 
                 <Form.Item
@@ -460,22 +537,46 @@ const Workflow: React.FC = () => {
         >
           {/* 任务清单显示配置 */}
           <Card title="任务清单显示配置" size="small">
-            <Table
-              columns={getTableColumns(handleTaskListConfigChange)}
-              dataSource={taskListConfig}
-              pagination={false}
-              size="small"
-            />
+            <DndContext
+              modifiers={[restrictToVerticalAxis]}
+              onDragEnd={(e) => onDragEnd(e, setTaskListConfig)}
+            >
+              <SortableContext
+                items={taskListConfig.map((i) => i.Order)}
+                strategy={verticalListSortingStrategy}
+              >
+                <Table
+                  rowKey="Order"
+                  components={{ body: { row: _Row } }}
+                  columns={getTableColumns(handleTaskListConfigChange)}
+                  dataSource={taskListConfig}
+                  pagination={false}
+                  size="small"
+                />
+              </SortableContext>
+            </DndContext>
           </Card>
 
           {/* 历史清单显示配置 */}
           <Card title="历史清单显示配置" size="small">
-            <Table
-              columns={getTableColumns(handleHistoryListConfigChange)}
-              dataSource={historyListConfig}
-              pagination={false}
-              size="small"
-            />
+            <DndContext
+              modifiers={[restrictToVerticalAxis]}
+              onDragEnd={(e) => onDragEnd(e, setHistoryListConfig)}
+            >
+              <SortableContext
+                items={historyListConfig.map((i) => i.Order)}
+                strategy={verticalListSortingStrategy}
+              >
+                <Table
+                  rowKey="Order"
+                  components={{ body: { row: _Row } }}
+                  columns={getTableColumns(handleHistoryListConfigChange)}
+                  dataSource={historyListConfig}
+                  pagination={false}
+                  size="small"
+                />
+              </SortableContext>
+            </DndContext>
           </Card>
         </div>
       </div>