docs：添加注释

frontend/src/components/DevicePerformanceTabel.vue

@@ -24,6 +24,7 @@ onMounted(() => {
 
   table_websocket.onmessage = (e) => {
     // console.log(e.data);
+    // TODO: 通过获取需要监控的变量将 key 写死
     let data = JSON.parse(e.data).message
     for (const [key, value] of Object.entries(data[0] as Record<string, string>)) {
       tableData.value[0][key] = value

frontend/src/components/device_communication/EditDialog.vue

@@ -81,23 +81,33 @@ import axios from 'axios';
 import { DeviceInfo } from "./types";
 import { useProtocolNamesStore } from '@/stores/protocolNames'; 
 
+// protocol name 存储
 const store = useProtocolNamesStore()
+// form 表单对象
 const formRef = ref<typeof ElForm>()
+// 弹出框是否可见，默认不可见
+// 弹出框表单 label 的宽度
 const dialogFormVisible = ref(false)
 const formLabelWidth = "120px"
 
+// 父组件往这里传的类型
 type porpsType = {
   isShow: boolean,
   deviceInfo?: DeviceInfo,
   type: string,
 }
 const props = defineProps<porpsType>()
+// 返回父组件的方法
 const emit = defineEmits(['close', 'changeDeviceInfo'])
+// 关闭弹出框的执行的操作
 const handleClose = () => {
+  // 向父组件发射关闭弹出框的事件
   emit('close')
+  // 表单所有的校验和数据重置
   formRef.value!.resetFields()
 }
 
+// 默认表单数据
 const form = ref<DeviceInfo>({
   station_id: "",
   device_id: 0,
@@ -113,8 +123,11 @@ const form = ref<DeviceInfo>({
   udp_port_dst: 0
 })
 
+// 检测弹出框是否弹出，如果弹出赋值
 watch(() => props.isShow, () => {
   dialogFormVisible.value = props.isShow
+  
+  // 判断传下来的类型是不是 edit，如果是，需要将展示的数据放到表单上
   if (props.isShow && props.type === "edit") {
     form.value = {
       id: props.deviceInfo!.id,
@@ -137,6 +150,7 @@ watch(() => props.isShow, () => {
   }
 })
 
+// 校验 ip 是否正确
 const validateIP = (_: any, value: any, callback: any) => {
   if (value === '') {
     callback(new Error('Please input the IP again'))
@@ -149,6 +163,7 @@ const validateIP = (_: any, value: any, callback: any) => {
   }
 }
 
+// 校验 port 是否正确
 const validatePort = (_: any, value: any, callback: any) => {
   if (value === '') {
     callback(new Error('Please input the port again'))
@@ -161,6 +176,7 @@ const validatePort = (_: any, value: any, callback: any) => {
   }
 }
 
+// 表单校验规则
 const rules = reactive<FormRules<typeof form>>({
   station_id: [{ required: true, message: 'Please input station id', trigger: 'blur' }],
   device_id: [{ required: true, message: 'Please input device id', trigger: 'blur' }],
@@ -192,6 +208,7 @@ const rules = reactive<FormRules<typeof form>>({
 
 })
 
+// 下拉框选择触发的事件
 const handleProtocolChange = (protocol_name: string) => {
   axios.get('/api/device_communication/protocol_performance/' + protocol_name + '/')
     .then((res) => {
@@ -202,7 +219,9 @@ const handleProtocolChange = (protocol_name: string) => {
     })
 }
 
+// 性能参数相关
 const checkAll = ref(false)
+// 设置不确定状态，仅负责样式控制
 const isIndeterminate = ref(true)
 const performance_fields = ref<string[]>([])
 const checked_performance_fields = ref<string[]>([])