格式化代码并添加视角高度控制以及视角范围控制

src/component/common/InformationBox.vue

@@ -1,68 +1,81 @@
 <!-- 内容显示组件 -->
 <template>
-    <div class="infomation-box" :style="{ width: `${width}px`, 'max-height': `${height}px`, top: `${newOffsetY}px`, left: `${newOffsetX}px` }">
-        <header>
-            <div class="title">
-                <h3>{{ title }}</h3>
-            </div>
-        </header>
-        <div class="content">
-            <table class="table">
-                <tr v-for="(tableData, index) in tableDatas" :key="index">
-                    <td class="label">{{ tableData.title }}</td>
-                    <td>{{ tableData.content }}</td>
-                </tr>
-            </table>
-        </div>
+  <div
+    class="infomation-box"
+    :style="{
+      width: `${width}px`,
+      'max-height': `${height}px`,
+      top: `${newOffsetY}px`,
+      left: `${newOffsetX}px`,
+    }"
+  >
+    <header>
+      <div class="title">
+        <h3>{{ title }}</h3>
+      </div>
+    </header>
+    <div class="content">
+      <table class="table">
+        <tr v-for="(tableData, index) in tableDatas" :key="index">
+          <td class="label">{{ tableData.title }}</td>
+          <td>{{ tableData.content }}</td>
+        </tr>
+      </table>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { Utils } from '@/utils/utils';
-import { onMounted, ref, type Ref } from 'vue';
+  import { Utils } from '@/utils/utils';
+  import { onMounted, ref, type Ref } from 'vue';
 
-const props = defineProps<{
-    title: string
-    data: Record<string, any>
-    field: Record<string, string>
-    offsetX: number
-    offsetY: number
-}>()
+  const props = defineProps<{
+    title: string;
+    data: Record<string, string>;
+    field: Record<string, string>;
+    offsetX: number;
+    offsetY: number;
+  }>();
 
-// 定义宽高和偏移
-const width = ref(400)
-const height = ref(450)
-const newOffsetX = ref(props.offsetX)
-const newOffsetY = ref(props.offsetY)
+  // 定义宽高和偏移
+  const width = ref(400);
+  const height = ref(450);
+  const newOffsetX = ref(props.offsetX);
+  const newOffsetY = ref(props.offsetY);
 
-const tableDatas: Ref<{ title: string, content: string }[]> = ref([])
+  const tableDatas: Ref<{ title: string; content: string }[]> = ref([]);
 
-onMounted(() => {
+  onMounted(() => {
     // 判断是否超出屏幕，超出就重新定位
-    [newOffsetX.value, newOffsetY.value] = Utils.keepWithinScreen(props.offsetX, props.offsetY, width.value, height.value)
+    [newOffsetX.value, newOffsetY.value] = Utils.keepWithinScreen(
+      props.offsetX,
+      props.offsetY,
+      width.value,
+      height.value
+    );
 
     // 数据转换
     Object.entries(props.data).forEach(([key, value]) => {
-        // 判读key是不是存在field中，存在就添加到表格数据，不存在则不添加
-        if (Object.hasOwn(props.field, key) && value) {
-            tableDatas.value.push({
-                title: props.field[key],
-                content: value
-            })
-        }
+      // 判读key是不是存在field中，存在就添加到表格数据，不存在则不添加
+      if (Object.hasOwn(props.field, key) && value) {
+        tableDatas.value.push({
+          title: props.field[key],
+          content: value,
+        });
+      }
     });
-})
+  });
 </script>
 
 <style scoped>
-.infomation-box {
+  .infomation-box {
     overflow-y: auto;
     position: absolute;
     border-radius: 4px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
+  }
 
-.title {
+  .title {
     width: 100%;
     display: flex;
     align-items: center;
@@ -71,40 +84,40 @@ onMounted(() => {
     border-bottom: 1px solid #e9ecef;
     box-sizing: border-box;
     height: 40px;
-}
+  }
 
-.title h3 {
-    color: #FFF;
+  .title h3 {
+    color: #fff;
     font-size: 14px;
     font-weight: bold;
-    font-family: "Source Han Sans CN";
-}
+    font-family: 'Source Han Sans CN';
+  }
 
-.content {
+  .content {
     width: 100%;
-    color: #FFF;
+    color: #fff;
     background-color: rgba(0, 94, 153, 1);
-}
+  }
 
-.table {
+  .table {
     width: 100%;
     height: 100%;
     border-collapse: collapse;
-}
+  }
 
-.table tr td {
+  .table tr td {
     padding: 8px;
     border-top: 1px solid #000;
     border-bottom: 1px solid #000;
     border-left: none;
     border-right: none;
     text-align: left;
-    font-family: "Source Han Sans CN";
+    font-family: 'Source Han Sans CN';
     font-size: 13px;
-}
+  }
 
-.label {
+  .label {
     width: 30%;
     font-size: 13px;
-}
-</style>
+  }
+</style>