🚀 0.4.4

分完整构建和CDN引用构建 - 拆离fonts字体库 - 拆离图标库
2026-01-11 22:50:42 +08:00 · 2024-12-07 07:52:23 +00:00 · 2024-12-07 07:52:23 +00:00 · 31a8c8a50c
commit 31a8c8a50c
parent 51669134c9
25 changed files with 414 additions and 98 deletions
--- a/.env
+++ b/.env
@ -1,4 +1,11 @@
-# WS_HOST=
-# API_HOST=
-# NEZHA_HOST=
-# NEZHA_HOST_REPACE_PATH=
+#### Sarasa Term SC字体的配置
+# VITE_DISABLE_SARASA_TERM_SC=1
+# VITE_SARASA_TERM_SC_USE_CDN=1
+
+#### 引用库的CDN配置
+# VITE_USE_CDN=1
+# VITE_CDN_LIB_TYPE=jsdelivr # jsdelivr | cdnjs | loli
+
+#### 哪吒的默认版本控制
+# VITE_NEZHA_VERSION=v1 # v0 | v0
+
--- a/.env.development.local.template
+++ b/.env.development.local.template
@ -0,0 +1,11 @@
+# 能反代WS的主机，方便本地ws调试
+PROXY_WS_HOST=
+# API的HOST，/api/xxx会被替换为这个HOST
+API_HOST=
+# WS的HOST，/ws和/api/v1/ws/server会被替换为这个HOST
+WS_HOST=
+# V0开发模式需要一个哪吒地址，用去抓取哪吒的数据
+NEZHA_HOST=
+# VO开发模式，本地会请求/nezha/，此项为1时，会去掉/nezha/
+NEZHA_HOST_REPACE_PATH=1
+
--- a/.github/workflows/docker-build.yml
+++ b/.github/workflows/docker-build.yml
@ -1,6 +1,9 @@
 name: Build and Push Docker Image

 on:
+  push:
+    tags:
+      - 'v*.*.*'
  workflow_dispatch:
    inputs:
      version:
@ -35,13 +38,24 @@ jobs:
    - name: Print version
      run: echo "Version is $VERSION"

-    - name: Build project
+    - name: 构建完整引用版本
      run: npm run build

-    - name: Build Docker image
+    - name: 构建完整引用版本的Docker镜像
      run: |
        docker build -t ghcr.io/${{ github.repository }}:$VERSION .

+    - name: 构建CDN引用版本
+      env:
+        VITE_SARASA_TERM_SC_USE_CDN: '1'
+        VITE_USE_CDN: '1'
+        VITE_CDN_LIB_TYPE: 'jsdelivr'
+      run: npm run build
+
+    - name: 构建CDN引用版本的Docker镜像
+      run: |
+        docker build -t ghcr.io/${{ github.repository }}:$VERSION-cdn .
+
    - name: Log in to GitHub Container Registry
      run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u ${{ github.actor }} --password-stdin

@ -50,3 +64,9 @@ jobs:
        docker push ghcr.io/${{ github.repository }}:$VERSION
        docker tag ghcr.io/${{ github.repository }}:$VERSION ghcr.io/${{ github.repository }}:latest
        docker push ghcr.io/${{ github.repository }}:latest
+
+    - name: Push CDN Docker image
+      run: |
+        docker push ghcr.io/${{ github.repository }}:$VERSION-cdn
+        docker tag ghcr.io/${{ github.repository }}:$VERSION-cdn ghcr.io/${{ github.repository }}:cdn
+        docker push ghcr.io/${{ github.repository }}:cdn
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -1,6 +1,9 @@
 name: Build and Release

 on:
+  push:
+    tags:
+      - 'v*.*.*'
  workflow_dispatch:
    inputs:
      version:
@ -14,6 +17,8 @@ jobs:
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
+      with:
+        fetch-depth: 2  # 获取最近的两次提交

    - name: Setup Node.js
      uses: actions/setup-node@v3
@ -23,9 +28,6 @@ jobs:
    - name: Install dependencies
      run: npm install

