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

样式优化

nkebao/src/components/DeviceSelectionDialog/api.ts

@@ -1,10 +0,0 @@
-import request from "@/api/request";
-
-// 获取设备列表
-export function getDeviceList(params: {
-  page: number;
-  limit: number;
-  keyword?: string;
-}) {
-  return request("/v1/devices", params, "GET");
-}

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

@@ -1,197 +0,0 @@
-.popupContainer {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background: #fff;
-}
-.popupHeader {
-  padding: 16px;
-  border-bottom: 1px solid #f0f0f0;
-}
-.popupTitle {
-  font-size: 18px;
-  font-weight: 600;
-  text-align: center;
-}
-.popupSearchRow {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-}
-.popupSearchInputWrap {
-  position: relative;
-  flex: 1;
-}
-.inputIcon {
-  position: absolute;
-  left: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #bdbdbd;
-  z-index: 10;
-  font-size: 16px;
-}
-.popupSearchInput {
-  padding-left: 36px !important;
-  border-radius: 12px !important;
-  height: 44px;
-  font-size: 15px;
-  border: 1px solid #e5e6eb !important;
-  background: #f8f9fa;
-}
-.statusSelect {
-  width: 128px;
-  height: 40px;
-  border-radius: 8px;
-  border: 1px solid #e5e6eb;
-  font-size: 14px;
-  padding: 0 12px;
-  background: #fff;
-}
-.loadingIcon {
-  animation: spin 1s linear infinite;
-  font-size: 16px;
-}
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-.deviceList {
-  flex: 1;
-  overflow-y: auto;
-}
-.deviceListInner {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 16px;
-}
-.deviceItem {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 16px;
-  border-radius: 12px;
-  border: 1px solid #f0f0f0;
-  background: #fff;
-  cursor: pointer;
-  transition: background 0.2s;
-  &:hover {
-    background: #f5f6fa;
-  }
-}
-.deviceCheckbox {
-  margin-top: 4px;
-}
-.deviceInfo {
-  flex: 1;
-}
-.deviceInfoRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.deviceName {
-  font-weight: 500;
-  font-size: 16px;
-  color: #222;
-}
-.statusOnline {
-  padding: 4px 8px;
-  border-radius: 12px;
-  background: #52c41a;
-  color: #fff;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.statusOffline {
-  padding: 4px 8px;
-  border-radius: 12px;
-  background: #e5e6eb;
-  color: #888;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.deviceInfoDetail {
-  font-size: 13px;
-  color: #888;
-  margin-top: 4px;
-}
-.usedInPlans {
-  font-size: 13px;
-  color: #fa8c16;
-  margin-top: 4px;
-}
-.loadingBox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-.loadingText {
-  color: #888;
-  font-size: 15px;
-}
-.emptyBox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-.emptyText {
-  color: #888;
-  font-size: 15px;
-}
-.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;
-}
-.refreshBtn {
-  width: 36px;
-  height: 36px;
-}
-.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;
-}
-.pageInfo {
-  font-size: 14px;
-  color: #222;
-  margin: 0 8px;
-}

nkebao/src/components/DeviceSelectionDialog/index.tsx

