diff --git a/.husky/lintstagedrc.js b/.husky/lintstagedrc.js
index a9b439c..623bd6c 100644
--- a/.husky/lintstagedrc.js
+++ b/.husky/lintstagedrc.js
@@ -1,8 +1,16 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-12 14:35:28
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-17 13:17:41
+ * @FilePath: \General-AI-Platform-Web-Client\.husky\lintstagedrc.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 module.exports = {
   "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
   "{!(package)*.json}": ["prettier --write--parser json"],
   "package.json": ["prettier --write"],
-  "*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
-  "*.{vue,css,scss,postcss,less}": ["stylelint --fix", "prettier --write"],
+  "*.vue": ["eslint --fix", "prettier --write"],
+  "*.{vue,css,scss,postcss,less}": ["prettier --write"],
   "*.md": ["prettier --write"]
 };
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 99f21c9..3f5e2ce 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -4,7 +4,6 @@
     "vscode-icons-team.vscode-icons",
     "davidanson.vscode-markdownlint",
     "ms-azuretools.vscode-docker",
-    "stylelint.vscode-stylelint",
     "bradlc.vscode-tailwindcss",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
diff --git a/locales/en.yaml b/locales/en.yaml
index c51ea59..13387ca 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -26,6 +26,7 @@ menus:
   hshome: Workbench
   hsdevice: Device
   hsserver: Server
+  hsalarm: Alarm
   hstest: Test
   hslogin: Login
   hsabnormal: Abnormal Page
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index 431f0ca..a11b6da 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -27,6 +27,7 @@ menus:
   hsdevice: 设备列表
   hsserver: 服务器
   hstest: 测试
+  hsalarm: 告警管理
   hslogin: 登录
   hsabnormal: 异常页面
   hsfourZeroFour: "404"
