@unif/react-native-design 0.8.2 → 0.10.0

package/src/components/ui/TextField/TextFieldBase.tsx

@@ -1,6 +1,7 @@
 import React, { type ComponentRef, forwardRef, useState } from 'react';
 import { Text, TextInput, View } from 'react-native';
-import { control, space, useColors, useThemedStyles } from '../../../theme';
+import { control, r, space, useColors, useThemedStyles } from '../../../theme';
+import { childTestID } from '../../../utils/testID';
 import { makeStyles } from './styles';
 import type { TextFieldBaseProps } from './types';
 
@@ -26,7 +27,8 @@ export const TextFieldBase = forwardRef<TextInputRef, TextFieldBaseProps>(
     {
       multiline = false,
       height = control.lg,
-      minHeight = 96,
+      // [L-81] multiline minHeight 裸 96 → r(96),随设备缩放
+      minHeight = r(96),
       maxHeight,
       leading,
       trailing,
@@ -37,6 +39,7 @@ export const TextFieldBase = forwardRef<TextInputRef, TextFieldBaseProps>(
       value,
       onFocus,
       onBlur,
+      onChangeText,
       testID,
       ...rest
     },
@@ -45,8 +48,15 @@ export const TextFieldBase = forwardRef<TextInputRef, TextFieldBaseProps>(
     const c = useColors();
     const styles = useThemedStyles(makeStyles);
     const [focused, setFocused] = useState(false);
-    const filled = value != null && String(value).length > 0;
+    // [M-9] 内部镜像 state:非受控场景 value 不传,用 _mirror 做 hasValue 判断
+    const [_mirror, setMirror] = useState('');
+    // [M-9] filled 在受控 value 和内部镜像 state 之间取 hasValue,
+    // 保证非受控场景 filled 视觉态能正确响应用户输入,且受控用法行为不变
+    const filled =
+      value != null ? String(value).length > 0 : _mirror.length > 0;
     const isEditable = disabled ? false : editable;
+    // [L-31] editable=false(非 disabled)时也应进入 disabled a11y state
+    const isDisabledA11y = disabled || editable === false;
 
     // 视觉态优先级:error > focused > filled > idle。
     // active 三态(focus/filled/error)共享 wrapActive 白底,各自只覆 borderColor 差量。
@@ -79,6 +89,11 @@ export const TextFieldBase = forwardRef<TextInputRef, TextFieldBaseProps>(
             {...rest}
             editable={isEditable}
             value={value}
+            onChangeText={(text) => {
+              // [M-9] 同步内部镜像,非受控场景 filled 视觉态依赖此 state
+              setMirror(text);
+              onChangeText?.(text);
+            }}
             multiline={multiline}
             onFocus={(e) => {
               setFocused(true);
@@ -97,12 +112,22 @@ export const TextFieldBase = forwardRef<TextInputRef, TextFieldBaseProps>(
               },
             ]}
             placeholderTextColor={c.foregroundSubtle}
-            accessibilityState={disabled ? { disabled: true } : undefined}
-            testID={testID ? `${testID}-input` : undefined}
+            // [L-31] editable=false 并入 disabled a11y state,SR 能正确播报不可编辑
+            accessibilityState={isDisabledA11y ? { disabled: true } : undefined}
+            testID={childTestID(testID, 'input')}
           />
           {trailing != null ? <View>{trailing}</View> : null}
         </View>
-        {error ? <Text style={styles.errorMsg}>{error}</Text> : null}
+        {/* [L-31] error Text 补 accessibilityLiveRegion="polite" —— 错误出现时 SR 自动播报 */}
+        {error ? (
+          <Text
+            style={styles.errorMsg}
+            accessibilityLiveRegion="polite"
+            testID={childTestID(testID, 'error')}
+          >
+            {error}
+          </Text>
+        ) : null}
       </View>
     );
   }

package/src/components/ui/Textarea/types.ts

@@ -15,7 +15,8 @@ export type TextareaProps = Omit<
   leading?: ReactNode;
   /** 可选的后置插槽（如字符计数器） */
   trailing?: ReactNode;
-  /** 错误信息 —— 容器进入错误态并在下方显示 */
+  /** 错误信息 —— 容器进入错误态并在下方显示。
+   *  空串 `""` / undefined 都不进 error 态(truthy 判定),与 TextFieldBase 保持一致。[L-96] */
   error?: string;
   /** 最小高度，默认 96（约 5 行） */
   minHeight?: number;

package/src/components/ui/Thumbnail/Thumbnail.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import { Image, View } from 'react-native';
 import { useThemedStyles } from '../../../theme';
-import { makeStyles, sizingFor } from './styles';
+import { createLogger } from '../../../utils/logger';
+import { makeStyles, RING_EXTRA_RADIUS, sizingFor } from './styles';
 import type { ThumbnailProps } from './types';
 
+const log = createLogger('Thumbnail');
+
 /** 缩略图基础组件 —— 列表 / 卡片 / chat 行内通用 16:9.5 小图。
  *
  *  尺寸阶梯:sm / md(默认 113×67)/ lg,与 NewsList / NewsArea 历史一致。
@@ -26,7 +29,12 @@ export function Thumbnail({
   testID,
 }: ThumbnailProps): React.JSX.Element | null {
   const styles = useThemedStyles(makeStyles);
-  if (!uri && !source) return null;
+  if (!uri && !source) {
+    // [L-18] uri/source 均未传:一次性告警,返回 null 而非空白区域。
+    // types 注释已说明二选一语义;此 warn 用于开发期快速定位漏传。
+    log.warn('Thumbnail: uri 和 source 均未提供,组件将渲染为 null');
+    return null;
+  }
   const dim = sizingFor(size);
   const image = (
     <Image
@@ -42,7 +50,10 @@ export function Thumbnail({
   // ring 容器:borderRadius 比 image 大 (border + padding) 才能贴合包裹外圈
   return (
     <View
-      style={[styles.ring, { borderRadius: dim.borderRadius + 3 }]}
+      style={[
+        styles.ring,
+        { borderRadius: dim.borderRadius + RING_EXTRA_RADIUS },
+      ]}
       testID={testID}
     >
       {image}

package/src/components/ui/Thumbnail/styles.ts

@@ -2,6 +2,10 @@ import { StyleSheet } from 'react-native';
 import { r, type ColorTokens } from '../../../theme';
 import type { ThumbnailSize } from './types';
 
+/** [L-94] ring 圆角外展量:border(2) + padding(1) = 3pt,让外圈圆角贴合内圆角。
+ *  Thumbnail.tsx 侧用此常量替代魔数 `+ 3`。 */
+export const RING_EXTRA_RADIUS = r(2) + r(1); // border + padding
+
 /** Thumbnail 静态样式 ——
  *  - `base`:Image 占位色,加载中 / 失败时不至于空白
  *  - `ring`:`selected` 态的外圈品牌色描边,padding 抵消 ring 与 image 之间留 1pt gap */
@@ -11,9 +15,9 @@ export const makeStyles = (c: ColorTokens) =>
       backgroundColor: c.surfaceContainer,
     },
     ring: {
-      borderWidth: 2,
+      borderWidth: r(2),
       borderColor: c.primary,
-      padding: 1,
+      padding: r(1),
     },
   });
 

