feat(processing): add transfer area and send panel to operation panel, implement switch between them

src/pages/output/SendPanelForView.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { Layout, Button, Checkbox, Typography, List, Space } from 'antd';
+import {
+  ArrowLeftOutlined,
+  CheckSquareOutlined,
+  CloseSquareOutlined,
+  PictureOutlined,
+} from '@ant-design/icons';
+import { useDispatch } from 'react-redux';
+import { switchToOperationPanel } from '../../states/panelSwitchSliceForView';
+
+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' }}
+      >
+        <Space style={{ marginBottom: '16px' }}>
+          <Button icon={<PictureOutlined />} />
+          <Button icon={<CheckSquareOutlined />} />
+          <Button icon={<CloseSquareOutlined />} />
+        </Space>
+        <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/view/components/OperationPanel.tsx

@@ -1,20 +1,33 @@
 import React from 'react';
 import { Layout } from 'antd';
+import { useSelector } from 'react-redux';
 import FunctionArea from './FunctionArea';
 import TransferArea from './TransferArea';
+import SendPanelForView from '../../output/SendPanelForView';
+import { RootState } from '../../../states/store';
 
 const { Content, Footer } = Layout;
 
 const OperationPanel = () => {
+  const currentPanel = useSelector(
+    (state: RootState) => state.panelSwitchForView.currentPanel
+  );
+
   return (
     <Layout className="h-full">
-      <Content>
-        <FunctionArea />
-      </Content>
-      <Footer className="p-1">
-        <div>Image State Control</div>
-        <TransferArea />
-      </Footer>
+      {currentPanel === 'OperationPanel' ? (
+        <>
+          <Content>
+            <FunctionArea />
+          </Content>
+          <Footer className="p-1">
+            <div>Image State Control</div>
+            <TransferArea />
+          </Footer>
+        </>
+      ) : (
+        <SendPanelForView />
+      )}
     </Layout>
   );
 };

src/pages/view/components/TransferArea.tsx

@@ -1,7 +1,15 @@
 import React from 'react';
 import { Button } from 'antd';
+import { useDispatch } from 'react-redux';
+import { switchToSendPanel } from '../../../states/panelSwitchSliceForView';
 
 const TransferArea = () => {
+  const dispatch = useDispatch();
+
+  const handleSendClick = () => {
+    dispatch(switchToSendPanel());
+  };
+
   return (
     <div className="transfer-area">
       <Button
@@ -10,6 +18,7 @@ const TransferArea = () => {
           height: '1.5rem',
           padding: 0,
         }}
+        onClick={handleSendClick}
       >
         Send
       </Button>

src/states/panelSwitchSliceForView.ts

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

src/states/store.ts

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