diff --git a/src/layout/components/dashboard-btn.vue b/src/layout/components/dashboard-btn.vue
new file mode 100644
index 0000000..0a454f5
--- /dev/null
+++ b/src/layout/components/dashboard-btn.vue
@@ -0,0 +1,59 @@
+<template>
+  <div
+    class="nezha-user-info-group"
+  >
+    <a
+      :href="dashboardUrl"
+      class="dashboard-url"
+      :title="userLogin ? '访问管理后台' : '登录管理后台'"
+      target="_blank"
+    >
+      <span
+        :class="{
+          'ri-dashboard-3-line': userLogin,
+          'ri-user-line': !userLogin,
+        }"
+      />
+      <span>{{ userLogin ? '管理后台' : '登录' }}</span>
+    </a>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 控制台入口
+ */
+import {
+  computed,
+} from 'vue';
+import {
+  useStore,
+} from 'vuex';
+
+import config from '@/config';
+
+const store = useStore();
+
+const userLogin = computed(() => store.state.profile?.username);
+const dashboardUrl = computed(() => config.nazhua.v1DashboardUrl || '/dashboard');
+</script>
+
+<style lang="scss" scoped>
+.nezha-user-info-group {
+  display: flex;
+  align-items: center;
+  gap: 0 20px;
+
+  .dashboard-url {
+    display: flex;
+    align-items: center;
+    gap: 0 5px;
+    color: #ddd;
+    cursor: pointer;
+
+    &:hover {
+      color: #ff9a00;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/header.vue b/src/layout/components/header.vue
index 2325244..6596494 100644
--- a/src/layout/components/header.vue
+++ b/src/layout/components/header.vue
@@ -12,110 +12,15 @@
         >{{ title }}</span>
       </div>
       <div class="right-box">
-        <div
-          v-if="serverCount?.total && showServerCount"
-          class="server-count-group"
-        >
-          <span class="server-count server-count--total">
-            <span class="text">共</span>
-            <span class="value">{{ serverCount.total }}</span>
-            <span class="text">台服务器</span>
-          </span>
-          <template v-if="serverCount.online !== serverCount.total">
-            <span
-              class="server-count server-count--online"
-            >
-              <span class="text">在线</span>
-              <span class="value">{{ serverCount.online }}</span>
-            </span>
-            <span
-              class="server-count server-count--offline"
-            >
-              <span class="text">离线</span>
-              <span class="value">{{ serverCount.offline }}</span>
-            </span>
-          </template>
-        </div>
-        <div
-          v-if="serverStat && showServerStat"
-          class="server-stat-group"
-        >
-          <div
-            v-if="serverStat.transfer"
-            class="server-stat server-stat--transfer"
-          >
-            <span class="server-stat-label">
-              <span class="text">流量</span>
-            </span>
-            <div class="server-stat-content">
-              <span class="server-stat-item server-stat-item--in">
-                <span class="ri-download-line" />
-                <span class="text-value">
-                  {{ serverStat.transfer.inData.value }}
-                </span>
-                <span class="text-unit">
-                  {{ serverStat.transfer.inData.unit }}
-                </span>
-              </span>
-              <span class="server-stat-item server-stat-item--out">
-                <span class="ri-upload-line" />
-                <span class="text-value">
-                  {{ serverStat.transfer.outData.value }}
-                </span>
-                <span class="text-unit">
-                  {{ serverStat.transfer.outData.unit }}
-                </span>
-              </span>
-            </div>
-          </div>
-          <div
-            v-if="serverStat.netSpeed"
-            class="server-stat server-stat--net-speed"
-          >
-            <span class="server-stat-label">
-              <span class="text">网速</span>
-            </span>
-            <div class="server-stat-content">
-              <span class="server-stat-item server-stat-item--in">
-                <span class="ri-arrow-down-line" />
-                <span class="text-value">
-                  {{ serverStat.netSpeed.inData.value }}
-                </span>
-                <span class="text-unit">
-                  {{ serverStat.netSpeed.inData.unit }}
-                </span>
-              </span>
-              <span class="server-stat-item server-stat-item--out">
-                <span class="ri-arrow-up-line" />
-                <span class="text-value">
-                  {{ serverStat.netSpeed.outData.value }}
-                </span>
-                <span class="text-unit">
-                  {{ serverStat.netSpeed.outData.unit }}
-                </span>
-              </span>
-            </div>
-          </div>
-        </div>
-        <div
+        <server-count
+          v-if="showServerCount"
+        />
+        <server-stat
+          v-if="showServerStat"
+        />
+        <dashboard-btn
           v-if="showDashboardBtn"
-          class="nezha-user-info-group"
-        >
-          <a
-            :href="dashboardUrl"
-            class="dashboard-url"
-            :title="userLogin ? '访问管理后台' : '登录管理后台'"
-            target="_blank"
-          >
-            <span
-              :class="{
-                'ri-dashboard-3-line': userLogin,
-                'ri-user-line': !userLogin,
-              }"
-            />
-            <span>{{ userLogin ? '管理后台' : '登录' }}</span>
-          </a>
-        </div>
+        />
       </div>
     </div>
   </div>
@@ -128,18 +33,17 @@
 import {
   computed,
 } from 'vue';
-import {
-  useStore,
-} from 'vuex';
 import {
   useRoute,
   useRouter,
 } from 'vue-router';
-import * as hostUtils from '@/utils/host';
 
 import config from '@/config';
 
-const store = useStore();
+import ServerCount from './server-count.vue';
+import ServerStat from './server-stat.vue';
+import DashboardBtn from './dashboard-btn.vue';
+
 const route = useRoute();
 const router = useRouter();
 
@@ -156,113 +60,8 @@ const headerStyle = computed(() => {
 });
 
 const showServerCount = computed(() => config.nazhua.hideNavbarServerCount !== true);
-const serverCount = computed(() => store.state.serverCount);
 
 const showServerStat = computed(() => config.nazhua.hideNavbarServerStat !== true);
-const serverStat = computed(() => {
-  const transfer = {
-    in: 0,
-    inData: {
-      value: 0,
-      unit: '',
-    },
-    out: 0,
-    outData: {
-      value: 0,
-      unit: '',
-    },
-  };
-  const netSpeed = {
-    in: 0,
-    inData: {
-      value: 0,
-      unit: '',
-    },
-    out: 0,
-    outData: {
-      value: 0,
-      unit: '',
-    },
-  };
-  if (store.state.serverList.length) {
-    store.state.serverList.forEach((server) => {
-      if (server.online === 1 && server.State) {
-        if (typeof server.State.NetInTransfer === 'number') {
-          transfer.in += server.State.NetInTransfer;
-        }
-        if (typeof server.State.NetOutTransfer === 'number') {
-          transfer.out += server.State.NetOutTransfer;
-        }
-        if (typeof server.State.NetInSpeed === 'number') {
-          netSpeed.in += server.State.NetInSpeed;
-        }
-        if (typeof server.State.NetOutSpeed === 'number') {
-          netSpeed.out += server.State.NetOutSpeed;
-        }
-      }
-    });
-  }
-  const calcInTransfer = hostUtils.calcBinary(transfer.in);
-  if (calcInTransfer.t > 1) {
-    transfer.inData.value = (calcInTransfer.t).toFixed(1) * 1;
-    transfer.inData.unit = 'T';
-  } else if (calcInTransfer.g > 1) {
-    transfer.inData.value = (calcInTransfer.g).toFixed(1) * 1;
-    transfer.inData.unit = 'G';
-  } else if (calcInTransfer.m > 1) {
-    transfer.inData.value = (calcInTransfer.m).toFixed(1) * 1;
-    transfer.inData.unit = 'M';
-  } else {
-    transfer.inData.value = calcInTransfer.value;
-    transfer.inData.unit = 'K';
-  }
-  const calcOutTransfer = hostUtils.calcBinary(transfer.out);
-  if (calcOutTransfer.t > 1) {
-    transfer.outData.value = (calcOutTransfer.t).toFixed(1) * 1;
-    transfer.outData.unit = 'T';
-  } else if (calcOutTransfer.g > 1) {
-    transfer.outData.value = (calcOutTransfer.g).toFixed(1) * 1;
-    transfer.outData.unit = 'G';
-  } else if (calcOutTransfer.m > 1) {
-    transfer.outData.value = (calcOutTransfer.m).toFixed(1) * 1;
-    transfer.outData.unit = 'M';
-  } else {
-    transfer.outData.value = calcOutTransfer.value;
-    transfer.outData.unit = 'K';
-  }
-  const calcNetInSpeed = hostUtils.calcBinary(netSpeed.in);
-  if (calcNetInSpeed.t > 1) {
-    netSpeed.inData.value = (calcNetInSpeed.t).toFixed(1) * 1;
-    netSpeed.inData.unit = 'T';
-  } else if (calcNetInSpeed.g > 1) {
-    netSpeed.inData.value = (calcNetInSpeed.g).toFixed(1) * 1;
-    netSpeed.inData.unit = 'G';
-  } else if (calcNetInSpeed.m > 1) {
-    netSpeed.inData.value = (calcNetInSpeed.m).toFixed(1) * 1;
-    netSpeed.inData.unit = 'M';
-  } else {
-    netSpeed.inData.value = (calcNetInSpeed.k).toFixed(1) * 1;
-    netSpeed.inData.unit = 'K';
-  }
-  const calcNetOutSpeed = hostUtils.calcBinary(netSpeed.out);
-  if (calcNetOutSpeed.t > 1) {
-    netSpeed.outData.value = (calcNetOutSpeed.t).toFixed(1) * 1;
-    netSpeed.outData.unit = 'T';
-  } else if (calcNetOutSpeed.g > 1) {
-    netSpeed.outData.value = (calcNetOutSpeed.g).toFixed(1) * 1;
-    netSpeed.outData.unit = 'G';
-  } else if (calcNetOutSpeed.m > 1) {
-    netSpeed.outData.value = (calcNetOutSpeed.m).toFixed(1) * 1;
-    netSpeed.outData.unit = 'M';
-  } else {
-    netSpeed.outData.value = (calcNetOutSpeed.k).toFixed(1) * 1;
-    netSpeed.outData.unit = 'K';
-  }
-  return {
-    transfer,
-    netSpeed,
-  };
-});
 
 const title = computed(() => config.nazhua.title);
 
@@ -295,8 +94,6 @@ const showDashboardBtn = computed(() => [
   config.nazhua.nezhaVersion === 'v1',
   config.nazhua.v1HideNezhaDashboardBtn !== true,
 ].every((item) => item));
-const userLogin = computed(() => store.state.profile?.username);
-const dashboardUrl = computed(() => config.nazhua.v1DashboardUrl || '/dashboard');
 </script>
 
 <style lang="scss" scoped>
@@ -332,39 +129,6 @@ const dashboardUrl = computed(() => config.nazhua.v1DashboardUrl || '/dashboard'
     cursor: pointer;
   }
 
-  .server-count-group {
-    display: flex;
-    gap: 10px;
-
-    .server-count {
-      display: flex;
-      align-items: center;
-      gap: 3px;
-      color: #ddd;
-      line-height: 30px;
-
-      .value {
-        font-weight: bold;
-      }
-
-      &.server-count--total {
-        .value {
-          color: #70f3ff;
-        }
-      }
-      &.server-count--online {
-        .value {
-          color: #0f0;
-        }
-      }
-      &.server-count--offline {
-        .value {
-          color: #f00;
-        }
-      }
-    }
-  }
-
   .layer-header-container {
     display: flex;
     flex-wrap: wrap;
@@ -384,91 +148,5 @@ const dashboardUrl = computed(() => config.nazhua.v1DashboardUrl || '/dashboard'
     gap: 0 20px;
     color: #ddd;
   }
-
-  .server-stat-group {
-    min-width: 160px;
-
-    @media screen and (max-width: 450px) {
-      position: absolute;
-      top: 0;
-      right: 0;
-      left: 0;
-      height: 28px;
-      padding: 0 20px;
-      display: flex;
-      align-items: center;
-      flex-direction: row-reverse;
-      gap: 10px;
-
-      .server-stat-label {
-        display: none;
-      }
-
-      .server-stat-content {
-        gap: 10px;
-      }
-    }
-  }
-
-  .server-stat {
-    display: flex;
-    gap: 8px;
-    line-height: 16px;
-    font-size: 12px;
-
-    .server-stat-content {
-      flex: 1;
-      display: flex;
-    }
-
-    .server-stat-item {
-      flex: 1;
-    }
-  }
-  .server-stat--transfer {
-    .server-stat-item--in {
-      .text-value {
-        color: var(--transfer-in-color);
-      }
-    }
-
-    .server-stat-item--out {
-      .text-value {
-        color: var(--transfer-out-color);
-      }
-    }
-  }
-
-  .server-stat--net-speed {
-    .server-stat-item--in {
-      .text-value {
-        color: var(--net-speed-in-color);
-      }
-    }
-
-    .server-stat-item--out {
-      .text-value {
-        color: var(--net-speed-out-color);
-      }
-    }
-  }
-
-  .nezha-user-info-group {
-    display: flex;
-    align-items: center;
-    gap: 0 20px;
-
-    .dashboard-url {
-      display: flex;
-      align-items: center;
-      gap: 0 5px;
-      color: #ddd;
-      cursor: pointer;
-
-      &:hover {
-        color: #ff9a00;
-      }
-    }
-  }
 }
 </style>
diff --git a/src/layout/components/server-count.vue b/src/layout/components/server-count.vue
new file mode 100644
index 0000000..cab5a02
--- /dev/null
+++ b/src/layout/components/server-count.vue
@@ -0,0 +1,79 @@
+<template>
+  <div
+    v-if="serverCount?.total"
+    class="server-count-group"
+  >
+    <span class="server-count server-count--total">
+      <span class="text">共</span>
+      <span class="value">{{ serverCount.total }}</span>
+      <span class="text">台服务器</span>
+    </span>
+    <template v-if="serverCount.online !== serverCount.total">
+      <span
+        class="server-count server-count--online"
+      >
+        <span class="text">在线</span>
+        <span class="value">{{ serverCount.online }}</span>
+      </span>
+      <span
+        class="server-count server-count--offline"
+      >
+        <span class="text">离线</span>
+        <span class="value">{{ serverCount.offline }}</span>
+      </span>
+    </template>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 服务器数量
+ */
+import {
+  computed,
+} from 'vue';
+import {
+  useStore,
+} from 'vuex';
+
+const store = useStore();
+
+const serverCount = computed(() => store.state.serverCount);
+</script>
+
+<style lang="scss" scoped>
+.server-count-group {
+  display: flex;
+  gap: 10px;
+
+  .server-count {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    color: #ddd;
+    line-height: 30px;
+
+    .value {
+      font-weight: bold;
+    }
+
+    &.server-count--total {
+      .value {
+        color: #70f3ff;
+      }
+    }
+
+    &.server-count--online {
+      .value {
+        color: #0f0;
+      }
+    }
+
+    &.server-count--offline {
+      .value {
+        color: #f00;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/server-stat.vue b/src/layout/components/server-stat.vue
new file mode 100644
index 0000000..04c068d
--- /dev/null
+++ b/src/layout/components/server-stat.vue
@@ -0,0 +1,254 @@
+<template>
+  <div
+    v-if="serverStat"
+    class="server-stat-group"
+  >
+    <div
+      v-if="serverStat.transfer"
+      class="server-stat server-stat--transfer"
+    >
+      <span class="server-stat-label">
+        <span class="text">流量</span>
+      </span>
+      <div class="server-stat-content">
+        <span class="server-stat-item server-stat-item--in">
+          <span class="ri-download-line" />
+          <span class="text-value">
+            {{ serverStat.transfer.inData.value }}
+          </span>
+          <span class="text-unit">
+            {{ serverStat.transfer.inData.unit }}
+          </span>
+        </span>
+        <span class="server-stat-item server-stat-item--out">
+          <span class="ri-upload-line" />
+          <span class="text-value">
+            {{ serverStat.transfer.outData.value }}
+          </span>
+          <span class="text-unit">
+            {{ serverStat.transfer.outData.unit }}
+          </span>
+        </span>
+      </div>
+    </div>
+    <div
+      v-if="serverStat.netSpeed"
+      class="server-stat server-stat--net-speed"
+    >
+      <span class="server-stat-label">
+        <span class="text">网速</span>
+      </span>
+      <div class="server-stat-content">
+        <span class="server-stat-item server-stat-item--in">
+          <span class="ri-arrow-down-line" />
+          <span class="text-value">
+            {{ serverStat.netSpeed.inData.value }}
+          </span>
+          <span class="text-unit">
+            {{ serverStat.netSpeed.inData.unit }}
+          </span>
+        </span>
+        <span class="server-stat-item server-stat-item--out">
+          <span class="ri-arrow-up-line" />
+          <span class="text-value">
+            {{ serverStat.netSpeed.outData.value }}
+          </span>
+          <span class="text-unit">
+            {{ serverStat.netSpeed.outData.unit }}
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 服务器统计
+ */
+import {
+  computed,
+} from 'vue';
+import {
+  useStore,
+} from 'vuex';
+import * as hostUtils from '@/utils/host';
+
+const store = useStore();
+
+const serverStat = computed(() => {
+  const transfer = {
+    in: 0,
+    inData: {
+      value: 0,
+      unit: '',
+    },
+    out: 0,
+    outData: {
+      value: 0,
+      unit: '',
+    },
+  };
+  const netSpeed = {
+    in: 0,
+    inData: {
+      value: 0,
+      unit: '',
+    },
+    out: 0,
+    outData: {
+      value: 0,
+      unit: '',
+    },
+  };
+  if (store.state.serverList.length) {
+    store.state.serverList.forEach((server) => {
+      if (server.online === 1 && server.State) {
+        if (typeof server.State.NetInTransfer === 'number') {
+          transfer.in += server.State.NetInTransfer;
+        }
+        if (typeof server.State.NetOutTransfer === 'number') {
+          transfer.out += server.State.NetOutTransfer;
+        }
+        if (typeof server.State.NetInSpeed === 'number') {
+          netSpeed.in += server.State.NetInSpeed;
+        }
+        if (typeof server.State.NetOutSpeed === 'number') {
+          netSpeed.out += server.State.NetOutSpeed;
+        }
+      }
+    });
+  }
+  const calcInTransfer = hostUtils.calcBinary(transfer.in);
+  if (calcInTransfer.t > 1) {
+    transfer.inData.value = (calcInTransfer.t).toFixed(1) * 1;
+    transfer.inData.unit = 'T';
+  } else if (calcInTransfer.g > 1) {
+    transfer.inData.value = (calcInTransfer.g).toFixed(1) * 1;
+    transfer.inData.unit = 'G';
+  } else if (calcInTransfer.m > 1) {
+    transfer.inData.value = (calcInTransfer.m).toFixed(1) * 1;
+    transfer.inData.unit = 'M';
+  } else {
+    transfer.inData.value = calcInTransfer.value;
+    transfer.inData.unit = 'K';
+  }
+  const calcOutTransfer = hostUtils.calcBinary(transfer.out);
+  if (calcOutTransfer.t > 1) {
+    transfer.outData.value = (calcOutTransfer.t).toFixed(1) * 1;
+    transfer.outData.unit = 'T';
+  } else if (calcOutTransfer.g > 1) {
+    transfer.outData.value = (calcOutTransfer.g).toFixed(1) * 1;
+    transfer.outData.unit = 'G';
+  } else if (calcOutTransfer.m > 1) {
+    transfer.outData.value = (calcOutTransfer.m).toFixed(1) * 1;
+    transfer.outData.unit = 'M';
+  } else {
+    transfer.outData.value = calcOutTransfer.value;
+    transfer.outData.unit = 'K';
+  }
+  const calcNetInSpeed = hostUtils.calcBinary(netSpeed.in);
+  if (calcNetInSpeed.t > 1) {
+    netSpeed.inData.value = (calcNetInSpeed.t).toFixed(1) * 1;
+    netSpeed.inData.unit = 'T';
+  } else if (calcNetInSpeed.g > 1) {
+    netSpeed.inData.value = (calcNetInSpeed.g).toFixed(1) * 1;
+    netSpeed.inData.unit = 'G';
+  } else if (calcNetInSpeed.m > 1) {
+    netSpeed.inData.value = (calcNetInSpeed.m).toFixed(1) * 1;
+    netSpeed.inData.unit = 'M';
+  } else {
+    netSpeed.inData.value = (calcNetInSpeed.k).toFixed(1) * 1;
+    netSpeed.inData.unit = 'K';
+  }
+  const calcNetOutSpeed = hostUtils.calcBinary(netSpeed.out);
+  if (calcNetOutSpeed.t > 1) {
+    netSpeed.outData.value = (calcNetOutSpeed.t).toFixed(1) * 1;
+    netSpeed.outData.unit = 'T';
+  } else if (calcNetOutSpeed.g > 1) {
+    netSpeed.outData.value = (calcNetOutSpeed.g).toFixed(1) * 1;
+    netSpeed.outData.unit = 'G';
+  } else if (calcNetOutSpeed.m > 1) {
+    netSpeed.outData.value = (calcNetOutSpeed.m).toFixed(1) * 1;
+    netSpeed.outData.unit = 'M';
+  } else {
+    netSpeed.outData.value = (calcNetOutSpeed.k).toFixed(1) * 1;
+    netSpeed.outData.unit = 'K';
+  }
+  return {
+    transfer,
+    netSpeed,
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+.server-stat-group {
+  min-width: 160px;
+
+  @media screen and (max-width: 450px) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 28px;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+    gap: 10px;
+
+    .server-stat-label {
+      display: none;
+    }
+
+    .server-stat-content {
+      gap: 10px;
+    }
+  }
+
+  .server-stat {
+    display: flex;
+    gap: 8px;
+    line-height: 16px;
+    font-size: 12px;
+
+    .server-stat-content {
+      flex: 1;
+      display: flex;
+    }
+
+    .server-stat-item {
+      flex: 1;
+    }
+  }
+
+  .server-stat--transfer {
+    .server-stat-item--in {
+      .text-value {
+        color: var(--transfer-in-color);
+      }
+    }
+
+    .server-stat-item--out {
+      .text-value {
+        color: var(--transfer-out-color);
+      }
+    }
+  }
+
+  .server-stat--net-speed {
+    .server-stat-item--in {
+      .text-value {
+        color: var(--net-speed-in-color);
+      }
+    }
+
+    .server-stat-item--out {
+      .text-value {
+        color: var(--net-speed-out-color);
+      }
+    }
+  }
+}
+</style>