@dsh-plugin/dsh-ui-components 0.0.1 → 0.1.0-dev.43616582648

package/src/foundation/index.ts

@@ -1,33 +1,33 @@
-/**
- * 基础层出口：桥接样式、根提供器、图标、尺寸令牌与样式工具。
- *
- * @module @dsh-plugin/dsh-ui-components/foundation
- */
-export { BRIDGE_CSS, BRIDGE_PALETTE } from './bridge.js'
-export { DshProvider, type DshProviderProps } from './provider.js'
-export { G, OVERLAY_MAX_HEIGHT, overlayMaxHeight } from './tokens.js'
-export { OWNER, PORTAL_ID, ROOT_CLASS, cx, injectUiStyle } from './style.js'
-export {
-  DSH_ICON_CONFIG,
-  DshIconProvider,
-  ICON_NAMES,
-  Icon,
-  IconProvider,
-  Icons,
-  icon,
-  type IconByNameProps,
-  type IconComponent,
-  type IconName,
-  type IconOfProps,
-  type IconProps,
-} from './icons.js'
-export {
-  BLACK,
-  STATIC,
-  WHITE,
-  declareRamp,
-  mixTriple,
-  ramp,
-  type Triple,
-} from './palette.js'
-export { ICON_COUNT, ICON_INDEX, type IconMeta } from '../icons-index.js'
+/**
+ * 基础层出口：桥接样式、根提供器、图标、尺寸令牌与样式工具。
+ *
+ * @module @dsh-plugin/dsh-ui-components/foundation
+ */
+export { BRIDGE_CSS, BRIDGE_PALETTE } from './bridge.js'
+export { DshProvider, type DshProviderProps } from './provider.js'
+export { G, OVERLAY_MAX_HEIGHT, overlayMaxHeight } from './tokens.js'
+export { OWNER, PORTAL_ID, ROOT_CLASS, cx, injectUiStyle } from './style.js'
+export {
+  DSH_ICON_CONFIG,
+  DshIconProvider,
+  ICON_NAMES,
+  Icon,
+  IconProvider,
+  Icons,
+  icon,
+  type IconByNameProps,
+  type IconComponent,
+  type IconName,
+  type IconOfProps,
+  type IconProps,
+} from './icons.js'
+export {
+  BLACK,
+  STATIC,
+  WHITE,
+  declareRamp,
+  mixTriple,
+  ramp,
+  type Triple,
+} from './palette.js'
+export { ICON_COUNT, ICON_INDEX, type IconMeta } from '../icons-index.js'

package/src/foundation/palette.ts

