瀏覽代碼

style(exam, patient): adjust button sizes and layouts on pages

sw 1 月之前
父節點
當前提交
94e665e79f

+ 104 - 115
src/pages/exam/ContentAreaLarge.tsx

@@ -8,6 +8,7 @@ import {
   Divider,
   Tooltip,
   message,
+  Flex,
 } from 'antd';
 import {
   DeleteOutlined,
@@ -79,17 +80,17 @@ const ContentAreaLarge = () => {
 
   return (
     <Row>
-      <Col span={16}>
+      <Col span={20}>
         <Row gutter={16} className="h-full">
-          <Col span={6} className="flex flex-col">
+          <Col span={4} className="flex flex-col">
             <BodyPositionList layout="vertical"></BodyPositionList>
           </Col>
-          <Col span={18}>
+          <Col span={20}>
             <BodyPositionDetail />
           </Col>
         </Row>
       </Col>
-      <Col span={8}>
+      <Col span={4}>
         <Row gutter={16} align="middle">
           <Col span={9}>
             <Select
@@ -166,122 +167,110 @@ const ContentAreaLarge = () => {
             }
           />
         </div>
-        <Row gutter={16} align="middle">
-          <Col span={12}>
-            <Select
-              placeholder="选择曝光模式"
-              style={{ width: '100%' }}
-              value={currentExposureMode}
-              onChange={handleExposureModeChange}
-            >
-              <Select.Option value="mAs">mAs</Select.Option>
-              <Select.Option value="time">time</Select.Option>
-            </Select>
-          </Col>
-          <Col span={9}>
-            <Switch
-              checkedChildren="开启AEC"
-              unCheckedChildren="关闭AEC"
-              checked={isAECEnabled}
-              onChange={handleAECChange}
-            />
-          </Col>
-          <Col span={3}>
+        <Flex align="center" justify="start" gap="middle" wrap>
+          <Select
+            placeholder="选择曝光模式"
+            value={currentExposureMode}
+            onChange={handleExposureModeChange}
+            style={{ width: '2rem' }}
+          >
+            <Select.Option value="mAs">mAs</Select.Option>
+            <Select.Option value="time">time</Select.Option>
+          </Select>
+
+          <Switch
+            checkedChildren="开启AEC"
+            unCheckedChildren="关闭AEC"
+            checked={isAECEnabled}
+            onChange={handleAECChange}
+            style={{ width: '1.5rem' }}
+          />
+
+          <Button
+            type="primary"
+            style={{ width: '1.5rem', height: '1.5rem' }}
+            icon={<DeleteOutlined />}
+            title="重置参数"
+          />
+        </Flex>
+        <Divider />
+        <Flex wrap gap="small">
+          <Tooltip title="删除选择的体位">
             <Button
               type="primary"
-              style={{ width: '100%' }}
+              style={{ width: '1.5rem', height: '1.5rem' }}
               icon={<DeleteOutlined />}
-              title="重置参数"
-            />
-          </Col>
-        </Row>
-        <Divider />
-        <Row gutter={16} align="middle">
-          <Col span={4}>
-            <Tooltip title="删除选择的体位">
-              <Button
-                type="primary"
-                style={{ width: '100%' }}
-                icon={<DeleteOutlined />}
-                onClick={async () => {
-                  const selectedBodyPosition =
-                    store.getState().bodyPositionList.selectedBodyPosition;
-                  console.log(
-                    `选中的体位:${JSON.stringify(selectedBodyPosition)}`
-                  );
-                  if (
-                    selectedBodyPosition &&
-                    selectedBodyPosition.sop_instance_uid
-                  ) {
-                    try {
-                      await deleteBodyPosition(
+              onClick={async () => {
+                const selectedBodyPosition =
+                  store.getState().bodyPositionList.selectedBodyPosition;
+                console.log(
+                  `选中的体位:${JSON.stringify(selectedBodyPosition)}`
+                );
+                if (
+                  selectedBodyPosition &&
+                  selectedBodyPosition.sop_instance_uid
+                ) {
+                  try {
+                    await deleteBodyPosition(
+                      selectedBodyPosition.sop_instance_uid
+                    );
+                    dispatch(
+                      removeBodyPositionBySopInstanceUid(
                         selectedBodyPosition.sop_instance_uid
-                      );
-                      dispatch(
-                        removeBodyPositionBySopInstanceUid(
-                          selectedBodyPosition.sop_instance_uid
-                        )
-                      );
-                      dispatch(setByIndex(0));
-                    } catch (error) {
-                      console.error('Error deleting body position:', error);
-                      message.error('Failed to delete body position');
-                    }
+                      )
+                    );
+                    dispatch(setByIndex(0));
+                  } catch (error) {
+                    console.error('Error deleting body position:', error);
+                    message.error('Failed to delete body position');
                   }
-                }}
-              />
-            </Tooltip>
-          </Col>
-          <Col span={4}>
-            <Tooltip title="复制选择的体位">
-              <Button
-                type="primary"
-                style={{ width: '100%' }}
-                icon={<CopyOutlined />}
-                onClick={() => {
-                  const instanceUid =
-                    store.getState().bodyPositionList.selectedBodyPosition
-                      ?.study_instance_uid ?? '';
-                  console.log(
-                    'Copying position for instance UID:',
-                    instanceUid
-                  );
-                  console.log(
-                    `${store.getState().bodyPositionList.selectedBodyPosition}`
-                  );
-                  dispatch(copyPositionThunk({ instanceUid }));
-                }}
-              />
-            </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>
+                }
+              }}
+            />
+          </Tooltip>
+
+          <Tooltip title="复制选择的体位">
+            <Button
+              type="primary"
+              style={{ width: '1.5rem', height: '1.5rem' }}
+              icon={<CopyOutlined />}
+              onClick={() => {
+                const instanceUid =
+                  store.getState().bodyPositionList.selectedBodyPosition
+                    ?.study_instance_uid ?? '';
+                console.log('Copying position for instance UID:', instanceUid);
+                console.log(
+                  `${store.getState().bodyPositionList.selectedBodyPosition}`
+                );
+                dispatch(copyPositionThunk({ instanceUid }));
+              }}
+            />
+          </Tooltip>
+
+          <Tooltip title="保存参数">
+            <Button
+              type="primary"
+              style={{ width: '1.5rem', height: '1.5rem' }}
+              icon={<SaveOutlined />}
+            />
+          </Tooltip>
+
+          <Tooltip title="打开/关闭摄像头">
+            <Button
+              type="primary"
+              style={{ width: '1.5rem', height: '1.5rem' }}
+              icon={<CameraOutlined />}
+            />
+          </Tooltip>
+
+          <Tooltip title="拒绝">
+            <Button
+              type="primary"
+              style={{ width: '1.5rem', height: '1.5rem' }}
+              icon={<CloseOutlined />}
+            />
+          </Tooltip>
+        </Flex>
       </Col>
     </Row>
   );

+ 1 - 1
src/pages/patient/components/ActionPanel.tsx

@@ -18,7 +18,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
   onClick,
 }) => (
   <Tooltip title={tooltip}>
-    <Button icon={icon} onClick={onClick} />
+    <Button icon={icon} onClick={onClick} style={{ width: '1.5rem' }} />
   </Tooltip>
 );
 

+ 3 - 0
src/pages/patient/components/BinActionPanel.tsx

@@ -85,6 +85,7 @@ const BinActionPanel: React.FC<BinActionPanelProps> = ({
                 icon={<DeleteOutlined />}
                 onClick={onDelete}
                 danger
+                style={{ width: '1.5rem' }}
               />
             </Tooltip>
             <Tooltip
@@ -100,6 +101,7 @@ const BinActionPanel: React.FC<BinActionPanelProps> = ({
                 shape="circle"
                 icon={<RollbackOutlined />}
                 onClick={onRestore}
+                style={{ width: '1.5rem' }}
               />
             </Tooltip>
             <Tooltip
@@ -112,6 +114,7 @@ const BinActionPanel: React.FC<BinActionPanelProps> = ({
                 shape="circle"
                 icon={<RestOutlined />}
                 onClick={onEmpty}
+                style={{ width: '1.5rem' }}
               />
             </Tooltip>
           </Space>

+ 2 - 0
src/pages/patient/components/DicomNodeDetailPanel.tsx

@@ -157,6 +157,7 @@ const DicomNodeDetailPanel: React.FC<Props> = ({
                 icon={<LinkOutlined />}
                 onClick={onTestConnection}
                 type="default"
+                style={{ width: '1.5rem' }}
               />
             </Tooltip>
             <Tooltip
@@ -171,6 +172,7 @@ const DicomNodeDetailPanel: React.FC<Props> = ({
                 icon={<InboxOutlined />}
                 onClick={onArchive}
                 type="default"
+                style={{ width: '1.5rem' }}
               />
             </Tooltip>
           </Space>

+ 13 - 2
src/pages/patient/components/OutputActionPanel.tsx

@@ -12,7 +12,12 @@ const OutputActionPanel: React.FC = () => (
         />
       }
     >
-      <Button type="text" icon={<ReloadOutlined />} aria-label="重试" />
+      <Button
+        type="text"
+        icon={<ReloadOutlined />}
+        aria-label="重试"
+        style={{ width: '1.5rem', height: '1.5rem' }}
+      />
     </Tooltip>
     <Tooltip
       title={
@@ -22,7 +27,13 @@ const OutputActionPanel: React.FC = () => (
         />
       }
     >
-      <Button type="text" icon={<DeleteOutlined />} aria-label="删除" danger />
+      <Button
+        type="text"
+        icon={<DeleteOutlined />}
+        aria-label="删除"
+        danger
+        style={{ width: '1.5rem', height: '1.5rem' }}
+      />
     </Tooltip>
   </Space>
 );