niuma-ui 1.0.1 → 1.0.2

package/src/components/RsCard.vue

@@ -2,33 +2,77 @@
 import { computed, useSlots } from 'vue'
 import type { RsRadius } from '../theme/types'
 import { Primitive } from './reka'
-import { rsRadiusCss, useResolvedRsRadius } from './resolve-radius'
+import { rsRadiusCss } from './resolve-radius'
 
+/**
+ * 卡片表面风格。
+ * - grouped / plain / glass：偏 macOS 分层与仪表盘
+ * - outlined / filled：偏 Material 3，后台信息面板常用 outlined
+ */
 export type RsCardVariant = 'grouped' | 'plain' | 'outlined' | 'filled' | 'glass'
 
+/**
+ * 卡片密度（疏密），映射 header/body padding 与标题字号。
+ * 与控件 `RsComponentSize`（高度）无关，勿混用。
+ */
+export type RsCardSize = 'sm' | 'md' | 'lg'
+
 const props = withDefaults(
   defineProps<{
     as?: string
     title?: string
     description?: string
+    /** body 是否使用密度对应的内边距；false 时贴边，适合表格/图表 */
     padding?: boolean
     elevated?: boolean
-    /** grouped=mac 分组面板；plain=mac 小组件；outlined/filled=Material 3；glass=mac 毛玻璃 */
+    /**
+     * 无外框：去掉边框、阴影与标题底部分隔，背景透明。
+     * 适合嵌在页面内容区、业务无需 :deep 清边框的场景。
+     */
+    borderless?: boolean
+    /** grouped=mac 分组；plain=KPI；outlined/filled=MD3；glass=毛玻璃 */
     variant?: RsCardVariant
-    /** 圆角档位；默认 lg。直角面板传 `none`。 */
+    /**
+     * 密度：sm 后台紧凑 / md 默认（后台面板） / lg 前台宽松。
+     * @default md
+     */
+    size?: RsCardSize
+    /**
+     * 圆角档位。卡片表面独立于 ConfigProvider.controlRadius，
+     * 避免表单全局 sm 圆角把面板一并压扁。
+     * @default md
+     */
     radius?: RsRadius
+    /** hover 时轻微抬升阴影，适合可点击/可选中卡片 */
+    hoverable?: boolean
+    /**
+     * 裁切溢出（封面圆角、内部绝对定位）。
+     * 默认 false，避免表格/下拉被 overflow:hidden 裁切。
+     */
+    clip?: boolean
+    /** 占满父级高度，body 纵向伸展；适合后台 Pane 内嵌 */
+    fill?: boolean
   }>(),
   {
     as: 'section',
     padding: true,
     elevated: false,
+    borderless: false,
     variant: 'grouped',
+    size: 'md',
+    hoverable: false,
+    clip: false,
+    fill: false,
   },
 )
 
 const slots = useSlots()
-const hasHeader = computed(() => Boolean(props.title || props.description || slots.header))
-const resolvedRadius = useResolvedRsRadius(() => props.radius, 'lg')
+const hasHeader = computed(() =>
+  Boolean(props.title || props.description || slots.header || slots.actions),
+)
+const hasFooter = computed(() => Boolean(slots.footer))
+/** 卡片圆角只认 props，不跟 controlRadius 走 */
+const resolvedRadius = computed(() => props.radius ?? 'md')
 const rootStyle = computed(() => ({
   '--rs-card-radius': rsRadiusCss(resolvedRadius.value),
 }))
