fix🐛: 更改主题、修复告警

.gitignore

@@ -11,7 +11,7 @@ node_modules
 .DS_Store
 dist
 bkq-dist*
-bkq-*-dist*
+ai-alert-dist*
 dist-ssr
 coverage
 *.local

src/components/AlarmDrawer/Drawer.vue

@@ -10,10 +10,13 @@
       <!-- <template #footer> Footer </template> -->
       <slot></slot>
       <template #footer>
-        <div class="flex w-full flex-col items-center gap-2 rounded-2xl px-6 py-4">
+        <div
+          class="flex w-full flex-col items-center gap-2 rounded-2xl px-6 py-4"
+        >
           <NRadioGroup
             v-model:value="alarmOk"
             name="radiobuttongroup1"
+            @update:value="handleOkChange"
           >
             <NRadioButton
               v-for="item in handleListAlarmOk"
@@ -34,12 +37,9 @@
               :label="item.label"
             />
           </NRadioGroup>
-          <NButton
-            icon-placement="right"
-            @click="downBtn"
-          >
+          <NButton type="primary" dashed icon-placement="right" @click="downBtn">
             <template #icon>
-              <span class="iconify block ph--download"></span>
+              <span class="iconify block i-lucide-download"></span>
             </template>
             下载报告
           </NButton>
@@ -71,178 +71,208 @@
 </template>
 
 <script setup lang="ts">
-import { NDrawer, NDrawerContent, NSpin, NRadioGroup, NRadioButton, NButton } from 'naive-ui'
-import Viewer from 'viewerjs'
-import 'viewerjs/dist/viewer.css'
-import { provide, reactive, ref, watch, nextTick } from 'vue'
+import {
+  NDrawer,
+  NDrawerContent,
+  NSpin,
+  NRadioGroup,
+  NRadioButton,
+  NButton,
+} from "naive-ui";
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+import { provide, reactive, ref, watch, nextTick } from "vue";
 
-import { useRequest } from '@/api'
-import { useAlarmStore } from '@/stores/modules/alarm'
-import { drawBoundingBox } from '@/utils'
+import { useRequest } from "@/api";
+import { useAlarmStore } from "@/stores/modules/alarm";
+import { drawBoundingBox } from "@/utils";
 
-import type { DrawerPlacement } from 'naive-ui'
-const model = defineModel({ default: false })
-const { API_ALERT_UPDATE_STATUS_POST } = useRequest()
+import type { DrawerPlacement } from "naive-ui";
+const model = defineModel({ default: false });
+const { API_ALERT_UPDATE_STATUS_POST } = useRequest();
 
-const loading = ref(true)
-const currentItem = defineModel<any>('currentItem')
-const alarmStore = useAlarmStore()
+const loading = ref(true);
+const currentItem = defineModel<any>("currentItem");
+const alarmStore = useAlarmStore();
 
-provide('drawerProps', currentItem)
+provide("drawerProps", currentItem);
 
 const styleObj = reactive<Record<string, string>>({
-  transition: 'all 0.5s ease',
-  transform: 'rotate(0) scale(1)',
-})
-const placement = ref<DrawerPlacement>('right')
+  transition: "all 0.5s ease",
+  transform: "rotate(0) scale(1)",
+});
+const placement = ref<DrawerPlacement>("right");
 
-const alarmOk = ref(null)
-const handleOk = ref()
+const alarmOk = ref(null);
+const handleOk = ref();
 
 const handleListAlarmOk = ref([
   {
-    icon: 'iconify-[mdi--rotate-left]',
-    label: '正确报警',
-    value: 4,
+    icon: "iconify-[mdi--rotate-left]",
+    label: "正确报警",
+    value: 1,
   },
   {
-    icon: 'iconify-[mdi--rotate-right]',
-    label: '错误报警',
-    value: 5,
+    icon: "iconify-[mdi--rotate-right]",
+    label: "错误报警",
+    value: 2,
   },
-])
+]);
 const handleOkList = ref([
   {
-    icon: 'iconify-[mdi--rotate-left]',
-    label: '已处理',
+    icon: "iconify-[mdi--rotate-left]",
+    label: "已处理",
     value: 3,
   },
   {
-    icon: 'iconify-[mdi--rotate-right]',
-    label: '未处理',
+    icon: "iconify-[mdi--rotate-right]",
+    label: "未处理",
     value: 0,
   },
-])
+]);
 
