@unif/react-native-chat 0.1.0

package/src/welcome/Welcome.tsx

@@ -0,0 +1,208 @@
+/**
+ * Welcome — 欢迎页
+ * 渐变背景 + 装饰性光晕 + 2x2 快捷入口卡片网格
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import {chatTokens} from '../theme/tokens';
+
+export interface WelcomeQuickStart {
+  key: string;
+  icon: string;
+  title: string;
+  description: string;
+}
+
+export interface WelcomeSemanticStyles {
+  root?: ViewStyle;
+  title?: TextStyle;
+  subtitle?: TextStyle;
+  card?: ViewStyle;
+  cardTitle?: TextStyle;
+  cardDescription?: TextStyle;
+}
+
+export interface WelcomeProps {
+  title?: string;
+  subtitle?: string;
+  quickStarts?: WelcomeQuickStart[];
+  onQuickStart?: (key: string) => void;
+  gradientColors?: string[];
+  style?: ViewStyle;
+  styles?: Partial<WelcomeSemanticStyles>;
+  testID?: string;
+  renderIcon?: (name: string, size: number, color: string) => React.ReactNode;
+  renderGradient?: (props: {
+    colors: string[];
+    children: React.ReactNode;
+    style: ViewStyle;
+  }) => React.ReactNode;
+}
+
+const Welcome: React.FC<WelcomeProps> = ({
+  title = '你好，我是小U',
+  subtitle = '智能助手，有什么可以帮你？',
+  quickStarts = [],
+  onQuickStart,
+  gradientColors = [
+    chatTokens.colorBgWelcomeStart,
+    chatTokens.colorBgWelcomeMid,
+    chatTokens.colorBgWelcomeEnd,
+  ],
+  style,
+  styles: semanticStyles,
+  testID = 'welcome',
+  renderIcon,
+  renderGradient,
+}) => {
+  const content = (
+    <>
+      {/* 右上角装饰光晕 */}
+      <View style={defaultStyles.glowTopRight} />
+      {/* 左下角装饰光晕 */}
+      <View style={defaultStyles.glowBottomLeft} />
+
+      <View style={defaultStyles.content}>
+        {renderIcon?.('sparkles', 48, chatTokens.colorPrimary)}
+
+        <Text style={[defaultStyles.title, semanticStyles?.title]}>
+          {title}
+        </Text>
+        <Text style={[defaultStyles.subtitle, semanticStyles?.subtitle]}>
+          {subtitle}
+        </Text>
+
+        {quickStarts.length > 0 && (
+          <View style={defaultStyles.grid}>
+            {quickStarts.map((item, index) => (
+              <TouchableOpacity
+                key={item.key}
+                style={[defaultStyles.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,
+                  ]}>
+                  {item.title}
+                </Text>
+                <Text
+                  style={[
+                    defaultStyles.cardDescription,
+                    semanticStyles?.cardDescription,
+                  ]}>
+                  {item.description}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        )}
+      </View>
+    </>
+  );
+
+  // 如果提供了 renderGradient，使用自定义渐变
+  if (renderGradient) {
+    return renderGradient({
+      colors: gradientColors,
+      children: content,
+      style: { ...defaultStyles.container, ...semanticStyles?.root, ...style } as ViewStyle,
+    });
+  }
+
+  // 无渐变 fallback（纯色背景）
+  return (
+    <View
+      style={[
+        defaultStyles.container,
+        {backgroundColor: gradientColors[0]},
+        semanticStyles?.root,
+        style,
+      ]}
+      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);

package/src/welcome/index.md

@@ -0,0 +1,95 @@
+---
+title: Welcome 欢迎页
+nav:
+  title: 组件
+  path: /components
+---
+
+# Welcome 欢迎页
+
+聊天欢迎页组件，渐变背景 + 装饰性光晕 + 快捷入口卡片网格。
+
+## 何时使用
+
+- 聊天界面无消息时的空状态
+- 引导用户通过快捷入口开始对话
+
+## 代码示例
+
+### 基本用法
+
+```tsx
+import { Welcome } from '@unif/react-native-chat';
+
+<Welcome
+  title="你好，我是小U"
+  subtitle="智能助手，有什么可以帮你？"
+/>
+```
+
+### 带快捷入口
+
+```tsx
+<Welcome
+  quickStarts={[
+    { key: 'balance', icon: 'wallet', title: '余额查询', description: '查看账户余额' },
+    { key: 'transfer', icon: 'send', title: '转账汇款', description: '快速转账' },
+    { key: 'invest', icon: 'trending-up', title: '理财推荐', description: '个性化推荐' },
+    { key: 'service', icon: 'chatbubbles', title: '客户服务', description: '在线客服' },
+  ]}
+  onQuickStart={(key) => console.log('选择:', key)}
+  renderIcon={(name, size, color) => <Icon name={name} size={size} color={color} />}
+/>
+```
+
+### 自定义渐变
+
+```tsx
+import LinearGradient from 'react-native-linear-gradient';
+
+<Welcome
+  gradientColors={['#E8F4FD', '#F0E6FF', '#F5F5F5']}
+  renderGradient={({ colors, children, style }) => (
+    <LinearGradient colors={colors} style={style}>
+      {children}
+    </LinearGradient>
+  )}
+/>
+```
+
+## API
+
+### WelcomeProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| title | 主标题 | `string` | `'你好，我是小U'` |
+| subtitle | 副标题 | `string` | `'智能助手，有什么可以帮你？'` |
+| quickStarts | 快捷入口配置 | `WelcomeQuickStart[]` | `[]` |
+| onQuickStart | 快捷入口点击回调 | `(key: string) => void` | - |
+| gradientColors | 背景渐变色 | `string[]` | 内置渐变 |
+| style | 容器样式 | `ViewStyle` | - |
+| styles | 语义样式 | `Partial<WelcomeSemanticStyles>` | - |
+| testID | 测试标识 | `string` | `'welcome'` |
+| renderIcon | 图标渲染函数 | `(name, size, color) => ReactNode` | - |
+| renderGradient | 渐变背景渲染函数 | `(props) => ReactNode` | - |
+
+### WelcomeQuickStart
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| key | 唯一标识 | `string` |
+| icon | 图标名称 | `string` |
+| title | 标题 | `string` |
+| description | 描述 | `string` |
+
+### WelcomeSemanticStyles
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| root | 外层容器 | `ViewStyle` |
+| title | 标题文字 | `TextStyle` |
+| subtitle | 副标题文字 | `TextStyle` |
+| card | 快捷入口卡片 | `ViewStyle` |
+| cardTitle | 卡片标题 | `TextStyle` |
+| cardDescription | 卡片描述 | `TextStyle` |