@unif/react-native-chat 0.2.1 → 0.2.3

package/src/welcome/Welcome.tsx

@@ -3,7 +3,7 @@
  * 渐变背景 + 装饰性光晕 + 2x2 快捷入口卡片网格
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   View,
   Text,
@@ -12,7 +12,8 @@ import {
   type ViewStyle,
   type TextStyle,
 } from 'react-native';
-import {chatTokens} from '../theme/tokens';
+import { useTokens } from '@unif/react-native-ui';
+import { chatTokens } from '../theme/tokens';
 
 export interface WelcomeQuickStart {
   key: string;
@@ -52,56 +53,122 @@ const Welcome: React.FC<WelcomeProps> = ({
   subtitle = '智能助手，有什么可以帮你？',
   quickStarts = [],
   onQuickStart,
-  gradientColors = [
-    chatTokens.colorBgWelcomeStart,
-    chatTokens.colorBgWelcomeMid,
-    chatTokens.colorBgWelcomeEnd,
-  ],
+  gradientColors,
   style,
   styles: semanticStyles,
   testID = 'welcome',
   renderIcon,
   renderGradient,
 }) => {
+  const t = useTokens();
+
+  const colors = gradientColors ?? [
+    chatTokens.colorBgWelcomeStart,
+    chatTokens.colorBgWelcomeMid,
+    chatTokens.colorBgWelcomeEnd,
+  ];
+
+  const ds = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+        },
+        content: {
+          flex: 1,
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+          paddingHorizontal: 20,
+          paddingTop: 56,
+        },
+        glowTopRight: {
+          position: 'absolute',
+          top: -40,
+          right: -40,
+          width: 200,
+          height: 200,
+          borderRadius: 100,
+          backgroundColor: 'rgba(235,110,0,0.06)',
+        },
+        glowBottomLeft: {
+          position: 'absolute',
+          bottom: 40,
+          left: -40,
+          width: 160,
+          height: 160,
+          borderRadius: 80,
+          backgroundColor: 'rgba(0,122,255,0.04)',
+        },
+        title: {
+          marginTop: 16,
+          fontSize: 20,
+          fontWeight: '600',
+          color: t.colorText,
+        },
+        subtitle: {
+          marginTop: 6,
+          textAlign: 'center',
+          fontSize: 15,
+          color: t.colorTextSecondary,
+        },
+        grid: {
+          marginTop: 32,
+          width: '100%',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          justifyContent: 'space-between',
+          gap: 12,
+        },
+        card: {
+          width: '47%',
+          backgroundColor: t.colorBgElevated,
+          borderRadius: 16,
+          padding: 16,
+          ...t.shadowSm,
+        },
+        cardTitle: {
+          marginTop: 8,
+          fontSize: 14,
+          fontWeight: '500',
+          color: t.colorText,
+        },
+        cardDescription: {
+          marginTop: 2,
+          fontSize: 11,
+          color: t.colorTextSecondary,
+        },
+      }),
+    [t]
+  );
+
   const content = (
     <>
-      {/* 右上角装饰光晕 */}
-      <View style={defaultStyles.glowTopRight} />
-      {/* 左下角装饰光晕 */}
-      <View style={defaultStyles.glowBottomLeft} />
+      <View style={ds.glowTopRight} />
+      <View style={ds.glowBottomLeft} />
 
-      <View style={defaultStyles.content}>
-        {renderIcon?.('sparkles', 48, chatTokens.colorPrimary)}
+      <View style={ds.content}>
+        {renderIcon?.('sparkles', 48, t.colorPrimary)}
 
-        <Text style={[defaultStyles.title, semanticStyles?.title]}>
-          {title}
-        </Text>
-        <Text style={[defaultStyles.subtitle, semanticStyles?.subtitle]}>
-          {subtitle}
-        </Text>
+        <Text style={[ds.title, semanticStyles?.title]}>{title}</Text>
+        <Text style={[ds.subtitle, semanticStyles?.subtitle]}>{subtitle}</Text>
 
         {quickStarts.length > 0 && (
-          <View style={defaultStyles.grid}>
+          <View style={ds.grid}>
             {quickStarts.map((item, index) => (
               <TouchableOpacity
                 key={item.key}
-                style={[defaultStyles.card, semanticStyles?.card]}
+                style={[ds.card, semanticStyles?.card]}
                 onPress={() => onQuickStart?.(item.key)}
                 activeOpacity={0.7}
-                testID={`${testID}-quick-${index}`}>
-                {renderIcon?.(item.icon, 24, chatTokens.colorPrimary)}
-                <Text
-                  style={[
-                    defaultStyles.cardTitle,
-                    semanticStyles?.cardTitle,
-                  ]}>
+                testID={`${testID}-quick-${index}`}
+              >
+                {renderIcon?.(item.icon, 24, t.colorPrimary)}
+                <Text style={[ds.cardTitle, semanticStyles?.cardTitle]}>
                   {item.title}
                 </Text>
                 <Text
-                  style={[
-                    defaultStyles.cardDescription,
-                    semanticStyles?.cardDescription,
-                  ]}>
+                  style={[ds.cardDescription, semanticStyles?.cardDescription]}
+                >
                   {item.description}
                 </Text>
               </TouchableOpacity>
@@ -112,97 +179,31 @@ const Welcome: React.FC<WelcomeProps> = ({
     </>
   );
 
-  // 如果提供了 renderGradient，使用自定义渐变
   if (renderGradient) {
     return renderGradient({
-      colors: gradientColors,
+      colors,
       children: content,
-      style: { ...defaultStyles.container, ...semanticStyles?.root, ...style } as ViewStyle,
+      style: {
+        ...ds.container,
+        ...semanticStyles?.root,
+        ...style,
+      } as ViewStyle,
     });
   }
 
-  // 无渐变 fallback（纯色背景）
   return (
     <View
       style={[
-        defaultStyles.container,
-        {backgroundColor: gradientColors[0]},
+        ds.container,
+        { backgroundColor: colors[0] },
         semanticStyles?.root,
         style,
       ]}
-      testID={testID}>
+      testID={testID}
+    >
       {content}
     </View>
   );
 };
 
-const defaultStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    flex: 1,
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    paddingHorizontal: 20,
-    paddingTop: 56,
-  },
-  glowTopRight: {
-    position: 'absolute',
-    top: -40,
-    right: -40,
-    width: 200,
-    height: 200,
-    borderRadius: 100,
-    backgroundColor: 'rgba(235,110,0,0.06)',
-  },
-  glowBottomLeft: {
-    position: 'absolute',
-    bottom: 40,
-    left: -40,
-    width: 160,
-    height: 160,
-    borderRadius: 80,
-    backgroundColor: 'rgba(0,122,255,0.04)',
-  },
-  title: {
-    marginTop: 16,
-    fontSize: 20,
-    fontWeight: '600',
-    color: chatTokens.colorText,
-  },
-  subtitle: {
-    marginTop: 6,
-    textAlign: 'center',
-    fontSize: 15,
-    color: chatTokens.colorTextSecondary,
-  },
-  grid: {
-    marginTop: 32,
-    width: '100%',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'space-between',
-    gap: 12,
-  },
-  card: {
-    width: '47%',
-    backgroundColor: chatTokens.colorBgElevated,
-    borderRadius: 16,
-    padding: 16,
-    ...chatTokens.shadowSm,
-  },
-  cardTitle: {
-    marginTop: 8,
-    fontSize: 14,
-    fontWeight: '500',
-    color: chatTokens.colorText,
-  },
-  cardDescription: {
-    marginTop: 2,
-    fontSize: 11,
-    color: chatTokens.colorTextSecondary,
-  },
-});
-
 export default React.memo(Welcome);