feat (1.69.0 -> 1.70.0): 重构工作流设置组件，集成后端配置API并优化界面布局

- 重构 Workflow.tsx 组件，添加动态配置加载和保存功能
- 使用 getConfig 和 modifyConfig API 实现配置的获取和修改
- 优化界面布局，使用 Row/Col 组件改进响应式设计
- 更新表单字段名称以匹配后端配置 URI
- 删除重复的 IDCardRecognitionModal copy.tsx 文件

改动文件：
- src/pages/system/SettingsModal/sections/Preferences/Workflow.tsx
- src/components/IDCardRecognitionModal copy.tsx

CHANGELOG.md

@@ -2,15 +2,33 @@
 
 本项目的所有重要变更都将记录在此文件中.
 
+## [1.70.0] - 2026-01-15 13:47
+
+feat (1.69.0 -> 1.70.0): 重构工作流设置组件，集成后端配置API并优化界面布局
+
+- 重构 Workflow.tsx 组件，添加动态配置加载和保存功能
+- 使用 getConfig 和 modifyConfig API 实现配置的获取和修改
+- 优化界面布局，使用 Row/Col 组件改进响应式设计
+- 更新表单字段名称以匹配后端配置 URI
+- 删除重复的 IDCardRecognitionModal copy.tsx 文件
+
+改动文件：
+
+- src/pages/system/SettingsModal/sections/Preferences/Workflow.tsx
+- src/components/IDCardRecognitionModal copy.tsx
+
 ## [1.69.0] - 2026-01-13 22:38
+
 refactor: 清理BusinessZone组件中的调试日志
 
 - 移除exam和process按钮禁用状态中的console.log语句
 
 改动文件：
+
 - src/layouts/BusinessZone.tsx
 
 ## [1.69.0] - 2026-01-13 18:16
+
 feat (1.68.0 -> 1.69.0): 优化R标记添加功能，使用TextAnnotationToolManager替代LabelTool
 
 - 简化addRLabel函数实现，使用TextAnnotationToolManager.activateTextAnnotationTool
@@ -18,9 +36,11 @@ feat (1.68.0 -> 1.69.0): 优化R标记添加功能，使用TextAnnotationToolMan
 - 添加todo注释提示坐标需要动态调整
 
 改动文件：
+
 - src/pages/view/components/viewers/stack.image.viewer.tsx
 
 ## [1.68.0] - 2026-01-13 18:00
+
 feat (1.67.0 -> 1.68.0): 实现文本标记工具定位功能，支持指定文本注解位置而非总是居中
 
 - 在TextAnnotationTool.createDefaultAnnotation方法中添加可选position参数
@@ -28,11 +48,13 @@ feat (1.67.0 -> 1.68.0): 实现文本标记工具定位功能，支持指定文
 - 更新TextAnnotationToolManager相关方法支持位置参数传递
 
 改动文件：
+
 - src/components/measures/TextAnnotationTool.ts
 - src/pages/view/components/viewers/stack.image.viewer.tsx
 - src/utils/textAnnotationToolManager.ts
 
 ## [1.67.0] - 2026-01-13 10:15
+
 feat (1.66.2 -> 1.67.0): 实现文本标记工具功能，支持在图像上添加、编辑、旋转和缩放文本标注
 
 - 在 stack.image.viewer.tsx 中导入并注册 TextAnnotationTool 和 TextAnnotationToolManager
@@ -41,12 +63,12 @@ feat (1.66.2 -> 1.67.0): 实现文本标记工具功能，支持在图像上添
 - 新增 TextAnnotationToolManager 工具管理器，提供工具激活、停用和清理功能
 
 改动文件：
+
 - src/pages/view/components/viewers/stack.image.viewer.tsx
 - src/utils/cornerstoneToolsSetup.ts
 - src/components/measures/TextAnnotationTool.ts
 - src/utils/textAnnotationToolManager.ts
 
-
 ## [1.66.2] - 2026-01-12 17:59
 
 ### 修复 (Fixed)
@@ -178,4 +200,4 @@ feat (1.66.2 -> 1.67.0): 实现文本标记工具功能，支持在图像上添
 
 - src/API/system/options.ts
 - src/pages/system/SettingsModal/sections/Preferences/index.tsx
-- src/pages/system/SettingsModal/sections/Preferences/report/index.tsx### 新增 (Added)
+- src/pages/system/SettingsModal/sections/Preferences/report/index.tsx### 新增 (Added)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zsis",
-  "version": "1.69.0",
+  "version": "1.70.0",
   "private": true,
   "description": "医学成像系统",
   "main": "main.js",

