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

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']>
@@ -133,9 +137,31 @@
   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')
+  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 +245,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 +289,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 +344,7 @@
       deletingItem = null
       // 如果删除的是当前详情/编辑中的项，关闭抽屉
       if (selectedItem && String(selectedItem[keyField]) === id) {
-        closeDrawer()
+        closePanel()
       }
       onafterdelete?.(deleted)
       await nav.refresh?.()
@@ -347,17 +377,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(
@@ -373,7 +403,7 @@
   )
 </script>
 
-<div class='space-y-4 {className}'>
+<div class='{pageGapClass} {className}'>
   <!-- 页面标题 -->
   <PageHeader title={resourceLabel}>
     {#snippet actions()}
@@ -381,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}
@@ -391,7 +421,7 @@
 
   <!-- 搜索 + 过滤栏 -->
   {#if searchable || filterFields.length > 0}
-    <Card>
+    <Card padding='sm' class={filterCardClass}>
       <CrudFilterBar
         {searchable}
         searchPlaceholder={searchPlaceholderText}
@@ -406,43 +436,44 @@
   {/if}
 
   <!-- 数据列表 -->
-  <Card>
+  <Card padding='none' class={listCardClass}>
     <DataTable
       data={data.items}
       columns={dtColumns}
       keyField={keyField}
       loading={false}
+      {density}
     >
       {#snippet actions(item)}
         {#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}
@@ -451,47 +482,61 @@
       {/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={paginationBarClass}>
+      <Pagination
+        page={data.page}
+        total={data.total}
+        pageSize={data.pageSize}
+        size={paginationSize}
+        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}
+  {density}
+  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}
+  {density}
   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 }} />

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

@@ -15,6 +15,36 @@ export interface CrudPermissions {
     /** 允许删除 */
     delete?: boolean;
 }
