From ff83315b64dc0b32b0c834240c1855682741f9ce Mon Sep 17 00:00:00 2001
From: Jokul <wangshengshan011@163.com>
Date: Sat, 11 Jul 2026 16:06:17 +0800
Subject: [PATCH] =?UTF-8?q?style:=20HashEditor=20=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E4=B8=80=E6=8E=92=E6=98=BE=E7=A4=BA=20+=20=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E5=AF=B9=E6=AF=94=20+=20TTL=20=E5=86=85=E8=81=94=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 去掉设置 TTL 按钮, TTL 列改为 el-input-number 内联编辑
- saveField 保存时一并提交 TTL (HEXPIRE)
- 保存和删除按钮改为一排显示 (列宽 120px)
- 按钮从 text 改为 outline 样式, 确保浅色模式下文字可见
- 移除 setFieldTtl 函数和 .field-ttl 样式
---
 src/renderer/src/components/HashEditor.vue | 70 ++++++++++++----------
 1 file changed, 37 insertions(+), 33 deletions(-)

diff --git a/src/renderer/src/components/HashEditor.vue b/src/renderer/src/components/HashEditor.vue
index 0be6584..ded5fcb 100644
--- a/src/renderer/src/components/HashEditor.vue
+++ b/src/renderer/src/components/HashEditor.vue
@@ -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>