diff --git a/nkebao/.env.development b/nkebao/.env.development index f37023e8..fde60295 100644 --- a/nkebao/.env.development +++ b/nkebao/.env.development @@ -1,5 +1,5 @@ # 基础环境变量示例 VITE_API_BASE_URL=http://www.yishi.com -VITE_API_BASE_URL=https://ckbapi.quwanzhi.com +# VITE_API_BASE_URL=https://ckbapi.quwanzhi.com VITE_APP_TITLE=Nkebao Base diff --git a/nkebao/src/pages/workspace/auto-like/new/index.tsx b/nkebao/src/pages/workspace/auto-like/new/index.tsx index 276cf010..048eefd0 100644 --- a/nkebao/src/pages/workspace/auto-like/new/index.tsx +++ b/nkebao/src/pages/workspace/auto-like/new/index.tsx @@ -6,17 +6,10 @@ import { ArrowLeftOutlined, CheckOutlined, } from "@ant-design/icons"; -import { - Button, - Input, - Switch, - Spin, - Modal, - Table, - Select, - message, -} from "antd"; +import { Button, Input, Switch, Spin, message } from "antd"; import Layout from "@/components/Layout/Layout"; +import DeviceSelection from "@/components/DeviceSelection"; +import FriendSelection from "@/components/FriendSelection"; import { createAutoLikeTask, updateAutoLikeTask, @@ -27,32 +20,20 @@ import { ContentType, } from "@/pages/workspace/auto-like/record/api"; import style from "./new.module.scss"; +import MeauMobile from "@/components/MeauMobile/MeauMoible"; const contentTypeLabels: Record = { text: "文字", image: "图片", video: "视频", - link: "链接", }; const steps = [ { title: "基础设置", desc: "设置点赞规则" }, { title: "设备选择", desc: "选择执行设备" }, - { title: "好友设置", desc: "选择目标人群" }, + { title: "人群选择", desc: "选择目标人群" }, ]; -// 假数据(实际应从接口获取) -const mockDevices = Array.from({ length: 10 }).map((_, i) => ({ - key: String(i + 1), - name: `设备${i + 1}`, - id: `dev${i + 1}`, -})); -const mockFriends = Array.from({ length: 20 }).map((_, i) => ({ - key: String(i + 1), - name: `好友${i + 1}`, - id: `friend${i + 1}`, -})); - const NewAutoLike: React.FC = () => { const navigate = useNavigate(); const { id } = useParams<{ id: string }>(); @@ -75,15 +56,6 @@ const NewAutoLike: React.FC = () => { enableFriendTags: false, friendTags: "", }); - // 设备/好友选择弹窗 - const [deviceModalOpen, setDeviceModalOpen] = useState(false); - const [friendModalOpen, setFriendModalOpen] = useState(false); - const [selectedDeviceRowKeys, setSelectedDeviceRowKeys] = useState( - [] - ); - const [selectedFriendRowKeys, setSelectedFriendRowKeys] = useState( - [] - ); useEffect(() => { if (isEditMode && id) { @@ -115,8 +87,6 @@ const NewAutoLike: React.FC = () => { (taskDetail as any).status === 1 || (taskDetail as any).status === "running" ); - setSelectedDeviceRowKeys(config.devices || []); - setSelectedFriendRowKeys(config.friends || []); } } catch (error) { message.error("获取任务详情失败"); @@ -130,8 +100,23 @@ const NewAutoLike: React.FC = () => { setFormData((prev) => ({ ...prev, ...data })); }; - const handleNext = () => setCurrentStep((prev) => Math.min(prev + 1, 3)); - const handlePrev = () => setCurrentStep((prev) => Math.max(prev - 1, 1)); + const handleNext = () => { + setCurrentStep((prev) => Math.min(prev + 1, 3)); + // 滚动到顶部 + const mainElement = document.querySelector("main"); + if (mainElement) { + mainElement.scrollTo({ top: 0, behavior: "smooth" }); + } + }; + + const handlePrev = () => { + setCurrentStep((prev) => Math.max(prev - 1, 1)); + // 滚动到顶部 + const mainElement = document.querySelector("main"); + if (mainElement) { + mainElement.scrollTo({ top: 0, behavior: "smooth" }); + } + }; const handleComplete = async () => { if (!formData.name.trim()) { @@ -219,7 +204,21 @@ const NewAutoLike: React.FC = () => { } className={style.counterBtn} /> - {formData.interval} 秒 +
+ + handleUpdateFormData({ + interval: Number.parseInt(e.target.value) || 1, + }) + } + className={style.counterInput} + /> + +
); @@ -330,48 +363,31 @@ const NewAutoLike: React.FC = () => { const renderDeviceSelection = () => (
-
选择设备
- -
- {formData.devices.length > 0 - ? `已选设备: ${formData.devices.length} 个` - : "未选择设备"} -
-
- setDeviceModalOpen(false)} - onOk={() => { - handleUpdateFormData({ devices: selectedDeviceRowKeys }); - setDeviceModalOpen(false); - }} - okText="确定" - cancelText="取消" - width={520} - > - setSelectedDeviceRowKeys(keys as string[]), - }} - columns={[ - { title: "设备名称", dataIndex: "name", key: "name" }, - { title: "ID", dataIndex: "id", key: "id" }, - ]} - dataSource={mockDevices} - pagination={false} - rowKey="id" - size="small" + handleUpdateFormData({ devices })} + mode="dialog" + showInput={true} + showSelectedList={true} /> - + + + ); @@ -379,82 +395,30 @@ const NewAutoLike: React.FC = () => { const renderFriendSettings = () => (
-
选择微信好友
- -
- {formData.friends.length > 0 - ? `已选好友: ${formData.friends.length} 个` - : "未选择好友"} -
-
- setFriendModalOpen(false)} - onOk={() => { - handleUpdateFormData({ friends: selectedFriendRowKeys }); - setFriendModalOpen(false); - }} - okText="确定" - cancelText="取消" - width={520} - > -
setSelectedFriendRowKeys(keys as string[]), - }} - columns={[ - { title: "好友昵称", dataIndex: "name", key: "name" }, - { title: "ID", dataIndex: "id", key: "id" }, - ]} - dataSource={mockFriends} - pagination={false} - rowKey="id" - size="small" + handleUpdateFormData({ friends })} + deviceIds={formData.devices} /> - - - ); - - // 底部按钮 - const renderFooterBtn = () => ( -
- {currentStep > 1 && ( - - )} - {currentStep < 3 && ( - - )} - {currentStep === 3 && ( - - )} +
+ + ); @@ -476,7 +440,7 @@ const NewAutoLike: React.FC = () => { {renderStepIndicator()} } - footer={renderFooterBtn()} + footer={} >
{isLoading ? ( diff --git a/nkebao/src/pages/workspace/auto-like/new/new.module.scss b/nkebao/src/pages/workspace/auto-like/new/new.module.scss index 89b7a217..630babd4 100644 --- a/nkebao/src/pages/workspace/auto-like/new/new.module.scss +++ b/nkebao/src/pages/workspace/auto-like/new/new.module.scss @@ -1,286 +1,321 @@ -.formBg { - background: #f8f6f3; - min-height: 100vh; - padding: 0 0 80px 0; - position: relative; -} - -.stepIndicatorWrapper { - position: sticky; - top: 0; - z-index: 20; - background: #f8f6f3; - padding: 16px 0 8px 0; -} - -.stepIndicator { - display: flex; - justify-content: center; - gap: 32px; -} - -.stepItem { - display: flex; - flex-direction: column; - align-items: center; - color: #bbb; - font-size: 13px; - font-weight: 400; - transition: color 0.2s; - min-width: 80px; -} - -.stepActive { - color: #188eee; - font-weight: 600; -} - -.stepDone { - color: #19c37d; -} - -.stepNum { - width: 28px; - height: 28px; - border-radius: 50%; - background: #e5e7eb; - color: #888; - display: flex; - align-items: center; - justify-content: center; - font-size: 15px; - margin-bottom: 4px; -} - -.stepActive .stepNum { - background: #188eee; - color: #fff; -} - -.stepDone .stepNum { - background: #19c37d; - color: #fff; -} - -.stepTitle { - font-size: 14px; - margin-top: 2px; - font-weight: 500; -} - -.stepDesc { - font-size: 12px; - color: #888; - margin-top: 2px; - text-align: center; -} - -.stepProgressBarBg { - position: relative; - width: 80%; - height: 4px; - background: #e5e7eb; - border-radius: 2px; - margin: 12px auto 0 auto; -} - -.stepProgressBar { - position: absolute; - left: 0; - top: 0; - height: 100%; - background: #188eee; - border-radius: 2px; - transition: width 0.3s; -} - -.basicSection { - background: none; - border-radius: 0; - box-shadow: none; - padding: 24px 16px 0 16px; - width: 100%; - max-width: 600px; - margin: 0 auto; -} - -.formItem { - margin-bottom: 24px; -} - -.formLabel { - font-size: 15px; - color: #222; - font-weight: 500; - margin-bottom: 10px; -} - -.input { - height: 44px; - border-radius: 8px; - font-size: 15px; -} - -.timeRow { - display: flex; - align-items: center; -} - -.inputTime { - width: 90px; - height: 40px; - border-radius: 8px; - font-size: 15px; -} - -.timeTo { - margin: 0 8px; - color: #888; -} - -.counterRow { - display: flex; - align-items: center; - gap: 0; -} - -.counterBtn { - width: 40px; - height: 40px; - border-radius: 8px; - background: #fff; - border: 1px solid #e5e7eb; - font-size: 16px; - color: #188eee; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: border 0.2s; -} - -.counterBtn:hover { - border: 1px solid #188eee; -} - -.counterValue { - width: 48px; - text-align: center; - font-size: 18px; - font-weight: 600; - color: #222; -} - -.counterTip { - font-size: 12px; - color: #aaa; - margin-top: 4px; -} - -.contentTypes { - display: flex; - gap: 8px; -} - -.contentTypeTag { - padding: 8px 16px; - border-radius: 6px; - background: #f5f5f5; - color: #666; - font-size: 14px; - cursor: pointer; - transition: all 0.2s; -} - -.contentTypeTag:hover { - background: #e5e7eb; -} - -.contentTypeTagActive { - padding: 8px 16px; - border-radius: 6px; - background: #e6f7ff; - color: #188eee; - border: 1px solid #91d5ff; - font-size: 14px; - cursor: pointer; - transition: all 0.2s; -} - -.switchRow { - display: flex; - align-items: center; - justify-content: space-between; -} - -.switchLabel { - font-size: 15px; - color: #222; - font-weight: 500; -} - -.switch { - margin-top: 0; -} - -.selectedTip { - font-size: 13px; - color: #888; - margin-top: 8px; -} - -.formStepBtnRow { - display: flex; - justify-content: flex-end; - gap: 12px; - margin-top: 32px; -} - -.prevBtn { - height: 44px; - border-radius: 8px; - font-size: 15px; - min-width: 100px; -} - -.nextBtn { - height: 44px; - border-radius: 8px; - font-size: 15px; - min-width: 100px; -} - -.completeBtn { - height: 44px; - border-radius: 8px; - font-size: 15px; - min-width: 100px; -} - -.formLoading { - min-height: 200px; - display: flex; - align-items: center; - justify-content: center; -} - -.footerBtnBar { - position: fixed; - left: 0; - right: 0; - bottom: 0; - z-index: 30; - background: #fff; - box-shadow: 0 -2px 8px rgba(0,0,0,0.04); - padding: 16px 24px 24px 24px; - display: flex; - justify-content: center; - gap: 16px; -} - -.prevBtn, .nextBtn, .completeBtn { - height: 44px; - border-radius: 8px; - font-size: 15px; - min-width: 120px; +.formBg { + background: #f8f6f3; + min-height: 100vh; + padding: 0 0 80px 0; + position: relative; +} + +.stepIndicatorWrapper { + position: sticky; + top: 0; + z-index: 20; + background: #f8f6f3; + padding: 16px 0 8px 0; +} + +.stepIndicator { + display: flex; + justify-content: center; + gap: 32px; +} + +.stepItem { + display: flex; + flex-direction: column; + align-items: center; + color: #bbb; + font-size: 13px; + font-weight: 400; + transition: color 0.2s; + min-width: 80px; +} + +.stepActive { + color: #188eee; + font-weight: 600; +} + +.stepDone { + color: #19c37d; +} + +.stepNum { + width: 28px; + height: 28px; + border-radius: 50%; + background: #e5e7eb; + color: #888; + display: flex; + align-items: center; + justify-content: center; + font-size: 15px; + margin-bottom: 4px; +} + +.stepActive .stepNum { + background: #188eee; + color: #fff; +} + +.stepDone .stepNum { + background: #19c37d; + color: #fff; +} + +.stepTitle { + font-size: 14px; + margin-top: 2px; + font-weight: 500; +} + +.stepDesc { + font-size: 12px; + color: #888; + margin-top: 2px; + text-align: center; +} + +.stepProgressBarBg { + position: relative; + width: 80%; + height: 4px; + background: #e5e7eb; + border-radius: 2px; + margin: 12px auto 0 auto; +} + +.stepProgressBar { + position: absolute; + left: 0; + top: 0; + height: 100%; + background: #188eee; + border-radius: 2px; + transition: width 0.3s; +} + +.basicSection { + background: none; + border-radius: 0; + box-shadow: none; + padding: 24px 16px 0 16px; + width: 100%; + max-width: 600px; + margin: 0 auto; +} + +.formItem { + margin-bottom: 24px; +} + +.formLabel { + font-size: 15px; + color: #222; + font-weight: 500; + margin-bottom: 10px; +} + +.input { + height: 44px; + border-radius: 8px; + font-size: 15px; +} + +.timeRow { + display: flex; + align-items: center; +} + +.inputTime { + width: 90px; + height: 40px; + border-radius: 8px; + font-size: 15px; +} + +.timeTo { + margin: 0 8px; + color: #888; +} + +.counterRow { + display: flex; + align-items: center; + gap: 0; +} + +.counterBtn { + width: 40px; + height: 40px; + border-radius: 8px; + background: #fff; + border: 1px solid #e5e7eb; + font-size: 16px; + color: #188eee; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: border 0.2s; +} + +.counterBtn:hover { + border: 1px solid #188eee; +} + +.counterValue { + width: 48px; + text-align: center; + font-size: 18px; + font-weight: 600; + color: #222; +} + +.counterInputWrapper { + position: relative; + width: 80px; + display: flex; + align-items: center; +} + +.counterInput { + width: 100%; + height: 40px; + border-radius: 0; + border: 1px solid #e5e7eb; + border-left: none; + border-right: none; + text-align: center; + font-size: 16px; + font-weight: 600; + color: #222; + padding: 0 8px; +} + +.counterUnit { + position: absolute; + right: 8px; + color: #888; + font-size: 14px; + pointer-events: none; +} + +.timeSeparator { + margin: 0 8px; + color: #888; + font-size: 14px; +} + +.counterTip { + font-size: 12px; + color: #aaa; + margin-top: 4px; +} + +.contentTypes { + display: flex; + gap: 8px; +} + +.contentTypeTag { + padding: 8px 16px; + border-radius: 6px; + background: #f5f5f5; + color: #666; + font-size: 14px; + cursor: pointer; + transition: all 0.2s; +} + +.contentTypeTag:hover { + background: #e5e7eb; +} + +.contentTypeTagActive { + padding: 8px 16px; + border-radius: 6px; + background: #e6f7ff; + color: #188eee; + border: 1px solid #91d5ff; + font-size: 14px; + cursor: pointer; + transition: all 0.2s; +} + +.switchRow { + display: flex; + align-items: center; + justify-content: space-between; +} + +.switchLabel { + font-size: 15px; + color: #222; + font-weight: 500; +} + +.switch { + margin-top: 0; +} + +.selectedTip { + font-size: 13px; + color: #888; + margin-top: 8px; +} + +.formStepBtnRow { + display: flex; + justify-content: flex-end; + gap: 12px; + margin-top: 32px; +} + +.prevBtn { + height: 44px; + border-radius: 8px; + font-size: 15px; + min-width: 100px; +} + +.nextBtn { + height: 44px; + border-radius: 8px; + font-size: 15px; + min-width: 100px; +} + +.completeBtn { + height: 44px; + border-radius: 8px; + font-size: 15px; + min-width: 100px; +} + +.formLoading { + min-height: 200px; + display: flex; + align-items: center; + justify-content: center; +} + +.footerBtnBar { + position: fixed; + left: 0; + right: 0; + bottom: 0; + z-index: 30; + background: #fff; + box-shadow: 0 -2px 8px rgba(0,0,0,0.04); + padding: 16px 24px 24px 24px; + display: flex; + justify-content: center; + gap: 16px; +} + +.prevBtn, .nextBtn, .completeBtn { + height: 44px; + border-radius: 8px; + font-size: 15px; + min-width: 120px; } \ No newline at end of file