From 16ac24a1bad441703c4752c542e4d447d873e5d1 Mon Sep 17 00:00:00 2001
From: lichx <lchx751176501@gmail.com>
Date: Thu, 5 Dec 2024 14:40:29 +0800
Subject: [PATCH] =?UTF-8?q?[bugfix]=20=E4=BD=BF=E7=94=A8js=E9=87=8D?=
 =?UTF-8?q?=E5=86=99=E6=8F=90=E7=A4=BA=E9=80=BB=E8=BE=91=EF=BC=8C=E7=8E=B0?=
 =?UTF-8?q?=E5=9C=A8=E5=9D=97=E5=AE=BD=E4=B8=8D=E5=86=8D=E5=8F=97=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E9=99=90=E5=88=B6=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/expr1/RAM.vue        | 58 +++++++++++++++--------------
 src/store/expr1/defaultOperation.ts |  3 --
 src/store/expr1/expr1Store.ts       |  1 -
 src/style.css                       |  2 +-
 4 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/src/components/expr1/RAM.vue b/src/components/expr1/RAM.vue
index 6a8082f..2386e28 100644
--- a/src/components/expr1/RAM.vue
+++ b/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());
-let startFrom = 0;
+const {currentState} = storeToRefs(useExpr1Store());
 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"
-                         @mouseleave="detailMemoryIndex = -1">
-                <p v-if="block.Type === 'Process'">Process {{ block.ProcessID }}<br>{{ block.MemorySize }} </p>
-                <p v-else></p>
-            <div v-if="block.Index === detailMemoryIndex" class="tip"
-                 @mouseover="detailMemoryIndex = block.Index">
-                    <span v-if="block.Type==='Process'">Process {{
-                            block.ProcessID
-                        }}<br>Start From: {{ block.StartFrom }}<br>Space: {{ block.MemorySize }}</span>
-                <span v-else>Free Space<br>Start From: {{ block.StartFrom }}<br>Space: {{ block.MemorySize }}</span>
-            </div>
+             :class="block.Type" @mouseenter="(x) => {OnMouseEnter(x,block.Index)}"
+             @mouseleave="OnMouseLeave">
+            <p v-if="block.Type === 'Process'">Process {{ block.ProcessID }}<br>{{ block.MemorySize }} </p>
+            <p v-else></p>
+
+        </div>
+        <div v-if="showTip" class="tip" :style="{left: tipLeftVal + 'px'}">
+                            <span v-if="tipBlock.Type==='Process'">Process {{
+                                    tipBlock.ProcessID
+                                }}<br>Start From: {{ tipBlock.StartFrom }}<br>Space: {{ tipBlock.MemorySize }}</span>
+            <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;
diff --git a/src/store/expr1/defaultOperation.ts b/src/store/expr1/defaultOperation.ts
index c5905a4..8c4c509 100644
--- a/src/store/expr1/defaultOperation.ts
+++ b/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 {
diff --git a/src/store/expr1/expr1Store.ts b/src/store/expr1/expr1Store.ts
index 319ae36..4d71869 100644
--- a/src/store/expr1/expr1Store.ts
+++ b/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: ''
diff --git a/src/style.css b/src/style.css
index 4b2fc1f..4c511de 100644
--- a/src/style.css
+++ b/src/style.css
@@ -20,7 +20,7 @@ h1 {
 
 
 #app {
-  max-width: 1280px;
+  max-width: 1440px;
   margin: 0 auto;
   padding: 2rem;
 }