niuma-ui 1.0.0

package/src/theme/apply.ts

@@ -0,0 +1,12 @@
+import type { RsThemeMode } from './types'
+
+/**
+ * 切换明暗主题：仅设置 data-rs-theme，色值由 styles.css 中的 CSS 变量提供。
+ * 业务定制请写 CSS 覆盖 --rs-*，见 theme/brand.example.css
+ */
+export function applyTheme(
+  mode: RsThemeMode,
+  el: HTMLElement = document.documentElement,
+) {
+  el.setAttribute('data-rs-theme', mode)
+}

package/src/theme/brand.example.css

@@ -0,0 +1,37 @@
+/**
+ * 业务品牌色覆盖示例
+ *
+ * 用法：
+ * 1. 复制到 apps/web/src/theme/brand.css
+ * 2. 在 main.ts 中于 niuma-ui/styles.css 之后 import
+ *
+ * 原理：CSS 变量级联，后加载的同名 --rs-* 覆盖公共 preset
+ *
+ * 表格专用 token（--rs-table-*）可单独覆盖，色值参考 VS Code Dark/Light Modern
+ * 终端专用 token（--rs-terminal-*）可单独覆盖 xterm 调色板（默认 macOS Terminal.app 风格）
+ */
+
+[data-rs-theme='light'] {
+  --rs-primary: #6366f1;
+  --rs-primary-hover: #4f46e5;
+  --rs-primary-container: #eef2ff;
+  --rs-on-primary-container: #312e81;
+}
+
+[data-rs-theme='dark'] {
+  --rs-primary: #818cf8;
+  --rs-primary-hover: #a5b4fc;
+  --rs-primary-container: #1e1b4b;
+  --rs-on-primary-container: #c7d2fe;
+}
+
+/* 子树隔离：把 data-rs-theme 挂在业务根节点时同样生效 */
+.rs-app-web[data-rs-theme='light'] {
+  --rs-primary: #6366f1;
+  --rs-primary-hover: #4f46e5;
+}
+
+.rs-app-web[data-rs-theme='dark'] {
+  --rs-primary: #818cf8;
+  --rs-primary-hover: #a5b4fc;
+}

package/src/theme/presets.ts

@@ -0,0 +1,69 @@
+import type { RsThemeMode, RsThemeTokens } from './types'
+
+/**
+ * 色板参考值（与 styles.css 中的 --rs-* 保持同步，勿单独改此处）
+ * 暗色：VS Code Dark Modern 灰阶 + macOS 系统色（primary / danger / success 等）
+ * 亮色：macOS systemBackground / label + VS Code Light Modern 表格语义
+ */
+export const themePresets: Record<RsThemeMode, RsThemeTokens> = {
+  light: {
+    primary: '#007aff',
+    primaryHover: '#0071eb',
+    primaryForeground: '#ffffff',
+    primaryContainer: '#e5f1ff',
+    onPrimaryContainer: '#003d99',
+    bg: '#f5f5f7',
+    surface: '#ffffff',
+    surfaceElevated: '#ffffff',
+    surfaceHover: '#e8e8ed',
+    inputBg: '#ffffff',
+    border: '#8c8c8c',
+    borderSubtle: 'rgb(60 60 67 / 0.20)',
+    text: '#1d1d1f',
+    muted: '#6e6e73',
+    placeholder: '#909090',
+    danger: '#ff3b30',
+    dangerContainer: '#ffe5e3',
+    onDangerContainer: '#c41e16',
+    success: '#34c759',
+    successContainer: '#e4f8e9',
+    onSuccessContainer: '#1a7f37',
+    warning: '#ff9500',
+    warningContainer: '#fff3e0',
+    onWarningContainer: '#b26500',
+    info: '#007aff',
+    infoContainer: '#e5f1ff',
+    onInfoContainer: '#003d99',
+    focusRing: 'color-mix(in srgb, #007aff 22%, transparent)',
+  },
+  dark: {
+    primary: '#0a84ff',
+    primaryHover: '#409cff',
+    primaryForeground: '#ffffff',
+    primaryContainer: '#0a2540',
+    onPrimaryContainer: '#6cb4ff',
+    bg: '#181818',
+    surface: '#1f1f1f',
+    surfaceElevated: '#262626',
+    surfaceHover: '#2e2e2e',
+    inputBg: '#2b2b2b',
+    border: '#6e6e6e',
+    borderSubtle: '#3a3a3a',
+    text: '#cccccc',
+    muted: '#9d9d9d',
+    placeholder: '#919191',
+    danger: '#ff453a',
+    dangerContainer: '#3b1210',
+    onDangerContainer: '#ff8a84',
+    success: '#30d158',
+    successContainer: '#0d2818',
+    onSuccessContainer: '#6ee79a',
+    warning: '#ff9f0a',
+    warningContainer: '#2e1f08',
+    onWarningContainer: '#ffc46b',
+    info: '#0a84ff',
+    infoContainer: '#0a2540',
+    onInfoContainer: '#6cb4ff',
+    focusRing: 'color-mix(in srgb, #0a84ff 28%, transparent)',
+  },
+}

