feat: 本次提交更新内容如下

样式构建完成

nkebao/src/App.tsx

@@ -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>

nkebao/src/api/scenarios.ts

@@ -237,4 +237,6 @@ export const transformSceneItem = (item: SceneItem): Channel => {
       growth: growthPercent
     }
   };
-}; 
+}; 
+
+export const getPlanScenes = () => get<any>('/v1/plan/scenes'); 

nkebao/src/components/ui/alert.tsx

@@ -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 } 

nkebao/src/components/ui/dialog.tsx

@@ -1,100 +1,97 @@
-import React, { useEffect } from 'react';
+"use client"
 
-interface DialogProps {
+import * as React from "react"
-  open: boolean;
+import * as DialogPrimitive from "@radix-ui/react-dialog"
-  onOpenChange: (open: boolean) => void;
+import { X } from "lucide-react"
-  children: React.ReactNode;
-}
 
-export function Dialog({ open, onOpenChange, children }: DialogProps) {
+import { cn } from "@/utils"
-  useEffect(() => {
-    if (open) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'unset';
-    }
 
-    return () => {
+const Dialog = DialogPrimitive.Root
-      document.body.style.overflow = 'unset';
-    };
-  }, [open]);
 
-  if (!open) return null;
+const DialogTrigger = DialogPrimitive.Trigger
 
-  return (
+const DialogPortal = DialogPrimitive.Portal
-    <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>
-  );
-}
 
-interface DialogContentProps {
+const DialogClose = DialogPrimitive.Close
-  children: React.ReactNode;
-  className?: string;
-}
 
-export function DialogContent({ children, className = '' }: DialogContentProps) {
+const DialogOverlay = React.forwardRef<
-  return (
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
-    <div className={`p-6 bg-white rounded-lg shadow-xl mx-4 ${className}`}>
+  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 {
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  children: React.ReactNode;
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
-  className?: string;
+)
-}
+DialogHeader.displayName = "DialogHeader"
 
-export function DialogHeader({ children, className = '' }: DialogHeaderProps) {
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  return (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
-    <div className={`mb-4 ${className}`}>
+)
-      {children}
+DialogFooter.displayName = "DialogFooter"
-    </div>
-  );
-}
 
-interface DialogTitleProps {
+const DialogTitle = React.forwardRef<
-  children: React.ReactNode;
+  React.ElementRef<typeof DialogPrimitive.Title>,
-  className?: string;
+  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) {
+const DialogDescription = React.forwardRef<
-  return (
+  React.ElementRef<typeof DialogPrimitive.Description>,
-    <h2 className={`text-lg font-semibold text-gray-900 ${className}`}>
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
-      {children}
+>(({ className, ...props }, ref) => (
-    </h2>
+  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-  );
+))
-}
+DialogDescription.displayName = DialogPrimitive.Description.displayName
 
-interface DialogDescriptionProps {
+export {
-  children: React.ReactNode;
+  Dialog,
-  className?: string;
+  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>
-  );
-} 

nkebao/src/components/ui/table.tsx

@@ -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 } 

nkebao/src/components/ui/toast.tsx

@@ -1,132 +1,223 @@
-import React, { createContext, useContext, useState, ReactNode } from 'react';
+"use client"
-import { X } from 'lucide-react';
 
-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;
+  title?: React.ReactNode;
-  description?: string;
+  description?: React.ReactNode;
-  variant?: 'default' | 'destructive';
+  action?: ToastActionElement;
-}
-
-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;
 };
 
-interface ToastProviderProps {
+const actionTypes = {
-  children: ReactNode;
+  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) {
+type ActionType = typeof actionTypes;
-  const [toasts, setToasts] = useState<Toast[]>([]);
+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'>) => {
+interface State {
-    const id = Math.random().toString(36).substr(2, 9);
+  toasts: ToasterToast[];
-    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>
-  );
 }
 
-// 直接导出toast函数，用于在组件中直接使用
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
-export const toast = (toastData: Omit<Toast, 'id'>) => {
+const addToRemoveQueue = (toastId: string) => {
-  // 这里需要确保ToastProvider已经包装了应用
+  if (toastTimeouts.has(toastId)) return;
-  // 在实际使用中，应该通过useToast hook来调用
+  const timeout = setTimeout(() => {
-  console.warn('toast function called without context. Please use useToast hook instead.');
+    toastTimeouts.delete(toastId);
-  
+    dispatch({ type: "REMOVE_TOAST", toastId });
-  // 创建一个简单的DOM toast作为fallback
+  }, TOAST_REMOVE_DELAY);
-  const toastElement = document.createElement('div');
+  toastTimeouts.set(toastId, timeout);
-  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' 
+export const reducer = (state: State, action: Action): State => {
-      : 'border-gray-200'
+  switch (action.type) {
-  }`;
+    case "ADD_TOAST":
-  
+      return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT) };
-  toastElement.innerHTML = `
+    case "UPDATE_TOAST":
-    <div class="flex items-start justify-between">
+      return {
-      <div class="flex-1">
+        ...state,
-        <h4 class="font-medium ${toastData.variant === 'destructive' ? 'text-red-800' : 'text-gray-900'}">
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
-          ${toastData.title}
+      };
-        </h4>
+    case "DISMISS_TOAST": {
-        ${toastData.description ? `
+      const { toastId } = action;
-          <p class="text-sm mt-1 ${toastData.variant === 'destructive' ? 'text-red-600' : 'text-gray-600'}">
+      if (toastId) {
-            ${toastData.description}
+        addToRemoveQueue(toastId);
-          </p>
+      } else {
-        ` : ''}
+        state.toasts.forEach((toast) => addToRemoveQueue(toast.id));
-      </div>
+      }
-      <button class="ml-4 text-gray-400 hover:text-gray-600" onclick="this.parentElement.parentElement.remove()">
+      return {
-        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        ...state,
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+        toasts: state.toasts.map((t) =>
-        </svg>
+          t.id === toastId || toastId === undefined ? { ...t, open: false } : t
-      </button>
+        ),
-    </div>
+      };
-  `;
-  
-  document.body.appendChild(toastElement);
-  
-  // 自动移除
-  setTimeout(() => {
-    if (toastElement.parentElement) {
-      toastElement.remove();
     }
-  }, 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 }; 

nkebao/src/components/ui/use-toast.ts

@@ -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 } 

nkebao/src/pages/scenarios/NewPlan.tsx

@@ -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">支持变量：&#123;name&#125;（对方昵称）</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>
-  );
-} 

nkebao/src/pages/scenarios/new/page.tsx

@@ -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>
+
+  )
+}

nkebao/src/pages/scenarios/new/steps/BasicSettings.tsx

@@ -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>
+  );
+}

nkebao/src/pages/scenarios/new/steps/FriendRequestSettings.tsx

@@ -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>
+  )
+}

nkebao/src/pages/scenarios/new/steps/MessageSettings.tsx

@@ -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>
+  )
+}

nkebao/src/pages/scenarios/new/steps/TagSettings.tsx

@@ -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>
+  )
+}
+