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:
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user