From b07ed2dbf5d4b5f11ab345dbd2afec0650c9a583 Mon Sep 17 00:00:00 2001
From: wonfen <eiwonfen@gmail.com>
Date: Sat, 22 Mar 2025 04:26:28 +0800
Subject: [PATCH] fix: theme color on connection detail card fix: home page
 clash info card proxy address

---
 UPDATELOG.md                                  |  4 +++
 .../connection/connection-detail.tsx          | 10 +++++---
 src/components/home/clash-info-card.tsx       | 25 +++++++++++--------
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/UPDATELOG.md b/UPDATELOG.md
index 28abb607..8f7bdd82 100644
--- a/UPDATELOG.md
+++ b/UPDATELOG.md
@@ -12,8 +12,12 @@
    - 修复 首页启用轻量模式导致 ClashVergeRev 从托盘退出。
    - 增加 首页文本过长自动截断
    - 修复 系统代理标识判断不准的问题
+   - 修复 系统代理地址错误的问题
 2. **系统**
    - 修复 MacOS 无法使用快捷键粘贴/选择/复制订阅地址。
+   - 修复 代理端口设置同步问题。
+3. **界面**
+   - 修复 连接详情卡没有跟随主题色
 
 ---
 
diff --git a/src/components/connection/connection-detail.tsx b/src/components/connection/connection-detail.tsx
index 515fd90c..172c0f57 100644
--- a/src/components/connection/connection-detail.tsx
+++ b/src/components/connection/connection-detail.tsx
@@ -1,7 +1,7 @@
 import dayjs from "dayjs";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useLockFn } from "ahooks";
-import { Box, Button, Snackbar } from "@mui/material";
+import { Box, Button, Snackbar, useTheme } from "@mui/material";
 import { deleteConnection } from "@/services/api";
 import parseTraffic from "@/utils/parse-traffic";
 import { t } from "i18next";
@@ -14,6 +14,7 @@ export const ConnectionDetail = forwardRef<ConnectionDetailRef>(
   (props, ref) => {
     const [open, setOpen] = useState(false);
     const [detail, setDetail] = useState<IConnectionsItem>(null!);
+    const theme = useTheme();
 
     useImperativeHandle(ref, () => ({
       open: (detail: IConnectionsItem) => {
@@ -35,6 +36,8 @@ export const ConnectionDetail = forwardRef<ConnectionDetailRef>(
             maxWidth: "520px",
             maxHeight: "480px",
             overflowY: "auto",
+            backgroundColor: theme.palette.background.paper,
+            color: theme.palette.text.primary,
           },
         }}
         message={
@@ -54,6 +57,7 @@ interface InnerProps {
 
 const InnerConnectionDetail = ({ data, onClose }: InnerProps) => {
   const { metadata, rulePayload } = data;
+  const theme = useTheme();
   const chains = [...data.chains].reverse().join(" / ");
   const rule = rulePayload ? `${data.rule}(${rulePayload})` : data.rule;
   const host = metadata.host
@@ -99,11 +103,11 @@ const InnerConnectionDetail = ({ data, onClose }: InnerProps) => {
   const onDelete = useLockFn(async () => deleteConnection(data.id));
 
   return (
-    <Box sx={{ userSelect: "text" }}>
+    <Box sx={{ userSelect: "text", color: theme.palette.text.secondary }}>
       {information.map((each) => (
         <div key={each.label}>
           <b>{each.label}</b>
-          <span style={{ wordBreak: "break-all" }}>: {each.value}</span>
+          <span style={{ wordBreak: "break-all", color: theme.palette.text.primary }}>: {each.value}</span>
         </div>
       ))}
 
diff --git a/src/components/home/clash-info-card.tsx b/src/components/home/clash-info-card.tsx
index f8ef7acb..28f50bf4 100644
--- a/src/components/home/clash-info-card.tsx
+++ b/src/components/home/clash-info-card.tsx
@@ -6,8 +6,8 @@ import { useClash } from "@/hooks/use-clash";
 import { EnhancedCard } from "./enhanced-card";
 import useSWR from "swr";
 import { getRules } from "@/services/api";
-import { getAppUptime } from "@/services/cmds";
-import { useMemo } from "react";
+import { getAppUptime, getSystemProxy } from "@/services/cmds";
+import { useMemo, useState, useEffect } from "react";
 
 // 将毫秒转换为时:分:秒格式的函数
 const formatUptime = (uptimeMs: number) => {
@@ -21,6 +21,8 @@ export const ClashInfoCard = () => {
   const { t } = useTranslation();
   const { clashInfo } = useClashInfo();
   const { version: clashVersion } = useClash();
+  const [sysproxy, setSysproxy] = useState<{ server: string; enable: boolean; bypass: string } | null>(null);
+  const [rules, setRules] = useState<any[]>([]);
 
   // 使用SWR获取应用运行时间，降低更新频率
   const { data: uptimeMs = 0 } = useSWR(
@@ -33,15 +35,18 @@ export const ClashInfoCard = () => {
     },
   );
 
+  // 在组件加载时获取系统代理信息和规则数据
+  useEffect(() => {
+    // 获取系统代理信息
+    getSystemProxy().then(setSysproxy);
+    
+    // 获取规则数据
+    getRules().then(setRules).catch(() => setRules([]));
+  }, []);
+
   // 使用useMemo缓存格式化后的uptime，避免频繁计算
   const uptime = useMemo(() => formatUptime(uptimeMs), [uptimeMs]);
 
-  // 获取规则数据，只在组件加载时获取一次
-  const { data: rules = [] } = useSWR("getRules", getRules, {
-    revalidateOnFocus: false,
-    errorRetryCount: 2,
-  });
-
   // 使用备忘录组件内容，减少重新渲染
   const cardContent = useMemo(() => {
     if (!clashInfo) return null;
@@ -62,7 +67,7 @@ export const ClashInfoCard = () => {
             {t("System Proxy Address")}
           </Typography>
           <Typography variant="body2" fontWeight="medium">
-            {clashInfo.server || "-"}
+            {sysproxy?.server || "-"}
           </Typography>
         </Stack>
         <Divider />
@@ -94,7 +99,7 @@ export const ClashInfoCard = () => {
         </Stack>
       </Stack>
     );
-  }, [clashInfo, clashVersion, t, uptime, rules.length]);
+  }, [clashInfo, clashVersion, t, uptime, rules.length, sysproxy]);
 
   return (
     <EnhancedCard