package/src/theme/types.ts

@@ -0,0 +1,81 @@
+export type RsThemeMode = 'dark' | 'light'
+
+/**
+ * 控件尺寸（由小到大）：
+ * - ssm：极小
+ * - sm：小号
+ * - md：中号（默认）
+ * - lg：大号
+ *
+ * 高度由 `--rs-control-height-*` 统一控制，业务侧勿用 :deep 覆盖。
+ */
+export type RsComponentSize = 'ssm' | 'sm' | 'md' | 'lg'
+
+export const RS_COMPONENT_SIZES: readonly RsComponentSize[] = ['ssm', 'sm', 'md', 'lg']
+
+/** 各档控件图标默认像素边长。 */
+export const RS_COMPONENT_SIZE_ICON_PX: Record<RsComponentSize, number> = {
+  ssm: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+}
+
+/**
+ * 圆角档位（由小到大）：
+ * - none：直角（无圆角）
+ * - xs / sm / md / lg：对应 `--rs-radius-*`
+ * - full：胶囊 / 圆形
+ *
+ * 业务侧用组件 `radius` / `iconRadius` 等 prop，勿 :deep 改 border-radius。
+ */
+export type RsRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full'
+
+export const RS_RADII: readonly RsRadius[] = ['none', 'xs', 'sm', 'md', 'lg', 'full']
+
+/** 各档圆角对应的 CSS 值（可直接赋给 border-radius / CSS 变量）。 */
+export const RS_RADIUS_CSS: Record<RsRadius, string> = {
+  none: '0',
+  xs: 'var(--rs-radius-xs)',
+  sm: 'var(--rs-radius-sm)',
+  md: 'var(--rs-radius)',
+  lg: 'var(--rs-radius-lg)',
+  full: 'var(--rs-radius-full)',
+}
+
+/**
+ * 设计 token
+ * 色彩语义：Google MD3 容器色 + 字节 Arco 中性色 + 国际 SaaS 功能色
+ */
+export interface RsThemeTokens {
+  primary: string
+  primaryHover: string
+  primaryForeground: string
+  primaryContainer: string
+  onPrimaryContainer: string
+  bg: string
+  surface: string
+  surfaceElevated: string
+  surfaceHover: string
+  inputBg: string
+  border: string
+  borderSubtle: string
+  text: string
+  muted: string
+  placeholder: string
+  danger: string
+  dangerContainer: string
+  onDangerContainer: string
+  success: string
+  successContainer: string
+  onSuccessContainer: string
+  warning: string
+  warningContainer: string
+  onWarningContainer: string
+  info: string
+  infoContainer: string
+  onInfoContainer: string
+  focusRing: string
+}
+
+export const themeAttribute = 'data-rs-theme'

package/src/utils/rs-clipboard.ts

