【代码评审】IoT：产品、设备、物模型的代码

src/views/iot/device/DeviceForm.vue

@@ -57,8 +57,7 @@ const formData = ref({
   id: undefined,
   productId: undefined,
   deviceName: undefined,
-  nickname: undefined,
-  serialNumber: undefined
+  nickname: undefined
 })
 const formRules = reactive({
   productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
@@ -66,7 +65,7 @@ const formRules = reactive({
     {
       pattern: /^[a-zA-Z0-9_.\-:@]{4,32}$/,
       message:
-        '支持英文字母、数字、下划线（_）、中划线（-）、点号（.）、半角冒号（:）和特殊字符@，长度限制为4~32个字符',
+        '支持英文字母、数字、下划线（_）、中划线（-）、点号（.）、半角冒号（:）和特殊字符@，长度限制为 4~32 个字符',
       trigger: 'blur'
     }
   ],
@@ -79,7 +78,7 @@ const formRules = reactive({
         }
         const length = value.replace(/[\u4e00-\u9fa5\u3040-\u30ff]/g, 'aa').length
         if (length < 4 || length > 64) {
-          callback(new Error('备注名称长度限制为4~64个字符，中文及日文算2个字符'))
+          callback(new Error('备注名称长度限制为 4~64 个字符，中文及日文算 2 个字符'))
         } else if (!/^[\u4e00-\u9fa5\u3040-\u30ff_a-zA-Z0-9]+$/.test(value)) {
           callback(new Error('备注名称只能包含中文、英文字母、日文、数字和下划线（_）'))
         } else {

src/views/iot/device/detail/DeviceDetailsHeader.vue

@@ -59,6 +59,7 @@ const emit = defineEmits(['refresh'])
  * @param text 需要复制的文本
  */
 const copyToClipboard = (text: string) => {
+  // TODO @haohao：可以考虑用 await 异步转同步哈
   navigator.clipboard.writeText(text).then(() => {
     message.success('复制成功')
   })

src/views/iot/device/detail/DeviceDetailsInfo.vue

@@ -3,33 +3,33 @@
     <el-collapse v-model="activeNames">
       <el-descriptions :column="3" title="设备信息">
         <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
-        <el-descriptions-item label="ProductKey"
-          >{{ product.productKey }}
+        <el-descriptions-item label="ProductKey">
+          {{ product.productKey }}
           <el-button @click="copyToClipboard(product.productKey)">复制</el-button>
         </el-descriptions-item>
         <el-descriptions-item label="设备类型">
           <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
         </el-descriptions-item>
-        <el-descriptions-item label="DeviceName"
-          >{{ device.deviceName }}
+        <el-descriptions-item label="DeviceName">
+          {{ device.deviceName }}
           <el-button @click="copyToClipboard(device.deviceName)">复制</el-button>
         </el-descriptions-item>
         <el-descriptions-item label="备注名称">{{ device.nickname }}</el-descriptions-item>
-        <el-descriptions-item label="创建时间">{{
-          formatDate(device.createTime)
-        }}</el-descriptions-item>
-        <el-descriptions-item label="激活时间">{{
-          formatDate(device.activeTime)
-        }}</el-descriptions-item>
-        <el-descriptions-item label="最后上线时间">{{
-          formatDate(device.lastOnlineTime)
-        }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">
+          {{ formatDate(device.createTime) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="激活时间">
+          {{ formatDate(device.activeTime) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="最后上线时间">
+          {{ formatDate(device.lastOnlineTime) }}
+        </el-descriptions-item>
         <el-descriptions-item label="当前状态">
           <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATUS" :value="device.status" />
         </el-descriptions-item>
-        <el-descriptions-item label="最后离线时间" :span="3">{{
-          formatDate(device.lastOfflineTime)
-        }}</el-descriptions-item>
+        <el-descriptions-item label="最后离线时间" :span="3">
+          {{ formatDate(device.lastOfflineTime) }}
+        </el-descriptions-item>
         <el-descriptions-item label="MQTT 连接参数">
           <el-button type="primary" @click="openMqttParams">查看</el-button>
         </el-descriptions-item>
@@ -53,7 +53,6 @@
             </template>
           </el-input>
         </el-form-item>
-
         <el-form-item label="username">
           <el-input v-model="mqttParams.mqttUsername" readonly>
             <template #append>
@@ -63,7 +62,6 @@
             </template>
           </el-input>
         </el-form-item>
-
         <el-form-item label="passwd">
           <el-input v-model="mqttParams.mqttPassword" readonly type="password">
             <template #append>
@@ -87,39 +85,28 @@ import { ProductVO } from '@/api/iot/product'
 import { formatDate } from '@/utils/formatTime'
 import { DeviceVO } from '@/api/iot/device'
 
-// 消息提示
-const message = useMessage()
+const message = useMessage() // 消息提示
 
-// 路由实例
-const router = useRouter()
+const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>() // 定义 Props
 
-// 定义 Props
-const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>()
+const emit = defineEmits(['refresh']) // 定义 Emits
 
-// 定义 Emits
-const emit = defineEmits(['refresh'])
+const activeNames = ref(['basicInfo']) // 展示的折叠面板
+const mqttDialogVisible = ref(false) // 定义 MQTT 弹框的可见性
+const mqttParams = ref({
+  mqttClientId: '',
+  mqttUsername: '',
+  mqttPassword: ''
+}) // 定义 MQTT 参数对象
 
-// 展示的折叠面板
-const activeNames = ref(['basicInfo'])
-
-// 复制到剪贴板方法
+/** 复制到剪贴板方法 */
 const copyToClipboard = (text: string) => {
   navigator.clipboard.writeText(text).then(() => {
     message.success('复制成功')
   })
 }
 
-// 定义 MQTT 弹框的可见性
-const mqttDialogVisible = ref(false)
-
-// 定义 MQTT 参数对象
-const mqttParams = ref({
-  mqttClientId: '',
-  mqttUsername: '',
-  mqttPassword: ''
-})
-
-// 打开 MQTT 参数弹框的方法
+/** 打开 MQTT 参数弹框的方法 */
 const openMqttParams = () => {
   mqttParams.value = {
     mqttClientId: device.mqttClientId || 'N/A',
@@ -129,7 +116,7 @@ const openMqttParams = () => {
   mqttDialogVisible.value = true
 }
 
-// 关闭 MQTT 弹框的方法
+/** 关闭 MQTT 弹框的方法 */
 const handleCloseMqttDialog = () => {
   mqttDialogVisible.value = false
 }

src/views/iot/device/index.vue

@@ -192,9 +192,8 @@ const queryParams = reactive({
   status: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
 
-/** 产品ID到名称的映射 */
+/** 产品标号和名称的映射 */
 const productMap = reactive({})
 
 /** 查询列表 */
@@ -207,6 +206,7 @@ const getList = async () => {
     // 获取产品ID列表
     const productIds = [...new Set(data.list.map((device) => device.productId))]
     // 获取产品名称
+    // TODO @haohao：最好后端拼接哈
     const products = await Promise.all(productIds.map((id) => ProductApi.getProduct(id)))
     products.forEach((product) => {
       productMap[product.id] = product.name
@@ -235,7 +235,7 @@ const openForm = (type: string, id?: number) => {
 }
 
 /** 打开详情 */
-const { currentRoute, push } = useRouter()
+const { push } = useRouter()
 const openDetail = (id: number) => {
   push({ name: 'IoTDeviceDetail', params: { id } })
 }
@@ -252,6 +252,7 @@ const handleDelete = async (id: number) => {
     await getList()
   } catch {}
 }
+
 /** 查询字典下拉列表 */
 const products = ref()
 const getProducts = async () => {