fix ui

Author: fuyoo

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ElCard } from 'element-plus'
+import { useReqStore } from '@/stores/req.ts'
+import { storeToRefs } from 'pinia'
+
+const prop = defineProps<{ value?: string }>()
+const reqStore = useReqStore()
+const fetchInfo = async () => {
+  console.log(prop.value)
+  const resp = await reqStore.reqWithHost({
+    path: '/cmd',
+    data: ['type',prop.value]
+  })
+  console.log(resp)
+  const r2 = await reqStore.reqWithHost({
+    path: '/cmd',
+    data: ['memory','usage',prop.value]
+  })
+  console.log(r2)
+}
+fetchInfo()
+</script>
+
+<template>
+  <div class="mx-2">
+    <el-card shadow="never"> </el-card>
+    <b>{{ value }}</b>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useReqStore } from '@/stores/req'
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref, shallowRef } from 'vue'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import { ElTreeV2, type TreeNode,ElButton } from 'element-plus'
 import 'element-plus/dist/index.css'
@@ -119,14 +119,15 @@ const createTreeNode = (label: string, type: 'key' | 'folder', value?: string):
 }
 // todo: configurable name space enable.
 const nameSpaceEnable = ref(true)
-const elTreeV2Ref = ref()
-const treeHeight = ref(0)
+const treeBoxRef = shallowRef()
+const elTreeV2Ref = shallowRef()
+const treeHeight = shallowRef(560)
 // dynamic set tree height
 onMounted(() => {
   window.addEventListener('resize', () => {
-    treeHeight.value = elTreeV2Ref.value.$el.getBoundingClientRect().height
+    treeHeight.value = treeBoxRef.value.getBoundingClientRect().height - 30
   })
-  treeHeight.value = elTreeV2Ref.value.$el.getBoundingClientRect().height
+  treeHeight.value = treeBoxRef.value.getBoundingClientRect().height - 30
 })
 
 const onNodeClick = (data: Record<string, any>,node: TreeNode,e: MouseEvent) => {
@@ -143,34 +144,35 @@ const loadMoreFn = () => {
 }
 </script>
 <template>
-  <div class="flex flex-col h-full _mc">
-    <div class="p-2 flex-1 flex justify-center items-center flex-row">
+  <div class="_mc flex flex-col flex-1 justify-start items-start">
+    <div class="p-2 flex justify-center items-start flex-row">
       <input type="text" class="flex-1 outline-none" v-model="search.match" />
     </div>
-    <el-tree-v2
-      @node-click="onNodeClick"
-      :item-size="30"
-      :height="treeHeight"
-      v-if="nameSpaceEnable"
-      class="h-[calc(100vh-160px)]"
-      ref="elTreeV2Ref"
-      :data="noSearchKeyData"
-      :props="{
+    <div class="flex-1 w-full" ref="treeBoxRef">
+      <el-tree-v2
+        @node-click="onNodeClick"
+        :item-size="30"
+        :height="treeHeight"
+        v-if="nameSpaceEnable"
+        ref="elTreeV2Ref"
+        :data="noSearchKeyData"
+        :props="{
         value: 'id',
         label: 'label',
         children: 'children',
       }"
-    >
-      <template #default="{ data }">
-        <div
-          class="w-full text-nowrap text-ellipsis cursor-default overflow-hidden"
-          :title="data.value"
-        >
-          <span> {{ data.label }}</span>
-        </div>
-      </template>
-    </el-tree-v2>
-    <div class="flex justify-center items-center flex-1">
+      >
+        <template #default="{ data }">
+          <div
+            class="w-full text-nowrap text-ellipsis cursor-default overflow-hidden"
+            :title="data.value"
+          >
+            <span> {{ data.label }}</span>
+          </div>
+        </template>
+      </el-tree-v2>
+    </div>
+    <div class="flex justify-center items-center">
       <el-button size="small" class="w-full h-full" v-show="noSearchCursor !== '0'" text :loading="reqStore.reqLoading" @click="loadMoreFn">加载更多</el-button>
     </div>
   </div>

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

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
-import { onBeforeUnmount, ref } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
 import CoKeys from './CoKeys.vue'
 import CoDbs from './CoDbs.vue'
