feat(web): add base AlertDialog with app-card migration example (#32933)

Signed-off-by: yyh <yuanyouhuilyz@gmail.com>

web/service/use-apps.ts

@@ -14,9 +14,11 @@ import type { App } from '@/types/app'
 import {
   keepPreviousData,
   useInfiniteQuery,
+  useMutation,
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query'
+import { consoleClient, consoleQuery } from '@/service/client'
 import { AppModeEnum } from '@/types/app'
 import { get, post } from './base'
 import { useInvalid } from './use-base'
@@ -135,6 +137,29 @@ export const useInvalidateAppList = () => {
   }
 }
 
+export const useDeleteAppMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationKey: consoleQuery.apps.deleteApp.mutationKey(),
+    mutationFn: (appId: string) => {
+      return consoleClient.apps.deleteApp({
+        params: { appId },
+      })
+    },
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: [NAME_SPACE, 'list'],
+        }),
+        queryClient.invalidateQueries({
+          queryKey: useAppFullListKey,
+        }),
+      ])
+    },
+  })
+}
+
 const useAppStatisticsQuery = <T>(metric: string, appId: string, params?: DateRangeParams) => {
   return useQuery<T>({
     queryKey: [NAME_SPACE, 'statistics', metric, appId, params],