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

存一下

nkebao/src/components/icons/EyeIcon.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+export function EyeIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      height="24"
+      width="24"
+      {...props}
+    >
+      <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}
+
+export default EyeIcon;

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

@@ -1,20 +1,17 @@
-import type React from "react"
+import type React from "react";
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react";
-import { Button, Input, Tag, Grid, Dialog, ImageViewer, Table, Switch } from 'tdesign-mobile-react';
+import {
-
+  Button,
-
+  Input,
-// 调整场景顺序，确保API获客在最后，并且前三个是最常用的场景
+  Tag,
-const scenarios = [
+  Grid,
-  { id: "haibao", name: "海报获客", type: "material" },
+  Dialog,
-  { id: "order", name: "订单获客", type: "api" },
+  ImageViewer,
-  { id: "douyin", name: "抖音获客", type: "social" },
+  Table,
-  { id: "xiaohongshu", name: "小红书获客", type: "social" },
+  Switch,
-  { id: "phone", name: "电话获客", type: "social" },
+} from "tdesign-mobile-react";
-  { id: "gongzhonghao", name: "公众号获客", type: "social" },
+import EyeIcon from "@/components/icons/EyeIcon";
-  { id: "weixinqun", name: "微信群获客", type: "social" },
+import UploadImage from "@/components/UploadImage";
-  { 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" },
@@ -24,91 +21,171 @@ const phoneCallTags = [
   { 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-1",
-    { id: "poster-tag-3", name: "品牌展示", color: "bg-purple-100 text-purple-800" },
+      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" },
+    {
+      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-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-3",
-    { id: "douyin-tag-5", name: "热门话题", color: "bg-purple-100 text-purple-800" },
+      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" },
+    {
+      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-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-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-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" },
+    {
+      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-3",
-    { id: "pay-tag-5", name: "会员充值", color: "bg-yellow-100 text-yellow-800" },
+      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-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
+  formData: any;
-  onChange: (data: any) => void
+  onChange: (data: any) => void;
-  onNext?: () => void
+  onNext?: () => void;
-  sceneList: any[]
+  sceneList: any[];
-  sceneLoading: boolean
+  sceneLoading: boolean;
 }
 
 interface Account {
-  id: string
+  id: string;
-  nickname: string
+  nickname: string;
-  avatar: string
+  avatar: string;
 }
 
 interface Material {
-  id: string
+  id: string;
-  name: string
+  name: string;
-  type: string
+  type: string;
-  preview: string
+  preview: string;
 }
 
 const posterTemplates = [
@@ -148,15 +225,15 @@ const posterTemplates = [
     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) => ({
@@ -164,39 +241,47 @@ const generatePosterMaterials = (): Material[] => {
     name: template.name,
     type: "poster",
     preview: template.preview,
-  }))
+  }));
-}
+};
 
-export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoading }: BasicSettingsProps) {
+export function BasicSettings({
-  const [isAccountDialogOpen, setIsAccountDialogOpen] = useState(false)
+  formData,
-  const [isMaterialDialogOpen, setIsMaterialDialogOpen] = useState(false)
+  onChange,
-  const [isPreviewOpen, setIsPreviewOpen] = useState(false)
+  onNext,
-  const [isPhoneSettingsOpen, setIsPhoneSettingsOpen] = useState(false)
+  sceneList,
-  const [accounts] = useState<Account[]>(generateRandomAccounts(50))
+  sceneLoading,
-  const [materials] = useState<Material[]>(generatePosterMaterials())
+}: 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 : [],
+    formData.accounts?.length > 0 ? formData.accounts : []
-  )
+  );
   const [selectedMaterials, setSelectedMaterials] = useState<Material[]>(
-    formData.materials?.length > 0 ? formData.materials : [],
+    formData.materials?.length > 0 ? formData.materials : []
-  )
+  );
   // showAllScenarios 默认为 true
   const [showAllScenarios, setShowAllScenarios] = useState(true);
-  const [isImportDialogOpen, setIsImportDialogOpen] = useState(false)
+  const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
   const [importedTags, setImportedTags] = useState<
     Array<{
-      phone: string
+      phone: string;
-      wechat: string
+      wechat: string;
-      source?: string
+      source?: string;
-      orderAmount?: number
+      orderAmount?: number;
-      orderDate?: string
+      orderDate?: string;
     }>
