添加和view模块相关的组件及页面

src/pages/view/ImageProcessingPageLarge.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Layout } from 'antd';
+import BodyPartList from './components/BodyPartList';
+import ImageControl from './components/ImageControl';
+import OperationPanel from './components/OperationPanel';
+
+const { Header, Content, Sider } = Layout;
+
+const ImageProcessingPageLarge = () => {
+  return (
+    <Layout>
+      <Header>Image Processing Page</Header>
+      <Layout>
+        <Sider width={200}>
+          <BodyPartList />
+        </Sider>
+        <Content>
+          <ImageControl />
+        </Content>
+        <Sider width={300}>
+          <OperationPanel />
+        </Sider>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default ImageProcessingPageLarge;

src/pages/view/ImageProcessingPageMedium.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { Layout, Carousel, Button, Drawer } from 'antd';
+import ImageControl from './components/ImageControl';
+import OperationPanel from './components/OperationPanel';
+
+const { Header, Content } = Layout;
+
+const ImageProcessingPageMedium = () => {
+  const [visible, setVisible] = useState(false);
+
+  const showDrawer = () => {
+    setVisible(true);
+  };
+
+  const onClose = () => {
+    setVisible(false);
+  };
+
+  return (
+    <Layout>
+      <Header>Image Processing Page</Header>
+      <Content>
+        <Carousel>
+          <div>
+            <ImageControl />
+          </div>
+        </Carousel>
+        <Button
+          type="primary"
+          onClick={showDrawer}
+          style={{ position: 'absolute', top: 16, right: 16 }}
+        >
+          Menu
+        </Button>
+        <Drawer
+          title="Operation Panel"
+          placement="right"
+          onClose={onClose}
+          visible={visible}
+        >
+          <OperationPanel />
+        </Drawer>
+      </Content>
+    </Layout>
+  );
+};
+
+export default ImageProcessingPageMedium;

src/pages/view/ImageProcessingPageSmall.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Layout, Carousel, Row, Col } from 'antd';
+import ImageControl from './components/ImageControl';
+import MarkGroup from './components/MarkGroup';
+import RotateGroup from './components/RotateGroup';
+import CropGroup from './components/CropGroup';
+import BrightnessContrastGroup from './components/BrightnessContrastGroup';
+import InvertContrastPanel from './components/InvertContrastPanel';
+import ImageComparisonPanel from './components/ImageComparisonPanel';
+import LayoutGroup from './components/LayoutGroup';
+import SizeGroup from './components/SizeGroup';
+import AdvancedProcessingGroup from './components/AdvancedProcessingGroup';
+import MusicianPanel from './components/MusicianPanel';
+
+const { Header, Content } = Layout;
+
+const ImageProcessingPageSmall = () => {
+  return (
+    <Layout>
+      <Header>Image Processing Page</Header>
+      <Content>
+        <Carousel>
+          <div>
+            <ImageControl />
+          </div>
+        </Carousel>
+        <Row>
+          <Col span={24}>
+            <MarkGroup />
+          </Col>
+          <Col span={24}>
+            <RotateGroup />
+          </Col>
+          <Col span={24}>
+            <CropGroup />
+          </Col>
+          <Col span={24}>
+            <BrightnessContrastGroup />
+          </Col>
+          <Col span={24}>
+            <InvertContrastPanel />
+          </Col>
+          <Col span={24}>
+            <ImageComparisonPanel />
+          </Col>
+          <Col span={24}>
+            <LayoutGroup />
+          </Col>
+          <Col span={24}>
+            <SizeGroup />
+          </Col>
+          <Col span={24}>
+            <AdvancedProcessingGroup />
+          </Col>
+          <Col span={24}>
+            <MusicianPanel />
+          </Col>
+        </Row>
+      </Content>
+    </Layout>
+  );
+};
+
+export default ImageProcessingPageSmall;

src/pages/view/components/AdvancedProcessingGroup.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+const AdvancedProcessingGroup = () => {
+  return (
+    <Space>
+      <Button>Equalize</Button>
+      <Button>High Contrast</Button>
+      <Button>Soft Tissue</Button>
+      <Button>Bone</Button>
+      <Button>LUT</Button>
+      <Button>Decrease Window Width</Button>
+      <Button>Increase Window Width</Button>
+      <Button>Decrease Window Level</Button>
+      <Button>Increase Window Level</Button>
+    </Space>
+  );
+};
+
+export default AdvancedProcessingGroup;

src/pages/view/components/BodyPartList.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { List } from 'antd';
+
+const BodyPartList = () => {
+  return (
+    <List
+      size="small"
+      bordered
+      dataSource={['Body Part 1', 'Body Part 2', 'Body Part 3']}
+      renderItem={(item) => <List.Item>{item}</List.Item>}
+    />
+  );
+};
+
+export default BodyPartList;

src/pages/view/components/BrightnessContrastGroup.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+const BrightnessContrastGroup = () => {
+  return (
+    <Space>
+      <Button>Adjust Brightness and Contrast</Button>
+      <Button>Invert Image</Button>
+      <Button>Reset Image</Button>
+    </Space>
+  );
+};
+
+export default BrightnessContrastGroup;

src/pages/view/components/CropGroup.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+const CropGroup = () => {
+  return (
+    <Space>
+      <Button>Crop Image</Button>
+      <Button>Delete Digital Mask</Button>
+      <Button>Crop Selected Area</Button>
+      <Button>Delete Mask</Button>
+    </Space>
+  );
+};
+
+export default CropGroup;

src/pages/view/components/ExportPanel.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+const ExportPanel = () => {
+  return (
+    <Space>
+      <Button>Export</Button>
+    </Space>
+  );
+};
+
+export default ExportPanel;

src/pages/view/components/FunctionArea.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+const FunctionArea = () => {
+  return (
+    <Space>
+      <Button>Add L Mark</Button>
+      <Button>Add R Mark</Button>
+      <Button>Delete Selected Mark</Button>
+      <Button>Horizontal Flip</Button>
+      <Button>Vertical Flip</Button>
+      <Button>Rotate Counterclockwise 90°</Button>
+      <Button>Rotate Clockwise 90°</Button>
+      <Button>Rotate Any Angle</Button>
+      <Button>Crop Image</Button>
+      <Button>Delete Digital Mask</Button>
+      <Button>Adjust Brightness and Contrast</Button>
+      <Button>Crop Selected Area</Button>
+      <Button>Delete Mask</Button>
+      <Button>Image Comparison</Button>
+      <Button>Invert Contrast</Button>
+      <Button>1x1 Layout</Button>
+      <Button>1x2 Layout</Button>
+      <Button>2x2 Layout</Button>
+      <Button>4x4 Layout</Button>
+      <Button>Magnifier</Button>
+      <Button>Fit Size</Button>
+      <Button>Original Size</Button>
+      <Button>Zoom Image</Button>
+      <Button>Reset Cursor</Button>
+      <Button>Pan</Button>
+      <Button>Invert Image</Button>
+      <Button>Reset Image</Button>
+      <Button>Snapshot</Button>
+      <Button>Advanced Processing</Button>
+      <Button>Musician</Button>
+      <Button>Image Measurement</Button>
+      <Button>More</Button>
+    </Space>
+  );
+};
+
+export default FunctionArea;

src/pages/view/components/ImageComparisonPanel.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+const ImageComparisonPanel = () => {
+  return (
+    <Space>
+      <Button>Image Comparison</Button>
+    </Space>
+  );
+};
+
+export default ImageComparisonPanel;

src/pages/view/components/ImageControl.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Image } from 'antd';
+
+const ImageControl = () => {
+  return (
+    <div className="image-control">
+      <Image
+        width={200}
+        src="https://via.placeholder.com/200"
+        alt="Sample Image"
+      />
+    </div>
+  );
+};
+
+export default ImageControl;