@@ -0,0 +1,272 @@
+/** 剪贴板读写封装：浏览器 Clipboard API 优先，CEF Shell Bridge 最后兜底。
+ *  CEF 壳层通过 CefPermissionHandler 自动放行 CEF_PERMISSION_TYPE_CLIPBOARD，
+ *  避免 Alloy 默认 IGNORE；Shell Bridge 仅在 API 仍失败时使用。
+ */
+
+type CefQueryFn = (req: {
+  request: string
+  onSuccess: (response: string) => void
+  onFailure: (code: number, message: string) => void
+}) => void
+
+function bridgeRequestId(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+  return `clip-${Date.now()}-${Math.random().toString(16).slice(2)}`
+}
+
+function getCefQuery(): CefQueryFn | null {
+  const fn = (globalThis as { cefQuery?: CefQueryFn }).cefQuery
+  return typeof fn === 'function' ? fn : null
+}
+
+async function bridgeInvokeClipboard<T>(method: string, params: Record<string, unknown> = {}): Promise<T | null> {
+  const cefQuery = getCefQuery()
+  if (!cefQuery) {
+    return null
+  }
+  return new Promise((resolve) => {
+    cefQuery({
+      request: JSON.stringify({ method, params, id: bridgeRequestId() }),
+      onSuccess: (response) => {
+        try {
+          resolve(JSON.parse(response) as T)
+        } catch {
+          resolve(null)
+        }
+      },
+      onFailure: () => resolve(null),
+    })
+  })
+}
+
+async function readClipboardViaShell(): Promise<string | null> {
+  const result = await bridgeInvokeClipboard<{ text?: string }>('shell.clipboard.readText')
+  const text = result?.text
+  return text ? text : null
+}
+
+async function writeClipboardViaShell(text: string): Promise<boolean> {
+  const result = await bridgeInvokeClipboard<{ written?: boolean }>('shell.clipboard.writeText', { text })
+  return Boolean(result?.written)
+}
+
+let prefetchedText: string | null = null
+let prefetchAt = 0
+let prefetchPromise: Promise<void> | null = null
+let readApiBlocked = false
+let writeApiBlocked = false
+let permissionStateProbed = false
+
+const PREFETCH_TTL_MS = 10_000
+
+function isClipboardPermissionDeniedError(err: unknown): boolean {
+  return err instanceof DOMException && (err.name === 'NotAllowedError' || err.name === 'SecurityError')
+}
+
+function markReadApiBlocked(err?: unknown): void {
+  if (err === undefined || isClipboardPermissionDeniedError(err)) {
+    readApiBlocked = true
+  }
+}
+
+function markWriteApiBlocked(err?: unknown): void {
+  if (err === undefined || isClipboardPermissionDeniedError(err)) {
+    writeApiBlocked = true
+  }
+}
+
+async function syncClipboardPermissionState(): Promise<void> {
+  if (permissionStateProbed) {
+    return
+  }
+  permissionStateProbed = true
+  if (!navigator.permissions?.query) {
+    return
+  }
+  try {
+    const read = await navigator.permissions.query({ name: 'clipboard-read' as PermissionName })
+    if (read.state === 'denied') {
+      readApiBlocked = true
+    }
+    read.onchange = () => {
+      readApiBlocked = read.state === 'denied'
+    }
+  } catch {
+    // clipboard-read permission query 并非所有环境都支持
+  }
+  try {
+    const write = await navigator.permissions.query({ name: 'clipboard-write' as PermissionName })
+    if (write.state === 'denied') {
+      writeApiBlocked = true
+    }
+    write.onchange = () => {
+      writeApiBlocked = write.state === 'denied'
+    }
+  } catch {
+    // ignore
+  }
+}
+
+/** 在 contextmenu 等仍持有用户手势时预读剪贴板，供稍后菜单项点击使用 */
+export async function prefetchClipboardText(): Promise<void> {
+  prefetchedText = null
+  prefetchAt = Date.now()
+  await syncClipboardPermissionState()
+  if (!readApiBlocked) {
+    const fromReadText = await readClipboardViaReadText()
+    if (fromReadText) {
+      prefetchedText = fromReadText
+      return
+    }
+    const fromItems = await readClipboardViaItems()
+    if (fromItems) {
+      prefetchedText = fromItems
+      return
+    }
+  }
+  const fromShell = await readClipboardViaShell()
+  if (fromShell) {
+    prefetchedText = fromShell
+  }
+}
+
+/** 启动预读并返回 promise，菜单点击粘贴前应 await */
+export function beginClipboardPrefetch(): Promise<void> {
+  prefetchPromise = prefetchClipboardText().finally(() => {
+    prefetchPromise = null
+  })
+  return prefetchPromise
+}
+
+export async function waitClipboardPrefetch(): Promise<void> {
+  if (prefetchPromise) {
+    await prefetchPromise
+  }
+}
+
+function takePrefetchedText(): string | null {
+  if (!prefetchedText || Date.now() - prefetchAt > PREFETCH_TTL_MS) {
+    prefetchedText = null
+    return null
+  }
+  const text = prefetchedText
+  prefetchedText = null
+  return text
+}
+
+export async function readClipboardText(): Promise<string | null> {
+  await waitClipboardPrefetch()
+  const cached = takePrefetchedText()
+  if (cached) {
+    return cached
+  }
+  await syncClipboardPermissionState()
+  if (!readApiBlocked) {
+    const fromReadText = await readClipboardViaReadText()
+    if (fromReadText) {
+      return fromReadText
+    }
+    const fromItems = await readClipboardViaItems()
+    if (fromItems) {
+      return fromItems
+    }
+  }
+  return readClipboardViaShell()
+}
+
+async function readClipboardViaReadText(): Promise<string | null> {
+  if (readApiBlocked || !navigator.clipboard?.readText) {
+    return null
+  }
+  try {
+    const text = await navigator.clipboard.readText()
+    return text || null
+  } catch (err) {
+    markReadApiBlocked(err)
+    return null
+  }
+}
+
+/** readText 失败时尝试 clipboard.read() 取 text/plain（CEF 部分场景更稳） */
+async function readClipboardViaItems(): Promise<string | null> {
+  if (readApiBlocked || !navigator.clipboard?.read) {
+    return null
+  }
+  try {
+    const items = await navigator.clipboard.read()
+    for (const item of items) {
+      if (!item.types.includes('text/plain')) {
+        continue
+      }
+      const blob = await item.getType('text/plain')
+      const text = await blob.text()
+      if (text) {
+        return text
+      }
+    }
+  } catch (err) {
+    markReadApiBlocked(err)
+    return null
+  }
+  return null
+}
+
+export async function writeClipboardText(text: string): Promise<boolean> {
+  if (!text || writeApiBlocked || !navigator.clipboard?.writeText) {
+    return false
+  }
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch (err) {
+    markWriteApiBlocked(err)
+    return false
+  }
+}
+
+/** execCommand 兜底：CEF / 无 Clipboard API 权限时菜单复制仍可用 */
+export function copyTextWithExecCommand(text: string): boolean {
+  if (!text || typeof document === 'undefined') {
+    return false
+  }
+  try {
+    const textarea = document.createElement('textarea')
+    textarea.value = text
+    textarea.setAttribute('readonly', '')
+    textarea.style.cssText = 'position:fixed;left:-9999px;top:0;opacity:0'
+    document.body.appendChild(textarea)
+    textarea.select()
+    const ok = document.execCommand('copy')
+    textarea.remove()
+    return ok
+  } catch {
+    return false
+  }
+}
+
+/** 写入系统剪贴板（API 优先，execCommand 兜底） */
+export async function copyTextToClipboard(text: string): Promise<boolean> {
+  if (!text) {
+    return false
+  }
+  await syncClipboardPermissionState()
+  if (!writeApiBlocked && (await writeClipboardText(text))) {
+    return true
+  }
+  if (copyTextWithExecCommand(text)) {
+    return true
+  }
+  return writeClipboardViaShell(text)
+}
+
+/** @internal vitest 用 */
+export function __resetClipboardStateForTests(): void {
+  prefetchedText = null
+  prefetchAt = 0
+  prefetchPromise = null
+  readApiBlocked = false
+  writeApiBlocked = false
+  permissionStateProbed = false
+}

