niuma-ui 1.0.0

package/src/components/RsCard.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import type { RsRadius } from '../theme/types'
+import { Primitive } from './reka'
+import { rsRadiusCss, useResolvedRsRadius } from './resolve-radius'
+
+export type RsCardVariant = 'grouped' | 'plain' | 'outlined' | 'filled' | 'glass'
+
+const props = withDefaults(
+  defineProps<{
+    as?: string
+    title?: string
+    description?: string
+    padding?: boolean
+    elevated?: boolean
+    /** grouped=mac 分组面板；plain=mac 小组件；outlined/filled=Material 3；glass=mac 毛玻璃 */
+    variant?: RsCardVariant
+    /** 圆角档位；默认 lg。直角面板传 `none`。 */
+    radius?: RsRadius
+  }>(),
+  {
+    as: 'section',
+    padding: true,
+    elevated: false,
+    variant: 'grouped',
+  },
+)
+
+const slots = useSlots()
+const hasHeader = computed(() => Boolean(props.title || props.description || slots.header))
+const resolvedRadius = useResolvedRsRadius(() => props.radius, 'lg')
+const rootStyle = computed(() => ({
+  '--rs-card-radius': rsRadiusCss(resolvedRadius.value),
+}))
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    class="rs-card"
+    :class="[
+      `rs-card--${variant}`,
+      { 'rs-card--elevated': elevated },
+    ]"
+    :style="rootStyle"
+  >
+    <header v-if="hasHeader" class="rs-card__header">
+      <div class="rs-card__heading">
+        <slot name="header">
+          <h3 v-if="title" class="rs-card__title">{{ title }}</h3>
+          <p v-if="description" class="rs-card__description">{{ description }}</p>
+        </slot>
+      </div>
+      <div v-if="$slots.actions" class="rs-card__actions">
+        <slot name="actions" />
+      </div>
+    </header>
+    <div class="rs-card__body" :class="{ 'rs-card__body--padded': padding }">
+      <slot />
+    </div>
+  </Primitive>
+</template>
+
+<style>
+.rs-card {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--rs-card-radius, var(--rs-radius-lg));
+  border: 1px solid var(--rs-card-border);
+  background: var(--rs-card-body-bg);
+  box-shadow: var(--rs-card-shadow);
+  isolation: isolate;
+}
+
+/* ── grouped：macOS 系统设置分组面板（header 微分层 + inset 高光）── */
+[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%);
+  -webkit-backdrop-filter: blur(20px) saturate(150%);
+}
+.rs-card--grouped .rs-card__header {
+  background: var(--rs-card-header-bg);
+  border-bottom: 1px solid var(--rs-card-separator);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
+}
+[data-rs-theme='light'] .rs-card--grouped .rs-card__header {
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.75);
+}
+.rs-card--grouped .rs-card__body {
+  background: var(--rs-card-body-bg);
+}
+[data-rs-theme='light'] .rs-card--grouped .rs-card__body {
+  background: transparent;
+}
+.rs-card--grouped.rs-card--elevated {
+  box-shadow: var(--rs-card-shadow-elevated);
+}
+
+/* ── plain：macOS 小组件 / 仪表盘（单表面、弱分隔）── */
+.rs-card--plain {
+  border-color: var(--rs-card-separator);
+  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;
+}
+.rs-card--plain .rs-card__title {
+  font-size: var(--rs-font-size-xs);
+  font-weight: 500;
+  color: var(--rs-card-description-fg);
+  letter-spacing: 0;
+}
+.rs-card--plain .rs-card__body {
+  background: transparent;
+}
+.rs-card--plain.rs-card--elevated {
+  box-shadow: var(--rs-card-shadow-elevated);
+}
+
+/* ── outlined：Material 3 Outlined Card（描边、无 header 底色）── */
+.rs-card--outlined {
+  border: 1px solid var(--rs-card-border);
+  box-shadow: none;
+  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;
+}
+.rs-card--outlined .rs-card__body {
+  background: transparent;
+}
+.rs-card--outlined.rs-card--elevated {
+  box-shadow: var(--rs-card-filled-elevated-shadow);
+}
+
+/* ── filled：Material 3 Filled Card（色调填充、无边框）── */
+.rs-card--filled {
+  border-color: transparent;
+  background: var(--rs-card-filled-bg);
+  box-shadow: none;
+}
+.rs-card--filled .rs-card__header {
+  background: transparent;
+  border-bottom: 1px solid var(--rs-card-separator);
+  box-shadow: none;
+}
+.rs-card--filled .rs-card__title {
+  font-size: var(--rs-font-size-base);
+  font-weight: 500;
+  letter-spacing: 0;
+}
+.rs-card--filled .rs-card__body {
+  background: transparent;
+}
+.rs-card--filled.rs-card--elevated {
+  box-shadow: var(--rs-card-filled-elevated-shadow);
+}
+
+/* ── glass：macOS Vibrancy 毛玻璃（强模糊 + 半透明）── */
+.rs-card--glass {
+  border-color: var(--rs-card-glass-border);
+  background: var(--rs-card-glass-bg);
+  backdrop-filter: blur(28px) saturate(180%);
+  -webkit-backdrop-filter: blur(28px) saturate(180%);
+  box-shadow:
+    0 0 0 0.5px rgb(255 255 255 / 0.12),
+    0 8px 24px rgb(0 0 0 / 0.12);
+}
+[data-rs-theme='light'] .rs-card--glass {
+  box-shadow:
+    0 0 0 0.5px rgb(255 255 255 / 0.6),
+    0 8px 24px rgb(0 0 0 / 0.08);
+}
+.rs-card--glass .rs-card__header {
+  background: rgb(255 255 255 / 0.04);
+  border-bottom: 1px solid var(--rs-card-glass-border);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
+}
+[data-rs-theme='light'] .rs-card--glass .rs-card__header {
+  background: rgb(255 255 255 / 0.35);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8);
+}
+.rs-card--glass .rs-card__body {
+  background: transparent;
+}
+.rs-card--glass.rs-card--elevated {
+  box-shadow:
+    0 0 0 0.5px rgb(255 255 255 / 0.14),
+    0 12px 32px rgb(0 0 0 / 0.18);
+}
+
+/* ── 公共结构 ── */
+.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;
+}
+.rs-card__heading {
+  min-width: 0;
+}
+.rs-card__title {
+  margin: 0;
+  font-size: var(--rs-font-size-sm);
+  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);
+  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;
+}
+</style>

