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

package/dist/components/scenes/crud/CrudFilterBar.svelte

@@ -6,6 +6,7 @@
 -->
 <script lang='ts'>
   import { uiM } from '../../../messages.js'
+  import BareButton from '../../primitives/BareButton.svelte'
   import Input from '../../primitives/Input.svelte'
   import Select from '../../primitives/Select.svelte'
 
@@ -13,6 +14,12 @@
     id: string
     label: string | (() => string)
     type: string
+    placeholder?: string | (() => string)
+    startKey?: string
+    endKey?: string
+    min?: number
+    max?: number
+    step?: number
     options?: Array<{ label: string, value: string | number | boolean }> | (() => Array<{ label: string, value: string | number | boolean }>)
   }
 
@@ -22,22 +29,62 @@
     searchValue = $bindable(''),
     filterFields = [],
     filterValues = $bindable<Record<string, unknown>>({}),
-    total = 0,
     onsearch,
     onfilterchange,
+    onreset,
   }: {
     searchable?: boolean
     searchPlaceholder?: string
     searchValue?: string
     filterFields?: FilterFieldDef[]
     filterValues?: Record<string, unknown>
-    total?: number
     onsearch?: (search: string) => void
     onfilterchange?: (filters: Record<string, unknown>) => void
+    onreset?: () => void
   } = $props()
 
   let searchTimer: ReturnType<typeof setTimeout> | undefined
 
+  // 是否存在已激活的搜索/过滤条件（用于显示重置按钮）
+  const hasFilterValue = $derived(Object.values(filterValues).some(v => v !== undefined && v !== '' && v !== null))
+  const hasActiveFilters = $derived(searchValue.trim() !== '' || hasFilterValue)
+
+  const dateLikeTypes = new Set(['date', 'datetime-local', 'datetime', 'month', 'week'])
+  const numberLikeTypes = new Set(['number', 'integer'])
+
+  function resolveText(text: string | (() => string) | undefined): string {
+    if (!text)
+      return ''
+    return typeof text === 'function' ? text() : text
+  }
+
+  function normalizeType(type: string): string {
+    return type.trim().toLowerCase()
+  }
+
+  function isBooleanField(field: FilterFieldDef): boolean {
+    const t = normalizeType(field.type)
+    return t === 'boolean' || t === 'switch' || t === 'toggle'
+  }
+
+  function isDateRangeField(field: FilterFieldDef): boolean {
+    const t = normalizeType(field.type)
+    return t === 'date-range' || t === 'daterange'
+  }
+
+  function isDateField(field: FilterFieldDef): boolean {
+    return dateLikeTypes.has(normalizeType(field.type))
+  }
+
+  function isNumberField(field: FilterFieldDef): boolean {
+    return numberLikeTypes.has(normalizeType(field.type))
+  }
+
+  function isTextField(field: FilterFieldDef): boolean {
+    const t = normalizeType(field.type)
+    return t === 'text' || t === 'search' || t === 'keyword'
+  }
+
   function resolveOptions(options?: FilterFieldDef['options']): Array<{ label: string, value: string | number | boolean }> {
     if (!options)
       return []
@@ -55,46 +102,137 @@
     filterValues = { ...filterValues, [fieldId]: value }
     onfilterchange?.(filterValues)
   }
+
+  function handleFilterPatch(partial: Record<string, unknown>) {
+    filterValues = { ...filterValues, ...partial }
+    onfilterchange?.(filterValues)
+  }
+
+  function handleReset() {
+    clearTimeout(searchTimer)
+    searchValue = ''
+    filterValues = {}
+    onreset?.()
+  }
 </script>
 
