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

优化弹窗

nkebao/src/pages/component-test/index.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import { NavBar, Tabs } from "antd-mobile";
+import { ArrowLeftOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+import Layout from "@/components/Layout/Layout";
+import NavCommon from "@/components/NavCommon";
+import DeviceSelection from "@/components/DeviceSelection";
+import FriendSelection from "@/components/FriendSelection";
+import GroupSelection from "@/components/GroupSelection";
+
+const ComponentTest: React.FC = () => {
+  const navigate = useNavigate();
+  const [activeTab, setActiveTab] = useState("devices");
+
+  // 设备选择状态
+  const [selectedDevices, setSelectedDevices] = useState<string[]>([]);
+
+  // 好友选择状态
+  const [selectedFriends, setSelectedFriends] = useState<string[]>([]);
+
+  // 群组选择状态
+  const [selectedGroups, setSelectedGroups] = useState<string[]>([]);
+
+  return (
+    <Layout header={<NavCommon title="组件调试" />}>
+      <div style={{ padding: 16 }}>
+        <Tabs activeKey={activeTab} onChange={setActiveTab}>
+          <Tabs.Tab title="设备选择" key="devices">
+            <div style={{ padding: "16px 0" }}>
+              <h3 style={{ marginBottom: 16 }}>DeviceSelection 组件测试</h3>
+              <DeviceSelection
+                selectedDevices={selectedDevices}
+                onSelect={setSelectedDevices}
+                placeholder="请选择设备"
+                showSelectedList={true}
+                selectedListMaxHeight={300}
+              />
+              <div
+                style={{
+                  marginTop: 16,
+                  padding: 12,
+                  background: "#f5f5f5",
+                  borderRadius: 8,
+                }}
+              >
+                <strong>已选设备:</strong> {selectedDevices.length} 个
+                <br />
+                <strong>设备ID:</strong> {selectedDevices.join(", ") || "无"}
+              </div>
+            </div>
+          </Tabs.Tab>
+
+          <Tabs.Tab title="好友选择" key="friends">
+            <div style={{ padding: "16px 0" }}>
+              <h3 style={{ marginBottom: 16 }}>FriendSelection 组件测试</h3>
+              <FriendSelection
+                selectedFriends={selectedFriends}
+                onSelect={setSelectedFriends}
+                placeholder="请选择微信好友"
+                showSelectedList={true}
+                selectedListMaxHeight={300}
+              />
+              <div
+                style={{
+                  marginTop: 16,
+                  padding: 12,
+                  background: "#f5f5f5",
+                  borderRadius: 8,
+                }}
+              >
+                <strong>已选好友:</strong> {selectedFriends.length} 个
+                <br />
+                <strong>好友ID:</strong> {selectedFriends.join(", ") || "无"}
+              </div>
+            </div>
+          </Tabs.Tab>
+
+          <Tabs.Tab title="群组选择" key="groups">
+            <div style={{ padding: "16px 0" }}>
+              <h3 style={{ marginBottom: 16 }}>GroupSelection 组件测试</h3>
+              <GroupSelection
+                selectedGroups={selectedGroups}
+                onSelect={setSelectedGroups}
+                placeholder="请选择微信群组"
+                showSelectedList={true}
+                selectedListMaxHeight={300}
+              />
+              <div
+                style={{
+                  marginTop: 16,
+                  padding: 12,
+                  background: "#f5f5f5",
+                  borderRadius: 8,
+                }}
+              >
+                <strong>已选群组:</strong> {selectedGroups.length} 个
+                <br />
+                <strong>群组ID:</strong> {selectedGroups.join(", ") || "无"}
+              </div>
+            </div>
+          </Tabs.Tab>
+        </Tabs>
+      </div>
+    </Layout>
+  );
+};
+
+export default ComponentTest;

nkebao/src/pages/workspace/moments-sync/new/api.ts

@@ -0,0 +1,32 @@
+import request from "@/api/request";
+
+// 创建朋友圈同步任务
+export const createMomentsSync = (params: {
+  name: string;
+  devices: string[];
+  contentLibraries: string[];
+  syncCount: number;
+  startTime: string;
+  endTime: string;
+  accountType: number;
+  status: number;
+  type: number;
+}) => request("/v1/workbench/create", params, "POST");
+
+// 更新朋友圈同步任务
+export const updateMomentsSync = (params: {
+  id: string;
+  name: string;
+  devices: string[];
+  contentLibraries: string[];
+  syncCount: number;
+  startTime: string;
+  endTime: string;
+  accountType: number;
+  status: number;
+  type: number;
+}) => request("/v1/workbench/update", params, "POST");
+
+// 获取朋友圈同步任务详情
+export const getMomentsSyncDetail = (id: string) =>
+  request("/v1/workbench/detail", { id }, "GET");

nkebao/src/pages/workspace/moments-sync/new/index.module.scss

@@ -84,7 +84,7 @@
 }
 
 .inputTime {
-  width: 90px;
+  width: 100px;
   height: 40px;
   border-radius: 8px;
   font-size: 15px;

nkebao/src/pages/workspace/moments-sync/new/index.tsx

@@ -7,8 +7,19 @@ import { NavBar } from "antd-mobile";
 import Layout from "@/components/Layout/Layout";
 import style from "./index.module.scss";
 import request from "@/api/request";
+import StepIndicator from "@/components/StepIndicator";
+import {
+  createMomentsSync,
+  updateMomentsSync,
+  getMomentsSyncDetail,
+} from "./api";
+import DeviceSelection from "@/components/DeviceSelection";
 
-const steps = ["基础设置", "设备选择", "内容库选择"];
+const steps = [
+  { id: 1, title: "基础设置", subtitle: "基础设置" },
+  { id: 2, title: "设备选择", subtitle: "设备选择" },
+  { id: 3, title: "内容库选择", subtitle: "内容库选择" },
+];
 
 const defaultForm = {
   taskName: "",
@@ -34,7 +45,7 @@ const NewMomentsSync: React.FC = () => {
     if (!id) return;
     setLoading(true);
     try {
-      const res = await request("/v1/workbench/detail", { id }, "GET");
+      const res = await getMomentsSyncDetail(id);
       if (res) {
         setFormData({
           taskName: res.name,
@@ -95,11 +106,11 @@ const NewMomentsSync: React.FC = () => {
         type: 2,
       };
       if (isEditMode && id) {
-        await request("/v1/workbench/update", { id, ...params }, "POST");
+        await updateMomentsSync({ id, ...params });
         message.success("更新成功");
         navigate(`/workspace/moments-sync/${id}`);
       } else {
-        await request("/v1/workbench/create", params, "POST");
+        await createMomentsSync(params);
         message.success("创建成功");
         navigate("/workspace/moments-sync");
       }
@@ -214,18 +225,14 @@ const NewMomentsSync: React.FC = () => {
       return (
         <div className={style.formStep}>
           <div className={style.formItem}>
-            <Input
-              placeholder="选择设备"
-              prefix={<span className={style.searchIcon}>Q</span>}
-              className={style.searchInput}
-              onClick={() => message.info("这里应弹出设备选择器")}
-              readOnly
+            <div className={style.formLabel}>选择设备</div>
+            <DeviceSelection
+              selectedDevices={formData.selectedDevices}
+              onSelect={(devices) => updateForm({ selectedDevices: devices })}
+              placeholder="请选择设备"
+              showSelectedList={true}
+              selectedListMaxHeight={200}
             />
-            {formData.selectedDevices.length > 0 && (
-              <div className={style.selectedTip}>
-                已选设备: {formData.selectedDevices.length}个
-              </div>
-            )}
           </div>
           <div className={style.formStepBtnRow}>
             <Button onClick={prev} className={style.prevBtn}>
@@ -294,25 +301,7 @@ const NewMomentsSync: React.FC = () => {
       }
     >
       <div className={style.formBg}>
-        <div className={style.formSteps}>
-          {steps.map((s, i) => (
-            <div
-              key={s}
-              className={
-                style.formStepIndicator +
-                " " +
-                (i === currentStep
-                  ? style.formStepActive
-                  : i < currentStep
-                    ? style.formStepDone
-                    : "")
-              }
-            >
-              <span className={style.formStepNum}>{i + 1}</span>
-              <span>{s}</span>
-            </div>
-          ))}
-        </div>
+        <StepIndicator currentStep={currentStep + 1} steps={steps} />
         {loading ? (
           <div className={style.formLoading}>
             <Spin />