feat(theme): 新增主题可配置项，优化代码逻辑和样式

- 在 `komari-theme.json` 中添加了新的配置选项 - 支持自定义标题栏、内容区、实例页面和通用UI元素 - 优化部分组件调用逻辑 - 优化页面样式
2025-10-19 03:49:22 +08:00 · 2025-08-15 19:27:55 +08:00
parent e74611b947
commit 1c1f739043
21 changed files with 922 additions and 766 deletions
--- a/README.md
+++ b/README.md
@@ -13,15 +13,6 @@
 > [!NOTE]
 > 本主题在 Gemini 的辅助下完成，融合了官方主题的部分设计与个人审美偏好，旨在提供一种简洁、美观的磨砂玻璃质感界面

-> [!WARNING]
->
-> **当前版本注意事项**
->
-> - [ ] `Instance` 页面尚在完善中，目前仅基于官方样式进行了微调
-> - [x] 延迟信息图表的有较大问题仍需优化（优化完成）
->
-> 如果您对以上页面的功能和展示有较高要求，建议暂时选用 [社区中的其他主题](https://komari-document.pages.dev/community/theme)。
-
 ## 🚀 快速开始

 ### 安装与启用
@@ -35,10 +26,12 @@

 #### Komari v1.0.5 及以上版本

-如果 Komari 版本为 v1.0.5 或更高版本，可直接在 `Komari 后台 > PurCarte设置` 中配置背景图片等主题选项，无需手动添加自定义代码
+如果 Komari 版本为 v1.0.5 或更高版本，可直接在 `Komari 后台 > PurCarte设置` 中配置背景图片等主题选项，无需手动添加自定义代码，如已添加自定义代码需要删去背景相关 style 避免干扰

 #### 旧版本配置方法

+<details>
+
 对于旧版本，请在 `Komari 后台 > 设置 > 站点 > 自定义 Body` 处添加以下代码并保存：

 ```html
@@ -57,6 +50,8 @@
 </style>
 ```

+</details>
+
 ## 🛠️ 本地开发

 1.  **克隆仓库**
--- a/komari-theme.json
+++ b/komari-theme.json
@@ -2,7 +2,7 @@
    "name": "Komari Theme PurCart",
    "short": "PurCarte",
    "description": "A frosted glass theme for Komari",
-    "version": "0.1.3",
+    "version": "1.0.0",
    "author": "Montia & Gemini",
    "url": "https://github.com/Montia37/Komari-theme-purcarte",
    "preview": "preview.png",
@@ -10,16 +10,135 @@
        "type": "managed",
        "data": [
            {
-                "name": "背景",
+                "name": "样式调整",
                "type": "title"
            },
            {
                "key": "backgroundImage",
                "name": "背景图片链接",
                "type": "string",
-                "required": false,
                "default": "/assets/Moonlit-Scenery.webp",
                "help": "目前仅支持单张背景图片（eg: https://test.com/1.png）"
+            },
+            {
+                "key": "tagDefaultColorList",
+                "name": "标签默认颜色列表",
+                "type": "string",
+                "default": "ruby,gray,gold,bronze,brown,yellow,amber,orange,tomato,red,crimson,pink,plum,purple,violet,iris,indigo,blue,cyan,teal,jade,green,grass,lime,mint,sky",
+                "help": "标签默认颜色列表，用于修改默认解析颜色顺序以及使用的颜色池，逗号分隔（可用的颜色列表请参考：https://www.radix-ui.com/themes/docs/theme/color，改完没有生效则说明填写有误）"
+            },
+            {
+                "name": "标题栏设置",
+                "type": "title"
+            },
+            {
+                "key": "enableLogo",
+                "name": "启用标题栏左侧 Logo",
+                "type": "switch",
+                "default": false,
+                "help": "启用后默认在标题栏左侧显示 Logo"
+            },
+            {
+                "key": "logoUrl",
+                "name": "Logo 图片链接",
+                "type": "string",
+                "required": false,
+                "default": "/assets/logo.png",
+                "help": "Logo 图片链接（eg: https://test.com/logo.png）"
+            },
+            {
+                "key": "enableTitle",
+                "name": "启用标题栏标题",
+                "type": "switch",
+                "default": true,
+                "help": "启用后默认在顶栏左侧显示标题"
+            },
+            {
+                "key": "titleText",
+                "name": "标题栏标题文本",
+                "type": "string",
+                "default": "",
+                "help": "标题栏左侧显示的文本（留空则使用站点标题）"
+            },
+            {
+                "key": "enableSearchButton",
+                "name": "启用标题栏按钮",
+                "type": "switch",
+                "default": true,
+                "help": "启用后默认在标题栏右侧显示搜索按钮"
+            },
+            {
+                "key": "selectedDefaultView",
+                "name": "默认展示视图",
+                "type": "select",
+                "options": [
+                    "grid",
+                    "table"
+                ],
+                "default": "grid",
+                "help": "设置默认展示视图为网格或表格（优先使用 localStorage）"
+            },
+            {
+                "key": "selectedDefaultAppearance",
+                "name": "默认外观",
+                "type": "select",
+                "options": [
+                    "light",
+                    "dark",
+                    "system"
+                ],
+                "default": "system",
+                "help": "设置默认外观为浅色、深色或系统主题（优先使用 localStorage）"
+            },
+            {
+                "key": "enableAdminButton",
+                "name": "启用管理按钮",
+                "type": "switch",
+                "default": true,
+                "help": "启用后默认在标题栏右侧显示管理按钮"
+            },
+            {
+                "name": "内容设置",
+                "type": "title"
+            },
+            {
+                "key": "enableStatsBar",
+                "name": "启用统计栏",
+                "type": "switch",
+                "default": true,
+                "help": "启用后默认显示统计栏"
+            },
+            {
+                "key": "enableGroupedBar",
+                "name": "启用分组栏",
+                "type": "switch",
+                "default": true,
+                "help": "启用后默认显示分组栏"
+            },
+            {
+                "name": "Instance 设置",
+                "type": "title"
+            },
+            {
+                "key": "enableInstanceDetail",
+                "name": "启用 Instance 详情信息",
+                "type": "switch",
+                "default": true,
+                "help": "启用后默认显示 Instance 详情"
+            },
+            {
+                "key": "enablePingChart",
+                "name": "启用延迟图表",
+                "type": "switch",
+                "default": true,
+                "help": "启用后默认显示延迟图表"
+            },
+            {
+                "key": "pingChatrtMaxPoints",
+                "name": "延迟图表最大渲染点数",
+                "type": "number",
+                "default": 0,
+                "help": "设置延迟图表的最大渲染点数来优化图表渲染，0 表示不限制，推荐值为 2000 或更小的值"
            }
        ]
    }
