@h-ai/ui 0.1.0-alpha.45 → 0.1.0-alpha.47

package/README.md

@@ -172,7 +172,7 @@ components/
 | 组件      | 描述   | 主要属性                                                |
 | --------- | ------ | ------------------------------------------------------- |
 | `Modal`   | 模态框 | `open`, `title`, `size`, `radius`, `bodyOverflow`, `showClose` |
-| `Drawer`  | 抽屉   | `open`, `position`, `title`, `size`                     |
+| `Drawer`  | 抽屉   | `open`, `position`, `title`, `size`, `width`, `resizable`, `widthStorageKey` |
 | `Confirm` | 确认框 | `open`, `title`, `message`, `variant`, `onconfirm`      |
 | `Popover` | 弹出层 | `open`, `position`, `trigger`, `offset`                 |
 
@@ -334,13 +334,13 @@ components/
 
 | 组件                 | 描述         | 主要属性 / 能力 |
 | -------------------- | ------------ | ---------------- |
-| `CrudPage`           | CRUD 主页面  | `crud`, `data`, `permissions`, `form`, `pagination`, `density`, `showHeader`, `toolbarStyle`, `toolbarLeading`, `toolbarActions`, `card`, `tableCell`, `onrowclick`, `sortableColumns`, `nav` |
+| `CrudPage`           | CRUD 主页面  | `crud`, `data`, `permissions`, `form`, `pagination`, `density`, `detailColumns`, `showHeader`, `toolbarStyle`, `toolbarLeading`, `toolbarActions`, `card`, `tableCell`, `onrowclick`, `sortableColumns`, `nav` |
 | `CrudFilterBar`      | 过滤工具栏（搜索 + 多类型过滤 + 重置） | `filterFields`, `searchValue`, `onsearch`, `onfilterchange`, `onreset` |
 | `CrudDetailPanel`    | 详情面板（抽屉/弹窗） | `open`, `item`, `fields`, `variant`, `drawerWidth`, `modalSize` |
 | `CrudEditPanel`      | 编辑面板（抽屉/弹窗） | `open`, `fields`, `variant`, `drawerWidth`, `modalSize`, `onsubmit` |
 | `CrudDeleteConfirm`  | 删除确认框   | `open`, `loading`, `onconfirm` |
 
-> `CrudPage` 默认使用 `TableToolbar` 图标弹层工具栏，也可通过 `toolbarStyle='filter-bar'` 切回平铺筛选栏；`toolbarLeading` 用于注入左侧标题或说明，配合 `showHeader={false}` 可避免重复标题；`toolbarActions` 注入右侧业务操作，`card` 插槽可将列表项替换为卡片视图，`tableCell` 可按行和列 key 渲染交互式单元格内容（例如 Tooltip），`sortableColumns` 控制服务端排序字段。过滤工具栏支持 `select`、`boolean`、`number`、`date`、`date-range`、`text`。
+> `CrudPage` 默认使用 `TableToolbar` 图标弹层工具栏，也可通过 `toolbarStyle='filter-bar'` 切回平铺筛选栏；`detailColumns={['title']}` 可把标题等指定列绑定为详情入口；`toolbarLeading` 用于注入左侧标题或说明，配合 `showHeader={false}` 可避免重复标题；`toolbarActions` 注入右侧业务操作，`card` 插槽可将列表项替换为卡片视图，`tableCell` 可按行和列 key 渲染交互式单元格内容（例如 Tooltip），`sortableColumns` 控制服务端排序字段。过滤工具栏支持 `select`、`boolean`、`number`、`date`、`date-range`、`text`。
 >
 > 页面根容器会占满父级可用高度。表格无论是否有数据都会撑满剩余空间，仅数据区域滚动；表头固定在数据区顶部，分页栏固定在列表卡片底部。
 >
@@ -355,7 +355,7 @@ components/
 > `CrudPage` 通过 `form` 配置新建/编辑的展示形式：
 >
 > - `form.variant`：`'drawer'`（抽屉，默认）或 `'modal'`（弹出窗口）。
