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

package/README.md

@@ -288,7 +288,7 @@ components/
 >
 > `pagination` 配置分页栏（始终显示）：`showSizeChanger`、`pageSizeOptions`、`showJumper`、`showTotal` 默认开启。
 >
-> `density` 配置列表密度：`'normal'`（默认）或 `'compact'`（紧凑）。
+> `density` 配置列表密度：`'normal'`（默认）或 `'compact'`（紧凑）。它只影响列表行、行内操作、分页与创建/编辑/详情表单元素，不影响页头与筛选栏。
 
 ## 使用示例
 

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/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/crud/CrudDetailDrawer.svelte

@@ -0,0 +1,196 @@
+<!--
+  @component CrudDetailDrawer
+  CRUD 详情组件（只读展示），支持抽屉（drawer）与弹窗（modal）两种展示形式
+
+  使用 Svelte 5 Runes ($props, $derived)
+  使用 compounds 组件：Drawer, Modal, Badge
+-->
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import type { Size } from '../../../types.js'
+  import type { CrudFormVariant } from './crud-types.js'
+  import { uiM } from '../../../messages.js'
+  import Drawer from '../../compounds/Drawer.svelte'
+  import Modal from '../../compounds/Modal.svelte'
+  import Badge from '../../primitives/Badge.svelte'
+  import Button from '../../primitives/Button.svelte'
+
+  type FieldDef = {
+    id: string
+    label: string | (() => string)
+    type: string
+    inDetail?: boolean
+    options?: Array<{ label: string, value: string | number | boolean }> | (() => Array<{ label: string, value: string | number | boolean }>)
+    render?: (value: unknown, item: Record<string, unknown>) => string
+    order?: number
+  }
+
+  let {
+    open = $bindable(false),
+    item = null,
+    fields = [],
+    title = '',
+    variant = 'drawer' as CrudFormVariant,
+    size = '2xl' as Size,
+    drawerWidth,
+    modalSize = '2xl' as Size | 'full',
+    modalWidth,
+    modalHeight,
+    canEdit = false,
+    onedit,
+    onclose,
+    detailExtra,
+  }: {
+    open?: boolean
+    item?: Record<string, unknown> | null
+    fields?: FieldDef[]
+    title?: string
+    variant?: CrudFormVariant
+    size?: Size
+    drawerWidth?: string
+    modalSize?: Size | 'full'
+    modalWidth?: string
+    modalHeight?: string
+    canEdit?: boolean
+    onedit?: () => void
+    onclose?: () => void
+    detailExtra?: Snippet<[Record<string, unknown>]>
+  } = $props()
+
+  function resolveText(text: string | (() => string)): string {
+    return typeof text === 'function' ? text() : text
+  }
+
+  function resolveOptions(options?: FieldDef['options']): Array<{ label: string, value: string | number | boolean }> {
+    if (!options)
+      return []
+    return typeof options === 'function' ? options() : options
+  }
+
+  function formatValue(field: FieldDef, value: unknown): string {
+    if (value === null || value === undefined)
+      return uiM('crud_detail_empty')
+
+    if (field.render && item) {
+      return field.render(value, item)
+    }
+
+    // 选项类型：将 value 映射为 label
+    if (field.type === 'select' || field.type === 'radio') {
+      const opts = resolveOptions(field.options)
+      const found = opts.find(o => String(o.value) === String(value))
+      return found?.label ?? String(value)
+    }
+
+    // 多选类型
+    if (field.type === 'multi-select' && Array.isArray(value)) {
+      const opts = resolveOptions(field.options)
+      return value.map((v) => {
+        const found = opts.find(o => String(o.value) === String(v))
+        return found?.label ?? String(v)
+      }).join(', ')
+    }
+
+    // 布尔
+    if (field.type === 'boolean' || field.type === 'checkbox') {
+      return value ? '✓' : '✗'
+    }
+
+    // 日期/时间
+    if (field.type === 'date' && (typeof value === 'string' || typeof value === 'number' || value instanceof Date)) {
+      return new Date(value as string | number).toLocaleDateString()
+    }
+    if (field.type === 'datetime' && (typeof value === 'string' || typeof value === 'number' || value instanceof Date)) {
+      return new Date(value as string | number).toLocaleString()
+    }
+
+    return String(value)
+  }
+
+  const detailFields = $derived(
+    [...fields]
+      .filter(f => f.inDetail !== false)
+      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
+  )
+
+  function handleClose() {
+    open = false
+    onclose?.()
+  }
+</script>
+
+{#snippet detailBody()}
+  {#if item}
+    <div class='space-y-4'>
+      {#each detailFields as field (field.id)}
+        {@const value = item[field.id]}
+        <div>
+          <div class='text-xs font-medium text-base-content/50 mb-1'>
+            {resolveText(field.label)}
+          </div>
+          <div class='text-sm text-base-content'>
+            {#if field.type === 'multi-select' && Array.isArray(value) && value.length > 0}
+              <div class='flex flex-wrap gap-1'>
+                {#each value as v, index (`${String(v)}:${index}`)}
+                  {@const opts = resolveOptions(field.options)}
+                  {@const found = opts.find(o => String(o.value) === String(v))}
+                  <Badge variant='ghost' size='sm'>{found?.label ?? String(v)}</Badge>
+                {/each}
+              </div>
+            {:else}
+              {formatValue(field, value)}
+            {/if}
+          </div>
+        </div>
+      {/each}
+
+      {#if detailExtra && item}
+        <div class='border-t border-base-content/5 pt-4'>
+          {@render detailExtra(item)}
+        </div>
+      {/if}
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet footerActions()}
+  {#if canEdit}
+    <Button variant='primary' onclick={onedit}>
+      <span class='icon-[tabler--edit] size-4 mr-1'></span>
+      {uiM('crud_edit')}
+    </Button>
+  {/if}
+  <Button variant='ghost' onclick={handleClose}>
+    {uiM('crud_close')}
+  </Button>
+{/snippet}
+
+{#if variant === 'modal'}
+  <Modal
+    bind:open
+    {title}
+    size={modalSize}
+    width={modalWidth}
+    height={modalHeight}
+    onclose={handleClose}
+  >
+    {@render detailBody()}
+
+    {#snippet footer()}
+      {@render footerActions()}
+    {/snippet}
+  </Modal>
+{:else}
+  <Drawer bind:open {title} position='right' {size} width={drawerWidth} onclose={handleClose}>
+    {#if item}
+      <div class='pb-20'>
+        {@render detailBody()}
+      </div>
+
+      <!-- 底部操作栏 -->
+      <div class='absolute bottom-0 left-0 right-0 p-4 bg-base-200 border-t border-base-content/10 flex justify-end gap-2'>
+        {@render footerActions()}
+      </div>
+    {/if}
+  </Drawer>
+{/if}

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

@@ -0,0 +1,44 @@
+import type { Snippet } from 'svelte';
+import type { Size } from '../../../types.js';
+import type { CrudFormVariant } from './crud-types.js';
+type FieldDef = {
+    id: string;
+    label: string | (() => string);
+    type: string;
+    inDetail?: boolean;
+    options?: Array<{
+        label: string;
+        value: string | number | boolean;
+    }> | (() => Array<{
+        label: string;
+        value: string | number | boolean;
+    }>);
+    render?: (value: unknown, item: Record<string, unknown>) => string;
+    order?: number;
+};
+type $$ComponentProps = {
+    open?: boolean;
+    item?: Record<string, unknown> | null;
+    fields?: FieldDef[];
+    title?: string;
+    variant?: CrudFormVariant;
+    size?: Size;
+    drawerWidth?: string;
+    modalSize?: Size | 'full';
+    modalWidth?: string;
+    modalHeight?: string;
+    canEdit?: boolean;
+    onedit?: () => void;
+    onclose?: () => void;
+    detailExtra?: Snippet<[Record<string, unknown>]>;
+};
+/**
+ * CrudDetailDrawer
+ * CRUD 详情组件（只读展示），支持抽屉（drawer）与弹窗（modal）两种展示形式
+ *
+ * 使用 Svelte 5 Runes ($props, $derived)
+ * 使用 compounds 组件：Drawer, Modal, Badge
+ */
+declare const CrudDetailDrawer: import("svelte").Component<$$ComponentProps, {}, "open">;
+type CrudDetailDrawer = ReturnType<typeof CrudDetailDrawer>;
+export default CrudDetailDrawer;

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

@@ -8,7 +8,7 @@
 <script lang='ts'>
   import type { Snippet } from 'svelte'
   import type { Size } from '../../../types.js'
-  import type { CrudFormVariant } from './crud-types.js'
+  import type { CrudDensity, CrudFormVariant } from './crud-types.js'
   import { uiM } from '../../../messages.js'
   import Drawer from '../../compounds/Drawer.svelte'
   import Modal from '../../compounds/Modal.svelte'
@@ -29,6 +29,7 @@
     open = $bindable(false),
     item = null,
     fields = [],
+    density = 'normal' as CrudDensity,
     title = '',
     variant = 'drawer' as CrudFormVariant,
     size = '2xl' as Size,
@@ -44,6 +45,7 @@
     open?: boolean
     item?: Record<string, unknown> | null
     fields?: FieldDef[]
+    density?: CrudDensity
     title?: string
     variant?: CrudFormVariant
     size?: Size
@@ -109,6 +111,16 @@
       .sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
   )
 
+  const isCompact = $derived(density === 'compact')
+  const contentClass = $derived(isCompact ? 'space-y-3' : 'space-y-4')
+  const labelClass = $derived(isCompact ? 'text-[11px] font-medium text-base-content/50 mb-1' : 'text-xs font-medium text-base-content/50 mb-1')
+  const valueClass = $derived(isCompact ? 'text-[13px] text-base-content' : 'text-sm text-base-content')
+  const badgeSize = $derived(isCompact ? 'xs' : 'sm')
+  const detailExtraClass = $derived(isCompact ? 'border-t border-base-content/5 pt-3' : 'border-t border-base-content/5 pt-4')
+  const iconClass = $derived(isCompact ? 'size-3.5 mr-1' : 'size-4 mr-1')
+  const drawerBodyClass = $derived(isCompact ? 'pb-16' : 'pb-20')
+  const drawerFooterClass = $derived(isCompact ? 'absolute bottom-0 left-0 right-0 p-3 bg-base-200 border-t border-base-content/10 flex justify-end gap-2' : 'absolute bottom-0 left-0 right-0 p-4 bg-base-200 border-t border-base-content/10 flex justify-end gap-2')
+
   function handleClose() {
     open = false
     onclose?.()
@@ -117,20 +129,20 @@
 
 {#snippet detailBody()}
   {#if item}
-    <div class='space-y-4'>
+    <div class={contentClass}>
       {#each detailFields as field (field.id)}
         {@const value = item[field.id]}
         <div>
-          <div class='text-xs font-medium text-base-content/50 mb-1'>
+          <div class={labelClass}>
             {resolveText(field.label)}
           </div>
-          <div class='text-sm text-base-content'>
+          <div class={valueClass}>
             {#if field.type === 'multi-select' && Array.isArray(value) && value.length > 0}
               <div class='flex flex-wrap gap-1'>
                 {#each value as v, index (`${String(v)}:${index}`)}
                   {@const opts = resolveOptions(field.options)}
                   {@const found = opts.find(o => String(o.value) === String(v))}
-                  <Badge variant='ghost' size='sm'>{found?.label ?? String(v)}</Badge>
+                  <Badge variant='ghost' size={badgeSize}>{found?.label ?? String(v)}</Badge>
                 {/each}
               </div>
             {:else}
@@ -141,7 +153,7 @@
       {/each}
 
       {#if detailExtra && item}
-        <div class='border-t border-base-content/5 pt-4'>
+        <div class={detailExtraClass}>
           {@render detailExtra(item)}
         </div>
       {/if}
@@ -151,12 +163,12 @@
 
 {#snippet footerActions()}
   {#if canEdit}
-    <Button variant='primary' onclick={onedit}>
-      <span class='icon-[tabler--edit] size-4 mr-1'></span>
+    <Button variant='primary' size='sm' onclick={onedit}>
+      <span class='icon-[tabler--edit] {iconClass}'></span>
       {uiM('crud_edit')}
     </Button>
   {/if}
-  <Button variant='ghost' onclick={handleClose}>
+  <Button variant='ghost' size='sm' onclick={handleClose}>
     {uiM('crud_close')}
   </Button>
 {/snippet}
@@ -179,12 +191,12 @@
 {:else}
   <Drawer bind:open {title} position='right' {size} width={drawerWidth} onclose={handleClose}>
     {#if item}
-      <div class='pb-20'>
+      <div class={drawerBodyClass}>
         {@render detailBody()}
       </div>
 
       <!-- 底部操作栏 -->
-      <div class='absolute bottom-0 left-0 right-0 p-4 bg-base-200 border-t border-base-content/10 flex justify-end gap-2'>
+      <div class={drawerFooterClass}>
         {@render footerActions()}
       </div>
     {/if}

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { Size } from '../../../types.js';
-import type { CrudFormVariant } from './crud-types.js';
+import type { CrudDensity, CrudFormVariant } from './crud-types.js';
 type FieldDef = {
     id: string;
     label: string | (() => string);
@@ -20,6 +20,7 @@ type $$ComponentProps = {
     open?: boolean;
     item?: Record<string, unknown> | null;
     fields?: FieldDef[];
+    density?: CrudDensity;
     title?: string;
     variant?: CrudFormVariant;
     size?: Size;

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

@@ -8,7 +8,7 @@
 <script lang='ts'>
   import type { Snippet } from 'svelte'
   import type { Size } from '../../../types.js'
-  import type { CrudFormVariant } from './crud-types.js'
+  import type { CrudDensity, CrudFormVariant } from './crud-types.js'
   import { uiM } from '../../../messages.js'
   import Drawer from '../../compounds/Drawer.svelte'
   import FormField from '../../compounds/FormField.svelte'
@@ -35,6 +35,7 @@
     mode = 'create' as 'create' | 'edit',
     fields = [],
     formData = $bindable<Record<string, unknown>>({}),
+    density = 'normal' as CrudDensity,
     title = '',
     variant = 'drawer' as CrudFormVariant,
     size = '2xl' as Size,
@@ -53,6 +54,7 @@
     mode?: 'create' | 'edit'
     fields?: FieldDef[]
     formData?: Record<string, unknown>
+    density?: CrudDensity
     title?: string
     variant?: CrudFormVariant
     size?: Size
@@ -82,6 +84,16 @@
     [...fields].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
   )
 
+  const isCompact = $derived(density === 'compact')
+  const controlSize = $derived(isCompact ? 'xs' : 'sm')
+  const formClass = $derived(isCompact ? 'space-y-3' : 'space-y-4')
+  const extraClass = $derived(isCompact ? 'border-t border-base-content/5 pt-3' : 'border-t border-base-content/5 pt-4')
+  const multiSelectWrapClass = $derived(isCompact ? 'flex flex-wrap gap-2 p-2.5 bg-base-200 rounded-lg max-h-48 overflow-y-auto' : 'flex flex-wrap gap-3 p-3 bg-base-200 rounded-lg max-h-48 overflow-y-auto')
+  const multiSelectLabelClass = $derived(isCompact ? 'inline-flex items-center gap-1.5 cursor-pointer' : 'inline-flex items-center gap-2 cursor-pointer')
+  const multiSelectTextClass = $derived(isCompact ? 'text-xs text-base-content' : 'text-sm text-base-content')
+  const drawerFormClass = $derived(isCompact ? 'space-y-3 pb-16' : 'space-y-4 pb-20')
+  const drawerFooterClass = $derived(isCompact ? 'absolute bottom-0 left-0 right-0 p-3 bg-base-200 border-t border-base-content/10 flex justify-end gap-2' : 'absolute bottom-0 left-0 right-0 p-4 bg-base-200 border-t border-base-content/10 flex justify-end gap-2')
+
   function handleClose() {
     open = false
     onclose?.()
@@ -139,6 +151,7 @@
       <FormField label={resolveText(field.label)} required={isRequired}>
         <Textarea
           id={field.id}
+          size={controlSize}
           value={String(fieldValue ?? '')}
           {placeholder}
           disabled={submitting || isReadonly}
@@ -152,6 +165,7 @@
       <FormField label={resolveText(field.label)} required={isRequired}>
         <Select
           id={field.id}
+          size={controlSize}
           value={String(fieldValue ?? '')}
           disabled={submitting || isReadonly}
           onchange={value => updateField(field.id, value)}
@@ -167,20 +181,20 @@
       {@const opts = resolveOptions(field.options)}
       {@const selectedValues = ((fieldValue ?? []) as Array<string | number | boolean>).map(String)}
       <FormField label={resolveText(field.label)} required={isRequired}>
-        <div class='flex flex-wrap gap-3 p-3 bg-base-200 rounded-lg max-h-48 overflow-y-auto'>
+        <div class={multiSelectWrapClass}>
           {#each opts as opt (String(opt.value))}
-            <label class='inline-flex items-center gap-2 cursor-pointer'>
+            <label class={multiSelectLabelClass}>
               <Checkbox
-                size='sm'
+                size={controlSize}
                 checked={selectedValues.includes(String(opt.value))}
                 onchange={() => toggleMultiSelect(field.id, opt.value)}
                 disabled={submitting || isReadonly}
               />
-              <span class='text-sm text-base-content'>{opt.label}</span>
+              <span class={multiSelectTextClass}>{opt.label}</span>
             </label>
           {/each}
           {#if opts.length === 0}
-            <span class='text-sm text-base-content/60'>{uiM('crud_no_data')}</span>
+            <span class={multiSelectTextClass}>{uiM('crud_no_data')}</span>
           {/if}
         </div>
       </FormField>
@@ -188,6 +202,7 @@
     {:else if field.type === 'boolean' || field.type === 'checkbox'}
       <FormField label={resolveText(field.label)}>
         <Checkbox
+          size={controlSize}
           checked={Boolean(fieldValue)}
           onchange={(checked: boolean) => updateField(field.id, checked)}
           disabled={submitting || isReadonly}
@@ -199,6 +214,7 @@
         <Input
           id={field.id}
           type={getInputType(field.type)}
+          size={controlSize}
           value={String(fieldValue ?? '')}
           {placeholder}
           disabled={submitting || isReadonly}
@@ -215,17 +231,17 @@
   {/each}
 
   {#if editFormExtra}
-    <div class='border-t border-base-content/5 pt-4'>
+    <div class={extraClass}>
       {@render editFormExtra(editingItem, mode)}
     </div>
   {/if}
 {/snippet}
 
 {#snippet footerActions()}
-  <Button variant='ghost' onclick={handleClose} disabled={submitting}>
+  <Button variant='ghost' size='sm' onclick={handleClose} disabled={submitting}>
     {uiM('crud_cancel')}
   </Button>
-  <Button variant='primary' onclick={handleSubmit} disabled={submitting}>
+  <Button variant='primary' size='sm' onclick={handleSubmit} disabled={submitting}>
     {#if submitting}
       <span class='loading loading-spinner loading-xs mr-2'></span>
     {/if}
@@ -243,7 +259,7 @@
     closeOnBackdrop={false}
     onclose={handleClose}
   >
-    <form onsubmit={handleSubmit} class='space-y-4'>
+    <form onsubmit={handleSubmit} class={formClass}>
       {@render formFields()}
     </form>
 
@@ -253,12 +269,12 @@
   </Modal>
 {:else}
   <Drawer bind:open {title} position='right' {size} width={drawerWidth} onclose={handleClose} closeOnBackdrop={false}>
-    <form onsubmit={handleSubmit} class='space-y-4 pb-20'>
+    <form onsubmit={handleSubmit} class={drawerFormClass}>
       {@render formFields()}
     </form>
 
     <!-- 底部操作栏 -->
-    <div class='absolute bottom-0 left-0 right-0 p-4 bg-base-200 border-t border-base-content/10 flex justify-end gap-2'>
+    <div class={drawerFooterClass}>
       {@render footerActions()}
     </div>
   </Drawer>

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { Size } from '../../../types.js';
-import type { CrudFormVariant } from './crud-types.js';
+import type { CrudDensity, CrudFormVariant } from './crud-types.js';
 type FieldDef = {
     id: string;
     label: string | (() => string);
@@ -28,6 +28,7 @@ type $$ComponentProps = {
     mode?: 'create' | 'edit';
     fields?: FieldDef[];
     formData?: Record<string, unknown>;
+    density?: CrudDensity;
     title?: string;
     variant?: CrudFormVariant;
     size?: Size;

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

@@ -57,15 +57,16 @@
   }
 </script>
 
-<div class='p-4'>
-  <div class='flex flex-col sm:flex-row gap-3'>
+<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='flex-1 relative'>
-        <span class='icon-[tabler--search] size-4.5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/35 z-10'></span>
+      <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>
         <Input
           type='text'
+          size='sm'
           placeholder={searchPlaceholder || uiM('crud_search_placeholder')}
-          class='pl-10'
+          class='pl-10 shadow-none'
           bind:value={searchValue}
           oninput={handleSearchInput}
           autocomplete='off'
@@ -76,21 +77,24 @@
     {#each filterFields as field (field.id)}
       {@const opts = resolveOptions(field.options)}
       {#if opts.length > 0}
-        <Select
-          class='min-w-32'
-          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 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='text-sm text-base-content/50 self-center whitespace-nowrap'>
-      {uiM('crud_total', { count: total })}
-    </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>
 </div>

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

@@ -137,6 +137,14 @@
   const canUpdate = $derived(permissions.update !== false && Boolean(crud.api.update))
   const canDelete = $derived(permissions.delete !== false && Boolean(crud.api.remove))
   const searchable = $derived(crud.resource.searchable !== false)
+  const isCompact = $derived(density === 'compact')
+  const pageGapClass = 'space-y-5'
+  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 formVariant = $derived(form.variant ?? 'drawer')
@@ -395,7 +403,7 @@
   )
 </script>
 
-<div class='space-y-4 {className}'>
+<div class='{pageGapClass} {className}'>
   <!-- 页面标题 -->
   <PageHeader title={resourceLabel}>
     {#snippet actions()}
@@ -403,8 +411,8 @@
         {@render headerActions()}
       {/if}
       {#if canCreate}
-        <Button variant='primary' onclick={openCreate}>
-          <span class='icon-[tabler--plus] size-4.5 mr-1'></span>
+        <Button variant='primary' size='sm' onclick={openCreate} class='shadow-sm'>
+          <span class='icon-[tabler--plus] size-4.5 mr-1.5'></span>
           {uiM('crud_create')}
         </Button>
       {/if}
@@ -413,7 +421,7 @@
 
   <!-- 搜索 + 过滤栏 -->
   {#if searchable || filterFields.length > 0}
-    <Card>
+    <Card padding='sm' class={filterCardClass}>
       <CrudFilterBar
         {searchable}
         searchPlaceholder={searchPlaceholderText}
@@ -428,7 +436,7 @@
   {/if}
 
   <!-- 数据列表 -->
-  <Card>
+  <Card padding='none' class={listCardClass}>
     <DataTable
       data={data.items}
       columns={dtColumns}
@@ -440,32 +448,32 @@
         {#if rowClickDetail}
           <IconButton
             variant='ghost'
-            size='sm'
+            size={actionButtonSize}
             ariaLabel={uiM('crud_detail')}
             onclick={() => openDetail(item)}
           >
-            <span class='icon-[tabler--eye] size-4'></span>
+            <span class='icon-[tabler--eye] {actionIconClass}'></span>
           </IconButton>
         {/if}
         {#if canUpdate}
           <IconButton
             variant='ghost'
-            size='sm'
+            size={actionButtonSize}
             ariaLabel={uiM('crud_edit')}
             onclick={() => openEdit(item)}
           >
-            <span class='icon-[tabler--edit] size-4'></span>
+            <span class='icon-[tabler--edit] {actionIconClass}'></span>
           </IconButton>
         {/if}
         {#if canDelete}
           <IconButton
             variant='ghost'
-            size='sm'
+            size={actionButtonSize}
             ariaLabel={uiM('crud_delete')}
             onclick={() => requestDelete(item)}
             class='hover:text-error'
           >
-            <span class='icon-[tabler--trash] size-4'></span>
+            <span class='icon-[tabler--trash] {actionIconClass}'></span>
           </IconButton>
         {/if}
         {#if listItemActions}
@@ -475,12 +483,12 @@
     </DataTable>
 
     <!-- 分页栏：始终显示，支持每页条数选择与跳页 -->
-    <div class='flex justify-center p-4 border-t border-base-content/5'>
+    <div class={paginationBarClass}>
       <Pagination
         page={data.page}
         total={data.total}
         pageSize={data.pageSize}
-        size='sm'
+        size={paginationSize}
         showTotal={paginationShowTotal}
         showJumper={paginationShowJumper}
         showSizeChanger={paginationShowSizeChanger}
@@ -497,6 +505,7 @@
   open={detailOpen}
   item={selectedItem}
   fields={detailFields}
+  {density}
   title={panelTitle}
   variant={formVariant}
   size={formDrawerSize}
@@ -515,6 +524,7 @@
   open={editOpen}
   mode={panelMode === 'create' ? 'create' : 'edit'}
   fields={panelMode === 'create' ? createFields : editFields}
+  {density}
   bind:formData
   title={panelTitle}
   variant={formVariant}

package/dist/components/scenes/crud/crud-types.d.ts

@@ -142,7 +142,7 @@ export interface CrudPageProps<T = Record<string, unknown>> {
     form?: CrudFormConfig;
     /** 分页栏展示配置（每页条数选择、跳页、总数） */
     pagination?: CrudPaginationConfig;
-    /** 列表显示密度：'normal'（默认）或 'compact'（紧凑） */
+    /** 列表显示密度：影响列表行、行内操作、分页与详情/编辑表单；不影响页头与筛选栏 */
     density?: CrudDensity;
     /** 列表行点击是否打开详情（默认 true） */
     rowClickDetail?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.23",
+  "version": "0.1.0-alpha.24",
   "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.23"
+    "@h-ai/core": "0.1.0-alpha.24"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",