key-tree modify

Author: fuyoo

src/assets/folder-close.png

@@ -29,14 +29,19 @@ const reload = async (v: number) => {
 console.log(route.query)
 </script>
 <template>
-  <el-dropdown @command="reload">
-    <span>
-      <i class="i-material-symbols:database"></i> {{ $t('normal.0') + ' ' + db }}
-    </span>
+  <el-dropdown @command="reload" trigger="click" class="w-full">
+    <q-btn outline unelevated dense no-caps push long color="primary" class="w-full mx-2">
+      <div style="width: 100%;">
+        <i class="i-material-symbols:database"></i>
+        {{ $t('normal.0') + '.' + db }}
+      </div>
+    </q-btn>
     <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-item :key="item" v-for="item in Number(dbs)" :command="item - 1">
+          <div class="w-40 text-center">
+            {{ $t('normal.0') + '.' + (item - 1) }}</div>
+        </el-dropdown-item>
       </el-dropdown-menu>
     </template>
   </el-dropdown>

src/assets/folder-open.png

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useReqStore } from '@/stores/req';
-import { onMounted, reactive, ref } from 'vue';
+import { defineComponent, h, 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'
+import { ElTreeV2, type TreeNode } from 'element-plus'
 import "element-plus/dist/index.css"
 const reqStore = useReqStore()
 // this is do search
@@ -24,11 +24,14 @@ const v = ref([])
 
 // here we do some no search logic.
 const noSearchKeys = async () => {
+  // fetch data pass through rust side.
   const resp = await reqStore.reqWithHost<string>({
     path: '/cmd',
     data: JSON.stringify(['scan', keys.cursor, 'MATCH', '*', 'COUNT', '5000'])
   })
+  // parse data
   const v = resp.data.split('\n')
+
   let data = [] as Tree[]
   if (keys.cursor === '0') {
     data = v.splice(1).map(e => ({ type: 'key', label: e, icon: "key", id: ID() }))
@@ -40,14 +43,14 @@ const noSearchKeys = async () => {
   data.forEach((e) => {
     parseLevel(arr, e.label)
   })
-  console.log(arr)
   keys.keys = arr
 }
 noSearchKeys()
 
 // tree object
 interface Tree {
   label: string,
+  value?: string,
   icon: string,
   type: 'key' | 'folder',
   id: string,
@@ -83,7 +86,7 @@ const parseLevel = (ori: Tree[], key: string, delimiter: string = ':') => {
     } else {
       // If key length is less than 2, it means it is a key.
       if (arr.length <= 1) {
-        ori.push(createTreeNode(key, 'key'));
+        ori.push(createTreeNode(arr[0], 'key', key));
         return;
       }
       // Otherwise create as a folder.
@@ -104,9 +107,9 @@ const parseLevel = (ori: Tree[], key: string, delimiter: string = ':') => {
   }
 };
 
-const createTreeNode = (label: string, type: 'key' | 'folder'): Tree => {
+const createTreeNode = (label: string, type: 'key' | 'folder', value?: string): Tree => {
   try {
-    return { label, icon: type === 'key' ? "key" : "folder", type, id: ID() };
+    return { label, icon: type === 'key' ? "key" : "folder", type, id: ID(), value };
   } catch (error) {
     console.error('Error creating tree node:', error);
     throw error;
@@ -123,18 +126,28 @@ onMounted(() => {
   })
   treeHeight.value = (elTreeV2Ref.value.$el.getBoundingClientRect()).height
 })
+const print = (data: TreeNode) => {
+  console.log(data)
+}
 </script>
 <template>
-  <div class="flex flex-col h-full">
+  <div class="flex flex-col h-full _mc">
     <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>
-    <el-tree-v2 :height="treeHeight" v-if="nameSpaceEnable" class="h-[calc(100vh-160px)]" ref="elTreeV2Ref"
-      :data="keys.keys" :props="{
+    <el-tree-v2 :item-size="30" :height="treeHeight" v-if="nameSpaceEnable" class="h-[calc(100vh-160px)]"
+      ref="elTreeV2Ref" :data="keys.keys" :props="{
         value: 'id',
         label: 'label',
         children: 'children',
-      }" />
+      }">
+      <template #default="{ node, data }">
+        <div class="w-full text-nowrap  text-ellipsis cursor-default overflow-hidden" :title="data.value">
+          <span>
+            {{ data.label }}{{ print(node) }}</span>
+        </div>
+      </template>
+    </el-tree-v2>
     <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"
@@ -150,6 +163,72 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+._mc {
+  &::v-deep(.el-tree-node) {
+    padding-right: 10px;
+    padding-left: 20px;
+
+    * {
+      line-height: 1;
+    }
+
+    .el-tree-node__expand-icon {
+      background: url('@/assets/folder-close.png') no-repeat center center;
+      background-size: 14px 14px;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: -50%;
+        left: -8px;
+        height: 100%;
+        width: 10px;
+        border-left: 1px dashed #aaa;
+        border-bottom: 1px dashed #aaa;
+      }
+
+      svg {
+        display: none;
+      }
+    }
+
+    .el-tree-node__expand-icon.expanded {
+      background: url('@/assets/folder-open.png') no-repeat center center;
+      background-size: 14px 14px;
+      transform: rotate(0);
+
+      &::after {
+        top: -50%;
+        height: 100%;
+        width: 10px;
+        border-left: 1px dashed #aaa;
+        border-bottom: 1px dashed #aaa;
+      }
+    }
+
+    .el-tree-node__expand-icon.is-leaf {
+      background: url('@/assets/key.png') no-repeat center center;
+      background-size: 14px 14px;
+      visibility: visible;
+
+      &::after {
+        top: -50%;
+        height: 100%;
+        width: 10px;
+        border-left: 1px dashed #aaa;
+        border-bottom: 1px dashed #aaa;
+      }
+    }
+
+    // width: calc(100% - 20px) !important;
+    .el-tree-node__content {
+      border-radius: 4px;
+      font-size: 16px;
+    }
+  }
+}
+
 .scroller {
   &::-webkit-scrollbar {
     width: 8px;

src/assets/key.png

@@ -10,10 +10,12 @@ console.log(route.fullPath)
 <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 class="_ml">
+        <div class="w-full h-10 flex items-center justify-center">
+          <CoDbs></CoDbs>
+        </div>
+        <CoKeys></CoKeys>
       </div>
-      <CoKeys></CoKeys>
     </template>
 
     <template v-slot:after>
@@ -22,3 +24,15 @@ console.log(route.fullPath)
     </template>
   </q-splitter>
 </template>
+<style scoped lang="scss">
+._ml {
+  user-select: none;
+  -webkit-user-select: none;
+
+  * {
+    user-select: none;
+    -webkit-user-select: none;
+
+  }
+}
+</style>