fnvtk/ckb-SuperAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
样式优化
This commit is contained in:
笔记本里的永平
2025-07-22 18:36:07 +08:00
parent 17e4cd26fe
commit 3987bfa551
8 changed files with 311 additions and 635 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
nkebao/src/components/DeviceSelectionDialog/api.ts
View File

@@ -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");
}

197
nkebao/src/components/DeviceSelectionDialog/index.module.scss
View File

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

258
nkebao/src/components/DeviceSelectionDialog/index.tsx
View File

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

12
nkebao/src/components/FriendSelection/index.module.scss
View File

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

212
nkebao/src/components/FriendSelection/index.tsx
View File

@@ -1,11 +1,7 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { import { SearchOutlined, DeleteOutlined } from "@ant-design/icons";
SearchOutlined, import { Popup, Toast } from "antd-mobile";
CloseOutlined, import { Button, Input } from "antd";
LeftOutlined,
RightOutlined,
} from "@ant-design/icons";
import { Input, Button, Popup, Toast } from "antd-mobile";
import { getFriendList } from "./api"; import { getFriendList } from "./api";
import style from "./index.module.scss"; import style from "./index.module.scss";
@@ -29,6 +25,10 @@ interface FriendSelectionProps {
className?: string; className?: string;
visible?: boolean; // 新增 visible?: boolean; // 新增
onVisibleChange?: (visible: boolean) => void; // 新增 onVisibleChange?: (visible: boolean) => void; // 新增
selectedListMaxHeight?: number;
showInput?: boolean;
showSelectedList?: boolean;
readonly?: boolean;
} }
export default function FriendSelection({ export default function FriendSelection({
@@ -41,6 +41,10 @@ export default function FriendSelection({
className = "", className = "",
visible, visible,
onVisibleChange, onVisibleChange,
selectedListMaxHeight = 300,
showInput = true,
showSelectedList = true,
readonly = false,
}: FriendSelectionProps) { }: FriendSelectionProps) {
const [popupVisible, setPopupVisible] = useState(false); const [popupVisible, setPopupVisible] = useState(false);
const [friends, setFriends] = useState<WechatFriend[]>([]); const [friends, setFriends] = useState<WechatFriend[]>([]);
@@ -59,6 +63,7 @@ export default function FriendSelection({
// 打开弹窗并请求第一页好友 // 打开弹窗并请求第一页好友
const openPopup = () => { const openPopup = () => {
if (readonly) return;
setCurrentPage(1); setCurrentPage(1);
setSearchQuery(""); setSearchQuery("");
setRealVisible(true); setRealVisible(true);
@@ -152,6 +157,17 @@ export default function FriendSelection({
return `已选择 ${selectedFriends.length} 个好友`; 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 = () => { const handleConfirm = () => {
setPopupVisible(false); setPopupVisible(false);
}; };
@@ -166,35 +182,85 @@ export default function FriendSelection({
return ( return (
<> <>
{/* 输入框 */} {/* 输入框 */}
<div className={`${style.inputWrapper} ${className}`}> {showInput && (
<span className={style.inputIcon}> <div className={`${style.inputWrapper} ${className}`}>
<svg <Input
width="20" placeholder={placeholder}
height="20" value={getDisplayText()}
fill="none" onClick={openPopup}
viewBox="0 0 24 24" prefix={<SearchOutlined />}
stroke="currentColor" allowClear={!readonly}
> size="large"
<path readOnly={readonly}
strokeLinecap="round" disabled={readonly}
strokeLinejoin="round" style={
strokeWidth="2" readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
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> </div>
</span> )}
<Input {/* 已选好友列表窗口 */}
placeholder={placeholder} {showSelectedList && selectedFriendObjs.length > 0 && (
className={style.input} <div
readOnly className={style.selectedListWindow}
onClick={openPopup} style={{
value={getDisplayText()} maxHeight: selectedListMaxHeight,
/> overflowY: "auto",
</div> 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 <Popup
visible={realVisible} visible={realVisible && !readonly}
onMaskClick={() => setRealVisible(false)} onMaskClick={() => setRealVisible(false)}
position="bottom" position="bottom"
bodyStyle={{ height: "100vh" }} bodyStyle={{ height: "100vh" }}
@@ -206,23 +272,33 @@ export default function FriendSelection({
<Input <Input
placeholder="搜索好友" placeholder="搜索好友"
value={searchQuery} value={searchQuery}
onChange={(val) => setSearchQuery(val)} onChange={(e) => setSearchQuery(e.target.value)}
className={style.searchInput} disabled={readonly}
prefix={<SearchOutlined />}
allowClear
size="large"
/> />
<SearchOutlined className={style.searchIcon} /> {searchQuery && !readonly && (
{searchQuery && (
<Button <Button
fill="none" type="text"
size="mini" icon={<DeleteOutlined />}
size="small"
className={style.clearBtn} className={style.clearBtn}
onClick={handleClearSearch} onClick={handleClearSearch}
> style={{
<CloseOutlined /> color: "#ff4d4f",
</Button> border: "none",
background: "none",
minWidth: 24,
height: 24,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
/>
)} )}
</div> </div>
</div> </div>
<div className={style.friendList}> <div className={style.friendList}>
{loading ? ( {loading ? (
<div className={style.loadingBox}> <div className={style.loadingBox}>
@@ -234,7 +310,7 @@ export default function FriendSelection({
<label <label
key={friend.id} key={friend.id}
className={style.friendItem} className={style.friendItem}
onClick={() => handleFriendToggle(friend.id)} onClick={() => !readonly && handleFriendToggle(friend.id)}
> >
<div className={style.radioWrapper}> <div className={style.radioWrapper}>
<div <div
@@ -290,54 +366,48 @@ export default function FriendSelection({
</div> </div>
)} )}
</div> </div>
{/* 分页栏 */}
<div className={style.paginationRow}> <div className={style.paginationRow}>
<div className={style.totalCount}>总计 {totalFriends} 个好友</div> <div className={style.totalCount}>总计 {totalFriends} 个好友</div>
<div className={style.paginationControls}> <div className={style.paginationControls}>
<Button <Button
fill="none" type="text"
size="mini" size="small"
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))} onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
disabled={currentPage === 1 || loading} disabled={currentPage === 1 || loading}
className={style.pageBtn} className={style.pageBtn}
style={{ borderRadius: 16 }}
> >
<LeftOutlined /> &lt;
</Button> </Button>
<span className={style.pageInfo}> <span className={style.pageInfo}>
{currentPage} / {totalPages} {currentPage} / {totalPages}
</span> </span>
<Button <Button
fill="none" type="text"
size="mini" size="small"
onClick={() => onClick={() =>
setCurrentPage(Math.min(totalPages, currentPage + 1)) setCurrentPage(Math.min(totalPages, currentPage + 1))
} }
disabled={currentPage === totalPages || loading} disabled={currentPage === totalPages || loading}
className={style.pageBtn} className={style.pageBtn}
style={{ borderRadius: 16 }}
> >
<RightOutlined /> &gt;
</Button> </Button>
</div> </div>
</div> </div>
{/* 底部按钮栏 */}
<div className={style.popupFooter}> <div className={style.popupFooter}>
<Button <div className={style.selectedCount}>
fill="outline" 已选择 {selectedFriends.length} 个好友
onClick={() => setRealVisible(false)} </div>
className={style.cancelBtn} <div className={style.footerBtnGroup}>
> <Button onClick={() => setRealVisible(false)}>取消</Button>
取消 <Button type="primary" onClick={() => setRealVisible(false)}>
</Button> 确定
<Button </Button>
color="primary" </div>
onClick={() => {
setRealVisible(false);
handleConfirm();
}}
className={style.confirmBtn}
>
确定 ({selectedFriends.length})
</Button>
</div> </div>
</div> </div>
</Popup> </Popup>

17
nkebao/src/components/GroupSelection/index.module.scss
View File

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

226
nkebao/src/components/GroupSelection/index.tsx
View File

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

14
nkebao/src/components/SelectionTest.tsx
View File

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