@unif/react-native-design 0.8.1 → 0.9.0

package/src/components/ui/Checkbox/Checkbox.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import { Pressable } from 'react-native-gesture-handler';
-import { r, useColors, useThemedStyles } from '../../../theme';
+import {
+  fixed,
+  pressedOpacity,
+  r,
+  useColors,
+  useThemedStyles,
+} from '../../../theme';
 import { Icon } from '../Icon';
 import { makeStyles } from './styles';
 import type { CheckboxProps } from './types';
@@ -27,20 +33,22 @@ export function Checkbox({
     <Pressable
       onPress={() => !disabled && onChange(!checked)}
       disabled={disabled}
-      hitSlop={4}
+      // [M-7] box 20pt → 垂直补 (44-20)/2=12 到 fixed.hitTarget
+      hitSlop={Math.round((fixed.hitTarget - r(20)) / 2)}
       accessibilityRole="checkbox"
       accessibilityState={{ checked, disabled: !!disabled }}
       accessibilityLabel={label}
       testID={testID}
       style={({ pressed }) => [
         styles.row,
-        { opacity: disabled ? 0.5 : pressed ? 0.7 : 1 },
+        { opacity: disabled ? 0.5 : pressed ? pressedOpacity : 1 },
       ]}
     >
       <View
         style={[
           styles.box,
-          shape === 'circle' && { borderRadius: r(20) / 2 },
+          // [L-79] circle 形态改用 radius.pill —— sentinel 999 确保任何尺寸下都是真圆
+          shape === 'circle' && styles.boxCircle,
           checked && {
             backgroundColor: c.primary,
             borderColor: c.primary,
@@ -48,7 +56,12 @@ export function Checkbox({
         ]}
       >
         {checked ? (
-          <Icon name="check" size={14} color={c.onPrimary} strokeWidth={2.5} />
+          <Icon
+            name="check"
+            size={r(14)}
+            color={c.onPrimary}
+            strokeWidth={2.5}
+          />
         ) : null}
       </View>
       {label ? <Text style={styles.label}>{label}</Text> : null}

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

@@ -7,6 +7,8 @@ export const makeStyles = (c: ColorTokens) =>
     row: {
       flexDirection: 'row',
       alignItems: 'center',
+      // [L-37] alignSelf:'flex-start' 防止父容器拉伸(与 Chip [M-8] 同口径)
+      alignSelf: 'flex-start' as const,
       gap: space[4],
     },
     box: {
@@ -18,9 +20,15 @@ export const makeStyles = (c: ColorTokens) =>
       alignItems: 'center',
       justifyContent: 'center',
     },
+    /** [L-79] circle 形态 —— radius.pill(sentinel 999)确保任何尺寸下真圆 */
+    boxCircle: {
+      borderRadius: radius.pill,
+    },
     label: {
       fontSize: t.sm,
       color: c.foreground,
       fontWeight: fw.regular,
+      // flexShrink:长 label 在 row 内换行/截断,不溢出也不把同行控件挤没([M-10])
+      flexShrink: 1,
     },
   });

package/src/components/ui/Chip/Chip.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import { Pressable } from 'react-native-gesture-handler';
-import { useThemedStyles } from '../../../theme';
+import { fixed, pressedOpacity, r, rf, useThemedStyles } from '../../../theme';
 import { makeStyles } from './styles';
 import type { ChipProps } from './types';
 
 /**
  * 胶囊形可点击 chip。
- * - 默认：白底 + 细线边框，fg-1 文本
+ * - 默认：surface 底 + outline 细线边框，foreground 文本
  * - 选中：主色边框 + 主色文本
- * - 按下：透明度 0.7
+ * - 按下：透明度 pressedOpacity(与 ButtonBase 同源)
+ * - 禁用：透明度 0.5 + 不响应 onPress
  *
  * 常用于建议 chip、筛选 pill、多选标签等。
  */
@@ -17,6 +18,7 @@ export function Chip({
   label,
   selected,
   onPress,
+  disabled,
   leading,
   trailing,
   style,
@@ -37,14 +39,27 @@ export function Chip({
   );
 
   if (onPress) {
+    // [M-7] chip 内容高 ≈ 2×space[3] + xs 行高 ≈ 34pt < 44pt
+    // Pressable 是外壳,hitSlop 向外补足到 fixed.hitTarget
+    const chipHitSlopV = Math.max(
+      0,
+      Math.round((fixed.hitTarget - (2 * r(8) + rf(13) * 1.4)) / 2)
+    );
     return (
       <Pressable
         onPress={onPress}
+        disabled={disabled}
         accessibilityRole="button"
-        accessibilityState={{ selected: !!selected }}
+        accessibilityState={{ selected: !!selected, disabled: !!disabled }}
         accessibilityLabel={label}
         testID={testID}
-        style={({ pressed }) => [{ opacity: pressed ? 0.7 : 1 }]}
+        hitSlop={{ top: chipHitSlopV, bottom: chipHitSlopV, left: 0, right: 0 }}
+        style={({ pressed }) => [
+          {
+            alignSelf: 'flex-start',
+            opacity: disabled ? 0.5 : pressed ? pressedOpacity : 1,
+          },
+        ]}
       >
         {inner}
       </Pressable>

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

@@ -5,6 +5,8 @@ export type ChipProps = {
   label: string;
   selected?: boolean;
   onPress?: () => void;
+  /** 整体禁用:opacity 0.5 + 不响应 onPress + accessibilityState.disabled */
+  disabled?: boolean;
   /** 可选的前置插槽 —— 如 <Icon name="spark" /> */
   leading?: ReactNode;
   /** 可选的后置插槽 —— 如一个小的 × 关闭按钮 */

package/src/components/ui/Confirm/ConfirmHost.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Modal, Pressable, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { space, useThemedStyles } from '../../../theme';
@@ -19,11 +19,25 @@ export function ConfirmHost(): React.JSX.Element | null {
   const insets = useSafeAreaInsets();
   const [entry, setEntry] = useState<ConfirmEntry | null>(null);
 
+  // 跟踪当前未决 entry,供 unmount cleanup resolve(false)。
+  const pendingRef = useRef<ConfirmEntry | null>(null);
+  pendingRef.current = entry;
+
+  // 保留最后一次显示的 entry:关闭时 entry 立即置 null,但 slide 退场动画期 Modal 仍可见,
+  // 渲染 lastEntry 才不会滑出一个只剩 padding 的空 sheet([M-17])。
+  const lastEntryRef = useRef<ConfirmEntry | null>(null);
+  if (entry) lastEntryRef.current = entry;
+  const display = entry ?? lastEntryRef.current;
+
   useEffect(() => {
+    // [L-101] Subscriber 不再接收 null —— 收到新 entry 即显示;关闭路径由 resolve() 驱动
     const sub: Subscriber = (next) => setEntry(next);
     _subs.add(sub);
     return () => {
       _subs.delete(sub);
+      // Host 卸载时若对话框仍未决(error boundary 重置 / 根 re-key 切语言主题等),
+      // resolve(false) —— 否则 confirm() 的 Promise 永久悬挂、_activeEntry 锁死([H-5])。
+      pendingRef.current?.resolve(false);
     };
   }, []);
 
@@ -49,35 +63,37 @@ export function ConfirmHost(): React.JSX.Element | null {
       <Pressable
         style={styles.backdrop}
         onPress={handleCancel}
-        accessibilityRole="button"
-        accessibilityLabel="关闭"
+        // [M-16] accessible={false}:否则 backdrop 把整个子树合并成单一「关闭, 按钮」,
+        // 遮蔽 sheet 内的 title/message/按钮。SR 取消路径走 cancel 按钮 + onRequestClose。
+        accessible={false}
       >
         <Pressable
           style={[styles.sheet, { paddingBottom: insets.bottom + space['7'] }]}
           onPress={() => {}}
+          accessible={false}
         >
-          {entry ? (
+          {display ? (
             <>
               <View style={styles.body}>
                 <Text style={styles.title} accessibilityRole="header">
-                  {entry.title}
+                  {display.title}
                 </Text>
-                {entry.message ? (
-                  <Text style={styles.message}>{entry.message}</Text>
+                {display.message ? (
+                  <Text style={styles.message}>{display.message}</Text>
                 ) : null}
               </View>
               <View style={styles.actions}>
                 <Button
                   testID="confirm-cancel"
-                  label={entry.cancelLabel ?? '取消'}
+                  label={display.cancelLabel ?? '取消'}
                   variant="secondary"
                   block
                   onPress={handleCancel}
                 />
                 <Button
                   testID="confirm-ok"
-                  label={entry.confirmLabel ?? '确认'}
-                  variant={entry.destructive ? 'danger' : 'primary'}
+                  label={display.confirmLabel ?? '确认'}
+                  variant={display.destructive ? 'danger' : 'primary'}
                   block
                   onPress={handleConfirm}
                 />

package/src/components/ui/Confirm/confirm.ts

@@ -38,6 +38,14 @@ export function confirm(options: ConfirmOptions): Promise<boolean> {
     );
     return Promise.resolve(false);
   }
+  // 没有 ConfirmHost 订阅 → entry 无人接收,Promise 会永久悬挂、调用方 await 卡死。
+  // 立即 resolve(false) 并告警,且不占 _activeEntry(否则后续 confirm 全被重入分支锁死)。
+  if (_subs.size === 0) {
+    log.warn(
+      'confirm() 调用时未挂载 <ConfirmHost />,对话框无法显示,已 resolve(false)。请在 app 根附近挂一次 <ConfirmHost />。'
+    );
+    return Promise.resolve(false);
+  }
   return new Promise<boolean>((resolve) => {
     const entry: ConfirmEntry = {
       id: ++_id,

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

@@ -18,5 +18,7 @@ export type ConfirmEntry = ConfirmOptions & {
   resolve: (confirmed: boolean) => void;
 };
 
-/** ConfirmHost 监听器签名 —— 收到 entry 渲染对话框;收到 null 表示关闭。 */
-export type Subscriber = (entry: ConfirmEntry | null) => void;
+/** ConfirmHost 监听器签名 —— 收到 entry 渲染对话框。
+ *  [L-101] 删去 null 分支:全仓唯一发射点 confirm.ts:_subs.forEach 只发非 null entry,
+ *  关闭路径由 ConfirmEntry.resolve() 驱动;null 分支是死协议,对齐 Toast Subscriber 签名。 */
+export type Subscriber = (entry: ConfirmEntry) => void;

package/src/components/ui/DrawerHeader/DrawerHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Image, Text, View } from 'react-native';
 import { useThemedStyles } from '../../../theme';
 import { makeStyles } from './styles';
@@ -12,25 +12,30 @@ export function DrawerHeader({
   name,
   subtitle,
   source,
+  style,
   testID,
 }: DrawerHeaderProps): React.JSX.Element {
   const styles = useThemedStyles(makeStyles);
   const [imageFailed, setImageFailed] = useState(false);
-  // 避免 unmount 后 Image 网络回包仍调 setState 的 React warning
-  const mountedRef = useRef(true);
-  useEffect(
-    () => () => {
-      mountedRef.current = false;
-    },
-    []
-  );
+
+  // [M-20] React 18+ 已移除 unmount 后 setState 的 warning,mountedRef 守卫为死码,删除。
+  // [L-44] source 变化时重置 imageFailed,否则换图 URL 后仍展示 fallback 文字。
+  const uri =
+    source != null && typeof source === 'object' && 'uri' in source
+      ? (source as { uri?: string }).uri
+      : null;
+  useEffect(() => {
+    setImageFailed(false);
+  }, [uri, source]);
+
   const handleImageError = () => {
-    if (mountedRef.current) setImageFailed(true);
+    setImageFailed(true);
   };
-  const initial = name.trim()[0] ?? '?';
+  // [L-51] 码点级取首字,防 emoji / 代理对被截断为乱码。
+  const initial = [...name.trim()][0] ?? '?';
   const showImage = source != null && !imageFailed;
   return (
-    <View style={styles.header} testID={testID}>
+    <View style={[styles.header, style]} testID={testID}>
       <View style={[styles.avatar, showImage && styles.avatarImageMode]}>
         {showImage ? (
           <Image
@@ -38,6 +43,7 @@ export function DrawerHeader({
             onError={handleImageError}
             style={styles.avatarImage}
             resizeMode="cover"
+            accessible={!!name}
             accessibilityLabel={name}
           />
         ) : (

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

@@ -1,6 +1,10 @@
 import { StyleSheet } from 'react-native';
 import type { ColorTokens } from '../../../theme';
-import { fw, icon, rf, space, type as t } from '../../../theme';
+import { avatar, fw, rf, space, type as t } from '../../../theme';
+
+// 头像盒用 avatar.xl(56pt)而非 icon['2xl'] —— 两者数值相同但语义不同:
+// icon.* 是图标容器阶梯,avatar.* 是头像容器阶梯。此处是用户头像,按语义选 avatar。
+const AVATAR_SIZE = avatar.xl;
 
 export const makeStyles = (c: ColorTokens) =>
   StyleSheet.create({
@@ -12,9 +16,9 @@ export const makeStyles = (c: ColorTokens) =>
       gap: space[3],
     },
     avatar: {
-      width: icon['2xl'],
-      height: icon['2xl'],
-      borderRadius: icon['2xl'] / 2,
+      width: AVATAR_SIZE,
+      height: AVATAR_SIZE,
+      borderRadius: AVATAR_SIZE / 2,
       backgroundColor: c.primaryPressed,
       alignItems: 'center',
       justifyContent: 'center',
@@ -23,8 +27,8 @@ export const makeStyles = (c: ColorTokens) =>
       overflow: 'hidden',
     },
     avatarImage: {
-      width: icon['2xl'],
-      height: icon['2xl'],
+      width: AVATAR_SIZE,
+      height: AVATAR_SIZE,
     },
     avatarText: {
       color: c.onPrimary,

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

@@ -1,4 +1,4 @@
-import type { ImageSourcePropType } from 'react-native';
+import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
 
 export type DrawerHeaderProps = {
   /** 用户名（首字符渲染到圆形 brand 头像里；source 提供时仅作为 a11y label / fallback） */
@@ -7,6 +7,8 @@ export type DrawerHeaderProps = {
   subtitle?: string;
   /** 真实头像图片（URL 或 require）；提供时优先渲染 image，加载失败 fallback 到 letter */
   source?: ImageSourcePropType;
+  /** 容器附加样式(margin / position 等布局微调)。 */
+  style?: StyleProp<ViewStyle>;
   /** E2E / 测试定位 */
   testID?: string;
 };

package/src/components/ui/Empty/Empty.tsx

@@ -1,26 +1,27 @@
 import React from 'react';
 import { Text, View } from 'react-native';
-import { useColors, useThemedStyles } from '../../../theme';
+import { r, useColors, useThemedStyles } from '../../../theme';
 import { Icon } from '../Icon';
 import { makeStyles } from './styles';
 import type { EmptyProps } from './types';
 
 /**
- * 空态 / 占位组件 —— `primary-0` 圆盘上的 icon 插画 + 标题 + 描述。
+ * 空态 / 占位组件 —— `primaryContainer` 圆盘上的 icon 插画 + 标题 + 描述。
  * icon 默认 `'spark'`(通用空态);相机 / 出错 / 权限场景应显式传强语义 icon。
  */
 export function Empty({
   title,
   desc,
   icon = 'spark',
+  style,
   testID,
 }: EmptyProps): React.JSX.Element {
   const c = useColors();
   const styles = useThemedStyles(makeStyles);
   return (
-    <View style={styles.wrap} testID={testID}>
+    <View style={[styles.wrap, style]} testID={testID}>
       <View style={styles.illust}>
-        <Icon name={icon} size={28} color={c.primary} />
+        <Icon name={icon} size={r(28)} color={c.primary} />
       </View>
       <Text style={styles.title}>{title}</Text>
       {desc ? <Text style={styles.desc}>{desc}</Text> : null}

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

@@ -1,3 +1,4 @@
+import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../../../icons';
 
 export type EmptyProps = {
@@ -8,6 +9,8 @@ export type EmptyProps = {
   /** illust 圆盘内的图标,默认 `'spark'`(通用空态)。
    *  相机域可传 `'camera-off'` / `'permission-denied'` / `'error-alert'` 等强语义 icon。 */
   icon?: IconName;
+  /** 容器附加样式(margin / position 等布局微调)。 */
+  style?: StyleProp<ViewStyle>;
   /** E2E / 测试定位 */
   testID?: string;
 };

package/src/components/ui/EntryCard/EntryCard.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Text, View } from 'react-native';
 import { Pressable } from 'react-native-gesture-handler';
 import { Icon } from '../Icon';
-import { useColors, useThemedStyles } from '../../../theme';
+import { r, useColors, useThemedStyles } from '../../../theme';
 import { makeStyles } from './styles';
 import type { EntryCardProps } from './types';
 
@@ -22,7 +22,7 @@ export function EntryCard({
   const content = (
     <>
       <View style={styles.iconTile}>
-        <Icon name={icon} size={16} color={c.foregroundMuted} />
+        <Icon name={icon} size={r(16)} color={c.foregroundMuted} />
       </View>
       <View style={styles.body}>
         <Text style={styles.title} numberOfLines={1}>
@@ -38,11 +38,13 @@ export function EntryCard({
   );
 
   if (onPress) {
+    // a11y label 包含副标题,SR 用户听到完整信息(标题+sub)再决定是否点击
+    const a11yLabel = sub ? `${title},${sub}` : title;
     return (
       <Pressable
         onPress={onPress}
         accessibilityRole="button"
-        accessibilityLabel={title}
+        accessibilityLabel={a11yLabel}
         testID={testID}
         style={({ pressed }) => [styles.card, pressed && styles.pressed, style]}
       >

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

@@ -1,5 +1,14 @@
 import { StyleSheet } from 'react-native';
-import { fw, icon, r, radius, space, type ColorTokens } from '../../../theme';
+import {
+  fw,
+  icon,
+  pressedOpacity,
+  r,
+  rf,
+  radius,
+  space,
+  type ColorTokens,
+} from '../../../theme';
 
 export const makeStyles = (c: ColorTokens) =>
   StyleSheet.create({
@@ -29,16 +38,16 @@ export const makeStyles = (c: ColorTokens) =>
     },
     title: {
       // 13.5pt —— 介于 type.xs(13) / type.sm(14) 之间的设计稿专定字号
-      fontSize: r(13) + 0.5,
+      fontSize: rf(13) + 0.5,
       fontWeight: fw.medium,
       letterSpacing: -0.2,
       color: c.foreground,
     },
     sub: {
-      fontSize: r(11),
+      fontSize: rf(11),
       color: c.foregroundMuted,
     },
     pressed: {
-      opacity: 0.7,
+      opacity: pressedOpacity,
     },
   });

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

@@ -4,9 +4,9 @@ import type { IconName } from '../Icon';
 export type EntryCardProps = {
   /** 左侧 icon tile 内的图标名 */
   icon: IconName;
-  /** 主标题(13.5px medium) */
+  /** 主标题(rf(13)+0.5 medium，随设备缩放) */
   title: string;
-  /** 副标题(11px muted),省略不渲染该行 */
+  /** 副标题(rf(11) muted，随设备缩放),省略不渲染该行 */
   sub?: string;
   /** 点击回调,未传不挂 Pressable */
   onPress?: () => void;

package/src/components/ui/Form/FormRow.tsx

@@ -24,7 +24,13 @@ export function FormRow({
         </Text>
         <View style={styles.rowControl}>{children}</View>
       </View>
-      {error ? <Text style={styles.errorText}>{error}</Text> : null}
+      {/* [L-31] accessibilityLiveRegion="polite" —— error 出现时 SR 自动播报,
+          不干扰当前朗读(polite 排队等当前发言结束)。 */}
+      {error ? (
+        <Text style={styles.errorText} accessibilityLiveRegion="polite">
+          {error}
+        </Text>
+      ) : null}
     </View>
   );
 }

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

@@ -48,6 +48,8 @@ export const makeStyles = (c: ColorTokens) =>
       fontSize: t.sm,
       fontWeight: fw.medium,
       color: c.foreground,
+      // flexShrink:让 FormRow.numberOfLines 真正生效,长 label 不把 rowControl 挤到 0 宽([M-10])
+      flexShrink: 1,
     },
     required: {
       color: c.error,

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

@@ -19,11 +19,16 @@ export type FormGroupProps = {
 export type FormRowProps = {
   /** 字段标题 */
   label: string;
-  /** 字段控件（Input / Select / etc） */
+  /**
+   * 字段控件（Input / Select / Switch / Checkbox 等）。
+   * [L-31] 约定：传入控件自带 accessibilityLabel / accessibilityRole,
+   * 使 SR 能独立播报控件意图,不依赖 FormRow 的 label 文字。
+   */
   children: ReactNode;
   /** 必填标记，渲染右上红色星号 */
   required?: boolean;
-  /** 错误信息，渲染在控件下方 */
+  /** 错误信息，渲染在控件下方。
+   *  [L-31] 错误文本携带 accessibilityLiveRegion="polite",SR 自动播报。 */
   error?: string;
   /** E2E / 测试定位 */
   testID?: string;

package/src/components/ui/Grid/Grid.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import { Pressable } from 'react-native-gesture-handler';
-import { useColors, useThemedStyles } from '../../../theme';
+import { pressedOpacity, r, useColors, useThemedStyles } from '../../../theme';
 import { createLogger } from '../../../utils/logger';
 import { childTestID } from '../../../utils/testID';
 import { Icon } from '../Icon';
@@ -10,6 +10,9 @@ import type { GridProps } from './types';
 
 const log = createLogger('Grid');
 
+// 渲染路径去重集合 —— 同一 columns 值只在首次渲染时告警一次,避免长列表重复刷 log。
+const _warnedColumns = new Set<number>();
+
 /**
  * 图标入口宫格 —— 首页 / 分类落地页。1..6 列。
  * 每格：图标 + 小标签，纵向居中。
@@ -21,44 +24,58 @@ export function Grid({
   columns = 4,
   onPress,
   card = true,
+  style,
   testID,
 }: GridProps): React.JSX.Element {
   const c = useColors();
   const styles = useThemedStyles(makeStyles);
-  if (![1, 2, 3, 4, 5, 6].includes(columns)) {
+  if (![1, 2, 3, 4, 5, 6].includes(columns) && !_warnedColumns.has(columns)) {
+    _warnedColumns.add(columns);
     log.warn(`columns 仅支持 1..6，传入 ${columns}，已 fallback 为 4 列`);
   }
   const cellWidth = colWidth(columns);
   return (
-    <View style={[styles.wrap, card && styles.card]} testID={testID}>
+    <View style={[styles.wrap, card && styles.card, style]} testID={testID}>
       <View style={styles.inner}>
         {items.map((item) => {
           const itemTestID = childTestID(testID, item.id, item.testID);
+          const cellContent = (
+            <>
+              <View>
+                {/* 28pt 介于 icon.md(26) / icon.lg(30) 之间的设计稿专定字形尺寸 */}
+                <Icon name={item.icon} size={r(28)} color={c.foregroundMuted} />
+                {item.badge != null ? (
+                  <View style={styles.badge}>
+                    <Text style={styles.badgeText}>{item.badge}</Text>
+                  </View>
+                ) : null}
+              </View>
+              <Text style={styles.label} numberOfLines={1}>
+                {item.label}
+              </Text>
+            </>
+          );
           return (
             <View key={item.id} style={cellWidth}>
-              <Pressable
-                onPress={() => onPress?.(item)}
-                accessibilityRole="button"
-                accessibilityLabel={item.label}
-                testID={itemTestID}
-                style={({ pressed }) => [
-                  styles.cell,
-                  { opacity: pressed ? 0.7 : 1 },
-                ]}
-              >
-                <View>
-                  {/* 28pt 介于 icon.md(26) / icon.lg(30) 之间的设计稿专定字号 */}
-                  <Icon name={item.icon} size={28} color={c.foregroundMuted} />
-                  {item.badge != null ? (
-                    <View style={styles.badge}>
-                      <Text style={styles.badgeText}>{item.badge}</Text>
-                    </View>
-                  ) : null}
+              {onPress ? (
+                // 有 onPress 才挂 Pressable + button 语义,纯展示宫格不播报 button
+                <Pressable
+                  onPress={() => onPress(item)}
+                  accessibilityRole="button"
+                  accessibilityLabel={item.label}
+                  testID={itemTestID}
+                  style={({ pressed }) => [
+                    styles.cell,
+                    { opacity: pressed ? pressedOpacity : 1 },
+                  ]}
+                >
+                  {cellContent}
+                </Pressable>
+              ) : (
+                <View style={styles.cell} testID={itemTestID}>
+                  {cellContent}
                 </View>
-                <Text style={styles.label} numberOfLines={1}>
-                  {item.label}
-                </Text>
-              </Pressable>
+              )}
             </View>
           );
         })}