增加左上角菜单

public/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4440655 */
-  src: url('iconfont.woff2?t=1725251353876') format('woff2');
+  src: url('iconfont.woff2?t=1729428865198') format('woff2');
 }
 
 .iconfont {
@@ -11,6 +11,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-menu:before {
+  content: "\e607";
+}
+
 .icon-clear:before {
   content: "\e619";
 }

public/vcd.css

@@ -10,6 +10,7 @@
     --sidebar-padding: 10px;
     --sidebar-item-margin: 5px;
     --toolbar-height: 50px;
+    --toolbar-item-height: 32px;
     --vcd-render-padding: 30px;
     --vcd-value-font-family: "Cascadia code", monospace;
     /* 需要满足如下公式 --time-scale-height + --sidebar-padding = --vcd-render-padding + canvas预留 高度 */

src/components/pivot/index.vue

@@ -41,6 +41,8 @@ import { globalLookup } from '@/hook/global';
 import MovingPivotVue from './moving-pivot.vue';
 import { UserPivotCtxShows } from './pivot-view';
 import RelativeAxis from './relative-axis.vue';
+import { contextmenu, groupcontextmenu } from '../sidebar/handle-contextmenu';
+import { fileMenuContext } from '../toolbar/file-menu/control';
 
 
 defineComponent({ name: 'main-render' });
@@ -56,6 +58,11 @@ function onMousedown() {
     for (const id of UserPivotCtxShows.keys()) {
         UserPivotCtxShows.set(id, false);
     }
+
+    // 关闭所有的子菜单
+    contextmenu.show = false;
+    groupcontextmenu.show = false;
+    fileMenuContext.show = false;
 }
 
 function onMouseup() {

src/components/toolbar/current-status.vue

@@ -30,8 +30,8 @@ const selectedColors = computed(() => {
     color: var(--sidebar);
     border-radius: .5em;
     cursor: pointer;
-    height: 32px;
-    width: 32px;
+    height: var(--toolbar-item-height);
+    width: var(--toolbar-item-height);
     background-color: var(--main-color);
     display: flex;
     align-items: center;

src/components/toolbar/cursor-location.vue

@@ -130,7 +130,7 @@ function confirmClearLocation() {
 .location {
     display: flex;
     align-items: center;
-    height: 32px;
+    height: var(--toolbar-item-height);
     padding: 1px 5px;
     background-color: var(--sidebar);
     border-radius: .5em;
@@ -142,9 +142,9 @@ function confirmClearLocation() {
     align-items: center;
     justify-content: center;
     margin-left: 3px;
-    height: 32px;
+    height: var(--toolbar-item-height);
     font-weight: 800;
-    width: 32px;
+    width: var(--toolbar-item-height);
     cursor: pointer;
     transition: var(--animation-3s);
 }

src/components/toolbar/file-menu/control.js

@@ -0,0 +1,5 @@
+import { reactive } from "vue";
+
+export const fileMenuContext = reactive({
+    show: false,
+});

src/components/toolbar/file-menu/index.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="file-menu">
+        <div>
+            <span class="iconfont icon-menu"></span>
+        </div>
+
+        <!-- 菜单列表 -->
+        <transition name="collapse-from-top" mode="out-in">
+            <div class="list" v-show="fileMenuContext.show">
+                <Save></Save>
+                <SaveAs></SaveAs>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script setup>
+import { defineComponent } from 'vue';
+import { fileMenuContext } from './control';
+import Save from './save.vue';
+import SaveAs from './save-as.vue';
+
+defineComponent({ name: 'file-menu' });
+
+</script>
+
+<style>
+.file-menu {
+    height: var(--toolbar-item-height);
+    width: var(--toolbar-item-height);
+    border-radius: .5em;
+    cursor: pointer;
+    background-color: var(--sidebar);
+    position: relative;
+}
+
+.file-menu .list {
+    position: absolute;
+    top: 10px;
+    left: 0;
+    border-radius: .5em;
+    box-shadow: 0 0 10px 1px rgb(16, 16, 16);
+    background-color: var(--sidebar);
+    border: solid 1px var(--sidebar-border);
+    z-index: 200;
+    display: flex;
+    flex-direction: column;
+}
+
+</style>

src/components/toolbar/file-menu/save-as.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        <div>save as</div>
+    </div>
+</template>
+
+<script setup>
+import { defineComponent } from 'vue';
+
+defineComponent({ name: 'save-as' });
+
+
+</script>

src/components/toolbar/file-menu/save.vue

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

src/components/toolbar/index.vue

@@ -4,7 +4,7 @@
         @mouseenter="onEnter()"
     >
         <div class="toolbar-body">
-            <CurrentStatus></CurrentStatus>
+            <FileMenu></FileMenu>
             &emsp;
             <SignalModal></SignalModal>
             &emsp;
@@ -25,6 +25,7 @@ import SignalModal from './signal-modal.vue';
 import SignalValueFormat from './signal-value-format.vue';
 import CursorLocation from './cursor-location.vue';
 import ValueSearch from './value-search.vue';
+import FileMenu from './file-menu';
 
 import { MovingPivot } from '../pivot/cursor';
 

src/components/toolbar/value-search.vue

@@ -177,7 +177,7 @@ function getNextIconClass() {
     margin-left: 5px;
     padding-top: 2px;
     display: flex;
-    height: 32px;
+    height: var(--toolbar-item-height);
     align-items: center;
 }