From b92c871b3b5a840e2fb7a5fe2f20e2646c80892d Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Fri, 18 Apr 2025 15:38:57 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E9=87=8D=E6=9E=84=E4=BF=A1=E4=BB=A4?=
 =?UTF-8?q?=E8=B7=9F=E8=B8=AA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/trace/packet.ts                   |  15 +
 src/views/traceManage/wireshark/index.vue | 725 +++++++++++++++-------
 2 files changed, 512 insertions(+), 228 deletions(-)

diff --git a/src/api/trace/packet.ts b/src/api/trace/packet.ts
index 2266e510..57f777dd 100644
--- a/src/api/trace/packet.ts
+++ b/src/api/trace/packet.ts
@@ -62,3 +62,18 @@ export function packetKeep(taskNo: string, duration: number = 120) {
     data: { taskNo, duration },
   });
 }
+
+/**
+ * 信令跟踪文件
+ * @param taskNo 对象
+ * @returns object
+ */
+export function packetPCAPFile(taskNo: string) {
+  return request({
+    url: '/trace/packet/filePull',
+    method: 'GET',
+    params: { taskNo },
+    responseType: 'blob',
+    timeout: 180_000,
+  });
+}
diff --git a/src/views/traceManage/wireshark/index.vue b/src/views/traceManage/wireshark/index.vue
index ff765751..d372d17b 100644
--- a/src/views/traceManage/wireshark/index.vue
+++ b/src/views/traceManage/wireshark/index.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import { onBeforeUnmount, onMounted, reactive, ref, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { message, Modal } from 'ant-design-vue/es';
 import DissectionTree from '../tshark/components/DissectionTree.vue';
 import DissectionDump from '../tshark/components/DissectionDump.vue';
-import PacketTable from '../tshark/components/PacketTable.vue';
 import {
   RESULT_CODE_ERROR,
   RESULT_CODE_SUCCESS,
 } from '@/constants/result-constants';
-import { filePullTask } from '@/api/trace/task';
-import { OptionsType, WS } from '@/plugins/ws-websocket';
+import { scriptUrl as wkUrl } from '@/assets/js/wiregasm_worker';
+import * as wkUtil from '@/plugins/wk-worker';
+import * as wsUtil from '@/plugins/ws-websocket';
 import useI18n from '@/hooks/useI18n';
 import saveAs from 'file-saver';
 import {
@@ -19,34 +19,20 @@ import {
   packetStop,
   packetFilter,
   packetKeep,
+  packetPCAPFile,
 } from '@/api/trace/packet';
-const ws = new WS();
+import { parseDateToStr } from '@/utils/date-utils';
+import { ColumnsType } from 'ant-design-vue/es/table';
+const ws = new wsUtil.WS();
+const wk = new wkUtil.WK();
 const { t } = useI18n();
 
+// =========== WK ==============
 const NO_SELECTION = { id: '', idx: 0, start: 0, length: 0 };
 
 type StateType = {
-  /**网卡设备列表 */
-  devices: { id: string; label: string; children: any[] }[];
   /**初始化 */
   initialized: boolean;
-  /**保活调度器 */
-  keepTimer: any;
-  /**任务 */
-  task: {
-    taskNo: string;
-    device: string;
-    filter: string;
-    outputPCAP: boolean;
-  };
-  /**字段 */
-  columns: string[];
-
-  /**过滤条件 */
-  filter: string;
-  /**过滤条件错误信息 */
-  filterError: string | null;
-
   /**当前选中的帧编号 */
   selectedFrame: number;
   /**当前选中的帧数据 */
@@ -57,63 +43,19 @@ type StateType = {
   selectedTree: typeof NO_SELECTION;
   /**选择帧的Dump数据标签 */
   selectedDataSourceIndex: number;
-
-  /**包总数 */
-  totalPackets: number;
-  /**包数据 */
-  packetList: any[];
 };
 
 const state = reactive<StateType>({
-  devices: [],
   initialized: false,
-  keepTimer: null,
-  task: {
-    taskNo: 'laYlTbq',
-    device: '192.168.5.58',
-    filter: 'tcp and (port 33030 or 8080)',
-    outputPCAP: false,
-  },
-  columns: [
-    'No.',
-    'Time',
-    'Source',
-    'Destination',
-    'Protocol',
-    'Length',
-    'Info',
-  ],
-  filter: 'tcp and (port 33030 or 8080)',
-  filterError: null,
-  selectedFrame: 1,
+  selectedFrame: 0,
   /**当前选中的帧数据 */
   packetFrame: { tree: [], data_sources: [] },
   packetFrameTreeMap: null, // 注意：Map 需要额外处理
   selectedTree: NO_SELECTION, // NO_SELECTION 需要定义
   /**选择帧的Dump数据标签 */
   selectedDataSourceIndex: 0,
-  // 包数据
-  totalPackets: 0,
-  packetList: [],
 });
 
-/**清除帧数据和报文信息状态 */
-function fnReset() {
-  state.initialized = false;
-  // 选择帧的数据
-  state.selectedFrame = 0;
-  state.packetFrame = { tree: [], data_sources: [] };
-  state.packetFrameTreeMap = null;
-  state.selectedTree = NO_SELECTION;
-  state.selectedDataSourceIndex = 0;
-  // 过滤条件
-  state.filter = 'tcp and (port 33030 or 8080)';
-  state.filterError = null;
-  // 包数据
-  state.totalPackets = 0;
-  state.packetList = [];
-}
-
 /**解析帧数据为简单结构 */
 function parseFrameTree(id: string, node: Record<string, any>) {
   let map = new Map();
@@ -136,15 +78,9 @@ function parseFrameTree(id: string, node: Record<string, any>) {
 
   return map;
 }
-
-/**帧数据点击选中 */
-function handleSelectedTreeEntry(e: any) {
-  console.log('fnSelectedTreeEntry', e);
-  state.selectedTree = e;
-}
 /**报文数据点击选中 */
 function handleSelectedFindSelection(src_idx: number, pos: number) {
-  console.log('fnSelectedFindSelection', pos);
+  // console.log('fnSelectedFindSelection', pos);
   if (state.packetFrameTreeMap == null) return;
   // find the smallest one
   let current = null;
@@ -166,83 +102,274 @@ function handleSelectedFindSelection(src_idx: number, pos: number) {
     state.selectedTree = state.packetFrameTreeMap.get(current);
   }
 }
+/**帧数据点击选中 */
+function handleSelectedTree(e: any) {
+  state.selectedTree = e;
+}
 
-/**包数据表点击选中 */
-function handleSelectedFrame(num: number) {
-  console.log('fnSelectedFrame', num, state.totalPackets);
-  const packet = state.packetList.find((v: any) => v.number === num);
-  if (!packet) return;
-  const packetFrame = packet.frame;
-  state.selectedFrame = packet.number;
-  state.packetFrame = packetFrame;
-  state.packetFrameTreeMap = parseFrameTree('root', packetFrame);
-  state.selectedTree = NO_SELECTION;
-  state.selectedDataSourceIndex = 0;
+/**接收数据后回调 */
+function wkMessage(res: Record<string, any>) {
+  // console.log('wkMessage', res);
+  switch (res.type) {
+    case 'status':
+      console.info(res.status);
+      break;
+    case 'error':
+      console.warn(res.error);
+      break;
+    case 'init':
+      wk.send({ type: 'columns' });
+      state.initialized = true;
+      break;
+    case 'frames':
+      const { frames } = res.data;
+
+      // 有匹配的选择第一个
+      if (frames.length > 0) {
+        state.selectedFrame = frames[0].number;
+        wk.send({ type: 'select', number: state.selectedFrame });
+      }
+      break;
+    case 'selected':
+      // 首行修改帧编号
+      const fristFrame = res.data.tree[0];
+      res.data.tree[0].label = fristFrame.label.replace(
+        'Frame 1:',
+        `Frame ${tableState.selectedNumber}:`
+      );
+      const item = fristFrame.tree.find(
+        (item: any) => item.label === 'Frame Number: 1'
+      );
+      if (item) {
+        item.label = `Frame Number:  ${tableState.selectedNumber}:`;
+      }
+
+      state.packetFrame = res.data;
+      state.packetFrameTreeMap = parseFrameTree('root', res.data);
+      state.selectedTree = NO_SELECTION;
+      state.selectedDataSourceIndex = 0;
+      break;
+    case 'processed':
+      // setStatus(`Error: non-zero return code (${e.data.code})`);
+      // 加载数据
+      wk.send({
+        type: 'frames',
+        filter: '',
+        skip: 0,
+        limit: 1,
+      });
+      break;
+    default:
+      console.warn(res);
+      break;
+  }
 }
-/**包数据表滚动底部加载 */
-function handleScrollBottom(index: any) {
-  console.log('handleScrollBottom', index);
+/**建立WK连接 */
+function fnWK() {
+  const options: wkUtil.OptionsType = {
+    url: wkUrl,
+    onmessage: wkMessage,
+    onerror: (ev: any) => {
+      console.error(ev);
+    },
+  };
+  //建立连接
+  wk.connect(options);
 }
 
+// =========== WS ==============
+/**接收数据后回调 */
+function wsMessage(res: Record<string, any>) {
+  const { code, requestId, data } = res;
+  if (code === RESULT_CODE_ERROR) {
+    console.warn(res.msg);
+    return;
+  }
+
+  // 建联时发送请求
+  if (!requestId && data.clientId) {
+    tableState.data = [];
+    tableState.total = 0;
+    taskState.keepTimer = setInterval(() => {
+      if (ws.state() != WebSocket.OPEN) {
+        clearInterval(taskState.keepTimer);
+        return;
+      }
+      packetKeep(taskState.task.taskNo, 120);
+    }, 90 * 1000);
+    return;
+  }
+
+  // 订阅组信息
+  if (!data?.groupId) {
+    return;
+  }
+  if (data.groupId === `4_${taskState.task.taskNo}`) {
+    const packetData = data.data;
+    tableState.total = packetData.number;
+    tableState.data.unshift(packetData);
+    if (tableState.data.length > 100) {
+      tableState.data.pop();
+    }
+  }
+}
+/**建立WS连接 */
+function fnWS() {
+  const options: wsUtil.OptionsType = {
+    url: '/ws',
+    params: {
+      /**订阅通道组
+       *
+       * 信令跟踪Packet (GroupID:4_taskNo)
+       */
+      subGroupID: `4_${taskState.task.taskNo}`,
+    },
+    heartTimer: 30 * 1000,
+    onmessage: wsMessage,
+    onerror: (ev: any) => {
+      // 接收数据后回调
+      console.error(ev);
+    },
+  };
+  //建立连接
+  ws.connect(options);
+}
+
+// =========== 任务 ==============
+type TaskStateType = {
+  /**网卡设备列表 */
+  devices: { id: string; label: string; children: any[] }[];
+
+  /**任务 */
+  task: {
+    taskNo: string;
+    device: string;
+    filter: string;
+    outputPCAP: boolean;
+  };
+
+  /**过滤条件 */
+  filter: string;
+  /**过滤条件错误信息 */
+  filterError: string | null;
+
+  /**保活调度器 */
+  keepTimer: any;
+
+  /**停止标记 */
+  stop: boolean;
+  stopOutputPCAP: boolean;
+};
+
+const taskState = reactive<TaskStateType>({
+  devices: [],
+
+  task: {
+    taskNo: '',
+    device: '192.168.5.58',
+    filter: '',
+    outputPCAP: false,
+  },
+
+  filter: '',
+  filterError: null,
+
+  keepTimer: null,
+
+  stop: false,
+  stopOutputPCAP: false,
+});
+
 /**开始跟踪 */
 function fnStart() {
-  // state.task.taskNo = 'laYlTbq';
-  state.task.taskNo = Number(Date.now()).toString(16);
-  state.task.outputPCAP = false;
-  packetStart(state.task).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS) {
-      fnReset();
-      fnWS();
-    } else {
-      message.error(t('common.operateErr'), 3);
-    }
-  });
+  if (taskState.keepTimer) return;
+  taskState.keepTimer = true;
+  const hide = message.loading(t('common.loading'), 0);
+  // taskState.task.taskNo = 'laYlTbq';
+  taskState.task.taskNo = Number(Date.now()).toString(16);
+  taskState.task.filter = taskState.filter;
+  packetStart(toRaw(taskState.task))
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        // 清空选择帧的数据
+        state.selectedFrame = 0;
+        state.packetFrame = { tree: [], data_sources: [] };
+        state.packetFrameTreeMap = null;
+        state.selectedTree = NO_SELECTION;
+        state.selectedDataSourceIndex = 0;
+        // 开启
+        if (!state.initialized) {
+          fnWK();
+        }
+        clearInterval(taskState.keepTimer);
+        taskState.keepTimer = null;
+        fnWS();
+        // 记录状态
+        taskState.stop = false;
+        taskState.stopOutputPCAP = taskState.task.outputPCAP;
+      } else {
+        message.error(t('common.operateErr'), 3);
+      }
+    })
+    .finally(() => {
+      hide();
+    });
 }
 
 /**停止跟踪 */
 function fnStop() {
-  packetStop(state.task.taskNo).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS) {
+  if (typeof taskState.keepTimer !== 'number') return;
+  const hide = message.loading(t('common.loading'), 0);
+  packetStop(taskState.task.taskNo)
+    .then(res => {
+      if (res.code !== RESULT_CODE_SUCCESS) {
+        message.warning(res.msg, 3);
+      }
+      // 关闭监听
       ws.close();
-      state.initialized = false;
-      state.filter = '';
-      state.filterError = null;
-    } else {
-      message.warning(res.msg, 3);
-    }
-  });
+      clearInterval(taskState.keepTimer);
+      taskState.keepTimer = null;
+
+      taskState.filter = '';
+      taskState.filterError = null;
+
+      taskState.stop = true;
+    })
+    .finally(() => {
+      hide();
+    });
 }
 
 /**跟踪数据表过滤 */
 function handleFilterFrames() {
-  packetFilter(state.task.taskNo, state.filter).then(res => {
+  packetFilter(taskState.task.taskNo, taskState.filter).then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
-      state.task.filter = state.filter;
+      taskState.task.filter = taskState.filter;
+      taskState.filterError = null;
     } else {
-      state.filterError = res.msg;
+      taskState.filterError = res.msg;
     }
   });
 }
 
