diff --git a/nkebao/src/components/DeviceSelection/data.ts b/nkebao/src/components/DeviceSelection/data.ts new file mode 100644 index 00000000..612e9c61 --- /dev/null +++ b/nkebao/src/components/DeviceSelection/data.ts @@ -0,0 +1,26 @@ +// 设备选择项接口 +export interface DeviceSelectionItem { + id: string; + name: string; + imei: string; + wechatId: string; + status: "online" | "offline"; + wxid?: string; + nickname?: string; + usedInPlans?: number; +} + +// 组件属性接口 +export interface DeviceSelectionProps { + selectedDevices: string[]; + onSelect: (devices: string[]) => void; + placeholder?: string; + className?: string; + mode?: "input" | "dialog"; // 新增，默认input + open?: boolean; // 仅mode=dialog时生效 + onOpenChange?: (open: boolean) => void; // 仅mode=dialog时生效 + selectedListMaxHeight?: number; // 新增，已选列表最大高度，默认500 + showInput?: boolean; // 新增 + showSelectedList?: boolean; // 新增 + readonly?: boolean; // 新增 +} diff --git a/nkebao/src/components/DeviceSelection/index.module.scss b/nkebao/src/components/DeviceSelection/index.module.scss index d457fa24..c209c95f 100644 --- a/nkebao/src/components/DeviceSelection/index.module.scss +++ b/nkebao/src/components/DeviceSelection/index.module.scss @@ -19,12 +19,7 @@ background: #f8f9fa; } -.popupContainer { - display: flex; - flex-direction: column; - height: 100vh; - background: #fff; -} + .popupHeader { padding: 16px; border-bottom: 1px solid #f0f0f0; diff --git a/nkebao/src/components/DeviceSelection/index.tsx b/nkebao/src/components/DeviceSelection/index.tsx index a62625d2..9e7f1ffe 100644 --- a/nkebao/src/components/DeviceSelection/index.tsx +++ b/nkebao/src/components/DeviceSelection/index.tsx @@ -1,39 +1,10 @@ -import React, { useState, useEffect, useCallback } from "react"; -import { SearchOutlined, ReloadOutlined } from "@ant-design/icons"; -import { Checkbox, Popup, Toast } from "antd-mobile"; +import React, { useState } from "react"; +import { SearchOutlined } from "@ant-design/icons"; import { Input, Button } from "antd"; -import { getDeviceList } from "./api"; -import style from "./index.module.scss"; import { DeleteOutlined } from "@ant-design/icons"; - -// 设备选择项接口 -interface DeviceSelectionItem { - id: string; - name: string; - imei: string; - wechatId: string; - status: "online" | "offline"; - wxid?: string; - nickname?: string; - usedInPlans?: number; -} - -// 组件属性接口 -interface DeviceSelectionProps { - selectedDevices: string[]; - onSelect: (devices: string[]) => void; - placeholder?: string; - className?: string; - mode?: "input" | "dialog"; // 新增，默认input - open?: boolean; // 仅mode=dialog时生效 - onOpenChange?: (open: boolean) => void; // 仅mode=dialog时生效 - selectedListMaxHeight?: number; // 新增，已选列表最大高度，默认500 - showInput?: boolean; // 新增 - showSelectedList?: boolean; // 新增 - readonly?: boolean; // 新增 -} - -const PAGE_SIZE = 20; +import { DeviceSelectionProps } from "./data"; +import SelectionPopup from "./selectionPopup"; +import style from "./index.module.scss"; const DeviceSelection: React.FC = ({ selectedDevices, @@ -57,92 +28,10 @@ const DeviceSelection: React.FC = ({ if (!isDialog) setPopupVisible(v); }; - // 设备数据 - const [devices, setDevices] = useState([]); - const [searchQuery, setSearchQuery] = useState(""); - const [statusFilter, setStatusFilter] = useState("all"); - const [loading, setLoading] = useState(false); - const [currentPage, setCurrentPage] = useState(1); - const [total, setTotal] = useState(0); - - // 获取设备列表，支持keyword和分页 - const fetchDevices = useCallback( - async (keyword: string = "", page: number = 1) => { - setLoading(true); - try { - const res = await getDeviceList({ - page, - limit: PAGE_SIZE, - keyword: keyword.trim() || undefined, - }); - if (res && Array.isArray(res.list)) { - setDevices( - res.list.map((d: any) => ({ - id: d.id?.toString() || "", - name: d.memo || d.imei || "", - imei: d.imei || "", - wechatId: d.wechatId || "", - status: d.alive === 1 ? "online" : "offline", - wxid: d.wechatId || "", - nickname: d.nickname || "", - usedInPlans: d.usedInPlans || 0, - })) - ); - setTotal(res.total || 0); - } - } catch (error) { - console.error("获取设备列表失败:", error); - } finally { - setLoading(false); - } - }, - [] - ); - - // 打开弹窗时获取第一页 + // 打开弹窗 const openPopup = () => { if (readonly) return; - setSearchQuery(""); - setCurrentPage(1); setRealVisible(true); - fetchDevices("", 1); - }; - - // 搜索防抖 - useEffect(() => { - if (!realVisible) return; - const timer = setTimeout(() => { - setCurrentPage(1); - fetchDevices(searchQuery, 1); - }, 500); - return () => clearTimeout(timer); - }, [searchQuery, realVisible, fetchDevices]); - - // 翻页时重新请求 - useEffect(() => { - if (!realVisible) return; - fetchDevices(searchQuery, currentPage); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [currentPage]); - - // 过滤设备（只保留状态过滤） - const filteredDevices = devices.filter((device) => { - const matchesStatus = - statusFilter === "all" || - (statusFilter === "online" && device.status === "online") || - (statusFilter === "offline" && device.status === "offline"); - return matchesStatus; - }); - - const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE)); - - // 处理设备选择 - const handleDeviceToggle = (deviceId: string) => { - if (selectedDevices.includes(deviceId)) { - onSelect(selectedDevices.filter((id) => id !== deviceId)); - } else { - onSelect([...selectedDevices, deviceId]); - } }; // 获取显示文本 @@ -151,138 +40,12 @@ const DeviceSelection: React.FC = ({ return `已选择 ${selectedDevices.length} 个设备`; }; - // 获取已选设备详细信息 - const selectedDeviceObjs = selectedDevices - .map((id) => devices.find((d) => d.id === id)) - .filter(Boolean) as DeviceSelectionItem[]; - // 删除已选设备 const handleRemoveDevice = (id: string) => { if (readonly) return; onSelect(selectedDevices.filter((d) => d !== id)); }; - // 弹窗内容 - const popupContent = ( -
-
-
选择设备
-
-
-
- - setSearchQuery(val)} - className={style.popupSearchInput} - /> -
- - -
-
- {loading ? ( -
-
加载中...
-
- ) : ( -
- {filteredDevices.map((device) => ( - - ))} -
- )} -
- {/* 分页栏 */} -
-
总计 {total} 个设备
-
- - - {currentPage} / {totalPages} - - -
-
-
-
- 已选择 {selectedDevices.length} 个设备 -
-
- - -
-
-
- ); - return ( <> {/* mode=input 显示输入框，mode=dialog不显示 */} @@ -304,75 +67,71 @@ const DeviceSelection: React.FC = ({ )} {/* 已选设备列表窗口 */} - {mode === "input" && - showSelectedList && - selectedDeviceObjs.length > 0 && ( -
- {selectedDeviceObjs.map((device) => ( + {mode === "input" && showSelectedList && selectedDevices.length > 0 && ( +
+ {selectedDevices.map((deviceId) => ( +
-
- {device.name} -
- {!readonly && ( -
- ))} -
- )} + {!readonly && ( +
+ ))} +
+ )} {/* 弹窗 */} - setRealVisible(false)} - position="bottom" - bodyStyle={{ height: "100vh" }} - > - {popupContent} - + onClose={() => setRealVisible(false)} + selectedDevices={selectedDevices} + onSelect={onSelect} + /> ); }; diff --git a/nkebao/src/components/DeviceSelection/selectionPopup.tsx b/nkebao/src/components/DeviceSelection/selectionPopup.tsx index 8f77eabc..c846e3cc 100644 --- a/nkebao/src/components/DeviceSelection/selectionPopup.tsx +++ b/nkebao/src/components/DeviceSelection/selectionPopup.tsx @@ -1,7 +1,10 @@ -import React from "react"; -import { SearchOutlined, ReloadOutlined } from "@ant-design/icons"; -import { Input, Button, Checkbox, Popup } from "antd-mobile"; +import React, { useState, useEffect, useCallback } from "react"; +import { Checkbox, Popup } from "antd-mobile"; +import { getDeviceList } from "./api"; import style from "./index.module.scss"; +import Layout from "@/components/Layout/Layout"; +import PopupHeader from "@/components/PopuLayout/header"; +import PopupFooter from "@/components/PopuLayout/footer"; interface DeviceSelectionItem { id: string; @@ -19,42 +22,95 @@ interface SelectionPopupProps { onClose: () => void; selectedDevices: string[]; onSelect: (devices: string[]) => void; - devices: DeviceSelectionItem[]; - loading: boolean; - searchQuery: string; - setSearchQuery: (v: string) => void; - statusFilter: string; - setStatusFilter: (v: string) => void; - onRefresh: () => void; - filteredDevices: DeviceSelectionItem[]; - total: number; - currentPage: number; - totalPages: number; - setCurrentPage: (v: number) => void; - onCancel: () => void; - onConfirm: () => void; } +const PAGE_SIZE = 20; + const SelectionPopup: React.FC = ({ visible, onClose, selectedDevices, onSelect, - devices, - loading, - searchQuery, - setSearchQuery, - statusFilter, - setStatusFilter, - onRefresh, - filteredDevices, - total, - currentPage, - totalPages, - setCurrentPage, - onCancel, - onConfirm, }) => { + // 设备数据 + const [devices, setDevices] = useState([]); + const [searchQuery, setSearchQuery] = useState(""); + const [statusFilter, setStatusFilter] = useState("all"); + const [loading, setLoading] = useState(false); + const [currentPage, setCurrentPage] = useState(1); + const [total, setTotal] = useState(0); + + // 获取设备列表，支持keyword和分页 + const fetchDevices = useCallback( + async (keyword: string = "", page: number = 1) => { + setLoading(true); + try { + const res = await getDeviceList({ + page, + limit: PAGE_SIZE, + keyword: keyword.trim() || undefined, + }); + if (res && Array.isArray(res.list)) { + setDevices( + res.list.map((d: any) => ({ + id: d.id?.toString() || "", + name: d.memo || d.imei || "", + imei: d.imei || "", + wechatId: d.wechatId || "", + status: d.alive === 1 ? "online" : "offline", + wxid: d.wechatId || "", + nickname: d.nickname || "", + usedInPlans: d.usedInPlans || 0, + })) + ); + setTotal(res.total || 0); + } + } catch (error) { + console.error("获取设备列表失败:", error); + } finally { + setLoading(false); + } + }, + [] + ); + + // 打开弹窗时获取第一页 + useEffect(() => { + if (visible) { + setSearchQuery(""); + setCurrentPage(1); + fetchDevices("", 1); + } + }, [visible, fetchDevices]); + + // 搜索防抖 + useEffect(() => { + if (!visible) return; + const timer = setTimeout(() => { + setCurrentPage(1); + fetchDevices(searchQuery, 1); + }, 500); + return () => clearTimeout(timer); + }, [searchQuery, visible, fetchDevices]); + + // 翻页时重新请求 + useEffect(() => { + if (!visible) return; + fetchDevices(searchQuery, currentPage); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [currentPage]); + + // 过滤设备（只保留状态过滤） + const filteredDevices = devices.filter((device) => { + const matchesStatus = + statusFilter === "all" || + (statusFilter === "online" && device.status === "online") || + (statusFilter === "offline" && device.status === "offline"); + return matchesStatus; + }); + + const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE)); + // 处理设备选择 const handleDeviceToggle = (deviceId: string) => { if (selectedDevices.includes(deviceId)) { @@ -67,49 +123,45 @@ const SelectionPopup: React.FC = ({ return ( {}} + onMaskClick={onClose} position="bottom" bodyStyle={{ height: "100vh" }} closeOnMaskClick={false} > -
-
-
选择设备
-
-
-
- - -
- - -
+ fetchDevices(searchQuery, currentPage)} + showTabs={true} + tabsConfig={{ + activeKey: statusFilter, + onChange: setStatusFilter, + tabs: [ + { title: "全部", key: "all" }, + { title: "在线", key: "online" }, + { title: "离线", key: "offline" }, + ], + }} + /> + } + footer={ + + } + >
{loading ? (
@@ -147,49 +199,7 @@ const SelectionPopup: React.FC = ({
)}
- {/* 分页栏 */} -
-
总计 {total} 个设备
-
- - - {currentPage} / {totalPages} - - -
-
-
-
- 已选择 {selectedDevices.length} 个设备 -
-
- - -
-
-
+ ); }; diff --git a/nkebao/src/components/GroupSelection/index.tsx b/nkebao/src/components/GroupSelection/index.tsx index 15d2222a..ed2fb5fc 100644 --- a/nkebao/src/components/GroupSelection/index.tsx +++ b/nkebao/src/components/GroupSelection/index.tsx @@ -2,11 +2,11 @@ import React, { useState, useEffect } from "react"; import { SearchOutlined, CloseOutlined, - LeftOutlined, - RightOutlined, + ArrowLeftOutlined, + ArrowRightOutlined, DeleteOutlined, } from "@ant-design/icons"; -import { Button as AntdButton, Input as AntdInput } from "antd"; +import { Button, Input } from "antd"; import { Popup, Toast } from "antd-mobile"; import { getGroupList } from "./api"; import style from "./index.module.scss"; @@ -182,7 +182,7 @@ export default function GroupSelection({ {/* 输入框 */} {showInput && (
- {!readonly && ( - } size="small" @@ -267,7 +267,7 @@ export default function GroupSelection({
选择群聊
- setSearchQuery(e.target.value)} @@ -278,7 +278,7 @@ export default function GroupSelection({ /> {searchQuery && !readonly && ( - } size="small" @@ -365,7 +365,7 @@ export default function GroupSelection({
总计 {totalGroups} 个群聊
- setCurrentPage(Math.max(1, currentPage - 1))} @@ -373,12 +373,12 @@ export default function GroupSelection({ className={style.pageBtn} style={{ borderRadius: 16 }} > - - + + {currentPage} / {totalPages} - @@ -388,8 +388,8 @@ export default function GroupSelection({ className={style.pageBtn} style={{ borderRadius: 16 }} > - - + +
{/* 底部按钮栏 */} @@ -398,12 +398,12 @@ export default function GroupSelection({ 已选择 {selectedGroups.length} 个群聊
- setRealVisible(false)}> + +
diff --git a/nkebao/src/components/NavCommon/index.tsx b/nkebao/src/components/NavCommon/index.tsx new file mode 100644 index 00000000..d047afb7 --- /dev/null +++ b/nkebao/src/components/NavCommon/index.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import { NavBar } from "antd-mobile"; +import { ArrowLeftOutlined } from "@ant-design/icons"; +import { useNavigate } from "react-router-dom"; + +interface NavCommonProps { + title: string; + backFn?: () => void; + right?: React.ReactNode; +} + +const NavCommon: React.FC = ({ title, backFn, right }) => { + const navigate = useNavigate(); + return ( + + { + if (backFn) { + backFn(); + } else { + navigate(-1); + } + }} + /> + + } + right={right} + > + + {title} + + + ); +}; + +export default NavCommon; diff --git a/nkebao/src/components/PopuLayout/footer.module.scss b/nkebao/src/components/PopuLayout/footer.module.scss new file mode 100644 index 00000000..ae36d681 --- /dev/null +++ b/nkebao/src/components/PopuLayout/footer.module.scss @@ -0,0 +1,71 @@ +.popupFooter { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + border-top: 1px solid #f0f0f0; + background: #fff; +} + +.selectedCount { + font-size: 14px; + color: #888; +} + +.footerBtnGroup { + display: flex; + gap: 12px; +} + +.paginationRow { + border-top: 1px solid #f0f0f0; + padding: 16px; + display: flex; + align-items: center; + justify-content: space-between; + background: #fff; +} + +.totalCount { + font-size: 14px; + color: #888; +} + +.paginationControls { + display: flex; + align-items: center; + gap: 8px; +} + +.pageBtn { + padding: 0 8px; + height: 32px; + min-width: 32px; + border-radius: 16px; + border: 1px solid #d9d9d9; + color: #333; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.2s; + + &:hover:not(:disabled) { + border-color: #1677ff; + color: #1677ff; + } + + &:disabled { + background: #f5f5f5; + color: #ccc; + cursor: not-allowed; + } +} + +.pageInfo { + font-size: 14px; + color: #222; + margin: 0 8px; + min-width: 60px; + text-align: center; +} \ No newline at end of file diff --git a/nkebao/src/components/PopuLayout/footer.tsx b/nkebao/src/components/PopuLayout/footer.tsx new file mode 100644 index 00000000..0bea8d16 --- /dev/null +++ b/nkebao/src/components/PopuLayout/footer.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import { Button } from "antd"; +import style from "./footer.module.scss"; +import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons"; + +interface PopupFooterProps { + total: number; + currentPage: number; + totalPages: number; + loading: boolean; + selectedCount: number; + onPageChange: (page: number) => void; + onCancel: () => void; + onConfirm: () => void; +} + +const PopupFooter: React.FC = ({ + total, + currentPage, + totalPages, + loading, + selectedCount, + onPageChange, + onCancel, + onConfirm, +}) => { + return ( + <> + {/* 分页栏 */} +
+
总计 {total} 个设备
+
+ + + {currentPage} / {totalPages} + + +
+
+
+
已选择 {selectedCount} 个设备
+
+ + +
+
+ + ); +}; + +export default PopupFooter; diff --git a/nkebao/src/components/PopuLayout/header.module.scss b/nkebao/src/components/PopuLayout/header.module.scss new file mode 100644 index 00000000..b98ca843 --- /dev/null +++ b/nkebao/src/components/PopuLayout/header.module.scss @@ -0,0 +1,52 @@ +.popupHeader { + padding: 16px; + border-bottom: 1px solid #f0f0f0; +} + +.popupTitle { + font-size: 20px; + font-weight: 600; + text-align: center; +} + +.popupSearchRow { + display: flex; + align-items: center; + gap: 5px; + padding: 16px; +} + +.popupSearchInputWrap { + position: relative; + flex: 1; +} + +.inputIcon { + position: absolute; + left: 12px; + top: 50%; + transform: translateY(-50%); + color: #bdbdbd; + z-index: 10; + font-size: 18px; +} + + +.refreshBtn { + width: 36px; + height: 36px; +} + +.loadingIcon { + animation: spin 1s linear infinite; + font-size: 16px; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/nkebao/src/components/PopuLayout/header.tsx b/nkebao/src/components/PopuLayout/header.tsx new file mode 100644 index 00000000..17db0c63 --- /dev/null +++ b/nkebao/src/components/PopuLayout/header.tsx @@ -0,0 +1,86 @@ +import React from "react"; +import { SearchOutlined, ReloadOutlined } from "@ant-design/icons"; +import { Input, Button } from "antd"; +import { Tabs } from "antd-mobile"; +import style from "./header.module.scss"; + +interface PopupHeaderProps { + title: string; + searchQuery: string; + setSearchQuery: (value: string) => void; + searchPlaceholder?: string; + loading?: boolean; + onRefresh?: () => void; + showRefresh?: boolean; + showSearch?: boolean; + showTabs?: boolean; + tabsConfig?: { + activeKey: string; + onChange: (key: string) => void; + tabs: Array<{ title: string; key: string }>; + }; +} + +const PopupHeader: React.FC = ({ + title, + searchQuery, + setSearchQuery, + searchPlaceholder = "搜索...", + loading = false, + onRefresh, + showRefresh = true, + showSearch = true, + showTabs = false, + tabsConfig, +}) => { + return ( + <> +
+
{title}
+
+ + {showSearch && ( +
+
+ setSearchQuery(e.target.value)} + prefix={} + size="large" + /> +
+ + {showRefresh && onRefresh && ( + + )} +
+ )} + + {showTabs && tabsConfig && ( + + {tabsConfig.tabs.map((tab) => ( + + ))} + + )} + + ); +}; + +export default PopupHeader; diff --git a/nkebao/src/pages/component-test/index.tsx b/nkebao/src/pages/component-test/index.tsx new file mode 100644 index 00000000..8162c835 --- /dev/null +++ b/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([]); + + // 好友选择状态 + const [selectedFriends, setSelectedFriends] = useState([]); + + // 群组选择状态 + const [selectedGroups, setSelectedGroups] = useState([]); + + return ( + }> +
+ + +
+

DeviceSelection 组件测试

+ +
+ 已选设备: {selectedDevices.length} 个 +
+ 设备ID: {selectedDevices.join(", ") || "无"} +
+
+ + + +
+

FriendSelection 组件测试

+ +
+ 已选好友: {selectedFriends.length} 个 +
+ 好友ID: {selectedFriends.join(", ") || "无"} +
+
+ + + +
+

GroupSelection 组件测试

+ +
+ 已选群组: {selectedGroups.length} 个 +
+ 群组ID: {selectedGroups.join(", ") || "无"} +
+
+ + +
+ + ); +}; + +export default ComponentTest; diff --git a/nkebao/src/pages/workspace/moments-sync/new/api.ts b/nkebao/src/pages/workspace/moments-sync/new/api.ts new file mode 100644 index 00000000..d162f747 --- /dev/null +++ b/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"); diff --git a/nkebao/src/pages/workspace/moments-sync/new/index.module.scss b/nkebao/src/pages/workspace/moments-sync/new/index.module.scss index 3cf58561..94b4005d 100644 --- a/nkebao/src/pages/workspace/moments-sync/new/index.module.scss +++ b/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; diff --git a/nkebao/src/pages/workspace/moments-sync/new/index.tsx b/nkebao/src/pages/workspace/moments-sync/new/index.tsx index ced744ac..707bf3bb 100644 --- a/nkebao/src/pages/workspace/moments-sync/new/index.tsx +++ b/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 (
- Q} - className={style.searchInput} - onClick={() => message.info("这里应弹出设备选择器")} - readOnly +
选择设备
+ updateForm({ selectedDevices: devices })} + placeholder="请选择设备" + showSelectedList={true} + selectedListMaxHeight={200} /> - {formData.selectedDevices.length > 0 && ( -
- 已选设备: {formData.selectedDevices.length}个 -
- )}