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 {
|
||||
padding: 12px;
|
||||
background: #f5f5f5;
|
||||
.workspace {
|
||||
padding: 16px;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.home-cards {
|
||||
display: flex;
|
||||
.statsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
> :global(.adm-card) {
|
||||
flex: 1;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
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-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
padding-left: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.home-scene-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 8px 8px 8px;
|
||||
.newBadge {
|
||||
margin-left: 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;
|
||||
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 {
|
||||
|
||||
.featureDescription {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.home-today-item {
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
background: #f7f8fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.home-today-value {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #1677ff;
|
||||
}
|
||||
.home-today-label {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.home-chart {
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
}
|
||||
// 响应式设计
|
||||
@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,132 +1,282 @@
|
||||
import React, { useState } from "react";
|
||||
import { Card, NavBar, TabBar, Grid } from "antd-mobile";
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Card, NavBar, Badge } from "antd-mobile";
|
||||
import {
|
||||
LikeOutlined,
|
||||
MessageOutlined,
|
||||
SendOutlined,
|
||||
TeamOutlined,
|
||||
LinkOutlined,
|
||||
AppstoreOutlined,
|
||||
UserOutlined,
|
||||
PieChartOutlined,
|
||||
ShoppingOutlined,
|
||||
BellOutlined,
|
||||
ClockCircleOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import style from "./index.module.scss";
|
||||
const sceneStats = [
|
||||
{
|
||||
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" }} />,
|
||||
},
|
||||
];
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import styles from "./index.module.scss";
|
||||
|
||||
const todayStats = [
|
||||
{ label: "朋友圈同步", value: 12 },
|
||||
{ label: "群发任务", value: 8 },
|
||||
{ label: "获客转化", value: "85%" },
|
||||
{ label: "系统活跃度", value: "98%" },
|
||||
];
|
||||
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
|
||||
);
|
||||
|
||||
const Home: React.FC = () => {
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavBar back={null} style={{ background: "#fff" }}>
|
||||
<span style={{ color: "#1677ff", fontWeight: 700 }}>存客宝</span>
|
||||
<div style={{ color: "var(--primary-color)", fontWeight: 600 }}>
|
||||
工作台
|
||||
</div>
|
||||
</NavBar>
|
||||
}
|
||||
footer={<MeauMobile />}
|
||||
>
|
||||
<div className={style["home-page"]}>
|
||||
{/* 统计卡片 */}
|
||||
<div className={style["home-cards"]}>
|
||||
<Card className={style["home-card"]}>
|
||||
<div className={style["home-card-title"]}>设备数量</div>
|
||||
<div className={style["home-card-value"]}>0</div>
|
||||
<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={style["home-card"]}>
|
||||
<div className={style["home-card-title"]}>微信号数量</div>
|
||||
<div className={style["home-card-value"]}>0</div>
|
||||
</Card>
|
||||
<Card className={style["home-card"]}>
|
||||
<div className={style["home-card-title"]}>在线微信号</div>
|
||||
<div className={style["home-card-value"]}>0</div>
|
||||
|
||||
<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>
|
||||
|
||||
{/* 场景获客统计 */}
|
||||
<Card className={style["home-section"]}>
|
||||
<div className={style["home-section-title"]}>场景获客统计</div>
|
||||
<div className={style["home-scene-stats"]}>
|
||||
{sceneStats.map((item) => (
|
||||
<div key={item.label} className={style["home-scene-item"]}>
|
||||
<div className={style["home-scene-icon"]}>{item.icon}</div>
|
||||
<div className={style["home-scene-value"]}>{item.value}</div>
|
||||
<div className={style["home-scene-label"]}>{item.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 今日数据 */}
|
||||
<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"
|
||||
{/* 常用功能 */}
|
||||
<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 }}
|
||||
>
|
||||
{d}
|
||||
</text>
|
||||
)
|
||||
)}
|
||||
</svg>
|
||||
{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>
|
||||
</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>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
export default Workspace;
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import Home from "@/pages/home/index";
|
||||
import Mine from "@/pages/mine/index";
|
||||
import Workspace from "@/pages/workspace/main";
|
||||
|
||||
const routes = [
|
||||
// 基础路由
|
||||
@@ -9,11 +8,6 @@ const routes = [
|
||||
element: <Home />,
|
||||
auth: true, // 需要登录
|
||||
},
|
||||
{
|
||||
path: "/work",
|
||||
element: <Workspace />,
|
||||
auth: true,
|
||||
},
|
||||
{
|
||||
path: "/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 NewAutoLike from "@/pages/workspace/auto-like/NewAutoLike";
|
||||
import AutoLikeDetail from "@/pages/workspace/auto-like/AutoLikeDetail";
|
||||
|
||||
Reference in New Issue
Block a user