FEAT => 本次更新项目为：優化基本設置頁面，新增文件上傳組件，調整樣式及顯示邏輯

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

@@ -5,12 +5,12 @@ import {
   EyeOutlined,
   CloseOutlined,
   DownloadOutlined,
-  UploadOutlined,
-  CheckOutlined,
 } from "@ant-design/icons";
 import { uploadFile } from "@/api/common";
 import styles from "./base.module.scss";
 import { posterTemplates } from "./base.data";
+import GroupSelection from "@/components/GroupSelection";
+import FileUpload from "@/components/Upload/FileUpload";
 
 interface BasicSettingsProps {
   isEdit: boolean;
@@ -78,18 +78,12 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
 
   // 新增：用于文件选择的ref
   const uploadInputRef = useRef<HTMLInputElement>(null);
-  const uploadOrderInputRef = useRef<HTMLInputElement>(null);
 
   // 初始化时，如果没有选择场景，默认选择海报获客
   useEffect(() => {
     if (!formData.scenario) {
       onChange({ ...formData, scenario: "haibao" });
     }
-
-    // 检查是否已经有上传的订单文件
-    if (formData.orderFileUploaded) {
-      setOrderUploaded(true);
-    }
   }, [formData, onChange]);
 
   useEffect(() => {
@@ -208,28 +202,6 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
     window.URL.revokeObjectURL(url);
   };
 
-  // 修改订单表格上传逻辑，使用 uploadFile 公共方法
-  const [orderUploaded, setOrderUploaded] = useState(false);
-
-  const handleOrderFileUpload = async (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      try {
-        await uploadFile(file); // 默认接口即可
-        setOrderUploaded(true);
-        onChange({ ...formData, orderFileUploaded: true });
-        // 可用 toast 或其它方式提示成功
-        // alert('上传成功');
-      } catch (err) {
-        // 可用 toast 或其它方式提示失败
-        // alert('上传失败');
-      }
-      event.target.value = "";
-    }
-  };
-
   // 图片预览关闭
   const handleImagePreviewClose = () => {
     setIsPreviewOpen(false);
@@ -331,18 +303,23 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
           添加
         </Button>
       </div>
-      {/* 输入获客成功提示 */}
-      <div className={styles["basic-success-tip"]}>
-        <Input
-          type="text"
-          value={tips}
-          onChange={e => {
-            setTips(e.target.value);
-            onChange({ ...formData, tips: e.target.value });
-          }}
-          placeholder="请输入获客成功提示"
-        />
-      </div>
+      {/* 输入获客成功提示 - 只有海报场景才显示 */}
+      {formData.scenario === 1 && (
+        <>
+          <div className={styles["basic-label"]}>请输入获客成功提示</div>
+          <div className={styles["basic-success-tip"]}>
+            <Input
+              type="text"
+              value={tips}
+              onChange={e => {
+                setTips(e.target.value);
+                onChange({ ...formData, tips: e.target.value });
+              }}
+              placeholder="请输入获客成功提示"
+            />
+          </div>
+        </>
+      )}
       {/* 选素材 */}
       <div className={styles["basic-materials"]} style={openPoster}>
         <div className={styles["basic-label"]}>选择海报</div>
@@ -467,7 +444,22 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
           )}
         </Modal>
       </div>
-      {/* 订单导入区块优化 */}
+      {/* 群选择 - 只有微信群场景才显示 */}
+      {formData.scenario === 7 && (
+        <div className={styles["basic-group-selection"]}>
+          <div className={styles["basic-label"]}>选择群聊</div>
+          <GroupSelection
+            selectedGroups={formData.groupSelected || []}
+            onSelect={groups =>
+              onChange({ ...formData, groupSelected: groups })
+            }
+            placeholder="请选择微信群"
+            className={styles["basic-group-selector"]}
+          />
+        </div>
+      )}
+
+      {/* 订单导入区块 - 使用FileUpload组件 */}
       <div className={styles["basic-order-upload"]} style={openOrder}>
         <div className={styles["basic-order-upload-label"]}>订单表格上传</div>
         <div className={styles["basic-order-upload-actions"]}>
@@ -477,34 +469,19 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
           >
             <DownloadOutlined style={{ fontSize: 18 }} /> 下载模板
           </Button>
-          <Button
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: 4,
-              ...(orderUploaded && {
-                backgroundColor: "#52c41a",
-                color: "#fff",
-                borderColor: "#52c41a",
-              }),
-            }}
-            onClick={() => uploadOrderInputRef.current?.click()}
-          >
-            <span className="iconfont" style={{ fontSize: 18 }}>
-              {orderUploaded ? <CheckOutlined /> : <UploadOutlined />}
-            </span>{" "}
-            {orderUploaded ? "已上传" : "上传订单表格"}
-            <input
-              ref={uploadOrderInputRef}
-              type="file"
-              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
-              style={{ display: "none" }}
-              onChange={handleOrderFileUpload}
-            />
-          </Button>
+        </div>
+        <div className={styles["basic-order-upload-file"]}>
+          <FileUpload
+            value={formData.orderFileUrl || ""}
+            onChange={url => onChange({ ...formData, orderFileUrl: url })}
+            acceptTypes={["excel"]}
+            maxCount={1}
+            maxSize={10}
+            showPreview={false}
+          />
         </div>
         <div className={styles["basic-order-upload-tip"]}>
-          支持 CSV、Excel 格式，上传后将文件保存到服务器
+          支持 Excel 格式，上传后将文件保存到服务器
         </div>
       </div>
       {/* 电话获客设置区块，仅在选择电话获客场景时显示 */}

nkebao/src/pages/mobile/scenarios/plan/new/steps/base.module.scss

@@ -49,10 +49,10 @@
 .basic-custom-tag-input {
   display: flex;
   gap: 8px;
+  margin-bottom: 16px;
 }
 .basic-success-tip {
   display: flex;
-  padding-top: 16px;
 }
 .basic-materials {
   margin: 16px 0;