🚀 0.4.4

分完整构建和CDN引用构建
- 拆离fonts字体库
- 拆离图标库

.env

@@ -1,4 +1,11 @@
-# WS_HOST=
+#### Sarasa Term SC字体的配置
-# API_HOST=
+# VITE_DISABLE_SARASA_TERM_SC=1
-# NEZHA_HOST=
+# VITE_SARASA_TERM_SC_USE_CDN=1
-# NEZHA_HOST_REPACE_PATH=
+
+#### 引用库的CDN配置
+# VITE_USE_CDN=1
+# VITE_CDN_LIB_TYPE=jsdelivr # jsdelivr | cdnjs | loli
+
+#### 哪吒的默认版本控制
+# VITE_NEZHA_VERSION=v1 # v0 | v0
+

.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
+

.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

.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
+    - name: 构建v0版本 - 完整引用版本
-      run: |
+      run: npm run build
-        zip -r v0-${{ steps.determine_version.outputs.version }}.zip dist
 
-    - name: Build project with VITE_NEZHA_VERSION
+    - name: 打包v0-${{ steps.determine_version.outputs.version }}-all.zip
-      run: |
+      run: zip -r v0-${{ steps.determine_version.outputs.version }}-all.zip dist
-        export VITE_NEZHA_VERSION=v1
-        npm run build
 
-    - name: Package second build output
+    - name: 构建v0版本 - JSDeliver引用版本
-      run: |
+      env:
-        zip -r dist.zip dist
+        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_path: ./v0-${{ steps.determine_version.outputs.version }}-all.zip
-        asset_name: v0-${{ steps.determine_version.outputs.version }}.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 }}

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",

readme.md

@@ -1,6 +1,7 @@
 # Nazhua
 基于哪吒监控(nezha.wiki)v0版本构建的前端主题，目前兼容与v0相同数据结构的v1版本。  
-主题有点**重**，因为内置了一个带中文的`SarasaTermSC-SemiBold`字体。  
+~~主题有点**重**，因为内置了一个带中文的`SarasaTermSC-SemiBold`字体。~~  
+根据不同场景，可以选择是否打包带入或者是否加载这个字体。  
 
 ## 劝退指南 用前必读
 1. 本主题是基于哪吒监控v0版本构建的，不确定能否完美v1版本。*20241206的版本已适配*  
@@ -11,9 +12,9 @@
 ### Docker版本的nazhua
 使用V1必须在`config.js`中指定`nezhaVersion`的版本为`v1`，**大小写敏感*  
 默认的数据是基于V0  
-### Release版本的nazhua
+### 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;

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;
+const loadSarasaTermSC = computed(() => config.nazhua.disableSarasaTermSC !== true);
-if (loadSarasaTermSC) {
+watch(loadSarasaTermSC, (value) => {
-  document.body.classList.add('sarasa-term-sc');
+  if (value) {
-}
+    document.body.classList.add('sarasa-term-sc');
+  } else {
+    document.body.classList.remove('sarasa-term-sc');
+  }
+}, {
+  immediate: true,
+});
 
 /**
  * websocket断连的自动重连

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;
+}

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;
+}

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;
+  color: var(--global-text-color);
-  background: #fff;
+  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;
-}

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;
+}

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;
   

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;

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;

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';
+const dashboardUrl = computed(() => config.nazhua.v1DashboardUrl || '/dashboard');
-
-onMounted(() => {
-  title.value = config.nazhua.title;
-});
 </script>
 
 <style lang="scss" scoped>

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');
+}

src/use.js

@@ -1,6 +1,4 @@
-import 'remixicon/fonts/remixicon.css';
+import './load';
-import 'flag-icons/css/flag-icons.min.css';
-import 'font-logos/assets/font-logos.css';
 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;
 };

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() {

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() {

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>

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);

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) {
+          if (process.env.PROXY_WS_HOST) {
-            return `/proxy?wsPath=${process.env.REWRITE_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) {
+          if (process.env.PROXY_WS_HOST) {
-            return `/proxy?wsPath=${process.env.REWRITE_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: {
+  build: {
-    alias: {
+    assetsInlineLimit: 8192, // 8KB 以下的资源会被内联
-      '@': path.resolve(__dirname, './src/'),
+    rollupOptions: {
-      '~@': path.resolve(__dirname, './src/'),
+      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;
+    })(),
+  },
 });

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"