Merge pull request #12 from ins0mn1a93/main

修复了前端页面交互问题

frontend/src/pages/netstat.vue

@@ -1,9 +1,10 @@
 <script setup lang="tsx">
 import { ElAutoResizer, ElTableV2, ElTooltip } from 'element-plus'
 import { netstats } from '../utils'
-import { computed } from 'vue'
+import { ref,computed } from 'vue'
 import dayjs from 'dayjs'
 
+// const netstats = ref([])
 const columns = [{
   key: 'id',
   title: 'ID',
@@ -43,17 +44,19 @@ const columns = [{
 const data = computed(() => netstats.value.map(n => {
   return {
     ...n,
-    time: dayjs(n.time).format('YYYY-MM-DD HH:mm:ss'),
-    local: `${n.localIP}:${n.localPort}`,
-    remote: `${n.remoteIP}:${n.remotePort}`,
+    time: n.time ? dayjs(n.time).format('YYYY-MM-DD HH:mm:ss') : '未知时间',
+    local: n.localIP && n.localPort ? `${n.localIP}:${n.localPort}` : '未知地址',
+    remote: n.remoteIP && n.remotePort ? `${n.remoteIP}:${n.remotePort}` : '未知地址',
+    location: n.location || '未知位置',
+    executable: n.executable || '未知程序'
   }
 }))
 </script>
 
 <template>
   <ElAutoResizer>
     <template #default="{ height, width }">
-      <ElTableV2 :columns :data :height :width />
+      <ElTableV2 :columns :data="data || []" :height :width />
     </template>
   </ElAutoResizer>
 </template>

frontend/src/pages/threat.vue

@@ -1,9 +1,10 @@
 <script setup lang="tsx">
 import { ElAutoResizer, ElButton, ElTableV2 } from 'element-plus'
 import { credibilityLevel, riskLevel, threats } from '../utils'
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 import dayjs from 'dayjs'
 
+// const threats = ref([])
 const columns = [{
   key: 'id',
   title: 'ID',
@@ -45,20 +46,21 @@ const columns = [{
   cellRenderer: () => (<ElButton type="danger" size="small">删除</ElButton>)
 }]
 
-const data = computed(() => threats.value.map(n => {
-  return {
+const data = computed(() => {
+  if (!threats.value) return []
+  return threats.value.map(n => ({
     ...n,
     time: dayjs(n.time).format('YYYY-MM-DD HH:mm:ss'),
     risk: `${riskLevel[n.risk]}(${n.risk})`,
     credibility: `${credibilityLevel[n.credibility]}(${n.credibility})`,
-  }
-}))
+  }))
+})
 </script>
 
 <template>
   <ElAutoResizer>
     <template #default="{ height, width }">
-      <ElTableV2 :columns :data :height :width />
+      <ElTableV2 :columns="columns" :data="data || []" :height="height" :width="width" />
     </template>
   </ElAutoResizer>
 </template>