skycurtain/ndm-web-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 更新图标库为 lucide

Browse Source
This commit is contained in:
yangsy
2026-01-13 11:10:12 +08:00
parent b392328f37
commit bd6ad9b932
11 changed files with 62 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@@ -28,6 +28,7 @@
"echarts": "^6.0.0",
"es-toolkit": "^1.41.0",
"localforage": "^1.10.0",
"lucide-vue-next": "^0.562.0",
"naive-ui": "^2.43.1",
"pinia": "^3.0.4",
"pinia-plugin-persistedstate": "^4.7.1",
@@ -40,8 +41,6 @@
"@tsconfig/node22": "^22.0.2",
"@types/crypto-js": "^4.2.2",
"@types/node": "^22.18.11",
"@vicons/antd": "^0.13.0",
"@vicons/ionicons5": "^0.13.0",
"@vitejs/plugin-vue": "^6.0.1",
"@vitejs/plugin-vue-jsx": "^5.1.1",
"@vue/eslint-config-prettier": "^10.2.0",
@@ -58,5 +57,5 @@
"vite-plugin-vue-devtools": "^8.0.3",
"vue-tsc": "^3.1.3"
},
"packageManager": "pnpm@10.20.0+sha512.cf9998222162dd85864d0a8102e7892e7ba4ceadebbf5a31f9c2fce48dfce317a9c53b9f6464d1ef9042cba2e02ae02a9f7c143a2b438cd93c91840f0192b9dd"
"packageManager": "pnpm@10.28.0+sha512.05df71d1421f21399e053fde567cea34d446fa02c76571441bfc1c7956e98e363088982d940465fd34480d4d90a0668bc12362f8aa88000a64e83d0b0e47be48"
}

28
pnpm-lock.yaml generated
View File

