@svadmin/ui 0.36.0 → 0.38.0

package/dist/components/ResourceOperationsPage.svelte

@@ -25,6 +25,17 @@
     badge?: string;
   }
 
+  type WorkspaceStyle =
+    | 'inventory'
+    | 'operations'
+    | 'people'
+    | 'calendar'
+    | 'communications'
+    | 'crm'
+    | 'property'
+    | 'ai'
+    | 'store';
+
   interface Props {
     resourceName: string;
     eyebrow: string;
@@ -39,6 +50,7 @@
     tableDescription?: string;
     emptyLanesText?: string;
     highlightsLabel?: string;
+    workspaceStyle?: WorkspaceStyle;
   }
 
   let {
@@ -55,11 +67,12 @@
     tableDescription,
     emptyLanesText = 'No grouped records yet.',
     highlightsLabel = 'Focus queue',
+    workspaceStyle = 'operations',
   }: Props = $props();
 </script>
 
-<div class="space-y-6" data-svadmin-resource-operations={resourceName}>
-  <section class="grid gap-4 border-b border-border/60 pb-5 xl:grid-cols-[0.82fr_1.18fr]" data-svadmin-ops-hero>
+<div class="space-y-6" data-svadmin-resource-operations={resourceName} data-svadmin-workspace-style={workspaceStyle}>
+  <section class="space-y-5 border-b border-border/60 pb-5" data-svadmin-ops-hero>
     <div class="min-w-0 py-1">
         <Badge>{eyebrow}</Badge>
         <div class="flex items-start gap-4">
@@ -78,7 +91,7 @@
         </Button>
     </div>
 