--- a/src/components/sections/Background.ts
+++ b/src/components/sections/Background.ts
@@ -1,39 +0,0 @@
-import { useEffect, useMemo } from "react";
-import { BACKGROUND } from "@/config/default";
-import type { PublicInfo } from "@/types/node.d";
-
-/**
- * 动态效果不佳，暂时仅使用静态背景
- */
-interface ThemeSettings {
-  backgroundImage?: string; // 背景图片URL
-}
-
-interface BackgroundProps {
-  publicSettings: PublicInfo;
-}
-
-function Background({ publicSettings }: BackgroundProps) {
-  const theme = (publicSettings?.theme_settings as ThemeSettings) || {};
-
-  // 使用 useMemo 缓存背景图片列表，避免每次渲染时重新计算
-  const imageUrl = useMemo(() => {
-    return theme.backgroundImage
-      ? theme.backgroundImage
-      : BACKGROUND.backgroundImage;
-  }, [theme.backgroundImage]);
-
-  // 背景切换逻辑
-  useEffect(() => {
-    // 当当前图片URL变化时，更新CSS变量
-    document.body.style.setProperty(
-      "--body-background-url",
-      `url(${imageUrl})`
-    );
-  }, [imageUrl]);
-
-  // 此组件不渲染任何可见内容
-  return null;
-}
-
-export default Background;
--- a/src/components/sections/Header.tsx
+++ b/src/components/sections/Header.tsx
@@ -8,16 +8,16 @@ import {
  Sun,
  CircleUserIcon,
 } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { useIsMobile } from "@/hooks/useMobile";
+import { useConfigItem } from "@/config";

 interface HeaderProps {
-  viewMode: "card" | "list";
-  setViewMode: (mode: "card" | "list") => void;
+  viewMode: "grid" | "table";
+  setViewMode: (mode: "grid" | "table") => void;
  theme: string;
  toggleTheme: () => void;
-  sitename: string;
  searchTerm: string;
  setSearchTerm: (term: string) => void;
 }