-    - name: Build project
-      run: npm run build
-
    - name: Get version from package.json
      id: get_version
      run: echo "::set-output name=version::$(node -p "require('./package.json').version")"
@ -50,30 +52,74 @@ jobs:
        draft: false
        prerelease: false

-    - name: Package first build output
-      run: |
-        zip -r v0-${{ steps.determine_version.outputs.version }}.zip dist
+    - name: 构建v0版本 - 完整引用版本
+      run: npm run build

-    - name: Build project with VITE_NEZHA_VERSION
-      run: |
-        export VITE_NEZHA_VERSION=v1
-        npm run build
+    - name: 打包v0-${{ steps.determine_version.outputs.version }}-all.zip
+      run: zip -r v0-${{ steps.determine_version.outputs.version }}-all.zip dist

-    - name: Package second build output
-      run: |
-        zip -r dist.zip dist
+    - name: 构建v0版本 - JSDeliver引用版本
+      env:
+        VITE_SARASA_TERM_SC_USE_CDN: '1'
+        VITE_USE_CDN: '1'
+        VITE_CDN_LIB_TYPE: 'jsdelivr'
+      run: npm run build

-    - name: Upload Release Asset - First Build
+    - name: 打包v0-${{ steps.determine_version.outputs.version }}-cdn-jsdelivr.zip
+      run: zip -r v0-${{ steps.determine_version.outputs.version }}-cdn-jsdelivr.zip dist
+
+    - name: 构建v0版本 - loli(CDNJS)引用版本
+      env:
+        VITE_SARASA_TERM_SC_USE_CDN: '1'
+        VITE_USE_CDN: '1'
+        VITE_CDN_LIB_TYPE: 'loli'
+      run: npm run build
+
+    - name: 打包v0-${{ steps.determine_version.outputs.version }}-cdn-loli.zip
+      run: zip -r v0-${{ steps.determine_version.outputs.version }}-cdn-loli.zip dist
+
+    - name: 构建哪吒v1内置版本
+      env:
+        VITE_NEZHA_VERSION: 'v1'
+        VITE_SARASA_TERM_SC_USE_CDN: '1'
+        VITE_USE_CDN: '1'
+        VITE_CDN_LIB_TYPE: 'jsdelivr'
+      run: npm run build
+
+    - name: 打包dist.zip
+      run: zip -r dist.zip dist
+
+    - name: Upload v0-${{ steps.determine_version.outputs.version }}-all.zip
      uses: actions/upload-release-asset@v1
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      with:
        upload_url: ${{ steps.create_release.outputs.upload_url }}
-        asset_path: ./v0-${{ steps.determine_version.outputs.version }}.zip
-        asset_name: v0-${{ steps.determine_version.outputs.version }}.zip
+        asset_path: ./v0-${{ steps.determine_version.outputs.version }}-all.zip
+        asset_name: v0-${{ steps.determine_version.outputs.version }}-all.zip
        asset_content_type: application/zip

-    - name: Upload Release Asset - Second Build
+    - name: Upload v0-${{ steps.determine_version.outputs.version }}-cdn-jsdelivr.zip
+      uses: actions/upload-release-asset@v1
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      with:
+        upload_url: ${{ steps.create_release.outputs.upload_url }}
+        asset_path: ./v0-${{ steps.determine_version.outputs.version }}-cdn-jsdelivr.zip
+        asset_name: v0-${{ steps.determine_version.outputs.version }}-cdn-jsdelivr.zip
+        asset_content_type: application/zip
+
+    - name: Upload v0-${{ steps.determine_version.outputs.version }}-cdn-loli.zip
+      uses: actions/upload-release-asset@v1
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      with:
+        upload_url: ${{ steps.create_release.outputs.upload_url }}
+        asset_path: ./v0-${{ steps.determine_version.outputs.version }}-cdn-loli.zip
+        asset_name: v0-${{ steps.determine_version.outputs.version }}-cdn-loli.zip
+        asset_content_type: application/zip
+
+    - name: Upload dist.zip
      uses: actions/upload-release-asset@v1
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@ -85,8 +131,20 @@ jobs:

    - name: Add release notes
      run: |