src/components/IDCardRecognitionModal copy.tsx

@@ -1,433 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Modal, Button, Space, message, Spin, Upload } from 'antd';
-import {
-  CameraOutlined,
-  CloseOutlined,
-  ReloadOutlined,
-  UploadOutlined,
-  IdcardOutlined,
-} from '@ant-design/icons';
-import { CameraServiceFactory } from '@/services/camera/CameraServiceFactory';
-import axiosInstance from '@/API/interceptor';
-
-interface IDCardRecognitionModalProps {
-  visible: boolean;
-  onClose: () => void;
-  onRecognitionSuccess: (data: IDCardData) => void;
-}
-
-interface IDCardData {
-  name?: string;
-  idNumber?: string;
-  gender?: string;
-  birthDate?: string;
-  address?: string;
-}
-
-/**
- * 身份证识别 Modal 组件
- * 支持自动拍照和手动上传图片两种方式
- */
-const IDCardRecognitionModal: React.FC<IDCardRecognitionModalProps> = ({
-  visible,
-  onClose,
-  onRecognitionSuccess,
-}) => {
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const streamRef = useRef<MediaStream | null>(null);
-
-  const [capturedImage, setCapturedImage] = useState<string | null>(null);
-  const [uploadedImage, setUploadedImage] = useState<string | null>(null);
-  const [isInitializing, setIsInitializing] = useState(false);
-  const [isRecognizing, setIsRecognizing] = useState(false);
-  const [mode, setMode] = useState<'camera' | 'upload'>('camera');
-
-  /**
-   * 初始化摄像头
-   */
-  useEffect(() => {
-    if (visible && mode === 'camera' && !capturedImage) {
-      initCamera();
-    }
-
-    return () => {
-      stopCamera();
-    };
-  }, [visible, mode, capturedImage]);
-
-  /**
-   * 初始化摄像头
-   */
-  const initCamera = async () => {
-    setIsInitializing(true);
-
-    try {
-      console.log('[IDCardRecognition] 初始化摄像头...');
-
-      const cameraService = CameraServiceFactory.create();
-
-      const hasPermission = await cameraService.requestPermission();
-      if (!hasPermission) {
-        throw new Error('用户拒绝了摄像头权限');
-      }
-
-      const stream = await cameraService.getMediaStream({
-        video: {
-          width: { ideal: 1280 },
-          height: { ideal: 720 },
-          facingMode: 'environment', // 使用后置摄像头
-        },
-      });
-
-      streamRef.current = stream;
-
-      if (videoRef.current) {
-        videoRef.current.onloadedmetadata = async () => {
-          try {
-            if (videoRef.current) {
-              await videoRef.current.play();
-              console.log('[IDCardRecognition] 视频开始播放');
-            }
-          } catch (playError: any) {
-            console.error('[IDCardRecognition] 视频播放失败:', playError);
-            message.error('视频播放失败: ' + playError.message);
-          }
-        };
-
-        videoRef.current.srcObject = stream;
-      }
-
-      console.log('[IDCardRecognition] 摄像头初始化成功');
-    } catch (err: any) {
-      console.error('[IDCardRecognition] 摄像头初始化失败:', err);
-      message.error(err.message || '摄像头初始化失败');
-    } finally {
-      setIsInitializing(false);
-    }
-  };
-
-  /**
-   * 停止摄像头
-   */
-  const stopCamera = () => {
-    if (streamRef.current) {
-      console.log('[IDCardRecognition] 停止摄像头');
-      streamRef.current.getTracks().forEach((track) => track.stop());
-      streamRef.current = null;
-    }
-  };
-
-  /**
-   * 拍照
-   */
-  const handleCapture = async () => {
-    if (!streamRef.current) {
-      message.error('摄像头未就绪');
-      return;
-    }
-
-    try {
-      console.log('[IDCardRecognition] 开始拍照...');
-
-      const cameraService = CameraServiceFactory.create();
-      const base64Image = await cameraService.capturePhoto(streamRef.current);
-
-      console.log(
-        '[IDCardRecognition] 拍照成功，图片大小:',
-        base64Image.length
-      );
-
-      setCapturedImage(base64Image);
-      stopCamera();
-
-      message.success('拍照成功');
-    } catch (err: any) {
-      console.error('[IDCardRecognition] 拍照失败:', err);
-      message.error(err.message || '拍照失败');
-    }
-  };
-
-  /**
-   * 重拍
-   */
-  const handleRetake = () => {
-    console.log('[IDCardRecognition] 重拍');
-    setCapturedImage(null);
-  };
-
-  /**
-   * 上传文件处理
-   */
-  const handleUpload = (file: File) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const result = e.target?.result as string;
-      setUploadedImage(result);
-      setCapturedImage(null);
-      message.success('图片上传成功');
-    };
-    reader.readAsDataURL(file);
-    return false; // 阻止自动上传
-  };
-
-  /**
-   * 识别身份证
-   */
-  const handleRecognize = async () => {
-    const imageData = capturedImage || uploadedImage;
-    if (!imageData) {
-      message.error('请先拍照或上传身份证图片');
-      return;
-    }
-
-    try {
-      setIsRecognizing(true);
-
-      console.log('[IDCardRecognition] 开始识别身份证...');
-
-      // 上传图片到后端进行识别
-      const response = await axiosInstance.post('/auth/task/ocr/id_card', {
-        type: 'png',
-        data: imageData.replace(/^data:image\/[a-z]+;base64,/, ''),
-      });
-
-      if (response.data.code !== '0x000000') {
-        throw new Error(response.data.description || '识别失败');
-      }
-
-      const recognitionData: IDCardData = response?.data?.data;
-
-      console.log('[IDCardRecognition] 识别成功:', recognitionData);
-
-      message.success('身份证识别成功');
-      await onRecognitionSuccess(recognitionData);
-      handleClose();
-    } catch (err: any) {
-      console.error('[IDCardRecognition] 识别失败:', err);
-      message.error(
-        err.response?.data?.description || err.message || '识别失败'
-      );
-    } finally {
-      setIsRecognizing(false);
-    }
-  };
-
-  /**
-   * 关闭 Modal
-   */
-  const handleClose = () => {
-    console.log('[IDCardRecognition] 关闭 Modal');
-    stopCamera();
-    setCapturedImage(null);
-    setUploadedImage(null);
-    onClose();
-  };
-
-  const uploadProps = {
-    beforeUpload: handleUpload,
-    showUploadList: false,
-    accept: 'image/*',
-  };
-
-  return (
-    <Modal
-      title={
-        <Space>
-          <IdcardOutlined />
-          身份证识别
-        </Space>
-      }
-      open={visible}
-      onCancel={handleClose}
-      footer={null}
-      width={800}
-      centered
-      destroyOnClose
-    >
-      <div style={{ textAlign: 'center' }}>
-        {/* 模式选择 */}
-        <Space style={{ marginBottom: 16 }}>
-          <Button
-            type={mode === 'camera' ? 'primary' : 'default'}
-            onClick={() => setMode('camera')}
-          >
-            自动拍照
-          </Button>
-          <Button
-            type={mode === 'upload' ? 'primary' : 'default'}
-            onClick={() => setMode('upload')}
-          >
-            手动上传
-          </Button>
-        </Space>
-
-        {/* 摄像头模式 */}
-        {mode === 'camera' && (
-          <div style={{ position: 'relative' }}>
-            {!capturedImage && (
-              <>
-                <video
-                  ref={videoRef}
-                  autoPlay
-                  playsInline
-                  muted
-                  style={{
-                    width: '100%',
-                    maxHeight: '400px',
-                    backgroundColor: '#000',
-                    borderRadius: 8,
-                    display: isInitializing ? 'none' : 'block',
-                  }}
-                />
-
-                {isInitializing && (
-                  <div
-                    style={{
-                      width: '100%',
-                      height: '400px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      backgroundColor: '#000',
-                      borderRadius: 8,
-                    }}
-                  >
-                    <Spin size="large" tip="正在初始化摄像头..." />
-                  </div>
-                )}
-
-                {!isInitializing && (
-                  <Space style={{ marginTop: 16 }} size="large">
-                    <Button
-                      type="primary"
-                      size="large"
-                      icon={<CameraOutlined />}
-                      onClick={handleCapture}
-                    >
-                      拍照
-                    </Button>
-                    <Button
-                      size="large"
-                      icon={<CloseOutlined />}
-                      onClick={handleClose}
-                    >
-                      取消
-                    </Button>
-                  </Space>
-                )}
-              </>
-            )}
-
-            {capturedImage && (
-              <>
-                <img
-                  src={capturedImage}
-                  alt="拍摄的身份证"
-                  style={{
-                    width: '100%',
-                    maxHeight: '400px',
-                    borderRadius: 8,
-                    objectFit: 'contain',
-                  }}
-                />
-                <Space style={{ marginTop: 16 }} size="large">
-                  <Button
-                    type="primary"
-                    size="large"
-                    icon={<IdcardOutlined />}
-                    onClick={handleRecognize}
-                    loading={isRecognizing}
-                  >
-                    识别身份证
-                  </Button>
-                  <Button
-                    size="large"
-                    icon={<ReloadOutlined />}
-                    onClick={handleRetake}
-                    disabled={isRecognizing}
-                  >
-                    重拍
-                  </Button>
-                  <Button
-                    size="large"
-                    icon={<CloseOutlined />}
-                    onClick={handleClose}
-                    disabled={isRecognizing}
-                  >
-                    取消
-                  </Button>
-                </Space>
-              </>
-            )}
-          </div>
-        )}
-
-        {/* 上传模式 */}
-        {mode === 'upload' && (
-          <div>
-            {!uploadedImage ? (
-              <div
-                style={{
-                  padding: '40px',
-                  border: '2px dashed #d9d9d9',
-                  borderRadius: 8,
-                }}
-              >
-                <Upload {...uploadProps}>
-                  <Space direction="vertical">
-                    <UploadOutlined
-                      style={{ fontSize: 48, color: '#1890ff' }}
-                    />
-                    <div>点击或拖拽身份证图片到此处上传</div>
-                    <div style={{ color: '#999' }}>只支持 PNG 格式</div>
-                  </Space>
-                </Upload>
-              </div>
-            ) : (
-              <>
-                <img
-                  src={uploadedImage}
-                  alt="上传的身份证"
-                  style={{
-                    width: '100%',
-                    maxHeight: '400px',
-                    borderRadius: 8,
-                    objectFit: 'contain',
-                  }}
-                />
-                <Space style={{ marginTop: 16 }} size="large">
-                  <Button
-                    type="primary"
-                    size="large"
-                    icon={<IdcardOutlined />}
-                    onClick={handleRecognize}
-                    loading={isRecognizing}
-                  >
-                    识别身份证
-                  </Button>
-                  <Button
-                    size="large"
-                    onClick={() => setUploadedImage(null)}
-                    disabled={isRecognizing}
-                  >
-                    重新上传
-                  </Button>
-                  <Button
-                    size="large"
-                    icon={<CloseOutlined />}
-                    onClick={handleClose}
-                    disabled={isRecognizing}
-                  >
-                    取消
-                  </Button>
-                </Space>
-              </>
-            )}
-          </div>
-        )}
-      </div>
-    </Modal>
-  );
-};
-
-export default IDCardRecognitionModal;

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

