feat(pc-client): 通讯录入口整改 + 添加同事弹窗 + 发送错误提示（视觉规范 v1，B-52 施工 3/3）

- ContactSider：三个功能入口改为 20px 线性图标 + 36x36 浅蓝图标块 + 文字
  （①新的同事②添加同事③我的群聊），行高 44，删掉 48px PNG 大图
- 新增 AddColleague 弹窗：工号 + 可编辑验证消息 + 五态（默认/校验失败/发送中/成功/失败）
- 会话栏搜索框右侧新增「+」入口，两处打开同一个弹窗
- useSendMessage：空接收方明确提示、SDK 错误码映射中文提示
- 申请状态文案对齐规范：等待对方通过/已添加/已拒绝
- global.scss 补 --search-bg / --chat-bg token

Co-authored-by: multica-agent <github@multica.ai>

pc-client/src/i18n/resources/en.json

@@ -220,6 +220,7 @@
     "latestChat": "Recent Chats",
     "myFriend": "My Friends",
     "myGroup": "My Groups",
+    "addColleague": "Add Colleague",
     "groupName": "Group Name",
     "groupAvatar": "Group Avatar",
     "groupMember": "Group Members",
@@ -461,9 +462,9 @@
     "custom": "Custom"
   },
   "application": {
-    "agree": "Agree",
+    "agree": "Accept",
     "refuse": "Refuse",
-    "agreed": "Agreed",
+    "agreed": "Added",
     "refused": "Refused",
     "information": "Verification Information",
     "pending": "Pending Verification",

pc-client/src/i18n/resources/zh.json

@@ -232,6 +232,7 @@
     "latestChat": "最近聊天",
     "myFriend": "我的好友",
     "myGroup": "我的群组",
+    "addColleague": "添加同事",
     "groupName": "群名称",
     "groupAvatar": "群头像",
     "groupMember": "群成员",
@@ -473,12 +474,12 @@
     "custom": "自定义"
   },
   "application": {
-    "agree": "同意",
+    "agree": "接受",
     "refuse": "拒绝",
-    "agreed": "已同意",
+    "agreed": "已添加",
     "refused": "已拒绝",
     "information": "验证信息",
-    "pending": "等待验证",
+    "pending": "等待对方通过",
     "applyToJoin": "申请加入",
     "applyToAdd": "申请添加",
     "applyToFriend": "申请添加您为好友"

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

@@ -1,4 +1,4 @@
-import { SearchOutlined } from "@ant-design/icons";
+import { SearchOutlined, PlusOutlined } from "@ant-design/icons";
 import { Button, Input, Spin } from "antd";
 import { t } from "i18next";
 import { useMemo, useRef, useState } from "react";
@@ -6,6 +6,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
 
 import FlexibleSider from "@/components/FlexibleSider";
+import AddColleague from "@/pages/common/AddColleague";
 import { useConversationStore, useUserStore } from "@/store";
 
 import ConversationItemComp from "./ConversationItem";
@@ -60,6 +61,7 @@ const ConversationSider = () => {
   const syncState = useUserStore((state) => state.syncState);
   const connectState = useUserStore((state) => state.connectState);
   const [keyword, setKeyword] = useState("");
+  const [addColleagueOpen, setAddColleagueOpen] = useState(false);
   const virtuoso = useRef<VirtuosoHandle>(null);
   const hasmore = useRef(true);
   const loading = useRef(false);
@@ -151,16 +153,26 @@ const ConversationSider = () => {
       {connectState === "failed" && <OfflineBar />}
       <div className="app-drag px-4 pt-4">
         <div className="pb-3 text-base font-bold">{t("placeholder.chat")}</div>
-        <Input
+        <div className="flex items-center gap-1.5">
-          className="app-no-drag mb-2 rounded-md border-none !bg-[var(--chat-bg)]"
+          <Input
-          prefix={<SearchOutlined className="text-[var(--sub-text)]" rev={undefined} />}
+            className="app-no-drag mb-2 rounded-md border-none !bg-[var(--search-bg)]"
-          placeholder={t("placeholder.search")}
+            prefix={<SearchOutlined className="text-[var(--sub-text)]" rev={undefined} />}
-          allowClear
+            placeholder={t("placeholder.search")}
-          value={keyword}
+            allowClear
-          onChange={(e) => setKeyword(e.target.value)}
+            value={keyword}
-        />
+            onChange={(e) => setKeyword(e.target.value)}
+          />
+          <div
+            className="app-no-drag flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-lg text-[20px] text-[var(--sub-text)] transition-colors duration-100 hover:bg-[var(--primary-active)] hover:text-[var(--primary)]"
+            title={t("placeholder.addColleague")}
+            onClick={() => setAddColleagueOpen(true)}
+          >
+            <PlusOutlined rev={undefined} />
+          </div>
+        </div>
       </div>
       {renderBody()}
+      <AddColleague open={addColleagueOpen} onClose={() => setAddColleagueOpen(false)} />
     </FlexibleSider>
   );
 };

pc-client/src/pages/chat/queryChat/ChatFooter/useSendMessage.ts

@@ -5,6 +5,7 @@ import { useCallback } from "react";
 
 import { IMSDK } from "@/layout/MainContentWrap";
 import { useConversationStore } from "@/store";
+import { feedbackToast } from "@/utils/common";
 import { emit } from "@/utils/events";
 
 import { pushNewMessage, updateOneMessage } from "../useHistoryMessageList";
@@ -14,6 +15,24 @@ export type SendMessageParams = Partial<Omit<SendMsgParams, "message">> & {
   needPush?: boolean;
 };
 
+const sendErrorTips = [
+  { code: 1303, tip: "对方还不是你的同事，请先添加对方" },
+  { code: 1302, tip: "对方已把你加入黑名单，无法发送" },
+  { code: 1101, tip: "对方账号不存在" },
+  { code: 1501, tip: "登录已过期，请重新登录" },
+  { code: 1502, tip: "登录凭证无效，请重新登录" },
+];
+
+/** 把 SDK 原始错误映射成中文提示 */
+const mapSendError = (error: unknown): string => {
+  const s = String(error ?? "");
+  for (const { code, tip } of sendErrorTips) {
+    if (s.includes(String(code))) return tip;
+  }
+  if (/10000|10001|timeout|network|网络/i.test(s)) return "网络异常，请检查网络后重试";
+  return "消息没发出去，请重试";
+};
+
 export function useSendMessage() {
   const sendMessage = useCallback(
     async ({ recvID, groupID, message, needPush }: SendMessageParams) => {
@@ -30,9 +49,18 @@ export function useSendMessage() {
         emit("CHAT_LIST_SCROLL_TO_BOTTOM");
       }
 
+      const finalRecvID = recvID ?? currentConversation?.userID ?? "";
+      const finalGroupID = groupID ?? currentConversation?.groupID ?? "";
+      // 单聊且接收方为空：会话对象异常，明确提示而不是静默失败
+      if (!finalGroupID && !finalRecvID) {
+        updateOneMessage({ ...message, status: MessageStatus.Failed });
+        feedbackToast({ msg: "请先添加对方为同事，再发起会话" });
+        return;
+      }
+
       const options = {
-        recvID: recvID ?? currentConversation?.userID ?? "",
+        recvID: finalRecvID,
-        groupID: groupID ?? currentConversation?.groupID ?? "",
+        groupID: finalGroupID,
         message,
       };
 
@@ -44,6 +72,7 @@ export function useSendMessage() {
           ...message,
           status: MessageStatus.Failed,
         });
+        feedbackToast({ error, msg: mapSendError(error) });
       }
     },
     [],

pc-client/src/pages/common/AddColleague.tsx

@@ -0,0 +1,102 @@
+import { IMSDK } from "@/layout/MainContentWrap";
+import { useContactStore } from "@/store";
+import { feedbackToast } from "@/utils/common";
+import { Input, Modal } from "antd";
+import { useEffect, useState } from "react";
+
+interface IAddColleagueProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+/**
+ * 添加同事弹窗（视觉规范 v1 §4.2）：
+ * 工号输入 + 可编辑验证消息 + 发送按钮，五态：默认/校验失败/发送中/成功/失败。
+ * 成功后刷新申请数，2s 后关闭并提示「申请已发送，等对方通过」。
+ */
+const AddColleague = ({ open, onClose }: IAddColleagueProps) => {
+  const [staffNo, setStaffNo] = useState("");
+  const [verifyMsg, setVerifyMsg] = useState("你好，我想加你为同事");
+  const [error, setError] = useState("");
+  const [sending, setSending] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setStaffNo("");
+      setVerifyMsg("你好，我想加你为同事");
+      setError("");
+      setSending(false);
+    }
+  }, [open]);
+
+  const send = async () => {
+    const id = staffNo.trim();
+    if (!id) {
+      setError("请输入对方工号");
+      return;
+    }
+    setSending(true);
+    try {
+      await IMSDK.addFriend({
+        toUserID: id,
+        reqMsg: verifyMsg.trim() || "你好，我想加你为同事",
+      });
+      useContactStore.getState().getRecvFriendApplicationListByReq();
+      feedbackToast({ msg: "申请已发送，等对方通过" });
+      setTimeout(onClose, 500);
+    } catch (error) {
+      setError("发送失败，请确认工号正确、网络正常");
+      feedbackToast({ error, msg: "发送失败，请确认工号正确、网络正常" });
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <Modal
+      title="添加同事"
+      open={open}
+      onCancel={sending ? undefined : onClose}
+      footer={null}
+      width={400}
+      centered
+      maskClosable={!sending}
+      destroyOnClose
+    >
+      <div className="pt-2">
+        <div className="mb-1.5 text-sm text-[var(--base-black)]">同事工号</div>
+        <Input
+          value={staffNo}
+          onChange={(e) => {
+            setStaffNo(e.target.value);
+            if (error) setError("");
+          }}
+          placeholder="请输入对方工号"
+          status={error ? "error" : undefined}
+          style={{ height: 36, borderRadius: 8, backgroundColor: "var(--search-bg)" }}
+          disabled={sending}
+          onPressEnter={send}
+        />
+        {error && <div className="mt-1 text-xs text-[var(--warn-text)]">{error}</div>}
+        <div className="mb-1.5 mt-4 text-sm text-[var(--base-black)]">验证消息（可不填）</div>
+        <Input.TextArea
+          value={verifyMsg}
+          onChange={(e) => setVerifyMsg(e.target.value)}
+          placeholder="你好，我想加你为同事"
+          autoSize={{ minRows: 2, maxRows: 4 }}
+          disabled={sending}
+          style={{ borderRadius: 8, backgroundColor: "var(--search-bg)" }}
+        />
+        <button
+          className="mt-5 flex h-9 w-full cursor-pointer items-center justify-center rounded-lg border-none bg-[var(--primary)] text-white disabled:cursor-not-allowed disabled:opacity-60"
+          disabled={sending}
+          onClick={send}
+        >
+          {sending ? <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white" /> : "发送申请"}
+        </button>
+      </div>
+    </Modal>
+  );
+};
+
+export default AddColleague;

pc-client/src/pages/contact/ContactSider.tsx

@@ -1,48 +1,48 @@
 import { Badge } from "antd";
 import clsx from "clsx";
+import { UserAddOutlined, UserOutlined, TeamOutlined } from "@ant-design/icons";
 import i18n, { t } from "i18next";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import group_notifications from "@/assets/images/contact/group_notifications.png";
-import my_friends from "@/assets/images/contact/my_friends.png";
-import my_groups from "@/assets/images/contact/my_groups.png";
-import new_friends from "@/assets/images/contact/new_friends.png";
 import FlexibleSider from "@/components/FlexibleSider";
+import AddColleague from "@/pages/common/AddColleague";
 import { useContactStore } from "@/store";
 
-const Links = [
+type LinkItem = {
+  label: string;
+  icon: React.ReactNode;
+  path?: string;
+  modal?: boolean;
+};
+
+// 通讯录功能入口：按视觉规范 v1 固定顺序 ①新的同事 ②添加同事 ③我的群聊，
+// 全部用「20px 线性图标 + 36×36 浅蓝图标块 + 文字」，行高 44。
+const buildLinks = (): LinkItem[] => [
   {
     label: t("placeholder.newFriends"),
-    icon: new_friends,
+    icon: <UserAddOutlined />,
     path: "/contact/newFriends",
   },
   {
-    label: t("placeholder.groupNotification"),
+    label: t("placeholder.addColleague"),
-    icon: group_notifications,
+    icon: <UserOutlined />,
-    path: "/contact/groupNotifications",
+    modal: true,
-  },
-  {
-    label: t("placeholder.myFriend"),
-    icon: my_friends,
-    path: "/contact",
   },
   {
     label: t("placeholder.myGroup"),
-    icon: my_groups,
+    icon: <TeamOutlined />,
     path: "/contact/myGroups",
   },
 ];
 
 i18n.on("languageChanged", () => {
-  Links[0].label = t("placeholder.newFriends");
+  // buildLinks 每次渲染时都会重新读取文案，无需缓存更新
-  Links[1].label = t("placeholder.groupNotification");
-  Links[2].label = t("placeholder.myFriend");
-  Links[3].label = t("placeholder.myGroup");
 });
 
 const ContactSider = () => {
-  const [selectIndex, setSelectIndex] = useState(2);
+  const [selectIndex, setSelectIndex] = useState(-1);
+  const [addColleagueOpen, setAddColleagueOpen] = useState(false);
   const unHandleFriendApplicationCount = useContactStore(
     (state) => state.unHandleFriendApplicationCount,
   );
@@ -50,16 +50,14 @@ const ContactSider = () => {
     (state) => state.unHandleGroupApplicationCount,
   );
   const navigate = useNavigate();
+  const Links = buildLinks();
 
   useEffect(() => {
     if (location.hash.includes("/contact/newFriends")) {
       setSelectIndex(0);
     }
-    if (location.hash.includes("/contact/groupNotifications")) {
-      setSelectIndex(1);
-    }
     if (location.hash.includes("/contact/myGroups")) {
-      setSelectIndex(3);
+      setSelectIndex(2);
     }
   }, []);
 
@@ -67,10 +65,16 @@ const ContactSider = () => {
     if (index === 0) {
       return unHandleFriendApplicationCount;
     }
-    if (index === 1) {
+    return index === 2 ? unHandleGroupApplicationCount : 0;
-      return unHandleGroupApplicationCount;
+  };
+
+  const onClick = (item: LinkItem, index: number) => {
+    if (item.modal) {
+      setAddColleagueOpen(true);
+      return;
     }
-    return 0;
+    setSelectIndex(index);
+    if (item.path) navigate(item.path);
   };
 
   return (
@@ -86,32 +90,29 @@ const ContactSider = () => {
           {Links.map((item, index) => {
             return (
               <li
-                key={item.path}
+                key={item.label}
                 className={clsx(
-                  "mx-2 flex cursor-pointer items-center rounded-lg px-3 py-2.5 text-sm",
+                  "mx-2 flex h-11 cursor-pointer items-center rounded-lg px-3",
                   index === selectIndex
                     ? "bg-[var(--primary-active)]"
                     : "hover:bg-[var(--chat-bg)]",
                 )}
-                onClick={() => {
+                onClick={() => onClick(item, index)}
-                  setSelectIndex(index);
-                  navigate(String(item.path));
-                }}
               >
                 <Badge size="small" count={getBadge(index)}>
-                  <img
+                  <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--primary-active)] text-[20px] leading-none text-[var(--primary)]">
-                    alt={item.label}
+                    {item.icon}
-                    src={item.icon}
+                  </span>
-                    className="mr-3 h-12 w-12 rounded-lg"
-                  />
                 </Badge>
-                <div className="text-sm">{item.label}</div>
+                <div className="ml-3 text-[15px] text-[var(--base-black)]">{item.label}</div>
               </li>
             );
           })}
         </ul>
       </div>
+      <AddColleague open={addColleagueOpen} onClose={() => setAddColleagueOpen(false)} />
     </FlexibleSider>
   );
 };
 export default ContactSider;
+

pc-client/src/styles/global.scss

@@ -8,6 +8,8 @@
   --top-search-bar: #3b87f5;
   --sub-text: #86909c;
   --gap-text: #eeeeee;
+  --search-bg: #f2f3f5;
+  --chat-bg: #f5f6f8;
   --warn-text: #f53f3f;
   --moment-text: #6085b1;
   --searchbar-height: 2.5rem;