Merge branch 'yongpxu-dev' into yongpxu-dev2
This commit is contained in:
超级老白兔
@@ -3,41 +3,268 @@
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// 头部区域样式
|
||||
.header {
|
||||
margin-bottom: 24px;
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 300px;
|
||||
background: #fafafa;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #8c8c8c;
|
||||
margin: 0;
|
||||
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;
|
||||
|
||||
:global(.ant-tabs-nav) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:global(.ant-tabs-tab) {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 主要内容区域
|
||||
.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 PowerNavigation from "@/components/PowerNavtion";
|
||||
import React, { useState } from "react";
|
||||
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";
|
||||
|
||||
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 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 (
|
||||
<div className={styles.container}>
|
||||
<PowerNavigation
|
||||
title="自动打招呼"
|
||||
subtitle="智能识别新好友，自动发送个性化欢迎消息"
|
||||
showBackButton={true}
|
||||
backButtonText="返回功能中心"
|
||||
/>
|
||||
<div className={styles.content}>
|
||||
{/* 功能内容待开发 */}
|
||||
<div className={styles.placeholder}>
|
||||
<p>自动打招呼功能正在开发中...</p>
|
||||
{/* 头部区域 */}
|
||||
<div className={styles.header}>
|
||||
<div className={styles.headerLeft}>
|
||||
<Button
|
||||
type="text"
|
||||
size="large"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate(-1)}
|
||||
className={styles.backButton}
|
||||
>
|
||||
返回功能中心
|
||||
</Button>
|
||||
<div className={styles.titleSection}>
|
||||
<h1>自动问候</h1>
|
||||
<p>设置智能问候规则,提升客户体验</p>
|
||||
</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>
|
||||
);
|
||||
|
||||
@@ -1,43 +1,355 @@
|
||||
.container {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 24px;
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
margin: 0;
|
||||
}
|
||||
.searchBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 0 8px 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
// 页面头部
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 300px;
|
||||
background: #fafafa;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #8c8c8c;
|
||||
margin: 0;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.headerLeft {
|
||||
.title {
|
||||
font-size: 24px;
|
||||
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 {
|
||||
SearchOutlined,
|
||||
FilterOutlined,
|
||||
MessageOutlined,
|
||||
PhoneOutlined,
|
||||
} from "@ant-design/icons";
|
||||
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 = () => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<PowerNavigation
|
||||
title="客户好友管理"
|
||||
subtitle="统一管理客户信息和好友关系，提升服务效率"
|
||||
showBackButton={true}
|
||||
backButtonText="返回功能中心"
|
||||
const getAvatarColor = (name: string) => {
|
||||
const colors = [
|
||||
"#1890ff",
|
||||
"#52c41a",
|
||||
"#faad14",
|
||||
"#f5222d",
|
||||
"#722ed1",
|
||||
"#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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.avatarPlaceholder}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
backgroundColor: getAvatarColor(name),
|
||||
fontSize: size * 0.4,
|
||||
}}
|
||||
>
|
||||
{getInitials(name)}
|
||||
</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;
|
||||
|
||||
@@ -37,6 +37,11 @@ export function getContactList(params) {
|
||||
export function getGroupList(params) {
|
||||
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 }) => {
|
||||
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
getContactList,
|
||||
getGroupList,
|
||||
getAgentList,
|
||||
getLabelsListByGroup,
|
||||
} from "./api";
|
||||
|
||||
import { useUserStore } from "@/store/module/user";
|
||||
@@ -41,10 +42,10 @@ export const chatInitAPIdata = async () => {
|
||||
await asyncWeChatGroup(groupList);
|
||||
|
||||
// 提取不重复的wechatAccountId组
|
||||
const uniqueWechatAccountIds: number[] = getUniqueWechatAccountIds(
|
||||
contractList,
|
||||
groupList,
|
||||
);
|
||||
// const uniqueWechatAccountIds: number[] = getUniqueWechatAccountIds(
|
||||
// contractList,
|
||||
// groupList,
|
||||
// );
|
||||
|
||||
//获取控制终端列表
|
||||
const kfUserList: KfUserListData[] = await getAgentList();
|
||||
@@ -53,8 +54,8 @@ export const chatInitAPIdata = async () => {
|
||||
await asyncKfUserList(kfUserList);
|
||||
|
||||
//获取标签列表
|
||||
// const countLables = await getCountLables();
|
||||
// await asyncCountLables(countLables);
|
||||
const countLables = await getCountLables();
|
||||
await asyncCountLables(countLables);
|
||||
|
||||
//获取消息会话列表并按lastUpdateTime排序
|
||||
const filterUserSessions = contractList?.filter(
|
||||
@@ -121,15 +122,9 @@ export const initSocket = () => {
|
||||
};
|
||||
|
||||
export const getCountLables = async () => {
|
||||
const LablesRes = await Promise.all(
|
||||
[1, 2].map(item =>
|
||||
WechatGroup({
|
||||
groupType: item,
|
||||
}),
|
||||
),
|
||||
);
|
||||
const [friend, group] = LablesRes;
|
||||
const countLables = [
|
||||
const Result = await getLabelsListByGroup({});
|
||||
const LablesRes = Result.list;
|
||||
return [
|
||||
...[
|
||||
{
|
||||
id: 0,
|
||||
@@ -137,8 +132,7 @@ export const getCountLables = async () => {
|
||||
groupType: 2,
|
||||
},
|
||||
],
|
||||
...group,
|
||||
...friend,
|
||||
...LablesRes,
|
||||
...[
|
||||
{
|
||||
id: 0,
|
||||
@@ -147,8 +141,6 @@ export const getCountLables = async () => {
|
||||
},
|
||||
],
|
||||
];
|
||||
|
||||
return countLables;
|
||||
};
|
||||
/**
|
||||
* 根据标签组织联系人
|
||||
|
||||
@@ -315,3 +315,11 @@ button {
|
||||
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