feat(pc-client): 第二批登录、会话、聊天与添加同事界面按规范收口

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>

pc-client/src/pages/chat/ConversationSider/ConversationItem.tsx

@@ -2,13 +2,15 @@ import type {
   ConversationItem as ConversationItemType,
   MessageItem,
 } from "@openim/wasm-client-sdk/lib/types/entity";
-import { Badge } from "antd";
+import { Badge, Dropdown } from "antd";
 import clsx from "clsx";
 import { t } from "i18next";
 import { memo, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import OIMAvatar from "@/components/OIMAvatar";
+import { IMSDK } from "@/layout/MainContentWrap";
 import { useConversationStore, useUserStore } from "@/store";
+import { feedbackToast } from "@/utils/common";
 import { formatConversionTime, getConversationContent } from "@/utils/imCommon";
 
 import styles from "./conversation-item.module.scss";
@@ -50,47 +52,90 @@ const ConversationItem = ({ isActive, conversation }: IConversationProps) => {
 
   const latestMessageTime = formatConversionTime(conversation.latestMsgSendTime);
 
+  const onMenuClick = async ({ key }: { key: string }) => {
+    try {
+      if (key === "pin") {
+        await IMSDK.pinConversation({
+          conversationID: conversation.conversationID,
+          isPinned: !conversation.isPinned,
+        });
+        return;
+      }
+      if (key === "delete") {
+        await IMSDK.deleteConversationAndDeleteAllMsg(conversation.conversationID);
+        if (isActive) {
+          navigate("/chat");
+        }
+      }
+    } catch (error) {
+      feedbackToast({
+        error,
+        msg:
+          key === "pin"
+            ? t("toast.pinConversationFailed")
+            : t("toast.deleteConversationFailed"),
+      });
+    }
+  };
+
   return (
-    <div
-      className={clsx(
-        styles["conversation-item"],
-        "border border-transparent",
-        isActive ? `bg-[var(--primary-active)]` : "hover:bg-[var(--chat-bg)]",
-      )}
-      onClick={toSpecifiedConversation}
+    <Dropdown
+      trigger={["contextMenu"]}
+      menu={{
+        items: [
+          {
+            key: "pin",
+            label: conversation.isPinned
+              ? t("placeholder.removeSticky")
+              : t("placeholder.sticky"),
+          },
+          { key: "delete", label: t("placeholder.delete"), danger: true },
+        ],
+        onClick: onMenuClick,
+      }}
     >
-      <OIMAvatar
-        size={48}
-        src={conversation.faceURL}
-        isgroup={Boolean(conversation.groupID)}
-        text={conversation.showName}
-      />
+      <div
+        className={clsx(
+          styles["conversation-item"],
+          "h-16 border border-transparent transition-colors duration-100",
+            isActive
+            ? "bg-[var(--primary-active)]"
+            : "hover:bg-[var(--chat-bg)]",
+        )}
+        style={{ transitionTimingFunction: "ease-out" }}
+        onClick={toSpecifiedConversation}
+      >
+        <OIMAvatar
+          size={44}
+          src={conversation.faceURL}
+          isgroup={Boolean(conversation.groupID)}
+          text={conversation.showName}
+        />
 
-      <div className="ml-3 flex h-12 flex-1 flex-col justify-between overflow-hidden py-0.5">
-        <div className="flex items-center justify-between">
-          <div className="flex-1 truncate text-sm font-medium">
-            {conversation.showName}
+        <div className="ml-3 flex min-w-0 flex-1 flex-col justify-center overflow-hidden">
+          <div className="flex items-center justify-between">
+            <div className="flex-1 truncate text-base font-bold text-[var(--base-black)]">
+              {conversation.showName}
+            </div>
+            <div className="ml-2 shrink-0 text-xs text-[var(--sub-text)]">
+              {latestMessageTime}
+            </div>
           </div>
-          <div className="ml-2 text-xs text-[var(--sub-text)]">{latestMessageTime}</div>
-        </div>
 
-        <div className="flex items-center justify-between">
-          <div className="flex min-h-[18px] flex-1 items-center overflow-hidden">
-            <div
-              className="truncate text-[13px] text-[rgba(81,94,112,0.5)]"
-              dangerouslySetInnerHTML={{
-                __html: latestMessageContent,
-              }}
-            ></div>
+          <div className="mt-1 flex items-center justify-between">
+            <div className="flex min-h-[18px] min-w-0 flex-1 items-center overflow-hidden">
+              <div
+                className="truncate text-sm text-[var(--sub-text)]"
+                dangerouslySetInnerHTML={{
+                  __html: latestMessageContent,
+                }}
+              ></div>
+            </div>
+            <Badge className="ml-2 shrink-0" size="small" count={conversation.unreadCount} />
           </div>
-          <Badge
-            className="ml-2"
-            size="small"
-            count={conversation.unreadCount}
-          />
         </div>
       </div>
-    </div>
+    </Dropdown>
   );
 };