Merge branch 'yongpxu-dev' into yongpxu-dev2
This commit is contained in:
笔记本里的永平
354
nkebao/src/pages/traffic-pool/detail/index.module.scss
Normal file
354
nkebao/src/pages/traffic-pool/detail/index.module.scss
Normal file
@@ -0,0 +1,354 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
469
nkebao/src/pages/traffic-pool/detail/index.tsx
Normal file
469
nkebao/src/pages/traffic-pool/detail/index.tsx
Normal file
@@ -0,0 +1,469 @@
|
||||
import React, { useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Card, Tabs, Tag, Avatar, Button, List, Grid } from "antd-mobile";
|
||||
import {
|
||||
UserOutline,
|
||||
MobileOutline,
|
||||
TeamOutline,
|
||||
StarFill,
|
||||
MessageOutline,
|
||||
EyeOutline,
|
||||
ClickOutline,
|
||||
PayCircleOutline,
|
||||
} from "antd-mobile-icons";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
import styles from "./index.module.scss";
|
||||
|
||||
// 复用类型定义和Mock数据生成函数
|
||||
import {
|
||||
Device,
|
||||
WechatAccount,
|
||||
CustomerService,
|
||||
TrafficPool,
|
||||
RFMScore,
|
||||
UserTag,
|
||||
UserInteraction,
|
||||
TrafficUser,
|
||||
RFM_SEGMENTS,
|
||||
generateMockDevices,
|
||||
generateMockWechatAccounts,
|
||||
generateMockCustomerServices,
|
||||
generateMockTrafficPools,
|
||||
generateRFMScore,
|
||||
generateMockInteractions,
|
||||
generateUserTags,
|
||||
} from "../list";
|
||||
|
||||
const mockDevices = generateMockDevices();
|
||||
const mockWechatAccounts = generateMockWechatAccounts(mockDevices);
|
||||
const mockCustomerServices = generateMockCustomerServices();
|
||||
const mockTrafficPools = generateMockTrafficPools();
|
||||
|
||||
// 生成Mock用户数据
|
||||
const generateMockUsers = (
|
||||
devices: Device[],
|
||||
wechatAccounts: WechatAccount[],
|
||||
customerServices: CustomerService[],
|
||||
trafficPools: TrafficPool[]
|
||||
): TrafficUser[] => {
|
||||
return Array.from({ length: 500 }, (_, i) => {
|
||||
const rfmScore = generateRFMScore();
|
||||
const tags = generateUserTags(rfmScore);
|
||||
const interactions = generateMockInteractions();
|
||||
|
||||
const user: TrafficUser = {
|
||||
id: `user-${i + 1}`,
|
||||
avatar: `/placeholder.svg?height=40&width=40&query=user${Math.floor(Math.random() * 100)}`,
|
||||
nickname: `用户${i + 1}`,
|
||||
wechatId: `wx_${Math.random().toString(36).substr(2, 8)}`,
|
||||
phone: `1${Math.floor(Math.random() * 9) + 1}${Math.random().toString().substr(2, 9)}`,
|
||||
region: ["北京", "上海", "广州", "深圳", "杭州", "成都"][
|
||||
Math.floor(Math.random() * 6)
|
||||
],
|
||||
note: Math.random() > 0.7 ? `这是用户${i + 1}的备注信息` : "",
|
||||
status: ["pending", "added", "failed", "duplicate"][
|
||||
Math.floor(Math.random() * 4)
|
||||
] as any,
|
||||
addTime: new Date(
|
||||
Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000
|
||||
).toISOString(),
|
||||
source: "海报获客",
|
||||
scenario: "poster",
|
||||
deviceId: devices[Math.floor(Math.random() * devices.length)].id,
|
||||
wechatAccountId:
|
||||
wechatAccounts[Math.floor(Math.random() * wechatAccounts.length)].id,
|
||||
customerServiceId:
|
||||
customerServices[Math.floor(Math.random() * customerServices.length)]
|
||||
.id,
|
||||
poolIds:
|
||||
Math.random() > 0.5
|
||||
? [trafficPools[Math.floor(Math.random() * trafficPools.length)].id]
|
||||
: [],
|
||||
tags,
|
||||
rfmScore,
|
||||
lastInteraction: new Date(
|
||||
Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000
|
||||
).toISOString(),
|
||||
totalSpent: Math.floor(Math.random() * 10000),
|
||||
interactionCount: Math.floor(Math.random() * 50) + 1,
|
||||
conversionRate: Math.floor(Math.random() * 100),
|
||||
isDuplicate: Math.random() > 0.9,
|
||||
mergedAccounts: [],
|
||||
addStatus: ["not_added", "adding", "added", "failed"][
|
||||
Math.floor(Math.random() * 4)
|
||||
] as any,
|
||||
interactions,
|
||||
};
|
||||
|
||||
return user;
|
||||
});
|
||||
};
|
||||
|
||||
const users = generateMockUsers(
|
||||
mockDevices,
|
||||
mockWechatAccounts,
|
||||
mockCustomerServices,
|
||||
mockTrafficPools
|
||||
);
|
||||
|
||||
const TrafficPoolDetail: React.FC = () => {
|
||||
const { id } = useParams();
|
||||
const [activeTab, setActiveTab] = useState("base");
|
||||
|
||||
const user = users.find((u: TrafficUser) => u.id === id);
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<Layout>
|
||||
<div className={styles.notFound}>
|
||||
<div className={styles.notFoundText}>未找到该用户</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
const wechatAccount = mockWechatAccounts.find(
|
||||
(acc) => acc.id === user.wechatAccountId
|
||||
);
|
||||
const customerService = mockCustomerServices.find(
|
||||
(cs) => cs.id === user.customerServiceId
|
||||
);
|
||||
const device = mockDevices.find((device) => device.id === user.deviceId);
|
||||
const rfmSegment = Object.values(RFM_SEGMENTS).find(
|
||||
(seg: any) => seg.name === user.rfmScore.segment
|
||||
);
|
||||
|
||||
// 辅助函数
|
||||
const getPoolNames = (poolIds: string[]) => {
|
||||
return poolIds
|
||||
.map((id) => mockTrafficPools.find((pool) => pool.id === id)?.name)
|
||||
.filter(Boolean)
|
||||
.join(", ");
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
if (!dateString) return "--";
|
||||
try {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString("zh-CN");
|
||||
} catch (error) {
|
||||
return dateString;
|
||||
}
|
||||
};
|
||||
|
||||
const getInteractionIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "click":
|
||||
return <ClickOutline className={styles.interactionIcon} />;
|
||||
case "message":
|
||||
return <MessageOutline className={styles.interactionIcon} />;
|
||||
case "purchase":
|
||||
return <PayCircleOutline className={styles.interactionIcon} />;
|
||||
case "view":
|
||||
return <EyeOutline className={styles.interactionIcon} />;
|
||||
default:
|
||||
return <MessageOutline className={styles.interactionIcon} />;
|
||||
}
|
||||
};
|
||||
|
||||
const getInteractionTypeText = (type: string) => {
|
||||
switch (type) {
|
||||
case "click":
|
||||
return "点击行为";
|
||||
case "message":
|
||||
return "消息互动";
|
||||
case "purchase":
|
||||
return "购买行为";
|
||||
case "view":
|
||||
return "页面浏览";
|
||||
default:
|
||||
return type;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case "added":
|
||||
return "已添加";
|
||||
case "pending":
|
||||
return "未添加";
|
||||
case "failed":
|
||||
return "添加失败";
|
||||
case "duplicate":
|
||||
return "重复";
|
||||
default:
|
||||
return status;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "added":
|
||||
return "success";
|
||||
case "pending":
|
||||
return "default";
|
||||
case "failed":
|
||||
return "danger";
|
||||
case "duplicate":
|
||||
return "warning";
|
||||
default:
|
||||
return "default";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout header={<NavCommon title="用户详情" />}>
|
||||
<div className={styles.container}>
|
||||
{/* 用户基本信息 */}
|
||||
<Card className={styles.userCard}>
|
||||
<div className={styles.userHeader}>
|
||||
<Avatar src={user.avatar} className={styles.userAvatar}>
|
||||
{user.nickname?.slice(0, 2) || "用户"}
|
||||
</Avatar>
|
||||
<div className={styles.userInfo}>
|
||||
<div className={styles.userName}>
|
||||
{user.nickname}
|
||||
{user.rfmScore.priority === "high" && (
|
||||
<StarFill className={styles.starIcon} />
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.userWechatId}>{user.wechatId}</div>
|
||||
<div className={styles.userTags}>
|
||||
{user.poolIds.length > 0 && (
|
||||
<Tag color="primary" size="small">
|
||||
{getPoolNames(user.poolIds)}
|
||||
</Tag>
|
||||
)}
|
||||
{user.status === "added" && (
|
||||
<Tag color="success" size="small">
|
||||
优先添加
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RFM标签 */}
|
||||
<div className={styles.rfmTags}>
|
||||
{rfmSegment && (
|
||||
<Tag color={rfmSegment.color} size="small">
|
||||
{rfmSegment.name}
|
||||
</Tag>
|
||||
)}
|
||||
{user.status === "added" && (
|
||||
<Tag color="warning" size="small">
|
||||
优先添加
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Tab导航 */}
|
||||
<Tabs
|
||||
activeKey={activeTab}
|
||||
onChange={setActiveTab}
|
||||
className={styles.tabs}
|
||||
>
|
||||
<Tabs.Tab title="基本信息" key="base">
|
||||
<div className={styles.tabContent}>
|
||||
{/* 关键信息卡片 */}
|
||||
<Card className={styles.infoCard}>
|
||||
<div className={styles.cardTitle}>关键信息</div>
|
||||
<Grid columns={2} gap={8}>
|
||||
<div className={styles.infoItem}>
|
||||
<div className={styles.infoLabel}>设备</div>
|
||||
<div className={styles.infoValue}>
|
||||
{device?.name || "--"}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.infoItem}>
|
||||
<div className={styles.infoLabel}>微信号</div>
|
||||
<div className={styles.infoValue}>
|
||||
{wechatAccount?.nickname || "--"}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.infoItem}>
|
||||
<div className={styles.infoLabel}>客服</div>
|
||||
<div className={styles.infoValue}>
|
||||
{customerService?.name || "--"}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.infoItem}>
|
||||
<div className={styles.infoLabel}>添加时间</div>
|
||||
<div className={styles.infoValue}>
|
||||
{formatDate(user.addTime)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.infoItem}>
|
||||
<div className={styles.infoLabel}>最近互动</div>
|
||||
<div className={styles.infoValue}>
|
||||
{formatDate(user.lastInteraction)}
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
</Card>
|
||||
|
||||
{/* RFM评分卡片 */}
|
||||
<Card className={styles.rfmCard}>
|
||||
<div className={styles.cardTitle}>RFM评分</div>
|
||||
<div className={styles.rfmGrid}>
|
||||
<div className={styles.rfmItem}>
|
||||
<div className={styles.rfmValue}>
|
||||
{user.rfmScore.recency}
|
||||
</div>
|
||||
<div className={styles.rfmLabel}>最近性(R)</div>
|
||||
</div>
|
||||
<div className={styles.rfmItem}>
|
||||
<div className={styles.rfmValue}>
|
||||
{user.rfmScore.frequency}
|
||||
</div>
|
||||
<div className={styles.rfmLabel}>频率(F)</div>
|
||||
</div>
|
||||
<div className={styles.rfmItem}>
|
||||
<div className={styles.rfmValue}>
|
||||
{user.rfmScore.monetary}
|
||||
</div>
|
||||
<div className={styles.rfmLabel}>金额(M)</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 流量池按钮 */}
|
||||
<div className={styles.poolButtons}>
|
||||
<Button fill="outline" size="small">
|
||||
潜在客户池
|
||||
</Button>
|
||||
<Button fill="outline" size="small">
|
||||
流失预警池
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 统计数据卡片 */}
|
||||
<Card className={styles.statsCard}>
|
||||
<Grid columns={2} gap={16}>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statValue}>¥{user.totalSpent}</div>
|
||||
<div className={styles.statLabel}>总消费</div>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statValue}>
|
||||
{user.interactionCount}
|
||||
</div>
|
||||
<div className={styles.statLabel}>互动次数</div>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statValue}>
|
||||
{user.conversionRate}%
|
||||
</div>
|
||||
<div className={styles.statLabel}>转化率</div>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<div className={styles.statValue}>
|
||||
{getStatusText(user.status)}
|
||||
</div>
|
||||
<div className={styles.statLabel}>添加状态</div>
|
||||
</div>
|
||||
</Grid>
|
||||
</Card>
|
||||
</div>
|
||||
</Tabs.Tab>
|
||||
|
||||
<Tabs.Tab title="用户旅程" key="journey">
|
||||
<div className={styles.tabContent}>
|
||||
<Card className={styles.interactionCard}>
|
||||
<div className={styles.cardTitle}>互动记录</div>
|
||||
{user.interactions && user.interactions.length > 0 ? (
|
||||
<List className={styles.interactionList}>
|
||||
{user.interactions.slice(0, 4).map((interaction) => (
|
||||
<List.Item
|
||||
key={interaction.id}
|
||||
className={styles.interactionItem}
|
||||
prefix={getInteractionIcon(interaction.type)}
|
||||
>
|
||||
<div className={styles.interactionContent}>
|
||||
<div className={styles.interactionTitle}>
|
||||
{getInteractionTypeText(interaction.type)}
|
||||
</div>
|
||||
<div className={styles.interactionDesc}>
|
||||
{interaction.content}
|
||||
{interaction.type === "purchase" &&
|
||||
interaction.value && (
|
||||
<span className={styles.interactionValue}>
|
||||
¥{interaction.value}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.interactionTime}>
|
||||
{formatDate(interaction.timestamp)}{" "}
|
||||
{new Date(interaction.timestamp).toLocaleTimeString(
|
||||
"zh-CN",
|
||||
{
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</List.Item>
|
||||
))}
|
||||
</List>
|
||||
) : (
|
||||
<div className={styles.emptyState}>暂无互动记录</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</Tabs.Tab>
|
||||
|
||||
<Tabs.Tab title="用户标签" key="tags">
|
||||
<div className={styles.tabContent}>
|
||||
<Card className={styles.tagsCard}>
|
||||
<div className={styles.cardTitle}>用户标签</div>
|
||||
<div className={styles.tagsList}>
|
||||
{user.tags.map((tag) => (
|
||||
<Tag key={tag.id} color={tag.color} size="small">
|
||||
{tag.name}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.valueTags}>
|
||||
<div className={styles.valueTitle}>价值标签</div>
|
||||
<div className={styles.valueTagItem}>
|
||||
<Tag color="primary" size="small">
|
||||
重要保持客户
|
||||
</Tag>
|
||||
<span className={styles.rfmScore}>
|
||||
RFM总分：
|
||||
{user.rfmScore.recency +
|
||||
user.rfmScore.frequency +
|
||||
user.rfmScore.monetary}
|
||||
/15
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.valueTagItem}>
|
||||
<span className={styles.valueLabel}>价值等级：</span>
|
||||
<Tag color="danger" size="small">
|
||||
高价值
|
||||
</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Button
|
||||
block
|
||||
fill="outline"
|
||||
size="large"
|
||||
className={styles.addTagButton}
|
||||
>
|
||||
➕ 添加新标签
|
||||
</Button>
|
||||
</div>
|
||||
</Tabs.Tab>
|
||||
</Tabs>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default TrafficPoolDetail;
|
||||
365
nkebao/src/pages/traffic-pool/list/index.module.scss
Normal file
365
nkebao/src/pages/traffic-pool/list/index.module.scss
Normal file
@@ -0,0 +1,365 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
943
nkebao/src/pages/traffic-pool/list/index.tsx
Normal file
943
nkebao/src/pages/traffic-pool/list/index.tsx
Normal file
@@ -0,0 +1,943 @@
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import {
|
||||
Card,
|
||||
List,
|
||||
Button,
|
||||
SearchBar,
|
||||
Checkbox,
|
||||
Tag,
|
||||
Avatar,
|
||||
Toast,
|
||||
SpinLoading,
|
||||
Popup,
|
||||
Selector,
|
||||
InfiniteScroll,
|
||||
} from "antd-mobile";
|
||||
import {
|
||||
SearchOutline,
|
||||
FilterOutline,
|
||||
RefreshOutline,
|
||||
StarOutline,
|
||||
StarFill,
|
||||
UserOutline,
|
||||
MobileOutline,
|
||||
TeamOutline,
|
||||
BarChartOutline,
|
||||
ChevronDownOutline,
|
||||
ChevronUpOutline,
|
||||
} from "antd-mobile-icons";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
import styles from "./index.module.scss";
|
||||
|
||||
// 类型定义
|
||||
export interface Device {
|
||||
id: string;
|
||||
name: string;
|
||||
status: "online" | "offline" | "busy";
|
||||
battery: number;
|
||||
location: string;
|
||||
wechatAccounts: number;
|
||||
dailyAddLimit: number;
|
||||
todayAdded: number;
|
||||
}
|
||||
|
||||
export interface WechatAccount {
|
||||
id: string;
|
||||
nickname: string;
|
||||
wechatId: string;
|
||||
avatar: string;
|
||||
deviceId: string;
|
||||
status: "normal" | "limited" | "blocked";
|
||||
friendCount: number;
|
||||
dailyAddLimit: number;
|
||||
}
|
||||
|
||||
export interface CustomerService {
|
||||
id: string;
|
||||
name: string;
|
||||
avatar: string;
|
||||
status: "online" | "offline" | "busy";
|
||||
assignedUsers: number;
|
||||
}
|
||||
|
||||
export interface TrafficPool {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
userCount: number;
|
||||
tags: string[];
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface RFMScore {
|
||||
recency: number;
|
||||
frequency: number;
|
||||
monetary: number;
|
||||
total: number;
|
||||
segment: string;
|
||||
priority: "high" | "medium" | "low";
|
||||
}
|
||||
|
||||
export interface UserTag {
|
||||
id: string;
|
||||
name: string;
|
||||
color: string;
|
||||
source: string;
|
||||
}
|
||||
|
||||
export interface UserInteraction {
|
||||
id: string;
|
||||
type: "message" | "purchase" | "view" | "click";
|
||||
content: string;
|
||||
timestamp: string;
|
||||
value?: number;
|
||||
}
|
||||
|
||||
export interface TrafficUser {
|
||||
id: string;
|
||||
avatar: string;
|
||||
nickname: string;
|
||||
wechatId: string;
|
||||
phone: string;
|
||||
region: string;
|
||||
note: string;
|
||||
status: "pending" | "added" | "failed" | "duplicate";
|
||||
addTime: string;
|
||||
source: string;
|
||||
scenario: string;
|
||||
deviceId: string;
|
||||
wechatAccountId: string;
|
||||
customerServiceId: string;
|
||||
poolIds: string[];
|
||||
tags: UserTag[];
|
||||
rfmScore: RFMScore;
|
||||
lastInteraction: string;
|
||||
totalSpent: number;
|
||||
interactionCount: number;
|
||||
conversionRate: number;
|
||||
isDuplicate: boolean;
|
||||
mergedAccounts: string[];
|
||||
addStatus: "not_added" | "adding" | "added" | "failed";
|
||||
interactions: UserInteraction[];
|
||||
}
|
||||
|
||||
// 常量定义
|
||||
export const SCENARIOS = [
|
||||
{ id: "poster", name: "海报获客", icon: "🎨" },
|
||||
{ id: "phone", name: "电话获客", icon: "📞" },
|
||||
{ id: "douyin", name: "抖音获客", icon: "🎵" },
|
||||
{ id: "xiaohongshu", name: "小红书获客", icon: "📖" },
|
||||
{ id: "weixinqun", name: "微信群获客", icon: "👥" },
|
||||
{ id: "api", name: "API获客", icon: "🔗" },
|
||||
{ id: "order", name: "订单获客", icon: "📦" },
|
||||
{ id: "payment", name: "付款码获客", icon: "💳" },
|
||||
];
|
||||
|
||||
export const RFM_SEGMENTS = {
|
||||
"555": {
|
||||
name: "重要价值客户",
|
||||
color: "red",
|
||||
icon: "👑",
|
||||
priority: "high",
|
||||
},
|
||||
"554": {
|
||||
name: "重要保持客户",
|
||||
color: "purple",
|
||||
icon: "💎",
|
||||
priority: "high",
|
||||
},
|
||||
"544": {
|
||||
name: "重要发展客户",
|
||||
color: "blue",
|
||||
icon: "🚀",
|
||||
priority: "high",
|
||||
},
|
||||
"455": {
|
||||
name: "重要挽留客户",
|
||||
color: "orange",
|
||||
icon: "⚠️",
|
||||
priority: "medium",
|
||||
},
|
||||
"444": {
|
||||
name: "一般价值客户",
|
||||
color: "green",
|
||||
icon: "👤",
|
||||
priority: "medium",
|
||||
},
|
||||
"333": {
|
||||
name: "一般保持客户",
|
||||
color: "yellow",
|
||||
icon: "📈",
|
||||
priority: "medium",
|
||||
},
|
||||
"222": {
|
||||
name: "新用户",
|
||||
color: "cyan",
|
||||
icon: "🌟",
|
||||
priority: "low",
|
||||
},
|
||||
"111": {
|
||||
name: "流失预警客户",
|
||||
color: "gray",
|
||||
icon: "😴",
|
||||
priority: "low",
|
||||
},
|
||||
} as const;
|
||||
|
||||
// Mock数据生成函数
|
||||
const generateMockDevices = (): Device[] => {
|
||||
return Array.from({ length: 8 }, (_, i) => ({
|
||||
id: `device-${i + 1}`,
|
||||
name: `设备${i + 1}`,
|
||||
status: ["online", "offline", "busy"][Math.floor(Math.random() * 3)] as
|
||||
| "online"
|
||||
| "offline"
|
||||
| "busy",
|
||||
battery: Math.floor(Math.random() * 100),
|
||||
location: ["北京", "上海", "广州", "深圳"][Math.floor(Math.random() * 4)],
|
||||
wechatAccounts: Math.floor(Math.random() * 5) + 1,
|
||||
dailyAddLimit: Math.random() > 0.5 ? 20 : 10,
|
||||
todayAdded: Math.floor(Math.random() * 15),
|
||||
}));
|
||||
};
|
||||
|
||||
const generateMockWechatAccounts = (devices: Device[]): WechatAccount[] => {
|
||||
const accounts: WechatAccount[] = [];
|
||||
devices.forEach((device) => {
|
||||
for (let i = 0; i < device.wechatAccounts; i++) {
|
||||
accounts.push({
|
||||
id: `wx-${device.id}-${i + 1}`,
|
||||
nickname: `微信${device.id.split("-")[1]}-${i + 1}`,
|
||||
wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
|
||||
avatar: `/placeholder.svg?height=40&width=40&query=wx${Math.floor(Math.random() * 10)}`,
|
||||
deviceId: device.id,
|
||||
status: ["normal", "limited", "blocked"][
|
||||
Math.floor(Math.random() * 3)
|
||||
] as "normal" | "limited" | "blocked",
|
||||
friendCount: Math.floor(Math.random() * 4000) + 1000,
|
||||
dailyAddLimit: Math.random() > 0.5 ? 20 : 10,
|
||||
});
|
||||
}
|
||||
});
|
||||
return accounts;
|
||||
};
|
||||
|
||||
const generateMockCustomerServices = (): CustomerService[] => {
|
||||
return Array.from({ length: 5 }, (_, i) => ({
|
||||
id: `cs-${i + 1}`,
|
||||
name: `客服${i + 1}`,
|
||||
avatar: `/placeholder.svg?height=40&width=40&query=cs${i}`,
|
||||
status: ["online", "offline", "busy"][Math.floor(Math.random() * 3)] as
|
||||
| "online"
|
||||
| "offline"
|
||||
| "busy",
|
||||
assignedUsers: Math.floor(Math.random() * 100) + 50,
|
||||
}));
|
||||
};
|
||||
|
||||
const generateMockTrafficPools = (): TrafficPool[] => {
|
||||
return [
|
||||
{
|
||||
id: "pool-1",
|
||||
name: "高价值客户池",
|
||||
description: "包含所有高价值客户，优先添加",
|
||||
userCount: 156,
|
||||
tags: ["高价值", "优先添加", "重要客户"],
|
||||
createdAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: "pool-2",
|
||||
name: "潜在客户池",
|
||||
description: "有潜力的用户，需要进一步培养",
|
||||
userCount: 289,
|
||||
tags: ["潜在客户", "需培养"],
|
||||
createdAt: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: "pool-3",
|
||||
name: "新用户池",
|
||||
description: "新注册或新添加的用户",
|
||||
userCount: 432,
|
||||
tags: ["新用户", "待分类"],
|
||||
createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const generateRFMScore = (): RFMScore => {
|
||||
const recency = Math.floor(Math.random() * 5) + 1;
|
||||
const frequency = Math.floor(Math.random() * 5) + 1;
|
||||
const monetary = Math.floor(Math.random() * 5) + 1;
|
||||
const total = recency + frequency + monetary;
|
||||
|
||||
let segment: string;
|
||||
let priority: "high" | "medium" | "low";
|
||||
|
||||
if (total >= 12) {
|
||||
segment = Object.values(RFM_SEGMENTS)[Math.floor(Math.random() * 3)].name;
|
||||
priority = "high";
|
||||
} else if (total >= 8) {
|
||||
segment =
|
||||
Object.values(RFM_SEGMENTS)[3 + Math.floor(Math.random() * 3)].name;
|
||||
priority = "medium";
|
||||
} else {
|
||||
segment =
|
||||
Object.values(RFM_SEGMENTS)[6 + Math.floor(Math.random() * 2)].name;
|
||||
priority = "low";
|
||||
}
|
||||
|
||||
return { recency, frequency, monetary, total, segment, priority };
|
||||
};
|
||||
|
||||
const generateMockInteractions = (): UserInteraction[] => {
|
||||
const types = ["message", "purchase", "view", "click"] as const;
|
||||
return Array.from({ length: Math.floor(Math.random() * 10) + 1 }, (_, i) => {
|
||||
const type = types[Math.floor(Math.random() * types.length)];
|
||||
return {
|
||||
id: `interaction-${i + 1}`,
|
||||
type,
|
||||
content:
|
||||
type === "message"
|
||||
? "用户发送了消息"
|
||||
: type === "purchase"
|
||||
? "用户购买了产品"
|
||||
: type === "view"
|
||||
? "用户查看了产品"
|
||||
: "用户点击了链接",
|
||||
timestamp: new Date(
|
||||
Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000
|
||||
).toISOString(),
|
||||
value:
|
||||
type === "purchase"
|
||||
? Math.floor(Math.random() * 1000) + 100
|
||||
: undefined,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const generateUserTags = (rfmScore: RFMScore): UserTag[] => {
|
||||
const allTags = [
|
||||
{ id: "tag-1", name: "活跃用户", color: "success", source: "system" },
|
||||
{ id: "tag-2", name: "高消费", color: "danger", source: "system" },
|
||||
{ id: "tag-3", name: "忠实客户", color: "primary", source: "system" },
|
||||
{ id: "tag-4", name: "新用户", color: "warning", source: "system" },
|
||||
{ id: "tag-5", name: "VIP客户", color: "purple", source: "manual" },
|
||||
{ id: "tag-6", name: "潜在客户", color: "default", source: "system" },
|
||||
];
|
||||
|
||||
const tags: UserTag[] = [];
|
||||
|
||||
if (rfmScore.priority === "high") {
|
||||
tags.push(allTags[1], allTags[2]);
|
||||
if (Math.random() > 0.5) tags.push(allTags[4]);
|
||||
} else if (rfmScore.priority === "medium") {
|
||||
tags.push(allTags[0]);
|
||||
if (Math.random() > 0.5) tags.push(allTags[5]);
|
||||
} else {
|
||||
tags.push(allTags[3]);
|
||||
if (Math.random() > 0.3) tags.push(allTags[5]);
|
||||
}
|
||||
|
||||
return tags;
|
||||
};
|
||||
|
||||
const mockDevices = generateMockDevices();
|
||||
const mockWechatAccounts = generateMockWechatAccounts(mockDevices);
|
||||
const mockCustomerServices = generateMockCustomerServices();
|
||||
const mockTrafficPools = generateMockTrafficPools();
|
||||
|
||||
const generateMockUsers = (
|
||||
devices: Device[],
|
||||
wechatAccounts: WechatAccount[],
|
||||
customerServices: CustomerService[],
|
||||
trafficPools: TrafficPool[]
|
||||
): TrafficUser[] => {
|
||||
return Array.from({ length: 500 }, (_, i) => {
|
||||
const rfmScore = generateRFMScore();
|
||||
const tags = generateUserTags(rfmScore);
|
||||
const interactions = generateMockInteractions();
|
||||
|
||||
const user: TrafficUser = {
|
||||
id: `user-${i + 1}`,
|
||||
avatar: `/placeholder.svg?height=40&width=40&query=user${Math.floor(Math.random() * 100)}`,
|
||||
nickname: `用户${i + 1}`,
|
||||
wechatId: `wx_${Math.random().toString(36).substr(2, 8)}`,
|
||||
phone: `1${Math.floor(Math.random() * 9) + 1}${Math.random().toString().substr(2, 9)}`,
|
||||
region: ["北京", "上海", "广州", "深圳", "杭州", "成都"][
|
||||
Math.floor(Math.random() * 6)
|
||||
],
|
||||
note: Math.random() > 0.7 ? `这是用户${i + 1}的备注信息` : "",
|
||||
status: ["pending", "added", "failed", "duplicate"][
|
||||
Math.floor(Math.random() * 4)
|
||||
] as any,
|
||||
addTime: new Date(
|
||||
Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000
|
||||
).toISOString(),
|
||||
source: SCENARIOS[Math.floor(Math.random() * SCENARIOS.length)].name,
|
||||
scenario: SCENARIOS[Math.floor(Math.random() * SCENARIOS.length)].id,
|
||||
deviceId: devices[Math.floor(Math.random() * devices.length)].id,
|
||||
wechatAccountId:
|
||||
wechatAccounts[Math.floor(Math.random() * wechatAccounts.length)].id,
|
||||
customerServiceId:
|
||||
customerServices[Math.floor(Math.random() * customerServices.length)]
|
||||
.id,
|
||||
poolIds:
|
||||
Math.random() > 0.5
|
||||
? [trafficPools[Math.floor(Math.random() * trafficPools.length)].id]
|
||||
: [],
|
||||
tags,
|
||||
rfmScore,
|
||||
lastInteraction: new Date(
|
||||
Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000
|
||||
).toISOString(),
|
||||
totalSpent: Math.floor(Math.random() * 10000),
|
||||
interactionCount: Math.floor(Math.random() * 50) + 1,
|
||||
conversionRate: Math.floor(Math.random() * 100),
|
||||
isDuplicate: Math.random() > 0.9,
|
||||
mergedAccounts: [],
|
||||
addStatus: ["not_added", "adding", "added", "failed"][
|
||||
Math.floor(Math.random() * 4)
|
||||
] as any,
|
||||
interactions,
|
||||
};
|
||||
|
||||
return user;
|
||||
});
|
||||
};
|
||||
|
||||
const TrafficPoolList: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
// 基础数据状态
|
||||
const [users, setUsers] = useState<TrafficUser[]>([]);
|
||||
const [devices] = useState<Device[]>(mockDevices);
|
||||
const [wechatAccounts] = useState<WechatAccount[]>(mockWechatAccounts);
|
||||
const [customerServices] = useState<CustomerService[]>(mockCustomerServices);
|
||||
const [trafficPools] = useState<TrafficPool[]>(mockTrafficPools);
|
||||
|
||||
// UI状态
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
const [showAnalytics, setShowAnalytics] = useState(false);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
// 筛选状态
|
||||
const [deviceFilter, setDeviceFilter] = useState("all");
|
||||
const [poolFilter, setPoolFilter] = useState("all");
|
||||
const [valuationFilter, setValuationFilter] = useState("all");
|
||||
const [statusFilter, setStatusFilter] = useState("all");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
// 初始化数据
|
||||
useEffect(() => {
|
||||
const mockUsers = generateMockUsers(
|
||||
devices,
|
||||
wechatAccounts,
|
||||
customerServices,
|
||||
trafficPools
|
||||
);
|
||||
setUsers(mockUsers);
|
||||
}, [devices, wechatAccounts, customerServices, trafficPools]);
|
||||
|
||||
// 计算统计数据
|
||||
const stats = {
|
||||
total: users.length,
|
||||
highValue: users.filter((u) => u.rfmScore.priority === "high").length,
|
||||
mediumValue: users.filter((u) => u.rfmScore.priority === "medium").length,
|
||||
lowValue: users.filter((u) => u.rfmScore.priority === "low").length,
|
||||
duplicates: users.filter((u) => u.isDuplicate).length,
|
||||
pending: users.filter((u) => u.status === "pending").length,
|
||||
added: users.filter((u) => u.status === "added").length,
|
||||
failed: users.filter((u) => u.status === "failed").length,
|
||||
avgSpent: Math.round(
|
||||
users.reduce((sum, u) => sum + u.totalSpent, 0) / users.length
|
||||
),
|
||||
addSuccessRate: Math.round(
|
||||
(users.filter((u) => u.status === "added").length / users.length) * 100
|
||||
),
|
||||
duplicateRate: Math.round(
|
||||
(users.filter((u) => u.isDuplicate).length / users.length) * 100
|
||||
),
|
||||
};
|
||||
|
||||
// 过滤用户
|
||||
const filteredUsers = users.filter((user) => {
|
||||
const matchesSearch =
|
||||
!searchQuery ||
|
||||
user.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
user.wechatId.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
user.phone.includes(searchQuery);
|
||||
|
||||
const matchesDevice =
|
||||
deviceFilter === "all" || user.deviceId === deviceFilter;
|
||||
const matchesValuation =
|
||||
valuationFilter === "all" || user.rfmScore.priority === valuationFilter;
|
||||
const matchesStatus =
|
||||
statusFilter === "all" || user.status === statusFilter;
|
||||
const matchesPool =
|
||||
poolFilter === "all" ||
|
||||
(poolFilter === "none"
|
||||
? user.poolIds.length === 0
|
||||
: user.poolIds.includes(poolFilter));
|
||||
|
||||
return (
|
||||
matchesSearch &&
|
||||
matchesDevice &&
|
||||
matchesValuation &&
|
||||
matchesStatus &&
|
||||
matchesPool
|
||||
);
|
||||
});
|
||||
|
||||
// 按优先级排序
|
||||
const sortedUsers = filteredUsers.sort((a, b) => {
|
||||
const priorityOrder = { high: 3, medium: 2, low: 1 };
|
||||
return (
|
||||
priorityOrder[b.rfmScore.priority] - priorityOrder[a.rfmScore.priority]
|
||||
);
|
||||
});
|
||||
|
||||
// 分页数据
|
||||
const pageSize = 20;
|
||||
const paginatedUsers = sortedUsers.slice(0, page * pageSize);
|
||||
|
||||
// 处理用户选择
|
||||
const handleUserSelect = useCallback((userId: string, checked: boolean) => {
|
||||
setSelectedUsers((prev) =>
|
||||
checked ? [...prev, userId] : prev.filter((id) => id !== userId)
|
||||
);
|
||||
}, []);
|
||||
|
||||
// 处理全选
|
||||
const handleSelectAll = useCallback(
|
||||
(checked: boolean) => {
|
||||
if (checked) {
|
||||
setSelectedUsers(paginatedUsers.map((user) => user.id));
|
||||
} else {
|
||||
setSelectedUsers([]);
|
||||
}
|
||||
},
|
||||
[paginatedUsers]
|
||||
);
|
||||
|
||||
// 重置筛选器
|
||||
const resetFilters = useCallback(() => {
|
||||
setDeviceFilter("all");
|
||||
setPoolFilter("all");
|
||||
setValuationFilter("all");
|
||||
setStatusFilter("all");
|
||||
setSearchQuery("");
|
||||
setShowFilters(false);
|
||||
}, []);
|
||||
|
||||
// 刷新数据
|
||||
const handleRefresh = useCallback(() => {
|
||||
setLoading(true);
|
||||
setTimeout(() => {
|
||||
const refreshedUsers = generateMockUsers(
|
||||
devices,
|
||||
wechatAccounts,
|
||||
customerServices,
|
||||
trafficPools
|
||||
);
|
||||
setUsers(refreshedUsers);
|
||||
setLoading(false);
|
||||
Toast.show({ content: "刷新成功" });
|
||||
}, 800);
|
||||
}, [devices, wechatAccounts, customerServices, trafficPools]);
|
||||
|
||||
// 添加到流量池
|
||||
const handleAddToPool = useCallback(() => {
|
||||
if (selectedUsers.length === 0) {
|
||||
Toast.show({ content: "请先选择要添加到流量池的用户" });
|
||||
return;
|
||||
}
|
||||
Toast.show({ content: `已将 ${selectedUsers.length} 个用户添加到流量池` });
|
||||
setSelectedUsers([]);
|
||||
}, [selectedUsers.length]);
|
||||
|
||||
// 加载更多
|
||||
const loadMore = async () => {
|
||||
if (page * pageSize >= sortedUsers.length) {
|
||||
setHasMore(false);
|
||||
return;
|
||||
}
|
||||
setPage((prev) => prev + 1);
|
||||
};
|
||||
|
||||
// 辅助函数
|
||||
const getWechatAccount = (accountId: string) => {
|
||||
return wechatAccounts.find((acc) => acc.id === accountId);
|
||||
};
|
||||
|
||||
const getCustomerService = (csId: string) => {
|
||||
return customerServices.find((cs) => cs.id === csId);
|
||||
};
|
||||
|
||||
const getDevice = (deviceId: string) => {
|
||||
return devices.find((device) => device.id === deviceId);
|
||||
};
|
||||
|
||||
const getPoolNames = (poolIds: string[]) => {
|
||||
return poolIds
|
||||
.map((id) => trafficPools.find((pool) => pool.id === id)?.name)
|
||||
.filter(Boolean)
|
||||
.join(", ");
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
if (!dateString) return "--";
|
||||
try {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString("zh-CN");
|
||||
} catch (error) {
|
||||
return dateString;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case "added":
|
||||
return "已添加";
|
||||
case "pending":
|
||||
return "未添加";
|
||||
case "failed":
|
||||
return "添加失败";
|
||||
case "duplicate":
|
||||
return "重复";
|
||||
default:
|
||||
return status;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "added":
|
||||
return "success";
|
||||
case "pending":
|
||||
return "default";
|
||||
case "failed":
|
||||
return "danger";
|
||||
case "duplicate":
|
||||
return "warning";
|
||||
default:
|
||||
return "default";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavCommon
|
||||
title="流量池管理"
|
||||
right={
|
||||
<div className={styles.headerActions}>
|
||||
<Button
|
||||
fill="none"
|
||||
size="small"
|
||||
onClick={() => setShowAnalytics(!showAnalytics)}
|
||||
>
|
||||
<BarChartOutline />
|
||||
{showAnalytics ? <ChevronUpOutline /> : <ChevronDownOutline />}
|
||||
</Button>
|
||||
<Button
|
||||
fill="none"
|
||||
size="small"
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
>
|
||||
<RefreshOutline className={loading ? styles.spinning : ""} />
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
}
|
||||
loading={loading}
|
||||
>
|
||||
<div className={styles.container}>
|
||||
{/* 数据分析面板 */}
|
||||
{showAnalytics && (
|
||||
<div className={styles.analyticsPanel}>
|
||||
<div className={styles.statsGrid}>
|
||||
<Card className={styles.statCard}>
|
||||
<div className={styles.statContent}>
|
||||
<div className={styles.statValue}>{filteredUsers.length}</div>
|
||||
<div className={styles.statLabel}>总用户数</div>
|
||||
</div>
|
||||
<UserOutline className={styles.statIcon} />
|
||||
</Card>
|
||||
<Card className={styles.statCard}>
|
||||
<div className={styles.statContent}>
|
||||
<div className={styles.statValue}>{stats.highValue}</div>
|
||||
<div className={styles.statLabel}>高价值用户</div>
|
||||
</div>
|
||||
<StarFill className={styles.statIcon} />
|
||||
</Card>
|
||||
</div>
|
||||
<Card className={styles.efficiencyCard}>
|
||||
<div className={styles.efficiencyTitle}>添加效率</div>
|
||||
<div className={styles.efficiencyGrid}>
|
||||
<div className={styles.efficiencyItem}>
|
||||
<div className={styles.efficiencyValue}>
|
||||
{stats.addSuccessRate}%
|
||||
</div>
|
||||
<div className={styles.efficiencyLabel}>成功率</div>
|
||||
</div>
|
||||
<div className={styles.efficiencyItem}>
|
||||
<div className={styles.efficiencyValue}>
|
||||
¥{stats.avgSpent}
|
||||
</div>
|
||||
<div className={styles.efficiencyLabel}>平均消费</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statusGrid}>
|
||||
<div className={styles.statusItem}>
|
||||
<div className={styles.statusValue}>{stats.added}</div>
|
||||
<div className={styles.statusLabel}>已添加</div>
|
||||
</div>
|
||||
<div className={styles.statusItem}>
|
||||
<div className={styles.statusValue}>{stats.pending}</div>
|
||||
<div className={styles.statusLabel}>待添加</div>
|
||||
</div>
|
||||
<div className={styles.statusItem}>
|
||||
<div className={styles.statusValue}>{stats.failed}</div>
|
||||
<div className={styles.statusLabel}>添加失败</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 搜索和筛选 */}
|
||||
<div className={styles.searchSection}>
|
||||
<SearchBar
|
||||
placeholder="搜索用户昵称、微信号、手机号"
|
||||
value={searchQuery}
|
||||
onChange={setSearchQuery}
|
||||
style={{ "--border-radius": "8px" }}
|
||||
/>
|
||||
<Button
|
||||
fill="outline"
|
||||
size="small"
|
||||
onClick={() => setShowFilters(true)}
|
||||
className={styles.filterButton}
|
||||
>
|
||||
<FilterOutline />
|
||||
筛选
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 操作栏 */}
|
||||
<div className={styles.actionBar}>
|
||||
<div className={styles.selectSection}>
|
||||
<Checkbox
|
||||
checked={
|
||||
selectedUsers.length === paginatedUsers.length &&
|
||||
paginatedUsers.length > 0
|
||||
}
|
||||
onChange={handleSelectAll}
|
||||
>
|
||||
全选
|
||||
</Checkbox>
|
||||
{selectedUsers.length > 0 && (
|
||||
<Button
|
||||
size="small"
|
||||
color="primary"
|
||||
onClick={handleAddToPool}
|
||||
className={styles.addButton}
|
||||
>
|
||||
添加到流量池
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.totalCount}>
|
||||
共 {filteredUsers.length} 个用户
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 用户列表 */}
|
||||
<List className={styles.userList}>
|
||||
{paginatedUsers.map((user) => {
|
||||
const wechatAccount = getWechatAccount(user.wechatAccountId);
|
||||
const customerService = getCustomerService(user.customerServiceId);
|
||||
const device = getDevice(user.deviceId);
|
||||
|
||||
return (
|
||||
<List.Item
|
||||
key={user.id}
|
||||
className={styles.userItem}
|
||||
onClick={() => navigate(`/traffic-pool/detail/${user.id}`)}
|
||||
prefix={
|
||||
<div className={styles.userCheckbox}>
|
||||
<Checkbox
|
||||
checked={selectedUsers.includes(user.id)}
|
||||
onChange={(checked) => handleUserSelect(user.id, checked)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
arrow={false}
|
||||
>
|
||||
<div className={styles.userContent}>
|
||||
<div className={styles.userHeader}>
|
||||
<div className={styles.userInfo}>
|
||||
<Avatar src={user.avatar} className={styles.userAvatar}>
|
||||
{user.nickname?.slice(0, 1) || "用户"}
|
||||
</Avatar>
|
||||
<div className={styles.userDetails}>
|
||||
<div className={styles.userName}>
|
||||
{user.nickname}
|
||||
{user.rfmScore.priority === "high" && (
|
||||
<StarFill className={styles.starIcon} />
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.userWechatId}>
|
||||
{user.wechatId}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Tag color={getStatusColor(user.status)} size="small">
|
||||
{getStatusText(user.status)}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
<div className={styles.userMeta}>
|
||||
<div className={styles.metaItem}>
|
||||
<MobileOutline />
|
||||
<span>{device?.name || "设备0"}</span>
|
||||
</div>
|
||||
<div className={styles.metaItem}>
|
||||
<UserOutline />
|
||||
<span>{customerService?.name || "客服1"}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.userTags}>
|
||||
{user.tags.slice(0, 3).map((tag) => (
|
||||
<Tag key={tag.id} color={tag.color} size="small">
|
||||
{tag.name}
|
||||
</Tag>
|
||||
))}
|
||||
{user.tags.length > 3 && (
|
||||
<Tag color="default" size="small">
|
||||
+{user.tags.length - 3}
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{user.poolIds.length > 0 && (
|
||||
<div className={styles.poolInfo}>
|
||||
<TeamOutline />
|
||||
<span>{getPoolNames(user.poolIds)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</List.Item>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
|
||||
{/* 无限滚动 */}
|
||||
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
|
||||
</div>
|
||||
|
||||
{/* 筛选弹窗 */}
|
||||
<Popup
|
||||
visible={showFilters}
|
||||
onMaskClick={() => setShowFilters(false)}
|
||||
position="right"
|
||||
bodyStyle={{ width: "80vw" }}
|
||||
>
|
||||
<div className={styles.filterPopup}>
|
||||
<div className={styles.filterHeader}>
|
||||
<span>筛选选项</span>
|
||||
<Button
|
||||
fill="none"
|
||||
size="small"
|
||||
onClick={() => setShowFilters(false)}
|
||||
>
|
||||
关闭
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className={styles.filterContent}>
|
||||
<div className={styles.filterItem}>
|
||||
<div className={styles.filterLabel}>设备</div>
|
||||
<Selector
|
||||
options={[
|
||||
{ label: "全部设备", value: "all" },
|
||||
...devices.map((device) => ({
|
||||
label: `${device.name} - ${device.location}`,
|
||||
value: device.id,
|
||||
})),
|
||||
]}
|
||||
value={[deviceFilter]}
|
||||
onChange={(arr) => setDeviceFilter(arr[0])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.filterItem}>
|
||||
<div className={styles.filterLabel}>流量池</div>
|
||||
<Selector
|
||||
options={[
|
||||
{ label: "全部流量池", value: "all" },
|
||||
{ label: "未分配", value: "none" },
|
||||
...trafficPools.map((pool) => ({
|
||||
label: pool.name,
|
||||
value: pool.id,
|
||||
})),
|
||||
]}
|
||||
value={[poolFilter]}
|
||||
onChange={(arr) => setPoolFilter(arr[0])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.filterItem}>
|
||||
<div className={styles.filterLabel}>用户价值</div>
|
||||
<Selector
|
||||
options={[
|
||||
{ label: "全部价值", value: "all" },
|
||||
{ label: "高价值客户", value: "high" },
|
||||
{ label: "中价值客户", value: "medium" },
|
||||
{ label: "低价值客户", value: "low" },
|
||||
]}
|
||||
value={[valuationFilter]}
|
||||
onChange={(arr) => setValuationFilter(arr[0])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.filterItem}>
|
||||
<div className={styles.filterLabel}>添加状态</div>
|
||||
<Selector
|
||||
options={[
|
||||
{ label: "全部状态", value: "all" },
|
||||
{ label: "待添加", value: "pending" },
|
||||
{ label: "已添加", value: "added" },
|
||||
{ label: "添加失败", value: "failed" },
|
||||
{ label: "重复用户", value: "duplicate" },
|
||||
]}
|
||||
value={[statusFilter]}
|
||||
onChange={(arr) => setStatusFilter(arr[0])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.filterActions}>
|
||||
<Button fill="outline" onClick={resetFilters}>
|
||||
重置筛选
|
||||
</Button>
|
||||
<Button color="primary" onClick={() => setShowFilters(false)}>
|
||||
应用筛选
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default TrafficPoolList;
|
||||
@@ -5,7 +5,7 @@ import {
|
||||
UpdateLikeTaskData,
|
||||
LikeRecord,
|
||||
PaginatedResponse,
|
||||
} from "@/pages/workspace/auto-like/record/api";
|
||||
} from "@/pages/workspace/auto-like/record/data";
|
||||
|
||||
// 获取自动点赞任务列表
|
||||
export function fetchAutoLikeTasks(
|
||||
|
||||
@@ -23,7 +23,7 @@ import {
|
||||
toggleAutoLikeTask,
|
||||
copyAutoLikeTask,
|
||||
} from "./api";
|
||||
import { LikeTask } from "@/pages/workspace/auto-like/record/api";
|
||||
import { LikeTask } from "@/pages/workspace/auto-like/record/data";
|
||||
import style from "./index.module.scss";
|
||||
|
||||
// 卡片菜单组件
|
||||
|
||||
@@ -3,7 +3,7 @@ import {
|
||||
CreateLikeTaskData,
|
||||
UpdateLikeTaskData,
|
||||
LikeTask,
|
||||
} from "@/pages/workspace/auto-like/record/api";
|
||||
} from "@/pages/workspace/auto-like/record/data";
|
||||
|
||||
// 获取自动点赞任务详情
|
||||
export function fetchAutoLikeTaskDetail(id: string): Promise<LikeTask | null> {
|
||||
|
||||
@@ -15,7 +15,7 @@ import {
|
||||
import {
|
||||
CreateLikeTaskData,
|
||||
ContentType,
|
||||
} from "@/pages/workspace/auto-like/record/api";
|
||||
} from "@/pages/workspace/auto-like/record/data";
|
||||
import style from "./new.module.scss";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
|
||||
|
||||
@@ -1,119 +1,63 @@
|
||||
// 自动点赞任务状态
|
||||
export type LikeTaskStatus = 1 | 2; // 1: 开启, 2: 关闭
|
||||
import request from "@/api/request";
|
||||
import {
|
||||
LikeTask,
|
||||
CreateLikeTaskData,
|
||||
UpdateLikeTaskData,
|
||||
LikeRecord,
|
||||
PaginatedResponse,
|
||||
} from "@/pages/workspace/auto-like/record/data";
|
||||
|
||||
// 内容类型
|
||||
export type ContentType = "text" | "image" | "video" | "link";
|
||||
|
||||
// 设备信息
|
||||
export interface Device {
|
||||
id: string;
|
||||
name: string;
|
||||
status: "online" | "offline";
|
||||
lastActive: string;
|
||||
// 获取自动点赞任务列表
|
||||
export function fetchAutoLikeTasks(
|
||||
params = { type: 1, page: 1, limit: 100 }
|
||||
): Promise<LikeTask[]> {
|
||||
return request("/v1/workbench/list", params, "GET");
|
||||
}
|
||||
|
||||
// 好友信息
|
||||
export interface Friend {
|
||||
id: string;
|
||||
nickname: string;
|
||||
wechatId: string;
|
||||
avatar: string;
|
||||
tags: string[];
|
||||
region: string;
|
||||
source: string;
|
||||
// 获取单个任务详情
|
||||
export function fetchAutoLikeTaskDetail(id: string): Promise<LikeTask | null> {
|
||||
return request("/v1/workbench/detail", { id }, "GET");
|
||||
}
|
||||
|
||||
// 点赞记录
|
||||
export interface LikeRecord {
|
||||
id: string;
|
||||
workbenchId: string;
|
||||
momentsId: string;
|
||||
snsId: string;
|
||||
wechatAccountId: string;
|
||||
wechatFriendId: string;
|
||||
likeTime: string;
|
||||
content: string;
|
||||
resUrls: string[];
|
||||
momentTime: string;
|
||||
userName: string;
|
||||
operatorName: string;
|
||||
operatorAvatar: string;
|
||||
friendName: string;
|
||||
friendAvatar: string;
|
||||
// 创建自动点赞任务
|
||||
export function createAutoLikeTask(data: CreateLikeTaskData): Promise<any> {
|
||||
return request("/v1/workbench/create", { ...data, type: 1 }, "POST");
|
||||
}
|
||||
|
||||
// 自动点赞任务
|
||||
export interface LikeTask {
|
||||
id: string;
|
||||
name: string;
|
||||
status: LikeTaskStatus;
|
||||
deviceCount: number;
|
||||
targetGroup: string;
|
||||
likeCount: number;
|
||||
lastLikeTime: string;
|
||||
createTime: string;
|
||||
creator: string;
|
||||
likeInterval: number;
|
||||
maxLikesPerDay: number;
|
||||
timeRange: { start: string; end: string };
|
||||
contentTypes: ContentType[];
|
||||
targetTags: string[];
|
||||
devices: string[];
|
||||
friends: string[];
|
||||
friendMaxLikes: number;
|
||||
friendTags: string;
|
||||
enableFriendTags: boolean;
|
||||
todayLikeCount: number;
|
||||
totalLikeCount: number;
|
||||
updateTime: string;
|
||||
// 更新自动点赞任务
|
||||
export function updateAutoLikeTask(data: UpdateLikeTaskData): Promise<any> {
|
||||
return request("/v1/workbench/update", { ...data, type: 1 }, "POST");
|
||||
}
|
||||
|
||||
// 创建任务数据
|
||||
export interface CreateLikeTaskData {
|
||||
name: string;
|
||||
interval: number;
|
||||
maxLikes: number;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
contentTypes: ContentType[];
|
||||
devices: string[];
|
||||
friends?: string[];
|
||||
friendMaxLikes: number;
|
||||
friendTags?: string;
|
||||
enableFriendTags: boolean;
|
||||
targetTags: string[];
|
||||
// 删除自动点赞任务
|
||||
export function deleteAutoLikeTask(id: string): Promise<any> {
|
||||
return request("/v1/workbench/delete", { id }, "DELETE");
|
||||
}
|
||||
|
||||
// 更新任务数据
|
||||
export interface UpdateLikeTaskData extends CreateLikeTaskData {
|
||||
id: string;
|
||||
// 切换任务状态
|
||||
export function toggleAutoLikeTask(id: string, status: string): Promise<any> {
|
||||
return request("/v1/workbench/update-status", { id, status }, "POST");
|
||||
}
|
||||
|
||||
// 任务配置
|
||||
export interface TaskConfig {
|
||||
interval: number;
|
||||
maxLikes: number;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
contentTypes: ContentType[];
|
||||
devices: string[];
|
||||
friends: string[];
|
||||
friendMaxLikes: number;
|
||||
friendTags: string;
|
||||
enableFriendTags: boolean;
|
||||
// 复制自动点赞任务
|
||||
export function copyAutoLikeTask(id: string): Promise<any> {
|
||||
return request("/v1/workbench/copy", { id }, "POST");
|
||||
}
|
||||
|
||||
// API响应类型
|
||||
export interface ApiResponse<T = any> {
|
||||
code: number;
|
||||
msg: string;
|
||||
data: T;
|
||||
}
|
||||
|
||||
// 分页响应类型
|
||||
export interface PaginatedResponse<T> {
|
||||
list: T[];
|
||||
total: number;
|
||||
page: number;
|
||||
limit: number;
|
||||
// 获取点赞记录
|
||||
export function fetchLikeRecords(
|
||||
workbenchId: string,
|
||||
page: number = 1,
|
||||
limit: number = 20,
|
||||
keyword?: string
|
||||
): Promise<PaginatedResponse<LikeRecord>> {
|
||||
const params: any = {
|
||||
workbenchId,
|
||||
page: page.toString(),
|
||||
limit: limit.toString(),
|
||||
};
|
||||
if (keyword) {
|
||||
params.keyword = keyword;
|
||||
}
|
||||
return request("/v1/workbench/like-records", params, "GET");
|
||||
}
|
||||
|
||||
@@ -1,173 +1,119 @@
|
||||
import { request } from "../../../../api/request";
|
||||
import {
|
||||
LikeTask,
|
||||
CreateLikeTaskData,
|
||||
UpdateLikeTaskData,
|
||||
LikeRecord,
|
||||
ApiResponse,
|
||||
PaginatedResponse,
|
||||
} from "@/pages/workspace/auto-like/record/api";
|
||||
// 自动点赞任务状态
|
||||
export type LikeTaskStatus = 1 | 2; // 1: 开启, 2: 关闭
|
||||
|
||||
// 获取自动点赞任务列表
|
||||
export async function fetchAutoLikeTasks(): Promise<LikeTask[]> {
|
||||
try {
|
||||
const res = await request<ApiResponse<PaginatedResponse<LikeTask>>>({
|
||||
url: "/v1/workbench/list",
|
||||
method: "GET",
|
||||
params: {
|
||||
type: 1,
|
||||
page: 1,
|
||||
limit: 100,
|
||||
},
|
||||
});
|
||||
// 内容类型
|
||||
export type ContentType = "text" | "image" | "video" | "link";
|
||||
|
||||
if (res.code === 200 && res.data) {
|
||||
return res.data.list || [];
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error("获取自动点赞任务失败:", error);
|
||||
return [];
|
||||
}
|
||||
// 设备信息
|
||||
export interface Device {
|
||||
id: string;
|
||||
name: string;
|
||||
status: "online" | "offline";
|
||||
lastActive: string;
|
||||
}
|
||||
|
||||
// 获取单个任务详情
|
||||
export async function fetchAutoLikeTaskDetail(
|
||||
id: string
|
||||
): Promise<LikeTask | null> {
|
||||
try {
|
||||
console.log(`Fetching task detail for id: ${id}`);
|
||||
const res = await request<any>({
|
||||
url: "/v1/workbench/detail",
|
||||
method: "GET",
|
||||
params: { id },
|
||||
});
|
||||
console.log("Task detail API response:", res);
|
||||
|
||||
if (res.code === 200) {
|
||||
if (res.data) {
|
||||
if (typeof res.data === "object") {
|
||||
return res.data;
|
||||
} else {
|
||||
console.error(
|
||||
"Task detail API response data is not an object:",
|
||||
res.data
|
||||
);
|
||||
return null;
|
||||
}
|
||||
} else {
|
||||
console.error("Task detail API response missing data field:", res);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
console.error("Task detail API error:", res.msg || "Unknown error");
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.error("获取任务详情失败:", error);
|
||||
return null;
|
||||
}
|
||||
// 好友信息
|
||||
export interface Friend {
|
||||
id: string;
|
||||
nickname: string;
|
||||
wechatId: string;
|
||||
avatar: string;
|
||||
tags: string[];
|
||||
region: string;
|
||||
source: string;
|
||||
}
|
||||
|
||||
// 创建自动点赞任务
|
||||
export async function createAutoLikeTask(
|
||||
data: CreateLikeTaskData
|
||||
): Promise<ApiResponse> {
|
||||
return request({
|
||||
url: "/v1/workbench/create",
|
||||
method: "POST",
|
||||
data: {
|
||||
...data,
|
||||
type: 1, // 自动点赞类型
|
||||
},
|
||||
});
|
||||
// 点赞记录
|
||||
export interface LikeRecord {
|
||||
id: string;
|
||||
workbenchId: string;
|
||||
momentsId: string;
|
||||
snsId: string;
|
||||
wechatAccountId: string;
|
||||
wechatFriendId: string;
|
||||
likeTime: string;
|
||||
content: string;
|
||||
resUrls: string[];
|
||||
momentTime: string;
|
||||
userName: string;
|
||||
operatorName: string;
|
||||
operatorAvatar: string;
|
||||
friendName: string;
|
||||
friendAvatar: string;
|
||||
}
|
||||
|
||||
// 更新自动点赞任务
|
||||
export async function updateAutoLikeTask(
|
||||
data: UpdateLikeTaskData
|
||||
): Promise<ApiResponse> {
|
||||
return request({
|
||||
url: "/v1/workbench/update",
|
||||
method: "POST",
|
||||
data: {
|
||||
...data,
|
||||
type: 1, // 自动点赞类型
|
||||
},
|
||||
});
|
||||
// 自动点赞任务
|
||||
export interface LikeTask {
|
||||
id: string;
|
||||
name: string;
|
||||
status: LikeTaskStatus;
|
||||
deviceCount: number;
|
||||
targetGroup: string;
|
||||
likeCount: number;
|
||||
lastLikeTime: string;
|
||||
createTime: string;
|
||||
creator: string;
|
||||
likeInterval: number;
|
||||
maxLikesPerDay: number;
|
||||
timeRange: { start: string; end: string };
|
||||
contentTypes: ContentType[];
|
||||
targetTags: string[];
|
||||
devices: string[];
|
||||
friends: string[];
|
||||
friendMaxLikes: number;
|
||||
friendTags: string;
|
||||
enableFriendTags: boolean;
|
||||
todayLikeCount: number;
|
||||
totalLikeCount: number;
|
||||
updateTime: string;
|
||||
}
|
||||
|
||||
// 删除自动点赞任务
|
||||
export async function deleteAutoLikeTask(id: string): Promise<ApiResponse> {
|
||||
return request({
|
||||
url: "/v1/workbench/delete",
|
||||
method: "DELETE",
|
||||
params: { id },
|
||||
});
|
||||
// 创建任务数据
|
||||
export interface CreateLikeTaskData {
|
||||
name: string;
|
||||
interval: number;
|
||||
maxLikes: number;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
contentTypes: ContentType[];
|
||||
devices: string[];
|
||||
friends?: string[];
|
||||
friendMaxLikes: number;
|
||||
friendTags?: string;
|
||||
enableFriendTags: boolean;
|
||||
targetTags: string[];
|
||||
}
|
||||
|
||||
// 切换任务状态
|
||||
export async function toggleAutoLikeTask(
|
||||
id: string,
|
||||
status: string
|
||||
): Promise<ApiResponse> {
|
||||
return request({
|
||||
url: "/v1/workbench/update-status",
|
||||
method: "POST",
|
||||
data: { id, status },
|
||||
});
|
||||
// 更新任务数据
|
||||
export interface UpdateLikeTaskData extends CreateLikeTaskData {
|
||||
id: string;
|
||||
}
|
||||
|
||||
// 复制自动点赞任务
|
||||
export async function copyAutoLikeTask(id: string): Promise<ApiResponse> {
|
||||
return request({
|
||||
url: "/v1/workbench/copy",
|
||||
method: "POST",
|
||||
data: { id },
|
||||
});
|
||||
// 任务配置
|
||||
export interface TaskConfig {
|
||||
interval: number;
|
||||
maxLikes: number;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
contentTypes: ContentType[];
|
||||
devices: string[];
|
||||
friends: string[];
|
||||
friendMaxLikes: number;
|
||||
friendTags: string;
|
||||
enableFriendTags: boolean;
|
||||
}
|
||||
|
||||
// 获取点赞记录
|
||||
export async function fetchLikeRecords(
|
||||
workbenchId: string,
|
||||
page: number = 1,
|
||||
limit: number = 20,
|
||||
keyword?: string
|
||||
): Promise<PaginatedResponse<LikeRecord>> {
|
||||
try {
|
||||
const params: any = {
|
||||
workbenchId,
|
||||
page: page.toString(),
|
||||
limit: limit.toString(),
|
||||
};
|
||||
|
||||
if (keyword) {
|
||||
params.keyword = keyword;
|
||||
}
|
||||
|
||||
const res = await request<ApiResponse<PaginatedResponse<LikeRecord>>>({
|
||||
url: "/v1/workbench/records",
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
|
||||
if (res.code === 200 && res.data) {
|
||||
return res.data;
|
||||
}
|
||||
|
||||
return {
|
||||
list: [],
|
||||
total: 0,
|
||||
page: 1,
|
||||
limit: 20,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("获取点赞记录失败:", error);
|
||||
return {
|
||||
list: [],
|
||||
total: 0,
|
||||
page: 1,
|
||||
limit: 20,
|
||||
};
|
||||
}
|
||||
// API响应类型
|
||||
export interface ApiResponse<T = any> {
|
||||
code: number;
|
||||
msg: string;
|
||||
data: T;
|
||||
}
|
||||
|
||||
// 分页响应类型
|
||||
export interface PaginatedResponse<T> {
|
||||
list: T[];
|
||||
total: number;
|
||||
page: number;
|
||||
limit: number;
|
||||
}
|
||||
|
||||
@@ -1,20 +1,27 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { NavBar, Button, Toast, SpinLoading, Card, Avatar } from "antd-mobile";
|
||||
import { Input } from "antd";
|
||||
import InfiniteList from "@/components/InfiniteList/InfiniteList";
|
||||
import {
|
||||
SearchOutlined,
|
||||
ReloadOutlined,
|
||||
Button,
|
||||
Input,
|
||||
Card,
|
||||
Badge,
|
||||
Avatar,
|
||||
Skeleton,
|
||||
message,
|
||||
Spin,
|
||||
Divider,
|
||||
Pagination,
|
||||
} from "antd";
|
||||
import {
|
||||
LikeOutlined,
|
||||
ReloadOutlined,
|
||||
SearchOutlined,
|
||||
UserOutlined,
|
||||
} from "@ant-design/icons";
|
||||
|
||||
import styles from "./record.module.scss";
|
||||
import NavCommon from "@/components/NavCommon";
|
||||
import { fetchLikeRecords } from "./api";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import { fetchLikeRecords, fetchAutoLikeTaskDetail } from "./data";
|
||||
import { LikeRecord, LikeTask } from "./api";
|
||||
import style from "./record.module.scss";
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateString: string) => {
|
||||
@@ -32,264 +39,271 @@ const formatDate = (dateString: string) => {
|
||||
}
|
||||
};
|
||||
|
||||
const AutoLikeDetail: React.FC = () => {
|
||||
export default function AutoLikeRecord() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [records, setRecords] = useState<LikeRecord[]>([]);
|
||||
const [taskDetail, setTaskDetail] = useState<LikeTask | null>(null);
|
||||
const [records, setRecords] = useState<any[]>([]);
|
||||
const [recordsLoading, setRecordsLoading] = useState(false);
|
||||
const [taskLoading, setTaskLoading] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const pageSize = 10;
|
||||
|
||||
// 获取任务详情
|
||||
const fetchTaskDetail = async () => {
|
||||
if (!id) return;
|
||||
setTaskLoading(true);
|
||||
try {
|
||||
const detail = await fetchAutoLikeTaskDetail(id);
|
||||
setTaskDetail(detail);
|
||||
} catch (error) {
|
||||
Toast.show({
|
||||
content: "获取任务详情失败",
|
||||
position: "top",
|
||||
});
|
||||
} finally {
|
||||
setTaskLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取点赞记录
|
||||
const fetchRecords = async (
|
||||
page: number = 1,
|
||||
isLoadMore: boolean = false
|
||||
) => {
|
||||
if (!id) return;
|
||||
|
||||
if (!isLoadMore) {
|
||||
setRecordsLoading(true);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetchLikeRecords(id, page, pageSize, searchTerm);
|
||||
const newRecords = response.list || [];
|
||||
|
||||
if (isLoadMore) {
|
||||
setRecords((prev) => [...prev, ...newRecords]);
|
||||
} else {
|
||||
setRecords(newRecords);
|
||||
}
|
||||
|
||||
setTotal(response.total || 0);
|
||||
setCurrentPage(page);
|
||||
setHasMore(newRecords.length === pageSize);
|
||||
} catch (error) {
|
||||
Toast.show({
|
||||
content: "获取点赞记录失败",
|
||||
position: "top",
|
||||
});
|
||||
} finally {
|
||||
setRecordsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchTaskDetail();
|
||||
fetchRecords(1, false);
|
||||
if (!id) return;
|
||||
setRecordsLoading(true);
|
||||
fetchLikeRecords(id, 1, pageSize)
|
||||
.then((response: any) => {
|
||||
setRecords(response.list || []);
|
||||
setTotal(response.total || 0);
|
||||
setCurrentPage(1);
|
||||
})
|
||||
.catch(() => {
|
||||
message.error("获取点赞记录失败，请稍后重试");
|
||||
})
|
||||
.finally(() => setRecordsLoading(false));
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [id]);
|
||||
|
||||
const handleSearch = () => {
|
||||
setCurrentPage(1);
|
||||
fetchRecords(1, false);
|
||||
fetchLikeRecords(id!, 1, pageSize, searchTerm)
|
||||
.then((response: any) => {
|
||||
setRecords(response.list || []);
|
||||
setTotal(response.total || 0);
|
||||
setCurrentPage(1);
|
||||
})
|
||||
.catch(() => {
|
||||
message.error("获取点赞记录失败，请稍后重试");
|
||||
});
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
fetchRecords(currentPage, false);
|
||||
fetchLikeRecords(id!, currentPage, pageSize, searchTerm)
|
||||
.then((response: any) => {
|
||||
setRecords(response.list || []);
|
||||
setTotal(response.total || 0);
|
||||
})
|
||||
.catch(() => {
|
||||
message.error("获取点赞记录失败，请稍后重试");
|
||||
});
|
||||
};
|
||||
|
||||
const handleLoadMore = async () => {
|
||||
if (hasMore && !recordsLoading) {
|
||||
await fetchRecords(currentPage + 1, true);
|
||||
}
|
||||
const handlePageChange = (newPage: number) => {
|
||||
fetchLikeRecords(id!, newPage, pageSize, searchTerm)
|
||||
.then((response: any) => {
|
||||
setRecords(response.list || []);
|
||||
setTotal(response.total || 0);
|
||||
setCurrentPage(newPage);
|
||||
})
|
||||
.catch(() => {
|
||||
message.error("获取点赞记录失败，请稍后重试");
|
||||
});
|
||||
};
|
||||
|
||||
const renderRecordItem = (record: LikeRecord) => (
|
||||
<Card key={record.id} className={style["record-card"]}>
|
||||
<div className={style["record-header"]}>
|
||||
<div className={style["user-info"]}>
|
||||
<Avatar
|
||||
src={
|
||||
record.friendAvatar ||
|
||||
"https://api.dicebear.com/7.x/avataaars/svg?seed=fallback"
|
||||
}
|
||||
className={style["user-avatar"]}
|
||||
fallback={<UserOutlined />}
|
||||
/>
|
||||
<div className={style["user-details"]}>
|
||||
<div className={style["user-name"]} title={record.friendName}>
|
||||
{record.friendName}
|
||||
</div>
|
||||
<div className={style["user-role"]}>内容发布者</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["record-time"]}>
|
||||
{formatDate(record.momentTime || record.likeTime)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style["record-content"]}>
|
||||
{record.content && (
|
||||
<p className={style["content-text"]}>{record.content}</p>
|
||||
)}
|
||||
|
||||
{Array.isArray(record.resUrls) && record.resUrls.length > 0 && (
|
||||
<div className={style["content-images"]}>
|
||||
{record.resUrls.slice(0, 9).map((image: string, idx: number) => (
|
||||
<div key={idx} className={style["image-item"]}>
|
||||
<img
|
||||
src={image}
|
||||
alt={`内容图片 ${idx + 1}`}
|
||||
className={style["content-image"]}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={style["like-info"]}>
|
||||
<Avatar
|
||||
src={
|
||||
record.operatorAvatar ||
|
||||
"https://api.dicebear.com/7.x/avataaars/svg?seed=operator"
|
||||
}
|
||||
className={style["operator-avatar"]}
|
||||
fallback={<UserOutlined />}
|
||||
/>
|
||||
<div className={style["like-text"]}>
|
||||
<span className={style["operator-name"]} title={record.operatorName}>
|
||||
{record.operatorName}
|
||||
</span>
|
||||
<span className={style["like-action"]}>点赞了这条内容</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavBar
|
||||
backArrow
|
||||
style={{ background: "#fff" }}
|
||||
onBack={() => window.history.back()}
|
||||
left={
|
||||
<div style={{ color: "var(--primary-color)", fontWeight: 600 }}>
|
||||
点赞记录
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
}
|
||||
footer={<MeauMobile activeKey="workspace" />}
|
||||
>
|
||||
<div className={style["detail-page"]}>
|
||||
{/* 任务信息卡片 */}
|
||||
{taskDetail && (
|
||||
<div className={style["task-info-card"]}>
|
||||
<div className={style["task-header"]}>
|
||||
<h3 className={style["task-name"]}>{taskDetail.name}</h3>
|
||||
<span
|
||||
className={`${style["task-status"]} ${
|
||||
Number(taskDetail.status) === 1
|
||||
? style["active"]
|
||||
: style["inactive"]
|
||||
}`}
|
||||
>
|
||||
{Number(taskDetail.status) === 1 ? "进行中" : "已暂停"}
|
||||
</span>
|
||||
</div>
|
||||
<div className={style["task-stats"]}>
|
||||
<div className={style["stat-item"]}>
|
||||
<LikeOutlined className={style["stat-icon"]} />
|
||||
<span className={style["stat-label"]}>今日点赞：</span>
|
||||
<span className={style["stat-value"]}>
|
||||
{taskDetail.todayLikeCount || 0}
|
||||
</span>
|
||||
</div>
|
||||
<div className={style["stat-item"]}>
|
||||
<LikeOutlined className={style["stat-icon"]} />
|
||||
<span className={style["stat-label"]}>总点赞数：</span>
|
||||
<span className={style["stat-value"]}>
|
||||
{taskDetail.totalLikeCount || 0}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 搜索区域 */}
|
||||
<div className={style["search-section"]}>
|
||||
<div className={style["search-wrapper"]}>
|
||||
<div className={style["search-input-wrapper"]}>
|
||||
<SearchOutlined className={style["search-icon"]} />
|
||||
<>
|
||||
<NavCommon title="点赞记录" />
|
||||
<div className={styles.headerSearchBar}>
|
||||
<div className={styles.headerSearchInputWrap}>
|
||||
<Input
|
||||
prefix={<SearchOutlined className={styles.headerSearchIcon} />}
|
||||
placeholder="搜索好友昵称或内容"
|
||||
className={style["search-input"]}
|
||||
className={styles.headerSearchInput}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
onPressEnter={handleSearch}
|
||||
allowClear
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
size="small"
|
||||
onClick={handleSearch}
|
||||
className={style["search-btn"]}
|
||||
>
|
||||
搜索
|
||||
</Button>
|
||||
<button
|
||||
className={style["refresh-btn"]}
|
||||
icon={<ReloadOutlined spin={recordsLoading} />}
|
||||
onClick={handleRefresh}
|
||||
disabled={recordsLoading}
|
||||
>
|
||||
<ReloadOutlined
|
||||
style={{
|
||||
animation: recordsLoading
|
||||
? "spin 1s linear infinite"
|
||||
: "none",
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
loading={recordsLoading}
|
||||
type="default"
|
||||
shape="circle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 记录列表 */}
|
||||
<div className={style["records-section"]}>
|
||||
{recordsLoading && currentPage === 1 ? (
|
||||
<div className={style["loading"]}>
|
||||
<SpinLoading color="primary" />
|
||||
<div className={style["loading-text"]}>加载中...</div>
|
||||
</>
|
||||
}
|
||||
footer={
|
||||
<>
|
||||
<div className={styles.footerPagination}>
|
||||
<Pagination
|
||||
current={currentPage}
|
||||
total={total}
|
||||
pageSize={pageSize}
|
||||
onChange={handlePageChange}
|
||||
showSizeChanger={false}
|
||||
showQuickJumper
|
||||
showTotal={(total, range) =>
|
||||
`第 ${range[0]}-${range[1]} 条，共 ${total} 条`
|
||||
}
|
||||
size="default"
|
||||
className={styles.pagination}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className={styles.bgWrap}>
|
||||
<div className={styles.contentWrap}>
|
||||
{recordsLoading ? (
|
||||
<div className={styles.skeletonWrap}>
|
||||
{Array.from({ length: 3 }).map((_, index) => (
|
||||
<div key={index} className={styles.skeletonCard}>
|
||||
<div className={styles.skeletonCardHeader}>
|
||||
<Skeleton.Avatar
|
||||
active
|
||||
size={40}
|
||||
className={styles.skeletonAvatar}
|
||||
/>
|
||||
<div className={styles.skeletonNameWrap}>
|
||||
<Skeleton.Input
|
||||
active
|
||||
size="small"
|
||||
className={styles.skeletonName}
|
||||
style={{ width: 96 }}
|
||||
/>
|
||||
<Skeleton.Input
|
||||
active
|
||||
size="small"
|
||||
className={styles.skeletonSub}
|
||||
style={{ width: 64 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Divider className={styles.skeletonSep} />
|
||||
<div className={styles.skeletonContentWrap}>
|
||||
<Skeleton.Input
|
||||
active
|
||||
size="small"
|
||||
className={styles.skeletonContent1}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
<Skeleton.Input
|
||||
active
|
||||
size="small"
|
||||
className={styles.skeletonContent2}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
<div className={styles.skeletonImgWrap}>
|
||||
<Skeleton.Image
|
||||
active
|
||||
className={styles.skeletonImg}
|
||||
style={{ width: 80, height: 80 }}
|
||||
/>
|
||||
<Skeleton.Image
|
||||
active
|
||||
className={styles.skeletonImg}
|
||||
style={{ width: 80, height: 80 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : records.length === 0 ? (
|
||||
<div className={style["empty-state"]}>
|
||||
<LikeOutlined className={style["empty-icon"]} />
|
||||
<div className={style["empty-text"]}>暂无点赞记录</div>
|
||||
<div className={styles.emptyWrap}>
|
||||
<LikeOutlined className={styles.emptyIcon} />
|
||||
<p className={styles.emptyText}>暂无点赞记录</p>
|
||||
</div>
|
||||
) : (
|
||||
<InfiniteList
|
||||
data={records}
|
||||
renderItem={renderRecordItem}
|
||||
hasMore={hasMore}
|
||||
onLoadMore={handleLoadMore}
|
||||
className={style["records-list"]}
|
||||
/>
|
||||
<>
|
||||
{records.map((record) => (
|
||||
<div key={record.id} className={styles.recordCard}>
|
||||
<div className={styles.recordCardHeader}>
|
||||
<div className={styles.recordCardHeaderLeft}>
|
||||
<Avatar
|
||||
src={record.friendAvatar || undefined}
|
||||
icon={<UserOutlined />}
|
||||
size={40}
|
||||
className={styles.avatarImg}
|
||||
/>
|
||||
<div className={styles.friendInfo}>
|
||||
<div
|
||||
className={styles.friendName}
|
||||
title={record.friendName}
|
||||
>
|
||||
{record.friendName}
|
||||
</div>
|
||||
<div className={styles.friendSub}>内容发布者</div>
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
className={styles.timeBadge}
|
||||
count={formatDate(record.momentTime || record.likeTime)}
|
||||
style={{
|
||||
background: "#e8f0fe",
|
||||
color: "#333",
|
||||
fontWeight: 400,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Divider className={styles.cardSep} />
|
||||
<div className={styles.cardContent}>
|
||||
{record.content && (
|
||||
<p className={styles.contentText}>{record.content}</p>
|
||||
)}
|
||||
{Array.isArray(record.resUrls) &&
|
||||
record.resUrls.length > 0 && (
|
||||
<div
|
||||
className={
|
||||
`${styles.imgGrid} ` +
|
||||
(record.resUrls.length === 1
|
||||
? styles.grid1
|
||||
: record.resUrls.length === 2
|
||||
? styles.grid2
|
||||
: record.resUrls.length <= 3
|
||||
? styles.grid3
|
||||
: record.resUrls.length <= 6
|
||||
? styles.grid6
|
||||
: styles.grid9)
|
||||
}
|
||||
>
|
||||
{record.resUrls
|
||||
.slice(0, 9)
|
||||
.map((image: string, idx: number) => (
|
||||
<div key={idx} className={styles.imgItem}>
|
||||
<img
|
||||
src={image}
|
||||
alt={`内容图片 ${idx + 1}`}
|
||||
className={styles.img}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.operatorWrap}>
|
||||
<Avatar
|
||||
src={record.operatorAvatar || undefined}
|
||||
icon={<UserOutlined />}
|
||||
size={32}
|
||||
className={styles.operatorAvatar}
|
||||
/>
|
||||
<div className={styles.operatorInfo}>
|
||||
<span
|
||||
className={styles.operatorName}
|
||||
title={record.operatorName}
|
||||
>
|
||||
{record.operatorName}
|
||||
</span>
|
||||
<span className={styles.operatorAction}>
|
||||
<LikeOutlined
|
||||
style={{ color: "red", marginRight: 4 }}
|
||||
/>
|
||||
已赞
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default AutoLikeDetail;
|
||||
}
|
||||
|
||||
@@ -1,351 +1,266 @@
|
||||
.detail-page {
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.task-info-card {
|
||||
background: white;
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.task-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.task-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.task-status {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
&.active {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
border: 1px solid #b7eb8f;
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
}
|
||||
|
||||
.task-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 16px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
// 搜索栏
|
||||
.headerSearchBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
.headerSearchInputWrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 12px 0 32px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus {
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
.headerSearchIcon {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
left: 12px;
|
||||
top: 10px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #a3a3a3;
|
||||
}
|
||||
.headerSearchInput {
|
||||
padding-left: 32px !important;
|
||||
}
|
||||
.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
border-radius: 6px;
|
||||
// 分页
|
||||
.footerPagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #d9d9d9;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
background: #fff;
|
||||
}
|
||||
.pagination {
|
||||
:global(.ant-pagination-item) {
|
||||
border-radius: 6px;
|
||||
}
|
||||
:global(.ant-pagination-item-active) {
|
||||
background: #1890ff;
|
||||
border-color: #1890ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
:global(.ant-pagination-prev),
|
||||
:global(.ant-pagination-next) {
|
||||
border-radius: 6px;
|
||||
}
|
||||
:global(.ant-pagination-jump-prev),
|
||||
:global(.ant-pagination-jump-next) {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.records-section {
|
||||
padding: 0 16px;
|
||||
// 背景和内容
|
||||
.bgWrap {
|
||||
background: #f7f7fa;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.records-list {
|
||||
.contentWrap {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
// 骨架屏
|
||||
.skeletonWrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.skeletonCard {
|
||||
padding: 0px;
|
||||
}
|
||||
.skeletonCardHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.record-card {
|
||||
background: white;
|
||||
.skeletonAvatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.skeletonNameWrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.skeletonName {
|
||||
width: 96px;
|
||||
height: 16px;
|
||||
}
|
||||
.skeletonSub {
|
||||
width: 64px;
|
||||
height: 12px;
|
||||
}
|
||||
.skeletonSep {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.skeletonContentWrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.skeletonContent1 {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
}
|
||||
.skeletonContent2 {
|
||||
width: 75%;
|
||||
height: 16px;
|
||||
}
|
||||
.skeletonImgWrap {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.skeletonImg {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.record-header {
|
||||
// 空状态
|
||||
.emptyWrap {
|
||||
text-align: center;
|
||||
padding: 48px 0;
|
||||
}
|
||||
.emptyIcon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: #e5e7eb;
|
||||
margin: 0 auto 12px auto;
|
||||
}
|
||||
.emptyText {
|
||||
color: #888;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
// 记录卡片
|
||||
.recordCard {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
padding: 16px;
|
||||
}
|
||||
.recordCardHeader {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
.recordCardHeaderLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
max-width: 65%;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
.avatarImg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
.friendInfo {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
.friendName {
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-top: 2px;
|
||||
.friendSub {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.record-time {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
background: #f8f9fa;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
.timeBadge {
|
||||
background: #e8f0fe;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.record-content {
|
||||
.cardSep {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.cardContent {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
.contentText {
|
||||
color: #444;
|
||||
margin-bottom: 12px;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.content-images {
|
||||
.imgGrid {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
|
||||
&.single {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
&.double {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
&.multiple {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 6px;
|
||||
.grid1 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.grid2 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.grid3 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.grid6 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
.grid9 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
}
|
||||
.imgItem {
|
||||
position: relative;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-image {
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.like-info {
|
||||
// 操作人
|
||||
.operatorWrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
margin-top: 16px;
|
||||
padding: 8px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.operator-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
.operatorAvatar {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.like-text {
|
||||
.operatorInfo {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.operator-name {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
.operatorName {
|
||||
font-weight: 500;
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.like-action {
|
||||
margin-left: 4px;
|
||||
.operatorAction {
|
||||
color: #888;
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60vh;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
color: #d9d9d9;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
.task-stats {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.content-images {
|
||||
&.multiple {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import TrafficPool from "@/pages/traffic-pool/TrafficPool";
|
||||
import TrafficPoolDetail from "@/pages/traffic-pool/TrafficPoolDetail";
|
||||
import TrafficPool from "@/pages/traffic-pool/list/index";
|
||||
import TrafficPoolDetail from "@/pages/traffic-pool/detail/index";
|
||||
|
||||
const trafficPoolRoutes = [
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user