From 75421ea39f0c3bcd0838a65d98e87bea39d58621 Mon Sep 17 00:00:00 2001
From: Kirigaya <1193466151@qq.com>
Date: Wed, 28 Feb 2024 15:35:10 +0800
Subject: [PATCH] optimise search | list

---
 public/vcd.css                      | 14 ++++++--
 src/components/sidebar.vue          |  2 +-
 src/components/treeview/index.vue   | 22 +++++++-----
 src/components/treeview/modules.vue |  4 +--
 src/components/treeview/search.vue  | 54 +++++++++++++++++++----------
 src/components/treeview/signals.vue | 10 ++++--
 6 files changed, 73 insertions(+), 33 deletions(-)

diff --git a/public/vcd.css b/public/vcd.css
index af18a6c..941f614 100644
--- a/public/vcd.css
+++ b/public/vcd.css
@@ -21,7 +21,7 @@ body::-webkit-scrollbar {
 }
 
 ::-webkit-scrollbar {
-    width: 15px;
+    width: 12px;
 }
 
 ::-webkit-scrollbar-track {
@@ -29,7 +29,17 @@ body::-webkit-scrollbar {
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #3D4450;
+    background: var(--scrollbar-background);
+    border-radius: .3em;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-hover);
+    border-radius: .3em;
+}
+
+::-webkit-scrollbar-thumb:active {
+    background: var(--scrollbar-active);
     border-radius: .3em;
 }
 
diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
index 5c320e4..0b85e8c 100644
--- a/src/components/sidebar.vue
+++ b/src/components/sidebar.vue
@@ -55,7 +55,7 @@ export default {
     margin: 10px;
     padding: 10px 25px;
     background-color: var(--color-deepPurple);
-    border-radius: 0 0 1.5em 1.5em;
+    border-radius: 0 0 .8em .8em;
     color: var(--sidebar-item-text);
     cursor: pointer;
     display: flex;
diff --git a/src/components/treeview/index.vue b/src/components/treeview/index.vue
index 8ed46c0..a0f0954 100644
--- a/src/components/treeview/index.vue
+++ b/src/components/treeview/index.vue
@@ -7,10 +7,13 @@
         <div class="vcd-module-info">
             <div>{{ t('module') }}</div>
             <hr>
-            <Modules v-for="mod of props.topModules"
-                    :key="mod.name"
-                    :module="mod"
-            ></Modules>
+            <div class="vcd-module-display-wrapper">
+                <Modules v-for="mod of props.topModules"
+                        :key="mod.name"
+                        :module="mod"
+                ></Modules>
+            </div>
+
         </div>
         <div class="vcd-module-wires">
             <Signals></Signals>
@@ -52,15 +55,16 @@ export default {
 
 <style>
 .vcd-module-info {
-    height: 80vh;
     width: 300px;
     padding-right: 5px;
-    overflow-x: scroll;
 }
 
 .vcd-module-wires {
-    height: 80vh;
     width: 300px;
+}
+
+.vcd-module-display-wrapper {
+    height: 80vh;
     overflow-x: scroll;
 }
 
@@ -77,7 +81,9 @@ export default {
 .vcd-module-wrapper {
     flex: 1;
     display: flex;
-    overflow: scroll;
+    z-index: 5;
+    max-height: 98vh;
+    /* overflow: scroll; */
     transition: flex .5s ease-in-out;
 }
 
diff --git a/src/components/treeview/modules.vue b/src/components/treeview/modules.vue
index 63ebe28..3132ca0 100644
--- a/src/components/treeview/modules.vue
+++ b/src/components/treeview/modules.vue
@@ -104,12 +104,12 @@ export default {
 }
 
 .vcd-treeview-item:hover {
-    background-color: var(--vscode-button-hoverBackground);
+    background-color: var(--sidebar-item-selected);
     border-radius: .3em;
 }
 
 .vcd-treeview-selected {
-    background-color: var(--vscode-button-hoverBackground);
+    background-color: var(--button-active) !important;
     border-radius: .3em;
 }
 
diff --git a/src/components/treeview/search.vue b/src/components/treeview/search.vue
index bedccd4..0a6566e 100644
--- a/src/components/treeview/search.vue
+++ b/src/components/treeview/search.vue
@@ -9,19 +9,22 @@
                 @input="safeSearch"
             />
         </div>
-        <div class="search-result" v-if="searchManage.content.trim().length > 0">
-            <div v-if="searchManage.searchResult.length > 0">
-                <div class="search-result-item" 
-                    v-for="(searchResult, index) in searchManage.searchResult"
-                    :key="index"
-                    :class="globalLookup.currentWires.has(searchResult.module) ? 'vcd-treeview-selected' : ''"
-                    v-html="searchResult.htmlString"
-                    @click="clickItem(searchResult.module)">
+        <div class="search-result-wrapper" v-if="searchManage.content.trim().length > 0">
+            <div class="search-result">
+                <div v-if="searchManage.searchResult.length > 0">
+                    <div class="search-result-item" 
+                        v-for="(searchResult, index) in searchManage.searchResult"
+                        :key="index"
+                        :class="globalLookup.currentWires.has(searchResult.module) ? 'vcd-treeview-selected' : ''"
+                        v-html="searchResult.htmlString"
+                        @click="clickItem(searchResult.module)">
+                    </div>
+                </div>
+                <div v-else>
+                    {{ t('search-nothing') }}
                 </div>
             </div>
-            <div v-else>
-                {{ t('search-nothing') }}
-            </div>
+
         </div>
     </div>
 </template>
@@ -29,7 +32,7 @@
 <script>
 import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { globalSetting, globalLookup } from '@/hook/global';
+import { globalSetting, globalLookup, emitter } from '@/hook/global';
 import { debounceWrapper, makeSearchResultItem } from '@/hook/utils';
 
 export default {
@@ -63,11 +66,15 @@ export default {
 
                 const searchResultItem = makeSearchResultItem(searchString, p, searchRule, caseSensitivity, displayParentOnly);
                 if (searchResultItem) {
-                    searchManage.searchResult.push(searchResultItem);
+                    emitter.emit('signal-search', searchResultItem);
                 }
             }
         }
 
+        emitter.on('signal-search', searchResultItem => {
+            searchManage.searchResult.push(searchResultItem);
+        });
+
         function clickItem(signal) {
             if (!signal.link) {
                 return;
@@ -100,12 +107,23 @@ export default {
     transition: flex .5s ease-in-out;
 }
 
-.search-result {
-    overflow-x: hidden;
-    overflow-y: scroll;
+.search-result-wrapper {
     padding: 10px;
     margin: 10px;
-    max-height: 40vh;
+    background-color: var(--sidebar);
+    border: 1.5px solid var(--main-color);
+    color: var(--sidebar-item-text);
+    border-radius: .5em;
+    min-width: 500px;
+    position: absolute;
+    z-index: 10;
+}
+
+.search-result {
+    overflow-x: scroll;
+    overflow-y: scroll;
+    max-height: 80vh;
+    padding-right: 5px;
 }
 
 .search-result-item {
@@ -118,7 +136,7 @@ export default {
 }
 
 .search-result-item:hover {
-    background-color: var(--vscode-button-hoverBackground);
+    background-color: var(--sidebar-item-selected);
     border-radius: .3em;
 }
 
diff --git a/src/components/treeview/signals.vue b/src/components/treeview/signals.vue
index 7feed3c..d35d2e0 100644
--- a/src/components/treeview/signals.vue
+++ b/src/components/treeview/signals.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div>{{ t('signal') }}({{signals.content.length}})</div>
+        <div class="vcd-signal-title">{{ t('signal') }}({{signals.content.length}})</div>
         <hr>
         <div class="vcd-signal-signals-display">
             <div v-for="(signal, index) in signals.content" :key="index"
@@ -65,6 +65,10 @@ export default {
 </script>
 
 <style>
+.vcd-signal-title {
+    margin-left: 5px;
+}
+
 .icon-wave-square {
     color: var(--signal-default-color);
 }
@@ -72,6 +76,8 @@ export default {
 .vcd-signal-signals-display {
     color: var(--sidebar-item-text);
     padding: 0px 8px;
+    height: 80vh;
+    overflow-x: scroll;
 }
 
 .vcd-signal-signal-item {
@@ -90,7 +96,7 @@ export default {
 }
 
 .vcd-signal-signal-item:hover {
-    background-color: var(--vscode-button-hoverBackground);
+    background-color: var(--sidebar-item-selected);
     border-radius: .3em;
 }