@@ -1,19 +1,83 @@
 /**
  * 工作流 - 工作流设置组件
  */
-import React, { useState } from 'react';
-import { Form, Card, Switch, Input, InputNumber, Radio, Checkbox, Table, Button, Space, Divider } from 'antd';
+import React, { useEffect, useState } from 'react';
+import {
+  Form,
+  Card,
+  Switch,
+  Input,
+  InputNumber,
+  Radio,
+  Checkbox,
+  Table,
+  Button,
+  Space,
+  Row,
+  Col,
+  message,
+} from 'antd';
 import { SPACING } from '../../constants';
+import { getConfig, modifyConfig } from '@/API/system/options';
 
 const { Group: RadioGroup } = Radio;
 
 // 字段配置数据类型
 interface FieldConfig {
-  key: string;
-  field: string;
-  visible: boolean;
+  Order: string;
+  Display: string;
+  FieldName: string;
+  Visible: boolean;
 }
 
+const listFieldBase: FieldConfig[] = [
+  { Order: '1', Display: '动物ID', FieldName: 'patient_id', Visible: true },
+  { Order: '2', Display: '动物名称', FieldName: 'patient_id', Visible: true },
+  { Order: '3', Display: '动物类型', FieldName: 'patient_id', Visible: true },
+  { Order: '4', Display: '性别', FieldName: 'patient_id', Visible: true },
+  { Order: '5', Display: '年龄', FieldName: 'patient_id', Visible: true },
+  { Order: '6', Display: '检查描述', FieldName: 'patient_id', Visible: true },
+  { Order: '7', Display: '检查时间', FieldName: 'patient_id', Visible: true },
+  { Order: '8', Display: '主人', FieldName: 'patient_id', Visible: true },
+  { Order: '9', Display: '登记号', FieldName: 'patient_id', Visible: true },
+];
+
+const initValues = {
+  // 是否自动跳转到下个视图
+  'Inspection/AutoAcceptImage': false,
+  // 是否开启自动选择曝光模式
+  'Exam/AutoSelectExposureMode': false,
+  // 自动跳转到下个视图延迟时间
+  'Inspection/AutoJumpToNextView': 0,
+  suggestAPRTable: false,
+  allowMergeTasks: false,
+  allowEditAfterAcquisition: false,
+  // 是否要求拒绝原因
+  'Inspection/RequireRejectReason': false,
+  // 是否显示拒绝图片
+  'SystemConfig/ShowRejectImage': false,
+  smallAnimalExposureMode: 'bodyThickness',
+  // 是否显示电池状态
+  'Display/BatteryStatusEnable': false,
+  tubePower: false,
+  // 是否显示温度状态
+  'Display/TemperatureStatusEnable': false,
+  detectorPower: false,
+  // 是否显示WIFI状态
+  'Display/WIFIStatusEnable': false,
+  detectorTemp: false,
+  // 是否显示真实渲染图像
+  'SystemConfig/IsShowRealImage': false,
+  // 是否显示解刨图像
+  'SystemConfig/IsShowAnatomicalImage': false,
+  // 是否显示曝光指示器
+  'Exam/ShowExposureIndicator': false,
+  // 导出图像模式
+  exportPathMode: 'default',
+  // 导出图像路径
+  'System/ExportDirectory': '',
+  doseAdjustmentEnabled: false,
+};
 /**
  * 工作流组件
  * 实现图像采集、多任务管理、APR编辑等设置功能
@@ -22,163 +86,191 @@ const Workflow: React.FC = () => {
   const [form] = Form.useForm();
 
   // 任务清单显示配置数据
-  const [taskListConfig, setTaskListConfig] = useState<FieldConfig[]>([
-    { key: '1', field: '动物ID', visible: true },
-    { key: '2', field: '动物名称', visible: true },
-    { key: '3', field: '动物类型', visible: true },
-    { key: '4', field: '性别', visible: true },
-    { key: '5', field: '年龄', visible: true },
-    { key: '6', field: '检查描述', visible: true },
-    { key: '7', field: '检查时间', visible: true },
-    { key: '8', field: '主人', visible: true },
-    { key: '9', field: '登记号', visible: true },
-  ]);
+  const [taskListConfig, setTaskListConfig] =
+    useState<FieldConfig[]>(listFieldBase);
 
   // 历史清单显示配置数据
-  const [historyListConfig, setHistoryListConfig] = useState<FieldConfig[]>([
-    { key: '1', field: '动物ID', visible: true },
-    { key: '2', field: '动物名称', visible: true },
-    { key: '3', field: '动物类型', visible: true },
-    { key: '4', field: '性别', visible: true },
-    { key: '5', field: '年龄', visible: true },
-  ]);
+  const [historyListConfig, setHistoryListConfig] =
+    useState<FieldConfig[]>(listFieldBase);
 
   // 表格列配置
-  const getTableColumns = (onChange: (key: string, visible: boolean) => void) => [
+  const getTableColumns = (
+    onChange: (key: string, Visible: boolean) => void
+  ) => [
     {
       title: '可见',
-      dataIndex: 'visible',
-      key: 'visible',
+      dataIndex: 'Visible',
+      key: 'Visible',
       width: 80,
-      render: (visible: boolean, record: FieldConfig) => (
+      render: (visible: boolean, record: FieldConfig): React.ReactElement => (
         <Checkbox
           checked={visible}
-          onChange={(e) => onChange(record.key, e.target.checked)}
+          onChange={(e) => onChange(record.FieldName, e.target.checked)}
         />
       ),
     },
     {
       title: '列',
-      dataIndex: 'field',
-      key: 'field',
+      dataIndex: 'Display',
+      key: 'Display',
     },
   ];
 
   // 处理任务清单配置变更
-  const handleTaskListConfigChange = (key: string, visible: boolean) => {
-    setTaskListConfig(prev =>
-      prev.map(config =>
-        config.key === key ? { ...config, visible } : config
+  const handleTaskListConfigChange = (key: string, Visible: boolean): void => {
+    setTaskListConfig((prev) =>
+      prev.map((config) =>
+        config.FieldName === key ? { ...config, Visible } : config
       )
     );
   };
 
   // 处理历史清单配置变更
-  const handleHistoryListConfigChange = (key: string, visible: boolean) => {
-    setHistoryListConfig(prev =>
-      prev.map(config =>
-        config.key === key ? { ...config, visible } : config
+  const handleHistoryListConfigChange = (
+    key: string,
+    Visible: boolean
+  ): void => {
+    setHistoryListConfig((prev) =>
+      prev.map((config) =>
+        config.FieldName === key ? { ...config, Visible } : config
       )
     );
   };
 
-  // 处理保存
-  const handleSave = () => {
-    form.validateFields().then(values => {
-      console.log('保存设置:', {
-        ...values,
-        taskListConfig,
-        historyListConfig
+  // 获取工作流配置信息
+  const getWorkFlowData = async (): Promise<void> => {
+    const params = Object.keys(initValues).map((key) => key);
+    const res = await getConfig({
+      uri: [...params, 'Patient/WorkListFields', 'Patient/HistoryListFields'],
+    });
+    if (res?.code !== '0x000000') {
+      message.error(res?.description || '保存失败');
+      return;
+    }
+
+    // 创建配置映射
+    const configMap: Record<string, string> = {};
+    if (res?.data?.configs) {
+      res.data.configs.forEach((config) => {
+        configMap[config.uri] = config.config_value;
       });
-      // TODO: 调用API保存设置
+    }
+
+    // 获取特殊配置项并解析
+    const workListFieldsStr = configMap['Patient/WorkListFields'] || '{}';
+    const historyListFieldsStr = configMap['Patient/HistoryListFields'] || '{}';
+
+    setTaskListConfig(JSON.parse(workListFieldsStr));
+    setHistoryListConfig(JSON.parse(historyListFieldsStr));
+
+    // 过滤掉特殊配置项，只保留普通配置项用于表单
+    const formFieldsConfigs = {};
+    if (res?.data?.configs) {
+      res.data.configs.forEach((config) => {
+        if (
+          config.uri !== 'Patient/WorkListFields' &&
+          config.uri !== 'Patient/HistoryListFields'
+        ) {
+          formFieldsConfigs[config.uri] = config.config_value;
+        }
+      });
+    }
+
+    console.log('=====================>, formFieldsConfigs', formFieldsConfigs);
+    form.setFieldsValue(formFieldsConfigs);
+  };
+
+  // 处理保存
+  const handleSaveWorkFlow = async (): Promise<void> => {
+    const values = await form.validateFields();
+    console.log('保存设置:', values);
+
+    // 获取表单的所有字段值
+    const formValues = form.getFieldsValue();
+
+    const res = await modifyConfig({
+      ...formValues,
+      'Patient/WorkListFields': JSON.stringify(taskListConfig),
+      'Patient/HistoryListFields': JSON.stringify(historyListConfig),
     });
+    if (res?.code !== '0x000000') {
+      message.error(res?.description || '保存失败');
+      return;
+    }
+    message.success('保存成功');
   };
 
   // 处理取消
-  const handleCancel = () => {
+  const handleCancel = (): void => {
     form.resetFields();
     // 重置任务清单配置到初始状态
-    setTaskListConfig([
-      { key: '1', field: '动物ID', visible: true },
-      { key: '2', field: '动物名称', visible: true },
-      { key: '3', field: '动物类型', visible: true },
-      { key: '4', field: '性别', visible: true },
-      { key: '5', field: '年龄', visible: true },
-      { key: '6', field: '检查描述', visible: true },
-      { key: '7', field: '检查时间', visible: true },
-      { key: '8', field: '主人', visible: true },
-      { key: '9', field: '登记号', visible: true },
-    ]);
+    setTaskListConfig(listFieldBase);
     // 重置历史清单配置到初始状态
-    setHistoryListConfig([
-      { key: '1', field: '动物ID', visible: true },
-      { key: '2', field: '动物名称', visible: true },
-      { key: '3', field: '动物类型', visible: true },
-      { key: '4', field: '性别', visible: true },
-      { key: '5', field: '年龄', visible: true },
-    ]);
+    setHistoryListConfig(listFieldBase);
   };
 
+  useEffect(() => {
+    // 获取系统配置
+    getWorkFlowData();
+  }, []);
+
   return (
     <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
       {/* 主内容区 - 分割视图 */}
