niuma-ui 1.0.0 → 1.0.2

package/src/components/RsToaster.vue

@@ -119,21 +119,21 @@ const sonnerTheme = computed<'light' | 'dark'>(() => {
   overflow: hidden;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
-  align-items: start;
-  column-gap: 0.75rem;
-  row-gap: 0.25rem;
+  align-items: center;
+  column-gap: 0.625rem;
+  row-gap: 0.5rem;
   width: var(--width, auto);
   min-width: 19rem;
   max-width: min(29rem, calc(100vw - 1.5rem));
-  padding: 0.875rem 0.9375rem 0.9375rem;
+  padding: 0.8125rem 2.25rem 0.8125rem 0.875rem;
   border: 1px solid var(--rs-toast-border);
   border-radius: var(--rs-toast-radius);
   background:
     linear-gradient(
       180deg,
-      transparent 0.625rem,
-      var(--rs-toast-accent) 0.625rem calc(100% - 0.625rem),
-      transparent calc(100% - 0.625rem)
+      transparent 0.5rem,
+      var(--rs-toast-accent) 0.5rem calc(100% - 0.5rem),
+      transparent calc(100% - 0.5rem)
     )
     0.5rem 0 / 2px 100% no-repeat,
     linear-gradient(180deg, var(--rs-toast-highlight), transparent 38%),
@@ -151,6 +151,13 @@ const sonnerTheme = computed<'light' | 'dark'>(() => {
     background var(--rs-transition-fast);
 }
 
+/* 带描述时顶对齐，图标与标题第一行光学对齐 */
+.rs-toast:has([data-description]) {
+  align-items: start;
+  padding-top: 0.875rem;
+  padding-bottom: 0.875rem;
+}
+
 .rs-toast:hover {
   box-shadow:
     0 18px 42px -20px rgb(0 0 0 / 0.34),
@@ -166,32 +173,48 @@ const sonnerTheme = computed<'light' | 'dark'>(() => {
 .rs-toast [data-icon] {
   position: relative;
   z-index: 1;
+  grid-column: 1;
+  grid-row: 1;
   display: inline-flex;
-  grid-row: 1 / span 2;
   align-items: center;
   justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  margin-top: 0.125rem;
+  align-self: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0;
   border-radius: 999px;
   background: transparent;
   color: var(--rs-info);
   box-shadow: none;
 }
 
+.rs-toast [data-icon] svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+/* 多行内容时，图标略下移以对齐标题字面中线 */
+.rs-toast:has([data-description]) [data-icon] {
+  align-self: start;
+  margin-top: 0.125rem;
+}
+
 .rs-toast [data-content] {
   position: relative;
   z-index: 1;
+  grid-column: 2;
+  grid-row: 1;
   display: grid;
   gap: 0.1875rem;
   min-width: 0;
-  padding-right: 1.5rem;
 }
 
 .rs-toast [data-button] {
   position: relative;
   z-index: 1;
-  margin-top: 0.625rem;
+  grid-column: 2;
+  margin-top: 0;
 }
 
 .rs-toast__title {
@@ -199,7 +222,7 @@ const sonnerTheme = computed<'light' | 'dark'>(() => {
   color: var(--rs-text);
   font-size: 0.875rem;
   font-weight: 600;
-  line-height: 1.3;
+  line-height: 1.25;
   letter-spacing: -0.012em;
 }
 
@@ -212,7 +235,10 @@ const sonnerTheme = computed<'light' | 'dark'>(() => {
 
 .rs-toast [data-close-button].rs-toast__close {
   position: absolute;
-  inset: 0.75rem 0.75rem auto auto;
+  top: 50%;
+  right: 0.625rem;
+  left: auto;
+  bottom: auto;
   z-index: 2;
   display: inline-flex;
   align-items: center;
@@ -226,7 +252,7 @@ const sonnerTheme = computed<'light' | 'dark'>(() => {
   color: var(--rs-muted);
   box-shadow: none;
   cursor: pointer;
-  transform: none;
+  transform: translateY(-50%);
   opacity: 0.72;
   transition:
     opacity var(--rs-transition-fast),
@@ -236,6 +262,11 @@ const sonnerTheme = computed<'light' | 'dark'>(() => {
     box-shadow var(--rs-transition-fast);
 }
 
+.rs-toast:has([data-description]) [data-close-button].rs-toast__close {
+  top: 0.75rem;
+  transform: none;
+}
+
 .rs-toast [data-close-button].rs-toast__close svg {
   width: 0.75rem;
   height: 0.75rem;
@@ -371,16 +402,25 @@ const sonnerTheme = computed<'light' | 'dark'>(() => {
   .rs-toast {
     min-width: min(100%, 18.5rem);
     max-width: calc(100vw - 1rem);
-    padding: 0.8125rem 0.875rem 0.875rem;
+    padding: 0.75rem 2.125rem 0.75rem 0.8125rem;
     border-radius: 0.9375rem;
   }
 
+  .rs-toast:has([data-description]) {
+    padding-top: 0.8125rem;
+    padding-bottom: 0.8125rem;
+  }
+
   .rs-toast [data-close-button].rs-toast__close {
-    inset: 0.625rem 0.625rem auto auto;
+    right: 0.5rem;
     width: 1.25rem;
     height: 1.25rem;
   }
 
+  .rs-toast:has([data-description]) [data-close-button].rs-toast__close {
+    top: 0.625rem;
+  }
+
   .rs-toast__action {
     min-height: 1.875rem;
     padding: 0 0.6875rem;

package/src/components/RsTree.vue

@@ -39,7 +39,11 @@ import {
   splitTreeLabelHighlight,
   toggleTreeCheck,
 } from './tree-utils'
-import { resolveVirtualListHeight } from './virtual-list-utils'
+import {
+  isVirtualListFillHeight,
+  parseVirtualListHeightPx,
+  resolveVirtualListHeight,
+} from './virtual-list-utils'
 
 defineOptions({ name: 'RsTree' })
 
@@ -130,12 +134,19 @@ const _measuredHeight = ref(0)
 let _heightObs: ResizeObserver | null = null
 
 onMounted(() => {
-  // 必须由消费方显式声明 virtual，才启动自动高度测量
-  if (!props.virtual || props.height !== undefined || !treeRootRef.value) return
+  // 虚拟滚动且高度为填满/百分比/未指定时，用 ResizeObserver 测量真实视口
+  if (!props.virtual || !treeRootRef.value) return
+  if (
+    props.height !== undefined
+    && !isVirtualListFillHeight(props.height)
+  ) {
+    return
+  }
   _heightObs = new ResizeObserver((entries) => {
     _measuredHeight.value = entries[0]?.contentRect.height ?? 0
   })
   _heightObs.observe(treeRootRef.value)
+  _measuredHeight.value = treeRootRef.value.clientHeight
 })
 
 onUnmounted(() => {
@@ -243,10 +254,12 @@ if (import.meta.env.DEV) {
 }
 
 const viewportHeightPx = computed(() => {
-  if (props.height !== undefined) {
-    return Number.parseInt(resolveVirtualListHeight(props.height, 320) ?? '', 10)
-  }
-  return _measuredHeight.value > 0 ? _measuredHeight.value : 320
+  const parsed = parseVirtualListHeightPx(props.height)
+  if (parsed != null) return parsed
+  if (_measuredHeight.value > 0) return _measuredHeight.value
+  const el = treeRootRef.value
+  if (el && el.clientHeight > 0) return el.clientHeight
+  return 320
 })
 
 /** 过滤后滚回顶部；内容缩短时钳位，避免内部 scrollTop 与 DOM 脱节导致虚拟列表空白 */
@@ -288,9 +301,13 @@ const fillCapture = computed(() => props.virtual || props.height !== undefined)
 
 const viewportStyle = computed(() => {
   if (!useVirtualScroll.value && props.height === undefined) return undefined
-  if (props.height !== undefined) {
+  if (props.height !== undefined && !isVirtualListFillHeight(props.height)) {
     return { maxHeight: resolveVirtualListHeight(props.height, 320) }
   }
+  // 百分比 / 填满：由 CSS height:100% 承接，不再写死 maxHeight px
+  if (isVirtualListFillHeight(props.height)) {
+    return { height: '100%', maxHeight: '100%' }
+  }
   const h = _measuredHeight.value > 0 ? _measuredHeight.value : 320
   return { maxHeight: `${h}px` }
 })
@@ -954,27 +971,27 @@ defineExpose({
 }
 
 .rs-tree__row:hover:not(.rs-tree__row--disabled):not(.rs-tree__row--selected) {
-  background: var(--rs-item-hover);
+  background: var(--rs-tree-row-hover);
 }
 
 .rs-tree__row--selected {
-  background: color-mix(in srgb, var(--rs-primary) 14%, var(--rs-surface));
+  background: var(--rs-tree-selected-bg);
 }
 
 .rs-tree__row--selected .rs-tree__label,
 .rs-tree__row--selected .rs-tree__label--block {
-  color: var(--rs-primary);
-  font-weight: 500;
+  color: var(--rs-tree-selected-fg);
+  font-weight: inherit;
 }
 
 .rs-tree__row--focused {
-  background: color-mix(in srgb, var(--rs-primary) 8%, var(--rs-surface));
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rs-primary) 55%, transparent);
+  background: var(--rs-tree-focused-bg);
+  box-shadow: inset 0 0 0 1px var(--rs-tree-focused-ring);
 }
 
 .rs-tree__row--selected.rs-tree__row--focused {
-  background: color-mix(in srgb, var(--rs-primary) 18%, var(--rs-surface));
-  box-shadow: inset 0 0 0 1px var(--rs-primary);
+  background: var(--rs-tree-selected-focused-bg);
+  box-shadow: inset 0 0 0 1px var(--rs-tree-selected-focused-ring);
 }
 
 .rs-tree--block .rs-tree__row {
@@ -993,7 +1010,7 @@ defineExpose({
   left: 0;
   right: 0;
   height: 2px;
-  background: var(--rs-primary);
+  background: var(--rs-tree-drop-indicator);
   pointer-events: none;
 }
 
@@ -1015,12 +1032,13 @@ defineExpose({
   pointer-events: none;
 }
 
+/* 导航线：半透明字色 token，避免宿主把 --rs-border-subtle 桥成实色灰后过深 */
 .rs-tree--line .rs-tree__line-vert {
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 1px;
-  background: var(--rs-border-subtle);
+  width: var(--rs-tree-line-width, 1px);
+  background: var(--rs-tree-line);
 }
 
 .rs-tree--line .rs-tree__line-vert--self.rs-tree__line-vert--end {
@@ -1030,8 +1048,8 @@ defineExpose({
 .rs-tree--line .rs-tree__line-horz {
   position: absolute;
   top: 50%;
-  height: 1px;
-  background: var(--rs-border-subtle);
+  height: var(--rs-tree-line-width, 1px);
+  background: var(--rs-tree-line);
 }
 
 .rs-tree__drag-handle {

package/src/components/RsUpload.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import RsIcon from './RsIcon.vue'
-import { formatFileSize, mergeUploadFiles, removeUploadFileAt, validateUploadFiles } from './upload-utils'
+import {
+  downloadUploadFile,
+  formatFileSize,
+  mergeUploadFiles,
+  removeUploadFileAt,
+  resolveUploadFileIcon,
+  validateUploadFiles,
+} from './upload-utils'
 import { useRsI18n } from '../composables/useRsI18n'
 
 const model = defineModel<File[]>({ default: () => [] })
@@ -15,25 +22,44 @@ const props = withDefaults(
     disabled?: boolean
     label?: string
     hint?: string
+    /** 是否展示已选文件列表 */
+    showFileList?: boolean
+    /** 文件行是否显示下载按钮 */
+    showDownload?: boolean
+    /** 达到 maxCount 后隐藏拖拽区（仅保留列表） */
+    hideDropzoneWhenFull?: boolean
   }>(),
   {
     multiple: false,
     disabled: false,
+    showFileList: true,
+    showDownload: false,
+    hideDropzoneWhenFull: false,
   },
 )
 
 const emit = defineEmits<{
   reject: [errors: ReturnType<typeof validateUploadFiles>['rejected']]
+  download: [file: File, index: number]
+  remove: [file: File, index: number]
 }>()
 
 const { t } = useRsI18n()
+const dragging = ref(false)
+const dragDepth = ref(0)
+
 const canAdd = computed(() => !props.maxCount || model.value.length < props.maxCount)
 const isDropzoneDisabled = computed(() => props.disabled || !canAdd.value)
-const resolvedHint = computed(() => props.hint ?? t('upload.browse'))
+const showDropzone = computed(
+  () => !(props.hideDropzoneWhenFull && props.maxCount != null && model.value.length >= props.maxCount),
+)
+const resolvedHint = computed(() => {
+  if (dragging.value && !isDropzoneDisabled.value) return t('upload.dropActive')
+  return props.hint ?? t('upload.browse')
+})
 
-function onFilesChange(event: Event): void {
-  const input = event.target as HTMLInputElement
-  const files = Array.from(input.files ?? [])
+function applyFiles(files: File[]): void {
+  if (!files.length || isDropzoneDisabled.value) return
   const result = validateUploadFiles(files, {
     accept: props.accept,
     maxSize: props.maxSize,
@@ -41,19 +67,71 @@ function onFilesChange(event: Event): void {
   })
   model.value = mergeUploadFiles(model.value, result.accepted, props.maxCount)
   if (result.rejected.length) emit('reject', result.rejected)
+}
+
+function onFilesChange(event: Event): void {
+  const input = event.target as HTMLInputElement
+  applyFiles(Array.from(input.files ?? []))
   input.value = ''
 }
 
+function onDragEnter(event: DragEvent): void {
+  event.preventDefault()
+  if (isDropzoneDisabled.value) return
+  dragDepth.value += 1
+  dragging.value = true
+}
+
+function onDragOver(event: DragEvent): void {
+  event.preventDefault()
+  if (event.dataTransfer) event.dataTransfer.dropEffect = isDropzoneDisabled.value ? 'none' : 'copy'
+}
+
+function onDragLeave(event: DragEvent): void {
+  event.preventDefault()
+  dragDepth.value = Math.max(0, dragDepth.value - 1)
+  if (dragDepth.value === 0) dragging.value = false
+}
+
+function onDrop(event: DragEvent): void {
+  event.preventDefault()
+  dragDepth.value = 0
+  dragging.value = false
+  if (isDropzoneDisabled.value) return
+  applyFiles(Array.from(event.dataTransfer?.files ?? []))
+}
+
 function removeFile(index: number): void {
+  const file = model.value[index]
+  if (!file) return
   model.value = removeUploadFileAt(model.value, index)
+  emit('remove', file, index)
+}
+
+function onDownload(file: File, index: number): void {
+  emit('download', file, index)
+  // 无外部监听时仍提供默认下载；有监听时由业务决定是否自行处理
+  downloadUploadFile(file)
+}
+
+function fileIcon(file: File): string {
+  return resolveUploadFileIcon(file)
 }
 </script>
 
 <template>
   <div class="rs-upload">
     <label
+      v-if="showDropzone"
       class="rs-upload__dropzone"
-      :class="{ 'rs-upload__dropzone--disabled': isDropzoneDisabled }"
+      :class="{
+        'rs-upload__dropzone--disabled': isDropzoneDisabled,
+        'rs-upload__dropzone--dragging': dragging && !isDropzoneDisabled,
+      }"
+      @dragenter="onDragEnter"
+      @dragover="onDragOver"
+      @dragleave="onDragLeave"
+      @drop="onDrop"
     >
       <input
         class="rs-upload__input"
@@ -71,20 +149,36 @@ function removeFile(index: number): void {
         <span class="rs-upload__hint">{{ resolvedHint }}</span>
       </span>
     </label>
-    <ul v-if="model.length" class="rs-upload__list">
+
+    <ul v-if="showFileList && model.length" class="rs-upload__list">
       <li
         v-for="(file, index) in model"
         :key="`${file.name}-${file.size}-${index}`"
         class="rs-upload__file"
       >
-        <span class="rs-upload__file-icon" aria-hidden="true">
-          <RsIcon name="file" :size="16" />
+        <span
+          class="rs-upload__file-icon"
+          :class="`rs-upload__file-icon--${fileIcon(file)}`"
+          aria-hidden="true"
+        >
+          <RsIcon :name="fileIcon(file)" :size="16" />
         </span>
         <span class="rs-upload__file-meta">
           <span class="rs-upload__file-name">{{ file.name }}</span>
           <span class="rs-upload__file-size">{{ formatFileSize(file.size) }}</span>
         </span>
         <button
+          v-if="showDownload"
+          type="button"
+          class="rs-upload__file-action"
+          :aria-label="t('upload.download')"
+          :title="t('upload.download')"
+          @click.stop="onDownload(file, index)"
+        >
+          <RsIcon name="download" :size="14" />
+        </button>
+        <button
+          v-if="!disabled"
           type="button"
           class="rs-upload__file-remove"
           :aria-label="t('common.remove')"
@@ -123,7 +217,8 @@ function removeFile(index: number): void {
     box-shadow var(--rs-transition-fast);
 }
 
-.rs-upload__dropzone:hover:not(.rs-upload__dropzone--disabled) {
+.rs-upload__dropzone:hover:not(.rs-upload__dropzone--disabled),
+.rs-upload__dropzone--dragging:not(.rs-upload__dropzone--disabled) {
   border-color: color-mix(in srgb, var(--rs-primary) 55%, var(--rs-border));
   background: color-mix(in srgb, var(--rs-primary) 6%, var(--rs-surface));
 }
@@ -163,7 +258,8 @@ function removeFile(index: number): void {
     box-shadow var(--rs-transition-fast);
 }
 
-.rs-upload__dropzone:hover:not(.rs-upload__dropzone--disabled) .rs-upload__icon {
+.rs-upload__dropzone:hover:not(.rs-upload__dropzone--disabled) .rs-upload__icon,
+.rs-upload__dropzone--dragging:not(.rs-upload__dropzone--disabled) .rs-upload__icon {
   transform: translateY(-1px);
   box-shadow: var(--rs-shadow);
 }
@@ -226,6 +322,40 @@ function removeFile(index: number): void {
   color: var(--rs-muted);
 }
 
+.rs-upload__file-icon--file-image {
+  color: var(--rs-info, #2563eb);
+}
+
+.rs-upload__file-icon--file-code,
+.rs-upload__file-icon--file-braces,
+.rs-upload__file-icon--file-terminal {
+  color: var(--rs-primary);
+}
+
+.rs-upload__file-icon--file-key,
+.rs-upload__file-icon--key-round,
+.rs-upload__file-icon--file-lock {
+  color: var(--rs-warning, #d97706);
+}
+
+.rs-upload__file-icon--file-archive {
+  color: var(--rs-secondary, #7c3aed);
+}
+
+.rs-upload__file-icon--file-spreadsheet {
+  color: var(--rs-success, #16a34a);
+}
+
+.rs-upload__file-icon--file-type,
+.rs-upload__file-icon--file-text {
+  color: var(--rs-danger, #dc2626);
+}
+
+.rs-upload__file-icon--file-music,
+.rs-upload__file-icon--file-video-camera {
+  color: var(--rs-info, #2563eb);
+}
+
 .rs-upload__file-meta {
   display: grid;
   gap: 0.125rem;
@@ -249,6 +379,7 @@ function removeFile(index: number): void {
   line-height: var(--rs-line-height-tight);
 }
 
+.rs-upload__file-action,
 .rs-upload__file-remove {
   display: inline-flex;
   flex-shrink: 0;
@@ -267,11 +398,13 @@ function removeFile(index: number): void {
     color var(--rs-transition-fast);
 }
 
+.rs-upload__file-action:hover,
 .rs-upload__file-remove:hover {
   background: var(--rs-item-hover);
   color: var(--rs-text);
 }
 
+.rs-upload__file-action:focus-visible,
 .rs-upload__file-remove:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);

package/src/components/RsVNodeHost.vue

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { defineComponent, type PropType, type VNodeChild } from 'vue'
+
+/**
+ * 将 VNodeChild（含自定义错误渲染结果）挂到模板中。
+ * Form errorRender / 字段自定义渲染共用。
+ */
+export default defineComponent({
+  name: 'RsVNodeHost',
+  props: {
+    content: {
+      type: null as unknown as PropType<VNodeChild>,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () => props.content
+  },
+})
+</script>

package/src/components/button-utils.ts

@@ -0,0 +1,39 @@
+/**
+ * RsButton 外观变体
+ * - primary / default / ghost / danger：常规控件按钮
+ * - link：行内链接态（可带下划线）
+ * - text：工具栏/表格操作等 quaternary 文字按钮（无底无边，靠 tone 着色）
+ */
+export type RsButtonVariant =
+  | 'primary'
+  | 'default'
+  | 'secondary'
+  | 'ghost'
+  | 'danger'
+  | 'link'
+  | 'text'
+
+/**
+ * RsButton 语义色调
+ * 主要用于 text / ghost / link：只改文字与图标色，不改变填充形态。
+ * 对 primary / default / danger 等填充变体将被忽略。
+ */
+export type RsButtonTone =
+  | 'neutral'
+  | 'primary'
+  | 'danger'
+  | 'success'
+  | 'warning'
+  | 'info'
+
+/** 填充类变体：已自带语义色，不再叠加 tone */
+export function isRsButtonFilledVariant(variant: RsButtonVariant): boolean {
+  const resolved = variant === 'secondary' ? 'default' : variant
+  return resolved === 'primary' || resolved === 'default' || resolved === 'danger'
+}
+
+/** text / ghost / link 可叠加 tone */
+export function supportsRsButtonTone(variant: RsButtonVariant): boolean {
+  const resolved = variant === 'secondary' ? 'default' : variant
+  return resolved === 'text' || resolved === 'ghost' || resolved === 'link'
+}

package/src/components/context-menu-utils.ts

@@ -18,3 +18,9 @@ export interface RsContextMenuItem {
   /** 键盘快捷键提示（仅展示，不绑定事件），如 "⌘K"、"⌃C" */
   shortcut?: string
 }
+
+/** 是否存在可操作项（排除纯分隔线），用于避免空菜单气泡 */
+export function hasActionableContextMenuItems(items: RsContextMenuItem[] | undefined): boolean {
+  if (!items?.length) return false
+  return items.some((item) => !item.separator)
+}