@svadmin/ui 0.41.0 → 0.42.0

package/dist/components/AutoTable.svelte

@@ -262,10 +262,12 @@
   const acEnabled = $derived(!!adminContext.accessControlProvider);
   const canCreatePerm = useCan(() => ({ resource: resourceName, action: 'create', queryOptions: { enabled: acEnabled } }));
   const canEditPerm = useCan(() => ({ resource: resourceName, action: 'edit', queryOptions: { enabled: acEnabled } }));
+  const canShowPerm = useCan(() => ({ resource: resourceName, action: 'show', queryOptions: { enabled: acEnabled } }));
   const canDeletePerm = useCan(() => ({ resource: resourceName, action: 'delete', queryOptions: { enabled: acEnabled } }));
   const canExportPerm = useCan(() => ({ resource: resourceName, action: 'export', queryOptions: { enabled: acEnabled } }));
   const canCreate = $derived(canCreatePerm.allowed && resource.canCreate !== false);
   const canEdit = $derived(canEditPerm.allowed && resource.canEdit !== false);
+  const canShow = $derived(canShowPerm.allowed && resource.canShow !== false);
   const canDelete = $derived(canDeletePerm.allowed && resource.canDelete !== false);
   const canExport = $derived(canExportPerm.allowed);
 
@@ -837,9 +839,11 @@
                       <Pencil class="h-4 w-4" /> {i18n.t('common.edit')}
                     </ContextMenu.Item>
                   {/if}
