niuma-ui 1.0.0

package/src/components/RsConfirmDialog.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import {
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle,
+} from './reka'
+import RsButton from './RsButton.vue'
+import { useRsI18n } from '../composables/useRsI18n'
+import type { RsFeedbackTone } from './overlay-utils'
+
+const open = defineModel<boolean>('open', { default: false })
+
+withDefaults(
+  defineProps<{
+    title?: string
+    description?: string
+    tone?: RsFeedbackTone
+    confirmText?: string
+    cancelText?: string
+    confirmVariant?: 'primary' | 'danger'
+    showOverlay?: boolean
+    /** AlertDialogPortal 挂载目标（id 选择器或 Element） */
+    teleportTo?: string | HTMLElement
+  }>(),
+  {
+    tone: 'danger',
+    confirmVariant: 'danger',
+    showOverlay: false,
+  },
+)
+
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+
+const { t } = useRsI18n()
+
+function onConfirm(): void {
+  emit('confirm')
+  open.value = false
+}
+
+function onCancel(): void {
+  emit('cancel')
+}
+</script>
+
+<template>
+  <AlertDialogRoot v-model:open="open">
+    <AlertDialogPortal :to="teleportTo">
+      <AlertDialogOverlay v-if="showOverlay" class="rs-confirm-dialog__overlay" />
+      <AlertDialogContent
+        class="rs-confirm-dialog__content"
+        :disable-outside-pointer-events="true"
+      >
+        <div class="rs-confirm-dialog__icon" :class="`rs-confirm-dialog__icon--${tone}`">
+          !
+        </div>
+        <div class="rs-confirm-dialog__main">
+          <AlertDialogTitle class="rs-confirm-dialog__title">
+            {{ title ?? t('confirm.title') }}
+          </AlertDialogTitle>
+          <AlertDialogDescription class="rs-confirm-dialog__description">
+            {{ description ?? t('confirm.description') }}
+          </AlertDialogDescription>
+          <footer class="rs-confirm-dialog__footer">
+            <AlertDialogCancel as-child>
+              <RsButton variant="default" @click="onCancel">
+                {{ cancelText ?? t('common.cancel') }}
+              </RsButton>
+            </AlertDialogCancel>
+            <AlertDialogAction as-child>
+              <RsButton :variant="confirmVariant" @click="onConfirm">
+                {{ confirmText ?? t('common.confirm') }}
+              </RsButton>
+            </AlertDialogAction>
+          </footer>
+        </div>
+      </AlertDialogContent>
+    </AlertDialogPortal>
+  </AlertDialogRoot>
+</template>
+
+<style>
+.rs-confirm-dialog__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--rs-z-modal);
+  background: var(--rs-dialog-overlay-bg);
+  backdrop-filter: blur(var(--rs-dialog-overlay-blur)) saturate(120%);
+  -webkit-backdrop-filter: blur(var(--rs-dialog-overlay-blur)) saturate(120%);
+}
+.rs-confirm-dialog__content {
+  position: fixed;
+  left: 50%;
+  top: calc(
+    var(--rs-dialog-inset-top, 1rem) +
+      (100vh - var(--rs-dialog-inset-top, 1rem) - var(--rs-dialog-inset-bottom, 1rem)) / 2
+  );
+  z-index: calc(var(--rs-z-modal) + 1);
+  display: flex;
+  gap: var(--rs-space-lg);
+  width: calc(100vw - 2 * var(--rs-dialog-inset-x, 1rem));
+  max-width: 28rem;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  padding: var(--rs-space-xl);
+  border: 1px solid var(--rs-dialog-border);
+  border-radius: var(--rs-radius-lg);
+  background: var(--rs-dialog-body-bg);
+  color: var(--rs-text);
+  box-shadow: var(--rs-dialog-shadow);
+  outline: none;
+}
+[data-rs-theme='light'] .rs-confirm-dialog__content {
+  background: color-mix(in srgb, var(--rs-dialog-bg) 94%, transparent);
+  backdrop-filter: blur(24px) saturate(180%);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+}
+.rs-confirm-dialog__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  flex: 0 0 auto;
+  border-radius: var(--rs-radius);
+  font-weight: 700;
+}
+.rs-confirm-dialog__icon--danger {
+  background: var(--rs-danger-container);
+  color: var(--rs-on-danger-container);
+}
+.rs-confirm-dialog__icon--warning {
+  background: var(--rs-warning-container);
+  color: var(--rs-on-warning-container);
+}
+.rs-confirm-dialog__icon--success {
+  background: var(--rs-success-container);
+  color: var(--rs-on-success-container);
+}
+.rs-confirm-dialog__icon--info,
+.rs-confirm-dialog__icon--default {
+  background: var(--rs-info-container);
+  color: var(--rs-on-info-container);
+}
+.rs-confirm-dialog__main {
+  min-width: 0;
+  flex: 1;
+}
+.rs-confirm-dialog__title {
+  margin: 0;
+  font-size: var(--rs-font-size-base);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--rs-dialog-title-fg);
+}
+.rs-confirm-dialog__description {
+  margin: var(--rs-space-sm) 0 0;
+  color: var(--rs-dialog-description-fg);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-normal);
+}
+.rs-confirm-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--rs-space-sm);
+  margin-top: var(--rs-space-xl);
+  padding-top: var(--rs-space-lg);
+  border-top: 1px solid var(--rs-dialog-separator);
+}
+</style>