package/src/components/RsCheckbox.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import type { RsComponentSize } from '../theme/types'
+import { useResolvedRsComponentSize } from './resolve-size'
+
+const model = defineModel<boolean>({ default: false })
+
+const props = withDefaults(
+  defineProps<{
+    /** 半选（仅视觉；点击仍按 model 取反） */
+    indeterminate?: boolean
+    disabled?: boolean
+    size?: RsComponentSize
+    /** 无障碍名称；有默认插槽文案时可省略 */
+    ariaLabel?: string
+    id?: string
+  }>(),
+  {
+    indeterminate: false,
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  change: [value: boolean]
+}>()
+
+const autoId = useId()
+const inputId = computed(() => props.id || autoId)
+const resolvedSize = useResolvedRsComponentSize(() => props.size)
+
+const rootClass = computed(() => [
+  'rs-checkbox',
+  `rs-checkbox--${resolvedSize.value}`,
+  {
+    'rs-checkbox--checked': model.value && !props.indeterminate,
+    'rs-checkbox--indeterminate': props.indeterminate,
+    'rs-checkbox--disabled': props.disabled,
+  },
+])
+
+function onChange(event: Event): void {
+  if (props.disabled) return
+  const checked = (event.target as HTMLInputElement).checked
+  model.value = checked
+  emit('change', checked)
+}
+</script>
+
+<template>
+  <label :class="rootClass" :for="inputId">
+    <input
+      :id="inputId"
+      class="rs-checkbox__input"
+      type="checkbox"
+      :checked="model"
+      :disabled="disabled"
+      :aria-checked="indeterminate ? 'mixed' : model"
+      :aria-label="ariaLabel"
+      @change="onChange"
+      @click.stop
+    >
+    <span class="rs-checkbox__box" aria-hidden="true" />
+    <span v-if="$slots.default" class="rs-checkbox__label">
+      <slot />
+    </span>
+  </label>
+</template>
+
+<style>
+.rs-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-space-xs);
+  vertical-align: middle;
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  color: var(--rs-text);
+}
+
+.rs-checkbox--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.rs-checkbox__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.rs-checkbox__box {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-xs, 4px);
+  background: var(--rs-surface);
+  transition:
+    border-color var(--rs-transition-fast, 0.12s ease),
+    background-color var(--rs-transition-fast, 0.12s ease);
+}
+
+.rs-checkbox--ssm .rs-checkbox__box {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.rs-checkbox--sm .rs-checkbox__box {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.rs-checkbox--md .rs-checkbox__box {
+  width: 1rem;
+  height: 1rem;
+}
+
+.rs-checkbox--lg .rs-checkbox__box {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.rs-checkbox:hover:not(.rs-checkbox--disabled) .rs-checkbox__box {
+  border-color: var(--rs-primary);
+}
+
+.rs-checkbox--checked .rs-checkbox__box,
+.rs-checkbox--indeterminate .rs-checkbox__box {
+  border-color: var(--rs-primary);
+  background: var(--rs-primary);
+}
+
+.rs-checkbox--checked .rs-checkbox__box::after {
+  content: '';
+  position: absolute;
+  top: 42%;
+  left: 50%;
+  width: 0.28rem;
+  height: 0.5rem;
+  border: solid var(--rs-primary-foreground, #fff);
+  border-width: 0 2px 2px 0;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.rs-checkbox--ssm.rs-checkbox--checked .rs-checkbox__box::after {
+  width: 0.2rem;
+  height: 0.36rem;
+}
+
+.rs-checkbox--sm.rs-checkbox--checked .rs-checkbox__box::after {
+  width: 0.24rem;
+  height: 0.42rem;
+}
+
+.rs-checkbox--indeterminate .rs-checkbox__box::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.5rem;
+  height: 2px;
+  border: 0;
+  border-radius: 1px;
+  background: var(--rs-primary-foreground, #fff);
+  transform: translate(-50%, -50%);
+}
+
+.rs-checkbox__label {
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-normal);
+}
+
+.rs-checkbox--ssm .rs-checkbox__label,
+.rs-checkbox--sm .rs-checkbox__label {
+  font-size: var(--rs-font-size-xs);
+}
+</style>

package/src/components/RsCodeBlock.vue

@@ -0,0 +1,278 @@
+<script setup lang="ts">
+import { ref, shallowRef, onMounted, onUnmounted, watch } from 'vue'
+import { basicSetup } from 'codemirror'
+import { EditorState } from '@codemirror/state'
+import { EditorView } from '@codemirror/view'
+import { oneDark } from '@codemirror/theme-one-dark'
+import { useRsI18n } from '../composables/useRsI18n'
+import { isCodeMirrorLightTheme, resolveCodeMirrorLanguage } from './code-mirror-lang'
+
+const props = withDefaults(
+  defineProps<{
+    code: string
+    lang?: string
+    /** 覆盖内置"复制"文案 */
+    copyLabel?: string
+    /** 覆盖内置"已复制"文案 */
+    copiedLabel?: string
+    /** 提供时显示下载按钮，值为建议文件名 */
+    downloadFilename?: string
+    /** 覆盖内置"下载"文案 */
+    downloadLabel?: string
+  }>(),
+  { lang: 'text' },
+)
+
+const { t } = useRsI18n()
+
+const editorEl = ref<HTMLElement | null>(null)
+const view = shallowRef<EditorView | null>(null)
+const isCopied = ref(false)
+let copyTimer: ReturnType<typeof setTimeout> | null = null
+let themeObserver: MutationObserver | null = null
+/** 标记当前是否已卸载，防止异步初始化的竞态条件。 */
+let unmounted = false
+
+// ── 主题检测 ────────────────────────────────────────────────────────────────
+
+function isLight(): boolean {
+  return isCodeMirrorLightTheme()
+}
+
+async function resolveLanguageExtension(lang: string) {
+  return resolveCodeMirrorLanguage(lang)
+}
+
+// ── 编辑器初始化 ─────────────────────────────────────────────────────────────
+
+async function initEditor() {
+  if (!editorEl.value || unmounted) return
+  // 保留对当前容器的引用，以防 await 期间 editorEl 变化
+  const targetEl = editorEl.value
+
+  view.value?.destroy()
+  view.value = null
+
+  const langExts = await resolveLanguageExtension(props.lang ?? '')
+
+  // 异步返回后再次校验：组件可能已卸载或容器已换
+  if (unmounted || !targetEl.isConnected) return
+
+  const state = EditorState.create({
+    doc: props.code,
+    extensions: [
+      basicSetup,
+      EditorView.editable.of(false),
+      EditorView.lineWrapping,
+      ...langExts,
+      ...(isLight() ? [] : [oneDark]),
+    ],
+  })
+
+  view.value = new EditorView({ state, parent: targetEl })
+}
+
+onMounted(() => {
+  unmounted = false
+  void initEditor()
+
+  // 监听文档主题切换（data-rs-theme 属性变化），重新初始化以切换配色方案
+  themeObserver = new MutationObserver(() => {
+    void initEditor()
+  })
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-rs-theme'],
+  })
+})
+
+onUnmounted(() => {
+  unmounted = true
+  view.value?.destroy()
+  view.value = null
+  themeObserver?.disconnect()
+  themeObserver = null
+  if (copyTimer !== null) {
+    clearTimeout(copyTimer)
+    copyTimer = null
+  }
+})
+
+// lang 变化时重新初始化（切换语言高亮）
+watch(() => props.lang, () => { void initEditor() })
+
+// 代码内容更新时同步文档（不需要重建整个编辑器）
+watch(
+  () => props.code,
+  (newCode) => {
+    if (!view.value) return
+    const current = view.value.state.doc.toString()
+    if (current === newCode) return
+    view.value.dispatch({
+      changes: { from: 0, to: view.value.state.doc.length, insert: newCode },
+    })
+  },
+)
+
+// ── 复制 ────────────────────────────────────────────────────────────────────
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(props.code)
+    isCopied.value = true
+    if (copyTimer !== null) clearTimeout(copyTimer)
+    copyTimer = setTimeout(() => {
+      isCopied.value = false
+      copyTimer = null
+    }, 1500)
+  } catch {
+    // clipboard 不可用时静默失败
+  }
+}
+
+function download() {
+  if (!props.downloadFilename) return
+  const name = props.downloadFilename.replace(/^.*[/\\]/, '') || 'download.html'
+  const lower = name.toLowerCase()
+  const mime = lower.endsWith('.html') || lower.endsWith('.htm')
+    ? 'text/html;charset=utf-8'
+    : 'text/plain;charset=utf-8'
+  const blob = new Blob([props.code], { type: mime })
+  const url = URL.createObjectURL(blob)
+  const anchor = document.createElement('a')
+  anchor.href = url
+  anchor.download = name
+  anchor.rel = 'noopener'
+  document.body.appendChild(anchor)
+  anchor.click()
+  anchor.remove()
+  URL.revokeObjectURL(url)
+}
+</script>
+
+<template>
+  <figure class="rs-code-block">
+    <figcaption class="rs-code-block__bar">
+      <span class="rs-code-block__lang">{{ lang }}</span>
+      <div class="rs-code-block__actions">
+        <button
+          v-if="downloadFilename"
+          type="button"
+          class="rs-code-block__copy"
+          @click="download"
+        >
+          {{ downloadLabel ?? t('codeBlock.download') }}
+        </button>
+        <button type="button" class="rs-code-block__copy" @click="copy">
+          {{ isCopied ? (copiedLabel ?? t('codeBlock.copied')) : (copyLabel ?? t('codeBlock.copy')) }}
+        </button>
+      </div>
+    </figcaption>
+    <div ref="editorEl" class="rs-code-block__editor" />
+  </figure>
+</template>
+
+<style scoped>
+.rs-code-block {
+  margin: 0;
+  border: 1px solid var(--rs-border-subtle);
+  border-radius: var(--rs-radius);
+  overflow: hidden;
+  background: var(--rs-surface-elevated);
+  font-size: var(--rs-font-size-sm);
+}
+
+.rs-code-block__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--rs-space-xs) var(--rs-space-md);
+  border-bottom: 1px solid var(--rs-border-subtle);
+  background: color-mix(in srgb, var(--rs-surface-elevated) 80%, var(--rs-border) 20%);
+}
+
+.rs-code-block__lang {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: var(--rs-font-size-xs);
+  color: var(--rs-muted);
+  text-transform: lowercase;
+}
+
+.rs-code-block__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-xs);
+}
+
+.rs-code-block__copy {
+  padding: 2px var(--rs-space-sm);
+  border: 1px solid var(--rs-border-subtle);
+  border-radius: var(--rs-radius-sm);
+  background: transparent;
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-xs);
+  cursor: pointer;
+  transition: color 120ms, border-color 120ms, background 120ms;
+}
+
+.rs-code-block__copy:hover {
+  color: var(--rs-text);
+  border-color: var(--rs-border);
+  background: var(--rs-item-hover);
+}
+
+/* CodeMirror 编辑器区域：覆盖默认样式以融入设计系统 */
+.rs-code-block__editor :deep(.cm-editor) {
+  background: var(--rs-surface-elevated) !important;
+  /* 最大高度限制，超出时内部滚动 */
+  max-height: 32rem;
+  overflow-y: auto;
+}
+
+/* 浅色模式：代码区用深色文字 */
+.rs-code-block__editor :deep(.cm-content) {
+  color: var(--rs-foreground);
+}
+
+/* 行号区域背景与主体一致 */
+.rs-code-block__editor :deep(.cm-gutters) {
+  background: color-mix(in srgb, var(--rs-surface-elevated) 85%, var(--rs-border) 15%) !important;
+  border-right-color: var(--rs-border-subtle) !important;
+  color: var(--rs-muted);
+}
+
+/* 激活行高亮跟随设计系统 */
+.rs-code-block__editor :deep(.cm-activeLine) {
+  background: color-mix(in srgb, var(--rs-primary) 4%, transparent) !important;
+}
+
+.rs-code-block__editor :deep(.cm-activeLineGutter) {
+  background: color-mix(in srgb, var(--rs-primary) 6%, transparent) !important;
+}
+
+.rs-code-block__editor :deep(.cm-scroller) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: var(--rs-font-size-sm);
+  line-height: 1.6;
+}
+
+/* 只读时隐藏光标，保持纯展示外观 */
+.rs-code-block__editor :deep(.cm-cursor) {
+  display: none;
+}
+
+/* 去掉 CodeMirror 默认焦点描边，统一为 macOS 风格聚焦环 */
+.rs-code-block__editor :deep(.cm-editor.cm-focused) {
+  outline: none;
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+/* 选中区跟随设计系统主色 */
+.rs-code-block__editor :deep(.cm-selectionBackground) {
+  background: color-mix(in srgb, var(--rs-primary) 22%, transparent) !important;
+}
+
+.rs-code-block__editor :deep(.cm-focused .cm-selectionBackground) {
+  background: color-mix(in srgb, var(--rs-primary) 28%, transparent) !important;
+}
+</style>