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

package/README.md

@@ -288,7 +288,7 @@ components/
 >
 > `pagination` 配置分页栏（始终显示）：`showSizeChanger`、`pageSizeOptions`、`showJumper`、`showTotal` 默认开启。
 >
-> `density` 配置列表密度：`'normal'`（默认）或 `'compact'`（紧凑）。
+> `density` 配置列表密度：`'normal'`（默认）或 `'compact'`（紧凑）。它只影响列表行、行内操作、分页与创建/编辑/详情表单元素，不影响页头与筛选栏。
 
 ## 使用示例
 
@@ -506,24 +506,42 @@ npm install -D @iconify/tailwind4 @iconify-json/tabler
 ```ts
 import {
   applyTheme, // 应用主题（自动持久化到 localStorage）
+  createThemeBootstrapScript, // 生成可注入 app.html 的首屏主题恢复脚本
   getCurrentTheme, // 获取当前主题
   getThemeInitScript, // 返回可注入到 HTML shell 的防闪烁脚本文本
   isDarkTheme, // 检查是否暗色主题
+  normalizeHexColor, // 归一化 #RGB / #RRGGBB 主题色
+  normalizeThemeId, // 校验主题 ID 并自动回退
   THEME_GROUPS, // 按亮色/暗色分组
   THEMES, // ThemeInfo[] — 15 个精选主题元数据
 } from '@h-ai/ui'
 ```
 
-在 SvelteKit 的 `app.html` 中，请直接写入下面这段脚本内容（与 `getThemeInitScript()` 返回值一致）：
+简单场景可以直接使用 `getThemeInitScript()`；如果应用有自定义存储 key、主题色 CSS 变量或语言偏好，推荐在服务端通过 `createThemeBootstrapScript()` 生成脚本后再注入 `app.html`。
+
+在 SvelteKit 的 `app.html` 中，可以先放一个占位符：
 
 ```html
 <head>
-  <script>
-    (function(){var t='light';try{var s=localStorage.getItem('theme');if(s)t=s}catch{}document.documentElement.setAttribute('data-theme',t)})()
-  </script>
+  <script>%theme_bootstrap%</script>
 </head>
 ```
 
+然后在 `hooks.server.ts` 里注入：
+
+```ts
+import { createThemeBootstrapScript, DEFAULT_THEME_COLOR_CSS_VAR } from '@h-ai/ui'
+
+const themeBootstrapScript = createThemeBootstrapScript({
+  storageKey: 'hai-demo-preferences',
+  legacyThemeStorageKey: 'hai-demo-theme',
+  defaultThemeColor: '#5765f0',
+  colorCssVar: DEFAULT_THEME_COLOR_CSS_VAR,
+})
+
+transformPageChunk: ({ html }) => html.replace('%theme_bootstrap%', themeBootstrapScript)
+```
+
 ## 国际化 (i18n)
 
 @h-ai/ui 采用**组件内置翻译**模式：

package/dist/components/compounds/Card.svelte

