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

样式优化

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

@@ -205,19 +205,18 @@
 }
 
 .popupFooter {
-  border-top: 1px solid #f0f0f0;
-  padding: 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 16px;
+  border-top: 1px solid #f0f0f0;
   background: #fff;
 }
-.cancelBtn {
-  padding: 0 24px;
-  border-radius: 24px;
-  border: 1px solid #e5e6eb;
+.selectedCount {
+  font-size: 14px;
+  color: #888;
 }
-.confirmBtn {
-  padding: 0 24px;
-  border-radius: 24px;
+.footerBtnGroup {
+  display: flex;
+  gap: 12px;
 }

nkebao/src/components/GroupSelection/index.tsx

@@ -4,8 +4,10 @@ import {
   CloseOutlined,
   LeftOutlined,
   RightOutlined,
+  DeleteOutlined,
 } from "@ant-design/icons";
-import { Input, Button, Popup, Toast } from "antd-mobile";
+import { Button as AntdButton, Input as AntdInput } from "antd";
+import { Popup, Toast } from "antd-mobile";
 import { getGroupList } from "./api";
 import style from "./index.module.scss";
 
@@ -27,8 +29,12 @@ interface GroupSelectionProps {
   onSelectDetail?: (groups: WechatGroup[]) => void;
   placeholder?: string;
   className?: string;
-  visible?: boolean; // 新增
-  onVisibleChange?: (visible: boolean) => void; // 新增
+  visible?: boolean;
+  onVisibleChange?: (visible: boolean) => void;
+  selectedListMaxHeight?: number;
+  showInput?: boolean;
+  showSelectedList?: boolean;
+  readonly?: boolean;
 }
 
 export default function GroupSelection({
@@ -39,6 +45,10 @@ export default function GroupSelection({
   className = "",
   visible,
   onVisibleChange,
+  selectedListMaxHeight = 300,
+  showInput = true,
+  showSelectedList = true,
+  readonly = false,
 }: GroupSelectionProps) {
   const [popupVisible, setPopupVisible] = useState(false);
   const [groups, setGroups] = useState<WechatGroup[]>([]);
@@ -48,6 +58,17 @@ export default function GroupSelection({
   const [totalGroups, setTotalGroups] = useState(0);
   const [loading, setLoading] = useState(false);
 
+  // 获取已选群聊详细信息
+  const selectedGroupObjs = selectedGroups
+    .map((id) => groups.find((g) => g.id === id))
+    .filter(Boolean) as WechatGroup[];
+
+  // 删除已选群聊
+  const handleRemoveGroup = (id: string) => {
+    if (readonly) return;
+    onSelect(selectedGroups.filter((g) => g !== id));
+  };
+
   // 受控弹窗逻辑
   const realVisible = visible !== undefined ? visible : popupVisible;
   const setRealVisible = (v: boolean) => {
@@ -55,8 +76,9 @@ export default function GroupSelection({
     if (visible === undefined) setPopupVisible(v);
   };
 
-  // 打开弹窗并请求第一页群组
+  // 打开弹窗
   const openPopup = () => {
+    if (readonly) return;
     setCurrentPage(1);
     setSearchQuery("");
     setRealVisible(true);
@@ -152,35 +174,85 @@ export default function GroupSelection({
   return (
     <>
       {/* 输入框 */}
-      <div className={`${style.inputWrapper} ${className}`}>
-        <span className={style.inputIcon}>
-          <svg
-            width="20"
-            height="20"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-            />
-          </svg>
-        </span>
-        <Input
-          placeholder={placeholder}
-          className={style.input}
-          readOnly
-          onClick={openPopup}
-          value={getDisplayText()}
-        />
-      </div>
-
-      {/* 群组选择弹窗 */}
+      {showInput && (
+        <div className={`${style.inputWrapper} ${className}`}>
+          <AntdInput
+            placeholder={placeholder}
+            value={getDisplayText()}
+            onClick={openPopup}
+            prefix={<SearchOutlined />}
+            allowClear={!readonly}
+            size="large"
+            readOnly={readonly}
+            disabled={readonly}
+            style={
+              readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
+            }
+          />
+        </div>
+      )}
+      {/* 已选群聊列表窗口 */}
+      {showSelectedList && selectedGroupObjs.length > 0 && (
+        <div
+          className={style.selectedListWindow}
+          style={{
+            maxHeight: selectedListMaxHeight,
+            overflowY: "auto",
+            marginTop: 8,
+            border: "1px solid #e5e6eb",
+            borderRadius: 8,
+            background: "#fff",
+          }}
+        >
+          {selectedGroupObjs.map((group) => (
+            <div
+              key={group.id}
+              className={style.selectedListRow}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                padding: "4px 8px",
+                borderBottom: "1px solid #f0f0f0",
+                fontSize: 14,
+              }}
+            >
+              <div
+                style={{
+                  flex: 1,
+                  minWidth: 0,
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                }}
+              >
+                {group.name || group.chatroomId || group.id}
+              </div>
+              {!readonly && (
+                <AntdButton
+                  type="text"
+                  icon={<DeleteOutlined />}
+                  size="small"
+                  style={{
+                    marginLeft: 4,
+                    color: "#ff4d4f",
+                    border: "none",
+                    background: "none",
+                    minWidth: 24,
+                    height: 24,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                  onClick={() => handleRemoveGroup(group.id)}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+      {/* 弹窗 */}
       <Popup
-        visible={realVisible}
+        visible={realVisible && !readonly}
         onMaskClick={() => setRealVisible(false)}
         position="bottom"
         bodyStyle={{ height: "100vh" }}
@@ -189,26 +261,37 @@ export default function GroupSelection({
           <div className={style.popupHeader}>
             <div className={style.popupTitle}>选择群聊</div>
             <div className={style.searchWrapper}>
-              <Input
+              <AntdInput
                 placeholder="搜索群聊"
                 value={searchQuery}
-                onChange={(val) => setSearchQuery(val)}
-                className={style.searchInput}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                disabled={readonly}
+                prefix={<SearchOutlined />}
+                allowClear
+                size="large"
               />
               <SearchOutlined className={style.searchIcon} />
-              {searchQuery && (
-                <Button
-                  fill="none"
-                  size="mini"
+              {searchQuery && !readonly && (
+                <AntdButton
+                  type="text"
+                  icon={<CloseOutlined />}
+                  size="small"
                   className={style.clearBtn}
                   onClick={handleClearSearch}
-                >
-                  <CloseOutlined />
-                </Button>
+                  style={{
+                    color: "#ff4d4f",
+                    border: "none",
+                    background: "none",
+                    minWidth: 24,
+                    height: 24,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                />
               )}
             </div>
           </div>
-
           <div className={style.groupList}>
             {loading ? (
               <div className={style.loadingBox}>
@@ -220,7 +303,7 @@ export default function GroupSelection({
                   <label
                     key={group.id}
                     className={style.groupItem}
-                    onClick={() => handleGroupToggle(group.id)}
+                    onClick={() => !readonly && handleGroupToggle(group.id)}
                   >
                     <div className={style.radioWrapper}>
                       <div
@@ -272,57 +355,50 @@ export default function GroupSelection({
               </div>
             )}
           </div>
-
+          {/* 分页栏 */}
           <div className={style.paginationRow}>
-            <div className={style.totalCount}>
-              总计 {totalGroups} 个群聊
-              {searchQuery && ` (搜索: "${searchQuery}")`}
-            </div>
+            <div className={style.totalCount}>总计 {totalGroups} 个群聊</div>
             <div className={style.paginationControls}>
-              <Button
-                fill="none"
-                size="mini"
+              <AntdButton
+                type="text"
+                size="small"
                 onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                 disabled={currentPage === 1 || loading}
                 className={style.pageBtn}
+                style={{ borderRadius: 16 }}
               >
                 <LeftOutlined />
-              </Button>
+              </AntdButton>
               <span className={style.pageInfo}>
                 {currentPage} / {totalPages}
               </span>
-              <Button
-                fill="none"
-                size="mini"
+              <AntdButton
+                type="text"
+                size="small"
                 onClick={() =>
                   setCurrentPage(Math.min(totalPages, currentPage + 1))
                 }
                 disabled={currentPage === totalPages || loading}
                 className={style.pageBtn}
+                style={{ borderRadius: 16 }}
               >
                 <RightOutlined />
-              </Button>
+              </AntdButton>
             </div>
           </div>
-
+          {/* 底部按钮栏 */}
           <div className={style.popupFooter}>
-            <Button
-              fill="outline"
-              onClick={() => setRealVisible(false)}
-              className={style.cancelBtn}
-            >
-              取消
-            </Button>
-            <Button
-              color="primary"
-              onClick={() => {
-                setRealVisible(false);
-                handleConfirm();
-              }}
-              className={style.confirmBtn}
-            >
-              确定 ({selectedGroups.length})
-            </Button>
+            <div className={style.selectedCount}>
+              已选择 {selectedGroups.length} 个群聊
+            </div>
+            <div className={style.footerBtnGroup}>
+              <AntdButton type="default" onClick={() => setRealVisible(false)}>
+                取消
+              </AntdButton>
+              <AntdButton type="primary" onClick={() => setRealVisible(false)}>
+                确定
+              </AntdButton>
+            </div>
           </div>
         </div>
       </Popup>