perf: 字典数据缓存浏览器

src/components/navbar/index.vue

@@ -220,10 +220,10 @@ const currentWidth = computed(() => {
 
 const isDark = useDark({
   selector: 'body',
-  attribute: 'arco-theme',
+  attribute: 'smms-theme',
   valueDark: 'dark',
   valueLight: 'light',
-  storageKey: 'arco-theme',
+  storageKey: 'smms-theme',
   onChanged(dark: boolean) {
     // overridden default behavior
     appStore.toggleTheme(dark);

src/hooks/dict-list.ts

@@ -0,0 +1,25 @@
+import type { AdditionalProp } from '@/api/dict';
+import { getDictQueryList } from '@/api/dict';
+import { useStorage } from '@vueuse/core';
+const SMMS_DICT = 'smms-dict';
+const useDictList = async (params: string[]) => {
+  const data = {} as { [key: string]: AdditionalProp[] };
+  const list = useStorage(SMMS_DICT, {} as { [key: string]: AdditionalProp[] }); // 索引签名，允许任意字符串键);
+  // 使用 for...of 确保异步操作按顺序执行并等待完成
+  for (const item of params) {
+    if (list.value[item] && list.value[item].length > 0) {
+      data[item] = list.value[item];
+    } else {
+      try {
+        const res = await getDictQueryList({ names: [item] });
+        data[item] = res.data[item] || [];
+        list.value[item] = res.data[item] || [];
+      } catch (error) {
+        data[item] = [];
+      }
+    }
+  }
+
+  return data;
+};
+export default useDictList;

src/views/dashboard/manage/edit.vue

@@ -56,9 +56,10 @@ import { reactive, ref, shallowRef, watch, getCurrentInstance } from 'vue';
 import { getDeviceDetails, saveDeviceDetails } from '@/api/dashboard';
 import type { DataList } from '@/api/dashboard';
 import type { AdditionalProp } from '@/api/dict';
-import { getDictQueryList } from '@/api/dict';
 import { useI18n } from 'vue-i18n';
 import { getRules } from '@/utils/const';
+import useDictList from '@/hooks/dict-list';
+
 const formRef = ref();
 const { t } = useI18n();
 
@@ -122,8 +123,8 @@ const handleBeforeOk = (done: (closed: boolean) => void) => {
     }
   });
 };
-getDictQueryList({ names: ['DeviceType'] }).then(res => {
-  deviceTypeList.value = res.data['DeviceType'];
+useDictList(['DeviceType']).then(res => {
+  deviceTypeList.value = res['DeviceType'];
 });
 const handleCancel = () => {
   form.value = formModel();

src/views/dashboard/manage/index.vue

@@ -206,6 +206,7 @@ import {
   h,
   getCurrentInstance,
   computed,
+  onMounted,
 } from 'vue';
 import {
   queryDashboardList,
@@ -221,10 +222,10 @@ import useLoading from '@/hooks/loading';
 import { useI18n } from 'vue-i18n';
 import dayjs from 'dayjs';
 import { downLoadFun, DeviceInfo } from '@/utils/const';
-import { useIntervalFn } from '@vueuse/core';
 import { Modal } from '@arco-design/web-vue';
 import type { AdditionalProp } from '@/api/dict';
-import { getDictQueryList } from '@/api/dict';
+import useDictList from '@/hooks/dict-list';
+
 const { t } = useI18n();
 
 const { loading, setLoading } = useLoading(true);
@@ -304,10 +305,11 @@ const deviceInfo = ref<DeviceInfo[]>([] as DeviceInfo[]);
 const deviceTypeList = ref<AdditionalProp[]>([] as AdditionalProp[]);
 const deviceStatusList = ref<AdditionalProp[]>([] as AdditionalProp[]);
 
-getDictQueryList({ names: ['DeviceType', 'DeviceStatus'] }).then(res => {
-  deviceTypeList.value.push(...res.data['DeviceType']);
-  deviceStatusList.value.push(...res.data['DeviceStatus']);
+useDictList(['DeviceType', 'DeviceStatus']).then(res => {
+  deviceTypeList.value.push(...res['DeviceType']);
+  deviceStatusList.value.push(...res['DeviceStatus']);
 });
+
 function searchTable() {
   // setLoading(true);
   const [startTime, endTime] = formModel.value.time

src/views/dashboard/workplace/device-info/index.vue

@@ -17,8 +17,8 @@
         <a-row :gutter="8">
           <a-col :span="10">
             <a-form-item
-              field="name"
-              :label="t('dashboard.form.name')"
+              field="timeRange"
+              :label="t('dashboard.form.timeRange')"
               :rules="getRules(t).required"
             >
               <a-range-picker

src/views/dashboard/workplace/index.vue

@@ -180,11 +180,12 @@ import useLoading from '@/hooks/loading';
 import { useI18n } from 'vue-i18n';
 import { DeviceInfo } from '@/utils/const';
 import type { AdditionalProp } from '@/api/dict';
-import { getDictQueryList } from '@/api/dict';
 import dayjs from 'dayjs';
 import { downLoadFun } from '@/utils/const';
 import { useIntervalFn } from '@vueuse/core';
 import DeviceInfoDialog from './device-info/index.vue';
+import useDictList from '@/hooks/dict-list';
+
 const { t } = useI18n();
 
 const { loading, setLoading } = useLoading(true);
@@ -257,9 +258,9 @@ const deviceTypeList = ref<AdditionalProp[]>([] as AdditionalProp[]);
 const deviceStatusList = ref<AdditionalProp[]>([] as AdditionalProp[]);
 const deviceId = shallowRef<number>(0);
 const deviceType = shallowRef<number | null>(1);
-getDictQueryList({ names: ['DeviceType', 'DeviceStatus'] }).then(res => {
-  deviceTypeList.value.push(...res.data['DeviceType']);
-  deviceStatusList.value.push(...res.data['DeviceStatus']);
+useDictList(['DeviceType', 'DeviceStatus']).then(res => {
+  deviceTypeList.value.push(...res['DeviceType']);
+  deviceStatusList.value.push(...res['DeviceStatus']);
 });
 function searchTable() {
   // setLoading(true);

src/views/user/manage/index.vue

@@ -128,8 +128,7 @@ import { useI18n } from 'vue-i18n';
 // import { privilegeList } from '@/utils/const';
 import { Modal } from '@arco-design/web-vue';
 import type { AdditionalProp } from '@/api/dict';
-import { getDictQueryList } from '@/api/dict';
-
+import useDictList from '@/hooks/dict-list';
 const { t } = useI18n();
 
 const { loading, setLoading } = useLoading(true);
@@ -184,8 +183,8 @@ const userId = shallowRef<number>(0);
 const showEditDialog = shallowRef<boolean>(false);
 const this_ = getCurrentInstance()?.appContext.config.globalProperties;
 const privilegeList = ref<AdditionalProp[]>([]);
-getDictQueryList({ names: ['Privilege'] }).then(res => {
-  privilegeList.value.push(...res.data['Privilege']);
+useDictList(['Privilege']).then(res => {
+  privilegeList.value.push(...res['Privilege']);
 });
 const search = () => {
   searchTable();