@@ -1,258 +0,0 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
-import { Checkbox, Popup, Toast } from "antd-mobile";
-import { Input, Button } from "antd";
-import { getDeviceList } from "./api";
-import style from "./index.module.scss";
-
-interface Device {
-  id: string;
-  name: string;
-  imei: string;
-  wxid: string;
-  status: "online" | "offline";
-  usedInPlans: number;
-  nickname: string;
-}
-
-interface DeviceSelectionDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  selectedDevices: string[];
-  onSelect: (devices: string[]) => void;
-}
-
-export function DeviceSelectionDialog({
-  open,
-  onOpenChange,
-  selectedDevices,
-  onSelect,
-}: DeviceSelectionDialogProps) {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [statusFilter, setStatusFilter] = useState("all");
-  const [loading, setLoading] = useState(false);
-  const [devices, setDevices] = useState<Device[]>([]);
-  const [currentPage, setCurrentPage] = useState(1); // 新增
-  const [total, setTotal] = useState(0); // 新增
-  const pageSize = 20; // 每页条数
-
-  // 获取设备列表，支持keyword和分页
-  const fetchDevices = useCallback(
-    async (keyword: string = "", page: number = 1) => {
-      setLoading(true);
-      try {
-        const response = await getDeviceList({
-          page,
-          limit: pageSize,
-          keyword: keyword.trim() || undefined,
-        });
-        if (response && Array.isArray(response.list)) {
-          const convertedDevices: Device[] = response.list.map(
-            (serverDevice: any) => ({
-              id: serverDevice.id.toString(),
-              name: serverDevice.memo || `设备 ${serverDevice.id}`,
-              imei: serverDevice.imei,
-              wxid: serverDevice.wechatId || "",
-              status: serverDevice.alive === 1 ? "online" : "offline",
-              usedInPlans: 0,
-              nickname: serverDevice.nickname || "",
-            })
-          );
-          setDevices(convertedDevices);
-          setTotal(response.total || 0);
-        }
-      } catch (error) {
-        console.error("获取设备列表失败:", error);
-        Toast.show({
-          content: "获取设备列表失败，请检查网络连接",
-          position: "top",
-        });
-      } finally {
-        setLoading(false);
-      }
-    },
-    []
-  );
-
-  // 打开弹窗时获取第一页
-  useEffect(() => {
-    if (open) {
-      setCurrentPage(1);
-      fetchDevices("", 1);
-    }
-  }, [open, fetchDevices]);
-
-  // 搜索防抖
-  useEffect(() => {
-    if (!open) return;
-    const timer = setTimeout(() => {
-      setCurrentPage(1);
-      fetchDevices(searchQuery, 1);
-    }, 500);
-    return () => clearTimeout(timer);
-  }, [searchQuery, open, fetchDevices]);
-
-  // 翻页时重新请求
-  useEffect(() => {
-    if (!open) 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 handleDeviceSelect = (deviceId: string) => {
-    if (selectedDevices.includes(deviceId)) {
-      onSelect(selectedDevices.filter((id) => id !== deviceId));
-    } else {
-      onSelect([...selectedDevices, deviceId]);
-    }
-  };
-
-  const totalPages = Math.max(1, Math.ceil(total / pageSize));
-
-  return (
-    <Popup
-      visible={open}
-      onMaskClick={() => onOpenChange(false)}
-      position="bottom"
-      bodyStyle={{ height: "100vh" }}
-    >
-      <div className={style.popupContainer}>
-        <div className={style.popupHeader}>
-          <div className={style.popupTitle}>选择设备</div>
-        </div>
-        <div className={style.popupSearchRow}>
-          <div className={style.popupSearchInputWrap}>
-            <SearchOutlined className={style.inputIcon} />
-            <Input
-              placeholder="搜索设备IMEI/备注"
-              value={searchQuery}
-              onChange={(val) => setSearchQuery(val)}
-              className={style.popupSearchInput}
-            />
-          </div>
-          <select
-            value={statusFilter}
-            onChange={(e) => setStatusFilter(e.target.value)}
-            className={style.statusSelect}
-          >
-            <option value="all">全部状态</option>
-            <option value="online">在线</option>
-            <option value="offline">离线</option>
-          </select>
-          <Button
-            fill="outline"
-            size="mini"
-            onClick={() => fetchDevices(searchQuery, currentPage)}
-            disabled={loading}
-            className={style.refreshBtn}
-          >
-            {loading ? (
-              <div className={style.loadingIcon}>⟳</div>
-            ) : (
-              <ReloadOutlined />
-            )}
-          </Button>
-        </div>
-        <div className={style.deviceList}>
-          {loading ? (
-            <div className={style.loadingBox}>
-              <div className={style.loadingText}>加载中...</div>
-            </div>
-          ) : filteredDevices.length === 0 ? (
-            <div className={style.emptyBox}>
-              <div className={style.emptyText}>暂无数据</div>
-            </div>
-          ) : (
-            <div className={style.deviceListInner}>
-              {filteredDevices.map((device) => (
-                <label key={device.id} className={style.deviceItem}>
-                  <Checkbox
-                    checked={selectedDevices.includes(device.id)}
-                    onChange={() => handleDeviceSelect(device.id)}
-                    className={style.deviceCheckbox}
-                  />
-                  <div className={style.deviceInfo}>
-                    <div className={style.deviceInfoRow}>
-                      <span className={style.deviceName}>{device.name}</span>
-                      <div
-                        className={
-                          device.status === "online"
-                            ? style.statusOnline
-                            : style.statusOffline
-                        }
-                      >
-                        {device.status === "online" ? "在线" : "离线"}
-                      </div>
-                    </div>
-                    <div className={style.deviceInfoDetail}>
-                      <div>IMEI: {device.imei}</div>
-                      <div>微信号: {device.wxid || "-"} </div>
-                      <div>昵称: {device.nickname || "-"}</div>
-                    </div>
-                    {device.usedInPlans > 0 && (
-                      <div className={style.usedInPlans}>
-                        已用于 {device.usedInPlans} 个计划
-                      </div>
-                    )}
-                  </div>
-                </label>
-              ))}
-            </div>
-          )}
-        </div>
-        {/* 分页栏 */}
-        <div className={style.paginationRow}>
-          <div className={style.totalCount}>总计 {total} 个设备</div>
-          <div className={style.paginationControls}>
-            <Button
-              fill="none"
-              size="mini"
-              onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
-              disabled={currentPage === 1 || loading}
-              className={style.pageBtn}
-            >
-              &lt;
-            </Button>
-            <span className={style.pageInfo}>
-              {currentPage} / {totalPages}
-            </span>
-            <Button
-              fill="none"
-              size="mini"
-              onClick={() =>
-                setCurrentPage(Math.min(totalPages, currentPage + 1))
-              }
-              disabled={currentPage === totalPages || loading}
-              className={style.pageBtn}
-            >
-              &gt;
-            </Button>
-          </div>
-        </div>
-        <div className={style.popupFooter}>
-          <div className={style.selectedCount}>
-            已选择 {selectedDevices.length} 个设备
-          </div>
-          <div className={style.footerBtnGroup}>
-            <Button fill="outline" onClick={() => onOpenChange(false)}>
-              取消
-            </Button>
-            <Button color="primary" onClick={() => onOpenChange(false)}>
-              确定
-              {selectedDevices.length > 0 ? ` (${selectedDevices.length})` : ""}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </Popup>
-  );
-}

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

@@ -205,13 +205,21 @@
 }
 
 .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;
 }
