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

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/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,6 +51,7 @@
     loading?: boolean
     striped?: boolean
     hoverable?: boolean
+    density?: 'normal' | 'compact'
     class?: string
   } = $props()
 
@@ -79,7 +82,7 @@
 </script>
 
 <div class='overflow-x-auto {className}'>
-  <table class='table w-full text-[13px]' class:table-zebra={striped}>
+  <table class='table w-full {density === `compact` ? `table-sm text-xs` : `text-[13px]`}' class:table-zebra={striped}>
     <thead>
       <tr class='text-xs text-base-content/50 border-b border-base-content/6'>
         {#each columns as col (String(col.key))}

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(() => {
@@ -99,15 +103,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='flex flex-wrap items-center gap-4'>
   {#if showTotal}
     <span class='text-sm text-base-content/70'>
       {(labels.total ?? uiM('pagination_total')).replace('{count}', String(total))}
     </span>
   {/if}
 
+  {#if showSizeChanger}
+    <div class='w-28 shrink-0'>
+      <Select
+        size='sm'
+        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 +167,18 @@
   </div>
 
   {#if showJumper}
-    <div class='flex items-center gap-2'>
-      <span class='text-sm'>{labels.jumpTo ?? uiM('pagination_jump_to')}</span>
+    <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='sm'
-        class='w-16'
+        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='text-sm'>{labels.page ?? uiM('pagination_page')}</span>
+      <span class='shrink-0 text-sm'>{labels.page ?? uiM('pagination_page')}</span>
     </div>
   {/if}
 </div>

package/dist/components/scenes/crud/{CrudDetailDrawer.svelte → CrudDetailPanel.svelte}

@@ -1,15 +1,17 @@
 <!--
-  @component CrudDetailDrawer
-  CRUD 详情抽屉组件（只读展示）
+  @component CrudDetailPanel
+  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
@@ -63,14 +75,12 @@
       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) => {
@@ -79,12 +89,10 @@
       }).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()
     }
@@ -107,9 +115,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 +146,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 → CrudDetailPanel.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,19 +21,24 @@ 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;
     detailExtra?: Snippet<[Record<string, unknown>]>;
 };
 /**
- * CrudDetailDrawer
- * CRUD 详情抽屉组件（只读展示）
+ * CrudDetailPanel
+ * 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>;
-export default CrudDetailDrawer;
+declare const CrudDetailPanel: import("svelte").Component<$$ComponentProps, {}, "open">;
+type CrudDetailPanel = ReturnType<typeof CrudDetailPanel>;
+export default CrudDetailPanel;