优化模型字典加载缓存

web/src/pages/app/modules/models.ts

@@ -22,6 +22,8 @@ type UploadModelPayload = {
 };
 
 const defaultOperationTree = JSON.stringify({ OperationTree: "[]" });
+let dictionariesLoaded = false;
+let dictionariesLoading: Promise<void> | null = null;
 
 export function bindModelActions() {
   const isAdmin = getCurrentUser()?.role === "admin";
@@ -38,7 +40,10 @@ export function bindModelActions() {
     document.querySelector("#manageDictionariesBtn")?.addEventListener("click", async () => {
       try {
         const { openDictionaryManager } = await import("./dictionaries");
-        await openDictionaryManager(loadModels);
+        await openDictionaryManager(async () => {
+          invalidateDictionaries();
+          await loadModels();
+        });
       } catch (error) {
         notifyError(error);
       }
@@ -158,12 +163,37 @@ export async function loadModels() {
   });
 }
 
-async function loadDictionaries() {
-  const result = await api<DictionaryResponse>("/api/dictionaries");
-  appState.brands = result.brands;
-  appState.types = result.types;
-  syncDictionarySelect("#brandFilter", result.brands, "全部品牌", appState.filters.brandId);
-  syncDictionarySelect("#typeFilter", result.types, "全部类型", appState.filters.typeId);
+async function loadDictionaries(force = false) {
+  if (!force && dictionariesLoaded) {
+    syncDictionaryFilters();
+    return;
+  }
+  if (!force && dictionariesLoading) {
+    await dictionariesLoading;
+    syncDictionaryFilters();
+    return;
+  }
+
+  dictionariesLoading = api<DictionaryResponse>("/api/dictionaries")
+    .then((result) => {
+      appState.brands = result.brands;
+      appState.types = result.types;
+      dictionariesLoaded = true;
+    })
+    .finally(() => {
+      dictionariesLoading = null;
+    });
+  await dictionariesLoading;
+  syncDictionaryFilters();
+}
+
+function invalidateDictionaries() {
+  dictionariesLoaded = false;
+}
+
+function syncDictionaryFilters() {
+  syncDictionarySelect("#brandFilter", appState.brands, "全部品牌", appState.filters.brandId);
+  syncDictionarySelect("#typeFilter", appState.types, "全部类型", appState.filters.typeId);
 }
 
 function syncDictionarySelect(selector: string, items: { id: number; name: string }[], emptyText: string, value: string) {
@@ -312,6 +342,7 @@ async function openUploadModelDialog() {
   });
 
   if (result) {
+    invalidateDictionaries();
     await loadModels();
   }
 }
@@ -391,6 +422,7 @@ export async function openProcessModelUploadDialog(input?: {
   });
 
   if (result) {
+    invalidateDictionaries();
     await loadModels();
   }
 }
@@ -565,6 +597,7 @@ async function editModel(id: number) {
       }
     })
   });
+  invalidateDictionaries();
   await loadModels();
 }