feat: card list demo (#242)

locales/en.yaml

@@ -74,3 +74,5 @@ menus:
   hsAntTabs: Imitate Antdv Tabs
   hsAntAnchor: Imitate Antdv Anchor
   hsAntTreeSelect: Imitate Antdv TreeSelector
+  list: List Page
+  listCard: Card List page

locales/zh-CN.yaml

@@ -74,3 +74,5 @@ menus:
   hsAntTabs: 仿antdv标签页
   hsAntAnchor: 仿antdv锚点
   hsAntTreeSelect: 仿antdv树型选择器
+  list: 列表页
+  listCard: 卡片列表页

mock/asyncRoutes.ts

@@ -127,7 +127,7 @@ const tabsRouter = {
     icon: "IF-team-icontabs",
     title: "menus.hstabs",
     i18n: true,
-    rank: 12
+    rank: 13
   },
   children: [
     {

mock/list.ts

@@ -0,0 +1,456 @@
+import { MockMethod } from "vite-plugin-mock";
+
+export default [
+  {
+    url: "/getCardList",
+    method: "post",
+    response: () => {
+      return {
+        code: 0,
+        data: {
+          list: [
+            {
+              index: 1,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "SSL证书",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 2,
+              isSetup: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "人脸识别",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 3,
+              isSetup: false,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 4,
+              isSetup: false,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "SSL证书",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 5,
+              isSetup: true,
+              type: 3,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "SSL证书",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 6,
+              isSetup: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 7,
+              isSetup: false,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "CVM",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 8,
+              isSetup: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "SSL证书",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 9,
+              isSetup: false,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "SSL证书",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 10,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 11,
+              isSetup: true,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "云数据库",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 12,
+              isSetup: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "SSL证书",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 13,
+              isSetup: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              name: "云数据库",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 14,
+              isSetup: false,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "SSL证书",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 15,
+              isSetup: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "云数据库",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 16,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "CVM",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 17,
+              isSetup: false,
+              type: 5,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "云数据库",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 18,
+              isSetup: false,
+              type: 4,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "云数据库",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 19,
+              isSetup: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 20,
+              isSetup: true,
+              type: 4,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "SSL证书",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 21,
+              isSetup: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "云数据库",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 22,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              name: "CVM",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 23,
+              isSetup: true,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "人脸识别",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 24,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "人脸识别",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 25,
+              isSetup: false,
+              type: 5,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "CVM",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 26,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "SSL证书",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 27,
+              isSetup: true,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 28,
+              isSetup: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "云数据库",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 29,
+              isSetup: false,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              name: "CVM",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 30,
+              isSetup: true,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 31,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "CVM",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 32,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 33,
+              isSetup: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "CVM",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 34,
+              isSetup: false,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "SSL证书",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 35,
+              isSetup: false,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "云数据库",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 36,
+              isSetup: false,
+              type: 4,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "SSL证书",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 37,
+              isSetup: true,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "CVM",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 38,
+              isSetup: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "云数据库",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 39,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "人脸识别",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 40,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 41,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 42,
+              isSetup: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 43,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              name: "SSL证书",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 44,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "SSL证书",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 45,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 46,
+              isSetup: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "SSL证书",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 47,
+              isSetup: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "SSL证书",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 48,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            }
+          ]
+        },
+        msg: ""
+      };
+    }
+  }
+] as MockMethod[];

src/api/list.ts

@@ -0,0 +1,12 @@
+import { http } from "../utils/http";
+
+interface postType extends Promise<any> {
+  data?: object;
+  code?: number;
+  msg?: string;
+}
+
+// 卡片列表
+export const getCardList = (data?: object): postType => {
+  return http.request("post", "/getCardList", { data });
+};

src/assets/svg/calendar.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar" data-v-7be81122=""><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fillOpacity="0.9"></path></svg>

src/assets/svg/laptop.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-laptop" data-v-7be81122=""><path fill="currentColor" d="M2.5 12a1 1 0 01-1-1V4a1 1 0 011-1h11a1 1 0 011 1v7a1 1 0 01-1 1h-11zm0-1h11V4h-11v7zM15 13H1v1h14v-1z" fillOpacity="0.9"></path></svg>

src/assets/svg/service.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-service" data-v-7be81122=""><path fill="currentColor" d="M2.52 6.37a5.5 5.5 0 0110.98.13v4c0 .05 0 .1-.02.15A4.5 4.5 0 019 14.7H8v-1h1a3.5 3.5 0 003.4-2.7h-1.9a.5.5 0 01-.5-.5v-4c0-.28.22-.5.5-.5h1.93a4.5 4.5 0 00-8.86 0H5.5c.28 0 .5.22.5.5v4a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5v-4c0-.04 0-.09.02-.13zM12.5 7H11v3h1.5V7zm-9 0v3H5V7H3.5z" fillOpacity="0.9"></path></svg>

src/assets/svg/shop.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-shop" data-v-7be81122=""><path fill="currentColor" d="M8 1a2.5 2.5 0 00-2.5 2.5V5h-2a.5.5 0 00-.5.5v9c0 .28.22.5.5.5h9a.5.5 0 00.5-.5v-9a.5.5 0 00-.5-.5h-2V3.5A2.5 2.5 0 008 1zm1.5 5v2h1V6H12v8H4V6h1.5v2h1V6h3zm0-1h-3V3.5a1.5 1.5 0 113 0V5z" fillOpacity="0.9"></path></svg>

src/assets/svg/user_avatar.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-user-avatar" data-v-7be81122=""><path fill="currentColor" d="M8 10.5c1.24 0 2.42.31 3.5.88v1.12h1v-1.14a.94.94 0 00-.49-.84 8.48 8.48 0 00-8.02 0 .94.94 0 00-.49.84v1.14h1v-1.12A7.47 7.47 0 018 10.5zM10.5 6a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm-1 0a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z"></path><path fill="currentColor" d="M2.5 1.5a1 1 0 00-1 1v11a1 1 0 001 1h11a1 1 0 001-1v-11a1 1 0 00-1-1h-11zm11 1v11h-11v-11h11z"></path></svg>

src/components/ReCard/index.ts

@@ -0,0 +1,10 @@
+import { App } from "vue";
+import reCard from "./src/index.vue";
+
+export const ReCard = Object.assign(reCard, {
+  install(app: App) {
+    app.component(reCard.name, reCard);
+  }
+});
+
+export default ReCard;

src/components/ReCard/src/index.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { computed, PropType } from "vue";
+import shopIcon from "/@/assets/svg/shop.svg?component";
+import laptopIcon from "/@/assets/svg/laptop.svg?component";
+import serviceIcon from "/@/assets/svg/service.svg?component";
+import calendarIcon from "/@/assets/svg/calendar.svg?component";
+import userAvatarIcon from "/@/assets/svg/user_avatar.svg?component";
+
+export interface CardProductType {
+  type: number;
+  isSetup: boolean;
+  description: string;
+  name: string;
+}
+
+const props = defineProps({
+  product: {
+    type: Object as PropType<CardProductType>
+  }
+});
+
+const emit = defineEmits(["manage-product", "delete-item"]);
+
+const handleClickManage = (product: CardProductType) => {
+  emit("manage-product", product);
+};
+
+const handleClickDelete = (product: CardProductType) => {
+  emit("delete-item", product);
+};
+
+const cardClass = computed(() => [
+  "list-card-item",
+  { "list-card-item__disabled": !props.product.isSetup }
+]);
+
+const cardLogoClass = computed(() => [
+  "list-card-item_detail--logo",
+  { "list-card-item_detail--logo__disabled": !props.product.isSetup }
+]);
+</script>
+
+<template>
+  <div :class="cardClass">
+    <div class="list-card-item_detail">
+      <el-row justify="space-between">
+        <div :class="cardLogoClass">
+          <shopIcon v-if="product.type === 1" />
+          <calendarIcon v-if="product.type === 2" />
+          <serviceIcon v-if="product.type === 3" />
+          <userAvatarIcon v-if="product.type === 4" />
+          <laptopIcon v-if="product.type === 5" />
+        </div>
+        <div class="list-card-item_detail--operation">
+          <el-tag
+            :color="product.isSetup ? '#00a870' : '#eee'"
+            effect="dark"
+            class="mx-1 list-card-item_detail--operation--tag"
+          >
+            {{ product.isSetup ? "已启用" : "已停用" }}
+          </el-tag>
+          <el-dropdown
+            trigger="click"
+            :disabled="!product.isSetup"
+            max-height="2"
+          >
+            <IconifyIconOffline icon="more-2-fill" class="icon-more" />
+            <template #dropdown>
+              <el-dropdown-menu :disabled="!product.isSetup">
+                <el-dropdown-item @click="handleClickManage(product)"
+                  >管理</el-dropdown-item
+                >
+                <el-dropdown-item @click="handleClickDelete(product)"
+                  >删除</el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </el-row>
+      <p class="list-card-item_detail--name">{{ product.name }}</p>
+      <p class="list-card-item_detail--desc">{{ product.description }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$text-color-disabled: rgba(0, 0, 0, 0.26);
+
+.list-card-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12px;
+  border-radius: 3px;
+  overflow: hidden;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.6);
+
+  &_detail {
+    flex: 1;
+    background: #fff;
+    padding: 24px 32px;
+    min-height: 140px;
+
+    &--logo {
+      width: 56px;
+      height: 56px;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #e0ebff;
+      font-size: 32px;
+      color: #0052d9;
+
+      &__disabled {
+        color: #a1c4ff;
+      }
+    }
+
+    &--operation {
+      display: flex;
+      height: 100%;
+
+      &--tag {
+        border: 0;
+      }
+    }
+
+    .icon-more {
+      font-size: 24px;
+      color: rgba(36, 36, 36, 1);
+    }
+
+    &--name {
+      margin: 24px 0 8px 0;
+      font-size: 16px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.9);
+    }
+
+    &--desc {
+      font-size: 12px;
+      line-height: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      margin-bottom: 24px;
+      height: 40px;
+    }
+  }
+
+  &__disabled {
+    color: $text-color-disabled;
+
+    .icon-more {
+      color: $text-color-disabled;
+    }
+
+    .list-card-item_detail--name {
+      color: $text-color-disabled;
+    }
+
+    .list-card-item_detail--operation--tag {
+      color: #bababa;
+    }
+  }
+}
+</style>

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -71,6 +71,9 @@ import arrowUpLine from "@iconify-icons/ri/arrow-up-line";
 import arrowDownLine from "@iconify-icons/ri/arrow-down-line";
 import bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
 import addFill from "@iconify-icons/ri/add-circle-line";
+import listCheck from "@iconify-icons/ri/list-check";
+import more2Fill from "@iconify-icons/ri/more-2-fill";
+
 addIcon("arrow-right-s-line", arrowRightSLine);
 addIcon("arrow-left-s-line", arrowLeftSLine);
 addIcon("logout-circle-r-line", logoutCircleRLine);
@@ -84,6 +87,8 @@ addIcon("arrow-up-line", arrowUpLine);
 addIcon("arrow-down-line", arrowDownLine);
 addIcon("bookmark-2-line", bookmark2Line);
 addIcon("add", addFill);
+addIcon("list-check", listCheck);
+addIcon("more-2-fill", more2Fill);
 
 // Font Awesome 4
 import faUser from "@iconify-icons/fa/user";

src/router/index.ts

@@ -30,6 +30,7 @@ import {
 
 import homeRouter from "./modules/home";
 import ableRouter from "./modules/able";
+import listRouter from "./modules/list";
 import aboutRouter from "./modules/about";
 import errorRouter from "./modules/error";
 import guideRouter from "./modules/guide";
@@ -44,6 +45,7 @@ import componentsRouter from "./modules/components";
 const routes = [
   homeRouter,
   ableRouter,
+  listRouter,
   aboutRouter,
   errorRouter,
   guideRouter,

src/router/modules/about.ts

@@ -9,7 +9,7 @@ const aboutRouter = {
     icon: "question-line",
     title: $t("menus.hsAbout"),
     i18n: true,
-    rank: 14
+    rank: 15
   },
   children: [
     {

src/router/modules/guide.ts

@@ -9,7 +9,7 @@ const guideRouter = {
     icon: "guide",
     title: $t("menus.hsguide"),
     i18n: true,
-    rank: 13
+    rank: 14
   },
   children: [
     {

src/router/modules/list.ts

@@ -0,0 +1,28 @@
+import { $t } from "/@/plugins/i18n";
+const Layout = () => import("/@/layout/index.vue");
+
+const ableRouter = {
+  path: "/list",
+  component: Layout,
+  redirect: "/list/card",
+  meta: {
+    icon: "list-check",
+    title: $t("menus.list"),
+    i18n: true,
+    rank: 12
+  },
+  children: [
+    {
+      path: "/list/card",
+      name: "listCard",
+      component: () => import("/@/views/list/card/index.vue"),
+      meta: {
+        title: $t("menus.listCard"),
+        i18n: true,
+        showParent: true
+      }
+    }
+  ]
+};
+
+export default ableRouter;

src/views/list/card/components/DialogForm.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { ElMessage, FormInstance } from "element-plus";
+
+const SELECT_OPTIONS = [
+  { label: "网关", value: 1 },
+  { label: "人工智能", value: 2 },
+  { label: "CVM", value: 3 },
+  { label: "防火墙", value: 4 },
+  { label: "未知", value: 5 }
+];
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  data: {
+    type: Object,
+    default: () => {
+      return {};
+    }
+  }
+});
+
+const ruleFormRef = ref<FormInstance>();
+
+const formVisible = ref(false);
+const formData = ref(props.data);
+const textareaValue = ref("");
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate(valid => {
+    if (valid) {
+      ElMessage.success("提交成功");
+      formVisible.value = false;
+      resetForm(formEl);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+const closeDialog = () => {
+  formVisible.value = false;
+  resetForm(ruleFormRef.value);
+};
+
+const emit = defineEmits(["update:visible"]);
+watch(
+  () => formVisible.value,
+  val => {
+    emit("update:visible", val);
+  }
+);
+
+watch(
+  () => props.visible,
+  val => {
+    formVisible.value = val;
+  }
+);
+
+watch(
+  () => props.data,
+  val => {
+    formData.value = val;
+  }
+);
+
+const rules = {
+  name: [{ required: true, message: "请输入产品名称", trigger: "blur" }]
+};
+</script>
+
+<template>
+  <el-dialog
+    v-model="formVisible"
+    title="新建产品"
+    :width="680"
+    :before-close="closeDialog"
+  >
+    <!-- 表单内容 -->
+    <el-form
+      ref="ruleFormRef"
+      :model="formData"
+      :rules="rules"
+      label-width="100px"
+    >
+      <el-form-item label="产品名称" prop="name">
+        <el-input
+          v-model="formData.name"
+          :style="{ width: '480px' }"
+          placeholder="请输入产品名称"
+        />
+      </el-form-item>
+      <el-form-item label="产品状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio label="0">已停用</el-radio>
+          <el-radio label="1">已启用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="产品描述" prop="description">
+        <el-input
+          v-model="formData.description"
+          :style="{ width: '480px' }"
+          placeholder="请输入产品描述"
+        />
+      </el-form-item>
+      <el-form-item label="产品类型" prop="type">
+        <el-select
+          v-model="formData.type"
+          clearable
+          :style="{ width: '480px' }"
+        >
+          <el-option
+            v-for="(item, index) in SELECT_OPTIONS"
+            :key="index"
+            :value="item.value"
+            :label="item.label"
+          >
+            {{ item.label }}
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="mark">
+        <el-input
+          v-model="textareaValue"
+          type="textarea"
+          :style="{ width: '480px' }"
+          placeholder="请输入内容"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="closeDialog">取消</el-button>
+      <el-button type="primary" @click="submitForm(ruleFormRef)"
+        >确定</el-button
+      >
+    </template>
+  </el-dialog>
+</template>

src/views/list/card/index.vue

@@ -0,0 +1,179 @@
+<script lang="ts">
+export default {
+  name: "ListCard"
+};
+</script>
+
+<script setup lang="ts">
+import { getCardList } from "/@/api/list";
+import ReCard from "/@/components/ReCard";
+import { ref, onMounted, nextTick } from "vue";
+import DialogForm from "./components/DialogForm.vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+const svg = `
+        <path class="path" d="
+          M 30 15
+          L 28 17
+          M 25.61 25.61
+          A 15 15, 0, 0, 1, 15 30
+          A 15 15, 0, 1, 1, 27.99 7.5
+          L 15 15
+        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+      `;
+
+const INITIAL_DATA = {
+  name: "",
+  status: "",
+  description: "",
+  type: "",
+  mark: ""
+};
+
+const pagination = ref({ current: 1, pageSize: 12, total: 0 });
+
+const productList = ref([]);
+const dataLoading = ref(true);
+
+const getCardListData = async () => {
+  try {
+    const { data } = await getCardList();
+    productList.value = data.list;
+    pagination.value = {
+      ...pagination.value,
+      total: data.list.length
+    };
+  } catch (e) {
+    console.log(e);
+  } finally {
+    setTimeout(() => {
+      dataLoading.value = false;
+    }, 500);
+  }
+};
+
+onMounted(() => {
+  getCardListData();
+});
+
+const formDialogVisible = ref(false);
+const formData = ref({ ...INITIAL_DATA });
+const searchValue = ref("");
+
+const onPageSizeChange = (size: number) => {
+  pagination.value.pageSize = size;
+  pagination.value.current = 1;
+};
+const onCurrentChange = (current: number) => {
+  pagination.value.current = current;
+};
+const handleDeleteItem = product => {
+  ElMessageBox.confirm(
+    product
+      ? `确认删除后${product.name}的所有产品信息将被清空, 且无法恢复`
+      : "",
+    "提示",
+    {
+      type: "warning"
+    }
+  )
+    .then(() => {
+      ElMessage({
+        type: "success",
+        message: "删除成功"
+      });
+    })
+    .catch(() => {});
+};
+const handleManageProduct = product => {
+  formDialogVisible.value = true;
+  nextTick(() => {
+    formData.value = { ...product, status: product?.isSetup ? "1" : "0" };
+  });
+};
+</script>
+
+<template>
+  <div>
+    <div class="list-card-operation">
+      <el-button @click="formDialogVisible = true"> 新建产品 </el-button>
+      <div class="search-input">
+        <el-input
+          v-model="searchValue"
+          placeholder="请输入你需要搜索的内容"
+          clearable
+        >
+          <template #suffix>
+            <el-icon class="el-input__icon">
+              <IconifyIconOffline v-if="searchValue === ''" icon="search" />
+            </el-icon>
+          </template>
+        </el-input>
+      </div>
+    </div>
+    <div
+      v-loading="dataLoading"
+      :element-loading-svg="svg"
+      element-loading-svg-view-box="-10, -10, 50, 50"
+    >
+      <template v-if="pagination.total > 0">
+        <div class="list-card-items">
+          <el-row :gutter="16">
+            <el-col
+              v-for="product in productList.slice(
+                pagination.pageSize * (pagination.current - 1),
+                pagination.pageSize * pagination.current
+              )"
+              :key="product.index"
+              :xs="24"
+              :sm="12"
+              :md="8"
+              :lg="6"
+              :xl="4"
+            >
+              <ReCard
+                class="list-card-item"
+                :product="product"
+                @delete-item="handleDeleteItem"
+                @manage-product="handleManageProduct"
+              />
+            </el-col>
+          </el-row>
+        </div>
+        <div class="list-card-pagination">
+          <el-pagination
+            v-model:currentPage="pagination.current"
+            :page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[12, 24, 36]"
+            layout="total, sizes, prev, pager, next"
+            @size-change="onPageSizeChange"
+            @current-change="onCurrentChange"
+          />
+        </div>
+      </template>
+    </div>
+    <DialogForm v-model:visible="formDialogVisible" :data="formData" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.list-card {
+  &-operation {
+    display: flex;
+    justify-content: space-between;
+
+    .search-input {
+      width: 360px;
+    }
+  }
+
+  &-items {
+    margin: 14px 0 24px 0;
+  }
+
+  &-pagination {
+    padding: 16px;
+  }
+}
+</style>