refactor: overhaul UI for streamlined user experience
Redesign navigation, home overview, user portrait, and valuation pages with improved functionality and responsive design. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
This commit is contained in:
v0
186
app/workspace/auto-group/components/StepByStepPlanForm.tsx
Normal file
186
app/workspace/auto-group/components/StepByStepPlanForm.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Plus, Minus, X } from "lucide-react"
|
||||
import { DeviceSelector } from "./device-selector"
|
||||
import { WechatAccountSelector } from "./wechat-account-selector"
|
||||
|
||||
interface StepByStepPlanFormProps {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function StepByStepPlanForm({ onClose }: StepByStepPlanFormProps) {
|
||||
const [step, setStep] = useState(1)
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
customerType: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
groupSize: 38,
|
||||
welcomeMessage: "欢迎进群",
|
||||
devices: [] as string[],
|
||||
wechatAccounts: [] as string[],
|
||||
})
|
||||
|
||||
const handleNext = () => {
|
||||
setStep(step + 1)
|
||||
}
|
||||
|
||||
const handlePrevious = () => {
|
||||
setStep(step - 1)
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
// TODO: 提交表单数据
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<DialogTitle>新建计划 - 步骤 {step}/4</DialogTitle>
|
||||
<Button variant="ghost" size="icon" onClick={onClose}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{step === 1 && (
|
||||
<>
|
||||
<div>
|
||||
<Label htmlFor="name" className="text-base">
|
||||
计划名称<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="请输入任务名称"
|
||||
className="mt-1.5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="customerType" className="text-base">
|
||||
建群客户类型
|
||||
</Label>
|
||||
<Input
|
||||
id="customerType"
|
||||
value={formData.customerType}
|
||||
onChange={(e) => setFormData({ ...formData, customerType: e.target.value })}
|
||||
placeholder="选择客户标签"
|
||||
className="mt-1.5"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<>
|
||||
<div>
|
||||
<Label className="text-base">执行期限</Label>
|
||||
<div className="flex items-center space-x-4 mt-1.5">
|
||||
<Input
|
||||
type="date"
|
||||
value={formData.startDate}
|
||||
onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
|
||||
/>
|
||||
<span>至</span>
|
||||
<Input
|
||||
type="date"
|
||||
value={formData.endDate}
|
||||
onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-base">建群人数设置</Label>
|
||||
<div className="flex items-center space-x-4 mt-1.5">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setFormData({ ...formData, groupSize: Math.max(1, formData.groupSize - 1) })}
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="w-12 text-center">{formData.groupSize}</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setFormData({ ...formData, groupSize: formData.groupSize + 1 })}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
<span>人</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 3 && (
|
||||
<>
|
||||
<div>
|
||||
<Label htmlFor="welcomeMessage" className="text-base">
|
||||
招呼语
|
||||
</Label>
|
||||
<Input
|
||||
id="welcomeMessage"
|
||||
value={formData.welcomeMessage}
|
||||
onChange={(e) => setFormData({ ...formData, welcomeMessage: e.target.value })}
|
||||
placeholder="欢迎进群"
|
||||
className="mt-1.5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-base">建群设备</Label>
|
||||
<DeviceSelector
|
||||
selectedDevices={formData.devices}
|
||||
onChange={(devices) => setFormData({ ...formData, devices })}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 4 && (
|
||||
<div>
|
||||
<Label className="text-base">关联微信</Label>
|
||||
<WechatAccountSelector
|
||||
selectedAccounts={formData.wechatAccounts}
|
||||
onChange={(accounts) => setFormData({ ...formData, wechatAccounts: accounts })}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between space-x-4 pt-4">
|
||||
{step > 1 && (
|
||||
<Button type="button" variant="outline" onClick={handlePrevious}>
|
||||
上一步
|
||||
</Button>
|
||||
)}
|
||||
{step < 4 ? (
|
||||
<Button type="button" onClick={handleNext} className="bg-blue-600 hover:bg-blue-700">
|
||||
下一步
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="submit" className="bg-blue-600 hover:bg-blue-700">
|
||||
完成
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
)
|
||||
}
|
||||
84
app/workspace/auto-group/components/auto-group-service.ts
Normal file
84
app/workspace/auto-group/components/auto-group-service.ts
Normal file
@@ -0,0 +1,84 @@
|
||||
export interface Friend {
|
||||
id: string
|
||||
nickname: string
|
||||
wechatId: string
|
||||
tags: string[]
|
||||
}
|
||||
|
||||
export interface GroupConfig {
|
||||
size: number
|
||||
specificWechatIds: string[]
|
||||
keywords: string[]
|
||||
tags: string[]
|
||||
}
|
||||
|
||||
export class AutoGroupService {
|
||||
static async createGroups(friends: Friend[], config: GroupConfig) {
|
||||
// 1. 过滤好友
|
||||
const filteredFriends = this.filterFriends(friends, config)
|
||||
|
||||
// 2. 分组
|
||||
const groups = this.groupFriends(filteredFriends, config)
|
||||
|
||||
return groups
|
||||
}
|
||||
|
||||
private static filterFriends(friends: Friend[], config: GroupConfig) {
|
||||
return friends.filter((friend) => {
|
||||
// 关键词匹配
|
||||
const matchesKeywords =
|
||||
config.keywords.length === 0 ||
|
||||
config.keywords.some((keyword) => friend.nickname.includes(keyword) || friend.wechatId.includes(keyword))
|
||||
|
||||
// 标签匹配
|
||||
const matchesTags = config.tags.length === 0 || config.tags.some((tag) => friend.tags.includes(tag))
|
||||
|
||||
return matchesKeywords && matchesTags
|
||||
})
|
||||
}
|
||||
|
||||
private static groupFriends(friends: Friend[], config: GroupConfig) {
|
||||
const groups: Friend[][] = []
|
||||
let currentGroup: Friend[] = []
|
||||
|
||||
// 添加指定的微信号到每个组
|
||||
const specificFriends = friends.filter((f) => config.specificWechatIds.includes(f.wechatId))
|
||||
|
||||
// 剩余好友
|
||||
const remainingFriends = friends.filter((f) => !config.specificWechatIds.includes(f.wechatId))
|
||||
|
||||
// 分组
|
||||
for (const friend of remainingFriends) {
|
||||
if (currentGroup.length >= config.size - specificFriends.length) {
|
||||
groups.push([...specificFriends, ...currentGroup])
|
||||
currentGroup = []
|
||||
}
|
||||
currentGroup.push(friend)
|
||||
}
|
||||
|
||||
// 处理最后一组
|
||||
if (currentGroup.length > 0) {
|
||||
groups.push([...specificFriends, ...currentGroup])
|
||||
}
|
||||
|
||||
return groups
|
||||
}
|
||||
|
||||
static async checkGroupSize(groupId: string): Promise<number> {
|
||||
// 模拟检查群大小的API调用
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(Math.floor(Math.random() * 10) + 30)
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
|
||||
static async addMembersToGroup(groupId: string, members: Friend[]): Promise<boolean> {
|
||||
// 模拟添加成员的API调用
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(true)
|
||||
}, 2000)
|
||||
})
|
||||
}
|
||||
}
|
||||
128
app/workspace/auto-group/components/columns.tsx
Normal file
128
app/workspace/auto-group/components/columns.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
"use client"
|
||||
|
||||
import type { ColumnDef } from "@tanstack/react-table"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Eye, Edit, Trash } from "lucide-react"
|
||||
|
||||
export type Plan = {
|
||||
id: string
|
||||
name: string
|
||||
groupCount: number
|
||||
groupSize: number
|
||||
totalFriends: number
|
||||
tags: string[]
|
||||
deviceId: string
|
||||
operator: string
|
||||
timeRange: string
|
||||
contacts: string[]
|
||||
status: "running" | "paused" | "completed"
|
||||
}
|
||||
|
||||
export const columns: ColumnDef<Plan>[] = [
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: "序号",
|
||||
cell: ({ row }) => row.index + 1,
|
||||
},
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: "计划名称",
|
||||
},
|
||||
{
|
||||
accessorKey: "groupCount",
|
||||
header: "已建群数量",
|
||||
},
|
||||
{
|
||||
accessorKey: "groupSize",
|
||||
header: "建群人数标准",
|
||||
cell: ({ row }) => `${row.original.groupSize}/群`,
|
||||
},
|
||||
{
|
||||
accessorKey: "totalFriends",
|
||||
header: "微信客户数量",
|
||||
},
|
||||
{
|
||||
accessorKey: "tags",
|
||||
header: "群标签",
|
||||
cell: ({ row }) => (
|
||||
<div className="flex gap-1">
|
||||
{row.original.tags.map((tag) => (
|
||||
<Badge key={tag} variant="secondary">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "deviceId",
|
||||
header: "执行设备ID",
|
||||
},
|
||||
{
|
||||
accessorKey: "operator",
|
||||
header: "执行客服号",
|
||||
},
|
||||
{
|
||||
accessorKey: "timeRange",
|
||||
header: "执行时间",
|
||||
},
|
||||
{
|
||||
accessorKey: "contacts",
|
||||
header: "关联微信",
|
||||
cell: ({ row }) => (
|
||||
<div className="flex gap-1">
|
||||
{row.original.contacts.map((contact) => (
|
||||
<Badge key={contact} variant="outline">
|
||||
{contact}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "状态",
|
||||
cell: ({ row }) => {
|
||||
const status = row.original.status
|
||||
const statusMap = {
|
||||
running: { label: "执行中", color: "bg-green-500" },
|
||||
paused: { label: "已暂停", color: "bg-yellow-500" },
|
||||
completed: { label: "已完成", color: "bg-gray-500" },
|
||||
}
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<div className={`w-2 h-2 rounded-full mr-2 ${statusMap[status].color}`} />
|
||||
{statusMap[status].label}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
header: "操作",
|
||||
cell: ({ row }) => {
|
||||
const plan = row.original
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="text-red-500 hover:text-red-600">
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
<Switch
|
||||
checked={plan.status === "running"}
|
||||
onCheckedChange={() => {
|
||||
// TODO: 更新计划状态
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
]
|
||||
95
app/workspace/auto-group/components/data-table.tsx
Normal file
95
app/workspace/auto-group/components/data-table.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
type ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
getPaginationRowModel,
|
||||
getFilteredRowModel,
|
||||
type ColumnFiltersState,
|
||||
} from "@tanstack/react-table"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useState } from "react"
|
||||
import { Search } from "lucide-react"
|
||||
|
||||
interface DataTableProps<TData, TValue> {
|
||||
columns: ColumnDef<TData, TValue>[]
|
||||
data: TData[]
|
||||
}
|
||||
|
||||
export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
|
||||
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
|
||||
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
state: {
|
||||
columnFilters,
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder="搜索计划名称..."
|
||||
value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
|
||||
onChange={(event) => table.getColumn("name")?.setFilterValue(event.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead key={header.id}>
|
||||
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||
暂无数据
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end space-x-2">
|
||||
<Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
|
||||
上一页
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
|
||||
下一页
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
67
app/workspace/auto-group/components/device-selector.tsx
Normal file
67
app/workspace/auto-group/components/device-selector.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Search, Plus } from "lucide-react"
|
||||
import { Table } from "@/components/ui/table"
|
||||
|
||||
interface DeviceSelectorProps {
|
||||
selectedDevices: string[]
|
||||
onChange: (devices: string[]) => void
|
||||
}
|
||||
|
||||
export function DeviceSelector({ selectedDevices, onChange }: DeviceSelectorProps) {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="mt-1.5">
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)} className="h-9">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
选择设备
|
||||
</Button>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="max-w-4xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>选择设备</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input placeholder="搜索设备" className="pl-9" />
|
||||
</div>
|
||||
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>设备id</th>
|
||||
<th>当前客服</th>
|
||||
<th>在线状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan={5} className="text-center py-4 text-gray-500">
|
||||
暂无数据
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
<div className="flex justify-end space-x-4">
|
||||
<Button variant="outline" onClick={() => setOpen(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={() => setOpen(false)} className="bg-blue-600 hover:bg-blue-700">
|
||||
确定
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
126
app/workspace/auto-group/components/group-assistant.tsx
Normal file
126
app/workspace/auto-group/components/group-assistant.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Search, RefreshCw, Users } from "lucide-react"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Avatar } from "@/components/ui/avatar"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
|
||||
interface Friend {
|
||||
id: string
|
||||
name: string
|
||||
wxid: string
|
||||
avatar: string
|
||||
selected?: boolean
|
||||
}
|
||||
|
||||
interface GroupAssistantProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
onCreateGroup: (friends: Friend[]) => void
|
||||
}
|
||||
|
||||
export function GroupAssistant({ open, onOpenChange, onCreateGroup }: GroupAssistantProps) {
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [selectedTag, setSelectedTag] = useState("")
|
||||
const [friends, setFriends] = useState<Friend[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleRefresh = async () => {
|
||||
setLoading(true)
|
||||
// TODO: 刷新好友列表
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
const handleCreateGroup = () => {
|
||||
const selectedFriends = friends.filter((f) => f.selected)
|
||||
onCreateGroup(selectedFriends)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-4xl h-[80vh] flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>建群助手</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex space-x-4 mb-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>
|
||||
<Select value={selectedTag} onValueChange={setSelectedTag}>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue placeholder="好友分组" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部好友</SelectItem>
|
||||
<SelectItem value="new">新好友</SelectItem>
|
||||
<SelectItem value="business">商务合作</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button variant="outline" onClick={handleRefresh} disabled={loading}>
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`} />
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto border rounded-md">
|
||||
{friends.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-gray-500">
|
||||
<Users className="h-12 w-12 mb-2" />
|
||||
<p>暂无好友数据</p>
|
||||
<Button variant="link" onClick={handleRefresh} disabled={loading}>
|
||||
点击刷新
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y">
|
||||
{friends.map((friend) => (
|
||||
<div key={friend.id} className="flex items-center space-x-4 p-4 hover:bg-gray-50">
|
||||
<Checkbox
|
||||
checked={friend.selected}
|
||||
onCheckedChange={(checked) => {
|
||||
setFriends(friends.map((f) => (f.id === friend.id ? { ...f, selected: !!checked } : f)))
|
||||
}}
|
||||
/>
|
||||
<Avatar className="h-10 w-10">
|
||||
<img src={friend.avatar || "/placeholder.svg"} alt={friend.name} />
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{friend.name}</div>
|
||||
<div className="text-sm text-gray-500">{friend.wxid}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-4">
|
||||
<div className="text-sm text-gray-500">已选择 {friends.filter((f) => f.selected).length} 个好友</div>
|
||||
<div className="space-x-4">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCreateGroup}
|
||||
disabled={friends.filter((f) => f.selected).length === 0}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
创建群聊
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
126
app/workspace/auto-group/components/group-creation-progress.tsx
Normal file
126
app/workspace/auto-group/components/group-creation-progress.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { GroupPreview } from "./group-preview"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
import { AlertCircle, CheckCircle2 } from "lucide-react"
|
||||
|
||||
interface GroupCreationProgressProps {
|
||||
planId: string
|
||||
onComplete: () => void
|
||||
}
|
||||
|
||||
export function GroupCreationProgress({ planId, onComplete }: GroupCreationProgressProps) {
|
||||
const [groups, setGroups] = useState<any[]>([])
|
||||
const [currentGroupIndex, setCurrentGroupIndex] = useState(0)
|
||||
const [status, setStatus] = useState<"preparing" | "creating" | "completed">("preparing")
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
// 模拟获取分组数据
|
||||
const mockGroups = 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}`],
|
||||
})),
|
||||
}))
|
||||
setGroups(mockGroups)
|
||||
setStatus("creating")
|
||||
}, [])
|
||||
|
||||
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 (
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg font-medium">
|
||||
建群进度
|
||||
<Badge className="ml-2">
|
||||
{status === "preparing" ? "准备中" : status === "creating" ? "创建中" : "已完成"}
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
<div className="text-sm text-gray-500">
|
||||
{currentGroupIndex + 1}/{groups.length}组
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Progress value={Math.round(((currentGroupIndex + 1) / groups.length) * 100)} className="h-2" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<ScrollArea className="h-[calc(100vh-300px)]">
|
||||
<div className="space-y-4">
|
||||
{groups.map((group, index) => (
|
||||
<GroupPreview
|
||||
key={group.id}
|
||||
groupIndex={index}
|
||||
members={group.members}
|
||||
isCreating={status === "creating" && index === currentGroupIndex}
|
||||
isCompleted={status === "completed" || index < currentGroupIndex}
|
||||
onRetry={() => handleRetryGroup(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{status === "completed" && (
|
||||
<Alert>
|
||||
<CheckCircle2 className="h-4 w-4" />
|
||||
<AlertDescription>所有群组已创建完成</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
96
app/workspace/auto-group/components/group-preview.tsx
Normal file
96
app/workspace/auto-group/components/group-preview.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Users, AlertCircle, CheckCircle2 } from "lucide-react"
|
||||
|
||||
interface Friend {
|
||||
id: string
|
||||
nickname: string
|
||||
wechatId: string
|
||||
tags: string[]
|
||||
}
|
||||
|
||||
interface GroupPreviewProps {
|
||||
groupIndex: number
|
||||
members: Friend[]
|
||||
isCreating: boolean
|
||||
isCompleted: boolean
|
||||
onRetry?: () => void
|
||||
}
|
||||
|
||||
export function GroupPreview({ groupIndex, members, isCreating, isCompleted, onRetry }: GroupPreviewProps) {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
|
||||
return (
|
||||
<Card className="w-full">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg font-medium">
|
||||
群 {groupIndex + 1}
|
||||
<Badge variant={isCompleted ? "success" : isCreating ? "default" : "secondary"} className="ml-2">
|
||||
{isCompleted ? "已完成" : isCreating ? "创建中" : "等待中"}
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Users className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-sm text-gray-500">{members.length}/38</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isCreating && !isCompleted && (
|
||||
<div className="mb-4">
|
||||
<Progress value={Math.round((members.length / 38) * 100)} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{expanded ? (
|
||||
<div className="space-y-2">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{members.map((member) => (
|
||||
<div key={member.id} className="text-sm flex items-center space-x-2 bg-gray-50 p-2 rounded">
|
||||
<span className="truncate">{member.nickname}</span>
|
||||
{member.tags.length > 0 && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{member.tags[0]}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="w-full mt-2" onClick={() => setExpanded(false)}>
|
||||
收起
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button variant="ghost" size="sm" className="w-full" onClick={() => setExpanded(true)}>
|
||||
查看成员 ({members.length})
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{!isCompleted && members.length < 38 && (
|
||||
<div className="mt-4 flex items-center text-amber-500 text-sm">
|
||||
<AlertCircle className="w-4 h-4 mr-2" />
|
||||
群人数不足38人
|
||||
{onRetry && (
|
||||
<Button variant="ghost" size="sm" className="ml-2 text-blue-500" onClick={onRetry}>
|
||||
继续拉人
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isCompleted && (
|
||||
<div className="mt-4 flex items-center text-green-500 text-sm">
|
||||
<CheckCircle2 className="w-4 h-4 mr-2" />
|
||||
群创建完成
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
284
app/workspace/auto-group/components/new-plan-form.tsx
Normal file
284
app/workspace/auto-group/components/new-plan-form.tsx
Normal file
@@ -0,0 +1,284 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Plus, X } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface NewPlanFormProps {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function NewPlanForm({ onClose }: NewPlanFormProps) {
|
||||
const [step, setStep] = useState(1)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
customerType: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
groupSize: 38,
|
||||
welcomeMessage: "欢迎进群",
|
||||
specificWechatIds: [] as string[],
|
||||
keywords: [] as string[],
|
||||
tags: [] as string[],
|
||||
deviceId: "",
|
||||
operatorId: "",
|
||||
})
|
||||
|
||||
const [tempInput, setTempInput] = useState({
|
||||
wechatId: "",
|
||||
keyword: "",
|
||||
tag: "",
|
||||
})
|
||||
|
||||
const handleAddWechatId = () => {
|
||||
if (tempInput.wechatId && !formData.specificWechatIds.includes(tempInput.wechatId)) {
|
||||
setFormData({
|
||||
...formData,
|
||||
specificWechatIds: [...formData.specificWechatIds, tempInput.wechatId],
|
||||
})
|
||||
setTempInput({ ...tempInput, wechatId: "" })
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddKeyword = () => {
|
||||
if (tempInput.keyword && !formData.keywords.includes(tempInput.keyword)) {
|
||||
setFormData({
|
||||
...formData,
|
||||
keywords: [...formData.keywords, tempInput.keyword],
|
||||
})
|
||||
setTempInput({ ...tempInput, keyword: "" })
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddTag = () => {
|
||||
if (tempInput.tag && !formData.tags.includes(tempInput.tag)) {
|
||||
setFormData({
|
||||
...formData,
|
||||
tags: [...formData.tags, tempInput.tag],
|
||||
})
|
||||
setTempInput({ ...tempInput, tag: "" })
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
try {
|
||||
// TODO: 实现提交逻辑
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
onClose()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<DialogContent className="sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>新建自动拉群计划</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{step === 1 && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name" className="text-base">
|
||||
计划名称<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="请输入计划名称"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="customerType" className="text-base">
|
||||
建群客户类型
|
||||
</Label>
|
||||
<Select
|
||||
value={formData.customerType}
|
||||
onValueChange={(value) => setFormData({ ...formData, customerType: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择客户类型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="high_value">高价值客户</SelectItem>
|
||||
<SelectItem value="regular">普通客户</SelectItem>
|
||||
<SelectItem value="potential">潜在客户</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="startDate" className="text-base">
|
||||
开始日期
|
||||
</Label>
|
||||
<Input
|
||||
id="startDate"
|
||||
type="date"
|
||||
value={formData.startDate}
|
||||
onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="endDate" className="text-base">
|
||||
结束日期
|
||||
</Label>
|
||||
<Input
|
||||
id="endDate"
|
||||
type="date"
|
||||
value={formData.endDate}
|
||||
onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-base">群人数设置</Label>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setFormData({ ...formData, groupSize: Math.max(1, formData.groupSize - 1) })}
|
||||
>
|
||||
-
|
||||
</Button>
|
||||
<span className="w-12 text-center">{formData.groupSize}</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setFormData({ ...formData, groupSize: formData.groupSize + 1 })}
|
||||
>
|
||||
+
|
||||
</Button>
|
||||
<span>人/群</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="welcomeMessage" className="text-base">
|
||||
入群欢迎语
|
||||
</Label>
|
||||
<Textarea
|
||||
id="welcomeMessage"
|
||||
value={formData.welcomeMessage}
|
||||
onChange={(e) => setFormData({ ...formData, welcomeMessage: e.target.value })}
|
||||
placeholder="请输入欢迎语"
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-base">指定微信号</Label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Input
|
||||
value={tempInput.wechatId}
|
||||
onChange={(e) => setTempInput({ ...tempInput, wechatId: e.target.value })}
|
||||
placeholder="输入微信号"
|
||||
/>
|
||||
<Button type="button" variant="outline" size="icon" onClick={handleAddWechatId}>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{formData.specificWechatIds.map((id) => (
|
||||
<Badge key={id} variant="secondary" className="flex items-center gap-1">
|
||||
{id}
|
||||
<X
|
||||
className="h-3 w-3 cursor-pointer"
|
||||
onClick={() =>
|
||||
setFormData({
|
||||
...formData,
|
||||
specificWechatIds: formData.specificWechatIds.filter((i) => i !== id),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-base">关键词筛选</Label>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Input
|
||||
value={tempInput.keyword}
|
||||
onChange={(e) => setTempInput({ ...tempInput, keyword: e.target.value })}
|
||||
placeholder="输入关键词"
|
||||
/>
|
||||
<Button type="button" variant="outline" size="icon" onClick={handleAddKeyword}>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{formData.keywords.map((keyword) => (
|
||||
<Badge key={keyword} variant="secondary" className="flex items-center gap-1">
|
||||
{keyword}
|
||||
<X
|
||||
className="h-3 w-3 cursor-pointer"
|
||||
onClick={() =>
|
||||
setFormData({
|
||||
...formData,
|
||||
keywords: formData.keywords.filter((k) => k !== keyword),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between pt-4">
|
||||
{step > 1 && (
|
||||
<Button type="button" variant="outline" onClick={() => setStep(step - 1)}>
|
||||
上一步
|
||||
</Button>
|
||||
)}
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button type="button" variant="outline" onClick={onClose}>
|
||||
取消
|
||||
</Button>
|
||||
{step < 2 ? (
|
||||
<Button type="button" onClick={() => setStep(step + 1)} className="bg-blue-500 hover:bg-blue-600">
|
||||
下一步
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className={cn("bg-blue-500 hover:bg-blue-600", loading && "opacity-50 cursor-not-allowed")}
|
||||
>
|
||||
{loading ? "创建中..." : "确定"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Search, Plus } from "lucide-react"
|
||||
import { Table } from "@/components/ui/table"
|
||||
|
||||
interface WechatAccountSelectorProps {
|
||||
selectedAccounts: string[]
|
||||
onChange: (accounts: string[]) => void
|
||||
}
|
||||
|
||||
export function WechatAccountSelector({ selectedAccounts, onChange }: WechatAccountSelectorProps) {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="mt-1.5 space-x-2">
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)} className="h-9">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
选择客户
|
||||
</Button>
|
||||
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)} className="h-9">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
外部账号
|
||||
</Button>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="max-w-4xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>选择微信账号</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input placeholder="请输入关键字筛选" className="pl-9" />
|
||||
</div>
|
||||
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>微信号</th>
|
||||
<th>在线状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan={4} className="text-center py-4 text-gray-500">
|
||||
暂无数据
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
|
||||
<div className="flex justify-end space-x-4">
|
||||
<Button variant="outline" onClick={() => setOpen(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={() => setOpen(false)} className="bg-blue-600 hover:bg-blue-700">
|
||||
确定
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
152
app/workspace/auto-group/page.tsx
Normal file
152
app/workspace/auto-group/page.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { PlusCircle, Settings, Users, RefreshCcw } from "lucide-react"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { Dialog } from "@/components/ui/dialog"
|
||||
import { NewPlanForm } from "./components/new-plan-form"
|
||||
|
||||
interface Plan {
|
||||
id: string
|
||||
name: string
|
||||
groupCount: number
|
||||
groupSize: number
|
||||
totalFriends: number
|
||||
tags: string[]
|
||||
status: "running" | "stopped" | "completed"
|
||||
lastUpdated: string
|
||||
}
|
||||
|
||||
const mockPlans: Plan[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "品牌推广群",
|
||||
groupCount: 6,
|
||||
groupSize: 38,
|
||||
totalFriends: 228,
|
||||
tags: ["品牌", "推广"],
|
||||
status: "running",
|
||||
lastUpdated: "2024-02-24 10:30",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "客户服务群",
|
||||
groupCount: 4,
|
||||
groupSize: 50,
|
||||
totalFriends: 200,
|
||||
tags: ["客服", "售后"],
|
||||
status: "stopped",
|
||||
lastUpdated: "2024-02-23 15:45",
|
||||
},
|
||||
]
|
||||
|
||||
export default function AutoGroupPage() {
|
||||
const [newPlanOpen, setNewPlanOpen] = useState(false)
|
||||
|
||||
const getStatusColor = (status: Plan["status"]) => {
|
||||
switch (status) {
|
||||
case "running":
|
||||
return "bg-green-500/10 text-green-500"
|
||||
case "stopped":
|
||||
return "bg-red-500/10 text-red-500"
|
||||
case "completed":
|
||||
return "bg-blue-500/10 text-blue-500"
|
||||
default:
|
||||
return "bg-gray-500/10 text-gray-500"
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusText = (status: Plan["status"]) => {
|
||||
switch (status) {
|
||||
case "running":
|
||||
return "运行中"
|
||||
case "stopped":
|
||||
return "已停止"
|
||||
case "completed":
|
||||
return "已完成"
|
||||
default:
|
||||
return status
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container p-4 mx-auto max-w-md">
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-semibold">微信自动拉群</h1>
|
||||
<Button onClick={() => setNewPlanOpen(true)} className="bg-blue-500 hover:bg-blue-600">
|
||||
<PlusCircle className="w-4 h-4 mr-2" />
|
||||
新建计划
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="active" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="active">进行中</TabsTrigger>
|
||||
<TabsTrigger value="completed">已完成</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="active" className="mt-4">
|
||||
<ScrollArea className="h-[calc(100vh-200px)]">
|
||||
<div className="space-y-4">
|
||||
{mockPlans.map((plan) => (
|
||||
<Card key={plan.id} className="border border-gray-100">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg font-medium">{plan.name}</CardTitle>
|
||||
<Badge className={getStatusColor(plan.status)}>{getStatusText(plan.status)}</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm text-gray-500">
|
||||
<div className="flex items-center">
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
已建群数：{plan.groupCount}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
群规模：{plan.groupSize}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<RefreshCcw className="w-4 h-4 mr-2" />
|
||||
更新时间：{plan.lastUpdated}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{plan.tags.map((tag) => (
|
||||
<Badge key={tag} variant="secondary" className="text-xs">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-4 flex justify-end space-x-2">
|
||||
<Button variant="outline" size="sm">
|
||||
编辑
|
||||
</Button>
|
||||
<Button variant="destructive" size="sm" className="bg-red-500 hover:bg-red-600">
|
||||
停止
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="completed">
|
||||
<div className="h-[calc(100vh-200px)] flex items-center justify-center text-gray-500">暂无已完成的计划</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<Dialog open={newPlanOpen} onOpenChange={setNewPlanOpen}>
|
||||
<NewPlanForm onClose={() => setNewPlanOpen(false)} />
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user