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

package/dist/components/scenes/app/SettingsLayout.svelte

@@ -0,0 +1,111 @@
+<!--
+  @component SettingsLayout
+  设置页布局场景组件
+
+  借鉴 shadcn-admin 设置页：顶部标题/描述 + 左侧分区导航 + 右侧内容区。
+  分区内容由使用方通过 children 提供，导航高亮由 active 控制。
+
+  使用 Svelte 5 Runes ($props, $derived)
+
+  @example
+  <SettingsLayout
+    title="设置"
+    description="管理你的账户与偏好"
+    sections={[{ id: 'appearance', label: '外观', icon: 'icon-[tabler--palette]' }]}
+    active={active}
+    onselect={(id) => active = id}
+  >
+    {#if active === 'appearance'}<AppearanceSection />{/if}
+  </SettingsLayout>
+-->
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import { cn } from '../../../utils.js'
+  import BareButton from '../../primitives/BareButton.svelte'
+
+  type SettingsSection = {
+    id: string
+    label: string
+    icon?: string
+    /** 提供时渲染为链接（SSR 友好），否则触发 onselect */
+    href?: string
+  }
+
+  const {
+    title = '',
+    description = '',
+    sections = [],
+    active = '',
+    onselect,
+    children,
+    headerActions,
+    class: className = '',
+  }: {
+    title?: string
+    description?: string
+    sections?: SettingsSection[]
+    active?: string
+    onselect?: (id: string) => void
+    children?: Snippet
+    headerActions?: Snippet
+    class?: string
+  } = $props()
+
+  function navItemClass(id: string): string {
+    return cn(
+      'flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+      id === active
+        ? 'bg-base-content/8 text-base-content'
+        : 'text-base-content/60 hover:bg-base-content/5 hover:text-base-content',
+    )
+  }
+</script>
+
+<div class={cn('space-y-5', className)}>
+  <!-- 标题区 -->
+  {#if title || description || headerActions}
+    <div class='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
+      <div>
+        {#if title}
+          <h1 class='text-xl font-semibold tracking-tight'>{title}</h1>
+        {/if}
+        {#if description}
+          <p class='mt-0.5 text-sm text-base-content/45'>{description}</p>
+        {/if}
+      </div>
+      {#if headerActions}
+        <div class='flex items-center gap-2'>{@render headerActions()}</div>
+      {/if}
+    </div>
+  {/if}
+
+  <div class='grid gap-6 lg:grid-cols-[13rem_minmax(0,1fr)]'>
+    <!-- 左侧分区导航 -->
+    {#if sections.length > 0}
+      <aside class='lg:sticky lg:top-4 lg:self-start'>
+        <nav class='flex gap-1 overflow-x-auto lg:flex-col lg:overflow-visible'>
+          {#each sections as section (section.id)}
+            {#if section.href}
+              <a href={section.href} class={navItemClass(section.id)} aria-current={section.id === active ? 'page' : undefined}>
+                {#if section.icon}<span class='{section.icon} size-4 shrink-0'></span>{/if}
+                <span class='whitespace-nowrap'>{section.label}</span>
+              </a>
+            {:else}
+              <BareButton type='button' class={navItemClass(section.id)} onclick={() => onselect?.(section.id)}>
+                {#if section.icon}<span class='{section.icon} size-4 shrink-0'></span>{/if}
+                <span class='whitespace-nowrap'>{section.label}</span>
+              </BareButton>
+            {/if}
+          {/each}
+        </nav>
+      </aside>
+    {/if}
+
+    <!-- 内容区 -->
+    <div class='min-w-0 space-y-5'>
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  </div>
+</div>

package/dist/components/scenes/app/SettingsLayout.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+type SettingsSection = {
+    id: string;
+    label: string;
+    icon?: string;
+    /** 提供时渲染为链接（SSR 友好），否则触发 onselect */
+    href?: string;
+};
+type $$ComponentProps = {
+    title?: string;
+    description?: string;
+    sections?: SettingsSection[];
+    active?: string;
+    onselect?: (id: string) => void;
+    children?: Snippet;
+    headerActions?: Snippet;
+    class?: string;
+};
+/**
+ * SettingsLayout
+ * 设置页布局场景组件
+ *
+ * 借鉴 shadcn-admin 设置页：顶部标题/描述 + 左侧分区导航 + 右侧内容区。
+ * 分区内容由使用方通过 children 提供，导航高亮由 active 控制。
+ *
+ * 使用 Svelte 5 Runes ($props, $derived)
+ *
+ * @example
+ * <SettingsLayout
+ *   title="设置"
+ *   description="管理你的账户与偏好"
+ *   sections={[{ id: 'appearance', label: '外观', icon: 'icon-[tabler--palette]' }]}
+ *   active={active}
+ *   onselect={(id) => active = id}
+ * >
+ *   {#if active === 'appearance'}<AppearanceSection />{/if}
+ * </SettingsLayout>
+ */
+declare const SettingsLayout: import("svelte").Component<$$ComponentProps, {}, "">;
+type SettingsLayout = ReturnType<typeof SettingsLayout>;
+export default SettingsLayout;

package/dist/components/scenes/app/ThemeColorPicker.svelte

@@ -163,3 +163,44 @@
     />
   </div>
 </div>
+
+<style>
+  button {
+    border-color: var(--soft-border, color-mix(in oklab, var(--color-base-content) 12%, transparent));
+    background: var(--soft-surface, var(--color-base-100));
+    color: var(--soft-text-body, var(--color-base-content));
+    box-shadow: none;
+    font-weight: 500;
+  }
+
+  button:hover:not(:disabled) {
+    border-color: color-mix(in oklab, var(--color-primary) 28%, var(--soft-border, transparent) 72%);
+    background: color-mix(
+      in oklab,
+      var(--soft-surface, var(--color-base-100)) 88%,
+      var(--color-base-200) 12%
+    );
+  }
+
+  button[aria-pressed='true'] {
+    border-color: color-mix(in oklab, var(--color-primary) 42%, var(--soft-border, transparent) 58%);
+    background: color-mix(
+      in oklab,
+      var(--color-primary) 10%,
+      var(--soft-surface, var(--color-base-100)) 90%
+    );
+    color: var(--color-primary);
+  }
+
+  button:focus,
+  button:focus-visible {
+    outline: none;
+    border-color: color-mix(in oklab, var(--color-primary) 48%, var(--soft-border, transparent) 52%);
+    box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 12%, transparent 88%);
+  }
+
+  button > span:first-child {
+    border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent 90%);
+    box-shadow: none;
+  }
+</style>

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

@@ -6,6 +6,7 @@
  */
 export { default as FeedbackModal } from './FeedbackModal.svelte';
 export { default as LanguageSwitch } from './LanguageSwitch.svelte';
+export { default as SettingsLayout } from './SettingsLayout.svelte';
 export { default as SettingsModal } from './SettingsModal.svelte';
 export { default as ThemeColorPicker } from './ThemeColorPicker.svelte';
 export { default as ThemeSelector } from './ThemeSelector.svelte';

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

@@ -6,6 +6,7 @@
  */
 export { default as FeedbackModal } from './FeedbackModal.svelte';
 export { default as LanguageSwitch } from './LanguageSwitch.svelte';
+export { default as SettingsLayout } from './SettingsLayout.svelte';
 export { default as SettingsModal } from './SettingsModal.svelte';
 export { default as ThemeColorPicker } from './ThemeColorPicker.svelte';
 export { default as ThemeSelector } from './ThemeSelector.svelte';

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}