-                  <ContextMenu.Item onclick={() => adminContext.navigate(`/${resourceName}/show/${id}`)} class="gap-2">
-                    <Eye class="h-4 w-4" /> {i18n.t('common.detail')}
-                  </ContextMenu.Item>
+                  {#if canShow}
+                    <ContextMenu.Item onclick={() => adminContext.navigate(`/${resourceName}/show/${id}`)} class="gap-2">
+                      <Eye class="h-4 w-4" /> {i18n.t('common.detail')}
+                    </ContextMenu.Item>
+                  {/if}
                   <ContextMenu.Item onclick={() => navigator.clipboard?.writeText(String(id))} class="gap-2">
                     <Copy class="h-4 w-4" /> {i18n.t('common.copyId')}
                   </ContextMenu.Item>
@@ -913,9 +917,11 @@
                         <Pencil class="h-4 w-4" />
                       </TooltipButton>
                     {/if}
-                    <TooltipButton tooltip={i18n.t('common.detail')} variant="ghost" size="icon-sm" onclick={() => adminContext.navigate(`/${resourceName}/show/${id}`)}>
-                      <Eye class="h-4 w-4" />
-                    </TooltipButton>
+                    {#if canShow}
+                      <TooltipButton tooltip={i18n.t('common.detail')} variant="ghost" size="icon-sm" onclick={() => adminContext.navigate(`/${resourceName}/show/${id}`)}>
+                        <Eye class="h-4 w-4" />
+                      </TooltipButton>
+                    {/if}
                     {#if canDelete}
                       <TooltipButton tooltip={i18n.t('common.delete')} variant="ghost" size="icon-sm" onclick={() => confirmDelete(id)} class="hover:text-destructive">
                         <Trash2 class="h-4 w-4" />

package/dist/components/CancelTaskButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { captureAdminContext } from '@svadmin/core';
+  import { captureAdminContext, queryKeyMatches } from '@svadmin/core';
   import { useQueryClient } from '@tanstack/svelte-query';
   import { useTranslation } from '@svadmin/core/i18n';
 
@@ -39,13 +39,19 @@
       await taskProvider.cancel(taskId);
       await Promise.all([
         queryClient.invalidateQueries({
-          predicate: (query) => query.queryKey[0] === 'taskList'
-            && adminContext.matchesTenantQuery(query.queryKey),
+          predicate: (query) => queryKeyMatches(query.queryKey, {
+            ...adminContext.queryKeyMatcher(),
+            kind: 'task',
+            action: 'list',
+          }),
         }),
         queryClient.invalidateQueries({
-          predicate: (query) => query.queryKey[0] === 'task'
-            && query.queryKey[1] === taskId
-            && adminContext.matchesTenantQuery(query.queryKey),
+          predicate: (query) => queryKeyMatches(query.queryKey, {
+            ...adminContext.queryKeyMatcher(),
+            kind: 'task',
+            action: 'one',
+            id: taskId,
+          }),
         }),
       ]);
       onSuccess?.();

package/dist/components/DevTools.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { SvelteMap } from 'svelte/reactivity';
   import { fly } from 'svelte/transition';
   import { useQueryClient } from '@tanstack/svelte-query';
   import {
     captureAdminContext,
     getColorTheme,
-    getResources,
     getTheme,
+    parseQueryKey,
   } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
 
@@ -29,6 +30,17 @@
     capabilities: string;
   };
 
+  type SafeQueryDiagnostic = {
+    provider: string;
+    resource: string;
+    operation: string;
+    status: string;
+    retries: number;
+    duration: string;
+    cacheAge: string;
+    invalidation: string;
+  };
+
   const EMPTY_CACHE_DIAGNOSTICS: CacheDiagnostics = {
     queries: { total: 0, fetching: 0, stale: 0, errors: 0 },
     mutations: { total: 0, pending: 0, paused: 0, errors: 0 },
@@ -43,6 +55,8 @@
   let visible = $state(false);
   let collapsed = $state(false);
   let cacheDiagnostics = $state.raw<CacheDiagnostics>(EMPTY_CACHE_DIAGNOSTICS);
+  let safeQueryDiagnostics = $state.raw<SafeQueryDiagnostic[]>([]);
+  const queryTimings = new SvelteMap<string, { startedAt?: number; duration?: number }>();
 
   function toggle() {
     visible = !visible;
@@ -58,6 +72,7 @@
   function refreshCacheDiagnostics() {
     const queries = queryClient.getQueryCache().getAll();
     const mutations = queryClient.getMutationCache().getAll();
+    const now = Date.now();
     cacheDiagnostics = {
       queries: {
         total: queries.length,
@@ -72,12 +87,47 @@
         errors: mutations.filter((mutation) => mutation.state.status === 'error').length,
       },
     };
+    safeQueryDiagnostics = queries.flatMap((query) => {
+      const descriptor = parseQueryKey(query.queryKey);
+      if (!descriptor) return [];
+      return [{
+        provider: descriptor.provider,
+        resource: descriptor.kind === 'custom' ? '[custom]' : (descriptor.resource ?? '—'),
+        operation: `${descriptor.kind}:${descriptor.action ?? 'call'}`,
+        status: query.state.fetchStatus === 'fetching' ? 'fetching' : query.state.status,
+        retries: query.state.fetchFailureCount,
+        duration: queryTimings.get(query.queryHash)?.duration === undefined
+          ? '—'
+          : `${queryTimings.get(query.queryHash)?.duration}ms`,
+        cacheAge: query.state.dataUpdatedAt > 0
+          ? `${Math.max(0, Math.floor((now - query.state.dataUpdatedAt) / 1000))}s`
+          : '—',
+        invalidation: query.state.isInvalidated ? 'cache invalidation' : '—',
+      }];
+    });
   }
 
   onMount(() => {
     if (!isDev) return;
     refreshCacheDiagnostics();
-    const unsubscribeQueries = queryClient.getQueryCache().subscribe(refreshCacheDiagnostics);
+    const unsubscribeQueries = queryClient.getQueryCache().subscribe((event) => {
+      // 观察器事件会在组件重渲染时成对出现。刷新诊断状态会再次触发渲染，
+      // 因此这里只响应真正改变缓存内容或请求状态的事件。
+      if (event.type.startsWith('observer')) return;
+      if (event.type === 'removed') {
+        queryTimings.delete(event.query.queryHash);
+      } else if (event.type === 'updated') {
+        const current = queryTimings.get(event.query.queryHash) ?? {};
+        if (event.action.type === 'fetch') {
+          queryTimings.set(event.query.queryHash, { startedAt: Date.now() });
+        } else if ((event.action.type === 'success' || event.action.type === 'error') && current.startedAt !== undefined) {
+          queryTimings.set(event.query.queryHash, {
+            duration: Math.max(0, Date.now() - current.startedAt),
+          });
+        }
+      }
+      refreshCacheDiagnostics();
+    });
     const unsubscribeMutations = queryClient.getMutationCache().subscribe(refreshCacheDiagnostics);
     return () => {
       unsubscribeQueries();
@@ -85,13 +135,7 @@
     };
   });
 
-  const resources = $derived.by(() => {
-    try {
-      return getResources();
-    } catch {
-      return [];
-    }
-  });
+  const resources = $derived(adminContext.resources);
   const path = $derived(adminContext.currentPath());
   const theme = $derived(getTheme());
   const colorTheme = $derived(getColorTheme());
@@ -349,6 +393,34 @@
                   </dl>
                 </section>
 
+                <section class="space-y-1.5 sm:col-span-2">
+                  <div class="flex items-center justify-between">
+                    <h4 class="text-xs font-semibold text-foreground">Safe query operations</h4>
+                    <span class="text-[0.6875rem] text-muted-foreground">IDs, tenant and params hidden</span>
+                  </div>
+                  {#if safeQueryDiagnostics.length === 0}
+                    <div class="rounded-md border px-2.5 py-2 text-[0.6875rem] text-muted-foreground">
+                      No Query Key v2 operations in cache.
+                    </div>
+                  {:else}
+                    {#each safeQueryDiagnostics as query, index (`${query.provider}:${query.resource}:${query.operation}:${index}`)}
+                      <div class="rounded-md border px-2.5 py-2" data-testid="devtools-query-operation">
+                        <div class="flex flex-wrap items-center justify-between gap-2 text-xs">
+                          <span class="font-medium text-foreground">{query.provider} · {query.resource}</span>
+                          <Badge variant="outline">{query.operation}</Badge>
+                        </div>
+                        <dl class="mt-1 grid grid-cols-5 gap-2 text-[0.6875rem] text-muted-foreground">
+                          <div><dt>Status</dt><dd class="text-foreground">{query.status}</dd></div>
+                          <div><dt>Retries</dt><dd class="text-foreground">{query.retries}</dd></div>
+                          <div><dt>Duration</dt><dd class="text-foreground">{query.duration}</dd></div>
+                          <div><dt>Cache age</dt><dd class="text-foreground">{query.cacheAge}</dd></div>
+                          <div><dt>Invalidation</dt><dd class="text-foreground">{query.invalidation}</dd></div>
+                        </dl>
+                      </div>
+                    {/each}
+                  {/if}
+                </section>
+
                 <p class="text-[0.6875rem] text-muted-foreground sm:col-span-2">
                   Query keys, variables, cached records, mutation payloads, and error bodies are intentionally hidden.
                 </p>

package/dist/components/RetryTaskButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { captureAdminContext } from '@svadmin/core';
+  import { captureAdminContext, queryKeyMatches } from '@svadmin/core';
   import { useQueryClient } from '@tanstack/svelte-query';
   import { useTranslation } from '@svadmin/core/i18n';
 
@@ -39,13 +39,19 @@
       await taskProvider.retry(taskId);
       await Promise.all([
         queryClient.invalidateQueries({
-          predicate: (query) => query.queryKey[0] === 'taskList'
-            && adminContext.matchesTenantQuery(query.queryKey),
+          predicate: (query) => queryKeyMatches(query.queryKey, {
+            ...adminContext.queryKeyMatcher(),
+            kind: 'task',
+            action: 'list',
+          }),
         }),
         queryClient.invalidateQueries({
-          predicate: (query) => query.queryKey[0] === 'task'
-            && query.queryKey[1] === taskId
-            && adminContext.matchesTenantQuery(query.queryKey),
+          predicate: (query) => queryKeyMatches(query.queryKey, {
+            ...adminContext.queryKeyMatcher(),
+            kind: 'task',
+            action: 'one',
+            id: taskId,
+          }),
         }),
       ]);
       onSuccess?.();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,7 +39,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.35.0",
+    "@svadmin/core": "^0.36.0",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.22.0",