Merge branch 'yongpxu-dev' into yongpxu-dev2
This commit is contained in:
笔记本里的永平
@@ -1,14 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import PlaceholderPage from "@/components/PlaceholderPage";
|
|
||||||
|
|
||||||
const ContactImport: React.FC = () => {
|
|
||||||
return (
|
|
||||||
<PlaceholderPage
|
|
||||||
title="联系人导入"
|
|
||||||
showAddButton
|
|
||||||
addButtonText="导入联系人"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ContactImport;
|
|
||||||
88
nkebao/src/pages/mine/traffic-pool/detail/api.ts
Normal file
88
nkebao/src/pages/mine/traffic-pool/detail/api.ts
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
import type {
|
||||||
|
Device,
|
||||||
|
WechatAccount,
|
||||||
|
CustomerService,
|
||||||
|
TrafficPool,
|
||||||
|
RFMScore,
|
||||||
|
UserTag,
|
||||||
|
UserInteraction,
|
||||||
|
TrafficUser,
|
||||||
|
} from "../list/api";
|
||||||
|
import {
|
||||||
|
generateMockDevices,
|
||||||
|
generateMockWechatAccounts,
|
||||||
|
generateMockCustomerServices,
|
||||||
|
generateMockTrafficPools,
|
||||||
|
generateRFMScore,
|
||||||
|
generateUserTags,
|
||||||
|
generateMockInteractions,
|
||||||
|
} from "../list/api";
|
||||||
|
|
||||||
|
// 获取单个流量池用户详情（mock）
|
||||||
|
export function getTrafficUserDetail(
|
||||||
|
id: string
|
||||||
|
): Promise<TrafficUser | undefined> {
|
||||||
|
const devices = generateMockDevices();
|
||||||
|
const wechatAccounts = generateMockWechatAccounts(devices);
|
||||||
|
const customerServices = generateMockCustomerServices();
|
||||||
|
const trafficPools = generateMockTrafficPools();
|
||||||
|
const users = Array.from({ length: 500 }, (_, i) => {
|
||||||
|
const rfmScore = generateRFMScore();
|
||||||
|
const tags = generateUserTags(rfmScore);
|
||||||
|
const interactions = generateMockInteractions();
|
||||||
|
return {
|
||||||
|
id: `user-${i + 1}`,
|
||||||
|
avatar: `/placeholder.svg?height=40&width=40&query=user${Math.floor(Math.random() * 100)}`,
|
||||||
|
nickname: `用户${i + 1}`,
|
||||||
|
wechatId: `wx_${Math.random().toString(36).substr(2, 8)}`,
|
||||||
|
phone: `1${Math.floor(Math.random() * 9) + 1}${Math.random().toString().substr(2, 9)}`,
|
||||||
|
region: ["北京", "上海", "广州", "深圳", "杭州", "成都"][
|
||||||
|
Math.floor(Math.random() * 6)
|
||||||
|
],
|
||||||
|
note: Math.random() > 0.7 ? `这是用户${i + 1}的备注信息` : "",
|
||||||
|
status: ["pending", "added", "failed", "duplicate"][
|
||||||
|
Math.floor(Math.random() * 4)
|
||||||
|
] as any,
|
||||||
|
addTime: new Date(
|
||||||
|
Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000
|
||||||
|
).toISOString(),
|
||||||
|
source: "海报获客",
|
||||||
|
scenario: "poster",
|
||||||
|
deviceId: devices[Math.floor(Math.random() * devices.length)].id,
|
||||||
|
wechatAccountId:
|
||||||
|
wechatAccounts[Math.floor(Math.random() * wechatAccounts.length)].id,
|
||||||
|
customerServiceId:
|
||||||
|
customerServices[Math.floor(Math.random() * customerServices.length)]
|
||||||
|
.id,
|
||||||
|
poolIds:
|
||||||
|
Math.random() > 0.5
|
||||||
|
? [trafficPools[Math.floor(Math.random() * trafficPools.length)].id]
|
||||||
|
: [],
|
||||||
|
tags,
|
||||||
|
rfmScore,
|
||||||
|
lastInteraction: new Date(
|
||||||
|
Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000
|
||||||
|
).toISOString(),
|
||||||
|
totalSpent: Math.floor(Math.random() * 10000),
|
||||||
|
interactionCount: Math.floor(Math.random() * 50) + 1,
|
||||||
|
conversionRate: Math.floor(Math.random() * 100),
|
||||||
|
isDuplicate: Math.random() > 0.9,
|
||||||
|
mergedAccounts: [],
|
||||||
|
addStatus: ["not_added", "adding", "added", "failed"][
|
||||||
|
Math.floor(Math.random() * 4)
|
||||||
|
] as any,
|
||||||
|
interactions,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return Promise.resolve(users.find((u) => u.id === id));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取meta信息
|
||||||
|
export function getTrafficPoolMeta() {
|
||||||
|
return {
|
||||||
|
devices: generateMockDevices(),
|
||||||
|
wechatAccounts: generateMockWechatAccounts(generateMockDevices()),
|
||||||
|
customerServices: generateMockCustomerServices(),
|
||||||
|
trafficPools: generateMockTrafficPools(),
|
||||||
|
};
|
||||||
|
}
|
||||||
541
nkebao/src/pages/mine/traffic-pool/detail/index.tsx
Normal file
541
nkebao/src/pages/mine/traffic-pool/detail/index.tsx
Normal file
@@ -0,0 +1,541 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { useParams, useNavigate } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
Tabs,
|
||||||
|
Tag,
|
||||||
|
Avatar,
|
||||||
|
Button,
|
||||||
|
List,
|
||||||
|
Grid,
|
||||||
|
Toast,
|
||||||
|
SpinLoading,
|
||||||
|
} from "antd-mobile";
|
||||||
|
import {
|
||||||
|
StarFilled,
|
||||||
|
MessageOutlined,
|
||||||
|
EyeOutlined,
|
||||||
|
MoreOutlined,
|
||||||
|
PayCircleOutlined,
|
||||||
|
PlusOutlined,
|
||||||
|
PhoneOutlined,
|
||||||
|
InboxOutlined,
|
||||||
|
UserOutlined,
|
||||||
|
CrownOutlined,
|
||||||
|
HeartOutlined,
|
||||||
|
ThunderboltOutlined,
|
||||||
|
ExclamationCircleOutlined,
|
||||||
|
RiseOutlined,
|
||||||
|
StopOutlined,
|
||||||
|
} from "@ant-design/icons";
|
||||||
|
import Layout from "@/components/Layout/Layout";
|
||||||
|
import NavCommon from "@/components/NavCommon";
|
||||||
|
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||||
|
import {
|
||||||
|
getTrafficUserDetail,
|
||||||
|
getTrafficPoolMeta,
|
||||||
|
type TrafficUser,
|
||||||
|
type Device,
|
||||||
|
type WechatAccount,
|
||||||
|
type CustomerService,
|
||||||
|
type TrafficPool,
|
||||||
|
SCENARIOS,
|
||||||
|
RFM_SEGMENTS,
|
||||||
|
} from "./api";
|
||||||
|
import styles from "./index.module.scss";
|
||||||
|
|
||||||
|
const TrafficPoolDetail: React.FC = () => {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [user, setUser] = useState<TrafficUser | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [meta, setMeta] = useState<{
|
||||||
|
devices: Device[];
|
||||||
|
wechatAccounts: WechatAccount[];
|
||||||
|
customerServices: CustomerService[];
|
||||||
|
trafficPools: TrafficPool[];
|
||||||
|
}>({
|
||||||
|
devices: [],
|
||||||
|
wechatAccounts: [],
|
||||||
|
customerServices: [],
|
||||||
|
trafficPools: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载数据
|
||||||
|
useEffect(() => {
|
||||||
|
if (id) {
|
||||||
|
loadData();
|
||||||
|
}
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const [userData, metaData] = await Promise.all([
|
||||||
|
getTrafficUserDetail(id!),
|
||||||
|
getTrafficPoolMeta(),
|
||||||
|
]);
|
||||||
|
if (userData) {
|
||||||
|
setUser(userData);
|
||||||
|
} else {
|
||||||
|
Toast.show({
|
||||||
|
content: "用户不存在",
|
||||||
|
position: "center",
|
||||||
|
});
|
||||||
|
navigate(-1);
|
||||||
|
}
|
||||||
|
setMeta(metaData);
|
||||||
|
} catch (error) {
|
||||||
|
Toast.show({
|
||||||
|
content: "加载数据失败",
|
||||||
|
position: "center",
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取状态标签
|
||||||
|
const getStatusTag = (status: string) => {
|
||||||
|
const statusMap = {
|
||||||
|
pending: { text: "待添加", color: "warning" },
|
||||||
|
added: { text: "已添加", color: "success" },
|
||||||
|
failed: { text: "添加失败", color: "danger" },
|
||||||
|
duplicate: { text: "重复用户", color: "default" },
|
||||||
|
};
|
||||||
|
const config = statusMap[status as keyof typeof statusMap];
|
||||||
|
return <Tag color={config.color}>{config.text}</Tag>;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取RFM分段图标
|
||||||
|
const getRFMIcon = (segment: string) => {
|
||||||
|
const segmentConfig = Object.values(RFM_SEGMENTS).find(
|
||||||
|
(s) => s.name === segment
|
||||||
|
);
|
||||||
|
if (!segmentConfig) return null;
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
CrownOutlined: <CrownOutlined />,
|
||||||
|
HeartOutlined: <HeartOutlined />,
|
||||||
|
ThunderboltOutlined: <ThunderboltOutlined />,
|
||||||
|
ExclamationCircleOutlined: <ExclamationCircleOutlined />,
|
||||||
|
UserOutlined: <UserOutlined />,
|
||||||
|
RiseOutlined: <RiseOutlined />,
|
||||||
|
StarFilled: <StarFilled />,
|
||||||
|
StopOutlined: <StopOutlined />,
|
||||||
|
};
|
||||||
|
|
||||||
|
return iconMap[segmentConfig.icon as keyof typeof iconMap] || null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取场景图标
|
||||||
|
const getScenarioIcon = (scenarioId: string) => {
|
||||||
|
const scenario = SCENARIOS.find((s) => s.id === scenarioId);
|
||||||
|
if (!scenario) return null;
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
FileImageOutline: <InboxOutlined />,
|
||||||
|
PhoneOutlined: <PhoneOutlined />,
|
||||||
|
PlayCircleOutlined: <PhoneOutlined />,
|
||||||
|
ReadOutlined: <InboxOutlined />,
|
||||||
|
UsergroupAddOutlined: <UserOutlined />,
|
||||||
|
ApiOutlined: <InboxOutlined />,
|
||||||
|
InboxOutlined: <InboxOutlined />,
|
||||||
|
PayCircleOutlined: <PayCircleOutlined />,
|
||||||
|
};
|
||||||
|
|
||||||
|
return iconMap[scenario.icon as keyof typeof iconMap] || null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取设备信息
|
||||||
|
const getDevice = (deviceId: string) => {
|
||||||
|
return meta.devices.find((d) => d.id === deviceId);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取微信号信息
|
||||||
|
const getWechatAccount = (accountId: string) => {
|
||||||
|
return meta.wechatAccounts.find((w) => w.id === accountId);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取客服信息
|
||||||
|
const getCustomerService = (csId: string) => {
|
||||||
|
return meta.customerServices.find((c) => c.id === csId);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取流量池信息
|
||||||
|
const getTrafficPools = (poolIds: string[]) => {
|
||||||
|
return poolIds
|
||||||
|
.map((id) => meta.trafficPools.find((p) => p.id === id))
|
||||||
|
.filter(Boolean);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 格式化日期
|
||||||
|
const formatDate = (dateString: string) => {
|
||||||
|
if (!dateString) return "--";
|
||||||
|
try {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleDateString("zh-CN");
|
||||||
|
} catch (error) {
|
||||||
|
return dateString;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className={styles.loadingContainer}>
|
||||||
|
<SpinLoading color="primary" />
|
||||||
|
<p>加载中...</p>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className={styles.errorContainer}>
|
||||||
|
<p>用户不存在</p>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout
|
||||||
|
header={
|
||||||
|
<NavCommon
|
||||||
|
title="用户详情"
|
||||||
|
onBack={() => navigate(-1)}
|
||||||
|
right={
|
||||||
|
<Button size="small" fill="none">
|
||||||
|
<MoreOutlined />
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
footer={<MeauMobile />}
|
||||||
|
>
|
||||||
|
<div className={styles.container}>
|
||||||
|
{/* 用户基本信息卡片 */}
|
||||||
|
<Card className={styles.userCard}>
|
||||||
|
<div className={styles.userHeader}>
|
||||||
|
<Avatar src={user.avatar} className={styles.userAvatar} />
|
||||||
|
<div className={styles.userInfo}>
|
||||||
|
<div className={styles.userName}>
|
||||||
|
{user.nickname}
|
||||||
|
{user.rfmScore.priority === "high" && (
|
||||||
|
<StarFilled className={styles.starIcon} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={styles.userWechatId}>{user.wechatId}</div>
|
||||||
|
<div className={styles.userTags}>
|
||||||
|
{getStatusTag(user.status)}
|
||||||
|
{user.tags.slice(0, 3).map((tag) => (
|
||||||
|
<Tag key={tag.id} color={tag.color} size="small">
|
||||||
|
{tag.name}
|
||||||
|
</Tag>
|
||||||
|
))}
|
||||||
|
{user.tags.length > 3 && (
|
||||||
|
<Tag color="default" size="small">
|
||||||
|
+{user.tags.length - 3}
|
||||||
|
</Tag>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.userActions}>
|
||||||
|
<Button size="small" fill="none">
|
||||||
|
<MessageOutlined />
|
||||||
|
</Button>
|
||||||
|
<Button size="small" fill="none">
|
||||||
|
<PhoneOutlined />
|
||||||
|
</Button>
|
||||||
|
<Button size="small" fill="none">
|
||||||
|
<EyeOutlined />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.userStats}>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<div className={styles.statValue}>
|
||||||
|
¥{user.totalSpent.toLocaleString()}
|
||||||
|
</div>
|
||||||
|
<div className={styles.statLabel}>总消费</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<div className={styles.statValue}>{user.interactionCount}</div>
|
||||||
|
<div className={styles.statLabel}>互动次数</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<div className={styles.statValue}>{user.conversionRate}%</div>
|
||||||
|
<div className={styles.statLabel}>转化率</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* 详细信息标签页 */}
|
||||||
|
<Tabs className={styles.tabs}>
|
||||||
|
<Tabs.Tab title="基本信息" key="basic">
|
||||||
|
<div className={styles.tabContent}>
|
||||||
|
<Card className={styles.infoCard}>
|
||||||
|
<List>
|
||||||
|
<List.Item
|
||||||
|
title="手机号"
|
||||||
|
extra={user.phone}
|
||||||
|
prefix={<PhoneOutlined />}
|
||||||
|
/>
|
||||||
|
<List.Item
|
||||||
|
title="地区"
|
||||||
|
extra={user.region}
|
||||||
|
prefix={<UserOutlined />}
|
||||||
|
/>
|
||||||
|
<List.Item
|
||||||
|
title="添加时间"
|
||||||
|
extra={formatDate(user.addTime)}
|
||||||
|
prefix={<PlusOutlined />}
|
||||||
|
/>
|
||||||
|
<List.Item
|
||||||
|
title="获客来源"
|
||||||
|
extra={user.source}
|
||||||
|
prefix={getScenarioIcon(user.scenario)}
|
||||||
|
/>
|
||||||
|
<List.Item
|
||||||
|
title="最后互动"
|
||||||
|
extra={formatDate(user.lastInteraction)}
|
||||||
|
prefix={<MessageOutlined />}
|
||||||
|
/>
|
||||||
|
{user.note && (
|
||||||
|
<List.Item
|
||||||
|
title="备注"
|
||||||
|
extra={user.note}
|
||||||
|
prefix={<EyeOutlined />}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</List>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className={styles.infoCard}>
|
||||||
|
<div className={styles.cardTitle}>RFM分析</div>
|
||||||
|
<div className={styles.rfmGrid}>
|
||||||
|
<div className={styles.rfmItem}>
|
||||||
|
<div className={styles.rfmValue}>
|
||||||
|
{user.rfmScore.recency}
|
||||||
|
</div>
|
||||||
|
<div className={styles.rfmLabel}>最近购买</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.rfmItem}>
|
||||||
|
<div className={styles.rfmValue}>
|
||||||
|
{user.rfmScore.frequency}
|
||||||
|
</div>
|
||||||
|
<div className={styles.rfmLabel}>购买频率</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.rfmItem}>
|
||||||
|
<div className={styles.rfmValue}>
|
||||||
|
{user.rfmScore.monetary}
|
||||||
|
</div>
|
||||||
|
<div className={styles.rfmLabel}>购买金额</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.rfmSegment}>
|
||||||
|
<span className={styles.segmentLabel}>客户分段:</span>
|
||||||
|
<Tag color="primary">
|
||||||
|
{getRFMIcon(user.rfmScore.segment)}
|
||||||
|
{user.rfmScore.segment}
|
||||||
|
</Tag>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</Tabs.Tab>
|
||||||
|
|
||||||
|
<Tabs.Tab title="分配信息" key="assignment">
|
||||||
|
<div className={styles.tabContent}>
|
||||||
|
<Card className={styles.infoCard}>
|
||||||
|
<div className={styles.cardTitle}>设备信息</div>
|
||||||
|
{(() => {
|
||||||
|
const device = getDevice(user.deviceId);
|
||||||
|
return device ? (
|
||||||
|
<div className={styles.assignmentItem}>
|
||||||
|
<Avatar src={device.name} className={styles.itemAvatar} />
|
||||||
|
<div className={styles.itemInfo}>
|
||||||
|
<div className={styles.itemName}>{device.name}</div>
|
||||||
|
<div className={styles.itemMeta}>
|
||||||
|
{device.location} | 电量 {device.battery}%
|
||||||
|
</div>
|
||||||
|
<Tag
|
||||||
|
color={
|
||||||
|
device.status === "online" ? "success" : "default"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{device.status === "online" ? "在线" : "离线"}
|
||||||
|
</Tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className={styles.emptyState}>未分配设备</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className={styles.infoCard}>
|
||||||
|
<div className={styles.cardTitle}>微信号</div>
|
||||||
|
{(() => {
|
||||||
|
const wechatAccount = getWechatAccount(user.wechatAccountId);
|
||||||
|
return wechatAccount ? (
|
||||||
|
<div className={styles.assignmentItem}>
|
||||||
|
<Avatar
|
||||||
|
src={wechatAccount.avatar}
|
||||||
|
className={styles.itemAvatar}
|
||||||
|
/>
|
||||||
|
<div className={styles.itemInfo}>
|
||||||
|
<div className={styles.itemName}>
|
||||||
|
{wechatAccount.nickname}
|
||||||
|
</div>
|
||||||
|
<div className={styles.itemMeta}>
|
||||||
|
{wechatAccount.wechatId} | {wechatAccount.friendCount}{" "}
|
||||||
|
好友
|
||||||
|
</div>
|
||||||
|
<Tag
|
||||||
|
color={
|
||||||
|
wechatAccount.status === "normal"
|
||||||
|
? "success"
|
||||||
|
: "warning"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{wechatAccount.status === "normal" ? "正常" : "受限"}
|
||||||
|
</Tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className={styles.emptyState}>未分配微信号</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className={styles.infoCard}>
|
||||||
|
<div className={styles.cardTitle}>客服</div>
|
||||||
|
{(() => {
|
||||||
|
const customerService = getCustomerService(
|
||||||
|
user.customerServiceId
|
||||||
|
);
|
||||||
|
return customerService ? (
|
||||||
|
<div className={styles.assignmentItem}>
|
||||||
|
<Avatar
|
||||||
|
src={customerService.avatar}
|
||||||
|
className={styles.itemAvatar}
|
||||||
|
/>
|
||||||
|
<div className={styles.itemInfo}>
|
||||||
|
<div className={styles.itemName}>
|
||||||
|
{customerService.name}
|
||||||
|
</div>
|
||||||
|
<div className={styles.itemMeta}>
|
||||||
|
已分配 {customerService.assignedUsers} 个用户
|
||||||
|
</div>
|
||||||
|
<Tag
|
||||||
|
color={
|
||||||
|
customerService.status === "online"
|
||||||
|
? "success"
|
||||||
|
: "default"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{customerService.status === "online"
|
||||||
|
? "在线"
|
||||||
|
: "离线"}
|
||||||
|
</Tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className={styles.emptyState}>未分配客服</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className={styles.infoCard}>
|
||||||
|
<div className={styles.cardTitle}>流量池</div>
|
||||||
|
{(() => {
|
||||||
|
const pools = getTrafficPools(user.poolIds);
|
||||||
|
return pools.length > 0 ? (
|
||||||
|
<div className={styles.poolList}>
|
||||||
|
{pools.map((pool) => (
|
||||||
|
<div key={pool!.id} className={styles.poolItem}>
|
||||||
|
<div className={styles.poolName}>{pool!.name}</div>
|
||||||
|
<div className={styles.poolMeta}>
|
||||||
|
{pool!.userCount} 个用户 | {pool!.description}
|
||||||
|
</div>
|
||||||
|
<div className={styles.poolTags}>
|
||||||
|
{pool!.tags.map((tag, index) => (
|
||||||
|
<Tag key={index} color="default" size="small">
|
||||||
|
{tag}
|
||||||
|
</Tag>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className={styles.emptyState}>未加入流量池</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</Tabs.Tab>
|
||||||
|
|
||||||
|
<Tabs.Tab title="互动记录" key="interactions">
|
||||||
|
<div className={styles.tabContent}>
|
||||||
|
<Card className={styles.infoCard}>
|
||||||
|
<div className={styles.cardTitle}>最近互动</div>
|
||||||
|
{user.interactions.length > 0 ? (
|
||||||
|
<List>
|
||||||
|
{user.interactions.slice(0, 10).map((interaction) => (
|
||||||
|
<List.Item
|
||||||
|
key={interaction.id}
|
||||||
|
title={interaction.content}
|
||||||
|
description={formatDate(interaction.timestamp)}
|
||||||
|
prefix={
|
||||||
|
<div className={styles.interactionIcon}>
|
||||||
|
{interaction.type === "message" && (
|
||||||
|
<MessageOutlined />
|
||||||
|
)}
|
||||||
|
{interaction.type === "purchase" && (
|
||||||
|
<PayCircleOutlined />
|
||||||
|
)}
|
||||||
|
{interaction.type === "view" && <EyeOutlined />}
|
||||||
|
{interaction.type === "click" && <PhoneOutlined />}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
extra={
|
||||||
|
interaction.value && (
|
||||||
|
<span className={styles.interactionValue}>
|
||||||
|
¥{interaction.value}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
) : (
|
||||||
|
<div className={styles.emptyState}>暂无互动记录</div>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</Tabs.Tab>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
{/* 操作按钮 */}
|
||||||
|
<div className={styles.actionButtons}>
|
||||||
|
<Button block color="primary" onClick={() => {}}>
|
||||||
|
添加到微信
|
||||||
|
</Button>
|
||||||
|
<Button block fill="outline" onClick={() => {}}>
|
||||||
|
分配客服
|
||||||
|
</Button>
|
||||||
|
<Button block fill="outline" onClick={() => {}}>
|
||||||
|
加入流量池
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TrafficPoolDetail;
|
||||||
372
nkebao/src/pages/mine/traffic-pool/list/api.ts
Normal file
372
nkebao/src/pages/mine/traffic-pool/list/api.ts
Normal file
@@ -0,0 +1,372 @@
|
|||||||
|
// 类型定义
|
||||||
|
export interface Device {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
status: "online" | "offline" | "busy";
|
||||||
|
battery: number;
|
||||||
|
location: string;
|
||||||
|
wechatAccounts: number;
|
||||||
|
dailyAddLimit: number;
|
||||||
|
todayAdded: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WechatAccount {
|
||||||
|
id: string;
|
||||||
|
nickname: string;
|
||||||
|
wechatId: string;
|
||||||
|
avatar: string;
|
||||||
|
deviceId: string;
|
||||||
|
status: "normal" | "limited" | "blocked";
|
||||||
|
friendCount: number;
|
||||||
|
dailyAddLimit: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CustomerService {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
avatar: string;
|
||||||
|
status: "online" | "offline" | "busy";
|
||||||
|
assignedUsers: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TrafficPool {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
userCount: number;
|
||||||
|
tags: string[];
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RFMScore {
|
||||||
|
recency: number;
|
||||||
|
frequency: number;
|
||||||
|
monetary: number;
|
||||||
|
total: number;
|
||||||
|
segment: string;
|
||||||
|
priority: "high" | "medium" | "low";
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UserTag {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
color: string;
|
||||||
|
source: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UserInteraction {
|
||||||
|
id: string;
|
||||||
|
type: "message" | "purchase" | "view" | "click";
|
||||||
|
content: string;
|
||||||
|
timestamp: string;
|
||||||
|
value?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TrafficUser {
|
||||||
|
id: string;
|
||||||
|
avatar: string;
|
||||||
|
nickname: string;
|
||||||
|
wechatId: string;
|
||||||
|
phone: string;
|
||||||
|
region: string;
|
||||||
|
note: string;
|
||||||
|
status: "pending" | "added" | "failed" | "duplicate";
|
||||||
|
addTime: string;
|
||||||
|
source: string;
|
||||||
|
scenario: string;
|
||||||
|
deviceId: string;
|
||||||
|
wechatAccountId: string;
|
||||||
|
customerServiceId: string;
|
||||||
|
poolIds: string[];
|
||||||
|
tags: UserTag[];
|
||||||
|
rfmScore: RFMScore;
|
||||||
|
lastInteraction: string;
|
||||||
|
totalSpent: number;
|
||||||
|
interactionCount: number;
|
||||||
|
conversionRate: number;
|
||||||
|
isDuplicate: boolean;
|
||||||
|
mergedAccounts: string[];
|
||||||
|
addStatus: "not_added" | "adding" | "added" | "failed";
|
||||||
|
interactions: UserInteraction[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 场景和RFM分段常量
|
||||||
|
export const SCENARIOS = [
|
||||||
|
{ id: "poster", name: "海报获客", icon: "FileImageOutline" },
|
||||||
|
{ id: "phone", name: "电话获客", icon: "PhoneOutlined" },
|
||||||
|
{ id: "douyin", name: "抖音获客", icon: "PlayCircleOutlined" },
|
||||||
|
{ id: "xiaohongshu", name: "小红书获客", icon: "ReadOutlined" },
|
||||||
|
{ id: "weixinqun", name: "微信群获客", icon: "UsergroupAddOutlined" },
|
||||||
|
{ id: "api", name: "API获客", icon: "ApiOutlined" },
|
||||||
|
{ id: "order", name: "订单获客", icon: "InboxOutlined" },
|
||||||
|
{ id: "payment", name: "付款码获客", icon: "PayCircleOutlined" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const RFM_SEGMENTS = {
|
||||||
|
"555": {
|
||||||
|
name: "重要价值客户",
|
||||||
|
color: "red",
|
||||||
|
icon: "CrownOutlined",
|
||||||
|
priority: "high",
|
||||||
|
},
|
||||||
|
"554": {
|
||||||
|
name: "重要保持客户",
|
||||||
|
color: "purple",
|
||||||
|
icon: "HeartOutlined",
|
||||||
|
priority: "high",
|
||||||
|
},
|
||||||
|
"544": {
|
||||||
|
name: "重要发展客户",
|
||||||
|
color: "blue",
|
||||||
|
icon: "ThunderboltOutlined",
|
||||||
|
priority: "high",
|
||||||
|
},
|
||||||
|
"455": {
|
||||||
|
name: "重要挽留客户",
|
||||||
|
color: "orange",
|
||||||
|
icon: "ExclamationCircleOutlined",
|
||||||
|
priority: "medium",
|
||||||
|
},
|
||||||
|
"444": {
|
||||||
|
name: "一般价值客户",
|
||||||
|
color: "green",
|
||||||
|
icon: "UserOutlined",
|
||||||
|
priority: "medium",
|
||||||
|
},
|
||||||
|
"333": {
|
||||||
|
name: "一般保持客户",
|
||||||
|
color: "yellow",
|
||||||
|
icon: "RiseOutlined",
|
||||||
|
priority: "medium",
|
||||||
|
},
|
||||||
|
"222": {
|
||||||
|
name: "新用户",
|
||||||
|
color: "cyan",
|
||||||
|
icon: "StarOutlined",
|
||||||
|
priority: "low",
|
||||||
|
},
|
||||||
|
"111": {
|
||||||
|
name: "流失预警客户",
|
||||||
|
color: "gray",
|
||||||
|
icon: "StopOutlined",
|
||||||
|
priority: "low",
|
||||||
|
},
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
// mock数据生成函数
|
||||||
|
export function generateMockDevices(): Device[] {
|
||||||
|
return Array.from({ length: 8 }, (_, i) => ({
|
||||||
|
id: `device-${i + 1}`,
|
||||||
|
name: `设备${i + 1}`,
|
||||||
|
status: ["online", "offline", "busy"][Math.floor(Math.random() * 3)] as
|
||||||
|
| "online"
|
||||||
|
| "offline"
|
||||||
|
| "busy",
|
||||||
|
battery: Math.floor(Math.random() * 100),
|
||||||
|
location: ["北京", "上海", "广州", "深圳"][Math.floor(Math.random() * 4)],
|
||||||
|
wechatAccounts: Math.floor(Math.random() * 5) + 1,
|
||||||
|
dailyAddLimit: Math.random() > 0.5 ? 20 : 10,
|
||||||
|
todayAdded: Math.floor(Math.random() * 15),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function generateMockWechatAccounts(devices: Device[]): WechatAccount[] {
|
||||||
|
const accounts: WechatAccount[] = [];
|
||||||
|
devices.forEach((device) => {
|
||||||
|
for (let i = 0; i < device.wechatAccounts; i++) {
|
||||||
|
accounts.push({
|
||||||
|
id: `wx-${device.id}-${i + 1}`,
|
||||||
|
nickname: `微信${device.id.split("-")[1]}-${i + 1}`,
|
||||||
|
wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
|
||||||
|
avatar: `/placeholder.svg?height=40&width=40&query=wx${Math.floor(Math.random() * 10)}`,
|
||||||
|
deviceId: device.id,
|
||||||
|
status: ["normal", "limited", "blocked"][
|
||||||
|
Math.floor(Math.random() * 3)
|
||||||
|
] as "normal" | "limited" | "blocked",
|
||||||
|
friendCount: Math.floor(Math.random() * 4000) + 1000,
|
||||||
|
dailyAddLimit: Math.random() > 0.5 ? 20 : 10,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return accounts;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function generateMockCustomerServices(): CustomerService[] {
|
||||||
|
return Array.from({ length: 5 }, (_, i) => ({
|
||||||
|
id: `cs-${i + 1}`,
|
||||||
|
name: `客服${i + 1}`,
|
||||||
|
avatar: `/placeholder.svg?height=40&width=40&query=cs${i}`,
|
||||||
|
status: ["online", "offline", "busy"][Math.floor(Math.random() * 3)] as
|
||||||
|
| "online"
|
||||||
|
| "offline"
|
||||||
|
| "busy",
|
||||||
|
assignedUsers: Math.floor(Math.random() * 100) + 50,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function generateMockTrafficPools(): TrafficPool[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
id: "pool-1",
|
||||||
|
name: "高价值客户池",
|
||||||
|
description: "包含所有高价值客户，优先添加",
|
||||||
|
userCount: 156,
|
||||||
|
tags: ["高价值", "优先添加", "重要客户"],
|
||||||
|
createdAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "pool-2",
|
||||||
|
name: "潜在客户池",
|
||||||
|
description: "有潜力的用户，需要进一步培养",
|
||||||
|
userCount: 289,
|
||||||
|
tags: ["潜在客户", "需培养"],
|
||||||
|
createdAt: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "pool-3",
|
||||||
|
name: "新用户池",
|
||||||
|
description: "新注册或新添加的用户",
|
||||||
|
userCount: 432,
|
||||||
|
tags: ["新用户", "待分类"],
|
||||||
|
createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function generateRFMScore(): RFMScore {
|
||||||
|
const recency = Math.floor(Math.random() * 5) + 1;
|
||||||
|
const frequency = Math.floor(Math.random() * 5) + 1;
|
||||||
|
const monetary = Math.floor(Math.random() * 5) + 1;
|
||||||
|
const total = recency + frequency + monetary;
|
||||||
|
let segment: string;
|
||||||
|
let priority: "high" | "medium" | "low";
|
||||||
|
if (total >= 12) {
|
||||||
|
segment = Object.values(RFM_SEGMENTS)[Math.floor(Math.random() * 3)].name;
|
||||||
|
priority = "high";
|
||||||
|
} else if (total >= 8) {
|
||||||
|
segment =
|
||||||
|
Object.values(RFM_SEGMENTS)[3 + Math.floor(Math.random() * 3)].name;
|
||||||
|
priority = "medium";
|
||||||
|
} else {
|
||||||
|
segment =
|
||||||
|
Object.values(RFM_SEGMENTS)[6 + Math.floor(Math.random() * 2)].name;
|
||||||
|
priority = "low";
|
||||||
|
}
|
||||||
|
return { recency, frequency, monetary, total, segment, priority };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function generateMockInteractions(): UserInteraction[] {
|
||||||
|
const types = ["message", "purchase", "view", "click"] as const;
|
||||||
|
return Array.from({ length: Math.floor(Math.random() * 10) + 1 }, (_, i) => {
|
||||||
|
const type = types[Math.floor(Math.random() * types.length)];
|
||||||
|
return {
|
||||||
|
id: `interaction-${i + 1}`,
|
||||||
|
type,
|
||||||
|
content:
|
||||||
|
type === "message"
|
||||||
|
? "用户发送了消息"
|
||||||
|
: type === "purchase"
|
||||||
|
? "用户购买了产品"
|
||||||
|
: type === "view"
|
||||||
|
? "用户查看了产品"
|
||||||
|
: "用户点击了链接",
|
||||||
|
timestamp: new Date(
|
||||||
|
Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000
|
||||||
|
).toISOString(),
|
||||||
|
value:
|
||||||
|
type === "purchase"
|
||||||
|
? Math.floor(Math.random() * 1000) + 100
|
||||||
|
: undefined,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function generateUserTags(rfmScore: RFMScore): UserTag[] {
|
||||||
|
const allTags = [
|
||||||
|
{ id: "tag-1", name: "活跃用户", color: "success", source: "system" },
|
||||||
|
{ id: "tag-2", name: "高消费", color: "danger", source: "system" },
|
||||||
|
{ id: "tag-3", name: "忠实客户", color: "primary", source: "system" },
|
||||||
|
{ id: "tag-4", name: "新用户", color: "warning", source: "system" },
|
||||||
|
{ id: "tag-5", name: "VIP客户", color: "purple", source: "manual" },
|
||||||
|
{ id: "tag-6", name: "潜在客户", color: "default", source: "system" },
|
||||||
|
];
|
||||||
|
const tags: UserTag[] = [];
|
||||||
|
if (rfmScore.priority === "high") {
|
||||||
|
tags.push(allTags[1], allTags[2]);
|
||||||
|
if (Math.random() > 0.5) tags.push(allTags[4]);
|
||||||
|
} else if (rfmScore.priority === "medium") {
|
||||||
|
tags.push(allTags[0]);
|
||||||
|
if (Math.random() > 0.5) tags.push(allTags[5]);
|
||||||
|
} else {
|
||||||
|
tags.push(allTags[3]);
|
||||||
|
if (Math.random() > 0.3) tags.push(allTags[5]);
|
||||||
|
}
|
||||||
|
return tags;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取流量池用户列表（mock）
|
||||||
|
export function getTrafficPoolUsers(): Promise<TrafficUser[]> {
|
||||||
|
const devices = generateMockDevices();
|
||||||
|
const wechatAccounts = generateMockWechatAccounts(devices);
|
||||||
|
const customerServices = generateMockCustomerServices();
|
||||||
|
const trafficPools = generateMockTrafficPools();
|
||||||
|
const users = Array.from({ length: 500 }, (_, i) => {
|
||||||
|
const rfmScore = generateRFMScore();
|
||||||
|
const tags = generateUserTags(rfmScore);
|
||||||
|
const interactions = generateMockInteractions();
|
||||||
|
return {
|
||||||
|
id: `user-${i + 1}`,
|
||||||
|
avatar: `/placeholder.svg?height=40&width=40&query=user${Math.floor(Math.random() * 100)}`,
|
||||||
|
nickname: `用户${i + 1}`,
|
||||||
|
wechatId: `wx_${Math.random().toString(36).substr(2, 8)}`,
|
||||||
|
phone: `1${Math.floor(Math.random() * 9) + 1}${Math.random().toString().substr(2, 9)}`,
|
||||||
|
region: ["北京", "上海", "广州", "深圳", "杭州", "成都"][
|
||||||
|
Math.floor(Math.random() * 6)
|
||||||
|
],
|
||||||
|
note: Math.random() > 0.7 ? `这是用户${i + 1}的备注信息` : "",
|
||||||
|
status: ["pending", "added", "failed", "duplicate"][
|
||||||
|
Math.floor(Math.random() * 4)
|
||||||
|
] as any,
|
||||||
|
addTime: new Date(
|
||||||
|
Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000
|
||||||
|
).toISOString(),
|
||||||
|
source: SCENARIOS[Math.floor(Math.random() * SCENARIOS.length)].name,
|
||||||
|
scenario: SCENARIOS[Math.floor(Math.random() * SCENARIOS.length)].id,
|
||||||
|
deviceId: devices[Math.floor(Math.random() * devices.length)].id,
|
||||||
|
wechatAccountId:
|
||||||
|
wechatAccounts[Math.floor(Math.random() * wechatAccounts.length)].id,
|
||||||
|
customerServiceId:
|
||||||
|
customerServices[Math.floor(Math.random() * customerServices.length)]
|
||||||
|
.id,
|
||||||
|
poolIds:
|
||||||
|
Math.random() > 0.5
|
||||||
|
? [trafficPools[Math.floor(Math.random() * trafficPools.length)].id]
|
||||||
|
: [],
|
||||||
|
tags,
|
||||||
|
rfmScore,
|
||||||
|
lastInteraction: new Date(
|
||||||
|
Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000
|
||||||
|
).toISOString(),
|
||||||
|
totalSpent: Math.floor(Math.random() * 10000),
|
||||||
|
interactionCount: Math.floor(Math.random() * 50) + 1,
|
||||||
|
conversionRate: Math.floor(Math.random() * 100),
|
||||||
|
isDuplicate: Math.random() > 0.9,
|
||||||
|
mergedAccounts: [],
|
||||||
|
addStatus: ["not_added", "adding", "added", "failed"][
|
||||||
|
Math.floor(Math.random() * 4)
|
||||||
|
] as any,
|
||||||
|
interactions,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return Promise.resolve(users);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取设备、微信号、客服、流量池
|
||||||
|
export function getTrafficPoolMeta() {
|
||||||
|
return {
|
||||||
|
devices: generateMockDevices(),
|
||||||
|
wechatAccounts: generateMockWechatAccounts(generateMockDevices()),
|
||||||
|
customerServices: generateMockCustomerServices(),
|
||||||
|
trafficPools: generateMockTrafficPools(),
|
||||||
|
};
|
||||||
|
}
|
||||||
656
nkebao/src/pages/mine/traffic-pool/list/index.tsx
Normal file
656
nkebao/src/pages/mine/traffic-pool/list/index.tsx
Normal file
@@ -0,0 +1,656 @@
|
|||||||
|
import React, { useState, useEffect, useMemo } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
List,
|
||||||
|
Button,
|
||||||
|
SearchBar,
|
||||||
|
Checkbox,
|
||||||
|
Tag,
|
||||||
|
Avatar,
|
||||||
|
Toast,
|
||||||
|
SpinLoading,
|
||||||
|
Popup,
|
||||||
|
Selector,
|
||||||
|
InfiniteScroll,
|
||||||
|
} from "antd-mobile";
|
||||||
|
import {
|
||||||
|
SettingOutlined,
|
||||||
|
ReloadOutlined,
|
||||||
|
StarFilled,
|
||||||
|
UserOutlined,
|
||||||
|
EyeOutlined,
|
||||||
|
MessageOutlined,
|
||||||
|
PhoneOutlined,
|
||||||
|
InboxOutlined,
|
||||||
|
PayCircleOutlined,
|
||||||
|
CrownOutlined,
|
||||||
|
HeartOutlined,
|
||||||
|
ThunderboltOutlined,
|
||||||
|
ExclamationCircleOutlined,
|
||||||
|
RiseOutlined,
|
||||||
|
StopOutlined,
|
||||||
|
DownOutlined,
|
||||||
|
UpOutlined,
|
||||||
|
} from "@ant-design/icons";
|
||||||
|
import Layout from "@/components/Layout/Layout";
|
||||||
|
import NavCommon from "@/components/NavCommon";
|
||||||
|
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||||
|
import {
|
||||||
|
getTrafficPoolUsers,
|
||||||
|
getTrafficPoolMeta,
|
||||||
|
type TrafficUser,
|
||||||
|
type Device,
|
||||||
|
type WechatAccount,
|
||||||
|
type CustomerService,
|
||||||
|
type TrafficPool,
|
||||||
|
SCENARIOS,
|
||||||
|
RFM_SEGMENTS,
|
||||||
|
} from "./api";
|
||||||
|
import styles from "./index.module.scss";
|
||||||
|
|
||||||
|
const TrafficPoolList: React.FC = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [users, setUsers] = useState<TrafficUser[]>([]);
|
||||||
|
const [filteredUsers, setFilteredUsers] = useState<TrafficUser[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [hasMore, setHasMore] = useState(true);
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
const [searchText, setSearchText] = useState("");
|
||||||
|
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
|
||||||
|
const [showFilters, setShowFilters] = useState(false);
|
||||||
|
const [showScenarios, setShowScenarios] = useState(false);
|
||||||
|
const [showRFM, setShowRFM] = useState(false);
|
||||||
|
const [showDevices, setShowDevices] = useState(false);
|
||||||
|
const [showWechatAccounts, setShowWechatAccounts] = useState(false);
|
||||||
|
const [showCustomerServices, setShowCustomerServices] = useState(false);
|
||||||
|
const [showTrafficPools, setShowTrafficPools] = useState(false);
|
||||||
|
|
||||||
|
// 筛选状态
|
||||||
|
const [filters, setFilters] = useState({
|
||||||
|
status: [] as string[],
|
||||||
|
scenario: [] as string[],
|
||||||
|
rfmSegment: [] as string[],
|
||||||
|
device: [] as string[],
|
||||||
|
wechatAccount: [] as string[],
|
||||||
|
customerService: [] as string[],
|
||||||
|
trafficPool: [] as string[],
|
||||||
|
});
|
||||||
|
|
||||||
|
// Meta数据
|
||||||
|
const [meta, setMeta] = useState<{
|
||||||
|
devices: Device[];
|
||||||
|
wechatAccounts: WechatAccount[];
|
||||||
|
customerServices: CustomerService[];
|
||||||
|
trafficPools: TrafficPool[];
|
||||||
|
}>({
|
||||||
|
devices: [],
|
||||||
|
wechatAccounts: [],
|
||||||
|
customerServices: [],
|
||||||
|
trafficPools: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载数据
|
||||||
|
useEffect(() => {
|
||||||
|
loadData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const [usersData, metaData] = await Promise.all([
|
||||||
|
getTrafficPoolUsers(),
|
||||||
|
getTrafficPoolMeta(),
|
||||||
|
]);
|
||||||
|
setUsers(usersData);
|
||||||
|
setFilteredUsers(usersData);
|
||||||
|
setMeta(metaData);
|
||||||
|
} catch (error) {
|
||||||
|
Toast.show({
|
||||||
|
content: "加载数据失败",
|
||||||
|
position: "center",
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 筛选用户
|
||||||
|
useEffect(() => {
|
||||||
|
let filtered = users;
|
||||||
|
|
||||||
|
// 搜索筛选
|
||||||
|
if (searchText) {
|
||||||
|
filtered = filtered.filter(
|
||||||
|
(user) =>
|
||||||
|
user.nickname.includes(searchText) ||
|
||||||
|
user.wechatId.includes(searchText) ||
|
||||||
|
user.phone.includes(searchText) ||
|
||||||
|
user.note.includes(searchText)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 状态筛选
|
||||||
|
if (filters.status.length > 0) {
|
||||||
|
filtered = filtered.filter((user) =>
|
||||||
|
filters.status.includes(user.status)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 场景筛选
|
||||||
|
if (filters.scenario.length > 0) {
|
||||||
|
filtered = filtered.filter((user) =>
|
||||||
|
filters.scenario.includes(user.scenario)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// RFM分段筛选
|
||||||
|
if (filters.rfmSegment.length > 0) {
|
||||||
|
filtered = filtered.filter((user) =>
|
||||||
|
filters.rfmSegment.includes(user.rfmScore.segment)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设备筛选
|
||||||
|
if (filters.device.length > 0) {
|
||||||
|
filtered = filtered.filter((user) =>
|
||||||
|
filters.device.includes(user.deviceId)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 微信号筛选
|
||||||
|
if (filters.wechatAccount.length > 0) {
|
||||||
|
filtered = filtered.filter((user) =>
|
||||||
|
filters.wechatAccount.includes(user.wechatAccountId)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 客服筛选
|
||||||
|
if (filters.customerService.length > 0) {
|
||||||
|
filtered = filtered.filter((user) =>
|
||||||
|
filters.customerService.includes(user.customerServiceId)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 流量池筛选
|
||||||
|
if (filters.trafficPool.length > 0) {
|
||||||
|
filtered = filtered.filter((user) =>
|
||||||
|
user.poolIds.some((poolId) => filters.trafficPool.includes(poolId))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
setFilteredUsers(filtered);
|
||||||
|
}, [users, searchText, filters]);
|
||||||
|
|
||||||
|
// 加载更多
|
||||||
|
const loadMore = async () => {
|
||||||
|
if (!hasMore) return;
|
||||||
|
setPage((prev) => prev + 1);
|
||||||
|
// 这里可以调用分页API
|
||||||
|
setHasMore(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 全选/取消全选
|
||||||
|
const toggleSelectAll = () => {
|
||||||
|
if (selectedUsers.length === filteredUsers.length) {
|
||||||
|
setSelectedUsers([]);
|
||||||
|
} else {
|
||||||
|
setSelectedUsers(filteredUsers.map((user) => user.id));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选择单个用户
|
||||||
|
const toggleSelectUser = (userId: string) => {
|
||||||
|
setSelectedUsers((prev) =>
|
||||||
|
prev.includes(userId)
|
||||||
|
? prev.filter((id) => id !== userId)
|
||||||
|
: [...prev, userId]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 批量操作
|
||||||
|
const handleBatchOperation = (operation: string) => {
|
||||||
|
if (selectedUsers.length === 0) {
|
||||||
|
Toast.show({
|
||||||
|
content: "请先选择用户",
|
||||||
|
position: "center",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
Toast.show({
|
||||||
|
content: `${operation} ${selectedUsers.length} 个用户`,
|
||||||
|
position: "center",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取状态标签
|
||||||
|
const getStatusTag = (status: string) => {
|
||||||
|
const statusMap = {
|
||||||
|
pending: { text: "待添加", color: "warning" },
|
||||||
|
added: { text: "已添加", color: "success" },
|
||||||
|
failed: { text: "添加失败", color: "danger" },
|
||||||
|
duplicate: { text: "重复用户", color: "default" },
|
||||||
|
};
|
||||||
|
const config = statusMap[status as keyof typeof statusMap];
|
||||||
|
return <Tag color={config.color}>{config.text}</Tag>;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取RFM分段图标
|
||||||
|
const getRFMIcon = (segment: string) => {
|
||||||
|
const segmentConfig = Object.values(RFM_SEGMENTS).find(
|
||||||
|
(s) => s.name === segment
|
||||||
|
);
|
||||||
|
if (!segmentConfig) return null;
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
CrownOutlined: <CrownOutlined />,
|
||||||
|
HeartOutlined: <HeartOutlined />,
|
||||||
|
ThunderboltOutlined: <ThunderboltOutlined />,
|
||||||
|
ExclamationCircleOutlined: <ExclamationCircleOutlined />,
|
||||||
|
UserOutlined: <UserOutlined />,
|
||||||
|
RiseOutlined: <RiseOutlined />,
|
||||||
|
StarFilled: <StarFilled />,
|
||||||
|
StopOutlined: <StopOutlined />,
|
||||||
|
};
|
||||||
|
|
||||||
|
return iconMap[segmentConfig.icon as keyof typeof iconMap] || null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取场景图标
|
||||||
|
const getScenarioIcon = (scenarioId: string) => {
|
||||||
|
const scenario = SCENARIOS.find((s) => s.id === scenarioId);
|
||||||
|
if (!scenario) return null;
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
FileImageOutline: <InboxOutlined />,
|
||||||
|
PhoneOutlined: <PhoneOutlined />,
|
||||||
|
PlayCircleOutlined: <PhoneOutlined />,
|
||||||
|
ReadOutlined: <InboxOutlined />,
|
||||||
|
UsergroupAddOutlined: <UserOutlined />,
|
||||||
|
ApiOutlined: <InboxOutlined />,
|
||||||
|
InboxOutlined: <InboxOutlined />,
|
||||||
|
PayCircleOutlined: <PayCircleOutlined />,
|
||||||
|
};
|
||||||
|
|
||||||
|
return iconMap[scenario.icon as keyof typeof iconMap] || null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 统计信息
|
||||||
|
const stats = useMemo(() => {
|
||||||
|
const total = filteredUsers.length;
|
||||||
|
const pending = filteredUsers.filter((u) => u.status === "pending").length;
|
||||||
|
const added = filteredUsers.filter((u) => u.status === "added").length;
|
||||||
|
const failed = filteredUsers.filter((u) => u.status === "failed").length;
|
||||||
|
const duplicate = filteredUsers.filter(
|
||||||
|
(u) => u.status === "duplicate"
|
||||||
|
).length;
|
||||||
|
|
||||||
|
return { total, pending, added, failed, duplicate };
|
||||||
|
}, [filteredUsers]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className={styles.loadingContainer}>
|
||||||
|
<SpinLoading color="primary" />
|
||||||
|
<p>加载中...</p>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout
|
||||||
|
header={
|
||||||
|
<NavCommon
|
||||||
|
title="流量池"
|
||||||
|
onBack={() => navigate(-1)}
|
||||||
|
right={
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
fill="none"
|
||||||
|
onClick={() => setShowFilters(true)}
|
||||||
|
>
|
||||||
|
<SettingOutlined />
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
footer={<MeauMobile />}
|
||||||
|
>
|
||||||
|
<div className={styles.container}>
|
||||||
|
{/* 统计卡片 */}
|
||||||
|
<Card className={styles.statsCard}>
|
||||||
|
<div className={styles.statsGrid}>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<div className={styles.statNumber}>{stats.total}</div>
|
||||||
|
<div className={styles.statLabel}>总用户</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<div className={styles.statNumber}>{stats.pending}</div>
|
||||||
|
<div className={styles.statLabel}>待添加</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<div className={styles.statNumber}>{stats.added}</div>
|
||||||
|
<div className={styles.statLabel}>已添加</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.statItem}>
|
||||||
|
<div className={styles.statNumber}>{stats.failed}</div>
|
||||||
|
<div className={styles.statLabel}>失败</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* 搜索和操作栏 */}
|
||||||
|
<div className={styles.actionBar}>
|
||||||
|
<SearchBar
|
||||||
|
placeholder="搜索用户昵称、微信号、手机号"
|
||||||
|
value={searchText}
|
||||||
|
onChange={setSearchText}
|
||||||
|
className={styles.searchBar}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
fill="none"
|
||||||
|
onClick={loadData}
|
||||||
|
className={styles.refreshBtn}
|
||||||
|
>
|
||||||
|
<ReloadOutlined />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 批量操作栏 */}
|
||||||
|
{selectedUsers.length > 0 && (
|
||||||
|
<Card className={styles.batchActions}>
|
||||||
|
<div className={styles.batchInfo}>
|
||||||
|
已选择 {selectedUsers.length} 个用户
|
||||||
|
</div>
|
||||||
|
<div className={styles.batchButtons}>
|
||||||
|
<Button size="small" onClick={() => handleBatchOperation("添加")}>
|
||||||
|
批量添加
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
fill="outline"
|
||||||
|
onClick={() => handleBatchOperation("分配客服")}
|
||||||
|
>
|
||||||
|
分配客服
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
fill="outline"
|
||||||
|
onClick={() => handleBatchOperation("打标签")}
|
||||||
|
>
|
||||||
|
打标签
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 用户列表 */}
|
||||||
|
<List className={styles.userList}>
|
||||||
|
<List.Item className={styles.listHeader} onClick={toggleSelectAll}>
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedUsers.length === filteredUsers.length}
|
||||||
|
indeterminate={
|
||||||
|
selectedUsers.length > 0 &&
|
||||||
|
selectedUsers.length < filteredUsers.length
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<span className={styles.headerText}>
|
||||||
|
{selectedUsers.length > 0
|
||||||
|
? `已选择 ${selectedUsers.length} 个用户`
|
||||||
|
: "全选"}
|
||||||
|
</span>
|
||||||
|
</List.Item>
|
||||||
|
|
||||||
|
{filteredUsers.map((user) => (
|
||||||
|
<List.Item
|
||||||
|
key={user.id}
|
||||||
|
className={styles.userItem}
|
||||||
|
onClick={() => navigate(`/traffic-pool/${user.id}`)}
|
||||||
|
>
|
||||||
|
<div className={styles.userInfo}>
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedUsers.includes(user.id)}
|
||||||
|
onChange={() => toggleSelectUser(user.id)}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
/>
|
||||||
|
<Avatar src={user.avatar} className={styles.userAvatar} />
|
||||||
|
<div className={styles.userDetails}>
|
||||||
|
<div className={styles.userName}>
|
||||||
|
{user.nickname}
|
||||||
|
{user.isDuplicate && (
|
||||||
|
<Tag color="warning" size="small">
|
||||||
|
重复
|
||||||
|
</Tag>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={styles.userMeta}>
|
||||||
|
<span>{user.wechatId}</span>
|
||||||
|
<span>{user.phone}</span>
|
||||||
|
<span>{user.region}</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.userTags}>
|
||||||
|
{getStatusTag(user.status)}
|
||||||
|
{user.tags.slice(0, 2).map((tag) => (
|
||||||
|
<Tag key={tag.id} color={tag.color} size="small">
|
||||||
|
{tag.name}
|
||||||
|
</Tag>
|
||||||
|
))}
|
||||||
|
{user.tags.length > 2 && (
|
||||||
|
<Tag color="default" size="small">
|
||||||
|
+{user.tags.length - 2}
|
||||||
|
</Tag>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.userStats}>
|
||||||
|
<div className={styles.statRow}>
|
||||||
|
<span className={styles.statLabel}>RFM:</span>
|
||||||
|
<span className={styles.statValue}>
|
||||||
|
{getRFMIcon(user.rfmScore.segment)}
|
||||||
|
{user.rfmScore.segment}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.statRow}>
|
||||||
|
<span className={styles.statLabel}>消费:</span>
|
||||||
|
<span className={styles.statValue}>
|
||||||
|
¥{user.totalSpent.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.statRow}>
|
||||||
|
<span className={styles.statLabel}>互动:</span>
|
||||||
|
<span className={styles.statValue}>
|
||||||
|
{user.interactionCount}次
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.userActions}>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
fill="none"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
navigate(`/traffic-pool/${user.id}`);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<EyeOutlined />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
fill="none"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
// 发送消息
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MessageOutlined />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
fill="none"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
// 拨打电话
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PhoneOutlined />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</List.Item>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
|
||||||
|
{/* 无限滚动 */}
|
||||||
|
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
|
||||||
|
|
||||||
|
{/* 筛选弹窗 */}
|
||||||
|
<Popup
|
||||||
|
visible={showFilters}
|
||||||
|
onMaskClick={() => setShowFilters(false)}
|
||||||
|
position="right"
|
||||||
|
bodyStyle={{ width: "80vw" }}
|
||||||
|
>
|
||||||
|
<div className={styles.filterPanel}>
|
||||||
|
<div className={styles.filterHeader}>
|
||||||
|
<h3>筛选条件</h3>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
fill="none"
|
||||||
|
onClick={() => setShowFilters(false)}
|
||||||
|
>
|
||||||
|
关闭
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.filterSection}>
|
||||||
|
<h4>用户状态</h4>
|
||||||
|
<Selector
|
||||||
|
options={[
|
||||||
|
{ label: "待添加", value: "pending" },
|
||||||
|
{ label: "已添加", value: "added" },
|
||||||
|
{ label: "添加失败", value: "failed" },
|
||||||
|
{ label: "重复用户", value: "duplicate" },
|
||||||
|
]}
|
||||||
|
value={filters.status}
|
||||||
|
onChange={(value) =>
|
||||||
|
setFilters((prev) => ({ ...prev, status: value }))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.filterSection}>
|
||||||
|
<h4>获客场景</h4>
|
||||||
|
<Selector
|
||||||
|
options={SCENARIOS.map((s) => ({
|
||||||
|
label: s.name,
|
||||||
|
value: s.id,
|
||||||
|
}))}
|
||||||
|
value={filters.scenario}
|
||||||
|
onChange={(value) =>
|
||||||
|
setFilters((prev) => ({ ...prev, scenario: value }))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.filterSection}>
|
||||||
|
<h4>RFM分段</h4>
|
||||||
|
<Selector
|
||||||
|
options={Object.values(RFM_SEGMENTS).map((s) => ({
|
||||||
|
label: s.name,
|
||||||
|
value: s.name,
|
||||||
|
}))}
|
||||||
|
value={filters.rfmSegment}
|
||||||
|
onChange={(value) =>
|
||||||
|
setFilters((prev) => ({ ...prev, rfmSegment: value }))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.filterSection}>
|
||||||
|
<h4>设备</h4>
|
||||||
|
<Selector
|
||||||
|
options={meta.devices.map((d) => ({
|
||||||
|
label: d.name,
|
||||||
|
value: d.id,
|
||||||
|
}))}
|
||||||
|
value={filters.device}
|
||||||
|
onChange={(value) =>
|
||||||
|
setFilters((prev) => ({ ...prev, device: value }))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.filterSection}>
|
||||||
|
<h4>微信号</h4>
|
||||||
|
<Selector
|
||||||
|
options={meta.wechatAccounts.map((w) => ({
|
||||||
|
label: w.nickname,
|
||||||
|
value: w.id,
|
||||||
|
}))}
|
||||||
|
value={filters.wechatAccount}
|
||||||
|
onChange={(value) =>
|
||||||
|
setFilters((prev) => ({ ...prev, wechatAccount: value }))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.filterSection}>
|
||||||
|
<h4>客服</h4>
|
||||||
|
<Selector
|
||||||
|
options={meta.customerServices.map((c) => ({
|
||||||
|
label: c.name,
|
||||||
|
value: c.id,
|
||||||
|
}))}
|
||||||
|
value={filters.customerService}
|
||||||
|
onChange={(value) =>
|
||||||
|
setFilters((prev) => ({ ...prev, customerService: value }))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.filterSection}>
|
||||||
|
<h4>流量池</h4>
|
||||||
|
<Selector
|
||||||
|
options={meta.trafficPools.map((p) => ({
|
||||||
|
label: p.name,
|
||||||
|
value: p.id,
|
||||||
|
}))}
|
||||||
|
value={filters.trafficPool}
|
||||||
|
onChange={(value) =>
|
||||||
|
setFilters((prev) => ({ ...prev, trafficPool: value }))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.filterActions}>
|
||||||
|
<Button
|
||||||
|
block
|
||||||
|
onClick={() => {
|
||||||
|
setFilters({
|
||||||
|
status: [],
|
||||||
|
scenario: [],
|
||||||
|
rfmSegment: [],
|
||||||
|
device: [],
|
||||||
|
wechatAccount: [],
|
||||||
|
customerService: [],
|
||||||
|
trafficPool: [],
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
重置筛选
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Popup>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TrafficPoolList;
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import PlaceholderPage from "@/components/PlaceholderPage";
|
|
||||||
|
|
||||||
const Orders: React.FC = () => {
|
|
||||||
return <PlaceholderPage title="订单管理" />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Orders;
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import PlaceholderPage from "@/components/PlaceholderPage";
|
|
||||||
|
|
||||||
const PlanDetail: React.FC = () => {
|
|
||||||
return <PlaceholderPage title="计划详情" />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PlanDetail;
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import PlaceholderPage from "@/components/PlaceholderPage";
|
|
||||||
|
|
||||||
const Plans: React.FC = () => {
|
|
||||||
return (
|
|
||||||
<PlaceholderPage title="计划管理" showAddButton addButtonText="新建计划" />
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Plans;
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import PlaceholderPage from "@/components/PlaceholderPage";
|
|
||||||
|
|
||||||
const Profile: React.FC = () => {
|
|
||||||
return <PlaceholderPage title="个人中心" showBack={false} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Profile;
|
|
||||||
@@ -1,469 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import { useParams } from "react-router-dom";
|
|
||||||
import { Card, Tabs, Tag, Avatar, Button, List, Grid } from "antd-mobile";
|
|
||||||
import {
|
|
||||||
UserOutline,
|
|
||||||
MobileOutline,
|
|
||||||
TeamOutline,
|
|
||||||
StarFill,
|
|
||||||
MessageOutline,
|
|
||||||
EyeOutline,
|
|
||||||
ClickOutline,
|
|
||||||
PayCircleOutline,
|
|
||||||
} from "antd-mobile-icons";
|
|
||||||
import Layout from "@/components/Layout/Layout";
|
|
||||||
import NavCommon from "@/components/NavCommon";
|
|
||||||
import styles from "./index.module.scss";
|
|
||||||
|
|
||||||
// 复用类型定义和Mock数据生成函数
|
|
||||||
import {
|
|
||||||
Device,
|
|
||||||
WechatAccount,
|
|
||||||
CustomerService,
|
|
||||||
TrafficPool,
|
|
||||||
RFMScore,
|
|
||||||
UserTag,
|
|
||||||
UserInteraction,
|
|
||||||
TrafficUser,
|
|
||||||
RFM_SEGMENTS,
|
|
||||||
generateMockDevices,
|
|
||||||
generateMockWechatAccounts,
|
|
||||||
generateMockCustomerServices,
|
|
||||||
generateMockTrafficPools,
|
|
||||||
generateRFMScore,
|
|
||||||
generateMockInteractions,
|
|
||||||
generateUserTags,
|
|
||||||
} from "../list";
|
|
||||||
|
|
||||||
const mockDevices = generateMockDevices();
|
|
||||||
const mockWechatAccounts = generateMockWechatAccounts(mockDevices);
|
|
||||||
const mockCustomerServices = generateMockCustomerServices();
|
|
||||||
const mockTrafficPools = generateMockTrafficPools();
|
|
||||||
|
|
||||||
// 生成Mock用户数据
|
|
||||||
const generateMockUsers = (
|
|
||||||
devices: Device[],
|
|
||||||
wechatAccounts: WechatAccount[],
|
|
||||||
customerServices: CustomerService[],
|
|
||||||
trafficPools: TrafficPool[]
|
|
||||||
): TrafficUser[] => {
|
|
||||||
return Array.from({ length: 500 }, (_, i) => {
|
|
||||||
const rfmScore = generateRFMScore();
|
|
||||||
const tags = generateUserTags(rfmScore);
|
|
||||||
const interactions = generateMockInteractions();
|
|
||||||
|
|
||||||
const user: TrafficUser = {
|
|
||||||
id: `user-${i + 1}`,
|
|
||||||
avatar: `/placeholder.svg?height=40&width=40&query=user${Math.floor(Math.random() * 100)}`,
|
|
||||||
nickname: `用户${i + 1}`,
|
|
||||||
wechatId: `wx_${Math.random().toString(36).substr(2, 8)}`,
|
|
||||||
phone: `1${Math.floor(Math.random() * 9) + 1}${Math.random().toString().substr(2, 9)}`,
|
|
||||||
region: ["北京", "上海", "广州", "深圳", "杭州", "成都"][
|
|
||||||
Math.floor(Math.random() * 6)
|
|
||||||
],
|
|
||||||
note: Math.random() > 0.7 ? `这是用户${i + 1}的备注信息` : "",
|
|
||||||
status: ["pending", "added", "failed", "duplicate"][
|
|
||||||
Math.floor(Math.random() * 4)
|
|
||||||
] as any,
|
|
||||||
addTime: new Date(
|
|
||||||
Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000
|
|
||||||
).toISOString(),
|
|
||||||
source: "海报获客",
|
|
||||||
scenario: "poster",
|
|
||||||
deviceId: devices[Math.floor(Math.random() * devices.length)].id,
|
|
||||||
wechatAccountId:
|
|
||||||
wechatAccounts[Math.floor(Math.random() * wechatAccounts.length)].id,
|
|
||||||
customerServiceId:
|
|
||||||
customerServices[Math.floor(Math.random() * customerServices.length)]
|
|
||||||
.id,
|
|
||||||
poolIds:
|
|
||||||
Math.random() > 0.5
|
|
||||||
? [trafficPools[Math.floor(Math.random() * trafficPools.length)].id]
|
|
||||||
: [],
|
|
||||||
tags,
|
|
||||||
rfmScore,
|
|
||||||
lastInteraction: new Date(
|
|
||||||
Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000
|
|
||||||
).toISOString(),
|
|
||||||
totalSpent: Math.floor(Math.random() * 10000),
|
|
||||||
interactionCount: Math.floor(Math.random() * 50) + 1,
|
|
||||||
conversionRate: Math.floor(Math.random() * 100),
|
|
||||||
isDuplicate: Math.random() > 0.9,
|
|
||||||
mergedAccounts: [],
|
|
||||||
addStatus: ["not_added", "adding", "added", "failed"][
|
|
||||||
Math.floor(Math.random() * 4)
|
|
||||||
] as any,
|
|
||||||
interactions,
|
|
||||||
};
|
|
||||||
|
|
||||||
return user;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const users = generateMockUsers(
|
|
||||||
mockDevices,
|
|
||||||
mockWechatAccounts,
|
|
||||||
mockCustomerServices,
|
|
||||||
mockTrafficPools
|
|
||||||
);
|
|
||||||
|
|
||||||
const TrafficPoolDetail: React.FC = () => {
|
|
||||||
const { id } = useParams();
|
|
||||||
const [activeTab, setActiveTab] = useState("base");
|
|
||||||
|
|
||||||
const user = users.find((u: TrafficUser) => u.id === id);
|
|
||||||
|
|
||||||
if (!user) {
|
|
||||||
return (
|
|
||||||
<Layout>
|
|
||||||
<div className={styles.notFound}>
|
|
||||||
<div className={styles.notFoundText}>未找到该用户</div>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const wechatAccount = mockWechatAccounts.find(
|
|
||||||
(acc) => acc.id === user.wechatAccountId
|
|
||||||
);
|
|
||||||
const customerService = mockCustomerServices.find(
|
|
||||||
(cs) => cs.id === user.customerServiceId
|
|
||||||
);
|
|
||||||
const device = mockDevices.find((device) => device.id === user.deviceId);
|
|
||||||
const rfmSegment = Object.values(RFM_SEGMENTS).find(
|
|
||||||
(seg: any) => seg.name === user.rfmScore.segment
|
|
||||||
);
|
|
||||||
|
|
||||||
// 辅助函数
|
|
||||||
const getPoolNames = (poolIds: string[]) => {
|
|
||||||
return poolIds
|
|
||||||
.map((id) => mockTrafficPools.find((pool) => pool.id === id)?.name)
|
|
||||||
.filter(Boolean)
|
|
||||||
.join(", ");
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatDate = (dateString: string) => {
|
|
||||||
if (!dateString) return "--";
|
|
||||||
try {
|
|
||||||
const date = new Date(dateString);
|
|
||||||
return date.toLocaleDateString("zh-CN");
|
|
||||||
} catch (error) {
|
|
||||||
return dateString;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getInteractionIcon = (type: string) => {
|
|
||||||
switch (type) {
|
|
||||||
case "click":
|
|
||||||
return <ClickOutline className={styles.interactionIcon} />;
|
|
||||||
case "message":
|
|
||||||
return <MessageOutline className={styles.interactionIcon} />;
|
|
||||||
case "purchase":
|
|
||||||
return <PayCircleOutline className={styles.interactionIcon} />;
|
|
||||||
case "view":
|
|
||||||
return <EyeOutline className={styles.interactionIcon} />;
|
|
||||||
default:
|
|
||||||
return <MessageOutline className={styles.interactionIcon} />;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getInteractionTypeText = (type: string) => {
|
|
||||||
switch (type) {
|
|
||||||
case "click":
|
|
||||||
return "点击行为";
|
|
||||||
case "message":
|
|
||||||
return "消息互动";
|
|
||||||
case "purchase":
|
|
||||||
return "购买行为";
|
|
||||||
case "view":
|
|
||||||
return "页面浏览";
|
|
||||||
default:
|
|
||||||
return type;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStatusText = (status: string) => {
|
|
||||||
switch (status) {
|
|
||||||
case "added":
|
|
||||||
return "已添加";
|
|
||||||
case "pending":
|
|
||||||
return "未添加";
|
|
||||||
case "failed":
|
|
||||||
return "添加失败";
|
|
||||||
case "duplicate":
|
|
||||||
return "重复";
|
|
||||||
default:
|
|
||||||
return status;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStatusColor = (status: string) => {
|
|
||||||
switch (status) {
|
|
||||||
case "added":
|
|
||||||
return "success";
|
|
||||||
case "pending":
|
|
||||||
return "default";
|
|
||||||
case "failed":
|
|
||||||
return "danger";
|
|
||||||
case "duplicate":
|
|
||||||
return "warning";
|
|
||||||
default:
|
|
||||||
return "default";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Layout header={<NavCommon title="用户详情" />}>
|
|
||||||
<div className={styles.container}>
|
|
||||||
{/* 用户基本信息 */}
|
|
||||||
<Card className={styles.userCard}>
|
|
||||||
<div className={styles.userHeader}>
|
|
||||||
<Avatar src={user.avatar} className={styles.userAvatar}>
|
|
||||||
{user.nickname?.slice(0, 2) || "用户"}
|
|
||||||
</Avatar>
|
|
||||||
<div className={styles.userInfo}>
|
|
||||||
<div className={styles.userName}>
|
|
||||||
{user.nickname}
|
|
||||||
{user.rfmScore.priority === "high" && (
|
|
||||||
<StarFill className={styles.starIcon} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className={styles.userWechatId}>{user.wechatId}</div>
|
|
||||||
<div className={styles.userTags}>
|
|
||||||
{user.poolIds.length > 0 && (
|
|
||||||
<Tag color="primary" size="small">
|
|
||||||
{getPoolNames(user.poolIds)}
|
|
||||||
</Tag>
|
|
||||||
)}
|
|
||||||
{user.status === "added" && (
|
|
||||||
<Tag color="success" size="small">
|
|
||||||
优先添加
|
|
||||||
</Tag>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* RFM标签 */}
|
|
||||||
<div className={styles.rfmTags}>
|
|
||||||
{rfmSegment && (
|
|
||||||
<Tag color={rfmSegment.color} size="small">
|
|
||||||
{rfmSegment.name}
|
|
||||||
</Tag>
|
|
||||||
)}
|
|
||||||
{user.status === "added" && (
|
|
||||||
<Tag color="warning" size="small">
|
|
||||||
优先添加
|
|
||||||
</Tag>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Tab导航 */}
|
|
||||||
<Tabs
|
|
||||||
activeKey={activeTab}
|
|
||||||
onChange={setActiveTab}
|
|
||||||
className={styles.tabs}
|
|
||||||
>
|
|
||||||
<Tabs.Tab title="基本信息" key="base">
|
|
||||||
<div className={styles.tabContent}>
|
|
||||||
{/* 关键信息卡片 */}
|
|
||||||
<Card className={styles.infoCard}>
|
|
||||||
<div className={styles.cardTitle}>关键信息</div>
|
|
||||||
<Grid columns={2} gap={8}>
|
|
||||||
<div className={styles.infoItem}>
|
|
||||||
<div className={styles.infoLabel}>设备</div>
|
|
||||||
<div className={styles.infoValue}>
|
|
||||||
{device?.name || "--"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.infoItem}>
|
|
||||||
<div className={styles.infoLabel}>微信号</div>
|
|
||||||
<div className={styles.infoValue}>
|
|
||||||
{wechatAccount?.nickname || "--"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.infoItem}>
|
|
||||||
<div className={styles.infoLabel}>客服</div>
|
|
||||||
<div className={styles.infoValue}>
|
|
||||||
{customerService?.name || "--"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.infoItem}>
|
|
||||||
<div className={styles.infoLabel}>添加时间</div>
|
|
||||||
<div className={styles.infoValue}>
|
|
||||||
{formatDate(user.addTime)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.infoItem}>
|
|
||||||
<div className={styles.infoLabel}>最近互动</div>
|
|
||||||
<div className={styles.infoValue}>
|
|
||||||
{formatDate(user.lastInteraction)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Grid>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* RFM评分卡片 */}
|
|
||||||
<Card className={styles.rfmCard}>
|
|
||||||
<div className={styles.cardTitle}>RFM评分</div>
|
|
||||||
<div className={styles.rfmGrid}>
|
|
||||||
<div className={styles.rfmItem}>
|
|
||||||
<div className={styles.rfmValue}>
|
|
||||||
{user.rfmScore.recency}
|
|
||||||
</div>
|
|
||||||
<div className={styles.rfmLabel}>最近性(R)</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.rfmItem}>
|
|
||||||
<div className={styles.rfmValue}>
|
|
||||||
{user.rfmScore.frequency}
|
|
||||||
</div>
|
|
||||||
<div className={styles.rfmLabel}>频率(F)</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.rfmItem}>
|
|
||||||
<div className={styles.rfmValue}>
|
|
||||||
{user.rfmScore.monetary}
|
|
||||||
</div>
|
|
||||||
<div className={styles.rfmLabel}>金额(M)</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* 流量池按钮 */}
|
|
||||||
<div className={styles.poolButtons}>
|
|
||||||
<Button fill="outline" size="small">
|
|
||||||
潜在客户池
|
|
||||||
</Button>
|
|
||||||
<Button fill="outline" size="small">
|
|
||||||
流失预警池
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 统计数据卡片 */}
|
|
||||||
<Card className={styles.statsCard}>
|
|
||||||
<Grid columns={2} gap={16}>
|
|
||||||
<div className={styles.statItem}>
|
|
||||||
<div className={styles.statValue}>¥{user.totalSpent}</div>
|
|
||||||
<div className={styles.statLabel}>总消费</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.statItem}>
|
|
||||||
<div className={styles.statValue}>
|
|
||||||
{user.interactionCount}
|
|
||||||
</div>
|
|
||||||
<div className={styles.statLabel}>互动次数</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.statItem}>
|
|
||||||
<div className={styles.statValue}>
|
|
||||||
{user.conversionRate}%
|
|
||||||
</div>
|
|
||||||
<div className={styles.statLabel}>转化率</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.statItem}>
|
|
||||||
<div className={styles.statValue}>
|
|
||||||
{getStatusText(user.status)}
|
|
||||||
</div>
|
|
||||||
<div className={styles.statLabel}>添加状态</div>
|
|
||||||
</div>
|
|
||||||
</Grid>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</Tabs.Tab>
|
|
||||||
|
|
||||||
<Tabs.Tab title="用户旅程" key="journey">
|
|
||||||
<div className={styles.tabContent}>
|
|
||||||
<Card className={styles.interactionCard}>
|
|
||||||
<div className={styles.cardTitle}>互动记录</div>
|
|
||||||
{user.interactions && user.interactions.length > 0 ? (
|
|
||||||
<List className={styles.interactionList}>
|
|
||||||
{user.interactions.slice(0, 4).map((interaction) => (
|
|
||||||
<List.Item
|
|
||||||
key={interaction.id}
|
|
||||||
className={styles.interactionItem}
|
|
||||||
prefix={getInteractionIcon(interaction.type)}
|
|
||||||
>
|
|
||||||
<div className={styles.interactionContent}>
|
|
||||||
<div className={styles.interactionTitle}>
|
|
||||||
{getInteractionTypeText(interaction.type)}
|
|
||||||
</div>
|
|
||||||
<div className={styles.interactionDesc}>
|
|
||||||
{interaction.content}
|
|
||||||
{interaction.type === "purchase" &&
|
|
||||||
interaction.value && (
|
|
||||||
<span className={styles.interactionValue}>
|
|
||||||
¥{interaction.value}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className={styles.interactionTime}>
|
|
||||||
{formatDate(interaction.timestamp)}{" "}
|
|
||||||
{new Date(interaction.timestamp).toLocaleTimeString(
|
|
||||||
"zh-CN",
|
|
||||||
{
|
|
||||||
hour: "2-digit",
|
|
||||||
minute: "2-digit",
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</List.Item>
|
|
||||||
))}
|
|
||||||
</List>
|
|
||||||
) : (
|
|
||||||
<div className={styles.emptyState}>暂无互动记录</div>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</Tabs.Tab>
|
|
||||||
|
|
||||||
<Tabs.Tab title="用户标签" key="tags">
|
|
||||||
<div className={styles.tabContent}>
|
|
||||||
<Card className={styles.tagsCard}>
|
|
||||||
<div className={styles.cardTitle}>用户标签</div>
|
|
||||||
<div className={styles.tagsList}>
|
|
||||||
{user.tags.map((tag) => (
|
|
||||||
<Tag key={tag.id} color={tag.color} size="small">
|
|
||||||
{tag.name}
|
|
||||||
</Tag>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.valueTags}>
|
|
||||||
<div className={styles.valueTitle}>价值标签</div>
|
|
||||||
<div className={styles.valueTagItem}>
|
|
||||||
<Tag color="primary" size="small">
|
|
||||||
重要保持客户
|
|
||||||
</Tag>
|
|
||||||
<span className={styles.rfmScore}>
|
|
||||||
RFM总分：
|
|
||||||
{user.rfmScore.recency +
|
|
||||||
user.rfmScore.frequency +
|
|
||||||
user.rfmScore.monetary}
|
|
||||||
/15
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className={styles.valueTagItem}>
|
|
||||||
<span className={styles.valueLabel}>价值等级：</span>
|
|
||||||
<Tag color="danger" size="small">
|
|
||||||
高价值
|
|
||||||
</Tag>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
block
|
|
||||||
fill="outline"
|
|
||||||
size="large"
|
|
||||||
className={styles.addTagButton}
|
|
||||||
>
|
|
||||||
➕ 添加新标签
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Tabs.Tab>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TrafficPoolDetail;
|
|
||||||
@@ -1,943 +0,0 @@
|
|||||||
import React, { useState, useEffect, useCallback } from "react";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
List,
|
|
||||||
Button,
|
|
||||||
SearchBar,
|
|
||||||
Checkbox,
|
|
||||||
Tag,
|
|
||||||
Avatar,
|
|
||||||
Toast,
|
|
||||||
SpinLoading,
|
|
||||||
Popup,
|
|
||||||
Selector,
|
|
||||||
InfiniteScroll,
|
|
||||||
} from "antd-mobile";
|
|
||||||
import {
|
|
||||||
SearchOutline,
|
|
||||||
FilterOutline,
|
|
||||||
RefreshOutline,
|
|
||||||
StarOutline,
|
|
||||||
StarFill,
|
|
||||||
UserOutline,
|
|
||||||
MobileOutline,
|
|
||||||
TeamOutline,
|
|
||||||
BarChartOutline,
|
|
||||||
ChevronDownOutline,
|
|
||||||
ChevronUpOutline,
|
|
||||||
} from "antd-mobile-icons";
|
|
||||||
import Layout from "@/components/Layout/Layout";
|
|
||||||
import NavCommon from "@/components/NavCommon";
|
|
||||||
import styles from "./index.module.scss";
|
|
||||||
|
|
||||||
// 类型定义
|
|
||||||
export interface Device {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
status: "online" | "offline" | "busy";
|
|
||||||
battery: number;
|
|
||||||
location: string;
|
|
||||||
wechatAccounts: number;
|
|
||||||
dailyAddLimit: number;
|
|
||||||
todayAdded: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface WechatAccount {
|
|
||||||
id: string;
|
|
||||||
nickname: string;
|
|
||||||
wechatId: string;
|
|
||||||
avatar: string;
|
|
||||||
deviceId: string;
|
|
||||||
status: "normal" | "limited" | "blocked";
|
|
||||||
friendCount: number;
|
|
||||||
dailyAddLimit: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface CustomerService {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
avatar: string;
|
|
||||||
status: "online" | "offline" | "busy";
|
|
||||||
assignedUsers: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TrafficPool {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
description: string;
|
|
||||||
userCount: number;
|
|
||||||
tags: string[];
|
|
||||||
createdAt: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RFMScore {
|
|
||||||
recency: number;
|
|
||||||
frequency: number;
|
|
||||||
monetary: number;
|
|
||||||
total: number;
|
|
||||||
segment: string;
|
|
||||||
priority: "high" | "medium" | "low";
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UserTag {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
color: string;
|
|
||||||
source: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UserInteraction {
|
|
||||||
id: string;
|
|
||||||
type: "message" | "purchase" | "view" | "click";
|
|
||||||
content: string;
|
|
||||||
timestamp: string;
|
|
||||||
value?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TrafficUser {
|
|
||||||
id: string;
|
|
||||||
avatar: string;
|
|
||||||
nickname: string;
|
|
||||||
wechatId: string;
|
|
||||||
phone: string;
|
|
||||||
region: string;
|
|
||||||
note: string;
|
|
||||||
status: "pending" | "added" | "failed" | "duplicate";
|
|
||||||
addTime: string;
|
|
||||||
source: string;
|
|
||||||
scenario: string;
|
|
||||||
deviceId: string;
|
|
||||||
wechatAccountId: string;
|
|
||||||
customerServiceId: string;
|
|
||||||
poolIds: string[];
|
|
||||||
tags: UserTag[];
|
|
||||||
rfmScore: RFMScore;
|
|
||||||
lastInteraction: string;
|
|
||||||
totalSpent: number;
|
|
||||||
interactionCount: number;
|
|
||||||
conversionRate: number;
|
|
||||||
isDuplicate: boolean;
|
|
||||||
mergedAccounts: string[];
|
|
||||||
addStatus: "not_added" | "adding" | "added" | "failed";
|
|
||||||
interactions: UserInteraction[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 常量定义
|
|
||||||
export const SCENARIOS = [
|
|
||||||
{ id: "poster", name: "海报获客", icon: "🎨" },
|
|
||||||
{ id: "phone", name: "电话获客", icon: "📞" },
|
|
||||||
{ id: "douyin", name: "抖音获客", icon: "🎵" },
|
|
||||||
{ id: "xiaohongshu", name: "小红书获客", icon: "📖" },
|
|
||||||
{ id: "weixinqun", name: "微信群获客", icon: "👥" },
|
|
||||||
{ id: "api", name: "API获客", icon: "🔗" },
|
|
||||||
{ id: "order", name: "订单获客", icon: "📦" },
|
|
||||||
{ id: "payment", name: "付款码获客", icon: "💳" },
|
|
||||||
];
|
|
||||||
|
|
||||||
export const RFM_SEGMENTS = {
|
|
||||||
"555": {
|
|
||||||
name: "重要价值客户",
|
|
||||||
color: "red",
|
|
||||||
icon: "👑",
|
|
||||||
priority: "high",
|
|
||||||
},
|
|
||||||
"554": {
|
|
||||||
name: "重要保持客户",
|
|
||||||
color: "purple",
|
|
||||||
icon: "💎",
|
|
||||||
priority: "high",
|
|
||||||
},
|
|
||||||
"544": {
|
|
||||||
name: "重要发展客户",
|
|
||||||
color: "blue",
|
|
||||||
icon: "🚀",
|
|
||||||
priority: "high",
|
|
||||||
},
|
|
||||||
"455": {
|
|
||||||
name: "重要挽留客户",
|
|
||||||
color: "orange",
|
|
||||||
icon: "⚠️",
|
|
||||||
priority: "medium",
|
|
||||||
},
|
|
||||||
"444": {
|
|
||||||
name: "一般价值客户",
|
|
||||||
color: "green",
|
|
||||||
icon: "👤",
|
|
||||||
priority: "medium",
|
|
||||||
},
|
|
||||||
"333": {
|
|
||||||
name: "一般保持客户",
|
|
||||||
color: "yellow",
|
|
||||||
icon: "📈",
|
|
||||||
priority: "medium",
|
|
||||||
},
|
|
||||||
"222": {
|
|
||||||
name: "新用户",
|
|
||||||
color: "cyan",
|
|
||||||
icon: "🌟",
|
|
||||||
priority: "low",
|
|
||||||
},
|
|
||||||
"111": {
|
|
||||||
name: "流失预警客户",
|
|
||||||
color: "gray",
|
|
||||||
icon: "😴",
|
|
||||||
priority: "low",
|
|
||||||
},
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
// Mock数据生成函数
|
|
||||||
const generateMockDevices = (): Device[] => {
|
|
||||||
return Array.from({ length: 8 }, (_, i) => ({
|
|
||||||
id: `device-${i + 1}`,
|
|
||||||
name: `设备${i + 1}`,
|
|
||||||
status: ["online", "offline", "busy"][Math.floor(Math.random() * 3)] as
|
|
||||||
| "online"
|
|
||||||
| "offline"
|
|
||||||
| "busy",
|
|
||||||
battery: Math.floor(Math.random() * 100),
|
|
||||||
location: ["北京", "上海", "广州", "深圳"][Math.floor(Math.random() * 4)],
|
|
||||||
wechatAccounts: Math.floor(Math.random() * 5) + 1,
|
|
||||||
dailyAddLimit: Math.random() > 0.5 ? 20 : 10,
|
|
||||||
todayAdded: Math.floor(Math.random() * 15),
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const generateMockWechatAccounts = (devices: Device[]): WechatAccount[] => {
|
|
||||||
const accounts: WechatAccount[] = [];
|
|
||||||
devices.forEach((device) => {
|
|
||||||
for (let i = 0; i < device.wechatAccounts; i++) {
|
|
||||||
accounts.push({
|
|
||||||
id: `wx-${device.id}-${i + 1}`,
|
|
||||||
nickname: `微信${device.id.split("-")[1]}-${i + 1}`,
|
|
||||||
wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
|
|
||||||
avatar: `/placeholder.svg?height=40&width=40&query=wx${Math.floor(Math.random() * 10)}`,
|
|
||||||
deviceId: device.id,
|
|
||||||
status: ["normal", "limited", "blocked"][
|
|
||||||
Math.floor(Math.random() * 3)
|
|
||||||
] as "normal" | "limited" | "blocked",
|
|
||||||
friendCount: Math.floor(Math.random() * 4000) + 1000,
|
|
||||||
dailyAddLimit: Math.random() > 0.5 ? 20 : 10,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return accounts;
|
|
||||||
};
|
|
||||||
|
|
||||||
const generateMockCustomerServices = (): CustomerService[] => {
|
|
||||||
return Array.from({ length: 5 }, (_, i) => ({
|
|
||||||
id: `cs-${i + 1}`,
|
|
||||||
name: `客服${i + 1}`,
|
|
||||||
avatar: `/placeholder.svg?height=40&width=40&query=cs${i}`,
|
|
||||||
status: ["online", "offline", "busy"][Math.floor(Math.random() * 3)] as
|
|
||||||
| "online"
|
|
||||||
| "offline"
|
|
||||||
| "busy",
|
|
||||||
assignedUsers: Math.floor(Math.random() * 100) + 50,
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const generateMockTrafficPools = (): TrafficPool[] => {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
id: "pool-1",
|
|
||||||
name: "高价值客户池",
|
|
||||||
description: "包含所有高价值客户，优先添加",
|
|
||||||
userCount: 156,
|
|
||||||
tags: ["高价值", "优先添加", "重要客户"],
|
|
||||||
createdAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "pool-2",
|
|
||||||
name: "潜在客户池",
|
|
||||||
description: "有潜力的用户，需要进一步培养",
|
|
||||||
userCount: 289,
|
|
||||||
tags: ["潜在客户", "需培养"],
|
|
||||||
createdAt: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "pool-3",
|
|
||||||
name: "新用户池",
|
|
||||||
description: "新注册或新添加的用户",
|
|
||||||
userCount: 432,
|
|
||||||
tags: ["新用户", "待分类"],
|
|
||||||
createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
};
|
|
||||||
|
|
||||||
const generateRFMScore = (): RFMScore => {
|
|
||||||
const recency = Math.floor(Math.random() * 5) + 1;
|
|
||||||
const frequency = Math.floor(Math.random() * 5) + 1;
|
|
||||||
const monetary = Math.floor(Math.random() * 5) + 1;
|
|
||||||
const total = recency + frequency + monetary;
|
|
||||||
|
|
||||||
let segment: string;
|
|
||||||
let priority: "high" | "medium" | "low";
|
|
||||||
|
|
||||||
if (total >= 12) {
|
|
||||||
segment = Object.values(RFM_SEGMENTS)[Math.floor(Math.random() * 3)].name;
|
|
||||||
priority = "high";
|
|
||||||
} else if (total >= 8) {
|
|
||||||
segment =
|
|
||||||
Object.values(RFM_SEGMENTS)[3 + Math.floor(Math.random() * 3)].name;
|
|
||||||
priority = "medium";
|
|
||||||
} else {
|
|
||||||
segment =
|
|
||||||
Object.values(RFM_SEGMENTS)[6 + Math.floor(Math.random() * 2)].name;
|
|
||||||
priority = "low";
|
|
||||||
}
|
|
||||||
|
|
||||||
return { recency, frequency, monetary, total, segment, priority };
|
|
||||||
};
|
|
||||||
|
|
||||||
const generateMockInteractions = (): UserInteraction[] => {
|
|
||||||
const types = ["message", "purchase", "view", "click"] as const;
|
|
||||||
return Array.from({ length: Math.floor(Math.random() * 10) + 1 }, (_, i) => {
|
|
||||||
const type = types[Math.floor(Math.random() * types.length)];
|
|
||||||
return {
|
|
||||||
id: `interaction-${i + 1}`,
|
|
||||||
type,
|
|
||||||
content:
|
|
||||||
type === "message"
|
|
||||||
? "用户发送了消息"
|
|
||||||
: type === "purchase"
|
|
||||||
? "用户购买了产品"
|
|
||||||
: type === "view"
|
|
||||||
? "用户查看了产品"
|
|
||||||
: "用户点击了链接",
|
|
||||||
timestamp: new Date(
|
|
||||||
Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000
|
|
||||||
).toISOString(),
|
|
||||||
value:
|
|
||||||
type === "purchase"
|
|
||||||
? Math.floor(Math.random() * 1000) + 100
|
|
||||||
: undefined,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const generateUserTags = (rfmScore: RFMScore): UserTag[] => {
|
|
||||||
const allTags = [
|
|
||||||
{ id: "tag-1", name: "活跃用户", color: "success", source: "system" },
|
|
||||||
{ id: "tag-2", name: "高消费", color: "danger", source: "system" },
|
|
||||||
{ id: "tag-3", name: "忠实客户", color: "primary", source: "system" },
|
|
||||||
{ id: "tag-4", name: "新用户", color: "warning", source: "system" },
|
|
||||||
{ id: "tag-5", name: "VIP客户", color: "purple", source: "manual" },
|
|
||||||
{ id: "tag-6", name: "潜在客户", color: "default", source: "system" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const tags: UserTag[] = [];
|
|
||||||
|
|
||||||
if (rfmScore.priority === "high") {
|
|
||||||
tags.push(allTags[1], allTags[2]);
|
|
||||||
if (Math.random() > 0.5) tags.push(allTags[4]);
|
|
||||||
} else if (rfmScore.priority === "medium") {
|
|
||||||
tags.push(allTags[0]);
|
|
||||||
if (Math.random() > 0.5) tags.push(allTags[5]);
|
|
||||||
} else {
|
|
||||||
tags.push(allTags[3]);
|
|
||||||
if (Math.random() > 0.3) tags.push(allTags[5]);
|
|
||||||
}
|
|
||||||
|
|
||||||
return tags;
|
|
||||||
};
|
|
||||||
|
|
||||||
const mockDevices = generateMockDevices();
|
|
||||||
const mockWechatAccounts = generateMockWechatAccounts(mockDevices);
|
|
||||||
const mockCustomerServices = generateMockCustomerServices();
|
|
||||||
const mockTrafficPools = generateMockTrafficPools();
|
|
||||||
|
|
||||||
const generateMockUsers = (
|
|
||||||
devices: Device[],
|
|
||||||
wechatAccounts: WechatAccount[],
|
|
||||||
customerServices: CustomerService[],
|
|
||||||
trafficPools: TrafficPool[]
|
|
||||||
): TrafficUser[] => {
|
|
||||||
return Array.from({ length: 500 }, (_, i) => {
|
|
||||||
const rfmScore = generateRFMScore();
|
|
||||||
const tags = generateUserTags(rfmScore);
|
|
||||||
const interactions = generateMockInteractions();
|
|
||||||
|
|
||||||
const user: TrafficUser = {
|
|
||||||
id: `user-${i + 1}`,
|
|
||||||
avatar: `/placeholder.svg?height=40&width=40&query=user${Math.floor(Math.random() * 100)}`,
|
|
||||||
nickname: `用户${i + 1}`,
|
|
||||||
wechatId: `wx_${Math.random().toString(36).substr(2, 8)}`,
|
|
||||||
phone: `1${Math.floor(Math.random() * 9) + 1}${Math.random().toString().substr(2, 9)}`,
|
|
||||||
region: ["北京", "上海", "广州", "深圳", "杭州", "成都"][
|
|
||||||
Math.floor(Math.random() * 6)
|
|
||||||
],
|
|
||||||
note: Math.random() > 0.7 ? `这是用户${i + 1}的备注信息` : "",
|
|
||||||
status: ["pending", "added", "failed", "duplicate"][
|
|
||||||
Math.floor(Math.random() * 4)
|
|
||||||
] as any,
|
|
||||||
addTime: new Date(
|
|
||||||
Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000
|
|
||||||
).toISOString(),
|
|
||||||
source: SCENARIOS[Math.floor(Math.random() * SCENARIOS.length)].name,
|
|
||||||
scenario: SCENARIOS[Math.floor(Math.random() * SCENARIOS.length)].id,
|
|
||||||
deviceId: devices[Math.floor(Math.random() * devices.length)].id,
|
|
||||||
wechatAccountId:
|
|
||||||
wechatAccounts[Math.floor(Math.random() * wechatAccounts.length)].id,
|
|
||||||
customerServiceId:
|
|
||||||
customerServices[Math.floor(Math.random() * customerServices.length)]
|
|
||||||
.id,
|
|
||||||
poolIds:
|
|
||||||
Math.random() > 0.5
|
|
||||||
? [trafficPools[Math.floor(Math.random() * trafficPools.length)].id]
|
|
||||||
: [],
|
|
||||||
tags,
|
|
||||||
rfmScore,
|
|
||||||
lastInteraction: new Date(
|
|
||||||
Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000
|
|
||||||
).toISOString(),
|
|
||||||
totalSpent: Math.floor(Math.random() * 10000),
|
|
||||||
interactionCount: Math.floor(Math.random() * 50) + 1,
|
|
||||||
conversionRate: Math.floor(Math.random() * 100),
|
|
||||||
isDuplicate: Math.random() > 0.9,
|
|
||||||
mergedAccounts: [],
|
|
||||||
addStatus: ["not_added", "adding", "added", "failed"][
|
|
||||||
Math.floor(Math.random() * 4)
|
|
||||||
] as any,
|
|
||||||
interactions,
|
|
||||||
};
|
|
||||||
|
|
||||||
return user;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const TrafficPoolList: React.FC = () => {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
// 基础数据状态
|
|
||||||
const [users, setUsers] = useState<TrafficUser[]>([]);
|
|
||||||
const [devices] = useState<Device[]>(mockDevices);
|
|
||||||
const [wechatAccounts] = useState<WechatAccount[]>(mockWechatAccounts);
|
|
||||||
const [customerServices] = useState<CustomerService[]>(mockCustomerServices);
|
|
||||||
const [trafficPools] = useState<TrafficPool[]>(mockTrafficPools);
|
|
||||||
|
|
||||||
// UI状态
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
|
|
||||||
const [showFilters, setShowFilters] = useState(false);
|
|
||||||
const [showAnalytics, setShowAnalytics] = useState(false);
|
|
||||||
const [hasMore, setHasMore] = useState(true);
|
|
||||||
const [page, setPage] = useState(1);
|
|
||||||
|
|
||||||
// 筛选状态
|
|
||||||
const [deviceFilter, setDeviceFilter] = useState("all");
|
|
||||||
const [poolFilter, setPoolFilter] = useState("all");
|
|
||||||
const [valuationFilter, setValuationFilter] = useState("all");
|
|
||||||
const [statusFilter, setStatusFilter] = useState("all");
|
|
||||||
const [searchQuery, setSearchQuery] = useState("");
|
|
||||||
|
|
||||||
// 初始化数据
|
|
||||||
useEffect(() => {
|
|
||||||
const mockUsers = generateMockUsers(
|
|
||||||
devices,
|
|
||||||
wechatAccounts,
|
|
||||||
customerServices,
|
|
||||||
trafficPools
|
|
||||||
);
|
|
||||||
setUsers(mockUsers);
|
|
||||||
}, [devices, wechatAccounts, customerServices, trafficPools]);
|
|
||||||
|
|
||||||
// 计算统计数据
|
|
||||||
const stats = {
|
|
||||||
total: users.length,
|
|
||||||
highValue: users.filter((u) => u.rfmScore.priority === "high").length,
|
|
||||||
mediumValue: users.filter((u) => u.rfmScore.priority === "medium").length,
|
|
||||||
lowValue: users.filter((u) => u.rfmScore.priority === "low").length,
|
|
||||||
duplicates: users.filter((u) => u.isDuplicate).length,
|
|
||||||
pending: users.filter((u) => u.status === "pending").length,
|
|
||||||
added: users.filter((u) => u.status === "added").length,
|
|
||||||
failed: users.filter((u) => u.status === "failed").length,
|
|
||||||
avgSpent: Math.round(
|
|
||||||
users.reduce((sum, u) => sum + u.totalSpent, 0) / users.length
|
|
||||||
),
|
|
||||||
addSuccessRate: Math.round(
|
|
||||||
(users.filter((u) => u.status === "added").length / users.length) * 100
|
|
||||||
),
|
|
||||||
duplicateRate: Math.round(
|
|
||||||
(users.filter((u) => u.isDuplicate).length / users.length) * 100
|
|
||||||
),
|
|
||||||
};
|
|
||||||
|
|
||||||
// 过滤用户
|
|
||||||
const filteredUsers = users.filter((user) => {
|
|
||||||
const matchesSearch =
|
|
||||||
!searchQuery ||
|
|
||||||
user.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
||||||
user.wechatId.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
||||||
user.phone.includes(searchQuery);
|
|
||||||
|
|
||||||
const matchesDevice =
|
|
||||||
deviceFilter === "all" || user.deviceId === deviceFilter;
|
|
||||||
const matchesValuation =
|
|
||||||
valuationFilter === "all" || user.rfmScore.priority === valuationFilter;
|
|
||||||
const matchesStatus =
|
|
||||||
statusFilter === "all" || user.status === statusFilter;
|
|
||||||
const matchesPool =
|
|
||||||
poolFilter === "all" ||
|
|
||||||
(poolFilter === "none"
|
|
||||||
? user.poolIds.length === 0
|
|
||||||
: user.poolIds.includes(poolFilter));
|
|
||||||
|
|
||||||
return (
|
|
||||||
matchesSearch &&
|
|
||||||
matchesDevice &&
|
|
||||||
matchesValuation &&
|
|
||||||
matchesStatus &&
|
|
||||||
matchesPool
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 按优先级排序
|
|
||||||
const sortedUsers = filteredUsers.sort((a, b) => {
|
|
||||||
const priorityOrder = { high: 3, medium: 2, low: 1 };
|
|
||||||
return (
|
|
||||||
priorityOrder[b.rfmScore.priority] - priorityOrder[a.rfmScore.priority]
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 分页数据
|
|
||||||
const pageSize = 20;
|
|
||||||
const paginatedUsers = sortedUsers.slice(0, page * pageSize);
|
|
||||||
|
|
||||||
// 处理用户选择
|
|
||||||
const handleUserSelect = useCallback((userId: string, checked: boolean) => {
|
|
||||||
setSelectedUsers((prev) =>
|
|
||||||
checked ? [...prev, userId] : prev.filter((id) => id !== userId)
|
|
||||||
);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 处理全选
|
|
||||||
const handleSelectAll = useCallback(
|
|
||||||
(checked: boolean) => {
|
|
||||||
if (checked) {
|
|
||||||
setSelectedUsers(paginatedUsers.map((user) => user.id));
|
|
||||||
} else {
|
|
||||||
setSelectedUsers([]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[paginatedUsers]
|
|
||||||
);
|
|
||||||
|
|
||||||
// 重置筛选器
|
|
||||||
const resetFilters = useCallback(() => {
|
|
||||||
setDeviceFilter("all");
|
|
||||||
setPoolFilter("all");
|
|
||||||
setValuationFilter("all");
|
|
||||||
setStatusFilter("all");
|
|
||||||
setSearchQuery("");
|
|
||||||
setShowFilters(false);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 刷新数据
|
|
||||||
const handleRefresh = useCallback(() => {
|
|
||||||
setLoading(true);
|
|
||||||
setTimeout(() => {
|
|
||||||
const refreshedUsers = generateMockUsers(
|
|
||||||
devices,
|
|
||||||
wechatAccounts,
|
|
||||||
customerServices,
|
|
||||||
trafficPools
|
|
||||||
);
|
|
||||||
setUsers(refreshedUsers);
|
|
||||||
setLoading(false);
|
|
||||||
Toast.show({ content: "刷新成功" });
|
|
||||||
}, 800);
|
|
||||||
}, [devices, wechatAccounts, customerServices, trafficPools]);
|
|
||||||
|
|
||||||
// 添加到流量池
|
|
||||||
const handleAddToPool = useCallback(() => {
|
|
||||||
if (selectedUsers.length === 0) {
|
|
||||||
Toast.show({ content: "请先选择要添加到流量池的用户" });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
Toast.show({ content: `已将 ${selectedUsers.length} 个用户添加到流量池` });
|
|
||||||
setSelectedUsers([]);
|
|
||||||
}, [selectedUsers.length]);
|
|
||||||
|
|
||||||
// 加载更多
|
|
||||||
const loadMore = async () => {
|
|
||||||
if (page * pageSize >= sortedUsers.length) {
|
|
||||||
setHasMore(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setPage((prev) => prev + 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 辅助函数
|
|
||||||
const getWechatAccount = (accountId: string) => {
|
|
||||||
return wechatAccounts.find((acc) => acc.id === accountId);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getCustomerService = (csId: string) => {
|
|
||||||
return customerServices.find((cs) => cs.id === csId);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getDevice = (deviceId: string) => {
|
|
||||||
return devices.find((device) => device.id === deviceId);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getPoolNames = (poolIds: string[]) => {
|
|
||||||
return poolIds
|
|
||||||
.map((id) => trafficPools.find((pool) => pool.id === id)?.name)
|
|
||||||
.filter(Boolean)
|
|
||||||
.join(", ");
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatDate = (dateString: string) => {
|
|
||||||
if (!dateString) return "--";
|
|
||||||
try {
|
|
||||||
const date = new Date(dateString);
|
|
||||||
return date.toLocaleDateString("zh-CN");
|
|
||||||
} catch (error) {
|
|
||||||
return dateString;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStatusText = (status: string) => {
|
|
||||||
switch (status) {
|
|
||||||
case "added":
|
|
||||||
return "已添加";
|
|
||||||
case "pending":
|
|
||||||
return "未添加";
|
|
||||||
case "failed":
|
|
||||||
return "添加失败";
|
|
||||||
case "duplicate":
|
|
||||||
return "重复";
|
|
||||||
default:
|
|
||||||
return status;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStatusColor = (status: string) => {
|
|
||||||
switch (status) {
|
|
||||||
case "added":
|
|
||||||
return "success";
|
|
||||||
case "pending":
|
|
||||||
return "default";
|
|
||||||
case "failed":
|
|
||||||
return "danger";
|
|
||||||
case "duplicate":
|
|
||||||
return "warning";
|
|
||||||
default:
|
|
||||||
return "default";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Layout
|
|
||||||
header={
|
|
||||||
<NavCommon
|
|
||||||
title="流量池管理"
|
|
||||||
right={
|
|
||||||
<div className={styles.headerActions}>
|
|
||||||
<Button
|
|
||||||
fill="none"
|
|
||||||
size="small"
|
|
||||||
onClick={() => setShowAnalytics(!showAnalytics)}
|
|
||||||
>
|
|
||||||
<BarChartOutline />
|
|
||||||
{showAnalytics ? <ChevronUpOutline /> : <ChevronDownOutline />}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
fill="none"
|
|
||||||
size="small"
|
|
||||||
onClick={handleRefresh}
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
<RefreshOutline className={loading ? styles.spinning : ""} />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
loading={loading}
|
|
||||||
>
|
|
||||||
<div className={styles.container}>
|
|
||||||
{/* 数据分析面板 */}
|
|
||||||
{showAnalytics && (
|
|
||||||
<div className={styles.analyticsPanel}>
|
|
||||||
<div className={styles.statsGrid}>
|
|
||||||
<Card className={styles.statCard}>
|
|
||||||
<div className={styles.statContent}>
|
|
||||||
<div className={styles.statValue}>{filteredUsers.length}</div>
|
|
||||||
<div className={styles.statLabel}>总用户数</div>
|
|
||||||
</div>
|
|
||||||
<UserOutline className={styles.statIcon} />
|
|
||||||
</Card>
|
|
||||||
<Card className={styles.statCard}>
|
|
||||||
<div className={styles.statContent}>
|
|
||||||
<div className={styles.statValue}>{stats.highValue}</div>
|
|
||||||
<div className={styles.statLabel}>高价值用户</div>
|
|
||||||
</div>
|
|
||||||
<StarFill className={styles.statIcon} />
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
<Card className={styles.efficiencyCard}>
|
|
||||||
<div className={styles.efficiencyTitle}>添加效率</div>
|
|
||||||
<div className={styles.efficiencyGrid}>
|
|
||||||
<div className={styles.efficiencyItem}>
|
|
||||||
<div className={styles.efficiencyValue}>
|
|
||||||
{stats.addSuccessRate}%
|
|
||||||
</div>
|
|
||||||
<div className={styles.efficiencyLabel}>成功率</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.efficiencyItem}>
|
|
||||||
<div className={styles.efficiencyValue}>
|
|
||||||
¥{stats.avgSpent}
|
|
||||||
</div>
|
|
||||||
<div className={styles.efficiencyLabel}>平均消费</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.statusGrid}>
|
|
||||||
<div className={styles.statusItem}>
|
|
||||||
<div className={styles.statusValue}>{stats.added}</div>
|
|
||||||
<div className={styles.statusLabel}>已添加</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.statusItem}>
|
|
||||||
<div className={styles.statusValue}>{stats.pending}</div>
|
|
||||||
<div className={styles.statusLabel}>待添加</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.statusItem}>
|
|
||||||
<div className={styles.statusValue}>{stats.failed}</div>
|
|
||||||
<div className={styles.statusLabel}>添加失败</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 搜索和筛选 */}
|
|
||||||
<div className={styles.searchSection}>
|
|
||||||
<SearchBar
|
|
||||||
placeholder="搜索用户昵称、微信号、手机号"
|
|
||||||
value={searchQuery}
|
|
||||||
onChange={setSearchQuery}
|
|
||||||
style={{ "--border-radius": "8px" }}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
fill="outline"
|
|
||||||
size="small"
|
|
||||||
onClick={() => setShowFilters(true)}
|
|
||||||
className={styles.filterButton}
|
|
||||||
>
|
|
||||||
<FilterOutline />
|
|
||||||
筛选
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 操作栏 */}
|
|
||||||
<div className={styles.actionBar}>
|
|
||||||
<div className={styles.selectSection}>
|
|
||||||
<Checkbox
|
|
||||||
checked={
|
|
||||||
selectedUsers.length === paginatedUsers.length &&
|
|
||||||
paginatedUsers.length > 0
|
|
||||||
}
|
|
||||||
onChange={handleSelectAll}
|
|
||||||
>
|
|
||||||
全选
|
|
||||||
</Checkbox>
|
|
||||||
{selectedUsers.length > 0 && (
|
|
||||||
<Button
|
|
||||||
size="small"
|
|
||||||
color="primary"
|
|
||||||
onClick={handleAddToPool}
|
|
||||||
className={styles.addButton}
|
|
||||||
>
|
|
||||||
添加到流量池
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className={styles.totalCount}>
|
|
||||||
共 {filteredUsers.length} 个用户
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 用户列表 */}
|
|
||||||
<List className={styles.userList}>
|
|
||||||
{paginatedUsers.map((user) => {
|
|
||||||
const wechatAccount = getWechatAccount(user.wechatAccountId);
|
|
||||||
const customerService = getCustomerService(user.customerServiceId);
|
|
||||||
const device = getDevice(user.deviceId);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<List.Item
|
|
||||||
key={user.id}
|
|
||||||
className={styles.userItem}
|
|
||||||
onClick={() => navigate(`/traffic-pool/detail/${user.id}`)}
|
|
||||||
prefix={
|
|
||||||
<div className={styles.userCheckbox}>
|
|
||||||
<Checkbox
|
|
||||||
checked={selectedUsers.includes(user.id)}
|
|
||||||
onChange={(checked) => handleUserSelect(user.id, checked)}
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
arrow={false}
|
|
||||||
>
|
|
||||||
<div className={styles.userContent}>
|
|
||||||
<div className={styles.userHeader}>
|
|
||||||
<div className={styles.userInfo}>
|
|
||||||
<Avatar src={user.avatar} className={styles.userAvatar}>
|
|
||||||
{user.nickname?.slice(0, 1) || "用户"}
|
|
||||||
</Avatar>
|
|
||||||
<div className={styles.userDetails}>
|
|
||||||
<div className={styles.userName}>
|
|
||||||
{user.nickname}
|
|
||||||
{user.rfmScore.priority === "high" && (
|
|
||||||
<StarFill className={styles.starIcon} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className={styles.userWechatId}>
|
|
||||||
{user.wechatId}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Tag color={getStatusColor(user.status)} size="small">
|
|
||||||
{getStatusText(user.status)}
|
|
||||||
</Tag>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.userMeta}>
|
|
||||||
<div className={styles.metaItem}>
|
|
||||||
<MobileOutline />
|
|
||||||
<span>{device?.name || "设备0"}</span>
|
|
||||||
</div>
|
|
||||||
<div className={styles.metaItem}>
|
|
||||||
<UserOutline />
|
|
||||||
<span>{customerService?.name || "客服1"}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.userTags}>
|
|
||||||
{user.tags.slice(0, 3).map((tag) => (
|
|
||||||
<Tag key={tag.id} color={tag.color} size="small">
|
|
||||||
{tag.name}
|
|
||||||
</Tag>
|
|
||||||
))}
|
|
||||||
{user.tags.length > 3 && (
|
|
||||||
<Tag color="default" size="small">
|
|
||||||
+{user.tags.length - 3}
|
|
||||||
</Tag>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{user.poolIds.length > 0 && (
|
|
||||||
<div className={styles.poolInfo}>
|
|
||||||
<TeamOutline />
|
|
||||||
<span>{getPoolNames(user.poolIds)}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</List.Item>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</List>
|
|
||||||
|
|
||||||
{/* 无限滚动 */}
|
|
||||||
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 筛选弹窗 */}
|
|
||||||
<Popup
|
|
||||||
visible={showFilters}
|
|
||||||
onMaskClick={() => setShowFilters(false)}
|
|
||||||
position="right"
|
|
||||||
bodyStyle={{ width: "80vw" }}
|
|
||||||
>
|
|
||||||
<div className={styles.filterPopup}>
|
|
||||||
<div className={styles.filterHeader}>
|
|
||||||
<span>筛选选项</span>
|
|
||||||
<Button
|
|
||||||
fill="none"
|
|
||||||
size="small"
|
|
||||||
onClick={() => setShowFilters(false)}
|
|
||||||
>
|
|
||||||
关闭
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.filterContent}>
|
|
||||||
<div className={styles.filterItem}>
|
|
||||||
<div className={styles.filterLabel}>设备</div>
|
|
||||||
<Selector
|
|
||||||
options={[
|
|
||||||
{ label: "全部设备", value: "all" },
|
|
||||||
...devices.map((device) => ({
|
|
||||||
label: `${device.name} - ${device.location}`,
|
|
||||||
value: device.id,
|
|
||||||
})),
|
|
||||||
]}
|
|
||||||
value={[deviceFilter]}
|
|
||||||
onChange={(arr) => setDeviceFilter(arr[0])}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.filterItem}>
|
|
||||||
<div className={styles.filterLabel}>流量池</div>
|
|
||||||
<Selector
|
|
||||||
options={[
|
|
||||||
{ label: "全部流量池", value: "all" },
|
|
||||||
{ label: "未分配", value: "none" },
|
|
||||||
...trafficPools.map((pool) => ({
|
|
||||||
label: pool.name,
|
|
||||||
value: pool.id,
|
|
||||||
})),
|
|
||||||
]}
|
|
||||||
value={[poolFilter]}
|
|
||||||
onChange={(arr) => setPoolFilter(arr[0])}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.filterItem}>
|
|
||||||
<div className={styles.filterLabel}>用户价值</div>
|
|
||||||
<Selector
|
|
||||||
options={[
|
|
||||||
{ label: "全部价值", value: "all" },
|
|
||||||
{ label: "高价值客户", value: "high" },
|
|
||||||
{ label: "中价值客户", value: "medium" },
|
|
||||||
{ label: "低价值客户", value: "low" },
|
|
||||||
]}
|
|
||||||
value={[valuationFilter]}
|
|
||||||
onChange={(arr) => setValuationFilter(arr[0])}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.filterItem}>
|
|
||||||
<div className={styles.filterLabel}>添加状态</div>
|
|
||||||
<Selector
|
|
||||||
options={[
|
|
||||||
{ label: "全部状态", value: "all" },
|
|
||||||
{ label: "待添加", value: "pending" },
|
|
||||||
{ label: "已添加", value: "added" },
|
|
||||||
{ label: "添加失败", value: "failed" },
|
|
||||||
{ label: "重复用户", value: "duplicate" },
|
|
||||||
]}
|
|
||||||
value={[statusFilter]}
|
|
||||||
onChange={(arr) => setStatusFilter(arr[0])}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.filterActions}>
|
|
||||||
<Button fill="outline" onClick={resetFilters}>
|
|
||||||
重置筛选
|
|
||||||
</Button>
|
|
||||||
<Button color="primary" onClick={() => setShowFilters(false)}>
|
|
||||||
应用筛选
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Popup>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TrafficPoolList;
|
|
||||||
@@ -1,8 +1,4 @@
|
|||||||
import Home from "@/pages/home/index";
|
import Home from "@/pages/home/index";
|
||||||
import WechatAccounts from "@/pages/mine/wechat-accounts/list/index";
|
|
||||||
import WechatAccountDetail from "@/pages/mine/wechat-accounts/detail/index";
|
|
||||||
import Recharge from "@/pages/mine/recharge/index";
|
|
||||||
import UserSetting from "@/pages/mine/userSet/index";
|
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
// 基础路由
|
// 基础路由
|
||||||
@@ -11,27 +7,6 @@ const routes = [
|
|||||||
element: <Home />,
|
element: <Home />,
|
||||||
auth: true, // 需要登录
|
auth: true, // 需要登录
|
||||||
},
|
},
|
||||||
// 微信号管理路由
|
|
||||||
{
|
|
||||||
path: "/wechat-accounts",
|
|
||||||
element: <WechatAccounts />,
|
|
||||||
auth: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/wechat-accounts/detail/:id",
|
|
||||||
element: <WechatAccountDetail />,
|
|
||||||
auth: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/recharge",
|
|
||||||
element: <Recharge />,
|
|
||||||
auth: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/settings",
|
|
||||||
element: <UserSetting />,
|
|
||||||
auth: true,
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
export default routes;
|
export default routes;
|
||||||
|
|||||||
59
nkebao/src/router/module/mine.tsx
Normal file
59
nkebao/src/router/module/mine.tsx
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
import Mine from "@/pages/mine/main/index";
|
||||||
|
import Devices from "@/pages/mine/devices/index";
|
||||||
|
import DeviceDetail from "@/pages/mine/devices/DeviceDetail";
|
||||||
|
import TrafficPool from "@/pages/mine/traffic-pool/list/index";
|
||||||
|
import TrafficPoolDetail from "@/pages/mine/traffic-pool/detail/index";
|
||||||
|
import WechatAccounts from "@/pages/mine/wechat-accounts/list/index";
|
||||||
|
import WechatAccountDetail from "@/pages/mine/wechat-accounts/detail/index";
|
||||||
|
import Recharge from "@/pages/mine/recharge/index";
|
||||||
|
import UserSetting from "@/pages/mine/userSet/index";
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: "/mine",
|
||||||
|
element: <Mine />,
|
||||||
|
auth: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/devices",
|
||||||
|
element: <Devices />,
|
||||||
|
auth: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/devices/:id",
|
||||||
|
element: <DeviceDetail />,
|
||||||
|
auth: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/traffic-pool",
|
||||||
|
element: <TrafficPool />,
|
||||||
|
auth: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/traffic-pool/:id",
|
||||||
|
element: <TrafficPoolDetail />,
|
||||||
|
auth: true,
|
||||||
|
},
|
||||||
|
// 微信号管理路由
|
||||||
|
{
|
||||||
|
path: "/wechat-accounts",
|
||||||
|
element: <WechatAccounts />,
|
||||||
|
auth: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/wechat-accounts/detail/:id",
|
||||||
|
element: <WechatAccountDetail />,
|
||||||
|
auth: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/recharge",
|
||||||
|
element: <Recharge />,
|
||||||
|
auth: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/settings",
|
||||||
|
element: <UserSetting />,
|
||||||
|
auth: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default routes;
|
||||||
@@ -1,30 +1,6 @@
|
|||||||
import Plans from "@/pages/plans/Plans";
|
|
||||||
import PlanDetail from "@/pages/plans/PlanDetail";
|
|
||||||
import Orders from "@/pages/orders/Orders";
|
|
||||||
import ContactImport from "@/pages/contact-import/ContactImport";
|
|
||||||
import SelectionTest from "@/components/SelectionTest";
|
import SelectionTest from "@/components/SelectionTest";
|
||||||
|
|
||||||
const otherRoutes = [
|
const otherRoutes = [
|
||||||
{
|
|
||||||
path: "/plans",
|
|
||||||
element: <Plans />,
|
|
||||||
auth: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/plans/:planId",
|
|
||||||
element: <PlanDetail />,
|
|
||||||
auth: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/orders",
|
|
||||||
element: <Orders />,
|
|
||||||
auth: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/contact-import",
|
|
||||||
element: <ContactImport />,
|
|
||||||
auth: true,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: "/selection-test",
|
path: "/selection-test",
|
||||||
element: <SelectionTest />,
|
element: <SelectionTest />,
|
||||||
|
|||||||
@@ -1,17 +0,0 @@
|
|||||||
import TrafficPool from "@/pages/traffic-pool/list/index";
|
|
||||||
import TrafficPoolDetail from "@/pages/traffic-pool/detail/index";
|
|
||||||
|
|
||||||
const trafficPoolRoutes = [
|
|
||||||
{
|
|
||||||
path: "/traffic-pool",
|
|
||||||
element: <TrafficPool />,
|
|
||||||
auth: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/traffic-pool/:id",
|
|
||||||
element: <TrafficPoolDetail />,
|
|
||||||
auth: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default trafficPoolRoutes;
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import Mine from "@/pages/mine/main/index";
|
|
||||||
import Devices from "@/pages/mine/devices/index";
|
|
||||||
import DeviceDetail from "@/pages/mine/devices/DeviceDetail";
|
|
||||||
|
|
||||||
const routes = [
|
|
||||||
{
|
|
||||||
path: "/mine",
|
|
||||||
element: <Mine />,
|
|
||||||
auth: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/devices",
|
|
||||||
element: <Devices />,
|
|
||||||
auth: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/devices/:id",
|
|
||||||
element: <DeviceDetail />,
|
|
||||||
auth: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default routes;
|
|
||||||
Reference in New Issue
Block a user