# Welcome 组件使用示例

以下为片段，实际页面请自行布局。

---

## 基础用法

```tsx
import { Welcome, Input } from '@alipay/agentic-design-mobile';
import { MessageCirclePlus, Sparkles, FileText, CirclePlus } from '@alipay/sofa-icons';
import { Toast } from 'antd-mobile';
import { useState } from 'react';

export function WelcomeBasic() {
  const [loading, setLoading] = useState(false);
  return (
    <Welcome
      content={{
        title: '商机推送',
        card: true,
        suggestion: {
          items: [
            { text: '智能对话', icon: <MessageCirclePlus /> },
            { text: '创意写作', icon: <Sparkles /> },
            { text: '文档总结', icon: <FileText /> },
            { text: '问题解答', icon: <CirclePlus /> },
          ],
          variant: 'shadow',
          onClick: (item) => {
            Toast.show(`点击: ${item.text}`);
          },
        },
      }}
      style={{
        background: 'linear-gradient(180deg, #C6E0F9 0%, #F5FBFF 42%, #F6FBFF 43%, #EAF3FC 100%)',
      }}
    >
      <div style={{ position: 'absolute', bottom: 24, left: 0, right: 4, padding: 8 }}>
        <Input
          prefix={<Sparkles style={{ color: '#4491FF', fontSize: 18 }} />}
          placeholder="有什么想问我的吗～"
          search
          loading={loading}
          onSearch={() => setLoading(true)}
          onPauseLoading={() => setLoading(false)}
        />
      </div>
    </Welcome>
  );
}
```