From 514772d549855942d2ced81873cc6a47e4eaae56 Mon Sep 17 00:00:00 2001
From: Kirigaya <1193466151@qq.com>
Date: Sat, 28 Dec 2024 16:18:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=8F=B3=E4=BE=A7=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E6=8B=89=E4=BC=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/animation.css               |  16 +++++
 public/test.view                   | Bin 3445 -> 2665 bytes
 public/vcd.css                     |   8 +--
 src/App.vue                        |  10 +--
 src/components/about/index.vue     |   4 +-
 src/components/right-nav.js        |  23 +++++-
 src/components/right-nav.vue       |  62 ++++++++++++++---
 src/components/setting/index.vue   | 108 +++++++++++++++++------------
 src/components/treeview/index.vue  |  30 ++------
 src/components/treeview/search.vue |   7 +-
 src/hook/css.js                    |   6 +-
 src/hook/global.js                 |   4 ++
 12 files changed, 181 insertions(+), 97 deletions(-)

diff --git a/public/animation.css b/public/animation.css
index 882cb60..447f739 100644
--- a/public/animation.css
+++ b/public/animation.css
@@ -77,6 +77,22 @@
     opacity: 0%;
 }
 
+.right-nav-enter-active,
+.right-nav-leave-active {
+    transition: all .5s ease-out;
+    -moz-transition: all .5s ease-out;
+    -webkit-transition: all .5s ease-out;
+}
+.right-nav-enter-from {
+    position: relative;
+    transform: translateX(-100px);
+    opacity: 0%;
+}
+.right-nav-leave-to {
+    transform: translateX(-100px);
+    opacity: 0%;
+}
+
 .collapse-from-top-enter-active,
 .collapse-from-top-leave-active {
     transition: var(--animation-3s);
diff --git a/public/test.view b/public/test.view
index baf595f262c8858d2385d77d0738b96c69deaecb..f7381997aa0fb901b1db36dad4862b9c1e5b9d13 100644
GIT binary patch
delta 343
zcmew=^-_d4lZ%0Yr981LwV0uTX|oiEBO|vb0|Nt7USe)4gWP0BF8Rs(xfFO!8Bj&#
zm{Rj5AK;Q_G@JZ@OKtKFE_Fup$#NVztYwKgnJGXSIW7j4vdq--Vus1A8+k7>>8t{p
z%3Pe8o|l;8nU|K&-~qRV9mvW}&5bWFVqnV2%*%#Y%UCq|9AmtmDFb1Rsd-2m!7c;p
z1iEY?>jp;iiGr#SM@_WWfV%D+W1KqBEhUL1sSKrz3=9Hk`FSNCshQ~+B@7}!#|V^X
zrj%qbaIi8kY+k|5%P3{=Kz%v$N?r%X{G61C;N--dR0gQf<nugQOlr)NfAf?wGEUyg
I9>d500R0wRIsgCw

delta 502
zcmX|-KTpC?6vgjr3zUWu1||j&RHC?u34e?W#z9TQ#YByRq}l>iD5iZ-bTV<&M4M+!
z{16%myWhb<Hw}v>jt*`PzSjcVz4!gjdFS5m=x<DJ%K$=0*K7+O0{tuQg(Hu`q=dV`
zHFV<`666QP0&T^_72GAyfqjn8kw1P4nItL9@+P*}aDmUm69Dj*UNe-&x>0SxCha*x
zX=)(Rs;M<AwyI!d=$oXzaoL+hEd5M_3DWcJpaL~dh>W(dc|hL%=@2WxV+5BeGKReR
z9kl4ux?$mpsjHMuMMlj~Au<J*ohPgOw7~u+C;Uvv4dPjzQ(&8frM;kFD;>>(D&Lcr
z5kV-!;jS}Cpd9%`X}@~{)A>lsdDs}Q=C0v$*I;OYq8Wh&W?hkXWtx%7#ZfFe4`=70
zJa$O2154gBi{%XBbM%f_!5W+*fJn7v;5ALJ)iFe=3fa1f>$Cv4xxX#-S40`b-oBQu
fFT>#yYBki|twW`u!Ei*5f*I~YAa}vG&lUXx#f_T*

diff --git a/public/vcd.css b/public/vcd.css
index 392e535..7fe9979 100644
--- a/public/vcd.css
+++ b/public/vcd.css
@@ -41,8 +41,8 @@ body::-webkit-scrollbar {
 
 * hr {
     border: none;
-    background-color: var(--vscode-focusBorder);
-    height: 2px;
+    background-color: var(--main-color);
+    height: 1.5px;
     width: 95%;
 }
 /* 
@@ -118,8 +118,8 @@ a {
 .digital-ide-icon.big {
     background-image: url(./icon.svg);
     background-size: 100%;
-    height: 200px;
-    width: 200px;
+    height: 150px;
+    width: 150px;
 }
 
 .el-radio-button__original-radio:disabled:checked+.el-radio-button__inner {
diff --git a/src/App.vue b/src/App.vue
index 2c3f0b8..7342641 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,16 +10,16 @@
 
     <!-- 显示当前信号树形关系 -->
     <!-- 右侧工具合集 -->
-    <RightNav :topModules="VcdInfo.topModules"></RightNav>
+    <RightNav></RightNav>
 </template>
 
 <script setup>
-import { onMounted, reactive, watch } from 'vue';
+import { onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { ElLoading } from 'element-plus';
 
-import { emitter, globalLookup, globalSetting } from '@/hook/global';
+import { emitter, globalLookup, globalSetting, VcdInfo } from '@/hook/global';
 import { makeWaveView } from '@/hook/render';
 import { getCrossOriginWorkerURL } from '@/hook/network';
 
@@ -43,10 +43,6 @@ watch(
     { deep: true }
 );
 
-const VcdInfo = reactive({
-    topModules: [],
-    values: [],
-});
 
 onMounted(async () => {
     const loading = new ElLoading.service({
diff --git a/src/components/about/index.vue b/src/components/about/index.vue
index 3003ab2..fbb4ed8 100644
--- a/src/components/about/index.vue
+++ b/src/components/about/index.vue
@@ -85,13 +85,10 @@ export default {
 <style>
 .about-wrapper {
     margin-top: 10px;
-    width: 450px;
 }
 
 .version-caption {
     display: flex;
-    width: 100% !important;
-    font-size: 1.1rem;
     padding: 10px;
     margin: 10px;
     align-items: center;
@@ -133,6 +130,7 @@ export default {
     justify-content: space-between;
     padding: 5px;
     margin: 5px;
+    width: 363px;
     font-size: 0.9rem;
 }
 
diff --git a/src/components/right-nav.js b/src/components/right-nav.js
index 39f22bf..b03e213 100644
--- a/src/components/right-nav.js
+++ b/src/components/right-nav.js
@@ -19,10 +19,31 @@ export const controlPanel = reactive({
         if (this.currentIndex === index) {
             this.currentIndex = -1;
         } else {
+            if (horizontalResizer.width < 5) {
+                horizontalResizer.width = 435;
+            }
             this.currentIndex = index;
         }
 
         // 保存
         saveViewApi({ rightNavIndex: true });
     }
-});
\ No newline at end of file
+});
+
+export const horizontalResizer = reactive({
+    active: false,
+    hover: false,
+    width: 435,
+    mousedown() {
+        this.active = true;
+        document.addEventListener('mousemove', resize);
+    }
+});
+
+export function resize(event) {
+    // 50 是 --right-nav-width
+    const computedWidth = window.innerWidth - event.clientX - 50;
+    if (computedWidth >= 0 && computedWidth <= 2000) {
+        horizontalResizer.width = computedWidth;
+    }
+}
\ No newline at end of file
diff --git a/src/components/right-nav.vue b/src/components/right-nav.vue
index cbda8f7..67a3404 100644
--- a/src/components/right-nav.vue
+++ b/src/components/right-nav.vue
@@ -1,13 +1,24 @@
 <template>
     <div class="vcd-right-nav">
 
-        <div class="vcd-function-panel">
-            <TreeView :topModules="props.topModules"
-                v-show="controlPanel.currentIndex === 0"></TreeView>
-            <Setting
-                v-show="controlPanel.currentIndex === 1"></Setting>
-            <About
-                v-show="controlPanel.currentIndex === 2"></About>
+        <div class="horizontal-scalable-wrapper" :style="resizerWrapperStyle"
+            v-show="controlPanel.currentIndex > -1">
+            <div class="horizontal-resizer"
+                @mousedown="horizontalResizer.mousedown()"
+                @mouseenter="horizontalResizer.hover = true"
+                @mouseleave="horizontalResizer.hover = false"
+                :class="{ 'active': horizontalResizer.active || horizontalResizer.hover }"
+            ></div>
+            <div class="vcd-function-panel">
+                    <TreeView
+                    v-show="controlPanel.currentIndex === 0"></TreeView>
+
+                    <Setting
+                    v-show="controlPanel.currentIndex === 1"></Setting>
+                
+                    <About
+                    v-show="controlPanel.currentIndex === 2"></About>
+            </div>
         </div>
 
         <div class="vcd-function-option">
@@ -29,13 +40,13 @@
 </template>
 
 <script setup>
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, onMounted, computed } from 'vue';
 
 import TreeView from '@/components/treeview';
 import Setting from '@/components/setting';
 import About from '@/components/about';
 import { emitter } from '@/hook/global';
-import { controlPanel } from './right-nav';
+import { controlPanel, horizontalResizer, resize } from './right-nav';
 
 defineComponent({ name: 'right-nav' });
 const props = defineProps({
@@ -45,6 +56,12 @@ const props = defineProps({
     }
 });
 
+onMounted(() => {
+    document.addEventListener('mouseup', () => {
+        horizontalResizer.active = false;
+        document.removeEventListener('mousemove', resize);
+    });
+});
 
 emitter.on('right-nav', index => {
     if (controlPanel.currentIndex === index) {
@@ -54,6 +71,11 @@ emitter.on('right-nav', index => {
     }
 });
 
+const resizerWrapperStyle = computed(() => ({
+    width: horizontalResizer.width + 'px'
+}));
+
+
 </script>
 
 <style>
@@ -69,14 +91,36 @@ emitter.on('right-nav', index => {
     display: flex;
     background-color: var(--sidebar);
     height: 100vh;
+    z-index: 200;
+    user-select: none;
     box-shadow: var(--gray-box-shadow-1);
 }
 
+.horizontal-scalable-wrapper {
+    position: relative;
+}
+
+.horizontal-resizer {
+    position: absolute;
+    left: 0;
+    width: 2px;
+    height: 100%;
+    cursor: ew-resize;
+    transition: var(--animation-5s);
+    z-index: 201;
+}
+
+.horizontal-resizer.active {
+    background-color: var(--main-color);
+    transition: var(--animation-5s);
+}
+
 .vcd-function-option {
     width: fit-content;
     height: 100vh;
     background-color: var(--sidebar);
     box-shadow: var(--gray-box-shadow-1);
+    z-index: 400;
 }
 
 .vcd-control-panel-wrapper {
diff --git a/src/components/setting/index.vue b/src/components/setting/index.vue
index bf4c7bc..bc73efa 100644
--- a/src/components/setting/index.vue
+++ b/src/components/setting/index.vue
@@ -4,9 +4,11 @@
             <div class="setting-section">
                 <h2>{{ t('general-setting') }}</h2>
                 <div class="setting-option" style="width: 220px;">
-                    <span class="iconfont icon-i18n"></span>
-                    &ensp;
-                    <span class="option-title">{{ t('language-setting') }}</span>
+                    <span>
+                        <span class="iconfont icon-i18n"></span>
+                        &ensp;
+                        <span class="option-title">{{ t('language-setting') }}</span>
+                    </span>
                     <div style="width: 100px;">
                         <el-select
                             name="language-setting"
@@ -58,7 +60,6 @@
                         </span>
                     <el-switch
                         v-model="globalSetting.renderAnimation"
-                        size="default"
                         active-text="ON"
                         inactive-text="OFF"    
                     />
@@ -120,48 +121,50 @@
 
                 <div class="setting-option">
                     <span class="option-title" style="width: 100px;">{{ t('wavecolor') }}</span>
-                    <div style="width: 120px">
-                        <el-select
-                            v-model="wavecolor.currentOptionIndex"
-                            collapse-tags
-                            collapse-tags-tooltip
-                            placeholder="Select"
-                        >
-                            <el-option v-for="option in wavecolor.options" :key="option.value"
-                                :label="option.label" :value="option.value" />
-                        </el-select>
+                    <div class="option-group">
+                        <div style="width: 120px;">
+                            <el-select
+                                v-model="wavecolor.currentOptionIndex"
+                                collapse-tags
+                                collapse-tags-tooltip
+                                placeholder="Select"
+                            >
+                                <el-option v-for="option in wavecolor.options" :key="option.value"
+                                    :label="option.label" :value="option.value" />
+                            </el-select>
+                        </div>
+                        <div style="height: 20px; width: 20px;"></div>
+                        <el-color-picker
+                            v-model="wavecolor.colors[wavecolor.currentOptionIndex]"
+                            show-alpha
+                            :predefine="predefinedColors"
+                        />
                     </div>
-                    <div style="height: 20px; width: 20px;"></div>
-                    <el-color-picker
-                        v-model="wavecolor.colors[wavecolor.currentOptionIndex]"
-                        show-alpha
-                        :predefine="predefinedColors"
-                        size="large"
-                    />
                 </div>
 
                 <br>
 
                 <div class="setting-option">
                     <span class="option-title" style="width: 100px;">{{ t('setting.appearance.pivot-color') }}</span>
-                    <div style="width: 120px">
-                        <el-select
-                            v-model="pivotColor.currentOptionIndex"
-                            collapse-tags
-                            collapse-tags-tooltip
-                            placeholder="Select"
-                        >
-                            <el-option v-for="option in pivotColor.options" :key="option.value"
-                                :label="option.label" :value="option.value" />
-                        </el-select>
+                    <div class="option-group">
+                        <div style="width: 120px;">
+                            <el-select
+                                v-model="pivotColor.currentOptionIndex"
+                                collapse-tags
+                                collapse-tags-tooltip
+                                placeholder="Select"
+                            >
+                                <el-option v-for="option in pivotColor.options" :key="option.value"
+                                    :label="option.label" :value="option.value" />
+                            </el-select>
+                        </div>
+                        <div style="height: 20px; width: 20px;"></div>
+                        <el-color-picker
+                            v-model="pivotColor.colors[pivotColor.currentOptionIndex]"
+                            show-alpha
+                            :predefine="predefinedColors"
+                        />
                     </div>
-                    <div style="height: 20px; width: 20px;"></div>
-                    <el-color-picker
-                        v-model="pivotColor.colors[pivotColor.currentOptionIndex]"
-                        show-alpha
-                        :predefine="predefinedColors"
-                        size="large"
-                    />
                 </div>
             </div>
 
@@ -171,14 +174,22 @@
                 <h2>{{ t('search-setting') }}</h2>
                 <div class="setting-option">
                     <span class="option-title">{{ t('search-case-sensitivity') }}</span>
-                    <el-switch v-model="globalSetting.caseSensitivity" size="default"/>
+                    <el-switch
+                        v-model="globalSetting.caseSensitivity"
+                        active-text="ON"
+                        inactive-text="OFF"  
+                    />
                 </div>
 
                 <br>
 
                 <div class="setting-option">
                     <span class="option-title">{{ t('search-display-parent-only') }}</span>
-                    <el-switch v-model="globalSetting.displayParentOnly" size="default"/>
+                    <el-switch
+                        v-model="globalSetting.displayParentOnly"
+                        active-text="ON"
+                        inactive-text="OFF"
+                    />
                 </div>
 
                 <br>
@@ -188,7 +199,6 @@
                     <div style="width: 150px;">
                         <el-select
                             v-model="globalSetting.searchScope"
-                            size="large"
                             multiple
                             collapse-tags
                             collapse-tags-tooltip
@@ -403,23 +413,35 @@ const safeModifySignalTrackHeight = debounceWrapper(modifySignalTrackHeight, 200
 }
 
 .setting-option {
-    margin: 5px;
+    margin: 3px;
     padding: 8px 12px;
     height: 40px;
-    width: fit-content;
+    width: 360px !important;
     border-radius: .5em;
     background-color: var(--background);
     display: flex;
     align-items: center;
+    justify-content: space-between;
     font-size: 0.9rem;
 }
 
+.option-group {
+    display: flex;
+    width: fit-content;
+}
+
 .option-title {
+    font-size: 0.8rem;
     min-width: 80px;
     margin-right: 12px;
     user-select: none;
 }
 
+.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner,
+.el-checkbox-button__inner {
+    font-size: 0.8rem !important;
+}
+
 .el-slider__button {
     background-color: var(--background) !important;
 }
diff --git a/src/components/treeview/index.vue b/src/components/treeview/index.vue
index 4d5052a..d6deca4 100644
--- a/src/components/treeview/index.vue
+++ b/src/components/treeview/index.vue
@@ -7,7 +7,7 @@
             <div class="vcd-signal-title">{{ t('module') }}</div>
             <hr>
             <el-scrollbar height="86vh" style="padding-right: 7px;">
-                <Modules v-for="mod of props.topModules"
+                <Modules v-for="mod of VcdInfo.topModules"
                         :key="mod.name"
                         :module="mod"
                 ></Modules>
@@ -20,40 +20,24 @@
 </div>
 </template>
 
-<script>
-import { onMounted } from 'vue';
+<script setup>
+import { defineComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import TreeViewSearch from '@/components/treeview/search.vue';
 import Modules from '@/components/treeview/modules.vue';
 import Signals from '@/components/treeview/signals.vue';
 
+import { VcdInfo } from '@/hook/global';
 
-export default {
-    name: 'tree-view',
-    components: {
-        Modules,
-        Signals,
-        TreeViewSearch
-    },
-    props: {
-        topModules: Array
-    },
-    setup(props) {
-        const { t } = useI18n();
+defineComponent({ name: 'tree-view' });
+const { t } = useI18n();
 
-
-        return {
-            props,
-            t
-        }
-    }
-}
 </script>
 
 <style>
 .vcd-module-info {
-    width: fit-content;
+    width: 200px;
     padding-right: 5px;
 }
 
diff --git a/src/components/treeview/search.vue b/src/components/treeview/search.vue
index f336563..3d24ced 100644
--- a/src/components/treeview/search.vue
+++ b/src/components/treeview/search.vue
@@ -19,7 +19,6 @@
                 id="search-result-wrapper"
             >
                 <el-scrollbar
-                    height="50vh"
                     width="600px"
                     class="search-result"
                     @mouseenter="searchManage.mouseOnResult = true"
@@ -171,17 +170,17 @@ const safeSearch = debounceWrapper(search, 200);
 }
 
 .search-nothing {
-    height: 40vh;
+    height: 20vh;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    font-size: 1.1rem;
+    font-size: 0.9rem;
 }
 
 .search-nothing .iconfont {
-    font-size: 120px;
+    font-size: 100px;
 }
 
 </style>
\ No newline at end of file
diff --git a/src/hook/css.js b/src/hook/css.js
index fc76cc6..39631c6 100644
--- a/src/hook/css.js
+++ b/src/hook/css.js
@@ -8,7 +8,7 @@ export function setDefaultCss() {
     document.body.style.setProperty('--el-color-primary-light-3', 'var(--main-color)');
     document.body.style.setProperty('--el-text-color-secondary', 'var(--foreground)');
     document.body.style.setProperty('--el-text-color-regular', 'var(--foreground)');
-    document.body.style.setProperty('--el-border-color', 'var(--vscode-focusBorder)');
+    document.body.style.setProperty('--el-border-color', 'var(--main-color)');
     document.body.style.setProperty('--el-fill-color-blank', 'var(--sidebar)');
     document.body.style.setProperty('--el-fill-color-light', 'var(--vscode-button-hoverBackground)');
     document.body.style.setProperty('--el-switch-on-color', 'var(--main-color)');
@@ -16,9 +16,9 @@ export function setDefaultCss() {
     document.body.style.setProperty('--el-border-color-light', 'var(--sidebar)');
     document.body.style.setProperty('--el-border-color-lighter', 'var(--sidebar)');
     document.body.style.setProperty('--el-bg-color-overlay', 'var(--sidebar)');
-    document.body.style.setProperty('--el-color-info-light-9', 'var(--vscode-focusBorder)');
+    document.body.style.setProperty('--el-color-info-light-9', 'var(--main-color)');
     document.body.style.setProperty('--el-color-info', 'var(--foreground)');
-    document.body.style.setProperty('--el-color-info-light-8', 'var(--vscode-focusBorder)');
+    document.body.style.setProperty('--el-color-info-light-8', 'var(--main-color)');
     document.body.style.setProperty('--el-fill-color-light', 'var(--sidebar-item-selected)');
     // document.body.style.setProperty('--el-color-white', 'var(--background)');
     
diff --git a/src/hook/global.js b/src/hook/global.js
index 3aa5772..adf66a2 100644
--- a/src/hook/global.js
+++ b/src/hook/global.js
@@ -226,3 +226,7 @@ function getCurrentWiresRenderView() {
     return globalLookup.currentWiresRenderView;
 }
 
+export const VcdInfo = reactive({
+    topModules: [],
+    values: [],
+});