niuma-ui 1.0.0

package/src/components/RsUpload.vue

@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import RsIcon from './RsIcon.vue'
+import { formatFileSize, mergeUploadFiles, removeUploadFileAt, validateUploadFiles } from './upload-utils'
+import { useRsI18n } from '../composables/useRsI18n'
+
+const model = defineModel<File[]>({ default: () => [] })
+
+const props = withDefaults(
+  defineProps<{
+    accept?: string
+    multiple?: boolean
+    maxSize?: number
+    maxCount?: number
+    disabled?: boolean
+    label?: string
+    hint?: string
+  }>(),
+  {
+    multiple: false,
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  reject: [errors: ReturnType<typeof validateUploadFiles>['rejected']]
+}>()
+
+const { t } = useRsI18n()
+const canAdd = computed(() => !props.maxCount || model.value.length < props.maxCount)
+const isDropzoneDisabled = computed(() => props.disabled || !canAdd.value)
+const resolvedHint = computed(() => props.hint ?? t('upload.browse'))
+
+function onFilesChange(event: Event): void {
+  const input = event.target as HTMLInputElement
+  const files = Array.from(input.files ?? [])
+  const result = validateUploadFiles(files, {
+    accept: props.accept,
+    maxSize: props.maxSize,
+    maxCount: props.maxCount ? props.maxCount - model.value.length : undefined,
+  })
+  model.value = mergeUploadFiles(model.value, result.accepted, props.maxCount)
+  if (result.rejected.length) emit('reject', result.rejected)
+  input.value = ''
+}
+
+function removeFile(index: number): void {
+  model.value = removeUploadFileAt(model.value, index)
+}
+</script>
+
+<template>
+  <div class="rs-upload">
+    <label
+      class="rs-upload__dropzone"
+      :class="{ 'rs-upload__dropzone--disabled': isDropzoneDisabled }"
+    >
+      <input
+        class="rs-upload__input"
+        type="file"
+        :accept="accept"
+        :multiple="multiple"
+        :disabled="isDropzoneDisabled"
+        @change="onFilesChange"
+      >
+      <span class="rs-upload__icon" aria-hidden="true">
+        <RsIcon name="cloud-upload" :size="22" />
+      </span>
+      <span class="rs-upload__text">
+        <span class="rs-upload__label">{{ label ?? t('upload.label') }}</span>
+        <span class="rs-upload__hint">{{ resolvedHint }}</span>
+      </span>
+    </label>
+    <ul v-if="model.length" class="rs-upload__list">
+      <li
+        v-for="(file, index) in model"
+        :key="`${file.name}-${file.size}-${index}`"
+        class="rs-upload__file"
+      >
+        <span class="rs-upload__file-icon" aria-hidden="true">
+          <RsIcon name="file" :size="16" />
+        </span>
+        <span class="rs-upload__file-meta">
+          <span class="rs-upload__file-name">{{ file.name }}</span>
+          <span class="rs-upload__file-size">{{ formatFileSize(file.size) }}</span>
+        </span>
+        <button
+          type="button"
+          class="rs-upload__file-remove"
+          :aria-label="t('common.remove')"
+          @click.stop="removeFile(index)"
+        >
+          <RsIcon name="x" :size="14" />
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.rs-upload {
+  display: grid;
+  gap: var(--rs-space-md);
+}
+
+.rs-upload__dropzone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rs-space-md);
+  min-height: 8.5rem;
+  padding: var(--rs-space-xl) var(--rs-space-lg);
+  border: 1px dashed var(--rs-border);
+  border-radius: var(--rs-radius);
+  background: color-mix(in srgb, var(--rs-surface) 82%, var(--rs-bg));
+  cursor: pointer;
+  text-align: center;
+  transition:
+    border-color var(--rs-transition-fast),
+    background var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast);
+}
+
+.rs-upload__dropzone:hover:not(.rs-upload__dropzone--disabled) {
+  border-color: color-mix(in srgb, var(--rs-primary) 55%, var(--rs-border));
+  background: color-mix(in srgb, var(--rs-primary) 6%, var(--rs-surface));
+}
+
+.rs-upload__dropzone:focus-within:not(.rs-upload__dropzone--disabled) {
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+.rs-upload__dropzone--disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+
+.rs-upload__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: inherit;
+}
+
+.rs-upload__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--rs-radius-full);
+  border: 1px solid color-mix(in srgb, var(--rs-primary) 24%, var(--rs-border));
+  background: var(--rs-primary-container);
+  color: var(--rs-on-primary-container);
+  box-shadow: var(--rs-shadow-sm);
+  transition:
+    transform var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast);
+}
+
+.rs-upload__dropzone:hover:not(.rs-upload__dropzone--disabled) .rs-upload__icon {
+  transform: translateY(-1px);
+  box-shadow: var(--rs-shadow);
+}
+
+.rs-upload__text {
+  display: grid;
+  gap: 0.25rem;
+  max-width: 20rem;
+}
+
+.rs-upload__label {
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+  font-weight: 600;
+  line-height: var(--rs-line-height-tight);
+}
+
+.rs-upload__hint {
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-xs);
+  line-height: var(--rs-line-height-normal);
+}
+
+.rs-upload__list {
+  display: grid;
+  gap: var(--rs-space-xs);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.rs-upload__file {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-sm);
+  padding: var(--rs-space-sm) var(--rs-space-md);
+  border: 1px solid var(--rs-border-subtle);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-surface);
+  transition:
+    border-color var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+}
+
+.rs-upload__file:hover {
+  border-color: var(--rs-border);
+  background: color-mix(in srgb, var(--rs-surface-hover) 35%, var(--rs-surface));
+}
+
+.rs-upload__file-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--rs-radius-sm);
+  border: 1px solid var(--rs-border-subtle);
+  background: color-mix(in srgb, var(--rs-bg) 55%, var(--rs-surface));
+  color: var(--rs-muted);
+}
+
+.rs-upload__file-meta {
+  display: grid;
+  gap: 0.125rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.rs-upload__file-name {
+  overflow: hidden;
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+  font-weight: 500;
+  line-height: var(--rs-line-height-tight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rs-upload__file-size {
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-xs);
+  line-height: var(--rs-line-height-tight);
+}
+
+.rs-upload__file-remove {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--rs-radius-sm);
+  background: transparent;
+  color: var(--rs-muted);
+  cursor: pointer;
+  transition:
+    background var(--rs-transition-fast),
+    color var(--rs-transition-fast);
+}
+
+.rs-upload__file-remove:hover {
+  background: var(--rs-item-hover);
+  color: var(--rs-text);
+}
+
+.rs-upload__file-remove:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+</style>

package/src/components/RsVirtualList.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts" generic="T">
+import { computed, onActivated, onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
+import type { RsRadius } from '../theme/types'
+import { rsRadiusCss, useResolvedRsRadius } from './resolve-radius'
+import type { RsVirtualListItemSize } from './virtual-list-utils'
+import { isVirtualListFillHeight, resolveItemSize, resolveVirtualListHeight } from './virtual-list-utils'
+
+const props = withDefaults(
+  defineProps<{
+    items: T[]
+    itemSize?: RsVirtualListItemSize
+    height?: number | string
+    overscan?: number
+    activeIndex?: number | null
+    /** keep-alive 外层可见性；变为 true 时重同步视口与 scroll 位置 */
+    layoutActive?: boolean
+    /** 外层圆角。直角列表传 `none`。默认 sm。 */
+    radius?: RsRadius
+  }>(),
+  {
+    itemSize: 32,
+    height: 240,
+    overscan: 4,
+    activeIndex: null,
+  },
+)
+
+const resolvedRadius = useResolvedRsRadius(() => props.radius, 'sm')
+
+const rootRef = ref<HTMLElement | null>(null)
+const scrollTop = ref(0)
+const measuredHeight = ref(0)
+const fillHeight = computed(() => isVirtualListFillHeight(props.height))
+const heightStyle = computed(() => {
+  const resolved = resolveVirtualListHeight(props.height)
+  return resolved ? { height: resolved } : undefined
+})
+const rootStyle = computed(() => ({
+  ...heightStyle.value,
+  '--rs-virtual-list-radius': rsRadiusCss(resolvedRadius.value),
+}))
+const fixedItemSize = computed(() => resolveItemSize(props.itemSize))
+const viewportHeightPx = computed(() => {
+  if (typeof props.height === 'number' && props.height > 0) {
+    return props.height
+  }
+  if (typeof props.height === 'string') {
+    const parsed = Number.parseInt(props.height, 10)
+    if (Number.isFinite(parsed) && parsed > 0 && !props.height.includes('%')) {
+      return parsed
+    }
+  }
+  if (measuredHeight.value > 0) {
+    return measuredHeight.value
+  }
+  const el = rootRef.value
+  if (el && el.clientHeight > 0) {
+    return el.clientHeight
+  }
+  return 240
+})
+
+let resizeObserver: ResizeObserver | null = null
+
+function syncMeasuredHeight(): void {
+  const el = rootRef.value
+  if (!el) {
+    return
+  }
+  const next = el.clientHeight
+  if (next > 0 && next !== measuredHeight.value) {
+    measuredHeight.value = next
+  }
+}
+
+function syncLayoutFromDom(): void {
+  syncMeasuredHeight()
+  const el = rootRef.value
+  if (el) {
+    scrollTop.value = el.scrollTop
+  }
+}
+
+function scheduleLayoutSync(): void {
+  syncLayoutFromDom()
+  void nextTick(() => {
+    syncLayoutFromDom()
+    requestAnimationFrame(() => {
+      syncLayoutFromDom()
+    })
+  })
+}
+
+onMounted(() => {
+  scheduleLayoutSync()
+  const el = rootRef.value
+  if (!el || typeof ResizeObserver === 'undefined') {
+    return
+  }
+  resizeObserver = new ResizeObserver(() => syncMeasuredHeight())
+  resizeObserver.observe(el)
+})
+
+onActivated(() => {
+  scheduleLayoutSync()
+})
+
+watch(
+  () => props.layoutActive,
+  (active) => {
+    if (active) scheduleLayoutSync()
+  },
+  { flush: 'post' },
+)
+
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+})
+const startIndex = computed(() => Math.max(0, Math.floor(scrollTop.value / fixedItemSize.value) - props.overscan))
+const visibleCount = computed(
+  () => Math.ceil(viewportHeightPx.value / fixedItemSize.value) + props.overscan * 2,
+)
+const visibleItems = computed(() =>
+  props.items.slice(startIndex.value, startIndex.value + visibleCount.value).map((item, index) => ({
+    item,
+    index: startIndex.value + index,
+  })),
+)
+const totalHeight = computed(() => props.items.length * fixedItemSize.value)
+const offsetY = computed(() => startIndex.value * fixedItemSize.value)
+
+function scrollToIndex(index: number) {
+  const el = rootRef.value
+  if (!el || index < 0 || index >= props.items.length) return
+  const itemTop = index * fixedItemSize.value
+  const itemBottom = itemTop + fixedItemSize.value
+  const viewTop = el.scrollTop
+  const viewBottom = viewTop + el.clientHeight
+  if (itemTop >= viewTop && itemBottom <= viewBottom) {
+    return
+  }
+  const maxScroll = Math.max(0, totalHeight.value - el.clientHeight)
+  const centered = itemTop - (el.clientHeight - fixedItemSize.value) / 2
+  el.scrollTop = Math.min(maxScroll, Math.max(0, centered))
+  scrollTop.value = el.scrollTop
+}
+
+watch(
+  () => [props.activeIndex, props.items.length] as const,
+  async ([index, length]) => {
+    if (index == null || index < 0 || length === 0) return
+    await nextTick()
+    requestAnimationFrame(() => scrollToIndex(index))
+  },
+  { immediate: true },
+)
+
+defineExpose({ scrollToIndex })
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    class="rs-virtual-list"
+    :class="{ 'rs-virtual-list--fill': fillHeight }"
+    :style="rootStyle"
+    @scroll="scrollTop = ($event.target as HTMLElement).scrollTop"
+  >
+    <div class="rs-virtual-list__spacer" :style="{ height: `${totalHeight}px` }">
+      <div class="rs-virtual-list__items" :style="{ transform: `translateY(${offsetY}px)` }">
+        <div
+          v-for="entry in visibleItems"
+          :key="entry.index"
+          class="rs-virtual-list__item"
+          :class="{ 'rs-virtual-list__item--active': activeIndex === entry.index }"
+          :style="{ height: `${fixedItemSize}px` }"
+        >
+          <slot :item="entry.item" :index="entry.index">
+            {{ entry.item }}
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rs-virtual-list {
+  overflow: auto;
+  border: 1px solid var(--rs-border-subtle);
+  border-radius: var(--rs-virtual-list-radius, var(--rs-radius-sm));
+}
+.rs-virtual-list--fill {
+  flex: 1;
+  align-self: stretch;
+  width: 100%;
+  min-height: 0;
+  height: 0;
+}
+.rs-virtual-list__spacer {
+  position: relative;
+}
+.rs-virtual-list__items {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+.rs-virtual-list__item {
+  box-sizing: border-box;
+}
+.rs-virtual-list__item--active {
+  background: color-mix(in srgb, var(--rs-primary) 14%, var(--rs-surface));
+  box-shadow: inset 2px 0 0 var(--rs-primary);
+}
+</style>

package/src/components/avatar-utils.ts

@@ -0,0 +1,19 @@
+/** 头像尺寸 */
+export type RsAvatarSize = 'sm' | 'md' | 'lg'
+
+/** 头像形状 */
+export type RsAvatarShape = 'circle' | 'square'
+
+/** 头像占位色调 */
+export type RsAvatarTone = 'default' | 'primary' | 'success' | 'warning' | 'danger'
+
+/**
+ * 从姓名提取缩写（最多 2 个字符）。
+ * @param name 显示名称
+ */
+export function getAvatarInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean)
+  if (!parts.length) return '?'
+  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase()
+  return `${parts[0]![0] ?? ''}${parts[1]![0] ?? ''}`.toUpperCase()
+}

