pref: improve display speed of large hash content (#453)

Author: tiny-craft

frontend/src/components/content_value/ContentValueHash.vue

@@ -6,7 +6,7 @@ import { NButton, NIcon, useThemeVars } from 'naive-ui'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import useDialogStore from 'stores/dialog.js'
-import { isEmpty, size } from 'lodash'
+import { isEmpty, size, truncate } from 'lodash'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 import useBrowserStore from 'stores/browser.js'
 import LoadList from '@/components/icons/LoadList.vue'
@@ -140,10 +140,11 @@ const valueColumn = computed(() => ({
     //     return !!~row.v.indexOf(value.toString())
     // },
     render: (row) => {
-        const val = row.dv || nativeRedisKey(row.v)
+        let val = row.dv || nativeRedisKey(row.v)
         if (isCode.value) {
             return h('pre', { class: 'pre-wrap' }, val)
         }
+        val = truncate(val, { length: 500 })
         if (row.rm === true) {
             return h('s', {}, val)
         }

frontend/src/components/content_value/ContentValueList.vue

@@ -3,7 +3,7 @@ import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import AddLink from '@/components/icons/AddLink.vue'
 import { NButton, NIcon, useThemeVars } from 'naive-ui'
-import { isEmpty, size } from 'lodash'
+import { isEmpty, size, truncate } from 'lodash'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import useDialogStore from 'stores/dialog.js'
@@ -115,7 +115,7 @@ const valueColumn = computed(() => ({
         if (isCode.value) {
             return h('pre', { class: 'pre-wrap' }, val)
         }
-        return val
+        return truncate(val, { length: 500 })
     },
 }))
 

frontend/src/components/content_value/ContentValueSet.vue

@@ -3,7 +3,7 @@ import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import AddLink from '@/components/icons/AddLink.vue'
 import { NButton, NIcon, useThemeVars } from 'naive-ui'
-import { isEmpty, size } from 'lodash'
+import { isEmpty, size, truncate } from 'lodash'
 import useDialogStore from 'stores/dialog.js'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
@@ -114,7 +114,7 @@ const valueColumn = computed(() => ({
         if (isCode.value) {
             return h('pre', { class: 'pre-wrap' }, val)
         }
-        return val
+        return truncate(val, { length: 500 })
     },
 }))
 

frontend/src/components/content_value/ContentValueZSet.vue

@@ -5,7 +5,7 @@ import AddLink from '@/components/icons/AddLink.vue'
 import { NButton, NIcon, useThemeVars } from 'naive-ui'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
-import { isEmpty, size } from 'lodash'
+import { isEmpty, size, truncate } from 'lodash'
 import useDialogStore from 'stores/dialog.js'
 import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 import useBrowserStore from 'stores/browser.js'
@@ -164,7 +164,7 @@ const valueColumn = computed(() => ({
         if (isCode.value) {
             return h('pre', { class: 'pre-wrap' }, val)
         }
-        return val
+        return truncate(val, { length: 500 })
     },
 }))