feat(pc-client): 在可改目录按 v2 重整 Token、侧栏宽度与好友申请五态

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

pc-client/src/components/ApplicationItem/index.tsx

@@ -7,7 +7,6 @@ import { Button, Spin } from "antd";
 import { t } from "i18next";
 import { memo, useCallback, useState } from "react";
 
-import arrow from "@/assets/images/contact/arrowTopRight.png";
 import OIMAvatar from "@/components/OIMAvatar";
 import { IMSDK } from "@/layout/MainContentWrap";
 import { emit } from "@/utils/events";
@@ -51,12 +50,12 @@ const ApplicationItem = ({
 
   const getStatusStr = () => {
     if (source.handleResult === ApplicationHandleResult.Agree) {
-      return t("application.agreed");
+      return "已添加";
     }
     if (source.handleResult === ApplicationHandleResult.Reject) {
-      return t("application.refused");
+      return "已拒绝";
     }
-    return t("application.pending");
+    return isRecv ? "待处理" : "等待对方通过";
   };
 
   const getAvatarUrl = () => {
@@ -83,17 +82,18 @@ const ApplicationItem = ({
 
   return (
     <Spin spinning={loading}>
-      <div className="flex flex-row items-center justify-between p-3.5 transition-colors hover:bg-[var(--primary-active)]">
+      <div className="flex min-h-[72px] flex-row items-center justify-between px-4 py-3 transition-colors duration-100 hover:bg-[var(--chat-bg)]">
-        <div className="flex flex-row">
+        <div className="mr-3 flex min-w-0 flex-1 flex-row">
           <OIMAvatar
+            size={48}
             src={getAvatarUrl()}
             text={getTitle()}
             isgroup={isGroup && !isRecv}
             onClick={tryShowCard}
           />
-          <div className="ml-3">
+          <div className="ml-3 min-w-0 flex-1">
-            <p className="text-sm">{getTitle()}</p>
+            <p className="truncate text-base text-[var(--base-black)]">{getTitle()}</p>
-            <p className="pb-2.5 pt-[5px] text-xs ">
+            <p className="truncate pt-1 text-xs text-[var(--sub-text)]">
               {getApplicationDesc()}
               {(isGroup || (!isGroup && !isRecv)) && (
                 <span className="ml-1 text-xs text-[var(--primary)]">
@@ -101,42 +101,34 @@ const ApplicationItem = ({
                 </span>
               )}
             </p>
-            <p className="text-xs text-[var(--sub-text)]">
+            {source.reqMsg && (
-              {t("application.information")}:
+              <p className="truncate text-xs text-[var(--sub-text)]">{source.reqMsg}</p>
-            </p>
+            )}
-            <p className="text-xs text-[var(--sub-text)]">{source.reqMsg}</p>
           </div>
         </div>
 
         {showActionBtn && (
-          <div className="flex flex-row">
+          <div className="flex w-[132px] shrink-0 flex-row gap-2">
-            <div className="mr-5.5 h-8 w-[60px]">
+            <Button
-              <Button
+              size="small"
-                block={true}
+              onClick={() => loadingWrap(false)}
-                size="small"
+              className="!h-8 !flex-1 !rounded-lg"
-                onClick={() => loadingWrap(false)}
+            >
-                className="!h-full !rounded-md border-2 border-[var(--primary)] text-[var(--primary)]"
+              拒绝
-              >
+            </Button>
-                {t("application.refuse")}
+            <Button
-              </Button>
+              size="small"
-            </div>
+              type="primary"
-            <div className="h-8 w-[60px]">
+              className="!h-8 !flex-1 !rounded-lg !bg-[var(--primary)]"
-              <Button
+              onClick={() => loadingWrap(true)}
-                block={true}
+            >
-                size="small"
+              接受
-                type="primary"
+            </Button>
-                className="!h-full !rounded-md bg-[var(--primary)]"
-                onClick={() => loadingWrap(true)}
-              >
-                {t("application.agree")}
-              </Button>
-            </div>
           </div>
         )}
 
         {!showActionBtn && (
-          <div className="flex flex-row items-center">
+          <div className="flex shrink-0 flex-row items-center">
-            {!isRecv && <img className="mr-2 h-4 w-4" src={arrow} alt="" />}
             <p className="text-sm text-[var(--sub-text)]">{getStatusStr()}</p>
           </div>
         )}

pc-client/src/components/FlexibleSider/flexible-sider.module.scss

@@ -1,7 +1,7 @@
 .sider_resize {
-  width: 300px;
+  width: 280px;
   min-width: 240px;
-  max-width: 45vw;
+  max-width: 400px;
   resize: horizontal;
   overflow: scroll;
   height: 100%;

pc-client/src/pages/contact/myFriends/FriendListItem.tsx

@@ -11,11 +11,15 @@ const FriendListItem = ({
 }) => {
   return (
     <div
-      className="flex items-center rounded-md px-3.5 pb-3 pt-2.5 transition-colors hover:bg-[var(--primary-active)]"
+      className="flex h-14 cursor-pointer items-center rounded-lg px-3.5 transition-colors duration-100 hover:bg-[var(--chat-bg)]"
       onClick={() => showUserCard(friend.userID)}
     >
-      <OIMAvatar size={48} src={friend.faceURL} text={friend.remark || friend.nickname} />
+      <OIMAvatar size={40} src={friend.faceURL} text={friend.remark || friend.nickname} />
-      <div className="ml-3 truncate text-sm">{friend.remark || friend.nickname}</div>
+      <div className="ml-3 min-w-0 flex-1">
+        <div className="truncate text-base font-medium text-[var(--base-black)]">
+          {friend.remark || friend.nickname}
+        </div>
+      </div>
     </div>
   );
 };

pc-client/src/styles/global.scss

@@ -1,22 +1,28 @@
 :root {
   --full-height: 100%;
+  --primary: #3b87f5;
+  --primary-active: #ebf3fe;
+  --primary-pressed: #2e75e0;
+  --avatar-gray: #8593a8;
+  --page-bg: #ffffff;
+  --chat-bg: #f5f6f8;
+  --search-bg: #f2f3f5;
   --chat-bubble: #ffffff;
   --chat-bubble-sender: #d6e7fc;
   --base-black: #1d2129;
-  --primary: #3b87f5;
-  --primary-active: #ebf3fe;
-  --top-search-bar: #3b87f5;
   --sub-text: #86909c;
-  --gap-text: #eeeeee;
-  --search-bg: #f2f3f5;
-  --chat-bg: #f5f6f8;
   --warn-text: #f53f3f;
+  --gap-text: #eeeeee;
+  --banner-bg: #3a3f47;
+  --mask-bg: #000000;
+  --success: #00b42a;
+  --warning: #ff7d00;
+  --top-search-bar: #3b87f5;
   --moment-text: #6085b1;
   --searchbar-height: 2.5rem;
-  --avatar-gray: #8593a8;
-  --search-bg: #f2f3f5;
-  --chat-bg: #f5f6f8;
   --call-wait-bg: #f2f8ff;
+  --radius-control: 8px;
+  --radius-modal: 12px;
 }
 
 @media only screen and (max-width: 600px) {
@@ -28,8 +34,7 @@
 html {
   height: var(--full-height);
 
-  font-family: "Noto Sans SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
+  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
-    "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 
   div {
     color: var(--base-black);
@@ -44,22 +49,18 @@ body,
 }
 
 ::-webkit-scrollbar {
-  width: 6px;
+  width: 8px;
   background-color: transparent;
 }
 ::-webkit-scrollbar-track {
   background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  border-radius: 3px;
+  border-radius: 4px;
-  background: #b7bdcb;
+  background: rgba(0, 0, 0, 0.15);
-  box-shadow: 4px 4px 15px rgba(112, 124, 151, 0.05),
-    2px 2px 10px rgba(112, 124, 151, 0.1), 1px 1px 50px rgba(112, 124, 151, 0.15);
 }
 ::-webkit-scrollbar-thumb:hover {
-  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.25);
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background-color: rgba(245, 238, 238, 1);
 }
 
 #chat-list {