niuma-ui 1.0.0 → 1.0.2

package/src/__tests__/useRsTableCore.perf.spec.ts

@@ -0,0 +1,170 @@
+import { describe, expect, it, vi } from 'vitest'
+import { computed, defineComponent, h, nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { useRsTableCore } from '../composables/useRsTableCore'
+import type { RsTableColumn, RsTableRowData } from '../components/table-utils'
+
+type Row = RsTableRowData & { id: string; name: string }
+
+const columns: RsTableColumn<Row>[] = [{ key: 'name', title: 'Name' }]
+
+describe('useRsTableCore performance guards', () => {
+  it('选中变化不重绑 analytics feature（避免图表订阅抖动）', async () => {
+    const setupCount = { n: 0 }
+    const data = ref<Row[]>([
+      { id: '1', name: 'a' },
+      { id: '2', name: 'b' },
+    ])
+    const selected = ref<string[]>([])
+
+    const Host = defineComponent({
+      setup() {
+        const core = useRsTableCore<Row>({
+          columns: () => columns,
+          data: () => data.value,
+          rowKey: () => 'id',
+          compact: () => false,
+          size: () => 'md',
+          columnOrder: () => undefined,
+          defaultColumnOrder: [],
+          columnFilters: () => undefined,
+          defaultColumnFilters: {},
+          initialColumnWidths: () => undefined,
+          resizable: () => false,
+          columnLayout: () => 'auto',
+          sort: () => undefined,
+          defaultSort: null,
+          sorts: () => undefined,
+          defaultSorts: [],
+          multiSort: () => false,
+          remoteSort: () => false,
+          filterText: () => undefined,
+          filterKeys: () => undefined,
+          groupBy: () => undefined,
+          groupLabel: () => undefined,
+          treeConfig: () => undefined,
+          expandable: () => false,
+          rowExpandable: () => undefined,
+          selectedRowKeys: () => selected.value,
+          defaultSelectedRowKeys: [],
+          expandedRowKeys: () => undefined,
+          defaultExpandedRowKeys: [],
+          rowSelectable: () => undefined,
+          height: () => 320,
+          layoutActive: () => true,
+          viewKey: () => undefined,
+          virtual: () => true,
+          virtualAutoThreshold: () => 50,
+          fill: () => false,
+          infinite: () => false,
+          virtualOnInfinite: () => true,
+          overscan: () => 4,
+          expandRowHeight: () => undefined,
+          rowHeight: () => undefined,
+          selectable: () => true,
+          editable: () => false,
+          contextMenu: () => true,
+          summaryFeatureEnabled: () => false,
+          features: () => [
+            {
+              id: 'probe',
+              setup() {
+                setupCount.n += 1
+              },
+            },
+          ],
+          emit: vi.fn() as any,
+        })
+        return () => h('div', { 'data-view': core.viewRows.value.length })
+      },
+    })
+
+    const wrapper = mount(Host)
+    expect(setupCount.n).toBe(1)
+
+    selected.value = ['1']
+    await nextTick()
+    selected.value = ['1', '2']
+    await nextTick()
+    expect(setupCount.n).toBe(1)
+
+    // data 引用替换不应因选中之外的原因反复拆 feature；仅 features 签名变化才重绑
+    data.value = [
+      { id: '1', name: 'a' },
+      { id: '2', name: 'b' },
+      { id: '3', name: 'c' },
+    ]
+    await nextTick()
+    expect(setupCount.n).toBe(1)
+
+    wrapper.unmount()
+  })
+
+  it('viewRows 与 dataRows 同源同趟（引用长度一致）', () => {
+    const Host = defineComponent({
+      setup() {
+        const core = useRsTableCore<Row>({
+          columns: () => columns,
+          data: () => [
+            { id: '1', name: 'a' },
+            { id: '2', name: 'b' },
+          ],
+          rowKey: () => 'id',
+          compact: () => false,
+          size: () => 'md',
+          columnOrder: () => undefined,
+          defaultColumnOrder: [],
+          columnFilters: () => undefined,
+          defaultColumnFilters: {},
+          initialColumnWidths: () => undefined,
+          resizable: () => false,
+          columnLayout: () => 'auto',
+          sort: () => undefined,
+          defaultSort: null,
+          sorts: () => undefined,
+          defaultSorts: [],
+          multiSort: () => false,
+          remoteSort: () => false,
+          filterText: () => undefined,
+          filterKeys: () => undefined,
+          groupBy: () => undefined,
+          groupLabel: () => undefined,
+          treeConfig: () => undefined,
+          expandable: () => false,
+          rowExpandable: () => undefined,
+          selectedRowKeys: () => undefined,
+          defaultSelectedRowKeys: [],
+          expandedRowKeys: () => undefined,
+          defaultExpandedRowKeys: [],
+          rowSelectable: () => undefined,
+          height: () => 320,
+          layoutActive: () => true,
+          viewKey: () => undefined,
+          virtual: () => false,
+          virtualAutoThreshold: () => 50,
+          fill: () => false,
+          infinite: () => false,
+          virtualOnInfinite: () => true,
+          overscan: () => 4,
+          expandRowHeight: () => undefined,
+          rowHeight: () => undefined,
+          selectable: () => false,
+          editable: () => false,
+          contextMenu: () => true,
+          summaryFeatureEnabled: () => false,
+          features: () => undefined,
+          emit: vi.fn() as any,
+        })
+        const ok = computed(
+          () =>
+            core.viewRows.value.length === core.dataRows.value.length &&
+            core.viewRows.value[0] === core.dataRows.value[0]?.row,
+        )
+        return () => h('div', { 'data-ok': String(ok.value) })
+      },
+    })
+    const wrapper = mount(Host)
+    expect(wrapper.attributes('data-ok')).toBe('true')
+    wrapper.unmount()
+  })
+})

package/src/components/RsAlert.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRsI18n } from '../composables/useRsI18n'
+import type { RsFeedbackTone } from './overlay-utils'
+import RsIcon from './RsIcon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    type?: RsFeedbackTone
+    title?: string
+    closable?: boolean
+    bordered?: boolean
+  }>(),
+  {
+    type: 'info',
+    closable: false,
+    bordered: true,
+  },
+)
+
+const emit = defineEmits<{
+  close: [event: MouseEvent]
+}>()
+
+const { t } = useRsI18n()
+
+const iconName = computed(() => {
+  switch (props.type) {
+    case 'success':
+      return 'circle-check'
+    case 'warning':
+      return 'triangle-alert'
+    case 'danger':
+      return 'circle-alert'
+    case 'default':
+      return 'info'
+    default:
+      return 'info'
+  }
+})
+
+const rootClass = computed(() => [
+  'rs-alert',
+  `rs-alert--${props.type}`,
+  {
+    'rs-alert--bordered': props.bordered,
+    'rs-alert--closable': props.closable,
+  },
+])
+
+function onClose(event: MouseEvent): void {
+  emit('close', event)
+}
+</script>
+
+<template>
+  <div :class="rootClass" role="alert">
+    <span class="rs-alert__icon" aria-hidden="true">
+      <slot name="icon">
+        <RsIcon :name="iconName" :size="16" />
+      </slot>
+    </span>
+    <div class="rs-alert__body">
+      <div v-if="title || $slots.title" class="rs-alert__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div v-if="$slots.default" class="rs-alert__content">
+        <slot />
+      </div>
+    </div>
+    <button
+      v-if="closable"
+      type="button"
+      class="rs-alert__close"
+      :aria-label="t('alert.close')"
+      @click="onClose"
+    >
+      <RsIcon name="x" :size="14" />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.rs-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--rs-alert-gap, var(--rs-space-sm));
+  padding: var(--rs-alert-padding-y, var(--rs-space-md))
+    var(--rs-alert-padding-x, var(--rs-space-lg));
+  border-radius: var(--rs-alert-radius, var(--rs-radius));
+  box-sizing: border-box;
+}
+
+.rs-alert--bordered {
+  border: 1px solid transparent;
+}
+
+.rs-alert__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+
+.rs-alert__body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.rs-alert__title {
+  font-size: var(--rs-font-size-sm);
+  font-weight: 600;
+  line-height: var(--rs-line-height-tight);
+  color: inherit;
+}
+
+.rs-alert__content {
+  margin-top: var(--rs-space-xs);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-normal);
+  color: var(--rs-alert-content-fg, var(--rs-muted));
+}
+
+.rs-alert__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0.125rem;
+  border: 0;
+  border-radius: var(--rs-radius-sm);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  outline: none;
+}
+
+.rs-alert__close:hover {
+  opacity: 1;
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.rs-alert__close:focus-visible {
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+.rs-alert--default {
+  background: var(--rs-surface-hover);
+  color: var(--rs-text);
+  border-color: var(--rs-border);
+}
+
+.rs-alert--default .rs-alert__content {
+  color: var(--rs-alert-content-fg, var(--rs-muted));
+}
+
+.rs-alert--info {
+  background: var(--rs-info-container);
+  color: var(--rs-on-info-container);
+  border-color: color-mix(
+    in srgb,
+    var(--rs-info) var(--rs-alert-border-alpha, 35%),
+    transparent
+  );
+}
+
+.rs-alert--info .rs-alert__content {
+  color: color-mix(in srgb, var(--rs-on-info-container) 78%, transparent);
+}
+
+.rs-alert--success {
+  background: var(--rs-success-container);
+  color: var(--rs-on-success-container);
+  border-color: color-mix(
+    in srgb,
+    var(--rs-success) var(--rs-alert-border-alpha, 35%),
+    transparent
+  );
+}
+
+.rs-alert--success .rs-alert__content {
+  color: color-mix(in srgb, var(--rs-on-success-container) 78%, transparent);
+}
+
+.rs-alert--warning {
+  background: var(--rs-warning-container);
+  color: var(--rs-on-warning-container);
+  border-color: color-mix(
+    in srgb,
+    var(--rs-warning) var(--rs-alert-border-alpha, 35%),
+    transparent
+  );
+}
+
+.rs-alert--warning .rs-alert__content {
+  color: color-mix(in srgb, var(--rs-on-warning-container) 78%, transparent);
+}
+
+.rs-alert--danger {
+  background: var(--rs-danger-container);
+  color: var(--rs-on-danger-container);
+  border-color: color-mix(
+    in srgb,
+    var(--rs-danger) var(--rs-alert-border-alpha, 35%),
+    transparent
+  );
+}
+
+.rs-alert--danger .rs-alert__content {
+  color: color-mix(in srgb, var(--rs-on-danger-container) 78%, transparent);
+}
+</style>

package/src/components/RsButton.vue

@@ -2,19 +2,34 @@
 import { computed, nextTick, ref, useSlots, watch } from 'vue'
 import type { RsComponentSize, RsRadius } from '../theme/types'
 import { RS_COMPONENT_SIZE_ICON_PX } from '../theme/types'
+import {
+  supportsRsButtonTone,
+  type RsButtonTone,
+  type RsButtonVariant,
+} from './button-utils'
 import { useResolvedRsComponentSize } from './resolve-size'
 import { rsRadiusCss, useResolvedRsRadius } from './resolve-radius'
 import RsIcon from './RsIcon.vue'
 
+export type { RsButtonTone, RsButtonVariant } from './button-utils'
+
 const props = withDefaults(
   defineProps<{
-    variant?: 'primary' | 'default' | 'secondary' | 'ghost' | 'danger' | 'link'
+    variant?: RsButtonVariant
+    /**
+     * 语义色调：配合 text / ghost / link 使用。
+     * 例：variant="text" tone="primary" → 紫色文字按钮（工具栏 quaternary）。
+     * @default 'neutral'（text/ghost）；link 未传 tone 时保持主色链接观感
+     */
+    tone?: RsButtonTone
     size?: RsComponentSize
     /** 圆角档位；默认 full（胶囊）。直角 UI 传 `none`。 */
     radius?: RsRadius
     type?: 'button' | 'submit' | 'reset'
     disabled?: boolean
     loading?: boolean
+    /** 是否显示外边框；text 变体默认无边框 */
+    bordered?: boolean
     /** 前缀图标（Lucide kebab-case 名称） */
     icon?: string
     iconSize?: number
@@ -50,7 +65,36 @@ const rootStyle = computed(() => ({
 
 const hasLabel = computed(() => Boolean(slots.default))
 
-const resolvedVariant = computed(() => (props.variant === 'secondary' ? 'default' : props.variant))
+const resolvedVariant = computed(() =>
+  props.variant === 'secondary' ? ('default' as const) : (props.variant ?? 'primary'),
+)
+
+/** text 默认无边框；其它变体默认有边框（可由 bordered 覆盖） */
+const resolvedBordered = computed(() => {
+  if (props.bordered !== undefined) return props.bordered
+  return resolvedVariant.value !== 'text' && resolvedVariant.value !== 'link'
+})
+
+/**
+ * 可着色变体上的 tone。
+ * link 未显式传 tone 时视为 primary，保持历史链接主色。
+ */
+const resolvedTone = computed<RsButtonTone | null>(() => {
+  if (!supportsRsButtonTone(resolvedVariant.value)) return null
+  if (props.tone) return props.tone
+  if (resolvedVariant.value === 'link') return 'primary'
+  return 'neutral'
+})
+
+const rootClass = computed(() => ({
+  [`rs-btn--${resolvedVariant.value}`]: true,
+  [`rs-btn--${resolvedSize.value}`]: true,
+  [`rs-btn--tone-${resolvedTone.value}`]: Boolean(resolvedTone.value),
+  'rs-btn--icon-only': props.iconOnly,
+  'rs-btn--borderless': !resolvedBordered.value,
+  'rs-btn--reveal-label': props.revealLabel && props.icon && hasLabel.value,
+  'rs-btn--loading': props.loading,
+}))
 
 /** 仅在有 tooltip 文案或 icon-only 默认插槽文案时展示内置悬浮层 */
 const showFloatingText = computed(
@@ -104,13 +148,7 @@ watch(
     :type="type"
     :disabled="disabled"
     class="rs-btn"
-    :class="{
-      [`rs-btn--${resolvedVariant}`]: true,
-      [`rs-btn--${resolvedSize}`]: true,
-      'rs-btn--icon-only': iconOnly,
-      'rs-btn--reveal-label': revealLabel && icon && hasLabel,
-      'rs-btn--loading': loading,
-    }"
+    :class="rootClass"
     :style="rootStyle"
     :aria-busy="loading || undefined"
     :aria-disabled="disabled || loading || undefined"
@@ -160,7 +198,7 @@ watch(
   font-size: var(--rs-font-size-sm);
   font-weight: 500;
   letter-spacing: 0.01em;
-  line-height: var(--rs-line-height-tight);
+  line-height: 1;
   white-space: nowrap;
   cursor: pointer;
   transition:
@@ -207,8 +245,9 @@ watch(
   border-color: var(--rs-border);
   background: var(--rs-surface);
 }
-.rs-btn--loading.rs-btn--ghost {
-  color: var(--rs-text);
+.rs-btn--loading.rs-btn--ghost,
+.rs-btn--loading.rs-btn--text {
+  color: var(--rs-btn-tone, var(--rs-text));
   background: var(--rs-surface-hover);
 }
 .rs-btn:focus-visible {
@@ -241,27 +280,35 @@ watch(
   box-shadow: none;
 }
 .rs-btn--default {
-  background: var(--rs-surface);
-  border-color: var(--rs-border);
+  border: 1px solid var(--rs-btn-outline-border, var(--rs-border));
+  background: var(--rs-btn-secondary-bg, var(--rs-surface-hover));
   color: var(--rs-text);
-  box-shadow: var(--rs-shadow-sm);
+  box-shadow: none;
 }
 .rs-btn--default:hover:not(:disabled) {
   color: var(--rs-primary);
   border-color: var(--rs-primary);
+  background: var(--rs-btn-secondary-bg-hover, var(--rs-primary-container));
 }
 .rs-btn--default:active:not(:disabled) {
   color: var(--rs-primary-hover);
   border-color: var(--rs-primary-hover);
+  background: var(--rs-btn-secondary-bg-active, var(--rs-primary-container));
 }
 .rs-btn--ghost {
   background: transparent;
-  border-color: var(--rs-border);
-  color: var(--rs-text);
+  border: 1px solid var(--rs-btn-outline-border, var(--rs-border));
+  color: var(--rs-btn-tone, var(--rs-text));
 }
 .rs-btn--ghost:hover:not(:disabled) {
-  background: var(--rs-surface-hover);
-  border-color: var(--rs-border);
+  background: color-mix(in srgb, var(--rs-btn-tone, var(--rs-text)) 8%, transparent);
+  border-color: var(--rs-btn-outline-border, var(--rs-border));
+  color: var(--rs-btn-tone-hover, var(--rs-btn-tone, var(--rs-text)));
+}
+.rs-btn--borderless,
+.rs-btn--borderless:hover:not(:disabled),
+.rs-btn--borderless:active:not(:disabled) {
+  border-color: transparent;
 }
 .rs-btn--danger {
   background: var(--rs-danger-container);
@@ -272,19 +319,80 @@ watch(
   border-color: var(--rs-danger);
   background: color-mix(in srgb, var(--rs-danger) 20%, var(--rs-danger-container));
 }
+
+/* 行内链接：可下划线；色调由 tone 控制（默认 primary） */
 .rs-btn--link {
   min-height: auto;
   padding: 0;
   border-color: transparent;
   border-radius: 0;
   background: transparent;
-  color: var(--rs-primary);
+  color: var(--rs-btn-tone, var(--rs-primary));
   box-shadow: none;
+  font-weight: 500;
 }
 .rs-btn--link:hover:not(:disabled) {
-  color: var(--rs-primary-hover);
+  color: var(--rs-btn-tone-hover, var(--rs-primary-hover));
   text-decoration: underline;
 }
+
+/**
+ * text：工具栏 / 表格操作 quaternary
+ * 无底无边，靠 tone 着色；hover 使用同色浅底
+ */
+.rs-btn--text {
+  min-height: var(--rs-control-height-sm);
+  padding: 0 var(--rs-space-sm);
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  font-weight: 400;
+  color: var(--rs-btn-tone, var(--rs-text));
+}
+.rs-btn--text.rs-btn--ssm {
+  min-height: var(--rs-control-height-ssm);
+}
+.rs-btn--text.rs-btn--md {
+  min-height: var(--rs-control-height-md);
+}
+.rs-btn--text.rs-btn--lg {
+  min-height: var(--rs-control-height-lg);
+}
+.rs-btn--text:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--rs-btn-tone, var(--rs-text)) 8%, transparent);
+  border-color: transparent;
+  color: var(--rs-btn-tone-hover, var(--rs-btn-tone, var(--rs-text)));
+}
+.rs-btn--text:active:not(:disabled) {
+  background: color-mix(in srgb, var(--rs-btn-tone, var(--rs-text)) 12%, transparent);
+}
+
+/* tone：写入 CSS 变量，供 text / ghost / link 消费 */
+.rs-btn--tone-neutral {
+  --rs-btn-tone: var(--rs-text);
+  --rs-btn-tone-hover: var(--rs-text);
+}
+.rs-btn--tone-primary {
+  --rs-btn-tone: var(--rs-primary);
+  --rs-btn-tone-hover: var(--rs-primary-hover);
+}
+.rs-btn--tone-danger {
+  --rs-btn-tone: var(--rs-danger);
+  --rs-btn-tone-hover: var(--rs-danger);
+}
+.rs-btn--tone-success {
+  --rs-btn-tone: var(--rs-success, #18a058);
+  --rs-btn-tone-hover: var(--rs-success, #18a058);
+}
+.rs-btn--tone-warning {
+  --rs-btn-tone: var(--rs-warning, #f0a020);
+  --rs-btn-tone-hover: var(--rs-warning, #f0a020);
+}
+.rs-btn--tone-info {
+  --rs-btn-tone: var(--rs-info, #2080f0);
+  --rs-btn-tone-hover: var(--rs-info, #2080f0);
+}
+
 .rs-btn__spinner {
   display: inline-flex;
   align-items: center;
@@ -309,6 +417,11 @@ watch(
   border-color: color-mix(in srgb, var(--rs-primary) 28%, transparent);
   border-top-color: var(--rs-primary);
 }
+.rs-btn--text .rs-btn__spinner-ring,
+.rs-btn--link .rs-btn__spinner-ring {
+  border-color: color-mix(in srgb, var(--rs-btn-tone, var(--rs-primary)) 28%, transparent);
+  border-top-color: var(--rs-btn-tone, var(--rs-primary));
+}
 .rs-btn--primary .rs-btn__spinner-ring {
   border-color: color-mix(in srgb, currentcolor 35%, transparent);
   border-top-color: currentcolor;
@@ -318,9 +431,20 @@ watch(
   border-top-color: var(--rs-danger);
 }
 .rs-btn__icon {
+  display: inline-flex;
   flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  color: inherit;
 }
+/* 插槽内自定义图标+文案时也能水平对齐 */
 .rs-btn__label {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  min-width: 0;
+  line-height: 1;
   white-space: nowrap;
 }
 .rs-btn__label--reveal {