【代码评审】IoT：plugin 相关的实现

Author: YunaiV

src/views/iot/plugin/detail/index.vue

@@ -33,13 +33,19 @@
         </el-descriptions-item>
       </el-descriptions>
     </ContentWrap>
+    <!-- TODO @haohao：如果是独立部署，也是通过上传插件包哇？ -->
     <ContentWrap class="mt-10px">
       <el-button type="warning" plain @click="handleImport" v-hasPermi="['system:user:import']">
         <Icon icon="ep:upload" /> 上传插件包
       </el-button>
     </ContentWrap>
   </div>
+  <!-- TODO @haohao：待完成：配置管理 -->
+  <!-- TODO @haohao：待完成：script 管理 -->
+  <!-- TODO @haohao：插件实例的前端展示：底部要不要加个分页，展示运行中的实力？默认勾选，只展示 state 为在线的 -->
+
   <!-- 插件导入对话框 -->
+  <!-- TODO @haohao：Number 尽量不用。因为有用户会使用 snowflake、或者 string 的时候，会有问题 -->
   <PluginImportForm
     ref="importFormRef"
     :id="Number(pluginInfo.id)"
@@ -50,7 +56,7 @@
 <script lang="ts" setup>
 import { PluginInfoApi, PluginInfoVO } from '@/api/iot/plugininfo'
 import { useRoute } from 'vue-router'
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import PluginImportForm from './PluginImportForm.vue'
 
 const message = useMessage()
@@ -70,6 +76,7 @@ const pluginInfo = ref<PluginInfoVO>({
   config: '',
   script: ''
 })
+// TODO @haohao：这里可以改成 pluginInfo.id > 0 去判断，然后 handleStatusChange disable 按钮
 const isInitialLoad = ref(true) // 初始化标志位
 
 onMounted(() => {
@@ -81,9 +88,9 @@ onMounted(() => {
   }
 })
 
+/** 获取插件详情 */
 const getPluginInfo = async (id: number) => {
-  const data = await PluginInfoApi.getPluginInfo(id)
-  pluginInfo.value = data
+  pluginInfo.value = await PluginInfoApi.getPluginInfo(id)
 }
 
 /** 处理状态变更 */
@@ -100,7 +107,8 @@ const handleStatusChange = async (status: number) => {
       status
     })
     message.success('更新状态成功')
-    getPluginInfo(Number(pluginInfo.value.id))
+    // 获取详情
+    await getPluginInfo(pluginInfo.value.id)
   } catch (error) {
     pluginInfo.value.status = status === 1 ? 0 : 1
     message.error('更新状态失败')

src/views/iot/plugin/index.vue

@@ -1,3 +1,4 @@
+<!-- TODO @芋艿：增加一个【运维管理】，然后把插件放过去？ -->
 <template>
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -64,7 +65,7 @@
       <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
         <el-table-column label="插件名称" align="center" prop="name" />
         <el-table-column label="插件标识" align="center" prop="pluginKey" />
-        <el-table-column label="jar包" align="center" prop="file" />
+        <el-table-column label="jar 包" align="center" prop="file" />
         <el-table-column label="版本号" align="center" prop="version" />
         <el-table-column label="部署方式" align="center" prop="deployType">
           <template #default="scope">
@@ -144,7 +145,7 @@
                     </span>
                   </div>
                   <div class="mb-2.5 last:mb-0">
-                    <span class="text-[#717c8e] mr-2.5">jar包</span>
+                    <span class="text-[#717c8e] mr-2.5">jar 包</span>
                     <span class="text-[#0b1d30]">{{ item.fileName }}</span>
                   </div>
                   <div class="mb-2.5 last:mb-0">
@@ -155,6 +156,7 @@
                     <span class="text-[#717c8e] mr-2.5">部署方式</span>
                     <dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="item.deployType" />
                   </div>
+                  <!-- TODO @haohao：这里【状态】要不去掉，变成：1）通过颜色，区分开启、禁用，类似 device 上线状态；2）开启、禁用操作，放到下面的“按钮”，3 个一排，好看电 -->
                   <div class="mb-2.5 last:mb-0">
                     <span class="text-[#717c8e] mr-2.5">状态</span>
                     <el-switch