群弹窗

Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/ProfileCard/index.tsx

@@ -33,6 +33,11 @@ import { useCkChatStore } from "@/store/module/ckchat/ckchat";
 import { useWebSocketStore } from "@/store/module/websocket/websocket";
 import styles from "./Person.module.scss";
 import { useWeChatStore } from "@/store/module/weChat/weChat";
+import FriendSelection from "@/components/FriendSelection";
+import TwoColumnSelection from "@/components/FriendSelection/TwoColumnSelection";
+import MemberSelection from "@/components/MemberSelection";
+import TwoColumnMemberSelection from "@/components/MemberSelection/TwoColumnMemberSelection";
+import { FriendSelectionItem } from "@/components/FriendSelection/data";
 
 const { Sider } = Layout;
 
@@ -83,12 +88,60 @@ const Person: React.FC<PersonProps> = ({
   const [selectedMember, setSelectedMember] = useState(null);
   const [greeting, setGreeting] = useState("");
 
+  // 群管理弹窗状态
+  const [isFriendSelectionVisible, setIsFriendSelectionVisible] = useState(false);
+  const [isMemberSelectionVisible, setIsMemberSelectionVisible] = useState(false);
+  const [isAdminSelectionVisible, setIsAdminSelectionVisible] = useState(false);
+  const [isRemoveAdminSelectionVisible, setIsRemoveAdminSelectionVisible] = useState(false);
+  const [isTransferOwnerSelectionVisible, setIsTransferOwnerSelectionVisible] = useState(false);
+  const [selectedFriends, setSelectedFriends] = useState<FriendSelectionItem[]>([]);
+
   const handleAddFriend = (member) => {
     setSelectedMember(member);
     setGreeting(`你好, 我来自群聊${contractInfo.name}`);
     setIsAddFriendModalVisible(true);
   };
 
+  // 群管理操作处理函数
+  const handleAddMember = (selectedIds: number[], selectedItems: FriendSelectionItem[]) => {
+    console.log('添加成员:', selectedIds, selectedItems);
+    // TODO: 实现添加成员的WebSocket命令
+    messageApi.success(`已添加 ${selectedItems.length} 个成员`);
+    setIsFriendSelectionVisible(false);
+  };
+
+  const handleRemoveMember = (selectedIds: string[]) => {
+    console.log('删除成员:', selectedIds);
+    // TODO: 实现删除成员的WebSocket命令
+    messageApi.success(`已删除 ${selectedIds.length} 个成员`);
+    setIsMemberSelectionVisible(false);
+  };
+
+  const handleAddAdmin = (selectedIds: string[]) => {
+    console.log('添加管理员:', selectedIds);
+    // TODO: 实现添加管理员的WebSocket命令
+    messageApi.success(`已添加 ${selectedIds.length} 个管理员`);
+    setIsAdminSelectionVisible(false);
+  };
+
+  const handleRemoveAdmin = (selectedIds: string[]) => {
+    console.log('删除管理员:', selectedIds);
+    // TODO: 实现删除管理员的WebSocket命令
+    messageApi.success(`已删除 ${selectedIds.length} 个管理员`);
+    setIsRemoveAdminSelectionVisible(false);
+  };
+
+  const handleTransferOwner = (selectedIds: string[]) => {
+    if (selectedIds.length !== 1) {
+      messageApi.error('只能选择一个成员作为新群主');
+      return;
+    }
+    console.log('转让群主:', selectedIds[0]);
+    // TODO: 实现转让群主的WebSocket命令
+    messageApi.success('群主转让成功');
+    setIsTransferOwnerSelectionVisible(false);
+  };
+
   const handleSendFriendRequest = () => {
     if (!selectedMember) return;
 
@@ -115,6 +168,13 @@ const Person: React.FC<PersonProps> = ({
   );
   const { sendCommand } = useWebSocketStore();
 
+  // 权限控制：检查当前客服是否有群管理权限
+  const hasGroupManagePermission = () => {
+    if (!kfSelectedUser || !contract) return false;
+    // 当客服的wechatId与contract的chatroomOwner相同时，才有完整的群管理权限
+    return kfSelectedUser.wechatId === (contract as any).chatroomOwner;
+  };
+
   // 获取所有可用标签
   useEffect(() => {
     const fetchAvailableTags = async () => {
@@ -773,13 +833,13 @@ const Person: React.FC<PersonProps> = ({
                   display: 'flex',
                   gap: '12px'
                 }}>
-                  <Button 
-                    icon={<PlusOutlined />} 
+                  <Button
+                    icon={<PlusOutlined />}
                     onClick={() => setIsFriendSelectionVisible(true)}
                     size="small"
                     type="primary"
                     ghost
-                    style={{ 
+                    style={{
                       flex: 1,
                       height: '32px',
                       borderRadius: '6px',
@@ -788,73 +848,77 @@ const Person: React.FC<PersonProps> = ({
                   >
                     添加成员
                   </Button>
-                  <Button 
-                    icon={<MinusOutlined />} 
-                    onClick={() => setIsMemberSelectionVisible(true)}
-                    size="small"
-                    type="default"
-                    danger
-                    style={{ 
-                      flex: 1,
-                      height: '32px',
-                      borderRadius: '6px',
-                      fontWeight: '500'
-                    }}
-                  >
-                    删除成员
-                  </Button>
-                </div>
-                <div style={{
-                  display: 'flex',
-                  gap: '8px'
-                }}>
-                  <Button 
-                    icon={<PlusOutlined />} 
-                    onClick={() => setIsAdminSelectionVisible(true)}
-                    size="small"
-                    type="default"
-                    style={{ 
-                      flex: 1,
-                      height: '28px',
-                      borderRadius: '4px',
-                      fontSize: '12px'
-                    }}
-                  >
-                    添加管理
-                  </Button>
-                  <Button 
-                    icon={<MinusOutlined />} 
-                    onClick={() => setIsRemoveAdminSelectionVisible(true)}
-                    size="small"
-                    type="default"
-                    style={{ 
-                      flex: 1,
-                      height: '28px',
-                      borderRadius: '4px',
-                      fontSize: '12px'
-                    }}
-                  >
-                    删除管理
-                  </Button>
-                  <Button 
-                    icon={<SwapOutlined />} 
-                    onClick={() => setIsTransferOwnerSelectionVisible(true)}
-                    size="small"
-                    type="primary"
-                    style={{ 
-                      flex: 1,
-                      height: '28px',
-                      borderRadius: '4px',
-                      fontSize: '12px',
-                      fontWeight: '600',
-                      background: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)',
-                      border: 'none',
-                      boxShadow: '0 2px 4px rgba(24, 144, 255, 0.2)'
-                    }}
-                  >
-                    转让群主
-                  </Button>
+                  {hasGroupManagePermission() && (
+                    <Button
+                      icon={<MinusOutlined />}
+                      onClick={() => setIsMemberSelectionVisible(true)}
+                      size="small"
+                      type="default"
+                      danger
+                      style={{
+                        flex: 1,
+                        height: '32px',
+                        borderRadius: '6px',
+                        fontWeight: '500'
+                      }}
+                    >
+                      删除成员
+                    </Button>
+                  )}
                 </div>
+                {hasGroupManagePermission() && (
+                  <div style={{
+                    display: 'flex',
+                    gap: '8px'
+                  }}>
+                    <Button
+                      icon={<PlusOutlined />}
+                      onClick={() => setIsAdminSelectionVisible(true)}
+                      size="small"
+                      type="default"
+                      style={{
+                        flex: 1,
+                        height: '28px',
+                        borderRadius: '4px',
+                        fontSize: '12px'
+                      }}
+                    >
+                      添加管理
+                    </Button>
+                    <Button
+                      icon={<MinusOutlined />}
+                      onClick={() => setIsRemoveAdminSelectionVisible(true)}
+                      size="small"
+                      type="default"
+                      style={{
+                        flex: 1,
+                        height: '28px',
+                        borderRadius: '4px',
+                        fontSize: '12px'
+                      }}
+                    >
+                      删除管理
+                    </Button>
+                    <Button
+                      icon={<SwapOutlined />}
+                      onClick={() => setIsTransferOwnerSelectionVisible(true)}
+                      size="small"
+                      type="primary"
+                      style={{
+                        flex: 1,
+                        height: '28px',
+                        borderRadius: '4px',
+                        fontSize: '12px',
+                        fontWeight: '600',
+                        background: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)',
+                        border: 'none',
+                        boxShadow: '0 2px 4px rgba(24, 144, 255, 0.2)'
+                      }}
+                    >
+                      转让群主
+                    </Button>
+                  </div>
+                )}
               </div>
               <div
                 className={styles.groupMemberList}
@@ -897,9 +961,11 @@ const Person: React.FC<PersonProps> = ({
                   </Tooltip>
                 ))}
               </div>
-              <Button type="link" danger block style={{ marginTop: '16px' }} onClick={handleLeaveGroup}>
-          退出群聊
-        </Button>
+              {hasGroupManagePermission() && (
+                <Button type="link" danger block style={{ marginTop: '16px' }} onClick={handleLeaveGroup}>
+                  退出群聊
+                </Button>
+              )}
       </Card>
     )}
 
@@ -919,19 +985,7 @@ const Person: React.FC<PersonProps> = ({
       />
     </Modal>
 
-          {/* 操作按钮 */}
-          <div className={styles.profileActions}>
-            <Button type="primary" icon={<PhoneOutlined />} block>
-              语音通话
-            </Button>
-            <Button
-              icon={<VideoCameraOutlined />}
-              block
-              style={{ marginTop: 8 }}
-            >
-              视频通话
-            </Button>
-          </div>
+
         </div>
       </Sider>
 
@@ -961,6 +1015,74 @@ const Person: React.FC<PersonProps> = ({
           rows={6}
         />
       </Modal>
+
+      {/* 群管理弹窗组件 */}
+      {/* 添加成员弹窗 */}
+      <TwoColumnSelection
+        visible={isFriendSelectionVisible}
+        onCancel={() => setIsFriendSelectionVisible(false)}
+        onConfirm={(selectedIds, selectedItems) => {
+          setSelectedFriends(selectedItems);
+          handleAddMember(selectedIds.map(id => parseInt(id)), selectedItems);
+        }}
+        title="添加群成员"
+      />
+
+      {/* 删除成员弹窗 */}
+      <TwoColumnMemberSelection
+        visible={isMemberSelectionVisible}
+        members={currentGroupMembers.map(member => ({
+          id: member.wechatId,
+          nickname: member.nickname,
+          avatar: member.avatar
+        }))}
+        onCancel={() => setIsMemberSelectionVisible(false)}
+        onConfirm={handleRemoveMember}
+        title="删除群成员"
+        allowMultiple={true}
+      />
+
+      {/* 添加管理员弹窗 */}
+      <TwoColumnMemberSelection
+        visible={isAdminSelectionVisible}
+        members={currentGroupMembers.map(member => ({
+          id: member.wechatId,
+          nickname: member.nickname,
+          avatar: member.avatar
+        }))}
+        onCancel={() => setIsAdminSelectionVisible(false)}
+        onConfirm={handleAddAdmin}
+        title="添加管理员"
+        allowMultiple={false}
+      />
+
+      {/* 删除管理员弹窗 */}
+      <TwoColumnMemberSelection
+        visible={isRemoveAdminSelectionVisible}
+        members={currentGroupMembers.map(member => ({
+          id: member.wechatId,
+          nickname: member.nickname,
+          avatar: member.avatar
+        }))}
+        onCancel={() => setIsRemoveAdminSelectionVisible(false)}
+        onConfirm={handleRemoveAdmin}
+        title="删除管理员"
+        allowMultiple={false}
+      />
+
+      {/* 转让群主弹窗 */}
+      <TwoColumnMemberSelection
+        visible={isTransferOwnerSelectionVisible}
+        members={currentGroupMembers.map(member => ({
+          id: member.wechatId,
+          nickname: member.nickname,
+          avatar: member.avatar
+        }))}
+        onCancel={() => setIsTransferOwnerSelectionVisible(false)}
+        onConfirm={handleTransferOwner}
+        title="转让群主"
+        allowMultiple={false}
+      />
     </>
   );
 };