feat: 本次提交更新内容如下
样式构建完成
This commit is contained in:
笔记本里的永平
@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import { AuthProvider } from './contexts/AuthContext';
|
||||
import { WechatAccountProvider } from './contexts/WechatAccountContext';
|
||||
import { ToastProvider } from './components/ui/toast';
|
||||
import ProtectedRoute from './components/ProtectedRoute';
|
||||
import LayoutWrapper from './components/LayoutWrapper';
|
||||
import { initInterceptors } from './api';
|
||||
@@ -27,7 +26,7 @@ import AIAssistant from './pages/workspace/ai-assistant/AIAssistant';
|
||||
import TrafficDistribution from './pages/workspace/traffic-distribution/TrafficDistribution';
|
||||
import TrafficDistributionDetail from './pages/workspace/traffic-distribution/Detail';
|
||||
import Scenarios from './pages/scenarios/Scenarios';
|
||||
import NewPlan from './pages/scenarios/NewPlan';
|
||||
import NewPlan from './pages/scenarios/new/page';
|
||||
import ScenarioDetail from './pages/scenarios/ScenarioDetail';
|
||||
import Profile from './pages/profile/Profile';
|
||||
import Plans from './pages/plans/Plans';
|
||||
@@ -52,7 +51,6 @@ function App() {
|
||||
<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
|
||||
<AuthProvider>
|
||||
<WechatAccountProvider>
|
||||
<ToastProvider>
|
||||
<ProtectedRoute>
|
||||
<LayoutWrapper>
|
||||
<Routes>
|
||||
@@ -101,7 +99,6 @@ function App() {
|
||||
</Routes>
|
||||
</LayoutWrapper>
|
||||
</ProtectedRoute>
|
||||
</ToastProvider>
|
||||
</WechatAccountProvider>
|
||||
</AuthProvider>
|
||||
</BrowserRouter>
|
||||
|
||||
@@ -237,4 +237,6 @@ export const transformSceneItem = (item: SceneItem): Channel => {
|
||||
growth: growthPercent
|
||||
}
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
export const getPlanScenes = () => get<any>('/v1/plan/scenes');
|
||||
62
nkebao/src/components/ui/alert.tsx
Normal file
62
nkebao/src/components/ui/alert.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { cn } from "@/utils"
|
||||
|
||||
const alertVariants = cva(
|
||||
"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-background text-foreground",
|
||||
destructive:
|
||||
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
const Alert = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
|
||||
>(({ className, variant, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
role="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Alert.displayName = "Alert"
|
||||
|
||||
const AlertTitle = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLHeadingElement>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
children ? (
|
||||
<h5
|
||||
ref={ref}
|
||||
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</h5>
|
||||
) : null
|
||||
))
|
||||
AlertTitle.displayName = "AlertTitle"
|
||||
|
||||
const AlertDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("text-sm [&_p]:leading-relaxed", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AlertDescription.displayName = "AlertDescription"
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription }
|
||||
@@ -1,100 +1,97 @@
|
||||
import React, { useEffect } from 'react';
|
||||
"use client"
|
||||
|
||||
interface DialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { X } from "lucide-react"
|
||||
|
||||
export function Dialog({ open, onOpenChange, children }: DialogProps) {
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = 'unset';
|
||||
}
|
||||
import { cn } from "@/utils"
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = 'unset';
|
||||
};
|
||||
}, [open]);
|
||||
const Dialog = DialogPrimitive.Root
|
||||
|
||||
if (!open) return null;
|
||||
const DialogTrigger = DialogPrimitive.Trigger
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-50"
|
||||
onClick={() => onOpenChange(false)}
|
||||
/>
|
||||
<div className="relative z-10">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const DialogPortal = DialogPrimitive.Portal
|
||||
|
||||
interface DialogContentProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
const DialogClose = DialogPrimitive.Close
|
||||
|
||||
export function DialogContent({ children, className = '' }: DialogContentProps) {
|
||||
return (
|
||||
<div className={`p-6 bg-white rounded-lg shadow-xl mx-4 ${className}`}>
|
||||
const DialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
||||
|
||||
const DialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
))
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName
|
||||
|
||||
interface DialogHeaderProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
|
||||
)
|
||||
DialogHeader.displayName = "DialogHeader"
|
||||
|
||||
export function DialogHeader({ children, className = '' }: DialogHeaderProps) {
|
||||
return (
|
||||
<div className={`mb-4 ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
|
||||
)
|
||||
DialogFooter.displayName = "DialogFooter"
|
||||
|
||||
interface DialogTitleProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
const DialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold leading-none tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
||||
|
||||
export function DialogTitle({ children, className = '' }: DialogTitleProps) {
|
||||
return (
|
||||
<h2 className={`text-lg font-semibold text-gray-900 ${className}`}>
|
||||
{children}
|
||||
</h2>
|
||||
);
|
||||
}
|
||||
const DialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
|
||||
))
|
||||
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
||||
|
||||
interface DialogDescriptionProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
export {
|
||||
Dialog,
|
||||
DialogPortal,
|
||||
DialogOverlay,
|
||||
DialogClose,
|
||||
DialogTrigger,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogFooter,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
}
|
||||
|
||||
export function DialogDescription({ children, className = '' }: DialogDescriptionProps) {
|
||||
return (
|
||||
<p className={`text-sm text-gray-600 mt-1 ${className}`}>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
interface DialogFooterProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function DialogFooter({ children, className = '' }: DialogFooterProps) {
|
||||
return (
|
||||
<div className={`flex justify-end space-x-2 mt-6 ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
69
nkebao/src/components/ui/table.tsx
Normal file
69
nkebao/src/components/ui/table.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/utils"
|
||||
|
||||
const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
|
||||
</div>
|
||||
),
|
||||
)
|
||||
Table.displayName = "Table"
|
||||
|
||||
const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
|
||||
({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
|
||||
)
|
||||
TableHeader.displayName = "TableHeader"
|
||||
|
||||
const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
|
||||
),
|
||||
)
|
||||
TableBody.displayName = "TableBody"
|
||||
|
||||
const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
|
||||
),
|
||||
)
|
||||
TableFooter.displayName = "TableFooter"
|
||||
|
||||
const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
)
|
||||
TableRow.displayName = "TableRow"
|
||||
|
||||
const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
)
|
||||
TableHead.displayName = "TableHead"
|
||||
|
||||
const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<td
|
||||
ref={ref}
|
||||
className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
)
|
||||
TableCell.displayName = "TableCell"
|
||||
|
||||
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell }
|
||||
@@ -1,132 +1,223 @@
|
||||
import React, { createContext, useContext, useState, ReactNode } from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
"use client"
|
||||
|
||||
interface Toast {
|
||||
import * as React from "react"
|
||||
import * as ToastPrimitives from "@radix-ui/react-toast"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { X } from "lucide-react"
|
||||
|
||||
import { cn } from "@/utils"
|
||||
|
||||
export type { ToastActionElement, ToastProps };
|
||||
|
||||
const ToastViewport = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Viewport>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Viewport
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
|
||||
|
||||
const toastVariants = cva(
|
||||
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "border bg-background text-foreground",
|
||||
destructive: "destructive border-destructive bg-destructive text-destructive-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
const Toast = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
|
||||
>(({ className, variant, ...props }, ref) => {
|
||||
return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
|
||||
})
|
||||
Toast.displayName = ToastPrimitives.Root.displayName
|
||||
|
||||
const ToastAction = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Action>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Action
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastAction.displayName = ToastPrimitives.Action.displayName
|
||||
|
||||
const ToastClose = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Close>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Close
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
|
||||
className,
|
||||
)}
|
||||
toast-close=""
|
||||
{...props}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</ToastPrimitives.Close>
|
||||
))
|
||||
ToastClose.displayName = ToastPrimitives.Close.displayName
|
||||
|
||||
const ToastTitle = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
|
||||
))
|
||||
ToastTitle.displayName = ToastPrimitives.Title.displayName
|
||||
|
||||
const ToastDescription = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
|
||||
))
|
||||
ToastDescription.displayName = ToastPrimitives.Description.displayName
|
||||
|
||||
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
|
||||
|
||||
type ToastActionElement = React.ReactElement<typeof ToastAction>
|
||||
|
||||
// === 以下为 use-toast.ts 的内容迁移 ===
|
||||
|
||||
const TOAST_LIMIT = 1;
|
||||
const TOAST_REMOVE_DELAY = 1000000;
|
||||
|
||||
type ToasterToast = ToastProps & {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
variant?: 'default' | 'destructive';
|
||||
}
|
||||
|
||||
interface ToastContextType {
|
||||
toast: (toast: Omit<Toast, 'id'>) => void;
|
||||
}
|
||||
|
||||
const ToastContext = createContext<ToastContextType | undefined>(undefined);
|
||||
|
||||
export const useToast = () => {
|
||||
const context = useContext(ToastContext);
|
||||
if (!context) {
|
||||
throw new Error('useToast must be used within a ToastProvider');
|
||||
}
|
||||
return context;
|
||||
title?: React.ReactNode;
|
||||
description?: React.ReactNode;
|
||||
action?: ToastActionElement;
|
||||
};
|
||||
|
||||
interface ToastProviderProps {
|
||||
children: ReactNode;
|
||||
const actionTypes = {
|
||||
ADD_TOAST: "ADD_TOAST",
|
||||
UPDATE_TOAST: "UPDATE_TOAST",
|
||||
DISMISS_TOAST: "DISMISS_TOAST",
|
||||
REMOVE_TOAST: "REMOVE_TOAST",
|
||||
} as const;
|
||||
|
||||
let count = 0;
|
||||
function genId() {
|
||||
count = (count + 1) % Number.MAX_VALUE;
|
||||
return count.toString();
|
||||
}
|
||||
|
||||
export function ToastProvider({ children }: ToastProviderProps) {
|
||||
const [toasts, setToasts] = useState<Toast[]>([]);
|
||||
type ActionType = typeof actionTypes;
|
||||
type Action =
|
||||
| { type: ActionType["ADD_TOAST"]; toast: ToasterToast }
|
||||
| { type: ActionType["UPDATE_TOAST"]; toast: Partial<ToasterToast> }
|
||||
| { type: ActionType["DISMISS_TOAST"]; toastId?: ToasterToast["id"] }
|
||||
| { type: ActionType["REMOVE_TOAST"]; toastId?: ToasterToast["id"] };
|
||||
|
||||
const toast = (newToast: Omit<Toast, 'id'>) => {
|
||||
const id = Math.random().toString(36).substr(2, 9);
|
||||
const toastWithId = { ...newToast, id };
|
||||
|
||||
setToasts(prev => [...prev, toastWithId]);
|
||||
|
||||
// 自动移除toast
|
||||
setTimeout(() => {
|
||||
setToasts(prev => prev.filter(t => t.id !== id));
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
const removeToast = (id: string) => {
|
||||
setToasts(prev => prev.filter(t => t.id !== id));
|
||||
};
|
||||
|
||||
return (
|
||||
<ToastContext.Provider value={{ toast }}>
|
||||
{children}
|
||||
<div className="fixed top-4 right-4 z-50 space-y-2">
|
||||
{toasts.map((toast) => (
|
||||
<div
|
||||
key={toast.id}
|
||||
className={`max-w-sm w-full bg-white rounded-lg shadow-lg border p-4 transform transition-all duration-300 ${
|
||||
toast.variant === 'destructive'
|
||||
? 'border-red-200 bg-red-50'
|
||||
: 'border-gray-200'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<h4 className={`font-medium ${
|
||||
toast.variant === 'destructive' ? 'text-red-800' : 'text-gray-900'
|
||||
}`}>
|
||||
{toast.title}
|
||||
</h4>
|
||||
{toast.description && (
|
||||
<p className={`text-sm mt-1 ${
|
||||
toast.variant === 'destructive' ? 'text-red-600' : 'text-gray-600'
|
||||
}`}>
|
||||
{toast.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => removeToast(toast.id)}
|
||||
className="ml-4 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ToastContext.Provider>
|
||||
);
|
||||
interface State {
|
||||
toasts: ToasterToast[];
|
||||
}
|
||||
|
||||
// 直接导出toast函数，用于在组件中直接使用
|
||||
export const toast = (toastData: Omit<Toast, 'id'>) => {
|
||||
// 这里需要确保ToastProvider已经包装了应用
|
||||
// 在实际使用中，应该通过useToast hook来调用
|
||||
console.warn('toast function called without context. Please use useToast hook instead.');
|
||||
|
||||
// 创建一个简单的DOM toast作为fallback
|
||||
const toastElement = document.createElement('div');
|
||||
toastElement.className = `fixed top-4 right-4 z-50 max-w-sm w-full bg-white rounded-lg shadow-lg border p-4 transform transition-all duration-300 ${
|
||||
toastData.variant === 'destructive'
|
||||
? 'border-red-200 bg-red-50'
|
||||
: 'border-gray-200'
|
||||
}`;
|
||||
|
||||
toastElement.innerHTML = `
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<h4 class="font-medium ${toastData.variant === 'destructive' ? 'text-red-800' : 'text-gray-900'}">
|
||||
${toastData.title}
|
||||
</h4>
|
||||
${toastData.description ? `
|
||||
<p class="text-sm mt-1 ${toastData.variant === 'destructive' ? 'text-red-600' : 'text-gray-600'}">
|
||||
${toastData.description}
|
||||
</p>
|
||||
` : ''}
|
||||
</div>
|
||||
<button class="ml-4 text-gray-400 hover:text-gray-600" onclick="this.parentElement.parentElement.remove()">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(toastElement);
|
||||
|
||||
// 自动移除
|
||||
setTimeout(() => {
|
||||
if (toastElement.parentElement) {
|
||||
toastElement.remove();
|
||||
const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
|
||||
const addToRemoveQueue = (toastId: string) => {
|
||||
if (toastTimeouts.has(toastId)) return;
|
||||
const timeout = setTimeout(() => {
|
||||
toastTimeouts.delete(toastId);
|
||||
dispatch({ type: "REMOVE_TOAST", toastId });
|
||||
}, TOAST_REMOVE_DELAY);
|
||||
toastTimeouts.set(toastId, timeout);
|
||||
};
|
||||
|
||||
export const reducer = (state: State, action: Action): State => {
|
||||
switch (action.type) {
|
||||
case "ADD_TOAST":
|
||||
return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT) };
|
||||
case "UPDATE_TOAST":
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
|
||||
};
|
||||
case "DISMISS_TOAST": {
|
||||
const { toastId } = action;
|
||||
if (toastId) {
|
||||
addToRemoveQueue(toastId);
|
||||
} else {
|
||||
state.toasts.forEach((toast) => addToRemoveQueue(toast.id));
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.map((t) =>
|
||||
t.id === toastId || toastId === undefined ? { ...t, open: false } : t
|
||||
),
|
||||
};
|
||||
}
|
||||
}, 5000);
|
||||
};
|
||||
case "REMOVE_TOAST":
|
||||
if (action.toastId === undefined) {
|
||||
return { ...state, toasts: [] };
|
||||
}
|
||||
return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId) };
|
||||
}
|
||||
};
|
||||
|
||||
const listeners: Array<(state: State) => void> = [];
|
||||
let memoryState: State = { toasts: [] };
|
||||
function dispatch(action: Action) {
|
||||
memoryState = reducer(memoryState, action);
|
||||
listeners.forEach((listener) => listener(memoryState));
|
||||
}
|
||||
|
||||
type Toast = Omit<ToasterToast, "id">;
|
||||
|
||||
function toast({ ...props }: Toast) {
|
||||
const id = genId();
|
||||
const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...props, id } });
|
||||
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
|
||||
dispatch({
|
||||
type: "ADD_TOAST",
|
||||
toast: {
|
||||
...props,
|
||||
id,
|
||||
open: true,
|
||||
onOpenChange: (open: boolean) => {
|
||||
if (!open) dismiss();
|
||||
},
|
||||
},
|
||||
});
|
||||
return { id, dismiss, update };
|
||||
}
|
||||
|
||||
function useToast() {
|
||||
const [state, setState] = React.useState<State>(memoryState);
|
||||
React.useEffect(() => {
|
||||
listeners.push(setState);
|
||||
return () => {
|
||||
const index = listeners.indexOf(setState);
|
||||
if (index > -1) listeners.splice(index, 1);
|
||||
};
|
||||
}, []);
|
||||
return {
|
||||
...state,
|
||||
toast,
|
||||
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
|
||||
};
|
||||
}
|
||||
|
||||
export { useToast, toast };
|
||||
188
nkebao/src/components/ui/use-toast.ts
Normal file
188
nkebao/src/components/ui/use-toast.ts
Normal file
@@ -0,0 +1,188 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
|
||||
|
||||
const TOAST_LIMIT = 1
|
||||
const TOAST_REMOVE_DELAY = 1000000
|
||||
|
||||
type ToasterToast = ToastProps & {
|
||||
id: string
|
||||
title?: React.ReactNode
|
||||
description?: React.ReactNode
|
||||
action?: ToastActionElement
|
||||
}
|
||||
|
||||
const actionTypes = {
|
||||
ADD_TOAST: "ADD_TOAST",
|
||||
UPDATE_TOAST: "UPDATE_TOAST",
|
||||
DISMISS_TOAST: "DISMISS_TOAST",
|
||||
REMOVE_TOAST: "REMOVE_TOAST",
|
||||
} as const
|
||||
|
||||
let count = 0
|
||||
|
||||
function genId() {
|
||||
count = (count + 1) % Number.MAX_VALUE
|
||||
return count.toString()
|
||||
}
|
||||
|
||||
type ActionType = typeof actionTypes
|
||||
|
||||
type Action =
|
||||
| {
|
||||
type: ActionType["ADD_TOAST"]
|
||||
toast: ToasterToast
|
||||
}
|
||||
| {
|
||||
type: ActionType["UPDATE_TOAST"]
|
||||
toast: Partial<ToasterToast>
|
||||
}
|
||||
| {
|
||||
type: ActionType["DISMISS_TOAST"]
|
||||
toastId?: ToasterToast["id"]
|
||||
}
|
||||
| {
|
||||
type: ActionType["REMOVE_TOAST"]
|
||||
toastId?: ToasterToast["id"]
|
||||
}
|
||||
|
||||
interface State {
|
||||
toasts: ToasterToast[]
|
||||
}
|
||||
|
||||
const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
|
||||
|
||||
const addToRemoveQueue = (toastId: string) => {
|
||||
if (toastTimeouts.has(toastId)) {
|
||||
return
|
||||
}
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
toastTimeouts.delete(toastId)
|
||||
dispatch({
|
||||
type: "REMOVE_TOAST",
|
||||
toastId: toastId,
|
||||
})
|
||||
}, TOAST_REMOVE_DELAY)
|
||||
|
||||
toastTimeouts.set(toastId, timeout)
|
||||
}
|
||||
|
||||
export const reducer = (state: State, action: Action): State => {
|
||||
switch (action.type) {
|
||||
case "ADD_TOAST":
|
||||
return {
|
||||
...state,
|
||||
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
|
||||
}
|
||||
|
||||
case "UPDATE_TOAST":
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
|
||||
}
|
||||
|
||||
case "DISMISS_TOAST": {
|
||||
const { toastId } = action
|
||||
|
||||
// ! Side effects ! - This could be extracted into a dismissToast() action,
|
||||
// but I'll keep it here for simplicity
|
||||
if (toastId) {
|
||||
addToRemoveQueue(toastId)
|
||||
} else {
|
||||
state.toasts.forEach((toast) => {
|
||||
addToRemoveQueue(toast.id)
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.map((t) =>
|
||||
t.id === toastId || toastId === undefined
|
||||
? {
|
||||
...t,
|
||||
open: false,
|
||||
}
|
||||
: t,
|
||||
),
|
||||
}
|
||||
}
|
||||
case "REMOVE_TOAST":
|
||||
if (action.toastId === undefined) {
|
||||
return {
|
||||
...state,
|
||||
toasts: [],
|
||||
}
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.filter((t) => t.id !== action.toastId),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const listeners: Array<(state: State) => void> = []
|
||||
|
||||
let memoryState: State = { toasts: [] }
|
||||
|
||||
function dispatch(action: Action) {
|
||||
memoryState = reducer(memoryState, action)
|
||||
listeners.forEach((listener) => {
|
||||
listener(memoryState)
|
||||
})
|
||||
}
|
||||
|
||||
type Toast = Omit<ToasterToast, "id">
|
||||
|
||||
function toast({ ...props }: Toast) {
|
||||
const id = genId()
|
||||
|
||||
const update = (props: ToasterToast) =>
|
||||
dispatch({
|
||||
type: "UPDATE_TOAST",
|
||||
toast: { ...props, id },
|
||||
})
|
||||
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
|
||||
|
||||
dispatch({
|
||||
type: "ADD_TOAST",
|
||||
toast: {
|
||||
...props,
|
||||
id,
|
||||
open: true,
|
||||
onOpenChange: (open) => {
|
||||
if (!open) dismiss()
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
id: id,
|
||||
dismiss,
|
||||
update,
|
||||
}
|
||||
}
|
||||
|
||||
function useToast() {
|
||||
const [state, setState] = React.useState<State>(memoryState)
|
||||
|
||||
React.useEffect(() => {
|
||||
listeners.push(setState)
|
||||
return () => {
|
||||
const index = listeners.indexOf(setState)
|
||||
if (index > -1) {
|
||||
listeners.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return {
|
||||
...state,
|
||||
toast,
|
||||
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
|
||||
}
|
||||
}
|
||||
|
||||
export { useToast, toast }
|
||||
@@ -1,443 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { Check, Settings } from 'lucide-react';
|
||||
import PageHeader from '@/components/PageHeader';
|
||||
import { useToast } from '@/components/ui/toast';
|
||||
import Layout from '@/components/Layout';
|
||||
import '@/components/Layout.css';
|
||||
|
||||
// 步骤定义
|
||||
const steps = [
|
||||
{ id: 1, title: "步骤一", subtitle: "基础设置" },
|
||||
{ id: 2, title: "步骤二", subtitle: "好友申请设置" },
|
||||
{ id: 3, title: "步骤三", subtitle: "消息设置" },
|
||||
];
|
||||
|
||||
interface ScenarioOption {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
description: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
const scenarioOptions: ScenarioOption[] = [
|
||||
{
|
||||
id: "douyin",
|
||||
name: "抖音获客",
|
||||
icon: "🎵",
|
||||
description: "通过抖音平台进行精准获客",
|
||||
image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-QR8ManuDplYTySUJsY4mymiZkDYnQ9.png",
|
||||
},
|
||||
{
|
||||
id: "xiaohongshu",
|
||||
name: "小红书获客",
|
||||
icon: "📖",
|
||||
description: "利用小红书平台进行内容营销获客",
|
||||
image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-yvnMxpoBUzcvEkr8DfvHgPHEo1kmQ3.png",
|
||||
},
|
||||
{
|
||||
id: "gongzhonghao",
|
||||
name: "公众号获客",
|
||||
icon: "📱",
|
||||
description: "通过微信公众号进行获客",
|
||||
image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Gsg0CMf5tsZb41mioszdjqU1WmsRxW.png",
|
||||
},
|
||||
{
|
||||
id: "haibao",
|
||||
name: "海报获客",
|
||||
icon: "🖼️",
|
||||
description: "通过海报分享进行获客",
|
||||
image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-x92XJgXy4MI7moNYlA1EAes2FqDxMH.png",
|
||||
},
|
||||
];
|
||||
|
||||
interface FormData {
|
||||
planName: string;
|
||||
posters: any[];
|
||||
device: any[];
|
||||
remarkType: string;
|
||||
greeting: string;
|
||||
addInterval: number;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
enabled: boolean;
|
||||
sceneId: string;
|
||||
scenario: string;
|
||||
planNameEdited: boolean;
|
||||
}
|
||||
|
||||
export default function NewPlan() {
|
||||
const navigate = useNavigate();
|
||||
const searchParams = useSearchParams();
|
||||
const { toast } = useToast();
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
planName: "",
|
||||
posters: [],
|
||||
device: [],
|
||||
remarkType: "default",
|
||||
greeting: "",
|
||||
addInterval: 60,
|
||||
startTime: "09:00",
|
||||
endTime: "18:00",
|
||||
enabled: true,
|
||||
sceneId: searchParams[0].get("scenario") || "",
|
||||
scenario: searchParams[0].get("scenario") || "",
|
||||
planNameEdited: false
|
||||
});
|
||||
|
||||
// 更新表单数据
|
||||
const onChange = (data: Partial<FormData>) => {
|
||||
if ('planName' in data) {
|
||||
setFormData(prev => ({ ...prev, planNameEdited: true, ...data }));
|
||||
} else {
|
||||
setFormData(prev => ({ ...prev, ...data }));
|
||||
}
|
||||
};
|
||||
|
||||
// 处理保存
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// 模拟API调用
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
toast({
|
||||
title: "创建成功",
|
||||
description: "获客计划已创建",
|
||||
});
|
||||
navigate("/scenarios");
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: "创建失败",
|
||||
description: error?.message || "创建计划失败，请重试",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 下一步
|
||||
const handleNext = () => {
|
||||
if (currentStep === steps.length) {
|
||||
handleSave();
|
||||
} else {
|
||||
setCurrentStep((prev) => prev + 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 上一步
|
||||
const handlePrev = () => {
|
||||
setCurrentStep((prev) => Math.max(prev - 1, 1));
|
||||
};
|
||||
|
||||
// 步骤指示器组件（方案A：简洁线性进度条风格）
|
||||
const StepIndicator = ({ steps, currentStep }: { steps: any[], currentStep: number }) => {
|
||||
const percent = ((currentStep - 1) / (steps.length - 1)) * 100;
|
||||
return (
|
||||
<div className="mb-8 px-2 pt-2">
|
||||
{/* 进度条 */}
|
||||
<div className="relative h-2 mb-7">
|
||||
<div className="absolute top-1/2 left-0 w-full h-1 bg-gray-200 rounded-full -translate-y-1/2" />
|
||||
<div
|
||||
className="absolute top-1/2 left-0 h-1 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full -translate-y-1/2 transition-all duration-300"
|
||||
style={{ width: `${percent}%` }}
|
||||
/>
|
||||
{/* 圆点 */}
|
||||
<div className="absolute top-1/2 left-0 w-full flex justify-between -translate-y-1/2">
|
||||
{steps.map((step, idx) => {
|
||||
const isActive = currentStep === step.id;
|
||||
const isDone = currentStep > step.id;
|
||||
return (
|
||||
<div key={step.id} className="flex flex-col items-center w-1/3">
|
||||
<div
|
||||
className={`w-7 h-7 flex items-center justify-center rounded-full border-2 transition-all duration-300 text-sm font-bold shadow-sm leading-none
|
||||
${isActive ? 'bg-blue-500 border-blue-500 text-white scale-110' :
|
||||
isDone ? 'bg-indigo-500 border-indigo-500 text-white' :
|
||||
'bg-white border-gray-300 text-gray-400'}
|
||||
`}
|
||||
>
|
||||
{isDone ? <span className="flex items-center justify-center h-full w-full"><Check className="w-4 h-4" /></span> : <span className="flex items-center justify-center h-full w-full">{step.id}</span>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{/* 步骤文字 */}
|
||||
<div className="flex justify-between">
|
||||
{steps.map((step, idx) => {
|
||||
const isActive = currentStep === step.id;
|
||||
const isDone = currentStep > step.id;
|
||||
return (
|
||||
<div key={step.id} className="flex flex-col items-center w-1/3">
|
||||
<span className={`text-xs font-semibold ${isActive ? 'text-blue-600' : isDone ? 'text-indigo-500' : 'text-gray-400'}`}>{step.title}</span>
|
||||
<span className={`text-[11px] mt-0.5 ${isActive || isDone ? 'text-gray-500' : 'text-gray-400'}`}>{step.subtitle}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 基础设置步骤
|
||||
const BasicSettings = () => {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-4">选择获客场景</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{scenarioOptions.map((scenario) => (
|
||||
<div
|
||||
key={scenario.id}
|
||||
className={`relative p-4 border-2 rounded-lg cursor-pointer transition-all ${
|
||||
formData.sceneId === scenario.id
|
||||
? 'border-blue-500 bg-blue-50'
|
||||
: 'border-gray-200 bg-white hover:border-gray-300'
|
||||
}`}
|
||||
onClick={() => onChange({ sceneId: scenario.id, scenario: scenario.id })}
|
||||
>
|
||||
{formData.sceneId === scenario.id && (
|
||||
<div className="absolute top-2 right-2 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<Check className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<img
|
||||
src={scenario.image}
|
||||
alt={scenario.name}
|
||||
className="w-12 h-12 mb-2 rounded"
|
||||
/>
|
||||
<h3 className="font-medium text-gray-900">{scenario.name}</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">{scenario.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-medium">计划信息</h3>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
计划名称 *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.planName}
|
||||
onChange={(e) => onChange({ planName: e.target.value })}
|
||||
placeholder="请输入计划名称"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
执行时间
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">开始时间</label>
|
||||
<input
|
||||
type="time"
|
||||
value={formData.startTime}
|
||||
onChange={(e) => onChange({ startTime: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-500 mb-1">结束时间</label>
|
||||
<input
|
||||
type="time"
|
||||
value={formData.endTime}
|
||||
onChange={(e) => onChange({ endTime: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<button
|
||||
onClick={handleNext}
|
||||
disabled={!formData.sceneId || !formData.planName.trim()}
|
||||
className="w-full py-3 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
下一步
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 好友申请设置步骤
|
||||
const FriendRequestSettings = () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-4">好友申请设置</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
添加间隔（秒）
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.addInterval}
|
||||
onChange={(e) => onChange({ addInterval: parseInt(e.target.value) || 60 })}
|
||||
min="30"
|
||||
max="3600"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">建议设置60-300秒，避免被限制</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
备注类型
|
||||
</label>
|
||||
<select
|
||||
value={formData.remarkType}
|
||||
onChange={(e) => onChange({ remarkType: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="default">默认备注</option>
|
||||
<option value="custom">自定义备注</option>
|
||||
<option value="none">不添加备注</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{formData.remarkType === 'custom' && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
自定义备注
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="请输入自定义备注内容"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 pt-4">
|
||||
<button
|
||||
onClick={handlePrev}
|
||||
className="flex-1 py-3 px-4 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
onClick={handleNext}
|
||||
className="flex-1 py-3 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
下一步
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// 消息设置步骤
|
||||
const MessageSettings = () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-4">消息设置</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
打招呼消息
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.greeting}
|
||||
onChange={(e) => onChange({ greeting: e.target.value })}
|
||||
placeholder="请输入打招呼消息内容"
|
||||
rows={4}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">支持变量：{name}（对方昵称）</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="enabled"
|
||||
checked={formData.enabled}
|
||||
onChange={(e) => onChange({ enabled: e.target.checked })}
|
||||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label htmlFor="enabled" className="ml-2 block text-sm text-gray-700">
|
||||
立即启用计划
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 pt-4">
|
||||
<button
|
||||
onClick={handlePrev}
|
||||
className="flex-1 py-3 px-4 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={loading}
|
||||
className="flex-1 py-3 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{loading ? '创建中...' : '创建计划'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// 渲染当前步骤内容
|
||||
const renderStepContent = () => {
|
||||
switch (currentStep) {
|
||||
case 1:
|
||||
return <BasicSettings />;
|
||||
case 2:
|
||||
return <FriendRequestSettings />;
|
||||
case 3:
|
||||
return <MessageSettings />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<PageHeader
|
||||
title="新建获客计划"
|
||||
defaultBackPath="/scenarios"
|
||||
rightContent={
|
||||
<button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
|
||||
<Settings className="h-5 w-5" />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div className="max-w-[390px] mx-auto w-full bg-white min-h-screen flex flex-col">
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="px-4 pt-8">
|
||||
<StepIndicator steps={steps} currentStep={currentStep} />
|
||||
</div>
|
||||
<div className="flex-1 px-4 pb-20">{renderStepContent()}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
135
nkebao/src/pages/scenarios/new/page.tsx
Normal file
135
nkebao/src/pages/scenarios/new/page.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
import { useState, useEffect } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { ChevronLeft, Settings } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { toast } from "@/components/ui/use-toast"
|
||||
import { Steps, StepItem } from 'tdesign-mobile-react';
|
||||
import { BasicSettings } from "./steps/BasicSettings"
|
||||
import { FriendRequestSettings } from "./steps/FriendRequestSettings"
|
||||
import { MessageSettings } from "./steps/MessageSettings"
|
||||
import Layout from "@/components/Layout"
|
||||
import { getPlanScenes } from '@/api/scenarios';
|
||||
|
||||
// 步骤定义 - 只保留三个步骤
|
||||
const steps = [
|
||||
{ id: 1, title: "步骤一", subtitle: "基础设置" },
|
||||
{ id: 2, title: "步骤二", subtitle: "好友申请设置" },
|
||||
{ id: 3, title: "步骤三", subtitle: "消息设置" },
|
||||
]
|
||||
|
||||
export default function NewPlan() {
|
||||
const router = useNavigate()
|
||||
const [currentStep, setCurrentStep] = useState(1)
|
||||
const [formData, setFormData] = useState({
|
||||
planName: "",
|
||||
scenario: "haibao",
|
||||
posters: [],
|
||||
device: "",
|
||||
remarkType: "phone",
|
||||
greeting: "你好，请通过",
|
||||
addInterval: 1,
|
||||
startTime: "09:00",
|
||||
endTime: "18:00",
|
||||
enabled: true,
|
||||
// 移除tags字段
|
||||
})
|
||||
const [sceneList, setSceneList] = useState<any[]>([]);
|
||||
const [sceneLoading, setSceneLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setSceneLoading(true);
|
||||
getPlanScenes()
|
||||
.then(res => {
|
||||
setSceneList(res?.data || []);
|
||||
})
|
||||
.finally(() => setSceneLoading(false));
|
||||
}, []);
|
||||
|
||||
// 更新表单数据
|
||||
const onChange = (data: any) => {
|
||||
setFormData((prev) => ({ ...prev, ...data }))
|
||||
}
|
||||
|
||||
// 处理保存
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
// 这里应该是实际的API调用
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
|
||||
toast({
|
||||
title: "创建成功",
|
||||
description: "获客计划已创建",
|
||||
})
|
||||
router("/plans")
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "创建失败",
|
||||
description: "创建计划失败，请重试",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 下一步
|
||||
const handleNext = () => {
|
||||
if (currentStep === steps.length) {
|
||||
handleSave()
|
||||
} else {
|
||||
setCurrentStep((prev) => prev + 1)
|
||||
}
|
||||
}
|
||||
|
||||
// 上一步
|
||||
const handlePrev = () => {
|
||||
setCurrentStep((prev) => Math.max(prev - 1, 1))
|
||||
}
|
||||
|
||||
// 渲染当前步骤内容
|
||||
const renderStepContent = () => {
|
||||
switch (currentStep) {
|
||||
case 1:
|
||||
return <BasicSettings formData={formData} onChange={onChange} onNext={handleNext} sceneList={sceneList} sceneLoading={sceneLoading} />
|
||||
case 2:
|
||||
return <FriendRequestSettings formData={formData} onChange={onChange} onNext={handleNext} onPrev={handlePrev} />
|
||||
case 3:
|
||||
return <MessageSettings formData={formData} onChange={onChange} onNext={handleSave} onPrev={handlePrev} />
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
<Layout header={
|
||||
<>
|
||||
<header className="sticky top-0 z-10 bg-white border-b">
|
||||
<div className="flex items-center justify-between h-14 px-4">
|
||||
<div className="flex items-center">
|
||||
<Button variant="ghost" size="icon" onClick={() => router("/plans")}>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Settings className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="px-4 py-6">
|
||||
<Steps current={currentStep - 1}>
|
||||
{steps.map((step) => (
|
||||
<StepItem key={step.id} title={step.title} content={step.subtitle} />
|
||||
))}
|
||||
</Steps>
|
||||
</div>
|
||||
</>
|
||||
}>
|
||||
|
||||
<div className="p-4">
|
||||
{renderStepContent()}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
)
|
||||
}
|
||||
666
nkebao/src/pages/scenarios/new/steps/BasicSettings.tsx
Normal file
666
nkebao/src/pages/scenarios/new/steps/BasicSettings.tsx
Normal file
@@ -0,0 +1,666 @@
|
||||
import type React from "react"
|
||||
import { useState, useEffect } from "react"
|
||||
import { Button, Input, Tag, Grid, Dialog, ImageViewer, Table, Switch } from 'tdesign-mobile-react';
|
||||
|
||||
|
||||
// 调整场景顺序，确保API获客在最后，并且前三个是最常用的场景
|
||||
const scenarios = [
|
||||
{ id: "haibao", name: "海报获客", type: "material" },
|
||||
{ id: "order", name: "订单获客", type: "api" },
|
||||
{ id: "douyin", name: "抖音获客", type: "social" },
|
||||
{ id: "xiaohongshu", name: "小红书获客", type: "social" },
|
||||
{ id: "phone", name: "电话获客", type: "social" },
|
||||
{ id: "gongzhonghao", name: "公众号获客", type: "social" },
|
||||
{ id: "weixinqun", name: "微信群获客", type: "social" },
|
||||
{ id: "payment", name: "付款码获客", type: "material" },
|
||||
{ id: "api", name: "API获客", type: "api" }, // API获客放在最后
|
||||
]
|
||||
|
||||
const phoneCallTags = [
|
||||
{ id: "tag-1", name: "咨询", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "tag-2", name: "投诉", color: "bg-red-100 text-red-800" },
|
||||
{ id: "tag-3", name: "合作", color: "bg-green-100 text-green-800" },
|
||||
{ id: "tag-4", name: "价格", color: "bg-orange-100 text-orange-800" },
|
||||
{ id: "tag-5", name: "售后", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "tag-6", name: "订单", color: "bg-yellow-100 text-yellow-800" },
|
||||
{ id: "tag-7", name: "物流", color: "bg-teal-100 text-teal-800" },
|
||||
]
|
||||
|
||||
// 不同场景的预设标签
|
||||
const scenarioTags = {
|
||||
haibao: [
|
||||
{ id: "poster-tag-1", name: "活动推广", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "poster-tag-2", name: "产品宣传", color: "bg-green-100 text-green-800" },
|
||||
{ id: "poster-tag-3", name: "品牌展示", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "poster-tag-4", name: "优惠促销", color: "bg-red-100 text-red-800" },
|
||||
{ id: "poster-tag-5", name: "新品发布", color: "bg-orange-100 text-orange-800" },
|
||||
],
|
||||
order: [
|
||||
{ id: "order-tag-1", name: "新订单", color: "bg-green-100 text-green-800" },
|
||||
{ id: "order-tag-2", name: "复购客户", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "order-tag-3", name: "高价值订单", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "order-tag-4", name: "待付款", color: "bg-yellow-100 text-yellow-800" },
|
||||
{ id: "order-tag-5", name: "已完成", color: "bg-gray-100 text-gray-800" },
|
||||
],
|
||||
douyin: [
|
||||
{ id: "douyin-tag-1", name: "短视频", color: "bg-pink-100 text-pink-800" },
|
||||
{ id: "douyin-tag-2", name: "直播", color: "bg-red-100 text-red-800" },
|
||||
{ id: "douyin-tag-3", name: "带货", color: "bg-orange-100 text-orange-800" },
|
||||
{ id: "douyin-tag-4", name: "粉丝互动", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "douyin-tag-5", name: "热门话题", color: "bg-purple-100 text-purple-800" },
|
||||
],
|
||||
xiaohongshu: [
|
||||
{ id: "xhs-tag-1", name: "种草笔记", color: "bg-red-100 text-red-800" },
|
||||
{ id: "xhs-tag-2", name: "美妆", color: "bg-pink-100 text-pink-800" },
|
||||
{ id: "xhs-tag-3", name: "穿搭", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "xhs-tag-4", name: "生活方式", color: "bg-green-100 text-green-800" },
|
||||
{ id: "xhs-tag-5", name: "好物推荐", color: "bg-orange-100 text-orange-800" },
|
||||
],
|
||||
phone: phoneCallTags,
|
||||
gongzhonghao: [
|
||||
{ id: "gzh-tag-1", name: "文章推送", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "gzh-tag-2", name: "活动通知", color: "bg-green-100 text-green-800" },
|
||||
{ id: "gzh-tag-3", name: "产品介绍", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "gzh-tag-4", name: "用户服务", color: "bg-orange-100 text-orange-800" },
|
||||
{ id: "gzh-tag-5", name: "品牌故事", color: "bg-gray-100 text-gray-800" },
|
||||
],
|
||||
weixinqun: [
|
||||
{ id: "wxq-tag-1", name: "群活动", color: "bg-green-100 text-green-800" },
|
||||
{ id: "wxq-tag-2", name: "产品分享", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "wxq-tag-3", name: "用户交流", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "wxq-tag-4", name: "优惠信息", color: "bg-pink-100 text-pink-800" },
|
||||
{ id: "wxq-tag-5", name: "答疑解惑", color: "bg-orange-100 text-orange-800" },
|
||||
{ id: "wxq-tag-6", name: "新人欢迎", color: "bg-yellow-100 text-yellow-800" },
|
||||
{ id: "wxq-tag-7", name: "群规通知", color: "bg-gray-100 text-gray-800" },
|
||||
{ id: "wxq-tag-8", name: "活跃互动", color: "bg-indigo-100 text-indigo-800" },
|
||||
],
|
||||
payment: [
|
||||
{ id: "pay-tag-1", name: "扫码支付", color: "bg-green-100 text-green-800" },
|
||||
{ id: "pay-tag-2", name: "线下门店", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "pay-tag-3", name: "活动收款", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "pay-tag-4", name: "服务费用", color: "bg-orange-100 text-orange-800" },
|
||||
{ id: "pay-tag-5", name: "会员充值", color: "bg-yellow-100 text-yellow-800" },
|
||||
],
|
||||
api: [
|
||||
{ id: "api-tag-1", name: "系统对接", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "api-tag-2", name: "数据同步", color: "bg-green-100 text-green-800" },
|
||||
{ id: "api-tag-3", name: "自动化", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "api-tag-4", name: "第三方平台", color: "bg-orange-100 text-orange-800" },
|
||||
{ id: "api-tag-5", name: "实时推送", color: "bg-gray-100 text-gray-800" },
|
||||
],
|
||||
}
|
||||
|
||||
interface BasicSettingsProps {
|
||||
formData: any
|
||||
onChange: (data: any) => void
|
||||
onNext?: () => void
|
||||
sceneList: any[]
|
||||
sceneLoading: boolean
|
||||
}
|
||||
|
||||
interface Account {
|
||||
id: string
|
||||
nickname: string
|
||||
avatar: string
|
||||
}
|
||||
|
||||
interface Material {
|
||||
id: string
|
||||
name: string
|
||||
type: string
|
||||
preview: string
|
||||
}
|
||||
|
||||
const posterTemplates = [
|
||||
{
|
||||
id: "poster-1",
|
||||
name: "点击领取",
|
||||
preview:
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E9%A2%86%E5%8F%961-tipd1HI7da6qooY5NkhxQnXBnT5LGU.gif",
|
||||
},
|
||||
{
|
||||
id: "poster-2",
|
||||
name: "点击合作",
|
||||
preview:
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E5%90%88%E4%BD%9C-LPlMdgxtvhqCSr4IM1bZFEFDBF3ztI.gif",
|
||||
},
|
||||
{
|
||||
id: "poster-3",
|
||||
name: "点击咨询",
|
||||
preview:
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E5%92%A8%E8%AF%A2-FTiyAMAPop2g9LvjLOLDz0VwPg3KVu.gif",
|
||||
},
|
||||
{
|
||||
id: "poster-4",
|
||||
name: "点击签到",
|
||||
preview:
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E7%AD%BE%E5%88%B0-94TZIkjLldb4P2jTVlI6MkSDg0NbXi.gif",
|
||||
},
|
||||
{
|
||||
id: "poster-5",
|
||||
name: "点击了解",
|
||||
preview:
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E4%BA%86%E8%A7%A3-6GCl7mQVdO4WIiykJyweSubLsTwj71.gif",
|
||||
},
|
||||
{
|
||||
id: "poster-6",
|
||||
name: "点击报名",
|
||||
preview:
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E6%8A%A5%E5%90%8D-Mj0nnva0BiASeDAIhNNaRRAbjPgjEj.gif",
|
||||
},
|
||||
]
|
||||
|
||||
const generateRandomAccounts = (count: number): Account[] => {
|
||||
return Array.from({ length: count }, (_, index) => ({
|
||||
id: `account-${index + 1}`,
|
||||
nickname: `账号-${Math.random().toString(36).substring(2, 7)}`,
|
||||
avatar: `/placeholder.svg?height=40&width=40&text=${index + 1}`,
|
||||
}))
|
||||
}
|
||||
|
||||
const generatePosterMaterials = (): Material[] => {
|
||||
return posterTemplates.map((template) => ({
|
||||
id: template.id,
|
||||
name: template.name,
|
||||
type: "poster",
|
||||
preview: template.preview,
|
||||
}))
|
||||
}
|
||||
|
||||
export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoading }: BasicSettingsProps) {
|
||||
const [isAccountDialogOpen, setIsAccountDialogOpen] = useState(false)
|
||||
const [isMaterialDialogOpen, setIsMaterialDialogOpen] = useState(false)
|
||||
const [isPreviewOpen, setIsPreviewOpen] = useState(false)
|
||||
const [isPhoneSettingsOpen, setIsPhoneSettingsOpen] = useState(false)
|
||||
const [accounts] = useState<Account[]>(generateRandomAccounts(50))
|
||||
const [materials] = useState<Material[]>(generatePosterMaterials())
|
||||
const [selectedAccounts, setSelectedAccounts] = useState<Account[]>(
|
||||
formData.accounts?.length > 0 ? formData.accounts : [],
|
||||
)
|
||||
const [selectedMaterials, setSelectedMaterials] = useState<Material[]>(
|
||||
formData.materials?.length > 0 ? formData.materials : [],
|
||||
)
|
||||
// showAllScenarios 默认为 true
|
||||
const [showAllScenarios, setShowAllScenarios] = useState(true);
|
||||
const [isImportDialogOpen, setIsImportDialogOpen] = useState(false)
|
||||
const [importedTags, setImportedTags] = useState<
|
||||
Array<{
|
||||
phone: string
|
||||
wechat: string
|
||||
source?: string
|
||||
orderAmount?: number
|
||||
orderDate?: string
|
||||
}>
|
||||
>(formData.importedTags || [])
|
||||
|
||||
// 自定义标签相关状态
|
||||
const [customTagInput, setCustomTagInput] = useState("");
|
||||
const [customTags, setCustomTags] = useState(formData.customTags || []);
|
||||
const [selectedScenarioTags, setSelectedScenarioTags] = useState(formData.scenarioTags || []);
|
||||
|
||||
// 电话获客相关状态
|
||||
const [phoneSettings, setPhoneSettings] = useState({
|
||||
autoAdd: formData.phoneSettings?.autoAdd ?? true,
|
||||
speechToText: formData.phoneSettings?.speechToText ?? true,
|
||||
questionExtraction: formData.phoneSettings?.questionExtraction ?? true,
|
||||
});
|
||||
|
||||
// 群设置相关状态
|
||||
const [weixinqunName, setWeixinqunName] = useState(formData.weixinqunName || "");
|
||||
const [weixinqunNotice, setWeixinqunNotice] = useState(formData.weixinqunNotice || "");
|
||||
|
||||
// 更新电话获客设置
|
||||
const handlePhoneSettingsUpdate = () => {
|
||||
onChange({ ...formData, phoneSettings });
|
||||
setIsPhoneSettingsOpen(false);
|
||||
};
|
||||
|
||||
// 处理标签选择
|
||||
const handleTagToggle = (tagId: string) => {
|
||||
const newTags = selectedScenarioTags.includes(tagId)
|
||||
? selectedScenarioTags.filter((id: string) => id !== tagId)
|
||||
: [...selectedScenarioTags, tagId]
|
||||
|
||||
setSelectedScenarioTags(newTags)
|
||||
onChange({ ...formData, scenarioTags: newTags })
|
||||
}
|
||||
|
||||
// 处理通话类型选择
|
||||
const handleCallTypeChange = (type: string) => {
|
||||
// setPhoneCallType(type) // This line was removed as per the edit hint.
|
||||
onChange({ ...formData, phoneCallType: type })
|
||||
}
|
||||
|
||||
// 初始化时，如果没有选择场景，默认选择海报获客
|
||||
useEffect(() => {
|
||||
if (!formData.scenario) {
|
||||
onChange({ ...formData, scenario: "haibao" })
|
||||
}
|
||||
|
||||
if (!formData.planName) {
|
||||
const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "")
|
||||
onChange({ ...formData, planName: `海报${today}` })
|
||||
}
|
||||
}, [formData, onChange])
|
||||
|
||||
// 选中场景
|
||||
const handleScenarioSelect = (sceneId: number) => {
|
||||
onChange({ ...formData, scenario: sceneId })
|
||||
}
|
||||
|
||||
// 选中/取消标签
|
||||
const handleScenarioTagToggle = (tag: string) => {
|
||||
const newTags = selectedScenarioTags.includes(tag)
|
||||
? selectedScenarioTags.filter((t: string) => t !== tag)
|
||||
: [...selectedScenarioTags, tag]
|
||||
setSelectedScenarioTags(newTags)
|
||||
onChange({ ...formData, scenarioTags: newTags })
|
||||
}
|
||||
|
||||
// 添加自定义标签
|
||||
const handleAddCustomTag = () => {
|
||||
if (!customTagInput.trim()) return;
|
||||
const newTag = {
|
||||
id: `custom-${Date.now()}`,
|
||||
name: customTagInput.trim(),
|
||||
};
|
||||
const updatedCustomTags = [...customTags, newTag];
|
||||
setCustomTags(updatedCustomTags);
|
||||
setCustomTagInput("");
|
||||
onChange({ ...formData, customTags: updatedCustomTags });
|
||||
};
|
||||
|
||||
// 删除自定义标签
|
||||
const handleRemoveCustomTag = (tagId: string) => {
|
||||
const updatedCustomTags = customTags.filter((tag: any) => tag.id !== tagId);
|
||||
setCustomTags(updatedCustomTags);
|
||||
onChange({ ...formData, customTags: updatedCustomTags });
|
||||
// 同时从选中标签中移除
|
||||
const updatedSelectedTags = selectedScenarioTags.filter((t: string) => t !== tagId);
|
||||
setSelectedScenarioTags(updatedSelectedTags);
|
||||
onChange({ ...formData, scenarioTags: updatedSelectedTags, customTags: updatedCustomTags });
|
||||
};
|
||||
|
||||
// 选择素材（单选）
|
||||
const handleMaterialSelect = (material: Material) => {
|
||||
setSelectedMaterials([material]);
|
||||
onChange({ ...formData, materials: [material] });
|
||||
setIsMaterialDialogOpen(false);
|
||||
};
|
||||
|
||||
// 移除已选素材
|
||||
const handleRemoveMaterial = (id: string) => {
|
||||
setSelectedMaterials([]);
|
||||
onChange({ ...formData, materials: [] });
|
||||
};
|
||||
|
||||
// 预览图片
|
||||
const handlePreviewImage = (url: string) => {
|
||||
setIsPreviewOpen(true);
|
||||
};
|
||||
|
||||
// 账号多选切换
|
||||
const handleAccountToggle = (account: Account) => {
|
||||
const isSelected = selectedAccounts.some((a: Account) => a.id === account.id);
|
||||
let newSelected;
|
||||
if (isSelected) {
|
||||
newSelected = selectedAccounts.filter((a: Account) => a.id !== account.id);
|
||||
} else {
|
||||
newSelected = [...selectedAccounts, account];
|
||||
}
|
||||
setSelectedAccounts(newSelected);
|
||||
onChange({ ...formData, accounts: newSelected });
|
||||
};
|
||||
|
||||
// 移除已选账号
|
||||
const handleRemoveAccount = (id: string) => {
|
||||
const newSelected = selectedAccounts.filter((a: Account) => a.id !== id);
|
||||
setSelectedAccounts(newSelected);
|
||||
onChange({ ...formData, accounts: newSelected });
|
||||
};
|
||||
|
||||
// 只显示前三个场景，其他的需要点击展开
|
||||
const displayedScenarios = showAllScenarios ? scenarios : scenarios.slice(0, 3)
|
||||
|
||||
// 处理文件导入
|
||||
const handleFileImport = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const content = e.target?.result as string;
|
||||
const rows = content.split("\n").filter((row) => row.trim());
|
||||
const tags = rows.slice(1).map((row) => {
|
||||
const [phone, wechat, source, orderAmount, orderDate] = row.split(",");
|
||||
return {
|
||||
phone: phone?.trim(),
|
||||
wechat: wechat?.trim(),
|
||||
source: source?.trim(),
|
||||
orderAmount: orderAmount ? Number(orderAmount) : undefined,
|
||||
orderDate: orderDate?.trim(),
|
||||
};
|
||||
});
|
||||
setImportedTags(tags);
|
||||
onChange({ ...formData, importedTags: tags });
|
||||
} catch (error) {
|
||||
// 可用 toast 提示
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
};
|
||||
|
||||
// 下载模板
|
||||
const handleDownloadTemplate = () => {
|
||||
const template = "电话号码,微信号,来源,订单金额,下单日期\n13800138000,wxid_123,抖音,99.00,2024-03-03";
|
||||
const blob = new Blob([template], { type: "text/csv" });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "订单导入模板.csv";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
// 账号弹窗关闭时清理搜索等状态
|
||||
const handleAccountDialogClose = () => {
|
||||
setIsAccountDialogOpen(false);
|
||||
// 可在此清理账号搜索等临时状态
|
||||
};
|
||||
// 素材弹窗关闭时清理搜索等状态
|
||||
const handleMaterialDialogClose = () => {
|
||||
setIsMaterialDialogOpen(false);
|
||||
// 可在此清理素材搜索等临时状态
|
||||
};
|
||||
// 订单导入弹窗关闭时清理文件输入等状态
|
||||
const handleImportDialogClose = () => {
|
||||
setIsImportDialogOpen(false);
|
||||
// 可在此清理文件输入等临时状态
|
||||
};
|
||||
// 电话获客弹窗关闭
|
||||
const handlePhoneSettingsDialogClose = () => {
|
||||
setIsPhoneSettingsOpen(false);
|
||||
};
|
||||
// 图片预览关闭
|
||||
const handleImagePreviewClose = () => {
|
||||
setIsPreviewOpen(false);
|
||||
};
|
||||
|
||||
// 当前选中的场景对象
|
||||
const currentScene = sceneList.find(s => s.id === formData.scenario);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 场景选择区块 */}
|
||||
{sceneLoading ? (
|
||||
<div style={{ padding: 16, textAlign: 'center' }}>加载中...</div>
|
||||
) : (
|
||||
<Grid gutter={20} column={3}>
|
||||
{sceneList.map((scene) => (
|
||||
<Button
|
||||
key={scene.id}
|
||||
theme={formData.scenario === scene.id ? 'primary' : 'light'}
|
||||
onClick={() => handleScenarioSelect(scene.id)}
|
||||
size="small"
|
||||
>
|
||||
{scene.name.replace('获客', '')}
|
||||
</Button>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
{/* 计划名称输入区 */}
|
||||
<div className="mb-4">计划名称</div>
|
||||
<div className="border p-2 mb-4">
|
||||
<input
|
||||
className="w-full"
|
||||
type="text"
|
||||
value={formData.planName}
|
||||
onChange={(e) => onChange({ ...formData, planName: String(e.target.value) })}
|
||||
placeholder="请输入计划名称"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 标签选择区块 */}
|
||||
{formData.scenario && (
|
||||
<div className="flex" style={{ flexWrap: 'wrap', gap: 8 }}>
|
||||
{(currentScene?.scenarioTags || []).map((tag: string) => (
|
||||
<Tag
|
||||
key={tag}
|
||||
shape="round"
|
||||
theme={selectedScenarioTags.includes(tag) ? 'primary' : 'default'}
|
||||
onClick={() => handleScenarioTagToggle(tag)}
|
||||
style={{ marginBottom: 4 }}
|
||||
>
|
||||
{tag}
|
||||
</Tag>
|
||||
))}
|
||||
{/* 自定义标签 */}
|
||||
{customTags.map((tag: any) => (
|
||||
<Tag
|
||||
key={tag.id}
|
||||
shape="round"
|
||||
theme={selectedScenarioTags.includes(tag.id) ? 'primary' : 'default'}
|
||||
onClick={() => handleScenarioTagToggle(tag.id)}
|
||||
style={{ marginBottom: 4 }}
|
||||
closable
|
||||
onClose={() => handleRemoveCustomTag(tag.id)}
|
||||
>
|
||||
{tag.name}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* 自定义标签输入区 */}
|
||||
<div className="flex p" style={{ gap: 8 }}>
|
||||
<div className="border p-2 flex-1">
|
||||
<input
|
||||
type="text"
|
||||
value={customTagInput}
|
||||
onChange={(v) => setCustomTagInput(String(v))}
|
||||
placeholder="添加自定义标签"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="pt-1">
|
||||
<Button theme="primary" size="small" onClick={handleAddCustomTag}>
|
||||
添加
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* 账号选择区块 */}
|
||||
<div style={{ margin: '16px 0' }}>
|
||||
<Button theme="default" onClick={() => setIsAccountDialogOpen(true)}>
|
||||
{selectedAccounts.length ? `已选账号（${selectedAccounts.length}）` : '选择账号'}
|
||||
</Button>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 8 }}>
|
||||
{selectedAccounts.map((account: Account) => (
|
||||
<Tag
|
||||
key={account.id}
|
||||
shape="round"
|
||||
theme="primary"
|
||||
closable
|
||||
onClose={() => handleRemoveAccount(account.id)}
|
||||
>
|
||||
{account.nickname}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
<Dialog
|
||||
visible={isAccountDialogOpen}
|
||||
onClose={handleAccountDialogClose}
|
||||
>
|
||||
<div style={{ fontWeight: 600, fontSize: 16, marginBottom: 12 }}>选择账号</div>
|
||||
<div style={{ maxHeight: 300, overflow: 'auto' }}>
|
||||
{accounts.map((account) => (
|
||||
<div
|
||||
key={account.id}
|
||||
style={{ display: 'flex', alignItems: 'center', marginBottom: 8, cursor: 'pointer' }}
|
||||
onClick={() => handleAccountToggle(account)}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedAccounts.some((a: Account) => a.id === account.id)}
|
||||
readOnly
|
||||
style={{ marginRight: 8 }}
|
||||
/>
|
||||
<span>{account.nickname}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button block theme="primary" onClick={() => setIsAccountDialogOpen(false)} style={{ marginTop: 16 }}>
|
||||
完成
|
||||
</Button>
|
||||
</Dialog>
|
||||
</div>
|
||||
{/* 素材选择区块 */}
|
||||
<div style={{ margin: '16px 0' }}>
|
||||
<Button theme="default" onClick={() => setIsMaterialDialogOpen(true)}>
|
||||
{selectedMaterials.length ? `已选素材（${selectedMaterials.length}）` : '选择素材'}
|
||||
</Button>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 8 }}>
|
||||
{selectedMaterials.map((material: Material) => (
|
||||
<Tag
|
||||
key={material.id}
|
||||
shape="round"
|
||||
theme="primary"
|
||||
closable
|
||||
onClose={() => handleRemoveMaterial(material.id)}
|
||||
onClick={() => handlePreviewImage(material.preview)}
|
||||
>
|
||||
{material.name}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
<Dialog
|
||||
visible={isMaterialDialogOpen}
|
||||
onClose={handleMaterialDialogClose}
|
||||
>
|
||||
<div style={{ fontWeight: 600, fontSize: 16, marginBottom: 12 }}>选择素材</div>
|
||||
<div style={{ maxHeight: 300, overflow: 'auto' }}>
|
||||
{materials.map((material) => (
|
||||
<div
|
||||
key={material.id}
|
||||
style={{ display: 'flex', alignItems: 'center', marginBottom: 8, cursor: 'pointer' }}
|
||||
onClick={() => handleMaterialSelect(material)}
|
||||
>
|
||||
<img src={material.preview} alt={material.name} style={{ width: 40, height: 40, marginRight: 8, borderRadius: 4 }} />
|
||||
<span>{material.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Dialog>
|
||||
<ImageViewer
|
||||
images={selectedMaterials.map((m: Material) => m.preview)}
|
||||
visible={isPreviewOpen}
|
||||
onClose={handleImagePreviewClose}
|
||||
index={0}
|
||||
/>
|
||||
</div>
|
||||
{/* 订单导入区块 */}
|
||||
<div style={{ margin: '16px 0' }}>
|
||||
<Button theme="default" onClick={() => setIsImportDialogOpen(true)}>
|
||||
{importedTags.length ? `已导入订单（${importedTags.length}）` : '导入订单'}
|
||||
</Button>
|
||||
<Dialog
|
||||
visible={isImportDialogOpen}
|
||||
onClose={handleImportDialogClose}
|
||||
>
|
||||
<div style={{ fontWeight: 600, fontSize: 16, marginBottom: 12 }}>导入订单</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<Button theme="primary" onClick={handleDownloadTemplate} style={{ marginRight: 8 }}>
|
||||
下载模板
|
||||
</Button>
|
||||
<input
|
||||
type="file"
|
||||
accept=".csv"
|
||||
onChange={handleFileImport}
|
||||
style={{ display: 'inline-block' }}
|
||||
/>
|
||||
</div>
|
||||
{importedTags.length > 0 && (
|
||||
<Table
|
||||
columns={[
|
||||
{ colKey: 'phone', title: '手机号' },
|
||||
{ colKey: 'wechat', title: '微信号' },
|
||||
{ colKey: 'source', title: '来源' },
|
||||
{ colKey: 'orderAmount', title: '订单金额' },
|
||||
{ colKey: 'orderDate', title: '下单日期' },
|
||||
]}
|
||||
data={importedTags}
|
||||
rowKey="phone"
|
||||
style={{ marginTop: 12 }}
|
||||
/>
|
||||
)}
|
||||
</Dialog>
|
||||
</div>
|
||||
{/* 电话获客设置区块，仅在选择电话获客场景时显示 */}
|
||||
{formData.scenario === 'phone' && (
|
||||
<div style={{ margin: '16px 0' }}>
|
||||
<Button theme="default" onClick={() => setIsPhoneSettingsOpen(true)}>
|
||||
电话获客设置
|
||||
</Button>
|
||||
<Dialog
|
||||
visible={isPhoneSettingsOpen}
|
||||
onClose={handlePhoneSettingsDialogClose}
|
||||
>
|
||||
<div style={{ fontWeight: 600, fontSize: 16, marginBottom: 12 }}>电话获客设置</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<span>自动加好友</span>
|
||||
<Switch
|
||||
value={phoneSettings.autoAdd}
|
||||
onChange={(v) => setPhoneSettings((s) => ({ ...s, autoAdd: v }))}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<span>语音转文字</span>
|
||||
<Switch
|
||||
value={phoneSettings.speechToText}
|
||||
onChange={(v) => setPhoneSettings((s) => ({ ...s, speechToText: v }))}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<span>问题提取</span>
|
||||
<Switch
|
||||
value={phoneSettings.questionExtraction}
|
||||
onChange={(v) => setPhoneSettings((s) => ({ ...s, questionExtraction: v }))}
|
||||
/>
|
||||
</div>
|
||||
<Button block theme="primary" onClick={handlePhoneSettingsUpdate}>
|
||||
保存设置
|
||||
</Button>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
)}
|
||||
{/* 微信群设置区块，仅在选择微信群场景时显示 */}
|
||||
{formData.scenario === 'weixinqun' && (
|
||||
<div style={{ margin: '16px 0' }}>
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<Input
|
||||
value={weixinqunName}
|
||||
onChange={setWeixinqunName}
|
||||
placeholder="微信群名称"
|
||||
maxlength={20}
|
||||
onBlur={() => onChange({ ...formData, weixinqunName })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Input
|
||||
value={weixinqunNotice}
|
||||
onChange={setWeixinqunNotice}
|
||||
placeholder="群公告/欢迎语"
|
||||
maxlength={50}
|
||||
onBlur={() => onChange({ ...formData, weixinqunNotice })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Button block theme="primary" onClick={onNext}>下一步</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
277
nkebao/src/pages/scenarios/new/steps/FriendRequestSettings.tsx
Normal file
277
nkebao/src/pages/scenarios/new/steps/FriendRequestSettings.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { HelpCircle, MessageSquare, AlertCircle } from "lucide-react"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
import { ChevronsUpDown } from "lucide-react"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
|
||||
interface FriendRequestSettingsProps {
|
||||
formData: any
|
||||
onChange: (data: any) => void
|
||||
onNext: () => void
|
||||
onPrev: () => void
|
||||
}
|
||||
|
||||
// 招呼语模板
|
||||
const greetingTemplates = [
|
||||
"你好，请通过",
|
||||
"你好,了解XX,请通过",
|
||||
"你好，我是XX产品的客服请通过",
|
||||
"你好，感谢关注我们的产品",
|
||||
"你好，很高兴为您服务",
|
||||
]
|
||||
|
||||
// 备注类型选项
|
||||
const remarkTypes = [
|
||||
{ value: "phone", label: "手机号" },
|
||||
{ value: "nickname", label: "昵称" },
|
||||
{ value: "source", label: "来源" },
|
||||
]
|
||||
|
||||
// 模拟设备数据
|
||||
const mockDevices = [
|
||||
{ id: "1", name: "iPhone 13 Pro", status: "online" },
|
||||
{ id: "2", name: "Xiaomi 12", status: "online" },
|
||||
{ id: "3", name: "Huawei P40", status: "offline" },
|
||||
{ id: "4", name: "OPPO Find X3", status: "online" },
|
||||
{ id: "5", name: "Samsung S21", status: "online" },
|
||||
]
|
||||
|
||||
export function FriendRequestSettings({ formData, onChange, onNext, onPrev }: FriendRequestSettingsProps) {
|
||||
const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false)
|
||||
const [hasWarnings, setHasWarnings] = useState(false)
|
||||
const [isDeviceSelectorOpen, setIsDeviceSelectorOpen] = useState(false)
|
||||
const [selectedDevices, setSelectedDevices] = useState<any[]>(formData.selectedDevices || [])
|
||||
|
||||
// 获取场景标题
|
||||
const getScenarioTitle = () => {
|
||||
switch (formData.scenario) {
|
||||
case "douyin":
|
||||
return "抖音直播"
|
||||
case "xiaohongshu":
|
||||
return "小红书"
|
||||
case "weixinqun":
|
||||
return "微信群"
|
||||
case "gongzhonghao":
|
||||
return "公众号"
|
||||
default:
|
||||
return formData.planName || "获客计划"
|
||||
}
|
||||
}
|
||||
|
||||
// 使用useEffect设置默认值
|
||||
useEffect(() => {
|
||||
if (!formData.greeting) {
|
||||
onChange({
|
||||
...formData,
|
||||
greeting: "你好，请通过",
|
||||
remarkType: "phone", // 默认选择手机号
|
||||
remarkFormat: `手机号+${getScenarioTitle()}`, // 默认备注格式
|
||||
addFriendInterval: 1,
|
||||
})
|
||||
}
|
||||
}, [formData, formData.greeting, onChange])
|
||||
|
||||
// 检查是否有未完成的必填项
|
||||
useEffect(() => {
|
||||
const hasIncompleteFields = !formData.greeting?.trim()
|
||||
setHasWarnings(hasIncompleteFields)
|
||||
}, [formData])
|
||||
|
||||
const handleTemplateSelect = (template: string) => {
|
||||
onChange({ ...formData, greeting: template })
|
||||
setIsTemplateDialogOpen(false)
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
// 即使有警告也允许进入下一步，但会显示提示
|
||||
onNext()
|
||||
}
|
||||
|
||||
const toggleDeviceSelection = (device: any) => {
|
||||
const isSelected = selectedDevices.some((d) => d.id === device.id)
|
||||
let newSelectedDevices
|
||||
|
||||
if (isSelected) {
|
||||
newSelectedDevices = selectedDevices.filter((d) => d.id !== device.id)
|
||||
} else {
|
||||
newSelectedDevices = [...selectedDevices, device]
|
||||
}
|
||||
|
||||
setSelectedDevices(newSelectedDevices)
|
||||
onChange({ ...formData, selectedDevices: newSelectedDevices })
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<Label className="text-base">选择设备</Label>
|
||||
<div className="relative mt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between"
|
||||
onClick={() => setIsDeviceSelectorOpen(!isDeviceSelectorOpen)}
|
||||
>
|
||||
{selectedDevices.length ? `已选择 ${selectedDevices.length} 个设备` : "选择设备"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
|
||||
{isDeviceSelectorOpen && (
|
||||
<div className="absolute z-10 w-full mt-1 bg-white border rounded-md shadow-lg">
|
||||
<div className="p-2">
|
||||
<Input placeholder="搜索设备..." className="mb-2" />
|
||||
<div className="max-h-60 overflow-auto">
|
||||
{mockDevices.map((device) => (
|
||||
<div
|
||||
key={device.id}
|
||||
className="flex items-center justify-between p-2 hover:bg-gray-100 cursor-pointer"
|
||||
onClick={() => toggleDeviceSelection(device)}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
checked={selectedDevices.some((d) => d.id === device.id)}
|
||||
onCheckedChange={() => toggleDeviceSelection(device)}
|
||||
/>
|
||||
<span>{device.name}</span>
|
||||
</div>
|
||||
<span className={`text-xs ${device.status === "online" ? "text-green-500" : "text-gray-400"}`}>
|
||||
{device.status === "online" ? "在线" : "离线"}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Label className="text-base">好友备注</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<HelpCircle className="h-4 w-4 text-gray-400" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>设置添加好友时的备注格式</p>
|
||||
<p className="mt-1">备注格式预览：</p>
|
||||
<p>{formData.remarkType === "phone" && `138****1234+${getScenarioTitle()}`}</p>
|
||||
<p>{formData.remarkType === "nickname" && `小红书用户2851+${getScenarioTitle()}`}</p>
|
||||
<p>{formData.remarkType === "source" && `抖音直播+${getScenarioTitle()}`}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<Select
|
||||
value={formData.remarkType || "phone"}
|
||||
onValueChange={(value) => onChange({ ...formData, remarkType: value })}
|
||||
>
|
||||
<SelectTrigger className="w-full mt-2">
|
||||
<SelectValue placeholder="选择备注类型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{remarkTypes.map((type) => (
|
||||
<SelectItem key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-base">招呼语</Label>
|
||||
<Button variant="ghost" size="sm" onClick={() => setIsTemplateDialogOpen(true)} className="text-blue-500">
|
||||
<MessageSquare className="h-4 w-4 mr-2" />
|
||||
参考模板
|
||||
</Button>
|
||||
</div>
|
||||
<Input
|
||||
value={formData.greeting}
|
||||
onChange={(e) => onChange({ ...formData, greeting: e.target.value })}
|
||||
placeholder="请输入招呼语"
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-base">添加间隔</Label>
|
||||
<div className="flex items-center space-x-2 mt-2">
|
||||
<Input
|
||||
type="number"
|
||||
value={formData.addFriendInterval || 1}
|
||||
onChange={(e) => onChange({ ...formData, addFriendInterval: Number(e.target.value) })}
|
||||
className="w-32"
|
||||
/>
|
||||
<span>分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-base">允许加人的时间段</Label>
|
||||
<div className="flex items-center space-x-2 mt-2">
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.addFriendTimeStart || "09:00"}
|
||||
onChange={(e) => onChange({ ...formData, addFriendTimeStart: e.target.value })}
|
||||
className="w-32"
|
||||
/>
|
||||
<span>至</span>
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.addFriendTimeEnd || "18:00"}
|
||||
onChange={(e) => onChange({ ...formData, addFriendTimeEnd: e.target.value })}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasWarnings && (
|
||||
<Alert className="bg-amber-50 border-amber-200">
|
||||
<AlertCircle className="h-4 w-4 text-amber-500" />
|
||||
<AlertDescription>您有未完成的设置项，建议完善后再进入下一步。</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between pt-4">
|
||||
<Button variant="outline" onClick={onPrev}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={handleNext}>下一步</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog open={isTemplateDialogOpen} onOpenChange={setIsTemplateDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>招呼语模板</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-2">
|
||||
{greetingTemplates.map((template, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant="outline"
|
||||
className="w-full justify-start h-auto py-3 px-4"
|
||||
onClick={() => handleTemplateSelect(template)}
|
||||
>
|
||||
{template}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
552
nkebao/src/pages/scenarios/new/steps/MessageSettings.tsx
Normal file
552
nkebao/src/pages/scenarios/new/steps/MessageSettings.tsx
Normal file
@@ -0,0 +1,552 @@
|
||||
import { useState } from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import {
|
||||
MessageSquare,
|
||||
ImageIcon,
|
||||
Video,
|
||||
FileText,
|
||||
Link2,
|
||||
Users,
|
||||
AppWindowIcon as Window,
|
||||
Plus,
|
||||
X,
|
||||
Upload,
|
||||
Clock,
|
||||
} from "lucide-react"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { toast } from "@/components/ui/use-toast"
|
||||
|
||||
interface MessageContent {
|
||||
id: string
|
||||
type: "text" | "image" | "video" | "file" | "miniprogram" | "link" | "group"
|
||||
content: string
|
||||
sendInterval?: number
|
||||
intervalUnit?: "seconds" | "minutes"
|
||||
scheduledTime?: {
|
||||
hour: number
|
||||
minute: number
|
||||
second: number
|
||||
}
|
||||
title?: string
|
||||
description?: string
|
||||
address?: string
|
||||
coverImage?: string
|
||||
groupId?: string
|
||||
linkUrl?: string
|
||||
}
|
||||
|
||||
interface DayPlan {
|
||||
day: number
|
||||
messages: MessageContent[]
|
||||
}
|
||||
|
||||
interface MessageSettingsProps {
|
||||
formData: any
|
||||
onChange: (data: any) => void
|
||||
onNext: () => void
|
||||
onPrev: () => void
|
||||
}
|
||||
|
||||
// 消息类型配置
|
||||
const messageTypes = [
|
||||
{ id: "text", icon: MessageSquare, label: "文本" },
|
||||
{ id: "image", icon: ImageIcon, label: "图片" },
|
||||
{ id: "video", icon: Video, label: "视频" },
|
||||
{ id: "file", icon: FileText, label: "文件" },
|
||||
{ id: "miniprogram", icon: Window, label: "小程序" },
|
||||
{ id: "link", icon: Link2, label: "链接" },
|
||||
{ id: "group", icon: Users, label: "邀请入群" },
|
||||
]
|
||||
|
||||
// 模拟群组数据
|
||||
const mockGroups = [
|
||||
{ id: "1", name: "产品交流群1", memberCount: 156 },
|
||||
{ id: "2", name: "产品交流群2", memberCount: 234 },
|
||||
{ id: "3", name: "产品交流群3", memberCount: 89 },
|
||||
]
|
||||
|
||||
export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageSettingsProps) {
|
||||
const [dayPlans, setDayPlans] = useState<DayPlan[]>([
|
||||
{
|
||||
day: 0,
|
||||
messages: [
|
||||
{
|
||||
id: "1",
|
||||
type: "text",
|
||||
content: "",
|
||||
sendInterval: 5,
|
||||
intervalUnit: "seconds", // 默认改为秒
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const [isAddDayPlanOpen, setIsAddDayPlanOpen] = useState(false)
|
||||
const [isGroupSelectOpen, setIsGroupSelectOpen] = useState(false)
|
||||
const [selectedGroupId, setSelectedGroupId] = useState("")
|
||||
|
||||
// 添加新消息
|
||||
const handleAddMessage = (dayIndex: number, type = "text") => {
|
||||
const updatedPlans = [...dayPlans]
|
||||
const newMessage: MessageContent = {
|
||||
id: Date.now().toString(),
|
||||
type: type as MessageContent["type"],
|
||||
content: "",
|
||||
}
|
||||
|
||||
if (dayPlans[dayIndex].day === 0) {
|
||||
// 即时消息使用间隔设置
|
||||
newMessage.sendInterval = 5
|
||||
newMessage.intervalUnit = "seconds" // 默认改为秒
|
||||
} else {
|
||||
// 非即时消息使用具体时间设置
|
||||
newMessage.scheduledTime = {
|
||||
hour: 9,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
}
|
||||
}
|
||||
|
||||
updatedPlans[dayIndex].messages.push(newMessage)
|
||||
setDayPlans(updatedPlans)
|
||||
onChange({ ...formData, messagePlans: updatedPlans })
|
||||
}
|
||||
|
||||
// 更新消息内容
|
||||
const handleUpdateMessage = (dayIndex: number, messageIndex: number, updates: Partial<MessageContent>) => {
|
||||
const updatedPlans = [...dayPlans]
|
||||
updatedPlans[dayIndex].messages[messageIndex] = {
|
||||
...updatedPlans[dayIndex].messages[messageIndex],
|
||||
...updates,
|
||||
}
|
||||
setDayPlans(updatedPlans)
|
||||
onChange({ ...formData, messagePlans: updatedPlans })
|
||||
}
|
||||
|
||||
// 删除消息
|
||||
const handleRemoveMessage = (dayIndex: number, messageIndex: number) => {
|
||||
const updatedPlans = [...dayPlans]
|
||||
updatedPlans[dayIndex].messages.splice(messageIndex, 1)
|
||||
setDayPlans(updatedPlans)
|
||||
onChange({ ...formData, messagePlans: updatedPlans })
|
||||
}
|
||||
|
||||
// 切换时间单位
|
||||
const toggleIntervalUnit = (dayIndex: number, messageIndex: number) => {
|
||||
const message = dayPlans[dayIndex].messages[messageIndex]
|
||||
const newUnit = message.intervalUnit === "minutes" ? "seconds" : "minutes"
|
||||
handleUpdateMessage(dayIndex, messageIndex, { intervalUnit: newUnit })
|
||||
}
|
||||
|
||||
// 添加新的天数计划
|
||||
const handleAddDayPlan = () => {
|
||||
const newDay = dayPlans.length
|
||||
setDayPlans([
|
||||
...dayPlans,
|
||||
{
|
||||
day: newDay,
|
||||
messages: [
|
||||
{
|
||||
id: Date.now().toString(),
|
||||
type: "text",
|
||||
content: "",
|
||||
scheduledTime: {
|
||||
hour: 9,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
setIsAddDayPlanOpen(false)
|
||||
toast({
|
||||
title: "添加成功",
|
||||
description: `已添加第${newDay}天的消息计划`,
|
||||
})
|
||||
}
|
||||
|
||||
// 选择群组
|
||||
const handleSelectGroup = (groupId: string) => {
|
||||
setSelectedGroupId(groupId)
|
||||
setIsGroupSelectOpen(false)
|
||||
toast({
|
||||
title: "选择成功",
|
||||
description: `已选择群组：${mockGroups.find((g) => g.id === groupId)?.name}`,
|
||||
})
|
||||
}
|
||||
|
||||
// 处理文件上传
|
||||
const handleFileUpload = (dayIndex: number, messageIndex: number, type: "image" | "video" | "file") => {
|
||||
// 模拟文件上传
|
||||
toast({
|
||||
title: "上传成功",
|
||||
description: `${type === "image" ? "图片" : type === "video" ? "视频" : "文件"}上传成功`,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">消息设置</h2>
|
||||
<Button variant="outline" size="icon" onClick={() => setIsAddDayPlanOpen(true)}>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="0" className="w-full">
|
||||
<TabsList className="w-full">
|
||||
{dayPlans.map((plan) => (
|
||||
<TabsTrigger key={plan.day} value={plan.day.toString()} className="flex-1">
|
||||
{plan.day === 0 ? "即时消息" : `第${plan.day}天`}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
{dayPlans.map((plan, dayIndex) => (
|
||||
<TabsContent key={plan.day} value={plan.day.toString()}>
|
||||
<div className="space-y-4">
|
||||
{plan.messages.map((message, messageIndex) => (
|
||||
<div key={message.id} className="space-y-4 p-4 bg-gray-50 rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
{plan.day === 0 ? (
|
||||
<>
|
||||
<Label>间隔</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={String(message.sendInterval)}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, { sendInterval: Number(e.target.value) })
|
||||
}
|
||||
className="w-20"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleIntervalUnit(dayIndex, messageIndex)}
|
||||
className="flex items-center space-x-1"
|
||||
>
|
||||
<Clock className="h-3 w-3" />
|
||||
<span>{message.intervalUnit === "minutes" ? "分钟" : "秒"}</span>
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Label>发送时间</Label>
|
||||
<div className="flex items-center space-x-1">
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
max={23}
|
||||
value={String(message.scheduledTime?.hour || 0)}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, {
|
||||
scheduledTime: {
|
||||
...(message.scheduledTime || { hour: 0, minute: 0, second: 0 }),
|
||||
hour: Number(e.target.value),
|
||||
},
|
||||
})
|
||||
}
|
||||
className="w-16"
|
||||
/>
|
||||
<span>:</span>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
max={59}
|
||||
value={String(message.scheduledTime?.minute || 0)}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, {
|
||||
scheduledTime: {
|
||||
...(message.scheduledTime || { hour: 0, minute: 0, second: 0 }),
|
||||
minute: Number(e.target.value),
|
||||
},
|
||||
})
|
||||
}
|
||||
className="w-16"
|
||||
/>
|
||||
<span>:</span>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
max={59}
|
||||
value={String(message.scheduledTime?.second || 0)}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, {
|
||||
scheduledTime: {
|
||||
...(message.scheduledTime || { hour: 0, minute: 0, second: 0 }),
|
||||
second: Number(e.target.value),
|
||||
},
|
||||
})
|
||||
}
|
||||
className="w-16"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={() => handleRemoveMessage(dayIndex, messageIndex)}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2 bg-white p-2 rounded-lg">
|
||||
{messageTypes.map((type) => (
|
||||
<Button
|
||||
key={type.id}
|
||||
variant={message.type === type.id ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => handleUpdateMessage(dayIndex, messageIndex, { type: type.id as any })}
|
||||
className="flex flex-col items-center p-2 h-auto"
|
||||
>
|
||||
<type.icon className="h-4 w-4" />
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{message.type === "text" && (
|
||||
<Textarea
|
||||
value={message.content}
|
||||
onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { content: e.target.value })}
|
||||
placeholder="请输入消息内容"
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
)}
|
||||
|
||||
{message.type === "miniprogram" && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
标题<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
value={message.title}
|
||||
onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { title: e.target.value })}
|
||||
placeholder="请输入小程序标题"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>描述</Label>
|
||||
<Input
|
||||
value={message.description}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, { description: e.target.value })
|
||||
}
|
||||
placeholder="请输入小程序描述"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
链接<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
value={message.address}
|
||||
onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { address: e.target.value })}
|
||||
placeholder="请输入小程序路径"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
封面<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<div className="border-2 border-dashed rounded-lg p-4 text-center">
|
||||
{message.coverImage ? (
|
||||
<div className="relative">
|
||||
<img
|
||||
src={message.coverImage || "/placeholder.svg"}
|
||||
alt="封面"
|
||||
className="max-w-[200px] mx-auto rounded-lg"
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="absolute top-2 right-2"
|
||||
onClick={() => handleUpdateMessage(dayIndex, messageIndex, { coverImage: undefined })}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full h-[120px]"
|
||||
onClick={() => handleFileUpload(dayIndex, messageIndex, "image")}
|
||||
>
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
上传封面
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{message.type === "link" && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
标题<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
value={message.title}
|
||||
onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { title: e.target.value })}
|
||||
placeholder="请输入链接标题"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>描述</Label>
|
||||
<Input
|
||||
value={message.description}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, { description: e.target.value })
|
||||
}
|
||||
placeholder="请输入链接描述"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
链接<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
value={message.linkUrl}
|
||||
onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { linkUrl: e.target.value })}
|
||||
placeholder="请输入链接地址"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
封面<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<div className="border-2 border-dashed rounded-lg p-4 text-center">
|
||||
{message.coverImage ? (
|
||||
<div className="relative">
|
||||
<img
|
||||
src={message.coverImage || "/placeholder.svg"}
|
||||
alt="封面"
|
||||
className="max-w-[200px] mx-auto rounded-lg"
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="absolute top-2 right-2"
|
||||
onClick={() => handleUpdateMessage(dayIndex, messageIndex, { coverImage: undefined })}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full h-[120px]"
|
||||
onClick={() => handleFileUpload(dayIndex, messageIndex, "image")}
|
||||
>
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
上传封面
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{message.type === "group" && (
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
选择群聊<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start"
|
||||
onClick={() => setIsGroupSelectOpen(true)}
|
||||
>
|
||||
{selectedGroupId ? mockGroups.find((g) => g.id === selectedGroupId)?.name : "选择邀请入的群"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(message.type === "image" || message.type === "video" || message.type === "file") && (
|
||||
<div className="border-2 border-dashed rounded-lg p-4 text-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full h-[120px]"
|
||||
onClick={() => handleFileUpload(dayIndex, messageIndex, message.type as any)}
|
||||
>
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
上传{message.type === "image" ? "图片" : message.type === "video" ? "视频" : "文件"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<Button variant="outline" onClick={() => handleAddMessage(dayIndex)} className="w-full">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
添加消息
|
||||
</Button>
|
||||
</div>
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
|
||||
<div className="flex justify-between pt-4">
|
||||
<Button variant="outline" onClick={onPrev}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={onNext}>下一步</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 添加天数计划弹窗 */}
|
||||
<Dialog open={isAddDayPlanOpen} onOpenChange={setIsAddDayPlanOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>添加消息计划</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="py-4">
|
||||
<p className="text-sm text-gray-500 mb-4">选择要添加的消息计划类型</p>
|
||||
<Button onClick={handleAddDayPlan} className="w-full">
|
||||
添加第 {dayPlans.length} 天计划
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 选择群聊弹窗 */}
|
||||
<Dialog open={isGroupSelectOpen} onOpenChange={setIsGroupSelectOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>选择群聊</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="py-4">
|
||||
<div className="space-y-2">
|
||||
{mockGroups.map((group) => (
|
||||
<div
|
||||
key={group.id}
|
||||
className={`p-4 rounded-lg cursor-pointer hover:bg-gray-100 ${
|
||||
selectedGroupId === group.id ? "bg-blue-50 border border-blue-200" : ""
|
||||
}`}
|
||||
onClick={() => handleSelectGroup(group.id)}
|
||||
>
|
||||
<div className="font-medium">{group.name}</div>
|
||||
<div className="text-sm text-gray-500">成员数：{group.memberCount}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsGroupSelectOpen(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={() => setIsGroupSelectOpen(false)}>确定</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
205
nkebao/src/pages/scenarios/new/steps/TagSettings.tsx
Normal file
205
nkebao/src/pages/scenarios/new/steps/TagSettings.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
|
||||
import { Plus, X, Edit2, AlertCircle } from "lucide-react"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
|
||||
interface TagSettingsProps {
|
||||
formData: any
|
||||
onChange: (data: any) => void
|
||||
onNext?: () => void
|
||||
onPrev?: () => void
|
||||
}
|
||||
|
||||
interface Tag {
|
||||
id: string
|
||||
name: string
|
||||
keywords: string[]
|
||||
}
|
||||
|
||||
export function TagSettings({ formData, onChange, onNext, onPrev }: TagSettingsProps) {
|
||||
const [tags, setTags] = useState<Tag[]>(formData.tags || [])
|
||||
const [isAddTagDialogOpen, setIsAddTagDialogOpen] = useState(false)
|
||||
const [editingTag, setEditingTag] = useState<Tag | null>(null)
|
||||
const [newTagName, setNewTagName] = useState("")
|
||||
const [newTagKeywords, setNewTagKeywords] = useState("")
|
||||
const [hasWarnings, setHasWarnings] = useState(false)
|
||||
|
||||
// 当标签更新时，更新formData
|
||||
useEffect(() => {
|
||||
onChange({ ...formData, tags })
|
||||
}, [tags, onChange])
|
||||
|
||||
// 检查是否有标签
|
||||
useEffect(() => {
|
||||
setHasWarnings(tags.length === 0)
|
||||
}, [tags])
|
||||
|
||||
const handleAddTag = () => {
|
||||
if (!newTagName.trim()) return
|
||||
|
||||
const keywordsArray = newTagKeywords
|
||||
.split("\n")
|
||||
.map((k) => k.trim())
|
||||
.filter((k) => k !== "")
|
||||
|
||||
if (editingTag) {
|
||||
// 编辑现有标签
|
||||
setTags(
|
||||
tags.map((tag) => (tag.id === editingTag.id ? { ...tag, name: newTagName, keywords: keywordsArray } : tag)),
|
||||
)
|
||||
} else {
|
||||
// 添加新标签
|
||||
setTags([
|
||||
...tags,
|
||||
{
|
||||
id: Date.now().toString(),
|
||||
name: newTagName,
|
||||
keywords: keywordsArray,
|
||||
},
|
||||
])
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
setNewTagName("")
|
||||
setNewTagKeywords("")
|
||||
setEditingTag(null)
|
||||
setIsAddTagDialogOpen(false)
|
||||
}
|
||||
|
||||
const handleEditTag = (tag: Tag) => {
|
||||
setEditingTag(tag)
|
||||
setNewTagName(tag.name)
|
||||
setNewTagKeywords(tag.keywords.join("\n"))
|
||||
setIsAddTagDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleDeleteTag = (tagId: string) => {
|
||||
setTags(tags.filter((tag) => tag.id !== tagId))
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
// 确保onNext是一个函数
|
||||
if (typeof onNext === "function") {
|
||||
onNext()
|
||||
}
|
||||
}
|
||||
|
||||
const handlePrev = () => {
|
||||
// 确保onPrev是一个函数
|
||||
if (typeof onPrev === "function") {
|
||||
onPrev()
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
setNewTagName("")
|
||||
setNewTagKeywords("")
|
||||
setEditingTag(null)
|
||||
setIsAddTagDialogOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full p-4 bg-gray-50">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Label className="text-base font-medium">标签列表</Label>
|
||||
<Button onClick={() => setIsAddTagDialogOpen(true)} size="sm">
|
||||
<Plus className="h-4 w-4 mr-1" /> 添加标签
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{tags.length === 0 ? (
|
||||
<div className="border rounded-md p-8 text-center text-gray-500">
|
||||
暂无标签，点击"添加标签"按钮来创建标签
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{tags.map((tag) => (
|
||||
<div key={tag.id} className="border rounded-md p-3 flex justify-between items-center">
|
||||
<div>
|
||||
<Badge className="mb-2">{tag.name}</Badge>
|
||||
<div className="text-sm text-gray-500">
|
||||
{tag.keywords.length > 0 ? `关键词: ${tag.keywords.join(", ")}` : "无关键词"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<Button variant="ghost" size="sm" onClick={() => handleEditTag(tag)}>
|
||||
<Edit2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => handleDeleteTag(tag.id)}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasWarnings && (
|
||||
<Alert variant="destructive" className="mt-4 bg-amber-50 border-amber-200">
|
||||
<AlertCircle className="h-4 w-4 text-amber-500" />
|
||||
<AlertDescription>建议添加至少一个标签，以便更好地管理客户。</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between pt-4">
|
||||
<Button variant="outline" onClick={handlePrev}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button onClick={handleNext}>下一步</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog open={isAddTagDialogOpen} onOpenChange={setIsAddTagDialogOpen}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingTag ? "编辑标签" : "添加标签"}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-2">
|
||||
<div className="bg-green-50 p-3 rounded-md text-sm text-green-700">
|
||||
设置关键字后，当评论/私信有涉及到关键字时自动添加标签
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Input
|
||||
placeholder="请输入标签名称(最长6位字符)"
|
||||
value={newTagName}
|
||||
onChange={(e) => setNewTagName(e.target.value.slice(0, 6))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Textarea
|
||||
placeholder="(非必填项) 请输入关键词，一行代表一个关键词"
|
||||
rows={5}
|
||||
value={newTagKeywords}
|
||||
onChange={(e) => setNewTagKeywords(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="sm:justify-end">
|
||||
<Button type="button" variant="outline" onClick={handleCancel}>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="button" onClick={handleAddTag}>
|
||||
确定
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user