package/src/components/breadcrumb-utils.ts

@@ -0,0 +1,19 @@
+export interface RsBreadcrumbRenderItem {
+  key: string
+  label: string
+  href?: string
+  isLink: boolean
+  isCurrent: boolean
+}
+
+export function buildBreadcrumbRenderItems(
+  items: Array<{ label: string; to?: string; href?: string }>,
+): RsBreadcrumbRenderItem[] {
+  return items.map((item, index) => ({
+    key: `${item.label}-${index}`,
+    label: item.label,
+    href: item.href,
+    isLink: Boolean(item.to || item.href),
+    isCurrent: index === items.length - 1,
+  }))
+}

package/src/components/class-utils.ts

@@ -0,0 +1,29 @@
+export type RsClassValue =
+  | string
+  | number
+  | false
+  | null
+  | undefined
+  | Record<string, boolean | null | undefined>
+  | RsClassValue[]
+
+function flattenClassValue(value: RsClassValue, output: string[]): void {
+  if (!value) return
+  if (typeof value === 'string' || typeof value === 'number') {
+    output.push(String(value))
+    return
+  }
+  if (Array.isArray(value)) {
+    value.forEach((item) => flattenClassValue(item, output))
+    return
+  }
+  Object.entries(value).forEach(([key, enabled]) => {
+    if (enabled) output.push(key)
+  })
+}
+
+export function rsCn(...values: RsClassValue[]): string {
+  const output: string[] = []
+  values.forEach((value) => flattenClassValue(value, output))
+  return Array.from(new Set(output.join(' ').split(/\s+/).filter(Boolean))).join(' ')
+}

