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

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;

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

@@ -0,0 +1,265 @@
+<!--
+  @component CrudEditPanel
+  CRUD 编辑/新建表单组件，支持抽屉（drawer）与弹窗（modal）两种展示形式
+
+  使用 Svelte 5 Runes ($props, $state, $derived)
+  使用 compounds/primitives 组件：Drawer, Modal, FormField, Input, Select, Textarea, Checkbox, Button
+-->
+<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 FormField from '../../compounds/FormField.svelte'
+  import Modal from '../../compounds/Modal.svelte'
+  import Button from '../../primitives/Button.svelte'
+  import Checkbox from '../../primitives/Checkbox.svelte'
+  import Input from '../../primitives/Input.svelte'
+  import Select from '../../primitives/Select.svelte'
+  import Textarea from '../../primitives/Textarea.svelte'
+
+  type FieldDef = {
+    id: string
+    label: string | (() => string)
+    type: string
+    readonly?: boolean
+    options?: Array<{ label: string, value: string | number | boolean }> | (() => Array<{ label: string, value: string | number | boolean }>)
+    validation?: { required?: boolean, min?: number, max?: number, pattern?: string, message?: string }
+    placeholder?: string | (() => string)
+    order?: number
+  }
+
+  let {
+    open = $bindable(false),
+    mode = 'create' as 'create' | 'edit',
+    fields = [],
+    formData = $bindable<Record<string, unknown>>({}),
+    title = '',
+    variant = 'drawer' as CrudFormVariant,
+    size = '2xl' as Size,
+    drawerWidth,
+    modalSize = '2xl' as Size | 'full',
+    modalWidth,
+    modalHeight,
+    submitting = false,
+    error = '',
+    onsubmit,
+    onclose,
+    editFormExtra,
+    editingItem = null,
+  }: {
+    open?: boolean
+    mode?: 'create' | 'edit'
+    fields?: FieldDef[]
+    formData?: Record<string, unknown>
+    title?: string
+    variant?: CrudFormVariant
+    size?: Size
+    drawerWidth?: string
+    modalSize?: Size | 'full'
+    modalWidth?: string
+    modalHeight?: string
+    submitting?: boolean
+    error?: string
+    onsubmit?: (data: Record<string, unknown>) => Promise<void>
+    onclose?: () => void
+    editFormExtra?: Snippet<[Record<string, unknown> | null, 'create' | 'edit']>
+    editingItem?: Record<string, unknown> | null
+  } = $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
+  }
+
+  const sortedFields = $derived(
+    [...fields].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
+  )
+
+  function handleClose() {
+    open = false
+    onclose?.()
+  }
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault()
+    await onsubmit?.(formData)
+  }
+
+  function getInputType(fieldType: string): 'email' | 'url' | 'tel' | 'password' | 'number' | 'text' {
+    switch (fieldType) {
+      case 'email': return 'email'
+      case 'url': return 'url'
+      case 'tel': return 'tel'
+      case 'password': return 'password'
+      case 'number': return 'number'
+      case 'date': return 'text'
+      case 'datetime': return 'text'
+      default: return 'text'
+    }
+  }
+
+  function updateField(fieldId: string, value: unknown) {
+    formData = { ...formData, [fieldId]: value }
+  }
+
+  function toggleMultiSelect(fieldId: string, optValue: string | number | boolean) {
+    const current = (formData[fieldId] as Array<string | number | boolean>) ?? []
+    const strVal = String(optValue)
+    if (current.map(String).includes(strVal)) {
+      formData = { ...formData, [fieldId]: current.filter(v => String(v) !== strVal) }
+    }
+    else {
+      formData = { ...formData, [fieldId]: [...current, optValue] }
+    }
+  }
+</script>
+
+{#snippet formFields()}
+  {#if error}
+    <div class='p-3 bg-error/10 border border-error/20 rounded-lg text-sm text-error flex items-center gap-2'>
+      <span class='icon-[tabler--alert-circle] size-4 shrink-0'></span>
+      <span>{error}</span>
+    </div>
+  {/if}
+
+  {#each sortedFields as field (field.id)}
+    {@const isReadonly = field.readonly && mode === 'edit'}
+    {@const isRequired = field.validation?.required}
+    {@const fieldValue = formData[field.id]}
+    {@const placeholder = field.placeholder ? resolveText(field.placeholder) : ''}
+
+    {#if field.type === 'textarea'}
+      <FormField label={resolveText(field.label)} required={isRequired}>
+        <Textarea
+          id={field.id}
+          value={String(fieldValue ?? '')}
+          {placeholder}
+          disabled={submitting || isReadonly}
+          required={isRequired}
+          oninput={e => updateField(field.id, (e.target as HTMLTextAreaElement).value)}
+        />
+      </FormField>
+
+    {:else if field.type === 'select' || field.type === 'radio'}
+      {@const opts = resolveOptions(field.options)}
+      <FormField label={resolveText(field.label)} required={isRequired}>
+        <Select
+          id={field.id}
+          value={String(fieldValue ?? '')}
+          disabled={submitting || isReadonly}
+          onchange={value => updateField(field.id, value)}
+        >
+          <option value="">{placeholder || uiM('crud_filter_all')}</option>
+          {#each opts as opt (String(opt.value))}
+            <option value={String(opt.value)}>{opt.label}</option>
+          {/each}
+        </Select>
+      </FormField>
+
+    {:else if field.type === 'multi-select'}
+      {@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'>
+          {#each opts as opt (String(opt.value))}
+            <label class='inline-flex items-center gap-2 cursor-pointer'>
+              <Checkbox
+                size='sm'
+                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>
+            </label>
+          {/each}
+          {#if opts.length === 0}
+            <span class='text-sm text-base-content/60'>{uiM('crud_no_data')}</span>
+          {/if}
+        </div>
+      </FormField>
+
+    {:else if field.type === 'boolean' || field.type === 'checkbox'}
+      <FormField label={resolveText(field.label)}>
+        <Checkbox
+          checked={Boolean(fieldValue)}
+          onchange={(checked: boolean) => updateField(field.id, checked)}
+          disabled={submitting || isReadonly}
+        />
+      </FormField>
+
+    {:else}
+      <FormField label={resolveText(field.label)} required={isRequired}>
+        <Input
+          id={field.id}
+          type={getInputType(field.type)}
+          value={String(fieldValue ?? '')}
+          {placeholder}
+          disabled={submitting || isReadonly}
+          required={isRequired}
+          pattern={field.validation?.pattern}
+          minlength={field.type !== 'number' ? field.validation?.min : undefined}
+          maxlength={field.type !== 'number' ? field.validation?.max : undefined}
+          min={field.type === 'number' ? field.validation?.min : undefined}
+          max={field.type === 'number' ? field.validation?.max : undefined}
+          oninput={e => updateField(field.id, field.type === 'number' ? Number((e.currentTarget as HTMLInputElement).value) : (e.currentTarget as HTMLInputElement).value)}
+        />
+      </FormField>
+    {/if}
+  {/each}
+
+  {#if editFormExtra}
+    <div class='border-t border-base-content/5 pt-4'>
+      {@render editFormExtra(editingItem, mode)}
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet footerActions()}
+  <Button variant='ghost' onclick={handleClose} disabled={submitting}>
+    {uiM('crud_cancel')}
+  </Button>
+  <Button variant='primary' onclick={handleSubmit} disabled={submitting}>
+    {#if submitting}
+      <span class='loading loading-spinner loading-xs mr-2'></span>
+    {/if}
+    {mode === 'create' ? uiM('crud_create') : uiM('crud_save')}
+  </Button>
+{/snippet}
+
+{#if variant === 'modal'}
+  <Modal
+    bind:open
+    {title}
+    size={modalSize}
+    width={modalWidth}
+    height={modalHeight}
+    closeOnBackdrop={false}
+    onclose={handleClose}
+  >
+    <form onsubmit={handleSubmit} class='space-y-4'>
+      {@render formFields()}
+    </form>
+
+    {#snippet footer()}
+      {@render footerActions()}
+    {/snippet}
+  </Modal>
+{:else}
+  <Drawer bind:open {title} position='right' {size} width={drawerWidth} onclose={handleClose} closeOnBackdrop={false}>
+    <form onsubmit={handleSubmit} class='space-y-4 pb-20'>
+      {@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'>
+      {@render footerActions()}
+    </div>
+  </Drawer>
+{/if}

package/dist/components/scenes/crud/{CrudEditDrawer.svelte.d.ts → CrudEditPanel.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);
@@ -28,7 +29,12 @@ type $$ComponentProps = {
     fields?: FieldDef[];
     formData?: Record<string, unknown>;
     title?: string;
+    variant?: CrudFormVariant;
     size?: Size;
+    drawerWidth?: string;
+    modalSize?: Size | 'full';
+    modalWidth?: string;
+    modalHeight?: string;
     submitting?: boolean;
     error?: string;
     onsubmit?: (data: Record<string, unknown>) => Promise<void>;
@@ -37,12 +43,12 @@ type $$ComponentProps = {
     editingItem?: Record<string, unknown> | null;
 };
 /**
- * CrudEditDrawer
- * CRUD 编辑/新建抽屉组件
+ * CrudEditPanel
+ * CRUD 编辑/新建表单组件，支持抽屉（drawer）与弹窗（modal）两种展示形式
  *
  * 使用 Svelte 5 Runes ($props, $state, $derived)
- * 使用 compounds/primitives 组件：Drawer, FormField, Input, Select, Textarea, Checkbox, Button
+ * 使用 compounds/primitives 组件：Drawer, Modal, FormField, Input, Select, Textarea, Checkbox, Button
  */
-declare const CrudEditDrawer: import("svelte").Component<$$ComponentProps, {}, "open" | "formData">;
-type CrudEditDrawer = ReturnType<typeof CrudEditDrawer>;
-export default CrudEditDrawer;
+declare const CrudEditPanel: import("svelte").Component<$$ComponentProps, {}, "open" | "formData">;
+type CrudEditPanel = ReturnType<typeof CrudEditPanel>;
+export default CrudEditPanel;

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

@@ -2,17 +2,17 @@
   @component CrudPage
   通用 CRUD 页面组件
 
-  基于声明式资源定义，自动生成列表 + 搜索过滤 + 分页 + 详情抽屉 + 编辑/新建抽屉 + 删除确认。
+  基于声明式资源定义，自动生成列表 + 搜索过滤 + 分页 + 详情查看 + 编辑/新建面板 + 删除确认。
 
   使用 Svelte 5 Runes ($props, $state, $derived, $effect)
-  使用 compounds 组件：Card, DataTable, PageHeader, Pagination, Drawer
+  使用 compounds 组件：Card, DataTable, PageHeader, Pagination, Drawer, Modal
 
   @example
   <CrudPage crud={userCrud} data={data} permissions={{ create: true, update: true, delete: true }} />
 -->
 <script lang='ts'>
   import type { Snippet } from 'svelte'
-  import type { Size } from '../../../types.js'
+  import type { CrudDensity, CrudFormConfig, CrudPaginationConfig } from './crud-types.js'
   import type { NavAdapter } from './nav-adapter.js'
   import { SvelteURLSearchParams } from 'svelte/reactivity'
   import { uiM } from '../../../messages.js'
@@ -23,8 +23,8 @@
   import Button from '../../primitives/Button.svelte'
   import IconButton from '../../primitives/IconButton.svelte'
   import CrudDeleteConfirm from './CrudDeleteConfirm.svelte'
-  import CrudDetailDrawer from './CrudDetailDrawer.svelte'
-  import CrudEditDrawer from './CrudEditDrawer.svelte'
+  import CrudDetailPanel from './CrudDetailPanel.svelte'
+  import CrudEditPanel from './CrudEditPanel.svelte'
   import CrudFilterBar from './CrudFilterBar.svelte'
   import { createBrowserNavAdapter } from './nav-adapter.js'
 
@@ -87,7 +87,9 @@
     crud,
     data,
     permissions = {},
-    drawerSize = '2xl' as Size,
+    form = {},
+    pagination = {},
+    density = 'normal',
     rowClickDetail = true,
     listItemActions,
     editFormExtra,
@@ -104,7 +106,9 @@
     crud: CrudDef
     data: { items: Record<string, unknown>[], total: number, page: number, pageSize: number, filters?: Record<string, unknown> }
     permissions?: { create?: boolean, update?: boolean, delete?: boolean }
-    drawerSize?: Size
+    form?: CrudFormConfig
+    pagination?: CrudPaginationConfig
+    density?: CrudDensity
     rowClickDetail?: boolean
     listItemActions?: Snippet<[Record<string, unknown>]>
     editFormExtra?: Snippet<[Record<string, unknown> | null, 'create' | 'edit']>
@@ -134,8 +138,22 @@
   const canDelete = $derived(permissions.delete !== false && Boolean(crud.api.remove))
   const searchable = $derived(crud.resource.searchable !== false)
 
+  // 表单展示配置（抽屉 / 弹窗）
+  const formVariant = $derived(form.variant ?? 'drawer')
+  const formDrawerSize = $derived(form.drawerSize ?? '2xl')
+  const formDrawerWidth = $derived(form.drawerWidth)
+  const formModalSize = $derived(form.modalSize ?? '2xl')
+  const formModalWidth = $derived(form.modalWidth)
+  const formModalHeight = $derived(form.modalHeight)
+
+  // 分页栏配置
+  const paginationShowSizeChanger = $derived(pagination.showSizeChanger !== false)
+  const paginationShowJumper = $derived(pagination.showJumper !== false)
+  const paginationShowTotal = $derived(pagination.showTotal !== false)
+  const paginationPageSizeOptions = $derived(pagination.pageSizeOptions ?? [10, 20, 50, 100])
+
   // 视图状态
-  let drawerMode = $state<'detail' | 'edit' | 'create' | null>(null)
+  let panelMode = $state<'detail' | 'edit' | 'create' | null>(null)
   let selectedItem = $state<Record<string, unknown> | null>(null)
   let formData = $state<Record<string, unknown>>({})
   let submitting = $state(false)
@@ -219,29 +237,33 @@
     navigateWithParams({ page: newPage })
   }
 
+  function handlePageSizeChange(newPageSize: number) {
+    navigateWithParams({ pageSize: newPageSize, page: 1 })
+  }
+
   // ─── 打开/关闭抽屉 ───
 
   function openDetail(item: Record<string, unknown>) {
     selectedItem = item
-    drawerMode = 'detail'
+    panelMode = 'detail'
   }
 
   function openCreate() {
     selectedItem = null
     formData = { ...crud.getDefaultValues() }
     formError = ''
-    drawerMode = 'create'
+    panelMode = 'create'
   }
 
   function openEdit(item: Record<string, unknown>) {
     selectedItem = item
     formData = { ...item }
     formError = ''
-    drawerMode = 'edit'
+    panelMode = 'edit'
   }
 
-  function closeDrawer() {
-    drawerMode = null
+  function closePanel() {
+    panelMode = null
     selectedItem = null
     formError = ''
   }
@@ -259,18 +281,18 @@
     submitting = true
 
     try {
-      if (drawerMode === 'create' && crud.api.create) {
+      if (panelMode === 'create' && crud.api.create) {
         const result = await crud.api.create(submitData)
         const submitted = (result ?? {}) as Record<string, unknown>
-        closeDrawer()
+        closePanel()
         onaftersubmit?.(submitted, 'create')
         await nav.refresh?.()
       }
-      else if (drawerMode === 'edit' && crud.api.update && selectedItem) {
+      else if (panelMode === 'edit' && crud.api.update && selectedItem) {
         const id = String(selectedItem[keyField])
         const result = await crud.api.update(id, submitData)
         const submitted = (result ?? {}) as Record<string, unknown>
-        closeDrawer()
+        closePanel()
         onaftersubmit?.(submitted, 'edit')
         await nav.refresh?.()
       }
@@ -314,7 +336,7 @@
       deletingItem = null
       // 如果删除的是当前详情/编辑中的项，关闭抽屉
       if (selectedItem && String(selectedItem[keyField]) === id) {
-        closeDrawer()
+        closePanel()
       }
       onafterdelete?.(deleted)
       await nav.refresh?.()
@@ -347,17 +369,17 @@
   const filterFields = $derived(crud.getFilterFields() as FieldDef[])
 
   // 抽屉标题
-  const drawerTitle = $derived(
-    drawerMode === 'create'
+  const panelTitle = $derived(
+    panelMode === 'create'
       ? `${uiM('crud_create')}${resourceLabel}`
-      : drawerMode === 'edit'
+      : panelMode === 'edit'
       ? `${uiM('crud_edit')}${resourceLabel}`
       : `${resourceLabel}${uiM('crud_detail')}`,
   )
 
-  // 抽屉 open 状态
-  const detailOpen = $derived(drawerMode === 'detail')
-  const editOpen = $derived(drawerMode === 'create' || drawerMode === 'edit')
+  // 面板 open 状态
+  const detailOpen = $derived(panelMode === 'detail')
+  const editOpen = $derived(panelMode === 'create' || panelMode === 'edit')
 
   // 用于 DataTable 的 columns（含自定义渲染）
   const dtColumns = $derived(
@@ -412,6 +434,7 @@
       columns={dtColumns}
       keyField={keyField}
       loading={false}
+      {density}
     >
       {#snippet actions(item)}
         {#if rowClickDetail}
@@ -451,47 +474,59 @@
       {/snippet}
     </DataTable>
 
-    <!-- 分页 -->
-    {#if data.total > data.pageSize}
-      <div class='flex justify-center p-4 border-t border-base-content/5'>
-        <Pagination
-          page={data.page}
-          total={data.total}
-          pageSize={data.pageSize}
-          size='sm'
-          showTotal
-          onchange={handlePageChange}
-        />
-      </div>
-    {/if}
+    <!-- 分页栏：始终显示，支持每页条数选择与跳页 -->
+    <div class='flex justify-center p-4 border-t border-base-content/5'>
+      <Pagination
+        page={data.page}
+        total={data.total}
+        pageSize={data.pageSize}
+        size='sm'
+        showTotal={paginationShowTotal}
+        showJumper={paginationShowJumper}
+        showSizeChanger={paginationShowSizeChanger}
+        pageSizeOptions={paginationPageSizeOptions}
+        onchange={handlePageChange}
+        onpagesizechange={handlePageSizeChange}
+      />
+    </div>
   </Card>
 </div>
 
-<!-- 详情抽屉 -->
-<CrudDetailDrawer
+<!-- 详情：抽屉或弹窗 -->
+<CrudDetailPanel
   open={detailOpen}
   item={selectedItem}
   fields={detailFields}
-  title={drawerTitle}
-  size={drawerSize}
+  title={panelTitle}
+  variant={formVariant}
+  size={formDrawerSize}
+  drawerWidth={formDrawerWidth}
+  modalSize={formModalSize}
+  modalWidth={formModalWidth}
+  modalHeight={formModalHeight}
   canEdit={canUpdate}
   onedit={switchToEdit}
-  onclose={closeDrawer}
+  onclose={closePanel}
   {detailExtra}
 />
 
-<!-- 编辑/新建抽屉 -->
-<CrudEditDrawer
+<!-- 编辑/新建：抽屉或弹窗 -->
+<CrudEditPanel
   open={editOpen}
-  mode={drawerMode === 'create' ? 'create' : 'edit'}
-  fields={drawerMode === 'create' ? createFields : editFields}
+  mode={panelMode === 'create' ? 'create' : 'edit'}
+  fields={panelMode === 'create' ? createFields : editFields}
   bind:formData
-  title={drawerTitle}
-  size={drawerSize}
+  title={panelTitle}
+  variant={formVariant}
+  size={formDrawerSize}
+  drawerWidth={formDrawerWidth}
+  modalSize={formModalSize}
+  modalWidth={formModalWidth}
+  modalHeight={formModalHeight}
   {submitting}
   error={formError}
   onsubmit={handleSubmit}
-  onclose={closeDrawer}
+  onclose={closePanel}
   {editFormExtra}
   editingItem={selectedItem}
 />

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { Size } from '../../../types.js';
+import type { CrudDensity, CrudFormConfig, CrudPaginationConfig } from './crud-types.js';
 import type { NavAdapter } from './nav-adapter.js';
 type FieldDef = {
     id: string;
@@ -84,7 +84,9 @@ type $$ComponentProps = {
         update?: boolean;
         delete?: boolean;
     };
-    drawerSize?: Size;
+    form?: CrudFormConfig;
+    pagination?: CrudPaginationConfig;
+    density?: CrudDensity;
     rowClickDetail?: boolean;
     listItemActions?: Snippet<[Record<string, unknown>]>;
     editFormExtra?: Snippet<[Record<string, unknown> | null, 'create' | 'edit']>;
@@ -108,10 +110,10 @@ type $$ComponentProps = {
  * CrudPage
  * 通用 CRUD 页面组件
  *
- * 基于声明式资源定义，自动生成列表 + 搜索过滤 + 分页 + 详情抽屉 + 编辑/新建抽屉 + 删除确认。
+ * 基于声明式资源定义，自动生成列表 + 搜索过滤 + 分页 + 详情查看 + 编辑/新建面板 + 删除确认。
  *
  * 使用 Svelte 5 Runes ($props, $state, $derived, $effect)
- * 使用 compounds 组件：Card, DataTable, PageHeader, Pagination, Drawer
+ * 使用 compounds 组件：Card, DataTable, PageHeader, Pagination, Drawer, Modal
  *
  * @example
  * <CrudPage crud={userCrud} data={data} permissions={{ create: true, update: true, delete: true }} />