@h-ai/ui 0.1.0-alpha.25 → 0.1.0-alpha.26

package/dist/components/scenes/error/ErrorPage.svelte

@@ -0,0 +1,125 @@
+<!--
+  @component ErrorPage
+  通用错误页场景组件
+
+  展示大号状态码 + 标题 + 描述 + 操作按钮，内置 401/403/404/500/503 预设。
+  借鉴 shadcn-admin 错误页布局，复用现有主题 token。
+
+  使用 Svelte 5 Runes ($props, $derived)
+
+  @example
+  <ErrorPage status={403} homeUrl="/admin" onback={() => history.back()} />
+-->
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import type { ErrorPreset } from './error-presets.js'
+  import { uiM } from '../../../messages.js'
+  import { cn } from '../../../utils.js'
+  import Button from '../../primitives/Button.svelte'
+  import { ERROR_PRESETS, resolveErrorPreset } from './error-presets.js'
+
+  const {
+    status = 404,
+    code,
+    title,
+    description,
+    showHome = true,
+    showBack = true,
+    homeUrl = '/',
+    onhome,
+    onback,
+    icon,
+    actions,
+    class: className = '',
+  }: {
+    /** HTTP 状态码或预设标识；未命中预设时回退到最接近的预设 */
+    status?: number | string | ErrorPreset
+    /** 自定义大号展示码（覆盖预设） */
+    code?: string
+    /** 自定义标题（覆盖预设文案） */
+    title?: string
+    /** 自定义描述（覆盖预设文案） */
+    description?: string
+    /** 是否显示「返回首页」按钮 */
+    showHome?: boolean
+    /** 是否显示「返回上一页」按钮 */
+    showBack?: boolean
+    /** 首页地址（未提供 onhome 时作为链接跳转） */
+    homeUrl?: string
+    /** 自定义「返回首页」处理（优先于 homeUrl 链接） */
+    onhome?: () => void
+    /** 自定义「返回上一页」处理（默认 history.back()） */
+    onback?: () => void
+    /** 自定义图标插槽 */
+    icon?: Snippet
+    /** 自定义操作区插槽（提供时覆盖默认按钮） */
+    actions?: Snippet
+    class?: string
+  } = $props()
+
+  const preset = $derived(ERROR_PRESETS[resolveErrorPreset(status)])
+  const displayCode = $derived(code ?? preset.code)
+  const displayTitle = $derived(title ?? uiM(preset.titleKey))
+  const displayDesc = $derived(description ?? uiM(preset.descKey))
+
+  function handleBack() {
+    if (onback) {
+      onback()
+      return
+    }
+    if (typeof history !== 'undefined') {
+      history.back()
+    }
+  }
+
+  function handleHome() {
+    onhome?.()
+  }
+</script>
+
+<div class={cn('flex min-h-[60vh] w-full flex-col items-center justify-center px-6 py-12 text-center', className)}>
+  <!-- 图标 -->
+  <div class='mb-6 flex size-16 items-center justify-center rounded-2xl bg-base-content/5 text-base-content/40'>
+    {#if icon}
+      {@render icon()}
+    {:else}
+      <span class='{preset.icon} size-8'></span>
+    {/if}
+  </div>
+
+  <!-- 大号状态码 -->
+  <p class='text-6xl font-bold tracking-tight text-base-content/85 sm:text-7xl'>{displayCode}</p>
+
+  <!-- 标题 -->
+  <h1 class='mt-4 text-xl font-semibold text-base-content sm:text-2xl'>{displayTitle}</h1>
+
+  <!-- 描述 -->
+  <p class='mt-2 max-w-md text-sm text-base-content/55'>{displayDesc}</p>
+
+  <!-- 操作区 -->
+  <div class='mt-8 flex flex-wrap items-center justify-center gap-3'>
+    {#if actions}
+      {@render actions()}
+    {:else}
+      {#if showBack}
+        <Button variant='outline' size='sm' onclick={handleBack}>
+          <span class='icon-[tabler--arrow-left] mr-1.5 size-4'></span>
+          {uiM('error_go_back')}
+        </Button>
+      {/if}
+      {#if showHome}
+        {#if onhome}
+          <Button variant='primary' size='sm' onclick={handleHome}>
+            <span class='icon-[tabler--home] mr-1.5 size-4'></span>
+            {uiM('error_back_home')}
+          </Button>
+        {:else}
+          <a href={homeUrl} class='btn btn-primary btn-sm'>
+            <span class='icon-[tabler--home] mr-1.5 size-4'></span>
+            {uiM('error_back_home')}
+          </a>
+        {/if}
+      {/if}
+    {/if}
+  </div>
+</div>

package/dist/components/scenes/error/ErrorPage.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { Snippet } from 'svelte';
+import type { ErrorPreset } from './error-presets.js';
+type $$ComponentProps = {
+    /** HTTP 状态码或预设标识；未命中预设时回退到最接近的预设 */
+    status?: number | string | ErrorPreset;
+    /** 自定义大号展示码（覆盖预设） */
+    code?: string;
+    /** 自定义标题（覆盖预设文案） */
+    title?: string;
+    /** 自定义描述（覆盖预设文案） */
+    description?: string;
+    /** 是否显示「返回首页」按钮 */
+    showHome?: boolean;
+    /** 是否显示「返回上一页」按钮 */
+    showBack?: boolean;
+    /** 首页地址（未提供 onhome 时作为链接跳转） */
+    homeUrl?: string;
+    /** 自定义「返回首页」处理（优先于 homeUrl 链接） */
+    onhome?: () => void;
+    /** 自定义「返回上一页」处理（默认 history.back()） */
+    onback?: () => void;
+    /** 自定义图标插槽 */
+    icon?: Snippet;
+    /** 自定义操作区插槽（提供时覆盖默认按钮） */
+    actions?: Snippet;
+    class?: string;
+};
+/**
+ * ErrorPage
+ * 通用错误页场景组件
+ *
+ * 展示大号状态码 + 标题 + 描述 + 操作按钮，内置 401/403/404/500/503 预设。
+ * 借鉴 shadcn-admin 错误页布局，复用现有主题 token。
+ *
+ * 使用 Svelte 5 Runes ($props, $derived)
+ *
+ * @example
+ * <ErrorPage status={403} homeUrl="/admin" onback={() => history.back()} />
+ */
+declare const ErrorPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type ErrorPage = ReturnType<typeof ErrorPage>;
+export default ErrorPage;

package/dist/components/scenes/error/error-presets.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @h-ai/ui — 错误页预设
+ *
+ * 为 ErrorPage 提供常见 HTTP 错误的内置文案 key 与图标。
+ * @module error-presets
+ */
+import type { UIMessageKey } from '../../../messages.js';
+/** 内置错误预设标识 */
+export type ErrorPreset = '401' | '403' | '404' | '500' | '503';
+/** 单个错误预设的展示信息 */
+export interface ErrorPresetInfo {
+    /** HTTP 状态码（用于大号展示） */
+    code: string;
+    /** 标题文案 key */
+    titleKey: UIMessageKey;
+    /** 描述文案 key */
+    descKey: UIMessageKey;
+    /** Tabler 图标类名 */
+    icon: string;
+}
+/** 错误预设映射表 */
+export declare const ERROR_PRESETS: Record<ErrorPreset, ErrorPresetInfo>;
+/** 根据 HTTP 状态码解析到最接近的预设 */
+export declare function resolveErrorPreset(status: number | string | undefined): ErrorPreset;

package/dist/components/scenes/error/error-presets.js

@@ -0,0 +1,31 @@
+/**
+ * @h-ai/ui — 错误页预设
+ *
+ * 为 ErrorPage 提供常见 HTTP 错误的内置文案 key 与图标。
+ * @module error-presets
+ */
+/** 错误预设映射表 */
+export const ERROR_PRESETS = {
+    401: { code: '401', titleKey: 'error_401_title', descKey: 'error_401_desc', icon: 'icon-[tabler--lock]' },
+    403: { code: '403', titleKey: 'error_403_title', descKey: 'error_403_desc', icon: 'icon-[tabler--shield-lock]' },
+    404: { code: '404', titleKey: 'error_404_title', descKey: 'error_404_desc', icon: 'icon-[tabler--map-search]' },
+    500: { code: '500', titleKey: 'error_500_title', descKey: 'error_500_desc', icon: 'icon-[tabler--server-off]' },
+    503: { code: '503', titleKey: 'error_503_title', descKey: 'error_503_desc', icon: 'icon-[tabler--tool]' },
+};
+/** 根据 HTTP 状态码解析到最接近的预设 */
+export function resolveErrorPreset(status) {
+    const code = String(status ?? '');
+    if (code in ERROR_PRESETS) {
+        return code;
+    }
+    const num = Number(code);
+    if (num === 401)
+        return '401';
+    if (num === 403)
+        return '403';
+    if (num === 503)
+        return '503';
+    if (num >= 500)
+        return '500';
+    return '404';
+}

package/dist/components/scenes/error/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @h-ai/ui — 错误页场景组件 (Error Scenes)
+ *
+ * 通用错误页展示，内置常见 HTTP 错误预设。
+ * @module index
+ */
+export * from './error-presets.js';
+export { default as ErrorPage } from './ErrorPage.svelte';

package/dist/components/scenes/error/index.js

@@ -0,0 +1,8 @@
+/**
+ * @h-ai/ui — 错误页场景组件 (Error Scenes)
+ *
+ * 通用错误页展示，内置常见 HTTP 错误预设。
+ * @module index
+ */
+export * from './error-presets.js';
+export { default as ErrorPage } from './ErrorPage.svelte';

package/dist/components/scenes/iam/AuthShell.svelte

@@ -0,0 +1,138 @@
+<!--
+  @component AuthShell
+  认证页布局场景组件
+
+  借鉴 shadcn-admin sign-in / sign-in-2：支持居中卡片（card）与左右分栏（split）两种布局。
+  品牌区、标题、副标题、表单内容由使用方提供。
+
+  使用 Svelte 5 Runes ($props, $derived)
+
+  @example
+  <AuthShell variant="card" title="登录" subtitle="欢迎回来">
+    <LoginForm onsubmit={handleLogin} />
+  </AuthShell>
+-->
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import { cn } from '../../../utils.js'
+
+  const {
+    variant = 'card',
+    title = '',
+    subtitle = '',
+    brandTitle = '',
+    brandText = '',
+    logo,
+    illustration,
+    description,
+    highlights,
+    brand,
+    footer,
+    children,
+    class: className = '',
+  }: {
+    /** 布局形态：'card'（居中卡片，默认）或 'split'（左右分栏） */
+    variant?: 'card' | 'split'
+    /** 表单区标题 */
+    title?: string
+    /** 表单区副标题 */
+    subtitle?: string
+    /** split 模式品牌区主标题 */
+    brandTitle?: string
+    /** split 模式品牌区描述文案 */
+    brandText?: string
+    /** 顶部 Logo 插槽 */
+    logo?: Snippet
+    /** split 模式品牌区插图（如大图/海报） */
+    illustration?: Snippet
+    /** split 模式品牌区描述区（覆盖 brandText） */
+    description?: Snippet
+    /** split 模式品牌区重点信息（如卖点列表） */
+    highlights?: Snippet
+    /** split 模式品牌区自定义插槽（覆盖 brandTitle/brandText） */
+    brand?: Snippet
+    /** 底部插槽（如注册/登录切换链接） */
+    footer?: Snippet
+    /** 表单内容 */
+    children?: Snippet
+    class?: string
+  } = $props()
+
+  const isSplit = $derived(variant === 'split')
+  // split 模式下品牌区已展示 Logo，表单区仅在小屏展示，避免桌面端重复
+  const logoWrapClass = $derived(isSplit ? 'mb-6 flex justify-center lg:hidden' : 'mb-6 flex justify-center')
+</script>
+
+{#snippet formPanel()}
+  <div class='flex w-full max-w-sm flex-col'>
+    {#if logo}
+      <div class={logoWrapClass}>{@render logo()}</div>
+    {/if}
+    {#if title}
+      <h1 class='text-center text-2xl font-semibold tracking-tight text-base-content'>{title}</h1>
+    {/if}
+    {#if subtitle}
+      <p class='mt-2 text-center text-sm text-base-content/55'>{subtitle}</p>
+    {/if}
+    <div class='mt-7'>
+      {#if children}{@render children()}{/if}
+    </div>
+    {#if footer}
+      <div class='mt-6 text-center text-sm text-base-content/60'>{@render footer()}</div>
+    {/if}
+  </div>
+{/snippet}
+
+{#if isSplit}
+  <div class={cn('grid min-h-screen lg:grid-cols-2', className)}>
+    <!-- 品牌区 -->
+    <div class='relative hidden overflow-hidden bg-primary p-10 text-primary-content lg:flex'>
+      <div class='pointer-events-none absolute inset-0 opacity-20' style='background-image: radial-gradient(circle at 20% 20%, currentColor 1px, transparent 1px); background-size: 28px 28px;'></div>
+      {#if brand}
+        {@render brand()}
+      {:else}
+        <div class='relative z-10 flex w-full flex-1 flex-col justify-between gap-10'>
+          <div class='space-y-6'>
+            {#if logo}
+              <div>{@render logo()}</div>
+            {/if}
+            {#if illustration}
+              <div class='overflow-hidden rounded-2xl border border-primary-content/15 bg-primary-content/5 p-2'>
+                {@render illustration()}
+              </div>
+            {/if}
+          </div>
+
+          <div class='space-y-4'>
+            {#if brandTitle}
+              <h2 class='text-3xl font-semibold leading-snug'>{brandTitle}</h2>
+            {/if}
+            {#if description}
+              <div class='max-w-xl text-sm text-primary-content/85'>
+                {@render description()}
+              </div>
+            {:else if brandText}
+              <p class='max-w-xl text-sm text-primary-content/80'>{brandText}</p>
+            {/if}
+          </div>
+
+          {#if highlights}
+            <div class='max-w-xl text-sm text-primary-content/90'>
+              {@render highlights()}
+            </div>
+          {/if}
+        </div>
+      {/if}
+    </div>
+    <!-- 表单区 -->
+    <div class='flex items-center justify-center p-6 sm:p-10'>
+      {@render formPanel()}
+    </div>
+  </div>
+{:else}
+  <div class={cn('flex min-h-screen items-center justify-center bg-base-200/40 p-6', className)}>
+    <div class='w-full max-w-md rounded-2xl border border-base-content/8 bg-base-100 p-8 shadow-sm sm:p-10'>
+      {@render formPanel()}
+    </div>
+  </div>
+{/if}

package/dist/components/scenes/iam/AuthShell.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** 布局形态：'card'（居中卡片，默认）或 'split'（左右分栏） */
+    variant?: 'card' | 'split';
+    /** 表单区标题 */
+    title?: string;
+    /** 表单区副标题 */
+    subtitle?: string;
+    /** split 模式品牌区主标题 */
+    brandTitle?: string;
+    /** split 模式品牌区描述文案 */
+    brandText?: string;
+    /** 顶部 Logo 插槽 */
+    logo?: Snippet;
+    /** split 模式品牌区插图（如大图/海报） */
+    illustration?: Snippet;
+    /** split 模式品牌区描述区（覆盖 brandText） */
+    description?: Snippet;
+    /** split 模式品牌区重点信息（如卖点列表） */
+    highlights?: Snippet;
+    /** split 模式品牌区自定义插槽（覆盖 brandTitle/brandText） */
+    brand?: Snippet;
+    /** 底部插槽（如注册/登录切换链接） */
+    footer?: Snippet;
+    /** 表单内容 */
+    children?: Snippet;
+    class?: string;
+};
+/**
+ * AuthShell
+ * 认证页布局场景组件
+ *
+ * 借鉴 shadcn-admin sign-in / sign-in-2：支持居中卡片（card）与左右分栏（split）两种布局。
+ * 品牌区、标题、副标题、表单内容由使用方提供。
+ *
+ * 使用 Svelte 5 Runes ($props, $derived)
+ *
+ * @example
+ * <AuthShell variant="card" title="登录" subtitle="欢迎回来">
+ *   <LoginForm onsubmit={handleLogin} />
+ * </AuthShell>
+ */
+declare const AuthShell: import("svelte").Component<$$ComponentProps, {}, "">;
+type AuthShell = ReturnType<typeof AuthShell>;
+export default AuthShell;

package/dist/components/scenes/iam/index.d.ts

@@ -4,6 +4,7 @@
  * 身份认证相关的场景化组件
  * @module index
  */
+export { default as AuthShell } from './AuthShell.svelte';
 export { default as ChangePasswordForm } from './ChangePasswordForm.svelte';
 export { default as ForgotPasswordForm } from './ForgotPasswordForm.svelte';
 export { default as LoginForm } from './LoginForm.svelte';

package/dist/components/scenes/iam/index.js

@@ -4,9 +4,10 @@
  * 身份认证相关的场景化组件
  * @module index
  */
+// 认证表单
+export { default as AuthShell } from './AuthShell.svelte';
 export { default as ChangePasswordForm } from './ChangePasswordForm.svelte';
 export { default as ForgotPasswordForm } from './ForgotPasswordForm.svelte';
-// 认证表单
 export { default as LoginForm } from './LoginForm.svelte';
 export { default as PasswordInput } from './PasswordInput.svelte';
 // 权限控制

package/dist/components/scenes/index.d.ts

@@ -8,6 +8,7 @@ export * from './ai/index.js';
 export * from './app/index.js';
 export * from './crud/index.js';
 export * from './crypto/index.js';
+export * from './error/index.js';
 export * from './iam/index.js';
 export * from './storage/index.js';
 export * from './types.js';

package/dist/components/scenes/index.js

@@ -12,6 +12,8 @@ export * from './app/index.js';
 export * from './crud/index.js';
 // Crypto 场景组件
 export * from './crypto/index.js';
+// 错误页场景组件
+export * from './error/index.js';
 // IAM 场景组件
 export * from './iam/index.js';
 // Storage 场景组件

package/dist/messages/en-US.json

@@ -160,6 +160,8 @@
   "pagination_jump_to": "Go to",
   "pagination_page": "page",
   "pagination_page_size": "{size} / page",
+  "pagination_rows_per_page": "Rows per page",
+  "pagination_page_info": "Page {page} of {total}",
   "severity_critical": "Critical",
   "severity_high": "High",
   "severity_medium": "Medium",
@@ -275,7 +277,24 @@
   "crud_delete_failed": "Delete failed",
   "crud_network_error": "Network error, please try again later",
   "crud_filter_all": "All",
+  "crud_filter_yes": "Yes",
+  "crud_filter_no": "No",
+  "crud_filter_from": "From",
+  "crud_filter_to": "To",
+  "crud_reset": "Reset",
   "crud_total": "{count} items total",
   "crud_detail_empty": "-",
-  "crud_field_required": "This field is required"
+  "crud_field_required": "This field is required",
+  "error_go_back": "Go Back",
+  "error_back_home": "Back to Home",
+  "error_401_title": "Unauthorized",
+  "error_401_desc": "You need to sign in to access this page. Please log in and try again.",
+  "error_403_title": "Access Forbidden",
+  "error_403_desc": "You don't have permission to access this resource. Contact your administrator if you need help.",
+  "error_404_title": "Page Not Found",
+  "error_404_desc": "The page you are looking for doesn't exist or has been moved. Please check the URL.",
+  "error_500_title": "Internal Server Error",
+  "error_500_desc": "Something went wrong on our end. We're working on it, please try again later.",
+  "error_503_title": "Under Maintenance",
+  "error_503_desc": "The system is currently undergoing maintenance. Please check back soon."
 }

package/dist/messages/zh-CN.json

@@ -160,6 +160,8 @@
   "pagination_jump_to": "跳转到",
   "pagination_page": "页",
   "pagination_page_size": "{size} 条/页",
+  "pagination_rows_per_page": "每页",
+  "pagination_page_info": "第 {page} / {total} 页",
   "severity_critical": "严重",
   "severity_high": "高",
   "severity_medium": "中",
@@ -275,7 +277,24 @@
   "crud_delete_failed": "删除失败",
   "crud_network_error": "网络错误，请稍后重试",
   "crud_filter_all": "全部",
+  "crud_filter_yes": "是",
+  "crud_filter_no": "否",
+  "crud_filter_from": "开始日期",
+  "crud_filter_to": "结束日期",
+  "crud_reset": "重置",
   "crud_total": "共 {count} 条",
   "crud_detail_empty": "-",
-  "crud_field_required": "此字段为必填项"
+  "crud_field_required": "此字段为必填项",
+  "error_go_back": "返回上一页",
+  "error_back_home": "返回首页",
+  "error_401_title": "未授权访问",
+  "error_401_desc": "您需要登录后才能访问此页面。请登录后重试。",
+  "error_403_title": "禁止访问",
+  "error_403_desc": "您没有权限访问此资源。如需帮助请联系管理员。",
+  "error_404_title": "页面不存在",
+  "error_404_desc": "您访问的页面不存在或已被移除。请检查地址是否正确。",
+  "error_500_title": "服务器错误",
+  "error_500_desc": "服务器出现了一些问题。我们正在处理，请稍后重试。",
+  "error_503_title": "服务维护中",
+  "error_503_desc": "系统正在维护升级，请稍后再访问。"
 }

package/dist/styles/global.css

@@ -57,7 +57,10 @@ input::-webkit-credentials-auto-fill-button {
 }
 
 /* ─── Focus ring ─── */
-:focus-visible {
+/* 全局 focus-visible 仅用于非表单交互元素（按钮、链接等）
+   表单组件 (.select, .radio, .checkbox, .toggle, .textarea, input, textarea)
+   由 DaisyUI 或组件自身处理焦点样式 */
+:focus-visible:not(input, select, textarea, .select, .radio, .checkbox, .toggle, .textarea) {
   outline: 2px solid oklch(0.6 0.15 250);
   outline-offset: 2px;
   border-radius: 4px;

package/dist/types.d.ts

@@ -438,6 +438,8 @@ export interface ModalProps {
     title?: string;
     /** 尺寸 */
     size?: Size | 'full';
+    /** 面板圆角（任意合法 CSS border-radius 值，默认 1rem） */
+    radius?: string;
     /** 是否可通过点击遮罩关闭 */
     closeOnBackdrop?: boolean;
     /** 是否可通过 ESC 键关闭 */
@@ -601,6 +603,10 @@ export interface PaginationProps {
         page?: string;
         /** 每页条数文案，{size} 会被替换为实际数字 */
         pageSize?: string;
+        /** 每页条数前缀文案（如「每页」/「Rows per page」） */
+        rowsPerPage?: string;
+        /** 页码信息文案，{page} / {total} 会被替换（如「第 {page} / {total} 页」） */
+        pageInfo?: string;
     };
     /** 自定义类名 */
     class?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.25",
+  "version": "0.1.0-alpha.26",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -45,7 +45,7 @@
     "mermaid": "^11.12.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
-    "@h-ai/core": "0.1.0-alpha.25"
+    "@h-ai/core": "0.1.0-alpha.26"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",