package/src/components/code-editor-utils.ts

@@ -0,0 +1,106 @@
+export type RsCodeEditorLanguage =
+  | 'plaintext'
+  | 'json'
+  | 'typescript'
+  | 'javascript'
+  | 'css'
+  | 'html'
+  | 'xml'
+  | 'sql'
+  | 'go'
+  | 'python'
+  | 'rust'
+  | 'java'
+  | 'cpp'
+  | 'c'
+  | 'shell'
+  | 'yaml'
+  | 'toml'
+  | 'markdown'
+  | 'vue'
+
+export type RsCodeEditorTheme = 'auto' | 'light' | 'dark'
+export type RsResolvedCodeEditorTheme = 'light' | 'dark'
+
+export interface RsCodeEditorDiagnostic {
+  message: string
+  line?: number
+  column?: number
+  severity?: 'error' | 'warning' | 'info'
+}
+
+/** CodeMirror SQL 字段/表补全（对应 @codemirror/lang-sql SQLConfig 子集） */
+export type RsCodeEditorSqlDialect = 'postgresql' | 'standard' | 'mysql'
+
+export interface RsCodeEditorSqlColumn {
+  label: string
+  /** 展示用类型，如 integer / text */
+  detail?: string
+  type?: string
+  boost?: number
+}
+
+export type RsCodeEditorSqlNamespace =
+  | readonly (string | RsCodeEditorSqlColumn)[]
+  | { [name: string]: RsCodeEditorSqlNamespace }
+
+export interface RsCodeEditorSqlConfig {
+  dialect?: RsCodeEditorSqlDialect
+  schema?: RsCodeEditorSqlNamespace
+  /** 顶层直接补全该表列（适合 WHERE 片段） */
+  defaultTable?: string
+  defaultSchema?: string
+}
+
+const SUPPORTED_LANGUAGES: RsCodeEditorLanguage[] = [
+  'plaintext', 'json', 'typescript', 'javascript', 'css', 'html', 'xml', 'sql',
+  'go', 'python', 'rust', 'java', 'cpp', 'c', 'shell', 'yaml', 'toml', 'markdown', 'vue',
+]
+
+/** 语言 → 工具栏展示名称映射 */
+const LANGUAGE_DISPLAY_NAME: Record<RsCodeEditorLanguage, string> = {
+  plaintext: 'Plain Text',
+  json: 'JSON',
+  typescript: 'TypeScript',
+  javascript: 'JavaScript',
+  css: 'CSS',
+  html: 'HTML',
+  xml: 'XML',
+  sql: 'SQL',
+  go: 'Go',
+  python: 'Python',
+  rust: 'Rust',
+  java: 'Java',
+  cpp: 'C++',
+  c: 'C',
+  shell: 'Shell',
+  yaml: 'YAML',
+  toml: 'TOML',
+  markdown: 'Markdown',
+  vue: 'Vue',
+}
+
+export function resolveCodeEditorLanguage(language?: string): RsCodeEditorLanguage {
+  return (SUPPORTED_LANGUAGES as string[]).includes(language ?? '')
+    ? (language as RsCodeEditorLanguage)
+    : 'plaintext'
+}
+
+export function codeEditorLanguageLabel(language?: string): string {
+  const lang = resolveCodeEditorLanguage(language)
+  return LANGUAGE_DISPLAY_NAME[lang] ?? lang
+}
+
+export function readDocumentTheme(): RsResolvedCodeEditorTheme {
+  if (typeof document === 'undefined') return 'dark'
+  return document.documentElement.dataset.rsTheme === 'light' ? 'light' : 'dark'
+}
+
+export function resolveCodeEditorTheme(theme: RsCodeEditorTheme = 'auto'): RsResolvedCodeEditorTheme {
+  return theme === 'auto' ? readDocumentTheme() : theme
+}
+
+export function resolveCodeEditorSize(height?: number | string): string {
+  if (height === undefined) return '20rem'
+  return typeof height === 'number' ? `${height}px` : height
+}

