新增 pc-client：畅联 PC 端工程（Electron+React，按确认效果图改造，B-59）

- 基于 openim-electron-demo 改造：工号+密码登录（自研账号服务）、会话列表/聊天窗/通讯录界面重做 - 文字/语音/文件/图片消息、文件拖拽发送、表情面板、一对一语音通话（LiveKit） - RTC 令牌对接账号服务带鉴权版 /api/rtc_token（Bearer imToken + {room,identity}） - account-service: CORS Allow-Headers 补 authorization（浏览器/渲染进程跨域调 rtc_token 需要） - 附本地 mock 账号服务（scripts/mock-account-server.js）与截图联调脚本
2026-08-09 09:11:06 +08:00
parent b95159f7eb
commit 7ce40e356f
284 changed files with 31599 additions and 7 deletions
@@ -0,0 +1,115 @@
+import { useRequest } from "ahooks";
+import { Empty, Spin } from "antd";
+import { useCallback, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { GroupedVirtuoso, GroupedVirtuosoHandle } from "react-virtuoso";
+
+import { useContactStore } from "@/store";
+import { formatContactsByWorker } from "@/utils/contactsFormat";
+import { emit } from "@/utils/events";
+
+import AlphabetIndex from "./AlphabetIndex";
+import FriendListItem from "./FriendListItem";
+
+export const MyFriends = () => {
+  const { t } = useTranslation();
+  const friendList = useContactStore((state) => state.friendList);
+  const virtuoso = useRef<GroupedVirtuosoHandle>(null);
+  const alphabetRef = useRef<{ updateCurrentLetter: (letter: string) => void }>(null);
+
+  const { data: sectionData, cancel } = useRequest(
+    () => formatContactsByWorker(friendList),
+    {
+      refreshDeps: [friendList],
+    },
+  );
+
+  useEffect(() => {
+    return () => {
+      cancel();
+    };
+  }, []);
+
+  const scrollToLetter = useCallback(
+    (idx: number) => {
+      const prevNum = sectionData?.groupCounts.slice(0, idx).reduce((a, b) => a + b, 0);
+      console.log(prevNum);
+
+      virtuoso.current?.scrollToIndex({
+        index: prevNum ?? 0,
+        // behavior: "smooth",
+      });
+    },
+    [sectionData?.groupCounts],
+  );
+
+  const showUserCard = useCallback((userID: string) => {
+    emit("OPEN_USER_CARD", {
+      userID,
+    });
+  }, []);
+
+  const determineCurrentGroup = (startIndex: number) => {
+    if (!sectionData) return;
+
+    let currentItemIndex = 0;
+
+    for (
+      let groupIndex = 0;
+      groupIndex < sectionData.groupCounts.length;
+      groupIndex++
+    ) {
+      const groupItemCount = sectionData.groupCounts[groupIndex];
+
+      if (startIndex < currentItemIndex + groupItemCount) {
+        alphabetRef.current?.updateCurrentLetter(sectionData.indexList[groupIndex]);
+        break;
+      }
+
+      currentItemIndex += groupItemCount;
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden bg-white">
+      <div className="m-5.5 text-base font-extrabold">{t("placeholder.myFriend")}</div>
+      {!sectionData ? (
+        <Spin />
+      ) : !sectionData.groupCounts.length ? (
+        <Empty className="mt-[30%]" image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      ) : (
+        <div className="ml-4 mt-4 flex-1 overflow-auto pr-4">
+          <AlphabetIndex
+            ref={alphabetRef}
+            indexList={sectionData.indexList}
+            scrollToLetter={scrollToLetter}
+          />
+
+          <GroupedVirtuoso
+            ref={virtuoso}
+            groupCounts={sectionData.groupCounts}
+            groupContent={(index) => (
+              <div>
+                <div className="bg-white px-3.5 pb-1 text-[13px] text-[#8E9AB0FF]">
+                  {sectionData.indexList[index]}
+                </div>
+                <div className="mx-3.5 mb-3 h-px w-full bg-[#E8EAEFFF] bg-white" />
+              </div>
+            )}
+            itemContent={(index) => {
+              return (
+                <FriendListItem
+                  key={sectionData.totalList[index].userID}
+                  friend={sectionData.totalList[index]}
+                  showUserCard={showUserCard}
+                />
+              );
+            }}
+            rangeChanged={({ startIndex }) => determineCurrentGroup(startIndex)}
+            className="no-scrollbar h-full overflow-x-hidden"
+          />
+        </div>
+      )}
+    </div>
+  );
+};