package/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<object, object, unknown>
+  export default component
+}

package/vite-plugins/monaco-zh-nls.ts

@@ -0,0 +1,101 @@
+/**
+ * Vite 插件：将 Monaco Editor 0.55 内置的官方中文 NLS 消息注入到
+ * `nls.messages.js` 模块，使编辑器右键菜单、命令面板等 UI 显示中文。
+ *
+ * Monaco 0.55 ESM 编译产物中 localize() 使用数字索引，需要设置
+ * globalThis._VSCODE_NLS_MESSAGES 数组才能生效。
+ * Monaco 自带 min/vs/nls.messages.zh-cn.js.js，提供完整的官方中文翻译。
+ *
+ * 两阶段拦截：
+ *  1. config hook + rolldown plugin → 覆盖 Vite 8 optimizeDeps 预构建阶段
+ *  2. Rollup load hook              → 覆盖生产构建 / 非预构建 dev 场景
+ */
+import { readFileSync } from 'fs'
+import { createRequire } from 'module'
+import type { Plugin } from 'vite'
+
+function extractZhCnMessages(): string {
+  try {
+    const require = createRequire(import.meta.url)
+    const zhCnPath = require.resolve('monaco-editor/min/vs/nls.messages.zh-cn.js.js')
+    const raw = readFileSync(zhCnPath, 'utf8')
+
+    const start = raw.indexOf('_VSCODE_NLS_MESSAGES=[')
+    if (start === -1) return ''
+
+    const arrStart = raw.indexOf('[', start)
+    let depth = 0
+    let arrEnd = -1
+    for (let i = arrStart; i < raw.length; i++) {
+      if (raw[i] === '[') depth++
+      else if (raw[i] === ']') {
+        depth--
+        if (depth === 0) {
+          arrEnd = i
+          break
+        }
+      }
+    }
+    return arrEnd !== -1 ? raw.slice(arrStart, arrEnd + 1) : ''
+  } catch (e) {
+    console.warn('[monaco-zh-nls] 无法加载 Monaco 官方中文 NLS:', e)
+    return ''
+  }
+}
+
+export function monacoZhNlsPlugin(): Plugin {
+  const messagesCode = extractZhCnMessages()
+
+  if (!messagesCode) {
+    console.warn('[monaco-zh-nls] 中文 NLS 数组提取失败，跳过插件')
+    return { name: 'monaco-zh-nls' }
+  }
+
+  const nlsModuleCode = `
+/* monaco-zh-nls: Monaco 0.55 官方中文翻译 */
+globalThis._VSCODE_NLS_MESSAGES = ${messagesCode};
+globalThis._VSCODE_NLS_LANGUAGE = 'zh-cn';
+export function getNLSMessages() { return globalThis._VSCODE_NLS_MESSAGES; }
+export function getNLSLanguage() { return globalThis._VSCODE_NLS_LANGUAGE; }
+`
+
+  const nlsFileFilter = /monaco-editor[/\\]esm[/\\]vs[/\\]nls\.messages\.js$/
+
+  /** rolldown plugin —— 用于 Vite 8 optimizeDeps 预构建阶段 */
+  const rolldownPlugin = {
+    name: 'monaco-zh-nls-rolldown',
+    load(id: string) {
+      if (nlsFileFilter.test(id)) {
+        return nlsModuleCode
+      }
+      return undefined
+    },
+  }
+
+  return {
+    name: 'monaco-zh-nls',
+    enforce: 'pre',
+
+    /**
+     * 将 rolldown plugin 注入到 optimizeDeps，覆盖 Vite 8 开发模式预构建阶段。
+     * Monaco 没有 "type":"module"，Vite 会用 rolldown 预构建它，
+     * 此时需要通过 rolldownOptions.plugins 拦截。
+     */
+    config() {
+      return {
+        optimizeDeps: {
+          rolldownOptions: {
+            plugins: [rolldownPlugin],
+          },
+        },
+      }
+    },
+
+    /** Rollup load hook —— 用于生产构建 / SSR / 非预构建 dev 场景 */
+    load(id: string) {
+      if (nlsFileFilter.test(id)) {
+        return nlsModuleCode
+      }
+    },
+  }
+}

package/vite-plugins/silence-antlr-parse-console.ts

@@ -0,0 +1,29 @@
+import type { Plugin } from 'vite'
+
+/**
+ * 静默 antlr4ng ConsoleErrorListener 的 parse 刷屏。
+ *
+ * dt-sql-parser 在补全路径 `createParser(input)` 未传 errorListener 时，
+ * 不会 `removeErrorListeners()`，半成品 SQL 的 syntaxError 会打满 DevTools。
+ * 真实诊断改走 Monaco markers（pgsql diagnostics）。
+ */
+export function silenceAntlrParseConsole(): Plugin {
+  return {
+    name: 'silence-antlr-parse-console',
+    enforce: 'pre',
+    transform(code, id) {
+      const normalized = id.replace(/\\/g, '/')
+      if (!normalized.includes('antlr4ng')) return null
+      if (!code.includes('ConsoleErrorListener')) return null
+      if (!code.includes('console.error("line "')) return null
+
+      return {
+        code: code.replace(
+          /console\.error\("line " \+ line \+ ":" \+ charPositionInLine \+ " " \+ msg\);/g,
+          '/* parse → Monaco markers; skip console spam */',
+        ),
+        map: null,
+      }
+    },
+  }
+}