-  >(formData.importedTags || [])
+  >(formData.importedTags || []);
 
   // 自定义标签相关状态
   const [customTagInput, setCustomTagInput] = useState("");
   const [customTags, setCustomTags] = useState(formData.customTags || []);
-  const [selectedScenarioTags, setSelectedScenarioTags] = useState(formData.scenarioTags || []);
+  const [selectedScenarioTags, setSelectedScenarioTags] = useState(
+    formData.scenarioTags || []
+  );
 
   // 电话获客相关状态
   const [phoneSettings, setPhoneSettings] = useState({
@@ -206,8 +291,19 @@ export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoad
   });
 
   // 群设置相关状态
-  const [weixinqunName, setWeixinqunName] = useState(formData.weixinqunName || "");
+  const [weixinqunName, setWeixinqunName] = useState(
-  const [weixinqunNotice, setWeixinqunNotice] = useState(formData.weixinqunNotice || "");
+    formData.weixinqunName || ""
+  );
+  const [weixinqunNotice, setWeixinqunNotice] = useState(
+    formData.weixinqunNotice || ""
+  );
+
+  // 新增：自定义海报相关状态
+  const [customPosters, setCustomPosters] = useState<Material[]>([]);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  // 新增：用于文件选择的ref
+  const uploadInputRef = useRef<HTMLInputElement>(null);
 
   // 更新电话获客设置
   const handlePhoneSettingsUpdate = () => {
@@ -219,43 +315,43 @@ export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoad
   const handleTagToggle = (tagId: string) => {
     const newTags = selectedScenarioTags.includes(tagId)
       ? selectedScenarioTags.filter((id: string) => id !== tagId)
-      : [...selectedScenarioTags, tagId]
+      : [...selectedScenarioTags, tagId];
 
-    setSelectedScenarioTags(newTags)
+    setSelectedScenarioTags(newTags);
-    onChange({ ...formData, scenarioTags: newTags })
+    onChange({ ...formData, scenarioTags: newTags });
-  }
+  };
 
   // 处理通话类型选择
   const handleCallTypeChange = (type: string) => {
     // setPhoneCallType(type) // This line was removed as per the edit hint.
-    onChange({ ...formData, phoneCallType: type })
+    onChange({ ...formData, phoneCallType: type });
-  }
+  };
 
   // 初始化时，如果没有选择场景，默认选择海报获客
   useEffect(() => {
     if (!formData.scenario) {
-      onChange({ ...formData, scenario: "haibao" })
+      onChange({ ...formData, scenario: "haibao" });
     }
 
     if (!formData.planName) {
-      const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "")
+      const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "");
-      onChange({ ...formData, planName: `海报${today}` })
+      onChange({ ...formData, planName: `海报${today}` });
     }
-  }, [formData, onChange])
+  }, [formData, onChange]);
 
   // 选中场景
   const handleScenarioSelect = (sceneId: number) => {
-    onChange({ ...formData, scenario: sceneId })
+    onChange({ ...formData, scenario: sceneId });
-  }
+  };
 
   // 选中/取消标签
   const handleScenarioTagToggle = (tag: string) => {
     const newTags = selectedScenarioTags.includes(tag)
       ? selectedScenarioTags.filter((t: string) => t !== tag)
-      : [...selectedScenarioTags, tag]
+      : [...selectedScenarioTags, tag];
-    setSelectedScenarioTags(newTags)
+    setSelectedScenarioTags(newTags);
-    onChange({ ...formData, scenarioTags: newTags })
+    onChange({ ...formData, scenarioTags: newTags });
-  }
+  };
 
   // 添加自定义标签
   const handleAddCustomTag = () => {
@@ -276,16 +372,50 @@ export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoad
     setCustomTags(updatedCustomTags);
     onChange({ ...formData, customTags: updatedCustomTags });
     // 同时从选中标签中移除
-    const updatedSelectedTags = selectedScenarioTags.filter((t: string) => t !== tagId);
+    const updatedSelectedTags = selectedScenarioTags.filter(
+      (t: string) => t !== tagId
+    );
     setSelectedScenarioTags(updatedSelectedTags);
-    onChange({ ...formData, scenarioTags: updatedSelectedTags, customTags: updatedCustomTags });
+    onChange({
+      ...formData,
+      scenarioTags: updatedSelectedTags,
+      customTags: updatedCustomTags,
+    });
   };
 
