perf: try to fix select options scroll to top when stations refresh

src/composables/query/use-station-list-query.ts

@@ -21,7 +21,7 @@ export function useStationListQuery() {
     queryFn: async () => {
       const { data: ndmStationList } = await axios.get<{ code: string; name: string; deviceIdPrefix: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`);
 
-      const stations = ndmStationList.map<Station>((station) => ({
+      let stations = ndmStationList.map<Station>((station) => ({
         code: station.code ?? '',
         name: station.name ?? '',
         deviceIdPrefix: station.deviceIdPrefix ?? '',
@@ -30,14 +30,16 @@ export function useStationListQuery() {
 
       const pingResultList = await Promise.allSettled(stations.map((station) => ndmVerify(station.code)));
 
-      stationList.value = stations.map((station, index) => ({
+      stations = stations.map((station, index) => ({
         ...station,
         online: pingResultList[index].status === 'fulfilled',
       }));
 
+      stationList.value.splice(0, stationList.value.length, ...stations);
+
       updatedTime.value = dayjs().toJSON();
 
-      return stationList.value;
+      return stations;
     },
     refetchInterval: getAppEnvConfig().requestInterval * 1000,
   });

src/pages/alarm-page.vue

@@ -10,26 +10,32 @@ 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, shallowRef, watch } from 'vue';
+import { ref, reactive, onBeforeMount, h, shallowRef, watch, computed } 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 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 stationSelectOptions = computed(() => {
+  return stationList.value.map<SelectOption>((station) => ({
+    label: station.name,
+    value: station.deviceIdPrefix,
+  }));
+});
 
 const searchFields = reactive({
   stationCode_in: [] as string[],

src/pages/vimp-log-page.vue

@@ -24,27 +24,33 @@ import {
   type SelectOption,
 } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { h, onBeforeMount, reactive, ref, shallowRef, watch } from 'vue';
+import { computed, h, onBeforeMount, reactive, ref, shallowRef, watch } from 'vue';
 
 useStationListQuery();
 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 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 stationSelectOptions = computed(() => {
+  return stationList.value.map<SelectOption>((station) => ({
+    label: station.name,
+    value: station.deviceIdPrefix,
+  }));
+});
 
 const searchFields = reactive({
   stationCode: stationList.value.find((s) => s.online)?.code,