+        # 获取最近一次提交的变更内容
+        git diff HEAD^ HEAD --name-only > changes.txt
+
+        # 获取现有的发布说明
        gh release view v${{ steps.determine_version.outputs.version }} --json body -q .body > body.txt
-        echo -e "哪吒V1请下载dist.zip\n哪吒V0请下载v0-${{ steps.determine_version.outputs.version }}.zip" >> body.txt
+
+        # 将变更内容添加到发布说明中
+        echo -e "### Changes in this release\n" >> body.txt
+        cat changes.txt >> body.txt
+
+        # 添加其他发布说明
+        echo -e "\n哪吒V1请下载dist.zip\n哪吒V0请下载v0-${{ steps.determine_version.outputs.version }}-all.zip\n至于all是全量的，cdn-jsdelivr是jsdelivr引用版，cdn-loli是cdnjs引用版\nv0版本构建物通过修改./config.js指定nezhaVersion版本可以正常在v1中使用" >> body.txt
+
+        # 更新发布说明
        gh release edit v${{ steps.determine_version.outputs.version }} --notes-file body.txt
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/package.json
+++ b/package.json
@ -1,10 +1,11 @@
 {
  "name": "nazhua",
-  "version": "0.4.3",
+  "version": "0.4.4",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
+    "build:cdn": "cross-env VITE_SARASA_TERM_SC_USE_CDN=1 VITE_USE_CDN=1 vite build",
    "preview": "vite preview",
    "lint": "eslint ."
  },
@ -27,13 +28,15 @@
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@vitejs/plugin-vue": "^5.1.4",
    "@vue/eslint-config-airbnb": "^7.0.0",
+    "cross-env": "^7.0.3",
    "dotenv": "^16.4.5",
    "eslint": "^8.34.0",
    "eslint-plugin-vue": "^9.9.0",
    "sass": "^1.81.0",
    "vite": "^5.4.10",
    "vite-plugin-babel": "^1.2.0",