-import CoInformation from './CoInformation.vue'
-const key = ref('')
+import CoInformation from './CoInfomation/index.vue'
+import { ElEmpty } from 'element-plus'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+const key = ref('type:hash')
 const canMove = ref(false)
 let startX = 0
 const width = ref(200)
@@ -39,33 +42,37 @@ onBeforeUnmount(() => {
   window.removeEventListener('mouseup', mouseupFn)
   window.removeEventListener('mouseleave', mouseleaveFn)
 })
+const keyInfo = computed(() => {
+  if (key.value) {
+    return CoInformation
+  }
+  return ElEmpty
+})
 </script>
 <template>
-  <div class="flex h-full" :class="{ moving: canMove }">
-    <div class="_ml l b-r b-r-dashed b-r-#eee relative" :style="{ width: `${width}px` }">
+  <div class="flex" :class="{ moving: canMove }">
+    <div class="l flex flex-col items-start h-full b-r b-r-dashed b-r-#eee relative" :style="{ width: `${width}px` }">
         <div class="w-full h-10 flex items-center justify-center">
           <CoDbs></CoDbs>
         </div>
         <CoKeys v-model="key"></CoKeys>
       <div
         @mousedown="mousedownFn"
-        class="opacity-0 flex justify-center items-center  move w-5 h-5 bg-#ddd shadow-lg absolute top-50% mt--2 right--2 rounded"
+        class="opacity-0 flex justify-center items-center
+        move w-5 h-5 bg-#ddd shadow-lg absolute top-50% mt--2 right--2 rounded"
       >
         <span class="i-uil:arrows-resize-h"></span>
       </div>
     </div>
-    <div class="r flex-1">
-      <q-scroll-area class="h-[calc(100vh-90px)]">
-        <co-information :value="key"></co-information>
+    <div class="r flex-1 h-full">
+      <q-scroll-area class="h-full">
+        <component :is="keyInfo" :description="t('normal.1')" :value="key"></component>
       </q-scroll-area>
     </div>
   </div>
 </template>
 <style scoped lang="scss">
-._ml *{
-  -webkit-user-select: none;
-  user-select: none;
-}
+
 .moving {
   cursor: col-resize;
   &:hover .move {

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

@@ -33,7 +33,7 @@ const changeTab = (tab: string) => {
       </q-tab-panel>
       <q-tab-panel name="data" class="q-pa-none">
         <q-scroll-area class="h-[calc(100vh-50px)]">
-          <co-database></co-database>
+          <co-database class="absolute top-0 left-0 bottom-0 right-0"></co-database>
         </q-scroll-area>
       </q-tab-panel>
     </q-tab-panels>

src/pages/host/index.vue

@@ -45,12 +45,15 @@ export const useReqStore = defineStore('req', () => {
   const reqLoading = ref(false)
   // at here, we should get host from route params.
   const route = useRoute()
+  // define a  timer to throttle the loading status
+  let timer:any;
   const reqWithHost = async <R>(option: {
     path: string
     data?: any
     db?: string
     notify?: boolean
   }): Promise<BackendResponse<R>> => {
+    clearTimeout(timer)
     reqLoading.value = true
     const host = await db.hosts.get({ id: parseInt(route.params.id as string) })
     if (route.query.db && host) {
@@ -66,11 +69,12 @@ export const useReqStore = defineStore('req', () => {
         data: _T(option.data) != 'String' ? JSON.stringify(option.data) : option.data,
         notify: option.notify,
       })
-      reqLoading.value = false
-      console.log(reqLoading.value)
+      // throttle timer
+      timer = setTimeout(()=>reqLoading.value=false,100)
       return resp
     } catch (e) {
-      reqLoading.value = false
+      // throttle timer
+      timer = setTimeout(()=>reqLoading.value=false,100)
       throw e
     }
   }