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

Merge branch 'yongpxu-dev' into yongpxu-master

Browse Source 
# Conflicts:
#	nkebao/src/App.tsx   resolved by yongpxu-dev version
This commit is contained in:
笔记本里的永平
2025-07-17 08:54:04 +08:00
parent 9409a241e4 3719671d1c
commit 84e0ed3393
19 changed files with 2050 additions and 1615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"git.ignoreLimitWarning": true
}

171
Cunkebao/components/ExcelImporter.tsx
View File

@@ -27,7 +27,10 @@ interface ExcelImporterProps {
onReset?: () => void;
}
export default function ExcelImporter({ onImport, onReset }: ExcelImporterProps) {
export default function ExcelImporter({
onImport,
onReset,
}: ExcelImporterProps) {
const [parsedData, setParsedData] = useState<ContactData[]>([]);
const [error, setError] = useState<string | null>(null);
const [fileName, setFileName] = useState<string>("");
@@ -51,62 +54,64 @@ export default function ExcelImporter({ onImport, onReset }: ExcelImporterProps)
setParsedData([]);
setDetectedColumns({});
setIsProcessing(true);
const file = files[0];
setFileName(file.name);
const reader = new FileReader();
reader.onload = (event) => {
try {
const data = event.target?.result;
if (!data) {
setError("文件内容为空，请检查文件是否有效");
setIsProcessing(false);
return;
}
// 尝试将读取的二进制数据解析为Excel工作簿
let workbook;
try {
workbook = XLSX.read(data, { type: 'binary' });
workbook = XLSX.read(data, { type: "binary" });
} catch (parseErr) {
console.error("解析Excel内容失败:", parseErr);
setError("无法解析文件内容，请确保上传的是有效的Excel文件(.xlsx或.xls格式)");
setError(
"无法解析文件内容，请确保上传的是有效的Excel文件(.xlsx或.xls格式)"
);
setIsProcessing(false);
return;
}
if (!workbook.SheetNames || workbook.SheetNames.length === 0) {
setError("Excel文件中没有找到工作表");
setIsProcessing(false);
return;
}
// 取第一个工作表
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
if (!worksheet) {
setError(`无法读取工作表 "${sheetName}"，请检查文件是否损坏`);
setIsProcessing(false);
return;
}
// 将工作表转换为JSON
const jsonData = XLSX.utils.sheet_to_json(worksheet);
if (!jsonData || jsonData.length === 0) {
setError("Excel 文件中没有数据");
setIsProcessing(false);
return;
}
// 查找栏位对应的列
let mobileColumn: string | null = null;
let fromColumn: string | null = null;
let aliasColumn: string | null = null;
// 遍历第一行查找栏位
const firstRow = jsonData[0] as Record<string, any>;
if (!firstRow) {
@@ -114,88 +119,116 @@ export default function ExcelImporter({ onImport, onReset }: ExcelImporterProps)
setIsProcessing(false);
return;
}
for (const key in firstRow) {
if (!firstRow[key]) continue; // 跳过空值
const value = String(firstRow[key]).toLowerCase();
// 扩展匹配列表，提高识别成功率
if (value.includes("手机") || value.includes("电话") || value.includes("mobile") ||
value.includes("phone") || value.includes("tel") || value.includes("cell")) {
if (
value.includes("手机") ||
value.includes("电话") ||
value.includes("mobile") ||
value.includes("phone") ||
value.includes("tel") ||
value.includes("cell")
) {
mobileColumn = key;
} else if (value.includes("来源") || value.includes("source") || value.includes("from") ||
value.includes("channel") || value.includes("渠道")) {
} else if (
value.includes("来源") ||
value.includes("source") ||
value.includes("from") ||
value.includes("channel") ||
value.includes("渠道")
) {
fromColumn = key;
} else if (value.includes("微信") || value.includes("alias") || value.includes("wechat") ||
value.includes("wx") || value.includes("id") || value.includes("账号")) {
} else if (
value.includes("微信") ||
value.includes("alias") ||
value.includes("wechat") ||
value.includes("wx") ||
value.includes("id") ||
value.includes("账号")
) {
aliasColumn = key;
}
}
// 保存检测到的列名
if (mobileColumn && firstRow[mobileColumn]) {
setDetectedColumns(prev => ({ ...prev, mobile: String(firstRow[mobileColumn]) }));
setDetectedColumns((prev) => ({
...prev,
mobile: String(firstRow[mobileColumn]),
}));
}
if (fromColumn && firstRow[fromColumn]) {
setDetectedColumns(prev => ({ ...prev, from: String(firstRow[fromColumn]) }));
setDetectedColumns((prev) => ({
...prev,
from: String(firstRow[fromColumn]),
}));
}
if (aliasColumn && firstRow[aliasColumn]) {
setDetectedColumns(prev => ({ ...prev, alias: String(firstRow[aliasColumn]) }));
setDetectedColumns((prev) => ({
...prev,
alias: String(firstRow[aliasColumn]),
}));
}
if (!mobileColumn) {
setError("未找到手机号码栏位，请确保Excel中包含手机、电话、mobile或phone等栏位名称");
setError(
"未找到手机号码栏位，请确保Excel中包含手机、电话、mobile或phone等栏位名称"
);
setIsProcessing(false);
return;
}
// 取第二行开始的数据（跳过标题行）
const importedData: ContactData[] = [];
for (let i = 1; i < jsonData.length; i++) {
const row = jsonData[i] as Record<string, any>;
// 确保手机号存在且不为空
if (!row || !row[mobileColumn]) continue;
// 处理手机号，去掉非数字字符
let mobileValue = row[mobileColumn];
let mobileNumber: number;
if (typeof mobileValue === 'number') {
if (typeof mobileValue === "number") {
mobileNumber = mobileValue;
} else {
// 如果是字符串，去掉非数字字符
const mobileStr = String(mobileValue).trim().replace(/\D/g, '');
const mobileStr = String(mobileValue).trim().replace(/\D/g, "");
if (!mobileStr) continue; // 如果手机号为空，跳过该行
mobileNumber = Number(mobileStr);
if (isNaN(mobileNumber)) continue; // 如果转换后不是数字，跳过该行
}
// 构建数据对象
const contact: ContactData = {
mobile: mobileNumber
mobile: mobileNumber,
};
// 添加来源字段（如果存在）
if (fromColumn && row[fromColumn]) {
contact.from = String(row[fromColumn]).trim();
}
// 添加微信号字段（如果存在）
if (aliasColumn && row[aliasColumn]) {
contact.alias = String(row[aliasColumn]).trim();
}
importedData.push(contact);
}
if (importedData.length === 0) {
setError("未找到有效数据，请确保Excel中至少有一行有效的手机号码");
setIsProcessing(false);
return;
}
setParsedData(importedData);
setIsProcessing(false);
} catch (err) {
@@ -204,12 +237,12 @@ export default function ExcelImporter({ onImport, onReset }: ExcelImporterProps)
setIsProcessing(false);
}
};
reader.onerror = () => {
setError("读取文件时出错，请重试");
setIsProcessing(false);
};
reader.readAsBinaryString(file);
};
@@ -245,29 +278,27 @@ export default function ExcelImporter({ onImport, onReset }: ExcelImporterProps)
disabled={isProcessing}
/>
{fileName && (
<p className="text-sm text-gray-500">
当前文件: {fileName}
</p>
<p className="text-sm text-gray-500">当前文件: {fileName}</p>
)}
<div className="text-xs text-gray-500 mt-1">
请确保Excel文件包含以下列: 手机号码(必需)、来源(可选)、微信号(可选)
</div>
</div>
{isProcessing && (
<div className="text-center py-4">
<div className="inline-block h-6 w-6 animate-spin rounded-full border-2 border-solid border-blue-500 border-r-transparent"></div>
<p className="mt-2 text-sm text-gray-600">正在处理Excel文件...</p>
</div>
)}
{error && (
<Alert variant="destructive">
<AlertCircle className="h-4 w-4" />
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
{isImportSuccessful && (
<Alert className="bg-green-50 text-green-800 border-green-200">
<AlertDescription>
@@ -275,30 +306,40 @@ export default function ExcelImporter({ onImport, onReset }: ExcelImporterProps)
</AlertDescription>
</Alert>
)}
{parsedData.length > 0 && !isImportSuccessful && (
<div className="space-y-4">
<p className="text-sm">
已解析 {parsedData.length} 条有效数据，点击下方按钮确认导入。
</p>
{Object.keys(detectedColumns).length > 0 && (
<div className="text-xs p-2 bg-blue-50 rounded border border-blue-100">
<p className="font-medium text-blue-700 mb-1">检测到的列名:</p>
<ul className="list-disc pl-5 space-y-1">
{detectedColumns.mobile && <li>手机号: {detectedColumns.mobile}</li>}
{detectedColumns.from && <li>来源: {detectedColumns.from}</li>}
{detectedColumns.alias && <li>微信号: {detectedColumns.alias}</li>}
{detectedColumns.mobile && (
<li>手机号: {detectedColumns.mobile}</li>
)}
{detectedColumns.from && (
<li>来源: {detectedColumns.from}</li>
)}
{detectedColumns.alias && (
<li>微信号: {detectedColumns.alias}</li>
)}
</ul>
</div>
)}
<div className="grid grid-cols-2 gap-4">
<div>
<p className="font-medium text-sm mb-1">数据示例：</p>
<div className="text-xs bg-gray-50 p-2 rounded overflow-hidden">
<pre>{JSON.stringify(parsedData.slice(0, 3), null, 2)}</pre>
{parsedData.length > 3 && <p className="mt-1 text-gray-500">...共 {parsedData.length} 条</p>}
{parsedData.length > 3 && (
<p className="mt-1 text-gray-500">
...共 {parsedData.length} 条
</p>
)}
</div>
</div>
<div>
@@ -317,17 +358,19 @@ export default function ExcelImporter({ onImport, onReset }: ExcelImporterProps)
</div>
</div>
)}
<div className="flex space-x-4">
<Button
onClick={handleImport}
<Button
onClick={handleImport}
className="flex-1"
disabled={parsedData.length === 0 || isImportSuccessful || isProcessing}
disabled={
parsedData.length === 0 || isImportSuccessful || isProcessing
}
>
确认导入
</Button>
<Button
variant="outline"
<Button
variant="outline"
onClick={handleReset}
className="flex-1"
disabled={isProcessing}
@@ -338,4 +381,4 @@ export default function ExcelImporter({ onImport, onReset }: ExcelImporterProps)
</div>
</Card>
);
}
}

247
nkebao/src/App.tsx
View File

@@ -1,45 +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 NewGroupPush from './pages/workspace/group-push/new';
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拦截器
@@ -49,58 +48,122 @@ 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/group-push/new" element={<NewGroupPush />} />
<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/new/:scenarioId"
element={<NewPlan />}
/>
<Route path="/scenarios/edit/:planId" 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>

79
nkebao/src/api/scenarios.ts
View File

@@ -1,4 +1,4 @@
import { get, del } from './request';
import { get, del, post,put } from './request';
import type { ApiResponse } from '@/types/common';
// 服务器返回的场景数据类型
@@ -50,12 +50,72 @@ export interface Task {
trend: { date: string; customers: number }[];
}
// 消息内容类型
export interface MessageContent {
id: string;
type: string; // "text" | "image" | "video" | "file" | "miniprogram" | "link" | "group" 等
content?: string;
intervalUnit?: "seconds" | "minutes";
sendInterval?: number;
// 其他可选字段
[key: string]: any;
}
// 每天的消息计划
export interface MessagePlan {
day: number;
messages: MessageContent[];
}
// 海报类型
export interface Poster {
id: string;
name: string;
type: string;
preview: string;
}
// 标签类型
export interface Tag {
id: string;
name: string;
[key: string]: any;
}
// textUrl类型
export interface TextUrl {
apiKey: string;
originalString?: string;
sign?: string;
fullUrl: string;
}
// 计划详情类型
export interface PlanDetail {
id: number;
name: string;
scenario: number;
scenarioTags: Tag[];
customTags: Tag[];
posters: Poster[];
device: string[];
enabled: boolean;
addInterval: number;
remarkFormat: string;
endTime: string;
greeting: string;
startTime: string;
remarkType: string;
addFriendInterval: number;
messagePlans: MessagePlan[];
sceneId: number | string;
userId: number;
companyId: number;
status: number;
apiKey: string;
textUrl: {
fullUrl: string;
};
wxMinAppSrc?: any;
textUrl: TextUrl;
[key: string]: any;
}
/**
@@ -239,4 +299,13 @@ export const transformSceneItem = (item: SceneItem): Channel => {
};
};
export const getPlanScenes = () => get<any>('/v1/plan/scenes');
export const getPlanScenes = () => get<any>('/v1/plan/scenes');
export async function createScenarioPlan(data: any) {
return post('/v1/plan/create', data);
}
// 编辑计划
export async function updateScenarioPlan(planId: number | string, data: any) {
return await put(`/v1/plan/update?planId=${planId}`, data);
}

32
nkebao/src/api/utils.ts
View File

@@ -1,5 +1,6 @@
import { authApi } from './auth';
import { get, post, put, del } from './request';
import type { ApiResponse, PaginatedResponse } from '@/types/common';
// 设置token到localStorage
export const setToken = (token: string) => {
if (typeof window !== 'undefined') {
@@ -170,25 +171,24 @@ export const requestCancelManager = new RequestCancelManager();
* @returns {Promise<string>} - 上传成功后返回文件url
*/
export async function uploadFile(file: File, uploadUrl: string = '/v1/attachment/upload'): Promise<string> {
const formData = new FormData();
formData.append('file', file);
const token = typeof window !== 'undefined' ? localStorage.getItem('token') : '';
const headers: Record<string, string> = {};
if (token) headers['Authorization'] = `Bearer ${token}`;
try {
const response = await fetch(uploadUrl, {
method: 'POST',
headers,
body: formData,
// 创建 FormData 对象用于文件上传
const formData = new FormData();
formData.append('file', file);
// 使用 post 方法上传文件，设置正确的 Content-Type
const res = await post(uploadUrl, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
const res = await response.json();
if (res?.url) {
return res.url;
}
if (res?.data?.url) {
// 检查响应结果
if (res?.code === 200 && res?.data?.url) {
return res.data.url;
} else {
throw new Error(res?.msg || '文件上传失败');
}
throw new Error(res?.msg || '文件上传失败');
} catch (e: any) {
throw new Error(e?.message || '文件上传失败');
}

85
nkebao/src/components/ContentLibrarySelectionDialog.tsx
View File

@@ -1,12 +1,17 @@
import React, { useState, useEffect, useCallback } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Search, RefreshCw, Loader2 } from 'lucide-react';
import { fetchContentLibraryList } from '@/api/content';
import { ContentLibrary } from '@/api/content';
import { useToast } from '@/components/ui/toast';
import React, { useState, useEffect, useCallback } from "react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Search, RefreshCw, Loader2 } from "lucide-react";
import { fetchContentLibraryList } from "@/api/content";
import { ContentLibrary } from "@/api/content";
import { useToast } from "@/components/ui/toast";
interface ContentLibrarySelectionDialogProps {
open: boolean;
@@ -22,7 +27,7 @@ export function ContentLibrarySelectionDialog({
onSelect,
}: ContentLibrarySelectionDialogProps) {
const { toast } = useToast();
const [searchQuery, setSearchQuery] = useState('');
const [searchQuery, setSearchQuery] = useState("");
const [loading, setLoading] = useState(false);
const [libraries, setLibraries] = useState<ContentLibrary[]>([]);
const [tempSelected, setTempSelected] = useState<string[]>([]);
@@ -35,11 +40,19 @@ export function ContentLibrarySelectionDialog({
if (response.code === 200 && response.data) {
setLibraries(response.data.list);
} else {
toast({ title: '获取内容库列表失败', description: response.msg, variant: 'destructive' });
toast({
title: "获取内容库列表失败",
description: response.msg,
variant: "destructive",
});
}
} catch (error) {
console.error('获取内容库列表失败:', error);
toast({ title: '获取内容库列表失败', description: '请检查网络连接', variant: 'destructive' });
console.error("获取内容库列表失败:", error);
toast({
title: "获取内容库列表失败",
description: "请检查网络连接",
variant: "destructive",
});
} finally {
setLoading(false);
}
@@ -60,14 +73,14 @@ export function ContentLibrarySelectionDialog({
if (tempSelected.length === libraries.length) {
setTempSelected([]);
} else {
setTempSelected(libraries.map(lib => lib.id));
setTempSelected(libraries.map((lib) => lib.id));
}
};
const handleLibraryToggle = (libraryId: string) => {
setTempSelected(prev =>
prev.includes(libraryId)
? prev.filter(id => id !== libraryId)
setTempSelected((prev) =>
prev.includes(libraryId)
? prev.filter((id) => id !== libraryId)
: [...prev, libraryId]
);
};
@@ -86,7 +99,7 @@ export function ContentLibrarySelectionDialog({
return (
<Dialog open={open} onOpenChange={handleDialogOpenChange}>
<DialogContent className="flex flex-col">
<DialogContent className="flex flex-col bg-white">
<DialogHeader>
<DialogTitle>选择内容库</DialogTitle>
</DialogHeader>
@@ -101,8 +114,17 @@ export function ContentLibrarySelectionDialog({
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
<Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
<Button
variant="outline"
size="icon"
onClick={handleRefresh}
disabled={loading}
>
{loading ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<RefreshCw className="h-4 w-4" />
)}
</Button>
</div>
@@ -111,9 +133,9 @@ export function ContentLibrarySelectionDialog({
已选择 {tempSelected.length} 个内容库
</div>
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
<Button
variant="outline"
size="sm"
onClick={handleSelectAll}
disabled={loading || libraries.length === 0}
>
@@ -148,12 +170,19 @@ export function ContentLibrarySelectionDialog({
<div className="flex items-center justify-between">
<span className="font-medium">{library.name}</span>
<Badge variant="outline">
{library.sourceType === 1 ? '文本' : library.sourceType === 2 ? '图片' : '视频'}
{library.sourceType === 1
? "文本"
: library.sourceType === 2
? "图片"
: "视频"}
</Badge>
</div>
<div className="text-sm text-gray-500 mt-1">
<div>创建人: {library.creatorName || '-'}</div>
<div>更新时间: {new Date(library.updateTime).toLocaleString()}</div>
<div>创建人: {library.creatorName || "-"}</div>
<div>
更新时间:{" "}
{new Date(library.updateTime).toLocaleString()}
</div>
</div>
</div>
</label>
@@ -171,11 +200,11 @@ export function ContentLibrarySelectionDialog({
取消
</Button>
<Button onClick={handleConfirm}>
确定{tempSelected.length > 0 ? ` (${tempSelected.length})` : ''}
确定{tempSelected.length > 0 ? ` (${tempSelected.length})` : ""}
</Button>
</div>
</div>
</DialogContent>
</Dialog>
);
}
}

86
nkebao/src/components/DeviceSelection.tsx
View File

@@ -1,11 +1,16 @@
import React, { useState, useEffect } from 'react';
import { Search } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Checkbox } from '@/components/ui/checkbox';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { fetchDeviceList } from '@/api/devices';
import React, { useState, useEffect } from "react";
import { Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Checkbox } from "@/components/ui/checkbox";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { fetchDeviceList } from "@/api/devices";
// 设备选择项接口
interface DeviceSelectionItem {
@@ -13,7 +18,7 @@ interface DeviceSelectionItem {
name: string;
imei: string;
wechatId: string;
status: 'online' | 'offline';
status: "online" | "offline";
}
// 组件属性接口
@@ -24,16 +29,16 @@ interface DeviceSelectionProps {
className?: string;
}
export default function DeviceSelection({
selectedDevices,
onSelect,
export default function DeviceSelection({
selectedDevices,
onSelect,
placeholder = "选择设备",
className = ""
className = "",
}: DeviceSelectionProps) {
const [dialogOpen, setDialogOpen] = useState(false);
const [devices, setDevices] = useState<DeviceSelectionItem[]>([]);
const [searchQuery, setSearchQuery] = useState('');
const [statusFilter, setStatusFilter] = useState('all');
const [searchQuery, setSearchQuery] = useState("");
const [statusFilter, setStatusFilter] = useState("all");
const [loading, setLoading] = useState(false);
// 当弹窗打开时获取设备列表
@@ -49,16 +54,18 @@ export default function DeviceSelection({
try {
const res = await fetchDeviceList(1, 100);
if (res && res.data && Array.isArray(res.data.list)) {
setDevices(res.data.list.map(d => ({
id: d.id?.toString() || '',
name: d.memo || d.imei || '',
imei: d.imei || '',
wechatId: d.wechatId || '',
status: d.alive === 1 ? 'online' : 'offline',
})));
setDevices(
res.data.list.map((d) => ({
id: d.id?.toString() || "",
name: d.memo || d.imei || "",
imei: d.imei || "",
wechatId: d.wechatId || "",
status: d.alive === 1 ? "online" : "offline",
}))
);
}
} catch (error) {
console.error('获取设备列表失败:', error);
console.error("获取设备列表失败:", error);
} finally {
setLoading(false);
}
@@ -72,9 +79,9 @@ export default function DeviceSelection({
device.wechatId.toLowerCase().includes(searchQuery.toLowerCase());
const matchesStatus =
statusFilter === 'all' ||
(statusFilter === 'online' && device.status === 'online') ||
(statusFilter === 'offline' && device.status === 'offline');
statusFilter === "all" ||
(statusFilter === "online" && device.status === "online") ||
(statusFilter === "offline" && device.status === "offline");
return matchesSearch && matchesStatus;
});
@@ -82,7 +89,7 @@ export default function DeviceSelection({
// 处理设备选择
const handleDeviceToggle = (deviceId: string) => {
if (selectedDevices.includes(deviceId)) {
onSelect(selectedDevices.filter(id => id !== deviceId));
onSelect(selectedDevices.filter((id) => id !== deviceId));
} else {
onSelect([...selectedDevices, deviceId]);
}
@@ -90,7 +97,7 @@ export default function DeviceSelection({
// 获取显示文本
const getDisplayText = () => {
if (selectedDevices.length === 0) return '';
if (selectedDevices.length === 0) return "";
return `已选择 ${selectedDevices.length} 个设备`;
};
@@ -108,10 +115,9 @@ export default function DeviceSelection({
/>
</div>
{/* 设备选择弹窗 */}
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
<DialogContent className="max-w-2xl max-h-[80vh] flex flex-col bg-white">
<DialogHeader>
<DialogTitle>选择设备</DialogTitle>
</DialogHeader>
@@ -128,7 +134,7 @@ export default function DeviceSelection({
</div>
<select
value={statusFilter}
onChange={e => setStatusFilter(e.target.value)}
onChange={(e) => setStatusFilter(e.target.value)}
className="w-32 h-10 rounded border border-gray-300 px-2 text-base"
>
<option value="all">全部状态</option>
@@ -157,10 +163,14 @@ export default function DeviceSelection({
<div className="flex-1">
<div className="flex items-center justify-between">
<span className="font-medium">{device.name}</span>
<div className={`w-16 h-6 flex items-center justify-center text-xs ${
device.status === 'online' ? 'bg-green-500 text-white' : 'bg-gray-200 text-gray-600'
}`}>
{device.status === 'online' ? '在线' : '离线'}
<div
className={`w-16 h-6 flex items-center justify-center text-xs ${
device.status === "online"
? "bg-green-500 text-white"
: "bg-gray-200 text-gray-600"
}`}
>
{device.status === "online" ? "在线" : "离线"}
</div>
</div>
<div className="text-sm text-gray-500 mt-1">
@@ -182,13 +192,11 @@ export default function DeviceSelection({
<Button variant="outline" onClick={() => setDialogOpen(false)}>
取消
</Button>
<Button onClick={() => setDialogOpen(false)}>
确定
</Button>
<Button onClick={() => setDialogOpen(false)}>确定</Button>
</div>
</div>
</DialogContent>
</Dialog>
</>
);
}
}

121
nkebao/src/components/DeviceSelectionDialog.tsx
View File

@@ -1,19 +1,24 @@
import React, { useState, useEffect, useCallback } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Search, RefreshCw, Loader2 } from 'lucide-react';
import { fetchDeviceList } from '@/api/devices';
import { ServerDevice } from '@/types/device';
import { useToast } from '@/components/ui/toast';
import React, { useState, useEffect, useCallback } from "react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Search, RefreshCw, Loader2 } from "lucide-react";
import { fetchDeviceList } from "@/api/devices";
import { ServerDevice } from "@/types/device";
import { useToast } from "@/components/ui/toast";
interface Device {
id: string;
name: string;
imei: string;
wxid: string;
status: 'online' | 'offline';
status: "online" | "offline";
usedInPlans: number;
nickname: string;
}
@@ -25,15 +30,15 @@ interface DeviceSelectionDialogProps {
onSelect: (devices: string[]) => void;
}
export function DeviceSelectionDialog({
open,
onOpenChange,
selectedDevices,
onSelect
export function DeviceSelectionDialog({
open,
onOpenChange,
selectedDevices,
onSelect,
}: DeviceSelectionDialogProps) {
const { toast } = useToast();
const [searchQuery, setSearchQuery] = useState('');
const [statusFilter, setStatusFilter] = useState('all');
const [searchQuery, setSearchQuery] = useState("");
const [statusFilter, setStatusFilter] = useState("all");
const [loading, setLoading] = useState(false);
const [devices, setDevices] = useState<Device[]>([]);
@@ -44,22 +49,32 @@ export function DeviceSelectionDialog({
const response = await fetchDeviceList(1, 100, searchQuery);
if (response.code === 200 && response.data) {
// 转换服务端数据格式为组件需要的格式
const convertedDevices: Device[] = response.data.list.map((serverDevice: ServerDevice) => ({
id: serverDevice.id.toString(),
name: serverDevice.memo || `设备 ${serverDevice.id}`,
imei: serverDevice.imei,
wxid: serverDevice.wechatId || '',
status: serverDevice.alive === 1 ? 'online' : 'offline',
usedInPlans: 0, // 这个字段需要从其他API获取
nickname: serverDevice.nickname || '',
}));
const convertedDevices: Device[] = response.data.list.map(
(serverDevice: ServerDevice) => ({
id: serverDevice.id.toString(),
name: serverDevice.memo || `设备 ${serverDevice.id}`,
imei: serverDevice.imei,
wxid: serverDevice.wechatId || "",
status: serverDevice.alive === 1 ? "online" : "offline",
usedInPlans: 0, // 这个字段需要从其他API获取
nickname: serverDevice.nickname || "",
})
);
setDevices(convertedDevices);
} else {
toast({ title: '获取设备列表失败', description: response.msg, variant: 'destructive' });
toast({
title: "获取设备列表失败",
description: response.msg,
variant: "destructive",
});
}
} catch (error) {
console.error('获取设备列表失败:', error);
toast({ title: '获取设备列表失败', description: '请检查网络连接', variant: 'destructive' });
console.error("获取设备列表失败:", error);
toast({
title: "获取设备列表失败",
description: "请检查网络连接",
variant: "destructive",
});
} finally {
setLoading(false);
}
@@ -78,16 +93,16 @@ export function DeviceSelectionDialog({
device.wxid.toLowerCase().includes(searchQuery.toLowerCase());
const matchesStatus =
statusFilter === 'all' ||
(statusFilter === 'online' && device.status === 'online') ||
(statusFilter === 'offline' && device.status === 'offline');
statusFilter === "all" ||
(statusFilter === "online" && device.status === "online") ||
(statusFilter === "offline" && device.status === "offline");
return matchesSearch && matchesStatus;
});
const handleDeviceSelect = (deviceId: string) => {
if (selectedDevices.includes(deviceId)) {
onSelect(selectedDevices.filter(id => id !== deviceId));
onSelect(selectedDevices.filter((id) => id !== deviceId));
} else {
onSelect([...selectedDevices, deviceId]);
}
@@ -95,7 +110,7 @@ export function DeviceSelectionDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="flex flex-col">
<DialogContent className="flex flex-col bg-white">
<DialogHeader>
<DialogTitle>选择设备</DialogTitle>
</DialogHeader>
@@ -110,8 +125,8 @@ export function DeviceSelectionDialog({
className="pl-9"
/>
</div>
<select
value={statusFilter}
<select
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
className="w-32 px-3 py-2 border border-gray-300 rounded-md text-sm"
>
@@ -119,8 +134,17 @@ export function DeviceSelectionDialog({
<option value="online">在线</option>
<option value="offline">离线</option>
</select>
<Button variant="outline" size="icon" onClick={fetchDevices} disabled={loading}>
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
<Button
variant="outline"
size="icon"
onClick={fetchDevices}
disabled={loading}
>
{loading ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<RefreshCw className="h-4 w-4" />
)}
</Button>
</div>
@@ -149,17 +173,23 @@ export function DeviceSelectionDialog({
<div className="flex-1">
<div className="flex items-center justify-between">
<span className="font-medium">{device.name}</span>
<Badge variant={device.status === 'online' ? 'default' : 'secondary'}>
{device.status === 'online' ? '在线' : '离线'}
<Badge
variant={
device.status === "online" ? "default" : "secondary"
}
>
{device.status === "online" ? "在线" : "离线"}
</Badge>
</div>
<div className="text-sm text-gray-500 mt-1">
<div>IMEI: {device.imei}</div>
<div>微信号: {device.wxid||'-'}</div>
<div>昵称: {device.nickname||'-'}</div>
<div>微信号: {device.wxid || "-"}</div>
<div>昵称: {device.nickname || "-"}</div>
</div>
{device.usedInPlans > 0 && (
<div className="text-sm text-orange-500 mt-1">已用于 {device.usedInPlans} 个计划</div>
<div className="text-sm text-orange-500 mt-1">
已用于 {device.usedInPlans} 个计划
</div>
)}
</div>
</label>
@@ -177,11 +207,12 @@ export function DeviceSelectionDialog({
取消
</Button>
<Button onClick={() => onOpenChange(false)}>
确定{selectedDevices.length > 0 ? ` (${selectedDevices.length})` : ''}
确定
{selectedDevices.length > 0 ? ` (${selectedDevices.length})` : ""}
</Button>
</div>
</div>
</DialogContent>
</Dialog>
);
}
}

152
nkebao/src/components/FriendSelection.tsx
View File

@@ -1,10 +1,15 @@
import React, { useState, useEffect } from 'react';
import { Search, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { get } from '@/api/request';
import React, { useState, useEffect } from "react";
import { Search, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { get } from "@/api/request";
// 微信好友接口类型
interface WechatFriend {
@@ -42,18 +47,20 @@ const fetchFriendsList = async (params: {
if (params.deviceIds && params.deviceIds.length === 0) {
return {
code: 200,
msg: 'success',
msg: "success",
data: {
list: [],
total: 0,
page: params.page,
limit: params.limit
}
limit: params.limit,
},
};
}
const deviceIdsParam = params?.deviceIds?.join(',') || ''
return get<FriendsResponse>(`/v1/friend?page=${ params.page}&limit=${params.limit}&deviceIds=${deviceIdsParam}`);
const deviceIdsParam = params?.deviceIds?.join(",") || "";
return get<FriendsResponse>(
`/v1/friend?page=${params.page}&limit=${params.limit}&deviceIds=${deviceIdsParam}`
);
};
// 组件属性接口
@@ -67,18 +74,18 @@ interface FriendSelectionProps {
className?: string;
}
export default function FriendSelection({
selectedFriends,
onSelect,
export default function FriendSelection({
selectedFriends,
onSelect,
onSelectDetail,
deviceIds = [],
enableDeviceFilter = true,
placeholder = "选择微信好友",
className = ""
className = "",
}: FriendSelectionProps) {
const [dialogOpen, setDialogOpen] = useState(false);
const [friends, setFriends] = useState<WechatFriend[]>([]);
const [searchQuery, setSearchQuery] = useState('');
const [searchQuery, setSearchQuery] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
const [totalFriends, setTotalFriends] = useState(0);
@@ -116,49 +123,52 @@ export default function FriendSelection({
} else {
res = await fetchFriendsList({ page, limit: 20 });
}
if (res && res.code === 200 && res.data) {
setFriends(res.data.list.map((friend) => ({
id: friend.id?.toString() || '',
nickname: friend.nickname || '',
wechatId: friend.wechatId || '',
avatar: friend.avatar || '',
customer: friend.customer || '',
})));
setFriends(
res.data.list.map((friend) => ({
id: friend.id?.toString() || "",
nickname: friend.nickname || "",
wechatId: friend.wechatId || "",
avatar: friend.avatar || "",
customer: friend.customer || "",
}))
);
setTotalFriends(res.data.total || 0);
setTotalPages(Math.ceil((res.data.total || 0) / 20));
}
} catch (error) {
console.error('获取好友列表失败:', error);
console.error("获取好友列表失败:", error);
} finally {
setLoading(false);
}
};
// 过滤好友
const filteredFriends = friends.filter(friend =>
friend.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
friend.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
const filteredFriends = friends.filter(
(friend) =>
friend.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
friend.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
);
// 处理好友选择
const handleFriendToggle = (friendId: string) => {
let newIds: string[];
if (selectedFriends.includes(friendId)) {
newIds = selectedFriends.filter(id => id !== friendId);
newIds = selectedFriends.filter((id) => id !== friendId);
} else {
newIds = [...selectedFriends, friendId];
}
onSelect(newIds);
if (onSelectDetail) {
const selectedObjs = friends.filter(f => newIds.includes(f.id));
const selectedObjs = friends.filter((f) => newIds.includes(f.id));
onSelectDetail(selectedObjs);
}
};
// 获取显示文本
const getDisplayText = () => {
if (selectedFriends.length === 0) return '';
if (selectedFriends.length === 0) return "";
return `已选择 ${selectedFriends.length} 个好友`;
};
@@ -171,8 +181,19 @@ export default function FriendSelection({
{/* 输入框 */}
<div className={`relative ${className}`}>
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
<svg
width="20"
height="20"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</span>
<Input
@@ -186,10 +207,12 @@ export default function FriendSelection({
{/* 微信好友选择弹窗 */}
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="max-w-xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
<DialogContent className="max-w-xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden bg-white">
<div className="p-6">
<DialogTitle className="text-center text-xl font-medium mb-6">选择微信好友</DialogTitle>
<DialogTitle className="text-center text-xl font-medium mb-6">
选择微信好友
</DialogTitle>
<div className="relative mb-4">
<Input
placeholder="搜索好友"
@@ -198,11 +221,11 @@ export default function FriendSelection({
className="pl-10 py-2 rounded-full border-gray-200"
/>
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
<Button
variant="ghost"
size="icon"
<Button
variant="ghost"
size="icon"
className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 rounded-full"
onClick={() => setSearchQuery('')}
onClick={() => setSearchQuery("")}
>
<X className="h-4 w-4" />
</Button>
@@ -223,7 +246,13 @@ export default function FriendSelection({
onClick={() => handleFriendToggle(friend.id)}
>
<div className="mr-3 flex items-center justify-center">
<div className={`w-5 h-5 rounded-full border ${selectedFriends.includes(friend.id) ? 'border-blue-600' : 'border-gray-300'} flex items-center justify-center`}>
<div
className={`w-5 h-5 rounded-full border ${
selectedFriends.includes(friend.id)
? "border-blue-600"
: "border-gray-300"
} flex items-center justify-center`}
>
{selectedFriends.includes(friend.id) && (
<div className="w-3 h-3 rounded-full bg-blue-600"></div>
)}
@@ -232,16 +261,24 @@ export default function FriendSelection({
<div className="flex items-center space-x-3 flex-1">
<div className="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white text-sm font-medium overflow-hidden">
{friend.avatar ? (
<img src={friend.avatar} alt={friend.nickname} className="w-full h-full object-cover" />
<img
src={friend.avatar}
alt={friend.nickname}
className="w-full h-full object-cover"
/>
) : (
friend.nickname.charAt(0)
)}
</div>
<div className="flex-1">
<div className="font-medium">{friend.nickname}</div>
<div className="text-sm text-gray-500">微信ID: {friend.wechatId}</div>
<div className="text-sm text-gray-500">
微信ID: {friend.wechatId}
</div>
{friend.customer && (
<div className="text-sm text-gray-400">归属客户: {friend.customer}</div>
<div className="text-sm text-gray-400">
归属客户: {friend.customer}
</div>
)}
</div>
</div>
@@ -251,7 +288,7 @@ export default function FriendSelection({
) : (
<div className="flex items-center justify-center h-full">
<div className="text-gray-500">
{deviceIds.length === 0 ? '请先选择设备' : '没有找到好友'}
{deviceIds.length === 0 ? "请先选择设备" : "没有找到好友"}
</div>
</div>
)}
@@ -271,11 +308,15 @@ export default function FriendSelection({
>
&lt;
</Button>
<span className="text-sm">{currentPage} / {totalPages}</span>
<span className="text-sm">
{currentPage} / {totalPages}
</span>
<Button
variant="ghost"
size="sm"
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
onClick={() =>
setCurrentPage(Math.min(totalPages, currentPage + 1))
}
disabled={currentPage === totalPages || loading}
className="px-2 py-0 h-8 min-w-0"
>
@@ -285,10 +326,17 @@ export default function FriendSelection({
</div>
<div className="border-t p-4 flex items-center justify-between bg-white">
<Button variant="outline" onClick={() => setDialogOpen(false)} className="px-6 rounded-full border-gray-300">
<Button
variant="outline"
onClick={() => setDialogOpen(false)}
className="px-6 rounded-full border-gray-300"
>
取消
</Button>
<Button onClick={handleConfirm} className="px-6 bg-blue-600 hover:bg-blue-700 rounded-full">
<Button
onClick={handleConfirm}
className="px-6 bg-blue-600 hover:bg-blue-700 rounded-full"
>
确定 ({selectedFriends.length})
</Button>
</div>
@@ -296,4 +344,4 @@ export default function FriendSelection({
</Dialog>
</>
);
}
}

130
nkebao/src/components/GroupSelection.tsx
View File

@@ -1,10 +1,10 @@
import React, { useState, useEffect } from 'react';
import { Search, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
import { get } from '@/api/request';
import React, { useState, useEffect } from "react";
import { Search, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { get } from "@/api/request";
// 群组接口类型
interface WechatGroup {
@@ -36,8 +36,13 @@ interface GroupsResponse {
};
}
const fetchGroupsList = async (params: { page: number; limit: number; }): Promise<GroupsResponse> => {
return get<GroupsResponse>(`/v1/chatroom?page=${params.page}&limit=${params.limit}`);
const fetchGroupsList = async (params: {
page: number;
limit: number;
}): Promise<GroupsResponse> => {
return get<GroupsResponse>(
`/v1/chatroom?page=${params.page}&limit=${params.limit}`
);
};
interface GroupSelectionProps {
@@ -52,12 +57,12 @@ export default function GroupSelection({
selectedGroups,
onSelect,
onSelectDetail,
placeholder = '选择群聊',
className = ''
placeholder = "选择群聊",
className = "",
}: GroupSelectionProps) {
const [dialogOpen, setDialogOpen] = useState(false);
const [groups, setGroups] = useState<WechatGroup[]>([]);
const [searchQuery, setSearchQuery] = useState('');
const [searchQuery, setSearchQuery] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
const [totalGroups, setTotalGroups] = useState(0);
@@ -84,49 +89,52 @@ export default function GroupSelection({
try {
const res = await fetchGroupsList({ page, limit: 20 });
if (res && res.code === 200 && res.data) {
setGroups(res.data.list.map((group) => ({
id: group.id?.toString() || '',
chatroomId: group.chatroomId || '',
name: group.name || '',
avatar: group.avatar || '',
ownerWechatId: group.ownerWechatId || '',
ownerNickname: group.ownerNickname || '',
ownerAvatar: group.ownerAvatar || '',
})));
setGroups(
res.data.list.map((group) => ({
id: group.id?.toString() || "",
chatroomId: group.chatroomId || "",
name: group.name || "",
avatar: group.avatar || "",
ownerWechatId: group.ownerWechatId || "",
ownerNickname: group.ownerNickname || "",
ownerAvatar: group.ownerAvatar || "",
}))
);
setTotalGroups(res.data.total || 0);
setTotalPages(Math.ceil((res.data.total || 0) / 20));
}
} catch (error) {
console.error('获取群组列表失败:', error);
console.error("获取群组列表失败:", error);
} finally {
setLoading(false);
}
};
// 过滤群组
const filteredGroups = groups.filter(group =>
group.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
group.chatroomId.toLowerCase().includes(searchQuery.toLowerCase())
const filteredGroups = groups.filter(
(group) =>
group.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
group.chatroomId.toLowerCase().includes(searchQuery.toLowerCase())
);
// 处理群组选择
const handleGroupToggle = (groupId: string) => {
let newIds: string[];
if (selectedGroups.includes(groupId)) {
newIds = selectedGroups.filter(id => id !== groupId);
newIds = selectedGroups.filter((id) => id !== groupId);
} else {
newIds = [...selectedGroups, groupId];
}
onSelect(newIds);
if (onSelectDetail) {
const selectedObjs = groups.filter(g => newIds.includes(g.id));
const selectedObjs = groups.filter((g) => newIds.includes(g.id));
onSelectDetail(selectedObjs);
}
};
// 获取显示文本
const getDisplayText = () => {
if (selectedGroups.length === 0) return '';
if (selectedGroups.length === 0) return "";
return `已选择 ${selectedGroups.length} 个群聊`;
};
@@ -139,8 +147,19 @@ export default function GroupSelection({
{/* 输入框 */}
<div className={`relative ${className}`}>
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
<svg
width="20"
height="20"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</span>
<Input
@@ -154,9 +173,11 @@ export default function GroupSelection({
{/* 群组选择弹窗 */}
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="max-w-xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
<DialogContent className="max-w-xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden bg-white">
<div className="p-6">
<DialogTitle className="text-center text-xl font-medium mb-6">选择群聊</DialogTitle>
<DialogTitle className="text-center text-xl font-medium mb-6">
选择群聊
</DialogTitle>
<div className="relative mb-4">
<Input
placeholder="搜索群聊"
@@ -169,7 +190,7 @@ export default function GroupSelection({
variant="ghost"
size="icon"
className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 rounded-full"
onClick={() => setSearchQuery('')}
onClick={() => setSearchQuery("")}
>
<X className="h-4 w-4" />
</Button>
@@ -190,7 +211,13 @@ export default function GroupSelection({
onClick={() => handleGroupToggle(group.id)}
>
<div className="mr-3 flex items-center justify-center">
<div className={`w-5 h-5 rounded-full border ${selectedGroups.includes(group.id) ? 'border-blue-600' : 'border-gray-300'} flex items-center justify-center`}>
<div
className={`w-5 h-5 rounded-full border ${
selectedGroups.includes(group.id)
? "border-blue-600"
: "border-gray-300"
} flex items-center justify-center`}
>
{selectedGroups.includes(group.id) && (
<div className="w-3 h-3 rounded-full bg-blue-600"></div>
)}
@@ -199,16 +226,24 @@ export default function GroupSelection({
<div className="flex items-center space-x-3 flex-1">
<div className="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white text-sm font-medium overflow-hidden">
{group.avatar ? (
<img src={group.avatar} alt={group.name} className="w-full h-full object-cover" />
<img
src={group.avatar}
alt={group.name}
className="w-full h-full object-cover"
/>
) : (
group.name.charAt(0)
)}
</div>
<div className="flex-1">
<div className="font-medium">{group.name}</div>
<div className="text-sm text-gray-500">群ID: {group.chatroomId}</div>
<div className="text-sm text-gray-500">
群ID: {group.chatroomId}
</div>
{group.ownerNickname && (
<div className="text-sm text-gray-400">群主: {group.ownerNickname}</div>
<div className="text-sm text-gray-400">
群主: {group.ownerNickname}
</div>
)}
</div>
</div>
@@ -236,11 +271,15 @@ export default function GroupSelection({
>
&lt;
</Button>
<span className="text-sm">{currentPage} / {totalPages}</span>
<span className="text-sm">
{currentPage} / {totalPages}
</span>
<Button
variant="ghost"
size="sm"
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
onClick={() =>
setCurrentPage(Math.min(totalPages, currentPage + 1))
}
disabled={currentPage === totalPages || loading}
className="px-2 py-0 h-8 min-w-0"
>
@@ -250,10 +289,17 @@ export default function GroupSelection({
</div>
<div className="border-t p-4 flex items-center justify-between bg-white">
<Button variant="outline" onClick={() => setDialogOpen(false)} className="px-6 rounded-full border-gray-300">
<Button
variant="outline"
onClick={() => setDialogOpen(false)}
className="px-6 rounded-full border-gray-300"
>
取消
</Button>
<Button onClick={handleConfirm} className="px-6 bg-blue-600 hover:bg-blue-700 rounded-full">
<Button
onClick={handleConfirm}
className="px-6 bg-blue-600 hover:bg-blue-700 rounded-full"
>
确定 ({selectedGroups.length})
</Button>
</div>
@@ -261,4 +307,4 @@ export default function GroupSelection({
</Dialog>
</>
);
}
}

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;

87
nkebao/src/components/ui/dialog.tsx
View File

@@ -1,18 +1,18 @@
"use client"
"use client";
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import { cn } from "@/utils"
import { cn } from "@/utils";
const Dialog = DialogPrimitive.Root
const Dialog = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal
const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close
const DialogClose = DialogPrimitive.Close;
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -22,12 +22,12 @@ const DialogOverlay = React.forwardRef<
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className,
className
)}
{...props}
/>
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
@@ -38,8 +38,8 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className,
"bg-white fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}
>
@@ -50,18 +50,36 @@ const DialogContent = React.forwardRef<
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName
));
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
)
DialogHeader.displayName = "DialogHeader"
const DialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
)}
{...props}
/>
);
DialogHeader.displayName = "DialogHeader";
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
DialogFooter.displayName = "DialogFooter"
const DialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
);
DialogFooter.displayName = "DialogFooter";
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
@@ -69,19 +87,26 @@ const DialogTitle = React.forwardRef<
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold leading-none tracking-tight", className)}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
DialogTitle.displayName = DialogPrimitive.Title.displayName
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;
export {
Dialog,
@@ -94,4 +119,4 @@ export {
DialogFooter,
DialogTitle,
DialogDescription,
}
};

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

@@ -1,12 +1,32 @@
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,
Edit,
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 +46,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 +86,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 +155,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 +188,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 +224,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 +253,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 +278,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,34 +301,34 @@ export default function ScenarioDetail() {
const handleCopyApiUrl = (url: string) => {
navigator.clipboard.writeText(url);
toast({
title: '已复制',
description: '接口地址已复制到剪贴板',
title: "已复制",
description: "接口地址已复制到剪贴板",
});
};
const handleCreateNewPlan = () => {
navigate(`/scenarios/new?scenario=${scenarioId}`);
navigate(`/scenarios/new/${scenarioId}`);
};
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 +337,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 +355,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 +376,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 +384,147 @@ 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={() => navigate(`/scenarios/edit/${task.id}`)}
className={`p-2 rounded-md ${
task.status === 1
? "text-yellow-600 hover:bg-yellow-50"
: "text-green-600 hover:bg-green-50"
}`}
>
<Edit 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 +533,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 +544,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 +562,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 +576,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 +588,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 +598,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 +609,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 +660,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>
);
}
}

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

@@ -1,135 +1,246 @@
import { useState, useEffect } from "react"
import { useNavigate } from "react-router-dom"
import { ChevronLeft, Settings } from "lucide-react"
import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/use-toast"
import { Steps, StepItem } from 'tdesign-mobile-react';
import { BasicSettings } from "./steps/BasicSettings"
import { FriendRequestSettings } from "./steps/FriendRequestSettings"
import { MessageSettings } from "./steps/MessageSettings"
import Layout from "@/components/Layout"
import { getPlanScenes } from '@/api/scenarios';
import { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { ChevronLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Toast } from "tdesign-mobile-react";
import { Steps, StepItem } from "tdesign-mobile-react";
import { BasicSettings } from "./steps/BasicSettings";
import { FriendRequestSettings } from "./steps/FriendRequestSettings";
import { MessageSettings } from "./steps/MessageSettings";
import Layout from "@/components/Layout";
import {
getPlanScenes,
createScenarioPlan,
fetchPlanDetail,
PlanDetail,
updateScenarioPlan,
} from "@/api/scenarios";
// 步骤定义 - 只保留三个步骤
const steps = [
{ id: 1, title: "步骤一", subtitle: "基础设置" },
{ id: 2, title: "步骤二", subtitle: "好友申请设置" },
{ id: 3, title: "步骤三", subtitle: "消息设置" },
]
];
// 类型定义
interface FormData {
name: string;
scenario: number;
posters: any[]; // 后续可替换为具体Poster类型
device: string[];
remarkType: string;
greeting: string;
addInterval: number;
startTime: string;
endTime: string;
enabled: boolean;
sceneId: string | number;
remarkFormat: string;
addFriendInterval: number;
}
export default function NewPlan() {
const router = useNavigate()
const [currentStep, setCurrentStep] = useState(1)
const [formData, setFormData] = useState({
planName: "",
scenario: "haibao",
const router = useNavigate();
const [currentStep, setCurrentStep] = useState(1);
const [formData, setFormData] = useState<FormData>({
name: "",
scenario: 1,
posters: [],
device: "",
device: [],
remarkType: "phone",
greeting: "你好，请通过",
addInterval: 1,
startTime: "09:00",
endTime: "18:00",
enabled: true,
// 移除tags字段
})
sceneId: "",
remarkFormat: "",
addFriendInterval: 1,
});
const [sceneList, setSceneList] = useState<any[]>([]);
const [sceneLoading, setSceneLoading] = useState(true);
const { scenarioId, planId } = useParams<{
scenarioId: string;
planId: string;
}>();
const [isEdit, setIsEdit] = useState(false);
useEffect(() => {
loadData();
}, []);
const loadData = async () => {
setSceneLoading(true);
//获取场景类型
getPlanScenes()
.then(res => {
.then((res) => {
setSceneList(res?.data || []);
})
.finally(() => setSceneLoading(false));
}, []);
if (planId) {
setIsEdit(true);
//获取计划详情
const res = await fetchPlanDetail(planId);
if (res.code === 200 && res.data) {
const detail = res.data as PlanDetail;
setFormData((prev) => ({
...prev,
name: detail.name ?? "",
scenario: Number(detail.scenario) || 1,
posters: detail.posters ?? [],
device: detail.device ?? [],
remarkType: detail.remarkType ?? "phone",
greeting: detail.greeting ?? "",
addInterval: detail.addInterval ?? 1,
startTime: detail.startTime ?? "09:00",
endTime: detail.endTime ?? "18:00",
enabled: detail.enabled ?? true,
sceneId: Number(detail.scenario) || 1,
remarkFormat: detail.remarkFormat ?? "",
addFriendInterval: detail.addFriendInterval ?? 1,
}));
}
} else {
if (scenarioId) {
setFormData((prev) => ({
...prev,
...{ scenario: Number(scenarioId) || 1 },
}));
}
}
};
// 更新表单数据
const onChange = (data: any) => {
setFormData((prev) => ({ ...prev, ...data }))
}
setFormData((prev) => ({ ...prev, ...data }));
};
// 处理保存
const handleSave = async () => {
try {
// 这里应该是实际的API调用
await new Promise((resolve) => setTimeout(resolve, 1000))
toast({
title: "创建成功",
description: "获客计划已创建",
})
router("/plans")
let result;
if (isEdit && planId) {
// 编辑：拼接后端需要的完整参数
const editData = {
...formData,
id: Number(planId),
planId: Number(planId),
// 兼容后端需要的字段
// 你可以根据实际需要补充其它字段
};
result = await updateScenarioPlan(planId, editData);
} else {
// 新建
result = await createScenarioPlan(formData);
}
if (result.code === 200) {
Toast({
message: isEdit ? "计划已更新" : "获客计划已创建",
theme: "success",
});
const sceneItem = sceneList.find((v) => formData.scenario === v.id);
router(`/scenarios/list/${formData.sceneId}/${sceneItem.name}`);
} else {
Toast({ message: result.msg, theme: "error" });
}
} catch (error) {
toast({
title: "创建失败",
description: "创建计划失败，请重试",
variant: "destructive",
})
Toast({
message:
error instanceof Error
? error.message
: typeof error === "string"
? error
: isEdit
? "更新计划失败，请重试"
: "创建计划失败，请重试",
theme: "error",
});
}
}
};
// 下一步
const handleNext = () => {
if (currentStep === steps.length) {
handleSave()
handleSave();
} else {
setCurrentStep((prev) => prev + 1)
setCurrentStep((prev) => prev + 1);
}
}
};
// 上一步
const handlePrev = () => {
setCurrentStep((prev) => Math.max(prev - 1, 1))
}
setCurrentStep((prev) => Math.max(prev - 1, 1));
};
// 渲染当前步骤内容
const renderStepContent = () => {
switch (currentStep) {
case 1:
return <BasicSettings formData={formData} onChange={onChange} onNext={handleNext} sceneList={sceneList} sceneLoading={sceneLoading} />
return (
<BasicSettings
formData={formData}
onChange={onChange}
onNext={handleNext}
sceneList={sceneList}
sceneLoading={sceneLoading}
/>
);
case 2:
return <FriendRequestSettings formData={formData} onChange={onChange} onNext={handleNext} onPrev={handlePrev} />
return (
<FriendRequestSettings
formData={formData}
onChange={onChange}
onNext={handleNext}
onPrev={handlePrev}
/>
);
case 3:
return <MessageSettings formData={formData} onChange={onChange} onNext={handleSave} onPrev={handlePrev} />
return (
<MessageSettings
formData={formData}
onChange={onChange}
onNext={handleSave}
onPrev={handlePrev}
/>
);
default:
return null
return null;
}
}
};
return (
<Layout
header={
<>
<header className="sticky top-0 z-10 bg-white border-b">
<div className="flex items-center justify-between h-14 px-4">
<div className="flex items-center">
<Button
variant="ghost"
size="icon"
onClick={() => router("/scenarios")}
>
<ChevronLeft className="h-5 w-5" />
</Button>
</div>
</div>
</header>
<Layout header={
<>
<header className="sticky top-0 z-10 bg-white border-b">
<div className="flex items-center justify-between h-14 px-4">
<div className="flex items-center">
<Button variant="ghost" size="icon" onClick={() => router("/plans")}>
<ChevronLeft className="h-5 w-5" />
</Button>
<div className="px-4 py-6">
<Steps current={currentStep - 1}>
{steps.map((step) => (
<StepItem
key={step.id}
title={step.title}
content={step.subtitle}
/>
))}
</Steps>
</div>
<Button variant="ghost" size="icon">
<Settings className="h-5 w-5" />
</Button>
</div>
</header>
<div className="px-4 py-6">
<Steps current={currentStep - 1}>
{steps.map((step) => (
<StepItem key={step.id} title={step.title} content={step.subtitle} />
))}
</Steps>
</div>
</>
}>
<div className="p-4">
{renderStepContent()}
</div>
</>
}
>
<div className="p-4">{renderStepContent()}</div>
</Layout>
)
);
}

243
nkebao/src/pages/scenarios/new/steps/BasicSettings.tsx
View File

@@ -5,167 +5,11 @@ import {
Input,
Tag,
Grid,
Dialog,
ImageViewer,
Table,
Switch,
} from "tdesign-mobile-react";
import EyeIcon from "@/components/icons/EyeIcon";
import UploadImage from "@/components/UploadImage";
const phoneCallTags = [
{ id: "tag-1", name: "咨询", color: "bg-blue-100 text-blue-800" },
{ id: "tag-2", name: "投诉", color: "bg-red-100 text-red-800" },
{ id: "tag-3", name: "合作", color: "bg-green-100 text-green-800" },
{ id: "tag-4", name: "价格", color: "bg-orange-100 text-orange-800" },
{ id: "tag-5", name: "售后", color: "bg-purple-100 text-purple-800" },
{ id: "tag-6", name: "订单", color: "bg-yellow-100 text-yellow-800" },
{ id: "tag-7", name: "物流", color: "bg-teal-100 text-teal-800" },
];
// 不同场景的预设标签
const scenarioTags = {
haibao: [
{
id: "poster-tag-1",
name: "活动推广",
color: "bg-blue-100 text-blue-800",
},
{
id: "poster-tag-2",
name: "产品宣传",
color: "bg-green-100 text-green-800",
},
{
id: "poster-tag-3",
name: "品牌展示",
color: "bg-purple-100 text-purple-800",
},
{ id: "poster-tag-4", name: "优惠促销", color: "bg-red-100 text-red-800" },
{
id: "poster-tag-5",
name: "新品发布",
color: "bg-orange-100 text-orange-800",
},
],
order: [
{ id: "order-tag-1", name: "新订单", color: "bg-green-100 text-green-800" },
{ id: "order-tag-2", name: "复购客户", color: "bg-blue-100 text-blue-800" },
{
id: "order-tag-3",
name: "高价值订单",
color: "bg-purple-100 text-purple-800",
},
{
id: "order-tag-4",
name: "待付款",
color: "bg-yellow-100 text-yellow-800",
},
{ id: "order-tag-5", name: "已完成", color: "bg-gray-100 text-gray-800" },
],
douyin: [
{ id: "douyin-tag-1", name: "短视频", color: "bg-pink-100 text-pink-800" },
{ id: "douyin-tag-2", name: "直播", color: "bg-red-100 text-red-800" },
{
id: "douyin-tag-3",
name: "带货",
color: "bg-orange-100 text-orange-800",
},
{
id: "douyin-tag-4",
name: "粉丝互动",
color: "bg-blue-100 text-blue-800",
},
{
id: "douyin-tag-5",
name: "热门话题",
color: "bg-purple-100 text-purple-800",
},
],
xiaohongshu: [
{ id: "xhs-tag-1", name: "种草笔记", color: "bg-red-100 text-red-800" },
{ id: "xhs-tag-2", name: "美妆", color: "bg-pink-100 text-pink-800" },
{ id: "xhs-tag-3", name: "穿搭", color: "bg-purple-100 text-purple-800" },
{ id: "xhs-tag-4", name: "生活方式", color: "bg-green-100 text-green-800" },
{
id: "xhs-tag-5",
name: "好物推荐",
color: "bg-orange-100 text-orange-800",
},
],
phone: phoneCallTags,
gongzhonghao: [
{ id: "gzh-tag-1", name: "文章推送", color: "bg-blue-100 text-blue-800" },
{ id: "gzh-tag-2", name: "活动通知", color: "bg-green-100 text-green-800" },
{
id: "gzh-tag-3",
name: "产品介绍",
color: "bg-purple-100 text-purple-800",
},
{
id: "gzh-tag-4",
name: "用户服务",
color: "bg-orange-100 text-orange-800",
},
{ id: "gzh-tag-5", name: "品牌故事", color: "bg-gray-100 text-gray-800" },
],
weixinqun: [
{ id: "wxq-tag-1", name: "群活动", color: "bg-green-100 text-green-800" },
{ id: "wxq-tag-2", name: "产品分享", color: "bg-blue-100 text-blue-800" },
{
id: "wxq-tag-3",
name: "用户交流",
color: "bg-purple-100 text-purple-800",
},
{ id: "wxq-tag-4", name: "优惠信息", color: "bg-pink-100 text-pink-800" },
{
id: "wxq-tag-5",
name: "答疑解惑",
color: "bg-orange-100 text-orange-800",
},
{
id: "wxq-tag-6",
name: "新人欢迎",
color: "bg-yellow-100 text-yellow-800",
},
{ id: "wxq-tag-7", name: "群规通知", color: "bg-gray-100 text-gray-800" },
{
id: "wxq-tag-8",
name: "活跃互动",
color: "bg-indigo-100 text-indigo-800",
},
],
payment: [
{ id: "pay-tag-1", name: "扫码支付", color: "bg-green-100 text-green-800" },
{ id: "pay-tag-2", name: "线下门店", color: "bg-blue-100 text-blue-800" },
{
id: "pay-tag-3",
name: "活动收款",
color: "bg-purple-100 text-purple-800",
},
{
id: "pay-tag-4",
name: "服务费用",
color: "bg-orange-100 text-orange-800",
},
{
id: "pay-tag-5",
name: "会员充值",
color: "bg-yellow-100 text-yellow-800",
},
],
api: [
{ id: "api-tag-1", name: "系统对接", color: "bg-blue-100 text-blue-800" },
{ id: "api-tag-2", name: "数据同步", color: "bg-green-100 text-green-800" },
{ id: "api-tag-3", name: "自动化", color: "bg-purple-100 text-purple-800" },
{
id: "api-tag-4",
name: "第三方平台",
color: "bg-orange-100 text-orange-800",
},
{ id: "api-tag-5", name: "实时推送", color: "bg-gray-100 text-gray-800" },
],
};
import { uploadFile } from "@/api/utils";
interface BasicSettingsProps {
formData: any;
@@ -334,12 +178,18 @@ export function BasicSettings({
onChange({ ...formData, scenario: "haibao" });
}
if (!formData.planName) {
const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "");
onChange({ ...formData, planName: `海报${today}` });
// 检查是否已经有上传的订单文件
if (formData.orderFileUploaded) {
setOrderUploaded(true);
}
}, [formData, onChange]);
useEffect(() => {
const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "");
const sceneItem = sceneList.find((v) => formData.scenario === v.id);
onChange({ ...formData, name: `${sceneItem?.name || "海报"}${today}` });
}, [sceneList]);
// 选中场景
const handleScenarioSelect = (sceneId: number) => {
onChange({ ...formData, scenario: sceneId });
@@ -500,6 +350,28 @@ export function BasicSettings({
window.URL.revokeObjectURL(url);
};
// 修改订单表格上传逻辑，使用 uploadFile 公共方法
const [orderUploaded, setOrderUploaded] = useState(false);
const handleOrderFileUpload = async (
event: React.ChangeEvent<HTMLInputElement>
) => {
const file = event.target.files?.[0];
if (file) {
try {
await uploadFile(file); // 默认接口即可
setOrderUploaded(true);
onChange({ ...formData, orderFileUploaded: true });
// 可用 toast 或其它方式提示成功
// alert('上传成功');
} catch (err) {
// 可用 toast 或其它方式提示失败
// alert('上传失败');
}
event.target.value = "";
}
};
// 账号弹窗关闭时清理搜索等状态
const handleAccountDialogClose = () => {
setIsAccountDialogOpen(false);
@@ -559,9 +431,9 @@ export function BasicSettings({
<input
className="w-full"
type="text"
value={formData.planName}
value={formData.name}
onChange={(e) =>
onChange({ ...formData, planName: String(e.target.value) })
onChange({ ...formData, name: String(e.target.value) })
}
placeholder="请输入计划名称"
/>
@@ -816,41 +688,35 @@ export function BasicSettings({
</Button>
<Button
type="button"
style={{ display: "flex", alignItems: "center", gap: 4 }}
style={{
display: "flex",
alignItems: "center",
gap: 4,
...(orderUploaded && {
backgroundColor: "#52c41a",
color: "#fff",
borderColor: "#52c41a",
}),
}}
theme="default"
onClick={() => uploadOrderInputRef.current?.click()}
>
<span className="iconfont" style={{ fontSize: 18 }}>
↑
{orderUploaded ? "✓" : "↑"}
</span>{" "}
上传订单表格
{orderUploaded ? "已上传" : "上传订单表格"}
<input
ref={uploadOrderInputRef}
type="file"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
style={{ display: "none" }}
onChange={handleFileImport}
onChange={handleOrderFileUpload}
/>
</Button>
</div>
<div style={{ color: "#888", fontSize: 13, marginBottom: 8 }}>
支持 CSV、Excel 格式，上传后将文件保存到服务器
</div>
{/* 已导入数据表格可复用原有Table渲染 */}
{importedTags.length > 0 && (
<Table
columns={[
{ colKey: "phone", title: "手机号" },
{ colKey: "wechat", title: "微信号" },
{ colKey: "source", title: "来源" },
{ colKey: "orderAmount", title: "订单金额" },
{ colKey: "orderDate", title: "下单日期" },
]}
data={importedTags}
rowKey="phone"
style={{ marginTop: 12 }}
/>
)}
</div>
{/* 电话获客设置区块，仅在选择电话获客场景时显示 */}
{formData.scenario === 5 && (
@@ -940,6 +806,21 @@ export function BasicSettings({
</div>
</div>
)}
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
margin: "16px 0",
}}
>
<span>是否启用</span>
<Switch
value={formData.enabled}
onChange={(value) => onChange({ ...formData, enabled: value })}
/>
</div>
<Button className="mt-4" block theme="primary" onClick={onNext}>
下一步
</Button>

286
nkebao/src/pages/scenarios/new/steps/FriendRequestSettings.tsx
View File

@@ -1,23 +1,28 @@
"use client"
"use client";
import { useState, useEffect } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { HelpCircle, MessageSquare, AlertCircle } from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { ChevronsUpDown } from "lucide-react"
import { Checkbox } from "@/components/ui/checkbox"
import { useState, useEffect } from "react";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { HelpCircle, MessageSquare, AlertCircle } from "lucide-react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { ChevronsUpDown } from "lucide-react";
import { Checkbox } from "@/components/ui/checkbox";
import DeviceSelection from "@/components/DeviceSelection";
interface FriendRequestSettingsProps {
formData: any
onChange: (data: any) => void
onNext: () => void
onPrev: () => void
formData: any;
onChange: (data: any) => void;
onNext: () => void;
onPrev: () => void;
}
// 招呼语模板
@@ -27,45 +32,43 @@ const greetingTemplates = [
"你好，我是XX产品的客服请通过",
"你好，感谢关注我们的产品",
"你好，很高兴为您服务",
]
];
// 备注类型选项
const remarkTypes = [
{ value: "phone", label: "手机号" },
{ value: "nickname", label: "昵称" },
{ value: "source", label: "来源" },
]
];
// 模拟设备数据
const mockDevices = [
{ id: "1", name: "iPhone 13 Pro", status: "online" },
{ id: "2", name: "Xiaomi 12", status: "online" },
{ id: "3", name: "Huawei P40", status: "offline" },
{ id: "4", name: "OPPO Find X3", status: "online" },
{ id: "5", name: "Samsung S21", status: "online" },
]
export function FriendRequestSettings({ formData, onChange, onNext, onPrev }: FriendRequestSettingsProps) {
const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false)
const [hasWarnings, setHasWarnings] = useState(false)
const [isDeviceSelectorOpen, setIsDeviceSelectorOpen] = useState(false)
const [selectedDevices, setSelectedDevices] = useState<any[]>(formData.selectedDevices || [])
export function FriendRequestSettings({
formData,
onChange,
onNext,
onPrev,
}: FriendRequestSettingsProps) {
const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false);
const [hasWarnings, setHasWarnings] = useState(false);
const [selectedDevices, setSelectedDevices] = useState<any[]>(
formData.selectedDevices || []
);
const [showRemarkTip, setShowRemarkTip] = useState(false);
// 获取场景标题
const getScenarioTitle = () => {
switch (formData.scenario) {
case "douyin":
return "抖音直播"
return "抖音直播";
case "xiaohongshu":
return "小红书"
return "小红书";
case "weixinqun":
return "微信群"
return "微信群";
case "gongzhonghao":
return "公众号"
return "公众号";
default:
return formData.planName || "获客计划"
return formData.name || "获客计划";
}
}
};
// 使用useEffect设置默认值
useEffect(() => {
@@ -76,172 +79,158 @@ export function FriendRequestSettings({ formData, onChange, onNext, onPrev }: Fr
remarkType: "phone", // 默认选择手机号
remarkFormat: `手机号+${getScenarioTitle()}`, // 默认备注格式
addFriendInterval: 1,
})
});
}
}, [formData, formData.greeting, onChange])
}, [formData, formData.greeting, onChange]);
// 检查是否有未完成的必填项
useEffect(() => {
const hasIncompleteFields = !formData.greeting?.trim()
setHasWarnings(hasIncompleteFields)
}, [formData])
const hasIncompleteFields = !formData.greeting?.trim();
setHasWarnings(hasIncompleteFields);
}, [formData]);
const handleTemplateSelect = (template: string) => {
onChange({ ...formData, greeting: template })
setIsTemplateDialogOpen(false)
}
onChange({ ...formData, greeting: template });
setIsTemplateDialogOpen(false);
};
const handleNext = () => {
// 即使有警告也允许进入下一步，但会显示提示
onNext()
}
const toggleDeviceSelection = (device: any) => {
const isSelected = selectedDevices.some((d) => d.id === device.id)
let newSelectedDevices
if (isSelected) {
newSelectedDevices = selectedDevices.filter((d) => d.id !== device.id)
} else {
newSelectedDevices = [...selectedDevices, device]
}
setSelectedDevices(newSelectedDevices)
onChange({ ...formData, selectedDevices: newSelectedDevices })
}
onNext();
};
return (
<Card className="p-6">
<>
<div className="space-y-6">
<div>
<Label className="text-base">选择设备</Label>
<div className="relative mt-2">
<Button
variant="outline"
className="w-full justify-between"
onClick={() => setIsDeviceSelectorOpen(!isDeviceSelectorOpen)}
>
{selectedDevices.length ? `已选择 ${selectedDevices.length} 个设备` : "选择设备"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
<span className="font-medium text-base">选择设备</span>
<div className="mt-2">
<DeviceSelection
selectedDevices={selectedDevices.map((d) => d.id)}
onSelect={(deviceIds) => {
const newSelectedDevices = deviceIds.map((id) => ({
id,
name: `设备 ${id}`,
status: "online",
}));
setSelectedDevices(newSelectedDevices);
onChange({ ...formData, device: deviceIds });
}}
placeholder="选择设备"
/>
</div>
</div>
{isDeviceSelectorOpen && (
<div className="absolute z-10 w-full mt-1 bg-white border rounded-md shadow-lg">
<div className="p-2">
<Input placeholder="搜索设备..." className="mb-2" />
<div className="max-h-60 overflow-auto">
{mockDevices.map((device) => (
<div
key={device.id}
className="flex items-center justify-between p-2 hover:bg-gray-100 cursor-pointer"
onClick={() => toggleDeviceSelection(device)}
>
<div className="flex items-center space-x-2">
<Checkbox
checked={selectedDevices.some((d) => d.id === device.id)}
onCheckedChange={() => toggleDeviceSelection(device)}
/>
<span>{device.name}</span>
</div>
<span className={`text-xs ${device.status === "online" ? "text-green-500" : "text-gray-400"}`}>
{device.status === "online" ? "在线" : "离线"}
</span>
</div>
))}
</div>
<div className="mb-4">
<div className="flex items-center space-x-2 mb-1 relative">
<span className="font-medium text-base">好友备注</span>
<span
className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-gray-200 text-gray-500 text-xs cursor-pointer hover:bg-gray-300 transition-colors"
onMouseEnter={() => setShowRemarkTip(true)}
onMouseLeave={() => setShowRemarkTip(false)}
onClick={() => setShowRemarkTip((v) => !v)}
>
?
</span>
{showRemarkTip && (
<div className="absolute left-24 top-0 z-20 w-64 p-3 bg-white border border-gray-200 rounded shadow-lg text-sm text-gray-700">
<div>设置添加好友时的备注格式</div>
<div className="mt-2 text-xs text-gray-500">备注格式预览：</div>
<div className="mt-1 text-blue-600">
{formData.remarkType === "phone" &&
`138****1234+${getScenarioTitle()}`}
{formData.remarkType === "nickname" &&
`小红书用户2851+${getScenarioTitle()}`}
{formData.remarkType === "source" &&
`抖音直播+${getScenarioTitle()}`}
</div>
</div>
)}
</div>
</div>
<div>
<div className="flex items-center space-x-2">
<Label className="text-base">好友备注</Label>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<HelpCircle className="h-4 w-4 text-gray-400" />
</TooltipTrigger>
<TooltipContent>
<p>设置添加好友时的备注格式</p>
<p className="mt-1">备注格式预览：</p>
<p>{formData.remarkType === "phone" && `138****1234+${getScenarioTitle()}`}</p>
<p>{formData.remarkType === "nickname" && `小红书用户2851+${getScenarioTitle()}`}</p>
<p>{formData.remarkType === "source" && `抖音直播+${getScenarioTitle()}`}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<Select
<select
value={formData.remarkType || "phone"}
onValueChange={(value) => onChange({ ...formData, remarkType: value })}
onChange={(e) =>
onChange({ ...formData, remarkType: e.target.value })
}
className="w-full mt-2 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<SelectTrigger className="w-full mt-2">
<SelectValue placeholder="选择备注类型" />
</SelectTrigger>
<SelectContent>
{remarkTypes.map((type) => (
<SelectItem key={type.value} value={type.value}>
{type.label}
</SelectItem>
))}
</SelectContent>
</Select>
{remarkTypes.map((type) => (
<option key={type.value} value={type.value}>
{type.label}
</option>
))}
</select>
</div>
<div>
<div className="flex items-center justify-between">
<Label className="text-base">招呼语</Label>
<Button variant="ghost" size="sm" onClick={() => setIsTemplateDialogOpen(true)} className="text-blue-500">
<span className="font-medium text-base">招呼语</span>
<Button
variant="ghost"
size="sm"
onClick={() => setIsTemplateDialogOpen(true)}
className="text-blue-500"
>
<MessageSquare className="h-4 w-4 mr-2" />
参考模板
</Button>
</div>
<Input
value={formData.greeting}
onChange={(e) => onChange({ ...formData, greeting: e.target.value })}
onChange={(e) =>
onChange({ ...formData, greeting: e.target.value })
}
placeholder="请输入招呼语"
className="mt-2"
/>
</div>
<div>
<Label className="text-base">添加间隔</Label>
<span className="font-medium text-base">添加间隔</span>
<div className="flex items-center space-x-2 mt-2">
<Input
type="number"
value={formData.addFriendInterval || 1}
onChange={(e) => onChange({ ...formData, addFriendInterval: Number(e.target.value) })}
className="w-32"
onChange={(e) =>
onChange({
...formData,
addFriendInterval: Number(e.target.value),
})
}
/>
<span>分钟</span>
<div className="w-10">分钟</div>
</div>
</div>
<div>
<Label className="text-base">允许加人的时间段</Label>
<span className="font-medium text-base">允许加人的时间段</span>
<div className="flex items-center space-x-2 mt-2">
<Input
type="time"
value={formData.addFriendTimeStart || "09:00"}
onChange={(e) => onChange({ ...formData, addFriendTimeStart: e.target.value })}
onChange={(e) =>
onChange({ ...formData, addFriendTimeStart: e.target.value })
}
className="w-32"
/>
<span>至</span>
<Input
type="time"
value={formData.addFriendTimeEnd || "18:00"}
onChange={(e) => onChange({ ...formData, addFriendTimeEnd: e.target.value })}
onChange={(e) =>
onChange({ ...formData, addFriendTimeEnd: e.target.value })
}
className="w-32"
/>
</div>
</div>
{hasWarnings && (
<Alert className="bg-amber-50 border-amber-200">
<Alert className="bg-amber-50 border-amber-200">
<AlertCircle className="h-4 w-4 text-amber-500" />
<AlertDescription>您有未完成的设置项，建议完善后再进入下一步。</AlertDescription>
<AlertDescription>
您有未完成的设置项，建议完善后再进入下一步。
</AlertDescription>
</Alert>
)}
@@ -253,8 +242,11 @@ export function FriendRequestSettings({ formData, onChange, onNext, onPrev }: Fr
</div>
</div>
<Dialog open={isTemplateDialogOpen} onOpenChange={setIsTemplateDialogOpen}>
<DialogContent>
<Dialog
open={isTemplateDialogOpen}
onOpenChange={setIsTemplateDialogOpen}
>
<DialogContent className="bg-white">
<DialogHeader>
<DialogTitle>招呼语模板</DialogTitle>
</DialogHeader>
@@ -272,6 +264,6 @@ export function FriendRequestSettings({ formData, onChange, onNext, onPrev }: Fr
</div>
</DialogContent>
</Dialog>
</Card>
)
</>
);
}

424
nkebao/src/pages/scenarios/new/steps/MessageSettings.tsx
View File

@@ -1,9 +1,7 @@
import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import {
MessageSquare,
ImageIcon,
@@ -16,40 +14,46 @@ import {
X,
Upload,
Clock,
} from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { toast } from "@/components/ui/use-toast"
} from "lucide-react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter,
} from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { toast } from "@/components/ui/use-toast";
interface MessageContent {
id: string
type: "text" | "image" | "video" | "file" | "miniprogram" | "link" | "group"
content: string
sendInterval?: number
intervalUnit?: "seconds" | "minutes"
id: string;
type: "text" | "image" | "video" | "file" | "miniprogram" | "link" | "group";
content: string;
sendInterval?: number;
intervalUnit?: "seconds" | "minutes";
scheduledTime?: {
hour: number
minute: number
second: number
}
title?: string
description?: string
address?: string
coverImage?: string
groupId?: string
linkUrl?: string
hour: number;
minute: number;
second: number;
};
title?: string;
description?: string;
address?: string;
coverImage?: string;
groupId?: string;
linkUrl?: string;
}
interface DayPlan {
day: number
messages: MessageContent[]
day: number;
messages: MessageContent[];
}
interface MessageSettingsProps {
formData: any
onChange: (data: any) => void
onNext: () => void
onPrev: () => void
formData: any;
onChange: (data: any) => void;
onNext: () => void;
onPrev: () => void;
}
// 消息类型配置
@@ -61,16 +65,21 @@ const messageTypes = [
{ id: "miniprogram", icon: Window, label: "小程序" },
{ id: "link", icon: Link2, label: "链接" },
{ id: "group", icon: Users, label: "邀请入群" },
]
];
// 模拟群组数据
const mockGroups = [
{ id: "1", name: "产品交流群1", memberCount: 156 },
{ id: "2", name: "产品交流群2", memberCount: 234 },
{ id: "3", name: "产品交流群3", memberCount: 89 },
]
];
export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageSettingsProps) {
export function MessageSettings({
formData,
onChange,
onNext,
onPrev,
}: MessageSettingsProps) {
const [dayPlans, setDayPlans] = useState<DayPlan[]>([
{
day: 0,
@@ -84,67 +93,71 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
},
],
},
])
const [isAddDayPlanOpen, setIsAddDayPlanOpen] = useState(false)
const [isGroupSelectOpen, setIsGroupSelectOpen] = useState(false)
const [selectedGroupId, setSelectedGroupId] = useState("")
]);
const [isAddDayPlanOpen, setIsAddDayPlanOpen] = useState(false);
const [isGroupSelectOpen, setIsGroupSelectOpen] = useState(false);
const [selectedGroupId, setSelectedGroupId] = useState("");
// 添加新消息
const handleAddMessage = (dayIndex: number, type = "text") => {
const updatedPlans = [...dayPlans]
const updatedPlans = [...dayPlans];
const newMessage: MessageContent = {
id: Date.now().toString(),
type: type as MessageContent["type"],
content: "",
}
};
if (dayPlans[dayIndex].day === 0) {
// 即时消息使用间隔设置
newMessage.sendInterval = 5
newMessage.intervalUnit = "seconds" // 默认改为秒
newMessage.sendInterval = 5;
newMessage.intervalUnit = "seconds"; // 默认改为秒
} else {
// 非即时消息使用具体时间设置
newMessage.scheduledTime = {
hour: 9,
minute: 0,
second: 0,
}
};
}
updatedPlans[dayIndex].messages.push(newMessage)
setDayPlans(updatedPlans)
onChange({ ...formData, messagePlans: updatedPlans })
}
updatedPlans[dayIndex].messages.push(newMessage);
setDayPlans(updatedPlans);
onChange({ ...formData, messagePlans: updatedPlans });
};
// 更新消息内容
const handleUpdateMessage = (dayIndex: number, messageIndex: number, updates: Partial<MessageContent>) => {
const updatedPlans = [...dayPlans]
const handleUpdateMessage = (
dayIndex: number,
messageIndex: number,
updates: Partial<MessageContent>
) => {
const updatedPlans = [...dayPlans];
updatedPlans[dayIndex].messages[messageIndex] = {
...updatedPlans[dayIndex].messages[messageIndex],
...updates,
}
setDayPlans(updatedPlans)
onChange({ ...formData, messagePlans: updatedPlans })
}
};
setDayPlans(updatedPlans);
onChange({ ...formData, messagePlans: updatedPlans });
};
// 删除消息
const handleRemoveMessage = (dayIndex: number, messageIndex: number) => {
const updatedPlans = [...dayPlans]
updatedPlans[dayIndex].messages.splice(messageIndex, 1)
setDayPlans(updatedPlans)
onChange({ ...formData, messagePlans: updatedPlans })
}
const updatedPlans = [...dayPlans];
updatedPlans[dayIndex].messages.splice(messageIndex, 1);
setDayPlans(updatedPlans);
onChange({ ...formData, messagePlans: updatedPlans });
};
// 切换时间单位
const toggleIntervalUnit = (dayIndex: number, messageIndex: number) => {
const message = dayPlans[dayIndex].messages[messageIndex]
const newUnit = message.intervalUnit === "minutes" ? "seconds" : "minutes"
handleUpdateMessage(dayIndex, messageIndex, { intervalUnit: newUnit })
}
const message = dayPlans[dayIndex].messages[messageIndex];
const newUnit = message.intervalUnit === "minutes" ? "seconds" : "minutes";
handleUpdateMessage(dayIndex, messageIndex, { intervalUnit: newUnit });
};
// 添加新的天数计划
const handleAddDayPlan = () => {
const newDay = dayPlans.length
const newDay = dayPlans.length;
setDayPlans([
...dayPlans,
{
@@ -162,47 +175,63 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
},
],
},
])
setIsAddDayPlanOpen(false)
]);
setIsAddDayPlanOpen(false);
toast({
title: "添加成功",
description: `已添加第${newDay}天的消息计划`,
})
}
});
};
// 选择群组
const handleSelectGroup = (groupId: string) => {
setSelectedGroupId(groupId)
setIsGroupSelectOpen(false)
setSelectedGroupId(groupId);
setIsGroupSelectOpen(false);
toast({
title: "选择成功",
description: `已选择群组：${mockGroups.find((g) => g.id === groupId)?.name}`,
})
}
description: `已选择群组：${
mockGroups.find((g) => g.id === groupId)?.name
}`,
});
};
// 处理文件上传
const handleFileUpload = (dayIndex: number, messageIndex: number, type: "image" | "video" | "file") => {
const handleFileUpload = (
dayIndex: number,
messageIndex: number,
type: "image" | "video" | "file"
) => {
// 模拟文件上传
toast({
title: "上传成功",
description: `${type === "image" ? "图片" : type === "video" ? "视频" : "文件"}上传成功`,
})
}
description: `${
type === "image" ? "图片" : type === "video" ? "视频" : "文件"
}上传成功`,
});
};
return (
<Card className="p-6">
<>
<div className="space-y-6">
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold">消息设置</h2>
<Button variant="outline" size="icon" onClick={() => setIsAddDayPlanOpen(true)}>
<Button
variant="outline"
size="icon"
onClick={() => setIsAddDayPlanOpen(true)}
>
<Plus className="h-4 w-4" />
</Button>
</div>
<Tabs defaultValue="0" className="w-full">
<TabsList className="w-full">
<TabsList className="w-full bg-gray-50">
{dayPlans.map((plan) => (
<TabsTrigger key={plan.day} value={plan.day.toString()} className="flex-1">
<TabsTrigger
key={plan.day}
value={plan.day.toString()}
className="flex-1"
>
{plan.day === 0 ? "即时消息" : `第${plan.day}天`}
</TabsTrigger>
))}
@@ -212,33 +241,45 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
<TabsContent key={plan.day} value={plan.day.toString()}>
<div className="space-y-4">
{plan.messages.map((message, messageIndex) => (
<div key={message.id} className="space-y-4 p-4 bg-gray-50 rounded-lg">
<div
key={message.id}
className="space-y-4 p-4 bg-gray-50 rounded-lg"
>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
{plan.day === 0 ? (
<>
<Label>间隔</Label>
<Input
type="number"
value={String(message.sendInterval)}
onChange={(e) =>
handleUpdateMessage(dayIndex, messageIndex, { sendInterval: Number(e.target.value) })
}
className="w-20"
/>
<div className="w-10">间隔</div>
<div className="w-40">
<Input
type="number"
value={String(message.sendInterval)}
onChange={(e) =>
handleUpdateMessage(dayIndex, messageIndex, {
sendInterval: Number(e.target.value),
})
}
/>
</div>
<Button
variant="ghost"
size="sm"
onClick={() => toggleIntervalUnit(dayIndex, messageIndex)}
onClick={() =>
toggleIntervalUnit(dayIndex, messageIndex)
}
className="flex items-center space-x-1"
>
<Clock className="h-3 w-3" />
<span>{message.intervalUnit === "minutes" ? "分钟" : "秒"}</span>
<span>
{message.intervalUnit === "minutes"
? "分钟"
: "秒"}
</span>
</Button>
</>
) : (
<>
<Label>发送时间</Label>
<div className="font-medium">发送时间</div>
<div className="flex items-center space-x-1">
<Input
type="number"
@@ -248,7 +289,11 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
onChange={(e) =>
handleUpdateMessage(dayIndex, messageIndex, {
scheduledTime: {
...(message.scheduledTime || { hour: 0, minute: 0, second: 0 }),
...(message.scheduledTime || {
hour: 0,
minute: 0,
second: 0,
}),
hour: Number(e.target.value),
},
})
@@ -260,11 +305,17 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
type="number"
min={0}
max={59}
value={String(message.scheduledTime?.minute || 0)}
value={String(
message.scheduledTime?.minute || 0
)}
onChange={(e) =>
handleUpdateMessage(dayIndex, messageIndex, {
scheduledTime: {
...(message.scheduledTime || { hour: 0, minute: 0, second: 0 }),
...(message.scheduledTime || {
hour: 0,
minute: 0,
second: 0,
}),
minute: Number(e.target.value),
},
})
@@ -276,11 +327,17 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
type="number"
min={0}
max={59}
value={String(message.scheduledTime?.second || 0)}
value={String(
message.scheduledTime?.second || 0
)}
onChange={(e) =>
handleUpdateMessage(dayIndex, messageIndex, {
scheduledTime: {
...(message.scheduledTime || { hour: 0, minute: 0, second: 0 }),
...(message.scheduledTime || {
hour: 0,
minute: 0,
second: 0,
}),
second: Number(e.target.value),
},
})
@@ -291,7 +348,13 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
</>
)}
</div>
<Button variant="ghost" size="sm" onClick={() => handleRemoveMessage(dayIndex, messageIndex)}>
<Button
variant="ghost"
size="sm"
onClick={() =>
handleRemoveMessage(dayIndex, messageIndex)
}
>
<X className="h-4 w-4" />
</Button>
</div>
@@ -300,9 +363,15 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
{messageTypes.map((type) => (
<Button
key={type.id}
variant={message.type === type.id ? "default" : "outline"}
variant={
message.type === type.id ? "default" : "outline"
}
size="sm"
onClick={() => handleUpdateMessage(dayIndex, messageIndex, { type: type.id as any })}
onClick={() =>
handleUpdateMessage(dayIndex, messageIndex, {
type: type.id as any,
})
}
className="flex flex-col items-center p-2 h-auto"
>
<type.icon className="h-4 w-4" />
@@ -313,7 +382,11 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
{message.type === "text" && (
<Textarea
value={message.content}
onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { content: e.target.value })}
onChange={(e) =>
handleUpdateMessage(dayIndex, messageIndex, {
content: e.target.value,
})
}
placeholder="请输入消息内容"
className="min-h-[100px]"
/>
@@ -322,39 +395,49 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
{message.type === "miniprogram" && (
<div className="space-y-4">
<div className="space-y-2">
<Label>
<div className="font-medium">
标题<span className="text-red-500">*</span>
</Label>
</div>
<Input
value={message.title}
onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { title: e.target.value })}
onChange={(e) =>
handleUpdateMessage(dayIndex, messageIndex, {
title: e.target.value,
})
}
placeholder="请输入小程序标题"
/>
</div>
<div className="space-y-2">
<Label>描述</Label>
<div className="font-medium">描述</div>
<Input
value={message.description}
onChange={(e) =>
handleUpdateMessage(dayIndex, messageIndex, { description: e.target.value })
handleUpdateMessage(dayIndex, messageIndex, {
description: e.target.value,
})
}
placeholder="请输入小程序描述"
/>
</div>
<div className="space-y-2">
<Label>
<div className="font-medium">
链接<span className="text-red-500">*</span>
</Label>
</div>
<Input
value={message.address}
onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { address: e.target.value })}
onChange={(e) =>
handleUpdateMessage(dayIndex, messageIndex, {
address: e.target.value,
})
}
placeholder="请输入小程序路径"
/>
</div>
<div className="space-y-2">
<Label>
<div className="font-medium">
封面<span className="text-red-500">*</span>
</Label>
</div>
<div className="border-2 border-dashed rounded-lg p-4 text-center">
{message.coverImage ? (
<div className="relative">
@@ -367,7 +450,13 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
variant="secondary"
size="sm"
className="absolute top-2 right-2"
onClick={() => handleUpdateMessage(dayIndex, messageIndex, { coverImage: undefined })}
onClick={() =>
handleUpdateMessage(
dayIndex,
messageIndex,
{ coverImage: undefined }
)
}
>
<X className="h-4 w-4" />
</Button>
@@ -376,7 +465,13 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
<Button
variant="outline"
className="w-full h-[120px]"
onClick={() => handleFileUpload(dayIndex, messageIndex, "image")}
onClick={() =>
handleFileUpload(
dayIndex,
messageIndex,
"image"
)
}
>
<Upload className="h-4 w-4 mr-2" />
上传封面
@@ -390,39 +485,49 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
{message.type === "link" && (
<div className="space-y-4">
<div className="space-y-2">
<Label>
<div className="font-medium">
标题<span className="text-red-500">*</span>
</Label>
</div>
<Input
value={message.title}
onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { title: e.target.value })}
onChange={(e) =>
handleUpdateMessage(dayIndex, messageIndex, {
title: e.target.value,
})
}
placeholder="请输入链接标题"
/>
</div>
<div className="space-y-2">
<Label>描述</Label>
<div className="font-medium">描述</div>
<Input
value={message.description}
onChange={(e) =>
handleUpdateMessage(dayIndex, messageIndex, { description: e.target.value })
handleUpdateMessage(dayIndex, messageIndex, {
description: e.target.value,
})
}
placeholder="请输入链接描述"
/>
</div>
<div className="space-y-2">
<Label>
<div className="font-medium">
链接<span className="text-red-500">*</span>
</Label>
</div>
<Input
value={message.linkUrl}
onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { linkUrl: e.target.value })}
onChange={(e) =>
handleUpdateMessage(dayIndex, messageIndex, {
linkUrl: e.target.value,
})
}
placeholder="请输入链接地址"
/>
</div>
<div className="space-y-2">
<Label>
<div className="font-medium">
封面<span className="text-red-500">*</span>
</Label>
</div>
<div className="border-2 border-dashed rounded-lg p-4 text-center">
{message.coverImage ? (
<div className="relative">
@@ -435,7 +540,13 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
variant="secondary"
size="sm"
className="absolute top-2 right-2"
onClick={() => handleUpdateMessage(dayIndex, messageIndex, { coverImage: undefined })}
onClick={() =>
handleUpdateMessage(
dayIndex,
messageIndex,
{ coverImage: undefined }
)
}
>
<X className="h-4 w-4" />
</Button>
@@ -444,7 +555,13 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
<Button
variant="outline"
className="w-full h-[120px]"
onClick={() => handleFileUpload(dayIndex, messageIndex, "image")}
onClick={() =>
handleFileUpload(
dayIndex,
messageIndex,
"image"
)
}
>
<Upload className="h-4 w-4 mr-2" />
上传封面
@@ -457,35 +574,55 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
{message.type === "group" && (
<div className="space-y-2">
<Label>
<div className="font-medium">
选择群聊<span className="text-red-500">*</span>
</Label>
</div>
<Button
variant="outline"
className="w-full justify-start"
onClick={() => setIsGroupSelectOpen(true)}
>
{selectedGroupId ? mockGroups.find((g) => g.id === selectedGroupId)?.name : "选择邀请入的群"}
{selectedGroupId
? mockGroups.find((g) => g.id === selectedGroupId)
?.name
: "选择邀请入的群"}
</Button>
</div>
)}
{(message.type === "image" || message.type === "video" || message.type === "file") && (
{(message.type === "image" ||
message.type === "video" ||
message.type === "file") && (
<div className="border-2 border-dashed rounded-lg p-4 text-center">
<Button
variant="outline"
className="w-full h-[120px]"
onClick={() => handleFileUpload(dayIndex, messageIndex, message.type as any)}
onClick={() =>
handleFileUpload(
dayIndex,
messageIndex,
message.type as any
)
}
>
<Upload className="h-4 w-4 mr-2" />
上传{message.type === "image" ? "图片" : message.type === "video" ? "视频" : "文件"}
上传
{message.type === "image"
? "图片"
: message.type === "video"
? "视频"
: "文件"}
</Button>
</div>
)}
</div>
))}
<Button variant="outline" onClick={() => handleAddMessage(dayIndex)} className="w-full">
<Button
variant="outline"
onClick={() => handleAddMessage(dayIndex)}
className="w-full"
>
<Plus className="w-4 h-4 mr-2" />
添加消息
</Button>
@@ -509,7 +646,9 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
<DialogTitle>添加消息计划</DialogTitle>
</DialogHeader>
<div className="py-4">
<p className="text-sm text-gray-500 mb-4">选择要添加的消息计划类型</p>
<p className="text-sm text-gray-500 mb-4">
选择要添加的消息计划类型
</p>
<Button onClick={handleAddDayPlan} className="w-full">
添加第 {dayPlans.length} 天计划
</Button>
@@ -529,24 +668,31 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
<div
key={group.id}
className={`p-4 rounded-lg cursor-pointer hover:bg-gray-100 ${
selectedGroupId === group.id ? "bg-blue-50 border border-blue-200" : ""
selectedGroupId === group.id
? "bg-blue-50 border border-blue-200"
: ""
}`}
onClick={() => handleSelectGroup(group.id)}
>
<div className="font-medium">{group.name}</div>
<div className="text-sm text-gray-500">成员数：{group.memberCount}</div>
<div className="text-sm text-gray-500">
成员数：{group.memberCount}
</div>
</div>
))}
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setIsGroupSelectOpen(false)}>
<Button
variant="outline"
onClick={() => setIsGroupSelectOpen(false)}
>
取消
</Button>
<Button onClick={() => setIsGroupSelectOpen(false)}>确定</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</Card>
)
</>
);
}

561
nkebao/yarn.lock
View File

File diff suppressed because it is too large Load Diff