-  // 选择素材（单选）
+  // 新增：自定义上传图片
+  const handleCustomPosterUpload = (urls: string[]) => {
+    if (urls && urls.length > 0) {
+      const newPoster: Material = {
+        id: `custom-${Date.now()}`,
+        name: "自定义海报",
+        type: "poster",
+        preview: urls[0],
+      };
+      setCustomPosters((prev) => [...prev, newPoster]);
+    }
+  };
+
+  // 新增：删除自定义海报
+  const handleRemoveCustomPoster = (id: string) => {
+    setCustomPosters((prev) => prev.filter((p) => p.id !== id));
+    // 如果选中则取消选中
+    if (selectedMaterials.some((m) => m.id === id)) {
+      setSelectedMaterials([]);
+      onChange({ ...formData, materials: [] });
+    }
+  };
+
+  // 修改：选中/取消选中海报
   const handleMaterialSelect = (material: Material) => {
+    const isSelected = selectedMaterials.some((m) => m.id === material.id);
+    if (isSelected) {
+      setSelectedMaterials([]);
+      onChange({ ...formData, materials: [] });
+    } else {
       setSelectedMaterials([material]);
       onChange({ ...formData, materials: [material] });
-    setIsMaterialDialogOpen(false);
+    }
   };
 
   // 移除已选素材
@@ -294,17 +424,22 @@ export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoad
     onChange({ ...formData, materials: [] });
   };
 
-  // 预览图片
+  // 新增：全屏预览
   const handlePreviewImage = (url: string) => {
+    setPreviewUrl(url);
     setIsPreviewOpen(true);
   };
 
   // 账号多选切换
   const handleAccountToggle = (account: Account) => {
-    const isSelected = selectedAccounts.some((a: Account) => a.id === account.id);
+    const isSelected = selectedAccounts.some(
+      (a: Account) => a.id === account.id
+    );
     let newSelected;
     if (isSelected) {
-      newSelected = selectedAccounts.filter((a: Account) => a.id !== account.id);
+      newSelected = selectedAccounts.filter(
+        (a: Account) => a.id !== account.id
+      );
     } else {
       newSelected = [...selectedAccounts, account];
     }
@@ -319,9 +454,6 @@ export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoad
     onChange({ ...formData, accounts: newSelected });
   };
 
-  // 只显示前三个场景，其他的需要点击展开
-  const displayedScenarios = showAllScenarios ? scenarios : scenarios.slice(0, 3)
-
   // 处理文件导入
   const handleFileImport = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
@@ -332,7 +464,8 @@ export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoad
           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(",");
