feat: 本次提交更新内容如下
存一版
This commit is contained in:
笔记本里的永平
@@ -1,29 +1,26 @@
|
|||||||
import { get, post, put } from "@/api/request";
|
import request from "@/api/request";
|
||||||
import {
|
import {
|
||||||
ApiResponse,
|
|
||||||
ContentLibrary,
|
ContentLibrary,
|
||||||
CreateContentLibraryParams,
|
CreateContentLibraryParams,
|
||||||
UpdateContentLibraryParams,
|
UpdateContentLibraryParams,
|
||||||
} from "./data";
|
} from "./data";
|
||||||
|
|
||||||
// 获取内容库详情
|
// 获取内容库详情
|
||||||
export async function getContentLibraryDetail(
|
export function getContentLibraryDetail(id: string): Promise<any> {
|
||||||
id: string
|
return request("/v1/content/library/detail", { id }, "GET");
|
||||||
): Promise<ApiResponse<ContentLibrary>> {
|
|
||||||
return get<ApiResponse<ContentLibrary>>(`/v1/content/library/${id}`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 创建内容库
|
// 创建内容库
|
||||||
export async function createContentLibrary(
|
export function createContentLibrary(
|
||||||
params: CreateContentLibraryParams
|
params: CreateContentLibraryParams
|
||||||
): Promise<ApiResponse<ContentLibrary>> {
|
): Promise<any> {
|
||||||
return post<ApiResponse<ContentLibrary>>("/v1/content/library", params);
|
return request("/v1/content/library/create", params, "POST");
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新内容库
|
// 更新内容库
|
||||||
export async function updateContentLibrary(
|
export function updateContentLibrary(
|
||||||
params: UpdateContentLibraryParams
|
params: UpdateContentLibraryParams
|
||||||
): Promise<ApiResponse<ContentLibrary>> {
|
): Promise<any> {
|
||||||
const { id, ...data } = params;
|
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 {
|
import {
|
||||||
ApiResponse,
|
|
||||||
LibraryListResponse,
|
|
||||||
ContentLibrary,
|
ContentLibrary,
|
||||||
CreateContentLibraryParams,
|
CreateContentLibraryParams,
|
||||||
UpdateContentLibraryParams,
|
UpdateContentLibraryParams,
|
||||||
} from "./data";
|
} from "./data";
|
||||||
|
|
||||||
// 获取内容库列表
|
// 获取内容库列表
|
||||||
export async function getContentLibraryList(params: {
|
export function getContentLibraryList(params: {
|
||||||
page?: number;
|
page?: number;
|
||||||
limit?: number;
|
limit?: number;
|
||||||
keyword?: string;
|
keyword?: string;
|
||||||
sourceType?: number;
|
sourceType?: number;
|
||||||
}): Promise<ApiResponse<LibraryListResponse>> {
|
}): Promise<any> {
|
||||||
const queryParams = new URLSearchParams();
|
return request("/v1/content/library/list", params, "GET");
|
||||||
|
|
||||||
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()}`
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取内容库详情
|
// 获取内容库详情
|
||||||
export async function getContentLibraryDetail(
|
export function getContentLibraryDetail(id: string): Promise<any> {
|
||||||
id: string
|
return request("/v1/content/library/detail", { id }, "GET");
|
||||||
): Promise<ApiResponse<ContentLibrary>> {
|
|
||||||
return get<ApiResponse<ContentLibrary>>(`/v1/content/library/${id}`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 创建内容库
|
// 创建内容库
|
||||||
export async function createContentLibrary(
|
export function createContentLibrary(
|
||||||
params: CreateContentLibraryParams
|
params: CreateContentLibraryParams
|
||||||
): Promise<ApiResponse<ContentLibrary>> {
|
): Promise<any> {
|
||||||
return post<ApiResponse<ContentLibrary>>("/v1/content/library", params);
|
return request("/v1/content/library/create", params, "POST");
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新内容库
|
// 更新内容库
|
||||||
export async function updateContentLibrary(
|
export function updateContentLibrary(
|
||||||
params: UpdateContentLibraryParams
|
params: UpdateContentLibraryParams
|
||||||
): Promise<ApiResponse<ContentLibrary>> {
|
): Promise<any> {
|
||||||
const { id, ...data } = params;
|
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(
|
export function deleteContentLibrary(id: string): Promise<any> {
|
||||||
id: string
|
return request("/v1/content/library/delete", { id }, "DELETE");
|
||||||
): Promise<ApiResponse<void>> {
|
|
||||||
return del<ApiResponse<void>>(`/v1/content/library/delete?id=${id}`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 切换内容库状态
|
// 切换内容库状态
|
||||||
export async function toggleContentLibraryStatus(
|
export function toggleContentLibraryStatus(
|
||||||
id: string,
|
id: string,
|
||||||
status: number
|
status: number
|
||||||
): Promise<ApiResponse<void>> {
|
): Promise<any> {
|
||||||
return put<ApiResponse<void>>(`/v1/content/library/${id}/status`, { status });
|
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 {
|
import {
|
||||||
ApiResponse,
|
|
||||||
ContentItem,
|
ContentItem,
|
||||||
ContentLibrary,
|
ContentLibrary,
|
||||||
CreateContentItemParams,
|
CreateContentItemParams,
|
||||||
@@ -8,30 +7,26 @@ import {
|
|||||||
} from "./data";
|
} from "./data";
|
||||||
|
|
||||||
// 获取素材详情
|
// 获取素材详情
|
||||||
export async function getContentItemDetail(
|
export function getContentItemDetail(id: string): Promise<any> {
|
||||||
id: string
|
return request("/v1/content/item/detail", { id }, "GET");
|
||||||
): Promise<ApiResponse<ContentItem>> {
|
|
||||||
return get<ApiResponse<ContentItem>>(`/v1/content/item/${id}`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 创建素材
|
// 创建素材
|
||||||
export async function createContentItem(
|
export function createContentItem(
|
||||||
params: CreateContentItemParams
|
params: CreateContentItemParams
|
||||||
): Promise<ApiResponse<ContentItem>> {
|
): Promise<any> {
|
||||||
return post<ApiResponse<ContentItem>>("/v1/content/item", params);
|
return request("/v1/content/item/create", params, "POST");
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新素材
|
// 更新素材
|
||||||
export async function updateContentItem(
|
export function updateContentItem(
|
||||||
params: UpdateContentItemParams
|
params: UpdateContentItemParams
|
||||||
): Promise<ApiResponse<ContentItem>> {
|
): Promise<any> {
|
||||||
const { id, ...data } = params;
|
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(
|
export function getContentLibraryDetail(id: string): Promise<any> {
|
||||||
id: string
|
return request("/v1/content/library/detail", { id }, "GET");
|
||||||
): Promise<ApiResponse<ContentLibrary>> {
|
|
||||||
return get<ApiResponse<ContentLibrary>>(`/v1/content/library/${id}`);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,16 +1,7 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
import {
|
import { Button, Toast, SpinLoading, Form, Card } from "antd-mobile";
|
||||||
Button,
|
import { Input, TimePicker, Select, Upload } from "antd";
|
||||||
Toast,
|
|
||||||
SpinLoading,
|
|
||||||
Form,
|
|
||||||
Input,
|
|
||||||
Card,
|
|
||||||
Select,
|
|
||||||
Upload,
|
|
||||||
} from "antd-mobile";
|
|
||||||
import { Input as AntdInput, TimePicker } from "antd";
|
|
||||||
import {
|
import {
|
||||||
ArrowLeftOutlined,
|
ArrowLeftOutlined,
|
||||||
SaveOutlined,
|
SaveOutlined,
|
||||||
@@ -33,7 +24,7 @@ import { ContentItem, ContentLibrary } from "./data";
|
|||||||
import style from "./index.module.scss";
|
import style from "./index.module.scss";
|
||||||
|
|
||||||
const { Option } = Select;
|
const { Option } = Select;
|
||||||
const { TextArea } = AntdInput;
|
const { TextArea } = Input;
|
||||||
|
|
||||||
// 内容类型选项
|
// 内容类型选项
|
||||||
const contentTypeOptions = [
|
const contentTypeOptions = [
|
||||||
|
|||||||
@@ -1,7 +1,5 @@
|
|||||||
import { get, post, put, del } from "@/api/request";
|
import request from "@/api/request";
|
||||||
import {
|
import {
|
||||||
ApiResponse,
|
|
||||||
ItemListResponse,
|
|
||||||
ContentItem,
|
ContentItem,
|
||||||
ContentLibrary,
|
ContentLibrary,
|
||||||
GetContentItemListParams,
|
GetContentItemListParams,
|
||||||
@@ -10,53 +8,38 @@ import {
|
|||||||
} from "./data";
|
} from "./data";
|
||||||
|
|
||||||
// 获取素材列表
|
// 获取素材列表
|
||||||
export async function getContentItemList(
|
export function getContentItemList(
|
||||||
params: GetContentItemListParams
|
params: GetContentItemListParams
|
||||||
): Promise<ApiResponse<ItemListResponse>> {
|
): Promise<any> {
|
||||||
const queryParams = new URLSearchParams();
|
return request("/v1/content/item/list", params, "GET");
|
||||||
|
|
||||||
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()}`
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取素材详情
|
// 获取素材详情
|
||||||
export async function getContentItemDetail(
|
export function getContentItemDetail(id: string): Promise<any> {
|
||||||
id: string
|
return request("/v1/content/item/detail", { id }, "GET");
|
||||||
): Promise<ApiResponse<ContentItem>> {
|
|
||||||
return get<ApiResponse<ContentItem>>(`/v1/content/item/${id}`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 创建素材
|
// 创建素材
|
||||||
export async function createContentItem(
|
export function createContentItem(
|
||||||
params: CreateContentItemParams
|
params: CreateContentItemParams
|
||||||
): Promise<ApiResponse<ContentItem>> {
|
): Promise<any> {
|
||||||
return post<ApiResponse<ContentItem>>("/v1/content/item", params);
|
return request("/v1/content/item/create", params, "POST");
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新素材
|
// 更新素材
|
||||||
export async function updateContentItem(
|
export function updateContentItem(
|
||||||
params: UpdateContentItemParams
|
params: UpdateContentItemParams
|
||||||
): Promise<ApiResponse<ContentItem>> {
|
): Promise<any> {
|
||||||
const { id, ...data } = params;
|
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(
|
export function deleteContentItem(id: string): Promise<any> {
|
||||||
id: string
|
return request("/v1/content/item/delete", { id }, "DELETE");
|
||||||
): Promise<ApiResponse<void>> {
|
|
||||||
return del<ApiResponse<void>>(`/v1/content/item/delete?id=${id}`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取内容库详情
|
// 获取内容库详情
|
||||||
export async function getContentLibraryDetail(
|
export function getContentLibraryDetail(id: string): Promise<any> {
|
||||||
id: string
|
return request("/v1/content/library/detail", { id }, "GET");
|
||||||
): Promise<ApiResponse<ContentLibrary>> {
|
|
||||||
return get<ApiResponse<ContentLibrary>>(`/v1/content/library/${id}`);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,9 +8,8 @@ import {
|
|||||||
Card,
|
Card,
|
||||||
Avatar,
|
Avatar,
|
||||||
Tag,
|
Tag,
|
||||||
Pagination,
|
|
||||||
} from "antd-mobile";
|
} from "antd-mobile";
|
||||||
import { Input } from "antd";
|
import { Pagination, Input } from "antd";
|
||||||
import {
|
import {
|
||||||
PlusOutlined,
|
PlusOutlined,
|
||||||
SearchOutlined,
|
SearchOutlined,
|
||||||
|
|||||||
@@ -1,88 +1,5 @@
|
|||||||
import type {
|
import request from "@/api/request";
|
||||||
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 getTrafficPoolDetail(id: string): Promise<any> {
|
||||||
export function getTrafficUserDetail(
|
return request("/v1/traffic/pool/detail", { id }, "GET");
|
||||||
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(),
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|||||||
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";
|
export default function TrafficPoolDetail() {
|
||||||
import { useParams, useNavigate } from "react-router-dom";
|
return <div>TrafficPoolDetail</div>;
|
||||||
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;
|
|
||||||
|
|||||||
@@ -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";
|
export default function TrafficPoolList() {
|
||||||
import { useNavigate } from "react-router-dom";
|
return <div>TrafficPoolList</div>;
|
||||||
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;
|
|
||||||
|
|||||||
Reference in New Issue
Block a user