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

package/dist/components/compounds/Pagination.svelte

@@ -10,7 +10,7 @@
 <script lang='ts'>
   import type { PaginationProps } from '../../types.js'
   import { uiM } from '../../messages.js'
-  import { cn, getSizeClass } from '../../utils.js'
+  import { cn } from '../../utils.js'
   import BareButton from '../primitives/BareButton.svelte'
 
   import Input from '../primitives/Input.svelte'
@@ -36,63 +36,10 @@
   // 计算总页数（至少 1 页，保证分页栏在空数据时仍可渲染）
   const totalPages = $derived(Math.max(1, Math.ceil(total / pageSize)))
 
-  // 生成页码列表
-  const pages = $derived(() => {
-    const result: (number | string)[] = []
-    const maxVisible = 7
-
-    if (totalPages <= maxVisible) {
-      for (let i = 1; i <= totalPages; i++) {
-        result.push(i)
-      }
-    }
-    else {
-      // 始终显示第一页
-      result.push(1)
-
-      if (page > 3) {
-        result.push('...')
-      }
-
-      // 中间页码
-      const start = Math.max(2, page - 1)
-      const end = Math.min(totalPages - 1, page + 1)
-
-      for (let i = start; i <= end; i++) {
-        result.push(i)
-      }
-
-      if (page < totalPages - 2) {
-        result.push('...')
-      }
-
-      // 始终显示最后一页
-      result.push(totalPages)
-    }
-
-    return result
-  })
-
-  const joinClass = $derived(
-    cn(
-      'join',
-      className,
-    ),
-  )
-
-  const btnClass = $derived(
-    cn(
-      'join-item btn',
-      getSizeClass(size),
-    ),
-  )
-
   const controlSize = $derived(size === 'xs' ? 'xs' : 'sm')
   const jumperControlSize = 'xs'
-  const wrapperClass = $derived(size === 'xs' ? 'flex flex-wrap items-center justify-center gap-1.5 text-xs' : 'flex flex-wrap items-center justify-center gap-2.5 text-sm')
-  const totalClass = $derived(size === 'xs' ? 'text-xs text-base-content/70' : 'text-sm text-base-content/70')
-  const sizeChangerClass = $derived(size === 'xs' ? 'w-22 shrink-0' : 'w-24 shrink-0')
-  const jumperWrapClass = $derived(size === 'xs' ? 'flex min-w-fit items-center gap-1.5 whitespace-nowrap' : 'flex min-w-fit items-center gap-1.5 whitespace-nowrap')
+  const sizeChangerClass = $derived(size === 'xs' ? 'w-17 shrink-0' : 'w-18 shrink-0')
+  const jumperWrapClass = $derived(size === 'xs' ? 'flex min-w-fit items-center gap-1.5 whitespace-nowrap' : 'flex min-w-fit items-center gap-2 whitespace-nowrap')
   const jumperInputClass = $derived(
     size === 'xs'
       ? 'w-[2.25rem] shrink-0 [&>.fieldset]:m-0 [&>.fieldset]:min-w-0'
@@ -122,77 +69,83 @@
       onpagesizechange?.(next)
     }
   }
+
+  // 统一 table 风格：首/上/下/末 导航按钮样式（等比例缩小）
+  const navBtnClass = $derived(
+    size === 'xs'
+      ? 'inline-flex h-6 w-6 items-center justify-center rounded-md border border-base-content/12 text-base-content/55 transition-colors hover:bg-base-content/5 hover:text-base-content disabled:pointer-events-none disabled:opacity-40'
+      : 'inline-flex h-7 w-7 items-center justify-center rounded-md border border-base-content/12 text-base-content/55 transition-colors hover:bg-base-content/5 hover:text-base-content disabled:pointer-events-none disabled:opacity-40',
+  )
+  const navIconClass = $derived(size === 'xs' ? 'size-3.5' : 'size-3.5')
+  const tableTextClass = $derived(size === 'xs' ? 'text-xs text-base-content/60' : 'text-sm text-base-content/60')
+  const rowGapClass = $derived(size === 'xs' ? 'flex flex-wrap items-center gap-3 sm:gap-4' : 'flex flex-wrap items-center gap-4 sm:gap-6')
+  const pageInfoText = $derived(
+    (labels.pageInfo ?? uiM('pagination_page_info'))
+      .replace('{page}', String(page))
+      .replace('{total}', String(totalPages)),
+  )
 </script>
 
