🚀 0.5.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nazhua",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

public/config.js

@@ -9,12 +9,13 @@ window.$$nazhuaConfig = {
   // lightBackground: true, // 启用了浅色系背景图，会强制关闭点点背景
   // showFireworks: true, // 是否显示烟花，建议开启浅色系背景
   // showLantern: true, // 是否显示灯笼
+  enableInnerSearch: true, // 启用内部搜索
   // listServerItemTypeToggle: true, // 服务器列表项类型切换
   // listServerItemType: 'row', // 服务器列表项类型 card/row row列表模式移动端自动切换至card
   // listServerStatusType: 'progress', // 服务器状态类型--列表
   // listServerRealTimeShowLoad: true, // 列表显示服务器实时负载
   // detailServerStatusType: 'progress', // 服务器状态类型--详情页
-  // serverStatusLinear: true, // 服务器状态渐变线性显示
+  serverStatusLinear: true, // 服务器状态渐变线性显示
   // disableSarasaTermSC: true, // 禁用Sarasa Term SC字体
   // hideWorldMap: false, // 隐藏地图
   // hideHomeWorldMap: false, // 隐藏首页地图

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>

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,105 +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) {
-        transfer.in += server.State.NetInTransfer;
-        transfer.out += server.State.NetOutTransfer;
-        netSpeed.in += server.State.NetInSpeed;
-        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);
 
@@ -287,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>
@@ -324,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;
@@ -376,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>

src/layout/components/search-box.vue

