代码提交

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

@@ -8,6 +8,7 @@ import {
   Card,
   Tag,
   message,
+  Modal,
 } from "antd";
 import {
   PhoneOutlined,
@@ -22,9 +23,12 @@ import {
   StarOutlined,
   EditOutlined,
   CheckOutlined,
+  PlusOutlined,
+  NotificationOutlined,
 } from "@ant-design/icons";
 import { ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
 import { useCkChatStore } from "@/store/module/ckchat/ckchat";
+import { useWebSocketStore } from "@/store/module/websocket/websocket";
 import styles from "./Person.module.scss";
 
 const { Sider } = Layout;
@@ -47,10 +51,27 @@ const Person: React.FC<PersonProps> = ({
     contract.labels || [],
   );
   const [allAvailableTags, setAllAvailableTags] = useState<string[]>([]);
+  const [isAddingTag, setIsAddingTag] = useState(false);
+  const [newTagValue, setNewTagValue] = useState("");
+
+  // 判断是否为群聊
+  const isGroup = 'chatroomId' in contract;
+
+  // 群聊相关状态
+  const [isEditingGroupName, setIsEditingGroupName] = useState(false);
+  const [groupNameValue, setGroupNameValue] = useState(contract.name || '');
+  const [isEditingGroupNotice, setIsEditingGroupNotice] = useState(false);
+  const [groupNoticeValue, setGroupNoticeValue] = useState(contract.notice || '');
+  const [isEditingSelfDisplayName, setIsEditingSelfDisplayName] = useState(false);
+  const [selfDisplayNameValue, setSelfDisplayNameValue] = useState(contract.selfDisplyName || '');
+  const [isGroupNoticeModalVisible, setIsGroupNoticeModalVisible] = useState(false);
+
+  // 构建联系人或群聊详细信息
 
   const kfSelectedUser = useCkChatStore(state =>
     state.getKfUserInfo(contract.wechatAccountId || 0),
   );
+  const { sendCommand } = useWebSocketStore();
 
   // 获取所有可用标签
   useEffect(() => {
@@ -68,22 +89,102 @@ const Person: React.FC<PersonProps> = ({
     fetchAvailableTags();
   }, [kfSelectedUser, contract.labels]);
 
-  // 当contract变化时更新备注值和标签
+  // 当contract变化时更新各种值
   useEffect(() => {
     setRemarkValue(contract.conRemark || "");
     setIsEditingRemark(false);
     setSelectedTags(contract.labels || []);
-  }, [contract.conRemark, contract.labels]);
+
+    if (isGroup) {
+      setGroupNameValue(contract.name || '');
+      setIsEditingGroupName(false);
+      setGroupNoticeValue(contract.notice || '');
+      setIsEditingGroupNotice(false);
+      setSelfDisplayNameValue(contract.selfDisplyName || '');
+      setIsEditingSelfDisplayName(false);
+    }
+  }, [contract.conRemark, contract.labels, contract.name, contract.notice, contract.selfDisplyName, isGroup]);
 
   // 处理备注保存
   const handleSaveRemark = () => {
-    // 这里应该调用API保存备注到后端
-    // 暂时只更新本地状态
+    if (isGroup) {
+      // 群聊备注修改
+      sendCommand("CmdModifyGroupRemark", {
+        wechatAccountId: contract.wechatAccountId,
+        chatroomId: contract.chatroomId,
+        newRemark: remarkValue,
+      });
+    } else {
+      // 好友备注修改
+      sendCommand("CmdModifyFriendRemark", {
+        wechatAccountId: contract.wechatAccountId,
+        wechatFriendId: contract.id,
+        newRemark: remarkValue,
+      });
+    }
+
     messageApi.success("备注保存成功");
     setIsEditingRemark(false);
     // 更新contract对象中的备注（实际项目中应该通过props回调或状态管理）
   };
 
+  // 处理群名称保存
+  const handleSaveGroupName = () => {
+    sendCommand("CmdChatroomOperate", {
+      wechatAccountId: contract.wechatAccountId,
+      wechatChatroomId: contract.id,
+      chatroomOperateType: 6,
+      extra: `{\"chatroomName\":\"${groupNameValue}\"}`,
+    });
+
+    messageApi.success("群名称修改成功");
+    setIsEditingGroupName(false);
+  };
+
+  // 点击编辑群名称按钮
+  const handleEditGroupName = () => {
+    setGroupNameValue(contract.name || '');
+    setIsEditingGroupName(true);
+  };
+
+  // 处理群公告保存
+  const handleSaveGroupNotice = () => {
+    sendCommand("CmdChatroomOperate", {
+      wechatAccountId: contract.wechatAccountId,
+      wechatChatroomId: contract.id,
+      chatroomOperateType: 5,
+      extra: `{\"announce\":\"${groupNoticeValue}\"}`,
+    });
+
+    messageApi.success("群公告修改成功");
+    setIsEditingGroupNotice(false);
+  };
+
+  // 点击编辑群公告按钮
+  const handleEditGroupNotice = () => {
+    setGroupNoticeValue(contract.notice || '');
+    setIsGroupNoticeModalVisible(true);
+  };
+
+  // 处理我在本群中的昵称保存
+  const handleSaveSelfDisplayName = () => {
+    sendCommand("CmdChatroomOperate", {
+      wechatAccountId: contract.wechatAccountId,
+      wechatChatroomId: contract.id,
+      chatroomOperateType: 8,
+      extra: `${selfDisplayNameValue}`,
+    });
+
+    messageApi.success("群昵称修改成功");
+    setIsEditingSelfDisplayName(false);
+  };
+
+  // 点击编辑群昵称按钮
+  const handleEditSelfDisplayName = () => {
+    setSelfDisplayNameValue(contract.selfDisplyName || '');
+    setIsEditingSelfDisplayName(true);
+  };
+
   // 处理取消编辑
   const handleCancelEdit = () => {
     setRemarkValue(contract.conRemark || "");
@@ -98,20 +199,90 @@ const Person: React.FC<PersonProps> = ({
 
     setSelectedTags(newSelectedTags);
 
-    // 这里应该调用API保存标签到后端
+    // 使用WebSocket发送修改标签命令
+    if (isGroup) {
+      // 群聊标签修改
+      sendCommand("CmdModifyGroupLabel", {
+        labels: newSelectedTags,
+        seq: +new Date(),
+        wechatAccountId: contract.wechatAccountId,
+        chatroomId: contract.chatroomId,
+      });
+    } else {
+      // 好友标签修改
+      sendCommand("CmdModifyFriendLabel", {
+        labels: newSelectedTags,
+        seq: +new Date(),
+        wechatAccountId: contract.wechatAccountId,
+        wechatFriendId: contract.id,
+      });
+    }
+
     messageApi.success(
       `标签"${tagName}"${selectedTags.includes(tagName) ? "已取消" : "已选中"}`,
     );
   };
 
-  // 模拟联系人详细信息
+  // 处理新增标签
+  const handleAddTag = () => {
+    if (!newTagValue.trim()) {
+      messageApi.error("请输入标签名称");
+      return;
+    }
+
+    if (allAvailableTags.includes(newTagValue.trim())) {
+      messageApi.error("标签已存在");
+      return;
+    }
+
+    const newTag = newTagValue.trim();
+
+    // 添加到可用标签列表
+    setAllAvailableTags(prev => [...prev, newTag]);
+
+    // 自动选中新添加的标签
+    setSelectedTags(prev => [...prev, newTag]);
+
+    // 使用WebSocket发送新增标签命令
+    if (isGroup) {
+      // 群聊标签修改
+      sendCommand("CmdModifyGroupLabel", {
+        labels: [...selectedTags, newTag],
+        seq: +new Date(),
+        wechatAccountId: contract.wechatAccountId,
+        chatroomId: contract.chatroomId,
+      });
+    } else {
+      // 好友标签修改
+      sendCommand("CmdModifyFriendLabel", {
+        labels: [...selectedTags, newTag],
+        seq: +new Date(),
+        wechatAccountId: contract.wechatAccountId,
+        wechatFriendId: contract.id || contract.wechatId,
+      });
+    }
+
+    messageApi.success(`标签"${newTag}"添加成功`);
+    setNewTagValue("");
+    setIsAddingTag(false);
+  };
+
+  // 处理取消新增标签
+  const handleCancelAddTag = () => {
+    setNewTagValue("");
+    setIsAddingTag(false);
+  };
+
+  // 构建联系人或群聊详细信息
   const contractInfo = {
-    name: contract.name,
+    name: contract.name || contract.nickname,
     nickname: contract.nickname,
     conRemark: remarkValue, // 使用当前编辑的备注值
     alias: contract.alias,
     wechatId: contract.wechatId,
-    avatar: contract.avatar,
+    chatroomId: isGroup ? contract.chatroomId : undefined,
+    chatroomOwner: isGroup ? contract.chatroomOwner : undefined,
+    avatar: contract.avatar || contract.chatroomAvatar,
     phone: contract.phone || "-",
     email: contract.email || "-",
     department: contract.department || "-",
@@ -119,9 +290,11 @@ const Person: React.FC<PersonProps> = ({
     company: contract.company || "-",
     region: contract.region || "-",
     joinDate: contract.joinDate || "-",
+    notice: isGroup ? contract.notice : undefined,
+    selfDisplyName: isGroup ? contract.selfDisplyName : undefined,
     status: "在线",
     tags: selectedTags,
-    bio: contract.bio || "-",
+    bio: contract.bio || contract.signature || "-",
   };
 
   if (!showProfile) {
@@ -151,14 +324,59 @@ const Person: React.FC<PersonProps> = ({
               icon={<UserOutlined />}
             />
             <div className={styles.profileInfo}>
-              <Tooltip
-                title={contractInfo.nickname || contractInfo.name}
-                placement="top"
-              >
-                <h4 className={styles.profileNickname}>
-                  {contractInfo.nickname || contractInfo.name}
-                </h4>
-              </Tooltip>
+              {isGroup && isEditingGroupName ? (
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                  }}
+                >
+                  <Input
+                    value={groupNameValue}
+                    onChange={e => setGroupNameValue(e.target.value)}
+                    placeholder="请输入群名称"
+                    size="small"
+                    style={{ flex: 1 }}
+                  />
+                  <Button
+                    type="text"
+                    size="small"
+                    icon={<CheckOutlined />}
+                    onClick={handleSaveGroupName}
+                    style={{ color: "#52c41a" }}
+                  />
+                  <Button
+                    type="text"
+                    size="small"
+                    icon={<CloseOutlined />}
+                    onClick={() => {
+                      setGroupNameValue(contract.name || '');
+                      setIsEditingGroupName(false);
+                    }}
+                    style={{ color: "#ff4d4f" }}
+                  />
+                </div>
+              ) : (
+                <Tooltip
+                  title={contractInfo.nickname || contractInfo.name}
+                  placement="top"
+                >
+                  <div style={{ display: "flex", alignItems: "center" }}>
+                    <h4 className={styles.profileNickname}>
+                      {contractInfo.nickname || contractInfo.name}
+                    </h4>
+                    {isGroup && (
+                      <Button
+                        type="text"
+                        size="small"
+                        icon={<EditOutlined />}
+                        onClick={() => setIsEditingGroupName(true)}
+                      />
+                    )}
+                  </div>
+                </Tooltip>
+              )}
 
               <div className={styles.profileStatus}>
                 <span className={styles.statusDot}></span>
@@ -169,58 +387,245 @@ const Person: React.FC<PersonProps> = ({
 
           {/* 详细信息卡片 */}
           <Card title="详细信息" className={styles.profileCard}>
-            <div className={styles.infoItem}>
-              <TeamOutlined className={styles.infoIcon} />
-              <span className={styles.infoLabel}>微信号:</span>
-              <span className={styles.infoValue}>
-                {contractInfo.alias || contractInfo.wechatId}
-              </span>
-            </div>
-            <div className={styles.infoItem}>
-              <PhoneOutlined className={styles.infoIcon} />
-              <span className={styles.infoLabel}>电话:</span>
-              <span className={styles.infoValue}>{contractInfo.phone}</span>
-            </div>
-            <div className={styles.infoItem}>
-              <EnvironmentOutlined className={styles.infoIcon} />
-              <span className={styles.infoLabel}>地区:</span>
-              <span className={styles.infoValue}>{contractInfo.region}</span>
-            </div>
-            <div className={styles.infoItem}>
-              <EditOutlined className={styles.infoIcon} />
-              <span className={styles.infoLabel}>备注:</span>
-              <div className={styles.infoValue}>
-                {isEditingRemark ? (
+            {isGroup ? (
+              // 群聊信息
+              <>
+                <div className={styles.infoItem}>
+                  <TeamOutlined className={styles.infoIcon} />
+                  <span className={styles.infoLabel}>群ID:</span>
+                  <span className={styles.infoValue}>
+                    {contractInfo.chatroomId}
+                  </span>
+                </div>
+                <div className={styles.infoItem}>
+                  <UserOutlined className={styles.infoIcon} />
+                  <span className={styles.infoLabel}>群主:</span>
+                  <span className={styles.infoValue}>{contractInfo.chatroomOwner}</span>
+                </div>
+                <div className={styles.infoItem}>
+                  <UserOutlined className={styles.infoIcon} />
+                  <span className={styles.infoLabel}>群昵称:</span>
+                  <div className={styles.infoValue}>
+                    {isEditingSelfDisplayName ? (
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "8px",
+                        }}
+                      >
+                        <Input
+                          value={selfDisplayNameValue}
+                          onChange={e => setSelfDisplayNameValue(e.target.value)}
+                          placeholder="请输入群昵称"
+                          size="small"
+                          style={{ flex: 1 }}
+                        />
+                        <Button
+                          type="text"
+                          size="small"
+                          icon={<CheckOutlined />}
+                          onClick={handleSaveSelfDisplayName}
+                          style={{ color: "#52c41a" }}
+                        />
+                        <Button
+                          type="text"
+                          size="small"
+                          icon={<CloseOutlined />}
+                          onClick={() => {
+                            setSelfDisplayNameValue(contract.selfDisplyName || '');
+                            setIsEditingSelfDisplayName(false);
+                          }}
+                          style={{ color: "#ff4d4f" }}
+                        />
+                      </div>
+                    ) : (
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "8px",
+                        }}
+                      >
+                        <span>{contractInfo.selfDisplyName || "点击添加群昵称"}</span>
+                        <Button
+                          type="text"
+                          size="small"
+                          icon={<EditOutlined />}
+                          onClick={() => setIsEditingSelfDisplayName(true)}
+                        />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </>
+            ) : (
+              // 好友信息
+              <>
+                <div className={styles.infoItem}>
+                  <TeamOutlined className={styles.infoIcon} />
+                  <span className={styles.infoLabel}>微信号:</span>
+                  <span className={styles.infoValue}>
+                    {contractInfo.alias || contractInfo.wechatId}
+                  </span>
+                </div>
+                <div className={styles.infoItem}>
+                  <PhoneOutlined className={styles.infoIcon} />
+                  <span className={styles.infoLabel}>电话:</span>
+                  <span className={styles.infoValue}>{contractInfo.phone}</span>
+                </div>
+                <div className={styles.infoItem}>
+                  <EnvironmentOutlined className={styles.infoIcon} />
+                  <span className={styles.infoLabel}>地区:</span>
+                  <span className={styles.infoValue}>{contractInfo.region}</span>
+                </div>
+              </>
+            )}
+            {!isGroup && (
+              <div className={styles.infoItem}>
+                <EditOutlined className={styles.infoIcon} />
+                <span className={styles.infoLabel}>备注:</span>
+                <div className={styles.infoValue}>
+                  {isEditingRemark ? (
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "8px",
+                      }}
+                    >
+                      <Input
+                        value={remarkValue}
+                        onChange={e => setRemarkValue(e.target.value)}
+                        placeholder="请输入备注"
+                        size="small"
+                        style={{ flex: 1 }}
+                      />
+                      <Button
+                        type="text"
+                        size="small"
+                        icon={<CheckOutlined />}
+                        onClick={handleSaveRemark}
+                        style={{ color: "#52c41a" }}
+                      />
+                      <Button
+                        type="text"
+                        size="small"
+                        icon={<CloseOutlined />}
+                        onClick={handleCancelEdit}
+                        style={{ color: "#ff4d4f" }}
+                      />
+                    </div>
+                  ) : (
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "8px",
+                      }}
+                    >
+                      <span>{contractInfo.conRemark || "点击添加备注"}</span>
+                      <Button
+                        type="text"
+                        size="small"
+                        icon={<EditOutlined />}
+                        onClick={() => setIsEditingRemark(true)}
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </Card>
+
+          {/* 标签 - 仅在非群聊时显示 */}
+          {!isGroup && (
+            <Card title="标签" className={styles.profileCard}>
+              <div className={styles.tagsContainer}>
+                {/* 渲染所有可用标签，选中的排在前面 */}
+                {[...new Set([...selectedTags, ...allAvailableTags])].map(
+                  (tag, index) => {
+                    const isSelected = selectedTags.includes(tag);
+                    return (
+                      <Tag
+                        key={index}
+                        color={isSelected ? "blue" : "default"}
+                        style={{
+                          cursor: "pointer",
+                          border: isSelected
+                            ? "1px solid #1890ff"
+                            : "1px solid #d9d9d9",
+                          backgroundColor: isSelected ? "#e6f7ff" : "#fafafa",
+                        }}
+                        onClick={() => handleTagToggle(tag)}
+                      >
+                        {tag}
+                      </Tag>
+                    );
+                  },
+                )}
+
+                {/* 新增标签区域 */}
+                {isAddingTag ? (
                   <div
                     style={{
                       display: "flex",
                       alignItems: "center",
                       gap: "8px",
+                      marginTop: "8px",
                     }}
                   >
                     <Input
-                      value={remarkValue}
-                      onChange={e => setRemarkValue(e.target.value)}
-                      placeholder="请输入备注"
+                      value={newTagValue}
+                      onChange={e => setNewTagValue(e.target.value)}
+                      placeholder="请输入标签名称"
                       size="small"
-                      style={{ flex: 1 }}
+                      style={{ width: "120px" }}
+                      onPressEnter={handleAddTag}
                     />
                     <Button
                       type="text"
                       size="small"
                       icon={<CheckOutlined />}
-                      onClick={handleSaveRemark}
+                      onClick={handleAddTag}
                       style={{ color: "#52c41a" }}
                     />
                     <Button
                       type="text"
                       size="small"
                       icon={<CloseOutlined />}
-                      onClick={handleCancelEdit}
+                      onClick={handleCancelAddTag}
                       style={{ color: "#ff4d4f" }}
                     />
                   </div>
                 ) : (
+                  <Tag
+                    style={{
+                      cursor: "pointer",
+                      border: "1px dashed #d9d9d9",
+                      backgroundColor: "#fafafa",
+                    }}
+                    onClick={() => setIsAddingTag(true)}
+                  >
+                    <PlusOutlined /> 新增标签
+                  </Tag>
+                )}
+
+                {allAvailableTags.length === 0 && !isAddingTag && (
+                  <span style={{ color: "#999", fontSize: "12px" }}>
+                    暂无可用标签
+                  </span>
+                )}
+              </div>
+            </Card>
+          )}
+
+          {/* 个人简介或群公告 */}
+          <Card title={isGroup ? "群公告" : "个人简介"} className={styles.profileCard}>
+            {isGroup ? (
+              // 群聊简介（原群公告）
+              <div className={styles.infoValue}>
+                {isEditingGroupNotice ? (
                   <div
                     style={{
                       display: "flex",
@@ -228,55 +633,45 @@ const Person: React.FC<PersonProps> = ({
                       gap: "8px",
                     }}
                   >
-                    <span>{contractInfo.conRemark || "点击添加备注"}</span>
+                    <Input.TextArea
+                      value={groupNoticeValue}
+                      onChange={e => setGroupNoticeValue(e.target.value)}
+                      placeholder="请输入内容"
+                      rows={6}
+                      style={{ width: '100%' }}
+                    />
+                  </div>
+                ) : (
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "flex-start",
+                      gap: "8px",
+                    }}
+                  >
+                    <div 
+                      className={styles.bioText}
+                      style={{
+                        maxHeight: "120px", // 约5行文本的高度
+                        overflowY: "auto", // 添加垂直滚动条
+                        paddingRight: "5px", // 为滚动条留出空间
+                      }}
+                    >
+                      {contractInfo.notice || "点击添加群公告"}
+                    </div>
                     <Button
                       type="text"
                       size="small"
                       icon={<EditOutlined />}
-                      onClick={() => setIsEditingRemark(true)}
+                      onClick={() => setIsEditingGroupNotice(true)}
                     />
                   </div>
                 )}
               </div>
-            </div>
-          </Card>
-
-          {/* 标签 */}
-          <Card title="标签" className={styles.profileCard}>
-            <div className={styles.tagsContainer}>
-              {/* 渲染所有可用标签，选中的排在前面 */}
-              {[...new Set([...selectedTags, ...allAvailableTags])].map(
-                (tag, index) => {
-                  const isSelected = selectedTags.includes(tag);
-                  return (
-                    <Tag
-                      key={index}
-                      color={isSelected ? "blue" : "default"}
-                      style={{
-                        cursor: "pointer",
-                        border: isSelected
-                          ? "1px solid #1890ff"
-                          : "1px solid #d9d9d9",
-                        backgroundColor: isSelected ? "#e6f7ff" : "#fafafa",
-                      }}
-                      onClick={() => handleTagToggle(tag)}
-                    >
-                      {tag}
-                    </Tag>
-                  );
-                },
-              )}
-              {allAvailableTags.length === 0 && (
-                <span style={{ color: "#999", fontSize: "12px" }}>
-                  暂无可用标签
-                </span>
-              )}
-            </div>
-          </Card>
-
-          {/* 个人简介 */}
-          <Card title="个人简介" className={styles.profileCard}>
-            <p className={styles.bioText}>{contractInfo.bio}</p>
+            ) : (
+              // 个人简介
+              <p className={styles.bioText}>{contractInfo.bio}</p>
+            )}
           </Card>
 
           {/* 操作按钮 */}
@@ -294,6 +689,36 @@ const Person: React.FC<PersonProps> = ({
           </div>
         </div>
       </Sider>
+
+      {/* 群公告编辑弹窗 */}
+      <Modal
+        title="发布群公告"
+        open={isGroupNoticeModalVisible}
+        onCancel={() => setIsGroupNoticeModalVisible(false)}
+        footer={[
+          <Button key="cancel" onClick={() => setIsGroupNoticeModalVisible(false)}>
+            取消
+          </Button>,
+          <Button 
+            key="submit" 
+            type="primary" 
+            onClick={() => {
+              handleSaveGroupNotice();
+              setIsGroupNoticeModalVisible(false);
+            }}
+          >
+            确定
+          </Button>,
+        ]}
+      >
+        <Input.TextArea
+          value={groupNoticeValue}
+          onChange={e => setGroupNoticeValue(e.target.value)}
+          placeholder="请输入内容"
+          rows={6}
+          style={{ width: '100%' }}
+        />
+      </Modal>
     </>
   );
 };