perf: add quick settings for ttl dialog

frontend/src/components/dialogs/NewKeyDialog.vue

@@ -207,6 +207,7 @@ const onClose = () => {
                             v-model:value="newForm.ttl"
                             :max="Number.MAX_SAFE_INTEGER"
                             :min="-1"
+                            :show-button="false"
                             placeholder="TTL">
                             <template #suffix>
                                 {{ $t('common.second') }}

frontend/src/components/dialogs/RenameKeyDialog.vue

@@ -55,9 +55,9 @@ const onClose = () => {
         :closable="false"
         :close-on-esc="false"
         :mask-closable="false"
-        :negative-button-props="{ size: 'medium' }"
+        :negative-button-props="{ focusable: false, size: 'medium' }"
         :negative-text="$t('common.cancel')"
-        :positive-button-props="{ size: 'medium' }"
+        :positive-button-props="{ focusable: false, size: 'medium' }"
         :positive-text="$t('common.confirm')"
         :show-icon="false"
         :title="$t('interface.rename_key')"

frontend/src/components/dialogs/SetTtlDialog.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { reactive, watchEffect } from 'vue'
+import { computed, reactive, watchEffect } from 'vue'
 import useDialog from 'stores/dialog'
 import useTabStore from 'stores/tab.js'
 import Binary from '@/components/icons/Binary.vue'
 import { isEmpty } from 'lodash'
 import useBrowserStore from 'stores/browser.js'
+import { useI18n } from 'vue-i18n'
 
 const ttlForm = reactive({
     server: '',
@@ -12,6 +13,7 @@ const ttlForm = reactive({
     key: '',
     keyCode: null,
     ttl: -1,
+    unit: 1,
 })
 
 const dialogStore = useDialog()
@@ -27,6 +29,7 @@ watchEffect(() => {
             ttlForm.db = tab.db
             ttlForm.key = tab.key
             ttlForm.keyCode = tab.keyCode
+            ttlForm.unit = 1
             if (tab.ttl < 0) {
                 // forever
                 ttlForm.ttl = -1
@@ -37,6 +40,36 @@ watchEffect(() => {
     }
 })
 
+const i18n = useI18n()
+const unit = computed(() => [
+    { value: 1, label: i18n.t('common.second') },
+    {
+        value: 60,
+        label: i18n.t('common.minute'),
+    },
+    {
+        value: 3600,
+        label: i18n.t('common.hour'),
+    },
+    {
+        value: 86400,
+        label: i18n.t('common.day'),
+    },
+])
+
+const quickOption = computed(() => [
+    { value: -1, unit: 1, label: i18n.t('interface.forever') },
+    { value: 10, unit: 1, label: `10 ${i18n.t('common.second')}` },
+    { value: 1, unit: 60, label: `1 ${i18n.t('common.minute')}` },
+    { value: 1, unit: 3600, label: `1 ${i18n.t('common.hour')}` },
+    { value: 1, unit: 86400, label: `1 ${i18n.t('common.day')}` },
+])
+
+const onQuickSet = (opt) => {
+    ttlForm.ttl = opt.value
+    ttlForm.unit = opt.unit
+}
+
 const onClose = () => {
     dialogStore.closeTTLDialog()
 }
@@ -48,13 +81,14 @@ const onConfirm = async () => {
             return
         }
         const key = isEmpty(ttlForm.keyCode) ? ttlForm.key : ttlForm.keyCode
-        const success = await browserStore.setTTL(tab.name, tab.db, key, ttlForm.ttl)
+        const ttl = ttlForm.ttl * (ttlForm.unit || 1)
+        const success = await browserStore.setTTL(tab.name, tab.db, key, ttl)
         if (success) {
             tabStore.updateTTL({
                 server: ttlForm.server,
                 db: ttlForm.db,
                 key: ttlForm.key,
-                ttl: ttlForm.ttl,
+                ttl: ttl,
             })
         }
     } catch (e) {
@@ -71,6 +105,12 @@ const onConfirm = async () => {
         :closable="false"
         :close-on-esc="false"
         :mask-closable="false"
+        :negative-button-props="{ focusable: false, size: 'medium' }"
+        :negative-text="$t('common.cancel')"
+        :on-negative-click="onClose"
+        :on-positive-click="onConfirm"
+        :positive-button-props="{ focusable: false, size: 'medium' }"
+        :positive-text="$t('common.save')"
         :show-icon="false"
         :title="$t('dialogue.ttl.title')"
         preset="dialog"
@@ -84,27 +124,30 @@ const onConfirm = async () => {
                 </n-input>
             </n-form-item>
             <n-form-item :label="$t('interface.ttl')" required>
-                <n-input-number
+                <n-input-group>
-                    v-model:value="ttlForm.ttl"
+                    <n-input-number
-                    :max="Number.MAX_SAFE_INTEGER"
+                        v-model:value="ttlForm.ttl"
-                    :min="-1"
+                        :max="Number.MAX_SAFE_INTEGER"
-                    style="width: 100%">
+                        :min="-1"
-                    <template #suffix>
+                        :show-button="false"
-                        {{ $t('common.second') }}
+                        class="flex-item-expand" />
-                    </template>
+                    <n-select v-model:value="ttlForm.unit" :options="unit" style="max-width: 150px" />
-                </n-input-number>
+                </n-input-group>
+            </n-form-item>
+            <n-form-item :label="$t('dialogue.ttl.quick_set')" :show-feedback="false">
+                <n-space :wrap="true" :wrap-item="false">
+                    <n-button
+                        v-for="(opt, i) in quickOption"
+                        :key="i"
+                        round
+                        secondary
+                        size="small"
+                        @click="onQuickSet(opt)">
+                        {{ opt.label }}
+                    </n-button>
+                </n-space>
             </n-form-item>
         </n-form>
-
-        <template #action>
-            <div class="flex-item-expand">
-                <n-button :focusable="false" @click="ttlForm.ttl = -1">{{ $t('dialogue.key.persist_key') }}</n-button>
-            </div>
-            <div class="flex-item n-dialog__action">
-                <n-button :focusable="false" @click="onClose">{{ $t('common.cancel') }}</n-button>
-                <n-button :focusable="false" type="primary" @click="onConfirm">{{ $t('common.save') }}</n-button>
-            </div>
-        </template>
     </n-modal>
 </template>
 

frontend/src/langs/en-us.json

@@ -10,6 +10,9 @@
     "update": "Update",
     "none": "None",
     "second": "Second(s)",
+    "minute": "Minutes(s)",
+    "hour": "Hour(s)",
+    "day": "Day(s)",
     "unit_day": "D",
     "unit_hour": "H",
     "unit_minute": "M",
@@ -294,7 +297,8 @@
       "import_completed": "Import completed, {success} successes, {ignored} failed"
     },
     "ttl": {
-      "title": "Set Key TTL"
+      "title": "Set Key TTL",
+      "quick_set": "Quick Settings"
     },
     "upgrade": {
       "title": "New Version Available",

frontend/src/langs/zh-cn.json

@@ -10,6 +10,9 @@
     "update": "更新",
     "none": "无",
     "second": "秒",
+    "minute": "分钟",
+    "hour": "小时",
+    "day": "天",
     "unit_day": "天",
     "unit_hour": "小时",
     "unit_minute": "分钟",
@@ -296,7 +299,8 @@
       "import_completed": "已完成导入操作，成功{success}个，忽略{ignored}个"
     },
     "ttl": {
-      "title": "设置键存活时间"
+      "title": "设置键存活时间",
+      "quick_set": "快捷设置"
     },
     "upgrade": {
       "title": "有可用新版本",