niuma-ui 1.1.0 → 1.1.3

package/CHANGELOG.md

@@ -6,6 +6,30 @@
 
 ## [Unreleased]
 
+## [1.1.3] - 2026-08-14
+
+### 新增
+
+- **RsDrawer 内边缘拖拽缩放**：默认 `resizable`（`size=full` 除外）。左右改宽、上下改高，可配 `minSize` / `maxSize`，支持键盘方向键。
+
+### 修复
+
+- **RsDrawer 贴边定位**：覆盖 Reka DialogContent 默认居中，避免抽屉被压成标题条。
+
+## [1.1.2] - 2026-08-14
+
+### 修复
+
+- **RsIcon 在 pnpm/npm 宿主中为空**：不再用 `import.meta.glob` 扫 `node_modules/@lucide/vue`（该路径在 pnpm 虚拟 store 下不存在）。改为 `import * as LucideVue from '@lucide/vue'`，走正常包解析，宿主安装 `niuma-ui` 即可使用图标。
+
+## [1.1.1] - 2026-08-14
+
+### 修复
+
+- `RsTableCellEditor`：单元格 Select 的 `update:model-value` 对齐 `RsSelectModelValue`（含 number / 多选 / labelInValue）。
+- `useRsTableCore`：`compact` / `size` 为 undefined 时回退默认值，避免宿主 `vue-tsc` 失败。
+- `useRsTableHeadless`：`rowKey` 区分无参 getter 与行访问器，避免误当成需传入 row 的函数调用。
+
 ## [1.1.0] - 2026-08-14
 
 ### 新增
@@ -98,7 +122,10 @@
 
 - 1.0 之前的私有 tag（如 `v0.1.0`）仅作历史记录；新接入请依赖 `v1.0.0` 及之后版本。
 
-[Unreleased]: https://github.com/Blair-Shang/niuma-ui/compare/v1.1.0...HEAD
+[Unreleased]: https://github.com/Blair-Shang/niuma-ui/compare/v1.1.3...HEAD
+[1.1.3]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.3
+[1.1.2]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.2
+[1.1.1]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.1
 [1.1.0]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.0
 [1.0.2]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.0.2
 [1.0.1]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "niuma-ui",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "license": "Apache-2.0",
   "type": "module",
   "description": "Vue 3 设计系统与 Rs* 组件库（--rs-* token）",

package/src/__tests__/RsDrawer.spec.ts

@@ -235,4 +235,52 @@ describe('RsDrawer', () => {
     expect(closeBtn.querySelector('.rs-btn__tooltip')?.textContent).toContain('Close')
     wrapper.unmount()
   })
