niuma-ui 1.0.0 → 1.0.2

package/src/components/RsLabel.vue

@@ -5,10 +5,13 @@ withDefaults(
     required?: boolean
     hint?: string
     disabled?: boolean
+    /** 文案单行不换行（表单左侧标签等场景） */
+    nowrap?: boolean
   }>(),
   {
     required: false,
     disabled: false,
+    nowrap: false,
   },
 )
 </script>
@@ -16,7 +19,10 @@ withDefaults(
 <template>
   <label
     class="rs-label"
-    :class="{ 'rs-label--disabled': disabled }"
+    :class="{
+      'rs-label--disabled': disabled,
+      'rs-label--nowrap': nowrap,
+    }"
     :for="forId"
   >
     <span class="rs-label__text">
@@ -28,19 +34,28 @@ withDefaults(
 </template>
 
 <style scoped>
+/*
+ * 消费全局 token（styles.css）：
+ * --rs-label-font-size / --rs-label-font-weight / --rs-label-color / --rs-label-line-height
+ * 与 .rs-field__label 共用；父级覆盖即可，无需 :deep。
+ */
 .rs-label {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
-  font-size: var(--rs-font-size-sm);
-  color: var(--rs-text);
+  font-size: var(--rs-label-font-size);
+  line-height: var(--rs-label-line-height);
+  color: var(--rs-label-color);
 }
 .rs-label--disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
+.rs-label--nowrap .rs-label__text {
+  white-space: nowrap;
+}
 .rs-label__text {
-  font-weight: 500;
+  font-weight: var(--rs-label-font-weight);
 }
 .rs-label__required {
   margin-left: 0.125rem;
@@ -48,7 +63,7 @@ withDefaults(
 }
 .rs-label__hint {
   font-size: var(--rs-font-size-xs);
-  font-weight: 400;
+  font-weight: var(--rs-font-weight-regular);
   color: var(--rs-muted);
 }
 </style>

package/src/components/RsLoadingBar.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, provide, ref, shallowRef, watch } from 'vue'
+import { RS_LOADING_BAR_KEY, type RsLoadingBarApi } from '../composables/useRsLoadingBar'
+
+const props = withDefaults(
+  defineProps<{
+    /** 受控进度 0-100；未传时由 start/finish/error 驱动 */
+    progress?: number
+    height?: number
+    color?: string
+    errorColor?: string
+  }>(),
+  {
+    height: 2,
+    color: 'var(--rs-primary)',
+    errorColor: 'var(--rs-danger)',
+  },
+)
+
+const internalProgress = ref(0)
+const visible = ref(false)
+const errored = ref(false)
+let trickleTimer: ReturnType<typeof setInterval> | null = null
+
+const displayProgress = computed(() =>
+  props.progress !== undefined ? Math.min(100, Math.max(0, props.progress)) : internalProgress.value,
+)
+
+const isVisible = computed(
+  () => visible.value || (props.progress !== undefined && props.progress > 0),
+)
+
+const barStyle = computed(() => ({
+  height: `${props.height}px`,
+  width: `${displayProgress.value}%`,
+  background: errored.value ? props.errorColor : props.color,
+}))
+
+function clearTrickle(): void {
+  if (trickleTimer) {
+    clearInterval(trickleTimer)
+    trickleTimer = null
+  }
+}
+
+function start(): void {
+  clearTrickle()
+  errored.value = false
+  visible.value = true
+  internalProgress.value = 8
+  trickleTimer = setInterval(() => {
+    if (internalProgress.value >= 92) return
+    const step = Math.max(0.5, (92 - internalProgress.value) * 0.08)
+    internalProgress.value = Math.min(92, internalProgress.value + step)
+  }, 200)
+}
+
+function finish(): void {
+  clearTrickle()
+  errored.value = false
+  visible.value = true
+  internalProgress.value = 100
+  window.setTimeout(() => {
+    visible.value = false
+    internalProgress.value = 0
+  }, 280)
+}
+
+function error(): void {
+  clearTrickle()
+  errored.value = true
+  visible.value = true
+  internalProgress.value = 100
+  window.setTimeout(() => {
+    visible.value = false
+    errored.value = false
+    internalProgress.value = 0
+  }, 400)
+}
+
+const api = shallowRef<RsLoadingBarApi | null>({ start, finish, error })
+provide(RS_LOADING_BAR_KEY, api)
+
+watch(
+  () => props.progress,
+  (value) => {
+    if (value === undefined) return
+    visible.value = value > 0 && value < 100
+    if (value >= 100) {
+      visible.value = true
+      window.setTimeout(() => {
+        visible.value = false
+      }, 280)
+    }
+  },
+)
+
+onBeforeUnmount(() => {
+  clearTrickle()
+  api.value = null
+})
+
+defineExpose({
+  start,
+  finish,
+  error,
+})
+</script>
+
+<template>
+  <!--
+    默认插槽内的后代可通过 useRsLoadingBar() 获取 API。
+    进度条本身 fixed 定位，不参与布局。
+  -->
+  <div
+    class="rs-loading-bar"
+    :class="{ 'rs-loading-bar--visible': isVisible }"
+    :role="isVisible ? 'progressbar' : undefined"
+    :aria-hidden="isVisible ? undefined : 'true'"
+    :aria-valuenow="isVisible ? Math.round(displayProgress) : undefined"
+    :aria-valuemin="isVisible ? 0 : undefined"
+    :aria-valuemax="isVisible ? 100 : undefined"
+  >
+    <div class="rs-loading-bar__peg" :style="barStyle" />
+  </div>
+  <slot />
+</template>
+
+<style scoped>
+.rs-loading-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--rs-z-loading-bar);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.rs-loading-bar--visible {
+  opacity: 1;
+}
+
+.rs-loading-bar__peg {
+  height: 2px;
+  transition:
+    width 0.2s ease,
+    background-color 0.2s ease;
+}
+</style>

