style: HashEditor 表格高度适配 + 文字颜色对比

- max-height=400 改为 height=100%, 表格填满剩余空间
- hash-table-wrap overflow hidden + min-height:0 配合 flex 布局
- 表格正文文字用 --text-primary (深色模式下白色)
- 表头用 --text-secondary + --bg-tertiary 背景
- 行悬停用 --bg-hover
- 输入框文字用 --text-primary 确保可读性
This commit is contained in:
2026-07-11 15:58:37 +08:00
parent 78695c0b7f
commit 53ffa1043c
+26 -2
View File
@@ -154,7 +154,7 @@ async function addField() {
</div> </div>
<div class="hash-table-wrap"> <div class="hash-table-wrap">
<el-table :data="filteredFields" size="small" class="hash-table" max-height="400"> <el-table :data="filteredFields" size="small" class="hash-table" height="100%">
<el-table-column prop="field" :label="t('editor.field')" min-width="150"> <el-table-column prop="field" :label="t('editor.field')" min-width="150">
<template #default="{ row }"> <template #default="{ row }">
<el-input v-model="row.field" size="small" class="hash-input" /> <el-input v-model="row.field" size="small" class="hash-input" />
@@ -226,11 +226,31 @@ async function addField() {
.hash-table-wrap { .hash-table-wrap {
flex: 1; flex: 1;
padding: 12px; padding: 12px;
overflow: auto; overflow: hidden;
min-height: 0;
} }
.hash-table { .hash-table {
width: 100%; width: 100%;
height: 100%;
}
/* Table text color contrast */
.hash-table :deep(.el-table__body td) {
color: var(--text-primary);
}
.hash-table :deep(.el-table__header th) {
color: var(--text-secondary);
background: var(--bg-tertiary);
}
.hash-table :deep(.el-table__row:hover > td) {
background: var(--bg-hover) !important;
}
.hash-table :deep(.el-table__body-wrapper) {
background: var(--bg-card);
} }
.hash-input :deep(.el-input__wrapper) { .hash-input :deep(.el-input__wrapper) {
@@ -241,6 +261,10 @@ async function addField() {
font-size: 12px; font-size: 12px;
} }
.hash-input :deep(.el-input__inner) {
color: var(--text-primary);
}
.item-count { .item-count {
font-size: 11px; font-size: 11px;
color: var(--text-muted); color: var(--text-muted);