style: HashEditor 按钮一排显示 + 颜色对比 + TTL 内联编辑

- 去掉设置 TTL 按钮, TTL 列改为 el-input-number 内联编辑
- saveField 保存时一并提交 TTL (HEXPIRE)
- 保存和删除按钮改为一排显示 (列宽 120px)
- 按钮从 text 改为 outline 样式, 确保浅色模式下文字可见
- 移除 setFieldTtl 函数和 .field-ttl 样式
This commit is contained in:
2026-07-11 16:06:17 +08:00
parent 53ffa1043c
commit ff83315b64
+37 -33
View File
@@ -78,27 +78,6 @@ async function loadFieldTtls() {
} }
} }
async function setFieldTtl(field: HashField) {
if (!connStore.activeId || !keyStore.selectedKey) return
try {
const { value: seconds } = await ElMessageBox.prompt(t('editor.ttlTitle'), t('editor.setFieldTtl'), {
inputValue: '-1',
inputPlaceholder: t('key.ttlHint'),
})
if (seconds === '-1') {
// Remove TTL via PERSIST equivalent — HEXPIRE with 0 or use PERSIST on field
await window.electronAPI.redis.execute(connStore.activeId, 'HEXPIRE', [keyStore.selectedKey, '0', 'FIELDS', '1', field.field])
field.ttl = -1
} else {
await window.electronAPI.redis.execute(connStore.activeId, 'HEXPIRE', [keyStore.selectedKey, seconds, 'FIELDS', '1', field.field])
field.ttl = Number(seconds)
}
ElMessage.success(t('editor.saved'))
} catch (err: any) {
if (err !== 'cancel') ElMessage.error(err.message)
}
}
onMounted(() => { onMounted(() => {
checkHexpireSupport() checkHexpireSupport()
}) })
@@ -107,7 +86,11 @@ async function saveField(item: HashField) {
if (!connStore.activeId || !keyStore.selectedKey) return if (!connStore.activeId || !keyStore.selectedKey) return
try { try {
await window.electronAPI.redis.hashSet(connStore.activeId, keyStore.selectedKey, item.field, item.value) await window.electronAPI.redis.hashSet(connStore.activeId, keyStore.selectedKey, item.field, item.value)
ElMessage.success('Saved') if (supportsHexpire.value && item.ttl != null) {
const seconds = item.ttl < 0 ? '0' : String(item.ttl)
await window.electronAPI.redis.execute(connStore.activeId, 'HEXPIRE', [keyStore.selectedKey, seconds, 'FIELDS', '1', item.field])
}
ElMessage.success(t('editor.saved'))
} catch (err: any) { } catch (err: any) {
ElMessage.error(err.message) ElMessage.error(err.message)
} }
@@ -165,16 +148,15 @@ async function addField() {
<el-input v-model="row.value" size="small" class="hash-input" /> <el-input v-model="row.value" size="small" class="hash-input" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="supportsHexpire" :label="t('editor.fieldTtl')" width="100"> <el-table-column v-if="supportsHexpire" :label="t('editor.fieldTtl')" width="110">
<template #default="{ row }"> <template #default="{ row }">
<span class="field-ttl">{{ row.ttl != null ? row.ttl : '-' }}</span> <el-input-number v-model="row.ttl" :min="-1" size="small" controls-position="right" class="hash-ttl-input" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="180"> <el-table-column width="120" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-button size="small" type="primary" text @click="saveField(row)">{{ t('editor.save') }}</el-button> <el-button size="small" type="primary" @click="saveField(row)">{{ t('editor.save') }}</el-button>
<el-button v-if="supportsHexpire" size="small" type="warning" text @click="setFieldTtl(row)">{{ t('editor.setFieldTtl') }}</el-button> <el-button size="small" type="danger" @click="deleteField(row)">{{ t('common.delete') }}</el-button>
<el-button size="small" type="danger" text @click="deleteField(row)">{{ t('common.delete') }}</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@@ -265,6 +247,33 @@ async function addField() {
color: var(--text-primary); color: var(--text-primary);
} }
.hash-ttl-input {
width: 90px;
}
.hash-ttl-input :deep(.el-input__inner) {
color: var(--text-primary);
}
/* Button contrast in both themes */
.hash-table :deep(.el-button--primary) {
--el-button-text-color: var(--accent-light);
--el-button-bg-color: transparent;
--el-button-border-color: var(--accent);
--el-button-hover-text-color: #fff;
--el-button-hover-bg-color: var(--accent);
--el-button-hover-border-color: var(--accent);
}
.hash-table :deep(.el-button--danger) {
--el-button-text-color: var(--danger);
--el-button-bg-color: transparent;
--el-button-border-color: var(--danger);
--el-button-hover-text-color: #fff;
--el-button-hover-bg-color: var(--danger);
--el-button-hover-border-color: var(--danger);
}
.item-count { .item-count {
font-size: 11px; font-size: 11px;
color: var(--text-muted); color: var(--text-muted);
@@ -275,9 +284,4 @@ async function addField() {
color: var(--accent-light); color: var(--accent-light);
} }
.field-ttl {
font-size: 12px;
font-family: 'Cascadia Code', monospace;
color: var(--text-muted);
}
</style> </style>