package/src/components/RsContainer.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/** 支持的响应式断点，语义与常见 SaaS 前端一致。 */
+export type RsContainerBreakpoint = 'sm' | 'md' | 'lg' | 'xl'
+
+/** 内容区最大宽度档位，对应 `--rs-container-max-*` token。 */
+export type RsContainerMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'full'
+
+/** 水平内边距档位，对应 `--rs-space-*` token。 */
+export type RsContainerPadding = 'none' | 'sm' | 'md' | 'lg'
+
+/** 栅格间距档位，对应 `--rs-space-*` token。 */
+export type RsContainerGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+/** 断点映射配置，用于 maxWidth、padding、columns、gap。 */
+export type RsContainerResponsive<T> = Partial<Record<RsContainerBreakpoint, T>>
+
+/** 支持固定值或断点映射。 */
+export type RsContainerMaybeResponsive<T> = T | RsContainerResponsive<T>
+
+const props = withDefaults(
+  defineProps<{
+    /** 最大内容宽度；`fluid` 为 true 时忽略。 */
+    maxWidth?: RsContainerMaybeResponsive<RsContainerMaxWidth>
+    /** 水平内边距。 */
+    padding?: RsContainerMaybeResponsive<RsContainerPadding>
+    /** 是否在父级内水平居中。 */
+    centered?: boolean
+    /** 占满父级宽度，忽略 `maxWidth`。 */
+    fluid?: boolean
+    /** 根元素标签名。 */
+    tag?: string
+    /** 启用栅格布局；未传 `columns` 时默认为 12 栅格。 */
+    grid?: boolean
+    /** 栅格列数，支持响应式。 */
+    columns?: RsContainerMaybeResponsive<number>
+    /** 栅格间距，支持响应式。 */
+    gap?: RsContainerMaybeResponsive<RsContainerGap>
+  }>(),
+  {
+    maxWidth: 'lg',
+    padding: 'md',
+    centered: true,
+    fluid: false,
+    tag: 'div',
+    grid: false,
+    columns: 12,
+    gap: 'md',
+  },
+)
+
+const BREAKPOINTS: RsContainerBreakpoint[] = ['sm', 'md', 'lg', 'xl']
+
+const isResponsiveObject = <T,>(value: RsContainerMaybeResponsive<T>): value is RsContainerResponsive<T> =>
+  typeof value === 'object' && value !== null
+
+const tokenToSpaceVar: Record<RsContainerGap | RsContainerPadding, string> = {
+  none: '0',
+  xs: 'var(--rs-space-xs)',
+  sm: 'var(--rs-space-sm)',
+  md: 'var(--rs-space-md)',
+  lg: 'var(--rs-space-lg)',
+  xl: 'var(--rs-space-xl)',
+}
+
+const tokenToContainerVar: Record<RsContainerMaxWidth, string> = {
+  sm: 'var(--rs-container-max-sm)',
+  md: 'var(--rs-container-max-md)',
+  lg: 'var(--rs-container-max-lg)',
+  xl: 'var(--rs-container-max-xl)',
+  full: 'var(--rs-container-max-full)',
+}
+
+const rootClass = computed(() => [
+  'rs-container',
+  { 'rs-container--centered': props.centered, 'rs-container--grid': props.grid },
+])
+
+const rootStyle = computed(() => {
+  const style: Record<string, string | number> = {}
+
+  if (props.fluid) {
+    style['--rs-container-max-current'] = 'none'
+  } else if (isResponsiveObject(props.maxWidth)) {
+    const responsiveMaxWidth = props.maxWidth as RsContainerResponsive<RsContainerMaxWidth>
+    BREAKPOINTS.forEach((bp) => {
+      const value = responsiveMaxWidth[bp]
+      if (value) style[`--rs-container-max-${bp}`] = tokenToContainerVar[value]
+    })
+  } else {
+    style['--rs-container-max-current'] = tokenToContainerVar[props.maxWidth]
+  }
+
+  if (isResponsiveObject(props.padding)) {
+    const responsivePadding = props.padding as RsContainerResponsive<RsContainerPadding>
+    BREAKPOINTS.forEach((bp) => {
+      const value = responsivePadding[bp]
+      if (value) style[`--rs-container-padding-${bp}`] = tokenToSpaceVar[value]
+    })
+  } else {
+    style['--rs-container-padding-current'] = tokenToSpaceVar[props.padding]
+  }
+
+  if (props.grid) {
+    if (isResponsiveObject(props.columns)) {
+      const responsiveColumns = props.columns as RsContainerResponsive<number>
+      BREAKPOINTS.forEach((bp) => {
+        const value = responsiveColumns[bp]
+        if (typeof value === 'number') style[`--rs-container-columns-${bp}`] = value
+      })
+    } else {
+      style['--rs-container-columns-current'] = props.columns
+    }
+
+    if (isResponsiveObject(props.gap)) {
+      const responsiveGap = props.gap as RsContainerResponsive<RsContainerGap>
+      BREAKPOINTS.forEach((bp) => {
+        const value = responsiveGap[bp]
+        if (value) style[`--rs-container-gap-${bp}`] = tokenToSpaceVar[value]
+      })
+    } else {
+      style['--rs-container-gap-current'] = tokenToSpaceVar[props.gap]
+    }
+  }
+
+  return style
+})
+</script>
+
+<template>
+  <component :is="tag" :class="rootClass" :style="rootStyle">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.rs-container {
+  width: 100%;
+  box-sizing: border-box;
+  max-width: var(--rs-container-max-current, var(--rs-container-max-lg));
+  padding-inline: var(--rs-container-padding-current, var(--rs-space-md));
+}
+.rs-container--centered {
+  margin-inline: auto;
+}
+.rs-container--grid {
+  display: grid;
+  grid-template-columns: repeat(var(--rs-container-columns-current, 12), minmax(0, 1fr));
+  gap: var(--rs-container-gap-current, var(--rs-space-md));
+}
+
+@media (width >= 40rem) {
+  .rs-container {
+    max-width: var(--rs-container-max-sm, var(--rs-container-max-current, var(--rs-container-max-lg)));
+    padding-inline: var(--rs-container-padding-sm, var(--rs-container-padding-current, var(--rs-space-md)));
+  }
+  .rs-container--grid {
+    grid-template-columns: repeat(
+      var(--rs-container-columns-sm, var(--rs-container-columns-current, 12)),
+      minmax(0, 1fr)
+    );
+    gap: var(--rs-container-gap-sm, var(--rs-container-gap-current, var(--rs-space-md)));
+  }
+}
+
+@media (width >= 48rem) {
+  .rs-container {
+    max-width: var(--rs-container-max-md, var(--rs-container-max-sm, var(--rs-container-max-current)));
+    padding-inline: var(
+      --rs-container-padding-md,
+      var(--rs-container-padding-sm, var(--rs-container-padding-current))
+    );
+  }
+  .rs-container--grid {
+    grid-template-columns: repeat(
+      var(--rs-container-columns-md, var(--rs-container-columns-sm, var(--rs-container-columns-current, 12))),
+      minmax(0, 1fr)
+    );
+    gap: var(--rs-container-gap-md, var(--rs-container-gap-sm, var(--rs-container-gap-current)));
+  }
+}
+
+@media (width >= 64rem) {
+  .rs-container {
+    max-width: var(
+      --rs-container-max-lg,
+      var(--rs-container-max-md, var(--rs-container-max-sm, var(--rs-container-max-current)))
+    );
+    padding-inline: var(
+      --rs-container-padding-lg,
+      var(--rs-container-padding-md, var(--rs-container-padding-sm, var(--rs-container-padding-current)))
+    );
+  }
+  .rs-container--grid {
+    grid-template-columns: repeat(
+      var(
+        --rs-container-columns-lg,
+        var(--rs-container-columns-md, var(--rs-container-columns-sm, var(--rs-container-columns-current, 12)))
+      ),
+      minmax(0, 1fr)
+    );
+    gap: var(--rs-container-gap-lg, var(--rs-container-gap-md, var(--rs-container-gap-sm, var(--rs-container-gap-current))));
+  }
+}
+
+@media (width >= 80rem) {
+  .rs-container {
+    max-width: var(
+      --rs-container-max-xl,
+      var(--rs-container-max-lg, var(--rs-container-max-md, var(--rs-container-max-sm, var(--rs-container-max-current))))
+    );
+    padding-inline: var(
+      --rs-container-padding-xl,
+      var(--rs-container-padding-lg, var(--rs-container-padding-md, var(--rs-container-padding-sm, var(--rs-container-padding-current))))
+    );
+  }
+  .rs-container--grid {
+    grid-template-columns: repeat(
+      var(
+        --rs-container-columns-xl,
+        var(
+          --rs-container-columns-lg,
+          var(--rs-container-columns-md, var(--rs-container-columns-sm, var(--rs-container-columns-current, 12)))
+        )
+      ),
+      minmax(0, 1fr)
+    );
+    gap: var(
+      --rs-container-gap-xl,
+      var(--rs-container-gap-lg, var(--rs-container-gap-md, var(--rs-container-gap-sm, var(--rs-container-gap-current))))
+    );
+  }
+}
+</style>

