[bugfix] 使用js重写提示逻辑，现在块宽不再受文字限制了

src/components/expr1/RAM.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {Block, Ram} from "@/logical/expr1/ram.ts";
-import {computed, inject} from "vue";
+import {computed, inject, ref} from "vue";
 import useExpr1Store from "@/store/expr1/expr1Store.ts";
 import {storeToRefs} from "pinia";
 
@@ -11,10 +11,10 @@ interface RamBlock extends Block {
 }
 
 let ram: Ram = inject("ram")!;
-const {detailMemoryIndex, currentState} = storeToRefs(useExpr1Store());
+const {currentState} = storeToRefs(useExpr1Store());
-let startFrom = 0;
 let blocks = computed(() => {
     let memory = ram.GetMemory();
+    let startFrom = 0;
     let blocks: RamBlock[] = [];
     for (let i = 0; i < memory.length; i++) {
         blocks.push({
@@ -27,42 +27,45 @@ let blocks = computed(() => {
     }
     return blocks;
 })
+let tipBlock: RamBlock = blocks.value[0];
+let showTip = ref(false);
+let tipLeftVal = ref(0);
+function OnMouseEnter(x: MouseEvent, index: number) {
+    let target: HTMLElement = x.target as HTMLElement;
+    const rect = target.getBoundingClientRect();
+    showTip.value = true;
+    tipBlock = blocks.value[index];
+    console.log(rect);
+    tipLeftVal.value = rect.left - target.parentElement!.getBoundingClientRect().left + rect.width / 2 ;
+}
+
+function OnMouseLeave() {
+    showTip.value = false;
+}
 </script>
 
 <template>
     <p>CurrentState: {{ currentState }}</p>
     <div class="memory">
         <div v-for="block in blocks" :key="block.Index" :style="{flex: block.Flex}" class="block"
-             :class="block.Type" @mouseenter="detailMemoryIndex = block.Index"
+             :class="block.Type" @mouseenter="(x) => {OnMouseEnter(x,block.Index)}"
-                         @mouseleave="detailMemoryIndex = -1">
+             @mouseleave="OnMouseLeave">
-                <p v-if="block.Type === 'Process'">Process {{ block.ProcessID }}<br>{{ block.MemorySize }} </p>
+            <p v-if="block.Type === 'Process'">Process {{ block.ProcessID }}<br>{{ block.MemorySize }} </p>
-                <p v-else></p>
+            <p v-else></p>
-            <div v-if="block.Index === detailMemoryIndex" class="tip"
+
-                 @mouseover="detailMemoryIndex = block.Index">
+        </div>
-                    <span v-if="block.Type==='Process'">Process {{
+        <div v-if="showTip" class="tip" :style="{left: tipLeftVal + 'px'}">
-                            block.ProcessID
+                            <span v-if="tipBlock.Type==='Process'">Process {{
-                        }}<br>Start From: {{ block.StartFrom }}<br>Space: {{ block.MemorySize }}</span>
+                                    tipBlock.ProcessID
-                <span v-else>Free Space<br>Start From: {{ block.StartFrom }}<br>Space: {{ block.MemorySize }}</span>
+                                }}<br>Start From: {{ tipBlock.StartFrom }}<br>Space: {{ tipBlock.MemorySize }}</span>
-            </div>
+            <span v-else>Free Space<br>Start From: {{ tipBlock.StartFrom }}<br>Space: {{ tipBlock.MemorySize }}</span>
         </div>
     </div>
 </template>
 
 <style scoped lang="less">
-.fade-move, .fade-enter-active, .fade-leave-active {
-    transition: opacity 2s;
-}
-
-.fade-enter-from, .fade-leave-to {
-    opacity: 0;
-}
-
-.fade-leave-active {
-    position: absolute;
-}
-
-
 .memory {
+    position: relative;
     margin-top: 70px;
     display: flex;
     justify-content: center;
@@ -103,7 +106,6 @@ let blocks = computed(() => {
 .tip {
     position: absolute;
     bottom: 100%;
-    left: 50%;
     transform: translateX(-50%);
     background-color: #333;
     color: #fff;

src/store/expr1/defaultOperation.ts

@@ -8,9 +8,6 @@ const operations: Operation[] = [
     { id: 3, memorySize: 300, type: 'release' },
     { id: 5, memorySize: 100, type: 'release' },
     { id: 6, memorySize: 50, type: 'request' },
-    // { id: 4, memorySize: 450, type: 'release' },
-    // { id: 5, memorySize: 500, type: 'request' },
-    // { id: 5, memorySize: 550, type: 'release' },
 ];
 export default operations;
 export interface Operation {

src/store/expr1/expr1Store.ts

@@ -5,7 +5,6 @@ const useExpr1Store = defineStore('expr1', {
     state: () => ({
         operations: operations,
         memSize: 1000,
-        detailMemoryIndex: -1,
         currentState: operations.length,
         tableChanged: false,
         failInfo: ''

src/style.css

@@ -20,7 +20,7 @@ h1 {
 
 
 #app {
-  max-width: 1280px;
+  max-width: 1440px;
   margin: 0 auto;
   padding: 2rem;
 }