添加exam相关的组件，形成检查页面

src/layouts/BasicLayout.tsx

@@ -7,7 +7,6 @@ import logo from '../assets/imgs/logo-v3.jpg';
 import NavbarFloat from './NavbarFloat';
 import NavMenu from './NavMenu';
 import StatusBar, { StatusBarProps } from './StateBar';
-import AboutPage from '@/pages/demo/AboutPage';
 import HomePage from '@/pages/demo/HomePage';
 import RegisterPage from '@/pages/patient/register';
 import WorklistPage from '@/pages/patient/worklist';
@@ -18,6 +17,7 @@ import OutputlistPage from '@/pages/patient/OutputList';
 import PatientManagement from '@/pages/patient/PatientManagement';
 import MeButton from '@/pages/security/components/MeButton';
 import Profile from '@/pages/security/Profile';
+import ExamPage from '@/pages/exam/ExamPage';
 
 // import { Link } from 'react-router-dom';
 // import { MenuOutlined } from '@ant-design/icons';
@@ -48,7 +48,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
   const [currentKey, setCurrentKey] = useState('register');
   // key和内容组件的映射
   const contentMap = {
-    sub2: <AboutPage />,
+    exam: <ExamPage />,
     process: <HomePage />,
     register: <RegisterPage />,
     worklist: <WorklistPage />,

src/layouts/NavMenu.tsx

@@ -85,7 +85,7 @@ const items: MenuItem[] = [
     ],
   },
   {
-    key: 'sub2',
+    key: 'exam',
     label: (
       <FormattedMessage
         id="exam"

src/pages/exam/ContentAreaLarge.tsx

@@ -0,0 +1,156 @@
+import {
+  Row,
+  Col,
+  Card,
+  Select,
+  InputNumber,
+  Button,
+  Switch,
+  Divider,
+  Tooltip,
+} from 'antd';
+import {
+  DeleteOutlined,
+  CopyOutlined,
+  SaveOutlined,
+  CameraOutlined,
+  CloseOutlined,
+} from '@ant-design/icons';
+
+const ContentAreaLarge = () => {
+  return (
+    <Row>
+      <Col span={16}>
+        <Card>
+          <Row gutter={16}>
+            <Col span={6}>
+              <Card>体位列表</Card>
+            </Col>
+            <Col span={18}>
+              <Card>体位详情</Card>
+            </Col>
+          </Row>
+        </Card>
+      </Col>
+      <Col span={8}>
+        <Card>
+          <Row gutter={16} align="middle">
+            <Col span={9}>
+              <Select
+                placeholder="选择体型"
+                style={{ width: '100%', marginBottom: 8 }}
+              >
+                <Select.Option value="体型1">体型1</Select.Option>
+                <Select.Option value="体型2">体型2</Select.Option>
+              </Select>
+            </Col>
+            <Col span={15}>
+              <Select
+                placeholder="选择工作位"
+                style={{ width: '100%', marginBottom: 8 }}
+              >
+                <Select.Option value="工作位1">工作位1</Select.Option>
+                <Select.Option value="工作位2">工作位2</Select.Option>
+              </Select>
+            </Col>
+          </Row>
+          <div>
+            <InputNumber
+              placeholder="mA"
+              style={{ width: '100%', marginBottom: 8 }}
+            />
+            <InputNumber
+              placeholder="ms"
+              style={{ width: '100%', marginBottom: 8 }}
+            />
+            <InputNumber
+              placeholder="mAs"
+              style={{ width: '100%', marginBottom: 8 }}
+            />
+            <InputNumber
+              placeholder="KV"
+              style={{ width: '100%', marginBottom: 8 }}
+            />
+            <InputNumber
+              placeholder="density"
+              style={{ width: '100%', marginBottom: 8 }}
+            />
+          </div>
+          <Row gutter={16} align="middle">
+            <Col span={12}>
+              <Select placeholder="选择曝光模式" style={{ width: '100%' }}>
+                <Select.Option value="mAs">mAs</Select.Option>
+                <Select.Option value="time">time</Select.Option>
+              </Select>
+            </Col>
+            <Col span={9}>
+              <Switch
+                checkedChildren="开启AEC"
+                unCheckedChildren="关闭AEC"
+                defaultChecked
+              />
+            </Col>
+            <Col span={3}>
+              <Button
+                type="primary"
+                style={{ width: '100%' }}
+                icon={<DeleteOutlined />}
+                title="重置参数"
+              />
+            </Col>
+          </Row>
+          <Divider />
+          <Row gutter={16} align="middle">
+            <Col span={4}>
+              <Tooltip title="删除选择的体位">
+                <Button
+                  type="primary"
+                  style={{ width: '100%' }}
+                  icon={<DeleteOutlined />}
+                />
+              </Tooltip>
+            </Col>
+            <Col span={4}>
+              <Tooltip title="复制选择的体位">
+                <Button
+                  type="primary"
+                  style={{ width: '100%' }}
+                  icon={<CopyOutlined />}
+                />
+              </Tooltip>
+            </Col>
+            <Col span={4}>
+              <Tooltip title="保存参数">
+                <Button
+                  type="primary"
+                  style={{ width: '100%' }}
+                  icon={<SaveOutlined />}
+                />
+              </Tooltip>
+            </Col>
+            <Col span={4}>
+              <Tooltip title="打开/关闭摄像头">
+                <Button
+                  type="primary"
+                  style={{ width: '100%' }}
+                  icon={<CameraOutlined />}
+                />
+              </Tooltip>
+            </Col>
+            <Col span={4}>
+              <Tooltip title="拒绝">
+                <Button
+                  type="primary"
+                  style={{ width: '100%' }}
+                  icon={<CloseOutlined />}
+                />
+              </Tooltip>
+            </Col>
+          </Row>
+        </Card>
+      </Col>
+    </Row>
+  );
+};
+
+export default ContentAreaLarge;

src/pages/exam/ContentAreaMedium.tsx

@@ -0,0 +1,156 @@
+import {
+  Row,
+  Col,
+  Card,
+  Select,
+  InputNumber,
+  Button,
+  Switch,
+  Tooltip,
+  Divider,
+} from 'antd';
+import {
+  DeleteOutlined,
+  CopyOutlined,
+  SaveOutlined,
+  CameraOutlined,
+  CloseOutlined,
+} from '@ant-design/icons';
+
+const ContentAreaMedium = () => {
+  return (
+    <Row gutter={16}>
+      <Col span={16}>
+        <Card title="体位区">
+          <Row gutter={16}>
+            <Col span={24} style={{ height: 50 }}>
+              <Card title="体位列表">体位列表</Card>
+            </Col>
+            <Col span={24}>
+              <Card title="体位详情">体位详情</Card>
+            </Col>
+          </Row>
+        </Card>
+      </Col>
+      <Col span={8}>
+        <Card>
+          <Row gutter={16} align="middle">
+            <Col span={9}>
+              <Select
+                placeholder="选择体型"
+                style={{ width: '100%', marginBottom: 8 }}
+              >
+                <Select.Option value="体型1">体型1</Select.Option>
+                <Select.Option value="体型2">体型2</Select.Option>
+              </Select>
+            </Col>
+            <Col span={15}>
+              <Select
+                placeholder="选择工作位"
+                style={{ width: '100%', marginBottom: 8 }}
+              >
+                <Select.Option value="工作位1">工作位1</Select.Option>
+                <Select.Option value="工作位2">工作位2</Select.Option>
+              </Select>
+            </Col>
+          </Row>
+          <div>
+            <InputNumber
+              placeholder="mA"
+              style={{ width: '100%', marginBottom: 8 }}
+            />
+            <InputNumber
+              placeholder="ms"
+              style={{ width: '100%', marginBottom: 8 }}
+            />
+            <InputNumber
+              placeholder="mAs"
+              style={{ width: '100%', marginBottom: 8 }}
+            />
+            <InputNumber
+              placeholder="KV"
+              style={{ width: '100%', marginBottom: 8 }}
+            />
+            <InputNumber
+              placeholder="density"
+              style={{ width: '100%', marginBottom: 8 }}
+            />
+          </div>
+          <Row gutter={16} align="middle">
+            <Col span={12}>
+              <Select placeholder="选择曝光模式" style={{ width: '100%' }}>
+                <Select.Option value="mAs">mAs</Select.Option>
+                <Select.Option value="time">time</Select.Option>
+              </Select>
+            </Col>
+            <Col span={9}>
+              <Switch
+                checkedChildren="开启AEC"
+                unCheckedChildren="关闭AEC"
+                defaultChecked
+              />
+            </Col>
+            <Col span={3}>
+              <Button
+                type="primary"
+                style={{ width: '100%' }}
+                icon={<DeleteOutlined />}
+                title="重置参数"
+              />
+            </Col>
+          </Row>
+          <Divider />
+          <Row gutter={16} align="middle">
+            <Col span={4}>
+              <Tooltip title="删除选择的体位">
+                <Button
+                  type="primary"
+                  style={{ width: '100%' }}
+                  icon={<DeleteOutlined />}
+                />
+              </Tooltip>
+            </Col>
+            <Col span={4}>
+              <Tooltip title="复制选择的体位">
+                <Button
+                  type="primary"
+                  style={{ width: '100%' }}
+                  icon={<CopyOutlined />}
+                />
+              </Tooltip>
+            </Col>
+            <Col span={4}>
+              <Tooltip title="保存参数">
+                <Button
+                  type="primary"
+                  style={{ width: '100%' }}
+                  icon={<SaveOutlined />}
+                />
+              </Tooltip>
+            </Col>
+            <Col span={4}>
+              <Tooltip title="打开/关闭摄像头">
+                <Button
+                  type="primary"
+                  style={{ width: '100%' }}
+                  icon={<CameraOutlined />}
+                />
+              </Tooltip>
+            </Col>
+            <Col span={4}>
+              <Tooltip title="拒绝">
+                <Button
+                  type="primary"
+                  style={{ width: '100%' }}
+                  icon={<CloseOutlined />}
+                />
+              </Tooltip>
+            </Col>
+          </Row>
+        </Card>
+      </Col>
+    </Row>
+  );
+};
+
+export default ContentAreaMedium;

src/pages/exam/ContentAreaSmall.tsx

@@ -0,0 +1,156 @@
+import {
+  Card,
+  Select,
+  InputNumber,
+  Button,
+  Switch,
+  Carousel,
+  Row,
+  Col,
+  Divider,
+  Tooltip,
+} from 'antd';
+import {
+  DeleteOutlined,
+  CopyOutlined,
+  SaveOutlined,
+  CameraOutlined,
+  CloseOutlined,
+} from '@ant-design/icons';
+
+const ContentAreaSmall = ({ className }: { className?: string }) => {
+  console.log('ContentAreaSmall component rendered');
+  console.log('ContentAreaSmall component rendered');
+  return (
+    <Carousel
+      autoplay={false}
+      effect="fade"
+      adaptiveHeight={true}
+      className={`w-full max-w-[800px] h-full ${className}`}
+    >
+      <div className="h-full">
+        <Card title="体位列表">体位列表</Card>
+      </div>
+      <div>
+        <Card title="体位详情">体位详情</Card>
+      </div>
+      <div>
+        <Row gutter={16} align="middle">
+          <Col span={9}>
+            <Select
+              placeholder="选择体型"
+              style={{ width: '100%', marginBottom: 8 }}
+            >
+              <Select.Option value="体型1">体型1</Select.Option>
+              <Select.Option value="体型2">体型2</Select.Option>
+            </Select>
+          </Col>
+          <Col span={15}>
+            <Select
+              placeholder="选择工作位"
+              style={{ width: '100%', marginBottom: 8 }}
+            >
+              <Select.Option value="工作位1">工作位1</Select.Option>
+              <Select.Option value="工作位2">工作位2</Select.Option>
+            </Select>
+          </Col>
+        </Row>
+        <div>
+          <InputNumber
+            placeholder="mA"
+            style={{ width: '100%', marginBottom: 8 }}
+          />
+          <InputNumber
+            placeholder="ms"
+            style={{ width: '100%', marginBottom: 8 }}
+          />
+          <InputNumber
+            placeholder="mAs"
+            style={{ width: '100%', marginBottom: 8 }}
+          />
+          <InputNumber
+            placeholder="KV"
+            style={{ width: '100%', marginBottom: 8 }}
+          />
+          <InputNumber
+            placeholder="density"
+            style={{ width: '100%', marginBottom: 8 }}
+          />
+        </div>
+        <Row gutter={16} align="middle">
+          <Col span={12}>
+            <Select placeholder="选择曝光模式" style={{ width: '100%' }}>
+              <Select.Option value="mAs">mAs</Select.Option>
+              <Select.Option value="time">time</Select.Option>
+            </Select>
+          </Col>
+          <Col span={9}>
+            <Switch
+              checkedChildren="开启AEC"
+              unCheckedChildren="关闭AEC"
+              defaultChecked
+            />
+          </Col>
+          <Col span={3}>
+            <Button
+              type="primary"
+              style={{ width: '100%' }}
+              icon={<DeleteOutlined />}
+              title="重置参数"
+            />
+          </Col>
+        </Row>
+        <Divider />
+        <Row gutter={16} align="middle">
+          <Col span={4}>
+            <Tooltip title="删除选择的体位">
+              <Button
+                type="primary"
+                style={{ width: '100%' }}
+                icon={<DeleteOutlined />}
+              />
+            </Tooltip>
+          </Col>
+          <Col span={4}>
+            <Tooltip title="复制选择的体位">
+              <Button
+                type="primary"
+                style={{ width: '100%' }}
+                icon={<CopyOutlined />}
+              />
+            </Tooltip>
+          </Col>
+          <Col span={4}>
+            <Tooltip title="保存参数">
+              <Button
+                type="primary"
+                style={{ width: '100%' }}
+                icon={<SaveOutlined />}
+              />
+            </Tooltip>
+          </Col>
+          <Col span={4}>
+            <Tooltip title="打开/关闭摄像头">
+              <Button
+                type="primary"
+                style={{ width: '100%' }}
+                icon={<CameraOutlined />}
+              />
+            </Tooltip>
+          </Col>
+          <Col span={4}>
+            <Tooltip title="拒绝">
+              <Button
+                type="primary"
+                style={{ width: '100%' }}
+                icon={<CloseOutlined />}
+              />
+            </Tooltip>
+          </Col>
+        </Row>
+      </div>
+    </Carousel>
+  );
+};
+
+export default ContentAreaSmall;

src/pages/exam/DeviceArea.tsx

@@ -0,0 +1,18 @@
+import { Flex, Button } from 'antd';
+import {
+  ToolOutlined,
+  CameraOutlined,
+  TabletOutlined,
+} from '@ant-design/icons';
+
+const DeviceArea = ({ className }: { className?: string }) => {
+  return (
+    <Flex justify="end" align="center" className={`w-full ${className}`}>
+      <Button icon={<ToolOutlined />} title="发生器状态指示器" />
+      <Button icon={<CameraOutlined />} title="曝光指示器" />
+      <Button icon={<TabletOutlined />} title="平板指示器" />
+    </Flex>
+  );
+};
+
+export default DeviceArea;

src/pages/exam/ExamPage.tsx

@@ -0,0 +1,21 @@
+import { Grid } from 'antd';
+import LargeScreen from './LargeScreen';
+import MediumScreen from './MediumScreen';
+import SmallScreen from './SmallScreen';
+
+const ExamPage = () => {
+  console.log('ExamPage component rendered');
+  const screens = Grid.useBreakpoint();
+
+  return (
+    <>
+      {screens.xxl && <LargeScreen />}
+      {screens.xl && !screens.xxl && <MediumScreen />}
+      {screens.lg && !screens.xl && <MediumScreen />}
+      {screens.sm && !screens.lg && <SmallScreen />}
+      {screens.xs && !screens.sm && <SmallScreen />}
+    </>
+  );
+};
+
+export default ExamPage;

src/pages/exam/LargeScreen.tsx

@@ -0,0 +1,18 @@
+import { Layout, Row } from 'antd';
+import DeviceArea from './DeviceArea';
+import ContentAreaLarge from './ContentAreaLarge';
+
+const LargeScreen = () => {
+  return (
+    <Layout className="border-4 border-solid border-red-500">
+      <Row className="border-4 border-solid border-red-500">
+        <DeviceArea className="border-4 border-solid border-red-500" />
+      </Row>
+      <Row>
+        <ContentAreaLarge />
+      </Row>
+    </Layout>
+  );
+};
+
+export default LargeScreen;

src/pages/exam/MediumScreen.tsx

@@ -0,0 +1,18 @@
+import { Layout, Row } from 'antd';
+import DeviceArea from './DeviceArea';
+import ContentAreaMedium from './ContentAreaMedium';
+
+const MediumScreen = () => {
+  return (
+    <Layout>
+      <Row className="border-4 border-solid border-red-500">
+        <DeviceArea className="border-4 border-solid border-red-500" />
+      </Row>
+      <Row>
+        <ContentAreaMedium />
+      </Row>
+    </Layout>
+  );
+};
+
+export default MediumScreen;

src/pages/exam/SmallScreen.tsx

@@ -0,0 +1,19 @@
+import { Layout, Row } from 'antd';
+import DeviceArea from './DeviceArea';
+import ContentAreaSmall from './ContentAreaSmall';
+
+const SmallScreen = ({ className }: { className?: string }) => {
+  console.log('SmallScreen component rendered');
+  return (
+    <Layout className={`'border border-blue-400' ${className} w-full`}>
+      <Row>
+        <DeviceArea />
+      </Row>
+      <Row>
+        <ContentAreaSmall className=" w-full" />
+      </Row>
+    </Layout>
+  );
+};
+
+export default SmallScreen;