package/src/components/ui/Toast/ToastHost.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Text, View } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Animated, {
   cancelAnimation,
@@ -9,6 +9,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useColors, useThemedStyles, motion, space } from '../../../theme';
+import { childTestID } from '../../../utils/testID';
 import { dotColorFor, makeStyles } from './styles';
 import { _subs } from './toast';
 import type { Subscriber, ToastEntry, ToastHostProps } from './types';
@@ -42,8 +43,18 @@ export function ToastHost({
     };
   }, []);
 
+  // 退场完成只清「仍是自己」的 entry:withTiming 完成回调经 runOnJS 跨线程异步投递,
+  // 投递到执行之间若来了新 toast,无 id 守卫的 setEntry(null) 会把新 toast 瞬时清掉([M-14])。
+  const dismissIfCurrent = useCallback((id: number) => {
+    setEntry((cur) => (cur?.id === id ? null : cur));
+  }, []);
+
   useEffect(() => {
     if (!entry) return;
+    // [M-15] toast 出现时主动播报 —— 容器 pointerEvents="none" + 3s 自动消失,
+    // SR 用户对一闪而过的反馈本无任何感知通道。
+    AccessibilityInfo.announceForAccessibility(entry.message);
+    const id = entry.id;
     // 进入方向:top 从上(-8)滑入,bottom / center 从下(8)滑入
     const from = entry.position === 'top' ? -8 : 8;
     cancelAnimation(op);
@@ -56,7 +67,7 @@ export function ToastHost({
     dismissTimer.current = setTimeout(() => {
       op.value = withTiming(0, { duration: motion.base });
       ty.value = withTiming(from, { duration: motion.base }, (finished) => {
-        if (finished) runOnJS(setEntry)(null);
+        if (finished) runOnJS(dismissIfCurrent)(id);
       });
     }, entry.duration);
 
@@ -65,7 +76,7 @@ export function ToastHost({
       cancelAnimation(op);
       cancelAnimation(ty);
     };
-  }, [entry, op, ty]);
+  }, [entry, op, ty, dismissIfCurrent]);
 
   const animatedStyle = useAnimatedStyle(() => ({
     opacity: op.value,
@@ -90,10 +101,7 @@ export function ToastHost({
         {dotColor ? (
           <View style={[styles.dot, { backgroundColor: dotColor }]} />
         ) : null}
-        <Text
-          style={styles.text}
-          testID={testID ? `${testID}-text` : undefined}
-        >
+        <Text style={styles.text} testID={childTestID(testID, 'text')}>
           {entry.message}
         </Text>
       </Animated.View>

package/src/components/ui/Toast/ToastHost.web.tsx

@@ -1,6 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Text, View } from 'react-native';
-import { useColors, useThemedStyles, motion } from '../../../theme';
+import { AccessibilityInfo, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  motion,
+  space,
+  useColors,
+  usePrefersReducedMotion,
+  useThemedStyles,
+} from '../../../theme';
 import { dotColorFor, makeStyles } from './styles';
 import { _subs } from './toast';
 import type { Subscriber, ToastEntry, ToastHostProps } from './types';
@@ -20,6 +27,8 @@ export function ToastHost({
 }: ToastHostProps = {}): React.JSX.Element | null {
   const c = useColors();
   const styles = useThemedStyles(makeStyles);
+  const insets = useSafeAreaInsets();
+  const reduced = usePrefersReducedMotion();
   const [entry, setEntry] = useState<ToastEntry | null>(null);
   const [visible, setVisible] = useState(false);
   const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -39,6 +48,8 @@ export function ToastHost({
   useEffect(() => {
     // entry=null:上一轮 effect 的 cleanup 已清 timer/RAF,这里无需重复。
     if (!entry) return;
+    // [M-15] web 同样主动播报(RN-Web announceForAccessibility 注入 aria-live region)。
+    AccessibilityInfo.announceForAccessibility(entry.message);
 
     // cancelled 标志:entry 快速连续切换 / 组件卸载时,cleanup 置 true。RAF 与
     // timer 回调执行前都检查它 —— cancelAnimationFrame 在部分浏览器不保证取消
@@ -77,15 +88,26 @@ export function ToastHost({
 
   if (!entry) return null;
 
+  // 位置:top=顶部(safe-area + 间距)/ center=屏幕居中 / bottom=底部(默认),复刻 native 版。
+  // 此前 web 完全未注入定位,position 参数被静默忽略、垂直位置随挂载次序漂移([H-6])。
+  const posStyle =
+    entry.position === 'top'
+      ? { top: insets.top + space[10] }
+      : entry.position === 'center'
+        ? { top: 0, bottom: 0, justifyContent: 'center' as const }
+        : { bottom: insets.bottom + space[10] };
+
   const dotColor = dotColorFor(entry.kind, c);
   const animatedWebStyle: React.CSSProperties = {
     opacity: visible ? 1 : 0,
     transform: visible ? 'translateY(0px)' : 'translateY(8px)',
-    transition: `opacity ${motion.base}ms ease-out, transform ${motion.base}ms ease-out`,
+    transition: reduced
+      ? 'none'
+      : `opacity ${motion.base}ms ease-out, transform ${motion.base}ms ease-out`,
   };
 
   return (
-    <View style={styles.host} pointerEvents="none" testID={testID}>
+    <View style={[styles.host, posStyle]} pointerEvents="none" testID={testID}>
       <div style={animatedWebStyle}>
         <View style={styles.toast}>
           {dotColor ? (

package/src/components/ui/Toast/styles.ts

@@ -14,6 +14,8 @@ export const makeStyles = (c: ColorTokens) =>
       // zIndex: toast 浮层 —— 盖在 Screen 内容之上(navigator / overlay 之下)。
       // 同级兄弟节点无 z 顺序需求,但作为 absolute 浮岛对其他屏内 absolute 节点
       // 需要显式 200 抢占,保留并锁数值。
+      // 注意:confirm() 的原生 Modal 是 window 级,永远盖在 toast 之上 —— confirm
+      // 打开期间到达的 toast 不可见,勿把 toast 当作 confirm 显示期间的反馈通道。
       zIndex: 200,
     },
     toast: {

package/src/components/ui/Toast/toast.ts

@@ -3,22 +3,55 @@
  *
  * 文件名故意小写 `toast.ts`,host 组件叫 `ToastHost.tsx`,避免 APFS 大小写冲突。
  */
+import { createLogger } from '../../../utils/logger';
 import type { Subscriber, ToastEntry, ToastInput, ToastKind } from './types';
 
+const log = createLogger('toast');
+
 let _id = 0;
 export const _subs = new Set<Subscriber>();
 
+const DEFAULT_DURATION = 3000;
+// [L-55] duration 合法域:[1, 2^31)。INT32_MAX = 2^31-1 = 2147483647,
+// setTimeout 内部用 int32 存储,超出会溢出变成 0 立即触发。
+const MAX_DURATION = 2147483647;
+
+/** [L-55] 钳制 duration 到 [1, 2^31),域外回落 DEFAULT_DURATION 并 dev warn。 */
+function clampDuration(raw: number | undefined): number {
+  if (raw == null) return DEFAULT_DURATION;
+  if (!Number.isFinite(raw) || raw < 1 || raw >= MAX_DURATION) {
+    log.warn(
+      `toast duration(${raw}) 超出合法域 [1, 2^31),已回落 ${DEFAULT_DURATION}ms。`
+    );
+    return DEFAULT_DURATION;
+  }
+  return Math.trunc(raw);
+}
+
 function emit(input: ToastInput, kind: ToastKind = 'info') {
   const entry: ToastEntry =
     typeof input === 'string'
-      ? { id: ++_id, message: input, kind, duration: 3000, position: 'bottom' }
+      ? {
+          id: ++_id,
+          message: input,
+          kind,
+          duration: DEFAULT_DURATION,
+          position: 'bottom',
+        }
       : {
           id: ++_id,
           message: input.message,
           kind: input.kind ?? kind,
-          duration: input.duration ?? 3000,
+          duration: clampDuration(input.duration),
           position: input.position ?? 'bottom',
         };
+  // 未挂 <ToastHost />:消息无人接收,告警提示集成漏挂(对照 confirm 重入告警的纪律)。
+  if (_subs.size === 0) {
+    log.warn(
+      'toast() 调用时未挂载 <ToastHost />,消息被丢弃。请在 app 根附近挂一次 <ToastHost />。'
+    );
+    return;
+  }
   _subs.forEach((s) => s(entry));
 }
 

package/src/components/ui/Toast/types.ts

@@ -23,7 +23,7 @@ export type ToastInput =
     };
 
 export type ToastEntry = {
-  /** 唯一 id（自增），用于动画切换识别 */
+  /** 唯一 id（自增）—— 退场守卫用:ToastHost 只清「仍是当前」的 toast,避免清掉竞态期到达的新 toast */
   id: number;
   /** 消息文本 */
   message: string;

package/src/components/ui/shared/badgeStyles.ts

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native';
+import {
+  fw,
+  r,
+  radius,
+  space,
+  type as t,
+  type ColorTokens,
+} from '../../../theme';
+
+/**
+ * 角标样式工厂 —— Grid/TabBar 等组件图标右上角小红点共用。
+ * @param c   颜色 token
+ * @param top 角标纵向偏移(不同场景基点不同:Grid 图标 r(-6) / TabBar 图标 r(-3))
+ */
+export const badgeStyles = (c: ColorTokens, top: number) =>
+  StyleSheet.create({
+    badge: {
+      position: 'absolute',
+      top,
+      right: r(-10),
+      minWidth: r(16),
+      height: r(16),
+      borderRadius: radius.md,
+      backgroundColor: c.error,
+      paddingHorizontal: space[1],
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    badgeText: {
+      color: c.onError,
+      fontSize: t.nano,
+      fontWeight: fw.bold,
+      lineHeight: 12,
+    },
+  });

package/src/icons/data.ts

@@ -16,6 +16,7 @@ export type IconName =
   | 'attachment'
   | 'bag-check'
   | 'bell'
+  | 'bluetooth'
   | 'bot'
   | 'box-list'
   | 'box-up'
@@ -166,6 +167,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 16.3,
         r: 0.95,
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -235,6 +237,7 @@ export const ICONS: Record<IconName, IconDef> = {
       {
         kind: 'path',
         d: 'M6 10v4M10 10v4M14 10v4M18 10v4',
+        opacity: 0.55,
       },
     ],
   },
@@ -252,6 +255,7 @@ export const ICONS: Record<IconName, IconDef> = {
       {
         kind: 'path',
         d: 'M8 10v4M12 10v4M16 10v4',
+        opacity: 0.55,
       },
     ],
   },
@@ -294,6 +298,15 @@ export const ICONS: Record<IconName, IconDef> = {
       },
     ],
   },
+  'bluetooth': {
+    strokeWidth: 1.75,
+    elements: [
+      {
+        kind: 'path',
+        d: 'm7 7 10 10-5 5V2l5 5L7 17',
+      },
+    ],
+  },
   'bot': {
     strokeWidth: 1.75,
     elements: [
@@ -459,6 +472,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 13,
         r: 0.9,
         fill: 'currentColor',
+        stroke: 'none',
       },
       {
         kind: 'circle',
@@ -466,6 +480,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 13,
         r: 0.9,
         fill: 'currentColor',
+        stroke: 'none',
       },
       {
         kind: 'circle',
@@ -473,6 +488,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 13,
         r: 0.9,
         fill: 'currentColor',
+        stroke: 'none',
       },
       {
         kind: 'circle',
@@ -480,6 +496,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 17,
         r: 0.9,
         fill: 'currentColor',
+        stroke: 'none',
       },
       {
         kind: 'circle',
@@ -487,6 +504,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 17,
         r: 0.9,
         fill: 'currentColor',
+        stroke: 'none',
       },
       {
         kind: 'circle',
@@ -494,6 +512,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 17,
         r: 0.9,
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -880,6 +899,7 @@ export const ICONS: Record<IconName, IconDef> = {
         kind: 'path',
         d: 'M8.8 11.4v1.2l3.4 1.3V10.1z',
         fill: 'currentColor',
+        stroke: 'none',
       },
       {
         kind: 'path',
@@ -910,6 +930,7 @@ export const ICONS: Record<IconName, IconDef> = {
         kind: 'path',
         d: 'M12 8.5l1.2 2.42 2.68.39-1.94 1.89.46 2.67L12 14.61l-2.4 1.26.46-2.67L8.12 11.31l2.68-.39z',
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -983,6 +1004,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 20,
         r: 0.7,
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -1789,6 +1811,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 17.6,
         r: 0.9,
         fill: 'currentColor',
+        stroke: 'none',
       },
       {
         kind: 'path',
@@ -1939,6 +1962,7 @@ export const ICONS: Record<IconName, IconDef> = {
         height: 8,
         rx: 2,
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -1957,6 +1981,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 12,
         r: 6,
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -2059,6 +2084,8 @@ export const ICONS: Record<IconName, IconDef> = {
         width: 12,
         height: 12,
         rx: 1.5,
+        fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -2091,6 +2118,7 @@ export const ICONS: Record<IconName, IconDef> = {
         kind: 'path',
         d: 'M19.2 2.5l.55 1.55 1.55.55-1.55.55-.55 1.55-.55-1.55-1.55-.55 1.55-.55z',
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -2175,6 +2203,7 @@ export const ICONS: Record<IconName, IconDef> = {
         cy: 16.5,
         r: 0.75,
         fill: 'currentColor',
+        stroke: 'none',
       },
     ],
   },
@@ -2425,6 +2454,7 @@ export const ICON_NAMES: IconName[] = [
   'attachment',
   'bag-check',
   'bell',
+  'bluetooth',
   'bot',
   'box-list',
   'box-up',

package/src/icons/types.ts

@@ -1,19 +1,34 @@
-/** 图标清单的稳定类型；path 数据由脚本生成。 */
+/** 图标清单的稳定类型;几何与样式数据由 scripts/build-icons.js 生成。 */
+
+/** 元素共享的可选样式属性(脚本从 svg 抽取,Icon 渲染端透传)。 */
+type IconElementStyle = {
+  /** `currentColor` → 渲染时换成主题 stroke 色;缺省则继承 Svg 根的 `fill="none"`。 */
+  readonly fill?: string;
+  /** 元素不透明度(svg `opacity`),用于次要笔画(如格线 .55)。 */
+  readonly opacity?: number;
+  /** `'none'` = 该元素不描边(纯 fill 的圆点/方块),覆盖 Svg 根的 stroke 继承。 */
+  readonly stroke?: 'none';
+};
+
+// readonly 防止消费端原地改 ICONS 的元素数据污染模块级单例。
 export type IconElement =
-  | { kind: 'path'; d: string; fill?: string }
-  | { kind: 'circle'; cx: number; cy: number; r: number; fill?: string }
-  | {
+  | (Readonly<{ kind: 'path'; d: string }> & IconElementStyle)
+  | (Readonly<{ kind: 'circle'; cx: number; cy: number; r: number }> &
+      IconElementStyle)
+  | (Readonly<{
       kind: 'rect';
       x: number;
       y: number;
       width: number;
       height: number;
+      // ry 未被 build-icons.js 抽取(脚本只取 rx),不在生成物中 —— 此处不声明,
+      // 保持类型与生成端契约一致,防渲染端出现永远不可达的 ry 分支。
       rx?: number;
-      ry?: number;
-      fill?: string;
-    };
+    }> &
+      IconElementStyle);
 
-export type IconDef = {
+export type IconDef = Readonly<{
   strokeWidth: number;
-  elements: IconElement[];
-};
+  // readonly 数组:防止消费端 push/splice ICONS 的 elements 污染单例。
+  elements: readonly IconElement[];
+}>;