update style

src/views/settings/components/TTLTable.vue

@@ -13,8 +13,19 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <el-table :data="data" class="mb-5" :row-style="{ backgroundColor: 'var(--layout-background)' }">
-    <el-table-column v-for="item in metricsRows" :prop="item.value" :label="item.label" :key="item.value">
+  <el-table
+    :data="data"
+    class="mb-5"
+    :row-style="{ backgroundColor: 'var(--layout-background)' }"
+    :cell-style="(data) => (data.columnIndex === 0 ? { backgroundColor: 'var(--el-table-header-bg-color)' } : {})"
+  >
+    <el-table-column
+      v-for="item in metricsRows"
+      :prop="item.value"
+      :label="item.label"
+      :key="item.value"
+      :width="item.width"
+    >
       <template #default="scope">
         {{ scope.row && scope.row[item.value] ? (scope.row[item.value] < 0 ? "N/A" : scope.row[item.value]) : "N/A" }}
       </template>
@@ -22,11 +33,10 @@ limitations under the License. -->
   </el-table>
 </template>
 <script lang="ts" setup>
-  import type { Option } from "@/types/app";
   /*global PropType, Indexable */
   defineProps({
     metricsRows: {
-      type: Array as PropType<Option[]>,
+      type: Array as PropType<{ width?: number; value: string; label: string }[]>,
       default: () => [],
     },
     data: { type: Array as PropType<Indexable[]>, default: () => [] },

src/views/settings/data.ts

@@ -56,6 +56,7 @@ export const MetricsTTLRow = [
   {
     label: "Type",
     value: "type",
+    width: 260,
   },
   {
     label: "Day",
@@ -75,6 +76,7 @@ export const RecordsTTLRow = [
   {
     label: "Type",
     value: "type",
+    width: 260,
   },
   {
     label: "Normal",