feat: 信令抓包tshark解析pcap

src/views/traceManage/tshark/components/DissectionDumpHigh.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  start: {
+    type: Number,
+    required: true,
+  },
+  size: {
+    type: Number,
+    required: true,
+  },
+  onOffsetClicked: {
+    type: Function,
+    required: true,
+  },
+});
+
+const before = computed(() => props.text.substring(0, props.start));
+const hl = computed(() =>
+  props.text.substring(props.start, props.start + props.size)
+);
+const end = computed(() => props.text.substring(props.start + props.size));
+
+const handleClick = (offset: number) => {
+  const selection = window.getSelection();
+  if (!selection) return;
+  props.onOffsetClicked(selection.anchorOffset + offset);
+};
+</script>
+
+<template>
+  <div>
+    <span @click="handleClick(0)">{{ before }}</span>
+    <span @click="handleClick(before.length)" class="hl">
+      {{ hl }}
+    </span>
+    <span @click="handleClick(before.length + hl.length)">
+      {{ end }}
+    </span>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.hl {
+  color: #ffffff;
+  background-color: #4b5563;
+}
+</style>