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

package/README.md

@@ -274,11 +274,21 @@ components/
 
 | 组件                 | 描述         | 主要属性 / 能力 |
 | -------------------- | ------------ | ---------------- |
-| `CrudPage`           | CRUD 主页面  | `definition`, `navAdapter`, `loading` |
-| `CrudFilterBar`      | 过滤工具栏   | `filters`, `query`, `onchange` |
-| `CrudDetailDrawer`   | 详情抽屉     | `open`, `item`, `fields` |
-| `CrudEditDrawer`     | 编辑抽屉     | `open`, `schema`, `onsubmit` |
-| `CrudDeleteConfirm`  | 删除确认框   | `open`, `item`, `onconfirm` |
+| `CrudPage`           | CRUD 主页面  | `crud`, `data`, `permissions`, `form`, `pagination`, `density`, `nav` |
+| `CrudFilterBar`      | 过滤工具栏   | `filterFields`, `searchValue`, `onsearch`, `onfilterchange` |
+| `CrudDetailPanel`    | 详情面板（抽屉/弹窗） | `open`, `item`, `fields`, `variant`, `drawerWidth`, `modalSize` |
+| `CrudEditPanel`      | 编辑面板（抽屉/弹窗） | `open`, `fields`, `variant`, `drawerWidth`, `modalSize`, `onsubmit` |
+| `CrudDeleteConfirm`  | 删除确认框   | `open`, `loading`, `onconfirm` |
+
+> `CrudPage` 通过 `form` 配置新建/编辑的展示形式：
+>
+> - `form.variant`：`'drawer'`（抽屉，默认）或 `'modal'`（弹出窗口）。
+> - 抽屉：`form.drawerSize` 选预设尺寸，`form.drawerWidth` 传任意 CSS 宽度（优先级更高）。
+> - 弹窗：`form.modalSize` 选预设尺寸，`form.modalWidth` / `form.modalHeight` 传任意 CSS 尺寸。
+>
+> `pagination` 配置分页栏（始终显示）：`showSizeChanger`、`pageSizeOptions`、`showJumper`、`showTotal` 默认开启。
+>
+> `density` 配置列表密度：`'normal'`（默认）或 `'compact'`（紧凑）。它只影响列表行、行内操作、分页与创建/编辑/详情表单元素，不影响页头与筛选栏。
 
 ## 使用示例
 
@@ -368,6 +378,30 @@ components/
 <ToastContainer />
 ```
 
+### 声明式 CRUD 页面（CrudPage）
+
+```svelte
+<script lang='ts'>
+  import { createSvelteKitNavAdapter } from '@h-ai/kit/client'
+  import { CrudPage } from '@h-ai/ui'
+
+  let { data } = $props()
+  const nav = createSvelteKitNavAdapter()
+</script>
+
+<CrudPage
+  crud={roleCrud}
+  {data}
+  permissions={{ create: true, update: true, delete: true }}
+  form={{ variant: 'modal', modalSize: 'lg' }}
+  pagination={{ showSizeChanger: true, showJumper: true, pageSizeOptions: [10, 20, 50] }}
+  density='compact'
+  {nav}
+/>
+```
+
+> 抽屉形式可改用 `form={{ variant: 'drawer', drawerWidth: '40rem' }}`。
+
 ### 登录页面
 
 ```svelte

package/auto-import.d.ts

@@ -110,8 +110,8 @@ declare global {
 
   // scenes - crud
   const CrudDeleteConfirm: typeof import('@h-ai/ui')['CrudDeleteConfirm']
-  const CrudDetailDrawer: typeof import('@h-ai/ui')['CrudDetailDrawer']
-  const CrudEditDrawer: typeof import('@h-ai/ui')['CrudEditDrawer']
+  const CrudDetailPanel: typeof import('@h-ai/ui')['CrudDetailPanel']
+  const CrudEditPanel: typeof import('@h-ai/ui')['CrudEditPanel']
   const CrudFilterBar: typeof import('@h-ai/ui')['CrudFilterBar']
   const CrudPage: typeof import('@h-ai/ui')['CrudPage']
 }