-const handleOkChange = async (val: number) => {
+const handleOkChange = async () => {
   await API_ALERT_UPDATE_STATUS_POST({
     alert_id: currentItem.value.EventID, //必传
-    status: val, //必传
+    status: handleOk.value, //必传
+    is_valid: alarmOk.value, //必传
     event_time: currentItem.value.EventTime, //必传
-  })
-  currentItem.value.Status = val
-}
+  });
+  currentItem.value.Status = handleOk.value;
+  currentItem.value.IsValid = alarmOk.value;
+};
 const imgLoad = () => {
-  loading.value = false
-}
+  loading.value = false;
+};
 
-let viewer: any = null
+let viewer: any = null;
 const showImage = () => {
   nextTick(() => {
-    viewer = new Viewer(document.getElementById('image-viewer') as HTMLImageElement, {
-      url() {
-        return currentItem.value.img
-      },
-      button: false,
-      inline: true,
-      title: false,
-      backdrop: false,
-      navbar: false,
-      toolbar: {
-        zoomIn: {
-          show: 1,
-          size: 'large',
-        },
-        zoomOut: {
-          show: 1,
-          size: 'large',
-        },
-        oneToOne: {
-          show: 1,
-          size: 'large',
-        },
-        reset: {
-          show: 1,
-          size: 'large',
-        },
-        prev: {
-          show: 0,
-          size: 'large',
-        },
-        play: {
-          show: 1,
-          size: 'large',
-        },
-        next: {
-          show: 0,
-          size: 'large',
+    viewer = new Viewer(
+      document.getElementById("image-viewer") as HTMLImageElement,
+      {
+        url() {
+          return currentItem.value.img;
         },
-        rotateLeft: {
-          show: 0,
+        button: false,
+        inline: true,
+        title: false,
+        backdrop: false,
+        navbar: false,
+        toolbar: {
+          zoomIn: {
+            show: 1,
+            size: "large",
+          },
+          zoomOut: {
+            show: 1,
+            size: "large",
+          },
+          oneToOne: {
+            show: 1,
+            size: "large",
+          },
+          reset: {
+            show: 1,
+            size: "large",
+          },
+          prev: {
+            show: 0,
+            size: "large",
+          },
+          play: {
+            show: 1,
+            size: "large",
+          },
+          next: {
+            show: 0,
+            size: "large",
+          },
+          rotateLeft: {
+            show: 0,
+          },
+          rotateRight: {
+            show: 0,
+          },
+          flipHorizontal: {
+            show: 1,
+            size: "large",
+          },
+          flipVertical: {
+            show: 1,
+            size: "large",
+          },
+          // download: {
+          //   show: 1,
+          //   size: 'large',
+          //   click: function () {},
+          // },
         },
-        rotateRight: {
-          show: 0,
+        viewed() {
+          nextTick(() => {
+            viewer.zoomTo(1, true);
+            viewer.moveTo(
+              -currentItem.value.X + 400,
+              -currentItem.value.Y + 400,
+            );
+          });
         },
-        flipHorizontal: {
-          show: 1,
-          size: 'large',
-        },
-        flipVertical: {
-          show: 1,
-          size: 'large',
-        },
-        // download: {
-        //   show: 1,
-        //   size: 'large',
-        //   click: function () {},
-        // },
-      },
-      viewed() {
-        nextTick(() => {
-          viewer.zoomTo(1, true)
-          viewer.moveTo(-currentItem.value.X + 400, -currentItem.value.Y + 400)
-        })
       },
-    })
-  })
-}
+    );
+  });
+};
 
 const downBtn = () => {
-  UrlDownload(currentItem.value.ImgUrl)
+  console.log(currentItem.value);
+
+  UrlDownload(currentItem.value.ImgUrl);
   setTimeout(() => {
     UrlDownload(
       `${alarmStore.ip}/api/alert/DownloadAlert?keyword=${currentItem.value.ID ? currentItem.value.ID : currentItem.value.alert_id}`,
-    )
-  }, 500)
-}
+    );
+  }, 500);
+};
 
 async function UrlDownload(url: string) {
-  const link = document.createElement('a')
-  link.href = url // 替换为实际的文件 URL
-  link.style.display = 'none'
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
+  try {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    const blobUrl = window.URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.href = blobUrl;
+    link.style.display = "none";
+    link.download = url.includes('.jpg')
+      ? `${currentItem.value.EventTimeFormat}.jpg`
+      : `${currentItem.value.EventTimeFormat}.json`; // 设置下载的文件名
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    // 释放内存
+    window.URL.revokeObjectURL(blobUrl);
+  } catch (error) {
+    console.error("下载失败:", error);
+  }
 }
 
 watch(model, (v) => {
   if (v) {
     if (!currentItem.value.img) {
       drawBoundingBox(currentItem.value).then((res: any) => {
-        currentItem.value.img = res
-        showImage()
-      })
+        currentItem.value.img = res;
+        showImage();
+      });
     } else {
-      showImage()
+      showImage();
     }
 
-    console.log(currentItem.value.Status);
-
-    handleOk.value = Number(currentItem.value.Status)
+    alarmOk.value = Number(currentItem.value.IsValid);
+    handleOk.value = Number(currentItem.value.Status);
   } else {
-    viewer.destroy()
+    viewer.destroy();
   }