@@ -0,0 +1,328 @@
+<template>
+  <transition name="fadeIn">
+    <div
+      v-if="show"
+      class="search-box-background"
+      @click="closeSearchBox"
+    />
+  </transition>
+  <transition name="fadeIn">
+    <div
+      v-if="show"
+      class="search-box-group"
+    >
+      <div class="search-box">
+        <input
+          ref="searchInputRef"
+          v-model.trim="searchWord"
+          type="text"
+          placeholder="可搜索服务器名称、标签、系统、国别代码"
+          class="search-box-input"
+          @input="onSearchInput"
+          @keydown.enter="onSearchInput"
+          @blur="onSearchInput"
+        />
+        <span
+          v-if="searchWord"
+          class="clear-btn"
+          @click="clearSearchWord"
+        >
+          <i class="clear-icon ri-close-fill" />
+        </span>
+      </div>
+      <div class="result-server-list-container">
+        <div class="search-list">
+          <search-list-item
+            v-for="item in searchResult"
+            :key="item.ID"
+            :info="item"
+            @open-detail="openDetail"
+          />
+        </div>
+      </div>
+    </div>
+  </transition>
+
+  <div
+    class="search-active-btn"
+    @click="activeSearchBox"
+  >
+    <span class="icon">
+      <i class="ri-search-eye-line" />
+    </span>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 搜索盒子
+ */
+
+import {
+  computed,
+  ref,
+  onMounted,
+  onUnmounted,
+} from 'vue';
+import {
+  useStore,
+} from 'vuex';
+import {
+  useRouter,
+} from 'vue-router';
+
+import SearchListItem from './search-list-item.vue';
+
+const router = useRouter();
+const store = useStore();
+const serverList = computed(() => store.state.serverList);
+
+const show = ref(false);
+const searchWord = ref('');
+const searchResult = ref([]);
+const searchInputRef = ref(null);
+
+let handleSearchTimer = null;
+function handleSearch() {
+  if (handleSearchTimer) {
+    clearTimeout(handleSearchTimer);
+  }
+  if (!searchWord.value) {
+    searchResult.value = [...serverList.value];
+    return;
+  }
+  handleSearchTimer = setTimeout(() => {
+    handleSearchTimer = null;
+    searchResult.value = serverList.value.filter((item) => {
+      {
+        const matched = item.Name.toLowerCase().includes(searchWord.value.toLowerCase());
+        if (matched) {
+          return true;
+        }
+      }
+      if (item?.PublicNote?.planDataMod) {
+        const {
+          networkRoute = '',
+          extra = '',
+        } = item.PublicNote.planDataMod;
+        return [
+          networkRoute.toLowerCase().includes(searchWord.value.toLowerCase()),
+          extra.toLowerCase().includes(searchWord.value.toLowerCase()),
+          (item.Host.Platform || '').toLowerCase().includes(searchWord.value.toLowerCase()),
+          (item.Host.CountryCode || '').toLowerCase().includes(searchWord.value.toLowerCase()),
+        ].some((match) => match);
+      }
+      return false;
+    });
+  }, 200);
+}
+
+function onSearchInput() {
+  handleSearch();
+}
+
+function clearSearchWord() {
+  searchWord.value = '';
+  searchResult.value = [...serverList.value];
+}
+
+function activeSearchBox() {
+  searchWord.value = '';
+  searchResult.value = [...serverList.value];
+  show.value = true;
+  // 锁定页面滚动
+  document.body.style.overflow = 'hidden';
+
+  // 聚焦到搜索框
+  setTimeout(() => {
+    searchInputRef.value.focus();
+  }, 30);
+}
+
+function closeSearchBox() {
+  show.value = false;
+  document.body.style.overflow = '';
+}
+
+function openDetail(info) {
+  router.push({
+    name: 'ServerDetail',
+    params: {
+      serverId: info.ID,
+    },
+  });
+  closeSearchBox();
+}
+
+function handleKeyDown(event) {
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
+    event.stopPropagation();
+    event.preventDefault();
+    if (show.value) {
+      closeSearchBox();
+    } else {
+      activeSearchBox();
+    }
+  }
+}
+
+function handleEscKey(event) {
+  if (!show.value) {
+    return;
+  }
+  if (event.key === 'Escape') {
+    closeSearchBox();
+    event.stopPropagation();
+    event.preventDefault();
+  }
+}
+
+onMounted(() => {
+  // 监听按下快捷键 Ctrl+K 打开搜索框
+  window.addEventListener('keydown', handleKeyDown);
+  // 监听按下 Esc 关闭搜索框
+  window.addEventListener('keydown', handleEscKey);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown);
+  window.removeEventListener('keydown', handleEscKey);
+});
+</script>
+
+<style lang="scss" scoped>
+.search-box-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+}
+
+.search-box-group {
+  position: fixed;
+  left: 50%;
+  top: 150px;
+  z-index: 1010;
+  transform: translate(-50%, 0);
+  width: 600px;
+  padding: 30px;
+  border-radius: 12px;
+  background-color: rgba(#000, 0.9);
+
+  @media screen and (max-width: 640px) {
+    width: auto;
+    top: 100px;
+    left: 20px;
+    right: 20px;
+    padding: 20px;
+    transform: translate(0, 0);
+  }
+
+  .search-box {
+    position: relative;
+    width: 100%;
+    padding-right: 40px;
+    border-radius: 20px;
+    background: #eee;
+
+    .search-box-input {
+      width: 100%;
+      height: 40px;
+      padding: 0 15px;
+      color: #234;
+      font-size: 14px;
+      background: transparent;
+      border: none;
+      outline: none;
+      transition: 0.3s;
+    }
+
+    .clear-btn {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 40px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      cursor: pointer;
+      transition: 0.3s;
+
+      .clear-icon {
+        font-size: 20px;
+        color: #666;
+      }
+
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+
+  .search-list {
+    margin-top: 10px;
+    height: 300px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    @media screen and (max-width: 640px) {
+      height: 50vh;
+    }
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 4px;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.5);
+      }
+    }
+  }
+}
+
+.search-active-btn {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 10;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(#000, 0.7);
+  cursor: pointer;
+  transition: 0.3s;
+
+  .icon {
+    line-height: 1;
+    font-size: 24px;
+    color: #eee;
+  }
+
+  &:hover {
+    background: rgba(#000, 0.9);
+  }
+}
+
+.fadeIn-enter-active,
+.fadeIn-leave-active {
+  transition: opacity 0.3s ease-in-out;
+}
+.fadeIn-enter-from,
+.fadeIn-leave-to {
+  opacity: 0;
+}
+</style>

src/layout/components/search-list-item.vue

@@ -0,0 +1,104 @@
+<template>
+  <div
+    class="search-list-item"
+    @click="openDetail"
+  >
+    <div class="server-name">
+      {{ info.Name }}
+    </div>
+    <div class="server-tag-list">
+      <span
+        v-for="(tagItem, index) in tagList"
+        :key="`${tagItem}_${index}`"
+        class="tag-item"
+        :class="{
+          'has-sarasa-term': $hasSarasaTerm && config.nazhua.disableSarasaTermSC !== true,
+        }"
+      >
+        {{ tagItem }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+/**
+ * 搜索后的单条展示
+ */
+
+import {
+  computed,
+} from 'vue';
+
+import config from '@/config';
+
+const props = defineProps({
+  info: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emits = defineEmits([
+  'open-detail',
+]);
+
+const tagList = computed(() => {
+  const list = [];
+  const {
+    networkRoute,
+    extra,
+  } = props?.info?.PublicNote?.planDataMod || {};
+  if (networkRoute) {
+    list.push(...networkRoute.split(','));
+  }
+  if (extra) {
+    list.push(...extra.split(','));
+  }
+  // 列表最多显示3个标签
+  return list.slice(0, 3);
+});
+
+function openDetail() {
+  emits('open-detail', props.info);
+}
+
+</script>
+
+<style lang="scss" scoped>
+.search-list-item {
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 8px 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  .server-name {
+    flex: 1;
+    line-height: 30px;
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .server-tag-list {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 30px;
+
+    .tag-item {
+      height: 18px;
+      padding: 0 4px;
+      line-height: 18px;
+      font-size: 12px;
+      color: var(--public-note-tag-color);
+      background: var(--public-note-tag-bg);
+      text-shadow: 1px 1px 2px rgba(#000, 0.2);
+      border-radius: 4px;
+
+      &.has-sarasa-term {
+        line-height: 20px;
+      }
+    }
+  }
+}
+</style>

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>

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>

src/layout/main.vue

@@ -11,6 +11,10 @@
       <layout-header />
       <slot />
       <layout-footer />
+
+      <search-box
+        v-if="enableInnerSearch"
+      />
     </div>
     <template v-if="config.nazhua.showFireworks">
       <fireworks />
@@ -31,6 +35,7 @@ import Fireworks from '@/components/fireworks.vue';
 import Lantern from '@/components/lantern.vue';
 import LayoutHeader from './components/header.vue';
 import LayoutFooter from './components/footer.vue';
+import SearchBox from './components/search-box.vue';
 
 const layoutGroupStyle = computed(() => {
   const style = {};
@@ -48,6 +53,8 @@ const layoutBGStyle = computed(() => {
   }
   return style;
 });
+
+const enableInnerSearch = computed(() => config.nazhua.enableInnerSearch);
 </script>
 
 <style lang="scss" scoped>

src/utils/transform-v1-2-v0.js

@@ -100,7 +100,11 @@ export default function (v1Data) {
           v0Data[key] = Mapping.each(magics[$magic[1]], v1Data);
           if (key === 'State') {
             // 修复Load1、Load5、Load15字段为空时的问题
-            ['Load1', 'Load5', 'Load15'].forEach((k) => {
+            [
+              'Load1', 'Load5', 'Load15',
+              'NetInTransfer', 'NetOutTransfer',
+              'NetInSpeed', 'NetOutSpeed',
+            ].forEach((k) => {
               if (!validate.isSet(v0Data[key][k])) {
                 v0Data[key][k] = 0;
               }

src/views/components/server-detail/server-name.vue

@@ -224,6 +224,17 @@ const platformLogoIconClassName = computed(() => hostUtils.getPlatformLogoIconCl
     .cpu-model-num {
       color: #c7eeff;
     }
+
+    @media screen and (max-width: 500px) {
+      padding-left: 0;
+      margin-top: -7px;
+      line-height: 16px;
+      .cpu-company {
+        height: 16px;
+        line-height: 16px;
+        padding: 0 3px;
+      }
+    }
   }
 }
 </style>