package/auto-import.js

@@ -95,8 +95,8 @@ const UI_COMPONENTS = new Set([
   'MarkdownRenderer',
   // scenes - crud
   'CrudDeleteConfirm',
-  'CrudDetailDrawer',
-  'CrudEditDrawer',
+  'CrudDetailPanel',
+  'CrudEditPanel',
   'CrudFilterBar',
   'CrudPage',
 ])

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

@@ -10,6 +10,7 @@
   @prop {boolean} loading - 是否加载中
   @prop {boolean} striped - 是否斑马纹
   @prop {boolean} hoverable - 是否悬停高亮
+  @prop {'normal' | 'compact'} density - 显示密度，compact 为紧凑布局
 
   @example
   <DataTable
@@ -39,6 +40,7 @@
     loading = false,
     striped = true,
     hoverable = true,
+    density = 'normal',
     class: className = '',
   }: {
     data: T[]
@@ -49,11 +51,34 @@
     loading?: boolean
     striped?: boolean
     hoverable?: boolean
+    density?: 'normal' | 'compact'
     class?: string
   } = $props()
 
   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)
@@ -79,9 +104,9 @@
 </script>
 
 <div class='overflow-x-auto {className}'>
-  <table class='table w-full 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}` : ''}
@@ -91,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}
@@ -114,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/DataTable.svelte.d.ts

@@ -15,6 +15,7 @@ declare function $$render<T>(): {
         loading?: boolean;
         striped?: boolean;
         hoverable?: boolean;
+        density?: "normal" | "compact";
         class?: string;
     };
     exports: {};
@@ -48,6 +49,7 @@ interface $$IsomorphicComponent {
  * @prop {boolean} loading - 是否加载中
  * @prop {boolean} striped - 是否斑马纹
  * @prop {boolean} hoverable - 是否悬停高亮
+ * @prop {'normal' | 'compact'} density - 显示密度，compact 为紧凑布局
  *
  * @example
  * <DataTable

package/dist/components/compounds/Drawer.svelte

@@ -20,6 +20,7 @@
     title = '',
     position = 'right',
     size = 'md',
+    width,
     closeOnBackdrop = true,
     showClose = true,
     class: className = '',
@@ -40,6 +41,10 @@
     '4xl': 'w-[42rem]',
   }
 
