style: 更新图标库为 lucide

2026-01-13 13:04:46 +08:00
parent 3606d6a971
commit 8a09c2312e
9 changed files with 48 additions and 48 deletions
--- a/src/components/device/device-card/components/current-diag/device-hardware-card.vue
+++ b/src/components/device/device-card/components/current-diag/device-hardware-card.vue
@@ -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>
--- a/src/components/device/device-card/components/current-diag/device-header-card.vue
+++ b/src/components/device/device-card/components/current-diag/device-header-card.vue
@@ -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>
--- a/src/components/device/device-card/components/current-diag/nvr-record-card.vue
+++ b/src/components/device/device-card/components/current-diag/nvr-record-card.vue
@@ -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>
--- a/src/components/device/device-card/components/current-diag/security-box-circuit-card.vue
+++ b/src/components/device/device-card/components/current-diag/security-box-circuit-card.vue
@@ -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>
--- a/src/components/device/device-card/components/current-diag/security-box-env-card.vue
+++ b/src/components/device/device-card/components/current-diag/security-box-env-card.vue
@@ -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>
--- a/src/components/global/settings-drawer/settings-drawer.vue
+++ b/src/components/global/settings-drawer/settings-drawer.vue
@@ -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>
--- a/src/components/station/station-card/station-card.vue
+++ b/src/components/station/station-card/station-card.vue
@@ -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>
--- a/src/components/station/sync-camera-result-modal/sync-camera-result-modal.vue
+++ b/src/components/station/sync-camera-result-modal/sync-camera-result-modal.vue
@@ -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>
--- a/src/layouts/app-layout.vue
+++ b/src/layouts/app-layout.vue
@@ -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>