Przeglądaj źródła

fix: resolve layout overflow issues and add labels to APR panel controls

- Add labels to Select and Switch components in APR panel (ContentAreaLarge.tsx)
- Fix flex layout in LargeScreen to prevent container height expansion
- Implement proper flex constraints with flexShrink and minHeight properties
- Ensure APR panel scrolls instead of expanding parent container
- Maintain responsive layout and all existing functionality
sw 2 tygodni temu
rodzic
commit
b0e97e185d

+ 24 - 9
src/pages/exam/ContentAreaLarge.tsx

@@ -90,9 +90,9 @@ const ContentAreaLarge = () => {
   positionRef.current = selectedBodyPosition;
 
   return (
-    <Row className="w-full p-1">
-      <Col span={20}>
-        <Row gutter={16} className="h-full">
+    <Row className="w-full p-1" style={{ height: '100%', display: 'flex' }}>
+      <Col span={20} style={{ display: 'flex', flexDirection: 'column' }}>
+        <Row gutter={16} style={{ flex: 1, minHeight: 0, display: 'flex' }}>
           <Col span={4} className="flex flex-col">
             <BodyPositionList layout="vertical"></BodyPositionList>
           </Col>
@@ -101,7 +101,10 @@ const ContentAreaLarge = () => {
           </Col>
         </Row>
       </Col>
-      <Col span={4}>
+      <Col
+        span={4}
+        style={{ height: '100%', overflowY: 'auto', flexShrink: 0 }}
+      >
         <Row gutter={16} align="middle">
           <Col span={productName === 'DROS' ? 9 : 24}>
             <Select
@@ -253,25 +256,37 @@ const ContentAreaLarge = () => {
             />
           </div>
         </div>
-        <Flex align="center" justify="start" gap="middle" wrap>
+        <div>
+          <label
+            style={{ display: 'block', marginBottom: 4, fontSize: '12px' }}
+          >
+            曝光模式
+          </label>
           <Select
             placeholder="选择曝光模式"
             value={currentExposureMode}
             onChange={handleExposureModeChange}
-            style={{ width: '2rem' }}
+            style={{ width: '100%', marginBottom: 8 }}
           >
             <Select.Option value="mAs">mAs</Select.Option>
             <Select.Option value="time">time</Select.Option>
           </Select>
-
+        </div>
+        <div>
+          <label
+            style={{ display: 'block', marginBottom: 4, fontSize: '12px' }}
+          >
+            AEC
+          </label>
           <Switch
             checkedChildren="开启AEC"
             unCheckedChildren="关闭AEC"
             checked={isAECEnabled}
             onChange={handleAECChange}
-            style={{ width: '1.5rem' }}
+            style={{ marginBottom: 8 }}
           />
-
+        </div>
+        <Flex align="center" justify="start" gap="middle" wrap>
           <Button
             style={{ width: '1.5rem', height: '1.5rem' }}
             icon={

+ 6 - 3
src/pages/exam/LargeScreen.tsx

@@ -14,11 +14,14 @@ const LargeScreen = () => {
   );
 
   return (
-    <Layout className="h-full">
-      <Row>
+    <Layout
+      className="h-full"
+      style={{ display: 'flex', flexDirection: 'column' }}
+    >
+      <Row style={{ flexShrink: 0 }}>
         <DeviceArea />
       </Row>
-      <Row className="h-full">
+      <Row style={{ flex: 1, minHeight: 0 }}>
         <ContentAreaLarge />
       </Row>
       <ExamExitFeedback