-      <div style={{ flex: 1, display: 'flex', gap: SPACING.LG, padding: SPACING.LG }}>
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          gap: SPACING.LG,
+          padding: SPACING.LG,
+        }}
+      >
         {/* 左侧面板 - 表单设置 */}
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: SPACING.MD, overflowY: 'auto' }}>
+        <div
+          style={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: SPACING.MD,
+            overflowY: 'auto',
+          }}
+        >
           <Form
             form={form}
-            layout="vertical"
-            initialValues={{
-              autoJumpToNextView: false,
-              autoExposureCountdown: false,
-              jumpDelaySeconds: 0,
-              suggestAPRTable: false,
-              allowMergeTasks: false,
-              allowEditAfterAcquisition: false,
-              requireRejectionReason: false,
-              showRejectedImages: false,
-              smallAnimalExposureMode: 'bodyThickness',
-              generatorPower: false,
-              tubePower: false,
-              generatorTemp: false,
-              detectorPower: false,
-              detectorWifi: false,
-              detectorTemp: false,
-              showRealImage: false,
-              showAnatomyImage: false,
-              exposureStatusEnabled: false,
-              exportPathMode: 'default',
-              exportCustomPath: '',
-              doseAdjustmentEnabled: false,
-            }}
+            layout="horizontal"
+            initialValues={{ ...initValues }}
           >
             {/* 图像采集设置 */}
             <Card title="图像采集设置" size="small">
               <Space direction="vertical" style={{ width: '100%' }}>
                 <Form.Item
                   label="是否自动跳转到下个视图"