@@ -44,6 +44,9 @@ importers:
localforage:
specifier: ^1.10.0
version: 1.10.0
lucide-vue-next:
specifier: ^0.562.0
version: 0.562.0(vue@3.5.24(typescript@5.9.3))
naive-ui:
specifier: ^2.43.1
version: 2.43.1(vue@3.5.24(typescript@5.9.3))
@@ -75,12 +78,6 @@ importers:
'@types/node':
specifier: ^22.18.11
version: 22.19.1
'@vicons/antd':
specifier: ^0.13.0
version: 0.13.0
'@vicons/ionicons5':
specifier: ^0.13.0
version: 0.13.0
'@vitejs/plugin-vue':
specifier: ^6.0.1
version: 6.0.1(vite@7.2.2(@types/node@22.19.1)(jiti@2.6.1)(sass@1.94.0)(tsx@4.20.6))(vue@3.5.24(typescript@5.9.3))
@@ -845,12 +842,6 @@ packages:
resolution: {integrity: sha512-/++5CYLQqsO9HFGLI7APrxBJYo+5OCMpViuhV8q5/Qa3o5mMrF//eQHks+PXcsAVaLdn817fMuS7zqoXNNZGaw==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@vicons/antd@0.13.0':
resolution: {integrity: sha512-yrUGoUSz2BbGupk9ghQOahc04n5H3MwUDM9pVPsLh9U1uqB47oRWZvYRiZaT1JKPqgTgSE6BXcVw4i9MOF4M+g==}
'@vicons/ionicons5@0.13.0':
resolution: {integrity: sha512-zvZKBPjEXKN7AXNo2Na2uy+nvuv6SP4KAMQxpKL2vfHMj0fSvuw7JZcOPCjQC3e7ayssKnaoFVAhbYcW6v41qQ==}
'@vitejs/plugin-vue-jsx@5.1.1':
resolution: {integrity: sha512-uQkfxzlF8SGHJJVH966lFTdjM/lGcwJGzwAHpVqAPDD/QcsqoUGa+q31ox1BrUfi+FLP2ChVp7uLXE3DkHyDdQ==}
engines: {node: ^20.19.0 || >=22.12.0}
@@ -1636,6 +1627,11 @@ packages:
lru-cache@5.1.1:
resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
lucide-vue-next@0.562.0:
resolution: {integrity: sha512-LN0BLGKMFulv0lnfK29r14DcngRUhIqdcaL0zXTt2o0oS9odlrjCGaU3/X9hIihOjjN8l8e+Y9G/famcNYaI7Q==}
peerDependencies:
vue: '>=3.0.1'
magic-string@0.30.21:
resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
@@ -2871,10 +2867,6 @@ snapshots:
'@typescript-eslint/types': 8.46.4
eslint-visitor-keys: 4.2.1
'@vicons/antd@0.13.0': {}
'@vicons/ionicons5@0.13.0': {}
'@vitejs/plugin-vue-jsx@5.1.1(vite@7.2.2(@types/node@22.19.1)(jiti@2.6.1)(sass@1.94.0)(tsx@4.20.6))(vue@3.5.24(typescript@5.9.3))':
dependencies:
'@babel/core': 7.28.5
@@ -3701,6 +3693,10 @@ snapshots:
dependencies:
yallist: 3.1.1
lucide-vue-next@0.562.0(vue@3.5.24(typescript@5.9.3)):
dependencies:
vue: 3.5.24(typescript@5.9.3)
magic-string@0.30.21:
dependencies:
'@jridgewell/sourcemap-codec': 1.5.5

10
src/components/device/device-card/components/current-diag/device-hardware-card.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ClockCircleOutlined, CodeOutlined, FireOutlined, SaveOutlined } from '@vicons/antd';
import { ClockCheckIcon, CpuIcon, HardDriveIcon, MemoryStickIcon } from 'lucide-vue-next';
import { NCard, NFlex, NIcon, NProgress, type ProgressStatus } from 'naive-ui';
import { computed, toRefs } from 'vue';
@@ -54,22 +54,22 @@ const getProgressStatus = (percent: number): ProgressStatus => {
<template #default>
<NFlex vertical>
<NFlex v-if="cpuUsage" style="width: 100%" align="center" :wrap="false">
<NIcon :component="FireOutlined" />
<NIcon :component="CpuIcon" />
<span style="word-break: keep-all">{{ cpuUsageLabel || 'CPU' }}</span>
<NProgress :percentage="cpuPercent" :status="getProgressStatus(cpuPercent)">{{ cpuPercent }}%</NProgress>
</NFlex>
<NFlex v-if="memUsage" style="width: 100%" align="center" :wrap="false">
<NIcon :component="CodeOutlined" />
<NIcon :component="MemoryStickIcon" />
<span style="word-break: keep-all">{{ memUsageLabel || '内存' }}</span>
<NProgress :percentage="memPercent" :status="getProgressStatus(memPercent)">{{ memPercent }}%</NProgress>
</NFlex>
<NFlex v-if="diskUsage" style="width: 100%" align="center" :wrap="false">
<NIcon :component="SaveOutlined" />
<NIcon :component="HardDriveIcon" />
<span style="word-break: keep-all">{{ diskUsageLabel || '磁盘' }}</span>
<NProgress :percentage="diskPercent" :status="getProgressStatus(diskPercent)">{{ diskPercent }}%</NProgress>
</NFlex>
<NFlex v-if="runningTime" style="width: 100%" align="center" :wrap="false">
<NIcon :component="ClockCircleOutlined" />
<NIcon :component="ClockCheckIcon" />
<span>{{ runningTimeLabel || '运行时间' }}</span>
<span>{{ formattedRunningTime }}</span>
</NFlex>

6
src/components/device/device-card/components/current-diag/device-header-card.vue
View File

@@ -5,9 +5,9 @@ import { DEVICE_TYPE_LITERALS, DEVICE_TYPE_NAMES, tryGetDeviceType } from '@/enu
import { useDeviceStore } from '@/stores';
import { parseErrorFeedback } from '@/utils';
import { useMutation } from '@tanstack/vue-query';
import { ApiOutlined, ReloadOutlined } from '@vicons/antd';
import { isCancel } from 'axios';
import destr from 'destr';
import { LinkIcon, RotateCwIcon } from 'lucide-vue-next';
import { NButton, NCard, NFlex, NIcon, NTag, NTooltip } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { computed, inject, onBeforeUnmount, ref, toRefs } from 'vue';
@@ -152,7 +152,7 @@ onBeforeUnmount(() => {
<template #trigger>
<NButton size="small" quaternary circle :loading="probing" @click="() => probeDevice()">
<template #icon>
<NIcon :component="ApiOutlined" />
<NIcon :component="LinkIcon" />
</template>
</NButton>
</template>
@@ -164,7 +164,7 @@ onBeforeUnmount(() => {
<template #trigger>
<NButton size="small" quaternary circle :loading="loading" @click="() => detailDevice()">
<template #icon>
<NIcon :component="ReloadOutlined" />
<NIcon :component="RotateCwIcon" />
</template>
</NButton>
</template>

7
src/components/device/device-card/components/current-diag/nvr-record-card.vue
View File

@@ -4,9 +4,9 @@ import { exportRecordDiagCsv, transformRecordChecks } from '@/helpers';
import { useStationStore } from '@/stores';
import { parseErrorFeedback } from '@/utils';
import { useMutation } from '@tanstack/vue-query';
import { DownloadOutlined, ReloadOutlined } from '@vicons/antd';
import { isCancel } from 'axios';
import dayjs from 'dayjs';
import { DownloadIcon, RotateCwIcon } from 'lucide-vue-next';
import { NButton, NCard, NFlex, NIcon, NPagination, NPopconfirm, NPopover, NRadioButton, NRadioGroup, NTooltip, useThemeVars } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { computed, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue';
@@ -139,6 +139,7 @@ watch(
() => ndmDevice.value.id,
(devieDbId) => {
if (devieDbId) {
recordChecks.value = [];
getRecordCheckByParentId();
}
},
@@ -170,7 +171,7 @@ onBeforeUnmount(() => {
<template #trigger>
<NButton size="small" quaternary circle :loading="loading" @click="() => getRecordCheckByParentId()">
<template #icon>
<NIcon :component="ReloadOutlined" />
<NIcon :component="RotateCwIcon" />
</template>
</NButton>
</template>
@@ -182,7 +183,7 @@ onBeforeUnmount(() => {
<template #trigger>
<NButton size="small" quaternary circle @click="onExportRecordCheck">
<template #icon>
<NIcon :component="DownloadOutlined" />
<NIcon :component="DownloadIcon" />
</template>
</NButton>
</template>

4
src/components/device/device-card/components/current-diag/security-box-circuit-card.vue
View File

@@ -17,11 +17,11 @@ import { SELECT_DEVICE_FN_INJECTION_KEY } from '@/constants';
import { useDeviceStore, useSettingStore } from '@/stores';
import { parseErrorFeedback } from '@/utils';
import { useMutation } from '@tanstack/vue-query';
import { PoweroffOutlined } from '@vicons/antd';
import { watchImmediate } from '@vueuse/core';
import { isCancel } from 'axios';
import destr from 'destr';
import { cloneDeep, isFunction } from 'es-toolkit';
import { PowerIcon } from 'lucide-vue-next';
import { NButton, NCard, NDescriptions, NDescriptionsItem, NDropdown, NFlex, NIcon, NPopconfirm, NPopover, NSwitch, NTag, useThemeVars, type DropdownOption, type TagProps } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { computed, inject, ref, toRefs } from 'vue';
@@ -313,7 +313,7 @@ const { mutate: unlinkDevice } = useMutation({
<NFlex align="center">
<NTag class="pointer-cursor" size="small" :type="getCircuitStatusTagType(circuit)">
<template #icon>
<NIcon :component="PoweroffOutlined" />
<NIcon :component="PowerIcon" />
</template>
<template #default>
<span>{{ getCircuitStatusText(circuit) }}</span>

13
src/components/device/device-card/components/current-diag/security-box-env-card.vue
View File

@@ -1,6 +1,5 @@
<script setup lang="ts">
import { ThunderboltOutlined } from '@vicons/antd';
import { ApertureOutline, LockOpenOutline, ThermometerOutline, WaterOutline } from '@vicons/ionicons5';
import { DropletIcon, FanIcon, ShieldIcon, ThermometerIcon, ZapIcon } from 'lucide-vue-next';
import { NCard, NFlex, NIcon, NTag } from 'naive-ui';
import { computed, toRefs } from 'vue';
@@ -52,7 +51,7 @@ const formattedFanSpeeds = computed(() => {
<NFlex vertical>
<NTag>
<template #icon>
<NIcon :component="ThermometerOutline" />
<NIcon :component="ThermometerIcon" />
</template>
<template #default>
<span>温度: {{ temperature }}℃</span>
@@ -60,7 +59,7 @@ const formattedFanSpeeds = computed(() => {
</NTag>
<NTag>
<template #icon>
<NIcon :component="WaterOutline" />
<NIcon :component="DropletIcon" />
</template>
<template #default>
<span>湿度: {{ humidity }}%</span>
@@ -68,7 +67,7 @@ const formattedFanSpeeds = computed(() => {
</NTag>
<NTag>
<template #icon>
<NIcon :component="ApertureOutline" />
<NIcon :component="FanIcon" />
</template>
<template #default>
<span>风扇: {{ formattedFanSpeeds }}</span>
@@ -76,7 +75,7 @@ const formattedFanSpeeds = computed(() => {
</NTag>
<NTag :type="getStatusTagType(accessControlStatus)">
<template #icon>
<NIcon :component="LockOpenOutline" />
<NIcon :component="ShieldIcon" />
</template>
<template #default>
<span>门禁: {{ accessControlStatus }}</span>
@@ -84,7 +83,7 @@ const formattedFanSpeeds = computed(() => {
</NTag>
<NTag :type="getStatusTagType(lightningProtectionStatus)">
<template #icon>
<NIcon :component="ThunderboltOutlined" />
<NIcon :component="ZapIcon" />
</template>
<template #default>
<span>防雷: {{ lightningProtectionStatus }}</span>

8
src/components/global/settings-drawer/settings-drawer.vue
View File

@@ -5,12 +5,12 @@ import { NDM_ALARM_STORE_ID, NDM_DEVICE_STORE_ID, NDM_STATION_STORE_ID } from '@
import { usePollingStore, useSettingStore } from '@/stores';
import { downloadByData, getAppEnvConfig, parseErrorFeedback, sleep } from '@/utils';
import { useMutation } from '@tanstack/vue-query';
import { DeleteOutlined, ExportOutlined, ImportOutlined } from '@vicons/antd';
import { useEventListener } from '@vueuse/core';
import axios, { isCancel } from 'axios';
import destr from 'destr';
import { isFunction } from 'es-toolkit';
import localforage from 'localforage';
import { DownloadIcon, Trash2Icon, UploadIcon } from 'lucide-vue-next';
import { NButton, NButtonGroup, NDivider, NDrawer, NDrawerContent, NDropdown, NFlex, NFormItem, NIcon, NInput, NInputNumber, NModal, NSwitch, NText, type DropdownOption } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { ref, watch } from 'vue';
@@ -336,7 +336,7 @@ const onDrawerAfterLeave = () => {
<NDropdown trigger="click" :options="exportDropdownOptions" @select="onSelectDropdownOption">
<NButton secondary size="small">
<template #icon>
<NIcon :component="ExportOutlined" />
<NIcon :component="DownloadIcon" />
</template>
<template #default>导出</template>
</NButton>
@@ -344,7 +344,7 @@ const onDrawerAfterLeave = () => {
<NDropdown trigger="click" :options="importDropdownOptions" @select="onSelectDropdownOption">
<NButton secondary size="small">
<template #icon>
<NIcon :component="ImportOutlined" />
<NIcon :component="UploadIcon" />
</template>
<template #default>导入</template>
</NButton>
@@ -352,7 +352,7 @@ const onDrawerAfterLeave = () => {
<NDropdown trigger="click" :options="deleteDropdownOptions" @select="onSelectDropdownOption">
<NButton secondary size="small">
<template #icon>
<NIcon :component="DeleteOutlined" />
<NIcon :component="Trash2Icon" />
</template>
<template #default>删除</template>
</NButton>

10
src/components/station/station-card/station-card.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts">
import type { Station, StationAlarms, StationDevices } from '@/apis';
import { DEVICE_TYPE_LITERALS } from '@/enums';
import { EllipsisOutlined, MoreOutlined } from '@vicons/antd';
import axios from 'axios';
import dayjs from 'dayjs';
import { isFunction } from 'es-toolkit';
import { MoreHorizontalIcon, MoreVerticalIcon } from 'lucide-vue-next';
import { NButton, NCard, NCheckbox, NDropdown, NFlex, NIcon, NTag, NTooltip, useThemeVars, type DropdownOption } from 'naive-ui';
import { computed, toRefs } from 'vue';
@@ -116,7 +116,7 @@ const onSelectDropdownOption = (key: string, option: DropdownOption) => {
<NDropdown trigger="click" :options="dropdownOptions" @select="onSelectDropdownOption">
<NButton quaternary size="tiny" :focusable="false">
<template #icon>
<NIcon :component="MoreOutlined" />
<NIcon :component="MoreVerticalIcon" />
</template>
</NButton>
</NDropdown>
@@ -129,7 +129,7 @@ const onSelectDropdownOption = (key: string, option: DropdownOption) => {
<span>{{ deviceCount }} 台设备</span>
<NButton quaternary size="tiny" :focusable="false" @click="() => emit('clickDetail', 'device', station)">
<template #icon>
<NIcon :component="EllipsisOutlined" />
<NIcon :component="MoreHorizontalIcon" />
</template>
</NButton>
</NFlex>
@@ -143,7 +143,7 @@ const onSelectDropdownOption = (key: string, option: DropdownOption) => {
<!-- 占位按钮，对齐布局 -->
<NButton quaternary size="tiny" :focusable="false" style="visibility: hidden">
<template #icon>
<NIcon :component="EllipsisOutlined" />
<NIcon :component="MoreHorizontalIcon" />
</template>
</NButton>
</NFlex>
@@ -153,7 +153,7 @@ const onSelectDropdownOption = (key: string, option: DropdownOption) => {
<span :style="{ color: alarmCount > 0 ? themeVars.warningColor : '' }">今日 {{ alarmCount }} 条告警</span>
<NButton quaternary size="tiny" :focusable="false" @click="() => emit('clickDetail', 'alarm', station)">
<template #icon>
<NIcon :component="EllipsisOutlined" />
<NIcon :component="MoreHorizontalIcon" />
</template>
</NButton>
</NFlex>

18
src/components/station/sync-camera-result-modal/sync-camera-result-modal.vue
View File

@@ -1,11 +1,11 @@
<script setup lang="ts">
import { watchDebounced } from '@vueuse/core';
import { NFlex, NIcon, NList, NListItem, NModal, NScrollbar, NStatistic, NText, NThing } from 'naive-ui';
import { computed, ref, toRefs } from 'vue';
import { useStationStore } from '@/stores';
import { storeToRefs } from 'pinia';
import type { Station, SyncCameraResult } from '@/apis';
import { DeleteFilled, EditFilled, PlusCircleFilled } from '@vicons/antd';
import { useStationStore } from '@/stores';
import { watchDebounced } from '@vueuse/core';
import { EditIcon, PlusCircleIcon, Trash2Icon } from 'lucide-vue-next';
import { NFlex, NIcon, NList, NListItem, NModal, NScrollbar, NStatistic, NText, NThing } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { computed, ref, toRefs } from 'vue';
const props = defineProps<{
syncCameraResult: Record<Station['code'], SyncCameraResult>;
@@ -61,19 +61,19 @@ const syncList = computed(() => {
<NFlex justify="space-around" :size="24" style="margin-top: 8px">
<NStatistic label="新增">
<template #prefix>
<NIcon :component="PlusCircleFilled" />
<NIcon :component="PlusCircleIcon" />
</template>
{{ insertList.length }}
</NStatistic>
<NStatistic label="更新">
<template #prefix>
<NIcon :component="EditFilled" />
<NIcon :component="EditIcon" />
</template>
{{ updateList.length }}
</NStatistic>
<NStatistic label="删除">
<template #prefix>
<NIcon :component="DeleteFilled" />
<NIcon :component="Trash2Icon" />
</template>
{{ deleteList.length }}
</NStatistic>

20
src/layouts/app-layout.vue
View File

@@ -5,8 +5,8 @@ import { LINE_ALARMS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_STATIONS_MUTATION_K
import { useAlarmStore, useSettingStore, useUserStore } from '@/stores';
import { parseErrorFeedback } from '@/utils';
import { useIsFetching, useIsMutating, useMutation } from '@tanstack/vue-query';
import { AlertFilled, CaretDownFilled, DoubleLeftOutlined, DoubleRightOutlined, EnvironmentFilled, FileTextFilled, HddFilled, LogoutOutlined, SettingOutlined } from '@vicons/antd';
import { isCancel } from 'axios';
import { ChevronDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ComputerIcon, LogOutIcon, LogsIcon, MapPinIcon, SettingsIcon, SirenIcon } from 'lucide-vue-next';
import {
NBadge,
NButton,
@@ -69,17 +69,17 @@ const menuOptions: MenuOption[] = [
{
label: () => h(RouterLink, { to: '/station' }, { default: () => '车站状态' }),
key: '/station',
icon: renderIcon(EnvironmentFilled),
icon: renderIcon(MapPinIcon),
},
{
label: () => h(RouterLink, { to: '/device' }, { default: () => '设备诊断' }),
key: '/device',
icon: renderIcon(HddFilled),
icon: renderIcon(ComputerIcon),
},
{
label: '设备告警',
key: '/alarm',
icon: renderIcon(AlertFilled),
icon: renderIcon(SirenIcon),
children: [
{
label: () => h(RouterLink, { to: '/alarm/alarm-log' }, { default: () => '设备告警记录' }),
@@ -94,7 +94,7 @@ const menuOptions: MenuOption[] = [
{
label: '系统日志',
key: '/log',
icon: renderIcon(FileTextFilled),
icon: renderIcon(LogsIcon),
children: [
{
label: () => h(RouterLink, { to: '/log/vimp-log' }, { default: () => '视频平台日志' }),
@@ -112,7 +112,7 @@ const dropdownOptions: DropdownOption[] = [
{
label: '退出登录',
key: 'logout',
icon: renderIcon(LogoutOutlined),
icon: renderIcon(LogOutIcon),
onClick: async () => {
try {
await userStore.userLogout();
@@ -181,7 +181,7 @@ function renderIcon(icon: Component): () => VNode {
<NMenu :collapsed="menuCollpased" :collapsed-width="64" :collapsed-icon-size="20" :value="route.path" :options="menuOptions" />
<NButton block quaternary :focusable="false" @click="onToggleMenuCollapsed">
<template #icon>
<NIcon :component="menuCollpased ? DoubleRightOutlined : DoubleLeftOutlined" />
<NIcon :component="menuCollpased ? ChevronsRightIcon : ChevronsLeftIcon" />
</template>
</NButton>
</NFlex>
@@ -201,13 +201,13 @@ function renderIcon(icon: Component): () => VNode {
<span>{{ userInfo?.nickName ?? '' }}</span>
</template>
<template #icon>
<NIcon :component="CaretDownFilled" />
<NIcon :component="ChevronDownIcon" />
</template>
</NButton>
</NDropdown>
<NButton quaternary :focusable="false" style="height: 100%" @click="openSettingsDrawer">
<template #icon>
<NIcon :component="SettingOutlined" />
<NIcon :component="SettingsIcon" />
</template>
</NButton>
</NFlex>
@@ -221,7 +221,7 @@ function renderIcon(icon: Component): () => VNode {
<NBadge :value="unreadAlarmCount">
<NButton secondary strong @click="routeToAlarmPage">
<template #icon>
<NIcon :component="AlertFilled" />
<NIcon :component="SirenIcon" />
</template>
</NButton>
</NBadge>