feat: 本次提交更新内容如下
修改工作台路由
This commit is contained in:
笔记本里的永平
@@ -1,185 +0,0 @@
|
|||||||
.workspace {
|
|
||||||
padding: 16px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.statsGrid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 12px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.statsCard {
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 16px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
||||||
|
|
||||||
:global(.adm-card-body) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.statsTitle {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.statsValue {
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
|
|
||||||
:global(.adm-progress-bar) {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.adm-progress-bar-fill) {
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.statsSubtitle {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.activityRate {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #52c41a;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.activityIcon {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin-right: 4px;
|
|
||||||
color: #52c41a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sectionTitle {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featuresGrid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featureLink {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featureCard {
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 16px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.adm-card-body) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.featureIcon {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featureHeader {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featureName {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newBadge {
|
|
||||||
margin-left: 8px;
|
|
||||||
|
|
||||||
:global(.adm-badge-content) {
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
color: #fff;
|
|
||||||
font-size: 10px;
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.featureDescription {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #666;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 响应式设计
|
|
||||||
@media (max-width: 375px) {
|
|
||||||
.workspace {
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.statsGrid {
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featuresGrid {
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.statsCard,
|
|
||||||
.featureCard {
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.statsValue {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.featureIcon {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,282 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { Card, NavBar, Badge } from "antd-mobile";
|
|
||||||
import {
|
|
||||||
LikeOutlined,
|
|
||||||
MessageOutlined,
|
|
||||||
SendOutlined,
|
|
||||||
TeamOutlined,
|
|
||||||
LinkOutlined,
|
|
||||||
AppstoreOutlined,
|
|
||||||
PieChartOutlined,
|
|
||||||
ClockCircleOutlined,
|
|
||||||
} from "@ant-design/icons";
|
|
||||||
import Layout from "@/components/Layout/Layout";
|
|
||||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
|
||||||
import styles from "./Workspace.module.scss";
|
|
||||||
|
|
||||||
const Workspace: React.FC = () => {
|
|
||||||
// 模拟任务数据
|
|
||||||
const taskStats = {
|
|
||||||
total: 42,
|
|
||||||
inProgress: 12,
|
|
||||||
completed: 30,
|
|
||||||
todayTasks: 12,
|
|
||||||
activityRate: 98,
|
|
||||||
};
|
|
||||||
|
|
||||||
// 常用功能
|
|
||||||
const commonFeatures = [
|
|
||||||
{
|
|
||||||
id: "auto-like",
|
|
||||||
name: "自动点赞",
|
|
||||||
description: "智能自动点赞互动",
|
|
||||||
icon: (
|
|
||||||
<LikeOutlined className={styles.icon} style={{ color: "#ff4d4f" }} />
|
|
||||||
),
|
|
||||||
path: "/workspace/auto-like",
|
|
||||||
bgColor: "#fff2f0",
|
|
||||||
isNew: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "moments-sync",
|
|
||||||
name: "朋友圈同步",
|
|
||||||
description: "自动同步朋友圈内容",
|
|
||||||
icon: (
|
|
||||||
<ClockCircleOutlined
|
|
||||||
className={styles.icon}
|
|
||||||
style={{ color: "#722ed1" }}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
path: "/workspace/moments-sync",
|
|
||||||
bgColor: "#f9f0ff",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "group-push",
|
|
||||||
name: "群消息推送",
|
|
||||||
description: "智能群发助手",
|
|
||||||
icon: (
|
|
||||||
<SendOutlined className={styles.icon} style={{ color: "#fa8c16" }} />
|
|
||||||
),
|
|
||||||
path: "/workspace/group-push",
|
|
||||||
bgColor: "#fff7e6",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "auto-group",
|
|
||||||
name: "自动建群",
|
|
||||||
description: "智能拉好友建群",
|
|
||||||
icon: (
|
|
||||||
<TeamOutlined className={styles.icon} style={{ color: "#52c41a" }} />
|
|
||||||
),
|
|
||||||
path: "/workspace/auto-group",
|
|
||||||
bgColor: "#f6ffed",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "traffic-distribution",
|
|
||||||
name: "流量分发",
|
|
||||||
description: "管理流量分发和分配",
|
|
||||||
icon: (
|
|
||||||
<LinkOutlined className={styles.icon} style={{ color: "#1890ff" }} />
|
|
||||||
),
|
|
||||||
path: "/workspace/traffic-distribution",
|
|
||||||
bgColor: "#e6f7ff",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "ai-assistant",
|
|
||||||
name: "AI对话助手",
|
|
||||||
description: "智能回复，提高互动质量",
|
|
||||||
icon: (
|
|
||||||
<MessageOutlined className={styles.icon} style={{ color: "#1890ff" }} />
|
|
||||||
),
|
|
||||||
path: "/workspace/ai-assistant",
|
|
||||||
bgColor: "#e6f7ff",
|
|
||||||
isNew: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// AI智能助手
|
|
||||||
const aiFeatures = [
|
|
||||||
{
|
|
||||||
id: "ai-analyzer",
|
|
||||||
name: "AI数据分析",
|
|
||||||
description: "智能分析客户行为特征",
|
|
||||||
icon: (
|
|
||||||
<PieChartOutlined
|
|
||||||
className={styles.icon}
|
|
||||||
style={{ color: "#531dab" }}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
path: "/workspace/ai-analyzer",
|
|
||||||
bgColor: "#f0f0ff",
|
|
||||||
isNew: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "ai-strategy",
|
|
||||||
name: "AI策略优化",
|
|
||||||
description: "智能优化获客策略",
|
|
||||||
icon: (
|
|
||||||
<AppstoreOutlined
|
|
||||||
className={styles.icon}
|
|
||||||
style={{ color: "#13c2c2" }}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
path: "/workspace/ai-strategy",
|
|
||||||
bgColor: "#e6fffb",
|
|
||||||
isNew: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "ai-forecast",
|
|
||||||
name: "AI销售预测",
|
|
||||||
description: "智能预测销售趋势",
|
|
||||||
icon: (
|
|
||||||
<PieChartOutlined
|
|
||||||
className={styles.icon}
|
|
||||||
style={{ color: "#d48806" }}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
path: "/workspace/ai-forecast",
|
|
||||||
bgColor: "#fffbe6",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// 进度条宽度
|
|
||||||
const progressPercent = Math.round(
|
|
||||||
(taskStats.inProgress / taskStats.total) * 100
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Layout
|
|
||||||
header={
|
|
||||||
<NavBar back={null} style={{ background: "#fff" }}>
|
|
||||||
<div style={{ color: "var(--primary-color)", fontWeight: 600 }}>
|
|
||||||
工作台
|
|
||||||
</div>
|
|
||||||
</NavBar>
|
|
||||||
}
|
|
||||||
footer={<MeauMobile />}
|
|
||||||
>
|
|
||||||
<div className={styles.workspace}>
|
|
||||||
{/* 任务统计卡片 */}
|
|
||||||
<div className={styles.statsGrid}>
|
|
||||||
<Card className={styles.statsCard}>
|
|
||||||
<div className={styles.statsTitle}>总任务数</div>
|
|
||||||
<div className={styles.statsValue}>{taskStats.total}</div>
|
|
||||||
<div className={styles.progress}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: progressPercent + "%",
|
|
||||||
height: 6,
|
|
||||||
background: "var(--primary-color)",
|
|
||||||
borderRadius: 4,
|
|
||||||
transition: "width 0.3s",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: 100 - progressPercent + "%",
|
|
||||||
height: 6,
|
|
||||||
background: "#f0f0f0",
|
|
||||||
borderRadius: 4,
|
|
||||||
display: "inline-block",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={styles.statsSubtitle}>
|
|
||||||
进行中: {taskStats.inProgress} / 已完成: {taskStats.completed}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className={styles.statsCard}>
|
|
||||||
<div className={styles.statsTitle}>今日任务</div>
|
|
||||||
<div className={styles.statsValue} style={{ color: "#52c41a" }}>
|
|
||||||
{taskStats.todayTasks}
|
|
||||||
</div>
|
|
||||||
<div className={styles.activityRate}>
|
|
||||||
<svg
|
|
||||||
className={styles.activityIcon}
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M3 12H7L10 19L14 5L17 12H21"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span>活跃度 {taskStats.activityRate}%</span>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 常用功能 */}
|
|
||||||
<div className={styles.section}>
|
|
||||||
<h2 className={styles.sectionTitle}>常用功能</h2>
|
|
||||||
<div className={styles.featuresGrid}>
|
|
||||||
{commonFeatures.map((feature) => (
|
|
||||||
<Link
|
|
||||||
to={feature.path}
|
|
||||||
key={feature.id}
|
|
||||||
className={styles.featureLink}
|
|
||||||
>
|
|
||||||
<Card className={styles.featureCard}>
|
|
||||||
<div
|
|
||||||
className={styles.featureIcon}
|
|
||||||
style={{ backgroundColor: feature.bgColor }}
|
|
||||||
>
|
|
||||||
{feature.icon}
|
|
||||||
</div>
|
|
||||||
<div className={styles.featureHeader}>
|
|
||||||
<div className={styles.featureName}>{feature.name}</div>
|
|
||||||
{feature.isNew && (
|
|
||||||
<Badge content="New" className={styles.newBadge} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className={styles.featureDescription}>
|
|
||||||
{feature.description}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* AI智能助手 */}
|
|
||||||
<div className={styles.section}>
|
|
||||||
<h2 className={styles.sectionTitle}>AI 智能助手</h2>
|
|
||||||
<div className={styles.featuresGrid}>
|
|
||||||
{aiFeatures.map((feature) => (
|
|
||||||
<Link
|
|
||||||
to={feature.path}
|
|
||||||
key={feature.id}
|
|
||||||
className={styles.featureLink}
|
|
||||||
>
|
|
||||||
<Card className={styles.featureCard}>
|
|
||||||
<div
|
|
||||||
className={styles.featureIcon}
|
|
||||||
style={{ backgroundColor: feature.bgColor }}
|
|
||||||
>
|
|
||||||
{feature.icon}
|
|
||||||
</div>
|
|
||||||
<div className={styles.featureHeader}>
|
|
||||||
<div className={styles.featureName}>{feature.name}</div>
|
|
||||||
{feature.isNew && (
|
|
||||||
<Badge content="New" className={styles.newBadge} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className={styles.featureDescription}>
|
|
||||||
{feature.description}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Workspace;
|
|
||||||
@@ -1,71 +1,185 @@
|
|||||||
.home-page {
|
.workspace {
|
||||||
padding: 12px;
|
padding: 16px;
|
||||||
background: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-cards {
|
.statsGrid {
|
||||||
display: flex;
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 24px;
|
||||||
> :global(.adm-card) {
|
}
|
||||||
flex: 1;
|
|
||||||
|
.statsCard {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
:global(.adm-card-body) {
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-section {
|
.statsTitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statsValue {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary-color);
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
:global(.adm-progress-bar) {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.adm-progress-bar-fill) {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.statsSubtitle {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activityRate {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #52c41a;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activityIcon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 4px;
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featuresGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureLink {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureCard {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
|
padding: 16px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.adm-card-body) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-section-title {
|
.featureIcon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureHeader {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureName {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 15px;
|
color: #333;
|
||||||
padding-left: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-scene-stats {
|
.newBadge {
|
||||||
display: flex;
|
margin-left: 8px;
|
||||||
justify-content: space-between;
|
|
||||||
margin: 0 8px 8px 8px;
|
:global(.adm-badge-content) {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 10px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.home-scene-item {
|
|
||||||
flex: 1;
|
.featureDescription {
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.home-scene-icon {
|
|
||||||
margin: 0 auto 4px auto;
|
|
||||||
}
|
|
||||||
.home-scene-value {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #1677ff;
|
|
||||||
}
|
|
||||||
.home-scene-label {
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #888;
|
color: #666;
|
||||||
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-today-item {
|
// 响应式设计
|
||||||
text-align: center;
|
@media (max-width: 375px) {
|
||||||
padding: 8px 0;
|
.workspace {
|
||||||
background: #f7f8fa;
|
padding: 12px;
|
||||||
border-radius: 8px;
|
}
|
||||||
}
|
|
||||||
.home-today-value {
|
.statsGrid {
|
||||||
font-size: 18px;
|
gap: 8px;
|
||||||
font-weight: bold;
|
}
|
||||||
color: #1677ff;
|
|
||||||
}
|
.featuresGrid {
|
||||||
.home-today-label {
|
gap: 8px;
|
||||||
font-size: 12px;
|
}
|
||||||
color: #888;
|
|
||||||
}
|
.statsCard,
|
||||||
|
.featureCard {
|
||||||
.home-chart {
|
padding: 12px;
|
||||||
margin-top: 8px;
|
}
|
||||||
width: 100%;
|
|
||||||
min-height: 100px;
|
.statsValue {
|
||||||
}
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featureIcon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,132 +1,282 @@
|
|||||||
import React, { useState } from "react";
|
import React from "react";
|
||||||
import { Card, NavBar, TabBar, Grid } from "antd-mobile";
|
import { Link } from "react-router-dom";
|
||||||
|
import { Card, NavBar, Badge } from "antd-mobile";
|
||||||
import {
|
import {
|
||||||
|
LikeOutlined,
|
||||||
|
MessageOutlined,
|
||||||
|
SendOutlined,
|
||||||
|
TeamOutlined,
|
||||||
|
LinkOutlined,
|
||||||
AppstoreOutlined,
|
AppstoreOutlined,
|
||||||
UserOutlined,
|
|
||||||
PieChartOutlined,
|
PieChartOutlined,
|
||||||
ShoppingOutlined,
|
ClockCircleOutlined,
|
||||||
BellOutlined,
|
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
|
||||||
import Layout from "@/components/Layout/Layout";
|
import Layout from "@/components/Layout/Layout";
|
||||||
import style from "./index.module.scss";
|
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||||
const sceneStats = [
|
import styles from "./index.module.scss";
|
||||||
{
|
|
||||||
label: "公众号获客",
|
|
||||||
value: 234,
|
|
||||||
icon: <ShoppingOutlined style={{ fontSize: 28, color: "#4caf50" }} />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "海报获客",
|
|
||||||
value: 167,
|
|
||||||
icon: <AppstoreOutlined style={{ fontSize: 28, color: "#ff9800" }} />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "抖音获客",
|
|
||||||
value: 156,
|
|
||||||
icon: <PieChartOutlined style={{ fontSize: 28, color: "#2196f3" }} />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "小红书获客",
|
|
||||||
value: 89,
|
|
||||||
icon: <UserOutlined style={{ fontSize: 28, color: "#e91e63" }} />,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const todayStats = [
|
const Workspace: React.FC = () => {
|
||||||
{ label: "朋友圈同步", value: 12 },
|
// 模拟任务数据
|
||||||
{ label: "群发任务", value: 8 },
|
const taskStats = {
|
||||||
{ label: "获客转化", value: "85%" },
|
total: 42,
|
||||||
{ label: "系统活跃度", value: "98%" },
|
inProgress: 12,
|
||||||
];
|
completed: 30,
|
||||||
|
todayTasks: 12,
|
||||||
|
activityRate: 98,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 常用功能
|
||||||
|
const commonFeatures = [
|
||||||
|
{
|
||||||
|
id: "auto-like",
|
||||||
|
name: "自动点赞",
|
||||||
|
description: "智能自动点赞互动",
|
||||||
|
icon: (
|
||||||
|
<LikeOutlined className={styles.icon} style={{ color: "#ff4d4f" }} />
|
||||||
|
),
|
||||||
|
path: "/workspace/auto-like",
|
||||||
|
bgColor: "#fff2f0",
|
||||||
|
isNew: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "moments-sync",
|
||||||
|
name: "朋友圈同步",
|
||||||
|
description: "自动同步朋友圈内容",
|
||||||
|
icon: (
|
||||||
|
<ClockCircleOutlined
|
||||||
|
className={styles.icon}
|
||||||
|
style={{ color: "#722ed1" }}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
path: "/workspace/moments-sync",
|
||||||
|
bgColor: "#f9f0ff",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "group-push",
|
||||||
|
name: "群消息推送",
|
||||||
|
description: "智能群发助手",
|
||||||
|
icon: (
|
||||||
|
<SendOutlined className={styles.icon} style={{ color: "#fa8c16" }} />
|
||||||
|
),
|
||||||
|
path: "/workspace/group-push",
|
||||||
|
bgColor: "#fff7e6",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "auto-group",
|
||||||
|
name: "自动建群",
|
||||||
|
description: "智能拉好友建群",
|
||||||
|
icon: (
|
||||||
|
<TeamOutlined className={styles.icon} style={{ color: "#52c41a" }} />
|
||||||
|
),
|
||||||
|
path: "/workspace/auto-group",
|
||||||
|
bgColor: "#f6ffed",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "traffic-distribution",
|
||||||
|
name: "流量分发",
|
||||||
|
description: "管理流量分发和分配",
|
||||||
|
icon: (
|
||||||
|
<LinkOutlined className={styles.icon} style={{ color: "#1890ff" }} />
|
||||||
|
),
|
||||||
|
path: "/workspace/traffic-distribution",
|
||||||
|
bgColor: "#e6f7ff",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "ai-assistant",
|
||||||
|
name: "AI对话助手",
|
||||||
|
description: "智能回复，提高互动质量",
|
||||||
|
icon: (
|
||||||
|
<MessageOutlined className={styles.icon} style={{ color: "#1890ff" }} />
|
||||||
|
),
|
||||||
|
path: "/workspace/ai-assistant",
|
||||||
|
bgColor: "#e6f7ff",
|
||||||
|
isNew: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// AI智能助手
|
||||||
|
const aiFeatures = [
|
||||||
|
{
|
||||||
|
id: "ai-analyzer",
|
||||||
|
name: "AI数据分析",
|
||||||
|
description: "智能分析客户行为特征",
|
||||||
|
icon: (
|
||||||
|
<PieChartOutlined
|
||||||
|
className={styles.icon}
|
||||||
|
style={{ color: "#531dab" }}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
path: "/workspace/ai-analyzer",
|
||||||
|
bgColor: "#f0f0ff",
|
||||||
|
isNew: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "ai-strategy",
|
||||||
|
name: "AI策略优化",
|
||||||
|
description: "智能优化获客策略",
|
||||||
|
icon: (
|
||||||
|
<AppstoreOutlined
|
||||||
|
className={styles.icon}
|
||||||
|
style={{ color: "#13c2c2" }}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
path: "/workspace/ai-strategy",
|
||||||
|
bgColor: "#e6fffb",
|
||||||
|
isNew: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "ai-forecast",
|
||||||
|
name: "AI销售预测",
|
||||||
|
description: "智能预测销售趋势",
|
||||||
|
icon: (
|
||||||
|
<PieChartOutlined
|
||||||
|
className={styles.icon}
|
||||||
|
style={{ color: "#d48806" }}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
path: "/workspace/ai-forecast",
|
||||||
|
bgColor: "#fffbe6",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 进度条宽度
|
||||||
|
const progressPercent = Math.round(
|
||||||
|
(taskStats.inProgress / taskStats.total) * 100
|
||||||
|
);
|
||||||
|
|
||||||
const Home: React.FC = () => {
|
|
||||||
return (
|
return (
|
||||||
<Layout
|
<Layout
|
||||||
header={
|
header={
|
||||||
<NavBar back={null} style={{ background: "#fff" }}>
|
<NavBar back={null} style={{ background: "#fff" }}>
|
||||||
<span style={{ color: "#1677ff", fontWeight: 700 }}>存客宝</span>
|
<div style={{ color: "var(--primary-color)", fontWeight: 600 }}>
|
||||||
|
工作台
|
||||||
|
</div>
|
||||||
</NavBar>
|
</NavBar>
|
||||||
}
|
}
|
||||||
footer={<MeauMobile />}
|
footer={<MeauMobile />}
|
||||||
>
|
>
|
||||||
<div className={style["home-page"]}>
|
<div className={styles.workspace}>
|
||||||
{/* 统计卡片 */}
|
{/* 任务统计卡片 */}
|
||||||
<div className={style["home-cards"]}>
|
<div className={styles.statsGrid}>
|
||||||
<Card className={style["home-card"]}>
|
<Card className={styles.statsCard}>
|
||||||
<div className={style["home-card-title"]}>设备数量</div>
|
<div className={styles.statsTitle}>总任务数</div>
|
||||||
<div className={style["home-card-value"]}>0</div>
|
<div className={styles.statsValue}>{taskStats.total}</div>
|
||||||
|
<div className={styles.progress}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: progressPercent + "%",
|
||||||
|
height: 6,
|
||||||
|
background: "var(--primary-color)",
|
||||||
|
borderRadius: 4,
|
||||||
|
transition: "width 0.3s",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 100 - progressPercent + "%",
|
||||||
|
height: 6,
|
||||||
|
background: "#f0f0f0",
|
||||||
|
borderRadius: 4,
|
||||||
|
display: "inline-block",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={styles.statsSubtitle}>
|
||||||
|
进行中: {taskStats.inProgress} / 已完成: {taskStats.completed}
|
||||||
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
<Card className={style["home-card"]}>
|
|
||||||
<div className={style["home-card-title"]}>微信号数量</div>
|
<Card className={styles.statsCard}>
|
||||||
<div className={style["home-card-value"]}>0</div>
|
<div className={styles.statsTitle}>今日任务</div>
|
||||||
</Card>
|
<div className={styles.statsValue} style={{ color: "#52c41a" }}>
|
||||||
<Card className={style["home-card"]}>
|
{taskStats.todayTasks}
|
||||||
<div className={style["home-card-title"]}>在线微信号</div>
|
</div>
|
||||||
<div className={style["home-card-value"]}>0</div>
|
<div className={styles.activityRate}>
|
||||||
|
<svg
|
||||||
|
className={styles.activityIcon}
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M3 12H7L10 19L14 5L17 12H21"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>活跃度 {taskStats.activityRate}%</span>
|
||||||
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 场景获客统计 */}
|
{/* 常用功能 */}
|
||||||
<Card className={style["home-section"]}>
|
<div className={styles.section}>
|
||||||
<div className={style["home-section-title"]}>场景获客统计</div>
|
<h2 className={styles.sectionTitle}>常用功能</h2>
|
||||||
<div className={style["home-scene-stats"]}>
|
<div className={styles.featuresGrid}>
|
||||||
{sceneStats.map((item) => (
|
{commonFeatures.map((feature) => (
|
||||||
<div key={item.label} className={style["home-scene-item"]}>
|
<Link
|
||||||
<div className={style["home-scene-icon"]}>{item.icon}</div>
|
to={feature.path}
|
||||||
<div className={style["home-scene-value"]}>{item.value}</div>
|
key={feature.id}
|
||||||
<div className={style["home-scene-label"]}>{item.label}</div>
|
className={styles.featureLink}
|
||||||
</div>
|
>
|
||||||
))}
|
<Card className={styles.featureCard}>
|
||||||
</div>
|
<div
|
||||||
</Card>
|
className={styles.featureIcon}
|
||||||
|
style={{ backgroundColor: feature.bgColor }}
|
||||||
{/* 今日数据 */}
|
|
||||||
<Card className={style["home-section"]}>
|
|
||||||
<div className={style["home-section-title"]}>今日数据</div>
|
|
||||||
<Grid columns={2} gap={12}>
|
|
||||||
{todayStats.map((item) => (
|
|
||||||
<Grid.Item key={item.label}>
|
|
||||||
<div className={style["home-today-item"]}>
|
|
||||||
<div className={style["home-today-value"]}>{item.value}</div>
|
|
||||||
<div className={style["home-today-label"]}>{item.label}</div>
|
|
||||||
</div>
|
|
||||||
</Grid.Item>
|
|
||||||
))}
|
|
||||||
</Grid>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* 每日获客趋势（静态图表占位） */}
|
|
||||||
<Card className={style["home-section"]}>
|
|
||||||
<div className={style["home-section-title"]}>每日获客趋势</div>
|
|
||||||
<div className={style["home-chart"]}>
|
|
||||||
<svg width="100%" height="120">
|
|
||||||
<polyline
|
|
||||||
fill="none"
|
|
||||||
stroke="#1677ff"
|
|
||||||
strokeWidth="3"
|
|
||||||
points="10,100 40,80 70,60 100,50 130,40 160,60 190,80"
|
|
||||||
/>
|
|
||||||
{/* x轴文字 */}
|
|
||||||
{["周一", "周二", "周三", "周四", "周五", "周六", "周日"].map(
|
|
||||||
(d, i) => (
|
|
||||||
<text
|
|
||||||
key={d}
|
|
||||||
x={10 + i * 30}
|
|
||||||
y={115}
|
|
||||||
fontSize="12"
|
|
||||||
textAnchor="middle"
|
|
||||||
>
|
>
|
||||||
{d}
|
{feature.icon}
|
||||||
</text>
|
</div>
|
||||||
)
|
<div className={styles.featureHeader}>
|
||||||
)}
|
<div className={styles.featureName}>{feature.name}</div>
|
||||||
</svg>
|
{feature.isNew && (
|
||||||
|
<Badge content="New" className={styles.newBadge} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={styles.featureDescription}>
|
||||||
|
{feature.description}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</div>
|
||||||
|
|
||||||
|
{/* AI智能助手 */}
|
||||||
|
<div className={styles.section}>
|
||||||
|
<h2 className={styles.sectionTitle}>AI 智能助手</h2>
|
||||||
|
<div className={styles.featuresGrid}>
|
||||||
|
{aiFeatures.map((feature) => (
|
||||||
|
<Link
|
||||||
|
to={feature.path}
|
||||||
|
key={feature.id}
|
||||||
|
className={styles.featureLink}
|
||||||
|
>
|
||||||
|
<Card className={styles.featureCard}>
|
||||||
|
<div
|
||||||
|
className={styles.featureIcon}
|
||||||
|
style={{ backgroundColor: feature.bgColor }}
|
||||||
|
>
|
||||||
|
{feature.icon}
|
||||||
|
</div>
|
||||||
|
<div className={styles.featureHeader}>
|
||||||
|
<div className={styles.featureName}>{feature.name}</div>
|
||||||
|
{feature.isNew && (
|
||||||
|
<Badge content="New" className={styles.newBadge} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className={styles.featureDescription}>
|
||||||
|
{feature.description}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Home;
|
export default Workspace;
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import Home from "@/pages/home/index";
|
import Home from "@/pages/home/index";
|
||||||
import Mine from "@/pages/mine/index";
|
import Mine from "@/pages/mine/index";
|
||||||
import Workspace from "@/pages/workspace/main";
|
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
// 基础路由
|
// 基础路由
|
||||||
@@ -9,11 +8,6 @@ const routes = [
|
|||||||
element: <Home />,
|
element: <Home />,
|
||||||
auth: true, // 需要登录
|
auth: true, // 需要登录
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: "/work",
|
|
||||||
element: <Workspace />,
|
|
||||||
auth: true,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: "/mine",
|
path: "/mine",
|
||||||
element: <Mine />,
|
element: <Mine />,
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import Workspace from "@/pages/workspace/Workspace";
|
import Workspace from "@/pages/workspace/main";
|
||||||
import AutoLike from "@/pages/workspace/auto-like/AutoLike";
|
import AutoLike from "@/pages/workspace/auto-like/AutoLike";
|
||||||
import NewAutoLike from "@/pages/workspace/auto-like/NewAutoLike";
|
import NewAutoLike from "@/pages/workspace/auto-like/NewAutoLike";
|
||||||
import AutoLikeDetail from "@/pages/workspace/auto-like/AutoLikeDetail";
|
import AutoLikeDetail from "@/pages/workspace/auto-like/AutoLikeDetail";
|
||||||
|
|||||||
Reference in New Issue
Block a user