实现窗口的resize

src/components/right-nav.js

@@ -17,8 +17,29 @@ export const controlPanel = reactive({
         if (this.currentIndex === index) {
             this.currentIndex = -1;
         } else {
+            if (horizontalResizer.width < 5) {
+                horizontalResizer.width = 200;
+            }
             this.currentIndex = index;
         }
 
     }
 });
+
+export const horizontalResizer = reactive({
+    active: false,
+    hover: false,
+    width: 200,
+    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,13 +1,22 @@
 <template>
     <div class="netlist-right-nav">
 
-        <div class="netlist-function-panel">
-            <TreeView
-                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="netlist-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="netlist-function-option">
@@ -29,17 +38,16 @@
 </template>
 
 <script setup>
-import { defineComponent, reactive } from 'vue';
+import { computed, defineComponent, onMounted, reactive } 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' });
 
-
 emitter.on('right-nav', index => {
     if (controlPanel.currentIndex === index) {
         controlPanel.currentIndex = -1;
@@ -48,6 +56,18 @@ emitter.on('right-nav', index => {
     }
 });
 
+
+onMounted(() => {
+    document.addEventListener('mouseup', () => {
+        horizontalResizer.active = false;
+        document.removeEventListener('mousemove', resize);
+    });
+});
+
+const resizerWrapperStyle = computed(() => ({
+    width: horizontalResizer.width + 'px'
+}));
+
 </script>
 
 <style>
@@ -64,6 +84,27 @@ emitter.on('right-nav', index => {
     background-color: var(--sidebar);
     height: 100vh;
     box-shadow: var(--gray-box-shadow-1);
+    z-index: 200;
+    width: 100vw;
+}
+
+.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);
 }
 
 .netlist-function-option {
@@ -71,6 +112,7 @@ emitter.on('right-nav', index => {
     height: 100vh;
     background-color: var(--sidebar);
     box-shadow: var(--gray-box-shadow-1);
+    z-index: 201;
 }
 
 .netlist-control-panel-wrapper {

src/components/treeview/index.vue

@@ -2,7 +2,7 @@
     <div class="netlist-tree-view">
         <div class="netlist-module-info">
             <div class="netlist-signal-title">{{ t('module') }}</div>
-            <hr>
+            <hr style="width: 100%;">
             <el-scrollbar height="86vh" style="padding-right: 7px;">
                 <modules
                     v-for="mod of treeviewData.modules"
@@ -15,15 +15,22 @@
 </template>
 
 <script setup>
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted } from 'vue';
 import modules from './modules.vue';
-import { treeviewData } from './tree';
+import { resize, treeviewData, verticalResizer } from './tree';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
 defineComponent({ name: 'tree-view' });
 
+onMounted(() => {
+    document.addEventListener('mouseup', () => {
+        verticalResizer.active = false;
+        document.removeEventListener('mousemove', resize);
+    })
+});
+
 </script>
 
 <style>
@@ -88,6 +95,7 @@ defineComponent({ name: 'tree-view' });
     transition: height .5s ease-in-out;
     user-select: none;
     min-width: 220px;
+    width: 95%;
 }
 
 </style>

src/components/treeview/info.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+import { defineComponent } from 'vue';
+
+defineComponent({ name: 'treeview-item-info' });
+
+
+
+</script>

src/components/treeview/modules.vue

@@ -9,7 +9,11 @@
         </div>
 
         <!-- 渲染这个 module scope 有的组件 -->
-        <div v-if="ports.length > 0 || cells.length > 0" class="netlist-subtree-wrapper">
+        <div
+            v-if="ports.length > 0 || cells.length > 0"
+            v-show="expandManage.expanded"
+            class="netlist-subtree-wrapper"
+        >
             <div style="width: 20px;"></div>
             <div style="width: 100%;">
                 <!-- ports -->
@@ -33,6 +37,7 @@
 
 <script setup>
 /* eslint-disable */
+import { globalLookup } from '@/hook/global';
 import { ModuleView } from '@/hook/render/yosys';
 import { defineComponent, reactive } from 'vue';
 
@@ -77,16 +82,12 @@ function clickItem() {
 }
 
 function getExpandStatus() {
-    if (ports.length === 0 && cells.length === 0) {
-        return false;
-    }    
-
-    return true;
+    return module.name === globalLookup.topModuleName;
 }
 
 const expandManage = reactive({
     expanded: getExpandStatus(),
-    expandTagClass: ports.length === 0 && cells.length === 0 ? '' : 'collapse-tag',
+    expandTagClass: getExpandStatus() ? 'expand-tag' : 'collapse-tag',
     click() {                
         this.expanded = !this.expanded;
         if (this.expandTagClass) {
@@ -146,6 +147,7 @@ function makeIconClass() {
     align-items: center;
     justify-content: space-around;
     display: flex;
+    transition: var(--animation-3s);
 }
 
 .expand-tag {

src/components/treeview/tree.js

@@ -11,3 +11,16 @@ export const treeviewData = reactive({
     modules: []
 });
 
+export const verticalResizer = reactive({
+    height: 500,
+    active: false,
+    hover: false,
+    mousedown() {
+        this.active = true;
+        document.addEventListener('mousemove', resize);
+    }
+});
+
+export function resize(event) {
+    verticalResizer.height = event.clientY;
+}

src/hook/global.js

@@ -11,7 +11,7 @@ export const globalSetting = reactive({
     renderAnimation: true
 });
 
-export const globalLookup = {
+export const globalLookup = reactive({
     /**
      * @type {SkinManager}
      */
@@ -36,8 +36,14 @@ export const globalLookup = {
     /**
      * @description 当前选择的实体，可以是 wire，也可以是 cell
      */
-    currentSelectEntity: undefined
-};
+    currentSelectEntity: undefined,
+
+    /**
+     * @description 右侧 treeview 选择的需要展示数据的实体
+     * @type {Record<string, string>}
+     */
+    currentSelectEntityInfo: {}
+});
 
 function loadSetting() {
     const settingString = localStorage.getItem('setting')