-/**开始跟踪 */
+/**选择网卡 */
 function fnDevice(v: string) {
-  state.task.device = v;
+  taskState.task.device = v;
 }
 
 /**下载触发等待 */
 let downLoading = ref<boolean>(false);
-
 /**信息文件下载 */
 function fnDownloadPCAP() {
   if (downLoading.value) return;
-  const fileName = `trace_packet_${state.task.taskNo}.pcap`;
+  const fileName = `packet_${taskState.task.taskNo}.pcap`;
   Modal.confirm({
     title: t('common.tipTitle'),
     content: t('views.logManage.neFile.downTip', { fileName }),
     onOk() {
       downLoading.value = true;
       const hide = message.loading(t('common.loading'), 0);
-      filePullTask(state.task.taskNo)
+      packetPCAPFile(taskState.task.taskNo)
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
             message.success({
@@ -267,90 +394,203 @@ function fnDownloadPCAP() {
   });
 }
 
-/**接收数据后回调 */
-function wsMessage(res: Record<string, any>) {
-  const { code, requestId, data } = res;
-  if (code === RESULT_CODE_ERROR) {
-    console.warn(res.msg);
-    return;
-  }
+// =========== 表格数据 ==============
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**记录数据 */
+  data: Record<string, any>[];
+  /**总记录数 */
+  total: number;
+  /**选择帧编号 */
+  selectedNumber: number;
+};
 
-  // 建联时发送请求
-  if (!requestId && data.clientId) {
-    state.initialized = true;
-    state.keepTimer = setInterval(() => {
-      packetKeep(state.task.taskNo, 120);
-    }, 90 * 1000);
-    return;
-  }
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  data: [],
+  total: 0,
+  selectedNumber: 0,
+});
 
-  // 订阅组信息
-  if (!data?.groupId) {
+/**表格字段列 */
+let tableColumns = ref<ColumnsType>([
+  {
+    title: 'Number',
+    dataIndex: 'number',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'Time',
+    dataIndex: 'time',
+    align: 'left',
+    width: 150,
+    customRender(opt) {
+      if (!opt.value) return '';
+      const nanoseconds = opt.value; // 纳秒时间戳
+      const milliseconds = Math.floor(nanoseconds / 1000000);
+      const nanosecondsPart = (nanoseconds % 1000000)
+        .toString()
+        .padStart(6, '0');
+
+      return `${parseDateToStr(
+        milliseconds,
+        'HH:mm:ss.SSS'
+      )}.${nanosecondsPart}`;
+    },
+  },
+  {
+    title: 'Source',
+    dataIndex: 'source',
+    align: 'left',
+    width: 150,
+    ellipsis: true,
+  },
+  {
+    title: 'Destination',
+    dataIndex: 'destination',
+    align: 'left',
+    width: 150,
+    ellipsis: true,
+  },
+  {
+    title: 'Protocol',
+    dataIndex: 'protocol',
+    key: 'protocol',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'length',
+    dataIndex: 'length',
+    align: 'right',
+    width: 100,
+  },
+  {
+    title: 'Info',
+    dataIndex: 'info',
+    align: 'left',
+    ellipsis: true,
+  },
+]);
+
+/**
+ * 查看帧数据
+ * @param row 记录信息
+ */
+function fnVisible(row: Record<string, any>) {
+  // 选中行重复点击时显示隐藏
+  if (row.id === tableState.selectedNumber && state.selectedFrame !== 0) {
+    state.selectedFrame = 0;
     return;
   }
-  if (data.groupId === `4_${state.task.taskNo}`) {
-    const packetData = data.data;
-    state.totalPackets = packetData.number;
-    state.packetList.push(packetData);
-  }
+  tableState.selectedNumber = row.number;
+  const blob = generatePCAP(row.time / 1e3, row.data);
+  wk.send({ type: 'process', file: blob });
 }
+/**生成PCAP-blob */
+function generatePCAP(timestamp: number, base64Data: string): Blob {
+  // 1. 转换数据
+  const binaryString = atob(base64Data);
+  const len = binaryString.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
 
-/**建立WS连接 */
-function fnWS() {
-  const options: OptionsType = {
-    url: '/ws',
-    params: {
-      /**订阅通道组
-       *
-       * 信令跟踪Packet (GroupID:4_taskNo)
-       */
-      subGroupID: `4_${state.task.taskNo}`,
-    },
-    onmessage: wsMessage,
-    onerror: (ev: any) => {
-      // 接收数据后回调
-      console.error(ev);
-    },
-  };
-  //建立连接
-  ws.connect(options);
+  // 2. 创建PCAP文件头
+  const fileHeader = new Uint8Array([
+    0xd4,
+    0xc3,
+    0xb2,
+    0xa1, // magic_number (微秒级)
+    0x02,
+    0x00, // version_major (2)
+    0x04,
+    0x00, // version_minor (4)
+    0x00,
+    0x00,
+    0x00,
+    0x00, // thiszone (UTC)
+    0x00,
+    0x00,
+    0x00,
+    0x00, // sigfigs (固定0)
+    0xff,
+    0xff,
+    0x00,
+    0x00, // snaplen (最大捕获长度)
+    0x01,
+    0x00,
+    0x00,
+    0x00, // network (LINKTYPE_ETHERNET)
+  ]);
+
+  // 3. 生成时间戳
+  const date = new Date(timestamp);
+  const secs = Math.floor(date.getTime() / 1000);
+  const usecs = (date.getTime() % 1000) * 1000;
+
+  // 4. 构造PCAP报文头
+  const packetHeader = new Uint8Array(16);
+  const headerView = new DataView(packetHeader.buffer);
+  headerView.setUint32(0, secs, true); // 时间戳秒
+  headerView.setUint32(4, usecs, true); // 时间戳微秒
+  headerView.setUint32(8, bytes.length, true); // 捕获长度
+  headerView.setUint32(12, bytes.length, true); // 原始长度
+
+  // 5. 合并所有数据
+  const finalData = new Uint8Array(
+    fileHeader.length + packetHeader.length + bytes.length
+  );
+  finalData.set(fileHeader);
+  finalData.set(packetHeader, fileHeader.length);
+  finalData.set(bytes, fileHeader.length + packetHeader.length);
+
+  // 6. 文件Blob对象
+  return new Blob([finalData], { type: 'application/octet-stream' });
 }
 
 onMounted(() => {
   packetDevices().then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
-      state.devices = res.data;
+      taskState.devices = res.data;
       if (res.data.length === 0) return;
-      state.task.device = res.data[0].id;
+      taskState.task.device = res.data[0].id;
     }
   });
+  fnWK();
 });
 
 onBeforeUnmount(() => {
-  clearInterval(state.keepTimer);
-  state.keepTimer = null;
-  if (ws.state() === WebSocket.OPEN) ws.close();
+  clearInterval(taskState.keepTimer);
+  wk.send({ type: 'close' }) && wk.close();
+  if (ws.state() <= WebSocket.OPEN) ws.close();
 });
 </script>
 
 <template>
   <PageContainer>
     <a-card :bordered="false" :body-style="{ padding: '12px' }">
-      <div class="toolbar">
-        <a-space :size="8" class="toolbar-oper">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <a-space :size="8" align="end">
           <a-dropdown-button
             type="primary"
-            :disabled="state.initialized"
             @click="fnStart"
+            :disabled="!taskState.stop && taskState.task.taskNo !== ''"
           >
             <PlayCircleOutlined />
             Start Trace
             <template #overlay>
               <a-menu
                 @click="({ key }:any) => fnDevice(key)"
-                :selectedKeys="[state.task.device]"
+                :selectedKeys="[taskState.task.device]"
               >
-                <a-menu-item v-for="v in state.devices" :key="v.id">
+                <a-menu-item v-for="v in taskState.devices" :key="v.id">
                   <a-popover placement="rightTop" trigger="hover">
                     <template #content>
                       <div v-for="c in v.children">{{ c.id }}</div>
@@ -366,79 +606,130 @@ onBeforeUnmount(() => {
             <template #icon><DownOutlined /></template>
           </a-dropdown-button>
 
-          <a-button danger @click.prevent="fnStop()" v-if="state.initialized">
+          <a-button
+            danger
+            @click.prevent="fnStop()"
+            :disabled="taskState.stop || taskState.task.taskNo === ''"
+          >
             <template #icon><CloseCircleOutlined /></template>
             Stop Trace
           </a-button>
+
+          <a-checkbox
+            v-model:checked="taskState.task.outputPCAP"
+            :disabled="!taskState.stop && taskState.task.taskNo !== ''"
+          >
+            Output PCAP
+          </a-checkbox>
+
+          <a-tag color="processing" v-if="taskState.task.filter !== ''">
+            {{ taskState.task.filter }}
+          </a-tag>
+        </a-space>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="end">
           <a-button
             type="primary"
             :loading="downLoading"
             @click.prevent="fnDownloadPCAP()"
-            v-if="state.task.outputPCAP"
+            v-if="taskState.stop && taskState.stopOutputPCAP"
           >
             <template #icon><DownloadOutlined /></template>
             {{ t('common.downloadText') }}
           </a-button>
-          <a-tag
-            color="green"
-            v-show="!!state.task.filter && state.initialized"
-          >
-            {{ state.task.filter }}
-          </a-tag>
-        </a-space>
-
-        <a-space :size="8" class="toolbar-info" v-show="state.initialized">
           <span>
-            {{ t('views.traceManage.task.traceId') }}:&nbsp;
-            <strong>{{ state.task.taskNo }}</strong>
+            Packets:
+            <strong>{{ tableState.total }}</strong>
+          </span>
+          <span>
+            Task No:
+            <strong>{{ taskState.task.taskNo }}</strong>
           </span>
-          <span> Packets: {{ state.totalPackets }} </span>
         </a-space>
-      </div>
+      </template>
 
       <!-- 包数据表过滤 -->
-      <a-input-group compact v-show="state.initialized">
-        <a-input
-          v-model:value="state.filter"
-          placeholder="display filter, example: tcp"
-          :allow-clear="true"
+      <a-input-group compact>
+        <a-auto-complete
+          v-model:value="taskState.filter"
+          :options="[
+            { value: 'tcp and port 33030 and greater 100' },
+            {
+              value:
+                '(src 192.168.5.58 and dst port 33030) or (src 192.168.9.59 and dst port 33030)',
+            },
+            { value: 'src host 192.168.5.58 and dst host 192.168.5.58' },
+            { value: 'host 192.168.5.58 and greater 100 and less 2500' },
+          ]"
           style="width: calc(100% - 100px)"
-          @pressEnter="handleFilterFrames"
+          :allow-clear="true"
         >
-          <template #prefix>
-            <FilterOutlined />
-          </template>
-        </a-input>
+          <a-input
+            placeholder="BPF Basic Filter, example: tcp"
+            @pressEnter="handleFilterFrames"
+          >
+            <template #prefix>
+              <FilterOutlined />
+            </template>
+          </a-input>
+        </a-auto-complete>
         <a-button
           type="primary"
           html-type="submit"
           style="width: 100px"
           @click="handleFilterFrames"
+          :disabled="taskState.task.taskNo === '' || taskState.stop"
         >
           Filter
         </a-button>
       </a-input-group>
       <a-alert
-        :message="state.filterError"
+        :message="taskState.filterError"
         type="error"
-        v-if="state.filterError != null"
+        v-if="taskState.filterError != null"
       />
 
       <!-- 包数据表 -->
-      <PacketTable
-        :columns="state.columns"
-        :data="state.packetList"
-        :selectedFrame="state.selectedFrame"
-        :onSelectedFrame="handleSelectedFrame"
-        :onScrollBottom="handleScrollBottom"
-      ></PacketTable>
-
-      <a-row>
+      <a-table
+        class="table"
+        row-key="number"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        size="small"
+        :pagination="false"
+        :row-class-name="(record:any) => { 
+          return `table-striped-${record.protocol}`
+        }"
+        :customRow="
+          record => {
+            return {
+              onClick: () => fnVisible(record),
+            };
+          }
+        "
+        :scroll="{ x: tableColumns.length * 150, y: '400px' }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'protocol'">
+            <!-- <DictTag :options="dict.traceMsgType" :value="record.msgType" /> -->
+          </template>
+        </template>
+      </a-table>
+      <!-- 帧数据 -->
+      <a-row
+        :gutter="16"
+        style="border: 2px rgb(217 217 217) solid; border-radius: 6px"
+        v-show="state.selectedFrame == 1"
+      >
         <a-col :lg="12" :md="12" :xs="24" class="tree">
           <!-- 帧数据 -->
           <DissectionTree
             id="root"
-            :select="handleSelectedTreeEntry"
+            :select="handleSelectedTree"
             :selected="state.selectedTree"
             :tree="state.packetFrame.tree"
           />
@@ -474,28 +765,6 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.toolbar {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-.toolbar-oper {
-  flex: 1;
-}
-.toolbar-info {
-  text-align: right;
-  padding-right: 8px;
-}
-
-.summary {
-  display: flex;
-  flex-direction: column;
-}
-.summary-item > span:first-child {
-  font-weight: 600;
-  margin-right: 6px;
-}
-
 .tree {
   font-size: 0.8125rem;
   line-height: 1.5rem;