fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 本次提交更新内容如下

Browse Source 
搜索功能植入完成
This commit is contained in:
笔记本里的永平
2025-07-16 16:29:49 +08:00
parent e1e54b5666
commit 778b44a7a0
5 changed files with 550 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
nkebao/src/App.tsx
View File

@@ -1,44 +1,44 @@
import React, { useEffect } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './contexts/AuthContext';
import { WechatAccountProvider } from './contexts/WechatAccountContext';
import ProtectedRoute from './components/ProtectedRoute';
import LayoutWrapper from './components/LayoutWrapper';
import { initInterceptors } from './api';
import Home from './pages/Home';
import Login from './pages/login/Login';
import Devices from './pages/devices/Devices';
import DeviceDetail from './pages/devices/DeviceDetail';
import WechatAccounts from './pages/wechat-accounts/WechatAccounts';
import WechatAccountDetail from './pages/wechat-accounts/WechatAccountDetail';
import Workspace from './pages/workspace/Workspace';
import AutoLike from './pages/workspace/auto-like/AutoLike';
import NewAutoLike from './pages/workspace/auto-like/NewAutoLike';
import AutoLikeDetail from './pages/workspace/auto-like/AutoLikeDetail';
import NewDistribution from './pages/workspace/traffic-distribution/NewDistribution';
import AutoGroup from './pages/workspace/auto-group/AutoGroup';
import AutoGroupDetail from './pages/workspace/auto-group/Detail';
import GroupPush from './pages/workspace/group-push/GroupPush';
import MomentsSync from './pages/workspace/moments-sync/MomentsSync';
import MomentsSyncDetail from './pages/workspace/moments-sync/Detail';
import NewMomentsSync from './pages/workspace/moments-sync/new';
import AIAssistant from './pages/workspace/ai-assistant/AIAssistant';
import TrafficDistribution from './pages/workspace/traffic-distribution/TrafficDistribution';
import TrafficDistributionDetail from './pages/workspace/traffic-distribution/Detail';
import Scenarios from './pages/scenarios/Scenarios';
import NewPlan from './pages/scenarios/new/page';
import ScenarioDetail from './pages/scenarios/ScenarioDetail';
import Profile from './pages/profile/Profile';
import Plans from './pages/plans/Plans';
import PlanDetail from './pages/plans/PlanDetail';
import Orders from './pages/orders/Orders';
import TrafficPool from './pages/traffic-pool/TrafficPool';
import ContactImport from './pages/contact-import/ContactImport';
import Content from './pages/content/Content';
import TrafficPoolDetail from './pages/traffic-pool/TrafficPoolDetail';
import NewContent from './pages/content/NewContent';
import Materials from './pages/content/materials/List';
import MaterialsNew from './pages/content/materials/New';
import React, { useEffect } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { AuthProvider } from "./contexts/AuthContext";
import { WechatAccountProvider } from "./contexts/WechatAccountContext";
import ProtectedRoute from "./components/ProtectedRoute";
import LayoutWrapper from "./components/LayoutWrapper";
import { initInterceptors } from "./api";
import Home from "./pages/Home";
import Login from "./pages/login/Login";
import Devices from "./pages/devices/Devices";
import DeviceDetail from "./pages/devices/DeviceDetail";
import WechatAccounts from "./pages/wechat-accounts/WechatAccounts";
import WechatAccountDetail from "./pages/wechat-accounts/WechatAccountDetail";
import Workspace from "./pages/workspace/Workspace";
import AutoLike from "./pages/workspace/auto-like/AutoLike";
import NewAutoLike from "./pages/workspace/auto-like/NewAutoLike";
import AutoLikeDetail from "./pages/workspace/auto-like/AutoLikeDetail";
import NewDistribution from "./pages/workspace/traffic-distribution/NewDistribution";
import AutoGroup from "./pages/workspace/auto-group/AutoGroup";
import AutoGroupDetail from "./pages/workspace/auto-group/Detail";
import GroupPush from "./pages/workspace/group-push/GroupPush";
import MomentsSync from "./pages/workspace/moments-sync/MomentsSync";
import MomentsSyncDetail from "./pages/workspace/moments-sync/Detail";
import NewMomentsSync from "./pages/workspace/moments-sync/new";
import AIAssistant from "./pages/workspace/ai-assistant/AIAssistant";
import TrafficDistribution from "./pages/workspace/traffic-distribution/TrafficDistribution";
import TrafficDistributionDetail from "./pages/workspace/traffic-distribution/Detail";
import Scenarios from "./pages/scenarios/Scenarios";
import NewPlan from "./pages/scenarios/new/page";
import ScenarioList from "./pages/scenarios/ScenarioList";
import Profile from "./pages/profile/Profile";
import Plans from "./pages/plans/Plans";
import PlanDetail from "./pages/plans/PlanDetail";
import Orders from "./pages/orders/Orders";
import TrafficPool from "./pages/traffic-pool/TrafficPool";
import ContactImport from "./pages/contact-import/ContactImport";
import Content from "./pages/content/Content";
import TrafficPoolDetail from "./pages/traffic-pool/TrafficPoolDetail";
import NewContent from "./pages/content/NewContent";
import Materials from "./pages/content/materials/List";
import MaterialsNew from "./pages/content/materials/New";
function App() {
// 初始化HTTP拦截器
@@ -48,57 +48,118 @@ function App() {
}, []);
return (
<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
<BrowserRouter
future={{ v7_startTransition: true, v7_relativeSplatPath: true }}
>
<AuthProvider>
<WechatAccountProvider>
<ProtectedRoute>
<LayoutWrapper>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/devices" element={<Devices />} />
<Route path="/devices/:id" element={<DeviceDetail />} />
<Route path="/wechat-accounts" element={<WechatAccounts />} />
<Route path="/wechat-accounts/:id" element={<WechatAccountDetail />} />
<Route path="/workspace" element={<Workspace />} />
<Route path="/workspace/auto-like" element={<AutoLike />} />
<Route path="/workspace/auto-like/new" element={<NewAutoLike />} />
<Route path="/workspace/auto-like/:id" element={<AutoLikeDetail />} />
<Route path="/workspace/auto-like/:id/edit" element={<NewAutoLike />} />
<Route path="/workspace/traffic-distribution" element={<TrafficDistribution />} />
<Route path="/workspace/traffic-distribution/new" element={<NewDistribution />} />
<Route path="/workspace/traffic-distribution/edit/:id" element={<NewDistribution />} />
<Route path="/workspace/auto-group" element={<AutoGroup />} />
<Route path="/workspace/auto-group/:id" element={<AutoGroupDetail />} />
<Route path="/workspace/group-push" element={<GroupPush />} />
<Route path="/workspace/moments-sync" element={<MomentsSync />} />
<Route path="/workspace/moments-sync/new" element={<NewMomentsSync />} />
<Route path="/workspace/moments-sync/:id" element={<MomentsSyncDetail />} />
<Route path="/workspace/moments-sync/edit/:id" element={<NewMomentsSync />} />
<Route path="/workspace/ai-assistant" element={<AIAssistant />} />
<Route path="/workspace/traffic-distribution" element={<TrafficDistribution />} />
<Route path="/workspace/traffic-distribution/:id" element={<TrafficDistributionDetail />} />
<Route path="/scenarios" element={<Scenarios />} />
<Route path="/scenarios/new" element={<NewPlan />} />
{/* 通用场景路由 - 支持查询参数传递name */}
<Route path="/scenarios/:scenarioId" element={<ScenarioDetail />} />
<Route path="/profile" element={<Profile />} />
<Route path="/plans" element={<Plans />} />
<Route path="/plans/:planId" element={<PlanDetail />} />
<Route path="/orders" element={<Orders />} />
<Route path="/traffic-pool" element={<TrafficPool />} />
<Route path="/traffic-pool/:id" element={<TrafficPoolDetail />} />
<Route path="/contact-import" element={<ContactImport />} />
<Route path="/content" element={<Content />} />
<Route path="/content/new" element={<NewContent />} />
<Route path="/content/edit/:id" element={<NewContent />} />
<Route path="/content/materials/:id" element={<Materials />} />
<Route path="/content/materials/new/:id" element={<MaterialsNew />} />
<Route path="/content/materials/edit/:id/:materialId" element={<MaterialsNew />} />
{/* 你可以继续添加更多路由 */}
</Routes>
</LayoutWrapper>
</ProtectedRoute>
<ProtectedRoute>
<LayoutWrapper>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/devices" element={<Devices />} />
<Route path="/devices/:id" element={<DeviceDetail />} />
<Route path="/wechat-accounts" element={<WechatAccounts />} />
<Route
path="/wechat-accounts/:id"
element={<WechatAccountDetail />}
/>
<Route path="/workspace" element={<Workspace />} />
<Route path="/workspace/auto-like" element={<AutoLike />} />
<Route
path="/workspace/auto-like/new"
element={<NewAutoLike />}
/>
<Route
path="/workspace/auto-like/:id"
element={<AutoLikeDetail />}
/>
<Route
path="/workspace/auto-like/:id/edit"
element={<NewAutoLike />}
/>
<Route
path="/workspace/traffic-distribution"
element={<TrafficDistribution />}
/>
<Route
path="/workspace/traffic-distribution/new"
element={<NewDistribution />}
/>
<Route
path="/workspace/traffic-distribution/edit/:id"
element={<NewDistribution />}
/>
<Route path="/workspace/auto-group" element={<AutoGroup />} />
<Route
path="/workspace/auto-group/:id"
element={<AutoGroupDetail />}
/>
<Route path="/workspace/group-push" element={<GroupPush />} />
<Route
path="/workspace/moments-sync"
element={<MomentsSync />}
/>
<Route
path="/workspace/moments-sync/new"
element={<NewMomentsSync />}
/>
<Route
path="/workspace/moments-sync/:id"
element={<MomentsSyncDetail />}
/>
<Route
path="/workspace/moments-sync/edit/:id"
element={<NewMomentsSync />}
/>
<Route
path="/workspace/ai-assistant"
element={<AIAssistant />}
/>
<Route
path="/workspace/traffic-distribution"
element={<TrafficDistribution />}
/>
<Route
path="/workspace/traffic-distribution/:id"
element={<TrafficDistributionDetail />}
/>
{/* 场景计划开始 */}
<Route path="/scenarios" element={<Scenarios />} />
<Route path="/scenarios/new" element={<NewPlan />} />
<Route path="/scenarios/edit/:id" element={<NewPlan />} />
<Route
path="/scenarios/list/:scenarioId/:scenarioName"
element={<ScenarioList />}
/>
{/* 场景计划结束 */}
<Route path="/profile" element={<Profile />} />
<Route path="/plans" element={<Plans />} />
<Route path="/plans/:planId" element={<PlanDetail />} />
<Route path="/orders" element={<Orders />} />
<Route path="/traffic-pool" element={<TrafficPool />} />
<Route
path="/traffic-pool/:id"
element={<TrafficPoolDetail />}
/>
<Route path="/contact-import" element={<ContactImport />} />
<Route path="/content" element={<Content />} />
<Route path="/content/new" element={<NewContent />} />
<Route path="/content/edit/:id" element={<NewContent />} />
<Route path="/content/materials/:id" element={<Materials />} />
<Route
path="/content/materials/new/:id"
element={<MaterialsNew />}
/>
<Route
path="/content/materials/edit/:id/:materialId"
element={<MaterialsNew />}
/>
{/* 你可以继续添加更多路由 */}
</Routes>
</LayoutWrapper>
</ProtectedRoute>
</WechatAccountProvider>
</AuthProvider>
</BrowserRouter>

30
nkebao/src/components/Layout.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React from "react";
interface LayoutProps {
loading?: boolean;
@@ -7,29 +7,19 @@ interface LayoutProps {
footer?: React.ReactNode;
}
const Layout: React.FC<LayoutProps> = ({
loading,
children,
header,
footer
const Layout: React.FC<LayoutProps> = ({
loading,
children,
header,
footer,
}) => {
return (
<div className="container">
{header && (
<header>
{header}
</header>
)}
<main>
{children}
</main>
{footer && (
<footer>
{footer}
</footer>
)}
{header && <header>{header}</header>}
<main className="bg-gray-50">{children}</main>
{footer && <footer>{footer}</footer>}
</div>
);
};
export default Layout;
export default Layout;

532
nkebao/src/pages/scenarios/ScenarioDetail.tsx → nkebao/src/pages/scenarios/ScenarioList.tsx
View File

@@ -1,12 +1,33 @@
import React, { useEffect, useState, useCallback } from 'react';
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
import PageHeader from '@/components/PageHeader';
import Layout from '@/components/Layout';
import BottomNav from '@/components/BottomNav';
import { Plus, Users, TrendingUp, Calendar, Copy, Trash2, Play, Pause, Settings, Loader2, Code } from 'lucide-react';
import { fetchPlanList, fetchPlanDetail, copyPlan, deletePlan, type Task } from '@/api/scenarios';
import { useToast } from '@/components/ui/toast';
import '@/components/Layout.css';
import React, { useEffect, useState, useCallback } from "react";
import { useParams, useNavigate, useSearchParams } from "react-router-dom";
import PageHeader from "@/components/PageHeader";
import Layout from "@/components/Layout";
import BottomNav from "@/components/BottomNav";
import {
Plus,
Users,
Calendar,
Copy,
Trash2,
Play,
Pause,
Settings,
Loader2,
Code,
Search,
RefreshCw,
} from "lucide-react";
import {
fetchPlanList,
fetchPlanDetail,
copyPlan,
deletePlan,
type Task,
} from "@/api/scenarios";
import { useToast } from "@/components/ui/toast";
import "@/components/Layout.css";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
interface ScenarioData {
id: string;
@@ -26,20 +47,25 @@ interface ApiSettings {
}
export default function ScenarioDetail() {
const { scenarioId } = useParams<{ scenarioId: string }>();
const { scenarioId, scenarioName } = useParams<{
scenarioId: string;
scenarioName: string;
}>();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const { toast } = useToast();
const [scenario, setScenario] = useState<ScenarioData | null>(null);
const [tasks, setTasks] = useState<Task[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
const [error, setError] = useState("");
const [showApiDialog, setShowApiDialog] = useState(false);
const [currentApiSettings, setCurrentApiSettings] = useState<ApiSettings>({
apiKey: '',
webhookUrl: '',
taskId: '',
apiKey: "",
webhookUrl: "",
taskId: "",
});
const [searchTerm, setSearchTerm] = useState("");
const [loadingTasks, setLoadingTasks] = useState(false);
// 获取渠道中文名称
const getChannelName = (channel: string) => {
@@ -61,61 +87,61 @@ export default function ScenarioDetail() {
// 获取场景描述
const getScenarioDescription = (channel: string) => {
const descriptions: Record<string, string> = {
douyin: '通过抖音平台进行精准获客，利用短视频内容吸引目标用户',
xiaohongshu: '利用小红书平台进行内容营销获客，通过优质内容建立品牌形象',
gongzhonghao: '通过微信公众号进行获客，建立私域流量池',
haibao: '通过海报分享进行获客，快速传播品牌信息',
phone: '通过电话营销进行获客，直接与客户沟通',
weixinqun: '通过微信群进行获客，利用社交裂变效应',
payment: '通过付款码进行获客，便捷的支付方式',
api: '通过API接口进行获客，支持第三方系统集成',
douyin: "通过抖音平台进行精准获客，利用短视频内容吸引目标用户",
xiaohongshu: "利用小红书平台进行内容营销获客，通过优质内容建立品牌形象",
gongzhonghao: "通过微信公众号进行获客，建立私域流量池",
haibao: "通过海报分享进行获客，快速传播品牌信息",
phone: "通过电话营销进行获客，直接与客户沟通",
weixinqun: "通过微信群进行获客，利用社交裂变效应",
payment: "通过付款码进行获客，便捷的支付方式",
api: "通过API接口进行获客，支持第三方系统集成",
};
return descriptions[channel] || '通过该平台进行获客';
return descriptions[channel] || "通过该平台进行获客";
};
useEffect(() => {
const fetchScenarioData = async () => {
if (!scenarioId) return;
setLoading(true);
setError('');
setError("");
try {
// 获取计划列表
const response = await fetchPlanList(scenarioId, 1, 20);
// 设置计划列表（可能为空）
if (response && response.data && response.data.list) {
setTasks(response.data.list);
} else {
setTasks([]);
}
// 构建场景数据（无论是否有计划都要创建）
const scenarioData: ScenarioData = {
id: scenarioId,
name: getScenarioName(),
image: '', // 可以根据需要设置图片
name: scenarioName || "",
image: "", // 可以根据需要设置图片
description: getScenarioDescription(scenarioId),
totalPlans: response?.data?.list?.length || 0,
totalCustomers: 0, // 移除统计
todayCustomers: 0, // 移除统计
growth: '', // 移除增长
growth: "", // 移除增长
};
setScenario(scenarioData);
} catch (error) {
console.error('获取场景数据失败:', error);
console.error("获取场景数据失败:", error);
// 即使API失败也要创建基本的场景数据
const scenarioData: ScenarioData = {
id: scenarioId,
name: getScenarioName(),
image: '',
image: "",
description: getScenarioDescription(scenarioId),
totalPlans: 0,
totalCustomers: 0,
todayCustomers: 0,
growth: '',
growth: "",
};
setScenario(scenarioData);
setTasks([]);
@@ -130,28 +156,31 @@ export default function ScenarioDetail() {
// 获取场景名称 - 优先使用URL查询参数，其次使用映射
const getScenarioName = useCallback(() => {
// 优先使用URL查询参数中的name
const urlName = searchParams.get('name');
const urlName = searchParams.get("name");
if (urlName) {
return urlName;
}
// 如果没有URL参数，使用映射
return getChannelName(scenarioId || '');
return getChannelName(scenarioId || "");
}, [searchParams, scenarioId]);
// 更新场景数据中的名称
useEffect(() => {
setScenario(prev => prev ? {
...prev,
name: (() => {
const urlName = searchParams.get('name');
if (urlName) return urlName;
return getChannelName(scenarioId || '');
})()
} : null);
setScenario((prev) =>
prev
? {
...prev,
name: (() => {
const urlName = searchParams.get("name");
if (urlName) return urlName;
return getChannelName(scenarioId || "");
})(),
}
: null
);
}, [searchParams, scenarioId]);
const handleCopyPlan = async (taskId: string) => {
const taskToCopy = tasks.find((task) => task.id === taskId);
if (!taskToCopy) return;
@@ -160,24 +189,28 @@ export default function ScenarioDetail() {
const response = await copyPlan(taskId);
if (response && response.code === 200) {
toast({
title: '计划已复制',
title: "计划已复制",
description: `已成功复制"${taskToCopy.name}"`,
});
// 重新加载数据
const refreshResponse = await fetchPlanList(scenarioId!, 1, 20);
if (refreshResponse && refreshResponse.code === 200 && refreshResponse.data) {
if (
refreshResponse &&
refreshResponse.code === 200 &&
refreshResponse.data
) {
setTasks(refreshResponse.data.list);
}
} else {
throw new Error(response?.msg || '复制失败');
throw new Error(response?.msg || "复制失败");
}
} catch (error) {
console.error('复制计划失败:', error);
console.error("复制计划失败:", error);
toast({
title: '复制失败',
description: error instanceof Error ? error.message : '复制计划失败',
variant: 'destructive',
title: "复制失败",
description: error instanceof Error ? error.message : "复制计划失败",
variant: "destructive",
});
}
};
@@ -192,24 +225,28 @@ export default function ScenarioDetail() {
const response = await deletePlan(taskId);
if (response && response.code === 200) {
toast({
title: '计划已删除',
title: "计划已删除",
description: `已成功删除"${taskToDelete.name}"`,
});
// 重新加载数据
const refreshResponse = await fetchPlanList(scenarioId!, 1, 20);
if (refreshResponse && refreshResponse.code === 200 && refreshResponse.data) {
if (
refreshResponse &&
refreshResponse.code === 200 &&
refreshResponse.data
) {
setTasks(refreshResponse.data.list);
}
} else {
throw new Error(response?.msg || '删除失败');
throw new Error(response?.msg || "删除失败");
}
} catch (error) {
console.error('删除计划失败:', error);
console.error("删除计划失败:", error);
toast({
title: '删除失败',
description: error instanceof Error ? error.message : '删除计划失败',
variant: 'destructive',
title: "删除失败",
description: error instanceof Error ? error.message : "删除计划失败",
variant: "destructive",
});
}
};
@@ -217,20 +254,22 @@ export default function ScenarioDetail() {
const handleStatusChange = async (taskId: string, newStatus: 1 | 0) => {
try {
// 这里应该调用状态切换API，暂时模拟
setTasks(prev => prev.map(task =>
task.id === taskId ? { ...task, status: newStatus } : task
));
setTasks((prev) =>
prev.map((task) =>
task.id === taskId ? { ...task, status: newStatus } : task
)
);
toast({
title: '状态已更新',
description: `计划已${newStatus === 1 ? '启动' : '暂停'}`,
title: "状态已更新",
description: `计划已${newStatus === 1 ? "启动" : "暂停"}`,
});
} catch (error) {
console.error('状态切换失败:', error);
console.error("状态切换失败:", error);
toast({
title: '状态切换失败',
description: '请稍后重试',
variant: 'destructive',
title: "状态切换失败",
description: "请稍后重试",
variant: "destructive",
});
}
};
@@ -240,20 +279,22 @@ export default function ScenarioDetail() {
const response = await fetchPlanDetail(taskId);
if (response && response.code === 200 && response.data) {
setCurrentApiSettings({
apiKey: response.data.apiKey || 'demo-api-key-123456',
webhookUrl: response.data.textUrl?.fullUrl || `https://api.example.com/webhook/${taskId}`,
apiKey: response.data.apiKey || "demo-api-key-123456",
webhookUrl:
response.data.textUrl?.fullUrl ||
`https://api.example.com/webhook/${taskId}`,
taskId,
});
setShowApiDialog(true);
} else {
throw new Error(response?.msg || '获取API设置失败');
throw new Error(response?.msg || "获取API设置失败");
}
} catch (error) {
console.error('获取API设置失败:', error);
console.error("获取API设置失败:", error);
toast({
title: '获取API设置失败',
description: '请稍后重试',
variant: 'destructive',
title: "获取API设置失败",
description: "请稍后重试",
variant: "destructive",
});
}
};
@@ -261,8 +302,8 @@ export default function ScenarioDetail() {
const handleCopyApiUrl = (url: string) => {
navigator.clipboard.writeText(url);
toast({
title: '已复制',
description: '接口地址已复制到剪贴板',
title: "已复制",
description: "接口地址已复制到剪贴板",
});
};
@@ -273,22 +314,22 @@ export default function ScenarioDetail() {
const getStatusColor = (status: number) => {
switch (status) {
case 1:
return 'text-green-600 bg-green-50';
return "text-green-600 bg-green-50";
case 0:
return 'text-yellow-600 bg-yellow-50';
return "text-yellow-600 bg-yellow-50";
default:
return 'text-gray-600 bg-gray-50';
return "text-gray-600 bg-gray-50";
}
};
const getStatusText = (status: number) => {
switch (status) {
case 1:
return '进行中';
return "进行中";
case 0:
return '已暂停';
return "已暂停";
default:
return '未知';
return "未知";
}
};
@@ -297,11 +338,10 @@ export default function ScenarioDetail() {
<Layout
header={
<PageHeader
title={scenario?.name || '场景详情'}
title={scenario?.name || "场景详情"}
defaultBackPath="/scenarios"
/>
}
footer={<BottomNav />}
>
<div className="bg-gray-50 min-h-screen flex items-center justify-center">
<div className="flex flex-col items-center space-y-4">
@@ -316,25 +356,20 @@ export default function ScenarioDetail() {
if (error) {
return (
<Layout
header={
<PageHeader
title="场景详情"
defaultBackPath="/scenarios"
/>
}
header={<PageHeader title="场景详情" defaultBackPath="/scenarios" />}
footer={<BottomNav />}
>
<div className="bg-gray-50 min-h-screen flex items-center justify-center">
<div className="text-center">
<p className="text-red-500 mb-4">{error}</p>
<button
<button
onClick={() => window.location.reload()}
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
>
重新加载
</button>
</div>
</div>
</div>
</Layout>
);
}
@@ -342,12 +377,7 @@ export default function ScenarioDetail() {
if (!scenario) {
return (
<Layout
header={
<PageHeader
title="场景详情"
defaultBackPath="/scenarios"
/>
}
header={<PageHeader title="场景详情" defaultBackPath="/scenarios" />}
footer={<BottomNav />}
>
<div className="bg-gray-50 min-h-screen flex items-center justify-center">
@@ -355,141 +385,153 @@ export default function ScenarioDetail() {
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
<p className="text-gray-500">加载场景数据中...</p>
</div>
</div>
</div>
</Layout>
);
}
const handleRefresh = async () => {
setLoadingTasks(true);
await fetchPlanList(scenarioId!, 1, 20);
setLoadingTasks(false);
};
const filteredTasks = tasks.filter((task) => task.name.includes(searchTerm));
return (
<Layout
header={
<PageHeader
title={scenario.name}
defaultBackPath="/scenarios"
rightContent={
<button
onClick={handleCreateNewPlan}
className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
>
<Plus className="h-4 w-4 mr-1" />
新建计划
</button>
}
/>
}
footer={<BottomNav />}
>
<div className="bg-gray-50 min-h-screen pb-20">
<div className="p-4">
{/* 场景描述 */}
<div className="bg-white rounded-lg p-4 mb-6">
<p className="text-gray-600 text-sm">{scenario.description}</p>
</div>
{/* 数据统计 */}
{/* <div className="grid grid-cols-2 gap-4 mb-6">
<div className="bg-white rounded-lg p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-gray-500 text-sm">总获客数</p>
<p className="text-2xl font-bold text-gray-900">{scenario.totalCustomers}</p>
</div>
<Users className="h-8 w-8 text-blue-500" />
</div>
<div className="flex items-center mt-2 text-green-500 text-sm">
<TrendingUp className="h-4 w-4 mr-1" />
<span>{scenario.growth}</span>
</div>
</div>
<div className="bg-white rounded-lg p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-gray-500 text-sm">今日获客</p>
<p className="text-2xl font-bold text-gray-900">{scenario.todayCustomers}</p>
</div>
<Calendar className="h-8 w-8 text-green-500" />
</div>
<div className="flex items-center mt-2 text-gray-500 text-sm">
<span>活跃计划: {scenario.totalPlans}</span>
</div>
</div>
</div> */}
{/* 计划列表 */}
<div className="bg-white rounded-lg">
<div className="p-4 border-b">
<h2 className="text-lg font-medium">获客计划</h2>
</div>
{tasks.length === 200 ? (
<div className="p-8 text-center">
<div className="mb-4">
<Users className="h-12 w-12 text-gray-300 mx-auto mb-3" />
<p className="text-gray-500 text-lg font-medium mb-2">暂无获客计划</p>
<p className="text-gray-400 text-sm">创建您的第一个获客计划，开始获取客户</p>
</div>
<>
<PageHeader
title={scenario.name}
defaultBackPath="/scenarios"
rightContent={
<button
onClick={handleCreateNewPlan}
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
onClick={handleCreateNewPlan}
className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
>
<Plus className="h-4 w-4 mr-2" />
创建第一个计划
<Plus className="h-4 w-4 mr-1" />
新建计划
</button>
}
/>
<div className="flex items-center space-x-2 m-4">
<div className="relative flex-1">
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
<Input
placeholder="搜索计划名称"
className="pl-9"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
<Button
variant="outline"
size="icon"
onClick={handleRefresh}
disabled={loadingTasks}
>
{loadingTasks ? (
<RefreshCw className="h-4 w-4 animate-spin" />
) : (
<RefreshCw className="h-4 w-4" />
)}
</Button>
</div>
</>
}
>
<div className="p-4">
{/* 计划列表 */}
<div className="rounded-lg">
{filteredTasks.length === 0 ? (
<div className="p-8 text-center">
<div className="mb-4">
<Users className="h-12 w-12 text-gray-300 mx-auto mb-3" />
<p className="text-gray-500 text-lg font-medium mb-2">
暂无获客计划
</p>
<p className="text-gray-400 text-sm">
创建您的第一个获客计划，开始获取客户
</p>
</div>
<button
onClick={handleCreateNewPlan}
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
>
<Plus className="h-4 w-4 mr-2" />
创建第一个计划
</button>
</div>
) : (
<div className="divide-y">
{tasks.map((task) => (
<div key={task.id} className="p-4 hover:bg-gray-50">
{filteredTasks.map((task) => (
<div key={task.id} className="p-4 bg-white">
<div className="flex items-center justify-between">
<div className="flex-1">
<div className="flex items-center mb-2">
<h3 className="font-medium text-gray-900">{task.name}</h3>
<span className={`ml-2 px-2 py-1 text-xs rounded-full ${getStatusColor(task.status)}`}>
{getStatusText(task.status)}
<h3 className="font-medium text-gray-900">
{task.name}
</h3>
<span
className={`ml-2 px-2 py-1 text-xs rounded-full ${getStatusColor(
task.status
)}`}
>
{getStatusText(task.status)}
</span>
</div>
<div className="flex items-center text-sm text-gray-500">
<Calendar className="h-4 w-4 mr-1" />
<span>最后更新: {task.lastUpdated}</span>
<span>最后更新: {task.lastUpdated}</span>
</div>
<div className="flex items-center mt-2 text-sm text-gray-500">
<span>
设备: {task.stats?.devices || 0} | 获客:{" "}
{task.stats?.acquired || 0} | 添加:{" "}
{task.stats?.added || 0}
</span>
</div>
<div className="flex items-center mt-2 text-sm text-gray-500">
<span>设备: {task.stats?.devices || 0} | 获客: {task.stats?.acquired || 0} | 添加: {task.stats?.added || 0}</span>
</div>
</div>
<div className="flex items-center space-x-2">
<button
onClick={() => handleStatusChange(task.id, task.status === 1 ? 0 : 1)}
className={`p-2 rounded-md ${
task.status === 1
? 'text-yellow-600 hover:bg-yellow-50'
: 'text-green-600 hover:bg-green-50'
}`}
>
{task.status === 1 ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
</button>
<button
onClick={() => handleOpenApiSettings(task.id)}
className="p-2 text-blue-600 hover:bg-blue-50 rounded-md"
>
<Settings className="h-4 w-4" />
</button>
<button
onClick={() => handleCopyPlan(task.id)}
className="p-2 text-gray-600 hover:bg-gray-50 rounded-md"
>
<Copy className="h-4 w-4" />
</button>
<button
onClick={() => handleDeletePlan(task.id)}
className="p-2 text-red-600 hover:bg-red-50 rounded-md"
>
<Trash2 className="h-4 w-4" />
</button>
<div className="flex items-center space-x-2">
<button
onClick={() =>
handleStatusChange(task.id, task.status === 1 ? 0 : 1)
}
className={`p-2 rounded-md ${
task.status === 1
? "text-yellow-600 hover:bg-yellow-50"
: "text-green-600 hover:bg-green-50"
}`}
>
{task.status === 1 ? (
<Pause className="h-4 w-4" />
) : (
<Play className="h-4 w-4" />
)}
</button>
<button
onClick={() => handleOpenApiSettings(task.id)}
className="p-2 text-blue-600 hover:bg-blue-50 rounded-md"
>
<Settings className="h-4 w-4" />
</button>
<button
onClick={() => handleCopyPlan(task.id)}
className="p-2 text-gray-600 hover:bg-gray-50 rounded-md"
>
<Copy className="h-4 w-4" />
</button>
<button
onClick={() => handleDeletePlan(task.id)}
className="p-2 text-red-600 hover:bg-red-50 rounded-md"
>
<Trash2 className="h-4 w-4" />
</button>
</div>
</div>
</div>
@@ -498,8 +540,6 @@ export default function ScenarioDetail() {
)}
</div>
</div>
</div>
{/* API接口设置对话框 */}
{showApiDialog && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
@@ -511,7 +551,9 @@ export default function ScenarioDetail() {
</div>
<div>
<h3 className="text-xl font-semibold">计划接口配置</h3>
<p className="text-gray-500 text-sm">通过API接口直接导入客资到该获客计划</p>
<p className="text-gray-500 text-sm">
通过API接口直接导入客资到该获客计划
</p>
</div>
</div>
<button
@@ -527,7 +569,9 @@ export default function ScenarioDetail() {
<div className="bg-gray-50 rounded-lg p-4">
<div className="flex items-center justify-between mb-3">
<h4 className="font-medium">API密钥</h4>
<span className="px-2 py-1 bg-green-100 text-green-700 text-xs rounded">安全认证</span>
<span className="px-2 py-1 bg-green-100 text-green-700 text-xs rounded">
安全认证
</span>
</div>
<div className="flex items-center space-x-3">
<input
@@ -539,8 +583,8 @@ export default function ScenarioDetail() {
onClick={() => {
navigator.clipboard.writeText(currentApiSettings.apiKey);
toast({
title: '已复制',
description: 'API密钥已复制到剪贴板',
title: "已复制",
description: "API密钥已复制到剪贴板",
});
}}
className="px-3 py-2 border border-gray-300 rounded hover:bg-gray-50 transition-colors"
@@ -551,7 +595,8 @@ export default function ScenarioDetail() {
</div>
<div className="mt-3 p-3 bg-amber-50 border border-amber-200 rounded-lg">
<p className="text-sm text-amber-800">
<strong>安全提示：</strong>请妥善保管API密钥，不要在客户端代码中暴露。建议在服务器端使用该密钥。
<strong>安全提示：</strong>
请妥善保管API密钥，不要在客户端代码中暴露。建议在服务器端使用该密钥。
</p>
</div>
</div>
@@ -560,7 +605,9 @@ export default function ScenarioDetail() {
<div className="bg-gray-50 rounded-lg p-4">
<div className="flex items-center justify-between mb-3">
<h4 className="font-medium">接口地址</h4>
<span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded">POST请求</span>
<span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded">
POST请求
</span>
</div>
<div className="flex items-center space-x-3">
<input
@@ -569,28 +616,47 @@ export default function ScenarioDetail() {
className="flex-1 p-2 bg-white border rounded font-mono text-sm"
/>
<button
onClick={() => handleCopyApiUrl(currentApiSettings.webhookUrl)}
onClick={() =>
handleCopyApiUrl(currentApiSettings.webhookUrl)
}
className="px-3 py-2 border border-gray-300 rounded hover:bg-gray-50 transition-colors"
>
<Copy className="h-4 w-4 mr-1" />
复制
</button>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div className="bg-green-50 border border-green-200 rounded-lg p-3">
<h5 className="font-medium text-green-800 mb-2">必要参数</h5>
<h5 className="font-medium text-green-800 mb-2">
必要参数
</h5>
<div className="space-y-1 text-sm text-green-700">
<div><code className="bg-green-100 px-1 rounded">name</code> - 客户姓名</div>
<div><code className="bg-green-100 px-1 rounded">phone</code> - 手机号码</div>
<div>
<code className="bg-green-100 px-1 rounded">name</code>{" "}
- 客户姓名
</div>
<div>
<code className="bg-green-100 px-1 rounded">phone</code>{" "}
- 手机号码
</div>
</div>
</div>
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
<h5 className="font-medium text-blue-800 mb-2">可选参数</h5>
<div className="space-y-1 text-sm text-blue-700">
<div><code className="bg-blue-100 px-1 rounded">source</code> - 来源标识</div>
<div><code className="bg-blue-100 px-1 rounded">remark</code> - 备注信息</div>
<div><code className="bg-blue-100 px-1 rounded">tags</code> - 客户标签</div>
<div>
<code className="bg-blue-100 px-1 rounded">source</code>{" "}
- 来源标识
</div>
<div>
<code className="bg-blue-100 px-1 rounded">remark</code>{" "}
- 备注信息
</div>
<div>
<code className="bg-blue-100 px-1 rounded">tags</code> -
客户标签
</div>
</div>
</div>
</div>
@@ -601,4 +667,4 @@ export default function ScenarioDetail() {
)}
</Layout>
);
}
}

132
nkebao/src/pages/scenarios/Scenarios.tsx
View File

@@ -1,11 +1,11 @@
import React, { useEffect, useState, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { Plus, TrendingUp, Loader2 } from 'lucide-react';
import UnifiedHeader from '@/components/UnifiedHeader';
import Layout from '@/components/Layout';
import BottomNav from '@/components/BottomNav';
import { fetchScenes, type SceneItem } from '@/api/scenarios';
import '@/components/Layout.css';
import React, { useEffect, useState, useMemo } from "react";
import { useNavigate } from "react-router-dom";
import { Plus, TrendingUp, Loader2 } from "lucide-react";
import UnifiedHeader from "@/components/UnifiedHeader";
import Layout from "@/components/Layout";
import BottomNav from "@/components/BottomNav";
import { fetchScenes, type SceneItem } from "@/api/scenarios";
import "@/components/Layout.css";
interface Scenario {
id: string;
@@ -21,45 +21,54 @@ export default function Scenarios() {
const navigate = useNavigate();
const [scenarios, setScenarios] = useState<Scenario[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
const [error, setError] = useState("");
// 场景描述映射
const scenarioDescriptions: Record<string, string> = useMemo(() => ({
douyin: '通过抖音平台进行精准获客',
xiaohongshu: '利用小红书平台进行内容营销获客',
gongzhonghao: '通过微信公众号进行获客',
haibao: '通过海报分享进行获客',
phone: '通过电话营销进行获客',
weixinqun: '通过微信群进行获客',
payment: '通过付款码进行获客',
api: '通过API接口进行获客',
}), []);
const scenarioDescriptions: Record<string, string> = useMemo(
() => ({
douyin: "通过抖音平台进行精准获客",
xiaohongshu: "利用小红书平台进行内容营销获客",
gongzhonghao: "通过微信公众号进行获客",
haibao: "通过海报分享进行获客",
phone: "通过电话营销进行获客",
weixinqun: "通过微信群进行获客",
payment: "通过付款码进行获客",
api: "通过API接口进行获客",
}),
[]
);
useEffect(() => {
const fetchScenarios = async () => {
setLoading(true);
setError('');
setError("");
try {
const response = await fetchScenes({ page: 1, limit: 20 });
if (response && response.code === 200 && response.data) {
// 转换API数据为前端需要的格式
const transformedScenarios: Scenario[] = response.data.map((item: SceneItem) => ({
id: item.id.toString(),
name: item.name,
image: item.image|| 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png',
description: scenarioDescriptions[item.name.toLowerCase()] || '通过该平台进行获客',
count: Math.floor(Math.random() * 200) + 50, // 模拟今日数据
growth: `+${Math.floor(Math.random() * 20) + 5}%`, // 模拟增长率
status: item.status === 1 ? 'active' : 'inactive',
}));
const transformedScenarios: Scenario[] = response.data.map(
(item: SceneItem) => ({
id: item.id.toString(),
name: item.name,
image:
item.image ||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png",
description:
scenarioDescriptions[item.name.toLowerCase()] ||
"通过该平台进行获客",
count: Math.floor(Math.random() * 200) + 50, // 模拟今日数据
growth: `+${Math.floor(Math.random() * 20) + 5}%`, // 模拟增长率
status: item.status === 1 ? "active" : "inactive",
})
);
setScenarios(transformedScenarios);
}
}
} catch (error) {
console.error('获取场景数据失败:', error);
setError('获取场景数据失败，请稍后重试');
console.error("获取场景数据失败:", error);
setError("获取场景数据失败，请稍后重试");
} finally {
setLoading(false);
}
@@ -68,23 +77,20 @@ export default function Scenarios() {
fetchScenarios();
}, [scenarioDescriptions]);
const handleScenarioClick = (scenarioId: string,scenarioName:string) => {
navigate(`/scenarios/${scenarioId}?name=${encodeURIComponent(scenarioName)}`);
const handleScenarioClick = (scenarioId: string, scenarioName: string) => {
navigate(
`/scenarios/list/${scenarioId}/${encodeURIComponent(scenarioName)}`
);
};
const handleNewPlan = () => {
navigate('/scenarios/new');
navigate("/scenarios/new");
};
if (loading) {
return (
<Layout
header={
<UnifiedHeader
title="场景获客"
showBack={false}
/>
}
header={<UnifiedHeader title="场景获客" showBack={false} />}
footer={<BottomNav />}
>
<div className="bg-gray-50 min-h-screen flex items-center justify-center">
@@ -100,18 +106,13 @@ export default function Scenarios() {
if (error && scenarios.length === 0) {
return (
<Layout
header={
<UnifiedHeader
title="场景获客"
showBack={false}
/>
}
header={<UnifiedHeader title="场景获客" showBack={false} />}
footer={<BottomNav />}
>
<div className="bg-gray-50 min-h-screen flex items-center justify-center">
<div className="text-center">
<p className="text-red-500 mb-4">{error}</p>
<button
<button
onClick={() => window.location.reload()}
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
>
@@ -132,10 +133,10 @@ export default function Scenarios() {
titleColor="blue"
actions={[
{
type: 'button',
type: "button",
icon: Plus,
label: '新建计划',
size: 'sm',
label: "新建计划",
size: "sm",
onClick: handleNewPlan,
},
]}
@@ -150,29 +151,34 @@ export default function Scenarios() {
<p className="text-yellow-800 text-sm">{error}</p>
</div>
)}
<div className="grid grid-cols-2 gap-4">
{scenarios.map((scenario) => (
<div
key={scenario.id}
className="bg-white rounded-lg shadow overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
onClick={() => handleScenarioClick(scenario.id,scenario.name)}
onClick={() => handleScenarioClick(scenario.id, scenario.name)}
>
<div className="p-4 flex flex-col items-center">
<div className="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center mb-2">
<img
src={scenario.image}
alt={scenario.name}
<img
src={scenario.image}
alt={scenario.name}
className="w-8 h-8"
onError={(e) => {
// 图片加载失败时使用默认图标
e.currentTarget.src = 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png';
e.currentTarget.src =
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png";
}}
/>
</div>
<h3 className="text-blue-600 font-medium text-center">{scenario.name}</h3>
<h3 className="text-blue-600 font-medium text-center">
{scenario.name}
</h3>
{scenario.description && (
<p className="text-xs text-gray-500 text-center mt-1 line-clamp-2">{scenario.description}</p>
<p className="text-xs text-gray-500 text-center mt-1 line-clamp-2">
{scenario.description}
</p>
)}
<div className="flex items-center mt-2 text-gray-500 text-sm">
<span>今日: </span>
@@ -190,4 +196,4 @@ export default function Scenarios() {
</div>
</Layout>
);
}
}

34
nkebao/src/pages/scenarios/new/page.tsx
View File

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { ChevronLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Message } from "tdesign-mobile-react";
import { Toast } from "tdesign-mobile-react";
import { Steps, StepItem } from "tdesign-mobile-react";
import { BasicSettings } from "./steps/BasicSettings";
import { FriendRequestSettings } from "./steps/FriendRequestSettings";
@@ -55,20 +55,28 @@ export default function NewPlan() {
// 处理保存
const handleSave = async () => {
console.log("保存数据:", formData);
try {
await createScenarioPlan(formData);
Message.success("获客计划已创建");
// router("/scenarios");
const result = await createScenarioPlan(formData);
console.log(result);
if (result.code === 200) {
Toast({ message: "获客计划已创建", theme: "success" });
// router("/scenarios/1?name=海报获客");
} else {
Toast({
message: result.msg,
theme: "error",
});
}
} catch (error) {
Message.error(
error instanceof Error
? error.message
: typeof error === "string"
? error
: "创建计划失败，请重试"
);
Toast({
message:
error instanceof Error
? error.message
: typeof error === "string"
? error
: "创建计划失败，请重试",
theme: "error",
});
}
};