feat: add database choose function.

Author: fuyoo

src/i18n/en-US/index.ts

@@ -28,4 +28,5 @@ export default {
     tabName: ['Status', 'Data'],
   },
   hostInfo: ['Memory', 'Server', 'Stats', 'Details', 'Key Anylaysis'],
+  normal: ['Database'],
 }

src/i18n/zh-CN/index.ts

@@ -26,4 +26,5 @@ export default {
     tabName: ['状态', '数据'],
   },
   hostInfo: ['内存', '服务端', '状态', '详情', 'Key情况'],
+  normal: ['数据库'],
 }

src/pages/host/components/CoDatabase/CoDbs.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useReqStore } from "@/stores/req";
+import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElButton } from "element-plus"
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+const reqStore = useReqStore()
+const router = useRouter()
+const route = useRoute()
+const dbs = ref("16")
+const db = ref(route.query.db as string || "0")
+const fetchDbs = async () => {
+  const resp = await reqStore.reqWithHost<string>({
+    path: '/cmd',
+    data: ['config', 'get', 'databases']
+  })
+  dbs.value = resp.data.split("\n")[1];
+}
+fetchDbs()
+const reload = async (v: number) => {
+  console.log(v)
+  await router.replace({
+    query: {
+      ...route.query,
+      db: v,
+    }
+  })
+  location.reload()
+}
+console.log(route.query)
+</script>
+<template>
+  <el-dropdown @command="reload">
+    <span>
+      <i class="i-material-symbols:database"></i> {{ $t('normal.0') + ' ' + db }}
+    </span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item :key="item" v-for="item in Number(dbs)" :command="item - 1">{{ $t('normal.0') + (item - 1)
+        }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+<style scoped lang="scss"></style>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useReqStore } from '@/stores/req';
-import { reactive, ref } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { RecycleScroller } from 'vue-virtual-scroller'
 import "vue-virtual-scroller/dist/vue-virtual-scroller.css"
 import { ElTreeV2 } from 'element-plus'
@@ -26,7 +26,6 @@ const v = ref([])
 const noSearchKeys = async () => {
   const resp = await reqStore.reqWithHost<string>({
     path: '/cmd',
-    db: '0',
     data: JSON.stringify(['scan', keys.cursor, 'MATCH', '*', 'COUNT', '5000'])
   })
   const v = resp.data.split('\n')
@@ -115,22 +114,28 @@ const createTreeNode = (label: string, type: 'key' | 'folder'): Tree => {
 };
 // todo: configurable name space enable.
 const nameSpaceEnable = ref(true)
-
+const elTreeV2Ref = ref()
+const treeHeight = ref(0)
+// dynamic set tree height
+onMounted(() => {
+  window.addEventListener('resize', () => {
+    treeHeight.value = (elTreeV2Ref.value.$el.getBoundingClientRect()).height
+  })
+  treeHeight.value = (elTreeV2Ref.value.$el.getBoundingClientRect()).height
+})
 </script>
 <template>
   <div class="flex flex-col h-full">
     <div class="p-2 flex-1 flex justify-center items-center flex-row">
       <input type="text" class="flex-1 outline-none" v-model="search.match">
     </div>
-    <q-scroll-area v-if="nameSpaceEnable" class="h-[calc(100vh-120px)]">
-      <!-- <q-tree dense :nodes="keys.keys" node-key="id" no-transition /> -->
-      <el-tree-v2 style="height: calc(100vh - 120px)" :data="keys.keys" :props="{
+    <el-tree-v2 :height="treeHeight" v-if="nameSpaceEnable" class="h-[calc(100vh-160px)]" ref="elTreeV2Ref"
+      :data="keys.keys" :props="{
         value: 'id',
         label: 'label',
         children: 'children',
       }" />
-    </q-scroll-area>
-    <RecycleScroller v-else class="h-[calc(100vh-120px)] scroller mx-2" :items="keys.keys" :item-size="32"
+    <RecycleScroller v-else class="h-[calc(100vh-160px)] scroller mx-2" :items="keys.keys" :item-size="32"
       key-field="label" v-slot="{ item }">
       <div class="flex items-center  mx-2 px-2 justify-start white-space-nowrap w-full cursor-pointer hover:bg-gray-100"
         style="flex-wrap: nowrap; word-break: keep-all; overflow: hidden; text-overflow: ellipsis;">

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

@@ -1,17 +1,23 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
-
-const spliter = ref(200)
+import { useRoute } from 'vue-router';
 import CoKeys from './CoKeys.vue';
+import CoDbs from './CoDbs.vue';
+const route = useRoute();
+const spliter = ref(200)
+console.log(route.fullPath)
 </script>
 <template>
   <q-splitter v-model="spliter" unit="px" :limits="[200, 480]">
     <template v-slot:before>
+      <div class="w-full h-10 flex items-center justify-center">
+        <CoDbs></CoDbs>
+      </div>
       <CoKeys></CoKeys>
     </template>
 
     <template v-slot:after>
-      <q-scroll-area class="h-[calc(100vh-50px)]">
+      <q-scroll-area class="h-[calc(100vh-90px)]">
       </q-scroll-area>
     </template>
   </q-splitter>

src/pages/host/index.vue

@@ -1,19 +1,27 @@
 <script setup lang="ts">
 import CoHostInfo from './components/CoHostInfo.vue'
 import { ref } from 'vue'
-import { useReqStore } from '@/stores/req'
 import CoDatabase from './components/CoDatabase/index.vue'
-const navTab = ref('status')
-const dbsize = ref(16)
-const tabs = ref(new Set<number>())
+import { useRoute, useRouter } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+const navTab = ref(route.query.tab as string || 'status')
+const changeTab = (tab: string) => {
+  navTab.value = tab
+  router.replace({
+    query: {
+      tab: navTab.value
+    }
+  })
+}
 </script>
 <template>
   <div>
     <q-toolbar class="text-primary b-b b-b-solid b-b-#eee">
-      <q-btn flat round dense @click="navTab = 'status'" class="mr-2">
+      <q-btn flat round dense @click="changeTab('status')" class="mr-2">
         <i class="i-hugeicons:cpu-settings text-5"></i>
       </q-btn>
-      <q-btn flat round dense @click="navTab = 'data'" class="mr-2">
+      <q-btn flat round dense @click="changeTab('data')" class="mr-2">
         <i class="i-material-symbols:database text-5"></i>
       </q-btn>
     </q-toolbar>

src/stores/req.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 
 import { db, type ConnectionHost } from '@/db'
 import { invoke } from '@tauri-apps/api/core'
-import { Notify } from 'quasar'
+import { Notify, is } from 'quasar'
 import { useRoute } from 'vue-router'
 export interface CommonRequestParams {
   connectionInfo: ConnectionHost
@@ -39,7 +39,7 @@ const request = async <T>({
   }
   return body
 }
-
+const _T = (v: any) => Object.prototype.toString.call(v).slice(8, -1)
 export const useReqStore = defineStore('req', () => {
   // at here, we should get host from route params.
   const route = useRoute()
@@ -50,13 +50,16 @@ export const useReqStore = defineStore('req', () => {
     notify?: boolean
   }): Promise<BackendResponse<R>> => {
     const host = await db.hosts.get({ id: parseInt(route.params.id as string) })
+    if (route.query.db && host) {
+      host.node[0].db = route.query.db as string
+    }
     if (option.db && host) {
       host.node[0].db = option.db
     }
     return request({
       connectionInfo: host!,
       path: option.path,
-      data: option.data,
+      data: _T(option.data) != 'String' ? JSON.stringify(option.data) : option.data,
       notify: option.notify,
     })
   }