diff --git a/mock/alarm.ts b/mock/alarm.ts
new file mode 100644
index 0000000..683e2bc
--- /dev/null
+++ b/mock/alarm.ts
@@ -0,0 +1,503 @@
+import { MockMethod } from "vite-plugin-mock";
+
+export default [
+  {
+    url: "/getAlarmList",
+    method: "post",
+    response: () => {
+      return {
+        success: true,
+        data: {
+          list: [
+            {
+              index: 1,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 2,
+              isEnabled: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "监控1",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 3,
+              isEnabled: false,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "监控1",
+              state: "故障",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 4,
+              isEnabled: false,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "控制设备",
+              state: "离线",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 5,
+              isEnabled: true,
+              type: 3,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 6,
+              isEnabled: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 7,
+              isEnabled: false,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "监控1",
+              state: "离线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 8,
+              isEnabled: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "控制设备",
+              state: "故障",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 9,
+              isEnabled: false,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "监控1",
+              state: "离线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 10,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 11,
+              isEnabled: true,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 12,
+              isEnabled: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "监控1",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 13,
+              isEnabled: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              deviceSort: "控制设备",
+              state: "故障",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 14,
+              isEnabled: false,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "控制设备",
+              state: "故障",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 15,
+              isEnabled: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "监控1",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 16,
+              isEnabled: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "控制设备",
+              state: "离线",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 17,
+              isEnabled: false,
+              type: 5,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 18,
+              isEnabled: false,
+              type: 4,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              deviceSort: "监控1",
+              state: "离线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 19,
+              isEnabled: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 20,
+              isEnabled: true,
+              type: 4,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              deviceSort: "控制设备",
+              state: "故障",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 21,
+              isEnabled: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "监控1",
+              state: "在线",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 22,
+              isEnabled: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 23,
+              isEnabled: true,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 24,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "监控1",
+              state: "在线",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 25,
+              isEnabled: false,
+              type: 5,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 26,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "监控1",
+              state: "在线",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 27,
+              isEnabled: true,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 28,
+              isEnabled: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 29,
+              isEnabled: false,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              deviceSort: "监控1",
+              state: "故障",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 30,
+              isEnabled: true,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "控制设备",
+              state: "离线",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 31,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "控制设备",
+              state: "故障",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 32,
+              isEnabled: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "监控1",
+              state: "在线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 33,
+              isEnabled: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 34,
+              isEnabled: false,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 35,
+              isEnabled: false,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "监控1",
+              state: "在线",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 36,
+              isEnabled: false,
+              type: 4,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              deviceSort: "监控1",
+              state: "在线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 37,
+              isEnabled: true,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "控制设备",
+              state: "离线",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 38,
+              isEnabled: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "监控1",
+              state: "故障",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 39,
+              isEnabled: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "控制设备",
+              state: "故障",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 40,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "监控1",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 41,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 42,
+              isEnabled: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "监控1",
+              state: "在线",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 43,
+              isEnabled: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              deviceSort: "控制设备",
+              state: "故障",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 44,
+              isEnabled: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              deviceSort: "监控1",
+              state: "在线",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 45,
+              isEnabled: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "监控1",
+              state: "离线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 46,
+              isEnabled: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "监控1",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 47,
+              isEnabled: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              deviceSort: "控制设备",
+              state: "在线",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 48,
+              isEnabled: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              deviceSort: "监控1",
+              state: "在线",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            }
+          ]
+        }
+      };
+    }
+  }
+] as MockMethod[];
diff --git a/src/router/modules/alarm.ts b/src/router/modules/alarm.ts
new file mode 100644
index 0000000..1158ce8
--- /dev/null
+++ b/src/router/modules/alarm.ts
@@ -0,0 +1,22 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-17 13:24:18
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-17 13:28:02
+ * @FilePath: \General-AI-Platform-Web-Client\src\router\modules\alarm.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { $t } from "@/plugins/i18n";
+
+export default {
+  path: "/alarm",
+  meta: {
+    title: $t("menus.hsalarm"),
+    icon: "icon-gaojingguanli-weixuanzhong",
+    // showLink: false,
+    rank: 5,
+    roles: ["admin", "common"]
+  },
+  component: () => import("@/views/alarm/index.vue"),
+  name: "AlarmList"
+} as RouteConfigsTable;
diff --git a/src/router/modules/demo.ts b/src/router/modules/demo.ts
new file mode 100644
index 0000000..c3ca135
--- /dev/null
+++ b/src/router/modules/demo.ts
@@ -0,0 +1,31 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-17 15:26:20
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-17 16:56:11
+ * @FilePath: \General-AI-Platform-Web-Client\src\router\modules\demo.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { $t } from "@/plugins/i18n";
+
+export default {
+  path: "/demo",
+  redirect: "/demo/baseTable",
+  meta: {
+    title: $t("menus.hstest"),
+    icon: "",
+    showLink: false,
+    rank: 10,
+    roles: ["admin", "common"]
+  },
+  children: [
+    {
+      path: "/demo/baseTable",
+      name: "DemoBaseTable",
+      component: () => import("@/views/demo/baseTable.vue"),
+      meta: {
+        title: "基础表格"
+      }
+    }
+  ]
+} as RouteConfigsTable;
diff --git a/src/views/alarm/index.vue b/src/views/alarm/index.vue
new file mode 100644
index 0000000..df8e061
--- /dev/null
+++ b/src/views/alarm/index.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { getCardList } from "@/api/list";
+import { onMounted, ref, reactive } from "vue";
+defineOptions({
+  name: "AlarmList"
+});
+
+// TODO 根据需要提取到全局 告警等级~
+const alarmLevelStatusEnum: Record<string, any>[] = [
+  {
+    color: "rgba(232, 13, 13, 1)",
+    value: "1",
+    label: "紧急",
+    isDelete: false,
+    icon: "ArrowUpOutlined",
+    id: "1"
+  },
+  {
+    color: "rgba(255, 136, 0, 1)",
+    value: "2",
+    label: "较高",
+    isDelete: false,
+    id: "2"
+  },
+  {
+    color: "rgba(68, 139, 245, 1)",
+    value: "3",
+    label: "一般",
+    isDelete: false,
+    id: "3"
+  },
+  {
+    color: "rgba(179, 214, 0, 1)",
+    value: "4",
+    label: "低",
+    isDelete: true,
+    id: "4"
+  },
+  {
+    color: "rgba(81, 177, 6, 1)",
+    value: "5",
+    label: "较低",
+    isDelete: true,
+    id: "5"
+  },
+  {
+    color: "rgba(43, 183, 136, 1)",
+    value: "6",
+    label: "非常低",
+    isDelete: true,
+    id: "6"
+  }
+];
+
+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 pagination = ref({ current: 1, pageSize: 10, total: 0 });
+
+const deviceList = ref([]);
+
+const searchValue = ref("");
+
+const formData = reactive({
+  deviceSort: "",
+  deviceState: "",
+  isEnabled: ""
+});
+
+const dataLoading = ref(true);
+// const onSubmit = () => {
+//   console.log("submit!");
+// };
+const onPageSizeChange = (size: number) => {
+  pagination.value.pageSize = size;
+  pagination.value.current = 1;
+};
+const onCurrentChange = (current: number) => {
+  pagination.value.current = current;
+};
+const getCardListData = async () => {
+  try {
+    const { data } = await getCardList();
+    deviceList.value = data.list;
+    console.log(data.list);
+    pagination.value = {
+      ...pagination.value,
+      total: data.list.length
+    };
+  } catch (e) {
+    console.log(e);
+  } finally {
+    setTimeout(() => {
+      dataLoading.value = false;
+    }, 500);
+  }
+};
+onMounted(() => {
+  getCardListData();
+});
+</script>
+
+<template>
+  <div class="p-4 main">
+    <el-form :inline="true" :model="formData" class="demo-form-inline">
+      <el-form-item label="告警名称">
+        <el-select
+          v-model="formData.deviceState"
+          placeholder="告警名称"
+          clearable
+        >
+          <el-option label="名称1" value="1" />
+          <el-option label="名称2" value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="告警等级">
+        <el-select
+          v-model="formData.deviceState"
+          placeholder="告警等级"
+          clearable
+        >
+          <el-option
+            v-for="(v, k) in alarmLevelStatusEnum"
+            :key="k"
+            :label="v.label"
+            :value="v.value"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div
+      v-loading="dataLoading"
+      :element-loading-svg="svg"
+      element-loading-svg-view-box="-10, -10, 50, 50"
+    >
+      <el-empty
+        v-show="
+          deviceList
+            .slice(
+              pagination.pageSize * (pagination.current - 1),
+              pagination.pageSize * pagination.current
+            )
+            .filter(v =>
+              v.deviceSort.toLowerCase().includes(searchValue.toLowerCase())
+            ).length === 0
+        "
+        :description="`${searchValue} 产品不存在`"
+      />
+      <template v-if="pagination.total > 0">
+        <el-row :gutter="16">
+          <el-col
+            class="mb-4 w-[100%]"
+            v-for="(device, index) in deviceList
+              .slice(
+                pagination.pageSize * (pagination.current - 1),
+                pagination.pageSize * pagination.current
+              )
+              .filter(v =>
+                v.deviceSort.toLowerCase().includes(searchValue.toLowerCase())
+              )"
+            :key="index"
+            :xs="24"
+            :sm="24"
+            :md="24"
+            :lg="24"
+            :xl="24"
+          >
+            <div>123</div>
+          </el-col>
+        </el-row>
+        <el-pagination
+          v-model:currentPage="pagination.current"
+          class="float-right"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 30]"
+          :background="false"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="onPageSizeChange"
+          @current-change="onCurrentChange"
+        />
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/src/views/demo/baseTable.vue b/src/views/demo/baseTable.vue
new file mode 100644
index 0000000..956e826
--- /dev/null
+++ b/src/views/demo/baseTable.vue
@@ -0,0 +1,75 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-17 16:56:28
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-17 17:04:00
+ * @FilePath: \General-AI-Platform-Web-Client\src\views\demo\baseTable.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+
+<script setup lang="ts">
+import { tableDataMore } from "./data";
+
+defineOptions({
+  name: "DemoBaseTable"
+});
+
+const columns = [
+  {
+    label: "日期",
+    prop: "date",
+    width: "260",
+    fixed: true
+  },
+  {
+    label: "姓名",
+    prop: "name",
+    width: "260"
+  },
+  {
+    label: "地区",
+    prop: "state",
+    width: "260"
+  },
+  {
+    label: "城市",
+    prop: "city",
+    width: "260"
+  },
+  {
+    label: "地址",
+    prop: "address",
+    width: "260"
+  },
+  {
+    label: "邮编",
+    prop: "post-code",
+    width: "260"
+  },
+  {
+    label: "操作",
+    width: "120",
+    fixed: "right",
+    slot: "operation"
+  }
+];
+
+function handleClick(row) {
+  console.log(
+    "%crow===>>>: ",
+    "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+    row
+  );
+}
+</script>
+
+<template>
+  <pure-table :data="tableDataMore" :columns="columns">
+    <template #operation="{ row }">
+      <el-button link type="primary" size="small" @click="handleClick(row)">
+        Detail
+      </el-button>
+      <el-button link type="primary" size="small">Edit</el-button>
+    </template>
+  </pure-table>
+</template>
diff --git a/src/views/demo/data.ts b/src/views/demo/data.ts
new file mode 100644
index 0000000..1d5f99e
--- /dev/null
+++ b/src/views/demo/data.ts
@@ -0,0 +1,297 @@
+import dayjs from "dayjs";
+import { clone } from "@pureadmin/utils";
+
+const date = dayjs(new Date()).format("YYYY-MM-DD");
+
+const tableData = [
+  {
+    date,
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Jack",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Dick",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Harry",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Sam",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Lucy",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Mary",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Mike",
+    address: "No. 189, Grove St, Los Angeles"
+  }
+];
+
+const cloneData = clone(tableData, true);
+
+const tableDataMore = cloneData.map(item =>
+  Object.assign(item, {
+    state: "California",
+    city: "Los Angeles",
+    "post-code": "CA 90036"
+  })
+);
+
+const tableDataImage = cloneData.map((item, index) =>
+  Object.assign(item, {
+    image: `https://pure-admin.github.io/pure-admin-table/imgs/${index + 1}.jpg`
+  })
+);
+
+const tableDataSortable = cloneData.map((item, index) =>
+  Object.assign(item, {
+    date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
+  })
+);
+
+const tableDataExpand = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-08",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-06",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-07",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  }
+];
+
+export {
+  tableData,
+  tableDataMore,
+  tableDataImage,
+  tableDataExpand,
+  tableDataSortable
+};