refactor: enable dashboard widgets query cache (#7520)

#### What type of PR is this?

/kind improvement
/area ui
/milestone 2.21.x

#### What this PR does / why we need it:

Enable query cache for dashboard widgets.

#### Does this PR introduce a user-facing change?

```release-note
None 
```

ui/console-src/modules/dashboard/Dashboard.vue

@@ -6,10 +6,10 @@ import {
   VPageHeader,
 } from "@halo-dev/components";
 import type { DashboardWidgetDefinition } from "@halo-dev/console-shared";
-import { computed, type ComputedRef, provide, ref } from "vue";
+import { computed, type ComputedRef, provide, ref, toRaw } from "vue";
 import WidgetViewItem from "./components/WidgetViewItem.vue";
 import { useDashboardExtensionPoint } from "./composables/use-dashboard-extension-point";
-import { useDashboardWidgetsFetch } from "./composables/use-dashboard-widgets-fetch";
+import { useDashboardWidgetsViewFetch } from "./composables/use-dashboard-widgets-fetch";
 import "./styles/dashboard.css";
 import { internalWidgetDefinitions } from "./widgets";
 
@@ -19,7 +19,7 @@ function breakpointChangedEvent(breakpoint: string) {
   currentBreakpoint.value = breakpoint;
 }
 
-const { layouts, layout } = useDashboardWidgetsFetch(currentBreakpoint);
+const { data } = useDashboardWidgetsViewFetch(currentBreakpoint);
 
 const { widgetDefinitions } = useDashboardExtensionPoint();
 
@@ -52,8 +52,8 @@ provide<ComputedRef<DashboardWidgetDefinition[]>>(
 
   <div class="dashboard m-4">
     <grid-layout
-      v-model:layout="layout"
-      :responsive-layouts="layouts"
+      :layout="toRaw(data?.layout || [])"
+      :responsive-layouts="data?.layouts"
       :col-num="12"
       :is-draggable="false"
       :is-resizable="false"
@@ -66,7 +66,7 @@ provide<ComputedRef<DashboardWidgetDefinition[]>>(
       :cols="{ lg: 12, md: 12, sm: 6, xs: 4 }"
       @breakpoint-changed="breakpointChangedEvent"
     >
-      <WidgetViewItem v-for="item in layout" :key="item.i" :item="item" />
+      <WidgetViewItem v-for="item in data?.layout" :key="item.i" :item="item" />
     </grid-layout>
   </div>
 </template>

ui/console-src/modules/dashboard/DashboardDesigner.vue

@@ -254,6 +254,10 @@ async function handleSave() {
     await queryClient.invalidateQueries({
       queryKey: ["core:dashboard:widgets"],
     });
+
+    await queryClient.invalidateQueries({
+      queryKey: ["core:dashboard:widgets:view"],
+    });
   } catch (error) {
     console.error("Failed to save dashboard widgets config", error);
   } finally {

ui/console-src/modules/dashboard/composables/use-dashboard-widgets-fetch.ts

@@ -43,3 +43,23 @@ export function useDashboardWidgetsFetch(breakpoint: Ref<string>) {
     isLoading,
   };
 }
+
+export function useDashboardWidgetsViewFetch(breakpoint: Ref<string>) {
+  return useQuery({
+    queryKey: ["core:dashboard:widgets:view", breakpoint],
+    queryFn: async () => {
+      const { data } = await ucApiClient.user.preference.getMyPreference({
+        group: "dashboard-widgets",
+      });
+
+      const layouts = (data ||
+        DefaultResponsiveLayouts) as DashboardResponsiveLayout;
+
+      return {
+        layouts,
+        layout: layouts[breakpoint.value] || layouts.lg || [],
+      };
+    },
+    enabled: computed(() => !!breakpoint.value),
+  });
+}