-    "vite-plugin-eslint": "^1.8.1"
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-svg-loader": "^5.1.0"
  },
  "repository": {
    "type": "git",
--- a/readme.md
+++ b/readme.md
@ -1,6 +1,7 @@
 # Nazhua
 基于哪吒监控(nezha.wiki)v0版本构建的前端主题，目前兼容与v0相同数据结构的v1版本。  
-主题有点**重**，因为内置了一个带中文的`SarasaTermSC-SemiBold`字体。  
+~~主题有点**重**，因为内置了一个带中文的`SarasaTermSC-SemiBold`字体。~~  
+根据不同场景，可以选择是否打包带入或者是否加载这个字体。  

 ## 劝退指南 用前必读
 1. 本主题是基于哪吒监控v0版本构建的，不确定能否完美v1版本。*20241206的版本已适配*  
@ -13,7 +14,7 @@
 默认的数据是基于V0  
 ### Release版本的nazhua  
 V1下载最新版本[Releases](https://github.com/hi2shark/nazhua/releases)的`dist.zip`；  
-V0下载最新版本[Releases](https://github.com/hi2shark/nazhua/releases)的`v0-X.X.X.zip`;  
+V0下载最新版本[Releases](https://github.com/hi2shark/nazhua/releases)的`v0-{版本}-all.zip`或`v0-{版本}.zip`;  

 ## 关于点阵地图  
 点阵地图是一个失真的地图，地图边际与城市位置都不是真实的经纬度坐标，因此无法通过经纬度来定位城市。  
@ -103,9 +104,16 @@ services:
 ```
 建议通过docker-compose部署服务，然后通过cloudflare的tunnels向外提供服务，可以不用自己配置https证书。  
 **再次提示，哪吒V1的必须设置config.js中的nezhaVersion为v1**  
+**如果不想加载完整的内置库，可以使用cdn引用镜像**  
+例如：`ghcr.io/hi2shark/nazhua:latest`替换为`ghcr.io/hi2shark/nazhua:cdn`  

 ### Nginx配置示例
 ```nginx
+map $http_upgrade $connection_upgrade {
+    default upgrade;
+    ''      close;
+}
+
 server {
  listen 80;
  server_name nazhua.example.com;
--- a/src/App.vue
+++ b/src/App.vue
@ -7,6 +7,8 @@
 <script setup>
 import {
  ref,
+  computed,
+  watch,
  provide,
  onMounted,
 } from 'vue';
@ -45,10 +47,16 @@ if (isWindows) {
  document.body.classList.add('windows');
 }
 // 是否加载Sarasa Term SC字体
-const loadSarasaTermSC = config.nazhua.disableSarasaTermSC !== true;
-if (loadSarasaTermSC) {
-  document.body.classList.add('sarasa-term-sc');
-}
+const loadSarasaTermSC = computed(() => config.nazhua.disableSarasaTermSC !== true);
+watch(loadSarasaTermSC, (value) => {
+  if (value) {
+    document.body.classList.add('sarasa-term-sc');
+  } else {
+    document.body.classList.remove('sarasa-term-sc');
+  }
+}, {
+  immediate: true,
+});

 /**
 * websocket断连的自动重连
--- a/src/assets/fonts/SarasaTermSC/SarasaTermSC-SemiBold.woff
+++ b/src/assets/fonts/SarasaTermSC/SarasaTermSC-SemiBold.woff
--- a/src/assets/fonts/SarasaTermSC/SarasaTermSC-SemiBold.woff2
+++ b/src/assets/fonts/SarasaTermSC/SarasaTermSC-SemiBold.woff2
--- a/src/assets/fonts/SarasaTermSC/cdn-font.css
+++ b/src/assets/fonts/SarasaTermSC/cdn-font.css
@ -0,0 +1,6 @@
+@font-face {
+  font-family: "Sarasa Term SC";
+  src: url("https://cdn.jsdelivr.net/gh/hi2shark/nazhua@main/fonts/SarasaTermSC/SarasaTermSC-SemiBold.woff2") format("woff2"),
+    url("https://cdn.jsdelivr.net/gh/hi2shark/nazhua@main/fonts/SarasaTermSC/SarasaTermSC-SemiBold.woff") format("woff");
+  font-display: swap;
+}
--- a/src/assets/fonts/SarasaTermSC/font.css
+++ b/src/assets/fonts/SarasaTermSC/font.css
@ -0,0 +1,6 @@
+@font-face {
+  font-family: "Sarasa Term SC";
+  src: url("./SarasaTermSC-SemiBold.woff2") format("woff2"),
+    url("./SarasaTermSC-SemiBold.woff") format("woff");
+  font-display: swap;
+}
--- a/src/assets/scss/base.scss
+++ b/src/assets/scss/base.scss
@ -4,8 +4,8 @@ body {
  line-height: 1.8;
  font-size: 14px;
  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'HanHei SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', sans-serif;
-  color: #555;
-  background: #fff;
+  color: var(--global-text-color);
+  background: var(--global-background-color);
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
 }
@ -97,7 +97,7 @@ a:hover {
 }

 a {
-  color: #369;
+  color: var(--global-link-color);
  transition: color 150ms linear;
  cursor: pointer;
 }
@ -141,24 +141,3 @@ h6 {
 div:focus {
  outline: none;
 }
-
-@font-face {
-  font-family: "Sarasa Term SC";
-  src: url("../fonts/SarasaTermSC-SemiBold.woff2") format("woff2"),
-    url("../fonts/SarasaTermSC-SemiBold.woff2") format("woff");
-  font-display: swap;
-}
-
-body.sarasa-term-sc {
-  font-family:
-    "Sarasa Term SC",
-    'Microsoft YaHei',
-    '微软雅黑',
-    'PingFang SC',
-    'HanHei SC',
-    'Helvetica Neue',
-    'Helvetica',
-    'STHeitiSC-Light',
-    'Arial',
-    sans-serif;
-}
--- a/src/assets/scss/sarasa-term-sc.scss
+++ b/src/assets/scss/sarasa-term-sc.scss
@ -0,0 +1,13 @@
+body.sarasa-term-sc {
+  font-family:
+    "Sarasa Term SC",
+    'Microsoft YaHei',
+    '微软雅黑',
+    'PingFang SC',
+    'HanHei SC',
+    'Helvetica Neue',
+    'Helvetica',
+    'STHeitiSC-Light',
+    'Arial',
+    sans-serif;
+}
--- a/src/assets/scss/variables.scss
+++ b/src/assets/scss/variables.scss
@ -7,6 +7,10 @@

  --detail-container-width: 900px;

+  --global-background-color: #392f41;
+  --global-text-color: #ddd;
+  --global-link-color: #2ca9e1;
+
  --layout-main-bg-color: rgba(20, 30, 40, 0.75);
  --layout-bg-color: #252748;
  
--- a/src/components/world-map/world-map-point.vue
+++ b/src/components/world-map/world-map-point.vue
@ -58,6 +58,9 @@ function handleClick() {
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
+  :hover {
+    z-index: 100;
+  }

  .point-block {
    position: absolute;
--- a/src/config/index.js
+++ b/src/config/index.js
@ -7,6 +7,9 @@ const defaultNezhaVersion = import.meta.env.VITE_NEZHA_VERSION;
 const config = reactive({
  nazhua: {
    title: '哪吒监控',
+    // 如果打包禁用 Sarasa Term SC 字体，默认为禁用该字体的配置
+    disableSarasaTermSC: import.meta.env.VITE_DISABLE_SARASA_TERM_SC === '1',
+
    nezhaVersion: ['v0', 'v1'].includes(defaultNezhaVersion) ? defaultNezhaVersion : 'v0',
    apiMonitorPath: '/api/v1/monitor/{id}',
    wsPath: '/ws',
@ -27,5 +30,7 @@ export function mergeNazhuaConfig(customConfig) {
    config.nazhua[key] = customConfig[key];
  });
 }
+// 暴露合并配置方法
+window.$mergeNazhuaConfig = mergeNazhuaConfig;

 export default config;
--- a/src/layout/components/header.vue
+++ b/src/layout/components/header.vue
@ -127,7 +127,6 @@
 */
 import {
  computed,
-  onMounted,
 } from 'vue';
 import {
  useStore,
@ -154,10 +153,10 @@ const headerStyle = computed(() => {
  return style;
 });

-const showServerCount = config.nazhua.hideNavbarServerCount !== true;
+const showServerCount = computed(() => config.nazhua.hideNavbarServerCount !== true);
 const serverCount = computed(() => store.state.serverCount);

-const showServerStat = config.nazhua.hideNavbarServerStat !== true;
+const showServerStat = computed(() => config.nazhua.hideNavbarServerStat !== true);
 const serverStat = computed(() => {
  const transfer = {
    in: 0,
@ -262,10 +261,10 @@ const headerClass = computed(() => {
  if (route.name === 'ServerDetail') {
    classes.push('layout-header--detail');
  }
-  if (showServerStat) {
+  if (showServerStat.value) {
    classes.push('layout-header--show-server-stat');
  }
-  if (showServerCount) {
+  if (showServerCount.value) {
    classes.push('layout-header--show-server-count');
  }
  return classes;
@ -284,11 +283,7 @@ const showDashboardBtn = [
  config.nazhua.v1HideNezhaDashboardBtn !== false,
 ].every((item) => item);
 const userLogin = computed(() => store.state.profile?.username);
-const dashboardUrl = config.nazhua.v1DashboardUrl || '/dashboard';
-
-onMounted(() => {
-  title.value = config.nazhua.title;
-});
+const dashboardUrl = computed(() => config.nazhua.v1DashboardUrl || '/dashboard');
 </script>

 <style lang="scss" scoped>
--- a/src/load.js
+++ b/src/load.js
@ -0,0 +1,51 @@
+// 是否禁用 Sarasa Term SC 字体
+if (import.meta.env.VITE_DISABLE_SARASA_TERM_SC !== '1') {
+  if (import.meta.env.VITE_SARASA_TERM_SC_USE_CDN) {
+    import('./assets/fonts/SarasaTermSC/cdn-font.css');
+  } else {
+    import('./assets/fonts/SarasaTermSC/font.css');
+  }
+  import('./assets/scss/sarasa-term-sc.scss');
+}
+
+/**
+ * 使用 CDN 加载 CSS 文件
+ */
+function useCdnCss(item) {
+  const cdnType = import.meta.env.VITE_CDN_LIB_TYPE;
+  let cssUrl = item.jsdelivr;
+  if (['cdnjs', 'loli'].includes(cdnType)) {
+    cssUrl = item.cdnjs;
+    if (cdnType === 'loli') {
+      cssUrl = cssUrl.replace('https://cdnjs.cloudflare.com/', 'https://cdn.loli.net/');
+    }
+  }
+  const cdnStylesheet = document.createElement('link');
+  cdnStylesheet.rel = 'stylesheet';
+  cdnStylesheet.href = cssUrl;
+  document.head.appendChild(cdnStylesheet);
+}
+
+// 判断是否使用 CDN
+if (import.meta.env.VITE_USE_CDN) {
+  Object.entries({
+    remixicon: {
+      jsdelivr: 'https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css',
+      cdnjs: 'https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.5.0/remixicon.css',
+    },
+    flagIcons: {
+      jsdelivr: 'https://cdn.jsdelivr.net/npm/flag-icons/css/flag-icons.min.css',
+      cdnjs: 'https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.3/css/flag-icons.min.css',
+    },
+    fontLogos: {
+      jsdelivr: 'https://cdn.jsdelivr.net/npm/font-logos/assets/font-logos.css',
+      cdnjs: 'https://cdnjs.cloudflare.com/ajax/libs/font-logos/1.3.0/assets/font-logos.css',
+    },
+  }).forEach(([, item]) => {
+    useCdnCss(item);
+  });
+} else {
+  import('remixicon/fonts/remixicon.css');
+  import('flag-icons/css/flag-icons.min.css');
+  import('font-logos/assets/font-logos.css');
+}
--- a/src/use.js
+++ b/src/use.js
@ -1,6 +1,4 @@
-import 'remixicon/fonts/remixicon.css';
-import 'flag-icons/css/flag-icons.min.css';
-import 'font-logos/assets/font-logos.css';
+import './load';
 import './assets/scss/base.scss';
 import router from './router';
 import store from './store';
@ -12,5 +10,6 @@ export default (app) => {
  app.use(router);
  app.use(store);
  app.component('DotDotBox', DotDotBox);
+
  app.config.globalProperties.$config = config;
 };
--- a/src/views/components/server-detail/server-info-box.vue
+++ b/src/views/components/server-detail/server-info-box.vue
@ -205,7 +205,7 @@ const props = defineProps({
  },
 });

-const buyBtnText = config.nazhua.buyBtnText || '购买';
+const buyBtnText = computed(() => config.nazhua.buyBtnText || '购买');
 const showBuyBtn = computed(() => !!props.info?.PublicNote?.customData?.orderLink);

 function toBuy() {
--- a/src/views/components/server-list/server-list-item-bill.vue
+++ b/src/views/components/server-list/server-list-item-bill.vue
@ -93,7 +93,7 @@ const {
  props,
 });

-const buyBtnText = config.nazhua.buyBtnText || '购买';
+const buyBtnText = computed(() => config.nazhua.buyBtnText || '购买');
 const showBuyBtn = computed(() => !!props.info?.PublicNote?.customData?.orderLink);

 function toBuy() {
--- a/src/views/components/server-list/server-list-item.vue
+++ b/src/views/components/server-list/server-list-item.vue
@ -41,21 +41,21 @@
      </div>
    </div>
    <div
-      v-if="showStatus || showStatus"
+      v-if="$config.nazhua.hideListItemStatusDonut !== true && $config.nazhua.hideListItemStat !== true"
      class="server-list-item-main"
      @click="openDetail"
    >
      <server-list-item-status
-        v-if="showStatus"
+        v-if="$config.nazhua.hideListItemStatusDonut !== true"
        :info="info"
      />
      <server-real-time
-        v-if="showStat"
+        v-if="$config.nazhua.hideListItemStat !== true"
        :info="info"
      />
    </div>
    <server-list-item-bill
-      v-if="showBill"
+      v-if="$config.nazhua.hideListItemBill !== true"
      :info="info"
    />
  </dot-dot-box>
@ -70,8 +70,6 @@ import {
  useRouter,
 } from 'vue-router';

-import config from '@/config';
-
 import handleServerInfo from '@/views/composable/server-info';
 import ServerRealTime from '@/views/components/server/server-real-time.vue';
 import ServerListItemStatus from './server-list-item-status.vue';
@ -101,10 +99,6 @@ function openDetail() {
    },
  });
 }
-
-const showStatus = config.nazhua.hideListItemStatusDonut !== true;
-const showStat = config.nazhua.hideListItemStat !== true;
-const showBill = config.nazhua.hideListItemBill !== true;
 </script>

 <style lang="scss" scoped>
--- a/src/views/home.vue
+++ b/src/views/home.vue
@ -74,13 +74,22 @@ import ServerItem from './components/server-list/server-list-item.vue';
 const store = useStore();
 const worldMapWidth = ref();

-const showFilter = config.nazhua.hideFilter !== true;
+const showFilter = computed(() => config.nazhua.hideFilter !== true);
 const filterFormData = ref({
  tag: '',
  online: '',
 });
 // 是否显示标签
-const showTag = config.nazhua.hideTag !== true;
+const showTag = computed(() => {
+  if (config.nazhua.hideGroup === true) {
+    return false;
+  }
+  // hideTag与hideGroup是相同的配置，兼容旧版
+  if (config.nazhua.hideTag === true) {
+    return false;
+  }
+  return true;
+});

 // 服务器列表
 const serverList = computed(() => store.state.serverList);
--- a/vite.config.js
+++ b/vite.config.js
@ -4,6 +4,7 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import babel from 'vite-plugin-babel';
 import eslintPlugin from 'vite-plugin-eslint';
+import svgLoader from 'vite-svg-loader';
 import packageJson from './package';

 dotenv.config({
@ -25,23 +26,23 @@ export default defineConfig({
        changeOrigin: true,
      },
      '/ws': {
-        target: process.env.WS_HOST,
+        target: process.env.PROXY_WS_HOST || process.env.WS_HOST,
        changeOrigin: true,
        ws: true,
        rewrite: (e) => {
-          if (process.env.REWRITE_WS_HOST) {
-            return `/proxy?wsPath=${process.env.REWRITE_WS_HOST}`;
+          if (process.env.PROXY_WS_HOST) {
+            return `/proxy?wsPath=${process.env.WS_HOST}`;
          }
          return e;
        },
      },
      '/api/v1/ws/server': {
-        target: process.env.WS_HOST,
+        target: process.env.PROXY_WS_HOST || process.env.WS_HOST,
        changeOrigin: true,
        ws: true,
        rewrite: (e) => {
-          if (process.env.REWRITE_WS_HOST) {
-            return `/proxy?wsPath=${process.env.REWRITE_WS_HOST}`;
+          if (process.env.PROXY_WS_HOST) {
+            return `/proxy?wsPath=${process.env.WS_HOST}`;
          }
          return e;
        },
@ -75,11 +76,31 @@ export default defineConfig({
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'],
    }),
+    svgLoader(),
  ],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src/'),
-      '~@': path.resolve(__dirname, './src/'),
+  build: {
+    assetsInlineLimit: 8192, // 8KB 以下的资源会被内联
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+            return 'vendor';
+          }
+          if (id.includes('.svg')) {
+            return 'svg';
+          }
+          return 'default';
+        },
+      },
    },
  },
+  resolve: {
+    alias: (() => {
+      const maps = {
+        '@': path.resolve(__dirname, './src/'),
+        '~@': path.resolve(__dirname, './src/'),
+      };
+      return maps;
+    })(),
+  },
 });
--- a/yarn.lock
+++ b/yarn.lock
@ -615,6 +615,11 @@
  resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
  integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==

+"@trysound/sax@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
+  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
+
 "@types/eslint@^8.4.5":
  version "8.56.12"
  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.12.tgz#1657c814ffeba4d2f84c0d4ba0f44ca7ea1ca53a"
@ -1004,6 +1009,11 @@ combined-stream@^1.0.8:
  dependencies:
    delayed-stream "~1.0.0"

+commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 concat-map@0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@ -1019,7 +1029,14 @@ convert-source-map@^2.0.0:
  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==

-cross-spawn@^7.0.2:
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
+cross-spawn@^7.0.1, cross-spawn@^7.0.2:
  version "7.0.6"
  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
@ -1028,11 +1045,50 @@ cross-spawn@^7.0.2:
    shebang-command "^2.0.0"
    which "^2.0.1"

+css-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.1.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
+    nth-check "^2.0.1"
+
+css-tree@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
+  integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==
+  dependencies:
+    mdn-data "2.0.30"
+    source-map-js "^1.0.1"
+
+css-tree@~2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.2.1.tgz#36115d382d60afd271e377f9c5f67d02bd48c032"
+  integrity sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==
+  dependencies:
+    mdn-data "2.0.28"
+    source-map-js "^1.0.1"
+
+css-what@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
 cssesc@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==

+csso@^5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-5.0.5.tgz#f9b7fe6cc6ac0b7d90781bb16d5e9874303e2ca6"
+  integrity sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==
+  dependencies:
+    css-tree "~2.2.0"
+
 csstype@^3.1.3:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@ -1136,6 +1192,36 @@ doctrine@^3.0.0:
  dependencies:
    esutils "^2.0.2"

+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
+domutils@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 dotenv@^16.4.5:
  version "16.4.5"
  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f"
@ -1164,7 +1250,7 @@ emoji-regex@^9.2.2:
  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==

-entities@^4.5.0:
+entities@^4.2.0, entities@^4.5.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@ -2156,6 +2242,16 @@ magic-string@^0.30.11:
  dependencies:
    "@jridgewell/sourcemap-codec" "^1.5.0"

+mdn-data@2.0.28:
+  version "2.0.28"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.28.tgz#5ec48e7bef120654539069e1ae4ddc81ca490eba"
+  integrity sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==
+
+mdn-data@2.0.30:
+  version "2.0.30"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
+  integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
+
 micromatch@^4.0.5:
  version "4.0.8"
  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
@ -2213,7 +2309,7 @@ node-releases@^2.0.18:
  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f"
  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==

-nth-check@^2.1.1:
+nth-check@^2.0.1, nth-check@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
@ -2601,7 +2697,7 @@ side-channel@^1.0.4, side-channel@^1.0.6:
    get-intrinsic "^1.2.4"
    object-inspect "^1.13.1"

-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.0, source-map-js@^1.2.1:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.0, source-map-js@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
@ -2698,6 +2794,19 @@ supports-preserve-symlinks-flag@^1.0.0:
  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==

+svgo@^3.0.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-3.3.2.tgz#ad58002652dffbb5986fc9716afe52d869ecbda8"
+  integrity sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==
+  dependencies:
+    "@trysound/sax" "0.2.0"
+    commander "^7.2.0"
+    css-select "^5.1.0"
+    css-tree "^2.3.1"
+    css-what "^6.1.0"
+    csso "^5.0.5"
+    picocolors "^1.0.0"
+
 text-table@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@ -2825,6 +2934,13 @@ vite-plugin-eslint@^1.8.1:
    "@types/eslint" "^8.4.5"
    rollup "^2.77.2"

+vite-svg-loader@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/vite-svg-loader/-/vite-svg-loader-5.1.0.tgz#b0b89bd8024bc0f707d0e8d7422446ac01576d94"
+  integrity sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==
+  dependencies:
+    svgo "^3.0.2"
+
 vite@^5.4.10:
  version "5.4.11"
  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.11.tgz#3b415cd4aed781a356c1de5a9ebafb837715f6e5"