Merge branch 'yongpxu-dev' into yongpxu-dev2
This commit is contained in:
超级老白兔
@@ -3,41 +3,268 @@
|
|||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 头部区域样式
|
||||||
.header {
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
|
||||||
|
.headerLeft {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
.backButton {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.titleSection {
|
||||||
|
h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
|
margin: 0 0 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerRight {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
.activeRules {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 子导航栏样式
|
||||||
|
.subNav {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
|
|
||||||
h1 {
|
:global(.ant-tabs-nav) {
|
||||||
font-size: 24px;
|
margin-bottom: 0;
|
||||||
font-weight: 600;
|
|
||||||
color: #262626;
|
|
||||||
margin: 0 0 8px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
:global(.ant-tabs-tab) {
|
||||||
font-size: 14px;
|
|
||||||
color: #8c8c8c;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
min-height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 300px;
|
|
||||||
background: #fafafa;
|
|
||||||
border: 1px dashed #d9d9d9;
|
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #8c8c8c;
|
font-weight: 500;
|
||||||
margin: 0;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主要内容区域
|
||||||
|
.mainContent {
|
||||||
|
min-height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 问候规则内容
|
||||||
|
.rulesContent {
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
min-height: 600px;
|
||||||
|
|
||||||
|
.leftPanel {
|
||||||
|
flex: 0 0 400px;
|
||||||
|
|
||||||
|
.createCard {
|
||||||
|
height: fit-content;
|
||||||
|
|
||||||
|
:global(.ant-card-head) {
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.ant-card-head-title) {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardSubtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.createForm {
|
||||||
|
:global(.ant-form-item) {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.ant-form-item-label) {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightPanel {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.listCard {
|
||||||
|
height: fit-content;
|
||||||
|
|
||||||
|
:global(.ant-card-head) {
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.ant-card-head-title) {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listHeader {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ruleList {
|
||||||
|
.ruleItem {
|
||||||
|
border: 1px solid #f0f0f0;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
background: #fafafa;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ruleHeader {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.ruleTitle {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ruleTags {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ruleActions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-left: 16px;
|
||||||
|
|
||||||
|
:global(.ant-btn) {
|
||||||
|
padding: 4px 8px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ruleContent {
|
||||||
|
.ruleDescription {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ruleText {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #262626;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0 0 12px 0;
|
||||||
|
background: #fff;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ruleFooter {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 其他标签页内容
|
||||||
|
.templatesContent,
|
||||||
|
.statisticsContent {
|
||||||
|
padding: 24px;
|
||||||
|
text-align: center;
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.rulesContent {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.leftPanel {
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
.headerRight {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rulesContent {
|
||||||
|
.leftPanel,
|
||||||
|
.rightPanel {
|
||||||
|
.createCard,
|
||||||
|
.listCard {
|
||||||
|
:global(.ant-card-body) {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,21 +1,344 @@
|
|||||||
import React from "react";
|
import React, { useState } from "react";
|
||||||
import PowerNavigation from "@/components/PowerNavtion";
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Form,
|
||||||
|
Input,
|
||||||
|
Select,
|
||||||
|
Switch,
|
||||||
|
Tabs,
|
||||||
|
Tag,
|
||||||
|
Space,
|
||||||
|
Popconfirm,
|
||||||
|
message,
|
||||||
|
} from "antd";
|
||||||
|
import {
|
||||||
|
PlusOutlined,
|
||||||
|
EditOutlined,
|
||||||
|
DeleteOutlined,
|
||||||
|
ArrowLeftOutlined,
|
||||||
|
} from "@ant-design/icons";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
import styles from "./index.module.scss";
|
import styles from "./index.module.scss";
|
||||||
|
|
||||||
|
const { TextArea } = Input;
|
||||||
|
const { Option } = Select;
|
||||||
|
|
||||||
|
// 问候规则数据类型
|
||||||
|
interface GreetingRule {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
triggerType: string;
|
||||||
|
triggerCondition: string;
|
||||||
|
content: string;
|
||||||
|
priority: number;
|
||||||
|
isActive: boolean;
|
||||||
|
usageCount: number;
|
||||||
|
createTime: string;
|
||||||
|
tags: string[];
|
||||||
|
}
|
||||||
|
|
||||||
const AutoGreeting: React.FC = () => {
|
const AutoGreeting: React.FC = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [activeTab, setActiveTab] = useState("rules");
|
||||||
|
const [rules, setRules] = useState<GreetingRule[]>([
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
name: "产品咨询自动回复",
|
||||||
|
triggerType: "关键词",
|
||||||
|
triggerCondition: "包含:产品、价格、功能",
|
||||||
|
content:
|
||||||
|
"感谢您对我们产品的关注!我们的AI营销系统具有智能客服、精准营销、自动化运营等核心功能。详细资料我稍后发送给您,请稍等。",
|
||||||
|
priority: 3,
|
||||||
|
isActive: false,
|
||||||
|
usageCount: 234,
|
||||||
|
createTime: "2024/3/3",
|
||||||
|
tags: ["关键词", "优先级3"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2",
|
||||||
|
name: "新好友欢迎",
|
||||||
|
triggerType: "新好友",
|
||||||
|
triggerCondition: "添加好友后",
|
||||||
|
content:
|
||||||
|
"您好!欢迎添加我为好友,我是触客宝AI助手,很高兴为您服务!如有任何问题,随时可以咨询我。",
|
||||||
|
priority: 1,
|
||||||
|
isActive: true,
|
||||||
|
usageCount: 156,
|
||||||
|
createTime: "2024/3/1",
|
||||||
|
tags: ["新好友", "优先级1"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3",
|
||||||
|
name: "工作时间问候",
|
||||||
|
triggerType: "时间触发",
|
||||||
|
triggerCondition: "工作日 9:00-18:00",
|
||||||
|
content: "您好!现在是工作时间,我是触客宝AI助手,很高兴为您服务!",
|
||||||
|
priority: 2,
|
||||||
|
isActive: true,
|
||||||
|
usageCount: 89,
|
||||||
|
createTime: "2024/2/28",
|
||||||
|
tags: ["时间触发", "优先级2"],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 计算活跃规则数量
|
||||||
|
const activeRulesCount = rules.filter(rule => rule.isActive).length;
|
||||||
|
|
||||||
|
// 处理表单提交
|
||||||
|
const handleSubmit = (values: any) => {
|
||||||
|
const newRule: GreetingRule = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
name: values.name,
|
||||||
|
triggerType: values.triggerType,
|
||||||
|
triggerCondition: values.triggerCondition,
|
||||||
|
content: values.content,
|
||||||
|
priority: values.priority,
|
||||||
|
isActive: true,
|
||||||
|
usageCount: 0,
|
||||||
|
createTime: new Date().toLocaleDateString(),
|
||||||
|
tags: [values.triggerType, `优先级${values.priority}`],
|
||||||
|
};
|
||||||
|
|
||||||
|
setRules([...rules, newRule]);
|
||||||
|
form.resetFields();
|
||||||
|
message.success("规则创建成功！");
|
||||||
|
};
|
||||||
|
|
||||||
|
// 切换规则状态
|
||||||
|
const toggleRuleStatus = (id: string) => {
|
||||||
|
setRules(
|
||||||
|
rules.map(rule =>
|
||||||
|
rule.id === id ? { ...rule, isActive: !rule.isActive } : rule,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除规则
|
||||||
|
const deleteRule = (id: string) => {
|
||||||
|
setRules(rules.filter(rule => rule.id !== id));
|
||||||
|
message.success("规则删除成功！");
|
||||||
|
};
|
||||||
|
|
||||||
|
// 编辑规则
|
||||||
|
const editRule = (rule: GreetingRule) => {
|
||||||
|
form.setFieldsValue({
|
||||||
|
name: rule.name,
|
||||||
|
triggerType: rule.triggerType,
|
||||||
|
triggerCondition: rule.triggerCondition,
|
||||||
|
content: rule.content,
|
||||||
|
priority: rule.priority,
|
||||||
|
});
|
||||||
|
message.info("规则已加载到编辑表单");
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<PowerNavigation
|
{/* 头部区域 */}
|
||||||
title="自动打招呼"
|
<div className={styles.header}>
|
||||||
subtitle="智能识别新好友，自动发送个性化欢迎消息"
|
<div className={styles.headerLeft}>
|
||||||
showBackButton={true}
|
<Button
|
||||||
backButtonText="返回功能中心"
|
type="text"
|
||||||
/>
|
size="large"
|
||||||
<div className={styles.content}>
|
icon={<ArrowLeftOutlined />}
|
||||||
{/* 功能内容待开发 */}
|
onClick={() => navigate(-1)}
|
||||||
<div className={styles.placeholder}>
|
className={styles.backButton}
|
||||||
<p>自动打招呼功能正在开发中...</p>
|
>
|
||||||
|
返回功能中心
|
||||||
|
</Button>
|
||||||
|
<div className={styles.titleSection}>
|
||||||
|
<h1>自动问候</h1>
|
||||||
|
<p>设置智能问候规则,提升客户体验</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className={styles.headerRight}>
|
||||||
|
<div className={styles.activeRules}>
|
||||||
|
活跃规则: {activeRulesCount}/{rules.length}
|
||||||
|
</div>
|
||||||
|
<Button type="primary" icon={<PlusOutlined />}>
|
||||||
|
+ 新建规则
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 子导航栏 */}
|
||||||
|
<div className={styles.subNav}>
|
||||||
|
<Tabs
|
||||||
|
activeKey={activeTab}
|
||||||
|
onChange={setActiveTab}
|
||||||
|
items={[
|
||||||
|
{
|
||||||
|
key: "rules",
|
||||||
|
label: "问候规则",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "templates",
|
||||||
|
label: "话术模板",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "statistics",
|
||||||
|
label: "使用统计",
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 主要内容区域 */}
|
||||||
|
<div className={styles.mainContent}>
|
||||||
|
{activeTab === "rules" && (
|
||||||
|
<div className={styles.rulesContent}>
|
||||||
|
{/* 左侧创建规则表单 */}
|
||||||
|
<div className={styles.leftPanel}>
|
||||||
|
<Card title="+ 创建问候规则" className={styles.createCard}>
|
||||||
|
<p className={styles.cardSubtitle}>
|
||||||
|
设置自动问候的触发条件和回复内容
|
||||||
|
</p>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
layout="vertical"
|
||||||
|
onFinish={handleSubmit}
|
||||||
|
className={styles.createForm}
|
||||||
|
>
|
||||||
|
<Form.Item
|
||||||
|
name="name"
|
||||||
|
label="规则名称"
|
||||||
|
rules={[{ required: true, message: "请输入规则名称" }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="输入规则名称..." />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
name="triggerType"
|
||||||
|
label="触发条件"
|
||||||
|
rules={[{ required: true, message: "请选择触发条件" }]}
|
||||||
|
>
|
||||||
|
<Select placeholder="选择触发条件">
|
||||||
|
<Option value="新好友添加">新好友添加</Option>
|
||||||
|
<Option value="关键词">关键词</Option>
|
||||||
|
<Option value="时间触发">时间触发</Option>
|
||||||
|
<Option value="群聊">群聊</Option>
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
name="triggerCondition"
|
||||||
|
label="具体条件"
|
||||||
|
rules={[{ required: true, message: "请输入具体条件" }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="如:工作日 9:00-18:00 或包含关键词" />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
name="content"
|
||||||
|
label="问候内容"
|
||||||
|
rules={[{ required: true, message: "请输入问候内容" }]}
|
||||||
|
>
|
||||||
|
<TextArea rows={4} placeholder="输入自动问候的内容..." />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
name="priority"
|
||||||
|
label="优先级"
|
||||||
|
rules={[{ required: true, message: "请选择优先级" }]}
|
||||||
|
>
|
||||||
|
<Select placeholder="选择优先级">
|
||||||
|
<Option value={1}>高优先级</Option>
|
||||||
|
<Option value={2}>中优先级</Option>
|
||||||
|
<Option value={3}>低优先级</Option>
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item>
|
||||||
|
<Button type="primary" htmlType="submit" block>
|
||||||
|
保存规则
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 右侧规则列表 */}
|
||||||
|
<div className={styles.rightPanel}>
|
||||||
|
<Card title="问候规则列表" className={styles.listCard}>
|
||||||
|
<div className={styles.listHeader}>
|
||||||
|
<span>{rules.length}条规则</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.ruleList}>
|
||||||
|
{rules.map(rule => (
|
||||||
|
<div key={rule.id} className={styles.ruleItem}>
|
||||||
|
<div className={styles.ruleHeader}>
|
||||||
|
<div className={styles.ruleTitle}>
|
||||||
|
<h4>{rule.name}</h4>
|
||||||
|
<div className={styles.ruleTags}>
|
||||||
|
{rule.tags.map((tag, index) => (
|
||||||
|
<Tag
|
||||||
|
key={index}
|
||||||
|
color={index === 0 ? "blue" : "default"}
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</Tag>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.ruleActions}>
|
||||||
|
<Switch
|
||||||
|
checked={rule.isActive}
|
||||||
|
onChange={() => toggleRuleStatus(rule.id)}
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={<EditOutlined />}
|
||||||
|
onClick={() => editRule(rule)}
|
||||||
|
/>
|
||||||
|
<Popconfirm
|
||||||
|
title="确定要删除这个规则吗？"
|
||||||
|
onConfirm={() => deleteRule(rule.id)}
|
||||||
|
okText="确定"
|
||||||
|
cancelText="取消"
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={<DeleteOutlined />}
|
||||||
|
danger
|
||||||
|
/>
|
||||||
|
</Popconfirm>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.ruleContent}>
|
||||||
|
<p className={styles.ruleDescription}>
|
||||||
|
{rule.triggerCondition}
|
||||||
|
</p>
|
||||||
|
<p className={styles.ruleText}>{rule.content}</p>
|
||||||
|
<div className={styles.ruleFooter}>
|
||||||
|
<span>使用次数:{rule.usageCount}</span>
|
||||||
|
<span>创建时间:{rule.createTime}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === "templates" && (
|
||||||
|
<div className={styles.templatesContent}>
|
||||||
|
<Card>
|
||||||
|
<p>话术模板功能开发中...</p>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === "statistics" && (
|
||||||
|
<div className={styles.statisticsContent}>
|
||||||
|
<Card>
|
||||||
|
<p>使用统计功能开发中...</p>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,43 +1,355 @@
|
|||||||
.container {
|
.container {
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
background: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
}
|
||||||
|
.searchBar {
|
||||||
.header {
|
display: flex;
|
||||||
margin-bottom: 24px;
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
h1 {
|
padding: 16px 0 8px 0;
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #262626;
|
|
||||||
margin: 0 0 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #8c8c8c;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
min-height: 400px;
|
min-height: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.placeholder {
|
// 页面头部
|
||||||
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
justify-content: space-between;
|
||||||
justify-content: center;
|
align-items: flex-start;
|
||||||
height: 300px;
|
margin-bottom: 24px;
|
||||||
background: #fafafa;
|
|
||||||
border: 1px dashed #d9d9d9;
|
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
p {
|
.headerLeft {
|
||||||
font-size: 16px;
|
.title {
|
||||||
color: #8c8c8c;
|
font-size: 24px;
|
||||||
margin: 0;
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerRight {
|
||||||
|
.addButton {
|
||||||
|
background: #1890ff;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #40a9ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索和筛选区域
|
||||||
|
.searchSection {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
.searchBox {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.searchIcon {
|
||||||
|
position: absolute;
|
||||||
|
left: 12px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchInput {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 12px 0 40px;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterButton {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 16px;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #262626;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #1890ff;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标签页
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 0;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 12px 24px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.activeTab {
|
||||||
|
color: #1890ff;
|
||||||
|
border-bottom-color: #1890ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 联系人列表
|
||||||
|
.contactsList {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 联系人卡片
|
||||||
|
.contactCard {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #f0f0f0;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardHeader {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.contactInfo {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nameSection {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.contactName {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
|
margin: 0 0 4px 0;
|
||||||
|
|
||||||
|
.starIcon {
|
||||||
|
color: #faad14;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.roleCompany {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 头像样式
|
||||||
|
.avatar {
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
border: 2px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatarPlaceholder {
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
font-weight: 600;
|
||||||
|
border: 2px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactDetails {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.contactItem {
|
||||||
|
display: flex;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #8c8c8c;
|
||||||
|
margin-right: 8px;
|
||||||
|
min-width: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagsSection {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #595959;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.source {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lastContact {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes {
|
||||||
|
background: #f9f9f9;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #595959;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: auto;
|
||||||
|
|
||||||
|
.actionButton {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 6px;
|
||||||
|
height: 32px;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #595959;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #1890ff;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child:hover {
|
||||||
|
background: #e6f7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child:hover {
|
||||||
|
background: #f6ffed;
|
||||||
|
border-color: #52c41a;
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.contactsList {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactCard {
|
||||||
|
min-height: 175px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.headerRight {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.addButton {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchSection {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.filterButton {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,24 +1,331 @@
|
|||||||
import React from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import PowerNavigation from "@/components/PowerNavtion";
|
import PowerNavigation from "@/components/PowerNavtion";
|
||||||
|
import {
|
||||||
|
SearchOutlined,
|
||||||
|
FilterOutlined,
|
||||||
|
MessageOutlined,
|
||||||
|
PhoneOutlined,
|
||||||
|
} from "@ant-design/icons";
|
||||||
import styles from "./index.module.scss";
|
import styles from "./index.module.scss";
|
||||||
|
import { Button, Input, Row, Col, Pagination, Spin, message } from "antd";
|
||||||
|
import { getContactList } from "@/pages/pc/ckbox/weChat/api";
|
||||||
|
import { ContractData } from "@/pages/pc/ckbox/data";
|
||||||
|
import Layout from "@/components/Layout/LayoutFiexd";
|
||||||
|
// 头像组件
|
||||||
|
const Avatar: React.FC<{ name: string; avatar?: string; size?: number }> = ({
|
||||||
|
name,
|
||||||
|
avatar,
|
||||||
|
size = 40,
|
||||||
|
}) => {
|
||||||
|
const getInitials = (name: string) => {
|
||||||
|
return name.charAt(0).toUpperCase();
|
||||||
|
};
|
||||||
|
|
||||||
const CustomerManagement: React.FC = () => {
|
const getAvatarColor = (name: string) => {
|
||||||
return (
|
const colors = [
|
||||||
<div className={styles.container}>
|
"#1890ff",
|
||||||
<PowerNavigation
|
"#52c41a",
|
||||||
title="客户好友管理"
|
"#faad14",
|
||||||
subtitle="统一管理客户信息和好友关系，提升服务效率"
|
"#f5222d",
|
||||||
showBackButton={true}
|
"#722ed1",
|
||||||
backButtonText="返回功能中心"
|
"#13c2c2",
|
||||||
|
"#eb2f96",
|
||||||
|
"#fa8c16",
|
||||||
|
];
|
||||||
|
const index = name.charCodeAt(0) % colors.length;
|
||||||
|
return colors[index];
|
||||||
|
};
|
||||||
|
|
||||||
|
if (avatar) {
|
||||||
|
return (
|
||||||
|
<img
|
||||||
|
src={avatar}
|
||||||
|
alt={name}
|
||||||
|
className={styles.avatar}
|
||||||
|
style={{ width: size, height: size }}
|
||||||
/>
|
/>
|
||||||
<div className={styles.content}>
|
);
|
||||||
{/* 功能内容待开发 */}
|
}
|
||||||
<div className={styles.placeholder}>
|
|
||||||
<p>客户好友管理功能正在开发中...</p>
|
return (
|
||||||
</div>
|
<div
|
||||||
</div>
|
className={styles.avatarPlaceholder}
|
||||||
|
style={{
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
backgroundColor: getAvatarColor(name),
|
||||||
|
fontSize: size * 0.4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getInitials(name)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const CustomerManagement: React.FC = () => {
|
||||||
|
const [activeTab, setActiveTab] = useState("all");
|
||||||
|
const [searchValue, setSearchValue] = useState("");
|
||||||
|
const [contacts, setContacts] = useState<ContractData[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [pagination, setPagination] = useState({
|
||||||
|
current: 1,
|
||||||
|
pageSize: 12,
|
||||||
|
total: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取各分类的总数
|
||||||
|
const [tabCounts, setTabCounts] = useState({
|
||||||
|
all: 0,
|
||||||
|
customer: 0,
|
||||||
|
potential: 0,
|
||||||
|
partner: 0,
|
||||||
|
friend: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{ key: "all", label: "全部", count: tabCounts.all },
|
||||||
|
{ key: "customer", label: "客户", count: tabCounts.customer },
|
||||||
|
{ key: "potential", label: "潜在客户", count: tabCounts.potential },
|
||||||
|
{ key: "partner", label: "合作伙伴", count: tabCounts.partner },
|
||||||
|
{ key: "friend", label: "朋友", count: tabCounts.friend },
|
||||||
|
];
|
||||||
|
|
||||||
|
// 加载联系人数据
|
||||||
|
const loadContacts = async (page: number = 1, pageSize: number = 12) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
// 构建请求参数
|
||||||
|
const params: any = {
|
||||||
|
page,
|
||||||
|
limit: pageSize,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 添加搜索条件
|
||||||
|
if (searchValue.trim()) {
|
||||||
|
params.keyword = searchValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加分类筛选
|
||||||
|
if (activeTab === "customer") {
|
||||||
|
params.isPassed = true;
|
||||||
|
} else if (activeTab === "potential") {
|
||||||
|
params.isPassed = false;
|
||||||
|
}
|
||||||
|
// "全部"、"partner" 和 "friend" 不添加额外筛选条件
|
||||||
|
|
||||||
|
const response = await getContactList(params);
|
||||||
|
|
||||||
|
// 假设接口返回格式为 { data: Contact[], total: number, page: number, limit: number }
|
||||||
|
setContacts(response.data || response.list || []);
|
||||||
|
setPagination(prev => ({
|
||||||
|
...prev,
|
||||||
|
current: response.page || page,
|
||||||
|
pageSize: response.limit || pageSize,
|
||||||
|
total: response.total || 0,
|
||||||
|
}));
|
||||||
|
|
||||||
|
// 更新分类统计
|
||||||
|
if (page === 1) {
|
||||||
|
// 只在第一页时更新统计，避免重复请求
|
||||||
|
const allResponse = await getContactList({ page: 1, limit: 1 });
|
||||||
|
const customerResponse = await getContactList({
|
||||||
|
page: 1,
|
||||||
|
limit: 1,
|
||||||
|
isPassed: true,
|
||||||
|
});
|
||||||
|
const potentialResponse = await getContactList({
|
||||||
|
page: 1,
|
||||||
|
limit: 1,
|
||||||
|
isPassed: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
setTabCounts({
|
||||||
|
all: allResponse.total || 0,
|
||||||
|
customer: customerResponse.total || 0,
|
||||||
|
potential: potentialResponse.total || 0,
|
||||||
|
partner: 0, // 可以根据业务逻辑调整
|
||||||
|
friend: 0, // 可以根据业务逻辑调整
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("加载联系人数据失败:", error);
|
||||||
|
message.error("加载联系人数据失败，请稍后重试");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 当分类或搜索条件改变时重新加载数据
|
||||||
|
useEffect(() => {
|
||||||
|
loadContacts(1, pagination.pageSize);
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [activeTab, searchValue, pagination.pageSize]);
|
||||||
|
|
||||||
|
const filteredContacts = contacts;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout
|
||||||
|
header={
|
||||||
|
<>
|
||||||
|
<div style={{ padding: "20px" }}>
|
||||||
|
<PowerNavigation
|
||||||
|
title="客户好友管理"
|
||||||
|
subtitle="管理客户关系,维护好友信息"
|
||||||
|
showBackButton={true}
|
||||||
|
backButtonText="返回功能中心"
|
||||||
|
rightContent={<Button>添加好友</Button>}
|
||||||
|
/>
|
||||||
|
{/* 搜索和筛选 */}
|
||||||
|
<div className={styles.searchBar}>
|
||||||
|
<Input
|
||||||
|
placeholder="搜索好友姓名、公司或标签..."
|
||||||
|
value={searchValue}
|
||||||
|
onChange={e => setSearchValue(e.target.value)}
|
||||||
|
prefix={<SearchOutlined />}
|
||||||
|
allowClear
|
||||||
|
size="large"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={() => loadContacts(1, pagination.pageSize)}
|
||||||
|
size="large"
|
||||||
|
className={styles["refresh-btn"]}
|
||||||
|
loading={loading}
|
||||||
|
>
|
||||||
|
<FilterOutlined />
|
||||||
|
刷新
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{/* 标签页 */}
|
||||||
|
<div className={styles.tabs}>
|
||||||
|
{tabs.map(tab => (
|
||||||
|
<button
|
||||||
|
key={tab.key}
|
||||||
|
className={`${styles.tab} ${activeTab === tab.key ? styles.activeTab : ""}`}
|
||||||
|
onClick={() => setActiveTab(tab.key)}
|
||||||
|
>
|
||||||
|
{tab.label} ({tab.count})
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
footer={
|
||||||
|
<div className="pagination-wrapper">
|
||||||
|
<Pagination
|
||||||
|
current={pagination.current}
|
||||||
|
pageSize={pagination.pageSize}
|
||||||
|
total={pagination.total}
|
||||||
|
showSizeChanger
|
||||||
|
showQuickJumper
|
||||||
|
showTotal={(total, range) =>
|
||||||
|
`第 ${range[0]}-${range[1]} 条，共 ${total} 条`
|
||||||
|
}
|
||||||
|
onChange={(page, pageSize) => {
|
||||||
|
loadContacts(page, pageSize || pagination.pageSize);
|
||||||
|
}}
|
||||||
|
onShowSizeChange={(current, size) => {
|
||||||
|
loadContacts(1, size);
|
||||||
|
}}
|
||||||
|
pageSizeOptions={["6", "12", "24", "48"]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<div className={styles.content}>
|
||||||
|
{/* 联系人卡片列表 */}
|
||||||
|
<div className={styles.contactsList}>
|
||||||
|
{loading ? (
|
||||||
|
<div style={{ textAlign: "center", padding: "50px" }}>
|
||||||
|
<Spin size="large" />
|
||||||
|
<p style={{ marginTop: "16px", color: "#666" }}>
|
||||||
|
正在加载联系人数据...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : filteredContacts.length === 0 ? (
|
||||||
|
<div style={{ textAlign: "center", padding: "50px" }}>
|
||||||
|
<p style={{ color: "#999" }}>暂无联系人数据</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Row gutter={[16, 16]}>
|
||||||
|
{filteredContacts.map(contact => (
|
||||||
|
<Col span={8} key={contact.id || contact.serverId}>
|
||||||
|
<div className={styles.contactCard}>
|
||||||
|
<div className={styles.cardHeader}>
|
||||||
|
<div className={styles.contactInfo}>
|
||||||
|
<Avatar
|
||||||
|
name={
|
||||||
|
contact.conRemark ||
|
||||||
|
contact.nickname ||
|
||||||
|
contact.alias ||
|
||||||
|
"未知用户"
|
||||||
|
}
|
||||||
|
avatar={contact.avatar}
|
||||||
|
size={48}
|
||||||
|
/>
|
||||||
|
<div className={styles.nameSection}>
|
||||||
|
<h3 className={styles.contactName}>
|
||||||
|
{contact.conRemark ||
|
||||||
|
contact.nickname ||
|
||||||
|
contact.alias ||
|
||||||
|
"未知用户"}
|
||||||
|
</h3>
|
||||||
|
<p className={styles.roleCompany}>
|
||||||
|
客户 {"·"} {contact.desc || "未设置公司"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.contactDetails}>
|
||||||
|
<div className={styles.contactInfo}>
|
||||||
|
<p className={styles.contactItem}>
|
||||||
|
<span className={styles.label}>电话:</span>{" "}
|
||||||
|
{contact.phone || "未设置电话"}
|
||||||
|
</p>
|
||||||
|
<p className={styles.contactItem}>
|
||||||
|
<span className={styles.label}>地区:</span>{" "}
|
||||||
|
{contact.region || contact.city || "未设置地区"}
|
||||||
|
</p>
|
||||||
|
<p className={styles.contactItem}>
|
||||||
|
<span className={styles.label}>微信ID:</span>{" "}
|
||||||
|
{contact.wechatId}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.tagsSection}>
|
||||||
|
<div className={styles.tags}>
|
||||||
|
{contact?.labels?.map(
|
||||||
|
(tag: string, index: number) => (
|
||||||
|
<span key={index} className={styles.tag}>
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.actions}>
|
||||||
|
<Button type="primary" block>
|
||||||
|
<MessageOutlined />
|
||||||
|
聊天
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
))}
|
||||||
|
</Row>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default CustomerManagement;
|
export default CustomerManagement;
|
||||||
|
|||||||
@@ -37,6 +37,11 @@ export function getContactList(params) {
|
|||||||
export function getGroupList(params) {
|
export function getGroupList(params) {
|
||||||
return request("/v1/kefu/wechatChatroom/list", params, "GET");
|
return request("/v1/kefu/wechatChatroom/list", params, "GET");
|
||||||
}
|
}
|
||||||
|
// 分组列表
|
||||||
|
export function getLabelsListByGroup(params) {
|
||||||
|
return request("/v1/kefu/wechatGroup/list", params, "GET");
|
||||||
|
}
|
||||||
|
|
||||||
//==============-原接口=================
|
//==============-原接口=================
|
||||||
// 获取联系人列表
|
// 获取联系人列表
|
||||||
// export const getContactList = (params: { prevId: number; count: number }) => {
|
// export const getContactList = (params: { prevId: number; count: number }) => {
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ import {
|
|||||||
getContactList,
|
getContactList,
|
||||||
getGroupList,
|
getGroupList,
|
||||||
getAgentList,
|
getAgentList,
|
||||||
|
getLabelsListByGroup,
|
||||||
} from "./api";
|
} from "./api";
|
||||||
|
|
||||||
import { useUserStore } from "@/store/module/user";
|
import { useUserStore } from "@/store/module/user";
|
||||||
@@ -41,10 +42,10 @@ export const chatInitAPIdata = async () => {
|
|||||||
await asyncWeChatGroup(groupList);
|
await asyncWeChatGroup(groupList);
|
||||||
|
|
||||||
// 提取不重复的wechatAccountId组
|
// 提取不重复的wechatAccountId组
|
||||||
const uniqueWechatAccountIds: number[] = getUniqueWechatAccountIds(
|
// const uniqueWechatAccountIds: number[] = getUniqueWechatAccountIds(
|
||||||
contractList,
|
// contractList,
|
||||||
groupList,
|
// groupList,
|
||||||
);
|
// );
|
||||||
|
|
||||||
//获取控制终端列表
|
//获取控制终端列表
|
||||||
const kfUserList: KfUserListData[] = await getAgentList();
|
const kfUserList: KfUserListData[] = await getAgentList();
|
||||||
@@ -53,8 +54,8 @@ export const chatInitAPIdata = async () => {
|
|||||||
await asyncKfUserList(kfUserList);
|
await asyncKfUserList(kfUserList);
|
||||||
|
|
||||||
//获取标签列表
|
//获取标签列表
|
||||||
// const countLables = await getCountLables();
|
const countLables = await getCountLables();
|
||||||
// await asyncCountLables(countLables);
|
await asyncCountLables(countLables);
|
||||||
|
|
||||||
//获取消息会话列表并按lastUpdateTime排序
|
//获取消息会话列表并按lastUpdateTime排序
|
||||||
const filterUserSessions = contractList?.filter(
|
const filterUserSessions = contractList?.filter(
|
||||||
@@ -121,15 +122,9 @@ export const initSocket = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const getCountLables = async () => {
|
export const getCountLables = async () => {
|
||||||
const LablesRes = await Promise.all(
|
const Result = await getLabelsListByGroup({});
|
||||||
[1, 2].map(item =>
|
const LablesRes = Result.list;
|
||||||
WechatGroup({
|
return [
|
||||||
groupType: item,
|
|
||||||
}),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
const [friend, group] = LablesRes;
|
|
||||||
const countLables = [
|
|
||||||
...[
|
...[
|
||||||
{
|
{
|
||||||
id: 0,
|
id: 0,
|
||||||
@@ -137,8 +132,7 @@ export const getCountLables = async () => {
|
|||||||
groupType: 2,
|
groupType: 2,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
...group,
|
...LablesRes,
|
||||||
...friend,
|
|
||||||
...[
|
...[
|
||||||
{
|
{
|
||||||
id: 0,
|
id: 0,
|
||||||
@@ -147,8 +141,6 @@ export const getCountLables = async () => {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
];
|
];
|
||||||
|
|
||||||
return countLables;
|
|
||||||
};
|
};
|
||||||
/**
|
/**
|
||||||
* 根据标签组织联系人
|
* 根据标签组织联系人
|
||||||
|
|||||||
@@ -315,3 +315,11 @@ button {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.pagination-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px;
|
||||||
|
background: white;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user