style: HashEditor 按钮一排显示 + 颜色对比 + TTL 内联编辑
- 去掉设置 TTL 按钮, TTL 列改为 el-input-number 内联编辑 - saveField 保存时一并提交 TTL (HEXPIRE) - 保存和删除按钮改为一排显示 (列宽 120px) - 按钮从 text 改为 outline 样式, 确保浅色模式下文字可见 - 移除 setFieldTtl 函数和 .field-ttl 样式
This commit is contained in:
@@ -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(() => {
|
||||
checkHexpireSupport()
|
||||
})
|
||||
@@ -107,7 +86,11 @@ async function saveField(item: HashField) {
|
||||
if (!connStore.activeId || !keyStore.selectedKey) return
|
||||
try {
|
||||
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) {
|
||||
ElMessage.error(err.message)
|
||||
}
|
||||
@@ -165,16 +148,15 @@ async function addField() {
|
||||
<el-input v-model="row.value" size="small" class="hash-input" />
|
||||
</template>
|
||||
</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 }">
|
||||
<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>
|
||||
</el-table-column>
|
||||
<el-table-column width="180">
|
||||
<el-table-column width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" text @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" text @click="deleteField(row)">{{ t('common.delete') }}</el-button>
|
||||
<el-button size="small" type="primary" @click="saveField(row)">{{ t('editor.save') }}</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteField(row)">{{ t('common.delete') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -265,6 +247,33 @@ async function addField() {
|
||||
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 {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
@@ -275,9 +284,4 @@ async function addField() {
|
||||
color: var(--accent-light);
|
||||
}
|
||||
|
||||
.field-ttl {
|
||||
font-size: 12px;
|
||||
font-family: 'Cascadia Code', monospace;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user