-<div class={wrapperClass}>
+<div class={cn('flex flex-wrap items-center justify-between gap-4', className)}>
   {#if showTotal}
-    <span class={totalClass}>
+    <span class={tableTextClass}>
       {(labels.total ?? uiM('pagination_total')).replace('{count}', String(total))}
     </span>
+  {:else}
+    <span></span>
   {/if}
 
-  {#if showSizeChanger}
-    <div class={sizeChangerClass}>
-      <Select
-        size={controlSize}
-        value={String(pageSize)}
-        onchange={handlePageSizeChange}
-      >
-        {#each pageSizeOptions as opt (opt)}
-          <option value={String(opt)}>
-            {(labels.pageSize ?? uiM('pagination_page_size')).replace('{size}', String(opt))}
-          </option>
-        {/each}
-      </Select>
+  <div class={rowGapClass}>
+    {#if showSizeChanger}
+      <div class='flex items-center gap-2'>
+        <span class={tableTextClass}>{labels.rowsPerPage ?? uiM('pagination_rows_per_page')}</span>
+        <div class={sizeChangerClass}>
+          <Select
+            size={controlSize}
+            value={String(pageSize)}
+            onchange={handlePageSizeChange}
+          >
+            {#each pageSizeOptions as opt (opt)}
+              <option value={String(opt)}>{opt}</option>
+            {/each}
+          </Select>
+        </div>
+      </div>
+    {/if}
+
+    <span class={tableTextClass}>{pageInfoText}</span>
+
+    <div class='flex items-center gap-1'>
+      <BareButton class={navBtnClass} disabled={page === 1} onclick={() => goToPage(1)} ariaLabel='First page'>
+        <span class={cn('icon-[tabler--chevrons-left]', navIconClass)}></span>
+      </BareButton>
+      <BareButton class={navBtnClass} disabled={page === 1} onclick={() => goToPage(page - 1)} ariaLabel='Previous page'>
+        <span class={cn('icon-[tabler--chevron-left]', navIconClass)}></span>
+      </BareButton>
+      <BareButton class={navBtnClass} disabled={page === totalPages} onclick={() => goToPage(page + 1)} ariaLabel='Next page'>
+        <span class={cn('icon-[tabler--chevron-right]', navIconClass)}></span>
+      </BareButton>
+      <BareButton class={navBtnClass} disabled={page === totalPages} onclick={() => goToPage(totalPages)} ariaLabel='Last page'>
+        <span class={cn('icon-[tabler--chevrons-right]', navIconClass)}></span>
+      </BareButton>
     </div>
-  {/if}
-
-  <div class={joinClass}>
-    <BareButton
-      class={btnClass}
-      disabled={page === 1}
-      onclick={() => goToPage(page - 1)}
-    >
-      «
-    </BareButton>
-
-    {#each pages() as p, index (typeof p === 'number' ? p : `ellipsis-${index}`)}
-      {#if typeof p === 'number'}
-        <BareButton
-          class={cn(btnClass, page === p && 'btn-active')}
-          onclick={() => goToPage(p)}
-        >
-          {p}
-        </BareButton>
-      {:else}
-        <BareButton class={cn(btnClass, 'btn-disabled')} disabled>...</BareButton>
-      {/if}
-    {/each}
-
-    <BareButton
-      class={btnClass}
-      disabled={page === totalPages}
-      onclick={() => goToPage(page + 1)}
-    >
-      »
-    </BareButton>
-  </div>
 
-  {#if showJumper}
-    <div class={jumperWrapClass}>
-      <span class={totalClass}>{labels.jumpTo ?? uiM('pagination_jump_to')}</span>
-      <div class={jumperInputClass}>
-        <Input
-          type='number'
-          size={jumperControlSize}
-          class='h-7 w-full rounded-md [&_input]:px-1.5 [&_input]:text-center [&_input]:text-[12px]'
-          min={1}
-          max={totalPages}
-          bind:value={jumperValue}
-          onkeydown={(e: KeyboardEvent & { currentTarget: HTMLInputElement }) => e.key === 'Enter' && handleJump()}
-        />
+    {#if showJumper}
+      <div class={jumperWrapClass}>
+        <span class={tableTextClass}>{labels.jumpTo ?? uiM('pagination_jump_to')}</span>
+        <div class={jumperInputClass}>
+          <Input
+            type='number'
+            size={jumperControlSize}
+            class='h-7 w-full rounded-md [&_input]:px-1.5 [&_input]:text-center [&_input]:text-[12px]'
+            min={1}
+            max={totalPages}
+            bind:value={jumperValue}
+            onkeydown={(e: KeyboardEvent & { currentTarget: HTMLInputElement }) => e.key === 'Enter' && handleJump()}
+          />
+        </div>
+        <span class={tableTextClass}>{labels.page ?? uiM('pagination_page')}</span>
       </div>
-      <span class={totalClass}>{labels.page ?? uiM('pagination_page')}</span>
-    </div>
-  {/if}
+    {/if}
+  </div>
 </div>

package/dist/components/scenes/ai/markdown-parse.js

@@ -24,6 +24,16 @@ function escapeHtml(text) {
         .replace(/"/g, '"')
         .replace(/'/g, ''');
 }
+function createTableCellAttrs(cell) {
+    const attrs = [];
+    if (cell.align) {
+        attrs.push(`style="text-align:${cell.align}"`);
+    }
+    if (cell.text.trim()) {
+        attrs.push(`title="${escapeHtml(cell.text)}"`);
+    }
+    return attrs.length > 0 ? ` ${attrs.join(' ')}` : '';
+}
 /**
  * 创建自定义渲染器对象
  *
@@ -91,15 +101,13 @@ function createRendererObject(options) {
         table(token) {
             let headerHtml = '';
             for (const cell of token.header) {
-                const align = cell.align ? ` style="text-align:${cell.align}"` : '';
-                headerHtml += `<th${align}>${this.parser.parseInline(cell.tokens)}</th>`;
+                headerHtml += `<th${createTableCellAttrs(cell)}>${this.parser.parseInline(cell.tokens)}</th>`;
             }
             let bodyHtml = '';
             for (const row of token.rows) {
                 let rowHtml = '';
                 for (const cell of row) {
-                    const align = cell.align ? ` style="text-align:${cell.align}"` : '';
-                    rowHtml += `<td${align}>${this.parser.parseInline(cell.tokens)}</td>`;
+                    rowHtml += `<td${createTableCellAttrs(cell)}>${this.parser.parseInline(cell.tokens)}</td>`;
                 }
                 bodyHtml += `<tr>${rowHtml}</tr>`;
             }

package/dist/components/scenes/ai/table/AiTableEditor.svelte

@@ -1097,7 +1097,7 @@
       <thead>
         <tr>
           {#each tableColumns as column (column.key)}
-            <th>{column.label}</th>
+            <th title={column.label}>{column.label}</th>
           {/each}
           {#if editable}
             <th class='hai-ai-table-action-head'>{uiM('data_table_actions')}</th>
@@ -1122,11 +1122,13 @@
               ondrop={event => handleRowDrop(row.row_id, event)}
             >
               {#each tableColumns as column (column.key)}
+                {@const cellInputValue = getCellInputValue(row, column.key)}
                 <td>
                   <input
                     class={resolveCellInputClass(column.type)}
                     type={column.type === 'number' ? 'number' : 'text'}
-                    value={getCellInputValue(row, column.key)}
+                    value={cellInputValue}
+                    title={cellInputValue}
                     disabled={!editable}
                     oninput={event => handleCellInput(row.row_id, column, event)}
                   />

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