perf: remove suffix of offline device count; optimize routes; optimize station Select option

src/pages/alarm-page.vue

@@ -10,11 +10,27 @@ import dayjs from 'dayjs';
 import type { DataTableColumns, DataTableRowData, PaginationProps, SelectOption } from 'naive-ui';
 import { NForm, NInput, NButton, NSpace, NDataTable, NFormItemGi, NGrid, NSelect, NGridItem, NDatePicker } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { ref, reactive, onBeforeMount, h } from 'vue';
+import { ref, reactive, onBeforeMount, h, shallowRef, watch } from 'vue';
 
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
 
+const stationSelectOptions = shallowRef<SelectOption[]>([]);
+watch(
+  stationList,
+  (list) => {
+    const next = list.map<SelectOption>((station) => ({
+      label: station.name,
+      value: station.deviceIdPrefix,
+    }));
+    stationSelectOptions.value.splice(0, stationSelectOptions.value.length, ...next);
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
 const searchFields = reactive({
   stationCode_in: [] as string[],
   deviceType_in: [] as string[],
@@ -174,17 +190,7 @@ onBeforeMount(() => getAlarmList());
       <NForm>
         <NGrid :cols="3" :x-gap="24">
           <NFormItemGi :span="1" label="车站" label-placement="left">
-            <NSelect
-              v-model:value="searchFields.stationCode_in"
-              :options="[
-                ...stationList.map<SelectOption>((station) => ({
-                  label: station.name,
-                  value: station.deviceIdPrefix,
-                })),
-              ]"
-              multiple
-              clearable
-            />
+            <NSelect v-model:value="searchFields.stationCode_in" :options="stationSelectOptions" multiple clearable />
           </NFormItemGi>
           <NFormItemGi :span="1" label="设备类型" label-placement="left">
             <NSelect