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

package/README.md

@@ -267,16 +267,28 @@ components/
 | `AiTableEditor`          | AI 表格编辑器    | `columns`, `rows`, `editable`, `ondownload` |
 
 > `AiDocumentEditor` 默认只允许 Markdown 内置预览。HTML / JS / CSS 等高风险预览需要显式设置 `allowUnsafeCodePreview`，或通过 `oncoderun` 返回受控的预览结果。
+>
+> Mermaid 图表开箱即用：文档（`sourceKind='document'`）里的 ```` ```mermaid ```` 代码块在阅读态自动渲染为图表；code 模式（`sourceKind='code'` + `showCodePreviewToggle`）下可在「代码 / 预览」间切换。Mermaid 以 `securityLevel: 'strict'` 渲染为消毒后的 SVG，无需开启 `allowUnsafeCodePreview`。
 
 #### CRUD 场景（5 个）
 
 | 组件                 | 描述         | 主要属性 / 能力 |
 | -------------------- | ------------ | ---------------- |
-| `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'`（紧凑）。
 
 ## 使用示例
 
@@ -366,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/ai/AiDocumentEditor.svelte

@@ -36,6 +36,7 @@
   import { resolveDocumentMarkdownContent } from './document-download.js'
   import { renderMarkdownDocument } from './document-parse.js'
   import { parseMarkdown } from './markdown-parse.js'