-<div class='grid gap-3 md:grid-cols-[minmax(0,1fr)_auto] md:items-center'>
-  <div class='flex min-w-0 flex-wrap items-center gap-3 [&_.fieldset]:m-0 [&_.fieldset]:min-w-0'>
-    {#if searchable}
-      <div class='relative min-w-[15rem] flex-[1_1_20rem]'>
-        <span class='icon-[tabler--search] pointer-events-none absolute left-3.5 top-1/2 z-10 size-4 -translate-y-1/2 text-base-content/35'></span>
+<div class='flex flex-wrap items-center gap-2 [&_.fieldset]:m-0 [&_.fieldset]:min-w-0'>
+  {#if searchable}
+    <div class='relative w-full sm:w-64 md:w-72'>
+      <span class='icon-[tabler--search] pointer-events-none absolute left-3 top-1/2 z-10 size-4 -translate-y-1/2 text-base-content/35'></span>
+      <Input
+        type='text'
+        size='sm'
+        placeholder={searchPlaceholder || uiM('crud_search_placeholder')}
+        class='h-8 pl-9 shadow-none'
+        bind:value={searchValue}
+        oninput={handleSearchInput}
+        autocomplete='off'
+      />
+    </div>
+  {/if}
+
+  {#each filterFields as field (field.id)}
+    {@const fieldPlaceholder = resolveText(field.placeholder)}
+    {@const opts = resolveOptions(field.options)}
+
+    {#if isDateRangeField(field)}
+      {@const startKey = field.startKey ?? `${field.id}Start`}
+      {@const endKey = field.endKey ?? `${field.id}End`}
+      <div class='flex items-center gap-1.5'>
+        <div class='w-32 shrink-0'>
+          <input
+            type='date'
+            class='h-8 w-full rounded-lg border border-base-content/15 bg-base-100 px-2.5 text-sm outline-none transition-[border-color,box-shadow] duration-150 focus:border-primary/50 focus:ring-2 focus:ring-primary/10'
+            aria-label={fieldPlaceholder || uiM('crud_filter_from')}
+            value={String(filterValues[startKey] ?? '')}
+            onchange={(e: Event & { currentTarget: HTMLInputElement }) => handleFilterPatch({ [startKey]: e.currentTarget.value })}
+          />
+        </div>
+        <span class='text-sm text-base-content/40'>~</span>
+        <div class='w-32 shrink-0'>
+          <input
+            type='date'
+            class='h-8 w-full rounded-lg border border-base-content/15 bg-base-100 px-2.5 text-sm outline-none transition-[border-color,box-shadow] duration-150 focus:border-primary/50 focus:ring-2 focus:ring-primary/10'
+            aria-label={uiM('crud_filter_to')}
+            value={String(filterValues[endKey] ?? '')}
+            onchange={(e: Event & { currentTarget: HTMLInputElement }) => handleFilterPatch({ [endKey]: e.currentTarget.value })}
+          />
+        </div>
+      </div>
+    {:else if isBooleanField(field)}
+      <div class='w-30 shrink-0'>
+        <Select
+          size='sm'
+          class='h-8 border-base-content/20 bg-base-100 shadow-none'
+          value={String(filterValues[field.id] ?? '')}
+          onchange={(value: string) => handleFilterChange(field.id, value)}
+        >
+          <option value="">{uiM('crud_filter_all')}</option>
+          <option value='true'>{uiM('crud_filter_yes')}</option>
+          <option value='false'>{uiM('crud_filter_no')}</option>
+        </Select>
+      </div>
+    {:else if isDateField(field)}
+      <div class='w-36 shrink-0'>
+        <input
+          type='date'
+          class='h-8 w-full rounded-lg border border-base-content/15 bg-base-100 px-2.5 text-sm outline-none transition-[border-color,box-shadow] duration-150 focus:border-primary/50 focus:ring-2 focus:ring-primary/10'
+          aria-label={fieldPlaceholder || resolveText(field.label)}
+          value={String(filterValues[field.id] ?? '')}
+          onchange={(e: Event & { currentTarget: HTMLInputElement }) => handleFilterChange(field.id, e.currentTarget.value)}
+        />
+      </div>
+    {:else if isNumberField(field)}
+      <div class='w-28 shrink-0'>
+        <Input
+          type='number'
+          size='sm'
+          min={field.min}
+          max={field.max}
+          step={field.step}
+          class='h-8 shadow-none'
+          placeholder={fieldPlaceholder || resolveText(field.label)}
+          value={String(filterValues[field.id] ?? '')}
+          onchange={(e: Event & { currentTarget: HTMLInputElement }) => handleFilterChange(field.id, e.currentTarget.value)}
+        />
+      </div>
+    {:else if opts.length > 0}
+      <div class='w-34 shrink-0'>
+        <Select
+          size='sm'
+          class='h-8 border-base-content/20 bg-base-100 shadow-none'
+          value={String(filterValues[field.id] ?? '')}
+          onchange={(value: string) => handleFilterChange(field.id, value)}
+        >
+          <option value="">{uiM('crud_filter_all')}</option>
+          {#each opts as opt (String(opt.value))}
+            <option value={String(opt.value)}>{opt.label}</option>
+          {/each}
+        </Select>
+      </div>
+    {:else if isTextField(field)}
+      <div class='w-44 shrink-0'>
         <Input
           type='text'
           size='sm'
-          placeholder={searchPlaceholder || uiM('crud_search_placeholder')}
-          class='pl-10 shadow-none'
-          bind:value={searchValue}
-          oninput={handleSearchInput}
-          autocomplete='off'
+          class='h-8 shadow-none'
+          placeholder={fieldPlaceholder || resolveText(field.label)}
+          value={String(filterValues[field.id] ?? '')}
+          onchange={(e: Event & { currentTarget: HTMLInputElement }) => handleFilterChange(field.id, e.currentTarget.value)}
         />
       </div>
     {/if}
+  {/each}
 
-    {#each filterFields as field (field.id)}
-      {@const opts = resolveOptions(field.options)}
-      {#if opts.length > 0}
-        <div class='w-full sm:w-[11rem] sm:flex-none'>
-          <Select
-            size='sm'
-            class='border-base-content/10 bg-base-100 shadow-none'
-            value={String(filterValues[field.id] ?? '')}
-            onchange={value => handleFilterChange(field.id, value)}
-          >
-            <option value="">{uiM('crud_filter_all')}</option>
-            {#each opts as opt (String(opt.value))}
-              <option value={String(opt.value)}>{opt.label}</option>
-            {/each}
-          </Select>
-        </div>
-      {/if}
-    {/each}
-  </div>
-
-  <div class='inline-flex items-center justify-self-start rounded-full border border-base-content/8 bg-base-200/60 px-3 py-1 text-xs font-medium text-base-content/60 md:justify-self-end'>
-    {uiM('crud_total', { count: total })}
-  </div>
+  {#if hasActiveFilters}
+    <BareButton
+      type='button'
+      class='inline-flex h-8 items-center gap-1 rounded-md px-2.5 text-sm font-medium text-base-content/60 transition-colors hover:bg-base-content/5 hover:text-base-content'
+      onclick={handleReset}
+    >
+      {uiM('crud_reset')}
+      <span class='icon-[tabler--x] size-3.5'></span>
+    </BareButton>
+  {/if}
 </div>

package/dist/components/scenes/crud/CrudFilterBar.svelte.d.ts

@@ -2,6 +2,12 @@ type FilterFieldDef = {
     id: string;
     label: string | (() => string);
     type: string;
+    placeholder?: string | (() => string);
+    startKey?: string;
+    endKey?: string;
+    min?: number;
+    max?: number;
+    step?: number;
     options?: Array<{
         label: string;
         value: string | number | boolean;
@@ -16,9 +22,9 @@ type $$ComponentProps = {
     searchValue?: string;
     filterFields?: FilterFieldDef[];
     filterValues?: Record<string, unknown>;
-    total?: number;
     onsearch?: (search: string) => void;
     onfilterchange?: (filters: Record<string, unknown>) => void;
+    onreset?: () => void;
 };
 /**
  * CrudFilterBar

package/dist/components/scenes/crud/CrudPage.svelte

@@ -142,9 +142,8 @@
   const actionButtonSize = $derived(isCompact ? 'xs' : 'sm')
   const actionIconClass = $derived(isCompact ? 'size-3.5' : 'size-4')
   const paginationSize = $derived(isCompact ? 'xs' : 'sm')
-  const filterCardClass = 'overflow-hidden rounded-[1.25rem] border-base-content/7 shadow-sm'
   const listCardClass = 'overflow-hidden rounded-[1.25rem] border-base-content/7 shadow-sm'
-  const paginationBarClass = 'flex justify-center border-t border-base-content/5 px-4 py-2'
+  const paginationBarClass = 'border-t border-base-content/5 px-4 py-3'
 
   // 表单展示配置（抽屉 / 弹窗）
   const formVariant = $derived(form.variant ?? 'drawer')
@@ -249,6 +248,12 @@
     navigateWithParams({ pageSize: newPageSize, page: 1 })
   }
 
+  function handleResetFilters() {
+    searchValue = ''
+    filterValues = {}
+    void Promise.resolve(nav.navigate(currentBasePath)).then(() => nav.refresh?.())
+  }
+
   // ─── 打开/关闭抽屉 ───
 
   function openDetail(item: Record<string, unknown>) {
@@ -396,6 +401,7 @@
       label: col.label,
       width: col.width,
       align: col.align as 'left' | 'center' | 'right' | undefined,
+      sortable: true,
       render: col.render
         ? (item: Record<string, unknown>) => col.render!(item)
         : undefined,
@@ -421,18 +427,16 @@
 
   <!-- 搜索 + 过滤栏 -->
   {#if searchable || filterFields.length > 0}
-    <Card padding='sm' class={filterCardClass}>
-      <CrudFilterBar
-        {searchable}
-        searchPlaceholder={searchPlaceholderText}
-        bind:searchValue
-        {filterFields}
-        bind:filterValues
-        total={data.total}
-        onsearch={handleSearch}
-        onfilterchange={handleFilterChange}
-      />
-    </Card>
+    <CrudFilterBar
+      {searchable}
+      searchPlaceholder={searchPlaceholderText}
+      bind:searchValue
+      {filterFields}
+      bind:filterValues
+      onsearch={handleSearch}
+      onfilterchange={handleFilterChange}
+      onreset={handleResetFilters}
+    />
   {/if}
 
   <!-- 数据列表 -->
@@ -482,7 +486,7 @@
       {/snippet}
     </DataTable>
 
-    <!-- 分页栏：始终显示，支持每页条数选择与跳页 -->
+    <!-- 分页栏：始终显示，支持每页条数选择与跳页（shadcn table 风格） -->
     <div class={paginationBarClass}>
       <Pagination
         page={data.page}

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';