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 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">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.field" size="small" class="hash-input" />
|
||||
@@ -226,11 +226,31 @@ async function addField() {
|
||||
.hash-table-wrap {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.hash-table {
|
||||
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) {
|
||||
@@ -241,6 +261,10 @@ async function addField() {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hash-input :deep(.el-input__inner) {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.item-count {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
|
||||
Reference in New Issue
Block a user