feat(patient->history->send): add send panel component and implement switch between history operation panel and send panel

src/pages/output/SendPanel.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Layout, Button, Checkbox, Typography, List } from 'antd';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { useDispatch } from 'react-redux';
+import { switchToOperationPanel } from '@/states/patient/worklist/slices/historyPanelSwitchSlice';
+
+const { Header, Content, Footer } = Layout;
+const { Title } = Typography;
+
+const SendImagePage = () => {
+  const [checked, setChecked] = useState(false);
+  const dispatch = useDispatch();
+
+  const handleReturn = () => {
+    dispatch(switchToOperationPanel());
+  };
+
+  return (
+    <Layout className="h-full">
+      {/* 顶部导航栏 */}
+      <Header
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          padding: '0 16px',
+        }}
+      >
+        <Button
+          type="text"
+          icon={<ArrowLeftOutlined />}
+          onClick={handleReturn}
+        />
+        <Title level={5} style={{ margin: 0, lineHeight: '48px' }}>
+          发送图像
+        </Title>
+      </Header>
+
+      {/* 主体内容 */}
+      <Content
+        style={{ padding: '16px', maxHeight: '100%', overflowY: 'auto' }}
+      >
+        <List
+          dataSource={[
+            { label: 'DVTKSTR SCP' },
+            ...Array.from({ length: 20 }, (_, i) => ({
+              label: `Checkbox ${i + 1}`,
+            })),
+          ]}
+          renderItem={(item) => (
+            <List.Item>
+              <Checkbox
+                checked={checked}
+                onChange={(e) => setChecked(e.target.checked)}
+              >
+                {item.label}
+              </Checkbox>
+            </List.Item>
+          )}
+        />
+      </Content>
+
+      {/* 底部按钮 */}
+      <Footer
+        style={{
+          padding: '16px',
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >
+        <Button
+          type="primary"
+          style={{ width: '100%', maxWidth: '400px' }}
+          onClick={() => alert('发送图像')}
+        >
+          发送图像
+        </Button>
+      </Footer>
+    </Layout>
+  );
+};
+
+export default SendImagePage;

src/pages/patient/HistoryList.tsx

@@ -9,6 +9,7 @@ import {
 } from '../../states/patient/worklist/slices/history';
 import WorklistTable from './components/WorklistTable';
 import OperationPanel from './components/OperationPanel';
+import SendPanel from '../../pages/output/SendPanel';
 import { RootState, AppDispatch } from '../../states/store';
 import { Task } from '@/domain/work';
 import worklistToExam from '../../domain/patient/worklistToExam';
@@ -31,6 +32,9 @@ const HistorylistPage: React.FC = () => {
   const historylistData = useSelector(
     (state: RootState) => state.historyEntities.data
   );
+  const currentPanel = useSelector(
+    (state: RootState) => state.historyPanelSwitch.currentPanel
+  );
 
   useEffect(() => {
     console.log(
@@ -92,7 +96,11 @@ const HistorylistPage: React.FC = () => {
             open={drawerVisible}
             width={300}
           >
-            <OperationPanel />
+            {currentPanel === 'OperationPanel' ? (
+              <OperationPanel />
+            ) : (
+              <SendPanel />
+            )}
           </Drawer>
         </>
       ) : (
@@ -115,7 +123,11 @@ const HistorylistPage: React.FC = () => {
             span={screens.lg ? 6 : screens.md ? 4 : 0}
             className="h-full overflow-auto"
           >
-            <OperationPanel />
+            {currentPanel === 'OperationPanel' ? (
+              <OperationPanel />
+            ) : (
+              <SendPanel />
+            )}
           </Col>
         </Row>
       )}

src/pages/patient/components/ActionPanel.tsx

@@ -3,6 +3,7 @@ import { Button, Tooltip } from 'antd';
 import { DeleteOutlined } from '@ant-design/icons';
 import { useDispatch, useSelector } from 'react-redux';
 import { deleteWorkThunk } from '@/states/patient/worklist/slices/workSlice';
+import { switchToSendPanel } from '@/states/patient/worklist/slices/historyPanelSwitchSlice';
 import { FormattedMessage } from 'react-intl';
 import { AppDispatch, RootState } from '@/states/store';
 
@@ -32,6 +33,10 @@ const ActionPanel: React.FC = () => {
     dispatch(deleteWorkThunk(selectedIds)); // Use the selected IDs from the Redux state
   };
 
+  const handleSend = () => {
+    dispatch(switchToSendPanel());
+  };
+
   return (
     <div className="flex flex-wrap gap-2 w-full">
       <ActionButton
@@ -142,6 +147,7 @@ const ActionPanel: React.FC = () => {
             defaultMessage="actionPanel.send"
           />
         }
+        onClick={handleSend}
       />
       <ActionButton
         icon={<DeleteOutlined />}

src/states/patient/worklist/slices/historyPanelSwitchSlice.ts

@@ -0,0 +1,26 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+interface HistoryPanelSwitchState {
+  currentPanel: 'OperationPanel' | 'SendPanel';
+}
+
+const initialState: HistoryPanelSwitchState = {
+  currentPanel: 'OperationPanel',
+};
+
+const historyPanelSwitchSlice = createSlice({
+  name: 'historyPanelSwitch',
+  initialState,
+  reducers: {
+    switchToOperationPanel: (state) => {
+      state.currentPanel = 'OperationPanel';
+    },
+    switchToSendPanel: (state) => {
+      state.currentPanel = 'SendPanel';
+    },
+  },
+});
+
+export const { switchToOperationPanel, switchToSendPanel } =
+  historyPanelSwitchSlice.actions;
+export default historyPanelSwitchSlice.reducer;

src/states/store.ts

@@ -35,6 +35,7 @@ import {
 import generatorMonitorReducer from './exam/generatorMonitorSlice';
 import largeScreenReducer from './exam/largeScreenSlice';
 import deviceAreaReducer from './exam/deviceAreaSlice';
+import historyPanelSwitchReducer from './patient/worklist/slices/historyPanelSwitchSlice';
 
 const store = configureStore({
   reducer: {
@@ -65,6 +66,7 @@ const store = configureStore({
     generatorMonitor: generatorMonitorReducer,
     largeScreen: largeScreenReducer,
     deviceArea: deviceAreaReducer,
+    historyPanelSwitch: historyPanelSwitchReducer,
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware().concat(