@svadmin/ui 0.85.0 → 0.88.0

package/dist/component-registry.js

@@ -12,6 +12,36 @@ function variant(recipe, name) {
     };
 }
 const registryEntries = [
+    {
+        id: "page-pattern",
+        component: "@svadmin/ui/components/PagePattern.svelte",
+        recipe: "contentPageRecipe",
+        props: {
+            kind: { kind: "enum", values: ["list", "form", "detail", "workspace", "dashboard"], required: true },
+            title: { kind: "string", required: true },
+            description: { kind: "string" },
+            eyebrow: { kind: "string" },
+            pageId: { kind: "string" },
+            width: variant("contentPageRecipe", "width"),
+            density: { kind: "enum", values: ["comfortable", "compact"], default: "comfortable", description: "Deprecated compatibility prop; use the shared baseline." },
+            state: { kind: "enum", values: ["ready", "loading", "empty", "filtered-empty", "error", "forbidden"], default: "ready" },
+            stateTitle: { kind: "string" },
+            stateDescription: { kind: "string" },
+            retry: { kind: "callback", description: "Use an error-state retry callback." },
+            class: { kind: "string" },
+        },
+        slots: {
+            children: { kind: "snippet", required: true },
+            actions: { kind: "snippet" },
+            toolbar: { kind: "snippet" },
+            metrics: { kind: "snippet" },
+            secondary: { kind: "snippet" },
+            footer: { kind: "snippet" },
+            stateAction: { kind: "snippet" },
+        },
+        tokens: semanticTokens,
+        states: ["ready", "loading", "empty", "filtered-empty", "error", "forbidden"],
+    },
     {
         id: "content-page-shell",
         component: "@svadmin/ui/components/content/ContentPageShell.svelte",
@@ -22,7 +52,7 @@ const registryEntries = [
             description: { kind: "string" },
             pageId: { kind: "string" },
             width: variant("contentPageRecipe", "width"),
-            density: variant("contentPageRecipe", "density"),
+            density: { kind: "enum", values: ["comfortable", "compact"], default: "comfortable", description: "Deprecated compatibility prop; use the shared baseline." },
             class: { kind: "string" },
         },
         slots: { children: { kind: "snippet", required: true }, actions: { kind: "snippet" } },
@@ -38,7 +68,6 @@ const registryEntries = [
             eyebrow: { kind: "string" },
             description: { kind: "string" },
             breadcrumbs: { kind: "string[]" },
-            density: variant("contentHeaderRecipe", "density"),
             class: { kind: "string" },
         },
         slots: { actions: { kind: "snippet" } },
@@ -208,7 +237,7 @@ export function createComponentRegistryManifest() {
     return {
         version: "svadmin/component-registry-v1",
         purpose: "authoring-only",
-        coverage: "twelve-ui-components-and-fourteen-recipes",
+        coverage: "page-pattern-and-semantic-ui-components",
         runtimeCatalog: "@svadmin/surface: createSurfaceCatalogManifest",
         designContract: surfaceDesignContract,
         recipes: Object.fromEntries(Object.keys(allRecipes)

package/dist/components/AppShellPage.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Menu, X } from '@lucide/svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { cn } from '../utils.js';
+
+  type Width = 'narrow' | 'default' | 'wide' | 'full';
+
+  interface Props {
+    /** Page content; typically a `PagePattern` or `ContentPageShell`. */
+    children: Snippet;
+    /** Navigation region. The host owns links and routing; the shell owns layout. */
+    sidebar?: Snippet;
+    /** Leading topbar region, rendered before the mobile navigation trigger. */
+    topbarStart?: Snippet;
+    /** Topbar region between the leading and trailing slots (search, breadcrumbs…). */
+    topbar?: Snippet;
+    /** Trailing topbar actions (account menu, notifications…). */
+    topbarEnd?: Snippet;
+    /** Optional secondary column for detail/workspace pages. */
+    aside?: Snippet;
+    footer?: Snippet;
+    width?: Width;
+    /** Collapses the navigation rail to icons. Host-controlled, presentation only. */
+    collapsed?: boolean;
+    /** Open state of the below-breakpoint navigation drawer. */
+    mobileOpen?: boolean;
+    /** Accessible name for the primary landmark. */
+    label?: string;
+    skipLabel?: string;
+    contentId?: string;
+    class?: string;
+  }
+
+  let {
+    children,
+    sidebar,
+    topbarStart,
+    topbar,
+    topbarEnd,
+    aside,
+    footer,
+    width = 'default',
+    collapsed = false,
+    mobileOpen = $bindable(false),
+    label,
+    skipLabel,
+    contentId,
+    class: className = '',
+  }: Props = $props();
+
+  const generatedId = $props.id();
+  const i18n = useTranslation();
+  const mainId = $derived(contentId ?? generatedId);
+  const sidebarId = $derived(`${generatedId}-sidebar`);
+  // 未提供可读名称时退回通用文案，避免出现没有可访问名的 <main>。
+  const resolvedLabel = $derived(label ?? i18n.t('common.mainNavigation'));
+  const resolvedSkipLabel = $derived(skipLabel ?? i18n.t('common.skipToMainContent'));
+
+  function closeMobileNav() {
+    mobileOpen = false;
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape' && mobileOpen) closeMobileNav();
+  }
+
+  // 宿主常用 hash 路由，不能让跳转链接把 #main 当成一次路由跳转。
+  function focusMain(event: MouseEvent) {
+    const target = document.getElementById(mainId);
+    if (!target) return;
+    event.preventDefault();
+    target.focus();
+    target.scrollIntoView?.({ block: 'start' });
+  }
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+<a class="svadmin-app-shell__skip" href="#{mainId}" onclick={focusMain}>{resolvedSkipLabel}</a>
+
+<div
+  class={cn('svadmin-app-shell', className)}
+  data-sidebar={sidebar ? 'true' : undefined}
+  data-aside={aside ? 'true' : undefined}
+  data-collapsed={collapsed ? 'true' : undefined}
+  data-mobile-open={mobileOpen ? 'true' : undefined}
+  data-width={width}
+>
+  <header class="svadmin-app-shell__topbar" data-slot="app-shell-topbar">
+    {#if sidebar}
+      <button
+        type="button"
+        class="svadmin-app-shell__mobile-toggle"
+        data-slot="app-shell-mobile-toggle"
+        aria-controls={sidebarId}
+        aria-expanded={mobileOpen ? 'true' : 'false'}
+        aria-label={mobileOpen ? i18n.t('common.close') : i18n.t('common.menu')}
+        onclick={() => (mobileOpen = !mobileOpen)}
+      >
+        {#if mobileOpen}
+          <X aria-hidden="true" size={18} />
+        {:else}
+          <Menu aria-hidden="true" size={18} />
+        {/if}
+      </button>
+    {/if}
+    {#if topbarStart}
+      <div class="svadmin-app-shell__topbar-start">{@render topbarStart()}</div>
+    {/if}
+    <div class="svadmin-app-shell__topbar-main">{@render topbar?.()}</div>
+    {#if topbarEnd}
+      <div class="svadmin-app-shell__topbar-end">{@render topbarEnd()}</div>
+    {/if}
+  </header>
+
+  {#if sidebar}
+    <nav id={sidebarId} class="svadmin-app-shell__sidebar" aria-label={resolvedLabel} data-slot="app-shell-sidebar">
+      <div class="svadmin-app-shell__sidebar-inner">{@render sidebar()}</div>
+    </nav>
+    <button
+      type="button"
+      class="svadmin-app-shell__scrim"
+      tabindex="-1"
+      aria-hidden="true"
+      data-slot="app-shell-scrim"
+      onclick={closeMobileNav}
+    ></button>
+  {/if}
+
+  <main id={mainId} class="svadmin-app-shell__main" tabindex="-1">
+    <div class="svadmin-app-shell__body" data-slot="app-shell-body">
+      <div class="svadmin-app-shell__content" data-slot="app-shell-content">
+        {@render children()}
+      </div>
+      {#if aside}
+        <aside class="svadmin-app-shell__aside" data-slot="app-shell-aside">{@render aside()}</aside>
+      {/if}
+    </div>
+  </main>
+
+  {#if footer}
+    <footer class="svadmin-app-shell__footer" data-slot="app-shell-footer">{@render footer()}</footer>
+  {/if}
+</div>
+
+<style>
+  /* Layout-only overrides. Sizes, colors and radii stay in app-shell.css so a
+   * host override of the token layer reaches this component too. */
+  .svadmin-app-shell__mobile-toggle {
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    height: var(--svadmin-control-h);
+    width: var(--svadmin-control-h);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--background);
+    color: var(--foreground);
+    cursor: pointer;
+  }
+  .svadmin-app-shell__mobile-toggle:hover {
+    background: var(--muted);
+  }
+  .svadmin-app-shell__mobile-toggle:focus-visible {
+    outline: var(--svadmin-focus-width) solid var(--ring);
+    outline-offset: var(--svadmin-focus-offset);
+  }
+  .svadmin-app-shell__main:focus-visible {
+    outline: none;
+  }
+</style>

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

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+type Width = 'narrow' | 'default' | 'wide' | 'full';
+interface Props {
+    /** Page content; typically a `PagePattern` or `ContentPageShell`. */
+    children: Snippet;
+    /** Navigation region. The host owns links and routing; the shell owns layout. */
+    sidebar?: Snippet;
+    /** Leading topbar region, rendered before the mobile navigation trigger. */
+    topbarStart?: Snippet;
+    /** Topbar region between the leading and trailing slots (search, breadcrumbs…). */
+    topbar?: Snippet;
+    /** Trailing topbar actions (account menu, notifications…). */
+    topbarEnd?: Snippet;
+    /** Optional secondary column for detail/workspace pages. */
+    aside?: Snippet;
+    footer?: Snippet;
+    width?: Width;
+    /** Collapses the navigation rail to icons. Host-controlled, presentation only. */
+    collapsed?: boolean;
+    /** Open state of the below-breakpoint navigation drawer. */
+    mobileOpen?: boolean;
+    /** Accessible name for the primary landmark. */
+    label?: string;
+    skipLabel?: string;
+    contentId?: string;
+    class?: string;
+}
+declare const AppShellPage: import("svelte").Component<Props, {}, "mobileOpen">;
+type AppShellPage = ReturnType<typeof AppShellPage>;
+export default AppShellPage;

package/dist/components/ApprovalActionCard.svelte

@@ -4,6 +4,7 @@
   import { Button } from './ui/button/index.js';
   import { Badge } from './ui/badge/index.js';
   import * as Dialog from './ui/dialog/index.js';
+  import { useTranslation } from '@svadmin/core/i18n';
   import { cn } from '../utils.js';
 
   export type ApprovalStatus = 'pending' | 'approved' | 'rejected' | 'recalled';
@@ -28,7 +29,7 @@
   }
 
   let {
-    title = 'Approval Request',
+    title,
     status = 'pending',
     applicant,
     onapprove,
@@ -39,6 +40,10 @@
     children,
   }: Props = $props();
 
+  const controlId = $props.id();
+  const i18n = useTranslation();
+  const isZh = $derived(i18n.locale === 'zh-CN');
+  const resolvedTitle = $derived(title ?? (isZh ? '审批申请' : 'Approval Request'));
   let approveDialogOpen = $state(false);
   let rejectDialogOpen = $state(false);
   let transferDialogOpen = $state(false);
@@ -47,26 +52,35 @@
   let rejectReason = $state('');
   let transferTarget = $state('');
   let isSubmitting = $state(false);
+  let errorMessage = $state('');
 
   const statusConfig = $derived.by(() => {
     switch (status) {
       case 'approved':
-        return { label: 'Approved', icon: CheckCircle2 };
+        return { label: isZh ? '已通过' : 'Approved', icon: CheckCircle2 };
       case 'rejected':
-        return { label: 'Rejected', icon: XCircle };
+        return { label: isZh ? '已驳回' : 'Rejected', icon: XCircle };
       case 'recalled':
-        return { label: 'Recalled', icon: Undo2 };
+        return { label: isZh ? '已撤回' : 'Recalled', icon: Undo2 };
       default:
-        return { label: 'Pending Approval', icon: Clock };
+        return { label: isZh ? '待审批' : 'Pending Approval', icon: Clock };
     }
   });
 
+  function failureMessage(caught: unknown): string {
+    if (caught instanceof Error && caught.message.trim()) return caught.message;
+    return isZh ? '操作失败，请检查输入后重试。' : 'Action failed. Check the input and retry.';
+  }
+
   async function handleApprove() {
     isSubmitting = true;
+    errorMessage = '';
     try {
       await onapprove?.(approveComment || undefined);
       approveDialogOpen = false;
       approveComment = '';
+    } catch (caught) {
+      errorMessage = failureMessage(caught);
     } finally {
       isSubmitting = false;
     }
@@ -75,10 +89,13 @@
   async function handleReject() {
     if (!rejectReason.trim()) return;
     isSubmitting = true;
+    errorMessage = '';
     try {
       await onreject?.(rejectReason);
       rejectDialogOpen = false;
       rejectReason = '';
+    } catch (caught) {
+      errorMessage = failureMessage(caught);
     } finally {
       isSubmitting = false;
     }
@@ -87,10 +104,13 @@
   async function handleTransfer() {
     if (!transferTarget.trim()) return;
     isSubmitting = true;
+    errorMessage = '';
     try {
       await ontransfer?.(transferTarget);
       transferDialogOpen = false;
       transferTarget = '';
+    } catch (caught) {
+      errorMessage = failureMessage(caught);
     } finally {
       isSubmitting = false;
     }
@@ -101,7 +121,7 @@
   <div class="svadmin-approval-card__header">
     <div class="svadmin-approval-card__heading">
       <div class="svadmin-approval-card__title-row">
-        <h4 class="svadmin-approval-card__title">{title}</h4>
+        <h4 class="svadmin-approval-card__title">{resolvedTitle}</h4>
         <Badge variant="outline" data-status={status}>
           <statusConfig.icon class="svadmin-approval-card__status-icon" />
           {statusConfig.label}
@@ -109,7 +129,7 @@
       </div>
       {#if applicant}
         <p class="svadmin-approval-card__applicant">
-          Submitted by <strong>{applicant.name}</strong>
+          {isZh ? '提交人：' : 'Submitted by '}<strong>{applicant.name}</strong>
           {#if applicant.department} ({applicant.department}){/if}
           {#if applicant.time} · {applicant.time}{/if}
         </p>
@@ -124,10 +144,10 @@
             size="sm"
             class="svadmin-approval-card__action"
             {disabled}
-            onclick={() => { transferDialogOpen = true; }}
+            onclick={() => { transferDialogOpen = true; errorMessage = ''; }}
           >
             <ArrowRightLeft class="svadmin-approval-card__action-icon" />
-            Transfer
+            {isZh ? '转交' : 'Transfer'}
           </Button>
         {/if}
 
@@ -137,10 +157,10 @@
             size="sm"
             class="svadmin-approval-card__action svadmin-approval-card__action--reject"
             {disabled}
-            onclick={() => { rejectDialogOpen = true; }}
+            onclick={() => { rejectDialogOpen = true; errorMessage = ''; }}
           >
             <X class="svadmin-approval-card__action-icon" />
-            Reject
+            {isZh ? '驳回' : 'Reject'}
           </Button>
         {/if}
 
@@ -149,10 +169,10 @@
             size="sm"
             class="svadmin-approval-card__action svadmin-approval-card__action--approve"
             {disabled}
-            onclick={() => { approveDialogOpen = true; }}
+            onclick={() => { approveDialogOpen = true; errorMessage = ''; }}
           >
             <Check class="svadmin-approval-card__action-icon" />
-            Approve
+            {isZh ? '通过' : 'Approve'}
           </Button>
         {/if}
       </div>
@@ -171,21 +191,22 @@
   <Dialog.Dialog bind:open={approveDialogOpen}>
     <Dialog.DialogContent class="svadmin-approval-card__dialog">
       <Dialog.DialogHeader>
-        <Dialog.DialogTitle>Confirm Approval</Dialog.DialogTitle>
+        <Dialog.DialogTitle>{isZh ? '确认通过' : 'Confirm Approval'}</Dialog.DialogTitle>
       </Dialog.DialogHeader>
       <div class="svadmin-approval-card__dialog-form">
-        <label class="svadmin-approval-card__dialog-label" for="approve_comment_input">Optional Approval Comment</label>
+        <label class="svadmin-approval-card__dialog-label" for={`${controlId}-approve-comment`}>{isZh ? '审批意见（可选）' : 'Optional Approval Comment'}</label>
         <textarea
-          id="approve_comment_input"
+          id={`${controlId}-approve-comment`}
           bind:value={approveComment}
-          placeholder="e.g. Verified and approved"
+          placeholder={isZh ? '例如：已核验，准予通过' : 'e.g. Verified and approved'}
           class="svadmin-approval-card__textarea"
         ></textarea>
+        {#if errorMessage}<p role="alert" class="svadmin-approval-card__error text-destructive">{errorMessage}</p>{/if}
       </div>
       <Dialog.DialogFooter>
-        <Button variant="outline" size="sm" onclick={() => { approveDialogOpen = false; }}>Cancel</Button>
+        <Button variant="outline" size="sm" onclick={() => { approveDialogOpen = false; errorMessage = ''; }}>{isZh ? '取消' : 'Cancel'}</Button>
         <Button size="sm" class="svadmin-approval-card__confirm svadmin-approval-card__confirm--approve" disabled={isSubmitting} onclick={handleApprove}>
-          Confirm Approval
+          {isSubmitting ? (isZh ? '处理中…' : 'Processing…') : (isZh ? '确认通过' : 'Confirm Approval')}
         </Button>
       </Dialog.DialogFooter>
     </Dialog.DialogContent>
@@ -197,22 +218,23 @@
   <Dialog.Dialog bind:open={rejectDialogOpen}>
     <Dialog.DialogContent class="svadmin-approval-card__dialog">
       <Dialog.DialogHeader>
-        <Dialog.DialogTitle class="svadmin-approval-card__reject-title">Reject Request</Dialog.DialogTitle>
+        <Dialog.DialogTitle class="svadmin-approval-card__reject-title">{isZh ? '驳回申请' : 'Reject Request'}</Dialog.DialogTitle>
       </Dialog.DialogHeader>
       <div class="svadmin-approval-card__dialog-form">
-        <label class="svadmin-approval-card__dialog-label" for="reject_reason_input">Rejection Reason (Required)</label>
+        <label class="svadmin-approval-card__dialog-label" for={`${controlId}-reject-reason`}>{isZh ? '驳回原因（必填）' : 'Rejection Reason (Required)'}</label>
         <textarea
-          id="reject_reason_input"
+          id={`${controlId}-reject-reason`}
           bind:value={rejectReason}
-          placeholder="Please explain why this request is being rejected..."
+          placeholder={isZh ? '请说明驳回原因…' : 'Please explain why this request is being rejected...'}
           class="svadmin-approval-card__textarea svadmin-approval-card__textarea--reject"
           required
         ></textarea>
+        {#if errorMessage}<p role="alert" class="svadmin-approval-card__error text-destructive">{errorMessage}</p>{/if}
       </div>
       <Dialog.DialogFooter>
-        <Button variant="outline" size="sm" onclick={() => { rejectDialogOpen = false; }}>Cancel</Button>
+        <Button variant="outline" size="sm" onclick={() => { rejectDialogOpen = false; errorMessage = ''; }}>{isZh ? '取消' : 'Cancel'}</Button>
         <Button variant="destructive" size="sm" disabled={isSubmitting || !rejectReason.trim()} onclick={handleReject}>
-          Confirm Rejection
+          {isSubmitting ? (isZh ? '处理中…' : 'Processing…') : (isZh ? '确认驳回' : 'Confirm Rejection')}
         </Button>
       </Dialog.DialogFooter>
     </Dialog.DialogContent>
@@ -224,23 +246,24 @@
   <Dialog.Dialog bind:open={transferDialogOpen}>
     <Dialog.DialogContent class="svadmin-approval-card__dialog">
       <Dialog.DialogHeader>
-        <Dialog.DialogTitle>Transfer Approval</Dialog.DialogTitle>
+        <Dialog.DialogTitle>{isZh ? '转交审批' : 'Transfer Approval'}</Dialog.DialogTitle>
       </Dialog.DialogHeader>
       <div class="svadmin-approval-card__dialog-form">
-        <label class="svadmin-approval-card__dialog-label" for="transfer_target_input">Target Approver Email / Username</label>
+        <label class="svadmin-approval-card__dialog-label" for={`${controlId}-transfer-target`}>{isZh ? '目标审批人邮箱或用户名' : 'Target Approver Email / Username'}</label>
         <input
-          id="transfer_target_input"
+          id={`${controlId}-transfer-target`}
           type="text"
           bind:value={transferTarget}
-          placeholder="e.g. manager@example.com"
+          placeholder={isZh ? '例如：manager@example.com' : 'e.g. manager@example.com'}
           class="svadmin-approval-card__input"
           required
         />
+        {#if errorMessage}<p role="alert" class="svadmin-approval-card__error text-destructive">{errorMessage}</p>{/if}
       </div>
       <Dialog.DialogFooter>
-        <Button variant="outline" size="sm" onclick={() => { transferDialogOpen = false; }}>Cancel</Button>
+        <Button variant="outline" size="sm" onclick={() => { transferDialogOpen = false; errorMessage = ''; }}>{isZh ? '取消' : 'Cancel'}</Button>
         <Button size="sm" disabled={isSubmitting || !transferTarget.trim()} onclick={handleTransfer}>
-          Transfer
+          {isSubmitting ? (isZh ? '处理中…' : 'Processing…') : (isZh ? '转交' : 'Transfer')}
         </Button>
       </Dialog.DialogFooter>
     </Dialog.DialogContent>