+/** 新建/编辑表单的展示形式 */
+export type CrudFormVariant = 'drawer' | 'modal';
+/** 列表显示密度 */
+export type CrudDensity = 'normal' | 'compact';
+/** 新建/编辑表单展示配置 */
+export interface CrudFormConfig {
+    /** 展示形式：'drawer'（抽屉，默认）或 'modal'（弹出窗口） */
+    variant?: CrudFormVariant;
+    /** 抽屉尺寸预设（variant='drawer'，默认 '2xl'） */
+    drawerSize?: Size;
+    /** 抽屉自定义宽度 CSS 值，优先级高于 drawerSize（variant='drawer'） */
+    drawerWidth?: string;
+    /** 弹窗尺寸预设（variant='modal'，默认 '2xl'） */
+    modalSize?: Size | 'full';
+    /** 弹窗自定义宽度 CSS 值（variant='modal'） */
+    modalWidth?: string;
+    /** 弹窗自定义高度 CSS 值（variant='modal'） */
+    modalHeight?: string;
+}
+/** 分页栏展示配置 */
+export interface CrudPaginationConfig {
+    /** 是否显示每页条数选择器（默认 true） */
+    showSizeChanger?: boolean;
+    /** 每页条数候选项（默认 [10, 20, 50, 100]） */
+    pageSizeOptions?: number[];
+    /** 是否显示跳页输入（默认 true） */
+    showJumper?: boolean;
+    /** 是否显示总数（默认 true） */
+    showTotal?: boolean;
+}
 /** CrudPage 初始列表数据（由 +page.server.ts load 返回） */
 export interface CrudPageData<T = Record<string, unknown>> {
     items: T[];
@@ -108,8 +138,12 @@ export interface CrudPageProps<T = Record<string, unknown>> {
     data: CrudPageData<T>;
     /** 权限控制 */
     permissions?: CrudPermissions;
-    /** 抽屉尺寸（默认 '2xl'） */
-    drawerSize?: Size;
+    /** 新建/编辑表单展示配置（抽屉或弹窗、尺寸、宽高） */
+    form?: CrudFormConfig;
+    /** 分页栏展示配置（每页条数选择、跳页、总数） */
+    pagination?: CrudPaginationConfig;
+    /** 列表显示密度：影响列表行、行内操作、分页与详情/编辑表单；不影响页头与筛选栏 */
+    density?: CrudDensity;
     /** 列表行点击是否打开详情（默认 true） */
     rowClickDetail?: boolean;
     /** 列表行操作按钮插槽 */

package/dist/components/scenes/crud/index.d.ts

@@ -1,13 +1,13 @@
 /**
  * @h-ai/ui — CRUD 场景组件
  *
- * 提供声明式 CRUD 页面组件，基于 kit.crud.define() 定义自动渲染列表、搜索过滤、分页、详情/编辑抽屉和删除确认。
+ * 提供声明式 CRUD 页面组件，基于 kit.crud.define() 定义自动渲染列表、搜索过滤、分页、详情/编辑面板和删除确认。
  * @module crud
  */
 export type * from './crud-types.js';
 export { default as CrudDeleteConfirm } from './CrudDeleteConfirm.svelte';
-export { default as CrudDetailDrawer } from './CrudDetailDrawer.svelte';
-export { default as CrudEditDrawer } from './CrudEditDrawer.svelte';
+export { default as CrudDetailPanel } from './CrudDetailPanel.svelte';
+export { default as CrudEditPanel } from './CrudEditPanel.svelte';
 export { default as CrudFilterBar } from './CrudFilterBar.svelte';
 export { default as CrudPage } from './CrudPage.svelte';
 export type { NavAdapter } from './nav-adapter.js';

package/dist/components/scenes/crud/index.js

@@ -1,12 +1,12 @@
 /**
  * @h-ai/ui — CRUD 场景组件
  *
- * 提供声明式 CRUD 页面组件，基于 kit.crud.define() 定义自动渲染列表、搜索过滤、分页、详情/编辑抽屉和删除确认。
+ * 提供声明式 CRUD 页面组件，基于 kit.crud.define() 定义自动渲染列表、搜索过滤、分页、详情/编辑面板和删除确认。
  * @module crud
  */
 export { default as CrudDeleteConfirm } from './CrudDeleteConfirm.svelte';
-export { default as CrudDetailDrawer } from './CrudDetailDrawer.svelte';
-export { default as CrudEditDrawer } from './CrudEditDrawer.svelte';
+export { default as CrudDetailPanel } from './CrudDetailPanel.svelte';
+export { default as CrudEditPanel } from './CrudEditPanel.svelte';
 export { default as CrudFilterBar } from './CrudFilterBar.svelte';
 export { default as CrudPage } from './CrudPage.svelte';
 export { createBrowserNavAdapter } from './nav-adapter.js';

package/dist/messages/en-US.json

@@ -156,9 +156,10 @@
   "feedback_type_feature": "Feature Request",
   "feedback_type_question": "Question",
   "feedback_type_other": "Other",
-  "pagination_total": "Total {count}",
+  "pagination_total": "{count} items total",
   "pagination_jump_to": "Go to",
   "pagination_page": "page",
+  "pagination_page_size": "{size} / page",
   "severity_critical": "Critical",
   "severity_high": "High",
   "severity_medium": "Medium",
@@ -274,7 +275,7 @@
   "crud_delete_failed": "Delete failed",
   "crud_network_error": "Network error, please try again later",
   "crud_filter_all": "All",
-  "crud_total": "Total {count}",
+  "crud_total": "{count} items total",
   "crud_detail_empty": "-",
   "crud_field_required": "This field is required"
 }

package/dist/messages/zh-CN.json

@@ -156,9 +156,10 @@
   "feedback_type_feature": "功能建议",
   "feedback_type_question": "问题咨询",
   "feedback_type_other": "其他",
-  "pagination_total": "共 {count}",
+  "pagination_total": "共 {count} 条",
   "pagination_jump_to": "跳转到",
   "pagination_page": "页",
+  "pagination_page_size": "{size} 条/页",
   "severity_critical": "严重",
   "severity_high": "高",
   "severity_medium": "中",
@@ -274,7 +275,7 @@
   "crud_delete_failed": "删除失败",
   "crud_network_error": "网络错误，请稍后重试",
   "crud_filter_all": "全部",
-  "crud_total": "共 {count}",
+  "crud_total": "共 {count} 条",
   "crud_detail_empty": "-",
   "crud_field_required": "此字段为必填项"
 }

package/dist/types.d.ts

@@ -475,6 +475,8 @@ export interface DrawerProps {
     position?: Position;
     /** 尺寸 */
     size?: Size;
+    /** 自定义宽度（任意合法 CSS 宽度值，优先级高于 size 预设） */
+    width?: string;
     /** 是否可通过点击遮罩关闭 */
     closeOnBackdrop?: boolean;
     /** 是否显示关闭按钮 */
@@ -585,6 +587,10 @@ export interface PaginationProps {
     showTotal?: boolean;
     /** 是否显示跳转 */
     showJumper?: boolean;
+    /** 是否显示每页条数选择器 */
+    showSizeChanger?: boolean;
+    /** 每页条数候选项（配合 showSizeChanger，默认 [10, 20, 50, 100]） */
+    pageSizeOptions?: number[];
     /** i18n 文案配置 */
     labels?: {
         /** 总数文案，{count} 会被替换为实际数字 */
@@ -593,11 +599,15 @@ export interface PaginationProps {
         jumpTo?: string;
         /** 页 */
         page?: string;
+        /** 每页条数文案，{size} 会被替换为实际数字 */
+        pageSize?: string;
     };
     /** 自定义类名 */
     class?: string;
     /** 页码变化事件 */
     onchange?: (page: number) => void;
+    /** 每页条数变化事件 */
+    onpagesizechange?: (pageSize: number) => void;
 }
 /**
  * 面包屑项

package/package.json

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