leefer/tongxunruanjian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

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

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

Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
编码工程师
2026-08-16 02:19:05 +08:00
co-authored by multica-agent
parent 12b0a1c943
commit 032882dbec
7 changed files with 203 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pc-client/src/i18n/resources/en.json
+3 -2
View File
@@ -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
+4 -3
View File
@@ -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
+21 -9
View File
@@ -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
className="app-no-drag mb-2 rounded-md border-none !bg-[var(--chat-bg)]"
prefix={<SearchOutlined className="text-[var(--sub-text)]" rev={undefined} />}
placeholder={t("placeholder.search")}
allowClear
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
/>
<div className="flex items-center gap-1.5">
<Input
className="app-no-drag mb-2 rounded-md border-none !bg-[var(--search-bg)]"
prefix={<SearchOutlined className="text-[var(--sub-text)]" rev={undefined} />}
placeholder={t("placeholder.search")}
allowClear
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
+31 -2
View File
@@ -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 ?? "",
groupID: groupID ?? currentConversation?.groupID ?? "",
recvID: finalRecvID,
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
+102
View File
@@ -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
+40 -39
View File
@@ -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"),
icon: group_notifications,
path: "/contact/groupNotifications",
},
{
label: t("placeholder.myFriend"),
icon: my_friends,
path: "/contact",
label: t("placeholder.addColleague"),
icon: <UserOutlined />,
modal: true,
},
{
label: t("placeholder.myGroup"),
icon: my_groups,
icon: <TeamOutlined />,
path: "/contact/myGroups",
},
];
i18n.on("languageChanged", () => {
Links[0].label = t("placeholder.newFriends");
Links[1].label = t("placeholder.groupNotification");
Links[2].label = t("placeholder.myFriend");
Links[3].label = t("placeholder.myGroup");
// buildLinks 每次渲染时都会重新读取文案，无需缓存更新
});
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 unHandleGroupApplicationCount;
return index === 2 ? unHandleGroupApplicationCount : 0;
};
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={() => {
setSelectIndex(index);
navigate(String(item.path));
}}
onClick={() => onClick(item, index)}
>
<Badge size="small" count={getBadge(index)}>
<img
alt={item.label}
src={item.icon}
className="mr-3 h-12 w-12 rounded-lg"
/>
<span className="flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--primary-active)] text-[20px] leading-none text-[var(--primary)]">
{item.icon}
</span>
</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
+2
View File
@@ -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;