optimize

Author: fuyoo

components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     CoHostTab: typeof import('./src/components/CoHostTab.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
     NButton: typeof import('naive-ui')['NButton']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']

src/i18n/en-US/index.ts

@@ -9,7 +9,7 @@ export default {
     ['Github', 'github.com/fuyoo/bs-redis-desktop-client'],
   ],
   settings: ['Settings', 'Language', 'Version'],
-  actions: ['Ok', 'Cancel', 'Delete', 'Edit', 'Add', 'Insert'],
+  actions: ['Ok', 'Cancel', 'Delete', 'Edit', 'Add', 'Insert','Download'],
   home: {
     form: {
       lable: ['Name', 'Host', 'Port', 'Database', 'Username', 'Password', 'Cluster'],
@@ -31,5 +31,6 @@ export default {
   normal: ['Database', 'Please select a key.'],
   timeFormat: ['d', 'h', 'm', 's', 'mill','never'],
   table: ['Data','Operate'],
-  tips: ['Current data type unsupported yet.']
+  tips: ['Current data type unsupported yet.',
+    'Due to the data being larger than {size}, the displayed data is truncated. You can click the button next to it to download the original data']
 }

src/i18n/zh-CN/index.ts

@@ -6,7 +6,7 @@ export default {
     ['Github', 'github.com/fuyoo/bs-redis-desktop-client'],
   ],
   settings: ['设置', '语言', '版本'],
-  actions: ['确定', '取消', '删除', '修改', '添加','插入'],
+  actions: ['确定', '取消', '删除', '修改', '添加','插入','下载'],
   home: {
     form: {
       lable: ['名称', '地址', '端口', '数据库', '用户名', '密码', '是否集群'],
@@ -29,5 +29,5 @@ export default {
   normal: ['数据库', '请选择一个键'],
   timeFormat: ['天', '时', '分', '秒', '毫秒', '永不过期'],
   table: ['数据', '操作'],
-  tips: ['该数据类型尚不支持']
+  tips: ['该数据类型尚不支持','由于数据大于{size}，当前显示的是被截断的数据。你可以点击旁边的按钮下载原始数据']
 }

src/pages/host/components/CoKeys/index.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { useReqStore } from '@/stores/req.ts'
-import { reactive, ref, h } from 'vue'
+import { reactive, ref, h,computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { DropdownOption } from 'naive-ui'
-import { Folder, FolderOpenOutline, Trash } from '@vicons/ionicons5'
+import { Folder, FolderOpenOutline, KeyOutline, Trash } from '@vicons/ionicons5'
 import { NIcon } from 'naive-ui'
 import { useResize } from '@/hooks/life.ts'
-import { ID, parseTreeWithNameSpace } from '@/tools/keys.ts'
+import { ID } from '@/tools/keys.ts'
 import type { Tree } from '@/types.ts'
+import KeysWorker from '@/worker/keys.ts?worker'
 
+const keysWorker = new KeysWorker()
 const router = useRouter()
 const reqStore = useReqStore()
 const route = useRoute()
@@ -39,40 +41,105 @@ const original = reactive<{
 // todo: enable name space by configure.
 const nameSpaceEnable = ref(true)
 // here we do some no search patten logic.
-const queryOriginalData = async () => {
-  original.loading = true
+const queryData = async (isSearch?: boolean) => {
+  if (isSearch) search.loading = true
+  else original.loading = true
   try {
     // fetch data pass through rust side.
     const resp = await reqStore.reqWithHost<string>({
       path: '/cmd',
-      data: JSON.stringify(['scan', original.cursor, 'MATCH', '*', 'COUNT', '5000']),
+      data: JSON.stringify([
+        'scan',
+        isSearch ? search.cursor : original.cursor,
+        'MATCH',
+        isSearch ? search.match : '*',
+        'COUNT',
+        '5000',
+      ]),
     })
     // parse data
     const v = resp.data.split('\n')
+    if (isSearch) {
+      let arr = []
 
-    if (original.cursor === '0') {
-      originalKeyList = v
-        .splice(1)
-        .map((e) => ({ type: 'key', label: e, icon: 'key', id: ID() }) as Tree)
+      if (search.cursor === '0') {
+        arr = v.splice(1).map((e) => ({ type: 'key', label: e, icon: 'key', id: ID() }) as Tree)
+      } else {
+        arr = search.tree.concat(
+          v.splice(1).map(
+            (e) =>
+              ({
+                type: 'key',
+                label: e,
+                icon: 'key',
+                id: ID(),
+              }) as Tree,
+          ),
+        )
+      }
+      search.cursor = v[0]
+      // const data = [] as Tree[]
+      // arr.forEach((e) => {
+      //   parseTreeWithNameSpace(data, e.label)
+      // })
+      // search.tree = data
+      keysWorker.postMessage({
+        type: 'parse',
+        data: arr,
+      })
+      search.tree = await new Promise((resolve) => {
+        keysWorker.onmessage = (e) => {
+          resolve(e.data)
+        }
+      })
     } else {
-      v.splice(1).forEach((e) => {
-        originalKeyList.push({ type: 'key', label: e, icon: 'key', id: ID() })
+      // no search match
+      if (original.cursor === '0') {
+        originalKeyList = v
+          .splice(1)
+          .map((e) => ({ type: 'key', label: e, icon: 'key', id: ID() }) as Tree)
+      } else {
+        v.splice(1).forEach((e) => {
+          originalKeyList.push({ type: 'key', label: e, icon: 'key', id: ID() })
+        })
+      }
+      original.cursor = v[0]
+      // const arr = [] as Tree[]
+      // originalKeyList.forEach((e) => {
+      //   parseTreeWithNameSpace(arr, e.label)
+      // })
+      // original.tree = arr
+      keysWorker.postMessage({
+        type: 'parse',
+        data: originalKeyList,
+      })
+      original.tree = await new Promise((resolve) => {
+        keysWorker.onmessage = (e) => {
+          resolve(e.data)
+        }
       })
-      console.log(originalKeyList.length)
     }
-    original.cursor = v[0]
-    const arr = [] as Tree[]
-    originalKeyList.forEach((e) => {
-      parseTreeWithNameSpace(arr, e.label)
-    })
-    original.tree = arr
-  } catch (e) {}
+  } catch (e) {
+    console.error(e)
+  }
   original.loading = false
+  search.loading = false
 }
-queryOriginalData()
-
-const { height } = useResize(120)
+queryData()
 
+const { height } = useResize(115)
+const calcHeight = computed(() => {
+  if (search.match !== '') {
+    if (search.cursor === '0') {
+      return height.value + 30 + 'px'
+    }
+    return height.value + 'px'
+  }
+  if (original.cursor === '0') {
+    return height.value + 30 + 'px'
+  }
+  return height.value + 'px'
+})
 const updatePrefixWithExpand = (
   _keys: Array<string | number>,
   _option: Array<Tree | null>,
@@ -81,6 +148,7 @@ const updatePrefixWithExpand = (
     action: 'expand' | 'collapse' | 'filter'
   },
 ) => {
+  console.log ('updatePrefixWithExpand', _keys, _option, meta)
   if (!meta.node) return
   switch (meta.action) {
     case 'expand':
@@ -100,8 +168,9 @@ const updatePrefixWithExpand = (
 
 const loadMoreFn = () => {
   if (search.match !== '') {
+    queryData(true)
   } else {
-    queryOriginalData()
+    queryData()
   }
 }
 
@@ -154,6 +223,7 @@ const nodeProps = ({ option }: { option: Tree }) => {
     },
   }
 }
+// contextmenu selected function.
 const handleSelect = async (act: string) => {
   showDropdownRef.value = false
   const data = focusNodeData
@@ -164,7 +234,7 @@ const handleSelect = async (act: string) => {
         data: ['del', data.value],
       })
       if (code === 0) {
-        await queryOriginalData()
+        await queryData(search.match !== "")
       }
       return
     }
@@ -180,16 +250,33 @@ const handleSelect = async (act: string) => {
       }
     }
     findKeys(data?.children || [])
-    // todo: need implement batch delete at 'rust' end. this implementation so ugly.
+    // todo: need implement batch delete at 'rust' end. this implementation is so ugly.
     for (const key of keys) {
       await reqStore.reqWithHost<string>({
         path: '/cmd',
         data: ['del', key],
       })
     }
-    await queryOriginalData()
+    await queryData(search.match !== "")
   }
 }
+// throttle
+let timer = -1 as any
+const doFilter = async () => {
+  console.log(search)
+  search.cursor = '0'
+  clearTimeout(timer)
+  if (search.match === '') return
+  timer = setTimeout(async () => {
+    await queryData(true)
+  }, 100)
+}
+
+function renderPrefix(data: { option: Tree }) {
+  return h(NIcon, null, {
+    default: () => h(data.option.type === 'key' ? KeyOutline : Folder),
+  })
+}
 </script>
 <template>
   <div ref="treeBoxRef" class="w-full flex flex-col flex-1 justify-start items-start">
@@ -199,6 +286,7 @@ const handleSelect = async (act: string) => {
         class="flex-1"
         size="tiny"
         v-model:value="search.match"
+        @update:value="doFilter"
         placeholder="redis query format"
       >
         <template #prefix>
@@ -213,17 +301,31 @@ const handleSelect = async (act: string) => {
       ref="treeInstRef"
       block-line
       show-line
+      :render-prefix="renderPrefix"
       :on-update:expanded-keys="updatePrefixWithExpand"
-      :data="original.tree"
+      :data="search.match != '' ? search.tree : original.tree"
       virtual-scroll
       expand-on-click
       :node-props="nodeProps"
-      :style="{ height: height + 'px' }"
+      :style="{ height: calcHeight }"
       key-field="id"
       children-field="children"
       class="whitespace-nowrap"
     />
-    <div class="flex flex-1 w-full justify-center items-center" v-show="original.cursor != '0'">
+    <div
+      class="flex flex-1 w-full justify-center items-center"
+      v-if="!search.match"
+      v-show="original.cursor != '0'"
+    >
+      <n-button size="small" type="primary" :loading="reqStore.reqLoading" @click="loadMoreFn"
+        >加载更多
+      </n-button>
+    </div>
+    <div
+      v-else
+      class="flex flex-1 w-full justify-center items-center"
+      v-show="search.cursor != '0'"
+    >
       <n-button size="small" type="primary" :loading="reqStore.reqLoading" @click="loadMoreFn"
         >加载更多
       </n-button>

src/pages/host/key-types/co-list/index.vue

@@ -79,7 +79,9 @@ const { height } = useResize()
 <template>
   <div class="w-full h-full">
     <co-info-header v-model:size="size" type="string">
-      <div><n-button size="tiny" type="primary">{{ $t('actions[5]') }}</n-button></div>
+      <div><n-button size="tiny" type="primary">
+        <template #icon><i class="i-pajamas:insert"></i></template>
+         {{ $t('actions[5]') }}</n-button></div>
     </co-info-header>
     <div class="p-5">
       <n-data-table

src/pages/host/key-types/co-string/index.vue

@@ -1,33 +1,46 @@
 <script setup lang="tsx">
 import { useReqStore } from '@/stores/req.ts'
-import { ref, shallowRef } from 'vue'
+import { ref, shallowRef,computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useModal,type ModalReactive } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import CoInfoHeader from '@/pages/host/components/CoInfoHeader/index.vue'
 import { Key } from '@/tools/keys.ts'
-
+// redis key
 const key = Key()
+// i18n helper function
 const { t } = useI18n()
+// route
 const route = useRoute()
+// hook, packaged request helper
 const reqStore = useReqStore()
+// redis key data
 const content = shallowRef<string>('')
+// redis key used space size. unit byte
 const size = ref<string>('')
+// key space size whether larger than limit size.
+const largerThan = computed(() => {
+  return Number(size.value) > 1024 * 1024
+})
+// fetch data
 const fetchData = async () => {
   const { data } = await reqStore.reqWithHost<string>({
     path: '/cmd',
     data: ['get', atob(route.params.key as string)],
   })
   // more than 1Mb, we are truncate it.
-  if (Number(size.value) > 1024 * 1024) {
+  if (largerThan.value) {
     content.value = data.slice(0, 1024 * 1024) + '...'
     return
   }
   content.value = data
 }
 fetchData()
+// change value model.
 const vModel = ref<string>('')
+// naive ui modal
 const modal = useModal()
+// submit to change value
 const submitFn = (m: ModalReactive) => {
   reqStore
     .reqWithHost({
@@ -39,6 +52,7 @@ const submitFn = (m: ModalReactive) => {
       fetchData()
     })
 }
+// create modal func.
 const changeValue = () => {
   vModel.value = content.value
   const m = modal.create({
@@ -79,12 +93,15 @@ const changeValue = () => {
     <co-info-header v-model:size="size" type="string">
       <n-space>
         <n-button type="primary" size="tiny" @click="changeValue">
-          <i class="i-material-symbols:edit-square-rounded"></i> {{ $t('actions[3]') }}
+          <template #icon><i class="i-material-symbols:edit-square-rounded"></i></template> {{ $t('actions[3]') }}
         </n-button>
       </n-space>
     </co-info-header>
     <div class="p-4">
-      <textarea readonly class="w-full h-full resize-none b-none outline-none" v-model="content" />
+      <n-alert v-if="largerThan" type="info"  :bordered="false">
+        {{$t('tips[1]',{size: '1Mb'})}} <n-button size="tiny" type="primary" quaternary>{{$t("actions.6")}}</n-button>
+      </n-alert>
+      <textarea readonly class="mt-4 w-full h-full resize-none b-none outline-none" v-model="content" />
     </div>
   </div>
 </template>

src/tools/index.ts

@@ -17,6 +17,7 @@ export const showHostConfigureDetail = async (id: string) => {
 
 export const dataToHuman = (data: string): string => {
   const bytes = parseInt(data, 10);
+  console.log(bytes);
   if (isNaN(bytes) || bytes < 0) return '0 B';
 
   const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];