add list view

Author: fuyoo

components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     CoHostTab: typeof import('./src/components/CoHostTab.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     NButton: typeof import('naive-ui')['NButton']
+    NDataTable: typeof import('naive-ui')['NDataTable']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NInput: typeof import('naive-ui')['NInput']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']

src/css/quasar.variables.scss

@@ -12,7 +12,7 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-$primary: #1976d2;
+$primary: #18a058;
 $secondary: #26a69a;
 $accent: #9c27b0;
 

src/hooks/life.ts

@@ -7,12 +7,9 @@ export const useResize = (sub?: number) => {
   const onResize = () => {
     clearTimeout(resizeTimer)
     resizeTimer = setTimeout(() => {
-      debugger
       const dom = document.querySelector('#app')
       height.value = (dom?.getBoundingClientRect()?.height || 0) - (sub || 0)
       width.value = dom?.getBoundingClientRect()?.width || 0
-      console.log('height', height.value)
-      console.log('width', width.value)
     }, 50)
   }
   // dynamic set tree height

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

@@ -69,7 +69,7 @@ onBeforeUnmount(() => {
 <template>
   <div class="b-b b-b-dashed b-b-#eee p-4 gap-2 flex">
     <b>{{ trans(route.params.key as string) }}</b>
-    <q-badge><i class="i-iconamoon:type-bold mr-1"></i> {{ type.toUpperCase() }}</q-badge>
+    <q-badge><i class="i-iconamoon:type-bold mr-1"></i> {{ type?.toUpperCase() }}</q-badge>
     <q-badge><i class="i-material-symbols:memory-alt mr-1"></i> {{ baseInfo.memory }}bytes</q-badge>
     <q-badge>
       <i class="i-material-symbols:nest-clock-farsight-analog-outline"></i>TTL

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

@@ -111,7 +111,7 @@ const menuOptions = ref<DropdownOption[]>([
   {
     label: '删除',
     key: 'delete',
-    icon: () => h(NIcon, { default: () => h(Trash) }),
+    icon: () => h(NIcon, null, { default: () => h(Trash) }),
   },
 ])
 const x = ref(0)
@@ -143,40 +143,42 @@ const nodeProps = ({ option }: { option: Tree }) => {
     },
   }
 }
-const handleSelect = async (data: Record<string, any>) => {
+const handleSelect = async (act: string) => {
   showDropdownRef.value = false
-  console.log(data)
-  return
-  if (data.type === 'key') {
-    const { code } = await reqStore.reqWithHost<string>({
-      path: '/cmd',
-      data: ['del', data.value],
-    })
-    if (code === 0) {
-      await queryOriginalData()
+  const data = focusNodeData
+  if (act === "delete") {
+
+    if (data?.type === 'key') {
+      const { code } = await reqStore.reqWithHost<string>({
+        path: '/cmd',
+        data: ['del', data.value],
+      })
+      if (code === 0) {
+        await queryOriginalData()
+      }
+      return
     }
-    return
-  }
-  // delete all of children
-  const keys = [] as string[]
-  const findKeys = (data: Record<string, any>[]) => {
-    for (const item of data || []) {
-      if (item.type === 'key') {
-        keys.push(item.value)
-      } else {
-        findKeys(item.children)
+    // delete all of children
+    const keys = [] as string[]
+    const findKeys = (data: Record<string, any>[]) => {
+      for (const item of data || []) {
+        if (item.type === 'key') {
+          keys.push(item.value)
+        } else {
+          findKeys(item.children)
+        }
       }
     }
+    findKeys(data?.children || [])
+    // todo: need implement batch delete at 'rust' end. this implementation so ugly.
+    for (const key of keys) {
+      await reqStore.reqWithHost<string>({
+        path: '/cmd',
+        data: ['del', key],
+      })
+    }
+    await queryOriginalData()
   }
-  findKeys(data.children)
-  // todo: need implement batch delete at 'rust' end. this implementation so ugly.
-  for (const key of keys) {
-    await reqStore.reqWithHost<string>({
-      path: '/cmd',
-      data: ['del', key],
-    })
-  }
-  await queryOriginalData()
 }
 </script>
 <template>
@@ -209,6 +211,7 @@ const handleSelect = async (data: Record<string, any>) => {
       :style="{ height: height + 'px' }"
       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'">
       <n-button size="small" type="primary" :loading="reqStore.reqLoading" @click="loadMoreFn"
@@ -224,6 +227,7 @@ const handleSelect = async (data: Record<string, any>) => {
     :x="x"
     :y="y"
     @select="handleSelect"
+    @clickoutside="()=>showDropdownRef = false"
   />
 </template>
 

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

@@ -1,11 +1,84 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+import { ref, shallowRef } from 'vue'
+import { useRoute } from 'vue-router'
+import { useReqStore } from '@/stores/req.ts'
+import CoInfoHeader from '@/pages/host/components/CoInfoHeader/index.vue'
+import { ID } from '@/tools/keys.ts'
 
+const size = ref(0)
+const route = useRoute()
+const key = atob(route.params.key as string)
+console.log(key)
+const reqStore = useReqStore()
+const total = ref(0)
+const paginationReactive = reactive({
+  page: 1,
+  pageSize: 5,
+  pageCount: 0,
+  showSizePicker: true,
+  pageSizes: [3, 5, 7],
+  onChange: (page: number) => {
+    paginationReactive.page = page
+  },
+  onUpdatePageSize: (pageSize: number) => {
+    paginationReactive.pageSize = pageSize
+    paginationReactive.page = 1
+  }
+})
+const fetchLen = async () => {
+  const resp = await reqStore.reqWithHost<string>({
+    path: '/cmd',
+    data: ['llen', key],
+  })
+  paginationReactive.pageCount = Number(resp.data)
+}
+fetchLen()
+
+
+const columns = [
+  {
+    title: 'index',
+    key: 'no',
+    render: (row: Record) => {
+      return <div> { (paginationReactive.page - 1) * paginationReactive.pageSize + row.no +1 } </div>
+    },
+  },
+  { title: 'data', key: 'value' },
+]
+const records = shallowRef<Record[]>([])
+const fetchRecords = async () => {
+  await fetchLen()
+  const resp = await reqStore.reqWithHost({
+    path: '/cmd',
+    data: ['lrange', key, `${(paginationReactive.page - 1) * paginationReactive.pageSize}`, `${paginationReactive.page * paginationReactive.pageSize}`],
+  })
+  console.log( ['lrange', key, `${(paginationReactive.page - 1) * paginationReactive.pageSize}`, `${paginationReactive.page * paginationReactive.pageSize}`],
+  )
+  console.log(resp)
+  records.value = resp.data.split('\n').map((item: string, i: number) => {
+    return {
+      title: item,
+      value: item,
+      no: i,
+      key: ID(),
+    }
+  })
+}
+fetchRecords()
 </script>
 
 <template>
-  <div></div>
+  <div class="w-full h-full">
+    <co-info-header v-model:size="size" type="string" />
+    <n-data-table
+      remote
+      ref="table"
+      :columns="columns"
+      :data="records"
+      :loading="reqStore.reqLoading"
+      :pagination="paginationReactive"
+    />
+  </div>
 </template>
 
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>

src/pages/host/layout.vue

@@ -1,36 +1,38 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useReqStore } from '@/stores/req.ts'
 import { useI18n } from 'vue-i18n'
+
 const router = useRouter()
 const route = useRoute()
 const reqStore = useReqStore()
 const { t } = useI18n()
 const changeTab = async (tab: string) => {
   await router.push({
     path: `/tab/${route.params.id}/main/${tab}`,
-    query: route.query,
+    query: route.query
   })
   console.log(route.path)
 }
 const tab = computed(() => {
   if (route.path.includes('database')) {
     return 'database'
-  } else {
+  }
+  else {
     return 'info'
   }
 })
-const dbs = shallowRef([])
+const dbs = shallowRef<Record<string, any>[]>([])
 const fetchDbs = async () => {
   const resp = await reqStore.reqWithHost<string>({
     path: '/cmd',
-    data: ['config', 'get', 'databases'],
+    data: ['config', 'get', 'databases']
   })
 
   dbs.value = new Array(Number(resp.data.split('\n')[1])).fill(0).map((_, i) => ({
     label: `${t('normal.0')}.${i}`,
-    value: i,
+    value: i
   }))
 }
 const selectedDb = ref(Number((route.query.db as string) || 0))
@@ -43,8 +45,8 @@ const reload = async (v: number) => {
     path: `/tab/${route.params.id}/main/database`,
     query: {
       ...route.query,
-      db: v,
-    },
+      db: v
+    }
   })
   location.reload()
 }
@@ -117,6 +119,7 @@ const reload = async (v: number) => {
 
 .active {
   position: relative;
+
   &::after {
     content: '';
     position: absolute;
@@ -128,6 +131,7 @@ const reload = async (v: number) => {
     background: var(--q-primary);
     color: var(--q-primary);
   }
+
   .c {
     color: var(--q-primary);
   }