支持右侧面板拉伸

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);

public/vcd.css

@@ -41,8 +41,8 @@ body::-webkit-scrollbar {
 
 * hr {
     border: none;
-    background-color: var(--vscode-focusBorder);
+    background-color: var(--main-color);
-    height: 2px;
+    height: 1.5px;
     width: 95%;
 }
 /* 
@@ -118,8 +118,8 @@ a {
 .digital-ide-icon.big {
     background-image: url(./icon.svg);
     background-size: 100%;
-    height: 200px;
+    height: 150px;
-    width: 200px;
+    width: 150px;
 }
 
 .el-radio-button__original-radio:disabled:checked+.el-radio-button__inner {

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({

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;
 }
 

src/components/right-nav.js

@@ -19,6 +19,9 @@ export const controlPanel = reactive({
         if (this.currentIndex === index) {
             this.currentIndex = -1;
         } else {
+            if (horizontalResizer.width < 5) {
+                horizontalResizer.width = 435;
+            }
             this.currentIndex = index;
         }
 
@@ -26,3 +29,21 @@ export const controlPanel = reactive({
         saveViewApi({ rightNavIndex: true });
     }
 });
+
+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;
+    }
+}

src/components/right-nav.vue

@@ -1,14 +1,25 @@
 <template>
     <div class="vcd-right-nav">
 
+        <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 :topModules="props.topModules"
+                    <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">
             <div class="vcd-control-panel-wrapper">
@@ -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 {

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>
                         <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,7 +121,8 @@
 
                 <div class="setting-option">
                     <span class="option-title" style="width: 100px;">{{ t('wavecolor') }}</span>
-                    <div style="width: 120px">
+                    <div class="option-group">
+                        <div style="width: 120px;">
                             <el-select
                                 v-model="wavecolor.currentOptionIndex"
                                 collapse-tags
@@ -136,15 +138,16 @@
                             v-model="wavecolor.colors[wavecolor.currentOptionIndex]"
                             show-alpha
                             :predefine="predefinedColors"
-                        size="large"
                         />
                     </div>
+                </div>
 
                 <br>
 
                 <div class="setting-option">
                     <span class="option-title" style="width: 100px;">{{ t('setting.appearance.pivot-color') }}</span>
-                    <div style="width: 120px">
+                    <div class="option-group">
+                        <div style="width: 120px;">
                             <el-select
                                 v-model="pivotColor.currentOptionIndex"
                                 collapse-tags
@@ -160,10 +163,10 @@
                             v-model="pivotColor.colors[pivotColor.currentOptionIndex]"
                             show-alpha
                             :predefine="predefinedColors"
-                        size="large"
                         />
                     </div>
                 </div>
+            </div>
 
             <hr>
 
@@ -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;
 }

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>
+<script setup>
-import { onMounted } from 'vue';
+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 {
+defineComponent({ name: 'tree-view' });
-    name: 'tree-view',
+const { t } = useI18n();
-    components: {
-        Modules,
-        Signals,
-        TreeViewSearch
-    },
-    props: {
-        topModules: Array
-    },
-    setup(props) {
-        const { t } = useI18n();
 
-
-        return {
-            props,
-            t
-        }
-    }
-}
 </script>
 
 <style>
 .vcd-module-info {
-    width: fit-content;
+    width: 200px;
     padding-right: 5px;
 }
 

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>

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)');
     

src/hook/global.js

@@ -226,3 +226,7 @@ function getCurrentWiresRenderView() {
     return globalLookup.currentWiresRenderView;
 }
 
+export const VcdInfo = reactive({
+    topModules: [],
+    values: [],
+});