+            const [phone, wechat, source, orderAmount, orderDate] =
+              row.split(",");
             return {
               phone: phone?.trim(),
               wechat: wechat?.trim(),
@@ -353,7 +486,8 @@ export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoad
 
   // 下载模板
   const handleDownloadTemplate = () => {
-    const template = "电话号码,微信号,来源,订单金额,下单日期\n13800138000,wxid_123,抖音,99.00,2024-03-03";
+    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");
@@ -390,23 +524,29 @@ export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoad
   };
 
   // 当前选中的场景对象
-  const currentScene = sceneList.find(s => s.id === formData.scenario);
+  const currentScene = sceneList.find((s) => s.id === formData.scenario);
+  //打开订单
+  const openOrder =
+    formData.scenario !== 2 ? { display: "none" } : { display: "block" };
+
+  const openPoster =
+    formData.scenario !== 1 ? { display: "none" } : { display: "block" };
 
   return (
     <div>
       {/* 场景选择区块 */}
       {sceneLoading ? (
-        <div style={{ padding: 16, textAlign: 'center' }}>加载中...</div>
+        <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'}
+              theme={formData.scenario === scene.id ? "primary" : "light"}
               onClick={() => handleScenarioSelect(scene.id)}
               size="small"
             >
-              {scene.name.replace('获客', '')}
+              {scene.name.replace("获客", "")}
             </Button>
           ))}
         </Grid>
@@ -419,19 +559,22 @@ export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoad
           className="w-full"
           type="text"
           value={formData.planName}
-          onChange={(e) => onChange({ ...formData, planName: String(e.target.value) })}
+          onChange={(e) =>
+            onChange({ ...formData, planName: String(e.target.value) })
+          }
           placeholder="请输入计划名称"
         />
       </div>
 
+      <div className="mb-4">获客标签（可多选）</div>
       {/* 标签选择区块 */}
       {formData.scenario && (
-        <div className="flex pb-4" style={{ flexWrap: 'wrap', gap: 8 }}>
+        <div className="flex pb-4" style={{ flexWrap: "wrap", gap: 8 }}>
           {(currentScene?.scenarioTags || []).map((tag: string) => (
             <Tag
               key={tag}
               shape="round"
-              theme={selectedScenarioTags.includes(tag) ? 'primary' : 'default'}
+              theme={selectedScenarioTags.includes(tag) ? "primary" : "default"}
               onClick={() => handleScenarioTagToggle(tag)}
               style={{ marginBottom: 4 }}
               size="large"
@@ -445,7 +588,9 @@ export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoad
             <Tag
               key={tag.id}
               shape="round"
-              theme={selectedScenarioTags.includes(tag.id) ? 'primary' : 'default'}
+              theme={
+                selectedScenarioTags.includes(tag.id) ? "primary" : "default"
+              }
               onClick={() => handleScenarioTagToggle(tag.id)}
               style={{ marginBottom: 4 }}
               closable
@@ -475,124 +620,221 @@ export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoad
           </Button>
         </div>
       </div>
-      {/* 账号选择区块 */}
+
-      <div style={{ margin: '16px 0' }}>
+      {/* 选素材 */}
-        <Button theme="default" onClick={() => setIsAccountDialogOpen(true)}>
+      <div className="my-4" style={openPoster}>
-          {selectedAccounts.length ? `已选账号（${selectedAccounts.length}）` : '选择账号'}
+        <div className="mb-4">选择海报</div>
-                      </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={{
-                style={{ display: 'flex', alignItems: 'center', marginBottom: 8, cursor: 'pointer' }}
+            display: "grid",
-                onClick={() => handleAccountToggle(account)}
+            gridTemplateColumns: "repeat(3, 1fr)",
+            gap: 12,
+          }}
         >
-                <input
+          {[...materials, ...customPosters].map((material) => {
-                  type="checkbox"
+            const isSelected = selectedMaterials.some(
-                  checked={selectedAccounts.some((a: Account) => a.id === account.id)}
+              (m) => m.id === material.id
-                  readOnly
+            );
-                  style={{ marginRight: 8 }}
+            const isCustom = material.id.startsWith("custom-");
-                />
+            return (
-                <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' }}
+                style={{
+                  border: isSelected ? "2px solid #1890ff" : "2px solid #eee",
+                  borderRadius: 8,
+                  padding: 6,
+                  cursor: "pointer",
+                  background: isSelected ? "#e6f7ff" : "#fff",
+                  transition: "border 0.2s",
+                  textAlign: "center",
+                  position: "relative",
+                }}
                 onClick={() => handleMaterialSelect(material)}
               >
-                <img src={material.preview} alt={material.name} style={{ width: 40, height: 40, marginRight: 8, borderRadius: 4 }} />
+                {/* 预览按钮：自定义海报在左上，内置海报在右上 */}
-                <span>{material.name}</span>
+                <button
+                  type="button"
+                  style={{
+                    position: "absolute",
+                    top: 8,
+                    left: isCustom ? 8 : "auto",
+                    right: isCustom ? "auto" : 8,
+                    background: "rgba(0,0,0,0.5)",
+                    border: "none",
+                    borderRadius: "50%",
+                    padding: 2,
+                    zIndex: 2,
+                    cursor: "pointer",
+                  }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handlePreviewImage(material.preview);
+                  }}
+                >
+                  <EyeIcon style={{ color: "#fff", width: 18, height: 18 }} />
+                </button>
+                {/* 删除自定义海报按钮 */}
+                {isCustom && (
+                  <button
+                    type="button"
+                    style={{
+                      position: "absolute",
+                      top: 8,
+                      right: 8,
+                      width: 24,
+                      height: 24,
+                      background: "rgba(0,0,0,0.5)",
+                      border: "none",
+                      borderRadius: "50%",
+                      padding: 0,
+                      zIndex: 2,
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleRemoveCustomPoster(material.id);
+                    }}
+                  >
+                    <span
+                      style={{
+                        color: "#fff",
+                        fontWeight: 700,
+                        fontSize: 16,
+                        lineHeight: "24px",
+                      }}
+                    >
+                      ×
+                    </span>
+                  </button>
+                )}
+                <img
+                  src={material.preview}
+                  alt={material.name}
+                  style={{
+                    width: 100,
+                    height: 180,
+                    objectFit: "cover",
+                    borderRadius: 4,
+                    marginBottom: 0,
+                  }}
+                />
+                <div
+                  style={{
+                    position: "relative",
+                    top: "-32px",
+                    width: "100%",
+                    background: "rgba(0,0,0,0.5)",
+                    color: "#fff",
+                    fontSize: 14,
+                    padding: "4px 0",
+                    borderBottomLeftRadius: 4,
+                    borderBottomRightRadius: 4,
+                    textAlign: "center",
+                  }}
+                >
+                  {material.name}
                 </div>
-            ))}
               </div>
-        </Dialog>
+            );
+          })}
+          {/* 添加海报卡片 */}
+          <div
+            style={{
+              border: "2px dashed #bbb",
+              borderRadius: 8,
+              padding: 6,
+              cursor: "pointer",
+              background: "#fafbfc",
+              textAlign: "center",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              height: 220,
+            }}
+            onClick={() => uploadInputRef.current?.click()}
+          >
+            <span style={{ fontSize: 36, color: "#bbb", marginBottom: 8 }}>
+              +
+            </span>
+            <span style={{ color: "#888" }}>添加海报</span>
+            <input
+              ref={uploadInputRef}
+              type="file"
+              accept="image/*"
+              style={{ display: "none" }}
+              onChange={async (e) => {
+                const file = e.target.files?.[0];
+                if (file) {
+                  // 直接上传
+                  try {
+                    const url = await (
+                      await import("@/api/upload")
+                    ).uploadImage(file);
+                    const newPoster = {
+                      id: `custom-${Date.now()}`,
+                      name: "自定义海报",
+                      type: "poster",
+                      preview: url,
+                    };
+                    setCustomPosters((prev) => [...prev, newPoster]);
+                  } catch (err) {
+                    // 可加toast提示
+                  }
+                  e.target.value = "";
+                }
+              }}
+            />
+          </div>
+        </div>
+        {/* 全屏图片预览 */}
         <ImageViewer
-          images={selectedMaterials.map((m: Material) => m.preview)}
+          images={previewUrl ? [previewUrl] : []}
           visible={isPreviewOpen}
-          onClose={handleImagePreviewClose}
+          onClose={() => {
+            setIsPreviewOpen(false);
+            setPreviewUrl(null);
+          }}
           index={0}
         />
       </div>
       {/* 订单导入区块 */}
-      <div style={{ margin: '16px 0' }}>
+      <div style={openOrder} className="my-4">
         <Button theme="default" onClick={() => setIsImportDialogOpen(true)}>
-          {importedTags.length ? `已导入订单（${importedTags.length}）` : '导入订单'}
+          {importedTags.length
+            ? `已导入订单（${importedTags.length}）`
+            : "导入订单"}
         </Button>
-        <Dialog
+        <Dialog visible={isImportDialogOpen} onClose={handleImportDialogClose}>
-          visible={isImportDialogOpen}
+          <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 12 }}>
-          onClose={handleImportDialogClose}
+            导入订单
-        >
+          </div>
-          <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 12 }}>导入订单</div>
           <div style={{ marginBottom: 12 }}>