-    <div class="grid gap-4 md:grid-cols-3">
+    <div class="grid min-w-0 gap-4 md:grid-cols-3">
       {#each metrics as metric (metric.label)}
         <Card.Root data-svadmin-metric-card>
           <Card.Content class="p-5">
@@ -93,8 +106,8 @@
     </div>
   </section>
 
-  <div class="grid gap-4 xl:grid-cols-[0.76fr_1.24fr]">
-    <div class="space-y-4">
+  <div class="grid min-w-0 gap-4">
+    <div class="grid min-w-0 gap-4 {workspaceStyle !== 'ai' && workspaceStyle !== 'communications' ? 'xl:grid-cols-2' : ''}">
       <Card.Root data-svadmin-panel-card>
         <Card.Header>
           <Card.Title>{tableLabel}</Card.Title>
@@ -120,27 +133,161 @@
       </Card.Root>
 
       {#if highlights.length > 0}
-        <Card.Root data-svadmin-panel-card>
+        <Card.Root data-svadmin-panel-card data-svadmin-workbench={workspaceStyle}>
           <Card.Header>
             <Card.Title>{highlightsLabel}</Card.Title>
           </Card.Header>
-          <Card.Content class="space-y-3">
-            {#each highlights as item (item.title)}
-              <div class="py-3">
-                <div class="flex items-center justify-between gap-3">
-                  <p class="font-medium">{item.title}</p>
-                  {#if item.badge}
-                    <Badge>{item.badge}</Badge>
-                  {/if}
+          <Card.Content>
+            {#if workspaceStyle === 'ai'}
+              <div class="grid gap-3 lg:grid-cols-[0.9fr_1.1fr]">
+                <div class="space-y-2">
+                  {#each lanes as lane (lane.label)}
+                    <div class="rounded-lg border bg-muted/30 px-3 py-2">
+                      <div class="flex items-center justify-between gap-3">
+                        <span class="text-sm font-medium">{lane.label}</span>
+                        <Badge variant="outline">{lane.value}</Badge>
+                      </div>
+                      {#if lane.hint}
+                        <p class="mt-1 text-xs text-muted-foreground">{lane.hint}</p>
+                      {/if}
+                    </div>
+                  {/each}
+                </div>
+                <div class="space-y-3">
+                  {#each highlights as item (item.title)}
+                    <div class="rounded-2xl rounded-tl-sm border bg-card px-4 py-3">
+                      <div class="flex items-center justify-between gap-3">
+                        <p class="font-medium">{item.title}</p>
+                        {#if item.badge}
+                          <Badge>{item.badge}</Badge>
+                        {/if}
+                      </div>
+                      {#if item.description}
+                        <p class="mt-2 text-sm text-muted-foreground">{item.description}</p>
+                      {/if}
+                      {#if item.meta}
+                        <p class="mt-2 text-xs font-medium text-primary">{item.meta}</p>
+                      {/if}
+                    </div>
+                  {/each}
+                </div>
+              </div>
+            {:else if workspaceStyle === 'communications'}
+              <div class="grid gap-4 lg:grid-cols-[0.82fr_1.18fr]">
+                <div class="space-y-2">
+                  {#each lanes as lane (lane.label)}
+                    <div class="flex items-center justify-between rounded-lg border bg-muted/25 px-3 py-2">
+                      <div>
+                        <p class="text-sm font-medium">{lane.label}</p>
+                        {#if lane.hint}
+                          <p class="text-xs text-muted-foreground">{lane.hint}</p>
+                        {/if}
+                      </div>
+                      <Badge variant="outline">{lane.value}</Badge>
+                    </div>
+                  {/each}
+                </div>
+                <div class="divide-y rounded-lg border">
+                  {#each highlights as item (item.title)}
+                    <div class="px-4 py-3">
+                      <div class="flex items-center justify-between gap-3">
+                        <p class="font-medium">{item.title}</p>
+                        {#if item.badge}
+                          <Badge>{item.badge}</Badge>
+                        {/if}
+                      </div>
+                      {#if item.description}
+                        <p class="mt-1 text-xs text-muted-foreground">{item.description}</p>
+                      {/if}
+                      {#if item.meta}
+                        <p class="mt-2 text-xs font-medium text-primary">{item.meta}</p>
+                      {/if}
+                    </div>
+                  {/each}
                 </div>
-                {#if item.description}
-                  <p class="mt-1 text-xs text-muted-foreground">{item.description}</p>
-                {/if}
-                {#if item.meta}
-                  <p class="mt-2 text-xs font-medium text-primary">{item.meta}</p>
-                {/if}
               </div>
-            {/each}
+            {:else if workspaceStyle === 'crm'}
+              <div class="grid gap-3 md:grid-cols-3">
+                {#each lanes as lane (lane.label)}
+                  <div class="rounded-lg border bg-muted/25 p-3">
+                    <div class="flex items-center justify-between gap-3">
+                      <p class="text-sm font-semibold">{lane.label}</p>
+                      <Badge variant="outline">{lane.value}</Badge>
+                    </div>
+                    {#if lane.hint}
+                      <p class="mt-2 text-xs text-muted-foreground">{lane.hint}</p>
+                    {/if}
+                  </div>
+                {/each}
+              </div>
+              <div class="mt-4 grid gap-3">
+                {#each highlights as item (item.title)}
+                  <div class="rounded-lg border-l-4 border-l-primary bg-muted/20 px-4 py-3">
+                    <div class="flex items-center justify-between gap-3">
+                      <p class="font-medium">{item.title}</p>
+                      {#if item.badge}
+                        <Badge>{item.badge}</Badge>
+                      {/if}
+                    </div>
+                    {#if item.description}
+                      <p class="mt-1 text-xs text-muted-foreground">{item.description}</p>
+                    {/if}
+                    {#if item.meta}
+                      <p class="mt-2 text-xs font-medium text-primary">{item.meta}</p>
+                    {/if}
+                  </div>
+                {/each}
+              </div>
+            {:else if workspaceStyle === 'property' || workspaceStyle === 'store'}
+              <div class="grid gap-3 md:grid-cols-2">
+                {#each highlights as item (item.title)}
+                  <div class="rounded-xl border bg-gradient-to-br from-muted/45 to-background p-4">
+                    <div class="flex items-center justify-between gap-3">
+                      <p class="font-medium">{item.title}</p>
+                      {#if item.badge}
+                        <Badge>{item.badge}</Badge>
+                      {/if}
+                    </div>
+                    {#if item.description}
+                      <p class="mt-2 text-sm text-muted-foreground">{item.description}</p>
+                    {/if}
+                    {#if item.meta}
+                      <p class="mt-3 text-xs font-semibold text-primary">{item.meta}</p>
+                    {/if}
+                  </div>
+                {/each}
+                {#each lanes as lane (lane.label)}
+                  <div class="rounded-xl border bg-card p-4">
+                    <div class="flex items-center justify-between gap-3">
+                      <p class="font-medium">{lane.label}</p>
+                      <Badge variant="outline">{lane.value}</Badge>
+                    </div>
+                    {#if lane.hint}
+                      <p class="mt-2 text-xs text-muted-foreground">{lane.hint}</p>
+                    {/if}
+                  </div>
+                {/each}
+              </div>
+            {:else}
+              <div class="space-y-3">
+                {#each highlights as item (item.title)}
+                  <div class="py-3">
+                    <div class="flex items-center justify-between gap-3">
+                      <p class="font-medium">{item.title}</p>
+                      {#if item.badge}
+                        <Badge>{item.badge}</Badge>
+                      {/if}
+                    </div>
+                    {#if item.description}
+                      <p class="mt-1 text-xs text-muted-foreground">{item.description}</p>
+                    {/if}
+                    {#if item.meta}
+                      <p class="mt-2 text-xs font-medium text-primary">{item.meta}</p>
+                    {/if}
+                  </div>
+                {/each}
+              </div>
+            {/if}
           </Card.Content>
         </Card.Root>
       {/if}

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

@@ -15,6 +15,7 @@ interface HighlightItem {
     meta?: string;
     badge?: string;
 }
+type WorkspaceStyle = 'inventory' | 'operations' | 'people' | 'calendar' | 'communications' | 'crm' | 'property' | 'ai' | 'store';
 interface Props {
     resourceName: string;
     eyebrow: string;
@@ -31,6 +32,7 @@ interface Props {
     tableDescription?: string;
     emptyLanesText?: string;
     highlightsLabel?: string;
+    workspaceStyle?: WorkspaceStyle;
 }
 declare const ResourceOperationsPage: Component<Props, {}, "">;
 type ResourceOperationsPage = ReturnType<typeof ResourceOperationsPage>;

package/dist/components/SettingsPage.svelte

@@ -2,7 +2,7 @@
   import type { Component, Snippet } from "svelte";
   import { t } from "@svadmin/core/i18n";
   import { navigate } from "@svadmin/core/router";
-  import { User, Info, FileSearch, Lock, Puzzle } from "@lucide/svelte";
+  import { User, Palette, Info, Shield, FileSearch, Lock, Puzzle, Bell, Key } from "@lucide/svelte";
   import ProfilePage from "./ProfilePage.svelte";
   import AppearanceSettings from "./AppearanceSettings.svelte";
   import AboutSettings from "./AboutSettings.svelte";
@@ -60,19 +60,25 @@
     {
       group: "settings.general",
       items: [
-        { key: "account", path: "/settings/account", icon: User, label: "settings.accountPreferences" },
+        { key: "profile", path: "/settings/profile", icon: User, label: "settings.profile" },
+        { key: "appearance", path: "/settings/appearance", icon: Palette, label: "settings.appearance" },
+        { key: "notifications", path: "/settings/notifications", icon: Bell, label: "settings.notifications" },
       ],
     },
     {
       group: "settings.workspace",
       items: [
-        { key: "access", path: "/settings/access", icon: Lock, label: "settings.accessSecurity" },
-        { key: "developer", path: "/settings/developer", icon: Puzzle, label: "settings.integrationApi" },
+        { key: "security", path: "/settings/security", icon: Lock, label: "settings.security" },
+        ...(authProvider ? [
+          { key: "roles", path: "/settings/roles", icon: Shield, label: "settings.rolesAndPermissions" },
+        ] : []),
+        { key: "integrations", path: "/settings/integrations", icon: Puzzle, label: "settings.integrations" },
       ],
     },
     {
       group: "settings.developer",
       items: [
+        { key: "api", path: "/settings/api", icon: Key, label: "settings.api" },
         ...(authProvider ? [
           { key: "audit", path: "/settings/audit", icon: FileSearch, label: "settings.auditLogs" },
         ] : []),
@@ -86,59 +92,88 @@
 
   import { getParams, getRoute } from "../router-state.svelte.js";
 
-  function normalizeKey(tab: string | undefined): string {
-    if (!tab) return "account";
-    if (["profile", "appearance", "notifications"].includes(tab)) return "account";
-    if (["security", "roles"].includes(tab)) return "access";
-    if (["integrations", "api"].includes(tab)) return "developer";
-    return tab;
-  }
-
-  function pathForKey(key: string): string {
-    return `/settings/${key}`;
-  }
-
   let activeKey = $derived.by(() => {
     const tab = getParams().tab;
-    const normalized = normalizeKey(tab);
-    if (sectionKeys.has(normalized)) return normalized;
-    return content ? normalized : "account";
+    if (!tab) return "profile";
+    const alias = tab === "api-keys" ? "api" : tab;
+    if (sectionKeys.has(alias)) return alias;
+    return content ? alias : "profile";
   });
 
+  // Default redirect to profile
   $effect(() => {
     if (getRoute() === "/settings") {
-      navigate("/settings/account");
-      return;
-    }
-
-    const tab = getParams().tab;
-    const normalized = normalizeKey(tab);
-    if (tab && tab !== normalized && sectionKeys.has(normalized)) {
-      navigate(pathForKey(normalized));
+      navigate("/settings/profile");
     }
   });
 </script>
 
-<div class="min-h-full max-w-6xl">
-  <div class="mb-6 border-b border-border/70 pb-4">
-    <div class="min-w-0">
-      <h2 class="text-2xl font-semibold tracking-tight text-foreground">{t("settings.title")}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{t("settings.settingsDescription")}</p>
+<div class="flex flex-col lg:flex-row gap-0 min-h-full">
+  <!-- Left sidebar navigation -->
+  <nav class="w-full lg:w-56 shrink-0 bg-muted/10 shadow-[inset_0_-1px_0_rgba(0,0,0,0.05)] lg:shadow-[inset_-1px_0_0_rgba(0,0,0,0.05)] dark:shadow-[inset_-1px_0_0_rgba(255,255,255,0.05)]">
+    <!-- Mobile: horizontal scroll tabs -->
+    <div class="flex lg:hidden overflow-x-auto px-4 py-2 gap-1">
+      {#each resolvedSections as section, _i (_i)}
+        {#each section.items as item, _j (_j)}
+          {@const active = activeKey === item.key}
+          <button
+            class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md whitespace-nowrap transition-colors
+              {active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-background/50'}"
+            onclick={() => navigate(item.path)}
+          >
+            <item.icon class="h-4 w-4" />
+            {t(item.label)}
+          </button>
+        {/each}
+      {/each}
     </div>
-  </div>
 
-  <div class="{activeKey === 'access' || activeKey === 'audit' || activeKey === 'developer' ? 'max-w-6xl' : 'max-w-3xl'} space-y-6">
-    {#if activeKey === "account"}
+    <!-- Desktop: vertical nav with groups -->
+    <div class="hidden lg:block py-6 px-3 space-y-6">
+      <div class="px-3">
+        <h2 class="text-lg font-semibold text-foreground">{t("settings.title")}</h2>
+        <p class="text-xs text-muted-foreground mt-1">{t("settings.settingsDescription")}</p>
+      </div>
+      {#each resolvedSections as section, _i (_i)}
+        <div>
+          <h3 class="px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+            {t(section.group)}
+          </h3>
+          <div class="space-y-0.5">
+            {#each section.items as item, _j (_j)}
+              {@const active = activeKey === item.key}
+              <button
+                class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all
+                  {active
+                    ? 'bg-primary/10 text-primary font-medium'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'}"
+                onclick={() => navigate(item.path)}
+              >
+                <item.icon class="h-4 w-4 shrink-0" />
+                {t(item.label)}
+              </button>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </nav>
+
+  <!-- Right content area -->
+  <div class="flex-1 p-6 lg:p-8 {activeKey === 'roles' || activeKey === 'audit' || activeKey === 'integrations' || activeKey === 'api' ? 'max-w-6xl' : 'max-w-3xl'}">
+    {#if activeKey === "profile"}
       {#if profile}{@render profile()}{:else}<ProfilePage />{/if}
+    {:else if activeKey === "appearance"}
       {#if appearance}{@render appearance()}{:else}<AppearanceSettings />{/if}
-      {#if notifications}{@render notifications()}{:else}<NotificationsSettings />{/if}
-    {:else if activeKey === "access"}
+    {:else if activeKey === "roles"}
+      {#if roles}{@render roles()}{:else}<RolesSettings />{/if}
+    {:else if activeKey === "security"}
       {#if security}{@render security()}{:else}<SecuritySettings />{/if}
-      {#if authProvider}
-        {#if roles}{@render roles()}{:else}<RolesSettings />{/if}
-      {/if}
-    {:else if activeKey === "developer"}
+    {:else if activeKey === "integrations"}
       {#if integrations}{@render integrations()}{:else}<IntegrationsSettings />{/if}
+    {:else if activeKey === "notifications"}
+      {#if notifications}{@render notifications()}{:else}<NotificationsSettings />{/if}
+    {:else if activeKey === "api"}
       {#if api}{@render api()}{:else}<ApiSettings />{/if}
     {:else if activeKey === "audit"}
       {#if audit}{@render audit()}{:else}<AuditLogViewer />{/if}

package/dist/components/ShowInferencer.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  // ShowInferencer — 基于资源定义零配置渲染详情页
+  // 从 URL 自动提取 :id 参数
+  import ShowPage from './ShowPage.svelte';
+  import { useParsed } from '@svadmin/core';
+
+  interface Props {
+    resourceName: string;
+    /** 可选：显式指定 id，默认从 URL 解析 */
+    id?: string | number;
+    class?: string;
+  }
+
+  let { resourceName, id, class: className = '' }: Props = $props();
+  const parsed = useParsed();
+  const resolvedId = $derived(id ?? parsed.id ?? '');
+</script>
+
+{#if resolvedId}
+  <ShowPage {resourceName} id={resolvedId} class={className} />
+{/if}

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

@@ -0,0 +1,9 @@
+interface Props {
+    resourceName: string;
+    /** 可选：显式指定 id，默认从 URL 解析 */
+    id?: string | number;
+    class?: string;
+}
+declare const ShowInferencer: import("svelte").Component<Props, {}, "">;
+type ShowInferencer = ReturnType<typeof ShowInferencer>;
+export default ShowInferencer;

package/dist/components/ShowPage.svelte

@@ -12,7 +12,7 @@
   import CloneButton from './buttons/CloneButton.svelte';
   import RefreshButton from './buttons/RefreshButton.svelte';
 
-  let { resourceName, id } = $props<{ resourceName: string; id: string | number }>();
+  let { resourceName, id, class: className = '' } = $props<{ resourceName: string; id: string | number; class?: string }>();
 
   const resource = $derived(getResource(resourceName));
   const showFields = $derived(resource.fields.filter(f => f.showInShow !== false));
@@ -20,7 +20,7 @@
   const query = useShow({ get resource() { return resourceName; }, get id() { return id; } });
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6 {className}">
   <PageHeader title="{resource.label} {t('common.detail')}">
     {#snippet actions()}
       <ListButton resource={resourceName} hideText />
@@ -38,10 +38,10 @@
   </PageHeader>
 
   {#if query.isLoading}
-    <Card.Root class="overflow-hidden border-border/60 bg-card shadow-none" data-svadmin-show-card>
-      <Card.Content class="space-y-3 p-4 sm:p-5">
+    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
+      <Card.Content class="p-0">
         {#each showFields.slice(0, 6) as _, i (i)}
-          <div class="flex flex-col border-b border-border/50 px-1 py-4 sm:flex-row sm:py-4">
+          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
             <Skeleton class="h-4 w-1/2 sm:w-1/4" />
             <Skeleton class="h-4 w-3/4 sm:w-2/5 mt-1 sm:mt-0 sm:ml-auto" />
           </div>
@@ -49,14 +49,14 @@
       </Card.Content>
     </Card.Root>
   {:else if query.data?.data}
-    <Card.Root class="overflow-hidden border-border/60 bg-card shadow-none" data-svadmin-show-card>
-      <Card.Content class="space-y-3 p-4 sm:p-5">
+    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
+      <Card.Content class="p-0">
         {#each showFields as field, i (i)}
           {@const value = ((query.data as { data: Record<string, unknown> }).data as Record<string, unknown>)[field.key]}
           {@const DisplayComponent = getDisplayComponent(field.type)}
-          <div class="flex flex-col border-b border-border/50 px-1 py-4 transition-colors hover:bg-muted/20 sm:flex-row sm:items-start sm:py-4 {i % 2 === 1 ? 'bg-muted/10' : ''}">
-            <div class="mb-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground sm:mb-0 sm:w-1/3">{field.label}</div>
-            <div class="text-sm text-foreground sm:w-2/3">
+          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
+            <div class="sm:w-1/3 text-xs sm:text-sm font-medium text-muted-foreground mb-1 sm:mb-0">{field.label}</div>
+            <div class="sm:w-2/3 text-sm text-foreground">
               {#if DisplayComponent && value != null}
                 <DisplayComponent
                   {value}
@@ -72,7 +72,7 @@
       </Card.Content>
     </Card.Root>
   {:else}
-    <Card.Root class="overflow-hidden border-border/60 bg-card shadow-none" data-svadmin-show-card>
+    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
       <Card.Content class="p-8 text-center">
         <p class="text-muted-foreground">{t('common.noData')}</p>
         {#if query.isError}

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

@@ -1,6 +1,7 @@
 type $$ComponentProps = {
     resourceName: string;
     id: string | number;
+    class?: string;
 };
 declare const ShowPage: import("svelte").Component<$$ComponentProps, {}, "">;
 type ShowPage = ReturnType<typeof ShowPage>;