@@ -1,153 +1,153 @@
-/**
- * DSH 静态调色板，以 `R,G,B` 三元组表示。
- *
- * Arco 以 `rgb(var(--primary-6))` 的形式消费色阶，无法引用一个 `rgb(...)`
- * 字符串令牌，因此色阶必须写成三元组。这里的取值来自 DSH 源码
- * `packages/client/ui-theme/src/styles/design-platform.css` 的 `--dsw-static-*`，
- * 改宿主配色时同步修改本文件。
- *
- * @module @dsh-plugin/dsh-ui-components/foundation/palette
- */
-
-/** 一个 `[R, G, B]` 三元组，取值 0–255。 */
-export type Triple = readonly [number, number, number]
-
-/** DSH 静态色值，按色系分组。 */
-export const STATIC = {
-  neutral: {
-    0: [255, 255, 255],
-    50: [250, 250, 250],
-    100: [245, 245, 245],
-    150: [237, 237, 237],
-    200: [229, 229, 229],
-    250: [220, 220, 220],
-    300: [212, 212, 212],
-    400: [162, 164, 166],
-    500: [127, 130, 135],
-    550: [101, 103, 107],
-    600: [84, 85, 87],
-    700: [60, 60, 61],
-    800: [41, 41, 41],
-    850: [33, 33, 35],
-    900: [15, 15, 15],
-  },
-  bluish: {
-    0: [255, 255, 255],
-    50: [249, 250, 251],
-    55: [245, 247, 250],
-    60: [245, 246, 247],
-    75: [241, 243, 245],
-    90: [237, 240, 244],
-    100: [235, 238, 242],
-    150: [233, 236, 242],
-    200: [225, 229, 238],
-    300: [207, 211, 214],
-    400: [173, 178, 184],
-    500: [151, 157, 166],
-    600: [129, 133, 140],
-    700: [97, 102, 107],
-    750: [67, 69, 74],
-    800: [53, 54, 56],
-    850: [44, 44, 46],
-    875: [35, 35, 36],
-    900: [27, 27, 28],
-    950: [21, 21, 23],
-    1000: [15, 17, 21],
-  },
-  deepseek: {
-    50: [237, 243, 254],
-    100: [228, 237, 253],
-    200: [211, 226, 255],
-    300: [183, 200, 254],
-    400: [122, 170, 255],
-    450: [86, 134, 254],
-    500: [65, 118, 230],
-    600: [72, 104, 178],
-    800: [52, 65, 91],
-    900: [40, 49, 66],
-  },
-  blue: {
-    50: [239, 246, 255],
-    100: [219, 234, 254],
-    300: [147, 197, 253],
-    400: [96, 165, 250],
-    450: [77, 147, 248],
-    500: [59, 130, 246],
-    600: [37, 99, 235],
-    800: [30, 64, 175],
-    900: [14, 48, 116],
-  },
-  green: {
-    100: [230, 250, 237],
-    400: [78, 209, 126],
-    500: [34, 197, 94],
-  },
-  amber: {
-    100: [254, 245, 231],
-    400: [247, 173, 49],
-    500: [245, 158, 11],
-    600: [221, 134, 41],
-  },
-  red: {
-    50: [254, 242, 242],
-    100: [254, 226, 226],
-    400: [242, 90, 90],
-    500: [239, 68, 68],
-    600: [236, 19, 19],
-  },
-  violet: {
-    400: [167, 139, 250],
-    600: [124, 58, 237],
-  },
-} as const satisfies Record<string, Record<number, Triple>>
-
-/**
- * 从基准色向目标色按比例混合，用于补全 Arco 需要的十级色阶。
- *
- * @param base - 第 6 级（Arco 的默认主色位）取值。
- * @param toward - 混合目标色。
- * @param t - 混合比例，0 为完全取 `base`，1 为完全取 `toward`。
- * @returns 四舍五入到整数的三元组。
- */
-export function mixTriple(base: Triple, toward: Triple, t: number): Triple {
-  return [
-    Math.round(base[0] * (1 - t) + toward[0] * t),
-    Math.round(base[1] * (1 - t) + toward[1] * t),
-    Math.round(base[2] * (1 - t) + toward[2] * t),
-  ]
-}
-
-/** 白色与黑色，供 {@link ramp} 白化、黑化使用。 */
-export const WHITE: Triple = [255, 255, 255]
-/** 黑色。 */
-export const BLACK: Triple = [0, 0, 0]
-
-/**
- * 以第 6 级基准色展开 Arco 的十级色阶。
- *
- * 1–5 级向白色递进，用来做浅色填充与禁用态；7–10 级向黑色递进，用来做
- * 悬停、按下与深色文字。递进比例沿用 Arco 自身色板的视觉节奏。
- *
- * @param base - 第 6 级取值，即 Arco 的主色位。
- * @returns 长度为 10 的色阶，下标 0 对应 `-1`。
- */
-export function ramp(base: Triple): Triple[] {
-  const steps = [0.92, 0.8, 0.64, 0.44, 0.2]
-  const darker = [0.18, 0.36, 0.54, 0.72]
-  return [
-    ...steps.map(t => mixTriple(base, WHITE, t)),
-    base,
-    ...darker.map(t => mixTriple(base, BLACK, t)),
-  ]
-}
-
-/**
- * 把一条色阶序列化为 CSS 自定义属性声明。
- *
- * @param prefix - 属性名前缀，不含 `--`，例如 `primary`。
- * @param steps - 十级色阶。
- * @returns 每行一条、带两空格缩进与换行的声明文本。
- */
-export function declareRamp(prefix: string, steps: readonly Triple[]): string {
-  return steps.map((step, index) => `  --${prefix}-${index + 1}: ${step.join(',')};`).join('\n')
-}
+/**
+ * DSH 静态调色板，以 `R,G,B` 三元组表示。
+ *
+ * Arco 以 `rgb(var(--primary-6))` 的形式消费色阶，无法引用一个 `rgb(...)`
+ * 字符串令牌，因此色阶必须写成三元组。这里的取值来自 DSH 源码
+ * `packages/client/ui-theme/src/styles/design-platform.css` 的 `--dsw-static-*`，
+ * 改宿主配色时同步修改本文件。
+ *
+ * @module @dsh-plugin/dsh-ui-components/foundation/palette
+ */
+
+/** 一个 `[R, G, B]` 三元组，取值 0–255。 */
+export type Triple = readonly [number, number, number]
+
+/** DSH 静态色值，按色系分组。 */
+export const STATIC = {
+  neutral: {
+    0: [255, 255, 255],
+    50: [250, 250, 250],
+    100: [245, 245, 245],
+    150: [237, 237, 237],
+    200: [229, 229, 229],
+    250: [220, 220, 220],
+    300: [212, 212, 212],
+    400: [162, 164, 166],
+    500: [127, 130, 135],
+    550: [101, 103, 107],
+    600: [84, 85, 87],
+    700: [60, 60, 61],
+    800: [41, 41, 41],
+    850: [33, 33, 35],
+    900: [15, 15, 15],
+  },
+  bluish: {
+    0: [255, 255, 255],
+    50: [249, 250, 251],
+    55: [245, 247, 250],
+    60: [245, 246, 247],
+    75: [241, 243, 245],
+    90: [237, 240, 244],
+    100: [235, 238, 242],
+    150: [233, 236, 242],
+    200: [225, 229, 238],
+    300: [207, 211, 214],
+    400: [173, 178, 184],
+    500: [151, 157, 166],
+    600: [129, 133, 140],
+    700: [97, 102, 107],
+    750: [67, 69, 74],
+    800: [53, 54, 56],
+    850: [44, 44, 46],
+    875: [35, 35, 36],
+    900: [27, 27, 28],
+    950: [21, 21, 23],
+    1000: [15, 17, 21],
+  },
+  deepseek: {
+    50: [237, 243, 254],
+    100: [228, 237, 253],
+    200: [211, 226, 255],
+    300: [183, 200, 254],
+    400: [122, 170, 255],
+    450: [86, 134, 254],
+    500: [65, 118, 230],
+    600: [72, 104, 178],
+    800: [52, 65, 91],
+    900: [40, 49, 66],
+  },
+  blue: {
+    50: [239, 246, 255],
+    100: [219, 234, 254],
+    300: [147, 197, 253],
+    400: [96, 165, 250],
+    450: [77, 147, 248],
+    500: [59, 130, 246],
+    600: [37, 99, 235],
+    800: [30, 64, 175],
+    900: [14, 48, 116],
+  },
+  green: {
+    100: [230, 250, 237],
+    400: [78, 209, 126],
+    500: [34, 197, 94],
+  },
+  amber: {
+    100: [254, 245, 231],
+    400: [247, 173, 49],
+    500: [245, 158, 11],
+    600: [221, 134, 41],
+  },
+  red: {
+    50: [254, 242, 242],
+    100: [254, 226, 226],
+    400: [242, 90, 90],
+    500: [239, 68, 68],
+    600: [236, 19, 19],
+  },
+  violet: {
+    400: [167, 139, 250],
+    600: [124, 58, 237],
+  },
+} as const satisfies Record<string, Record<number, Triple>>
+
+/**
+ * 从基准色向目标色按比例混合，用于补全 Arco 需要的十级色阶。
+ *
+ * @param base - 第 6 级（Arco 的默认主色位）取值。
+ * @param toward - 混合目标色。
+ * @param t - 混合比例，0 为完全取 `base`，1 为完全取 `toward`。
+ * @returns 四舍五入到整数的三元组。
+ */
+export function mixTriple(base: Triple, toward: Triple, t: number): Triple {
+  return [
+    Math.round(base[0] * (1 - t) + toward[0] * t),
+    Math.round(base[1] * (1 - t) + toward[1] * t),
+    Math.round(base[2] * (1 - t) + toward[2] * t),
+  ]
+}
+
+/** 白色与黑色，供 {@link ramp} 白化、黑化使用。 */
+export const WHITE: Triple = [255, 255, 255]
+/** 黑色。 */
+export const BLACK: Triple = [0, 0, 0]
+
+/**
+ * 以第 6 级基准色展开 Arco 的十级色阶。
+ *
+ * 1–5 级向白色递进，用来做浅色填充与禁用态；7–10 级向黑色递进，用来做
+ * 悬停、按下与深色文字。递进比例沿用 Arco 自身色板的视觉节奏。
+ *
+ * @param base - 第 6 级取值，即 Arco 的主色位。
+ * @returns 长度为 10 的色阶，下标 0 对应 `-1`。
+ */
+export function ramp(base: Triple): Triple[] {
+  const steps = [0.92, 0.8, 0.64, 0.44, 0.2]
+  const darker = [0.18, 0.36, 0.54, 0.72]
+  return [
+    ...steps.map(t => mixTriple(base, WHITE, t)),
+    base,
+    ...darker.map(t => mixTriple(base, BLACK, t)),
+  ]
+}
+
+/**
+ * 把一条色阶序列化为 CSS 自定义属性声明。
+ *
+ * @param prefix - 属性名前缀，不含 `--`，例如 `primary`。
+ * @param steps - 十级色阶。
+ * @returns 每行一条、带两空格缩进与换行的声明文本。
+ */
+export function declareRamp(prefix: string, steps: readonly Triple[]): string {
+  return steps.map((step, index) => `  --${prefix}-${index + 1}: ${step.join(',')};`).join('\n')
+}

