fix(pc-client): PC 端统一手机端设计 Token 并补提交 src/components（B-52 视觉阻塞修复）

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

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

@@ -13,7 +13,7 @@ import ConversationItemComp from "./ConversationItem";
 // 断网时顶部的深色提示横条
 const OfflineBar = () => (
   <div>
-    <div className="flex h-9 items-center bg-[#4a4a4a] px-3 text-xs text-white">
+    <div className="flex h-9 items-center bg-[#3a3f47] px-3 text-xs text-white">
       <svg
         width="14"
         height="14"
@@ -153,7 +153,7 @@ const ConversationSider = () => {
         <div className="pb-3 text-base font-bold">{t("placeholder.chat")}</div>
         <Input
           className="app-no-drag mb-2 rounded-md border-none !bg-[#F3F5F7]"
-          prefix={<SearchOutlined className="text-[#8e9ab0]" rev={undefined} />}
+          prefix={<SearchOutlined className="text-[var(--sub-text)]" rev={undefined} />}
           placeholder={t("placeholder.search")}
           allowClear
           value={keyword}

pc-client/src/pages/chat/queryChat/ChatFooter/index.tsx

@@ -141,7 +141,7 @@ const ChatFooter: ForwardRefRenderFunction<unknown, unknown> = (_, ref) => {
   };
 
   const toolIconClass =
-    "cursor-pointer text-xl text-[#8e9ab0] hover:text-[#515E70]";
+    "cursor-pointer text-xl text-[var(--sub-text)] hover:text-[#515E70]";
 
   return (
     <footer className="relative bg-white">
@@ -186,7 +186,7 @@ const ChatFooter: ForwardRefRenderFunction<unknown, unknown> = (_, ref) => {
         {/* 录音条 */}
         {recording && (
           <div className="mx-4 mt-2 flex items-center rounded-md bg-[#F3F5F7] px-3 py-2">
-            <span className="mr-2 h-2 w-2 animate-pulse rounded-full bg-[#F4493C]" />
+            <span className="mr-2 h-2 w-2 animate-pulse rounded-full bg-[var(--warn-text)]" />
             <span className="flex-1 text-sm">
               {t("placeholder.microphone")} {seconds}″
             </span>

pc-client/src/pages/chat/queryChat/MessageItem/FileMessageRender.tsx

@@ -17,14 +17,14 @@ const FileIcon = () => (
     <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
       <path
         d="M6 2.5h8L19 7.5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-17a1 1 0 0 1 1-1Z"
-        stroke="#0073D9"
+        stroke="var(--primary)"
         strokeWidth="1.6"
         fill="#fff"
       />
-      <path d="M13.5 2.5v5.5H19" stroke="#0073D9" strokeWidth="1.6" fill="none" />
+      <path d="M13.5 2.5v5.5H19" stroke="var(--primary)" strokeWidth="1.6" fill="none" />
       <path
         d="M8.5 12h7M8.5 15.5h7"
-        stroke="#0073D9"
+        stroke="var(--primary)"
         strokeWidth="1.4"
         strokeLinecap="round"
       />

pc-client/src/pages/chat/queryChat/MessageItem/SoundMessageRender.tsx

@@ -88,7 +88,7 @@ const SoundMessageRender: FC<IMessageItemProps> = ({ message, isSender }) => {
         <span className={clsx(isSender ? "mr-2" : "ml-2")}>{duration}″</span>
       </div>
       {!isSender && !played && (
-        <span className="ml-2 h-2 w-2 shrink-0 rounded-full bg-[#F4493C]" />
+        <span className="ml-2 h-2 w-2 shrink-0 rounded-full bg-[var(--warn-text)]" />
       )}
     </div>
   );

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

@@ -36,7 +36,7 @@ const AlphabetIndex: ForwardRefRenderFunction<
       {indexList.map((letter, idx) => (
         <span
           className={clsx("my-0.5 cursor-pointer text-xs text-[var(--sub-text)]", {
-            "!text-[#0073D9]": currentAlphabet === letter,
+            "!text-[var(--primary)]": currentAlphabet === letter,
           })}
           key={letter}
           onClick={() => jumpToLetter(idx, letter)}

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

@@ -90,10 +90,10 @@ export const MyFriends = () => {
             groupCounts={sectionData.groupCounts}
             groupContent={(index) => (
               <div>
-                <div className="bg-white px-3.5 pb-1 text-[13px] text-[#8E9AB0FF]">
+                <div className="bg-white px-3.5 pb-1 text-[13px] text-[var(--sub-text)]">
                   {sectionData.indexList[index]}
                 </div>
-                <div className="mx-3.5 mb-3 h-px w-full bg-[#E8EAEFFF] bg-white" />
+                <div className="mx-3.5 mb-3 h-px w-full bg-[var(--gap-text)] bg-white" />
               </div>
             )}
             itemContent={(index) => {

pc-client/src/pages/contact/myGroups/GroupListItem.tsx

@@ -17,7 +17,7 @@ const GroupListItem = ({
       <OIMAvatar size={48} src={source?.faceURL} isgroup />
       <div className="ml-3">
         <p className="text-sm">{source.groupName}</p>
-        <p className="text-xs text-[#8E9AB0FF]">{source.memberCount}</p>
+        <p className="text-xs text-[var(--sub-text)]">{source.memberCount}</p>
       </div>
     </div>
   );