From 4b84d5f0139ea894acf45745bc6c3a2384a741b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Wed, 10 Sep 2025 11:23:50 +0800 Subject: [PATCH] =?UTF-8?q?feat(selection):=20=E4=B8=BA=E6=89=80=E6=9C=89?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=BC=B9=E7=AA=97=E6=B7=BB=E5=8A=A0=E5=BD=93?= =?UTF-8?q?=E5=89=8D=E9=A1=B5=E5=85=A8=E9=80=89=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在弹窗底部添加全选当前页的复选框 - 修改样式以适配新的全选功能 - 移除不再需要的总计数量显示 --- .../AccountSelection/selectionPopup.tsx | 29 +++++++++++++- .../ContentSelection/selectionPopup.tsx | 27 ++++++++++++- .../DeviceSelection/selectionPopup.tsx | 27 ++++++++++++- .../FriendSelection/selectionPopup.tsx | 27 ++++++++++++- .../GroupSelection/selectionPopup.tsx | 27 ++++++++++++- .../PoolSelection/selectionPopup.tsx | 38 ++++++++++++++++++- .../components/PopuLayout/footer.module.scss | 19 +++++++++- Cunkebao/src/components/PopuLayout/footer.tsx | 19 ++++++++-- 8 files changed, 202 insertions(+), 11 deletions(-) diff --git a/Cunkebao/src/components/AccountSelection/selectionPopup.tsx b/Cunkebao/src/components/AccountSelection/selectionPopup.tsx index a40bd6ea..7f4fc98a 100644 --- a/Cunkebao/src/components/AccountSelection/selectionPopup.tsx +++ b/Cunkebao/src/components/AccountSelection/selectionPopup.tsx @@ -68,6 +68,32 @@ export default function SelectionPopup({ setTempSelectedOptions(next); }; + // 全选当前页 + const handleSelectAllCurrentPage = (checked: boolean) => { + if (readonly) return; + + if (checked) { + // 全选：添加当前页面所有未选中的账号 + const currentPageAccounts = accounts.filter( + account => !tempSelectedOptions.some(a => a.id === account.id), + ); + setTempSelectedOptions(prev => [...prev, ...currentPageAccounts]); + } else { + // 取消全选：移除当前页面的所有账号 + const currentPageAccountIds = accounts.map(a => a.id); + setTempSelectedOptions(prev => + prev.filter(a => !currentPageAccountIds.includes(a.id)), + ); + } + }; + + // 检查当前页是否全选 + const isCurrentPageAllSelected = + accounts.length > 0 && + accounts.every(account => + tempSelectedOptions.some(a => a.id === account.id), + ); + const handleConfirm = () => { if (onConfirm) { onConfirm(tempSelectedOptions); @@ -132,7 +158,6 @@ export default function SelectionPopup({ } footer={ onVisibleChange(false)} onConfirm={handleConfirm} + isAllSelected={isCurrentPageAllSelected} + onSelectAll={handleSelectAllCurrentPage} /> } > diff --git a/Cunkebao/src/components/ContentSelection/selectionPopup.tsx b/Cunkebao/src/components/ContentSelection/selectionPopup.tsx index 8adbf73c..e5ee7a31 100644 --- a/Cunkebao/src/components/ContentSelection/selectionPopup.tsx +++ b/Cunkebao/src/components/ContentSelection/selectionPopup.tsx @@ -137,6 +137,30 @@ const SelectionPopup: React.FC = ({ setTempSelectedOptions(newSelected); }; + // 全选当前页 + const handleSelectAllCurrentPage = (checked: boolean) => { + if (checked) { + // 全选：添加当前页面所有未选中的内容库 + const currentPageLibraries = libraries.filter( + library => !tempSelectedOptions.some(l => l.id === library.id), + ); + setTempSelectedOptions(prev => [...prev, ...currentPageLibraries]); + } else { + // 取消全选：移除当前页面的所有内容库 + const currentPageLibraryIds = libraries.map(l => l.id); + setTempSelectedOptions(prev => + prev.filter(l => !currentPageLibraryIds.includes(l.id)), + ); + } + }; + + // 检查当前页是否全选 + const isCurrentPageAllSelected = + libraries.length > 0 && + libraries.every(library => + tempSelectedOptions.some(l => l.id === library.id), + ); + // 确认选择 const handleConfirm = () => { // 用户点击确认时，才更新实际的selectedOptions @@ -204,7 +228,6 @@ const SelectionPopup: React.FC = ({ } footer={ = ({ onPageChange={handlePageChange} onCancel={onClose} onConfirm={handleConfirm} + isAllSelected={isCurrentPageAllSelected} + onSelectAll={handleSelectAllCurrentPage} /> } > diff --git a/Cunkebao/src/components/DeviceSelection/selectionPopup.tsx b/Cunkebao/src/components/DeviceSelection/selectionPopup.tsx index 32a75e07..7a839f70 100644 --- a/Cunkebao/src/components/DeviceSelection/selectionPopup.tsx +++ b/Cunkebao/src/components/DeviceSelection/selectionPopup.tsx @@ -120,6 +120,30 @@ const SelectionPopup: React.FC = ({ } }; + // 全选当前页 + const handleSelectAllCurrentPage = (checked: boolean) => { + if (checked) { + // 全选：添加当前页面所有未选中的设备 + const currentPageDevices = filteredDevices.filter( + device => !tempSelectedOptions.some(d => d.id === device.id), + ); + setTempSelectedOptions(prev => [...prev, ...currentPageDevices]); + } else { + // 取消全选：移除当前页面的所有设备 + const currentPageDeviceIds = filteredDevices.map(d => d.id); + setTempSelectedOptions(prev => + prev.filter(d => !currentPageDeviceIds.includes(d.id)), + ); + } + }; + + // 检查当前页是否全选 + const isCurrentPageAllSelected = + filteredDevices.length > 0 && + filteredDevices.every(device => + tempSelectedOptions.some(d => d.id === device.id), + ); + return ( = ({ } footer={ = ({ onSelect(tempSelectedOptions); onClose(); }} + isAllSelected={isCurrentPageAllSelected} + onSelectAll={handleSelectAllCurrentPage} /> } > diff --git a/Cunkebao/src/components/FriendSelection/selectionPopup.tsx b/Cunkebao/src/components/FriendSelection/selectionPopup.tsx index 6f52b501..71020104 100644 --- a/Cunkebao/src/components/FriendSelection/selectionPopup.tsx +++ b/Cunkebao/src/components/FriendSelection/selectionPopup.tsx @@ -85,6 +85,30 @@ const SelectionPopup: React.FC = ({ setTempSelectedOptions(newSelectedFriends); }; + // 全选当前页 + const handleSelectAllCurrentPage = (checked: boolean) => { + if (readonly) return; + + if (checked) { + // 全选：添加当前页面所有未选中的好友 + const currentPageFriends = friends.filter( + friend => !tempSelectedOptions.some(f => f.id === friend.id), + ); + setTempSelectedOptions(prev => [...prev, ...currentPageFriends]); + } else { + // 取消全选：移除当前页面的所有好友 + const currentPageFriendIds = friends.map(f => f.id); + setTempSelectedOptions(prev => + prev.filter(f => !currentPageFriendIds.includes(f.id)), + ); + } + }; + + // 检查当前页是否全选 + const isCurrentPageAllSelected = + friends.length > 0 && + friends.every(friend => tempSelectedOptions.some(f => f.id === friend.id)); + // 确认选择 const handleConfirm = () => { if (onConfirm) { @@ -147,7 +171,6 @@ const SelectionPopup: React.FC = ({ } footer={ = ({ onPageChange={setCurrentPage} onCancel={() => onVisibleChange(false)} onConfirm={handleConfirm} + isAllSelected={isCurrentPageAllSelected} + onSelectAll={handleSelectAllCurrentPage} /> } > diff --git a/Cunkebao/src/components/GroupSelection/selectionPopup.tsx b/Cunkebao/src/components/GroupSelection/selectionPopup.tsx index 69cecf76..dd5c9927 100644 --- a/Cunkebao/src/components/GroupSelection/selectionPopup.tsx +++ b/Cunkebao/src/components/GroupSelection/selectionPopup.tsx @@ -88,6 +88,30 @@ export default function SelectionPopup({ setTempSelectedOptions(newSelectedGroups); }; + // 全选当前页 + const handleSelectAllCurrentPage = (checked: boolean) => { + if (readonly) return; + + if (checked) { + // 全选：添加当前页面所有未选中的群组 + const currentPageGroups = groups.filter( + group => !tempSelectedOptions.some(g => g.id === group.id), + ); + setTempSelectedOptions(prev => [...prev, ...currentPageGroups]); + } else { + // 取消全选：移除当前页面的所有群组 + const currentPageGroupIds = groups.map(g => g.id); + setTempSelectedOptions(prev => + prev.filter(g => !currentPageGroupIds.includes(g.id)), + ); + } + }; + + // 检查当前页是否全选 + const isCurrentPageAllSelected = + groups.length > 0 && + groups.every(group => tempSelectedOptions.some(g => g.id === group.id)); + // 确认选择 const handleConfirm = () => { // 用户点击确认时，才更新实际的selectedOptions @@ -159,7 +183,6 @@ export default function SelectionPopup({ } footer={ onVisibleChange(false)} onConfirm={handleConfirm} + isAllSelected={isCurrentPageAllSelected} + onSelectAll={handleSelectAllCurrentPage} /> } > diff --git a/Cunkebao/src/components/PoolSelection/selectionPopup.tsx b/Cunkebao/src/components/PoolSelection/selectionPopup.tsx index eb0ccf76..20d08bec 100644 --- a/Cunkebao/src/components/PoolSelection/selectionPopup.tsx +++ b/Cunkebao/src/components/PoolSelection/selectionPopup.tsx @@ -96,6 +96,41 @@ export default function SelectionPopup({ } }; + // 全选当前页 + const handleSelectAllCurrentPage = (checked: boolean) => { + if (readonly) return; + + if (checked) { + // 全选：添加当前页面所有未选中的流量池包 + const currentPagePackages = poolPackages.filter( + packageItem => + !tempSelectedOptions.some(p => p.id === String(packageItem.id)), + ); + const newSelectionItems = currentPagePackages.map(item => ({ + id: String(item.id), + name: item.name, + description: item.description, + createTime: item.createTime, + num: item.num, + originalData: item, + })); + setTempSelectedOptions(prev => [...prev, ...newSelectionItems]); + } else { + // 取消全选：移除当前页面的所有流量池包 + const currentPagePackageIds = poolPackages.map(p => String(p.id)); + setTempSelectedOptions(prev => + prev.filter(p => !currentPagePackageIds.includes(p.id)), + ); + } + }; + + // 检查当前页是否全选 + const isCurrentPageAllSelected = + poolPackages.length > 0 && + poolPackages.every(packageItem => + tempSelectedOptions.some(p => p.id === String(packageItem.id)), + ); + // 确认选择 const handleConfirm = () => { if (onConfirm) { @@ -158,7 +193,6 @@ export default function SelectionPopup({ } footer={ onVisibleChange(false)} onConfirm={handleConfirm} + isAllSelected={isCurrentPageAllSelected} + onSelectAll={handleSelectAllCurrentPage} /> } > diff --git a/Cunkebao/src/components/PopuLayout/footer.module.scss b/Cunkebao/src/components/PopuLayout/footer.module.scss index 2890e9ba..bd1286f0 100644 --- a/Cunkebao/src/components/PopuLayout/footer.module.scss +++ b/Cunkebao/src/components/PopuLayout/footer.module.scss @@ -9,7 +9,24 @@ .selectedCount { font-size: 14px; - color: #888; + color: #666; + display: flex; + align-items: center; + gap: 12px; +} + +.selectAllCheckbox { + margin-right: 0; + + .ant-checkbox-wrapper { + font-size: 14px; + } + + &.ant-checkbox-wrapper-disabled { + .ant-checkbox-disabled + span { + color: #d9d9d9; + } + } } .footerBtnGroup { diff --git a/Cunkebao/src/components/PopuLayout/footer.tsx b/Cunkebao/src/components/PopuLayout/footer.tsx index df10ffa2..60e562be 100644 --- a/Cunkebao/src/components/PopuLayout/footer.tsx +++ b/Cunkebao/src/components/PopuLayout/footer.tsx @@ -1,10 +1,9 @@ import React from "react"; -import { Button } from "antd"; +import { Button, Checkbox } from "antd"; import style from "./footer.module.scss"; import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons"; interface PopupFooterProps { - total: number; currentPage: number; totalPages: number; loading: boolean; @@ -12,10 +11,12 @@ interface PopupFooterProps { onPageChange: (page: number) => void; onCancel: () => void; onConfirm: () => void; + // 全选功能相关 + isAllSelected?: boolean; + onSelectAll?: (checked: boolean) => void; } const PopupFooter: React.FC = ({ - total, currentPage, totalPages, loading, @@ -23,12 +24,22 @@ const PopupFooter: React.FC = ({ onPageChange, onCancel, onConfirm, + isAllSelected = false, + onSelectAll, }) => { return ( <> {/* 分页栏 */}
-
总计 {total} 条记录
+
+ onSelectAll(e.target.checked)} + className={style.selectAllCheckbox} + > + 全选当前页 + +