@@ -18,7 +18,7 @@
   }: CardProps = $props()
 
   const paddingMap = {
-    'none': '',
+    'none': 'p-0',
     'xs': 'p-2',
     'sm': 'p-3',
     'md': 'p-4',

package/dist/components/compounds/DataTable.svelte

@@ -57,6 +57,28 @@
 
   type Column = { key: keyof T | string, label: string, width?: string, align?: 'left' | 'center' | 'right', render?: (item: T) => string }
 
+  const tableClass = $derived(
+    density === 'compact'
+      ? 'table table-sm w-full text-[12px] [&_thead_th]:px-3 [&_thead_th]:py-2 [&_tbody_td]:px-3 [&_tbody_td]:py-2'
+      : 'table w-full text-[13px] [&_thead_th]:px-4 [&_thead_th]:py-2.5 [&_tbody_td]:px-4 [&_tbody_td]:py-3',
+  )
+
+  const headerRowClass = $derived(
+    density === 'compact'
+      ? 'text-[11px] text-base-content/55 border-b border-base-content/6'
+      : 'text-[12px] text-base-content/55 border-b border-base-content/6',
+  )
+
+  const rowClass = $derived(
+    hoverable
+      ? 'border-b border-base-content/5 transition-colors hover:bg-base-content/3 last:border-b-0'
+      : 'border-b border-base-content/5 last:border-b-0',
+  )
+
+  const actionColumnClass = $derived(density === 'compact' ? 'w-20 text-center font-medium' : 'w-24 text-center font-medium')
+  const actionWrapClass = $derived(density === 'compact' ? 'flex items-center justify-center gap-0.5' : 'flex items-center justify-center gap-1')
+  const placeholderCellClass = $derived(density === 'compact' ? 'text-center py-6 text-base-content/40' : 'text-center py-8 text-base-content/40')
+
   function getValue(item: T, col: Column): string {
     if (col.render) {
       return col.render(item)
@@ -82,9 +104,9 @@
 </script>
 
 <div class='overflow-x-auto {className}'>
-  <table class='table w-full {density === `compact` ? `table-sm text-xs` : `text-[13px]`}' class:table-zebra={striped}>
+  <table class={tableClass} class:table-zebra={striped}>
     <thead>
-      <tr class='text-xs text-base-content/50 border-b border-base-content/6'>
+      <tr class={headerRowClass}>
         {#each columns as col (String(col.key))}
           <th
             style={col.width ? `width: ${col.width}` : ''}
@@ -94,20 +116,20 @@
           </th>
         {/each}
         {#if actions}
-          <th class='w-24 text-center font-medium'>{uiM('data_table_actions')}</th>
+          <th class={actionColumnClass}>{uiM('data_table_actions')}</th>
         {/if}
       </tr>
     </thead>
     <tbody>
       {#if loading}
         <tr>
-          <td colspan={columns.length + (actions ? 1 : 0)} class='text-center py-8'>
+          <td colspan={columns.length + (actions ? 1 : 0)} class={placeholderCellClass}>
             <span class='loading loading-spinner loading-sm'></span>
           </td>
         </tr>
       {:else if data.length === 0}
         <tr>
-          <td colspan={columns.length + (actions ? 1 : 0)} class='text-center py-8 text-base-content/40'>
+          <td colspan={columns.length + (actions ? 1 : 0)} class={placeholderCellClass}>
             {#if empty}
               {@render empty()}
             {:else}
@@ -117,13 +139,13 @@
         </tr>
       {:else}
         {#each data as item (item[keyField])}
-          <tr class={hoverable ? 'hover:bg-base-content/3 transition-colors' : ''}>
+          <tr class={rowClass}>
             {#each columns as col (String(col.key))}
               <td class={getAlignClass(col.align)}>{getValue(item, col)}</td>
             {/each}
             {#if actions}
               <td>
-                <div class='flex items-center justify-center gap-1'>
+                <div class={actionWrapClass}>
                   {@render actions(item)}
                 </div>
               </td>

package/dist/components/compounds/Modal.svelte

@@ -86,6 +86,17 @@
     }
   }
 
+  function handleViewportKeydown(event: KeyboardEvent) {
+    if (
+      event.target === event.currentTarget
+      && closeOnBackdrop
+      && (event.key === 'Enter' || event.key === ' ')
+    ) {
+      event.preventDefault()
+      handleClose()
+    }
+  }
+
   function handleDialogCancel(event: Event) {
     // 原生 dialog 在按下 Escape 时会先触发 cancel；
     // 这里统一接管关闭逻辑，避免浏览器直接 close 后跳过组件自己的 onclose 回调。
@@ -117,74 +128,76 @@
   bind:this={modalElement}
   class='hai-modal'
   oncancel={handleDialogCancel}
-  onclick={handleDialogClick}
 >
-  <div class={modalBoxClass} style={panelStyle}>
-    {#if hasHeader}
-      <!-- 顶部栏单独固定，保证滚动时标题和关闭操作始终可见。 -->
-      <div class='hai-modal__header flex flex-none items-start justify-between gap-4 px-6 py-5 sm:px-7'>
-        {#if header}
-          <div class='flex-1 font-semibold text-[1.05rem] text-base-content/92'>
-            {@render header()}
-          </div>
-        {:else if title}
-          <h3 class='flex-1 font-semibold text-[1.05rem] tracking-tight text-base-content/92'>
-            {title}
-          </h3>
-        {:else}
-          <div class='flex-1'></div>
-        {/if}
+  <div
+    class='hai-modal__viewport'
+    role='button'
+    tabindex='-1'
+    aria-label={uiM('common_close')}
+    onclick={handleDialogClick}
+    onkeydown={handleViewportKeydown}
+  >
+    <div class={modalBoxClass} style={panelStyle}>
+      {#if hasHeader}
+        <!-- 顶部栏单独固定，保证滚动时标题和关闭操作始终可见。 -->
+        <div class='hai-modal__header flex flex-none items-start justify-between gap-4 px-6 py-5 sm:px-7'>
+          {#if header}
+            <div class='flex-1 font-semibold text-[1.05rem] text-base-content/92'>
+              {@render header()}
+            </div>
+          {:else if title}
+            <h3 class='flex-1 font-semibold text-[1.05rem] tracking-tight text-base-content/92'>
+              {title}
+            </h3>
+          {:else}
+            <div class='flex-1'></div>
+          {/if}
+
+          {#if showClose}
+            <button
+              type='button'
+              class='hai-modal__close'
+              aria-label={uiM('common_close')}
+              onclick={handleClose}
+            >
+              <svg viewBox='0 0 24 24' class='hai-modal__close-icon' aria-hidden='true'>
+                <path
+                  d='M6 6l12 12M18 6L6 18'
+                  fill='none'
+                  stroke='currentColor'
+                  stroke-width='1.9'
+                  stroke-linecap='round'
+                ></path>
+              </svg>
+            </button>
+          {/if}
+        </div>
+      {/if}
 
-        {#if showClose}
-          <button
-            type='button'
-            class='hai-modal__close'
-            aria-label={uiM('common_close')}
-            onclick={handleClose}
-          >
-            <svg viewBox='0 0 24 24' class='hai-modal__close-icon' aria-hidden='true'>
-              <path
-                d='M6 6l12 12M18 6L6 18'
-                fill='none'
-                stroke='currentColor'
-                stroke-width='1.9'
-                stroke-linecap='round'
-              ></path>
-            </svg>
-          </button>
+      <!-- 主体区域独立滚动，避免长内容把头部和底部一起顶走。 -->
+      <div class={cn('min-h-0 flex-1 px-6 py-5 sm:px-7', bodyOverflowClass, bodyClass)}>
+        {#if children}
+          {@render children()}
         {/if}
       </div>
-    {/if}
 
-    <!-- 主体区域独立滚动，避免长内容把头部和底部一起顶走。 -->
-    <div class={cn('min-h-0 flex-1 px-6 py-5 sm:px-7', bodyOverflowClass, bodyClass)}>
-      {#if children}
-        {@render children()}
+      {#if footer}
+        <!-- 底栏固定在面板底部，用于承接确认/取消或状态摘要。 -->
+        <div class='hai-modal__footer flex flex-none items-center px-6 py-4 sm:px-7'>
+          <div class='flex w-full items-center justify-end gap-3'>
+            {@render footer()}
+          </div>
+        </div>
       {/if}
     </div>
-
-    {#if footer}
-      <!-- 底栏固定在面板底部，用于承接确认/取消或状态摘要。 -->
-      <div class='hai-modal__footer flex flex-none items-center bg-base-100 px-6 py-4 sm:px-7'>
-        <div class='flex w-full items-center justify-end gap-3'>
-          {@render footer()}
-        </div>
-      </div>
-    {/if}
   </div>
 </dialog>
 
 <style>
-  dialog.hai-modal {
-    inset: 0;
-    width: 100vw;
-    min-width: 0;
-    max-width: none;
-    height: 100vh;
-    height: 100dvh;
-    max-height: none;
+  dialog.hai-modal,
+  dialog.hai-modal:modal {
     margin: 0;
-    padding: clamp(1rem, 2.6vw, 2rem);
+    padding: 0;
     border: 0;
     background: transparent;
     outline: none;
@@ -192,9 +205,12 @@
     box-sizing: border-box;
   }
 
-  dialog.hai-modal[open] {
+  .hai-modal__viewport {
+    position: fixed;
+    inset: 0;
     display: grid;
     place-items: center;
+    padding: clamp(1rem, 2.6vw, 2rem);
   }
 
   dialog.hai-modal::backdrop {
@@ -220,10 +236,16 @@
   }
 
   .hai-modal__header {
+    /* 头部单独承接面板圆角，避免滚动主体或主题背景把顶部边缘切成直角。 */
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
     box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-base-content) 6%, transparent);
   }
 
   .hai-modal__footer {
+    /* 底栏去掉独立背景后，继续继承圆角，保证底部阴影和面板外轮廓保持一致。 */
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
     box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-base-content) 6%, transparent);
     border-radius: 0 0 1.4rem 1.4rem;
   }

package/dist/components/compounds/Pagination.svelte

@@ -87,6 +87,18 @@
     ),
   )
 
+  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 jumperInputClass = $derived(
+    size === 'xs'
+      ? 'w-[2.25rem] shrink-0 [&>.fieldset]:m-0 [&>.fieldset]:min-w-0'
+      : 'w-[2.5rem] shrink-0 [&>.fieldset]:m-0 [&>.fieldset]:min-w-0',
+  )
+
   function goToPage(p: number) {
     if (p >= 1 && p <= totalPages && p !== page) {
       page = p
@@ -112,17 +124,17 @@
   }
 </script>
 
-<div class='flex flex-wrap items-center gap-4'>
+<div class={wrapperClass}>
   {#if showTotal}
-    <span class='text-sm text-base-content/70'>
+    <span class={totalClass}>
       {(labels.total ?? uiM('pagination_total')).replace('{count}', String(total))}
     </span>
   {/if}
 
   {#if showSizeChanger}
-    <div class='w-28 shrink-0'>
+    <div class={sizeChangerClass}>
       <Select
-        size='sm'
+        size={controlSize}
         value={String(pageSize)}
         onchange={handlePageSizeChange}
       >
@@ -167,18 +179,20 @@
   </div>
 
   {#if showJumper}
-    <div class='flex min-w-fit items-center gap-2 whitespace-nowrap'>
-      <span class='shrink-0 text-sm'>{labels.jumpTo ?? uiM('pagination_jump_to')}</span>
-      <Input
-        type='number'
-        size='xs'
-        class='w-14 shrink-0'
-        min={1}
-        max={totalPages}
-        bind:value={jumperValue}
-        onkeydown={(e: KeyboardEvent & { currentTarget: HTMLInputElement }) => e.key === 'Enter' && handleJump()}
-      />
-      <span class='shrink-0 text-sm'>{labels.page ?? uiM('pagination_page')}</span>
+    <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()}
+        />
+      </div>
+      <span class={totalClass}>{labels.page ?? uiM('pagination_page')}</span>
     </div>
   {/if}
 </div>

package/dist/components/primitives/Input.svelte

@@ -49,6 +49,24 @@
       : 'h-10',
   )
 
+  const inputSpacingClass = $derived(
+    size === 'xs'
+      ? 'px-2.5 text-xs'
+      : size === 'sm'
+      ? 'px-3 text-sm'
+      : size === 'lg'
+      ? 'px-4 text-base'
+      : size === 'xl'
+      ? 'px-4 text-lg'
+      : 'px-3 text-sm',
+  )
+
+  const inputTypeClass = $derived(
+    type === 'number'
+      ? '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
+      : '',
+  )
+
   const containerClass = $derived(
     cn(
       'flex items-center w-full rounded-lg border bg-base-100',
@@ -114,7 +132,11 @@
       {step}
       inputmode={inputmode}
       autocomplete={autocomplete as HTMLInputElement['autocomplete']}
-      class='flex-1 h-full px-3 bg-transparent border-none outline-none text-sm placeholder:text-base-content/35'
+      class={cn(
+        'flex-1 h-full bg-transparent border-none outline-none placeholder:text-base-content/35',
+        inputSpacingClass,
+        inputTypeClass,
+      )}
       bind:value
       oninput={handleInput}
       onchange={handleChange}

package/dist/components/primitives/Select.svelte

@@ -10,7 +10,7 @@
 -->
 <script lang='ts' generics="T = string">
   import type { SelectProps } from '../../types.js'
-  import { cn, getInputSizeClass } from '../../utils.js'
+  import { cn, getSizeClass } from '../../utils.js'
 
   let {
     value = $bindable<T>(),
@@ -32,7 +32,7 @@
   const selectClass = $derived(
     cn(
       'select w-full',
-      getInputSizeClass(size),
+      getSizeClass(size, 'input'),
       error && 'select-error',
       className,
     ),

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)}
                   />