package/src/components/code-mirror-completion.ts

@@ -0,0 +1,40 @@
+import { keymap } from '@codemirror/view'
+import type { Extension } from '@codemirror/state'
+import { clearGhostCompletion, setGhostCompletion } from './code-mirror-ghost'
+import { posToLineColumn } from './code-mirror-intel'
+
+export interface CodeMirrorCompletionHandlers {
+  completionRequest?: (prefix: string, suffix: string, line: number, column: number) => Promise<string | null>
+}
+
+export function codeMirrorCompletionExtensions(handlers: () => CodeMirrorCompletionHandlers): Extension[] {
+  return [
+    keymap.of([
+      {
+        key: 'Ctrl-Space',
+        mac: 'Cmd-Space',
+        run: (view) => {
+          const h = handlers()
+          if (!h.completionRequest) return false
+          clearGhostCompletion(view)
+          const pos = view.state.selection.main.head
+          const prefix = view.state.doc.sliceString(0, pos)
+          const suffix = view.state.doc.sliceString(pos)
+          const { line, column } = posToLineColumn(view, pos)
+          void h.completionRequest(prefix, suffix, line, column).then((text) => {
+            if (!text?.trim()) return
+            const latestPos = view.state.selection.main.head
+            if (view.state.doc.sliceString(latestPos) !== suffix) return
+            view.dispatch({
+              changes: { from: latestPos, to: latestPos, insert: text },
+              selection: { anchor: latestPos + text.length },
+              effects: setGhostCompletion.of(null),
+            })
+            view.focus()
+          })
+          return true
+        },
+      },
+    ]),
+  ]
+}