-            <Button theme="primary" onClick={handleDownloadTemplate} style={{ marginRight: 8 }}>
+            <Button
+              theme="primary"
+              onClick={handleDownloadTemplate}
+              style={{ marginRight: 8 }}
+            >
               下载模板
             </Button>
             <input
               type="file"
               accept=".csv"
               onChange={handleFileImport}
-              style={{ display: 'inline-block' }}
+              style={{ display: "inline-block" }}
             />
           </div>
           {importedTags.length > 0 && (
             <Table
               columns={[
-                { colKey: 'phone', title: '手机号' },
+                { colKey: "phone", title: "手机号" },
-                { colKey: 'wechat', title: '微信号' },
+                { colKey: "wechat", title: "微信号" },
-                { colKey: 'source', title: '来源' },
+                { colKey: "source", title: "来源" },
-                { colKey: 'orderAmount', title: '订单金额' },
+                { colKey: "orderAmount", title: "订单金额" },
-                { colKey: 'orderDate', title: '下单日期' },
+                { colKey: "orderDate", title: "下单日期" },
               ]}
               data={importedTags}
               rowKey="phone"
@@ -602,8 +844,8 @@ export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoad
         </Dialog>
       </div>
       {/* 电话获客设置区块，仅在选择电话获客场景时显示 */}
-      {formData.scenario === 'phone' && (
+      {formData.scenario === "phone" && (
-        <div style={{ margin: '16px 0' }}>
+        <div style={{ margin: "16px 0" }}>
           <Button theme="default" onClick={() => setIsPhoneSettingsOpen(true)}>
             电话获客设置
           </Button>
@@ -611,27 +853,53 @@ export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoad
             visible={isPhoneSettingsOpen}
             onClose={handlePhoneSettingsDialogClose}
           >
-            <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 12 }}>电话获客设置</div>
+            <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 12 }}>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+              电话获客设置
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            </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 }))}
+                  onChange={(v) =>
+                    setPhoneSettings((s) => ({ ...s, autoAdd: v }))
+                  }
                 />
               </div>
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                }}
+              >
                 <span>语音转文字</span>
                 <Switch
                   value={phoneSettings.speechToText}
