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 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 = [
|
||||
// 基础路由
|
||||
@@ -11,27 +7,6 @@ const routes = [
|
||||
element: <Home />,
|
||||
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;
|
||||
|
||||
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";
|
||||
|
||||
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",
|
||||
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