src/pages/view/components/ImageStateControl.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+const ImageStateControl = () => {
+  return (
+    <Space>
+      <Button>Reject Image</Button>
+      <Button>Restore Image</Button>
+      <Button>Save As</Button>
+    </Space>
+  );
+};
+
+export default ImageStateControl;

src/pages/view/components/InvertContrastPanel.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+const InvertContrastPanel = () => {
+  return (
+    <Space>
+      <Button>Invert Contrast</Button>
+    </Space>
+  );
+};
+
+export default InvertContrastPanel;

src/pages/view/components/LayoutGroup.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+const LayoutGroup = () => {
+  return (
+    <Space>
+      <Button>1x1 Layout</Button>
+      <Button>1x2 Layout</Button>
+      <Button>2x2 Layout</Button>
+      <Button>4x4 Layout</Button>
+    </Space>
+  );
+};
+
+export default LayoutGroup;

src/pages/view/components/MarkGroup.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+const MarkGroup = () => {
+  return (
+    <Space>
+      <Button>Add L Mark</Button>
+      <Button>Add R Mark</Button>
+      <Button>Delete Selected Mark</Button>
+    </Space>
+  );
+};
+
+export default MarkGroup;

src/pages/view/components/MusicianPanel.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+const MusicianPanel = () => {
+  return (
+    <Space>
+      <Button>Musician</Button>
+    </Space>
+  );
+};
+
+export default MusicianPanel;

src/pages/view/components/OperationPanel.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card } from 'antd';
+
+const OperationPanel = () => {
+  return (
+    <Card title="Operation Panel" className="operation-panel">
+      <div>Function Area</div>
+      <div>Image State Control</div>
+      <div>Transfer Area</div>
+    </Card>
+  );
+};
+
+export default OperationPanel;

src/pages/view/components/RotateGroup.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+const RotateGroup = () => {
+  return (
+    <Space>
+      <Button>Horizontal Flip</Button>
+      <Button>Vertical Flip</Button>
+      <Button>Rotate Counterclockwise 90°</Button>
+      <Button>Rotate Clockwise 90°</Button>
+      <Button>Rotate Any Angle</Button>
+    </Space>
+  );
+};
+
+export default RotateGroup;

src/pages/view/components/SendPanel.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+const SendPanel = () => {
+  return (
+    <Space>
+      <Button>Send</Button>
+    </Space>
+  );
+};
+
+export default SendPanel;

src/pages/view/components/SizeGroup.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+const SizeGroup = () => {
+  return (
+    <Space>
+      <Button>Magnifier</Button>
+      <Button>Fit Size</Button>
+      <Button>Original Size</Button>
+      <Button>Zoom Image</Button>
+      <Button>Reset Cursor</Button>
+      <Button>Pan</Button>
+      <Button>Reset Image</Button>
+    </Space>
+  );
+};
+
+export default SizeGroup;

src/pages/view/components/TransferArea.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+
+const TransferArea = () => {
+  return (
+    <Space>
+      <Button>Send</Button>
+      <Button>Export</Button>
+    </Space>
+  );
+};
+
+export default TransferArea;