支持右侧面板拉伸

2024-12-28 16:18:50 +08:00 · 2024-12-28 16:18:50 +08:00 · 514772d549
commit 514772d549
parent d257fb5a89
12 changed files with 181 additions and 97 deletions
--- 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);
--- a/public/test.view
+++ b/public/test.view
--- 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 {
--- 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({
--- 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;
 }

--- 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 });
    }
-});
+});
+
+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;
+    }
+}
--- 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 {
--- 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;
 }
--- 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;
 }

--- 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>
--- 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)');
    
--- 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: [],
+});