+
+  it('renders an inner-edge resize handle by default', async () => {
+    const wrapper = mount(RsDrawer, {
+      props: { open: true, title: '帮助' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const handle = document.body.querySelector('.rs-drawer__resize') as HTMLElement | null
+    expect(handle).toBeTruthy()
+    expect(handle?.getAttribute('aria-orientation')).toBe('vertical')
+    wrapper.unmount()
+  })
+
+  it('hides the resize handle when size is full or resizable is false', async () => {
+    const full = mount(RsDrawer, {
+      props: { open: true, title: '全屏', size: 'full' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-drawer__resize')).toBeNull()
+    full.unmount()
+
+    const locked = mount(RsDrawer, {
+      props: { open: true, title: '固定', resizable: false },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-drawer__resize')).toBeNull()
+    locked.unmount()
+  })
+
+  it('widens a right drawer with ArrowLeft on the resize handle', async () => {
+    const wrapper = mount(RsDrawer, {
+      props: { open: true, title: '缩放', width: 360 },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-drawer__content') as HTMLElement
+    Object.defineProperty(content, 'getBoundingClientRect', {
+      configurable: true,
+      value: () => ({ width: 360, height: 800, top: 0, left: 800, right: 1160, bottom: 800, x: 800, y: 0, toJSON: () => ({}) }),
+    })
+    const handle = document.body.querySelector('.rs-drawer__resize') as HTMLElement
+    await handle.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }))
+    await flushPromises()
+    expect(content.style.width).toBe('376px')
+    wrapper.unmount()
+  })
 })

package/src/components/RsDrawer.vue

@@ -14,6 +14,10 @@ import {
   resolveDrawerOverlayStyle,
   resolveRsDrawerDimensionCss,
   resolveRsDrawerSizeCss,
+  resolveRsDrawerSizePx,
+  clampRsDrawerSize,
+  RS_DRAWER_MIN_SIZE_PX,
+  RS_DRAWER_MAX_VIEWPORT_RATIO,
   runRsDrawerBeforeClose,
   type RsDrawerBeforeClose,
   type RsDrawerCloseReason,
@@ -38,6 +42,15 @@ const props = withDefaults(
     width?: RsDrawerDimension
     /** 上下抽屉自定义高度（覆盖 size） */
     height?: RsDrawerDimension
+    /**
+     * 内边缘拖拽改尺寸。full 始终不可拖。
+     * 控制台 / 帮助栏等侧栏场景建议保持开启。
+     */
+    resizable?: boolean
+    /** 可拖下限（px / CSS）；默认 256px */
+    minSize?: RsDrawerDimension
+    /** 可拖上限（px / CSS）；默认视口 90% */
+    maxSize?: RsDrawerDimension
     /**
      * 是否模态：锁焦点并拦截背后交互。
      * 未显式传入时跟随 showOverlay（有遮罩=模态，无遮罩=非模态）。
@@ -78,6 +91,7 @@ const props = withDefaults(
     showClose: true,
     closeOnOverlayClick: true,
     closeOnEsc: true,
+    resizable: true,
   },
 )
 
@@ -85,6 +99,10 @@ const emit = defineEmits<{
   openChange: [open: boolean]
   afterOpen: []
   afterClose: [reason: RsDrawerCloseReason]
+  /** 拖拽过程与结束都会抛出当前像素尺寸 */
+  resize: [size: number]
+  'update:width': [value: number]
+  'update:height': [value: number]
 }>()
 
 const { t } = useRsI18n()
@@ -102,8 +120,15 @@ const overlayStyle = computed(() =>
 )
 
 const isHorizontal = computed(() => props.side === 'left' || props.side === 'right')
+const enableResizable = computed(() => props.resizable && props.size !== 'full')
+
+/** 本次打开后拖拽得到的像素尺寸；关闭时清空，回到 size/width/height */
+const liveSizePx = ref<number | undefined>(undefined)
+const resizing = ref(false)
+const contentRef = ref<{ $el?: HTMLElement } | HTMLElement | null>(null)
 
 const panelSizeCss = computed(() => {
+  if (liveSizePx.value != null) return `${liveSizePx.value}px`
   if (isHorizontal.value) {
     return (
       resolveRsDrawerDimensionCss(props.width) ??
@@ -119,9 +144,50 @@ const panelSizeCss = computed(() => {
 })
 
 const contentStyle = computed(() => {
+  const style: Record<string, string> = {}
   const size = panelSizeCss.value
-  if (!size || props.size === 'full') return undefined
-  return { '--rs-drawer-panel-size': size } as Record<string, string>
+  if (size && props.size !== 'full') {
+    style['--rs-drawer-panel-size'] = size
+  }
+  if (liveSizePx.value != null && props.size !== 'full') {
+    if (isHorizontal.value) style.width = `${liveSizePx.value}px`
+    else style.height = `${liveSizePx.value}px`
+  }
+  // Reka DialogContent 默认居中；抽屉必须钉在对应边缘，否则只剩一条标题。
+  if (props.side === 'right') {
+    style.left = 'auto'
+    style.right = '0'
+    style.top = '0'
+    style.bottom = '0'
+    style.height = '100%'
+    style.maxHeight = 'none'
+    style.transform = 'none'
+  } else if (props.side === 'left') {
+    style.left = '0'
+    style.right = 'auto'
+    style.top = '0'
+    style.bottom = '0'
+    style.height = '100%'
+    style.maxHeight = 'none'
+    style.transform = 'none'
+  } else if (props.side === 'top') {
+    style.left = '0'
+    style.right = '0'
+    style.top = '0'
+    style.bottom = 'auto'
+    style.width = '100%'
+    style.maxWidth = 'none'
+    style.transform = 'none'
+  } else if (props.side === 'bottom') {
+    style.left = '0'
+    style.right = '0'
+    style.top = 'auto'
+    style.bottom = '0'
+    style.width = '100%'
+    style.maxWidth = 'none'
+    style.transform = 'none'
+  }
+  return Object.keys(style).length ? style : undefined
 })
 
 const contentClass = computed(() => [
@@ -130,6 +196,8 @@ const contentClass = computed(() => [
   {
     'rs-drawer__content--contained': contained.value,
     'rs-drawer__content--custom-size': Boolean(panelSizeCss.value) && props.size !== 'full',
+    'rs-drawer__content--resizable': enableResizable.value,
+    'rs-drawer__content--resizing': resizing.value,
   },
 ])
 
@@ -238,6 +306,8 @@ watch(open, (isOpen, wasOpen) => {
     return
   }
   if (!isOpen && wasOpen) {
+    liveSizePx.value = undefined
+    stopResize()
     releaseOutsideSuppress()
     clearAfterOpenTimer()
     emit('openChange', false)
@@ -246,6 +316,7 @@ watch(open, (isOpen, wasOpen) => {
 })
 
 onBeforeUnmount(() => {
+  stopResize()
   releaseOutsideSuppress()
   clearAfterOpenTimer()
 })
@@ -287,7 +358,8 @@ function onEscapeKeyDown(event: Event): void {
 function shouldBlockOutsideDismiss(): boolean {
   return (
     !props.closeOnOverlayClick ||
-    suppressOutsideUntilGestureEnd.value
+    suppressOutsideUntilGestureEnd.value ||
+    resizing.value
   )
 }
 
@@ -316,6 +388,136 @@ async function onHeaderCloseClick(): Promise<void> {
   await requestClose('close')
 }
 
+function resolveContentEl(): HTMLElement | null {
+  const inst = contentRef.value
+  if (!inst) return null
+  if (inst instanceof HTMLElement) return inst
+  const el = inst.$el
+  return el instanceof HTMLElement ? el : null
+}
+
+function rootFontPx(): number {
+  const raw = getComputedStyle(document.documentElement).fontSize
+  const n = Number.parseFloat(raw)
+  return Number.isFinite(n) && n > 0 ? n : 16
+}
+
+function viewportPx(): number {
+  return isHorizontal.value ? window.innerWidth : window.innerHeight
+}
+
+function sizeBounds(): { min: number; max: number } {
+  const vp = viewportPx()
+  const root = rootFontPx()
+  const min = resolveRsDrawerSizePx(props.minSize, RS_DRAWER_MIN_SIZE_PX, root, vp)
+  const max = resolveRsDrawerSizePx(
+    props.maxSize,
+    Math.round(vp * RS_DRAWER_MAX_VIEWPORT_RATIO),
+    root,
+    vp,
+  )
+  return { min, max }
+}
+
+function applyLiveSize(px: number): number {
+  const { min, max } = sizeBounds()
+  const next = clampRsDrawerSize(px, min, max)
+  const el = resolveContentEl()
+  if (el) {
+    el.style.setProperty('--rs-drawer-panel-size', `${next}px`)
+    if (isHorizontal.value) el.style.width = `${next}px`
+    else el.style.height = `${next}px`
+  }
+  return next
+}
+
+let resizePointerId: number | null = null
+let resizeStartClient = 0
+let resizeStartSize = 0
+
+function stopResize(): void {
+  if (resizePointerId != null) {
+    window.removeEventListener('pointermove', onResizePointerMove)
+    window.removeEventListener('pointerup', onResizePointerUp)
+    window.removeEventListener('pointercancel', onResizePointerUp)
+    resizePointerId = null
+  }
+  resizing.value = false
+  document.body.style.removeProperty('cursor')
+  document.body.style.removeProperty('user-select')
+}
+
+function currentPanelPx(): number {
+  const el = resolveContentEl()
+  if (!el) return RS_DRAWER_MIN_SIZE_PX
+  const rect = el.getBoundingClientRect()
+  return isHorizontal.value ? rect.width : rect.height
+}
+
+function onResizePointerDown(event: PointerEvent): void {
+  if (!enableResizable.value || event.button !== 0) return
+  event.preventDefault()
+  event.stopPropagation()
+  resizeStartClient = isHorizontal.value ? event.clientX : event.clientY
+  resizeStartSize = currentPanelPx()
+  resizePointerId = event.pointerId
+  resizing.value = true
+  document.body.style.cursor = isHorizontal.value ? 'ew-resize' : 'ns-resize'
+  document.body.style.userSelect = 'none'
+  window.addEventListener('pointermove', onResizePointerMove)
+  window.addEventListener('pointerup', onResizePointerUp)
+  window.addEventListener('pointercancel', onResizePointerUp)
+}
+
+function deltaForPointer(event: PointerEvent): number {
+  const client = isHorizontal.value ? event.clientX : event.clientY
+  const raw = client - resizeStartClient
+  if (props.side === 'right' || props.side === 'bottom') return -raw
+  return raw
+}
+
+function onResizePointerMove(event: PointerEvent): void {
+  if (resizePointerId == null || event.pointerId !== resizePointerId) return
+  const next = applyLiveSize(resizeStartSize + deltaForPointer(event))
+  emit('resize', next)
+}
+
+function commitResize(next: number): void {
+  liveSizePx.value = next
+  emit('resize', next)
+  if (isHorizontal.value) emit('update:width', next)
+  else emit('update:height', next)
+}
+
+function onResizePointerUp(event: PointerEvent): void {
+  if (resizePointerId == null || event.pointerId !== resizePointerId) return
+  const next = applyLiveSize(resizeStartSize + deltaForPointer(event))
+  stopResize()
+  commitResize(next)
+}
+
+function onResizeKeydown(event: KeyboardEvent): void {
+  if (!enableResizable.value) return
+  const step = event.shiftKey ? 48 : 16
+  let delta = 0
+  if (props.side === 'right') {
+    if (event.key === 'ArrowLeft') delta = step
+    else if (event.key === 'ArrowRight') delta = -step
+  } else if (props.side === 'left') {
+    if (event.key === 'ArrowRight') delta = step
+    else if (event.key === 'ArrowLeft') delta = -step
+  } else if (props.side === 'top') {
+    if (event.key === 'ArrowDown') delta = step
+    else if (event.key === 'ArrowUp') delta = -step
+  } else if (props.side === 'bottom') {
+    if (event.key === 'ArrowUp') delta = step
+    else if (event.key === 'ArrowDown') delta = -step
+  }
+  if (!delta) return
+  event.preventDefault()
+  commitResize(applyLiveSize(currentPanelPx() + delta))
+}
+
 defineExpose({
   /** 请求关闭（走 beforeClose） */
   close: (reason: RsDrawerCloseReason = 'programmatic') => requestClose(reason),
@@ -339,6 +541,7 @@ defineExpose({
         :style="overlayStyle"
       />
       <DialogContent
+        ref="contentRef"
         class="rs-drawer__content rs-motion-reduce"
         :class="contentClass"
         :style="contentStyle"
@@ -347,6 +550,16 @@ defineExpose({
         @focus-outside="onFocusOutside"
         @escape-key-down="onEscapeKeyDown"
       >
+        <button
+          v-if="enableResizable"
+          type="button"
+          class="rs-drawer__resize"
+          :aria-label="t('drawer.resize')"
+          :aria-orientation="isHorizontal ? 'vertical' : 'horizontal'"
+          :aria-valuenow="liveSizePx != null ? Math.round(liveSizePx) : undefined"
+          @pointerdown="onResizePointerDown"
+          @keydown="onResizeKeydown"
+        />
         <header v-if="title || description || showClose || $slots.header" class="rs-drawer__header">
           <slot name="header">
             <div class="rs-drawer__heading">
@@ -426,6 +639,67 @@ defineExpose({
   outline: none;
   will-change: transform;
 }
+.rs-drawer__resize {
+  position: absolute;
+  z-index: 3;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  appearance: none;
+}
+.rs-drawer__resize:focus-visible {
+  outline: 2px solid var(--rs-primary);
+  outline-offset: -2px;
+}
+.rs-drawer__content--right > .rs-drawer__resize,
+.rs-drawer__content--left > .rs-drawer__resize {
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: ew-resize;
+}
+.rs-drawer__content--right > .rs-drawer__resize {
+  left: 0;
+}
+.rs-drawer__content--left > .rs-drawer__resize {
+  right: 0;
+}
+.rs-drawer__content--top > .rs-drawer__resize,
+.rs-drawer__content--bottom > .rs-drawer__resize {
+  left: 0;
+  right: 0;
+  height: 6px;
+  cursor: ns-resize;
+}
+.rs-drawer__content--top > .rs-drawer__resize {
+  bottom: 0;
+}
+.rs-drawer__content--bottom > .rs-drawer__resize {
+  top: 0;
+}
+.rs-drawer__content--right > .rs-drawer__resize:hover,
+.rs-drawer__content--right > .rs-drawer__resize:focus-visible,
+.rs-drawer__content--resizing.rs-drawer__content--right > .rs-drawer__resize {
+  background: linear-gradient(to right, var(--rs-primary) 0, var(--rs-primary) 2px, transparent 2px);
+}
+.rs-drawer__content--left > .rs-drawer__resize:hover,
+.rs-drawer__content--left > .rs-drawer__resize:focus-visible,
+.rs-drawer__content--resizing.rs-drawer__content--left > .rs-drawer__resize {
+  background: linear-gradient(to left, var(--rs-primary) 0, var(--rs-primary) 2px, transparent 2px);
+}
+.rs-drawer__content--top > .rs-drawer__resize:hover,
+.rs-drawer__content--top > .rs-drawer__resize:focus-visible,
+.rs-drawer__content--resizing.rs-drawer__content--top > .rs-drawer__resize {
+  background: linear-gradient(to top, var(--rs-primary) 0, var(--rs-primary) 2px, transparent 2px);
+}
+.rs-drawer__content--bottom > .rs-drawer__resize:hover,
+.rs-drawer__content--bottom > .rs-drawer__resize:focus-visible,
+.rs-drawer__content--resizing.rs-drawer__content--bottom > .rs-drawer__resize {
+  background: linear-gradient(to bottom, var(--rs-primary) 0, var(--rs-primary) 2px, transparent 2px);
+}
+.rs-drawer__content--resizing iframe {
+  pointer-events: none;
+}
 .rs-drawer__content--contained {
   position: absolute;
 }
@@ -433,18 +707,23 @@ defineExpose({
 .rs-drawer__content--left {
   top: 0;
   bottom: 0;
+  height: 100%;
+  max-height: none;
   width: min(100vw, var(--rs-drawer-panel-size, 28rem));
+  transform: none;
 }
 .rs-drawer__content--contained:is(.rs-drawer__content--right, .rs-drawer__content--left) {
   width: min(100%, var(--rs-drawer-panel-size, 28rem));
 }
 .rs-drawer__content--right {
+  left: auto;
   right: 0;
   border-right: 0;
   border-radius: var(--rs-radius) 0 0 var(--rs-radius);
 }
 .rs-drawer__content--left {
   left: 0;
+  right: auto;
   border-left: 0;
   border-radius: 0 var(--rs-radius) var(--rs-radius) 0;
 }

package/src/components/drawer-utils.ts

@@ -29,6 +29,11 @@ const SIZE_INLINE: Record<Exclude<RsDrawerSize, 'full'>, string> = {
   lg: '36rem',
 }
 
+/** 左右抽屉默认可拖最小宽度 */
+export const RS_DRAWER_MIN_SIZE_PX = 256
+/** 相对视口的默认可拖上限比例 */
+export const RS_DRAWER_MAX_VIEWPORT_RATIO = 0.9
+
 /** 将 size 预设解析为 CSS 长度（full 由样式类处理） */
 export function resolveRsDrawerSizeCss(size: RsDrawerSize): string | undefined {
   if (size === 'full') return undefined
@@ -46,6 +51,37 @@ export function resolveRsDrawerDimensionCss(value: RsDrawerDimension | undefined
   return trimmed || undefined
 }
 
+/**
+ * 将抽屉尺寸表达式解析为像素，供拖拽缩放夹紧。
+ * 无法解析时返回 fallbackPx。
+ */
+export function resolveRsDrawerSizePx(
+  value: RsDrawerDimension | undefined,
+  fallbackPx: number,
+  rootFontPx: number,
+  viewportPx: number,
+): number {
+  if (value == null) return fallbackPx
+  if (typeof value === 'number') {
+    return Number.isFinite(value) && value > 0 ? value : fallbackPx
+  }
+  const trimmed = String(value).trim()
+  const n = Number.parseFloat(trimmed)
+  if (!Number.isFinite(n)) return fallbackPx
+  if (trimmed.endsWith('rem')) return n * rootFontPx
+  if (trimmed.endsWith('%') || trimmed.endsWith('vw') || trimmed.endsWith('vh')) {
+    return (n / 100) * viewportPx
+  }
+  return n
+}
+
+/** 将拖拽得到的尺寸夹在 min/max 之间并取整。 */
+export function clampRsDrawerSize(px: number, minPx: number, maxPx: number): number {
+  const lo = Math.min(minPx, maxPx)
+  const hi = Math.max(minPx, maxPx)
+  return Math.round(Math.min(hi, Math.max(lo, px)))
+}
+
 export function runRsDrawerBeforeClose(
   beforeClose: RsDrawerBeforeClose | undefined,
   reason: RsDrawerCloseReason,

package/src/components/table/RsTableCellEditor.vue

@@ -6,7 +6,7 @@ import RsDatePicker from '../RsDatePicker.vue'
 import RsInput from '../RsInput.vue'
 import RsInputNumber from '../RsInputNumber.vue'
 import RsSelect from '../RsSelect.vue'
-import type { RsSelectOptions } from '../select-utils'
+import type { RsSelectModelValue, RsSelectOptions } from '../select-utils'
 import type { RsTableColumnEditorOptionsResolved, RsTableCellValueType } from '../table-utils'
 import {
   applyFocusMode,
@@ -223,9 +223,17 @@ function onKeydown(event: KeyboardEvent): void {
   }
 }
 
-function onSelectUpdate(value: string | string[]): void {
+function onSelectUpdate(value: RsSelectModelValue): void {
+  const toToken = (item: RsSelectModelValue): string => {
+    if (item == null || item === '') return ''
+    if (typeof item === 'object' && !Array.isArray(item) && 'value' in item) {
+      return String(item.value)
+    }
+    return String(item)
+  }
+  const tokens = Array.isArray(value) ? value.map(toToken) : toToken(value)
   const empty =
-    value == null || value === '' || (Array.isArray(value) && value.length === 0)
+    tokens === '' || (Array.isArray(tokens) && tokens.length === 0)
   // 表格内下拉默认不可清除：仅选择；显式 clearable 时才允许清空
   if (empty) {
     if (!props.editorOptions?.clearable) return
@@ -235,12 +243,12 @@ function onSelectUpdate(value: string | string[]): void {
     return
   }
   if (isMultipleSelect.value) {
-    const list = Array.isArray(value) ? value.map(String) : [String(value)]
+    const list = Array.isArray(tokens) ? tokens : [tokens]
     model.value = joinMultiSelectDraft(list)
     // 多选不在每次勾选时提交，等下拉关闭
     return
   }
-  model.value = Array.isArray(value) ? (value[0] ?? '') : String(value ?? '')
+  model.value = Array.isArray(tokens) ? (tokens[0] ?? '') : tokens
   if (shouldCommitOnChange()) emit('commit')
 }
 

package/src/composables/useRsTableCore.ts

@@ -113,7 +113,9 @@ export function useRsTableCore<T extends RsTableRowData>(options: UseRsTableCore
     emit: options.emit,
   })
 
-  const resolvedSize = computed(() => resolveTableSize(options.compact(), options.size()))
+  const resolvedSize = computed(() =>
+    resolveTableSize(options.compact() ?? false, options.size() ?? 'md'),
+  )
 
   const engine = useRsTableEngine<T>({
     data: () => options.data(),

package/src/composables/useRsTableHeadless.ts

@@ -35,8 +35,16 @@ export function useRsTableHeadless<T extends RsTableRowData>(
 ) {
   const getColumns = readRefOrGetter(options.columns)
   const getData = readRefOrGetter(options.data)
-  const getRowKey = () =>
-    typeof options.rowKey === 'function' ? options.rowKey() : options.rowKey
+  const getRowKey = (): RsTableRowKey<T> | undefined => {
+    const key = options.rowKey
+    if (key == null) return undefined
+    if (typeof key === 'string') return key
+    // 无参函数视为配置 getter；带 row 参数的视为字段访问器
+    if (typeof key === 'function' && key.length === 0) {
+      return (key as () => RsTableRowKey<T> | undefined)()
+    }
+    return key as RsTableRowKey<T>
+  }
   const getFeatures = () =>
     typeof options.features === 'function' ? options.features() : options.features
 

package/src/icons/lucide.ts

@@ -1,4 +1,5 @@
 import type { Component } from 'vue'
+import * as LucideVue from '@lucide/vue'
 import { ApiIcon } from './custom/api'
 import { FtpIcon } from './custom/ftp'
 import { MongodbIcon } from './custom/mongodb'
@@ -32,36 +33,45 @@ const customIconMap = new Map<string, Component>([
   ['sqlserver', SqlserverIcon],
 ])
 
-/** Vite 构建时收集全部 Lucide 图标，运行时按名称 O(1) 查找 */
-const iconModules = import.meta.glob<{ default: Component }>(
-  '../../node_modules/@lucide/vue/dist/esm/icons/*.mjs',
-  { eager: true },
-)
+const lucideExports = LucideVue as Record<string, unknown>
+const SKIP_LUCIDE_EXPORTS = new Set(['default', 'createLucideIcon'])
 
-const iconMap = new Map<string, Component>(customIconMap)
-const iconPathPattern = /[/\\]icons[/\\]([^/\\]+)\.mjs$/
+function isVueComponent(value: unknown): value is Component {
+  return typeof value === 'function' || (typeof value === 'object' && value !== null)
+}
+
+/** RsIcon 使用 kebab-case（如 trash-2），@lucide/vue 导出名是 PascalCase（Trash2） */
+function kebabToPascal(name: string): string {
+  return name
+    .split('-')
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('')
+}
 
-/** Lucide 更名兼容：旧 kebab 名 → 新图标文件名 */
+function getLucideComponent(name: string): Component | undefined {
+  const pascal = kebabToPascal(name)
+  if (SKIP_LUCIDE_EXPORTS.has(pascal)) return undefined
+  const value = lucideExports[pascal]
+  return isVueComponent(value) ? value : undefined
+}
+
+/** Lucide 更名兼容：旧 kebab 名 → 当前导出名对应的 kebab */
 const iconAliases = new Map<string, string>([
   ['code-2', 'code-xml'],
-  // Lucide v0.5xx：circle-help / help-circle → circle-question-mark
   ['circle-help', 'circle-question-mark'],
   ['help-circle', 'circle-question-mark'],
 ])
 
-for (const [path, mod] of Object.entries(iconModules)) {
-  const match = iconPathPattern.exec(path)
-  if (match) iconMap.set(match[1], mod.default)
-}
-
-const iconCache = new Map<string, Component>()
-
 function resolveIconName(name: string): string {
   return iconAliases.get(name) ?? name
 }
 
+const iconCache = new Map<string, Component>()
+
 export function isRsIconName(name: string): boolean {
-  return iconMap.has(resolveIconName(name))
+  const resolvedName = resolveIconName(name)
+  return customIconMap.has(resolvedName) || getLucideComponent(resolvedName) !== undefined
 }
 
 export function resolveLucideIcon(name: string): Component | undefined {
@@ -69,10 +79,14 @@ export function resolveLucideIcon(name: string): Component | undefined {
   const cached = iconCache.get(resolvedName)
   if (cached) return cached
 
-  const icon = iconMap.get(resolvedName)
+  const icon = customIconMap.get(resolvedName) ?? getLucideComponent(resolvedName)
   if (icon) iconCache.set(resolvedName, icon)
   return icon
 }
 
-/** Lucide 库中可用图标数量 */
-export const lucideIconCount = iconMap.size
+/** 可解析的图标数量（自定义 + Lucide 命名导出） */
+export const lucideIconCount =
+  customIconMap.size +
+  Object.keys(lucideExports).filter(
+    (key) => !SKIP_LUCIDE_EXPORTS.has(key) && isVueComponent(lucideExports[key]),
+  ).length

package/src/index.ts

@@ -103,9 +103,13 @@ export type {
   RsDrawerSize,
 } from './components/drawer-utils'
 export {
+  clampRsDrawerSize,
   resolveDrawerOverlayStyle,
   resolveRsDrawerDimensionCss,
   resolveRsDrawerSizeCss,
+  resolveRsDrawerSizePx,
+  RS_DRAWER_MAX_VIEWPORT_RATIO,
+  RS_DRAWER_MIN_SIZE_PX,
   runRsDrawerBeforeClose,
 } from './components/drawer-utils'
 export { default as RsForm } from './components/RsForm.vue'

package/src/locale/messages.ts

@@ -138,6 +138,7 @@ export const zhCN: RsLocaleMessages = {
   'tree.drag': '拖拽排序',
   'split.label': '面板分割',
   'split.resize': '拖动调整面板尺寸',
+  'drawer.resize': '拖动调整抽屉尺寸',
   'terminal.copy': '复制',
   'terminal.paste': '粘贴',
   'terminal.selectAll': '全选',
@@ -336,6 +337,7 @@ export const enUS: RsLocaleMessages = {
   'tree.drag': 'Drag to reorder',
   'split.label': 'Split panes',
   'split.resize': 'Drag to resize panes',
+  'drawer.resize': 'Drag to resize the drawer',
   'terminal.copy': 'Copy',
   'terminal.paste': 'Paste',
   'terminal.selectAll': 'Select All',