package/src/foundation/provider.tsx

@@ -1,62 +1,62 @@
-/**
- * DSH 组件树的根提供器。
- *
- * 它做三件事：注入桥接样式表、把 Arco 的全部浮层挂到带同一套变量的容器
- * 上、并把 `.dsh-ui` 容器类交给子树。插件在自己的 React 树根部挂一次即可，
- * 组件本身不依赖它也能渲染（样式表会在首个组件渲染时补注入），但没有它时
- * 浮层会挂到 `body` 下而拿不到 `.dsh-ui` 的变量。
- *
- * @module @dsh-plugin/dsh-ui-components/foundation/provider
- */
-import * as React from 'react'
-import { Arco } from '@dsh-plugin/dsh-loader/client'
-import { BRIDGE_CSS } from './bridge.js'
-import { ROOT_CLASS, ensureOverlayContainer, injectUiStyle } from './style.js'
-
-/** {@link DshProvider} 的 props。 */
-export interface DshProviderProps {
-  /** 子树内容。 */
-  children?: React.ReactNode
-  /** 追加到根容器的类名。 */
-  className?: string
-  /** 追加到根容器的内联样式。 */
-  style?: React.CSSProperties
-}
-
-/**
- * 取得或创建浮层容器。
- *
- * 容器挂在 `body` 下并带 `.dsh-ui-overlay`，因此浮层即使在 body 层也能读到
- * 同一套变量。多个 provider 共用同一个容器，卸载时只解除自己的引用。
- *
- * @returns 浮层容器元素；服务端渲染时返回 `null`。
- */
-function ensurePortal(): HTMLElement | null {
-  return ensureOverlayContainer()
-}
-
-/**
- * 包裹子树，注入 DSH 皮肤并把 Arco 浮层收进统一容器。
- *
- * @param props - 见 {@link DshProviderProps}。
- * @returns 带 `.dsh-ui` 容器的 `ConfigProvider` 子树。
- */
-export function DshProvider({ children, className, style }: DshProviderProps): React.ReactElement {
-  // 注入放在渲染期：样式必须先于首帧存在，而 injectUiStyle 幂等。
-  injectUiStyle('foundation/bridge.css', BRIDGE_CSS)
-
-  const getPopupContainer = React.useCallback((node: HTMLElement): HTMLElement => {
-    // 浮层优先留在触发元素所在的滚动/裁剪上下文里，只有在它不在 `.dsh-ui`
-    // 子树内时才回退到 body 级容器。
-    const scope = node.closest(`.${ROOT_CLASS}`)
-    return scope instanceof HTMLElement ? scope : (ensurePortal() ?? document.body)
-  }, [])
-
-  return (
-    <Arco.ConfigProvider getPopupContainer={getPopupContainer}>
-      <div className={[ROOT_CLASS, className].filter(Boolean).join(' ')} style={style}>
-        {children}
-      </div>
-    </Arco.ConfigProvider>
-  )
-}
+/**
+ * DSH 组件树的根提供器。
+ *
+ * 它做三件事：注入桥接样式表、把 Arco 的全部浮层挂到带同一套变量的容器
+ * 上、并把 `.dsh-ui` 容器类交给子树。插件在自己的 React 树根部挂一次即可，
+ * 组件本身不依赖它也能渲染（样式表会在首个组件渲染时补注入），但没有它时
+ * 浮层会挂到 `body` 下而拿不到 `.dsh-ui` 的变量。
+ *
+ * @module @dsh-plugin/dsh-ui-components/foundation/provider
+ */
+import * as React from 'react'
+import { Arco } from '@dsh-plugin/dsh-loader/client'
+import { BRIDGE_CSS } from './bridge.js'
+import { ROOT_CLASS, ensureOverlayContainer, injectUiStyle } from './style.js'
+
+/** {@link DshProvider} 的 props。 */
+export interface DshProviderProps {
+  /** 子树内容。 */
+  children?: React.ReactNode
+  /** 追加到根容器的类名。 */
+  className?: string
+  /** 追加到根容器的内联样式。 */
+  style?: React.CSSProperties
+}
+
+/**
+ * 取得或创建浮层容器。
+ *
+ * 容器挂在 `body` 下并带 `.dsh-ui-overlay`，因此浮层即使在 body 层也能读到
+ * 同一套变量。多个 provider 共用同一个容器，卸载时只解除自己的引用。
+ *
+ * @returns 浮层容器元素；服务端渲染时返回 `null`。
+ */
+function ensurePortal(): HTMLElement | null {
+  return ensureOverlayContainer()
+}
+
+/**
+ * 包裹子树，注入 DSH 皮肤并把 Arco 浮层收进统一容器。
+ *
+ * @param props - 见 {@link DshProviderProps}。
+ * @returns 带 `.dsh-ui` 容器的 `ConfigProvider` 子树。
+ */
+export function DshProvider({ children, className, style }: DshProviderProps): React.ReactElement {
+  // 注入放在渲染期：样式必须先于首帧存在，而 injectUiStyle 幂等。
+  injectUiStyle('foundation/bridge.css', BRIDGE_CSS)
+
+  const getPopupContainer = React.useCallback((node: HTMLElement): HTMLElement => {
+    // 浮层优先留在触发元素所在的滚动/裁剪上下文里，只有在它不在 `.dsh-ui`
+    // 子树内时才回退到 body 级容器。
+    const scope = node.closest(`.${ROOT_CLASS}`)
+    return scope instanceof HTMLElement ? scope : (ensurePortal() ?? document.body)
+  }, [])
+
+  return (
+    <Arco.ConfigProvider getPopupContainer={getPopupContainer}>
+      <div className={[ROOT_CLASS, className].filter(Boolean).join(' ')} style={style}>
+        {children}
+      </div>
+    </Arco.ConfigProvider>
+  )
+}