+  import { renderMermaidDiagram } from './mermaid-render.js'
 
   interface SelectionToolbarPosition {
     /** 选区工具条相对滚动容器的 top 坐标。 */
@@ -471,6 +472,7 @@
 
     requestAnimationFrame(() => {
       syncCodePreviewHosts()
+      syncMermaidHosts()
       syncActiveHeadingFromScroll()
       syncPinnedTitleVisibility()
     })
@@ -909,6 +911,15 @@
       ? `<p class="hai-md-preview-desc">${escapePreviewText(result.description)}</p>`
       : ''
 
+    if (result.kind === 'mermaid') {
+      host.innerHTML = `<div class="hai-md-preview-card hai-md-preview-mermaid"><div class="hai-md-preview-head">${previewTitle}</div>${previewDesc}<div class="hai-md-mermaid hai-md-mermaid-preview"></div></div>`
+      const mermaidEl = host.querySelector<HTMLElement>('.hai-md-mermaid-preview')
+      if (mermaidEl) {
+        void renderMermaidHost(mermaidEl, result.content)
+      }
+      return
+    }
+
     if (result.kind === 'html') {
       const previewSandbox = escapePreviewAttribute(
         resolvePreviewSandbox(result.allowScripts),
@@ -931,6 +942,55 @@
     host.innerHTML = `<div class="hai-md-preview-card"><div class="hai-md-preview-head">${previewTitle}</div>${previewDesc}<pre>${escapePreviewText(result.content)}</pre></div>`
   }
 
+  /**
+   * mermaid 图表位于 `{@html}` 注入的 DOM 内部，渲染是异步的。
+   * 阅读态的图表块和 code 模式预览槽都复用这里把源码渲染为 SVG。
+   */
+  function syncMermaidHosts(): void {
+    if (!previewHost) {
+      return
+    }
+
+    const hosts = previewHost.querySelectorAll<HTMLElement>('[data-mermaid-host]')
+    for (const host of hosts) {
+      if (
+        host.dataset.mermaidStatus === 'ready'
+        || host.dataset.mermaidStatus === 'rendering'
+      ) {
+        continue
+      }
+
+      const blockId = host.dataset.mermaidHost
+      if (!blockId) {
+        continue
+      }
+
+      const block = lookupCodeBlock(blockId)
+      if (!block) {
+        continue
+      }
+
+      void renderMermaidHost(host, block.code)
+    }
+  }
+
+  /**
+   * 把单个 mermaid 源码渲染进目标节点；语法错误时展示本地化错误提示。
+   * `mermaidStatus` 既避免同一帧重复渲染，也兜住多次 effect 触发。
+   */
+  async function renderMermaidHost(host: HTMLElement, code: string): Promise<void> {
+    host.dataset.mermaidStatus = 'rendering'
+    try {
+      const svg = await renderMermaidDiagram(code)
+      host.innerHTML = svg
+      host.dataset.mermaidStatus = 'ready'
+    }
+    catch (error) {
+      host.dataset.mermaidStatus = 'error'
+      host.innerHTML = `<div class="hai-md-mermaid-error">${escapePreviewText(error instanceof Error ? error.message : uiM('markdown_mermaid_failed'))}</div>`
+    }
+  }
+
   function escapePreviewText(value: string): string {
     return value
       .replace(/&/g, '&amp;')
@@ -4418,6 +4478,48 @@
     color: oklch(var(--bc));
   }
 
+  /* mermaid 图表：阅读态自动渲染，code 预览态复用同一容器。 */
+  .hai-markdown :global(.hai-md-mermaid) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 1.25em 0;
+    padding: 1rem;
+    border-radius: 0.95rem;
+    border: 1px solid oklch(var(--bc) / 0.08);
+    background: oklch(var(--b1));
+    overflow-x: auto;
+  }
+
+  .hai-markdown :global(.hai-md-mermaid svg) {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .hai-markdown :global(.hai-md-mermaid-error) {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border-radius: 0.6rem;
+    background: oklch(var(--er, 0.6 0.2 25) / 0.08);
+    color: oklch(var(--er, 0.6 0.2 25));
+    font-size: 0.85rem;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    text-align: left;
+  }
+
+  :global(.hai-md-preview-mermaid) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  :global(.hai-md-mermaid-preview) {
+    margin: 0;
+    border: none;
+    background: transparent;
+  }
+
   .hai-markdown-code-only :global(.hai-md-code-block[data-code-view='preview'] .hai-md-preview-card) {
     display: flex;
     flex-direction: column;

package/dist/components/scenes/ai/code-preview.js

@@ -1,3 +1,4 @@
+import { isMermaidLanguage } from './mermaid-render.js';
 const HTML_DOCUMENT_PATTERN = /<\s*(?:!doctype|html|body|head|div|section|article|main|span|style|script|svg|canvas)\b/i;
 const HTML_LANGUAGE_SET = new Set(['html', 'htm', 'xhtml', 'xml', 'svg']);
 const JAVASCRIPT_LANGUAGE_SET = new Set(['javascript', 'js', 'typescript', 'ts']);
@@ -12,6 +13,14 @@ export function resolvePreviewSandbox(allowScripts) {
 }
 export function createBuiltInCodePreview(request, options) {
     const language = (request.language ?? '').trim().toLowerCase();
+    // mermaid 由 securityLevel:'strict' 渲染为消毒后的 SVG，无需 opt-in 高风险开关。
+    if (isMermaidLanguage(language)) {
+        return {
+            kind: 'mermaid',
+            title: options.previewTitle,
+            content: request.code,
+        };
+    }
     if (language === 'markdown' || language === 'md') {
         return {
             kind: 'markdown',

package/dist/components/scenes/ai/document-parse.js

@@ -6,6 +6,7 @@
 import { Marked } from 'marked';
 import { createEditorMarkdownExtensions, extractPlainTextFromTokens, } from './editor-markdown-extensions.js';
 import { highlightCode, isLanguageSupported } from './highlight.js';
+import { isMermaidLanguage } from './mermaid-render.js';
 /** Default parsing options for document mode. */
 const DEFAULT_OPTIONS = {
     enableHighlight: true,
@@ -103,6 +104,16 @@ function createRendererObject(options, state) {
         code({ text, lang }) {
             // rawLanguage is the original info string from the fence.
             const rawLanguage = lang?.trim() || '';
+            // mermaid 块在阅读态自动渲染为图表；只有 code 模式的代码/预览切换才保留源码视图。
+            if (isMermaidLanguage(rawLanguage) && !options.showCodePreviewToggle) {
+                const mermaidBlockId = `hai-md-code-${state.codeBlocks.length + 1}`;
+                state.codeBlocks.push({
+                    id: mermaidBlockId,
+                    code: text,
+                    language: rawLanguage,
+                });
+                return `<div class="hai-md-mermaid" data-mermaid-host="${escapeHtml(mermaidBlockId)}"></div>`;
+            }
             // highlightLanguage is validated against supported languages.
             const highlightLanguage = rawLanguage && isLanguageSupported(rawLanguage)
                 ? rawLanguage

package/dist/components/scenes/ai/document-types.d.ts

@@ -34,7 +34,7 @@ export interface MarkdownCodeRunRequest {
 }
 export interface MarkdownCodeRunResult {
     /** Output kind that drives preview rendering. */
-    kind?: 'text' | 'markdown' | 'html';
+    kind?: 'text' | 'markdown' | 'html' | 'mermaid';
     /** Preview output content. */
     content: string;
     /** Preview title; default text is used when omitted. */

package/dist/components/scenes/ai/mermaid-render.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @h-ai/ui — Mermaid 图表渲染助手
+ *
+ * 以懒加载方式引入 mermaid，把图表源码渲染为安全的 SVG。
+ * 使用 `securityLevel: 'strict'`，由 mermaid 自身完成消毒，避免 {@html} 注入风险。
+ */
+/**
+ * 判断 fence 语言是否为 mermaid。
+ */
+export declare function isMermaidLanguage(language: string | undefined | null): boolean;
+/**
+ * 把 mermaid 源码渲染为 SVG 字符串；语法错误时抛出由调用方兜底展示。
+ */
+export declare function renderMermaidDiagram(code: string): Promise<string>;

package/dist/components/scenes/ai/mermaid-render.js

@@ -0,0 +1,42 @@
+/**
+ * @h-ai/ui — Mermaid 图表渲染助手
+ *
+ * 以懒加载方式引入 mermaid，把图表源码渲染为安全的 SVG。
+ * 使用 `securityLevel: 'strict'`，由 mermaid 自身完成消毒，避免 {@html} 注入风险。
+ */
+/** mermaid 模块只在首次渲染时动态加载，并缓存初始化后的实例。 */
+let mermaidLoader = null;
+/** render id 需要在页面内唯一，递增计数器即可保证不冲突。 */
+let renderSeq = 0;
+/**
+ * 判断 fence 语言是否为 mermaid。
+ */
+export function isMermaidLanguage(language) {
+    return (language ?? '').trim().toLowerCase() === 'mermaid';
+}
+/**
+ * 懒加载并初始化 mermaid，多次调用复用同一实例。
+ */
+async function loadMermaid() {
+    if (!mermaidLoader) {
+        mermaidLoader = import('mermaid').then((module) => {
+            const mermaid = module.default;
+            mermaid.initialize({
+                startOnLoad: false,
+                securityLevel: 'strict',
+                theme: 'default',
+            });
+            return mermaid;
+        });
+    }
+    return mermaidLoader;
+}
+/**
+ * 把 mermaid 源码渲染为 SVG 字符串；语法错误时抛出由调用方兜底展示。
+ */
+export async function renderMermaidDiagram(code) {
+    const mermaid = await loadMermaid();
+    const renderId = `hai-mermaid-${Date.now()}-${renderSeq++}`;
+    const { svg } = await mermaid.render(renderId, code);
+    return svg;
+}

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}