diff --git a/nkebao/src/pages/scenarios/list/index.tsx b/nkebao/src/pages/scenarios/list/index.tsx index 97be9b46..fe28da46 100644 --- a/nkebao/src/pages/scenarios/list/index.tsx +++ b/nkebao/src/pages/scenarios/list/index.tsx @@ -82,13 +82,12 @@ const Scene: React.FC = () => { -
场景获客
+
场景获客
@@ -113,21 +112,19 @@ const Scene: React.FC = () => { 场景获客} + left={
场景获客
} right={ } > } - footer={} >
diff --git a/nkebao/src/pages/scenarios/plan/list/index.module.scss b/nkebao/src/pages/scenarios/plan/list/index.module.scss index f8b8ddb0..4df03dc4 100644 --- a/nkebao/src/pages/scenarios/plan/list/index.module.scss +++ b/nkebao/src/pages/scenarios/plan/list/index.module.scss @@ -2,18 +2,6 @@ padding:0 16px; } -.nav-title { - font-size: 18px; - font-weight: 600; - color: #333; -} - -.new-plan-btn { - font-size: 14px; - height: 32px; - padding: 0 12px; -} - .loading { display: flex; flex-direction: column; diff --git a/nkebao/src/pages/scenarios/plan/list/index.tsx b/nkebao/src/pages/scenarios/plan/list/index.tsx index ebeb8f46..a2cd331d 100644 --- a/nkebao/src/pages/scenarios/plan/list/index.tsx +++ b/nkebao/src/pages/scenarios/plan/list/index.tsx @@ -356,8 +356,8 @@ const ScenarioList: React.FC = () => { back={null} style={{ background: "#fff" }} left={ -
- +
+ navigate(-1)} fontSize={24} /> {scenarioName} @@ -368,7 +368,7 @@ const ScenarioList: React.FC = () => { size="small" color="primary" onClick={handleCreateNewPlan} - className={style["new-plan-btn"]} + className="new-plan-btn" > 新建计划 diff --git a/nkebao/src/pages/scenarios/plan/new/index.tsx b/nkebao/src/pages/scenarios/plan/new/index.tsx index cf52b104..4d3e1497 100644 --- a/nkebao/src/pages/scenarios/plan/new/index.tsx +++ b/nkebao/src/pages/scenarios/plan/new/index.tsx @@ -248,41 +248,36 @@ const NewPlan: React.FC = () => { return ( - {isEdit ? "编辑计划" : "新建计划"} -
- } - right={ - - } - /> + <> + + + navigate(-1)} fontSize={24} /> + + {isEdit ? "编辑计划" : "新建计划"} +
+ } + /> + + {/* 步骤指示器 */} +
+ + {steps.map((step) => ( + + ))} + +
+ } - footer={} >
- {/* 步骤指示器 */} -
- - {steps.map((step) => ( - - ))} - -
- {/* 步骤内容 */}
{renderStepContent()}
diff --git a/nkebao/src/pages/scenarios/plan/new/page.module.scss b/nkebao/src/pages/scenarios/plan/new/page.module.scss index eaff99f1..0d6784fd 100644 --- a/nkebao/src/pages/scenarios/plan/new/page.module.scss +++ b/nkebao/src/pages/scenarios/plan/new/page.module.scss @@ -1,6 +1,4 @@ .new-plan-page { - background: #f5f5f5; - min-height: 100vh; } .nav-title { @@ -31,10 +29,8 @@ } .steps-container { - background: white; - padding: 20px 16px; + background: #ffffff; margin-bottom: 12px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .step-content { diff --git a/nkebao/src/pages/workspace/auto-group/detail/index.module.scss b/nkebao/src/pages/workspace/auto-group/detail/index.module.scss index 93c42e85..ff8c8d5e 100644 --- a/nkebao/src/pages/workspace/auto-group/detail/index.module.scss +++ b/nkebao/src/pages/workspace/auto-group/detail/index.module.scss @@ -1,3 +1,149 @@ .autoGroupDetail { - // 这里写详情页样式 + padding: 16px 0 80px 0; + background: #f7f8fa; + min-height: 100vh; +} + +.headerBar { + display: flex; + align-items: center; + height: 48px; + background: #fff; + border-bottom: 1px solid #f0f0f0; + font-size: 18px; + font-weight: 600; + padding: 0 16px; +} + +.title { + font-size: 18px; + font-weight: 600; + color: #222; + flex: 1; + text-align: center; +} + +.infoCard { + margin-bottom: 16px; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0,0,0,0.03); + border: none; + background: #fff; + padding: 16px; +} +.infoGrid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; +} +.infoTitle { + font-size: 14px; + font-weight: 500; + color: #1677ff; + margin-bottom: 4px; +} +.infoItem { + font-size: 13px; + color: #444; + margin-bottom: 2px; +} + +.progressSection { + margin-top: 16px; +} +.progressCard { + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0,0,0,0.03); + border: none; + background: #fff; + padding: 16px; + margin-bottom: 16px; +} +.progressHeader { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 15px; + font-weight: 500; + margin-bottom: 8px; +} +.groupList { + margin-top: 8px; + display: flex; + flex-direction: column; + gap: 12px; +} +.groupCard { + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0,0,0,0.03); + border: none; + background: #fff; + padding: 12px 16px; +} +.groupHeader { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 15px; + font-weight: 500; + margin-bottom: 8px; +} +.memberGrid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 6px; + margin-top: 8px; +} +.memberItem { + background: #f5f7fa; + border-radius: 8px; + padding: 4px 8px; + font-size: 13px; + color: #333; + display: flex; + align-items: center; +} +.warnText { + color: #faad14; + font-size: 13px; + margin-top: 8px; + display: flex; + align-items: center; +} +.successText { + color: #389e0d; + font-size: 13px; + margin-top: 8px; + display: flex; + align-items: center; +} +.successAlert { + color: #389e0d; + background: #f6ffed; + border-radius: 8px; + padding: 8px 0; + text-align: center; + margin-top: 12px; + font-size: 14px; +} +.emptyCard { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 40px 0; + background: #fff; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0,0,0,0.03); + margin-top: 32px; +} +.emptyTitle { + font-size: 16px; + color: #888; + margin: 12px 0 4px 0; +} +.emptyDesc { + font-size: 13px; + color: #bbb; + margin-bottom: 16px; } \ No newline at end of file diff --git a/nkebao/src/pages/workspace/auto-group/detail/index.tsx b/nkebao/src/pages/workspace/auto-group/detail/index.tsx index 00f574dd..058c320a 100644 --- a/nkebao/src/pages/workspace/auto-group/detail/index.tsx +++ b/nkebao/src/pages/workspace/auto-group/detail/index.tsx @@ -1,7 +1,384 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; +import { useParams, useNavigate } from "react-router-dom"; +import { + Card, + Button, + Toast, + ProgressBar, + Tag, + SpinLoading, +} from "antd-mobile"; +import { TeamOutline, LeftOutline } from "antd-mobile-icons"; +import { AlertOutlined } from "@ant-design/icons"; +import Layout from "@/components/Layout/Layout"; +import MeauMobile from "@/components/MeauMobile/MeauMoible"; +import style from "./index.module.scss"; + +interface GroupMember { + id: string; + nickname: string; + wechatId: string; + tags: string[]; +} + +interface Group { + id: string; + members: GroupMember[]; +} + +interface GroupTaskDetail { + id: string; + name: string; + status: "preparing" | "creating" | "completed" | "paused"; + totalGroups: number; + currentGroupIndex: number; + groups: Group[]; + createTime: string; + lastUpdateTime: string; + creator: string; + deviceCount: number; + targetFriends: number; + groupSize: { min: number; max: number }; + timeRange: { start: string; end: string }; + targetTags: string[]; + groupNameTemplate: string; + groupDescription: string; +} + +const mockTaskDetail: GroupTaskDetail = { + id: "1", + name: "VIP客户建群", + status: "creating", + totalGroups: 5, + currentGroupIndex: 2, + groups: Array.from({ length: 5 }).map((_, index) => ({ + id: `group-${index}`, + members: Array.from({ length: Math.floor(Math.random() * 10) + 30 }).map( + (_, mIndex) => ({ + id: `member-${index}-${mIndex}`, + nickname: `用户${mIndex + 1}`, + wechatId: `wx_${mIndex}`, + tags: [`标签${(mIndex % 3) + 1}`], + }) + ), + })), + createTime: "2024-11-20 19:04:14", + lastUpdateTime: "2025-02-06 13:12:35", + creator: "admin", + deviceCount: 2, + targetFriends: 156, + groupSize: { min: 20, max: 50 }, + timeRange: { start: "09:00", end: "21:00" }, + targetTags: ["VIP客户", "高价值"], + groupNameTemplate: "VIP客户交流群{序号}", + groupDescription: "VIP客户专属交流群，提供优质服务", +}; + +const GroupPreview: React.FC<{ + groupIndex: number; + members: GroupMember[]; + isCreating: boolean; + isCompleted: boolean; + onRetry?: () => void; +}> = ({ groupIndex, members, isCreating, isCompleted, onRetry }) => { + const [expanded, setExpanded] = useState(false); + const targetSize = 38; + return ( + +
+
+ 群 {groupIndex + 1} + + {isCompleted ? "已完成" : isCreating ? "创建中" : "等待中"} + +
+
+ + {members.length}/{targetSize} +
+
+ {isCreating && !isCompleted && ( + + )} + {expanded ? ( + <> +
+ {members.map((member) => ( +
+ {member.nickname} + {member.tags.length > 0 && ( + + {member.tags[0]} + + )} +
+ ))} +
+ + + ) : ( + + )} + {!isCompleted && members.length < targetSize && ( +
+ + 群人数不足{targetSize}人 + {onRetry && ( + + )} +
+ )} + {isCompleted &&
群创建完成
} + + ); +}; + +const GroupCreationProgress: React.FC<{ + taskDetail: GroupTaskDetail; + onComplete: () => void; +}> = ({ taskDetail, onComplete }) => { + const [groups, setGroups] = useState(taskDetail.groups); + const [currentGroupIndex, setCurrentGroupIndex] = useState( + taskDetail.currentGroupIndex + ); + const [status, setStatus] = useState( + taskDetail.status + ); + + useEffect(() => { + if (status === "creating" && currentGroupIndex < groups.length) { + const timer = setTimeout(() => { + if (currentGroupIndex === groups.length - 1) { + setStatus("completed"); + onComplete(); + } else { + setCurrentGroupIndex((prev) => prev + 1); + } + }, 3000); + return () => clearTimeout(timer); + } + }, [status, currentGroupIndex, groups.length, onComplete]); + + const handleRetryGroup = (groupIndex: number) => { + setGroups((prev) => + prev.map((group, index) => { + if (index === groupIndex) { + return { + ...group, + members: [ + ...group.members, + { + id: `retry-member-${Date.now()}`, + nickname: `补充用户${group.members.length + 1}`, + wechatId: `wx_retry_${Date.now()}`, + tags: ["新加入"], + }, + ], + }; + } + return group; + }) + ); + }; + + return ( +
+ +
+
+ 建群进度 + + {status === "preparing" + ? "准备中" + : status === "creating" + ? "创建中" + : "已完成"} + +
+
+ {currentGroupIndex + 1}/{groups.length}组 +
+
+ + +
+ {groups.map((group, index) => ( + handleRetryGroup(index)} + /> + ))} +
+ {status === "completed" && ( +
所有群组已创建完成
+ )} +
+ ); +}; const AutoGroupDetail: React.FC = () => { - return
自动建群详情页
; + const { id } = useParams(); + const navigate = useNavigate(); + const [loading, setLoading] = useState(true); + const [taskDetail, setTaskDetail] = useState(null); + + useEffect(() => { + setLoading(true); + setTimeout(() => { + setTaskDetail(mockTaskDetail); + setLoading(false); + }, 800); + }, [id]); + + const handleComplete = () => { + Toast.show({ content: "所有群组已创建完成" }); + }; + + if (loading) { + return ( + + +
建群详情
+
+ } + footer={} + loading={true} + > +
+ + ); + } + + if (!taskDetail) { + return ( + + +
建群详情
+
+ } + footer={} + > + + +
任务不存在
+
请检查任务ID是否正确
+ + + + ); + } + + return ( + + +
{taskDetail.name} - 建群详情
+
+ } + footer={} + > +
+ +
+
+
基本信息
+
任务名称：{taskDetail.name}
+
+ 创建时间：{taskDetail.createTime} +
+
创建人：{taskDetail.creator}
+
+ 执行设备：{taskDetail.deviceCount} 个 +
+
+
+
建群配置
+
+ 群组规模：{taskDetail.groupSize.min}-{taskDetail.groupSize.max}{" "} + 人 +
+
+ 执行时间：{taskDetail.timeRange.start} -{" "} + {taskDetail.timeRange.end} +
+
+ 目标标签：{taskDetail.targetTags.join(", ")} +
+
+ 群名称模板：{taskDetail.groupNameTemplate} +
+
+
+ + +
+ + ); }; export default AutoGroupDetail; diff --git a/nkebao/src/pages/workspace/auto-group/form/index.module.scss b/nkebao/src/pages/workspace/auto-group/form/index.module.scss index 19f9a662..20bf7f92 100644 --- a/nkebao/src/pages/workspace/auto-group/form/index.module.scss +++ b/nkebao/src/pages/workspace/auto-group/form/index.module.scss @@ -1,3 +1,34 @@ .autoGroupForm { - // 这里写新建/编辑页样式 + padding: 10px; + background: #f7f8fa; +} + +.headerBar { + display: flex; + align-items: center; + height: 48px; + background: #fff; + border-bottom: 1px solid #f0f0f0; + font-size: 18px; + font-weight: 600; + padding: 0 16px; +} + +.title { + font-size: 18px; + font-weight: 600; + color: #222; + flex: 1; + text-align: center; +} + +.timeRangeRow { + display: flex; + align-items: center; + gap: 8px; +} +.groupSizeRow { + display: flex; + align-items: center; + gap: 8px; } \ No newline at end of file diff --git a/nkebao/src/pages/workspace/auto-group/form/index.tsx b/nkebao/src/pages/workspace/auto-group/form/index.tsx index 3a8d8bd1..dfb5a27e 100644 --- a/nkebao/src/pages/workspace/auto-group/form/index.tsx +++ b/nkebao/src/pages/workspace/auto-group/form/index.tsx @@ -1,7 +1,245 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; +import { useNavigate, useParams } from "react-router-dom"; +import { + Form, + Input, + Button, + Toast, + Switch, + Selector, + TextArea, +} from "antd-mobile"; +import { LeftOutline } from "antd-mobile-icons"; +import Layout from "@/components/Layout/Layout"; +import MeauMobile from "@/components/MeauMobile/MeauMoible"; +import style from "./index.module.scss"; +import { createAutoGroup, updateAutoGroup } from "./api"; + +const defaultForm = { + name: "", + deviceCount: 1, + targetFriends: 0, + createInterval: 300, + maxGroupsPerDay: 10, + timeRange: { start: "09:00", end: "21:00" }, + groupSize: { min: 20, max: 50 }, + targetTags: [], + groupNameTemplate: "VIP客户交流群{序号}", + groupDescription: "", +}; + +const tagOptions = [ + { label: "VIP客户", value: "VIP客户" }, + { label: "高价值", value: "高价值" }, + { label: "潜在客户", value: "潜在客户" }, + { label: "中意向", value: "中意向" }, +]; const AutoGroupForm: React.FC = () => { - return
自动建群新建/编辑页
; + const navigate = useNavigate(); + const { id } = useParams(); + const isEdit = Boolean(id); + const [form, setForm] = useState(defaultForm); + const [loading, setLoading] = useState(false); + + useEffect(() => { + if (isEdit) { + // 这里应请求详情接口，回填表单，演示用mock + setForm({ + ...defaultForm, + name: "VIP客户建群", + deviceCount: 2, + targetFriends: 156, + createInterval: 300, + maxGroupsPerDay: 20, + timeRange: { start: "09:00", end: "21:00" }, + groupSize: { min: 20, max: 50 }, + targetTags: ["VIP客户", "高价值"], + groupNameTemplate: "VIP客户交流群{序号}", + groupDescription: "VIP客户专属交流群，提供优质服务", + }); + } + }, [isEdit, id]); + + const handleSubmit = async () => { + setLoading(true); + try { + if (isEdit) { + await updateAutoGroup(id as string, form); + Toast.show({ content: "编辑成功" }); + } else { + await createAutoGroup(form); + Toast.show({ content: "创建成功" }); + } + navigate("/workspace/auto-group"); + } catch (e) { + Toast.show({ content: "提交失败" }); + } finally { + setLoading(false); + } + }; + + return ( + + +
+ {isEdit ? "编辑建群任务" : "新建建群任务"} +
+ + } + > +
+
+ {isEdit ? "保存修改" : "创建任务"} + + } + > + + setForm((f: any) => ({ ...f, name: val }))} + placeholder="请输入任务名称" + /> + + + + setForm((f: any) => ({ ...f, deviceCount: Number(val) })) + } + placeholder="请输入设备数量" + /> + + + + setForm((f: any) => ({ ...f, targetFriends: Number(val) })) + } + placeholder="请输入目标好友数" + /> + + + + setForm((f: any) => ({ ...f, createInterval: Number(val) })) + } + placeholder="请输入建群间隔" + /> + + + + setForm((f: any) => ({ ...f, maxGroupsPerDay: Number(val) })) + } + placeholder="请输入最大建群数" + /> + + +
+ + setForm((f: any) => ({ + ...f, + timeRange: { ...f.timeRange, start: val }, + })) + } + placeholder="开始时间" + /> + - + + setForm((f: any) => ({ + ...f, + timeRange: { ...f.timeRange, end: val }, + })) + } + placeholder="结束时间" + /> +
+ + +
+ + setForm((f: any) => ({ + ...f, + groupSize: { ...f.groupSize, min: Number(val) }, + })) + } + placeholder="最小人数" + /> + - + + setForm((f: any) => ({ + ...f, + groupSize: { ...f.groupSize, max: Number(val) }, + })) + } + placeholder="最大人数" + /> +
+ + + + setForm((f: any) => ({ ...f, targetTags: val })) + } + /> + + + + setForm((f: any) => ({ ...f, groupNameTemplate: val })) + } + placeholder="请输入群名称模板" + /> + + +