优化参数表样式与科学计数法支持

frontend/src/styles.css

@@ -447,6 +447,17 @@ textarea {
   font-weight: 700;
 }
 
+.properties .panel-title {
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+  padding: 0 10px;
+  border-bottom-color: #c7cdd4;
+  color: #293642;
+  background: #f2f4f6;
+  font-size: 12px;
+}
+
 .palette-list {
   display: block;
   padding: 12px;
@@ -461,13 +472,13 @@ textarea {
 .parameter-table-wrap {
   width: 100%;
   min-width: 0;
-  padding: 0 12px 12px;
-  overflow-x: hidden;
+  padding: 0;
+  overflow-x: clip;
 }
 
 .parameter-table-wrap.parameter-form {
   display: block;
-  padding: 0 12px 12px;
+  padding: 0;
 }
 
 .parameter-table {
@@ -475,27 +486,30 @@ textarea {
   --parameter-unit-width: 72px;
   width: 100%;
   min-width: 0;
-  border: 1px solid #cbd5df;
+  border: 0;
   border-spacing: 0;
-  border-radius: 4px;
+  border-radius: 0;
   color: #263442;
   background: #ffffff;
   table-layout: fixed;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .parameter-table-head .parameter-table-cell {
-  position: relative;
+  position: sticky;
   z-index: 1;
-  height: 30px;
-  padding: 0 7px;
+  top: 0;
+  height: 28px;
+  padding: 0 8px;
   overflow: visible;
-  border-bottom-color: #bfcbd7;
-  color: #475569;
-  background: #edf1f5;
-  font-size: 10px;
+  border-right-color: #c4cad1;
+  border-bottom-color: #b9c1c9;
+  color: #35414c;
+  background: #e3e6e9;
+  box-shadow: 0 1px 0 rgba(51, 65, 85, 0.06);
+  font-size: 11px;
   font-weight: 700;
-  line-height: 30px;
+  line-height: 27px;
 }
 
 .parameter-table-head .parameter-table-name-cell {
@@ -507,16 +521,21 @@ textarea {
 }
 
 .parameter-table-row {
-  height: 36px;
+  height: 32px;
+}
+
+.parameter-table-head-row {
+  height: 28px;
 }
 
 .parameter-table-cell {
   min-width: 0;
-  height: 36px;
-  padding: 2px 6px;
+  height: 32px;
+  box-sizing: border-box;
+  padding: 1px 7px;
   overflow: hidden;
-  border-right: 1px solid #d9e0e7;
-  border-bottom: 1px solid #d9e0e7;
+  border-right: 1px solid #d5d9de;
+  border-bottom: 1px solid #e1e4e7;
   vertical-align: middle;
 }
 
@@ -524,8 +543,22 @@ textarea {
   border-right: 0;
 }
 
+.parameter-table
+  > tbody
+  > .parameter-table-row:nth-child(even)
+  > .parameter-table-cell {
+  background: #f3f4f5;
+}
+
 .parameter-table > tbody > .parameter-table-row:hover > .parameter-table-cell {
-  background: #f8fbfe;
+  background: #eaf3f8;
+}
+
+.parameter-table
+  > tbody
+  > .parameter-table-row:focus-within
+  > .parameter-table-cell {
+  background: #deedf5;
 }
 
 .parameter-table-row:focus-visible {
@@ -537,16 +570,21 @@ textarea {
 .parameter-table-name-cell {
   overflow: hidden;
   color: #344256;
+  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.parameter-table > tbody .parameter-table-name-cell {
+  font-weight: 400;
+}
+
 .parameter-value-cell,
 .parameter-table-value-cell,
 .parameter-unit-cell,
 .parameter-table-unit-cell {
   min-width: 0;
-  padding: 2px;
+  padding: 1px 3px;
 }
 
 .parameter-unit-cell,
@@ -561,30 +599,44 @@ textarea {
   width: 100%;
   min-width: 0;
   max-width: 100%;
-  height: 30px;
+  height: 28px;
+  box-sizing: border-box;
   margin: 0;
   padding: 0 6px;
-  border: 1px solid #d5dde6;
-  border-radius: 2px;
+  border: 1px solid transparent;
+  border-radius: 1px;
   outline: 0;
   color: #1f2933;
-  background: #ffffff;
-  font-size: 11px;
+  background: transparent;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
 }
 
 .parameter-table-cell select {
   padding-right: 4px;
 }
 
+.parameter-table > tbody .parameter-table-value-cell,
+.parameter-table > tbody .parameter-table-value-cell input,
+.parameter-table > tbody .parameter-table-value-cell select {
+  text-align: right;
+}
+
+.parameter-table > tbody .parameter-table-value-cell select {
+  text-align-last: right;
+}
+
 .parameter-table-cell input:hover:not(:disabled),
 .parameter-table-cell select:hover:not(:disabled) {
-  border-color: #aebdcb;
+  border-color: #aebbc7;
+  background: rgba(255, 255, 255, 0.72);
 }
 
 .parameter-table-cell input:focus,
 .parameter-table-cell select:focus {
   border-color: #1d6fb8;
   outline: 0;
+  background: #ffffff;
   box-shadow: inset 0 0 0 1px #1d6fb8;
 }
 
@@ -597,24 +649,27 @@ textarea {
 .parameter-table-row.read-only .parameter-value-cell,
 .parameter-table-row.read-only .parameter-table-value-cell,
 .parameter-table-cell input:read-only {
-  background: #f4f6f8;
+  background: transparent;
 }
 
 .parameter-read-only-value,
 .parameter-table-read-only-value {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
   width: 100%;
   min-width: 0;
-  height: 30px;
-  padding: 0 7px;
+  height: 28px;
+  box-sizing: border-box;
+  padding: 0 6px;
   overflow: hidden;
-  border: 1px solid #d5dde6;
-  border-radius: 2px;
+  border: 0;
+  border-radius: 0;
   color: #526172;
+  text-align: right;
   text-overflow: ellipsis;
   white-space: nowrap;
-  background: #f4f6f8;
+  background: transparent;
   font-variant-numeric: tabular-nums;
 }
 
@@ -628,7 +683,10 @@ textarea {
   content: "—";
 }
 
-.parameter-table-row.invalid > .parameter-table-cell {
+.parameter-table
+  > tbody
+  > .parameter-table-row.invalid
+  > .parameter-table-cell {
   background: #fff8f7;
 }