【功能新增】IoT：优化产品管理的 card 展示

src/api/iot/product/product/index.ts

@@ -8,6 +8,8 @@ export interface ProductVO {
   protocolId: number // 协议编号
   categoryId: number // 产品所属品类标识符
   categoryName?: string // 产品所属品类名称
+  icon: string // 产品图标
+  picUrl: string // 产品图片
   description: string // 产品描述
   validateType: number // 数据校验级别
   status: number // 产品状态
@@ -17,7 +19,6 @@ export interface ProductVO {
   dataFormat: number // 数据格式
   deviceCount: number // 设备数量
   createTime: Date // 创建时间
-  picUrl: string // 产品图片 URL
 }
 
 // IOT 数据校验级别枚举类

src/assets/svgs/iot/cube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 12 12"><g clip-path="url(#a)"><path fill="url(#b)" fill-rule="evenodd" d="M6.958.42C6.444.216 5.61.216 5.098.42L1.15 1.975c-.77.304-.77.797 0 1.1l3.947 1.558c.514.202 1.347.202 1.86 0l3.948-1.557c.77-.304.77-.797 0-1.1L6.958.418ZM4.715 11.788a.857.857 0 0 0 .3.056c.383 0 .671-.295.671-.7V6.404c0-.49-.364-1.007-.817-1.177L1.09 3.805a.808.808 0 0 0-.284-.056c-.353 0-.581.275-.581.7V9.19c0 .508.33 1.014.763 1.177l3.726 1.422Zm2.229-.024h-.02l.073.003c.074.004.154.009.227-.019L11 10.367c.45-.168.83-.686.83-1.177V4.45c0-.413-.29-.7-.673-.7a.965.965 0 0 0-.317.055l-3.72 1.422c-.44.165-.75.67-.75 1.177v4.74c0 .42.218.621.575.621Z" clip-rule="evenodd"/></g><defs><linearGradient id="b" x1=".226" x2="11.803" y1=".267" y2="11.871" gradientUnits="userSpaceOnUse"><stop stop-color="#1B3149"/><stop offset="1" stop-color="#717D8A"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h12v12H0z"/></clipPath></defs></svg>

src/views/iot/product/product/ProductForm.vue

@@ -7,10 +7,10 @@
       label-width="110px"
       v-loading="formLoading"
     >
-      <el-form-item label="产品标识" prop="productKey">
+      <el-form-item label="ProductKey" prop="productKey">
         <el-input
           v-model="formData.productKey"
-          placeholder="请输入产品标识"
+          placeholder="请输入 ProductKey"
           :readonly="formType === 'update'"
         />
       </el-form-item>
@@ -145,7 +145,7 @@ const formData = ref({
   validateType: ValidateTypeEnum.WEAK
 })
 const formRules = reactive({
-  productKey: [{ required: true, message: '产品标识不能为空', trigger: 'blur' }],
+  productKey: [{ required: true, message: 'ProductKey 不能为空', trigger: 'blur' }],
   name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
   categoryId: [{ required: true, message: '产品分类不能为空', trigger: 'change' }],
   deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],

src/views/iot/product/product/index.vue

@@ -63,50 +63,94 @@
 
   <!-- 卡片视图 -->
   <ContentWrap>
-    <div
+    <div v-if="viewMode === 'card'" class="flex flex-wrap gap-4">
-      v-if="viewMode === 'card'"
-      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
-    >
       <el-card
         v-for="item in list"
         :key="item.id"
-        class="cursor-pointer hover:shadow-lg transition-shadow"
+        class="w-[calc(25%-12px)] transition-colors"
-        @click="openDetail(item.id)"
+        :body-style="{ padding: '0' }"
       >
-        <div class="flex items-center mb-4">
+        <!-- 内容区域 -->
+        <div class="p-4">
+          <!-- 标题区域 -->
+          <div class="flex items-center mb-3">
+            <div class="mr-2.5 flex items-center">
               <el-image
-            :src="item.picUrl || '/src/assets/default-product.png'"
+                :src="item.icon || defaultIconUrl"
-            class="w-12 h-12 mr-4"
+                class="w-[35px] h-[35px]"
-            fit="cover"
+                fit="contain"
               />
+            </div>
+            <div class="text-[16px] font-600">{{ item.name }}</div>
+          </div>
+
+          <!-- 信息区域 -->
+          <div class="flex items-center text-[14px]">
             <div class="flex-1">
-            <div class="font-bold text-lg">{{ item.name }}</div>
+              <div class="mb-2.5 last:mb-0">
-            <div class="text-gray-500 text-sm">{{ item.productKey }}</div>
+                <span class="text-[#717c8e] mr-2.5">产品分类</span>
+                <span class="text-[#0070ff]">{{ item.categoryName }}</span>
               </div>
-        </div>
+              <div class="mb-2.5 last:mb-0">
-        <div class="flex justify-between text-sm text-gray-500">
+                <span class="text-[#717c8e] mr-2.5">产品类型</span>
-          <span>{{ item.categoryName }}</span>
                 <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="item.deviceType" />
               </div>
-        <div class="flex justify-end mt-4">
+              <div class="mb-2.5 last:mb-0">
+                <span class="text-[#717c8e] mr-2.5">产品标识</span>
+                <span class="text-[#0b1d30]">{{ item.productKey }}</span>
+              </div>
+            </div>
+            <div class="w-[100px] h-[100px]">
+              <el-image :src="item.picUrl || defaultPicUrl" class="w-full h-full" fit="cover" />
+            </div>
+          </div>
+
+          <!-- 分隔线 -->
+          <el-divider class="!my-3" />
+
+          <!-- 按钮组 -->
+          <div class="flex items-center">
             <el-button
-            link
+              class="flex-1 !px-2 !h-[32px]"
               type="primary"
-            @click.stop="openForm('update', item.id)"
+              plain
+              @click="openForm('update', item.id)"
               v-hasPermi="['iot:product:update']"
             >
+              <Icon icon="ep:edit-pen" class="mr-1" />
               编辑
             </el-button>
             <el-button
-            link
+              class="flex-1 !px-2 !h-[32px] !ml-[12px]"
+              type="warning"
+              plain
+              @click="openDetail(item.id)"
+            >
+              <Icon icon="ep:view" class="mr-1" />
+              详情
+            </el-button>
+            <el-button
+              class="flex-1 !px-2 !h-[32px] !ml-[12px]"
+              type="success"
+              plain
+              @click="openObjectModel(item)"
+            >
+              <Icon icon="ep:scale-to-original" class="mr-1" />
+              物模型
+            </el-button>
+            <div class="mx-[12px] h-[20px] w-[1px] bg-[#dcdfe6]"></div>
+            <el-button
+              class="!px-2 !h-[32px]"
               type="danger"
-            @click.stop="handleDelete(item.id)"
+              plain
+              @click="handleDelete(item.id)"
               v-hasPermi="['iot:product:delete']"
               :disabled="item.status === 1"
             >
-            删除
+              <Icon icon="ep:delete" />
             </el-button>
           </div>
+        </div>
       </el-card>
     </div>
 
@@ -199,6 +243,8 @@ import { ProductApi, ProductVO } from '@/api/iot/product/product'
 import ProductForm from './ProductForm.vue'
 import { DICT_TYPE } from '@/utils/dict'
 import download from '@/utils/download'
+import defaultPicUrl from '@/assets/imgs/iot/device.png'
+import defaultIconUrl from '@/assets/svgs/iot/cube.svg'
 
 /** iot 产品列表 */
 defineOptions({ name: 'IoTProduct' })
@@ -216,7 +262,7 @@ const queryParams = reactive({
   productKey: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
+const exportLoading = ref(false) // 导出加载中
 const viewMode = ref<'card' | 'list'>('card') // 视图模式状态
 
 /** 查询列表 */