niuma-ui 1.0.2 → 1.1.0

package/src/locale/messages.ts

@@ -7,6 +7,7 @@ export const zhCN: RsLocaleMessages = {
   'select.loading': '加载中…',
   'select.clear': '清空',
   'select.createOption': '使用 “{query}”',
+  'select.maxTagPlaceholder': '+{count}',
   'dropdown.placeholder': '请选择',
   'breadcrumb.label': '面包屑',
   'breadcrumb.separator': '分隔符',
@@ -14,6 +15,10 @@ export const zhCN: RsLocaleMessages = {
   'menu.expandSubmenu': '展开子菜单',
   'menu.collapseSubmenu': '收起子菜单',
   'input.required': '此项为必填',
+  'form.field': '此项',
+  'form.validate.required': '请填写{label}',
+  'form.list.add': '添加',
+  'form.list.remove': '删除',
   'input.formatInvalid': '格式不正确',
   'input.rule.email': '请输入有效的邮箱地址',
   'input.rule.number': '请输入有效数字',
@@ -200,6 +205,7 @@ export const enUS: RsLocaleMessages = {
   'select.loading': 'Loading…',
   'select.clear': 'Clear',
   'select.createOption': 'Use “{query}”',
+  'select.maxTagPlaceholder': '+{count}',
   'dropdown.placeholder': 'Select',
   'breadcrumb.label': 'Breadcrumb',
   'breadcrumb.separator': 'Separator',
@@ -207,6 +213,10 @@ export const enUS: RsLocaleMessages = {
   'menu.expandSubmenu': 'Expand submenu',
   'menu.collapseSubmenu': 'Collapse submenu',
   'input.required': 'This field is required',
+  'form.field': 'This field',
+  'form.validate.required': 'Please enter {label}',
+  'form.list.add': 'Add',
+  'form.list.remove': 'Remove',
   'input.formatInvalid': 'Invalid format',
   'input.rule.email': 'Enter a valid email address',
   'input.rule.number': 'Enter a valid number',

package/src/styles.css

@@ -45,8 +45,31 @@
     'Microsoft YaHei',
     sans-serif;
   --rs-font-mono: ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+  --rs-font-serif:
+    'Noto Serif SC',
+    'Source Han Serif SC',
+    'Songti SC',
+    Georgia,
+    'Times New Roman',
+    serif;
   --rs-font-rounded: ui-rounded, 'SF Pro Rounded', 'Segoe UI', system-ui, sans-serif;
 
+  /* 代码编辑器（CodeMirror / Monaco）：JS API 从这些 token 读取 */
+  --rs-code-font-family: var(--rs-font-mono);
+  --rs-code-font-size: var(--rs-font-size-sm);
+  --rs-code-line-height: var(--rs-line-height-relaxed);
+
+  /* 富文本阅读面（RsProseEditor） */
+  --rs-prose-font-family: var(--rs-font-serif);
+  --rs-prose-font-size: var(--rs-font-size-base);
+  --rs-prose-line-height: var(--rs-line-height-relaxed);
+
+  /* 终端排版（xterm 构造时读取；宿主可单独覆盖） */
+  --rs-terminal-font-family: var(--rs-font-mono);
+  --rs-terminal-font-size: var(--rs-font-size-sm);
+  --rs-terminal-font-weight: var(--rs-font-weight-regular);
+  --rs-terminal-font-weight-bold: var(--rs-font-weight-medium);
+
   --rs-control-height-ssm: 1.25rem;
   --rs-control-height-sm: 1.5rem;
   --rs-control-height-md: 2rem;
@@ -115,7 +138,7 @@
   --rs-menu-item-height: var(--rs-control-height-md);
   --rs-menu-item-font-size: var(--rs-font-size-sm);
   --rs-menu-item-radius: var(--rs-radius-sm);
-  --rs-menu-item-active-weight: 500;
+  --rs-menu-item-active-weight: var(--rs-font-weight-medium);
 
   /*
    * 表单标签（RsLabel / .rs-field__label 共用）
@@ -194,7 +217,7 @@
   --rs-table-body-bg: #1f1f1f;
   --rs-table-header-bg: #1f1f1f;
   --rs-table-header-fg: #f3f3f3;
-  --rs-table-header-weight: 600;
+  --rs-table-header-weight: var(--rs-font-weight-semibold);
   --rs-table-header-size: var(--rs-table-cell-size, var(--rs-font-size-xs));
   --rs-table-cell-size: var(--rs-font-size-xs);
   --rs-table-cell-weight: 400;
@@ -320,7 +343,7 @@
   --rs-drawer-overlay-blur: var(--rs-dialog-overlay-blur);
 
   /* ── Tag / DynamicTags（可被业务覆盖）── */
-  --rs-tag-font-weight: var(--rs-font-weight-medium);
+  --rs-tag-font-weight: var(--rs-font-weight-regular);
   --rs-tag-border-alpha: 40%;
   --rs-dynamic-tags-bg: var(--rs-input-bg);
   --rs-dynamic-tags-border: var(--rs-input-border);
@@ -436,7 +459,7 @@
   --rs-table-body-bg: #ffffff;
   --rs-table-header-bg: #f8f8f8;
   --rs-table-header-fg: #1a1a1a;
-  --rs-table-header-weight: 600;
+  --rs-table-header-weight: var(--rs-font-weight-semibold);
   --rs-table-header-size: var(--rs-table-cell-size, var(--rs-font-size-xs));
   --rs-table-cell-size: var(--rs-font-size-xs);
   --rs-table-cell-weight: 400;
@@ -546,7 +569,7 @@
   --rs-drawer-overlay-blur: var(--rs-dialog-overlay-blur);
 
   /* ── Tag / DynamicTags（可被业务覆盖）── */
-  --rs-tag-font-weight: var(--rs-font-weight-medium);
+  --rs-tag-font-weight: var(--rs-font-weight-regular);
   --rs-tag-border-alpha: 40%;
   --rs-dynamic-tags-bg: var(--rs-input-bg);
   --rs-dynamic-tags-border: var(--rs-input-border);
@@ -854,9 +877,29 @@ code {
   color: var(--rs-placeholder);
 }
 
+.rs-select__panel-header,
+.rs-select__panel-footer {
+  flex-shrink: 0;
+  padding: var(--rs-space-xs) var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
+  line-height: var(--rs-line-height-normal);
+  color: var(--rs-muted);
+}
+
+.rs-select__panel-header {
+  border-bottom: 1px solid var(--rs-border-subtle);
+}
+
+.rs-select__panel-footer {
+  border-top: 1px solid var(--rs-border-subtle);
+}
+
 .rs-select__viewport {
   overflow-y: auto;
-  max-height: inherit;
+  max-height: min(
+    var(--rs-select-list-height, 256px),
+    var(--reka-combobox-content-available-height, 256px)
+  );
   padding: 0 var(--rs-space-xs) var(--rs-space-xs);
 }
 
@@ -883,7 +926,7 @@ code {
   display: block;
   padding: var(--rs-space-xs) var(--rs-space-sm) var(--rs-space-xs);
   font-size: var(--rs-font-size-xs);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   color: var(--rs-muted);
   letter-spacing: 0.04em;
   line-height: var(--rs-line-height-tight);
@@ -970,10 +1013,10 @@ code {
 .rs-field--label-left {
   display: grid;
   /*
-   * 左侧标签：配置宽为下限，内容更长时按 max-content 撑开，避免中文标签换行。
-   * 未设置 --rs-field-label-width 时退回 max-content。
+   * 左侧标签：有 --rs-field-label-width 时固定列宽，保证栅格内控件起点对齐。
+   * 未设置时退回 max-content（单字段表单仍可随文案伸缩）。
    */
-  grid-template-columns: minmax(var(--rs-field-label-width, max-content), max-content) minmax(0, 1fr);
+  grid-template-columns: var(--rs-field-label-width, max-content) minmax(0, 1fr);
   align-items: start;
   column-gap: var(--rs-space-md);
 }
@@ -990,10 +1033,14 @@ code {
   line-height: var(--rs-label-line-height);
 }
 
-/* 左侧标签默认单行（与常见表单库一致）；垂直布局不受影响 */
+/* 左侧标签默认单行；固定列宽时过长省略，避免撑破栅格对齐 */
 .rs-field--label-left > .rs-field__label,
 .rs-field--label-left > .rs-label {
+  min-width: 0;
+  max-width: 100%;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .rs-field__required {
@@ -1009,6 +1056,15 @@ code {
   grid-column: 2;
 }
 
+/*
+ * Form.Item 会把 aria-invalid 注入子控件。Input 用 inheritAttrs:false 落到输入框；
+ * 若落到 .rs-field / .rs-select 外壳，UA 会再画一圈轮廓，和 trigger 边框叠成双框。
+ */
+.rs-field[aria-invalid='true'],
+.rs-select[aria-invalid='true'] {
+  outline: none;
+}
+
 .rs-field__control {
   width: 100%;
   min-height: var(--rs-control-height-md);
@@ -1104,7 +1160,7 @@ code {
 
 .rs-toast__title {
   font-size: var(--rs-font-size-sm);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
 }
 
 .rs-toast__description {

package/src/theme/brand.example.css

@@ -13,7 +13,10 @@
  *   --rs-text-disabled / --rs-text-link（底层亦兼容 --rs-text / --rs-muted）
  * - 按钮次要态：--rs-btn-outline-border / --rs-btn-secondary-bg /
  *   --rs-btn-secondary-bg-hover / --rs-btn-secondary-bg-active
- * - 排版：--rs-font-sans / --rs-font-mono / --rs-font-size-* / --rs-font-weight-*
+ * - 排版：--rs-font-sans / --rs-font-mono / --rs-font-serif / --rs-font-size-* / --rs-font-weight-*
+ * - 代码编辑器：--rs-code-font-family / --rs-code-font-size / --rs-code-line-height
+ * - 富文本：--rs-prose-font-family / --rs-prose-font-size / --rs-prose-line-height
+ * - 终端排版：--rs-terminal-font-family / --rs-terminal-font-size / --rs-terminal-font-weight
  * - 菜单：--rs-menu-item-active-fg|bg|weight、--rs-menu-item-fg、--rs-menu-item-bg-hover
  * - 表单标签：--rs-label-font-size|font-weight|line-height|color（RsLabel / .rs-field__label）
  * - 表格专用：--rs-table-*（色值参考 VS Code Dark/Light Modern）

package/src/theme/css-token.ts

@@ -0,0 +1,107 @@
+const FALLBACK_ROOT_PX = 16
+
+function unwrapCssVar(raw: string, el: HTMLElement, depth = 0): string {
+  if (!raw || depth > 8) {
+    return raw
+  }
+  const match = /^var\(\s*(--[\w-]+)\s*(?:,\s*((?:.|\s)+))?\)$/.exec(raw)
+  if (!match) {
+    return raw
+  }
+  const inner = getComputedStyle(el).getPropertyValue(match[1]).trim()
+  if (inner) {
+    return unwrapCssVar(inner, el, depth + 1)
+  }
+  const fallback = (match[2] || '').trim()
+  return fallback ? unwrapCssVar(fallback, el, depth + 1) : ''
+}
+
+/**
+ * 读取已计算的 CSS 自定义属性（不含首尾空白）。
+ * 会展开嵌套 `var(--token)`，便于 jsdom 与宿主覆盖。
+ * SSR / 无 DOM 时返回空字符串。
+ */
+export function readCssVar(name: string, el?: HTMLElement | null): string {
+  if (typeof document === 'undefined' || typeof getComputedStyle === 'undefined') {
+    return ''
+  }
+  const target = el ?? document.documentElement
+  return unwrapCssVar(getComputedStyle(target).getPropertyValue(name).trim(), target)
+}
+
+/** 根元素字号（px），供 rem 换算；失败时按 16。 */
+export function readRootFontSizePx(): number {
+  if (typeof document === 'undefined' || typeof getComputedStyle === 'undefined') {
+    return FALLBACK_ROOT_PX
+  }
+  const n = Number.parseFloat(getComputedStyle(document.documentElement).fontSize)
+  return Number.isFinite(n) && n > 0 ? n : FALLBACK_ROOT_PX
+}
+
+/**
+ * 将 `12px` / `0.875rem` / 无单位数字解析为 px。
+ * 嵌套 `var()` 须先经 getComputedStyle 展开。
+ */
+export function parseCssLengthToPx(raw: string, rootPx = readRootFontSizePx()): number | null {
+  const value = raw.trim()
+  if (!value) {
+    return null
+  }
+  const n = Number.parseFloat(value)
+  if (!Number.isFinite(n)) {
+    return null
+  }
+  if (value.endsWith('px') || /^-?[\d.]+$/.test(value)) {
+    return n
+  }
+  if (value.endsWith('rem') || value.endsWith('em')) {
+    return n * rootPx
+  }
+  return null
+}
+
+/** 读取长度类 token 并转为 px，供 Monaco / xterm 等只接受数字的 API。 */
+export function readCssLengthPx(
+  name: string,
+  fallback: number,
+  el?: HTMLElement | null,
+): number {
+  const parsed = parseCssLengthToPx(readCssVar(name, el))
+  return parsed == null ? fallback : parsed
+}
+
+const CODE_FONT_FALLBACK = 'ui-monospace, SF Mono, Consolas, Liberation Mono, Menlo, monospace'
+
+/** 代码编辑器字体族：`--rs-code-font-family` → `--rs-font-mono`。 */
+export function readCodeFontFamily(el?: HTMLElement | null): string {
+  return readCssVar('--rs-code-font-family', el) || readCssVar('--rs-font-mono', el) || CODE_FONT_FALLBACK
+}
+
+/** 代码编辑器字号（px）：`--rs-code-font-size`，缺省按 sm=14。 */
+export function readCodeFontSizePx(el?: HTMLElement | null): number {
+  return readCssLengthPx('--rs-code-font-size', 14, el)
+}
+
+/** 终端字体族：`--rs-terminal-font-family` → `--rs-font-mono`。 */
+export function readTerminalFontFamily(el?: HTMLElement | null): string {
+  return readCssVar('--rs-terminal-font-family', el) || readCssVar('--rs-font-mono', el) || CODE_FONT_FALLBACK
+}
+
+/** 终端字号（px）：`--rs-terminal-font-size`，缺省按 sm=14。 */
+export function readTerminalFontSizePx(el?: HTMLElement | null): number {
+  return readCssLengthPx('--rs-terminal-font-size', 14, el)
+}
+
+/** 终端字重：`--rs-terminal-font-weight`，缺省 regular。 */
+export function readTerminalFontWeight(el?: HTMLElement | null): string {
+  return readCssVar('--rs-terminal-font-weight', el) || readCssVar('--rs-font-weight-regular', el) || '400'
+}
+
+/** 终端粗体字重：`--rs-terminal-font-weight-bold`，缺省 medium。 */
+export function readTerminalFontWeightBold(el?: HTMLElement | null): string {
+  return (
+    readCssVar('--rs-terminal-font-weight-bold', el) ||
+    readCssVar('--rs-font-weight-medium', el) ||
+    '500'
+  )
+}

package/src/theme/types.ts

@@ -54,6 +54,7 @@ export const RS_RADIUS_CSS: Record<RsRadius, string> = {
  * - 3xl：展示级标题
  *
  * 对应 `--rs-font-size-*`；业务侧优先用 token，勿硬编码 px。
+ * 字族走 `--rs-font-sans` / `--rs-font-mono` / `--rs-font-serif`，组件勿硬编码 system 栈。
  */
 export type RsFontSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl'