From 13f343977ab90ced82fafdf25af101e146ff189b Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Fri, 17 Nov 2023 23:50:10 +0800
Subject: [PATCH] chore: refine ui details

---
 backend/utils/string/convert.go               |   2 +-
 .../src/components/content/ContentLogPane.vue | 181 +++++++++---------
 .../content_value/ContentEntryEditor.vue      |   2 +
 .../components/content_value/ContentSlog.vue  | 166 ++++++++--------
 .../content_value/ContentValueHash.vue        |   4 +
 .../content_value/ContentValueList.vue        |   4 +
 .../content_value/ContentValueZSet.vue        |  10 +-
 .../src/components/new_value/AddHashValue.vue |   4 +-
 .../src/components/new_value/AddZSetValue.vue |   7 +-
 frontend/src/langs/en-us.json                 |   2 +-
 frontend/src/langs/pt-br.json                 |   2 +-
 frontend/src/langs/zh-cn.json                 |   2 +-
 12 files changed, 204 insertions(+), 182 deletions(-)

diff --git a/backend/utils/string/convert.go b/backend/utils/string/convert.go
index e8c3e2f..12ebd8c 100644
--- a/backend/utils/string/convert.go
+++ b/backend/utils/string/convert.go
@@ -109,7 +109,7 @@ func autoDecode(str string) (value, resultDecode string) {
 		// pure digit content may incorrect regard as some encoded type, skip decode
 		if match, _ := regexp.MatchString(`^\d+$`, str); !match {
 			var ok bool
-			if len(str)%4 == 0 && !isSameChar(str) {
+			if len(str)%4 == 0 && len(str) >= 12 && !isSameChar(str) {
 				if value, ok = decodeBase64(str); ok {
 					resultDecode = types.DECODE_BASE64
 					return
diff --git a/frontend/src/components/content/ContentLogPane.vue b/frontend/src/components/content/ContentLogPane.vue
index fc4c79e..27493d2 100644
--- a/frontend/src/components/content/ContentLogPane.vue
+++ b/frontend/src/components/content/ContentLogPane.vue
@@ -34,39 +34,101 @@ const filterServerOption = computed(() => {
 
 const tableRef = ref(null)
 
-const loadHistory = () => {
-    data.loading = true
-    browserStore
-        .getCmdHistory()
-        .then((list) => {
-            data.history = list || []
-        })
-        .finally(() => {
-            data.loading = false
-            tableRef.value?.scrollTo({ top: 999999 })
-        })
+const columns = computed(() => [
+    {
+        title: i18n.t('log.exec_time'),
+        key: 'timestamp',
+        defaultSortOrder: 'ascend',
+        sorter: 'default',
+        width: 180,
+        align: 'center',
+        titleAlign: 'center',
+        render: ({ timestamp }, index) => {
+            return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
+        },
+    },
+    {
+        title: i18n.t('log.server'),
+        key: 'server',
+        filterOptionValue: data.server,
+        filter: (value, row) => {
+            return value === '' || row.server === value.toString()
+        },
+        width: 150,
+        align: 'center',
+        titleAlign: 'center',
+        ellipsis: {
+            tooltip: true,
+        },
+    },
+    {
+        title: i18n.t('log.cmd'),
+        key: 'cmd',
+        titleAlign: 'center',
+        filterOptionValue: data.keyword,
+        resizable: true,
+        filter: (value, row) => {
+            return value === '' || !!~row.cmd.indexOf(value.toString())
+        },
+        render: ({ cmd }, index) => {
+            const cmdList = split(cmd, '\n')
+            if (size(cmdList) > 1) {
+                return h(
+                    'div',
+                    null,
+                    map(cmdList, (c) => h('div', null, c)),
+                )
+            }
+            return cmd
+        },
+    },
+    {
+        title: i18n.t('log.cost_time'),
+        key: 'cost',
+        width: 100,
+        align: 'center',
+        titleAlign: 'center',
+        render: ({ cost }, index) => {
+            const ms = dayjs.duration(cost).asMilliseconds()
+            if (ms < 1000) {
+                return `${ms} ms`
+            } else {
+                return `${Math.floor(ms / 1000)} s`
+            }
+        },
+    },
+])
+
+const loadHistory = async () => {
+    try {
+        await nextTick()
+        data.loading = true
+        const list = await browserStore.getCmdHistory()
+        data.history = list || []
+    } finally {
+        data.loading = false
+        tableRef.value?.scrollTo({ top: 999999 })
+    }
 }
 
 const cleanHistory = async () => {
-    $dialog.warning(i18n.t('log.confirm_clean_log'), () => {
-        data.loading = true
-        browserStore
-            .cleanCmdHistory()
-            .then((success) => {
-                if (success) {
-                    data.history = []
-                    tableRef.value?.scrollTo({ top: 0 })
-                    $message.success(i18n.t('common.success'))
-                }
-            })
-            .finally(() => {
-                data.loading = false
-            })
+    $dialog.warning(i18n.t('log.confirm_clean_log'), async () => {
+        try {
+            data.loading = true
+            const success = await browserStore.cleanCmdHistory()
+            if (success) {
+                data.history = []
+                tableRef.value?.scrollTo({ top: 0 })
+                $message.success(i18n.t('common.success'))
+            }
+        } finally {
+            data.loading = false
+        }
     })
 }
 
 defineExpose({
-    refresh: () => nextTick().then(loadHistory),
+    refresh: loadHistory,
 })
 </script>
 
@@ -98,71 +160,12 @@ defineExpose({
         <div class="content-value fill-height flex-box-h">
             <n-data-table
                 ref="tableRef"
-                :columns="[
-                    {
-                        title: $t('log.exec_time'),
-                        key: 'timestamp',
-                        defaultSortOrder: 'ascend',
-                        sorter: 'default',
-                        width: 180,
-                        align: 'center',
-                        titleAlign: 'center',
-                        render: ({ timestamp }, index) => {
-                            return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
-                        },
-                    },
-                    {
-                        title: $t('log.server'),
-                        key: 'server',
-                        filterOptionValue: data.server,
-                        filter: (value, row) => {
-                            return value === '' || row.server === value.toString()
-                        },
-                        width: 150,
-                        align: 'center',
-                        titleAlign: 'center',
-                        ellipsis: true,
-                    },
-                    {
-                        title: $t('log.cmd'),
-                        key: 'cmd',
-                        titleAlign: 'center',
-                        filterOptionValue: data.keyword,
-                        resizable: true,
-                        filter: (value, row) => {
-                            return value === '' || !!~row.cmd.indexOf(value.toString())
-                        },
-                        render: ({ cmd }, index) => {
-                            const cmdList = split(cmd, '\n')
-                            if (size(cmdList) > 1) {
-                                return h(
-                                    'div',
-                                    null,
-                                    map(cmdList, (c) => h('div', null, c)),
-                                )
-                            }
-                            return cmd
-                        },
-                    },
-                    {
-                        title: $t('log.cost_time'),
-                        key: 'cost',
-                        width: 100,
-                        align: 'center',
-                        titleAlign: 'center',
-                        render: ({ cost }, index) => {
-                            const ms = dayjs.duration(cost).asMilliseconds()
-                            if (ms < 1000) {
-                                return `${ms} ms`
-                            } else {
-                                return `${Math.floor(ms / 1000)} s`
-                            }
-                        },
-                    },
-                ]"
+                :columns="columns"
                 :data="data.history"
+                :loading="data.loading"
                 class="flex-item-expand"
-                flex-height />
+                flex-height
+                virtual-scroll />
         </div>
     </n-card>
 </template>
diff --git a/frontend/src/components/content_value/ContentEntryEditor.vue b/frontend/src/components/content_value/ContentEntryEditor.vue
index 789387c..31711a5 100644
--- a/frontend/src/components/content_value/ContentEntryEditor.vue
+++ b/frontend/src/components/content_value/ContentEntryEditor.vue
@@ -151,6 +151,7 @@ const onSave = () => {
                     <div class="editor-content-item-label">{{ props.fieldLabel }}</div>
                     <n-input
                         v-model:value="viewAs.field"
+                        :placeholder="props.field + ''"
                         :readonly="props.fieldReadonly"
                         class="editor-content-item-input"
                         type="text" />
@@ -160,6 +161,7 @@ const onSave = () => {
                 <div class="editor-content-item flex-box-v flex-item-expand">
                     <div class="editor-content-item-label">{{ props.valueLabel }}</div>
                     <n-input
+                        :placeholder="props.value"
                         :resizable="false"
                         :value="displayValue"
                         autofocus
diff --git a/frontend/src/components/content_value/ContentSlog.vue b/frontend/src/components/content_value/ContentSlog.vue
index 6cc9c4c..11d5341 100644
--- a/frontend/src/components/content_value/ContentSlog.vue
+++ b/frontend/src/components/content_value/ContentSlog.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { h, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { computed, h, onMounted, onUnmounted, reactive, ref } from 'vue'
 import Refresh from '@/components/icons/Refresh.vue'
 import { debounce, isEmpty, map, size, split } from 'lodash'
 import { useI18n } from 'vue-i18n'
@@ -33,6 +33,85 @@ const data = reactive({
 
 const tableRef = ref(null)
 
+const columns = computed(() => [
+    {
+        title: i18n.t('slog.exec_time'),
+        key: 'timestamp',
+        sortOrder: data.sortOrder,
+        sorter: 'default',
+        width: 180,
+        align: 'center',
+        titleAlign: 'center',
+        render: ({ timestamp }, index) => {
+            return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
+        },
+    },
+    {
+        title: i18n.t('slog.client'),
+        key: 'client',
+        filterOptionValue: data.client,
+        resizable: true,
+        filter: (value, row) => {
+            return value === '' || row.client === value.toString() || row.addr === value.toString()
+        },
+        width: 200,
+        align: 'center',
+        titleAlign: 'center',
+        ellipsis: {
+            tooltip: true,
+        },
+        render: ({ client, addr }, index) => {
+            let content = ''
+            if (!isEmpty(client)) {
+                content += client
+            }
+            if (!isEmpty(addr)) {
+                if (!isEmpty(content)) {
+                    content += ' - '
+                }
+                content += addr
+            }
+            return content
+        },
+    },
+    {
+        title: i18n.t('slog.cmd'),
+        key: 'cmd',
+        titleAlign: 'center',
+        filterOptionValue: data.keyword,
+        resizable: true,
+        filter: (value, row) => {
+            return value === '' || !!~row.cmd.indexOf(value.toString())
+        },
+        render: ({ cmd }, index) => {
+            const cmdList = split(cmd, '\n')
+            if (size(cmdList) > 1) {
+                return h(
+                    'div',
+                    null,
+                    map(cmdList, (c) => h('div', null, c)),
+                )
+            }
+            return cmd
+        },
+    },
+    {
+        title: i18n.t('slog.cost_time'),
+        key: 'cost',
+        width: 100,
+        align: 'center',
+        titleAlign: 'center',
+        render: ({ cost }, index) => {
+            const ms = dayjs.duration(cost).asMilliseconds()
+            if (ms < 1000) {
+                return `${ms} ms`
+            } else {
+                return `${Math.floor(ms / 1000)} s`
+            }
+        },
+    },
+])
+
 const _loadSlowLog = () => {
     data.loading = true
     browserStore
@@ -103,86 +182,12 @@ const onListLimitChanged = (limit) => {
         <div class="content-value fill-height flex-box-h">
             <n-data-table
                 ref="tableRef"
-                :columns="[
-                    {
-                        title: $t('slog.exec_time'),
-                        key: 'timestamp',
-                        sortOrder: data.sortOrder,
-                        sorter: 'default',
-                        width: 180,
-                        align: 'center',
-                        titleAlign: 'center',
-                        render({ timestamp }, index) {
-                            return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
-                        },
-                    },
-                    {
-                        title: $t('slog.client'),
-                        key: 'client',
-                        filterOptionValue: data.client,
-                        resizable: true,
-                        filter(value, row) {
-                            return value === '' || row.client === value.toString() || row.addr === value.toString()
-                        },
-                        width: 200,
-                        align: 'center',
-                        titleAlign: 'center',
-                        ellipsis: true,
-                        render({ client, addr }, index) {
-                            let content = ''
-                            if (!isEmpty(client)) {
-                                content += client
-                            }
-                            if (!isEmpty(addr)) {
-                                if (!isEmpty(content)) {
-                                    content += ' - '
-                                }
-                                content += addr
-                            }
-                            return content
-                        },
-                    },
-                    {
-                        title: $t('slog.cmd'),
-                        key: 'cmd',
-                        titleAlign: 'center',
-                        filterOptionValue: data.keyword,
-                        resizable: true,
-                        width: 100,
-                        filter(value, row) {
-                            return value === '' || !!~row.cmd.indexOf(value.toString())
-                        },
-                        render({ cmd }, index) {
-                            const cmdList = split(cmd, '\n')
-                            if (size(cmdList) > 1) {
-                                return h(
-                                    'div',
-                                    null,
-                                    map(cmdList, (c) => h('div', null, c)),
-                                )
-                            }
-                            return cmd
-                        },
-                    },
-                    {
-                        title: $t('slog.cost_time'),
-                        key: 'cost',
-                        width: 100,
-                        align: 'center',
-                        titleAlign: 'center',
-                        render({ cost }, index) {
-                            const ms = dayjs.duration(cost).asMilliseconds()
-                            if (ms < 1000) {
-                                return `${ms} ms`
-                            } else {
-                                return `${Math.floor(ms / 1000)} s`
-                            }
-                        },
-                    },
-                ]"
+                :columns="columns"
                 :data="data.list"
+                :loading="data.loading"
                 class="flex-item-expand"
                 flex-height
+                virtual-scroll
                 @update:sorter="({ order }) => (data.sortOrder = order)" />
         </div>
     </n-card>
@@ -190,9 +195,4 @@ const onListLimitChanged = (limit) => {
 
 <style lang="scss" scoped>
 @import '@/styles/content';
-
-.content-container {
-    padding: 5px;
-    box-sizing: border-box;
-}
 </style>
diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index fd56f00..98be334 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@@ -158,6 +158,10 @@ const saveEdit = async (field, value, decode, format) => {
             throw new Error('row not exists')
         }
 
+        if (isEmpty(field)) {
+            field = currentEditRow.key
+        }
+
         const { success, msg } = await browserStore.setHash({
             server: props.name,
             db: props.db,
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index fe1717f..1be0501 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/frontend/src/components/content_value/ContentValueList.vue
@@ -130,6 +130,10 @@ const saveEdit = async (pos, value, decode, format) => {
             throw new Error('row not exists')
         }
 
+        if (isEmpty(value)) {
+            value = currentEditRow.value
+        }
+
         const { success, msg } = await browserStore.updateListItem({
             server: props.name,
             db: props.db,
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index c27f041..838944a 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -68,7 +68,7 @@ const filterOption = [
     },
     {
         value: 2,
-        label: i18n.t('interface.score'),
+        label: i18n.t('common.score'),
     },
 ]
 const filterType = ref(1)
@@ -95,7 +95,7 @@ const inFullEdit = computed(() => {
 const scoreFilterOption = ref(null)
 const scoreColumn = computed(() => ({
     key: 'score',
-    title: i18n.t('interface.score'),
+    title: i18n.t('common.score'),
     align: 'center',
     titleAlign: 'center',
     resizable: true,
@@ -183,6 +183,10 @@ const saveEdit = async (field, value, decode, format) => {
             throw new Error('row not exists')
         }
 
+        if (isEmpty(value)) {
+            value = currentEditRow.value
+        }
+
         const { success, msg } = await browserStore.updateZSetItem({
             server: props.name,
             db: props.db,
@@ -429,7 +433,7 @@ defineExpose({
                 v-model:fullscreen="fullEdit"
                 :decode="currentEditRow.decode"
                 :field="currentEditRow.score"
-                :field-label="$t('interface.score')"
+                :field-label="$t('common.score')"
                 :format="currentEditRow.format"
                 :value="currentEditRow.value"
                 :value-label="$t('common.value')"
diff --git a/frontend/src/components/new_value/AddHashValue.vue b/frontend/src/components/new_value/AddHashValue.vue
index c3e3b97..5803039 100644
--- a/frontend/src/components/new_value/AddHashValue.vue
+++ b/frontend/src/components/new_value/AddHashValue.vue
@@ -50,7 +50,9 @@ const onUpdate = (val) => {
             <n-radio-button v-for="(op, i) in updateOption" :key="i" :label="op.label" :value="op.value" />
         </n-radio-group>
     </n-form-item>
-    <n-form-item :label="$t('dialogue.field.element')" required>
+    <n-form-item
+        :label="$t('dialogue.field.element') + ' (' + $t('common.field') + ':' + $t('common.value') + ')'"
+        required>
         <n-dynamic-input
             v-model:value="kvList"
             :key-placeholder="$t('dialogue.field.enter_field')"
diff --git a/frontend/src/components/new_value/AddZSetValue.vue b/frontend/src/components/new_value/AddZSetValue.vue
index 40be1c1..6e77c14 100644
--- a/frontend/src/components/new_value/AddZSetValue.vue
+++ b/frontend/src/components/new_value/AddZSetValue.vue
@@ -58,14 +58,17 @@ const onUpdate = () => {
             <n-radio-button v-for="(op, i) in updateOption" :key="i" :label="op.label" :value="op.value" />
         </n-radio-group>
     </n-form-item>
-    <n-form-item :label="$t('dialogue.field.element')" required>
+    <n-form-item
+        :label="$t('dialogue.field.element') + ' (' + $t('common.value') + ':' + $t('common.score') + ')'"
+        required>
         <n-dynamic-input v-model:value="zset" @create="onCreate" @update:value="onUpdate">
             <template #default="{ value }">
                 <n-input
                     v-model:value="value.value"
-                    :placeholder="$t('dialogue.field.enter_elem')"
+                    :placeholder="$t('dialogue.field.enter_value')"
                     type="text"
                     @update:value="onUpdate" />
+                <n-text>:</n-text>
                 <n-input-number
                     v-model:value="value.score"
                     :placeholder="$t('dialogue.field.enter_score')"
diff --git a/frontend/src/langs/en-us.json b/frontend/src/langs/en-us.json
index 033f086..c619585 100644
--- a/frontend/src/langs/en-us.json
+++ b/frontend/src/langs/en-us.json
@@ -17,6 +17,7 @@
     "key": "Key",
     "value": "Value",
     "field": "Field",
+    "score": "Score",
     "index": "Position"
   },
   "preferences": {
@@ -104,7 +105,6 @@
     "empty_server_list": "No redis server",
     "action": "Action",
     "type": "Type",
-    "score": "Score",
     "cli_welcome": "Welcome to Tiny RDM Redis Console",
     "sub_tab": {
       "status": "Status",
diff --git a/frontend/src/langs/pt-br.json b/frontend/src/langs/pt-br.json
index 3436b24..d164a1d 100644
--- a/frontend/src/langs/pt-br.json
+++ b/frontend/src/langs/pt-br.json
@@ -17,6 +17,7 @@
     "key": "Chave",
     "value": "Valor",
     "field": "Campo",
+    "score": "Pontuação",
     "index": "Posição"
   },
   "preferences": {
@@ -98,7 +99,6 @@
     "empty_server_list": "Nenhum servidor Redis",
     "action": "Ação",
     "type": "Tipo",
-    "score": "Pontuação",
     "cli_welcome": "Bem-vindo ao Console Redis Tiny RDM",
     "sub_tab": {
       "status": "Status",
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index 709a894..2fc6891 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -17,6 +17,7 @@
     "key": "键",
     "value": "值",
     "field": "字段",
+    "score": "分值",
     "index": "位置"
   },
   "preferences": {
@@ -104,7 +105,6 @@
     "empty_server_list": "还没添加Redis服务器",
     "action": "操作",
     "type": "类型",
-    "score": "分值",
     "cli_welcome": "欢迎使用Tiny RDM的Redis命令行控制台",
     "sub_tab": {
       "status": "状态",