@@ -27,7 +27,6 @@ export const Header = ({
  setViewMode,
  theme,
  toggleTheme,
-  sitename,
  searchTerm,
  setSearchTerm,
 }: HeaderProps) => {
@@ -35,13 +34,30 @@ export const Header = ({
  const location = useLocation();
  const isInstancePage = location.pathname.startsWith("/instance");
  const isMobile = useIsMobile();
+  const enableTitle = useConfigItem("enableTitle");
+  const sitename = useConfigItem("titleText");
+  const enableLogo = useConfigItem("enableLogo");
+  const logoUrl = useConfigItem("logoUrl");
+  const enableSearchButton = useConfigItem("enableSearchButton");
+  const enableAdminButton = useConfigItem("enableAdminButton");
+
+  useEffect(() => {
+    if (sitename) {
+      document.title = sitename;
+    }
+  }, [sitename]);

  return (
    <header className="bg-background/60 backdrop-blur-[10px] border-b border-border/60 sticky top-0 flex items-center justify-center shadow-sm z-10">
      <div className="w-[90%] max-w-screen-2xl px-4 py-2 flex items-center justify-between">
        <div className="flex items-center text-shadow-lg text-accent-foreground">
-          <a href="/" className="text-2xl font-bold">
-            {sitename}
+          <a href="/" className="flex items-center gap-2 text-2xl font-bold">
+            {enableLogo && logoUrl && (
+              <img src={logoUrl} alt="logo" className="h-8" />
+            )}
+            {enableTitle && (
+              <span className="hidden md:inline">{sitename}</span>
+            )}
          </a>
        </div>
        <div className="flex items-center space-x-2">
@@ -81,19 +97,21 @@ export const Header = ({
                  />
                </div>
              )}
+              {enableSearchButton && (
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setIsSearchOpen(!isSearchOpen)}>
                  <Search className="size-5 text-primary" />
                </Button>
+              )}
              <Button
                variant="ghost"
                size="icon"
                onClick={() =>
-                  setViewMode(viewMode === "card" ? "list" : "card")
+                  setViewMode(viewMode === "grid" ? "table" : "grid")
                }>
-                {viewMode === "card" ? (
+                {viewMode === "grid" ? (
                  <Table2 className="size-5 text-primary" />
                ) : (
                  <Grid3X3 className="size-5 text-primary" />
@@ -108,11 +126,13 @@ export const Header = ({
              <Moon className="size-5 text-primary" />
            )}
          </Button>
+          {enableAdminButton && (
            <a href="/admin" target="_blank" rel="noopener noreferrer">
              <Button variant="ghost" size="icon">
                <CircleUserIcon className="size-5 text-primary" />
              </Button>
            </a>
+          )}
        </div>
      </div>
    </header>
--- a/src/components/sections/NodeCard.tsx
+++ b/src/components/sections/NodeCard.tsx
@@ -6,25 +6,12 @@ import { CpuIcon, MemoryStickIcon, HardDriveIcon } from "lucide-react";
 import Flag from "./Flag";
 import { Tag } from "../ui/tag";
 import { useNodeCommons } from "@/hooks/useNodeCommons";
+import { ProgressBar } from "../ui/progress-bar";

 interface NodeCardProps {
  node: NodeWithStatus;
 }

-const ProgressBar = ({
-  value,
-  className,
-}: {
-  value: number;
-  className?: string;
-}) => (
-  <div className="w-full bg-gray-200 rounded-full h-3 dark:bg-gray-700">
-    <div
-      className={`h-3 rounded-full ${className}`}
-      style={{ width: `${value}%` }}></div>
-  </div>
-);
-
 export const NodeCard = ({ node }: NodeCardProps) => {
  const {
    stats,
--- a/src/components/ui/progress-bar.tsx
+++ b/src/components/ui/progress-bar.tsx
@@ -0,0 +1,13 @@
+export const ProgressBar = ({
+  value,
+  className,
+}: {
+  value: number;
+  className?: string;
+}) => (
+  <div className="w-full bg-gray-200 rounded-full h-3 dark:bg-gray-700">
+    <div
+      className={`h-3 rounded-full transition-all duration-500 ${className}`}
+      style={{ width: `${value}%` }}></div>
+  </div>
+);
--- a/src/components/ui/tag.tsx
+++ b/src/components/ui/tag.tsx
@@ -1,12 +1,14 @@
 import { Badge } from "@radix-ui/themes";
 import React from "react";
 import { cn } from "@/utils";
+import { useConfigItem } from "@/config";

 interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
  tags: string[];
 }

-const colors: Array<
+// 定义颜色类型
+type ColorType =
  | "ruby"
  | "gray"
  | "gold"
@@ -32,65 +34,61 @@ const colors: Array<
  | "grass"
  | "lime"
  | "mint"
-  | "sky"
-> = [
-  "ruby",
-  "gray",
-  "gold",
-  "bronze",
-  "brown",
-  "yellow",
-  "amber",
-  "orange",
-  "tomato",
-  "red",
-  "crimson",
-  "pink",
-  "plum",
-  "purple",
-  "violet",
-  "iris",
-  "indigo",
-  "blue",
-  "cyan",
-  "teal",
-  "jade",
-  "green",
-  "grass",
-  "lime",
-  "mint",
-  "sky",
-];
+  | "sky";

+// 默认颜色列表，将在组件内部使用
+const defaultColorList: ColorType[] = [
+  "blue",
+  "red",
+  "green",
+  "yellow",
+  "purple",
+  "cyan",
+  "orange",
+  "pink",
+];
 // 解析带颜色的标签
-const parseTagWithColor = (tag: string) => {
+const parseTagWithColor = (tag: string, availableColors: ColorType[]) => {
  const colorMatch = tag.match(/<(\w+)>$/);
  if (colorMatch) {
    const color = colorMatch[1].toLowerCase();
    const text = tag.replace(/<\w+>$/, "");
    // 检查颜色是否在支持的颜色列表中
-    if (colors.includes(color as any)) {
-      return { text, color: color as (typeof colors)[number] };
+    if (availableColors.includes(color as ColorType)) {
+      return { text, color: color as ColorType };
    }
  }
-  return { text: tag, color: null };
+  return { text: tag, color: null as unknown as ColorType | null };
 };

 const Tag = React.forwardRef<HTMLDivElement, TagProps>(
  ({ className, tags, ...props }, ref) => {
+    // 在组件内部使用 useConfigItem 钩子
+    const tagDefaultColorList = useConfigItem("tagDefaultColorList");
+
+    // 解析配置的颜色列表
+    const colorList = React.useMemo(() => {
+      if (!tagDefaultColorList) {
+        return defaultColorList;
+      }
+      return tagDefaultColorList
+        .split(",")
+        .map((color: string) => color.trim()) as ColorType[];
+    }, [tagDefaultColorList]);
+
    return (
      <div
        ref={ref}
        className={cn("flex flex-wrap gap-1", className)}
        {...props}>
        {tags.map((tag, index) => {
-          const { text, color } = parseTagWithColor(tag);
-          const badgeColor = color || colors[index % colors.length];
+          const { text, color } = parseTagWithColor(tag, colorList);
+          const badgeColor = color || colorList[index % colorList.length];

          return (
            <Badge
              key={index}
-              color={badgeColor}
+              color={badgeColor as ColorType}
              variant="soft"
              className="text-sm">
              <label className="text-xs">{text}</label>
--- a/src/config/ConfigContext.ts
+++ b/src/config/ConfigContext.ts
@@ -0,0 +1,6 @@
+import { createContext } from "react";
+import type { ConfigOptions } from "./default";
+import { DEFAULT_CONFIG } from "./default";
+
+// 创建配置上下文
+export const ConfigContext = createContext<ConfigOptions>(DEFAULT_CONFIG);
--- a/src/config/ConfigProvider.tsx
+++ b/src/config/ConfigProvider.tsx
@@ -0,0 +1,73 @@
+import { type ReactNode, useEffect, useMemo } from "react";
+import type { PublicInfo } from "@/types/node.d";
+import { ConfigContext } from "./ConfigContext";
+import { DEFAULT_CONFIG, type ConfigOptions } from "./default";
+
+// 配置提供者属性类型
+interface ConfigProviderProps {
+  publicSettings: PublicInfo | null; // 公共设置，可能为 null
+  children: ReactNode;
+}
+
+/**
+ * 配置提供者组件，用于将配置传递给子组件
+ */
+export function ConfigProvider({
+  publicSettings,
+  children,
+}: ConfigProviderProps) {
+  const theme = useMemo(() => {
+    return (publicSettings?.theme_settings as ConfigOptions) || {};
+  }, [publicSettings?.theme_settings]);
+
+  // 使用 useMemo 缓存背景图片，避免每次渲染时重新计算
+  const backgroundImage = useMemo(() => {
+    return theme.backgroundImage || "";
+  }, [theme.backgroundImage]);
+
+  // 背景切换逻辑
+  useEffect(() => {
+    if (backgroundImage) {
+      document.body.style.setProperty(
+        "--body-background-url",
+        `url(${backgroundImage})`
+      );
+    } else {
+      document.body.style.removeProperty("--body-background-url");
+    }
+  }, [backgroundImage]);
+
+  const config: ConfigOptions = useMemo(
+    () => ({
+      tagDefaultColorList:
+        theme.tagDefaultColorList || DEFAULT_CONFIG.tagDefaultColorList,
+      enableLogo: theme.enableLogo ?? DEFAULT_CONFIG.enableLogo,
+      logoUrl: theme.logoUrl || DEFAULT_CONFIG.logoUrl,
+      enableTitle: theme.enableTitle ?? DEFAULT_CONFIG.enableTitle,
+      titleText: theme.titleText || DEFAULT_CONFIG.titleText,
+      enableSearchButton:
+        theme.enableSearchButton ?? DEFAULT_CONFIG.enableSearchButton,
+      selectedDefaultView:
+        theme.selectedDefaultView || DEFAULT_CONFIG.selectedDefaultView,
+      selectedDefaultAppearance:
+        theme.selectedDefaultAppearance ||
+        DEFAULT_CONFIG.selectedDefaultAppearance,
+      enableAdminButton:
+        theme.enableAdminButton ?? DEFAULT_CONFIG.enableAdminButton,
+      enableStatsBar: theme.enableStatsBar ?? DEFAULT_CONFIG.enableStatsBar,
+      enableGroupedBar:
+        theme.enableGroupedBar ?? DEFAULT_CONFIG.enableGroupedBar,
+      enableInstanceDetail:
+        theme.enableInstanceDetail ?? DEFAULT_CONFIG.enableInstanceDetail,
+      enablePingChart: theme.enablePingChart ?? DEFAULT_CONFIG.enablePingChart,
+      pingChartMaxPoints:
+        theme.pingChartMaxPoints || DEFAULT_CONFIG.pingChartMaxPoints,
+      backgroundImage,
+    }),
+    [theme, backgroundImage]
+  );
+
+  return (
+    <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>
+  );
+}
--- a/src/config/default.ts
+++ b/src/config/default.ts
@@ -1,5 +1,38 @@
-export const BACKGROUND = {
-  backgroundImage: "",
-  //   switchTime: 10, // 10 seconds
-  //   transition: "background-image 0.8s ease-in-out", // CSS transition for background change
+// 配置类型定义
+export interface ConfigOptions {
+  backgroundImage?: string; // 背景图片URL
+  tagDefaultColorList?: string; // 标签默认颜色列表
+  enableLogo?: boolean; // 是否启用Logo
+  logoUrl?: string; // Logo图片URL
+  enableTitle?: boolean; // 是否启用标题
+  titleText?: string; // 标题文本
+  enableSearchButton?: boolean; // 是否启用搜索按钮
+  selectedDefaultView?: "grid" | "table"; // 默认视图模式
+  selectedDefaultAppearance?: "light" | "dark" | "system"; // 默认外观模式
+  enableAdminButton?: boolean; // 是否启用管理员按钮
+  enableStatsBar?: boolean; // 是否启用统计栏
+  enableGroupedBar?: boolean; // 是否启用分组栏
+  enableInstanceDetail?: boolean; // 是否启用实例详情
+  enablePingChart?: boolean; // 是否启用延迟图表
+  pingChartMaxPoints?: number; // 延迟图表最大点数
+}
+
+// 默认配置值
+export const DEFAULT_CONFIG: ConfigOptions = {
+  backgroundImage: "/assets/Moonlit-Scenery.webp",
+  tagDefaultColorList:
+    "ruby,gray,gold,bronze,brown,yellow,amber,orange,tomato,red,crimson,pink,plum,purple,violet,iris,indigo,blue,cyan,teal,jade,green,grass,lime,mint,sky",
+  enableLogo: false,
+  logoUrl: "/assets/logo.png",
+  enableTitle: true,
+  titleText: "Komari",
+  enableSearchButton: true,
+  selectedDefaultView: "grid",
+  selectedDefaultAppearance: "system",
+  enableAdminButton: true,
+  enableStatsBar: true,
+  enableGroupedBar: true,
+  enableInstanceDetail: true,
+  enablePingChart: true,
+  pingChartMaxPoints: 0,
 };
--- a/src/config/hooks.ts
+++ b/src/config/hooks.ts
@@ -0,0 +1,26 @@
+import { useContext } from "react";
+import type { ConfigOptions } from "./default";
+import { ConfigContext } from "./ConfigContext";
+
+/**
+ * 使用全局配置 Hook，用于获取当前应用配置
+ * @returns 配置对象
+ */
+export function useAppConfig(): ConfigOptions {
+  return useContext(ConfigContext);
+}
+
+/**
+ * 使用特定配置项 Hook，直接获取某个配置项的值
+ * @param key 配置项键名
+ * @returns 配置项的值
+ */
+export function useConfigItem<K extends keyof ConfigOptions>(
+  key: K
+): ConfigOptions[K] {
+  const config = useContext(ConfigContext);
+  return config[key];
+}
+
+// 导出配置类型
+export type { ConfigOptions } from "./default";
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -0,0 +1,5 @@
+// 从各个文件中导出
+export { ConfigProvider } from "./ConfigProvider";
+export { useAppConfig, useConfigItem } from "./hooks";
+export type { ConfigOptions } from "./hooks";
+export { DEFAULT_CONFIG } from "./default";
--- a/src/hooks/useLoadCharts.ts
+++ b/src/hooks/useLoadCharts.ts
@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from "react";
 import { useNodeData } from "@/contexts/NodeDataContext";
 import type { HistoryRecord, NodeData, NodeStats } from "@/types/node";
 import { useLiveData } from "@/contexts/LiveDataContext";
+import fillMissingTimePoints from "@/utils/RecordHelper";

 export const useLoadCharts = (node: NodeData | null, hours: number) => {
  const { getLoadHistory, getRecentLoadHistory } = useNodeData();
@@ -97,43 +98,60 @@ export const useLoadCharts = (node: NodeData | null, hours: number) => {
    });
  }, [liveData, node?.uuid, isRealtime]);

-  const historicalChartData = useMemo(() => {
-    return historicalData.map((record) => ({
+  const chartData = useMemo(() => {
+    const rawData = isRealtime ? realtimeData : historicalData;
+    const mappedData = rawData.map((record) => ({
+      ...record,
      time: new Date(record.time).getTime(),
-      cpu: record.cpu,
-      ram: record.ram,
-      disk: record.disk,
-      load: record.load,
-      net_out: record.net_out,
-      net_in: record.net_in,
-      connections: record.connections,
-      process: record.process,
-      swap: record.swap,
-      connections_udp: record.connections_udp,
    }));
-  }, [historicalData]);

-  const realtimeChartData = useMemo(() => {
-    return realtimeData.map((record) => ({
-      time: new Date(record.time).getTime(),
-      cpu: record.cpu,
-      ram: record.ram,
-      disk: record.disk,
-      load: record.load,
-      net_out: record.net_out,
-      net_in: record.net_in,
-      connections: record.connections,
-      process: record.process,
-      swap: record.swap,
-      connections_udp: record.connections_udp,
+    if (isRealtime) {
+      return mappedData;
+    }
+
+    const minute = 60;
+    const hour = minute * 60;
+
+    const stringifiedData = mappedData.map((d) => ({
+      ...d,
+      time: new Date(d.time).toISOString(),
    }));
-  }, [realtimeData]);

-  const chartData = isRealtime ? realtimeChartData : historicalChartData;
+    let filledData;
+    if (hours === 1) {
+      filledData = fillMissingTimePoints(
+        stringifiedData,
+        minute,
+        hour,
+        minute * 2
+      );
+    } else {
+      const interval = hours > 120 ? hour : minute * 15;
+      const maxGap = interval * 2;
+      filledData = fillMissingTimePoints(
+        stringifiedData,
+        interval,
+        hour * hours,
+        maxGap
+      );
+    }
+    return filledData.map((d) => ({ ...d, time: new Date(d.time!).getTime() }));
+  }, [isRealtime, realtimeData, historicalData, hours]);
+
+  const memoryChartData = useMemo(() => {
+    return chartData.map((item) => ({
+      ...item,
+      ram: ((item.ram ?? 0) / (node?.mem_total ?? 1)) * 100,
+      ram_raw: item.ram,
+      swap: ((item.swap ?? 0) / (node?.swap_total ?? 1)) * 100,
+      swap_raw: item.swap,
+    }));
+  }, [chartData, node?.mem_total, node?.swap_total]);

  return {
    loading,
    error,
    chartData,
+    memoryChartData,
  };
 };
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -1,8 +1,11 @@
 import { useState, useEffect } from "react";
+import { useConfigItem } from "@/config/hooks";

 type Theme = "light" | "dark" | "system";

 export const useTheme = () => {
+  const defaultAppearance = useConfigItem("selectedDefaultAppearance");
+
  const [theme, setTheme] = useState<Theme>(() => {
    const storedTheme = localStorage.getItem("appearance");
    if (
@@ -12,7 +15,7 @@ export const useTheme = () => {
    ) {
      return storedTheme;
    }
-    return "system";
+    return (defaultAppearance as Theme) || "system";
  });

  useEffect(() => {
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -5,7 +5,7 @@ import "./index.css";
 import "@radix-ui/themes/styles.css";
 import { Theme } from "@radix-ui/themes";
 import { Header } from "@/components/sections/Header";
-import Background from "@/components/sections/Background";
+import { ConfigProvider } from "@/config";
 import { useTheme } from "@/hooks/useTheme";
 import { NodeDataProvider } from "@/contexts/NodeDataContext";
 import { LiveDataProvider } from "@/contexts/LiveDataContext";
@@ -17,44 +17,38 @@ const HomePage = lazy(() => import("@/pages/Home"));
 const InstancePage = lazy(() => import("@/pages/instance"));
 const NotFoundPage = lazy(() => import("@/pages/NotFound"));

+import { useConfigItem } from "@/config";
+
 // eslint-disable-next-line react-refresh/only-export-components
 const App = () => {
  const { theme, toggleTheme } = useTheme();
  const { publicSettings } = useNodeData();
-  const [viewMode, setViewMode] = useState<"card" | "list">(() => {
+  const defaultView = useConfigItem("selectedDefaultView");
+
+  const [viewMode, setViewMode] = useState<"grid" | "table">(() => {
    const savedMode = localStorage.getItem("nodeViewMode");
-    if (savedMode === "table") {
-      return "list";
-    }
-    return "card";
+    return savedMode === "grid" || savedMode === "table"
+      ? savedMode
+      : defaultView || "grid";
  });
  const [searchTerm, setSearchTerm] = useState("");

-  const sitename = publicSettings ? publicSettings.sitename : "Komari";
-
  useEffect(() => {
-    document.title = sitename;
-  }, [sitename]);
-
-  useEffect(() => {
-    const modeToStore = viewMode === "card" ? "grid" : "table";
-    localStorage.setItem("nodeViewMode", modeToStore);
+    localStorage.setItem("nodeViewMode", viewMode);
  }, [viewMode]);

  return (
+    <ConfigProvider publicSettings={publicSettings}>
      <Theme
        appearance="inherit"
        scaling="110%"
        style={{ backgroundColor: "transparent" }}>
-      {/* 使用背景组件 */}
-      {publicSettings && <Background publicSettings={publicSettings} />}
        <div className="min-h-screen flex flex-col text-sm">
          <Header
            viewMode={viewMode}
            setViewMode={setViewMode}
            theme={theme}
            toggleTheme={toggleTheme}
-          sitename={sitename}
            searchTerm={searchTerm}
            setSearchTerm={setSearchTerm}
          />
@@ -62,7 +56,9 @@ const App = () => {
            <Routes>
              <Route
                path="/"
-              element={<HomePage viewMode={viewMode} searchTerm={searchTerm} />}
+                element={
+                  <HomePage viewMode={viewMode} searchTerm={searchTerm} />
+                }
              />
              <Route path="/instance/:uuid" element={<InstancePage />} />
              <Route path="*" element={<NotFoundPage />} />
@@ -71,6 +67,7 @@ const App = () => {
          <Footer />
        </div>
      </Theme>
+    </ConfigProvider>
  );
 };

--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -8,9 +8,10 @@ import Loading from "@/components/loading";
 import type { NodeWithStatus } from "@/types/node";
 import { useNodeData } from "@/contexts/NodeDataContext";
 import { useLiveData } from "@/contexts/LiveDataContext";
+import { useConfigItem } from "@/config";

 interface HomePageProps {
-  viewMode: "card" | "list";
+  viewMode: "grid" | "table";
  searchTerm: string;
 }

@@ -18,6 +19,8 @@ const HomePage: React.FC<HomePageProps> = ({ viewMode, searchTerm }) => {
  const { nodes: staticNodes, loading, getGroups } = useNodeData();
  const { liveData } = useLiveData();
  const [selectedGroup, setSelectedGroup] = useState("所有");
+  const enableGroupedBar = useConfigItem("enableGroupedBar");
+  const enableStatsBar = useConfigItem("enableStatsBar");
  const [displayOptions, setDisplayOptions] = useState({
    time: true,
    online: true,
@@ -80,6 +83,7 @@ const HomePage: React.FC<HomePageProps> = ({ viewMode, searchTerm }) => {

  return (
    <div className="w-[90%] max-w-screen-2xl mx-auto flex-1 flex flex-col pb-10">
+      {enableStatsBar && (
        <StatsBar
          displayOptions={displayOptions}
          setDisplayOptions={setDisplayOptions}
@@ -87,8 +91,10 @@ const HomePage: React.FC<HomePageProps> = ({ viewMode, searchTerm }) => {
          loading={loading}
          currentTime={currentTime}
        />
+      )}

      <main className="flex-1 px-4 pb-4">
+        {enableGroupedBar && (
          <div className="flex overflow-auto whitespace-nowrap overflow-x-auto items-center min-w-[300px] text-secondary-foreground box-border border space-x-4 px-4 rounded-lg mb-4 bg-card backdrop-blur-[10px]">
            <span>分组</span>
            {groups.map((group: string) => (
@@ -101,26 +107,27 @@ const HomePage: React.FC<HomePageProps> = ({ viewMode, searchTerm }) => {
              </Button>
            ))}
          </div>
+        )}

-        <div className="space-y-4">
+        <div className="space-y-4 mt-4">
          {loading ? (
            <Loading text="正在努力获取数据中..." />
          ) : filteredNodes.length > 0 ? (
            <div
              className={
-                viewMode === "card"
+                viewMode === "grid"
                  ? ""
                  : "space-y-2 bg-card overflow-auto backdrop-blur-[10px] rounded-lg p-2"
              }>
              <div
                className={
-                  viewMode === "card"
+                  viewMode === "grid"
                    ? "grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4"
                    : "min-w-[1080px]"
                }>
-                {viewMode === "list" && <NodeListHeader />}
+                {viewMode === "table" && <NodeListHeader />}
                {filteredNodes.map((node: NodeWithStatus) =>
-                  viewMode === "card" ? (
+                  viewMode === "grid" ? (
                    <NodeCard key={node.uuid} node={node} />
                  ) : (
                    <NodeListItem key={node.uuid} node={node} />
--- a/src/pages/instance/Instance.tsx
+++ b/src/pages/instance/Instance.tsx
@@ -1,40 +1,30 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import type { NodeWithStatus } from "@/types/node";
 import { useMemo, memo } from "react";
+import { formatBytes, formatUptime } from "@/utils";

 interface InstanceProps {
  node: NodeWithStatus;
 }

-const formatUptime = (uptime: number) => {
-  if (!uptime) return "N/A";
-  const days = Math.floor(uptime / 86400);
-  const hours = Math.floor((uptime % 86400) / 3600);
-  const minutes = Math.floor((uptime % 3600) / 60);
-  const seconds = Math.floor(uptime % 60);
+const formatTrafficLimit = (
+  limit?: number,
+  type?: "sum" | "max" | "min" | "up" | "down"
+) => {
+  if (!limit) return "未设置";

-  let result = "";
-  if (days > 0) result += `${days} 天 `;
-  if (hours > 0 || days > 0) result += `${hours} 时 `;
-  if (minutes > 0 || hours > 0 || days > 0) result += `${minutes} 分 `;
-  result += `${seconds} 秒`;
+  const limitText = formatBytes(limit);

-  return result.trim();
-};
+  const typeText =
+    {
+      sum: "总和",
+      max: "最大值",
+      min: "最小值",
+      up: "上传",
+      down: "下载",
+    }[type || "max"] || "";

-const formatBytes = (bytes: number, unit: "KB" | "MB" | "GB" = "GB") => {
-  if (bytes === 0) return `0 ${unit}`;
-  const k = 1024;
-  switch (unit) {
-    case "KB":
-      return `${(bytes / k).toFixed(2)} KB`;
-    case "MB":
-      return `${(bytes / (k * k)).toFixed(2)} MB`;
-    case "GB":
-      return `${(bytes / (k * k * k)).toFixed(2)} GB`;
-    default:
-      return `${bytes} B`;
-  }
+  return `${limitText} (${typeText})`;
 };

 const Instance = memo(({ node }: InstanceProps) => {
@@ -47,33 +37,33 @@ const Instance = memo(({ node }: InstanceProps) => {

  return (
    <Card>
-      <CardHeader>
+      <CardHeader className="pb-2">
        <CardTitle>详细信息</CardTitle>
      </CardHeader>
-      <CardContent className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <div>
-          <p className="text-muted-foreground">CPU</p>
-          <p>{`${node.cpu_name} (x${node.cpu_cores})`}</p>
-        </div>
-        <div>
-          <p className="text-muted-foreground">架构</p>
-          <p>{node.arch}</p>
-        </div>
-        <div>
-          <p className="text-muted-foreground">虚拟化</p>
-          <p>{node.virtualization}</p>
-        </div>
-        <div>
-          <p className="text-muted-foreground">GPU</p>
-          <p>{node.gpu_name || "N/A"}</p>
-        </div>
+      <CardContent className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-3">
        <div className="md:col-span-2">
-          <p className="text-muted-foreground">操作系统</p>
-          <p>{node.os}</p>
+          <p className="text-muted-foreground text-sm">CPU</p>
+          <p className="text-sm">{`${node.cpu_name} (x${node.cpu_cores})`}</p>
        </div>
        <div>
-          <p className="text-muted-foreground">内存</p>
-          <p>
+          <p className="text-muted-foreground text-sm">架构</p>
+          <p className="text-sm">{node.arch}</p>
+        </div>
+        <div>
+          <p className="text-muted-foreground text-sm">虚拟化</p>
+          <p className="text-sm">{node.virtualization}</p>
+        </div>
+        <div>
+          <p className="text-muted-foreground text-sm">GPU</p>
+          <p className="text-sm">{node.gpu_name || "N/A"}</p>
+        </div>
+        <div>
+          <p className="text-muted-foreground text-sm">操作系统</p>
+          <p className="text-sm">{node.os}</p>
+        </div>
+        <div>
+          <p className="text-muted-foreground text-sm">内存</p>
+          <p className="text-sm">
            {stats && isOnline
              ? `${formatBytes(stats.ram.used)} / ${formatBytes(
                  node.mem_total
@@ -82,18 +72,18 @@ const Instance = memo(({ node }: InstanceProps) => {
          </p>
        </div>
        <div>
-          <p className="text-muted-foreground">交换</p>
-          <p>
+          <p className="text-muted-foreground text-sm">交换</p>
+          <p className="text-sm">
            {stats && isOnline
-              ? `${formatBytes(stats.swap.used, "MB")} / ${formatBytes(
+              ? `${formatBytes(stats.swap.used)} / ${formatBytes(
                  node.swap_total
                )}`
              : `N/A / ${formatBytes(node.swap_total)}`}
          </p>
        </div>
        <div>
-          <p className="text-muted-foreground">磁盘</p>
-          <p>
+          <p className="text-muted-foreground text-sm">磁盘</p>
+          <p className="text-sm">
            {stats && isOnline
              ? `${formatBytes(stats.disk.used)} / ${formatBytes(
                  node.disk_total
@@ -101,20 +91,24 @@ const Instance = memo(({ node }: InstanceProps) => {
              : `N/A / ${formatBytes(node.disk_total)}`}
          </p>
        </div>
+        <div>
+          <p className="text-muted-foreground text-sm">运行时间</p>
+          <p className="text-sm">{formatUptime(stats?.uptime || 0)}</p>
+        </div>
        <div className="md:col-span-2">
-          <p className="text-muted-foreground">网络</p>
-          <p>
+          <p className="text-muted-foreground text-sm">实时网络</p>
+          <p className="text-sm">
            {stats && isOnline
-              ? `↑ ${formatBytes(stats.network.up, "KB")}/s ↓ ${formatBytes(
+              ? `↑ ${formatBytes(stats.network.up, true)} ↓ ${formatBytes(
                  stats.network.down,
-                  "KB"
-                )}/s`
+                  true
+                )}`
              : "N/A"}
          </p>
        </div>
-        <div>
-          <p className="text-muted-foreground">总流量</p>
-          <p>
+        <div className="md:col-span-2">
+          <p className="text-muted-foreground text-sm">总流量</p>
+          <p className="text-sm">
            {stats && isOnline
              ? `↑ ${formatBytes(stats.network.totalUp)} ↓ ${formatBytes(
                  stats.network.totalDown
@@ -122,13 +116,15 @@ const Instance = memo(({ node }: InstanceProps) => {
              : "N/A"}
          </p>
        </div>
-        <div>
-          <p className="text-muted-foreground">运行时间</p>
-          <p>{formatUptime(stats?.uptime || 0)}</p>
+        <div className="md:col-span-2">
+          <p className="text-muted-foreground text-sm">流量限制</p>
+          <p className="text-sm">
+            {formatTrafficLimit(node.traffic_limit, node.traffic_limit_type)}
+          </p>
        </div>
        <div>
-          <p className="text-muted-foreground">最后上报</p>
-          <p>
+          <p className="text-muted-foreground text-sm">最后上报</p>
+          <p className="text-sm">
            {stats && isOnline
              ? new Date(stats.updated_at).toLocaleString()
              : "N/A"}
--- a/src/pages/instance/LoadCharts.tsx
+++ b/src/pages/instance/LoadCharts.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useState, useEffect, useRef } from "react";
+import { memo, useCallback, useRef } from "react";
 import {
  AreaChart,
  Area,
@@ -13,78 +13,25 @@ import { ChartContainer } from "@/components/ui/chart";
 import { Card, CardHeader, CardTitle } from "@/components/ui/card";
 import type { NodeData, NodeStats } from "@/types/node";
 import { formatBytes } from "@/utils";
-import fillMissingTimePoints, { type RecordFormat } from "@/utils/RecordHelper";
 import { Flex } from "@radix-ui/themes";
 import Loading from "@/components/loading";
-import { useNodeData } from "@/contexts/NodeDataContext";
+import { useLoadCharts } from "@/hooks/useLoadCharts";

 interface LoadChartsProps {
  node: NodeData;
  hours: number;
-  data?: RecordFormat[];
  liveData?: NodeStats;
 }

-const LoadCharts = memo(
-  ({ node, hours, data = [], liveData }: LoadChartsProps) => {
-    const { getLoadHistory } = useNodeData();
-    const [historicalData, setHistoricalData] = useState<RecordFormat[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    const isRealtime = hours === 0;
-
-    // 获取历史数据
-    useEffect(() => {
-      if (!isRealtime) {
-        const fetchHistoricalData = async () => {
-          setLoading(true);
-          setError(null);
-          try {
-            const data = await getLoadHistory(node.uuid, hours);
-            setHistoricalData(data?.records || []);
-          } catch (err: any) {
-            setError(err.message || "获取历史数据失败");
-          } finally {
-            setLoading(false);
-          }
-        };
-        fetchHistoricalData();
-      } else {
-        setLoading(false);
-      }
-    }, [node.uuid, hours, getLoadHistory, isRealtime]);
-
-    // 准备图表数据
-    const minute = 60;
-    const hour = minute * 60;
-    const chartData = isRealtime
-      ? data
-      : hours === 1
-      ? fillMissingTimePoints(historicalData ?? [], minute, hour, minute * 2)
-      : (() => {
-          const interval = hours > 120 ? hour : minute * 15;
-          const maxGap = interval * 2;
-          return fillMissingTimePoints(
-            historicalData ?? [],
-            interval,
-            hour * hours,
-            maxGap
+const LoadCharts = memo(({ node, hours, liveData }: LoadChartsProps) => {
+  const { loading, error, chartData, memoryChartData } = useLoadCharts(
+    node,
+    hours
  );
-        })();

  const chartDataLengthRef = useRef(0);
  chartDataLengthRef.current = chartData.length;

-    // 内存图表数据转换
-    const memoryChartData = chartData.map((item) => ({
-      ...item,
-      ram: ((item.ram ?? 0) / (node?.mem_total ?? 1)) * 100,
-      ram_raw: item.ram,
-      swap: ((item.swap ?? 0) / (node?.swap_total ?? 1)) * 100,
-      swap_raw: item.swap,
-    }));
-
  // 格式化函数
  const timeFormatter = useCallback((value: any, index: number) => {
    if (chartDataLengthRef.current === 0) return "";
@@ -277,9 +224,7 @@ const LoadCharts = memo(
        <div className="space-y-1">
          {payload.map((item: any, index: number) => {
            const series = chartConfig.series
-                ? chartConfig.series.find(
-                    (s: any) => s.dataKey === item.dataKey
-                  )
+              ? chartConfig.series.find((s: any) => s.dataKey === item.dataKey)
              : {
                  dataKey: chartConfig.dataKey,
                  tooltipLabel: chartConfig.tooltipLabel,
@@ -339,9 +284,7 @@ const LoadCharts = memo(
    return (
      <Card className={cn} key={config.id}>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {config.title}
-            </CardTitle>
+          <CardTitle className="text-sm font-medium">{config.title}</CardTitle>
          <span className="text-sm font-bold">{config.value}</span>
        </CardHeader>
        <ChartContainer config={chartConfig}>
@@ -416,7 +359,6 @@ const LoadCharts = memo(
      </div>
    </div>
  );
-  }
-);
+});

 export default LoadCharts;
--- a/src/pages/instance/PingChart.tsx
+++ b/src/pages/instance/PingChart.tsx
@@ -17,6 +17,7 @@ import Loading from "@/components/loading";
 import { usePingChart } from "@/hooks/usePingChart";
 import fillMissingTimePoints, { cutPeakValues } from "@/utils/RecordHelper";
 import { Button } from "@/components/ui/button";
+import { useConfigItem } from "@/config";

 interface PingChartProps {
  node: NodeData;
@@ -28,6 +29,7 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
  const [visiblePingTasks, setVisiblePingTasks] = useState<number[]>([]);
  const [timeRange, setTimeRange] = useState<[number, number] | null>(null);
  const [cutPeak, setCutPeak] = useState(false);
+  const maxPointsToRender = useConfigItem("pingChartMaxPoints") || 0; // 0表示不限制

  useEffect(() => {
    if (pingHistory?.tasks) {
@@ -106,12 +108,11 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
    }

    // 添加渲染硬限制以防止崩溃，即使在间隔调整后也是如此
-    const MAX_POINTS_TO_RENDER = 0;
-    if (full.length > MAX_POINTS_TO_RENDER && MAX_POINTS_TO_RENDER > 0) {
+    if (full.length > maxPointsToRender && maxPointsToRender > 0) {
      console.log(
-        `数据量过大 (${full.length}), 降采样至 ${MAX_POINTS_TO_RENDER} 个点。`
+        `数据量过大 (${full.length}), 降采样至 ${maxPointsToRender} 个点。`
      );
-      const samplingFactor = Math.ceil(full.length / MAX_POINTS_TO_RENDER);
+      const samplingFactor = Math.ceil(full.length / maxPointsToRender);
      const sampledData = [];
      for (let i = 0; i < full.length; i += samplingFactor) {
        sampledData.push(full[i]);
@@ -125,7 +126,7 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
    }

    return full;
-  }, [pingHistory, hours, cutPeak]);
+  }, [pingHistory, hours, maxPointsToRender, cutPeak]);

  const handleTaskVisibilityToggle = (taskId: number) => {
    setVisiblePingTasks((prev) =>
--- a/src/pages/instance/index.tsx
+++ b/src/pages/instance/index.tsx
@@ -10,6 +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";

 const InstancePage = () => {
  const { uuid } = useParams<{ uuid: string }>();
@@ -20,12 +21,13 @@ const InstancePage = () => {
    loading: nodesLoading,
  } = useNodeData();
  const { liveData } = useLiveData();
-  const { getRecentLoadHistory } = useNodeData();
+  useNodeData();
  const [staticNode, setStaticNode] = useState<NodeData | null>(null);
  const [chartType, setChartType] = useState<"load" | "ping">("load");
  const [loadHours, setLoadHours] = useState<number>(0);
  const [pingHours, setPingHours] = useState<number>(1); // 默认1小时
-  const [realtimeChartData, setRealtimeChartData] = useState<any[]>([]);
+  const enableInstanceDetail = useConfigItem("enableInstanceDetail");
+  const enablePingChart = useConfigItem("enablePingChart");

  const maxRecordPreserveTime = publicSettings?.record_preserve_time || 0; // 默认0表示关闭
  const maxPingRecordPreserveTime =
@@ -76,57 +78,6 @@ const InstancePage = () => {
    setStaticNode(foundNode || null);
  }, [staticNodes, uuid]);

-  // Effect for fetching initial realtime data
-  useEffect(() => {
-    if (uuid && loadHours === 0) {
-      const fetchInitialData = async () => {
-        try {
-          const data = await getRecentLoadHistory(uuid);
-          setRealtimeChartData(data?.records || []);
-        } catch (error) {
-          console.error("Failed to fetch initial realtime chart data:", error);
-          setRealtimeChartData([]);
-        }
-      };
-      fetchInitialData();
-    }
-  }, [uuid, loadHours, getRecentLoadHistory]);
-
-  // Effect for handling live data updates
-  useEffect(() => {
-    if (loadHours !== 0 || !liveData?.data || !uuid || !liveData.data[uuid]) {
-      return;
-    }
-
-    const stats = liveData.data[uuid];
-    const newRecord = {
-      client: uuid,
-      time: new Date(stats.updated_at).toISOString(),
-      cpu: stats.cpu.usage,
-      ram: stats.ram.used,
-      disk: stats.disk.used,
-      load: stats.load.load1,
-      net_in: stats.network.down,
-      net_out: stats.network.up,
-      process: stats.process,
-      connections: stats.connections.tcp,
-      gpu: 0,
-      ram_total: stats.ram.total,
-      swap: stats.swap.used,
-      swap_total: stats.swap.total,
-      temp: 0,
-      disk_total: stats.disk.total,
-      net_total_up: stats.network.totalUp,
-      net_total_down: stats.network.totalDown,
-      connections_udp: stats.connections.udp,
-    };
-
-    setRealtimeChartData((prev) => {
-      const updated = [...prev, newRecord];
-      return updated.length > 600 ? updated.slice(-600) : updated;
-    });
-  }, [liveData, uuid, loadHours]);
-
  const node = useMemo(() => {
    if (!staticNode) return null;
    const isOnline = liveData?.online.includes(staticNode.uuid) ?? false;
@@ -174,22 +125,25 @@ const InstancePage = () => {
        </div>
      </div>

-      <Instance node={node as NodeWithStatus} />
+      {enableInstanceDetail && <Instance node={node as NodeWithStatus} />}

+      <div className="bg-card border rounded-lg py-3 px-4 inline-block mx-auto">
        <div className="flex justify-center space-x-2">
          <Button
            variant={chartType === "load" ? "secondary" : "ghost"}
            onClick={() => setChartType("load")}>
            负载
          </Button>
+          {enablePingChart && (
            <Button
              variant={chartType === "ping" ? "secondary" : "ghost"}
              onClick={() => setChartType("ping")}>
              延迟
            </Button>
+          )}
        </div>
        {chartType === "load" ? (
-        <div className="flex justify-center space-x-2">
+          <div className="flex justify-center space-x-2 mt-2">
            {loadTimeRanges.map((range) => (
              <Button
                key={range.label}
@@ -201,7 +155,7 @@ const InstancePage = () => {
            ))}
          </div>
        ) : (
-        <div className="flex justify-center space-x-2">
+          <div className="flex justify-center space-x-2 mt-2">
            {pingTimeRanges.map((range) => (
              <Button
                key={range.label}
@@ -213,6 +167,7 @@ const InstancePage = () => {
            ))}
          </div>
        )}
+      </div>

      <Suspense
        fallback={
@@ -224,7 +179,6 @@ const InstancePage = () => {
          <LoadCharts
            node={staticNode}
            hours={loadHours}
-            data={realtimeChartData}
            liveData={liveData?.data[staticNode.uuid]}
          />
        ) : chartType === "ping" && staticNode ? (
--- a/src/types/node.d.ts
+++ b/src/types/node.d.ts
@@ -18,6 +18,8 @@ export interface NodeData {
  expired_at: string | null;
  group: string;
  tags: string;
+  traffic_limit?: number;
+  traffic_limit_type?: "sum" | "max" | "min" | "up" | "down";
  created_at: string;
  updated_at: string;
 }