@@ -40,10 +84,20 @@ const rootStyle = computed(() => ({
     class="rs-card"
     :class="[
       `rs-card--${variant}`,
-      { 'rs-card--elevated': elevated },
+      `rs-card--${size}`,
+      {
+        'rs-card--elevated': elevated,
+        'rs-card--borderless': borderless,
+        'rs-card--hoverable': hoverable,
+        'rs-card--clip': clip,
+        'rs-card--fill': fill,
+      },
     ]"
     :style="rootStyle"
   >
+    <div v-if="$slots.cover" class="rs-card__cover">
+      <slot name="cover" />
+    </div>
     <header v-if="hasHeader" class="rs-card__header">
       <div class="rs-card__heading">
         <slot name="header">
@@ -58,21 +112,91 @@ const rootStyle = computed(() => ({
     <div class="rs-card__body" :class="{ 'rs-card__body--padded': padding }">
       <slot />
     </div>
+    <footer v-if="hasFooter" class="rs-card__footer">
+      <slot name="footer" />
+    </footer>
   </Primitive>
 </template>
 
 <style>
 .rs-card {
+  --rs-card-header-padding-y: 0.75rem;
+  --rs-card-header-padding-x: 1rem;
+  --rs-card-body-padding: 1rem;
+  --rs-card-footer-padding-y: 0.625rem;
+  --rs-card-footer-padding-x: 1rem;
+  --rs-card-title-size: var(--rs-font-size-sm);
+  --rs-card-desc-size: var(--rs-font-size-xs);
+
   position: relative;
-  overflow: hidden;
-  border-radius: var(--rs-card-radius, var(--rs-radius-lg));
+  overflow: visible;
+  border-radius: var(--rs-card-radius, var(--rs-radius));
   border: 1px solid var(--rs-card-border);
   background: var(--rs-card-body-bg);
   box-shadow: var(--rs-card-shadow);
   isolation: isolate;
 }
 
+.rs-card--sm {
+  --rs-card-header-padding-y: 0.5rem;
+  --rs-card-header-padding-x: 0.75rem;
+  --rs-card-body-padding: 0.75rem;
+  --rs-card-footer-padding-y: 0.5rem;
+  --rs-card-footer-padding-x: 0.75rem;
+  --rs-card-title-size: var(--rs-font-size-xs);
+}
+
+.rs-card--md {
+  --rs-card-header-padding-y: 0.75rem;
+  --rs-card-header-padding-x: 1rem;
+  --rs-card-body-padding: 1rem;
+  --rs-card-footer-padding-y: 0.625rem;
+  --rs-card-footer-padding-x: 1rem;
+  --rs-card-title-size: var(--rs-font-size-sm);
+}
+
+.rs-card--lg {
+  --rs-card-header-padding-y: 1rem;
+  --rs-card-header-padding-x: 1.25rem;
+  --rs-card-body-padding: 1.25rem;
+  --rs-card-footer-padding-y: 0.75rem;
+  --rs-card-footer-padding-x: 1.25rem;
+  --rs-card-title-size: var(--rs-font-size-base);
+}
+
+.rs-card--clip {
+  overflow: hidden;
+}
+
+.rs-card--fill {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.rs-card--fill .rs-card__body {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.rs-card--hoverable {
+  transition:
+    box-shadow 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.2s ease;
+  cursor: default;
+}
+
+.rs-card--hoverable:hover {
+  box-shadow: var(--rs-card-shadow-elevated);
+}
+
 /* ── grouped：macOS 系统设置分组面板（header 微分层 + inset 高光）── */
+/* overflow:hidden 必须：header 实色与 backdrop-filter 才能贴合圆角，否则弧边溢出成直角 */
+.rs-card--grouped {
+  overflow: hidden;
+}
 [data-rs-theme='light'] .rs-card--grouped {
   background: color-mix(in srgb, var(--rs-card-body-bg) 94%, transparent);
   backdrop-filter: blur(20px) saturate(150%);
@@ -102,7 +226,6 @@ const rootStyle = computed(() => ({
   box-shadow: none;
 }
 .rs-card--plain .rs-card__header {
-  padding-block: 0.625rem;
   background: transparent;
   border-bottom: 1px solid var(--rs-card-separator);
   box-shadow: none;
@@ -127,13 +250,11 @@ const rootStyle = computed(() => ({
   background: var(--rs-card-body-bg);
 }
 .rs-card--outlined .rs-card__header {
-  padding-block: 1rem;
   background: transparent;
   border-bottom: 1px solid var(--rs-card-separator);
   box-shadow: none;
 }
 .rs-card--outlined .rs-card__title {
-  font-size: var(--rs-font-size-base);
   font-weight: 500;
   letter-spacing: 0;
 }
@@ -156,7 +277,6 @@ const rootStyle = computed(() => ({
   box-shadow: none;
 }
 .rs-card--filled .rs-card__title {
-  font-size: var(--rs-font-size-base);
   font-weight: 500;
   letter-spacing: 0;
 }
@@ -168,7 +288,9 @@ const rootStyle = computed(() => ({
 }
 
 /* ── glass：macOS Vibrancy 毛玻璃（强模糊 + 半透明）── */
+/* 同 grouped：毛玻璃与 header 分层依赖 overflow 裁切圆角 */
 .rs-card--glass {
+  overflow: hidden;
   border-color: var(--rs-card-glass-border);
   background: var(--rs-card-glass-bg);
   backdrop-filter: blur(28px) saturate(180%);
@@ -200,38 +322,100 @@ const rootStyle = computed(() => ({
     0 12px 32px rgb(0 0 0 / 0.18);
 }
 
+/* ── borderless：无外框（对齐 RsTabs borderless，业务无需 :deep）── */
+.rs-card--borderless {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+.rs-card--borderless .rs-card__header {
+  background: transparent;
+  border-bottom: none;
+  box-shadow: none;
+}
+.rs-card--borderless .rs-card__body {
+  background: transparent;
+}
+.rs-card--borderless .rs-card__footer {
+  border-top: none;
+}
+.rs-card--borderless.rs-card--elevated {
+  box-shadow: var(--rs-card-shadow-elevated);
+}
+
 /* ── 公共结构 ── */
+/* 首尾区块跟卡片圆角对齐，避免 overflow:visible 时直角底色顶出弧边 */
+.rs-card__cover:first-child,
+.rs-card__header:first-child {
+  border-top-left-radius: var(--rs-card-radius, var(--rs-radius));
+  border-top-right-radius: var(--rs-card-radius, var(--rs-radius));
+}
+
+.rs-card__footer:last-child,
+.rs-card__body:last-child {
+  border-bottom-left-radius: var(--rs-card-radius, var(--rs-radius));
+  border-bottom-right-radius: var(--rs-card-radius, var(--rs-radius));
+}
+
+.rs-card__cover {
+  flex-shrink: 0;
+  line-height: 0;
+}
+
+.rs-card__cover > * {
+  display: block;
+  width: 100%;
+}
+
 .rs-card__header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--rs-space-md);
   flex-shrink: 0;
-  padding: 0.75rem 1rem 0.75rem 1.25rem;
+  padding: var(--rs-card-header-padding-y) var(--rs-card-header-padding-x);
 }
+
 .rs-card__heading {
   min-width: 0;
 }
+
 .rs-card__title {
   margin: 0;
-  font-size: var(--rs-font-size-sm);
+  font-size: var(--rs-card-title-size);
   font-weight: 600;
   letter-spacing: -0.01em;
   color: var(--rs-card-title-fg);
 }
+
 .rs-card__description {
   margin: 0.2rem 0 0;
-  font-size: var(--rs-font-size-xs);
+  font-size: var(--rs-card-desc-size);
   color: var(--rs-card-description-fg);
   line-height: var(--rs-line-height-normal);
 }
+
 .rs-card__actions {
   display: flex;
   align-items: center;
   gap: var(--rs-space-xs);
   flex-shrink: 0;
 }
+
 .rs-card__body--padded {
-  padding: 1.25rem;
+  padding: var(--rs-card-body-padding);
+}
+
+.rs-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--rs-space-sm);
+  flex-shrink: 0;
+  padding: var(--rs-card-footer-padding-y) var(--rs-card-footer-padding-x);
+  border-top: 1px solid var(--rs-card-separator);
 }
 </style>

package/src/components/RsConfirmDialog.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
+import { computed, type Component } from 'vue'
 import {
-  AlertDialogAction,
-  AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogOverlay,
@@ -11,25 +10,58 @@ import {
 } from './reka'
 import RsButton from './RsButton.vue'
 import { useRsI18n } from '../composables/useRsI18n'
+import {
+  isRsDialogWidthPreset,
+  resolveDialogOverlayStyle,
+  resolveRsDialogCssWidth,
+  runRsConfirmBeforeClose,
+  type RsConfirmBeforeClose,
+  type RsConfirmCloseReason,
+  type RsDialogWidth,
+} from './dialog-utils'
 import type { RsFeedbackTone } from './overlay-utils'
 
 const open = defineModel<boolean>('open', { default: false })
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     title?: string
+    /** 次要说明，显示在标题与正文之间 */
+    subtitle?: string
     description?: string
     tone?: RsFeedbackTone
+    /** 自定义图标组件；不传则使用默认 "!" */
+    icon?: Component
+    /** 宽度：预设或自定义；不传保持历史默认 max-width: 28rem */
+    width?: RsDialogWidth
     confirmText?: string
     cancelText?: string
     confirmVariant?: 'primary' | 'danger'
+    /** 是否显示取消按钮；false 时为单按钮提示 */
+    showCancel?: boolean
+    /** 确认中：禁用按钮并阻止 Esc 关闭 */
+    confirmLoading?: boolean
+    /**
+     * 点击确认后是否自动关闭。默认 true。
+     * 命令式异步 onConfirm 场景可设为 false，由调用方在结束后关闭。
+     */
+    autoCloseOnConfirm?: boolean
+    /** 关闭前钩子；返回 false 可阻止关闭（支持 async） */
+    beforeClose?: RsConfirmBeforeClose
     showOverlay?: boolean
-    /** AlertDialogPortal 挂载目标（id 选择器或 Element） */
-    teleportTo?: string | HTMLElement
+    /** 遮罩不透明度 0–1；覆盖主题默认（最浅） */
+    overlayOpacity?: number
+    /** 遮罩模糊；number 为 px。默认主题为 0 */
+    overlayBlur?: number | string
+    /** AlertDialogPortal 挂载目标；false 禁用 Teleport */
+    teleportTo?: string | HTMLElement | false
   }>(),
   {
     tone: 'danger',
     confirmVariant: 'danger',
+    showCancel: true,
+    confirmLoading: false,
+    autoCloseOnConfirm: true,
     showOverlay: false,
   },
 )
@@ -41,45 +73,170 @@ const emit = defineEmits<{
 
 const { t } = useRsI18n()
 
-function onConfirm(): void {
+const contentClass = computed(() => {
+  if (props.width && isRsDialogWidthPreset(props.width)) {
+    return `rs-confirm-dialog__content--${props.width}`
+  }
+  return undefined
+})
+
+const overlayStyle = computed(() =>
+  resolveDialogOverlayStyle({
+    overlayOpacity: props.overlayOpacity,
+    overlayBlur: props.overlayBlur,
+  }),
+)
+
+const contentStyle = computed(() => {
+  if (props.width == null || isRsDialogWidthPreset(props.width)) return undefined
+  const css = resolveRsDialogCssWidth(props.width)
+  if (!css) return undefined
+  return { maxWidth: css }
+})
+
+const descriptionText = computed(() => {
+  if (props.description != null && props.description !== '') return props.description
+  return undefined
+})
+
+const showDefaultDescription = computed(
+  () => descriptionText.value == null && !props.subtitle,
+)
+
+let closing = false
+let pendingCloseReason: RsConfirmCloseReason = 'programmatic'
+
+async function requestClose(reason: RsConfirmCloseReason): Promise<boolean> {
+  if (!open.value || closing) return false
+  closing = true
+  try {
+    const allowed = await runRsConfirmBeforeClose(props.beforeClose, reason)
+    if (!allowed) return false
+    open.value = false
+    return true
+  } finally {
+    closing = false
+  }
+}
+
+async function onConfirmClick(): Promise<void> {
   emit('confirm')
-  open.value = false
+  if (props.autoCloseOnConfirm !== false) {
+    await requestClose('confirm')
+  }
+}
+
+async function onCancelClick(): Promise<void> {
+  const closed = await requestClose('cancel')
+  if (closed) emit('cancel')
+}
+
+function onEscapeKeyDown(event: Event): void {
+  if (props.confirmLoading) {
+    event.preventDefault()
+    return
+  }
+  pendingCloseReason = 'escape'
 }
 
-function onCancel(): void {
-  emit('cancel')
+async function onUpdateOpen(next: boolean): Promise<void> {
+  if (next) {
+    open.value = true
+    return
+  }
+  // requestClose 已处理 beforeClose；此处承接 Esc 等 Root 发起的关闭
+  if (closing) {
+    open.value = false
+    return
+  }
+  const reason = pendingCloseReason
+  pendingCloseReason = 'programmatic'
+  const allowed = await runRsConfirmBeforeClose(props.beforeClose, reason)
+  if (!allowed) {
+    open.value = true
+    return
+  }
+  open.value = false
+  if (reason === 'escape' || reason === 'programmatic') {
+    emit('cancel')
+  }
 }
+
+defineExpose({
+  /** 请求关闭（走 beforeClose） */
+  close: (reason: RsConfirmCloseReason = 'programmatic') => requestClose(reason),
+})
 </script>
 
 <template>
-  <AlertDialogRoot v-model:open="open">
-    <AlertDialogPortal :to="teleportTo">
-      <AlertDialogOverlay v-if="showOverlay" class="rs-confirm-dialog__overlay" />
+  <AlertDialogRoot :open="open" @update:open="onUpdateOpen">
+    <AlertDialogPortal
+      :disabled="teleportTo === false"
+      :to="teleportTo === false ? undefined : teleportTo"
+    >
+      <AlertDialogOverlay v-if="showOverlay" class="rs-confirm-dialog__overlay" :style="overlayStyle" />
       <AlertDialogContent
         class="rs-confirm-dialog__content"
+        :class="contentClass"
+        :style="contentStyle"
         :disable-outside-pointer-events="true"
+        @escape-key-down="onEscapeKeyDown"
       >
         <div class="rs-confirm-dialog__icon" :class="`rs-confirm-dialog__icon--${tone}`">
-          !
+          <slot name="icon">
+            <component :is="icon" v-if="icon" class="rs-confirm-dialog__icon-glyph" />
+            <template v-else>!</template>
+          </slot>
         </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') }}
+          <p
+            v-if="subtitle && descriptionText != null"
+            class="rs-confirm-dialog__subtitle"
+          >
+            {{ subtitle }}
+          </p>
+          <AlertDialogDescription
+            v-if="descriptionText != null"
+            class="rs-confirm-dialog__description"
+          >
+            {{ descriptionText }}
+          </AlertDialogDescription>
+          <AlertDialogDescription
+            v-else-if="subtitle"
+            class="rs-confirm-dialog__subtitle"
+          >
+            {{ subtitle }}
+          </AlertDialogDescription>
+          <AlertDialogDescription
+            v-else-if="showDefaultDescription"
+            class="rs-confirm-dialog__description"
+          >
+            {{ t('confirm.description') }}
           </AlertDialogDescription>
+          <div v-if="$slots.extra" class="rs-confirm-dialog__extra">
+            <slot name="extra" />
+          </div>
           <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>
+            <!-- 不用 AlertDialogCancel/Action：关闭统一走 beforeClose / autoCloseOnConfirm -->
+            <RsButton
+              v-if="showCancel"
+              variant="default"
+              :disabled="confirmLoading"
+              @click="onCancelClick"
+            >
+              {{ cancelText ?? t('common.cancel') }}
+            </RsButton>
+            <RsButton
+              :variant="confirmVariant"
+              :loading="confirmLoading"
+              :disabled="confirmLoading"
+              @click="onConfirmClick"
+            >
+              {{ confirmText ?? t('common.confirm') }}
+            </RsButton>
           </footer>
         </div>
       </AlertDialogContent>
@@ -114,10 +271,19 @@ function onCancel(): void {
   border: 1px solid var(--rs-dialog-border);
   border-radius: var(--rs-radius-lg);
   background: var(--rs-dialog-body-bg);
-  color: var(--rs-text);
+  color: var(--rs-dialog-title-fg);
   box-shadow: var(--rs-dialog-shadow);
   outline: none;
 }
+.rs-confirm-dialog__content--sm {
+  max-width: 24rem;
+}
+.rs-confirm-dialog__content--md {
+  max-width: 32rem;
+}
+.rs-confirm-dialog__content--lg {
+  max-width: 42rem;
+}
 [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%);
@@ -133,6 +299,11 @@ function onCancel(): void {
   border-radius: var(--rs-radius);
   font-weight: 700;
 }
+.rs-confirm-dialog__icon-glyph {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: block;
+}
 .rs-confirm-dialog__icon--danger {
   background: var(--rs-danger-container);
   color: var(--rs-on-danger-container);
@@ -161,18 +332,34 @@ function onCancel(): void {
   letter-spacing: -0.01em;
   color: var(--rs-dialog-title-fg);
 }
+.rs-confirm-dialog__subtitle {
+  margin: var(--rs-space-xs) 0 0;
+  color: var(--rs-dialog-description-fg);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-normal);
+  opacity: 0.85;
+}
 .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);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.rs-confirm-dialog__extra {
+  margin-top: var(--rs-space-md);
+  min-width: 0;
 }
 .rs-confirm-dialog__footer {
   display: flex;
   justify-content: flex-end;
+  flex-wrap: wrap;
   gap: var(--rs-space-sm);
+  box-sizing: border-box;
+  min-height: var(--rs-dialog-footer-min-height);
   margin-top: var(--rs-space-xl);
-  padding-top: var(--rs-space-lg);
-  border-top: 1px solid var(--rs-dialog-separator);
+  padding-top: var(--rs-dialog-footer-padding-y);
+  border-top: 1px solid color-mix(in srgb, var(--rs-dialog-separator) 72%, transparent);
 }
 </style>