-})
+});
 </script>
 <style>
 .viewer-toolbar > ul {
@@ -264,6 +294,6 @@ watch(model, (v) => {
 }
 
 .viewer-download::before {
-  content: '\f019';
+  content: "\f019";
 }
 </style>

src/theme/dark.ts

@@ -4,41 +4,41 @@ import twc from './tailwindColor'
 import type { GlobalThemeOverrides } from 'naive-ui'
 
 const DARK = {
-  baseColor: twc.neutral[250],
-  textColorBase: twc.neutral[250],
-  textColor1: twc.neutral[350],
-  textColor2: twc.neutral[350],
-  textColor3: twc.neutral[450],
-  borderColor: twc.neutral[800],
+  baseColor: twc.blue[950], // 修改基础颜色为深蓝色
+  textColorBase: twc.gray[50], // 文字颜色改为白色以提高对比度
+  textColor1: twc.gray[200],
+  textColor2: twc.gray[300],
+  textColor3: twc.gray[400],
+  borderColor: twc.blue[900],
 }
 
 const closeIconColor = (primaryColor: string) => {
   return {
-    closeIconColorSuccess: twc.lime[600],
-    closeIconColorInfo: twc.sky[600],
-    closeIconColorWarning: twc.amber[600],
-    closeIconColorError: twc.pink[600],
+    closeIconColorSuccess: twc.green[500],
+    closeIconColorInfo: twc.blue[400],
+    closeIconColorWarning: twc.orange[400],
+    closeIconColorError: twc.red[400],
     closeIconColorLoading: primaryColor,
 
-    closeColorHoverSuccess: cah(twc.lime[500], 0.1),
-    closeIconColorHoverSuccess: cdh(twc.lime[500], 0.2),
-    closeColorPressedSuccess: cah(twc.lime[500], 0.16),
-    closeIconColorPressedSuccess: cdh(twc.lime[500], 0.6),
+    closeColorHoverSuccess: cah(twc.green[500], 0.1),
+    closeIconColorHoverSuccess: cdh(twc.green[500], 0.2),
+    closeColorPressedSuccess: cah(twc.green[500], 0.16),
+    closeIconColorPressedSuccess: cdh(twc.green[500], 0.6),
 
-    closeColorHoverInfo: cah(twc.sky[500], 0.1),
-    closeIconColorHoverInfo: cdh(twc.sky[500], 0.2),
-    closeColorPressedInfo: cah(twc.sky[500], 0.16),
-    closeIconColorPressedInfo: cdh(twc.sky[500], 0.6),
+    closeColorHoverInfo: cah(twc.blue[400], 0.1),
+    closeIconColorHoverInfo: cdh(twc.blue[400], 0.2),
+    closeColorPressedInfo: cah(twc.blue[400], 0.16),
+    closeIconColorPressedInfo: cdh(twc.blue[400], 0.6),
 
-    closeColorHoverWarning: cah(twc.amber[500], 0.1),
-    closeIconColorHoverWarning: cdh(twc.amber[500], 0.2),
-    closeColorPressedWarning: cah(twc.amber[500], 0.16),
-    closeIconColorPressedWarning: cdh(twc.amber[500], 0.6),
+    closeColorHoverWarning: cah(twc.orange[400], 0.1),
+    closeIconColorHoverWarning: cdh(twc.orange[400], 0.2),
+    closeColorPressedWarning: cah(twc.orange[400], 0.16),
+    closeIconColorPressedWarning: cdh(twc.orange[400], 0.6),
 
-    closeColorHoverError: cah(twc.pink[500], 0.14),
-    closeIconColorHoverError: cdh(twc.pink[500], 0.2),
-    closeColorPressedError: cah(twc.pink[500], 0.16),
-    closeIconColorPressedError: cdh(twc.pink[500], 0.6),
+    closeColorHoverError: cah(twc.red[400], 0.14),
+    closeIconColorHoverError: cdh(twc.red[400], 0.2),
+    closeColorPressedError: cah(twc.red[400], 0.16),
+    closeIconColorPressedError: cdh(twc.red[400], 0.6),
 
     closeColorHoverLoading: cah(primaryColor, 0.14),
     closeIconColorHoverLoading: cdh(primaryColor, 0.2),
@@ -47,135 +47,113 @@ const closeIconColor = (primaryColor: string) => {
   }
 }
 
-export function baseDarkThemeOverrides(primaryColor = ''): GlobalThemeOverrides {
+export function baseDarkThemeOverrides(primaryColor = twc.blue[500]): GlobalThemeOverrides {
   return {
     common: {
       baseColor: DARK.baseColor,
-
       textColorBase: DARK.textColorBase,
-
       textColor1: DARK.textColor1,
-
       textColor2: DARK.textColor2,
-
       textColor3: DARK.textColor3,
-
-      bodyColor: twc.neutral[950],
-
-      borderColor: DARK.borderColor,
-
-      cardColor: twc.neutral[900],
-
-      hoverColor: twc.neutral[650],
-
-      modalColor: twc.neutral[800],
-
-      popoverColor: twc.neutral[750],
-
-      scrollbarColor: twc.neutral[800],
-      scrollbarColorHover: twc.neutral[750],
-
-      closeIconColor: cbh(twc.neutral[400], 0.2),
-      closeColorHover: cah(twc.neutral[400], 0.1),
-      closeIconColorPressed: twc.neutral[400],
-      closeColorPressed: cah(twc.neutral[400], 0.14),
-
-      infoColor: twc.sky[650],
-      infoColorHover: cdh(twc.sky[650], 0.1),
-      infoColorPressed: cdh(twc.sky[650], 0.2),
-      infoColorSuppl: twc.sky[650],
-
-      successColor: twc.lime[650],
-      successColorHover: cdh(twc.lime[650], 0.1),
-      successColorPressed: cdh(twc.lime[650], 0.2),
-      successColorSuppl: twc.lime[650],
-
-      warningColor: twc.amber[650],
-      warningColorHover: cdh(twc.amber[650], 0.1),
-      warningColorPressed: cdh(twc.amber[650], 0.2),
-      warningColorSuppl: twc.amber[650],
-
-      errorColor: twc.pink[650],
-      errorColorHover: cdh(twc.pink[650], 0.1),
-      errorColorPressed: cdh(twc.pink[650], 0.2),
-      errorColorSuppl: twc.pink[650],
+      bodyColor: twc.blue[950], // 修改背景色为深蓝色
+      cardColor: twc.blue[850], // 修改卡片颜色为科技蓝
+      hoverColor: twc.blue[700],
+      modalColor: twc.blue[800], // 修改模态框颜色为科技蓝
+      popoverColor: twc.blue[750], // 修改弹出框颜色为科技蓝
+      scrollbarColor: twc.blue[800],
+      scrollbarColorHover: twc.blue[750],
+      closeIconColor: cbh(twc.blue[400], 0.2),
+      closeColorHover: cah(twc.blue[400], 0.1),
+      closeIconColorPressed: twc.blue[400],
+      closeColorPressed: cah(twc.blue[400], 0.14),
+      infoColor: twc.blue[600],
+      infoColorHover: cdh(twc.blue[600], 0.1),
+      infoColorPressed: cdh(twc.blue[600], 0.2),
+      infoColorSuppl: twc.blue[600],
+      successColor: twc.green[600],
+      successColorHover: cdh(twc.green[600], 0.1),
+      successColorPressed: cdh(twc.green[600], 0.2),
+      successColorSuppl: twc.green[600],
+      warningColor: twc.orange[600],
+      warningColorHover: cdh(twc.orange[600], 0.1),
+      warningColorPressed: cdh(twc.orange[600], 0.2),
+      warningColorSuppl: twc.orange[600],
+      errorColor: twc.red[600],
+      errorColorHover: cdh(twc.red[600], 0.1),
+      errorColorPressed: cdh(twc.red[600], 0.2),
+      errorColorSuppl: twc.red[600],
     },
     Alert: {
       ...closeIconColor(primaryColor),
     },
     Button: {
-      textColorSuccess: twc.lime[50],
-
-      textColorInfo: twc.sky[50],
-
-      textColorWarning: twc.amber[50],
-
-      textColorError: twc.pink[50],
+      textColorSuccess: twc.green[50],
+      textColorInfo: twc.blue[50],
+      textColorWarning: twc.orange[50],
+      textColorError: twc.red[50],
     },
     Card: {
       borderColor: DARK.borderColor,
     },
     Checkbox: {
       common: {
-        borderColor: twc.neutral[700],
+        borderColor: twc.blue[700],
       },
     },
     DataTable: {
       borderColor: DARK.borderColor,
-      tdColor: twc.neutral[900],
-      tdColorHover: cbh(twc.neutral[850], 0.06),
-      thColor: twc.neutral[850],
+      tdColor: twc.blue[950], // 修改表格颜色为科技蓝
+      tdColorHover: cbh(twc.blue[900], 0.06),
+      thColor: twc.blue[900],
     },
     Divider: {
-      color: cdh(twc.neutral[750], 0.24),
+      color: cdh(twc.blue[750], 0.24),
     },
     Drawer: {
-      footerBorderTop: `1px solid ${twc.neutral[750]}`,
-      headerBorderBottom: `1px solid ${twc.neutral[750]}`,
+      footerBorderTop: `1px solid ${twc.blue[750]}`,
+      headerBorderBottom: `1px solid ${twc.blue[750]}`,
       peers: {
         Scrollbar: {
-          color: twc.neutral[750],
-          colorHover: twc.neutral[700],
+          color: twc.blue[750],
+          colorHover: twc.blue[700],
         },
       },
     },
     Menu: {
-      itemColorHover: twc.neutral[800],
+      itemColorHover: twc.blue[800],
     },
     Message: {
-      textColorSuccess: twc.lime[500],
-      textColorInfo: twc.sky[500],
-      textColorWarning: twc.amber[500],
-      textColorError: twc.pink[500],
+      textColorSuccess: twc.green[500],
+      textColorInfo: twc.blue[500],
+      textColorWarning: twc.orange[500],
+      textColorError: twc.red[500],
       textColorLoading: primaryColor,
-
-      colorSuccess: cmh(twc.neutral[750], twc.lime[950], 0.06),
-      colorInfo: cmh(twc.neutral[750], twc.sky[950], 0.06),
-      colorWarning: cmh(twc.neutral[750], twc.amber[950], 0.06),
-      colorError: cmh(twc.neutral[750], twc.pink[950], 0.06),
-      colorLoading: cmh(twc.neutral[750], primaryColor, 0.01),
-
+      colorSuccess: cmh(twc.blue[750], twc.green[950], 0.06),
+      colorInfo: cmh(twc.blue[750], twc.blue[950], 0.06),
+      colorWarning: cmh(twc.blue[750], twc.orange[950], 0.06),
+      colorError: cmh(twc.blue[750], twc.red[950], 0.06),
+      colorLoading: cmh(twc.blue[750], primaryColor, 0.01),
       ...closeIconColor(primaryColor),
     },
     Modal: {
       peers: {
         Scrollbar: {
-          color: twc.neutral[800],
-          colorHover: twc.neutral[750],
+          color: twc.blue[800],
+          colorHover: twc.blue[750],
         },
       },
     },
     Notification: {
       peers: {
         Scrollbar: {
-          color: twc.neutral[750],
-          colorHover: twc.neutral[700],
+          color: twc.blue[750],
+          colorHover: twc.blue[700],
         },
       },
     },
     Radio: {
       common: {
-        borderColor: twc.neutral[700],
+        borderColor: twc.blue[700],
       },
     },
     Select: {
@@ -183,15 +161,15 @@ export function baseDarkThemeOverrides(primaryColor = ''): GlobalThemeOverrides
         InternalSelectMenu: {
           peers: {
             Scrollbar: {
-              color: twc.neutral[700],
-              colorHover: twc.neutral[650],
+              color: twc.blue[700],
+              colorHover: twc.blue[650],
             },
           },
         },
       },
     },
     Upload: {
-      draggerColor: twc.neutral[850],
+      draggerColor: twc.blue[850],
     },
   }
-}
+}

src/views/Home/Home.vue

@@ -148,6 +148,7 @@ const formatData = async (list: any[]) => {
         "YYYY-MM-DD HH:mm:ss",
       ),
       ID: item.alert_id,
+      IsValid: item.is_valid,
       // ImgUrlClip: data ? data[i] : "",
       ImgUrl: getFileUrl(item.image_file_name),
       Targets: item.targets.map((t: any) => ({
@@ -245,10 +246,10 @@ provide("getDataList", getDataList);
 </script>
 
 <template>
-  <div class="max-h-screen h-screen flex flex-col bg-[#0a0a0a] p-6 text-slate-200">
+  <div class="max-h-screen h-screen flex flex-col bg-bl p-6 text-slate-200">
     <!-- 头部：统计与面包屑 -->
     <header
-      class="flex justify-between items-center mb-2 bg-[#141414] p-5 rounded-2xl border border-white/5 shadow-2xl"
+      class="flex justify-between items-center mb-2 bg-[#1D2F5E] p-5 rounded-2xl border border-white/5 shadow-2xl"
     >
       <div class="flex items-center gap-4">
         <div
@@ -293,7 +294,7 @@ provide("getDataList", getDataList);
 
     <!-- 过滤与搜索工具栏 -->
     <section
-      class="flex flex-wrap items-center justify-between gap-4 mb-2 bg-[#141414]/50 p-4 rounded-xl border border-white/5 backdrop-blur-md"
+      class="flex flex-wrap items-center justify-between gap-4 mb-2 bg-[#1D2F5E] p-4 rounded-2xl border border-white/5 backdrop-blur-md"
     >
       <NForm
         ref="formRef"
@@ -305,15 +306,25 @@ provide("getDataList", getDataList);
         <n-grid
           :x-gap="12"
           :y-gap="8"
-          cols="2 m:2 l:5"
+          cols="2 s:2 l:5"
           item-responsive
           responsive="screen"
           class="items-center"
         >
-          <n-form-item-gi span="1" label="事件编号" path="keyword">
+          <n-form-item-gi
+            span="1"
+            label="事件编号"
+            path="keyword"
+            :show-feedback="false"
+          >
             <NInput v-model:value="searchForm.keyword" clearable />
           </n-form-item-gi>
-          <n-form-item-gi span="1" label="告警状态" path="status">
+          <n-form-item-gi
+            span="1"
+            label="告警状态"
+            path="status"
+            :show-feedback="false"
+          >
             <NSelect
               v-model:value="searchForm.status"
               :options="statusOptions"
@@ -321,10 +332,20 @@ provide("getDataList", getDataList);
               clearable
             />
           </n-form-item-gi>
-          <n-form-item-gi span="1" label="相机名称" path="usb_camera_index">
+          <n-form-item-gi
+            span="1"
+            label="相机名称"
+            path="usb_camera_index"
+            :show-feedback="false"
+          >
             <NInput v-model:value="searchForm.usb_camera_index" clearable />
           </n-form-item-gi>
-          <n-form-item-gi span="1" label="时间范围" path="status">
+          <n-form-item-gi
+            span="1"
+            label="时间范围"
+            path="status"
+            :show-feedback="false"
+          >
             <NDatePicker
               ref="nDatePickerRef"
               type="datetimerange"
@@ -341,6 +362,7 @@ provide("getDataList", getDataList);
           <n-form-item-gi
             span="2 l:1 s:2"
             class="flex items-center justify-end"
+            :show-feedback="false"
           >
             <n-button type="primary" size="medium" @click="getDataList">
               <template #icon>
@@ -348,7 +370,7 @@ provide("getDataList", getDataList);
               </template>
               搜索
             </n-button>
-            <div class="h-6 w-px bg-white/10 mx-2" />
+            <div class="h-6 w-px bg-blue/10 mx-2" />
             <!-- 布局切换按钮 -->
             <n-radio-group
               v-model:value="viewMode"
@@ -407,7 +429,4 @@ provide("getDataList", getDataList);
 
 <style scoped>
 /* Naive UI 深色主题微调 */
-:deep(.n-card) {
-  --n-color: #141414;
-}
 </style>

src/views/Home/components/gridData.vue

@@ -36,7 +36,7 @@ function formatScore(s: number | undefined) {
       <n-card
         hoverable
         content-style="padding: 0"
-        class="bg-[#141414]! border-white/5! rounded-xl! overflow-hidden"
+        class="bg-[#283F7E]! border-white/5! rounded-xl! overflow-hidden"
       >
         <n-skeleton loading show-avatar show-title :paragraph="{ rows: 3 }" />
       </n-card>
@@ -46,7 +46,7 @@ function formatScore(s: number | undefined) {
       <n-card
         hoverable
         content-style="padding: 0"
-        class="bg-[#141414]! border-white/5! rounded-xl! overflow-hidden group hover:border-primary/50! transition-all duration-300"
+        class="bg-[#283F7E]! border-white/5! rounded-xl! overflow-hidden group hover:border-primary/50! transition-all duration-300"
       >
         <!-- 缩略图 -->
         <div class="relative aspect-video bg-black/40 overflow-hidden">

src/views/Home/components/tableData.vue

@@ -65,7 +65,6 @@ const columns: DataTableColumns<AlarmInfo> = [
   },
   {
     key: "Type",
-    width: 160,
     align: "center",
     title: "告警类型",
     render: (row) => {
@@ -110,6 +109,7 @@ const columns: DataTableColumns<AlarmInfo> = [
     key: "EventTimeFormat",
     title: "告警时间",
     align: "center",
+    resizable: true,
     defaultSortOrder: "descend",
     sorter: (row1, row2) => row1.EventTimeFormat - row2.EventTimeFormat,
     customNextSortOrder: (order) => {

vite.config.ts

@@ -14,12 +14,12 @@ import Unocss from "unocss/vite";
 import minipic from "vite-plugin-imagemin";
 // import { visualizer } from 'rollup-plugin-visualizer'
 
-const outDir = `bkq-xyy-dist2.0.1.build${new Date().getFullYear()}${new Date().getMonth() + 1}${new Date().getDate()}`;
+const outDir = `ai-alert-dist2.0.1.build${new Date().getFullYear()}${new Date().getMonth() + 1}${new Date().getDate()}`;
 // https://vitejs.dev/config/
 export default ({ mode }) => {
   // const env = loadEnv(mode, process.cwd())
   return defineConfig({
-    base: "/foreground/",
+    base: "/alert/",
     build: {
       outDir,
       sourcemap: false,