diff --git a/src/pPowerManger/httpserver/fuelcell.h b/src/pPowerManger/httpserver/fuelcell.h index 1b12503..39553da 100644 --- a/src/pPowerManger/httpserver/fuelcell.h +++ b/src/pPowerManger/httpserver/fuelcell.h @@ -278,34 +278,192 @@ body { margin-bottom: 12px; } -.slider-container { +/* 数值步进控件(替代滑块,防误拖) */ +.stepper-container { display: flex; align-items: center; + gap: 8px; +} + +.stepper-btn { + width: 40px; + height: 40px; + border: 1px solid #d1d5db; + border-radius: 4px; + background-color: #f9fafb; + color: #1a1a1a; + font-size: 1.25rem; + font-weight: 700; + line-height: 1; + cursor: pointer; + transition: all 0.15s; + user-select: none; +} + +.stepper-btn:hover { + background-color: #e5e7eb; +} + +.stepper-btn:active { + background-color: var(--primary-color); + color: white; + border-color: var(--primary-color); +} + +.stepper-input { + width: 90px; + height: 40px; + padding: 0 8px; + border: 1px solid #d1d5db; + border-radius: 4px; + text-align: center; + font-family: 'SF Mono', 'Consolas', monospace; + font-size: 1rem; + font-weight: 600; +} + +.stepper-input:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); +} + +.stepper-unit { + min-width: 84px; + color: #4b5563; + font-size: 0.9rem; + font-family: 'SF Mono', 'Consolas', monospace; +} + +/* 下拉框危险选项标记 */ +.select-control option.danger { + color: #dc2626; + font-weight: 700; +} + +/* 指令确认弹窗 */ +.modal-overlay { + display: none; + position: fixed; + inset: 0; + background: rgba(17, 24, 39, 0.55); + z-index: 100; + align-items: center; + justify-content: center; + padding: 16px; +} + +.modal-overlay.visible { + display: flex; +} + +.modal { + background: white; + border-radius: 8px; + width: 100%; + max-width: 560px; + max-height: 85vh; + display: flex; + flex-direction: column; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); +} + +.modal-title { + padding: 16px 20px; + font-size: 1.1rem; + font-weight: 600; + border-bottom: 1px solid #e5e7eb; +} + +.modal-body { + padding: 16px 20px; + overflow-y: auto; +} + +.modal-hint { + font-size: 0.85rem; + color: #6b7280; + margin-bottom: 12px; +} + +.modal-summary { + border: 1px solid #e5e7eb; + border-radius: 6px; + overflow: hidden; +} + +.summary-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 12px; + border-bottom: 1px solid #f3f4f6; + font-size: 0.9rem; +} + +.summary-row:last-child { + border-bottom: none; +} + +.summary-label { + color: #4b5563; +} + +.summary-value { + font-weight: 600; + font-family: 'SF Mono', 'Consolas', monospace; + text-align: right; +} + +.summary-row.danger { + background-color: #fef2f2; +} + +.summary-row.danger .summary-label, +.summary-row.danger .summary-value { + color: #b91c1c; +} + +.summary-danger-mark { + margin-right: 6px; + font-weight: 700; +} + +.modal-note { + margin-top: 12px; + padding: 10px 12px; + border-radius: 4px; + background-color: #fef2f2; + color: #b91c1c; + font-size: 0.85rem; + font-weight: 600; + display: none; +} + +.modal-note.visible { + display: block; +} + +.modal-actions { + padding: 16px 20px; + border-top: 1px solid #e5e7eb; + display: flex; gap: 12px; } -.slider { - flex-grow: 1; - height: 6px; - -webkit-appearance: none; - background: #d1d5db; - border-radius: 3px; - outline: none; +.modal-actions .button { + flex: 1; + padding: 12px; + font-size: 1rem; } -.slider::-webkit-slider-thumb { - -webkit-appearance: none; - width: 18px; - height: 18px; - background: var(--primary-color); - border-radius: 50%; - cursor: pointer; +.button-confirm { + background-color: var(--primary-color); + color: white; } -.slider-value { - min-width: 60px; - text-align: right; - font-family: 'SF Mono', 'Consolas', monospace; +.button-confirm:hover { + background-color: var(--primary-hover); } .form-submit { @@ -521,22 +679,24 @@ body { - - - - + + + +
-
- - 0 (0.0 kW) +
+ + + + 0 (0.0 kW)
@@ -567,9 +727,11 @@ body {
-
- - 0 m +
+ + + + 0 m
@@ -612,9 +774,11 @@ body {
-
- - 0 kW +
+ + + + 0 kW
@@ -622,18 +786,34 @@ body {
- - + +
- +
+ + +