@svadmin/ui 0.77.0 → 0.78.0

package/dist/components/AdminApp.svelte

@@ -62,6 +62,10 @@
   import { setComponentRegistry, type ComponentRegistry } from '../component-registry.svelte.js';
   import Layout, { type LayoutAIAssistantProps } from './Layout.svelte';
   import AutoTable from './LazyAutoTable.svelte';
+  import ResourceOverview from './ResourceOverview.svelte';
+  import DataState from './content/DataState.svelte';
+  import { parseContractRouteId } from '@svadmin/core/schema';
+  import { resolveAdminThemeConfig } from '../default-theme.js';
   import AutoForm from './LazyAutoForm.svelte';
   import ShowPage from './LazyShowPage.svelte';
   import Toast from './Toast.svelte';
@@ -270,11 +274,13 @@
   });
 
   let themeOwner = $state.raw<ReturnType<typeof registerThemeOwner>>(undefined);
+  const resolvedThemeConfig = $derived(userThemeConfig === undefined ? undefined : resolveAdminThemeConfig(userThemeConfig));
 
   onMount(() => {
     themeOwner = registerThemeOwner(definedOptions({
       defaultTheme,
-      themeConfig: userThemeConfig,
+      themeConfig: resolvedThemeConfig,
+      fallbackThemeConfig: resolveAdminThemeConfig(),
     }));
 
     return () => {
@@ -287,7 +293,8 @@
     const owner = themeOwner;
     const ownerOptions = definedOptions({
       defaultTheme,
-      themeConfig: userThemeConfig,
+      themeConfig: resolvedThemeConfig,
+      fallbackThemeConfig: resolveAdminThemeConfig(),
     });
     untrack(() => updateThemeOwner(owner, ownerOptions));
   });
@@ -364,6 +371,15 @@
   const renderedRoute = $derived(route);
   const renderedParams = $derived(params);
   const renderedResourceName = $derived(renderedParams['resource']);
+  const renderedRecord = $derived.by(() => {
+    const id = renderedParams['id'];
+    const contract = resources.find(resource => resource.name === renderedResourceName)?.contract;
+    try {
+      return { id: id === undefined || !contract ? id : parseContractRouteId(contract, id), invalid: false };
+    } catch {
+      return { id: undefined, invalid: true };
+    }
+  });
   const renderedHasRouteResource = $derived(renderedResourceName !== undefined && resourceNames.has(renderedResourceName));
   const renderedResourcePages = $derived(renderedParams['resource'] ? resourcePages?.[renderedParams['resource']] : undefined);
   const documentTitle = $derived.by(() => {
@@ -616,10 +632,7 @@
         {#if dashboard}
           {@render dashboard()}
         {:else}
-          <div class="svadmin-u-3e7ce58d64fa">
-            <h1 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{translation.t('common.welcome', { title })}</h1>
-            <p class="svadmin-u-bfa603190748">{translation.t('common.dashboardHint')}</p>
-          </div>
+          <ResourceOverview />
         {/if}
       {:else if (renderedRoute === '/:resource' || renderedRoute === '/:parent/:parentId/:resource') && renderedHasRouteResource && renderedResourceName !== undefined}
         {#key renderedParams['resource']}
@@ -635,25 +648,27 @@
             <Comp resourceName={renderedResourceName} mode="create" />
           </ResourceAccessGuard>
         {/key}
-      {:else if (renderedRoute === '/:resource/edit/:id' || renderedRoute === '/:resource/:id/edit' || renderedRoute === '/:parent/:parentId/:resource/edit/:id') && renderedHasRouteResource && renderedResourceName !== undefined && renderedParams['id'] !== undefined}
+      {:else if renderedHasRouteResource && renderedRecord.invalid}
+        <DataState state="error" title={translation.t('common.operationFailed')} />
+      {:else if (renderedRoute === '/:resource/edit/:id' || renderedRoute === '/:resource/:id/edit' || renderedRoute === '/:parent/:parentId/:resource/edit/:id') && renderedHasRouteResource && renderedResourceName !== undefined && renderedRecord.id !== undefined}
         {#key `${renderedParams['resource']}-${renderedParams['id']}`}
           {@const Comp = renderedResourcePages?.edit ?? mergedComponents.AutoForm}
-          <ResourceAccessGuard resourceName={renderedResourceName} action="edit" {...definedOptions({ "id": renderedParams['id'] })}>
-            <Comp resourceName={renderedResourceName} mode="edit" {...definedOptions({ "id": renderedParams['id'] })} />
+          <ResourceAccessGuard resourceName={renderedResourceName} action="edit" id={renderedRecord.id}>
+            <Comp resourceName={renderedResourceName} mode="edit" id={renderedRecord.id} />
           </ResourceAccessGuard>
         {/key}
-      {:else if (renderedRoute === '/:resource/show/:id' || renderedRoute === '/:resource/:id' || renderedRoute === '/:parent/:parentId/:resource/show/:id') && renderedHasRouteResource && renderedResourceName !== undefined && renderedParams['id'] !== undefined}
+      {:else if (renderedRoute === '/:resource/show/:id' || renderedRoute === '/:resource/:id' || renderedRoute === '/:parent/:parentId/:resource/show/:id') && renderedHasRouteResource && renderedResourceName !== undefined && renderedRecord.id !== undefined}
         {#key `${renderedParams['resource']}-${renderedParams['id']}`}
           {@const Comp = renderedResourcePages?.show ?? mergedComponents.ShowPage}
-          <ResourceAccessGuard resourceName={renderedResourceName} action="show" {...definedOptions({ "id": renderedParams['id'] })}>
-            <Comp resourceName={renderedResourceName} id={renderedParams['id']} />
+          <ResourceAccessGuard resourceName={renderedResourceName} action="show" id={renderedRecord.id}>
+            <Comp resourceName={renderedResourceName} id={renderedRecord.id} />
           </ResourceAccessGuard>
         {/key}
-      {:else if (renderedRoute === '/:resource/clone/:id' || renderedRoute === '/:parent/:parentId/:resource/clone/:id') && renderedHasRouteResource && renderedResourceName !== undefined && renderedParams['id'] !== undefined}
+      {:else if (renderedRoute === '/:resource/clone/:id' || renderedRoute === '/:parent/:parentId/:resource/clone/:id') && renderedHasRouteResource && renderedResourceName !== undefined && renderedRecord.id !== undefined}
         {#key `${renderedParams['resource']}-clone-${renderedParams['id']}`}
           {@const Comp = renderedResourcePages?.clone ?? mergedComponents.AutoForm}
-          <ResourceAccessGuard resourceName={renderedResourceName} action="create" {...definedOptions({ "id": renderedParams['id'] })} requireSourceRead>
-            <Comp resourceName={renderedResourceName} mode="clone" {...definedOptions({ "id": renderedParams['id'] })} />
+          <ResourceAccessGuard resourceName={renderedResourceName} action="create" id={renderedRecord.id} requireSourceRead>
+            <Comp resourceName={renderedResourceName} mode="clone" id={renderedRecord.id} />
           </ResourceAccessGuard>
         {/key}
       {:else}

package/dist/components/ApiSettings.svelte

@@ -16,6 +16,7 @@
   import WorkspaceLayout from './content/WorkspaceLayout.svelte';
 
   const i18n = useTranslation();
+  const controlId = $props.id();
   const adminContext = captureAdminContext();
   const credentialProvider = $derived(adminContext.credentialProvider);
   const isZh = $derived(i18n.locale === 'zh-CN');
@@ -221,14 +222,50 @@
           {/if}
         </SettingsGroup>
         <SettingsGroup title={i18n.t('api.webhooks')} description={i18n.t('api.webhooksDesc')} bodyClass="space-y-5">
-          <form class="svadmin-u-f3c543ad5fe9 svadmin-u-7e0b7cdf1a94 svadmin-u-0c3bc98565dd svadmin-u-e4d6f343b9ff" onsubmit={handleAddWebhook}><div class="svadmin-u-6f7e013d6499"><Label for="webhook-name">{i18n.t('api.webhookName')}</Label><Input id="webhook-name" bind:value={newWebhookName} placeholder="Order Events" disabled={!credentialProvider || submitting} /></div><div class="svadmin-u-6f7e013d6499 svadmin-u-eea04c60c0ca"><Label for="webhook-url">{i18n.t('api.webhookUrl')}</Label><Input id="webhook-url" type="url" bind:value={newWebhookUrl} placeholder="https://api.example.com/hooks" disabled={!credentialProvider || submitting} /></div><div class="svadmin-u-6f7e013d6499"><Label for="webhook-event">{i18n.t('api.eventType')}</Label><select id="webhook-event" bind:value={newWebhookEvent} disabled={!credentialProvider || submitting} class="svadmin-u-60fbb7713999 svadmin-u-e7a768f922d2 svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b svadmin-u-fc7473ca09eb svadmin-u-582e6ef4b245 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752 svadmin-u-b29d8adbad2e"><option value="resource.created">resource.created</option><option value="resource.updated">resource.updated</option><option value="resource.deleted">resource.deleted</option><option value="auth.login">auth.login</option></select></div><div class="svadmin-u-60fbb7713999 svadmin-u-6f27f4f79e55"><Button type="submit" class="svadmin-u-6da6a3c3f741" disabled={!credentialProvider || submitting || !newWebhookName.trim() || !newWebhookUrl.trim()}><Plus class="svadmin-u-f7b5fa971871" />{i18n.t('api.addWebhook')}</Button></div></form>
+          <form class="svadmin-u-f3c543ad5fe9 svadmin-u-7e0b7cdf1a94 svadmin-u-0c3bc98565dd svadmin-u-e4d6f343b9ff" onsubmit={handleAddWebhook}>
+            <div class="svadmin-u-6f7e013d6499">
+              <Label for={`${controlId}-webhook-name`}>{i18n.t('api.webhookName')}</Label>
+              <Input id={`${controlId}-webhook-name`} bind:value={newWebhookName} placeholder="Order Events" disabled={!credentialProvider || submitting} />
+            </div>
+            <div class="svadmin-u-6f7e013d6499 svadmin-u-eea04c60c0ca">
+              <Label for={`${controlId}-webhook-url`}>{i18n.t('api.webhookUrl')}</Label>
+              <Input id={`${controlId}-webhook-url`} type="url" bind:value={newWebhookUrl} placeholder="https://api.example.com/hooks" disabled={!credentialProvider || submitting} />
+            </div>
+            <div class="svadmin-u-6f7e013d6499">
+              <Label for={`${controlId}-webhook-event`}>{i18n.t('api.eventType')}</Label>
+              <select id={`${controlId}-webhook-event`} bind:value={newWebhookEvent} disabled={!credentialProvider || submitting} class="svadmin-u-60fbb7713999 svadmin-u-e7a768f922d2 svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b svadmin-u-fc7473ca09eb svadmin-u-582e6ef4b245 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752 svadmin-u-b29d8adbad2e">
+                <option value="resource.created">resource.created</option>
+                <option value="resource.updated">resource.updated</option>
+                <option value="resource.deleted">resource.deleted</option>
+                <option value="auth.login">auth.login</option>
+              </select>
+            </div>
+            <div class="svadmin-u-60fbb7713999 svadmin-u-6f27f4f79e55">
+              <Button type="submit" class="svadmin-u-6da6a3c3f741" disabled={!credentialProvider || submitting || !newWebhookName.trim() || !newWebhookUrl.trim()}><Plus class="svadmin-u-f7b5fa971871" />{i18n.t('api.addWebhook')}</Button>
+            </div>
+          </form>
           {#if webhooks.length === 0}<DataState state="empty" title={i18n.t('api.noWebhooks')} description={credentialProvider ? i18n.t('api.webhooksDesc') : (isZh ? '配置 CredentialProvider 后可管理真实 Webhook。' : 'Configure CredentialProvider to manage real webhooks.')} />{:else}<div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3 svadmin-u-b950dda299d3 svadmin-u-18049387f0af">{#each webhooks as hook (hook.id)}<div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-cb11fec3bb46 svadmin-u-020ba687fa12 svadmin-u-9f76a62f4f44 svadmin-u-3b9871a0bf93"><div class="svadmin-u-7e0b7cdf1a94"><p class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{hook.name}</p><p class="svadmin-u-f283ea9bea0e svadmin-u-0e65706bcccd svadmin-u-359090c2d529 svadmin-u-bfa603190748">{hook.url}</p></div><div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-1004c0c3954c svadmin-u-1f51d781e606"><span class="svadmin-u-07389a777c1f svadmin-u-2ef11f1cb219 svadmin-u-d5eab218aa34 svadmin-u-660d2effb880 svadmin-u-0e65706bcccd svadmin-u-359090c2d529 svadmin-u-bfa603190748">{hook.eventType}</span><Button variant="ghost" size="icon-sm" onclick={() => deleteWebhook(hook.id)} aria-label={i18n.t('common.delete') + ' ' + hook.name}><Trash2 class="svadmin-u-f7b5fa971871" /></Button></div></div>{/each}</div>{/if}
         </SettingsGroup>
       </div>
     {/snippet}
     {#snippet secondary()}
       <SettingsGroup title={i18n.t('api.generateTitle')} description={i18n.t('api.generateDesc')}>
-        <form onsubmit={handleGenerateKey} class="svadmin-u-b43b4c086d9a"><div class="svadmin-u-6f7e013d6499"><Label for="api-key-name">{i18n.t('api.keyName')}</Label><Input id="api-key-name" placeholder="CI deployment token" bind:value={newKeyName} required disabled={!credentialProvider || submitting} /></div><fieldset class="svadmin-u-6ed543e2fbbb" disabled={!credentialProvider || submitting}><legend class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{i18n.t('api.permissions')}</legend>{#each Object.keys(newKeyPermissions) as permission (permission)}<div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4"><Checkbox id={`perm-${permission}`} bind:checked={newKeyPermissions[permission as keyof typeof newKeyPermissions]} /><Label for={`perm-${permission}`} class="svadmin-u-34516836730d svadmin-u-fc7473ca09eb svadmin-u-8ecebc9f80e6">{permission}</Label></div>{/each}</fieldset><Button type="submit" class="svadmin-u-6da6a3c3f741" disabled={!credentialProvider || submitting || !newKeyName.trim()}>{i18n.t('api.generateButton')}</Button></form>
+        <form onsubmit={handleGenerateKey} class="svadmin-u-b43b4c086d9a">
+          <div class="svadmin-u-6f7e013d6499">
+            <Label for={`${controlId}-api-key-name`}>{i18n.t('api.keyName')}</Label>
+            <Input id={`${controlId}-api-key-name`} placeholder="CI deployment token" bind:value={newKeyName} required disabled={!credentialProvider || submitting} />
+          </div>
+          <fieldset class="svadmin-u-6ed543e2fbbb" disabled={!credentialProvider || submitting}>
+            <legend class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{i18n.t('api.permissions')}</legend>
+            {#each Object.keys(newKeyPermissions) as permission (permission)}
+              <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
+                <Checkbox id={`${controlId}-perm-${permission}`} bind:checked={newKeyPermissions[permission as keyof typeof newKeyPermissions]} />
+                <Label for={`${controlId}-perm-${permission}`} class="svadmin-u-34516836730d svadmin-u-fc7473ca09eb svadmin-u-8ecebc9f80e6">{permission}</Label>
+              </div>
+            {/each}
+          </fieldset>
+          <Button type="submit" class="svadmin-u-6da6a3c3f741" disabled={!credentialProvider || submitting || !newKeyName.trim()}>{i18n.t('api.generateButton')}</Button>
+        </form>
       </SettingsGroup>
     {/snippet}
   </WorkspaceLayout>

package/dist/components/AppearanceSettings.svelte

@@ -4,7 +4,10 @@
   import { Check, Monitor, Moon, Sun } from '@lucide/svelte';
   import SettingsGroup from './content/SettingsGroup.svelte';
   import SettingsFieldRow from './content/SettingsFieldRow.svelte';
+  import ContentPageHeader from './content/ContentPageHeader.svelte';
 
+  let { headingLevel = 'h1' }: { headingLevel?: 'h1' | 'h2' } = $props();
+  const controlId = $props.id();
   const i18n = useTranslation();
   const themeOptions = [
     { value: 'light' as const, icon: Sun, label: 'settings.light' },
@@ -17,18 +20,20 @@
   const availableLocales = i18n.getAvailableLocales();
   const presets = getColorPresets();
   const DENSITY_KEY = 'svadmin-sidebar-density';
-  let density = $state<'compact' | 'standard'>((typeof window !== 'undefined' ? localStorage.getItem(DENSITY_KEY) : null) as 'compact' | 'standard' ?? 'standard');
+  const storedDensity = typeof window !== 'undefined' ? localStorage.getItem(DENSITY_KEY) : null;
+  let density = $state<'compact' | 'standard'>(storedDensity === 'compact' ? 'compact' : 'standard');
   const PAGE_SIZE_KEY = 'svadmin-default-page-size';
   const pageSizeOptions = [10, 20, 50];
-  let pageSize = $state(typeof window !== 'undefined' ? parseInt(localStorage.getItem(PAGE_SIZE_KEY) ?? '10', 10) : 10);
+  const storedPageSize = typeof window !== 'undefined' ? Number(localStorage.getItem(PAGE_SIZE_KEY) ?? '10') : 10;
+  let pageSize = $state(pageSizeOptions.includes(storedPageSize) ? storedPageSize : 10);
   const localeNames: Record<string, string> = { 'zh-CN': '中文（简体）', en: 'English', ja: '日本語', ko: '한국어' };
   function setDensity(value: 'compact' | 'standard') { density = value; if (typeof window !== 'undefined') { localStorage.setItem(DENSITY_KEY, value); window.dispatchEvent(new CustomEvent('svadmin-density-change', { detail: value })); } }
   function setPageSize(size: number) { pageSize = size; if (typeof window !== 'undefined') localStorage.setItem(PAGE_SIZE_KEY, String(size)); }
 </script>
 
 <div class="svadmin-u-b3542e058833">
-  <div><h2 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('settings.appearance')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('settings.settingsDescription')}</p></div>
-  <SettingsGroup title={i18n.t('settings.themeMode')}>
+  <ContentPageHeader title={i18n.t('settings.appearance')} description={i18n.t('settings.settingsDescription')} {headingLevel} />
+  <SettingsGroup title={i18n.t('settings.themeMode')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     <div class="svadmin-u-f3c543ad5fe9 svadmin-u-be2e831be5dd svadmin-u-1004c0c3954c">
       {#each themeOptions as option (option.value)}
         {@const active = currentTheme === option.value}
@@ -40,7 +45,7 @@
       {/each}
     </div>
   </SettingsGroup>
-  <SettingsGroup title={i18n.t('settings.colorAccent')}>
+  <SettingsGroup title={i18n.t('settings.colorAccent')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     <div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-1004c0c3954c">
       {#each presets as preset (preset.name)}
         {@const active = currentColor === preset.name}
@@ -48,11 +53,32 @@
       {/each}
     </div>
   </SettingsGroup>
-  <SettingsGroup title={i18n.t('settings.interface')}>
+  <SettingsGroup title={i18n.t('settings.interface')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     <div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3">
-      <SettingsFieldRow label={i18n.t('settings.language')} description={localeNames[currentLocale] ?? currentLocale}>{#snippet control()}<select class="svadmin-u-e7a768f922d2 svadmin-u-3713c4c7843d svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-fc7473ca09eb svadmin-u-582e6ef4b245 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752" value={currentLocale} onchange={(event) => i18n.setLocale((event.target as HTMLSelectElement).value)}>{#each availableLocales as locale (locale)}<option value={locale}>{localeNames[locale] ?? locale}</option>{/each}</select>{/snippet}</SettingsFieldRow>
-      <SettingsFieldRow label={i18n.t('settings.sidebarDensity')}>{#snippet control()}<div class="svadmin-u-60fbb7713999 svadmin-u-2cd02d11d1af svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22"><button class="svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529 svadmin-u-2689f3958069 {density === 'compact' ? 'svadmin-u-75b1bec3ea0e svadmin-u-30ca335ae9c2' : 'svadmin-u-e6f9e383a762 svadmin-u-bfa603190748 svadmin-u-0557b88819cd'}" onclick={() => setDensity('compact')}>{i18n.t('settings.compact')}</button><button class="svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529 svadmin-u-2689f3958069 {density === 'standard' ? 'svadmin-u-75b1bec3ea0e svadmin-u-30ca335ae9c2' : 'svadmin-u-e6f9e383a762 svadmin-u-bfa603190748 svadmin-u-0557b88819cd'}" onclick={() => setDensity('standard')}>{i18n.t('settings.standard')}</button></div>{/snippet}</SettingsFieldRow>
-      <SettingsFieldRow label={i18n.t('settings.defaultPageSize')}>{#snippet control()}<div class="svadmin-u-60fbb7713999 svadmin-u-2cd02d11d1af svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22">{#each pageSizeOptions as size (size)}<button class="svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-0e65706bcccd svadmin-u-359090c2d529 svadmin-u-2689f3958069 {pageSize === size ? 'svadmin-u-75b1bec3ea0e svadmin-u-30ca335ae9c2' : 'svadmin-u-e6f9e383a762 svadmin-u-bfa603190748 svadmin-u-0557b88819cd'}" onclick={() => setPageSize(size)}>{size}</button>{/each}</div>{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow label={i18n.t('settings.language')} description={localeNames[currentLocale] ?? currentLocale} controlId={`${controlId}-language`}>
+        {#snippet control()}
+          <select id={`${controlId}-language`} class="svadmin-u-e7a768f922d2 svadmin-u-3713c4c7843d svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-fc7473ca09eb svadmin-u-582e6ef4b245 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752" value={currentLocale} onchange={(event) => i18n.setLocale((event.target as HTMLSelectElement).value)}>
+            {#each availableLocales as locale (locale)}<option value={locale}>{localeNames[locale] ?? locale}</option>{/each}
+          </select>
+        {/snippet}
+      </SettingsFieldRow>
+      <SettingsFieldRow label={i18n.t('settings.sidebarDensity')}>
+        {#snippet control()}
+          <div class="svadmin-u-60fbb7713999 svadmin-u-2cd02d11d1af svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22">
+            <button type="button" aria-pressed={density === 'compact'} class="svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529 svadmin-u-2689f3958069 {density === 'compact' ? 'svadmin-u-75b1bec3ea0e svadmin-u-30ca335ae9c2' : 'svadmin-u-e6f9e383a762 svadmin-u-bfa603190748 svadmin-u-0557b88819cd'}" onclick={() => setDensity('compact')}>{i18n.t('settings.compact')}</button>
+            <button type="button" aria-pressed={density === 'standard'} class="svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529 svadmin-u-2689f3958069 {density === 'standard' ? 'svadmin-u-75b1bec3ea0e svadmin-u-30ca335ae9c2' : 'svadmin-u-e6f9e383a762 svadmin-u-bfa603190748 svadmin-u-0557b88819cd'}" onclick={() => setDensity('standard')}>{i18n.t('settings.standard')}</button>
+          </div>
+        {/snippet}
+      </SettingsFieldRow>
+      <SettingsFieldRow label={i18n.t('settings.defaultPageSize')}>
+        {#snippet control()}
+          <div class="svadmin-u-60fbb7713999 svadmin-u-2cd02d11d1af svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22">
+            {#each pageSizeOptions as size (size)}
+              <button type="button" aria-pressed={pageSize === size} class="svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-0e65706bcccd svadmin-u-359090c2d529 svadmin-u-2689f3958069 {pageSize === size ? 'svadmin-u-75b1bec3ea0e svadmin-u-30ca335ae9c2' : 'svadmin-u-e6f9e383a762 svadmin-u-bfa603190748 svadmin-u-0557b88819cd'}" onclick={() => setPageSize(size)}>{size}</button>
+            {/each}
+          </div>
+        {/snippet}
+      </SettingsFieldRow>
     </div>
   </SettingsGroup>
 </div>

package/dist/components/AppearanceSettings.svelte.d.ts

@@ -1,3 +1,6 @@
-declare const AppearanceSettings: import("svelte").Component<Record<string, never>, {}, "">;
+type $$ComponentProps = {
+    headingLevel?: 'h1' | 'h2';
+};
+declare const AppearanceSettings: import("svelte").Component<$$ComponentProps, {}, "">;
 type AppearanceSettings = ReturnType<typeof AppearanceSettings>;
 export default AppearanceSettings;

package/dist/components/AutoTable.svelte

@@ -123,6 +123,8 @@
   // ─── Props with Snippet composability ─────────────────────────
   interface Props {
     resourceName: string;
+    /** 嵌入仪表盘的多个表格应关闭 URL 同步，避免互相覆盖筛选与分页。 */
+    syncWithLocation?: boolean;
     rendering?: ResourceRendering | undefined;
     /** 可选主体渲染器：不替换资源、权限、工具栏和持久化逻辑。 */
     gridBody?: Snippet<[AutoTableGridState]>;
@@ -170,6 +172,7 @@
 
   let {
     resourceName,
+    syncWithLocation = true,
     rendering,
     gridBody,
     selectable = true,
@@ -254,7 +257,7 @@
   }
 
   // ─── URL state + server-side state ────────────────────────────
-  const urlState = readURLState(adminContext);
+  const urlState: ReturnType<typeof readURLState> = untrack(() => syncWithLocation ? readURLState(adminContext) : {});
 
   const savedViewColumnIds = $derived(new Set([
     ...resource.fields.map((field) => field.key),
@@ -504,9 +507,8 @@
     }
     return result;
   });
-
-  // URL sync
   $effect(() => {
+    if (!syncWithLocation) return;
     writeURLState({
       page: pagination.current,
       pageSize: pagination.pageSize,
@@ -1448,7 +1450,9 @@
       && left.canDelete === right.canDelete
       && left.variables === right.variables;
   }
+  let localDetailId = $state<string | number>();
   const detailState = $derived.by(() => {
+    if (!syncWithLocation) return { id: canRead ? localDetailId : undefined, invalid: false };
     const route = parsed.params['detail'];
     if (route === undefined || !canRead) return { id: undefined, invalid: false };
     try { return { id: parseContractRouteId(binding.resource, route), invalid: false }; }
@@ -1470,6 +1474,7 @@
       rowSelection = {};
       expandedAtom.set({});
       detailOpenedInHistory = false;
+      localDetailId = undefined;
       quickEditId = undefined;
       if (searchDebounceTimer) clearTimeout(searchDebounceTimer);
       searchDebounceTimer = undefined;
@@ -1563,14 +1568,14 @@
       await tick();
     }
   }
-
   function openDetail(id: string | number): void {
     if (!canRead || !canShow) return;
+    if (!syncWithLocation) { localDetailId = id; return; }
     detailOpenedInHistory = true;
     writeURLState({ detailId: formatContractRouteId(binding.resource, id) }, adminContext, 'push');
   }
-
   function closeDetail(): void {
+    if (!syncWithLocation) { localDetailId = undefined; return; }
     if (detailOpenedInHistory && adminContext.routerProvider) {
       detailOpenedInHistory = false;
       adminContext.routerProvider.back();
@@ -1579,7 +1584,6 @@
     detailOpenedInHistory = false;
     writeURLState({ detailId: undefined }, adminContext);
   }
-
   // ─── CSV Export ───────────────────────────────────────────────
   function exportCSV() {
     if (!canRead || !canExport || !pageRecords.ok || query.isError || query.isFetching || !pageRecords.data.length) return;

package/dist/components/AutoTable.svelte.d.ts

@@ -7,6 +7,8 @@ import { type SavedListViewProvider } from './saved-list-views.js';
 import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
+    /** 嵌入仪表盘的多个表格应关闭 URL 同步，避免互相覆盖筛选与分页。 */
+    syncWithLocation?: boolean;
     rendering?: ResourceRendering | undefined;
     /** 可选主体渲染器：不替换资源、权限、工具栏和持久化逻辑。 */
     gridBody?: Snippet<[AutoTableGridState]>;

package/dist/components/IntegrationsSettings.svelte

@@ -6,6 +6,7 @@
   import SettingsGroup from './content/SettingsGroup.svelte';
   import SettingsFieldRow from './content/SettingsFieldRow.svelte';
   import StatusBadge from './content/StatusBadge.svelte';
+  import ContentPageHeader from './content/ContentPageHeader.svelte';
 
   const i18n = useTranslation();
 
@@ -18,11 +19,12 @@
   }
 
   interface Props {
+    headingLevel?: 'h1' | 'h2';
     integrations?: Integration[];
     onConnectionChange?: (id: string, connected: boolean) => void | Promise<void>;
   }
 
-  let { integrations, onConnectionChange }: Props = $props();
+  let { integrations, onConnectionChange, headingLevel = 'h1' }: Props = $props();
   const defaultIntegrations = $derived<Integration[]>([
     { id: 'source-control', name: i18n.t('integrations.sourceControl'), description: i18n.t('integrations.sourceControlDescription'), Icon: FolderGit },
     { id: 'chatops', name: 'ChatOps', description: i18n.t('integrations.chatOpsDescription'), Icon: MessageCircle },
@@ -33,8 +35,8 @@
 </script>
 
 <div class="svadmin-u-b3542e058833">
-  <div><h2 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('settings.integrations')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('settings.integrationsDescription')}</p></div>
-  <SettingsGroup title={i18n.t('settings.integrations')} description={i18n.t('integrations.addMoreHint')}>
+  <ContentPageHeader title={i18n.t('settings.integrations')} description={i18n.t('settings.integrationsDescription')} {headingLevel} />
+  <SettingsGroup title={i18n.t('settings.integrations')} description={i18n.t('integrations.addMoreHint')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     <div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3">
       {#each displayedIntegrations as integration (integration.id)}
         <SettingsFieldRow label={integration.name} description={integration.description}>

package/dist/components/IntegrationsSettings.svelte.d.ts

@@ -7,6 +7,7 @@ interface Integration {
     Icon: Component;
 }
 interface Props {
+    headingLevel?: 'h1' | 'h2';
     integrations?: Integration[];
     onConnectionChange?: (id: string, connected: boolean) => void | Promise<void>;
 }

package/dist/components/NotificationsSettings.svelte

@@ -20,8 +20,10 @@
   import SettingsFieldRow from './content/SettingsFieldRow.svelte';
   import DataState from './content/DataState.svelte';
   import FeedbackNotice from './content/FeedbackNotice.svelte';
+  import ContentPageHeader from './content/ContentPageHeader.svelte';
 
-  let { preferencesProvider }: { preferencesProvider?: NotificationPreferencesProvider } = $props();
+  let { preferencesProvider, headingLevel = 'h1' }: { preferencesProvider?: NotificationPreferencesProvider; headingLevel?: 'h1' | 'h2' } = $props();
+  const controlId = $props.id();
   const i18n = useTranslation();
   const context = captureAdminContext();
   const notification = useNotification();
@@ -72,6 +74,11 @@
 </script>
 
 <div class="svadmin-u-b3542e058833">
+  <ContentPageHeader title={i18n.t('settings.notifications')} description={i18n.t('settings.notificationsDescription')} {headingLevel}>
+    {#snippet actions()}
+      <Button disabled={!loaded || loading || saving} onclick={saveSettings}>{i18n.t('common.save')}</Button>
+    {/snippet}
+  </ContentPageHeader>
   {#if preferencesProvider?.description}
     <p role="note">{preferencesProvider.description}</p>
   {/if}
@@ -81,23 +88,22 @@
   {#if loading}<DataState state="loading" />{/if}
   {#if error}<p role="alert">{error}</p>{#if !loaded}<Button onclick={load}>{i18n.t('common.retry')}</Button>{/if}{/if}
   <fieldset disabled={!loaded || loading || saving} class="svadmin-u-b3542e058833">
-  <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-8ef2268efbbc svadmin-u-1004c0c3954c svadmin-u-020ba687fa12 svadmin-u-64cac80d2e9a"><div><h2 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('settings.notifications')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('settings.notificationsDescription')}</p></div><Button onclick={saveSettings}>{i18n.t('common.save')}</Button></div>
-  <SettingsGroup title={i18n.t('notifications.emailTitle')} description={i18n.t('notifications.emailDescription')}>
+  <SettingsGroup title={i18n.t('notifications.emailTitle')} description={i18n.t('notifications.emailDescription')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     <div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3">
-      <SettingsFieldRow label={i18n.t('notifications.securityAlerts')} description={i18n.t('notifications.securityAlertsDesc')}>{#snippet control()}<Switch id="email-security" bind:checked={emailAlerts.security} />{/snippet}</SettingsFieldRow>
-      <SettingsFieldRow label={i18n.t('notifications.activityLogs')} description={i18n.t('notifications.activityLogsDesc')}>{#snippet control()}<Switch id="email-activity" bind:checked={emailAlerts.activity} />{/snippet}</SettingsFieldRow>
-      <SettingsFieldRow label={i18n.t('notifications.systemAlerts')} description={i18n.t('notifications.systemAlertsDesc')}>{#snippet control()}<Switch id="email-reports" bind:checked={emailAlerts.reports} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow controlId={`${controlId}-email-security`} label={i18n.t('notifications.securityAlerts')} description={i18n.t('notifications.securityAlertsDesc')}>{#snippet control()}<Switch id={`${controlId}-email-security`} bind:checked={emailAlerts.security} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow controlId={`${controlId}-email-activity`} label={i18n.t('notifications.activityLogs')} description={i18n.t('notifications.activityLogsDesc')}>{#snippet control()}<Switch id={`${controlId}-email-activity`} bind:checked={emailAlerts.activity} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow controlId={`${controlId}-email-reports`} label={i18n.t('notifications.systemAlerts')} description={i18n.t('notifications.systemAlertsDesc')}>{#snippet control()}<Switch id={`${controlId}-email-reports`} bind:checked={emailAlerts.reports} />{/snippet}</SettingsFieldRow>
     </div>
   </SettingsGroup>
-  <SettingsGroup title={i18n.t('notifications.pushTitle')} description={i18n.t('notifications.pushDescription')}>
+  <SettingsGroup title={i18n.t('notifications.pushTitle')} description={i18n.t('notifications.pushDescription')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
     <div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3">
-      <SettingsFieldRow label={i18n.t('notifications.securityAlerts')} description={i18n.t('notifications.securityPushDesc')}>{#snippet control()}<Switch id="push-security" bind:checked={pushAlerts.security} />{/snippet}</SettingsFieldRow>
-      <SettingsFieldRow label={i18n.t('notifications.activityLogs')} description={i18n.t('notifications.activityPushDesc')}>{#snippet control()}<Switch id="push-activity" bind:checked={pushAlerts.activity} />{/snippet}</SettingsFieldRow>
-      <SettingsFieldRow label={i18n.t('notifications.systemAlerts')} description={i18n.t('notifications.systemPushDesc')}>{#snippet control()}<Switch id="push-reports" bind:checked={pushAlerts.reports} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow controlId={`${controlId}-push-security`} label={i18n.t('notifications.securityAlerts')} description={i18n.t('notifications.securityPushDesc')}>{#snippet control()}<Switch id={`${controlId}-push-security`} bind:checked={pushAlerts.security} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow controlId={`${controlId}-push-activity`} label={i18n.t('notifications.activityLogs')} description={i18n.t('notifications.activityPushDesc')}>{#snippet control()}<Switch id={`${controlId}-push-activity`} bind:checked={pushAlerts.activity} />{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow controlId={`${controlId}-push-reports`} label={i18n.t('notifications.systemAlerts')} description={i18n.t('notifications.systemPushDesc')}>{#snippet control()}<Switch id={`${controlId}-push-reports`} bind:checked={pushAlerts.reports} />{/snippet}</SettingsFieldRow>
     </div>
   </SettingsGroup>
-  <SettingsGroup title={i18n.t('notifications.smsTitle')} description={i18n.t('notifications.smsDescription')}>
-    <SettingsFieldRow label={i18n.t('notifications.criticalSecurity')} description={i18n.t('notifications.criticalSecurityDesc')}>{#snippet control()}<Switch id="sms-security" bind:checked={smsAlerts.security} />{/snippet}</SettingsFieldRow>
+  <SettingsGroup title={i18n.t('notifications.smsTitle')} description={i18n.t('notifications.smsDescription')} headingLevel={headingLevel === 'h1' ? 'h2' : 'h3'}>
+    <SettingsFieldRow controlId={`${controlId}-sms-security`} label={i18n.t('notifications.criticalSecurity')} description={i18n.t('notifications.criticalSecurityDesc')}>{#snippet control()}<Switch id={`${controlId}-sms-security`} bind:checked={smsAlerts.security} />{/snippet}</SettingsFieldRow>
   </SettingsGroup>
   </fieldset>
 </div>

package/dist/components/NotificationsSettings.svelte.d.ts

@@ -21,6 +21,7 @@ export interface NotificationPreferencesProvider {
 }
 type $$ComponentProps = {
     preferencesProvider?: NotificationPreferencesProvider;
+    headingLevel?: 'h1' | 'h2';
 };
 declare const NotificationsSettings: import("svelte").Component<$$ComponentProps, {}, "">;
 type NotificationsSettings = ReturnType<typeof NotificationsSettings>;

package/dist/components/ProfilePage.svelte

@@ -13,8 +13,10 @@
   import * as Card from './ui/card/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
+  import ContentPageHeader from './content/ContentPageHeader.svelte';
   import { User, Mail, Lock, Loader2, AlertCircle, Camera } from '@lucide/svelte';
 
+  let { headingLevel = 'h1' }: { headingLevel?: 'h1' | 'h2' } = $props();
   const i18n = useTranslation();
   const adminContext = captureAdminContext();
 
@@ -150,9 +152,7 @@
 </script>
 
 <div class="svadmin-u-b3542e058833">
-  <div>
-    <h2 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('profile.title')}</h2>
-  </div>
+  <ContentPageHeader title={i18n.t('profile.title')} {headingLevel} />
 
   <!-- Profile Info -->
   <Card.Card>

package/dist/components/ProfilePage.svelte.d.ts

@@ -1,3 +1,6 @@
-declare const ProfilePage: import("svelte").Component<Record<string, never>, {}, "">;
+type $$ComponentProps = {
+    headingLevel?: 'h1' | 'h2';
+};
+declare const ProfilePage: import("svelte").Component<$$ComponentProps, {}, "">;
 type ProfilePage = ReturnType<typeof ProfilePage>;
 export default ProfilePage;

package/dist/components/ResourceOverview.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { captureAdminContext } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import ContentPageShell from './content/ContentPageShell.svelte';
+  import DataState from './content/DataState.svelte';
+  import ResourceOverviewCard from './ResourceOverviewCard.svelte';
+
+  let { title }: { title?: string } = $props();
+  const context = captureAdminContext();
+  const i18n = useTranslation();
+  const resources = $derived(context.resources
+    .filter(resource => resource.showInMenu !== false && !resource.parentName)
+    .sort((left, right) => (left.menuOrder ?? 0) - (right.menuOrder ?? 0)));
+</script>
+
+<ContentPageShell title={title ?? i18n.t('common.dashboard')} pageId="resource-overview" width="wide">
+  {#if resources.length}
+    <div class="svadmin-resource-overview-grid">
+      {#each resources as resource (resource.identifier ?? resource.name)}
+        <ResourceOverviewCard {resource} />
+      {/each}
+    </div>
+  {:else}
+    <DataState state="empty" />
+  {/if}
+</ContentPageShell>
+
+<style>
+  .svadmin-resource-overview-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+    align-items: start;
+    gap: 1rem;
+    min-width: 0;
+  }
+</style>

package/dist/components/ResourceOverview.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    title?: string;
+};
+declare const ResourceOverview: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResourceOverview = ReturnType<typeof ResourceOverview>;
+export default ResourceOverview;

package/dist/components/ResourceOverviewCard.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { useCan, useNavigation, type ResourceDefinition } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { ArrowRight, Plus } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import DataState from './content/DataState.svelte';
+
+  let { resource }: { resource: ResourceDefinition } = $props();
+  const i18n = useTranslation();
+  const navigation = useNavigation();
+  const read = useCan(() => ({ resource: resource.name, action: 'list' }));
+  const create = useCan(() => ({ resource: resource.name, action: 'create' }));
+</script>
+
+<section class="svadmin-resource-overview-card" aria-label={resource.label}>
+  <h2>{resource.label}</h2>
+  {#if read.isLoading}
+    <DataState state="loading" />
+  {:else if !read.allowed}
+    <DataState state="forbidden" />
+  {:else}
+    <div class="svadmin-resource-overview-actions">
+      <Button variant="outline" onclick={() => navigation.list(resource.name)}>
+        {i18n.t('profileSections.viewAll')}<ArrowRight aria-hidden="true" />
+      </Button>
+      {#if resource.canCreate !== false && !create.isLoading && create.allowed}
+        <Button onclick={() => navigation.create(resource.name)}>
+          <Plus aria-hidden="true" />{i18n.t('common.create')}
+        </Button>
+      {/if}
+    </div>
+  {/if}
+</section>
+
+<style>
+  .svadmin-resource-overview-card {
+    display: grid;
+    align-content: start;
+    gap: 1rem;
+    min-width: 0;
+    padding: 1rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--card);
+    color: var(--card-foreground);
+    box-shadow: var(--shadow-surface);
+  }
+  h2 { margin: 0; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
+  .svadmin-resource-overview-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+</style>

package/dist/components/ResourceOverviewCard.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type ResourceDefinition } from '@svadmin/core';
+type $$ComponentProps = {
+    resource: ResourceDefinition;
+};
+declare const ResourceOverviewCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResourceOverviewCard = ReturnType<typeof ResourceOverviewCard>;
+export default ResourceOverviewCard;