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

群组推送，代码同步一下

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
 

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<ContentType, string> = {
   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<string[]>(
-    []
-  );
-  const [selectedFriendRowKeys, setSelectedFriendRowKeys] = useState<string[]>(
-    []
-  );
 
   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}
           />
-          <span className={style.counterValue}>{formData.interval} 秒</span>
+          <div className={style.counterInputWrapper}>
+            <Input
+              type="number"
+              min={1}
+              max={60}
+              value={formData.interval}
+              onChange={(e) =>
+                handleUpdateFormData({
+                  interval: Number.parseInt(e.target.value) || 1,
+                })
+              }
+              className={style.counterInput}
+            />
+            <span className={style.counterUnit}>秒</span>
+          </div>
           <Button
             icon={<PlusOutlined />}
             onClick={() =>
@@ -228,6 +227,7 @@ const NewAutoLike: React.FC = () => {
             className={style.counterBtn}
           />
         </div>
+        <div className={style.counterTip}>设置两次点赞之间的最小时间间隔</div>
       </div>
       <div className={style.formItem}>
         <div className={style.formLabel}>每日最大点赞数</div>
@@ -241,7 +241,21 @@ const NewAutoLike: React.FC = () => {
             }
             className={style.counterBtn}
           />
-          <span className={style.counterValue}>{formData.maxLikes} 次</span>
+          <div className={style.counterInputWrapper}>
+            <Input
+              type="number"
+              min={1}
+              max={500}
+              value={formData.maxLikes}
+              onChange={(e) =>
+                handleUpdateFormData({
+                  maxLikes: Number.parseInt(e.target.value) || 1,
+                })
+              }
+              className={style.counterInput}
+            />
+            <span className={style.counterUnit}>次/天</span>
+          </div>
           <Button
             icon={<PlusOutlined />}
             onClick={() =>
@@ -250,6 +264,7 @@ const NewAutoLike: React.FC = () => {
             className={style.counterBtn}
           />
         </div>
+        <div className={style.counterTip}>设置每天最多点赞的次数</div>
       </div>
       <div className={style.formItem}>
         <div className={style.formLabel}>点赞时间范围</div>
@@ -262,7 +277,7 @@ const NewAutoLike: React.FC = () => {
             }
             className={style.inputTime}
           />
-          <span className={style.timeTo}>至</span>
+          <span className={style.timeSeparator}>至</span>
           <Input
             type="time"
             value={formData.endTime}
@@ -270,22 +285,31 @@ const NewAutoLike: React.FC = () => {
             className={style.inputTime}
           />
         </div>
+        <div className={style.counterTip}>设置每天可以点赞的时间段</div>
       </div>
       <div className={style.formItem}>
         <div className={style.formLabel}>点赞内容类型</div>
-        <Select
-          mode="multiple"
-          style={{ width: "100%" }}
-          placeholder="请选择内容类型"
-          value={formData.contentTypes}
-          onChange={(value) => handleUpdateFormData({ contentTypes: value })}
-        >
+        <div className={style.contentTypes}>
           {(["text", "image", "video"] as ContentType[]).map((type) => (
-            <Select.Option key={type} value={type}>
+            <Button
+              key={type}
+              type={
+                formData.contentTypes.includes(type) ? "primary" : "default"
+              }
+              ghost={!formData.contentTypes.includes(type)}
+              className={style.contentTypeBtn}
+              onClick={() => {
+                const newTypes = formData.contentTypes.includes(type)
+                  ? formData.contentTypes.filter((t) => t !== type)
+                  : [...formData.contentTypes, type];
+                handleUpdateFormData({ contentTypes: newTypes });
+              }}
+            >
               {contentTypeLabels[type]}
-            </Select.Option>
+            </Button>
           ))}
-        </Select>
+        </div>
+        <div className={style.counterTip}>选择要点赞的内容类型</div>
       </div>
       <div className={style.formItem}>
         <div className={style.switchRow}>
@@ -300,7 +324,6 @@ const NewAutoLike: React.FC = () => {
         </div>
         {formData.enableFriendTags && (
           <div className={style.formItem}>
-            <div className={style.formLabel}>好友标签</div>
             <Input
               placeholder="请输入标签"
               value={formData.friendTags}
@@ -323,6 +346,16 @@ const NewAutoLike: React.FC = () => {
           />
         </div>
       </div>
+      <Button
+        type="primary"
+        block
+        onClick={handleNext}
+        size="large"
+        className={style.mainBtn}
+        disabled={!formData.name.trim()}
+      >
+        下一步
+      </Button>
     </div>
   );
 
@@ -330,48 +363,31 @@ const NewAutoLike: React.FC = () => {
   const renderDeviceSelection = () => (
     <div className={style.basicSection}>
       <div className={style.formItem}>
-        <div className={style.formLabel}>选择设备</div>
-        <Button
-          type="dashed"
-          onClick={() => setDeviceModalOpen(true)}
-          style={{ width: "100%", marginBottom: 12 }}
-        >
-          选择设备
-        </Button>
-        <div>
-          {formData.devices.length > 0
-            ? `已选设备: ${formData.devices.length} 个`
-            : "未选择设备"}
-        </div>
-      </div>
-      <Modal
-        title="选择设备"
-        open={deviceModalOpen}
-        onCancel={() => setDeviceModalOpen(false)}
-        onOk={() => {
-          handleUpdateFormData({ devices: selectedDeviceRowKeys });
-          setDeviceModalOpen(false);
-        }}
-        okText="确定"
-        cancelText="取消"
-        width={520}
-      >
-        <Table
-          rowSelection={{
-            type: "checkbox",
-            selectedRowKeys: selectedDeviceRowKeys,
-            onChange: (keys) => setSelectedDeviceRowKeys(keys as string[]),
-          }}
-          columns={[
-            { title: "设备名称", dataIndex: "name", key: "name" },
-            { title: "ID", dataIndex: "id", key: "id" },
-          ]}
-          dataSource={mockDevices}
-          pagination={false}
-          rowKey="id"
-          size="small"
+        <DeviceSelection
+          selectedDevices={formData.devices}
+          onSelect={(devices) => handleUpdateFormData({ devices })}
+          mode="dialog"
+          showInput={true}
+          showSelectedList={true}
         />
-      </Modal>
+      </div>
+      <Button
+        onClick={handlePrev}
+        className={style.prevBtn}
+        size="large"
+        style={{ marginRight: 16 }}
+      >
+        上一步
+      </Button>
+      <Button
+        type="primary"
+        onClick={handleNext}
+        className={style.nextBtn}
+        size="large"
+        disabled={formData.devices.length === 0}
+      >
+        下一步
+      </Button>
     </div>
   );
 
@@ -379,82 +395,30 @@ const NewAutoLike: React.FC = () => {
   const renderFriendSettings = () => (
     <div className={style.basicSection}>
       <div className={style.formItem}>
-        <div className={style.formLabel}>选择微信好友</div>
-        <Button
-          type="dashed"
-          onClick={() => setFriendModalOpen(true)}
-          style={{ width: "100%", marginBottom: 12 }}
-        >
-          选择微信好友
-        </Button>
-        <div>
-          {formData.friends.length > 0
-            ? `已选好友: ${formData.friends.length} 个`
-            : "未选择好友"}
-        </div>
-      </div>
-      <Modal
-        title="选择微信好友"
-        open={friendModalOpen}
-        onCancel={() => setFriendModalOpen(false)}
-        onOk={() => {
-          handleUpdateFormData({ friends: selectedFriendRowKeys });
-          setFriendModalOpen(false);
-        }}
-        okText="确定"
-        cancelText="取消"
-        width={520}
-      >
-        <Table
-          rowSelection={{
-            type: "checkbox",
-            selectedRowKeys: selectedFriendRowKeys,
-            onChange: (keys) => setSelectedFriendRowKeys(keys as string[]),
-          }}
-          columns={[
-            { title: "好友昵称", dataIndex: "name", key: "name" },
-            { title: "ID", dataIndex: "id", key: "id" },
-          ]}
-          dataSource={mockFriends}
-          pagination={false}
-          rowKey="id"
-          size="small"
+        <FriendSelection
+          selectedFriends={formData.friends}
+          onSelect={(friends) => handleUpdateFormData({ friends })}
+          deviceIds={formData.devices}
         />
-      </Modal>
-    </div>
-  );
-
-  // 底部按钮
-  const renderFooterBtn = () => (
-    <div className={style.footerBtnBar}>
-      {currentStep > 1 && (
-        <Button onClick={handlePrev} className={style.prevBtn}>
-          上一步
-        </Button>
-      )}
-      {currentStep < 3 && (
-        <Button
-          type="primary"
-          onClick={handleNext}
-          className={style.nextBtn}
-          disabled={
-            (currentStep === 1 && !formData.name.trim()) ||
-            (currentStep === 2 && formData.devices.length === 0)
-          }
-        >
-          下一步
-        </Button>
-      )}
-      {currentStep === 3 && (
-        <Button
-          type="primary"
-          onClick={handleComplete}
-          loading={isSubmitting}
-          className={style.completeBtn}
-        >
-          {isEditMode ? "更新任务" : "创建任务"}
-        </Button>
-      )}
+      </div>
+      <Button
+        onClick={handlePrev}
+        className={style.prevBtn}
+        size="large"
+        style={{ marginRight: 16 }}
+      >
+        上一步
+      </Button>
+      <Button
+        type="primary"
+        onClick={handleComplete}
+        className={style.completeBtn}
+        size="large"
+        loading={isSubmitting}
+        disabled={formData.friends.length === 0}
+      >
+        {isEditMode ? "更新任务" : "创建任务"}
+      </Button>
     </div>
   );
 
@@ -476,7 +440,7 @@ const NewAutoLike: React.FC = () => {
           {renderStepIndicator()}
         </>
       }
-      footer={renderFooterBtn()}
+      footer={<MeauMobile activeKey="workspace" />}
     >
       <div className={style.formBg}>
         {isLoading ? (

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;
 }