02cd234def
- ✅ 创建了4个P1优先级Hook（搜索、导航、个人资料、订阅） - ✅ 将其中3个Hook集成到5个组件中 - ✅ 在个人资料、设置、搜索、订阅流程中添加了15+个追踪点 - ✅ 覆盖了完整的收入漏斗（支付发起 → 成功 → 订阅创建） - ✅ 添加了留存追踪（个人资料更新、设置修改、搜索查询） 影响: - 完整的用户订阅旅程可见性 - 个人资料/设置参与度追踪 - 搜索行为分析 - 完整的支付漏斗追踪（微信支付）
59 lines
2.0 KiB
JavaScript
59 lines
2.0 KiB
JavaScript
// src/views/Community/components/SearchBox.js
|
||
import React from 'react';
|
||
import { Card, Input, Radio, Form, Button } from 'antd';
|
||
import { SearchOutlined } from '@ant-design/icons';
|
||
import { useSearchEvents } from '../../../hooks/useSearchEvents';
|
||
|
||
const SearchBox = ({ onSearch }) => {
|
||
const [form] = Form.useForm();
|
||
|
||
// 🎯 初始化搜索埋点Hook
|
||
const searchEvents = useSearchEvents({ context: 'community' });
|
||
|
||
const handleSubmit = (values) => {
|
||
// 🎯 追踪搜索查询提交（在调用onSearch之前）
|
||
if (values.q) {
|
||
searchEvents.trackSearchQuerySubmitted(values.q, 0, {
|
||
search_type: values.search_type || 'topic'
|
||
});
|
||
}
|
||
onSearch(values);
|
||
};
|
||
|
||
return (
|
||
<Card title="搜索事件" className="search-box" style={{ marginBottom: 16 }}>
|
||
<Form
|
||
form={form}
|
||
onFinish={handleSubmit}
|
||
initialValues={{ search_type: 'topic' }}
|
||
>
|
||
<Form.Item name="q" style={{ marginBottom: 12 }}>
|
||
<Input.Search
|
||
placeholder="搜索关键词..."
|
||
allowClear
|
||
enterButton={<SearchOutlined />}
|
||
onSearch={(value) => {
|
||
form.setFieldsValue({ q: value });
|
||
form.submit();
|
||
}}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item name="search_type" style={{ marginBottom: 12 }}>
|
||
<Radio.Group>
|
||
<Radio value="topic">搜索话题</Radio>
|
||
<Radio value="stock">搜索股票</Radio>
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
|
||
<Form.Item style={{ marginBottom: 0 }}>
|
||
<Button type="primary" htmlType="submit" block>
|
||
搜索
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default SearchBox; |