package/src/components/RsContextMenu.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import {
+  ContextMenuContent,
+  ContextMenuPortal,
+  ContextMenuRoot,
+  ContextMenuTrigger,
+} from './reka'
+import type { RsContextMenuItem } from './context-menu-utils'
+import RsContextMenuItems from './RsContextMenuItems.vue'
+
+defineProps<{
+  items: RsContextMenuItem[]
+  /** 禁用时不拦截右键事件，直接透传 slot，浏览器原生菜单正常显示 */
+  disabled?: boolean
+}>()
+
+/**
+ * 展开状态。不绑定时组件自行维护（与原行为一致）；
+ * 绑定后可由外部主动关闭——例如菜单所依赖的数据已失效时。
+ */
+const open = defineModel<boolean>('open', { default: false })
+
+const emit = defineEmits<{
+  select: [key: string]
+}>()
+
+function onSelect(item: RsContextMenuItem) {
+  emit('select', item.key)
+}
+</script>
+
+<template>
+  <ContextMenuRoot v-if="!disabled" v-model:open="open">
+    <ContextMenuTrigger class="rs-ctx-trigger" @contextmenu.stop>
+      <slot />
+    </ContextMenuTrigger>
+    <ContextMenuPortal>
+      <ContextMenuContent
+        class="rs-context-menu__content rs-native-scrollbar rs-motion-reduce"
+        :side-offset="4"
+        :collision-padding="8"
+      >
+        <RsContextMenuItems :items="items" @select="onSelect" />
+      </ContextMenuContent>
+    </ContextMenuPortal>
+  </ContextMenuRoot>
+  <slot v-else />
+</template>
+
+<style>
+/* 触发器包装：display:contents 令 span 不产生盒模型，不影响父级 flex/grid 布局。
+   ContextMenuTrigger 默认渲染为 span，加此 class 使其透明于布局。 */
+.rs-ctx-trigger {
+  display: contents;
+}
+
+/* ── 菜单容器：macOS 毛玻璃浮层 ── */
+.rs-context-menu__content,
+.rs-context-menu__sub-content {
+  z-index: var(--rs-z-dropdown);
+  box-sizing: border-box;
+  min-width: 11rem;
+  max-width: min(22rem, calc(100vw - 1rem));
+  /* 多项 / 多级时贴边：用 popper 可用高度限制，避免溢出视口无法点选 */
+  max-height: var(--reka-context-menu-content-available-height, calc(100vh - 1rem));
+  padding: 5px;
+  border-radius: 10px;
+  border: 0.5px solid var(--rs-ctx-border);
+  background: var(--rs-ctx-bg);
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  box-shadow: var(--rs-ctx-shadow);
+  outline: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* 主菜单入场动画（从鼠标位置展开） */
+.rs-context-menu__content {
+  transform-origin: var(--reka-context-menu-content-transform-origin, top left);
+  animation: rs-ctx-in 0.13s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+
+/* 子菜单：仅淡入，避免多层快速切换时 scale 造成抖动感 */
+.rs-context-menu__sub-content {
+  transform-origin: var(--reka-popper-transform-origin, left center);
+  animation: rs-ctx-sub-in 0.1s ease-out;
+}
+
+@keyframes rs-ctx-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes rs-ctx-sub-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ── 菜单项 ── */
+.rs-context-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 0 8px 0 0;
+  height: 26px;
+  border-radius: 6px;
+  font-size: 13px;
+  line-height: 1;
+  color: var(--rs-text);
+  cursor: default;
+  outline: none;
+  user-select: none;
+  transition:
+    background 0.08s,
+    color 0.08s;
+}
+
+/* 图标占位列（固定 28px，居中对齐） */
+.rs-context-menu__icon-cell {
+  flex-shrink: 0;
+  width: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-ctx-icon);
+}
+
+/* 文本 */
+.rs-context-menu__label {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 键盘快捷键 */
+.rs-context-menu__shortcut {
+  flex-shrink: 0;
+  margin-left: 16px;
+  font-size: 12px;
+  color: var(--rs-ctx-shortcut);
+  letter-spacing: 0.02em;
+  font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
+}
+
+/* 子菜单展开箭头 */
+.rs-context-menu__arrow {
+  flex-shrink: 0;
+  margin-left: 6px;
+  color: var(--rs-ctx-icon);
+}
+
+/* 悬停 / 子菜单已展开：蓝色高亮条（macOS 主色调） */
+.rs-context-menu__item[data-highlighted],
+.rs-context-menu__item[data-state='open'] {
+  background: var(--rs-primary);
+  color: #ffffff;
+}
+
+.rs-context-menu__item[data-highlighted] .rs-context-menu__icon-cell,
+.rs-context-menu__item[data-highlighted] .rs-context-menu__shortcut,
+.rs-context-menu__item[data-highlighted] .rs-context-menu__arrow,
+.rs-context-menu__item[data-state='open'] .rs-context-menu__icon-cell,
+.rs-context-menu__item[data-state='open'] .rs-context-menu__shortcut,
+.rs-context-menu__item[data-state='open'] .rs-context-menu__arrow {
+  color: rgba(255 255 255 / 0.75);
+}
+
+/* 危险项 */
+.rs-context-menu__item--danger {
+  color: var(--rs-danger);
+}
+
+.rs-context-menu__item--danger .rs-context-menu__icon-cell {
+  color: var(--rs-danger);
+}
+
+.rs-context-menu__item--danger[data-highlighted],
+.rs-context-menu__item--danger[data-state='open'] {
+  background: var(--rs-danger);
+  color: #ffffff;
+}
+
+.rs-context-menu__item--danger[data-highlighted] .rs-context-menu__icon-cell,
+.rs-context-menu__item--danger[data-state='open'] .rs-context-menu__icon-cell {
+  color: rgba(255 255 255 / 0.75);
+}
+
+/* 禁用态 */
+.rs-context-menu__item[data-disabled] {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+
+/* 分隔线：更细腻 */
+.rs-context-menu__separator {
+  height: 1px;
+  margin: 5px 0;
+  background: var(--rs-ctx-separator);
+}
+
+/* ── 主题变量：深色 ── */
+:root,
+[data-rs-theme='dark'] {
+  --rs-ctx-bg: rgba(40, 40, 42, 0.85);
+  --rs-ctx-border: rgba(255, 255, 255, 0.13);
+  --rs-ctx-shadow:
+    0 0 0 0.5px rgba(255, 255, 255, 0.08),
+    0 2px 8px rgba(0, 0, 0, 0.4),
+    0 8px 32px rgba(0, 0, 0, 0.55);
+  --rs-ctx-icon: rgba(235, 235, 245, 0.5);
+  --rs-ctx-shortcut: rgba(235, 235, 245, 0.4);
+  --rs-ctx-separator: rgba(255, 255, 255, 0.1);
+}
+
+/* ── 主题变量：亮色 ── */
+[data-rs-theme='light'] {
+  --rs-ctx-bg: rgba(255, 255, 255, 0.88);
+  --rs-ctx-border: rgba(0, 0, 0, 0.1);
+  --rs-ctx-shadow:
+    0 0 0 0.5px rgba(0, 0, 0, 0.06),
+    0 2px 6px rgba(0, 0, 0, 0.12),
+    0 8px 28px rgba(0, 0, 0, 0.18);
+  --rs-ctx-icon: rgba(60, 60, 67, 0.5);
+  --rs-ctx-shortcut: rgba(60, 60, 67, 0.4);
+  --rs-ctx-separator: rgba(60, 60, 67, 0.1);
+}
+</style>