feat: 信令抓包tshark解析pcap

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import DissectionTreeSub from './DissectionTreeSub.vue';
+
+defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  tree: {
+    type: Array,
+    required: true,
+  },
+  sub: {
+    type: Boolean,
+    default: false,
+  },
+  select: {
+    type: Function,
+    default: () => {},
+  },
+  selected: {
+    type: Object,
+    default: { id: '', idx: 0, start: 0, length: 0 },
+  },
+});
+</script>
+
+<template>
+  <ul :class="{ tree: true, 'tree-issub': sub }">
+    <li v-for="(n, i) in tree" :key="`${id}-${i}`" class="tree-li">
+      <DissectionTreeSub
+        :id="`${id}-${i}`"
+        :node="n"
+        :select="select"
+        :selected="selected"
+      />
+    </li>
+  </ul>
+</template>
+
+<style lang="css" scoped>
+.tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: 0 solid #e5e7eb;
+  box-sizing: border-box;
+}
+.tree-issub {
+  padding-left: 0.5rem;
+  border-left-width: 1px;
+  margin-left: 0.5rem;
+}
+.tree-li {
+  display: list-item;
+  text-align: -webkit-match-parent;
+  line-height: 1;
+}
+</style>