+  // width 优先：传入自定义 CSS 宽度时通过 inline style 覆盖预设宽度类
+  const hasCustomWidth = $derived(typeof width === 'string' && width.trim().length > 0)
+  const widthStyle = $derived(hasCustomWidth ? `width: ${width!.trim()}; max-width: 100vw` : undefined)
+
   const drawerClass = $derived(
     cn(
       'drawer',
@@ -56,7 +61,7 @@
   const contentClass = $derived(
     cn(
       'menu bg-base-200 text-base-content min-h-full p-4',
-      sizeMap[size],
+      !hasCustomWidth && sizeMap[size],
       className,
     ),
   )
@@ -86,7 +91,7 @@
       onkeydown={e => e.key === 'Enter' && handleBackdropClick()}
     ></div>
 
-    <div class={contentClass}>
+    <div class={contentClass} style={widthStyle}>
       <div class='flex items-center justify-between mb-4'>
         {#if title}
           <h3 class='text-lg font-bold'>{title}</h3>

package/dist/components/compounds/Modal.svelte

@@ -210,6 +210,7 @@
     max-height: calc(100vh - clamp(2rem, 5.2vw, 4rem));
     max-height: calc(100dvh - clamp(2rem, 5.2vw, 4rem));
     border-radius: 1.4rem;
+    overflow: hidden;
     color: var(--color-base-content);
     outline: none;
     box-shadow:
@@ -224,6 +225,7 @@
 
   .hai-modal__footer {
     box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-base-content) 6%, transparent);
+    border-radius: 0 0 1.4rem 1.4rem;
   }
 
   .hai-modal__close {

package/dist/components/compounds/Pagination.svelte

@@ -14,6 +14,7 @@
   import BareButton from '../primitives/BareButton.svelte'
 
   import Input from '../primitives/Input.svelte'
+  import Select from '../primitives/Select.svelte'
 
   let {
     page = $bindable(1),
@@ -22,15 +23,18 @@
     size = 'md',
     showTotal = true,
     showJumper = false,
+    showSizeChanger = false,
+    pageSizeOptions = [10, 20, 50, 100],
     labels = {},
     class: className = '',
     onchange,
+    onpagesizechange,
   }: PaginationProps = $props()
 
   // labels 优先，缺省回退到内置消息 uiM(...)
 
-  // 计算总页数
-  const totalPages = $derived(Math.ceil(total / pageSize))
+  // 计算总页数（至少 1 页，保证分页栏在空数据时仍可渲染）
+  const totalPages = $derived(Math.max(1, Math.ceil(total / pageSize)))
 
   // 生成页码列表
   const pages = $derived(() => {
@@ -83,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
@@ -99,15 +115,38 @@
       jumperValue = ''
     }
   }
+
+  function handlePageSizeChange(value: string) {
+    const next = Number.parseInt(value, 10)
+    if (!Number.isNaN(next) && next !== pageSize) {
+      onpagesizechange?.(next)
+    }
+  }
 </script>
 
-<div class='flex 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={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>
+  {/if}
+
   <div class={joinClass}>
     <BareButton
       class={btnClass}
@@ -140,18 +179,20 @@
   </div>
 
   {#if showJumper}
-    <div class='flex items-center gap-2'>
-      <span class='text-sm'>{labels.jumpTo ?? uiM('pagination_jump_to')}</span>
-      <Input
-        type='number'
-        size='sm'
-        class='w-16'
-        min={1}
-        max={totalPages}
-        bind:value={jumperValue}
-        onkeydown={(e: KeyboardEvent & { currentTarget: HTMLInputElement }) => e.key === 'Enter' && handleJump()}
-      />
-      <span class='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

@@ -1,15 +1,17 @@
 <!--
   @component CrudDetailDrawer
-  CRUD 详情抽屉组件（只读展示）
+  CRUD 详情组件（只读展示），支持抽屉（drawer）与弹窗（modal）两种展示形式
 
   使用 Svelte 5 Runes ($props, $derived)
-  使用 compounds 组件：Drawer, Badge
+  使用 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'
 
@@ -28,7 +30,12 @@
     item = null,
     fields = [],
     title = '',
+    variant = 'drawer' as CrudFormVariant,
     size = '2xl' as Size,
+    drawerWidth,
+    modalSize = '2xl' as Size | 'full',
+    modalWidth,
+    modalHeight,
     canEdit = false,
     onedit,
     onclose,
@@ -38,7 +45,12 @@
     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
@@ -107,9 +119,9 @@
   }
 </script>
 
-<Drawer bind:open {title} position='right' {size} onclose={handleClose}>
+{#snippet detailBody()}
   {#if item}
-    <div class='space-y-4 pb-20'>
+    <div class='space-y-4'>
       {#each detailFields as field (field.id)}
         {@const value = item[field.id]}
         <div>
@@ -138,18 +150,47 @@
         </div>
       {/if}
     </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'>
-      {#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>
-    </div>
   {/if}
-</Drawer>
+{/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

@@ -1,5 +1,6 @@
 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);
@@ -20,7 +21,12 @@ type $$ComponentProps = {
     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;
@@ -28,10 +34,10 @@ type $$ComponentProps = {
 };
 /**
  * CrudDetailDrawer
- * CRUD 详情抽屉组件（只读展示）
+ * CRUD 详情组件（只读展示），支持抽屉（drawer）与弹窗（modal）两种展示形式
  *
  * 使用 Svelte 5 Runes ($props, $derived)
- * 使用 compounds 组件：Drawer, Badge
+ * 使用 compounds 组件：Drawer, Modal, Badge
  */
 declare const CrudDetailDrawer: import("svelte").Component<$$ComponentProps, {}, "open">;
 type CrudDetailDrawer = ReturnType<typeof CrudDetailDrawer>;