feat(流量分发表单): 优化流量池选择逻辑

移除未使用的流量池列表和搜索功能，改为使用受控组件管理流量池选择。新增流量池选择的校验逻辑，确保用户至少选择一个流量池。同时，简化了目标设置的逻辑，提升了代码可读性和用户体验。

Cunkebao/dist/.vite/manifest.json

@@ -33,7 +33,7 @@
     "name": "vendor"
   },
   "index.html": {
-    "file": "assets/index-Bx3nG52V.js",
+    "file": "assets/index-Czxez1-3.js",
     "name": "index",
     "src": "index.html",
     "isEntry": true,

Cunkebao/dist/index.html

@@ -11,7 +11,7 @@
     </style>
     <!-- 引入 uni-app web-view SDK（必须） -->
     <script type="text/javascript" src="/websdk.js"></script>
-    <script type="module" crossorigin src="/assets/index-Bx3nG52V.js"></script>
+    <script type="module" crossorigin src="/assets/index-Czxez1-3.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-0WYR1k4q.js">
     <link rel="modulepreload" crossorigin href="/assets/ui-DDu9FCjt.js">
     <link rel="modulepreload" crossorigin href="/assets/utils-DC06x9DY.js">

Cunkebao/src/pages/mobile/workspace/traffic-distribution/form/index.tsx

@@ -19,18 +19,6 @@ import {
 import type { TrafficDistributionFormData } from "./data";
 import dayjs from "dayjs";
 
-// const scenarioList = [...];
-const poolList = [
-  {
-    id: "pool-1",
-    name: "高价值客户池",
-    userCount: 156,
-    tags: ["高价值", "优先添加"],
-  },
-  { id: "pool-2", name: "潜在客户池", userCount: 289, tags: ["潜在客户"] },
-  { id: "pool-3", name: "新用户池", userCount: 432, tags: ["新用户"] },
-];
-
 const stepList = [
   { id: 1, title: "基本信息", subtitle: "基本信息" },
   { id: 2, title: "目标设置", subtitle: "目标设置" },
@@ -57,14 +45,9 @@ const TrafficDistributionForm: React.FC = () => {
   const [loading, setLoading] = useState(false);
   const [detailLoading, setDetailLoading] = useState(false);
 
-  const [selectedPools, setSelectedPools] = useState<string[]>([]);
   const [poolGroupsOptions, setPoolGroupsOptions] = useState<
     PoolSelectionItem[]
   >([]);
-  const [poolSearch, setPoolSearch] = useState("");
-  const [targetSelectionTab, setTargetSelectionTab] = useState<
-    "device" | "account"
-  >("device");
 
   // 编辑时的详情数据（不需要保存整份数据，仅回填表单与本地状态）
 
@@ -122,8 +105,7 @@ const TrafficDistributionForm: React.FC = () => {
         form.setFieldsValue({ timeRange: [startTime, endTime] });
       }
 
-      // 设置流量池
-      setSelectedPools(config.pools.map((pool: any) => pool.id || pool));
+      // 设置流量池 - 交由 PoolSelection 控件受控
     } catch (error) {
       console.error("获取详情失败:", error);
       message.error("获取详情失败");
@@ -142,11 +124,15 @@ const TrafficDistributionForm: React.FC = () => {
     form.submit();
   };
 
-  // 移除未使用的 handleFinish3
-
   const handleFinish2 = async (values?: any) => {
     setLoading(true);
     try {
+      // 校验流量池至少选择一个
+      if (!poolGroupsOptions || poolGroupsOptions.length === 0) {
+        message.error("请至少选择一个流量池");
+        setLoading(false);
+        return;
+      }
       // 如果没有传递values参数，从表单中获取
       const formValues = values || form.getFieldsValue();
 
@@ -168,9 +154,9 @@ const TrafficDistributionForm: React.FC = () => {
           formValues.timeType === 2 && formValues.timeRange?.[1]
             ? formValues.timeRange[1].format("HH:mm")
             : "",
-        deviceGroups: deviceGroups,
+        deviceGroups: deviceGroupsOptions.map(v => v.id),
         deviceGroupsOptions: deviceGroupsOptions,
-        accountGroups: accountGroups,
+        accountGroups: accountGroupsOptions.map(v => v.id),
         accountGroupsOptions: accountGroupsOptions,
         pools: poolGroupsOptions.map(v => v.id),
         enabled: true,
@@ -208,10 +194,8 @@ const TrafficDistributionForm: React.FC = () => {
       // 第二步：目标设置至少需要选择设备或客服之一
       const hasDevice =
         Array.isArray(selectedDevices) && selectedDevices.length > 0;
-      const hasAccount =
-        Array.isArray(selectedAccounts) && selectedAccounts.length > 0;
-      if (!hasDevice && !hasAccount) {
-        message.error("请至少选择一个设备或一个客服");
+      if (!hasDevice) {
+        message.error("请至少选择一个设备");
         return;
       }
       setCurrent(cur => cur + 1);
@@ -221,9 +205,6 @@ const TrafficDistributionForm: React.FC = () => {
   };
   const prev = () => setCurrent(cur => cur - 1);
 
-  // 过滤流量池
-  const filteredPools = poolList.filter(pool => pool.name.includes(poolSearch));
-
   const handPoolAction = params => {
     setPoolGroupsOptions(params);
   };
@@ -355,107 +336,40 @@ const TrafficDistributionForm: React.FC = () => {
                 />
               </Form.Item>
             )}
+
+            <div className={style.sectionTitle}>客服选择</div>
+            <div className={style.formBlock}>
+              <AccountSelection
+                selectedOptions={accountGroupsOptions}
+                onSelect={accounts => {
+                  setAccountGroupsOptions(accounts);
+                }}
+                placeholder="请选择客服"
+                showSelectedList={true}
+                selectedListMaxHeight={300}
+                accountGroups={accountGroups}
+              />
+            </div>
           </Form>
           {current === 1 && (
             <div>
               <div className={style.sectionTitle}>目标设置</div>
-
-              {/* Tab 切换 */}
-              <div className={style.tabWrapper}>
-                <div className={style.tabList}>
-                  <div
-                    className={`${style.tabItem} ${
-                      targetSelectionTab === "device" ? style.tabActive : ""
-                    }`}
-                    onClick={() => setTargetSelectionTab("device")}
-                  >
-                    设备选择
-                  </div>
-                  <div
-                    className={`${style.tabItem} ${
-                      targetSelectionTab === "account" ? style.tabActive : ""
-                    }`}
-                    onClick={() => setTargetSelectionTab("account")}
-                  >
-                    客服选择
-                  </div>
-                </div>
-              </div>
-
-              {/* Tab 内容 */}
-              <div className={style.tabContent}>
-                {targetSelectionTab === "device" && (
-                  <div className={style.formBlock}>
-                    <DeviceSelection
-                      selectedOptions={selectedDevices}
-                      onSelect={devices => {
-                        setSelectedDevices(devices);
-                        setDeviceGroupsOptions(devices);
-                      }}
-                      placeholder="请选择设备"
-                      showSelectedList={true}
-                      selectedListMaxHeight={300}
-                      deviceGroups={deviceGroups}
-                    />
-                  </div>
-                )}
-                {targetSelectionTab === "account" && (
-                  <div className={style.formBlock}>
-                    <AccountSelection
-                      selectedOptions={selectedAccounts}
-                      onSelect={accounts => {
-                        setSelectedAccounts(accounts);
-                        setAccountGroupsOptions(accounts);
-                      }}
-                      placeholder="请选择客服"
-                      showSelectedList={true}
-                      selectedListMaxHeight={300}
-                      accountGroups={accountGroups}
-                    />
-                  </div>
-                )}
+              <div className={style.formBlock}>
+                <DeviceSelection
+                  selectedOptions={deviceGroupsOptions}
+                  onSelect={devices => {
+                    setSelectedDevices(devices);
+                    setDeviceGroupsOptions(devices);
+                  }}
+                  placeholder="请选择设备"
+                  showSelectedList={true}
+                  selectedListMaxHeight={300}
+                  deviceGroups={deviceGroups}
+                />
               </div>
             </div>
           )}
           {current === 2 && (
-            // <div>
-            //   <div className={style.sectionTitle}>流量池选择</div>
-            //   <div className={style.formBlock}>
-            //     <Input
-            //       placeholder="搜索流量池"
-            //       value={poolSearch}
-            //       onChange={e => setPoolSearch(e.target.value)}
-            //       style={{ marginBottom: 12 }}
-            //     />
-            //     <div className={style.poolListWrap}>
-            //       {filteredPools.map(pool => (
-            //         <label key={pool.id} className={style.poolItem}>
-            //           <input
-            //             type="checkbox"
-            //             checked={selectedPools.includes(pool.id)}
-            //             onChange={e => {
-            //               setSelectedPools(val =>
-            //                 e.target.checked
-            //                   ? [...val, pool.id]
-            //                   : val.filter(v => v !== pool.id),
-            //               );
-            //             }}
-            //           />
-            //           <span className={style.poolName}>{pool.name}</span>
-            //           <span className={style.poolTags}>
-            //             {pool.tags.join("/")}
-            //           </span>
-            //           <span className={style.poolCount}>
-            //             {pool.userCount}人
-            //           </span>
-            //         </label>
-            //       ))}
-            //     </div>
-            //     <div className={style.poolSelectedCount}>
-            //       已选流量池：<span>{selectedPools.length}</span> 个
-            //     </div>
-            //   </div>
-            // </div>
             <PoolSelection
               selectedOptions={poolGroupsOptions}
               onSelect={handPoolAction}