package/src/foundation/style.ts

@@ -1,63 +1,63 @@
-/**
- * 样式注入与类名拼接。
- *
- * 样式以字符串常量形式注入，消费方不需要任何 CSS 处理管线。注入走
- * `@dsh-plugin/dsh-loader/client` 的 `injectStyle`，它带 `data-plugin` /
- * `data-plugin-css` 归属属性，宿主热重载时可以回收。
- *
- * @module @dsh-plugin/dsh-ui-components/foundation/style
- */
-import { injectStyle } from '@dsh-plugin/dsh-loader/client'
-
-/** 本包在宿主样式归属属性中使用的插件 id。 */
-export const OWNER = '@dsh-plugin/dsh-ui-components'
-
-/** 组件样式统一使用的根类名。 */
-export const ROOT_CLASS = 'dsh-ui'
-
-/** 浮层容器元素 id。 */
-export const PORTAL_ID = 'dsh-ui-portal'
-
-/**
- * 幂等注入一张样式表。
- *
- * @param cssId - 表内唯一标识，例如 `foundation/bridge.css`。
- * @param css - 样式表文本。
- * @returns 释放函数，移除本次注入的标签；重复注入时返回空实现。
- */
-export function injectUiStyle(cssId: string, css: string): () => void {
-  return injectStyle(OWNER, cssId, css)
-}
-
-/** 浮层容器的类名，带上它才能在 body 层读到同一套变量。 */
-export const OVERLAY_CLASS = `${ROOT_CLASS}-overlay`
-
-/**
- * 取得或创建 body 级浮层容器。
- *
- * Arco 的 `Modal`、`Drawer` 与命令式弹层自带 `getPopupContainer` 默认值
- * （直接返回 `document.body`），不读 `ConfigProvider` 的设置，因此这类组件
- * 必须显式传入本容器，否则浮层挂在 `body` 下拿不到 `.dsh-ui` 的变量。
- *
- * @returns 容器元素；服务端渲染时返回 `null`。
- */
-export function ensureOverlayContainer(): HTMLElement | null {
-  if (typeof document === 'undefined') return null
-  const existing = document.getElementById(PORTAL_ID)
-  if (existing !== null) return existing
-  const host = document.createElement('div')
-  host.id = PORTAL_ID
-  host.className = OVERLAY_CLASS
-  document.body.appendChild(host)
-  return host
-}
-
-/**
- * 拼接类名，忽略假值。
- *
- * @param parts - 类名片段，假值被跳过。
- * @returns 以单个空格连接的类名字符串。
- */
-export function cx(...parts: Array<string | false | null | undefined>): string {
-  return parts.filter(Boolean).join(' ')
-}
+/**
+ * 样式注入与类名拼接。
+ *
+ * 样式以字符串常量形式注入，消费方不需要任何 CSS 处理管线。注入走
+ * `@dsh-plugin/dsh-loader/client` 的 `injectStyle`，它带 `data-plugin` /
+ * `data-plugin-css` 归属属性，宿主热重载时可以回收。
+ *
+ * @module @dsh-plugin/dsh-ui-components/foundation/style
+ */
+import { injectStyle } from '@dsh-plugin/dsh-loader/client'
+
+/** 本包在宿主样式归属属性中使用的插件 id。 */
+export const OWNER = '@dsh-plugin/dsh-ui-components'
+
+/** 组件样式统一使用的根类名。 */
+export const ROOT_CLASS = 'dsh-ui'
+
+/** 浮层容器元素 id。 */
+export const PORTAL_ID = 'dsh-ui-portal'
+
+/**
+ * 幂等注入一张样式表。
+ *
+ * @param cssId - 表内唯一标识，例如 `foundation/bridge.css`。
+ * @param css - 样式表文本。
+ * @returns 释放函数，移除本次注入的标签；重复注入时返回空实现。
+ */
+export function injectUiStyle(cssId: string, css: string): () => void {
+  return injectStyle(OWNER, cssId, css)
+}
+
+/** 浮层容器的类名，带上它才能在 body 层读到同一套变量。 */
+export const OVERLAY_CLASS = `${ROOT_CLASS}-overlay`
+
+/**
+ * 取得或创建 body 级浮层容器。
+ *
+ * Arco 的 `Modal`、`Drawer` 与命令式弹层自带 `getPopupContainer` 默认值
+ * （直接返回 `document.body`），不读 `ConfigProvider` 的设置，因此这类组件
+ * 必须显式传入本容器，否则浮层挂在 `body` 下拿不到 `.dsh-ui` 的变量。
+ *
+ * @returns 容器元素；服务端渲染时返回 `null`。
+ */
+export function ensureOverlayContainer(): HTMLElement | null {
+  if (typeof document === 'undefined') return null
+  const existing = document.getElementById(PORTAL_ID)
+  if (existing !== null) return existing
+  const host = document.createElement('div')
+  host.id = PORTAL_ID
+  host.className = OVERLAY_CLASS
+  document.body.appendChild(host)
+  return host
+}
+
+/**
+ * 拼接类名，忽略假值。
+ *
+ * @param parts - 类名片段，假值被跳过。
+ * @returns 以单个空格连接的类名字符串。
+ */
+export function cx(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(' ')
+}