+ 我的
+
}
footer={
- {/* 统计卡片 */}
-
-
-
-
-
-
-
-
-
-
- {/* 场景获客统计 */}
- 设备数量
- 0
- 微信号数量
- 0
- 在线微信号
- 0
- 场景获客统计
-
- {sceneStats.map((item) => (
-
- = {
+ douyin: "通过抖音平台进行精准获客",
+ xiaohongshu: "利用小红书平台进行内容营销获客",
+ gongzhonghao: "通过微信公众号进行获客",
+ haibao: "通过海报分享进行获客",
+ phone: "通过电话营销进行获客",
+ weixinqun: "通过微信群进行获客",
+ payment: "通过付款码进行获客",
+ api: "通过API接口进行获客",
+};
+
const Scene: React.FC = () => {
const navigate = useNavigate();
const [scenarios, setScenarios] = useState([]);
@@ -26,25 +39,23 @@ const Scene: React.FC = () => {
const fetchScenarios = async () => {
setLoading(true);
setError("");
-
try {
const response = await getScenarios({ page: 1, limit: 20 });
-
- // 转换API数据为前端需要的格式
const transformedScenarios: Scenario[] = response.map((item: any) => ({
id: item.id.toString(),
name: item.name,
image:
item.image ||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png",
- count: item.count, // 模拟今日数据
- growth: item.growth, // 模拟增长率
+ description:
+ scenarioDescriptions[item.name?.toLowerCase()] ||
+ "通过该平台进行获客",
+ count: item.count,
+ growth: item.growth,
status: item.status,
}));
-
setScenarios(transformedScenarios);
} catch (error) {
- console.error("获取场景数据失败:", error);
setError("获取场景数据失败，请稍后重试");
Toast.show({
content: "获取场景数据失败，请稍后重试",
@@ -54,7 +65,6 @@ const Scene: React.FC = () => {
setLoading(false);
}
};
-
fetchScenarios();
}, []);
@@ -68,12 +78,61 @@ const Scene: React.FC = () => {
navigate("/scenarios/new");
};
- const getGrowthColor = (growth: string) => {
- const value = parseFloat(growth.replace(/[+%]/g, ""));
- if (value > 10) return "#52c41a";
- if (value > 5) return "#faad14";
- return "#ff4d4f";
- };
+ if (loading) {
+ return (
+
+
+ );
+ }
+
+ if (error && scenarios.length === 0) {
+ return (
+
+
+ );
+ }
return (
{
color="primary"
onClick={handleNewPlan}
className={style["new-plan-btn"]}
+ style={{ marginLeft: "auto" }}
>
-
{item.icon}
- {item.value}
- {item.label}
+
+ {/* 用户信息卡片 */}
+
+
- {/* 今日数据 */}
-
-
- {todayStats.map((item) => (
-
-
- ))}
-
-
-
- {/* 每日获客趋势（静态图表占位） */}
-
-
+
+ {/* 退出登录按钮 */}
+
);
};
-export default Home;
+export default Mine;
diff --git a/nkebao/src/pages/scene/index.module.scss b/nkebao/src/pages/scene/index.module.scss
index 972a62f3..e7c76ea5 100644
--- a/nkebao/src/pages/scene/index.module.scss
+++ b/nkebao/src/pages/scene/index.module.scss
@@ -31,9 +31,9 @@
// 页面容器
.scene-page {
- padding: 12px;
- background: #f5f5f5;
- min-height: calc(100vh - 100px);
+ background: #f5f6fa;
+ min-height: 100vh;
+ padding: 0 0 60px 0;
}
// 错误提示
@@ -142,109 +142,89 @@
}
}
+.scenarios-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 16px;
+ padding: 16px;
+}
+
.scenario-card {
background: #fff;
- border-radius: 12px;
- padding: 16px 20px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
- border: 1px solid #f0f0f0;
- transition: all 0.2s ease;
- display: flex;
- justify-content: space-between;
- align-items: center;
- min-height: 78px;
-
+ border-radius: 16px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+ transition: box-shadow 0.2s, transform 0.2s;
+ cursor: pointer;
+ overflow: hidden;
&:hover {
- box-shadow: 0 4px 16px rgba(24, 142, 238, 0.12);
- border-color: var(--primary-color-light);
+ box-shadow: 0 6px 16px rgba(0,0,0,0.12);
+ transform: translateY(-2px) scale(1.02);
}
}
-.scenario-left {
+.card-inner {
display: flex;
+ flex-direction: column;
align-items: center;
- gap: 16px;
- flex: 1;
+ padding: 18px 10px 14px 10px;
}
-.scenario-icon {
- width: 52px;
- height: 52px;
- background: linear-gradient(135deg, #f0f8ff 0%, #e6f7ff 100%);
- border-radius: 12px;
+.card-img-wrap {
+ margin-bottom: 8px;
+}
+.card-img-bg {
+ width: 48px;
+ height: 48px;
+ background: #f0f2f5;
+ border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
- border: 1px solid rgba(24, 142, 238, 0.1);
- flex-shrink: 0;
}
-
-.scenario-image {
+.card-img {
width: 32px;
height: 32px;
object-fit: contain;
- border-radius: 8px;
}
-.scenario-info {
- display: flex;
- flex-direction: column;
- gap: 6px;
- flex: 1;
- min-width: 0;
-}
-
-.scenario-name {
+.card-title {
font-size: 16px;
font-weight: 600;
- color: #1a1a1a;
- line-height: 1.3;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ color: #1677ff;
+ text-align: center;
+ margin-bottom: 2px;
}
-.scenario-stats {
+.card-desc {
+ font-size: 12px;
+ color: #888;
+ text-align: center;
+ margin-bottom: 6px;
+ line-height: 1.4;
+ min-height: 32px;
+ max-height: 32px;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+}
+
+.card-stats {
display: flex;
align-items: center;
+ justify-content: center;
+ gap: 10px;
+ margin-top: 4px;
}
-
-.stat-text {
+.card-count {
font-size: 13px;
color: #666;
- font-weight: 500;
}
-
-.scenario-right {
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- gap: 8px;
- flex-shrink: 0;
-}
-
-.scenario-status {
- display: flex;
- justify-content: flex-end;
-}
-
-.status-tag {
- font-size: 11px;
- padding: 3px 8px;
- border-radius: 10px;
- font-weight: 500;
-}
-
-.scenario-growth {
+.card-growth {
+ font-size: 12px;
+ color: #52c41a;
display: flex;
align-items: center;
- gap: 3px;
- font-size: 16px;
- font-weight: 700;
-}
-
-.growth-icon {
- font-size: 14px;
}
// 空状态
@@ -317,3 +297,35 @@
font-size: 13px;
}
}
+
+@media (max-width: 500px) {
+ .scenarios-grid {
+ gap: 10px;
+ padding: 10px;
+ }
+ .card-inner {
+ padding: 12px 4px 10px 4px;
+ }
+ .card-img-bg {
+ width: 40px;
+ height: 40px;
+ }
+ .card-img {
+ width: 26px;
+ height: 26px;
+ }
+ .card-title {
+ font-size: 15px;
+ }
+ .card-desc {
+ font-size: 11px;
+ min-height: 24px;
+ max-height: 24px;
+ }
+ .card-count {
+ font-size: 12px;
+ }
+ .card-growth {
+ font-size: 11px;
+ }
+}
diff --git a/nkebao/src/pages/scene/index.tsx b/nkebao/src/pages/scene/index.tsx
index 4ca7359a..a5d12b8d 100644
--- a/nkebao/src/pages/scene/index.tsx
+++ b/nkebao/src/pages/scene/index.tsx
@@ -1,7 +1,8 @@
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
-import { NavBar, Button, SpinLoading, Toast, Tag } from "antd-mobile";
-import { AddOutline, UserAddOutline } from "antd-mobile-icons";
+import { NavBar, Button, Toast, SpinLoading } from "antd-mobile";
+import { AddOutline } from "antd-mobile-icons";
+import { RiseOutlined } from "@ant-design/icons";
import MeauMobile from "@/components/MeauMobile/MeauMoible";
import Layout from "@/components/Layout/Layout";
import { getScenarios } from "./api";
@@ -11,11 +12,23 @@ interface Scenario {
id: string;
name: string;
image: string;
+ description?: string;
count: number;
growth: string;
status: number;
}
+const scenarioDescriptions: Record
+
+ 
+
+
+
{userInfo.name}
+ {userInfo.level}
+
+ 积分: {userInfo.points}
- ))}
+ 今日数据
-
-
- {item.value}
- {item.label}
- 每日获客趋势
-
-
-
+ ))}
+
+
+
场景获客
+
+
+ }
+ footer={
+
+ 加载场景数据中...
+ 场景获客
+
+
+ }
+ footer={
+
+ {error}
+
+
-
-
-
-
-
-
- 选择适合的获客场景，提升转化效果
-
-
+
{scenarios.map((scenario) => (
handleScenarioClick(scenario.id, scenario.name)}
>
-
-
- {
+
);
diff --git a/nkebao/src/pages/workspace/Workspace.tsx b/nkebao/src/pages/workspace/Workspace.tsx
index 81096f03..f8377905 100644
--- a/nkebao/src/pages/workspace/Workspace.tsx
+++ b/nkebao/src/pages/workspace/Workspace.tsx
@@ -1,15 +1,14 @@
import React from "react";
import { Link } from "react-router-dom";
-import { Card, NavBar, Badge, Progress } from "antd-mobile";
+import { Card, NavBar, Badge } from "antd-mobile";
import {
- ThumbsUpOutline,
+ LikeOutline,
MessageOutline,
SendOutline,
TeamOutline,
- ShareOutline,
+ LinkOutline,
AppOutline,
- BarChartOutline,
- LineChartOutline,
+ PieOutline,
ClockCircleOutline,
} from "antd-mobile-icons";
import Layout from "@/components/Layout/Layout";
@@ -33,7 +32,7 @@ const Workspace: React.FC = () => {
name: "自动点赞",
description: "智能自动点赞互动",
icon: (
-
+
-
- {scenarios.length === 0 && !loading && (
-
+
{
e.currentTarget.src =
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png";
}}
/>
-
-
-
-
- {scenario.name}
-
-
-
- 今日获客: {scenario.count}
-
-
-
-
))}
-
- {scenario.status === 1 ? "活跃" : "暂停"}
-
+
{scenario.name}
+ {scenario.description && (
+
+ {scenario.description}
-
+ )}
+
+
+ 今日: {scenario.count}
+
+
+
+
-
- )}
📊
- 暂无场景数据
-
- 总任务数
{taskStats.total}
-
+
+
+
+
进行中: {taskStats.inProgress} / 已完成: {taskStats.completed}