-> - 抽屉：`form.drawerSize` 选预设尺寸，`form.drawerWidth` 传任意 CSS 宽度（优先级更高）。
+> - 抽屉：`form.drawerSize` 选预设尺寸，`form.drawerWidth` 传任意 CSS 宽度（优先级更高）；默认可拖动左侧边缘调整宽度，并按资源记忆，`form.drawerResizable=false` 可关闭。
 > - 弹窗：`form.modalSize` 选预设尺寸，`form.modalWidth` / `form.modalHeight` 传任意 CSS 尺寸。
 >
 > `pagination` 配置分页栏（始终显示）：`showSizeChanger`、`pageSizeOptions`、`showJumper`、`showTotal` 默认开启；紧凑视图可用 `showPageInfo` 关闭页码文案、`showFirstLast` 关闭首页 / 末页按钮。
@@ -488,12 +488,13 @@ components/
   form={{ variant: 'modal', modalSize: 'lg' }}
   pagination={{ showSizeChanger: true, showJumper: true, pageSizeOptions: [10, 20, 50] }}
   density='compact'
+  detailColumns={['name']}
   sortableColumns={[{ key: 'createdAt', label: '创建时间' }]}
   {nav}
 />
 ```
 
-> 抽屉形式可改用 `form={{ variant: 'drawer', drawerWidth: '40rem' }}`。
+> 抽屉形式可改用 `form={{ variant: 'drawer', drawerWidth: '40rem' }}`；用户拖动后的宽度会覆盖初始宽度并按资源记忆。
 
 ### 登录页面
 

package/dist/components/compounds/DataTable.svelte

@@ -8,6 +8,7 @@
   @prop {Snippet<[T, string]>} cell - 单元格内容插槽
   @prop {Snippet<[T]>} actions - 操作按钮插槽
   @prop {(item: T) => void} onrowclick - 行点击回调
+  @prop {(item: T) => void} columns[].onclick - 指定列的单元格点击回调
   @prop {Snippet} empty - 空状态插槽
   @prop {boolean} loading - 是否加载中
   @prop {boolean} striped - 是否斑马纹
@@ -54,7 +55,7 @@
     ...restProps
   }: {
     data: T[]
-    columns: { key: keyof T | string, label: string, width?: string, align?: 'left' | 'center' | 'right', sortable?: boolean, render?: (item: T) => string }[]
+    columns: { key: keyof T | string, label: string, width?: string, align?: 'left' | 'center' | 'right', sortable?: boolean, render?: (item: T) => string, onclick?: (item: T) => void }[]
     keyField: keyof T
     /** 自定义单元格内容；参数依次为行记录和列 key。 */
     cell?: Snippet<[T, string]>
@@ -91,6 +92,8 @@
     sortable?: boolean
     /** 自定义单元格格式化函数。 */
     render?: (item: T) => string
+    /** 点击当前列单元格时的回调。 */
+    onclick?: (item: T) => void
   }
 
   // ─── 排序状态 ───
@@ -341,7 +344,23 @@
           <tr class='{rowClass} {onrowclick ? 'cursor-pointer' : ''}' onclick={() => onrowclick?.(item)}>
             {#each columns as col (String(col.key))}
               <td style={getColumnStyle(col)} class={getAlignClass(col.align)}>
-                {#if cell}
+                {#if col.onclick}
+                  <button
+                    type='button'
+                    class='block min-w-0 max-w-full cursor-pointer rounded-sm text-inherit hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
+                    style={getContentStyle(col)}
+                    onclick={(event) => {
+                      event.stopPropagation()
+                      col.onclick?.(item)
+                    }}
+                  >
+                    {#if cell}
+                      {@render cell(item, String(col.key))}
+                    {:else}
+                      <span class='block min-w-0 truncate' title={getValue(item, col)}>{getValue(item, col)}</span>
+                    {/if}
+                  </button>
+                {:else if cell}
                   <div class='min-w-0' style={getContentStyle(col)}>
                     {@render cell(item, String(col.key))}
                   </div>

package/dist/components/compounds/DataTable.svelte.d.ts

@@ -10,6 +10,7 @@ declare function $$render<T>(): {
             align?: "left" | "center" | "right";
             sortable?: boolean;
             render?: (item: T) => string;
+            onclick?: (item: T) => void;
         }[];
         keyField: keyof T;
         /** 自定义单元格内容；参数依次为行记录和列 key。 */
@@ -59,6 +60,7 @@ interface $$IsomorphicComponent {
  * @prop {Snippet<[T, string]>} cell - 单元格内容插槽
  * @prop {Snippet<[T]>} actions - 操作按钮插槽
  * @prop {(item: T) => void} onrowclick - 行点击回调
+ * @prop {(item: T) => void} columns[].onclick - 指定列的单元格点击回调
  * @prop {Snippet} empty - 空状态插槽
  * @prop {boolean} loading - 是否加载中
  * @prop {boolean} striped - 是否斑马纹

package/dist/components/compounds/Drawer.svelte

@@ -10,6 +10,8 @@
 -->
 <script lang='ts'>
   import type { DataAttributes, DrawerProps } from '../../types.js'
+  import { onDestroy, onMount } from 'svelte'
+  import { readStoredValue, writeStoredValue } from '../../internal/browser-safety.js'
   import { uiM } from '../../messages.js'
   import { cn, generateId, getDataAttributes } from '../../utils.js'
   import IconButton from '../primitives/IconButton.svelte'
@@ -21,6 +23,8 @@
     position = 'right',
     size = 'md',
     width,
+    resizable = false,
+    widthStorageKey,
     closeOnBackdrop = true,
     showClose = true,
     class: className = '',
@@ -31,6 +35,16 @@
 
   const dataAttributes = $derived(getDataAttributes(restProps))
   const id = generateId('drawer')
+  /** 用户拖动后的像素宽度；优先于 width 与 size。 */
+  let resizedWidth = $state<number | null>(null)
+  /** 与响应式渲染解耦的同步宽度，确保 mouseup 时持久化最后一次 mousemove 的值。 */
+  let resizeWidthForStorage: number | null = null
+  /** 当前拖动起点的指针横坐标。 */
+  let resizeStartX = 0
+  /** 当前拖动起点的抽屉宽度。 */
+  let resizeStartWidth = 0
+  /** 拖动期间临时保存页面原有的文本选择样式。 */
+  let previousUserSelect = ''
 
   const sizeMap = {
     'xs': 'w-60',
@@ -45,7 +59,15 @@
 
   // 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 widthStyle = $derived(
+    resizedWidth !== null
+      ? `width: ${resizedWidth}px; max-width: calc(100vw - 1rem)`
+      : hasCustomWidth
+      ? `width: ${width!.trim()}; max-width: 100vw`
+      : undefined,
+  )
+  /** 纵向抽屉没有横向宽度拖动语义。 */
+  const canResize = $derived(resizable && (position === 'left' || position === 'right'))
 
   const drawerClass = $derived(
     cn(
@@ -62,7 +84,7 @@
 
   const contentClass = $derived(
     cn(
-      'menu bg-base-200 text-base-content min-h-full p-4',
+      'menu relative z-10 bg-base-200 text-base-content min-h-full p-4',
       !hasCustomWidth && sizeMap[size],
       className,
     ),
@@ -78,6 +100,92 @@
       handleClose()
     }
   }
+
+  /** 将宽度限制在可视区域内，并保留移动端可关闭抽屉的边距。 */
+  function clampWidth(nextWidth: number): number {
+    const maximum = Math.max(0, globalThis.innerWidth - 16)
+    const minimum = Math.min(280, maximum)
+    return Math.round(Math.min(Math.max(nextWidth, minimum), maximum))
+  }
+
+  /** 根据抽屉方向计算拖动宽度。 */
+  function handleResizeMove(event: MouseEvent) {
+    const delta = position === 'right'
+      ? resizeStartX - event.clientX
+      : event.clientX - resizeStartX
+    const nextWidth = clampWidth(resizeStartWidth + delta)
+    resizeWidthForStorage = nextWidth
+    resizedWidth = nextWidth
+  }
+
+  /** 结束拖动并在配置了 key 时记忆最终宽度。 */
+  function finishResize() {
+    if (typeof document === 'undefined')
+      return
+
+    globalThis.removeEventListener('mousemove', handleResizeMove)
+    globalThis.removeEventListener('mouseup', finishResize)
+    document.documentElement.style.userSelect = previousUserSelect
+    if (widthStorageKey && resizeWidthForStorage !== null) {
+      writeStoredValue(widthStorageKey, String(resizeWidthForStorage))
+    }
+  }
+
+  /** 从抽屉可见边缘开始宽度拖动。 */
+  function startResize(event: MouseEvent) {
+    if (!canResize)
+      return
+
+    const drawer = event.currentTarget instanceof HTMLElement
+      ? event.currentTarget.parentElement
+      : null
+    if (!drawer)
+      return
+
+    event.preventDefault()
+    resizeStartX = event.clientX
+    resizeStartWidth = drawer.getBoundingClientRect().width
+    resizeWidthForStorage = resizeStartWidth
+    previousUserSelect = document.documentElement.style.userSelect
+    document.documentElement.style.userSelect = 'none'
+    globalThis.addEventListener('mousemove', handleResizeMove)
+    globalThis.addEventListener('mouseup', finishResize, { once: true })
+  }
+
+  /** 键盘左右键以固定步长调整宽度，并立即持久化。 */
+  function handleResizeKeydown(event: KeyboardEvent) {
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')
+      return
+
+    const drawer = event.currentTarget instanceof HTMLElement
+      ? event.currentTarget.parentElement
+      : null
+    if (!drawer)
+      return
+
+    event.preventDefault()
+    const edgeDelta = event.key === 'ArrowLeft' ? -16 : 16
+    const nextWidth = clampWidth(drawer.getBoundingClientRect().width + (position === 'right' ? -edgeDelta : edgeDelta))
+    resizeWidthForStorage = nextWidth
+    resizedWidth = nextWidth
+    if (widthStorageKey) {
+      writeStoredValue(widthStorageKey, String(nextWidth))
+    }
+  }
+
+  onMount(() => {
+    if (!canResize || !widthStorageKey)
+      return
+
+    const storedWidth = Number(readStoredValue(widthStorageKey))
+    if (Number.isFinite(storedWidth) && storedWidth > 0) {
+      const nextWidth = clampWidth(storedWidth)
+      resizeWidthForStorage = nextWidth
+      resizedWidth = nextWidth
+    }
+  })
+
+  onDestroy(finishResize)
 </script>
 
 <div {...dataAttributes} class={drawerClass}>
@@ -94,6 +202,17 @@
     ></div>
 
     <div class={contentClass} style={widthStyle}>
+      {#if canResize}
+        <button
+          type='button'
+          aria-label={uiM('drawer_resize')}
+          data-drawer-resize-handle
+          class='absolute inset-y-0 z-20 hidden w-2 cursor-col-resize touch-none border-0 bg-transparent p-0 md:block {position === 'right' ? 'left-0' : 'right-0'}'
+          onmousedown={startResize}
+          onkeydown={handleResizeKeydown}
+        ></button>
+      {/if}
+
       <div class='flex items-center justify-between mb-4'>
         {#if title}
           <h3 class='text-lg font-bold'>{title}</h3>

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

@@ -35,6 +35,8 @@
     variant = 'drawer' as CrudFormVariant,
     size = '2xl' as Size,
     drawerWidth,
+    drawerResizable = true,
+    drawerWidthStorageKey,
     modalSize = '2xl' as Size | 'full',
     modalWidth,
     modalHeight,
@@ -53,6 +55,8 @@
     variant?: CrudFormVariant
     size?: Size
     drawerWidth?: string
+    drawerResizable?: boolean
+    drawerWidthStorageKey?: string
     modalSize?: Size | 'full'
     modalWidth?: string
     modalHeight?: string
@@ -195,7 +199,17 @@
     {/snippet}
   </Modal>
 {:else}
-  <Drawer bind:open {title} class={className} position='right' {size} width={drawerWidth} onclose={handleClose}>
+  <Drawer
+    bind:open
+    {title}
+    class={className}
+    position='right'
+    {size}
+    width={drawerWidth}
+    resizable={drawerResizable}
+    widthStorageKey={drawerWidthStorageKey}
+    onclose={handleClose}
+  >
     {#if item}
       <div class={drawerBodyClass}>
         {@render detailBody()}

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

@@ -25,6 +25,8 @@ type $$ComponentProps = {
     variant?: CrudFormVariant;
     size?: Size;
     drawerWidth?: string;
+    drawerResizable?: boolean;
+    drawerWidthStorageKey?: string;
     modalSize?: Size | 'full';
     modalWidth?: string;
     modalHeight?: string;

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

@@ -41,6 +41,8 @@
     variant = 'drawer' as CrudFormVariant,
     size = '2xl' as Size,
     drawerWidth,
+    drawerResizable = true,
+    drawerWidthStorageKey,
     modalSize = '2xl' as Size | 'full',
     modalWidth,
     modalHeight,
@@ -62,6 +64,8 @@
     variant?: CrudFormVariant
     size?: Size
     drawerWidth?: string
+    drawerResizable?: boolean
+    drawerWidthStorageKey?: string
     modalSize?: Size | 'full'
     modalWidth?: string
     modalHeight?: string
@@ -273,7 +277,18 @@
     {/snippet}
   </Modal>
 {:else}
-  <Drawer bind:open {title} class={className} position='right' {size} width={drawerWidth} onclose={handleClose} closeOnBackdrop={false}>
+  <Drawer
+    bind:open
+    {title}
+    class={className}
+    position='right'
+    {size}
+    width={drawerWidth}
+    resizable={drawerResizable}
+    widthStorageKey={drawerWidthStorageKey}
+    onclose={handleClose}
+    closeOnBackdrop={false}
+  >
     <form onsubmit={handleSubmit} class={drawerFormClass}>
       {@render formFields()}
     </form>

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

@@ -33,6 +33,8 @@ type $$ComponentProps = {
     variant?: CrudFormVariant;
     size?: Size;
     drawerWidth?: string;
+    drawerResizable?: boolean;
+    drawerWidthStorageKey?: string;
     modalSize?: Size | 'full';
     modalWidth?: string;
     modalHeight?: string;

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

@@ -140,6 +140,7 @@
     pagination = {},
     density = 'normal',
     rowClickDetail = true,
+    detailColumns = [],
     showHeader = true,
     listItemActions,
     tableCell,
@@ -175,6 +176,8 @@
     density?: CrudDensity
     /** 点击详情图标是否打开详情面板。 */
     rowClickDetail?: boolean
+    /** 点击后打开详情的列 key。 */
+    detailColumns?: string[]
     /** 是否显示默认页面标题栏；使用 toolbarLeading 承载标题时可设为 false。 */
     showHeader?: boolean
     /** 每行额外操作按钮插槽。 */
@@ -265,6 +268,10 @@
   const formDrawerSize = $derived(form.drawerSize ?? '2xl')
   /** 抽屉自定义宽度。 */
   const formDrawerWidth = $derived(form.drawerWidth)
+  /** 是否允许拖动并记忆抽屉宽度。 */
+  const formDrawerResizable = $derived(form.drawerResizable !== false)
+  /** 同一资源的详情与编辑抽屉共享宽度记忆。 */
+  const formDrawerWidthStorageKey = $derived(`hai-ui:crud:${crud.resource.name}:drawer-width`)
   /** 弹窗尺寸预设。 */
   const formModalSize = $derived(form.modalSize ?? '2xl')
   /** 弹窗自定义宽度。 */
@@ -622,6 +629,9 @@
       render: col.render
         ? (item: Record<string, unknown>) => col.render!(item)
         : undefined,
+      onclick: detailColumns.includes(col.key)
+        ? (item: Record<string, unknown>) => openDetail(item)
+        : undefined,
     })),
   )
 </script>
@@ -795,6 +805,8 @@
   variant={formVariant}
   size={formDrawerSize}
   drawerWidth={formDrawerWidth}
+  drawerResizable={formDrawerResizable}
+  drawerWidthStorageKey={formDrawerWidthStorageKey}
   modalSize={formModalSize}
   modalWidth={formModalWidth}
   modalHeight={formModalHeight}
@@ -815,6 +827,8 @@
   variant={formVariant}
   size={formDrawerSize}
   drawerWidth={formDrawerWidth}
+  drawerResizable={formDrawerResizable}
+  drawerWidthStorageKey={formDrawerWidthStorageKey}
   modalSize={formModalSize}
   modalWidth={formModalWidth}
   modalHeight={formModalHeight}

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

@@ -142,6 +142,8 @@ type $$ComponentProps = {
     density?: CrudDensity;
     /** 点击详情图标是否打开详情面板。 */
     rowClickDetail?: boolean;
+    /** 点击后打开详情的列 key。 */
+    detailColumns?: string[];
     /** 是否显示默认页面标题栏；使用 toolbarLeading 承载标题时可设为 false。 */
     showHeader?: boolean;
     /** 每行额外操作按钮插槽。 */

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

@@ -27,6 +27,8 @@ export interface CrudFormConfig {
     drawerSize?: Size;
     /** 抽屉自定义宽度 CSS 值，优先级高于 drawerSize（variant='drawer'） */
     drawerWidth?: string;
+    /** 是否允许拖动并按资源记忆抽屉宽度（variant='drawer'，默认 true） */
+    drawerResizable?: boolean;
     /** 弹窗尺寸预设（variant='modal'，默认 '2xl'） */
     modalSize?: Size | 'full';
     /** 弹窗自定义宽度 CSS 值（variant='modal'） */
@@ -156,6 +158,8 @@ export interface CrudPageProps<T = Record<string, unknown>> extends DataAttribut
     density?: CrudDensity;
     /** 列表行点击是否打开详情（默认 true） */
     rowClickDetail?: boolean;
+    /** 点击后打开详情的列 key；只让标题等主标识列可点击时使用 */
+    detailColumns?: string[];
     /** 是否显示默认页面标题栏；需要把标题放进工具栏左侧时设为 false。 */
     showHeader?: boolean;
     /** 列表行操作按钮插槽 */

package/dist/messages/en-US.json

@@ -37,6 +37,7 @@
   "common_close": "Close",
   "modal_close": "Close modal",
   "drawer_close": "Close sidebar",
+  "drawer_resize": "Resize drawer",
   "toast_dismiss": "Dismiss",
   "language_switch_label": "Switch language",
   "theme_selector_label": "Select theme",

package/dist/messages/zh-CN.json

@@ -37,6 +37,7 @@
   "common_close": "关闭",
   "modal_close": "关闭模态框",
   "drawer_close": "关闭侧边栏",
+  "drawer_resize": "调整抽屉宽度",
   "toast_dismiss": "关闭",
   "language_switch_label": "切换语言",
   "theme_selector_label": "选择主题",

package/dist/types.d.ts

@@ -487,6 +487,10 @@ export interface DrawerProps extends DataAttributes {
     size?: Size;
     /** 自定义宽度（任意合法 CSS 宽度值，优先级高于 size 预设） */
     width?: string;
+    /** 是否允许拖动抽屉边缘调整宽度；仅 left/right 位置生效 */
+    resizable?: boolean;
+    /** 宽度持久化 key；设置后会从 localStorage 恢复并记忆拖动后的像素宽度 */
+    widthStorageKey?: string;
     /** 是否可通过点击遮罩关闭 */
     closeOnBackdrop?: boolean;
     /** 是否显示关闭按钮 */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.45",
+  "version": "0.1.0-alpha.47",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -52,7 +52,7 @@
     "mermaid": "^11.12.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
-    "@h-ai/core": "0.1.0-alpha.45"
+    "@h-ai/core": "0.1.0-alpha.47"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",