feat: 本次提交更新内容如下
存一版
This commit is contained in:
笔记本里的永平
@@ -1,29 +1,26 @@
|
||||
import { get, post, put } from "@/api/request";
|
||||
import request from "@/api/request";
|
||||
import {
|
||||
ApiResponse,
|
||||
ContentLibrary,
|
||||
CreateContentLibraryParams,
|
||||
UpdateContentLibraryParams,
|
||||
} from "./data";
|
||||
|
||||
// 获取内容库详情
|
||||
export async function getContentLibraryDetail(
|
||||
id: string
|
||||
): Promise<ApiResponse<ContentLibrary>> {
|
||||
return get<ApiResponse<ContentLibrary>>(`/v1/content/library/${id}`);
|
||||
export function getContentLibraryDetail(id: string): Promise<any> {
|
||||
return request("/v1/content/library/detail", { id }, "GET");
|
||||
}
|
||||
|
||||
// 创建内容库
|
||||
export async function createContentLibrary(
|
||||
export function createContentLibrary(
|
||||
params: CreateContentLibraryParams
|
||||
): Promise<ApiResponse<ContentLibrary>> {
|
||||
return post<ApiResponse<ContentLibrary>>("/v1/content/library", params);
|
||||
): Promise<any> {
|
||||
return request("/v1/content/library/create", params, "POST");
|
||||
}
|
||||
|
||||
// 更新内容库
|
||||
export async function updateContentLibrary(
|
||||
export function updateContentLibrary(
|
||||
params: UpdateContentLibraryParams
|
||||
): Promise<ApiResponse<ContentLibrary>> {
|
||||
): Promise<any> {
|
||||
const { id, ...data } = params;
|
||||
return put<ApiResponse<ContentLibrary>>(`/v1/content/library/${id}`, data);
|
||||
return request(`/v1/content/library/update`, { id, ...data }, "POST");
|
||||
}
|
||||
|
||||
@@ -1,65 +1,49 @@
|
||||
import { get, post, put, del } from "@/api/request";
|
||||
import request from "@/api/request";
|
||||
import {
|
||||
ApiResponse,
|
||||
LibraryListResponse,
|
||||
ContentLibrary,
|
||||
CreateContentLibraryParams,
|
||||
UpdateContentLibraryParams,
|
||||
} from "./data";
|
||||
|
||||
// 获取内容库列表
|
||||
export async function getContentLibraryList(params: {
|
||||
export function getContentLibraryList(params: {
|
||||
page?: number;
|
||||
limit?: number;
|
||||
keyword?: string;
|
||||
sourceType?: number;
|
||||
}): Promise<ApiResponse<LibraryListResponse>> {
|
||||
const queryParams = new URLSearchParams();
|
||||
|
||||
if (params.page) queryParams.append("page", params.page.toString());
|
||||
if (params.limit) queryParams.append("limit", params.limit.toString());
|
||||
if (params.keyword) queryParams.append("keyword", params.keyword);
|
||||
if (params.sourceType)
|
||||
queryParams.append("sourceType", params.sourceType.toString());
|
||||
|
||||
return get<ApiResponse<LibraryListResponse>>(
|
||||
`/v1/content/library/list?${queryParams.toString()}`
|
||||
);
|
||||
}): Promise<any> {
|
||||
return request("/v1/content/library/list", params, "GET");
|
||||
}
|
||||
|
||||
// 获取内容库详情
|
||||
export async function getContentLibraryDetail(
|
||||
id: string
|
||||
): Promise<ApiResponse<ContentLibrary>> {
|
||||
return get<ApiResponse<ContentLibrary>>(`/v1/content/library/${id}`);
|
||||
export function getContentLibraryDetail(id: string): Promise<any> {
|
||||
return request("/v1/content/library/detail", { id }, "GET");
|
||||
}
|
||||
|
||||
// 创建内容库
|
||||
export async function createContentLibrary(
|
||||
export function createContentLibrary(
|
||||
params: CreateContentLibraryParams
|
||||
): Promise<ApiResponse<ContentLibrary>> {
|
||||
return post<ApiResponse<ContentLibrary>>("/v1/content/library", params);
|
||||
): Promise<any> {
|
||||
return request("/v1/content/library/create", params, "POST");
|
||||
}
|
||||
|
||||
// 更新内容库
|
||||
export async function updateContentLibrary(
|
||||
export function updateContentLibrary(
|
||||
params: UpdateContentLibraryParams
|
||||
): Promise<ApiResponse<ContentLibrary>> {
|
||||
): Promise<any> {
|
||||
const { id, ...data } = params;
|
||||
return put<ApiResponse<ContentLibrary>>(`/v1/content/library/${id}`, data);
|
||||
return request(`/v1/content/library/update`, { id, ...data }, "POST");
|
||||
}
|
||||
|
||||
// 删除内容库
|
||||
export async function deleteContentLibrary(
|
||||
id: string
|
||||
): Promise<ApiResponse<void>> {
|
||||
return del<ApiResponse<void>>(`/v1/content/library/delete?id=${id}`);
|
||||
export function deleteContentLibrary(id: string): Promise<any> {
|
||||
return request("/v1/content/library/delete", { id }, "DELETE");
|
||||
}
|
||||
|
||||
// 切换内容库状态
|
||||
export async function toggleContentLibraryStatus(
|
||||
export function toggleContentLibraryStatus(
|
||||
id: string,
|
||||
status: number
|
||||
): Promise<ApiResponse<void>> {
|
||||
return put<ApiResponse<void>>(`/v1/content/library/${id}/status`, { status });
|
||||
): Promise<any> {
|
||||
return request("/v1/content/library/update-status", { id, status }, "POST");
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { get, post, put } from "@/api/request";
|
||||
import request from "@/api/request";
|
||||
import {
|
||||
ApiResponse,
|
||||
ContentItem,
|
||||
ContentLibrary,
|
||||
CreateContentItemParams,
|
||||
@@ -8,30 +7,26 @@ import {
|
||||
} from "./data";
|
||||
|
||||
// 获取素材详情
|
||||
export async function getContentItemDetail(
|
||||
id: string
|
||||
): Promise<ApiResponse<ContentItem>> {
|
||||
return get<ApiResponse<ContentItem>>(`/v1/content/item/${id}`);
|
||||
export function getContentItemDetail(id: string): Promise<any> {
|
||||
return request("/v1/content/item/detail", { id }, "GET");
|
||||
}
|
||||
|
||||
// 创建素材
|
||||
export async function createContentItem(
|
||||
export function createContentItem(
|
||||
params: CreateContentItemParams
|
||||
): Promise<ApiResponse<ContentItem>> {
|
||||
return post<ApiResponse<ContentItem>>("/v1/content/item", params);
|
||||
): Promise<any> {
|
||||
return request("/v1/content/item/create", params, "POST");
|
||||
}
|
||||
|
||||
// 更新素材
|
||||
export async function updateContentItem(
|
||||
export function updateContentItem(
|
||||
params: UpdateContentItemParams
|
||||
): Promise<ApiResponse<ContentItem>> {
|
||||
): Promise<any> {
|
||||
const { id, ...data } = params;
|
||||
return put<ApiResponse<ContentItem>>(`/v1/content/item/${id}`, data);
|
||||
return request(`/v1/content/item/update`, { id, ...data }, "POST");
|
||||
}
|
||||
|
||||
// 获取内容库详情
|
||||
export async function getContentLibraryDetail(
|
||||
id: string
|
||||
): Promise<ApiResponse<ContentLibrary>> {
|
||||
return get<ApiResponse<ContentLibrary>>(`/v1/content/library/${id}`);
|
||||
export function getContentLibraryDetail(id: string): Promise<any> {
|
||||
return request("/v1/content/library/detail", { id }, "GET");
|
||||
}
|
||||
|
||||
@@ -1,16 +1,7 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import {
|
||||
Button,
|
||||
Toast,
|
||||
SpinLoading,
|
||||
Form,
|
||||
Input,
|
||||
Card,
|
||||
Select,
|
||||
Upload,
|
||||
} from "antd-mobile";
|
||||
import { Input as AntdInput, TimePicker } from "antd";
|
||||
import { Button, Toast, SpinLoading, Form, Card } from "antd-mobile";
|
||||
import { Input, TimePicker, Select, Upload } from "antd";
|
||||
import {
|
||||
ArrowLeftOutlined,
|
||||
SaveOutlined,
|
||||
@@ -33,7 +24,7 @@ import { ContentItem, ContentLibrary } from "./data";
|
||||
import style from "./index.module.scss";
|
||||
|
||||
const { Option } = Select;
|
||||
const { TextArea } = AntdInput;
|
||||
const { TextArea } = Input;
|
||||
|
||||
// 内容类型选项
|
||||
const contentTypeOptions = [
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import { get, post, put, del } from "@/api/request";
|
||||
import request from "@/api/request";
|
||||
import {
|
||||
ApiResponse,
|
||||
ItemListResponse,
|
||||
ContentItem,
|
||||
ContentLibrary,
|
||||
GetContentItemListParams,
|
||||
@@ -10,53 +8,38 @@ import {
|
||||
} from "./data";
|
||||
|
||||
// 获取素材列表
|
||||
export async function getContentItemList(
|
||||
export function getContentItemList(
|
||||
params: GetContentItemListParams
|
||||
): Promise<ApiResponse<ItemListResponse>> {
|
||||
const queryParams = new URLSearchParams();
|
||||
|
||||
queryParams.append("libraryId", params.libraryId);
|
||||
if (params.page) queryParams.append("page", params.page.toString());
|
||||
if (params.limit) queryParams.append("limit", params.limit.toString());
|
||||
if (params.keyword) queryParams.append("keyword", params.keyword);
|
||||
|
||||
return get<ApiResponse<ItemListResponse>>(
|
||||
`/v1/content/item/list?${queryParams.toString()}`
|
||||
);
|
||||
): Promise<any> {
|
||||
return request("/v1/content/item/list", params, "GET");
|
||||
}
|
||||
|
||||
// 获取素材详情
|
||||
export async function getContentItemDetail(
|
||||
id: string
|
||||
): Promise<ApiResponse<ContentItem>> {
|
||||
return get<ApiResponse<ContentItem>>(`/v1/content/item/${id}`);
|
||||
export function getContentItemDetail(id: string): Promise<any> {
|
||||
return request("/v1/content/item/detail", { id }, "GET");
|
||||
}
|
||||
|
||||
// 创建素材
|
||||
export async function createContentItem(
|
||||
export function createContentItem(
|
||||
params: CreateContentItemParams
|
||||
): Promise<ApiResponse<ContentItem>> {
|
||||
return post<ApiResponse<ContentItem>>("/v1/content/item", params);
|
||||
): Promise<any> {
|
||||
return request("/v1/content/item/create", params, "POST");
|
||||
}
|
||||
|
||||
// 更新素材
|
||||
export async function updateContentItem(
|
||||
export function updateContentItem(
|
||||
params: UpdateContentItemParams
|
||||
): Promise<ApiResponse<ContentItem>> {
|
||||
): Promise<any> {
|
||||
const { id, ...data } = params;
|
||||
return put<ApiResponse<ContentItem>>(`/v1/content/item/${id}`, data);
|
||||
return request(`/v1/content/item/update`, { id, ...data }, "POST");
|
||||
}
|
||||
|
||||
// 删除素材
|
||||
export async function deleteContentItem(
|
||||
id: string
|
||||
): Promise<ApiResponse<void>> {
|
||||
return del<ApiResponse<void>>(`/v1/content/item/delete?id=${id}`);
|
||||
export function deleteContentItem(id: string): Promise<any> {
|
||||
return request("/v1/content/item/delete", { id }, "DELETE");
|
||||
}
|
||||
|
||||
// 获取内容库详情
|
||||
export async function getContentLibraryDetail(
|
||||
id: string
|
||||
): Promise<ApiResponse<ContentLibrary>> {
|
||||
return get<ApiResponse<ContentLibrary>>(`/v1/content/library/${id}`);
|
||||
export function getContentLibraryDetail(id: string): Promise<any> {
|
||||
return request("/v1/content/library/detail", { id }, "GET");
|
||||
}
|
||||
|
||||
@@ -8,9 +8,8 @@ import {
|
||||
Card,
|
||||
Avatar,
|
||||
Tag,
|
||||
Pagination,
|
||||
} from "antd-mobile";
|
||||
import { Input } from "antd";
|
||||
import { Pagination, Input } from "antd";
|
||||
import {
|
||||
PlusOutlined,
|
||||
SearchOutlined,
|
||||
|
||||
@@ -1,88 +1,5 @@
|
||||
import type {
|
||||
Device,
|
||||
WechatAccount,
|
||||
CustomerService,
|
||||
TrafficPool,
|
||||
RFMScore,
|
||||
UserTag,
|
||||
UserInteraction,
|
||||
TrafficUser,
|
||||
} from "../list/api";
|
||||
import {
|
||||
generateMockDevices,
|
||||
generateMockWechatAccounts,
|
||||
generateMockCustomerServices,
|
||||
generateMockTrafficPools,
|
||||
generateRFMScore,
|
||||
generateUserTags,
|
||||
generateMockInteractions,
|
||||
} from "../list/api";
|
||||
import request from "@/api/request";
|
||||
|
||||
// 获取单个流量池用户详情（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(),
|
||||
};
|
||||
export function getTrafficPoolDetail(id: string): Promise<any> {
|
||||
return request("/v1/traffic/pool/detail", { id }, "GET");
|
||||
}
|
||||
|
||||
0
nkebao/src/pages/mine/traffic-pool/detail/data.ts
Normal file
0
nkebao/src/pages/mine/traffic-pool/detail/data.ts
Normal file
@@ -1,354 +0,0 @@
|
||||
.container {
|
||||
padding: 16px;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.notFound {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.notFoundText {
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.userCard {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.userHeader {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.userAvatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.userName {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.starIcon {
|
||||
color: #ff4d4f;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.userWechatId {
|
||||
font-size: 14px;
|
||||
color: #1677ff;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.userTags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.rfmTags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tabContent {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.infoCard {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.infoItem {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.infoLabel {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.infoValue {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.rfmCard {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.rfmGrid {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rfmItem {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.rfmValue {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.rfmLabel {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.rfmItem:nth-child(1) .rfmValue {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.rfmItem:nth-child(2) .rfmValue {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.rfmItem:nth-child(3) .rfmValue {
|
||||
color: #722ed1;
|
||||
}
|
||||
|
||||
.poolButtons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.statsCard {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.statItem {
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.statValue {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.statItem:nth-child(1) .statValue {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.statItem:nth-child(2) .statValue {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.statItem:nth-child(3) .statValue {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.statItem:nth-child(4) .statValue {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.interactionCard {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.interactionList {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.interactionItem {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.interactionIcon {
|
||||
font-size: 20px;
|
||||
color: #1677ff;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.interactionContent {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.interactionTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.interactionDesc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.interactionValue {
|
||||
color: #52c41a;
|
||||
font-weight: bold;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.interactionTime {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.emptyState {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 32px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tagsCard {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tagsList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.valueTags {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.valueTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.valueTagItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.rfmScore {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.valueLabel {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.addTagButton {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 375px) {
|
||||
.container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.userHeader {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.userAvatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.rfmGrid {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.poolButtons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.statsCard {
|
||||
.adm-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,541 +1,3 @@
|
||||
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();
|
||||
export default function TrafficPoolDetail() {
|
||||
return <div>TrafficPoolDetail</div>;
|
||||
}
|
||||
}, [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;
|
||||
|
||||
@@ -1,372 +0,0 @@
|
||||
// 类型定义
|
||||
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(),
|
||||
};
|
||||
}
|
||||
|
||||
0
nkebao/src/pages/mine/traffic-pool/list/data.ts
Normal file
0
nkebao/src/pages/mine/traffic-pool/list/data.ts
Normal file
@@ -1,365 +0,0 @@
|
||||
.container {
|
||||
padding: 0;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.headerActions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.analyticsPanel {
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.statsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.statCard {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.statContent {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.statValue {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #1677ff;
|
||||
line-height: 1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.statIcon {
|
||||
font-size: 24px;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.efficiencyCard {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.efficiencyTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.efficiencyGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.efficiencyItem {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.efficiencyValue {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #1677ff;
|
||||
line-height: 1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.efficiencyLabel {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.statusGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 8px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.statusItem {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.statusValue {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.statusLabel {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.statusItem:nth-child(1) .statusValue {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.statusItem:nth-child(2) .statusValue {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.statusItem:nth-child(3) .statusValue {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.searchSection {
|
||||
background: #fff;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.filterButton {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.actionBar {
|
||||
background: #fff;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.selectSection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.addButton {
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.totalCount {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.userList {
|
||||
background: #fff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.userItem {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.userCheckbox {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.userContent {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.userHeader {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.userAvatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.userDetails {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.userName {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.starIcon {
|
||||
color: #ff4d4f;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.userWechatId {
|
||||
font-size: 14px;
|
||||
color: #1677ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.userMeta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.metaItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.userTags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.poolInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.filterPopup {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.filterHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filterContent {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.filterItem {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.filterLabel {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.filterActions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
margin-top: auto;
|
||||
|
||||
.adm-button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 375px) {
|
||||
.statsGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.efficiencyGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.statusGrid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.userMeta {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,656 +1,3 @@
|
||||
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);
|
||||
export default function TrafficPoolList() {
|
||||
return <div>TrafficPoolList</div>;
|
||||
}
|
||||
};
|
||||
|
||||
// 筛选用户
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user