Ver código fonte

feat: add labels to InputNumber components in apr panel in src/pages/exam/ContentAreaLarge.tsx

- Added labels for mA, ms, mAs, KV, and density input fields
- Labels display placeholder values above each input
- Maintained original placeholder attributes
- Improved UI clarity for parameter inputs
sw 2 semanas atrás
pai
commit
c25e7ecee7
1 arquivos alterados com 106 adições e 71 exclusões
  1. 106 71
      src/pages/exam/ContentAreaLarge.tsx

+ 106 - 71
src/pages/exam/ContentAreaLarge.tsx

@@ -141,82 +141,117 @@ const ContentAreaLarge = () => {
           )}
         </Row>
         <div>
-          <InputNumber
-            placeholder="mA"
-            style={{ width: '100%', marginBottom: 8 }}
-            value={aprConfig.mA ?? undefined}
-            onChange={(value) =>
-              dispatch(setAprConfig({ ...aprConfig, mA: value ?? 0 }))
-            }
-            onStep={(value, info) => {
-              if (info.type === 'up') {
-                ParaSettingCoordinator.increaseMA();
-              } else {
-                ParaSettingCoordinator.decreaseMA();
+          <div>
+            <label
+              style={{ display: 'block', marginBottom: 4, fontSize: '12px' }}
+            >
+              mA
+            </label>
+            <InputNumber
+              placeholder="mA"
+              style={{ width: '100%', marginBottom: 8 }}
+              value={aprConfig.mA ?? undefined}
+              onChange={(value) =>
+                dispatch(setAprConfig({ ...aprConfig, mA: value ?? 0 }))
               }
-            }}
-          />
-          <InputNumber
-            placeholder="ms"
-            style={{ width: '100%', marginBottom: 8 }}
-            value={aprConfig.ms ?? undefined}
-            onChange={(value) =>
-              dispatch(setAprConfig({ ...aprConfig, ms: value ?? 0 }))
-            }
-            onStep={(value, info) => {
-              if (info.type === 'up') {
-                ParaSettingCoordinator.increaseMS();
-              } else {
-                ParaSettingCoordinator.decreaseMS();
+              onStep={(value, info) => {
+                if (info.type === 'up') {
+                  ParaSettingCoordinator.increaseMA();
+                } else {
+                  ParaSettingCoordinator.decreaseMA();
+                }
+              }}
+            />
+          </div>
+          <div>
+            <label
+              style={{ display: 'block', marginBottom: 4, fontSize: '12px' }}
+            >
+              ms
+            </label>
+            <InputNumber
+              placeholder="ms"
+              style={{ width: '100%', marginBottom: 8 }}
+              value={aprConfig.ms ?? undefined}
+              onChange={(value) =>
+                dispatch(setAprConfig({ ...aprConfig, ms: value ?? 0 }))
               }
-            }}
-          />
-          <InputNumber
-            placeholder="mAs"
-            style={{ width: '100%', marginBottom: 8 }}
-            value={aprConfig.mAs ?? undefined}
-            onChange={(value) =>
-              dispatch(setAprConfig({ ...aprConfig, mAs: value ?? 0 }))
-            }
-            onStep={(value, info) => {
-              if (info.type === 'up') {
-                ParaSettingCoordinator.increaseMAS();
-              } else {
-                ParaSettingCoordinator.decreaseMAS();
+              onStep={(value, info) => {
+                if (info.type === 'up') {
+                  ParaSettingCoordinator.increaseMS();
+                } else {
+                  ParaSettingCoordinator.decreaseMS();
+                }
+              }}
+            />
+          </div>
+          <div>
+            <label
+              style={{ display: 'block', marginBottom: 4, fontSize: '12px' }}
+            >
+              mAs
+            </label>
+            <InputNumber
+              placeholder="mAs"
+              style={{ width: '100%', marginBottom: 8 }}
+              value={aprConfig.mAs ?? undefined}
+              onChange={(value) =>
+                dispatch(setAprConfig({ ...aprConfig, mAs: value ?? 0 }))
               }
-            }}
-          />
-          <InputNumber
-            placeholder="KV"
-            style={{ width: '100%', marginBottom: 8 }}
-            value={aprConfig.kV ?? undefined}
-            // onChange={(value) =>
-            //   dispatch(setAprConfig({ ...aprConfig, kV: value ?? 0 }))
-            // }
+              onStep={(value, info) => {
+                if (info.type === 'up') {
+                  ParaSettingCoordinator.increaseMAS();
+                } else {
+                  ParaSettingCoordinator.decreaseMAS();
+                }
+              }}
+            />
+          </div>
+          <div>
+            <label
+              style={{ display: 'block', marginBottom: 4, fontSize: '12px' }}
+            >
+              KV
+            </label>
+            <InputNumber
+              placeholder="KV"
+              style={{ width: '100%', marginBottom: 8 }}
+              value={aprConfig.kV ?? undefined}
+              // onChange={(value) =>
+              //   dispatch(setAprConfig({ ...aprConfig, kV: value ?? 0 }))
+              // }
 
-            onStep={(value, info) => {
-              if (info.type === 'up') {
-                ParaSettingCoordinator.increaseKV();
-              } else {
-                ParaSettingCoordinator.decreaseKV();
-              }
-            }}
-          />
-          <InputNumber
-            placeholder="density"
-            style={{ width: '100%', marginBottom: 8 }}
-            value={aprConfig.AECDensity ?? undefined}
-            onChange={(value) =>
-              dispatch(setAprConfig({ ...aprConfig, AECDensity: value ?? 0 }))
-            }
-            onStep={(value, info) => {
-              if (info.type === 'up') {
-                ParaSettingCoordinator.increaseDensity();
-              } else {
-                ParaSettingCoordinator.decreaseDensity();
+              onStep={(value, info) => {
+                if (info.type === 'up') {
+                  ParaSettingCoordinator.increaseKV();
+                } else {
+                  ParaSettingCoordinator.decreaseKV();
+                }
+              }}
+            />
+          </div>
+          <div>
+            <label
+              style={{ display: 'block', marginBottom: 4, fontSize: '12px' }}
+            >
+              density
+            </label>
+            <InputNumber
+              placeholder="density"
+              style={{ width: '100%', marginBottom: 8 }}
+              value={aprConfig.AECDensity ?? undefined}
+              onChange={(value) =>
+                dispatch(setAprConfig({ ...aprConfig, AECDensity: value ?? 0 }))
               }
-            }}
-          />
+              onStep={(value, info) => {
+                if (info.type === 'up') {
+                  ParaSettingCoordinator.increaseDensity();
+                } else {
+                  ParaSettingCoordinator.decreaseDensity();
+                }
+              }}
+            />
+          </div>
         </div>
         <Flex align="center" justify="start" gap="middle" wrap>
           <Select