-                  onChange={(v) => setPhoneSettings((s) => ({ ...s, speechToText: v }))}
+                  onChange={(v) =>
+                    setPhoneSettings((s) => ({ ...s, speechToText: v }))
+                  }
                 />
               </div>
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                }}
+              >
                 <span>问题提取</span>
                 <Switch
                   value={phoneSettings.questionExtraction}
-                  onChange={(v) => setPhoneSettings((s) => ({ ...s, questionExtraction: v }))}
+                  onChange={(v) =>
+                    setPhoneSettings((s) => ({ ...s, questionExtraction: v }))
+                  }
                 />
               </div>
               <Button block theme="primary" onClick={handlePhoneSettingsUpdate}>
@@ -642,8 +910,8 @@ export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoad
         </div>
       )}
       {/* 微信群设置区块，仅在选择微信群场景时显示 */}
-      {formData.scenario === 'weixinqun' && (
+      {formData.scenario === "weixinqun" && (
-        <div style={{ margin: '16px 0' }}>
+        <div style={{ margin: "16px 0" }}>
           <div style={{ marginBottom: 8 }}>
             <Input
               value={weixinqunName}
@@ -664,7 +932,9 @@ export function BasicSettings({ formData, onChange, onNext, sceneList, sceneLoad
           </div>
         </div>
       )}
-      <Button block theme="primary" onClick={onNext}>下一步</Button>
+      <Button block theme="primary" onClick={onNext}>
+        下一步
+      </Button>
     </div>
   );
 }

nkebao/src/pages/workspace/moments-sync/MomentsSync.tsx

@@ -300,7 +300,7 @@ export default function MomentsSync() {
 
                 <div className="grid grid-cols-2 gap-4 mb-4">
                   <div className="text-sm text-gray-500">
-                    <div>推送设备：{task.deviceCount} 个</div>
+                    <div>推送设备：{task?.config?.devices.length||0} 个</div>
                     <div className="flex">
                       <span className="flex-shrink-0">内容库：</span>
                       <span className="truncate" title={task.contentLib || '默认内容库'}>