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

功能、和样式修复

nkebao/src/components/GroupSelection/index.module.scss

@@ -21,7 +21,7 @@
 .popupContainer {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: 100vh;
   background: #fff;
 }
 .popupHeader {

nkebao/src/components/GroupSelection/index.tsx

@@ -7,7 +7,7 @@ import {
 } from "@ant-design/icons";
 import { Input, Button, Popup, Toast } from "antd-mobile";
 import { getGroupList } from "./api";
-import style from "./module.scss";
+import style from "./index.module.scss";
 
 // 群组接口类型
 interface WechatGroup {
@@ -27,6 +27,8 @@ interface GroupSelectionProps {
   onSelectDetail?: (groups: WechatGroup[]) => void;
   placeholder?: string;
   className?: string;
+  visible?: boolean; // 新增
+  onVisibleChange?: (visible: boolean) => void; // 新增
 }
 
 export default function GroupSelection({
@@ -35,6 +37,8 @@ export default function GroupSelection({
   onSelectDetail,
   placeholder = "选择群聊",
   className = "",
+  visible,
+  onVisibleChange,
 }: GroupSelectionProps) {
   const [popupVisible, setPopupVisible] = useState(false);
   const [groups, setGroups] = useState<WechatGroup[]>([]);
@@ -44,30 +48,37 @@ export default function GroupSelection({
   const [totalGroups, setTotalGroups] = useState(0);
   const [loading, setLoading] = useState(false);
 
+  // 受控弹窗逻辑
+  const realVisible = visible !== undefined ? visible : popupVisible;
+  const setRealVisible = (v: boolean) => {
+    if (onVisibleChange) onVisibleChange(v);
+    if (visible === undefined) setPopupVisible(v);
+  };
+
   // 打开弹窗并请求第一页群组
   const openPopup = () => {
     setCurrentPage(1);
     setSearchQuery("");
-    setPopupVisible(true);
+    setRealVisible(true);
     fetchGroups(1, "");
   };
 
   // 当页码变化时，拉取对应页数据（弹窗已打开时）
   useEffect(() => {
-    if (popupVisible && currentPage !== 1) {
+    if (realVisible && currentPage !== 1) {
       fetchGroups(currentPage, searchQuery);
     }
-  }, [currentPage, popupVisible, searchQuery]);
+  }, [currentPage, realVisible, searchQuery]);
 
   // 搜索防抖
   useEffect(() => {
-    if (!popupVisible) return;
+    if (!realVisible) return;
     const timer = setTimeout(() => {
       setCurrentPage(1);
       fetchGroups(1, searchQuery);
     }, 500);
     return () => clearTimeout(timer);
-  }, [searchQuery, popupVisible]);
+  }, [searchQuery, realVisible]);
 
   // 获取群组列表API - 支持keyword
   const fetchGroups = async (page: number, keyword: string = "") => {
@@ -128,7 +139,7 @@ export default function GroupSelection({
   };
 
   const handleConfirm = () => {
-    setPopupVisible(false);
+    setRealVisible(false);
   };
 
   // 清空搜索
@@ -169,10 +180,10 @@ export default function GroupSelection({
 
       {/* 群组选择弹窗 */}
       <Popup
-        visible={popupVisible}
-        onMaskClick={() => setPopupVisible(false)}
+        visible={realVisible}
+        onMaskClick={() => setRealVisible(false)}
         position="bottom"
-        bodyStyle={{ height: "80vh" }}
+        bodyStyle={{ height: "100vh" }}
       >
         <div className={style.popupContainer}>
           <div className={style.popupHeader}>
@@ -297,14 +308,17 @@ export default function GroupSelection({
           <div className={style.popupFooter}>
             <Button
               fill="outline"
-              onClick={() => setPopupVisible(false)}
+              onClick={() => setRealVisible(false)}
               className={style.cancelBtn}
             >
               取消
             </Button>
             <Button
               color="primary"
-              onClick={handleConfirm}
+              onClick={() => {
+                setRealVisible(false);
+                handleConfirm();
+              }}
               className={style.confirmBtn}
             >
               确定 ({selectedGroups.length})