+.selectedCount {
+  font-size: 14px;
+  color: #888;
+}
+.footerBtnGroup {
+  display: flex;
+  gap: 12px;
+}
 .cancelBtn {
   padding: 0 24px;
   border-radius: 24px;

nkebao/src/components/FriendSelection/index.tsx

@@ -1,11 +1,7 @@
 import React, { useState, useEffect } from "react";
-import {
-  SearchOutlined,
-  CloseOutlined,
-  LeftOutlined,
-  RightOutlined,
-} from "@ant-design/icons";
-import { Input, Button, Popup, Toast } from "antd-mobile";
+import { SearchOutlined, DeleteOutlined } from "@ant-design/icons";
+import { Popup, Toast } from "antd-mobile";
+import { Button, Input } from "antd";
 import { getFriendList } from "./api";
 import style from "./index.module.scss";
 
@@ -29,6 +25,10 @@ interface FriendSelectionProps {
   className?: string;
   visible?: boolean; // 新增
   onVisibleChange?: (visible: boolean) => void; // 新增
+  selectedListMaxHeight?: number;
+  showInput?: boolean;
+  showSelectedList?: boolean;
+  readonly?: boolean;
 }
 
 export default function FriendSelection({
@@ -41,6 +41,10 @@ export default function FriendSelection({
   className = "",
   visible,
   onVisibleChange,
+  selectedListMaxHeight = 300,
+  showInput = true,
+  showSelectedList = true,
+  readonly = false,
 }: FriendSelectionProps) {
   const [popupVisible, setPopupVisible] = useState(false);
   const [friends, setFriends] = useState<WechatFriend[]>([]);
@@ -59,6 +63,7 @@ export default function FriendSelection({
 
   // 打开弹窗并请求第一页好友
   const openPopup = () => {
+    if (readonly) return;
     setCurrentPage(1);
     setSearchQuery("");
     setRealVisible(true);
@@ -152,6 +157,17 @@ export default function FriendSelection({
     return `已选择 ${selectedFriends.length} 个好友`;
   };
 
+  // 获取已选好友详细信息
+  const selectedFriendObjs = selectedFriends
+    .map((id) => friends.find((f) => f.id === id))
+    .filter(Boolean) as WechatFriend[];
+
+  // 删除已选好友
+  const handleRemoveFriend = (id: string) => {
+    if (readonly) return;
+    onSelect(selectedFriends.filter((f) => f !== id));
+  };
+
   const handleConfirm = () => {
     setPopupVisible(false);
   };
@@ -166,35 +182,85 @@ export default function FriendSelection({
   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}`}>
+          <Input
+            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 && selectedFriendObjs.length > 0 && (
+        <div
+          className={style.selectedListWindow}
+          style={{
+            maxHeight: selectedListMaxHeight,
+            overflowY: "auto",
+            marginTop: 8,
+            border: "1px solid #e5e6eb",
+            borderRadius: 8,
+            background: "#fff",
+          }}
+        >
+          {selectedFriendObjs.map((friend) => (
+            <div
+              key={friend.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",
+                }}
+              >
+                {friend.nickname || friend.wechatId || friend.id}
+              </div>
+              {!readonly && (
+                <Button
+                  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={() => handleRemoveFriend(friend.id)}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+      {/* 弹窗 */}
       <Popup
-        visible={realVisible}
+        visible={realVisible && !readonly}
         onMaskClick={() => setRealVisible(false)}
         position="bottom"
         bodyStyle={{ height: "100vh" }}
@@ -206,23 +272,33 @@ export default function FriendSelection({
               <Input
                 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 && (
+              {searchQuery && !readonly && (
                 <Button
-                  fill="none"
-                  size="mini"
+                  type="text"
+                  icon={<DeleteOutlined />}
+                  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.friendList}>
             {loading ? (
               <div className={style.loadingBox}>
@@ -234,7 +310,7 @@ export default function FriendSelection({
                   <label
                     key={friend.id}
                     className={style.friendItem}
-                    onClick={() => handleFriendToggle(friend.id)}
+                    onClick={() => !readonly && handleFriendToggle(friend.id)}
                   >
                     <div className={style.radioWrapper}>
                       <div
@@ -290,54 +366,48 @@ export default function FriendSelection({
               </div>
             )}
           </div>
-
+          {/* 分页栏 */}
           <div className={style.paginationRow}>
             <div className={style.totalCount}>总计 {totalFriends} 个好友</div>
             <div className={style.paginationControls}>
               <Button
-                fill="none"
-                size="mini"
+                type="text"
+                size="small"
                 onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                 disabled={currentPage === 1 || loading}
                 className={style.pageBtn}
+                style={{ borderRadius: 16 }}
               >
-                <LeftOutlined />
+                &lt;
               </Button>
               <span className={style.pageInfo}>
                 {currentPage} / {totalPages}
               </span>
               <Button
-                fill="none"
-                size="mini"
+                type="text"
+                size="small"
                 onClick={() =>
                   setCurrentPage(Math.min(totalPages, currentPage + 1))
                 }
                 disabled={currentPage === totalPages || loading}
                 className={style.pageBtn}
+                style={{ borderRadius: 16 }}
               >
-                <RightOutlined />
+                &gt;
               </Button>
             </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}
-            >
-              确定 ({selectedFriends.length})
-            </Button>
+            <div className={style.selectedCount}>
+              已选择 {selectedFriends.length} 个好友
+            </div>
+            <div className={style.footerBtnGroup}>
+              <Button onClick={() => setRealVisible(false)}>取消</Button>
+              <Button type="primary" onClick={() => setRealVisible(false)}>
+                确定
+              </Button>
+            </div>
           </div>
         </div>
       </Popup>

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>

nkebao/src/components/SelectionTest.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import DeviceSelection from "./DeviceSelection";
-import { DeviceSelectionDialog } from "./DeviceSelectionDialog";
 import FriendSelection from "./FriendSelection";
 import GroupSelection from "./GroupSelection";
 import { Button, Space } from "antd-mobile";
@@ -29,18 +28,7 @@ export default function SelectionTest() {
             onSelect={setSelectedDevices}
           />
         </div>
-        <div>
-          <b>DeviceSelectionDialog（纯弹窗）</b>
-          <Button color="primary" onClick={() => setDeviceDialogOpen(true)}>
-            打开设备选择弹窗
-          </Button>
-          <DeviceSelectionDialog
-            open={deviceDialogOpen}
-            onOpenChange={setDeviceDialogOpen}
-            selectedDevices={selectedDevices}
-            onSelect={setSelectedDevices}
-          />
-        </div>
+
         <div>
           <b>FriendSelection</b>
           <Button color="primary" onClick={() => setFriendDialogOpen(true)}>