package/src/components/RsMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch } from 'vue'
+import { computed, watch } from 'vue'
 import { useRsI18n } from '../composables/useRsI18n'
 import {
   findMenuParentKeys,
@@ -16,10 +16,13 @@ const props = withDefaults(
     items: RsMenuData
     mode?: 'vertical' | 'horizontal'
     collapsed?: boolean
+    /** 选中叶子时是否同时高亮祖先父级（仅字体色，无背景）；默认 false 只高亮叶子 */
+    highlightParent?: boolean
   }>(),
   {
     mode: 'vertical',
     collapsed: false,
+    highlightParent: false,
   },
 )
 
@@ -29,6 +32,11 @@ const emit = defineEmits<{
 
 const { t } = useRsI18n()
 
+/** collapsed 仅对垂直模式生效；水平模式忽略，避免空气泡子菜单 */
+const isCollapsedVertical = computed(
+  () => props.mode === 'vertical' && props.collapsed,
+)
+
 function onSelect(key: string) {
   model.value = key
   emit('select', key)
@@ -67,19 +75,20 @@ watch(
 <template>
   <nav
     class="rs-menu"
-    :class="[`rs-menu--${mode}`, { 'rs-menu--collapsed': collapsed }]"
+    :class="[`rs-menu--${mode}`, { 'rs-menu--collapsed': isCollapsedVertical }]"
     :aria-label="t('menu.label')"
   >
     <ul class="rs-menu__root-list">
       <template v-for="(entry, index) in items" :key="index">
         <li v-if="isMenuItemGroup(entry)" class="rs-menu__group">
-          <span v-if="!collapsed" class="rs-menu__group-label">{{ entry.label }}</span>
+          <span v-if="!isCollapsedVertical" class="rs-menu__group-label">{{ entry.label }}</span>
           <RsMenuItems
             :items="entry.children"
             :active-key="model"
             :open-keys="openKeys"
-            :collapsed="collapsed"
+            :collapsed="isCollapsedVertical"
             :mode="mode"
+            :highlight-parent="highlightParent"
             @select="onSelect"
             @toggle-open="onToggleOpen"
           />
@@ -90,8 +99,9 @@ watch(
             :items="[entry]"
             :active-key="model"
             :open-keys="openKeys"
-            :collapsed="collapsed"
+            :collapsed="isCollapsedVertical"
             :mode="mode"
+            :highlight-parent="highlightParent"
             @select="onSelect"
             @toggle-open="onToggleOpen"
           />
@@ -159,14 +169,14 @@ watch(
   align-items: center;
   gap: 0.5rem;
   width: 100%;
-  min-height: var(--rs-control-height-md);
+  min-height: var(--rs-menu-item-height);
   padding: 0 0.5rem;
   padding-left: calc(0.5rem + var(--rs-menu-depth, 0) * 0.875rem);
   border: none;
-  border-radius: var(--rs-radius-sm);
+  border-radius: var(--rs-menu-item-radius);
   background: transparent;
-  color: var(--rs-muted);
-  font-size: var(--rs-font-size-sm);
+  color: var(--rs-menu-item-fg);
+  font-size: var(--rs-menu-item-font-size);
   text-align: left;
   cursor: pointer;
   transition:
@@ -188,23 +198,71 @@ watch(
 .rs-menu--collapsed .rs-menu__list--nested {
   display: none;
 }
+.rs-menu__flyout {
+  z-index: var(--rs-z-dropdown);
+  min-width: 10rem;
+  max-width: min(16rem, 90vw);
+  padding: 0.25rem;
+  border-radius: var(--rs-radius-sm);
+  border: 1px solid var(--rs-border);
+  background: var(--rs-surface-elevated);
+  box-shadow: var(--rs-shadow);
+  outline: none;
+}
+.rs-menu__flyout-title {
+  display: block;
+  padding: 0.375rem 0.5rem 0.25rem;
+  margin-bottom: 0.125rem;
+  border-bottom: 1px solid var(--rs-border);
+  font-size: var(--rs-font-size-xs);
+  font-weight: 600;
+  color: var(--rs-muted);
+  letter-spacing: 0.04em;
+  line-height: var(--rs-line-height-tight);
+  user-select: none;
+}
+.rs-menu__flyout .rs-menu__list--nested {
+  display: flex;
+}
 .rs-menu__item:hover:not(:disabled):not(.rs-menu__item--active) {
-  color: var(--rs-text);
-  background: var(--rs-surface-hover);
+  color: var(--rs-menu-item-fg-hover);
+  background: var(--rs-menu-item-bg-hover);
 }
 .rs-menu__item:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
 .rs-menu__item--active {
-  color: var(--rs-primary);
-  background: color-mix(in srgb, var(--rs-primary) 12%, transparent);
-  font-weight: 500;
+  color: var(--rs-menu-item-active-fg);
+  background: var(--rs-menu-item-active-bg);
+  font-weight: var(--rs-menu-item-active-weight);
+}
+/* 子菜单选中时父级仅字体高亮，不加背景 */
+.rs-menu__item--active-parent {
+  color: var(--rs-menu-item-active-parent-fg);
+  background: var(--rs-menu-item-active-parent-bg);
+  font-weight: var(--rs-menu-item-active-weight);
+}
+.rs-menu__item--active-parent:hover:not(:disabled) {
+  color: var(--rs-menu-item-active-parent-fg);
+  background: var(--rs-menu-item-bg-hover);
 }
 .rs-menu__item:disabled {
   opacity: 0.38;
   cursor: not-allowed;
 }
+/** 固定图标列宽：有/无图标时文案起点一致，嵌套缩进再叠在左侧 padding 上 */
+.rs-menu__icon-slot {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+}
+.rs-menu__icon {
+  display: block;
+}
 .rs-menu__label {
   flex: 1;
   min-width: 0;
@@ -239,7 +297,7 @@ watch(
   position: absolute;
   top: calc(100% + 0.25rem);
   left: 0;
-  z-index: 50;
+  z-index: var(--rs-z-dropdown);
   min-width: 10rem;
   padding: 0.25rem;
   border-radius: var(--rs-radius-sm);

package/src/components/RsMenuItems.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
 import {
   CollapsibleContent,
   CollapsibleRoot,
   CollapsibleTrigger,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger,
 } from './reka'
 import { useRsI18n } from '../composables/useRsI18n'
-import type { RsMenuItem } from './menu-utils'
+import { menuItemContainsKey, type RsMenuItem } from './menu-utils'
 import RsIcon from './RsIcon.vue'
 import RsMenuItems from './RsMenuItems.vue'
 
@@ -18,11 +22,14 @@ const props = withDefaults(
     collapsed?: boolean
     mode?: 'vertical' | 'horizontal'
     depth?: number
+    /** 选中叶子时是否同时高亮祖先父级（仅字体色，无背景） */
+    highlightParent?: boolean
   }>(),
   {
     collapsed: false,
     mode: 'vertical',
     depth: 0,
+    highlightParent: false,
   },
 )
 
@@ -35,14 +42,34 @@ const { t } = useRsI18n()
 const isCollapsedVertical = computed(() => props.mode === 'vertical' && props.collapsed)
 const canExpandSubmenu = computed(() => !isCollapsedVertical.value)
 
+/** 垂直折叠态：当前悬停展开的子菜单 key */
+const flyoutKey = ref<string | null>(null)
+let flyoutCloseTimer: ReturnType<typeof setTimeout> | undefined
+
 function isOpen(key: string) {
   return props.openKeys.includes(key)
 }
 
-function isActive(key: string) {
+function isExactActive(key: string) {
   return props.activeKey === key
 }
 
+/** 开启 highlightParent 时：当前项是选中叶子的祖先（不含自身精确选中） */
+function isParentActive(item: RsMenuItem) {
+  if (!props.highlightParent || !props.activeKey || !item.children?.length) {
+    return false
+  }
+  if (item.key === props.activeKey) {
+    return false
+  }
+  return menuItemContainsKey(item, props.activeKey)
+}
+
+/** 叶子精确选中，或开启 highlightParent 时祖先也视为高亮 */
+function isActiveItem(item: RsMenuItem) {
+  return isExactActive(item.key) || isParentActive(item)
+}
+
 function selectLeaf(item: RsMenuItem) {
   if (item.disabled) return
   emit('select', item.key)
@@ -52,6 +79,57 @@ function toggleOpen(key: string, open: boolean) {
   if (!canExpandSubmenu.value) return
   emit('toggle-open', key, open)
 }
+
+function clearFlyoutCloseTimer() {
+  if (flyoutCloseTimer !== undefined) {
+    clearTimeout(flyoutCloseTimer)
+    flyoutCloseTimer = undefined
+  }
+}
+
+function openFlyout(key: string) {
+  clearFlyoutCloseTimer()
+  flyoutKey.value = key
+}
+
+function scheduleCloseFlyout() {
+  clearFlyoutCloseTimer()
+  // 短延迟以便指针从触发器移入浮层时不闪断
+  flyoutCloseTimer = setTimeout(() => {
+    flyoutKey.value = null
+    flyoutCloseTimer = undefined
+  }, 120)
+}
+
+function closeFlyout() {
+  clearFlyoutCloseTimer()
+  flyoutKey.value = null
+}
+
+function onFlyoutTriggerClick(item: RsMenuItem) {
+  if (item.disabled) return
+  if (flyoutKey.value === item.key) {
+    closeFlyout()
+    return
+  }
+  openFlyout(item.key)
+}
+
+function onFlyoutOpenChange(open: boolean) {
+  // 仅同步关闭；打开由 mouseenter / click 驱动，避免关闭后焦点回写再次打开
+  if (!open) {
+    closeFlyout()
+  }
+}
+
+function onFlyoutSelect(key: string) {
+  closeFlyout()
+  emit('select', key)
+}
+
+onBeforeUnmount(() => {
+  clearFlyoutCloseTimer()
+})
 </script>
 
 <template>
@@ -61,7 +139,7 @@ function toggleOpen(key: string, open: boolean) {
         class="rs-menu__entry"
         :class="{
           'rs-menu__entry--submenu': !!item.children?.length,
-          'rs-menu__entry--active': isActive(item.key),
+          'rs-menu__entry--active': isActiveItem(item),
           'rs-menu__entry--disabled': item.disabled,
         }"
         :style="{
@@ -76,12 +154,17 @@ function toggleOpen(key: string, open: boolean) {
         >
           <CollapsibleTrigger
             class="rs-menu__item rs-menu__item--submenu-trigger"
-            :class="{ 'rs-menu__item--active': isActive(item.key) }"
+            :class="{
+              'rs-menu__item--active': isExactActive(item.key),
+              'rs-menu__item--active-parent': isParentActive(item),
+            }"
             :disabled="item.disabled"
             :aria-label="collapsed ? item.label : undefined"
             :title="collapsed ? item.label : undefined"
           >
-            <RsIcon v-if="item.icon" :name="item.icon" :size="16" class="rs-menu__icon" />
+            <span v-if="!collapsed || item.icon" class="rs-menu__icon-slot" aria-hidden="true">
+              <RsIcon v-if="item.icon" :name="item.icon" :size="16" class="rs-menu__icon" />
+            </span>
             <span v-if="!collapsed" class="rs-menu__label">{{ item.label }}</span>
             <RsIcon
               v-if="!collapsed"
@@ -99,24 +182,79 @@ function toggleOpen(key: string, open: boolean) {
               :collapsed="collapsed"
               :mode="mode"
               :depth="depth + 1"
+              :highlight-parent="highlightParent"
               @select="emit('select', $event)"
               @toggle-open="(key, open) => emit('toggle-open', key, open)"
             />
           </CollapsibleContent>
         </CollapsibleRoot>
 
+        <PopoverRoot
+          v-else-if="item.children?.length && isCollapsedVertical"
+          :open="flyoutKey === item.key"
+          @update:open="onFlyoutOpenChange"
+        >
+          <PopoverTrigger as-child>
+            <button
+              type="button"
+              class="rs-menu__item rs-menu__item--submenu-trigger"
+              :class="{
+                'rs-menu__item--active': isExactActive(item.key),
+                'rs-menu__item--active-parent': isParentActive(item),
+              }"
+              :disabled="item.disabled"
+              :aria-label="item.label"
+              :aria-expanded="flyoutKey === item.key"
+              :aria-haspopup="true"
+              @mouseenter="!item.disabled && openFlyout(item.key)"
+              @mouseleave="scheduleCloseFlyout"
+              @click="onFlyoutTriggerClick(item)"
+            >
+              <RsIcon v-if="item.icon" :name="item.icon" :size="16" class="rs-menu__icon" />
+            </button>
+          </PopoverTrigger>
+          <PopoverPortal v-if="flyoutKey === item.key">
+            <PopoverContent
+              class="rs-menu__flyout"
+              side="right"
+              align="start"
+              :side-offset="8"
+              :collision-padding="8"
+              @mouseenter="openFlyout(item.key)"
+              @mouseleave="scheduleCloseFlyout"
+              @escape-key-down="closeFlyout"
+              @pointer-down-outside="closeFlyout"
+            >
+              <div class="rs-menu__flyout-title">{{ item.label }}</div>
+              <RsMenuItems
+                :items="item.children"
+                :active-key="activeKey"
+                :open-keys="openKeys"
+                :collapsed="false"
+                mode="vertical"
+                :depth="0"
+                :highlight-parent="highlightParent"
+                @select="onFlyoutSelect"
+                @toggle-open="(key, open) => emit('toggle-open', key, open)"
+              />
+            </PopoverContent>
+          </PopoverPortal>
+        </PopoverRoot>
+
         <button
           v-else
           type="button"
           class="rs-menu__item"
-          :class="{ 'rs-menu__item--active': isActive(item.key) }"
+          :class="{ 'rs-menu__item--active': isExactActive(item.key) }"
           :disabled="item.disabled"
-          :aria-current="isActive(item.key) ? 'page' : undefined"
+          :aria-current="isExactActive(item.key) ? 'page' : undefined"
           :aria-label="collapsed ? item.label : undefined"
           :title="collapsed ? item.label : undefined"
           @click="selectLeaf(item)"
         >
-          <RsIcon v-if="item.icon" :name="item.icon" :size="16" class="rs-menu__icon" />
+          <span v-if="!collapsed || item.icon" class="rs-menu__icon-slot" aria-hidden="true">
+            <RsIcon v-if="item.icon" :name="item.icon" :size="16" class="rs-menu__icon" />
+          </span>
           <span v-if="!collapsed" class="rs-menu__label">{{ item.label }}</span>
         </button>
       </div>