- {node.traffic_limit !== 0 && isOnline && stats && (
-
-
-
- )}
-
-
-
↑ {stats ? formatBytes(stats.network.totalUp) : "N/A"}
-
- ↓ {stats ? formatBytes(stats.network.totalDown) : "N/A"}
-
+ {selectTrafficProgressStyle === "linear" && isOnline && stats ? (
+
+
+
+ {stats
+ ? `↑ ${formatBytes(stats.network.totalUp)} ↓ ${formatBytes(
+ stats.network.totalDown
+ )}`
+ : "N/A"}
+
{node.traffic_limit !== 0 && isOnline && stats && (
-
- {formatTrafficLimit(
- node.traffic_limit,
- node.traffic_limit_type
- )}
-
+ <>
+
+
+
+ {node.traffic_limit !== 0
+ ? `${trafficPercentage.toFixed(0)}%`
+ : "OFF"}
+
+
+
+ {formatTrafficLimit(
+ node.traffic_limit,
+ node.traffic_limit_type
+ )}
+
+
)}
-
+ ) : (
+
+ {node.traffic_limit !== 0 && isOnline && stats && (
+
+
+
+ )}
+
+
+
+ ↑ {stats ? formatBytes(stats.network.totalUp) : "N/A"}
+
+
+ ↓ {stats ? formatBytes(stats.network.totalDown) : "N/A"}
+
+
+ {node.traffic_limit !== 0 && isOnline && stats && (
+
+ {formatTrafficLimit(
+ node.traffic_limit,
+ node.traffic_limit_type
+ )}
+
+ )}
+
+
+ )}
{load.split("|").map((item, index) => (
diff --git a/src/config/default.ts b/src/config/default.ts
index c76f8e1..409be10 100644
--- a/src/config/default.ts
+++ b/src/config/default.ts
@@ -24,6 +24,7 @@ export interface ConfigOptions {
enableConnectBreaks?: boolean; // 是否启用连接断点
pingChartMaxPoints?: number; // 延迟图表最大点数
enableSwap?: boolean; // 是否启用SWAP显示
+ selectTrafficProgressStyle?: "circular" | "linear"; // 流量进度条样式
enableListItemProgressBar?: boolean; // 是否启用列表视图进度条
}
@@ -54,5 +55,6 @@ export const DEFAULT_CONFIG: ConfigOptions = {
enableConnectBreaks: false,
pingChartMaxPoints: 0,
enableSwap: true,
+ selectTrafficProgressStyle: "linear",
enableListItemProgressBar: true,
};
diff --git a/src/config/hooks.ts b/src/config/hooks.ts
index 9a6a76a..3492d0b 100644
--- a/src/config/hooks.ts
+++ b/src/config/hooks.ts
@@ -5,10 +5,11 @@ import { DEFAULT_CONFIG } from "./default";
/**
* 使用全局配置 Hook，用于获取当前应用配置
- * @returns 配置对象
+ * @returns 配置对象（合并了默认配置，确保所有属性都有值）
*/
-export function useAppConfig(): ConfigOptions {
- return useContext(ConfigContext);
+export function useAppConfig(): Required {
+ const config = useContext(ConfigContext);
+ return { ...DEFAULT_CONFIG, ...config } as Required;
}
/**
@@ -26,3 +27,8 @@ export function useConfigItem(
// 导出配置类型
export type { ConfigOptions } from "./default";
+
+/**
+ * 应用配置类型
+ */
+export type AppConfig = Required;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index aa1101b..6a34464 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -43,6 +43,7 @@ const HomePage: React.FC = ({
enableStatsBar,
enableSwap,
enableListItemProgressBar,
+ selectTrafficProgressStyle,
} = useAppConfig();
const [displayOptions, setDisplayOptions] = useState({
time: true,
@@ -184,6 +185,7 @@ const HomePage: React.FC = ({
key={node.uuid}
node={node}
enableSwap={enableSwap}
+ selectTrafficProgressStyle={selectTrafficProgressStyle}
/>
) : (
= ({
node={node}
enableSwap={enableSwap}
enableListItemProgressBar={enableListItemProgressBar}
+ selectTrafficProgressStyle={selectTrafficProgressStyle}
/>
)
)}
diff --git a/src/pages/instance/index.tsx b/src/pages/instance/index.tsx
index bca3944..8c8d366 100644
--- a/src/pages/instance/index.tsx
+++ b/src/pages/instance/index.tsx
@@ -10,7 +10,7 @@ const LoadCharts = lazy(() => import("./LoadCharts"));
const PingChart = lazy(() => import("./PingChart"));
import Loading from "@/components/loading";
import Flag from "@/components/sections/Flag";
-import { useConfigItem } from "@/config";
+import { useAppConfig } from "@/config";
import { useIsMobile } from "@/hooks/useMobile";
const InstancePage = () => {
@@ -27,8 +27,7 @@ const InstancePage = () => {
const [chartType, setChartType] = useState<"load" | "ping">("load");
const [loadHours, setLoadHours] = useState(0);
const [pingHours, setPingHours] = useState(1); // 默认1小时
- const enableInstanceDetail = useConfigItem("enableInstanceDetail");
- const enablePingChart = useConfigItem("enablePingChart");
+ const { enableInstanceDetail, enablePingChart } = useAppConfig();
const isMobile = useIsMobile();
const maxRecordPreserveTime = publicSettings?.record_preserve_time || 0; // 默认0表示关闭