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>
|
||||
)
|
||||
}
|
||||
142
app/workspace/moments-sync/[id]/edit/page.tsx
Normal file
142
app/workspace/moments-sync/[id]/edit/page.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { ChevronLeft, Search } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { StepIndicator } from "../../components/step-indicator"
|
||||
import { BasicSettings } from "../../components/basic-settings"
|
||||
import { DeviceSelectionDialog } from "../../components/device-selection-dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
|
||||
export default function EditMomentsSyncPage() {
|
||||
const router = useRouter()
|
||||
const [currentStep, setCurrentStep] = useState(1)
|
||||
const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
|
||||
const [formData, setFormData] = useState({
|
||||
taskName: "同步卡若主号",
|
||||
startTime: "06:00",
|
||||
endTime: "23:59",
|
||||
syncCount: 5,
|
||||
accountType: "business" as const,
|
||||
enabled: true,
|
||||
selectedDevices: [] as string[],
|
||||
selectedLibraries: [] as string[],
|
||||
})
|
||||
|
||||
const handleUpdateFormData = (data: Partial<typeof formData>) => {
|
||||
setFormData((prev) => ({ ...prev, ...data }))
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
setCurrentStep((prev) => Math.min(prev + 1, 3))
|
||||
}
|
||||
|
||||
const handlePrev = () => {
|
||||
setCurrentStep((prev) => Math.max(prev - 1, 1))
|
||||
}
|
||||
|
||||
const handleComplete = () => {
|
||||
console.log("Form submitted:", formData)
|
||||
router.push("/workspace/moments-sync")
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#F8F9FA] pb-20">
|
||||
<header className="sticky top-0 z-10 bg-white">
|
||||
<div className="flex items-center h-14 px-4">
|
||||
<Button variant="ghost" size="icon" onClick={() => router.back()} className="hover:bg-gray-50">
|
||||
<ChevronLeft className="h-6 w-6" />
|
||||
</Button>
|
||||
<h1 className="ml-2 text-lg font-medium">编辑朋友圈同步</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="mt-8">
|
||||
<StepIndicator currentStep={currentStep} />
|
||||
|
||||
<div className="mt-8">
|
||||
{currentStep === 1 && (
|
||||
<BasicSettings formData={formData} onChange={handleUpdateFormData} onNext={handleNext} />
|
||||
)}
|
||||
|
||||
{currentStep === 2 && (
|
||||
<div className="space-y-6 px-6">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
|
||||
<Input
|
||||
placeholder="选择设备"
|
||||
className="h-12 pl-11 rounded-xl border-gray-200 text-base"
|
||||
onClick={() => setDeviceDialogOpen(true)}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
|
||||
{formData.selectedDevices.length > 0 && (
|
||||
<div className="text-base text-gray-500">已选设备：{formData.selectedDevices.length} 个</div>
|
||||
)}
|
||||
|
||||
<div className="flex space-x-4 pt-4">
|
||||
<Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
|
||||
上一步
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleNext}
|
||||
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
|
||||
>
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<DeviceSelectionDialog
|
||||
open={deviceDialogOpen}
|
||||
onOpenChange={setDeviceDialogOpen}
|
||||
selectedDevices={formData.selectedDevices}
|
||||
onSelect={(devices) => {
|
||||
handleUpdateFormData({ selectedDevices: devices })
|
||||
setDeviceDialogOpen(false)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentStep === 3 && (
|
||||
<div className="space-y-6 px-6">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
|
||||
<Input placeholder="选择内容库" className="h-12 pl-11 rounded-xl border-gray-200 text-base" />
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-4 pt-4">
|
||||
<Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
|
||||
上一步
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleComplete}
|
||||
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
|
||||
>
|
||||
完成
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="fixed bottom-0 left-0 right-0 h-16 bg-white border-t flex items-center justify-around px-6">
|
||||
<button className="flex flex-col items-center text-blue-600">
|
||||
<span className="text-sm mt-1">首页</span>
|
||||
</button>
|
||||
<button className="flex flex-col items-center text-gray-400">
|
||||
<span className="text-sm mt-1">场景获客</span>
|
||||
</button>
|
||||
<button className="flex flex-col items-center text-gray-400">
|
||||
<span className="text-sm mt-1">工作台</span>
|
||||
</button>
|
||||
<button className="flex flex-col items-center text-gray-400">
|
||||
<span className="text-sm mt-1">我的</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
38
app/workspace/moments-sync/[id]/edit/step-indicator.tsx
Normal file
38
app/workspace/moments-sync/[id]/edit/step-indicator.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
interface StepIndicatorProps {
|
||||
currentStep: number
|
||||
}
|
||||
|
||||
export function StepIndicator({ currentStep }: StepIndicatorProps) {
|
||||
const steps = [
|
||||
{ number: 1, title: "步骤 1", subtitle: "基础设置" },
|
||||
{ number: 2, title: "步骤 2", subtitle: "设备选择" },
|
||||
{ number: 3, title: "步骤 3", subtitle: "选择内容库" },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="flex justify-between relative">
|
||||
{steps.map((step, index) => (
|
||||
<div key={step.number} className="flex flex-col items-center relative z-10">
|
||||
<div
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center text-sm
|
||||
${currentStep >= step.number ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-400"}`}
|
||||
>
|
||||
{step.number}
|
||||
</div>
|
||||
<div className={`text-xs mt-2 ${currentStep >= step.number ? "text-blue-600" : "text-gray-400"}`}>
|
||||
{step.title}
|
||||
</div>
|
||||
<div className={`text-xs ${currentStep >= step.number ? "text-gray-600" : "text-gray-400"}`}>
|
||||
{step.subtitle}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="absolute top-4 left-0 right-0 h-[1px] bg-gray-200 -z-10">
|
||||
<div
|
||||
className="h-full bg-blue-600 transition-all duration-300"
|
||||
style={{ width: `${((currentStep - 1) / (steps.length - 1)) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
100
app/workspace/moments-sync/[id]/edit/steps/basic-settings.tsx
Normal file
100
app/workspace/moments-sync/[id]/edit/steps/basic-settings.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
"use client"
|
||||
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Plus, Minus } from "lucide-react"
|
||||
|
||||
interface BasicSettingsProps {
|
||||
formData: {
|
||||
taskName: string
|
||||
startTime: string
|
||||
endTime: string
|
||||
syncCount: number
|
||||
accountType: string
|
||||
enabled: boolean
|
||||
}
|
||||
onChange: (data: Partial<BasicSettingsProps["formData"]>) => void
|
||||
onNext: () => void
|
||||
}
|
||||
|
||||
export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<div className="text-sm mb-2">任务名称</div>
|
||||
<Input
|
||||
value={formData.taskName}
|
||||
onChange={(e) => onChange({ taskName: e.target.value })}
|
||||
placeholder="请输入任务名称"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm mb-2">允许发布时间段</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.startTime}
|
||||
onChange={(e) => onChange({ startTime: e.target.value })}
|
||||
className="w-32"
|
||||
/>
|
||||
<span className="text-gray-500">至</span>
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.endTime}
|
||||
onChange={(e) => onChange({ endTime: e.target.value })}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm mb-2">每日同步数量</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => onChange({ syncCount: Math.max(1, formData.syncCount - 1) })}
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="w-8 text-center">{formData.syncCount}</span>
|
||||
<Button variant="outline" size="icon" onClick={() => onChange({ syncCount: formData.syncCount + 1 })}>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-gray-500">条朋友圈</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm mb-2">账号类型</div>
|
||||
<div className="flex space-x-4">
|
||||
<Button
|
||||
variant={formData.accountType === "business" ? "default" : "outline"}
|
||||
onClick={() => onChange({ accountType: "business" })}
|
||||
className="flex-1"
|
||||
>
|
||||
业务号
|
||||
</Button>
|
||||
<Button
|
||||
variant={formData.accountType === "personal" ? "default" : "outline"}
|
||||
onClick={() => onChange({ accountType: "personal" })}
|
||||
className="flex-1"
|
||||
>
|
||||
人设号
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm">是否启用</span>
|
||||
<Switch checked={formData.enabled} onCheckedChange={(checked) => onChange({ enabled: checked })} />
|
||||
</div>
|
||||
|
||||
<Button onClick={onNext} className="w-full mt-8">
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Search } from "lucide-react"
|
||||
|
||||
interface ContentLibrarySelectionProps {
|
||||
selectedLibraries: string[]
|
||||
onChange: (libraries: string[]) => void
|
||||
onComplete: () => void
|
||||
onPrev: () => void
|
||||
}
|
||||
|
||||
export function ContentLibrarySelection({
|
||||
selectedLibraries,
|
||||
onChange,
|
||||
onComplete,
|
||||
onPrev,
|
||||
}: ContentLibrarySelectionProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input placeholder="选择内容库" className="pl-9" />
|
||||
</div>
|
||||
|
||||
<div className="min-h-[300px] flex items-center justify-center text-gray-400">选择内容库组件将在这里实现</div>
|
||||
|
||||
<div className="flex space-x-3 mt-8">
|
||||
<Button variant="outline" onClick={onPrev} className="flex-1">
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={onComplete} className="flex-1">
|
||||
完成
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Search } from "lucide-react"
|
||||
|
||||
interface DeviceSelectionProps {
|
||||
selectedDevices: string[]
|
||||
onChange: (devices: string[]) => void
|
||||
onNext: () => void
|
||||
onPrev: () => void
|
||||
}
|
||||
|
||||
export function DeviceSelection({ selectedDevices, onChange, onNext, onPrev }: DeviceSelectionProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input placeholder="选择设备" className="pl-9" />
|
||||
</div>
|
||||
|
||||
<div className="min-h-[300px] flex items-center justify-center text-gray-400">选择设备组件将在这里实现</div>
|
||||
|
||||
<div className="flex space-x-3 mt-8">
|
||||
<Button variant="outline" onClick={onPrev} className="flex-1">
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={onNext} className="flex-1">
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
107
app/workspace/moments-sync/[id]/page.tsx
Normal file
107
app/workspace/moments-sync/[id]/page.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { ChevronLeft } from "lucide-react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
|
||||
interface SyncTask {
|
||||
id: string
|
||||
name: string
|
||||
status: "running" | "paused"
|
||||
deviceCount: number
|
||||
contentLib: string
|
||||
syncCount: number
|
||||
lastSyncTime: string
|
||||
createTime: string
|
||||
creator: string
|
||||
}
|
||||
|
||||
export default function ViewMomentsSyncTask({ params }: { params: { id: string } }) {
|
||||
const router = useRouter()
|
||||
const [task, setTask] = useState<SyncTask | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
// Fetch task data from API
|
||||
// For now, we'll use mock data
|
||||
setTask({
|
||||
id: params.id,
|
||||
name: "同步卡若主号",
|
||||
deviceCount: 2,
|
||||
contentLib: "卡若朋友圈",
|
||||
syncCount: 307,
|
||||
lastSyncTime: "2025-02-06 13:12:35",
|
||||
createTime: "2024-11-20 19:04:14",
|
||||
creator: "karuo",
|
||||
status: "running",
|
||||
})
|
||||
}, [params.id])
|
||||
|
||||
const toggleTaskStatus = () => {
|
||||
if (task) {
|
||||
setTask({ ...task, status: task.status === "running" ? "paused" : "running" })
|
||||
}
|
||||
}
|
||||
|
||||
if (!task) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 bg-gray-50 min-h-screen">
|
||||
<header className="sticky top-0 z-10 bg-white border-b">
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button variant="ghost" size="icon" onClick={() => router.back()}>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<h1 className="text-lg font-medium">查看朋友圈同步任务</h1>
|
||||
</div>
|
||||
<Button onClick={() => router.push(`/workspace/moments-sync/${task.id}/edit`)}>编辑任务</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="p-4">
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center space-x-2">
|
||||
<h2 className="text-2xl font-bold">{task.name}</h2>
|
||||
<Badge variant={task.status === "running" ? "success" : "secondary"}>
|
||||
{task.status === "running" ? "进行中" : "已暂停"}
|
||||
</Badge>
|
||||
</div>
|
||||
<Switch checked={task.status === "running"} onCheckedChange={toggleTaskStatus} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6 mb-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">任务详情</h3>
|
||||
<div className="space-y-2">
|
||||
<p>推送设备：{task.deviceCount} 个</p>
|
||||
<p>内容库：{task.contentLib}</p>
|
||||
<p>已同步：{task.syncCount} 条</p>
|
||||
<p>创建人：{task.creator}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">时间信息</h3>
|
||||
<div className="space-y-2">
|
||||
<p>创建时间：{task.createTime}</p>
|
||||
<p>上次同步：{task.lastSyncTime}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t pt-4">
|
||||
<h3 className="text-lg font-semibold mb-2">同步内容预览</h3>
|
||||
{/* Add content preview here */}
|
||||
<p className="text-gray-500">暂无内容预览</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
129
app/workspace/moments-sync/[id]/view/page.tsx
Normal file
129
app/workspace/moments-sync/[id]/view/page.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { ChevronLeft, Edit2, RefreshCw } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
|
||||
interface MomentContent {
|
||||
id: string
|
||||
type: string
|
||||
content: string
|
||||
images: string[]
|
||||
publishTime: string
|
||||
pushTime: string
|
||||
status: "已发送" | "待发送" | "已终止"
|
||||
}
|
||||
|
||||
const mockData: MomentContent[] = [
|
||||
{
|
||||
id: "399401",
|
||||
type: "图文",
|
||||
content: "一定要把安全意识这件事情，刻在DNA里......",
|
||||
images: [
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Z8LxL98X5Bwm5Jr5ke3755Qd97PSYC.png",
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Z8LxL98X5Bwm5Jr5ke3755Qd97PSYC.png",
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Z8LxL98X5Bwm5Jr5ke3755Qd97PSYC.png",
|
||||
],
|
||||
publishTime: "2025-02-15 23:37:49",
|
||||
pushTime: "2025-02-16 08:50:36",
|
||||
status: "已发送",
|
||||
},
|
||||
]
|
||||
|
||||
export default function MomentsSyncViewPage() {
|
||||
const [syncName] = useState("同步卡若主号")
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<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={() => window.history.back()}>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<h1 className="ml-2 text-lg font-medium">{syncName}</h1>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button variant="outline" size="sm">
|
||||
<Edit2 className="h-4 w-4 mr-2" />
|
||||
编辑
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="p-4 max-w-7xl mx-auto space-y-6">
|
||||
<Card className="p-6">
|
||||
<h2 className="text-lg font-medium mb-4">基本信息</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center">
|
||||
<span className="text-gray-500 w-32">朋友圈同步名称：</span>
|
||||
<span>{syncName}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<h2 className="text-lg font-medium mb-4">推送日志</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-[100px]">ID</TableHead>
|
||||
<TableHead>内容类型</TableHead>
|
||||
<TableHead>内容</TableHead>
|
||||
<TableHead>图片</TableHead>
|
||||
<TableHead>推送时间</TableHead>
|
||||
<TableHead>内容发布时间</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{mockData.map((item) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>{item.id}</TableCell>
|
||||
<TableCell>{item.type}</TableCell>
|
||||
<TableCell className="max-w-[300px] truncate">{item.content}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex space-x-2">
|
||||
{item.images.map((img, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={img || "/placeholder.svg"}
|
||||
alt={`Content ${index + 1}`}
|
||||
className="w-16 h-16 object-cover rounded"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{item.pushTime}</TableCell>
|
||||
<TableCell>{item.publishTime}</TableCell>
|
||||
<TableCell>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs ${
|
||||
item.status === "已发送"
|
||||
? "bg-green-100 text-green-800"
|
||||
: item.status === "待发送"
|
||||
? "bg-blue-100 text-blue-800"
|
||||
: "bg-red-100 text-red-800"
|
||||
}`}
|
||||
>
|
||||
{item.status}
|
||||
</span>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
159
app/workspace/moments-sync/components/basic-settings.tsx
Normal file
159
app/workspace/moments-sync/components/basic-settings.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
"use client"
|
||||
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Plus, Minus, Clock, HelpCircle } from "lucide-react"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||
|
||||
interface BasicSettingsProps {
|
||||
formData: {
|
||||
taskName: string
|
||||
startTime: string
|
||||
endTime: string
|
||||
syncCount: number
|
||||
accountType: "business" | "personal"
|
||||
enabled: boolean
|
||||
}
|
||||
onChange: (data: Partial<BasicSettingsProps["formData"]>) => void
|
||||
onNext: () => void
|
||||
}
|
||||
|
||||
export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
|
||||
return (
|
||||
<div className="space-y-8 px-6">
|
||||
<div>
|
||||
<div className="text-base font-medium mb-2">任务名称</div>
|
||||
<Input
|
||||
value={formData.taskName}
|
||||
onChange={(e) => onChange({ taskName: e.target.value })}
|
||||
placeholder="请输入任务名称"
|
||||
className="h-12 border-0 border-b border-gray-200 rounded-none focus-visible:ring-0 focus-visible:border-blue-600 px-0 text-base"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-base font-medium mb-2">允许发布时间段</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="relative flex-1">
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.startTime}
|
||||
onChange={(e) => onChange({ startTime: e.target.value })}
|
||||
className="h-12 pl-10 rounded-xl border-gray-200 text-base"
|
||||
/>
|
||||
<Clock className="absolute left-3 top-4 h-4 w-4 text-gray-400" />
|
||||
</div>
|
||||
<span className="text-gray-500">至</span>
|
||||
<div className="relative flex-1">
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.endTime}
|
||||
onChange={(e) => onChange({ endTime: e.target.value })}
|
||||
className="h-12 pl-10 rounded-xl border-gray-200 text-base"
|
||||
/>
|
||||
<Clock className="absolute left-3 top-4 h-4 w-4 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-base font-medium mb-2">每日同步数量</div>
|
||||
<div className="flex items-center space-x-5">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
onClick={() => onChange({ syncCount: Math.max(1, formData.syncCount - 1) })}
|
||||
className="h-12 w-12 rounded-xl"
|
||||
>
|
||||
<Minus className="h-5 w-5" />
|
||||
</Button>
|
||||
<span className="w-8 text-center text-lg font-medium">{formData.syncCount}</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
onClick={() => onChange({ syncCount: formData.syncCount + 1 })}
|
||||
className="h-12 w-12 rounded-xl"
|
||||
>
|
||||
<Plus className="h-5 w-5" />
|
||||
</Button>
|
||||
<span className="text-gray-500">条朋友圈</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-base font-medium mb-2">账号类型</div>
|
||||
<div className="flex space-x-4">
|
||||
<div className="flex-1 relative">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => onChange({ accountType: "business" })}
|
||||
className={`w-full h-12 justify-between rounded-lg ${
|
||||
formData.accountType === "business"
|
||||
? "bg-blue-600 hover:bg-blue-600 text-white"
|
||||
: "bg-white hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
业务号
|
||||
<HelpCircle
|
||||
className={`h-4 w-4 ${formData.accountType === "business" ? "text-white/70" : "text-gray-400"}`}
|
||||
/>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="max-w-[300px]">
|
||||
<p>
|
||||
业务号能够循环推送内容库中的内容。当内容库所有内容循环推送完毕后，若有新内容则优先推送新内容，若无新内容则继续循环推送。
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<div className="flex-1 relative">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => onChange({ accountType: "personal" })}
|
||||
className={`w-full h-12 justify-between rounded-lg ${
|
||||
formData.accountType === "personal"
|
||||
? "bg-blue-600 hover:bg-blue-600 text-white"
|
||||
: "bg-white hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
人设号
|
||||
<HelpCircle
|
||||
className={`h-4 w-4 ${formData.accountType === "personal" ? "text-white/70" : "text-gray-400"}`}
|
||||
/>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>用于实时更新同步，有新动态时进行同步，无动态则不同步。</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<span className="text-base font-medium">是否启用</span>
|
||||
<Switch
|
||||
checked={formData.enabled}
|
||||
onCheckedChange={(checked) => onChange({ enabled: checked })}
|
||||
className="data-[state=checked]:bg-blue-600 h-7 w-12"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={onNext}
|
||||
className="w-full h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base font-medium shadow-sm"
|
||||
>
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
102
app/workspace/moments-sync/components/content-viewer.tsx
Normal file
102
app/workspace/moments-sync/components/content-viewer.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Search, Filter, RefreshCw } from "lucide-react"
|
||||
import type { ContentItem } from "@/types/content"
|
||||
|
||||
interface ContentViewerProps {
|
||||
tagId: string
|
||||
}
|
||||
|
||||
export function ContentViewer({ tagId }: ContentViewerProps) {
|
||||
const [contents, setContents] = useState<ContentItem[]>([
|
||||
{
|
||||
id: "399401",
|
||||
title: "一<><E4B880><EFBFBD>理想安全驾这件事情，刻在DNA里...",
|
||||
type: "text",
|
||||
content: "一在理想安全驾这件事情，刻在DNA里...",
|
||||
images: [
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02jo_5c61b35b-a919-4520-b653-a5910dea594g.jpg-83VfgjQ3qC7mwDhby6rsZeRwVM6maz.jpeg",
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02jo_5c61b35b-a919-4520-b653-a5910dea594g.jpg-83VfgjQ3qC7mwDhby6rsZeRwVM6maz.jpeg",
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02jo_5c61b35b-a919-4520-b653-a5910dea594g.jpg-83VfgjQ3qC7mwDhby6rsZeRwVM6maz.jpeg",
|
||||
],
|
||||
createTime: "2025-02-16 08:50:36",
|
||||
publishTime: "2025-02-15 23:37:49",
|
||||
status: "published",
|
||||
},
|
||||
])
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<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" />
|
||||
</div>
|
||||
<Button variant="outline" size="icon">
|
||||
<Filter className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="icon">
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>内容类型</TableHead>
|
||||
<TableHead>内容</TableHead>
|
||||
<TableHead>图片</TableHead>
|
||||
<TableHead>视频</TableHead>
|
||||
<TableHead>推送时间</TableHead>
|
||||
<TableHead>内容发布时间</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{contents.map((content) => (
|
||||
<TableRow key={content.id}>
|
||||
<TableCell>{content.id}</TableCell>
|
||||
<TableCell>{content.type === "text" ? "图文" : content.type}</TableCell>
|
||||
<TableCell className="max-w-[200px] truncate">{content.content}</TableCell>
|
||||
<TableCell>
|
||||
{content.images && (
|
||||
<div className="flex space-x-1">
|
||||
{content.images.map((img, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={img || "/placeholder.svg"}
|
||||
alt={`图片 ${index + 1}`}
|
||||
className="w-10 h-10 object-cover rounded"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>{content.video ? "有" : "-"}</TableCell>
|
||||
<TableCell>{content.createTime}</TableCell>
|
||||
<TableCell>{content.publishTime}</TableCell>
|
||||
<TableCell>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs ${
|
||||
content.status === "published"
|
||||
? "bg-green-100 text-green-800"
|
||||
: content.status === "failed"
|
||||
? "bg-red-100 text-red-800"
|
||||
: "bg-yellow-100 text-yellow-800"
|
||||
}`}
|
||||
>
|
||||
{content.status === "published" ? "已发布" : content.status === "failed" ? "失败" : "待发布"}
|
||||
</span>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
"use client"
|
||||
|
||||
import { useState } 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 } from "lucide-react"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||
|
||||
interface Device {
|
||||
id: string
|
||||
name: string
|
||||
imei: string
|
||||
wxid: string
|
||||
status: "online" | "offline"
|
||||
usedInPlans: number
|
||||
}
|
||||
|
||||
interface DeviceSelectionDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
selectedDevices: string[]
|
||||
onSelect: (devices: string[]) => void
|
||||
}
|
||||
|
||||
export function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onSelect }: DeviceSelectionDialogProps) {
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [statusFilter, setStatusFilter] = useState("all")
|
||||
|
||||
// 模拟设备数据
|
||||
const devices: Device[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "设备 1",
|
||||
imei: "IMEI-radz6ewal",
|
||||
wxid: "wxid_98179ujy",
|
||||
status: "offline",
|
||||
usedInPlans: 0,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "设备 2",
|
||||
imei: "IMEI-i6iszi6d",
|
||||
wxid: "wxid_viqnaic8",
|
||||
status: "online",
|
||||
usedInPlans: 2,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "设备 3",
|
||||
imei: "IMEI-01z2izj97",
|
||||
wxid: "wxid_9sb23gxr",
|
||||
status: "online",
|
||||
usedInPlans: 2,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "设备 4",
|
||||
imei: "IMEI-x6o9rpcr0",
|
||||
wxid: "wxid_k0gxzbit",
|
||||
status: "online",
|
||||
usedInPlans: 1,
|
||||
},
|
||||
]
|
||||
|
||||
const filteredDevices = devices.filter((device) => {
|
||||
const matchesSearch =
|
||||
device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
device.wxid.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
|
||||
const matchesStatus =
|
||||
statusFilter === "all" ||
|
||||
(statusFilter === "online" && device.status === "online") ||
|
||||
(statusFilter === "offline" && device.status === "offline")
|
||||
|
||||
return matchesSearch && matchesStatus
|
||||
})
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>选择设备</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex items-center space-x-4 my-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder="搜索设备IMEI/备注/微信号"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue placeholder="全部状态" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部状态</SelectItem>
|
||||
<SelectItem value="online">在线</SelectItem>
|
||||
<SelectItem value="offline">离线</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button variant="outline" size="icon">
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="flex-1 -mx-6 px-6">
|
||||
<RadioGroup value={selectedDevices[0]} onValueChange={(value) => onSelect([value])}>
|
||||
{filteredDevices.map((device) => (
|
||||
<label
|
||||
key={device.id}
|
||||
className="flex items-start space-x-3 p-4 rounded-lg hover:bg-gray-50 cursor-pointer"
|
||||
>
|
||||
<RadioGroupItem value={device.id} id={device.id} className="mt-1" />
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-medium">{device.name}</span>
|
||||
<Badge variant={device.status === "online" ? "success" : "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.usedInPlans > 0 && (
|
||||
<div className="text-sm text-orange-500 mt-1">已用于 {device.usedInPlans} 个计划</div>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</ScrollArea>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
51
app/workspace/moments-sync/components/step-indicator.tsx
Normal file
51
app/workspace/moments-sync/components/step-indicator.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
"use client"
|
||||
|
||||
interface Step {
|
||||
id: number
|
||||
title: string
|
||||
subtitle: string
|
||||
}
|
||||
|
||||
interface StepIndicatorProps {
|
||||
currentStep: number
|
||||
steps?: Step[]
|
||||
}
|
||||
|
||||
export function StepIndicator({
|
||||
currentStep,
|
||||
steps = [
|
||||
{ id: 1, title: "步骤 1", subtitle: "基础设置" },
|
||||
{ id: 2, title: "步骤 2", subtitle: "设备选择" },
|
||||
{ id: 3, title: "步骤 3", subtitle: "选择内容库" },
|
||||
],
|
||||
}: StepIndicatorProps) {
|
||||
return (
|
||||
<div className="relative flex justify-between px-6">
|
||||
{steps.map((step) => (
|
||||
<div
|
||||
key={step.id}
|
||||
className={`flex flex-col items-center relative z-10 transition-colors ${
|
||||
currentStep >= step.id ? "text-blue-600" : "text-gray-400"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center transition-all ${
|
||||
currentStep >= step.id
|
||||
? "bg-blue-600 text-white shadow-sm"
|
||||
: "bg-white border border-gray-200 text-gray-400"
|
||||
}`}
|
||||
>
|
||||
{step.id}
|
||||
</div>
|
||||
<div className="text-xs mt-2 font-medium">{step.subtitle}</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="absolute top-4 left-0 right-0 h-[1px] bg-gray-100 -z-10">
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-blue-600 transition-all duration-300"
|
||||
style={{ width: `${((currentStep - 1) / (steps.length - 1)) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
155
app/workspace/moments-sync/components/tag-editor.tsx
Normal file
155
app/workspace/moments-sync/components/tag-editor.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
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 { Switch } from "@/components/ui/switch"
|
||||
import { toast } from "@/components/ui/use-toast"
|
||||
import type { Tag } from "@/types/content"
|
||||
|
||||
interface TagEditorProps {
|
||||
tagId?: string
|
||||
initialData?: Tag
|
||||
}
|
||||
|
||||
export function TagEditor({ tagId, initialData }: TagEditorProps) {
|
||||
const router = useRouter()
|
||||
const [formData, setFormData] = useState<Partial<Tag["settings"]>>({
|
||||
syncInterval: 1,
|
||||
timeRange: {
|
||||
start: "06:00",
|
||||
end: "23:59",
|
||||
},
|
||||
dailyLimit: 5,
|
||||
accountType: "business",
|
||||
enabled: true,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (initialData) {
|
||||
setFormData(initialData.settings)
|
||||
}
|
||||
}, [initialData])
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
// Here you would typically save the changes to your backend
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
toast({
|
||||
title: tagId ? "标签已更新" : "标签已创建",
|
||||
description: "设置已成功保存",
|
||||
})
|
||||
router.back()
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "保存失败",
|
||||
description: "无法保存标签设置",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<Label htmlFor="taskName">任务名称</Label>
|
||||
<Input
|
||||
id="taskName"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="请输入任务名称"
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>允许发布时间段</Label>
|
||||
<div className="flex items-center space-x-2 mt-2">
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.timeRange?.start}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
timeRange: { ...formData.timeRange, start: e.target.value },
|
||||
})
|
||||
}
|
||||
className="w-32"
|
||||
/>
|
||||
<span>至</span>
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.timeRange?.end}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
timeRange: { ...formData.timeRange, end: e.target.value },
|
||||
})
|
||||
}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>每日同步数量</Label>
|
||||
<div className="flex items-center space-x-4 mt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setFormData({ ...formData, dailyLimit: Math.max(1, (formData.dailyLimit || 1) - 1) })}
|
||||
>
|
||||
-
|
||||
</Button>
|
||||
<span className="w-12 text-center">{formData.dailyLimit}</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setFormData({ ...formData, dailyLimit: (formData.dailyLimit || 0) + 1 })}
|
||||
>
|
||||
+
|
||||
</Button>
|
||||
<span className="text-gray-500">条朋友圈</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>账号类型</Label>
|
||||
<div className="flex space-x-4 mt-2">
|
||||
<Button
|
||||
variant={formData.accountType === "business" ? "default" : "outline"}
|
||||
onClick={() => setFormData({ ...formData, accountType: "business" })}
|
||||
className="w-24"
|
||||
>
|
||||
业务号
|
||||
</Button>
|
||||
<Button
|
||||
variant={formData.accountType === "personal" ? "default" : "outline"}
|
||||
onClick={() => setFormData({ ...formData, accountType: "personal" })}
|
||||
className="w-24"
|
||||
>
|
||||
人设号
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>是否启用</Label>
|
||||
<Switch
|
||||
checked={formData.enabled}
|
||||
onCheckedChange={(checked) => setFormData({ ...formData, enabled: checked })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button variant="outline" onClick={() => router.back()}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleSave}>保存</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
37
app/workspace/moments-sync/loading.tsx
Normal file
37
app/workspace/moments-sync/loading.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card"
|
||||
|
||||
export default function MomentsSyncLoading() {
|
||||
return (
|
||||
<div className="container mx-auto py-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Skeleton className="h-10 w-[250px]" />
|
||||
<Skeleton className="h-10 w-[120px]" />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{Array(6)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<Card key={i} className="overflow-hidden">
|
||||
<CardHeader className="p-0">
|
||||
<Skeleton className="h-48 w-full" />
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 space-y-3">
|
||||
<Skeleton className="h-5 w-4/5" />
|
||||
<Skeleton className="h-4 w-3/5" />
|
||||
<div className="flex justify-between items-center pt-2">
|
||||
<Skeleton className="h-4 w-[100px]" />
|
||||
<Skeleton className="h-8 w-[80px]" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<Skeleton className="h-10 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
148
app/workspace/moments-sync/new/page.tsx
Normal file
148
app/workspace/moments-sync/new/page.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { ChevronLeft, Search } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { StepIndicator } from "../components/step-indicator"
|
||||
import { BasicSettings } from "../components/basic-settings"
|
||||
import { DeviceSelectionDialog } from "../components/device-selection-dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { toast } from "@/components/ui/use-toast"
|
||||
|
||||
export default function NewMomentsSyncPage() {
|
||||
const router = useRouter()
|
||||
const [currentStep, setCurrentStep] = useState(1)
|
||||
const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
|
||||
const [formData, setFormData] = useState({
|
||||
taskName: "",
|
||||
startTime: "06:00",
|
||||
endTime: "23:59",
|
||||
syncCount: 5,
|
||||
accountType: "business" as const,
|
||||
enabled: true,
|
||||
selectedDevices: [] as string[],
|
||||
selectedLibraries: [] as string[],
|
||||
})
|
||||
|
||||
const handleUpdateFormData = (data: Partial<typeof formData>) => {
|
||||
setFormData((prev) => ({ ...prev, ...data }))
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
setCurrentStep((prev) => Math.min(prev + 1, 3))
|
||||
}
|
||||
|
||||
const handlePrev = () => {
|
||||
setCurrentStep((prev) => Math.max(prev - 1, 1))
|
||||
}
|
||||
|
||||
const handleComplete = async () => {
|
||||
console.log("Form submitted:", formData)
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
toast({
|
||||
title: "创建成<E5BBBA><E68890><EFBFBD>",
|
||||
description: "朋友圈同步任务已创建并开始执行",
|
||||
})
|
||||
router.push("/workspace/moments-sync")
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#F8F9FA] pb-20">
|
||||
<header className="sticky top-0 z-10 bg-white">
|
||||
<div className="flex items-center h-14 px-4">
|
||||
<Button variant="ghost" size="icon" onClick={() => router.back()} className="hover:bg-gray-50">
|
||||
<ChevronLeft className="h-6 w-6" />
|
||||
</Button>
|
||||
<h1 className="ml-2 text-lg font-medium">新建朋友圈同步</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="mt-8">
|
||||
<StepIndicator currentStep={currentStep} />
|
||||
|
||||
<div className="mt-8">
|
||||
{currentStep === 1 && (
|
||||
<BasicSettings formData={formData} onChange={handleUpdateFormData} onNext={handleNext} />
|
||||
)}
|
||||
|
||||
{currentStep === 2 && (
|
||||
<div className="space-y-6 px-6">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
|
||||
<Input
|
||||
placeholder="选择设备"
|
||||
className="h-12 pl-11 rounded-xl border-gray-200 text-base"
|
||||
onClick={() => setDeviceDialogOpen(true)}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
|
||||
{formData.selectedDevices.length > 0 && (
|
||||
<div className="text-base text-gray-500">已选设备：{formData.selectedDevices.length} 个</div>
|
||||
)}
|
||||
|
||||
<div className="flex space-x-4 pt-4">
|
||||
<Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
|
||||
上一步
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleNext}
|
||||
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
|
||||
>
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<DeviceSelectionDialog
|
||||
open={deviceDialogOpen}
|
||||
onOpenChange={setDeviceDialogOpen}
|
||||
selectedDevices={formData.selectedDevices}
|
||||
onSelect={(devices) => {
|
||||
handleUpdateFormData({ selectedDevices: devices })
|
||||
setDeviceDialogOpen(false)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentStep === 3 && (
|
||||
<div className="space-y-6 px-6">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
|
||||
<Input placeholder="选择内容库" className="h-12 pl-11 rounded-xl border-gray-200 text-base" />
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-4 pt-4">
|
||||
<Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
|
||||
上一步
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleComplete}
|
||||
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
|
||||
>
|
||||
完成
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="fixed bottom-0 left-0 right-0 h-16 bg-white border-t flex items-center justify-around px-6">
|
||||
<button className="flex flex-col items-center text-blue-600">
|
||||
<span className="text-sm mt-1">首页</span>
|
||||
</button>
|
||||
<button className="flex flex-col items-center text-gray-400">
|
||||
<span className="text-sm mt-1">场景获客</span>
|
||||
</button>
|
||||
<button className="flex flex-col items-center text-gray-400">
|
||||
<span className="text-sm mt-1">工作台</span>
|
||||
</button>
|
||||
<button className="flex flex-col items-center text-gray-400">
|
||||
<span className="text-sm mt-1">我的</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
137
app/workspace/moments-sync/new/steps/BasicSettings.tsx
Normal file
137
app/workspace/moments-sync/new/steps/BasicSettings.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
"use client"
|
||||
|
||||
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 { Switch } from "@/components/ui/switch"
|
||||
import { Minus, Plus, HelpCircle } from "lucide-react"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||
|
||||
interface BasicSettingsProps {
|
||||
formData: any
|
||||
onChange: (data: any) => void
|
||||
onNext: () => void
|
||||
}
|
||||
|
||||
export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<Label htmlFor="taskName" className="required">
|
||||
任务名称
|
||||
</Label>
|
||||
<Input
|
||||
id="taskName"
|
||||
value={formData.taskName}
|
||||
onChange={(e) => onChange({ ...formData, taskName: e.target.value })}
|
||||
placeholder="请输入任务名称"
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>允许发布的时间段</Label>
|
||||
<div className="flex items-center space-x-2 mt-2">
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.startTime}
|
||||
onChange={(e) => onChange({ ...formData, startTime: e.target.value })}
|
||||
className="w-32"
|
||||
/>
|
||||
<span>至</span>
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.endTime}
|
||||
onChange={(e) => onChange({ ...formData, endTime: e.target.value })}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>每日同步数量</Label>
|
||||
<div className="flex items-center space-x-4 mt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => onChange({ ...formData, syncCount: Math.max(1, formData.syncCount - 1) })}
|
||||
aria-label="减少同步数量"
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="w-12 text-center">{formData.syncCount}</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => onChange({ ...formData, syncCount: formData.syncCount + 1 })}
|
||||
aria-label="增加同步数量"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-gray-500">条朋友圈</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>账号类型</Label>
|
||||
<div className="flex space-x-4 mt-2">
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
variant={formData.accountType === "business" ? "default" : "outline"}
|
||||
onClick={() => onChange({ ...formData, accountType: "business" })}
|
||||
className="w-24"
|
||||
>
|
||||
业务号
|
||||
</Button>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<HelpCircle className="h-4 w-4 ml-2 text-gray-400" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
业务号能够循环推送内容库中的内容。当内容库所有内容循环推送完毕后，若有新内容则优先推送新内容，若无新内容则继续循环推送。
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
variant={formData.accountType === "personal" ? "default" : "outline"}
|
||||
onClick={() => onChange({ ...formData, accountType: "personal" })}
|
||||
className="w-24"
|
||||
>
|
||||
人设号
|
||||
</Button>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<HelpCircle className="h-4 w-4 ml-2 text-gray-400" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>人设号用于实时更新同步，有新动态时进行同步，无新动态则不同步。</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>是否启用</Label>
|
||||
<Switch
|
||||
checked={formData.enabled}
|
||||
onCheckedChange={(checked) => onChange({ ...formData, enabled: checked })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button className="w-full" onClick={onNext}>
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
279
app/workspace/moments-sync/new/steps/ContentSelector.tsx
Normal file
279
app/workspace/moments-sync/new/steps/ContentSelector.tsx
Normal file
@@ -0,0 +1,279 @@
|
||||
"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 { Search, RefreshCw } from "lucide-react"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { toast } from "@/components/ui/use-toast"
|
||||
|
||||
// 定义类型，避免导入错误
|
||||
interface ContentLibrary {
|
||||
id: string
|
||||
name: string
|
||||
source: string
|
||||
creator: string
|
||||
contentCount: number
|
||||
lastUpdated: string
|
||||
type: string
|
||||
status: string
|
||||
}
|
||||
|
||||
interface ContentLibraryResponse {
|
||||
code: number
|
||||
message: string
|
||||
data: {
|
||||
libraries: ContentLibrary[]
|
||||
total: number
|
||||
}
|
||||
}
|
||||
|
||||
interface ContentLibrarySelectResponse {
|
||||
code: number
|
||||
message: string
|
||||
data: {
|
||||
success: boolean
|
||||
libraryId: string
|
||||
name: string
|
||||
}
|
||||
}
|
||||
|
||||
interface ContentSelectorProps {
|
||||
formData: any
|
||||
onChange: (data: any) => void
|
||||
onNext: () => void
|
||||
onPrev: () => void
|
||||
}
|
||||
|
||||
export function ContentSelector({ formData, onChange, onNext, onPrev }: ContentSelectorProps) {
|
||||
const [libraries, setLibraries] = useState<ContentLibrary[]>([])
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState("all")
|
||||
|
||||
useEffect(() => {
|
||||
fetchContentLibraries()
|
||||
}, [])
|
||||
|
||||
const fetchContentLibraries = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
// 实际项目中这里应该调用API获取所有内容库
|
||||
const response: ContentLibraryResponse = {
|
||||
code: 0,
|
||||
message: "success",
|
||||
data: {
|
||||
libraries: [
|
||||
{
|
||||
id: "1",
|
||||
name: "微信好友广告",
|
||||
source: "微信",
|
||||
creator: "海尼",
|
||||
contentCount: 12,
|
||||
lastUpdated: "2024-02-09 12:30",
|
||||
type: "moments",
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "开发群",
|
||||
source: "微信",
|
||||
creator: "karuo",
|
||||
contentCount: 8,
|
||||
lastUpdated: "2024-02-09 12:30",
|
||||
type: "group",
|
||||
status: "inactive",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "产品更新",
|
||||
source: "微信",
|
||||
creator: "张三",
|
||||
contentCount: 15,
|
||||
lastUpdated: "2024-02-10 09:45",
|
||||
type: "moments",
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "市场活动",
|
||||
source: "微信",
|
||||
creator: "李四",
|
||||
contentCount: 20,
|
||||
lastUpdated: "2024-02-11 14:20",
|
||||
type: "moments",
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "技术交流",
|
||||
source: "微信",
|
||||
creator: "王五",
|
||||
contentCount: 10,
|
||||
lastUpdated: "2024-02-12 16:35",
|
||||
type: "group",
|
||||
status: "active",
|
||||
},
|
||||
],
|
||||
total: 5,
|
||||
},
|
||||
}
|
||||
|
||||
if (response.code === 0) {
|
||||
setLibraries(response.data.libraries)
|
||||
} else {
|
||||
throw new Error(response.message)
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "获取失败",
|
||||
description: "无法获取内容库列表",
|
||||
variant: "destructive",
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRefresh = () => {
|
||||
fetchContentLibraries()
|
||||
toast({
|
||||
title: "刷新成功",
|
||||
description: "内容库列表已更新",
|
||||
})
|
||||
}
|
||||
|
||||
const filteredLibraries = libraries.filter((library) => {
|
||||
const matchesTab =
|
||||
activeTab === "all" ||
|
||||
(activeTab === "friends" && library.type === "moments") ||
|
||||
(activeTab === "groups" && library.type === "group")
|
||||
const matchesSearch = library.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
return matchesTab && matchesSearch
|
||||
})
|
||||
|
||||
const handleSelectLibrary = async (library: ContentLibrary) => {
|
||||
try {
|
||||
// 实际项目中这里应该调用API
|
||||
const response: ContentLibrarySelectResponse = {
|
||||
code: 0,
|
||||
message: "success",
|
||||
data: {
|
||||
success: true,
|
||||
libraryId: library.id,
|
||||
name: library.name,
|
||||
},
|
||||
}
|
||||
|
||||
if (response.code === 0 && response.data.success) {
|
||||
onChange({
|
||||
...formData,
|
||||
selectedLibrary: library.id,
|
||||
contentFormat: library.type,
|
||||
})
|
||||
toast({
|
||||
title: "选择成功",
|
||||
description: `已选择内容库：${library.name}`,
|
||||
})
|
||||
} else {
|
||||
throw new Error(response.message)
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "选择失败",
|
||||
description: "无法选择内容库",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleFinish = async () => {
|
||||
try {
|
||||
// 实际项目中这里应该调用API创建计划
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
toast({
|
||||
title: "创建成功",
|
||||
description: "新计划已创建",
|
||||
})
|
||||
onNext()
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "创建失败",
|
||||
description: "无法创建新计划",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder="搜索内容库名称..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
|
||||
<RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="all" onValueChange={setActiveTab}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="all">全部</TabsTrigger>
|
||||
<TabsTrigger value="friends">微信好友</TabsTrigger>
|
||||
<TabsTrigger value="groups">聊天群</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
<div className="space-y-2">
|
||||
{filteredLibraries.map((library) => (
|
||||
<div
|
||||
key={library.id}
|
||||
className={`flex items-center space-x-3 p-3 rounded-lg cursor-pointer border transition-colors ${
|
||||
formData.selectedLibrary === library.id
|
||||
? "border-blue-500 bg-blue-50"
|
||||
: "border-gray-200 hover:border-blue-500"
|
||||
}`}
|
||||
onClick={() => handleSelectLibrary(library)}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{library.name}</div>
|
||||
<div className="text-sm text-gray-500 mt-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span>来源：{library.source}</span>
|
||||
<span>•</span>
|
||||
<span>创建人：{library.creator}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 mt-1">
|
||||
<Badge variant="outline">内容数量：{library.contentCount}</Badge>
|
||||
<Badge variant="outline">更新时间：{new Date(library.lastUpdated).toLocaleString()}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary" className={library.status === "inactive" ? "bg-gray-100" : ""}>
|
||||
{library.status === "active" ? "启用" : "已停用"}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<Button variant="outline" onClick={onPrev}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={handleFinish} disabled={!formData.selectedLibrary}>
|
||||
完成
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
274
app/workspace/moments-sync/new/steps/DeviceSelector.tsx
Normal file
274
app/workspace/moments-sync/new/steps/DeviceSelector.tsx
Normal file
@@ -0,0 +1,274 @@
|
||||
"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 { Search, RefreshCw, X } from "lucide-react"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { toast } from "@/components/ui/use-toast"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination"
|
||||
|
||||
// 定义类型，避免导入错误
|
||||
interface Device {
|
||||
id: string
|
||||
imei: string
|
||||
name: string
|
||||
status: string
|
||||
wechatId: string
|
||||
usedInPlans: number
|
||||
}
|
||||
|
||||
interface DeviceResponse {
|
||||
code: number
|
||||
message: string
|
||||
data: {
|
||||
devices: Device[]
|
||||
total: number
|
||||
}
|
||||
}
|
||||
|
||||
interface DeviceSelectResponse {
|
||||
code: number
|
||||
message: string
|
||||
data: {
|
||||
success: boolean
|
||||
deviceIds: string[]
|
||||
}
|
||||
}
|
||||
|
||||
interface DeviceSelectorProps {
|
||||
formData: any
|
||||
onChange: (data: any) => void
|
||||
onNext: () => void
|
||||
onPrev: () => void
|
||||
}
|
||||
|
||||
export function DeviceSelector({ formData, onChange, onNext, onPrev }: DeviceSelectorProps) {
|
||||
const [devices, setDevices] = useState<Device[]>([])
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [statusFilter, setStatusFilter] = useState("all")
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const itemsPerPage = 5
|
||||
|
||||
useEffect(() => {
|
||||
fetchDevices()
|
||||
}, [])
|
||||
|
||||
const fetchDevices = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
// 实际项目中这里应该调用API获取所有设备
|
||||
const response: DeviceResponse = {
|
||||
code: 0,
|
||||
message: "success",
|
||||
data: {
|
||||
devices: Array.from({ length: 42 }, (_, i) => ({
|
||||
id: `device-${i + 1}`,
|
||||
imei: `IMEI-${Math.random().toString(36).substr(2, 9)}`,
|
||||
name: `设备 ${i + 1}`,
|
||||
status: Math.random() > 0.3 ? "online" : "offline",
|
||||
wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
|
||||
usedInPlans: Math.floor(Math.random() * 3),
|
||||
})),
|
||||
total: 42,
|
||||
},
|
||||
}
|
||||
|
||||
if (response.code === 0) {
|
||||
setDevices(response.data.devices)
|
||||
} else {
|
||||
throw new Error(response.message)
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "获取失败",
|
||||
description: "无法获取设备列表",
|
||||
variant: "destructive",
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRefresh = () => {
|
||||
fetchDevices()
|
||||
toast({
|
||||
title: "刷新成功",
|
||||
description: "设备列表已更新",
|
||||
})
|
||||
}
|
||||
|
||||
const filteredDevices = devices.filter((device) => {
|
||||
const matchesSearch =
|
||||
device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
device.imei.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
const matchesStatus = statusFilter === "all" || device.status === statusFilter
|
||||
return matchesSearch && matchesStatus
|
||||
})
|
||||
|
||||
const paginatedDevices = filteredDevices.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
|
||||
|
||||
const handleDeviceSelect = async (deviceId: string) => {
|
||||
try {
|
||||
// 实际项目中这里应该调用API
|
||||
const response: DeviceSelectResponse = {
|
||||
code: 0,
|
||||
message: "success",
|
||||
data: {
|
||||
success: true,
|
||||
deviceIds: [deviceId],
|
||||
},
|
||||
}
|
||||
|
||||
if (response.code === 0 && response.data.success) {
|
||||
const updatedSelection = formData.selectedDevices.includes(deviceId)
|
||||
? formData.selectedDevices.filter((id: string) => id !== deviceId)
|
||||
: [...formData.selectedDevices, deviceId]
|
||||
onChange({ ...formData, selectedDevices: updatedSelection })
|
||||
} else {
|
||||
throw new Error(response.message)
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "选择失败",
|
||||
description: "无法选择设备",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder="搜索设备备注或IMEI"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue placeholder="全部状态" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部状态</SelectItem>
|
||||
<SelectItem value="online">在线</SelectItem>
|
||||
<SelectItem value="offline">离线</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
|
||||
<RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{paginatedDevices.map((device) => (
|
||||
<Card
|
||||
key={device.id}
|
||||
className={`p-3 hover:shadow-md transition-shadow cursor-pointer ${
|
||||
formData.selectedDevices.includes(device.id) ? "border-blue-500 border-2" : ""
|
||||
}`}
|
||||
onClick={() => handleDeviceSelect(device.id)}
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Checkbox
|
||||
checked={formData.selectedDevices.includes(device.id)}
|
||||
onCheckedChange={() => handleDeviceSelect(device.id)}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="font-medium truncate">{device.name}</div>
|
||||
<div
|
||||
className={`px-2 py-1 rounded-full text-xs ${
|
||||
device.status === "online" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{device.status === "online" ? "在线" : "离线"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">IMEI: {device.imei}</div>
|
||||
<div className="text-sm text-gray-500">微信号: {device.wechatId}</div>
|
||||
{device.usedInPlans > 0 && (
|
||||
<div className="text-sm text-orange-500">已用于 {device.usedInPlans} 个计划</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationPrevious
|
||||
onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
|
||||
disabled={currentPage === 1}
|
||||
/>
|
||||
{Array.from({ length: Math.ceil(filteredDevices.length / itemsPerPage) }, (_, i) => i + 1).map((page) => (
|
||||
<PaginationItem key={page}>
|
||||
<PaginationLink onClick={() => setCurrentPage(page)} isActive={currentPage === page}>
|
||||
{page}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
))}
|
||||
<PaginationNext
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.min(Math.ceil(filteredDevices.length / itemsPerPage), prev + 1))
|
||||
}
|
||||
disabled={currentPage === Math.ceil(filteredDevices.length / itemsPerPage)}
|
||||
/>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
|
||||
<div className="mt-4">
|
||||
<h3 className="font-medium mb-2">已选设备：</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{formData.selectedDevices.map((deviceId: string) => {
|
||||
const device = devices.find((d) => d.id === deviceId)
|
||||
return (
|
||||
device && (
|
||||
<Badge key={deviceId} variant="secondary" className="px-2 py-1 flex items-center space-x-1">
|
||||
<span>{device.name}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-4 w-4 p-0 hover:bg-transparent"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleDeviceSelect(deviceId)
|
||||
}}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</Badge>
|
||||
)
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between mt-4">
|
||||
<Button variant="outline" onClick={onPrev}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={onNext} disabled={formData.selectedDevices.length === 0}>
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
168
app/workspace/moments-sync/page.tsx
Normal file
168
app/workspace/moments-sync/page.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { ChevronLeft, Plus, Filter, Search, RefreshCw, MoreVertical, Clock, Edit, Trash2, Eye } from "lucide-react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import Link from "next/link"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
|
||||
interface SyncTask {
|
||||
id: string
|
||||
name: string
|
||||
status: "running" | "paused"
|
||||
deviceCount: number
|
||||
contentLib: string
|
||||
syncCount: number
|
||||
lastSyncTime: string
|
||||
createTime: string
|
||||
creator: string
|
||||
}
|
||||
|
||||
export default function MomentsSyncPage() {
|
||||
const router = useRouter()
|
||||
const [tasks, setTasks] = useState<SyncTask[]>([
|
||||
{
|
||||
id: "1",
|
||||
name: "同步卡若主号",
|
||||
deviceCount: 2,
|
||||
contentLib: "卡若朋友圈",
|
||||
syncCount: 307,
|
||||
lastSyncTime: "2025-02-06 13:12:35",
|
||||
createTime: "2024-11-20 19:04:14",
|
||||
creator: "karuo",
|
||||
status: "running",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "暗黑4业务",
|
||||
deviceCount: 1,
|
||||
contentLib: "暗黑4代练",
|
||||
syncCount: 622,
|
||||
lastSyncTime: "2024-03-04 14:09:35",
|
||||
createTime: "2024-03-04 14:29:04",
|
||||
creator: "lkdie",
|
||||
status: "paused",
|
||||
},
|
||||
])
|
||||
|
||||
const handleDelete = (taskId: string) => {
|
||||
setTasks(tasks.filter((task) => task.id !== taskId))
|
||||
}
|
||||
|
||||
const handleEdit = (taskId: string) => {
|
||||
router.push(`/workspace/moments-sync/${taskId}/edit`)
|
||||
}
|
||||
|
||||
const handleView = (taskId: string) => {
|
||||
router.push(`/workspace/moments-sync/${taskId}`)
|
||||
}
|
||||
|
||||
const toggleTaskStatus = (taskId: string) => {
|
||||
setTasks(
|
||||
tasks.map((task) =>
|
||||
task.id === taskId ? { ...task, status: task.status === "running" ? "paused" : "running" } : task,
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 bg-gray-50 min-h-screen">
|
||||
<header className="sticky top-0 z-10 bg-white border-b">
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button variant="ghost" size="icon" onClick={() => router.back()}>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<h1 className="text-lg font-medium">朋友圈同步</h1>
|
||||
</div>
|
||||
<Link href="/workspace/moments-sync/new">
|
||||
<Button>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
新建任务
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="p-4">
|
||||
<Card className="p-4 mb-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<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" />
|
||||
</div>
|
||||
<Button variant="outline" size="icon">
|
||||
<Filter className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="icon">
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="space-y-4">
|
||||
{tasks.map((task) => (
|
||||
<Card key={task.id} className="p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<h3 className="font-medium">{task.name}</h3>
|
||||
<Badge variant={task.status === "running" ? "success" : "secondary"}>
|
||||
{task.status === "running" ? "进行中" : "已暂停"}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch checked={task.status === "running"} onCheckedChange={() => toggleTaskStatus(task.id)} />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem onClick={() => handleView(task.id)}>
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
查看
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleEdit(task.id)}>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
编辑
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDelete(task.id)}>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
删除
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div className="text-sm text-gray-500">
|
||||
<div>推送设备：{task.deviceCount} 个</div>
|
||||
<div>内容库：{task.contentLib}</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
<div>已同步：{task.syncCount} 条</div>
|
||||
<div>创建人：{task.creator}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-xs text-gray-500 border-t pt-4">
|
||||
<div className="flex items-center">
|
||||
<Clock className="w-4 h-4 mr-1" />
|
||||
上次同步：{task.lastSyncTime}
|
||||
</div>
|
||||
<div>创建时间：{task.createTime}</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
572
app/workspace/pricing/edit/[id]/page.tsx
Normal file
572
app/workspace/pricing/edit/[id]/page.tsx
Normal file
@@ -0,0 +1,572 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { ChevronLeft } from "lucide-react"
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
import { Check, ChevronsUpDown } from "lucide-react"
|
||||
import { cn } from "@/app/lib/utils"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Card } from "@/components/ui/card"
|
||||
|
||||
// 模拟标签数据
|
||||
const tagOptions = [
|
||||
{ value: "new_user", label: "新用户" },
|
||||
{ value: "low_activity", label: "低活跃度" },
|
||||
{ value: "high_spending", label: "高消费" },
|
||||
{ value: "high_activity", label: "高活跃度" },
|
||||
{ value: "potential", label: "潜在客户" },
|
||||
{ value: "purchase_intent", label: "有购买意向" },
|
||||
{ value: "holiday_consumer", label: "节日消费" },
|
||||
{ value: "promotion_sensitive", label: "促销敏感" },
|
||||
{ value: "tech_savvy", label: "科技爱好者" },
|
||||
{ value: "luxury_buyer", label: "奢侈品买家" },
|
||||
{ value: "price_sensitive", label: "价格敏感" },
|
||||
{ value: "brand_loyal", label: "品牌忠诚" },
|
||||
]
|
||||
|
||||
// 模拟区域数据
|
||||
const regionOptions = [
|
||||
{ value: "nationwide", label: "全国" },
|
||||
{ value: "beijing", label: "北京" },
|
||||
{ value: "shanghai", label: "上海" },
|
||||
{ value: "guangzhou", label: "广州" },
|
||||
{ value: "shenzhen", label: "深圳" },
|
||||
{ value: "hangzhou", label: "杭州" },
|
||||
{ value: "chengdu", label: "成都" },
|
||||
{ value: "wuhan", label: "武汉" },
|
||||
{ value: "east_china", label: "华东地区" },
|
||||
{ value: "south_china", label: "华南地区" },
|
||||
{ value: "north_china", label: "华北地区" },
|
||||
{ value: "central_china", label: "华中地区" },
|
||||
{ value: "tier_1", label: "一线城市" },
|
||||
{ value: "tier_2", label: "二线城市" },
|
||||
{ value: "tier_3", label: "三线城市" },
|
||||
]
|
||||
|
||||
// 模拟设备数据
|
||||
const deviceOptions = [
|
||||
{ id: "1", name: "设备 A-001", status: "online" },
|
||||
{ id: "2", name: "设备 B-002", status: "online" },
|
||||
{ id: "3", name: "设备 C-003", status: "offline" },
|
||||
{ id: "4", name: "设备 D-004", status: "online" },
|
||||
{ id: "5", name: "设备 E-005", status: "online" },
|
||||
]
|
||||
|
||||
// 模拟分发规则数据
|
||||
const mockDistributionData = [
|
||||
{
|
||||
id: "1",
|
||||
ruleType: "trafficPackage",
|
||||
name: "普通流量包",
|
||||
price: 0.5,
|
||||
tags: ["new_user", "low_activity"],
|
||||
regions: ["nationwide"],
|
||||
deviceAddQuantity: 10,
|
||||
selectAllDevices: true,
|
||||
selectedDevices: [],
|
||||
autoAdd: false,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
ruleType: "distributionRule",
|
||||
name: "高质量流量分发",
|
||||
price: 2.5,
|
||||
tags: ["high_spending", "high_activity"],
|
||||
regions: ["tier_1"],
|
||||
deviceAddQuantity: 5,
|
||||
selectAllDevices: false,
|
||||
selectedDevices: ["1", "4", "5"],
|
||||
autoAdd: true,
|
||||
},
|
||||
]
|
||||
|
||||
type RuleType = "trafficPackage" | "distributionRule"
|
||||
|
||||
export default function EditDistributionPage({ params }: { params: { id: string } }) {
|
||||
const router = useRouter()
|
||||
const { id } = params
|
||||
|
||||
const [currentStep, setCurrentStep] = useState(1)
|
||||
const [ruleType, setRuleType] = useState<RuleType>("trafficPackage")
|
||||
const [name, setName] = useState("")
|
||||
const [selectedTags, setSelectedTags] = useState<string[]>([])
|
||||
const [selectedRegions, setSelectedRegions] = useState<string[]>([])
|
||||
const [selectedDevices, setSelectedDevices] = useState<string[]>([])
|
||||
const [selectAllDevices, setSelectAllDevices] = useState(false)
|
||||
const [deviceAddQuantity, setDeviceAddQuantity] = useState("10")
|
||||
const [price, setPrice] = useState("")
|
||||
const [tagsOpen, setTagsOpen] = useState(false)
|
||||
const [regionsOpen, setRegionsOpen] = useState(false)
|
||||
const [devicesOpen, setDevicesOpen] = useState(false)
|
||||
const [autoAdd, setAutoAdd] = useState(false)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
// 在实际应用中，这里会从API获取数据
|
||||
// 这里使用模拟数据
|
||||
const distributionItem = mockDistributionData.find((item) => item.id === id)
|
||||
|
||||
if (distributionItem) {
|
||||
setRuleType(distributionItem.ruleType as RuleType)
|
||||
setName(distributionItem.name)
|
||||
setSelectedTags(distributionItem.tags)
|
||||
setSelectedRegions(distributionItem.regions)
|
||||
setSelectAllDevices(distributionItem.selectAllDevices)
|
||||
setSelectedDevices(distributionItem.selectedDevices)
|
||||
setDeviceAddQuantity(distributionItem.deviceAddQuantity.toString())
|
||||
setPrice(distributionItem.price.toString())
|
||||
setAutoAdd(distributionItem.autoAdd)
|
||||
} else {
|
||||
// 如果找不到数据，返回列表页
|
||||
router.push("/workspace/pricing")
|
||||
}
|
||||
|
||||
setLoading(false)
|
||||
}, [id, router])
|
||||
|
||||
// 当选择"全部设备"时，自动选中所有设备
|
||||
const handleSelectAllDevices = (value: boolean) => {
|
||||
setSelectAllDevices(value)
|
||||
if (value) {
|
||||
setSelectedDevices(deviceOptions.map((device) => device.id))
|
||||
} else {
|
||||
setSelectedDevices([])
|
||||
}
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
if (name.trim()) {
|
||||
setCurrentStep(2)
|
||||
} else {
|
||||
alert("请填写名称")
|
||||
}
|
||||
}
|
||||
|
||||
const handlePrevious = () => {
|
||||
setCurrentStep(1)
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
// 在实际应用中，这里会发送API请求更新数据
|
||||
console.log({
|
||||
id,
|
||||
ruleType,
|
||||
name,
|
||||
tags: selectedTags,
|
||||
regions: selectedRegions,
|
||||
devices: selectAllDevices ? "all" : selectedDevices,
|
||||
deviceAddQuantity: Number.parseInt(deviceAddQuantity),
|
||||
price: Number.parseFloat(price),
|
||||
autoAdd,
|
||||
})
|
||||
|
||||
// 返回到列表页
|
||||
router.push("/workspace/pricing")
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center min-h-screen">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen bg-gray-50">
|
||||
{/* 顶部栏 */}
|
||||
<header className="bg-white border-b border-gray-200 sticky top-0 z-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||
<Button variant="ghost" size="icon" onClick={() => router.push("/workspace/pricing")} className="mr-2">
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<h1 className="text-lg font-medium">编辑分发</h1>
|
||||
<div className="w-10"></div> {/* 占位，保持标题居中 */}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 进度条 */}
|
||||
<div className="bg-white border-b border-gray-200">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className={`rounded-full h-8 w-8 flex items-center justify-center ${
|
||||
currentStep >= 1 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
|
||||
}`}
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div className={`h-1 flex-1 mx-2 ${currentStep >= 2 ? "bg-blue-600" : "bg-gray-200"}`}></div>
|
||||
<div
|
||||
className={`rounded-full h-8 w-8 flex items-center justify-center ${
|
||||
currentStep >= 2 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
|
||||
}`}
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex mt-2">
|
||||
<div className="flex-1 text-center text-sm font-medium">选择规则类型</div>
|
||||
<div className="flex-1 text-center text-sm font-medium">设置规则</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<main className="flex-1 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
{currentStep === 1 ? (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-lg font-medium">选择规则类型</h2>
|
||||
|
||||
<RadioGroup
|
||||
value={ruleType}
|
||||
onValueChange={(value) => setRuleType(value as RuleType)}
|
||||
className="grid grid-cols-1 md:grid-cols-2 gap-4"
|
||||
>
|
||||
<Card
|
||||
className={`p-4 cursor-pointer border-2 ${ruleType === "trafficPackage" ? "border-blue-500" : "border-transparent"}`}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="trafficPackage" id="trafficPackage" />
|
||||
<Label htmlFor="trafficPackage" className="cursor-pointer flex-1">
|
||||
创建流量包
|
||||
</Label>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-500 pl-6">按照用户标签和地区创建流量包</p>
|
||||
</Card>
|
||||
<Card
|
||||
className={`p-4 cursor-pointer border-2 ${ruleType === "distributionRule" ? "border-blue-500" : "border-transparent"}`}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="distributionRule" id="distributionRule" />
|
||||
<Label htmlFor="distributionRule" className="cursor-pointer flex-1">
|
||||
创建分发规则
|
||||
</Label>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-500 pl-6">创建流量自动分发规则</p>
|
||||
</Card>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">{ruleType === "trafficPackage" ? "流量包名称" : "分发规则名称"}</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder={ruleType === "trafficPackage" ? "请输入流量包名称" : "请输入分发规则名称"}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-4">
|
||||
<Button type="button" onClick={handleNext}>
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-lg font-medium mb-4">设置规则</h2>
|
||||
|
||||
{/* 用户标签选择 */}
|
||||
<div className="space-y-2 mb-6">
|
||||
<Label>用户标签</Label>
|
||||
<Popover open={tagsOpen} onOpenChange={setTagsOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={tagsOpen}
|
||||
className="w-full justify-between h-auto min-h-10"
|
||||
>
|
||||
{selectedTags.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1 py-1">
|
||||
{selectedTags.map((tag) => (
|
||||
<Badge key={tag} variant="secondary" className="mr-1">
|
||||
{tagOptions.find((t) => t.value === tag)?.label}
|
||||
<button
|
||||
className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setSelectedTags(selectedTags.filter((t) => t !== tag))
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">选择用户标签</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="搜索标签..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>未找到相关标签</CommandEmpty>
|
||||
<CommandGroup>
|
||||
<ScrollArea className="h-60">
|
||||
{tagOptions.map((tag) => (
|
||||
<CommandItem
|
||||
key={tag.value}
|
||||
value={tag.value}
|
||||
onSelect={() => {
|
||||
setSelectedTags(
|
||||
selectedTags.includes(tag.value)
|
||||
? selectedTags.filter((t) => t !== tag.value)
|
||||
: [...selectedTags, tag.value],
|
||||
)
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
selectedTags.includes(tag.value) ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
{tag.label}
|
||||
</CommandItem>
|
||||
))}
|
||||
</ScrollArea>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 用户区域选择 */}
|
||||
<div className="space-y-2 mb-6">
|
||||
<Label>用户区域</Label>
|
||||
<Popover open={regionsOpen} onOpenChange={setRegionsOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={regionsOpen}
|
||||
className="w-full justify-between h-auto min-h-10"
|
||||
>
|
||||
{selectedRegions.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1 py-1">
|
||||
{selectedRegions.map((region) => (
|
||||
<Badge key={region} variant="outline" className="mr-1 bg-amber-50">
|
||||
{regionOptions.find((r) => r.value === region)?.label}
|
||||
<button
|
||||
className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setSelectedRegions(selectedRegions.filter((r) => r !== region))
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">选择用户区域</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="搜索区域..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>未找到相关区域</CommandEmpty>
|
||||
<CommandGroup>
|
||||
<ScrollArea className="h-60">
|
||||
{regionOptions.map((region) => (
|
||||
<CommandItem
|
||||
key={region.value}
|
||||
value={region.value}
|
||||
onSelect={() => {
|
||||
setSelectedRegions(
|
||||
selectedRegions.includes(region.value)
|
||||
? selectedRegions.filter((r) => r !== region.value)
|
||||
: [...selectedRegions, region.value],
|
||||
)
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
selectedRegions.includes(region.value) ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
{region.label}
|
||||
</CommandItem>
|
||||
))}
|
||||
</ScrollArea>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 设备设置 */}
|
||||
<div className="space-y-4 mb-6">
|
||||
<h3 className="font-medium">设备范围设置</h3>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch id="selectAll" checked={selectAllDevices} onCheckedChange={handleSelectAllDevices} />
|
||||
<Label htmlFor="selectAll">选择所有设备</Label>
|
||||
</div>
|
||||
|
||||
{!selectAllDevices && (
|
||||
<div className="space-y-2">
|
||||
<Label>选择指定设备</Label>
|
||||
<Popover open={devicesOpen} onOpenChange={setDevicesOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={devicesOpen}
|
||||
className="w-full justify-between h-auto min-h-10"
|
||||
>
|
||||
{selectedDevices.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1 py-1">
|
||||
{selectedDevices.map((deviceId) => (
|
||||
<Badge key={deviceId} variant="outline" className="mr-1">
|
||||
{deviceOptions.find((d) => d.id === deviceId)?.name}
|
||||
<button
|
||||
className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setSelectedDevices(selectedDevices.filter((d) => d !== deviceId))
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">选择设备</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="搜索设备..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>未找到相关设备</CommandEmpty>
|
||||
<CommandGroup>
|
||||
<ScrollArea className="h-60">
|
||||
{deviceOptions.map((device) => (
|
||||
<CommandItem
|
||||
key={device.id}
|
||||
value={device.id}
|
||||
onSelect={() => {
|
||||
setSelectedDevices(
|
||||
selectedDevices.includes(device.id)
|
||||
? selectedDevices.filter((d) => d !== device.id)
|
||||
: [...selectedDevices, device.id],
|
||||
)
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
selectedDevices.includes(device.id) ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
{device.name}
|
||||
<span
|
||||
className={`ml-2 px-1.5 py-0.5 rounded text-xs ${
|
||||
device.status === "online"
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-gray-100 text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{device.status === "online" ? "在线" : "离线"}
|
||||
</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</ScrollArea>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 单设备添加数量 */}
|
||||
<div className="space-y-2 mb-6">
|
||||
<Label htmlFor="deviceAddQuantity">单设备添加数量</Label>
|
||||
<Input
|
||||
id="deviceAddQuantity"
|
||||
type="number"
|
||||
min="1"
|
||||
value={deviceAddQuantity}
|
||||
onChange={(e) => setDeviceAddQuantity(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 价格设置 */}
|
||||
<div className="space-y-2 mb-6">
|
||||
<Label htmlFor="price">价格（元/人次）</Label>
|
||||
<div className="relative">
|
||||
<span className="absolute left-3 top-1/2 transform -translate-y-1/2">¥</span>
|
||||
<Input
|
||||
id="price"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
value={price}
|
||||
onChange={(e) => setPrice(e.target.value)}
|
||||
placeholder="0.00"
|
||||
className="pl-8"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 自动添加设置 */}
|
||||
<div className="flex items-center space-x-2 mb-6">
|
||||
<Switch id="autoAdd" checked={autoAdd} onCheckedChange={setAutoAdd} />
|
||||
<Label htmlFor="autoAdd">自动添加</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 按钮组 */}
|
||||
<div className="flex justify-between pt-4">
|
||||
<Button type="button" variant="outline" onClick={handlePrevious}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button type="button" onClick={handleSubmit}>
|
||||
确认
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
509
app/workspace/pricing/new/page.tsx
Normal file
509
app/workspace/pricing/new/page.tsx
Normal file
@@ -0,0 +1,509 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { ChevronLeft } from "lucide-react"
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
import { Check, ChevronsUpDown } from "lucide-react"
|
||||
import { cn } from "@/app/lib/utils"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Card } from "@/components/ui/card"
|
||||
|
||||
// 模拟标签数据
|
||||
const tagOptions = [
|
||||
{ value: "new_user", label: "新用户" },
|
||||
{ value: "low_activity", label: "低活跃度" },
|
||||
{ value: "high_spending", label: "高消费" },
|
||||
{ value: "high_activity", label: "高活跃度" },
|
||||
{ value: "potential", label: "潜在客户" },
|
||||
{ value: "purchase_intent", label: "有购买意向" },
|
||||
{ value: "holiday_consumer", label: "节日消费" },
|
||||
{ value: "promotion_sensitive", label: "促销敏感" },
|
||||
{ value: "tech_savvy", label: "科技爱好者" },
|
||||
{ value: "luxury_buyer", label: "奢侈品买家" },
|
||||
{ value: "price_sensitive", label: "价格敏感" },
|
||||
{ value: "brand_loyal", label: "品牌忠诚" },
|
||||
]
|
||||
|
||||
// 模拟区域数据
|
||||
const regionOptions = [
|
||||
{ value: "nationwide", label: "全国" },
|
||||
{ value: "beijing", label: "北京" },
|
||||
{ value: "shanghai", label: "上海" },
|
||||
{ value: "guangzhou", label: "广州" },
|
||||
{ value: "shenzhen", label: "深圳" },
|
||||
{ value: "hangzhou", label: "杭州" },
|
||||
{ value: "chengdu", label: "成都" },
|
||||
{ value: "wuhan", label: "武汉" },
|
||||
{ value: "east_china", label: "华东地区" },
|
||||
{ value: "south_china", label: "华南地区" },
|
||||
{ value: "north_china", label: "华北地区" },
|
||||
{ value: "central_china", label: "华中地区" },
|
||||
{ value: "tier_1", label: "一线城市" },
|
||||
{ value: "tier_2", label: "二线城市" },
|
||||
{ value: "tier_3", label: "三线城市" },
|
||||
]
|
||||
|
||||
// 模拟设备数据
|
||||
const deviceOptions = [
|
||||
{ id: "1", name: "设备 A-001", status: "online" },
|
||||
{ id: "2", name: "设备 B-002", status: "online" },
|
||||
{ id: "3", name: "设备 C-003", status: "offline" },
|
||||
{ id: "4", name: "设备 D-004", status: "online" },
|
||||
{ id: "5", name: "设备 E-005", status: "online" },
|
||||
]
|
||||
|
||||
type RuleType = "trafficPackage" | "distributionRule"
|
||||
|
||||
export default function NewDistributionPage() {
|
||||
const router = useRouter()
|
||||
const [currentStep, setCurrentStep] = useState(1)
|
||||
const [ruleType, setRuleType] = useState<RuleType>("trafficPackage")
|
||||
const [name, setName] = useState("")
|
||||
const [selectedTags, setSelectedTags] = useState<string[]>([])
|
||||
const [selectedRegions, setSelectedRegions] = useState<string[]>([])
|
||||
const [selectedDevices, setSelectedDevices] = useState<string[]>([])
|
||||
const [selectAllDevices, setSelectAllDevices] = useState(false)
|
||||
const [deviceAddQuantity, setDeviceAddQuantity] = useState("10")
|
||||
const [price, setPrice] = useState("")
|
||||
const [tagsOpen, setTagsOpen] = useState(false)
|
||||
const [regionsOpen, setRegionsOpen] = useState(false)
|
||||
const [devicesOpen, setDevicesOpen] = useState(false)
|
||||
const [autoAdd, setAutoAdd] = useState(false)
|
||||
|
||||
// 当选择"全部设备"时，自动选中所有设备
|
||||
const handleSelectAllDevices = (value: boolean) => {
|
||||
setSelectAllDevices(value)
|
||||
if (value) {
|
||||
setSelectedDevices(deviceOptions.map((device) => device.id))
|
||||
} else {
|
||||
setSelectedDevices([])
|
||||
}
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
if (name.trim()) {
|
||||
setCurrentStep(2)
|
||||
} else {
|
||||
alert("请填写名称")
|
||||
}
|
||||
}
|
||||
|
||||
const handlePrevious = () => {
|
||||
setCurrentStep(1)
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
// 在实际应用中，这里会发送API请求保存数据
|
||||
console.log({
|
||||
ruleType,
|
||||
name,
|
||||
tags: selectedTags,
|
||||
regions: selectedRegions,
|
||||
devices: selectAllDevices ? "all" : selectedDevices,
|
||||
deviceAddQuantity: Number.parseInt(deviceAddQuantity),
|
||||
price: Number.parseFloat(price),
|
||||
autoAdd,
|
||||
})
|
||||
|
||||
// 返回到列表页
|
||||
router.push("/workspace/pricing")
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen bg-gray-50">
|
||||
{/* 顶部栏 */}
|
||||
<header className="bg-white border-b border-gray-200 sticky top-0 z-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||
<Button variant="ghost" size="icon" onClick={() => router.push("/workspace/pricing")} className="mr-2">
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<h1 className="text-lg font-medium">新建分发</h1>
|
||||
<div className="w-10"></div> {/* 占位，保持标题居中 */}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 进度条 */}
|
||||
<div className="bg-white border-b border-gray-200">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className={`rounded-full h-8 w-8 flex items-center justify-center ${
|
||||
currentStep >= 1 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
|
||||
}`}
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div className={`h-1 flex-1 mx-2 ${currentStep >= 2 ? "bg-blue-600" : "bg-gray-200"}`}></div>
|
||||
<div
|
||||
className={`rounded-full h-8 w-8 flex items-center justify-center ${
|
||||
currentStep >= 2 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
|
||||
}`}
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex mt-2">
|
||||
<div className="flex-1 text-center text-sm font-medium">选择规则类型</div>
|
||||
<div className="flex-1 text-center text-sm font-medium">设置规则</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<main className="flex-1 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
{currentStep === 1 ? (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-lg font-medium">选择规则类型</h2>
|
||||
|
||||
<RadioGroup
|
||||
value={ruleType}
|
||||
onValueChange={(value) => setRuleType(value as RuleType)}
|
||||
className="grid grid-cols-1 md:grid-cols-2 gap-4"
|
||||
>
|
||||
<Card
|
||||
className={`p-4 cursor-pointer border-2 ${ruleType === "trafficPackage" ? "border-blue-500" : "border-transparent"}`}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="trafficPackage" id="trafficPackage" />
|
||||
<Label htmlFor="trafficPackage" className="cursor-pointer flex-1">
|
||||
创建流量包
|
||||
</Label>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-500 pl-6">按照用户标签和地区创建流量包</p>
|
||||
</Card>
|
||||
<Card
|
||||
className={`p-4 cursor-pointer border-2 ${ruleType === "distributionRule" ? "border-blue-500" : "border-transparent"}`}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="distributionRule" id="distributionRule" />
|
||||
<Label htmlFor="distributionRule" className="cursor-pointer flex-1">
|
||||
创建分发规则
|
||||
</Label>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-500 pl-6">创建流量自动分发规则</p>
|
||||
</Card>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">{ruleType === "trafficPackage" ? "流量包名称" : "分发规则名称"}</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder={ruleType === "trafficPackage" ? "请输入流量包名称" : "请输入分发规则名称"}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-4">
|
||||
<Button type="button" onClick={handleNext}>
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-lg font-medium mb-4">设置规则</h2>
|
||||
|
||||
{/* 用户标签选择 */}
|
||||
<div className="space-y-2 mb-6">
|
||||
<Label>用户标签</Label>
|
||||
<Popover open={tagsOpen} onOpenChange={setTagsOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={tagsOpen}
|
||||
className="w-full justify-between h-auto min-h-10"
|
||||
>
|
||||
{selectedTags.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1 py-1">
|
||||
{selectedTags.map((tag) => (
|
||||
<Badge key={tag} variant="secondary" className="mr-1">
|
||||
{tagOptions.find((t) => t.value === tag)?.label}
|
||||
<button
|
||||
className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setSelectedTags(selectedTags.filter((t) => t !== tag))
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">选择用户标签</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="搜索标签..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>未找到相关标签</CommandEmpty>
|
||||
<CommandGroup>
|
||||
<ScrollArea className="h-60">
|
||||
{tagOptions.map((tag) => (
|
||||
<CommandItem
|
||||
key={tag.value}
|
||||
value={tag.value}
|
||||
onSelect={() => {
|
||||
setSelectedTags(
|
||||
selectedTags.includes(tag.value)
|
||||
? selectedTags.filter((t) => t !== tag.value)
|
||||
: [...selectedTags, tag.value],
|
||||
)
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
selectedTags.includes(tag.value) ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
{tag.label}
|
||||
</CommandItem>
|
||||
))}
|
||||
</ScrollArea>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 用户区域选择 */}
|
||||
<div className="space-y-2 mb-6">
|
||||
<Label>用户区域</Label>
|
||||
<Popover open={regionsOpen} onOpenChange={setRegionsOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={regionsOpen}
|
||||
className="w-full justify-between h-auto min-h-10"
|
||||
>
|
||||
{selectedRegions.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1 py-1">
|
||||
{selectedRegions.map((region) => (
|
||||
<Badge key={region} variant="outline" className="mr-1 bg-amber-50">
|
||||
{regionOptions.find((r) => r.value === region)?.label}
|
||||
<button
|
||||
className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setSelectedRegions(selectedRegions.filter((r) => r !== region))
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">选择用户区域</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="搜索区域..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>未找到相关区域</CommandEmpty>
|
||||
<CommandGroup>
|
||||
<ScrollArea className="h-60">
|
||||
{regionOptions.map((region) => (
|
||||
<CommandItem
|
||||
key={region.value}
|
||||
value={region.value}
|
||||
onSelect={() => {
|
||||
setSelectedRegions(
|
||||
selectedRegions.includes(region.value)
|
||||
? selectedRegions.filter((r) => r !== region.value)
|
||||
: [...selectedRegions, region.value],
|
||||
)
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
selectedRegions.includes(region.value) ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
{region.label}
|
||||
</CommandItem>
|
||||
))}
|
||||
</ScrollArea>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 设备设置 */}
|
||||
<div className="space-y-4 mb-6">
|
||||
<h3 className="font-medium">设备范围设置</h3>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch id="selectAll" checked={selectAllDevices} onCheckedChange={handleSelectAllDevices} />
|
||||
<Label htmlFor="selectAll">选择所有设备</Label>
|
||||
</div>
|
||||
|
||||
{!selectAllDevices && (
|
||||
<div className="space-y-2">
|
||||
<Label>选择指定设备</Label>
|
||||
<Popover open={devicesOpen} onOpenChange={setDevicesOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={devicesOpen}
|
||||
className="w-full justify-between h-auto min-h-10"
|
||||
>
|
||||
{selectedDevices.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1 py-1">
|
||||
{selectedDevices.map((deviceId) => (
|
||||
<Badge key={deviceId} variant="outline" className="mr-1">
|
||||
{deviceOptions.find((d) => d.id === deviceId)?.name}
|
||||
<button
|
||||
className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setSelectedDevices(selectedDevices.filter((d) => d !== deviceId))
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">选择设备</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="搜索设备..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>未找到相关设备</CommandEmpty>
|
||||
<CommandGroup>
|
||||
<ScrollArea className="h-60">
|
||||
{deviceOptions.map((device) => (
|
||||
<CommandItem
|
||||
key={device.id}
|
||||
value={device.id}
|
||||
onSelect={() => {
|
||||
setSelectedDevices(
|
||||
selectedDevices.includes(device.id)
|
||||
? selectedDevices.filter((d) => d !== device.id)
|
||||
: [...selectedDevices, device.id],
|
||||
)
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
selectedDevices.includes(device.id) ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
{device.name}
|
||||
<span
|
||||
className={`ml-2 px-1.5 py-0.5 rounded text-xs ${
|
||||
device.status === "online"
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-gray-100 text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{device.status === "online" ? "在线" : "离线"}
|
||||
</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</ScrollArea>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 单设备添加数量 */}
|
||||
<div className="space-y-2 mb-6">
|
||||
<Label htmlFor="deviceAddQuantity">单设备添加数量</Label>
|
||||
<Input
|
||||
id="deviceAddQuantity"
|
||||
type="number"
|
||||
min="1"
|
||||
value={deviceAddQuantity}
|
||||
onChange={(e) => setDeviceAddQuantity(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 价格设置 */}
|
||||
<div className="space-y-2 mb-6">
|
||||
<Label htmlFor="price">价格（元/人次）</Label>
|
||||
<div className="relative">
|
||||
<span className="absolute left-3 top-1/2 transform -translate-y-1/2">¥</span>
|
||||
<Input
|
||||
id="price"
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
value={price}
|
||||
onChange={(e) => setPrice(e.target.value)}
|
||||
placeholder="0.00"
|
||||
className="pl-8"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 自动添加设置 */}
|
||||
<div className="flex items-center space-x-2 mb-6">
|
||||
<Switch id="autoAdd" checked={autoAdd} onCheckedChange={setAutoAdd} />
|
||||
<Label htmlFor="autoAdd">自动添加</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 按钮组 */}
|
||||
<div className="flex justify-between pt-4">
|
||||
<Button type="button" variant="outline" onClick={handlePrevious}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button type="button" onClick={handleSubmit}>
|
||||
确认
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
116
app/workspace/pricing/page.tsx
Normal file
116
app/workspace/pricing/page.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { ChevronLeft, Edit, Trash2, Plus } from "lucide-react"
|
||||
import { useRouter } from "next/navigation"
|
||||
|
||||
// 模拟定价数据
|
||||
const mockPricingData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "普通流量包",
|
||||
price: 0.5,
|
||||
tags: ["新用户", "低活跃度"],
|
||||
region: "全国",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "高质量流量",
|
||||
price: 2.5,
|
||||
tags: ["高消费", "高活跃度"],
|
||||
region: "一线城市",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "精准营销流量",
|
||||
price: 3.8,
|
||||
tags: ["潜在客户", "有购买意向"],
|
||||
region: "华东地区",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "节日促销流量",
|
||||
price: 1.5,
|
||||
tags: ["节日消费", "促销敏感"],
|
||||
region: "全国",
|
||||
},
|
||||
]
|
||||
|
||||
export default function PricingPage() {
|
||||
const router = useRouter()
|
||||
const [pricingItems, setPricingItems] = useState(mockPricingData)
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
setPricingItems(pricingItems.filter((item) => item.id !== id))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen bg-gray-50">
|
||||
{/* 顶部栏 */}
|
||||
<header className="bg-white border-b border-gray-200 sticky top-0 z-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||
<Button variant="ghost" size="icon" onClick={() => router.push("/workspace")} className="mr-2">
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
<h1 className="text-lg font-medium">流量分发</h1>
|
||||
|
||||
<Button className="flex items-center gap-1" onClick={() => router.push("/workspace/pricing/new")}>
|
||||
<Plus className="h-4 w-4" />
|
||||
<span>新建分发</span>
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<main className="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{pricingItems.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-500">暂无分发规则，请点击右上角新建分发</p>
|
||||
</div>
|
||||
) : (
|
||||
pricingItems.map((item) => (
|
||||
<Card key={item.id} className="p-4 hover:shadow-md transition-shadow">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-medium text-lg">{item.name}</h3>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-2xl font-bold text-emerald-600">¥{item.price.toFixed(2)}</span>
|
||||
<span className="text-gray-500 text-sm">/ 人次</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 items-center mt-2">
|
||||
{item.tags.map((tag, index) => (
|
||||
<Badge key={index} variant="outline" className="bg-blue-50">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
<Badge variant="outline" className="bg-amber-50">
|
||||
{item.region}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => router.push(`/workspace/pricing/edit/${item.id}`)}
|
||||
>
|
||||
<Edit className="h-4 w-4 text-gray-500" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={() => handleDelete(item.id)}>
|
||||
<Trash2 className="h-4 w-4 text-gray-500" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user