-                  name="autoJumpToNextView"
+                  name="Inspection/AutoAcceptImage"
                   valuePropName="checked"
                 >
-                  <Switch />
+                  <Switch size="small" />
                 </Form.Item>
 
                 <Form.Item
                   label="是否开启倒计时自动曝光"
-                  name="autoExposureCountdown"
+                  name="Exam/AutoSelectExposureMode"
                   valuePropName="checked"
                 >
-                  <Switch />
+                  <Switch size="small" />
                 </Form.Item>
 
                 <Form.Item
                   label="自动跳转到下个视图延迟时间(秒)"
-                  name="jumpDelaySeconds"
+                  name="Inspection/AutoJumpToNextView"
                   rules={[
-                    { type: 'number', min: 0, max: 60, message: '延迟时间必须在0-60秒之间' }
+                    {
+                      min: 0,
+                      max: 60,
+                      message: '延迟时间必须在0-60秒之间',
+                    },
                   ]}
                 >
-                  <InputNumber min={0} max={60} style={{ width: '100%' }} />
+                  <InputNumber stringMode min={0} max={60} />
                 </Form.Item>
 
                 <Form.Item
@@ -218,18 +310,18 @@ const Workflow: React.FC = () => {
               <Space direction="vertical" style={{ width: '100%' }}>
                 <Form.Item
                   label="当拒绝图片时需输入拒绝原因"
-                  name="requireRejectionReason"
+                  name="Inspection/RequireRejectReason"
                   valuePropName="checked"
                 >
-                  <Switch />
+                  <Switch size="small" />
                 </Form.Item>
 
                 <Form.Item
                   label="是否显示拒绝图像"
-                  name="showRejectedImages"
+                  name="SystemConfig/ShowRejectImage"
                   valuePropName="checked"
                 >
-                  <Switch />
+                  <Switch size="small" />
                 </Form.Item>
               </Space>
             </Card>
@@ -249,55 +341,54 @@ const Workflow: React.FC = () => {
 
             {/* 状态栏图标 */}
             <Card title="状态栏图标" size="small">
-              <Space direction="vertical" style={{ width: '100%' }}>
-                <Form.Item
-                  label="发生器电量"
-                  name="generatorPower"
-                  valuePropName="checked"
-                >
-                  <Switch />
-                </Form.Item>
-
-                <Form.Item
-                  label="球管管电量"
-                  name="tubePower"
-                  valuePropName="checked"
-                >
-                  <Switch />
-                </Form.Item>
-
-                <Form.Item
-                  label="发生器温度"
-                  name="generatorTemp"
-                  valuePropName="checked"
-                >
-                  <Switch />
-                </Form.Item>
-
-                <Form.Item
-                  label="探测器电量"
-                  name="detectorPower"
-                  valuePropName="checked"
-                >
-                  <Switch />
-                </Form.Item>
-
-                <Form.Item
-                  label="探测器Wi-Fi"
-                  name="detectorWifi"
-                  valuePropName="checked"
-                >
-                  <Switch />
-                </Form.Item>
-
-                <Form.Item
-                  label="探测器温度"
-                  name="detectorTemp"
-                  valuePropName="checked"
-                >
-                  <Switch />
-                </Form.Item>
-              </Space>
+              <Row gutter={24}>
+                <Col span={12}>
+                  <Form.Item
+                    label="发生器电量"
+                    name="Display/BatteryStatusEnable"
+                    valuePropName="checked"
+                  >
+                    <Switch size="small" />
+                  </Form.Item>
+                  <Form.Item
+                    label="球管管电量"
+                    name="tubePower"
+                    valuePropName="checked"
+                  >
+                    <Switch size="small" />
+                  </Form.Item>
+                  <Form.Item
+                    label="发生器温度"
+                    name="Display/TemperatureStatusEnable"
+                    valuePropName="checked"
+                  >
+                    <Switch size="small" />
+                  </Form.Item>
+                </Col>
+                <Col span={12}>
+                  <Form.Item
+                    label="探测器电量"
+                    name="detectorPower"
+                    valuePropName="checked"
+                  >
+                    <Switch size="small" />
+                  </Form.Item>
+                  <Form.Item
+                    label="探测器Wi-Fi"
+                    name="Display/WIFIStatusEnable"
+                    valuePropName="checked"
+                  >
+                    <Switch size="small" />
+                  </Form.Item>
+                  <Form.Item
+                    label="探测器温度"
+                    name="detectorTemp"
+                    valuePropName="checked"
+                  >
+                    <Switch size="small" />
+                  </Form.Item>
+                </Col>
+              </Row>
             </Card>
 
             {/* 辅助定位 */}
@@ -305,18 +396,18 @@ const Workflow: React.FC = () => {
               <Space direction="vertical" style={{ width: '100%' }}>
                 <Form.Item
                   label="是否显示真实效果图"
-                  name="showRealImage"
+                  name="SystemConfig/IsShowRealImage"
                   valuePropName="checked"
                 >
-                  <Switch />
+                  <Switch size="small" />
                 </Form.Item>
 
                 <Form.Item
                   label="是否显示解剖图"
-                  name="showAnatomyImage"
+                  name="SystemConfig/IsShowAnatomicalImage"
                   valuePropName="checked"
                 >
-                  <Switch />
+                  <Switch size="small" />
                 </Form.Item>
               </Space>
             </Card>
@@ -325,30 +416,24 @@ const Workflow: React.FC = () => {
             <Card title="曝光状态显示" size="small">
               <Form.Item
                 label="是否开启曝光状态显示"
-                name="exposureStatusEnabled"
+                name="Exam/ShowExposureIndicator"
                 valuePropName="checked"
               >
-                <Switch />
+                <Switch size="small" />
               </Form.Item>
             </Card>
 
             {/* 导出图像路径 */}
-            <Card title="导出图像路径" size="small">
+            <Card title="导出图像路径" size="small" hidden>
               <Space direction="vertical" style={{ width: '100%' }}>
-                <Form.Item
-                  label="路径选择"
-                  name="exportPathMode"
-                >
+                <Form.Item label="路径选择" name="exportPathMode">
                   <RadioGroup>
                     <Radio value="default">默认路径</Radio>
                     <Radio value="lastUsed">上一次导出路径</Radio>
                   </RadioGroup>
                 </Form.Item>
 
-                <Form.Item
-                  label="上一次导出路径"
-                  name="exportCustomPath"
-                >
+                <Form.Item label="上一次导出路径" name="System/ExportDirectory">
                   <Input placeholder="请输入导出路径" />
                 </Form.Item>
               </Space>
@@ -361,16 +446,23 @@ const Workflow: React.FC = () => {
                 name="doseAdjustmentEnabled"
                 valuePropName="checked"
               >
-                <Switch />
+                <Switch size="small" />
               </Form.Item>
             </Card>
           </Form>
         </div>
 
         {/* 右侧面板 - 表格配置 */}
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: SPACING.MD }}>
+        <div
+          style={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: SPACING.MD,
+          }}
+        >
           {/* 任务清单显示配置 */}
-          <Card title="任务清单显示配置" size="small" style={{ flex: 1 }}>
+          <Card title="任务清单显示配置" size="small">
             <Table
               columns={getTableColumns(handleTaskListConfigChange)}
               dataSource={taskListConfig}
@@ -381,28 +473,32 @@ const Workflow: React.FC = () => {
           </Card>
 
           {/* 历史清单显示配置 */}
-          <Card title="历史清单显示配置" size="small" style={{ flex: 1 }}>
+          <Card title="历史清单显示配置" size="small">
             <Table
               columns={getTableColumns(handleHistoryListConfigChange)}
               dataSource={historyListConfig}
               pagination={false}
               size="small"
-              scroll={{ y: 200 }}
+              scroll={{ y: 400 }}
             />
           </Card>
         </div>
       </div>
 
       {/* 底部操作区 */}
-      <div style={{
-        padding: SPACING.LG,
-        borderTop: '1px solid #f0f0f0',
-        display: 'flex',
-        justifyContent: 'flex-end',
-        gap: SPACING.MD
-      }}>
+      <div
+        style={{
+          padding: SPACING.LG,
+          borderTop: '1px solid #f0f0f0',
+          display: 'flex',
+          justifyContent: 'flex-end',
+          gap: SPACING.MD,
+        }}
+      >
         <Button onClick={handleCancel}>取消</Button>
-        <Button type="primary" onClick={handleSave}>保存</Button>
+        <Button type="primary" onClick={handleSaveWorkFlow}>
+          保存
+        </Button>
       </div>
     </div>
   );