🚀 0.4.13

.github/workflows/release.yml

@@ -18,7 +18,7 @@ jobs:
     - name: Checkout code
       uses: actions/checkout@v3
       with:
-        fetch-depth: 2
+        fetch-depth: 10
 
     - name: Setup Node.js
       uses: actions/setup-node@v3
@@ -52,33 +52,56 @@ jobs:
         draft: false
         prerelease: false
 
-    - name: 构建v0版本 - 完整引用版本
+    - name: 构建自动版 - 完整引用版本
       run: 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: 打包v${{ steps.determine_version.outputs.version }}-all.zip
+      run: zip -r v${{ steps.determine_version.outputs.version }}-all.zip dist
 
-    - name: 构建v0版本 - JSDeliver引用版本
+    - name: 构建自动版 - JSDeliver引用版本
       env:
         VITE_SARASA_TERM_SC_USE_CDN: '1'
         VITE_USE_CDN: '1'
         VITE_CDN_LIB_TYPE: 'jsdelivr'
       run: npm run 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: 打包v${{ steps.determine_version.outputs.version }}-cdn-jsdelivr.zip
+      run: zip -r v${{ steps.determine_version.outputs.version }}-cdn-jsdelivr.zip dist
 
-    - name: 构建v0版本 - loli(CDNJS)引用版本
+    - name: 构建自动版 - 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: 打包v${{ steps.determine_version.outputs.version }}-cdn-loli.zip
+      run: zip -r v${{ steps.determine_version.outputs.version }}-cdn-loli.zip dist
 
-    - name: 构建哪吒v1内置版本
+    - name: 构建哪吒v0子目录版本
+      env:
+        VITE_BASE_PATH: '/nazhua/'
+        VITE_NEZHA_VERSION: 'v0'
+        VITE_SARASA_TERM_SC_USE_CDN: '1'
+        VITE_USE_CDN: '1'
+        VITE_CDN_LIB_TYPE: 'jsdelivr'
+      run: npm run build
+
+    - name: 打包v0-nazhua.zip
+      run: zip -r v0-nazhua.zip dist
+
+    - name: 构建哪吒v0版本
+      env:
+        VITE_NEZHA_VERSION: 'v0'
+        VITE_SARASA_TERM_SC_USE_CDN: '1'
+        VITE_USE_CDN: '1'
+        VITE_CDN_LIB_TYPE: 'jsdelivr'
+      run: npm run build
+
+    - name: 打包v0-dist.zip
+      run: zip -r v0-dist.zip dist
+
+    - name: 构建哪吒v1版本
       env:
         VITE_NEZHA_VERSION: 'v1'
         VITE_SARASA_TERM_SC_USE_CDN: '1'
@@ -89,34 +112,54 @@ jobs:
     - name: 打包dist.zip
       run: zip -r dist.zip dist
 
-    - name: Upload v0-${{ steps.determine_version.outputs.version }}-all.zip
+    - name: Upload v${{ 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 }}-all.zip
-        asset_name: v0-${{ steps.determine_version.outputs.version }}-all.zip
+        asset_path: ./v${{ steps.determine_version.outputs.version }}-all.zip
+        asset_name: v${{ steps.determine_version.outputs.version }}-all.zip
         asset_content_type: application/zip
 
-    - name: Upload v0-${{ steps.determine_version.outputs.version }}-cdn-jsdelivr.zip
+    - name: Upload v${{ 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_path: ./v${{ steps.determine_version.outputs.version }}-cdn-jsdelivr.zip
+        asset_name: v${{ steps.determine_version.outputs.version }}-cdn-jsdelivr.zip
         asset_content_type: application/zip
 
-    - name: Upload v0-${{ steps.determine_version.outputs.version }}-cdn-loli.zip
+    - name: Upload v${{ 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_path: ./v${{ steps.determine_version.outputs.version }}-cdn-loli.zip
+        asset_name: v${{ steps.determine_version.outputs.version }}-cdn-loli.zip
+        asset_content_type: application/zip
+
+    - name: Upload v0-nazhua.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-nazhua.zip
+        asset_name: v0-nazhua.zip
+        asset_content_type: application/zip
+
+    - name: Upload v0-dist.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-dist.zip
+        asset_name: v0-dist.zip
         asset_content_type: application/zip
 
     - name: Upload dist.zip
@@ -131,14 +174,17 @@ jobs:
 
     - name: Add release notes
       run: |
+        # 获取最近一次提交的变更内容
+        git log $(git describe --tags --abbrev=0)..HEAD --pretty=format:"%s%n%b" > change.txt
+
         # 获取现有的发布说明
         gh release view v${{ steps.determine_version.outputs.version }} --json body -q .body > body.txt
 
-        # 获取最近一次提交的变更内容
-        git log $(git describe --tags --abbrev=0)..HEAD --pretty=format:"%s%n%b" >> body.txt
+        # 添加最近一次提交的变更内容
+        echo -e "\n## 变更内容\n$(cat change.txt)" >> body.txt
 
         # 添加其他发布说明
-        echo -e "\n哪吒V1请下载dist.zip\n哪吒V0请下载v0-${{ steps.determine_version.outputs.version }}-cdn-jsdelivr.zip\n -all是全量包，-cdn-jsdelivr是jsdelivr引用版，-cdn-loli是cdnjs的loli.net引用版\nv0版本构建物通过修改./config.js指定nezhaVersion的版本号为'v1'，v1也可以正常使用" >> body.txt
+        echo -e "\n哪吒V1请下载dist.zip\n哪吒V0请下载v0-dist.zip\n哪吒V0/nazhua/子目录需求请下载v0-nazhua.zip\nv${{ steps.determine_version.outputs.version }}-all.zip是全量包\nv${{ steps.determine_version.outputs.version }}-cdn-jsdelivr.zip是jsdelivr引用版\nv${{ steps.determine_version.outputs.version }}-cdn-loli.zip是cdnjs的loli.net引用版" >> body.txt
 
         # 更新发布说明
         gh release edit v${{ steps.determine_version.outputs.version }} --notes-file body.txt

package.json

@@ -1,11 +1,12 @@
 {
   "name": "nazhua",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "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",
+    "build:nazhua": "cross-env VITE_BASE_PATH=/nazhua/ VITE_NEZHA_VERSION=v0 VITE_SARASA_TERM_SC_USE_CDN=1 VITE_USE_CDN=1 vite build",
     "preview": "vite preview",
     "lint": "eslint ."
   },

public/config.js

@@ -4,6 +4,7 @@ window.$$nazhuaConfig = {
   // infinityCycle: '长期有效', // 无限周期名称
   // buyBtnText: '购买', // 购买按钮文案
   // listServerStatusType: 'progress', // 服务器状态类型--列表
+  // listServerRealTimeShowLoad: false, // 列表显示服务器实时负载
   // detailServerStatusType: 'progress', // 服务器状态类型--详情页
   // disableSarasaTermSC: false, // 禁用Sarasa Term SC字体
   // hideWorldMap: false, // 隐藏地图

readme.md

@@ -246,8 +246,21 @@ window.$$nazhuaConfig = {
 ## 二次开发提示
 `.env.development.local`配置变量
 ```bash
-WS_HOST=http://127.0.0.1:9288 # 本地nezha ws反代
-API_HOST=http://nezha-dashboard.example.com # 本地nezha api反代
-NEZHA_HOST=http://nezha-dashboard.example.com # 本地nezha主页反代
-NEZHA_HOST_REPACE_PATH=1 # 是否替换主页路径`/nezha/`
+#### 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
+
+#### 本地开发设置
+# PROXY_WS_HOST= # 本地开发时，可以代理WS服务的地址，启用后，自动转发至 {PROXY_WS_HOST}/proxy?wsPath={WS_HOST}
+# API_HOST= # 本地开发时，代理的API服务地址
+# WS_HOST= # 本地开发时，代理的WS服务地址
+##### 仅限v0版本
+# NEZHA_HOST= # 本地开发时，代理的哪吒主页地址
 ```

src/App.vue

@@ -14,7 +14,9 @@ import {
 } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
-import config from '@/config';
+import config, {
+  init as initConfig,
+} from '@/config';
 import sleep from '@/utils/sleep';
 import LayoutMain from './layout/main.vue';
 
@@ -76,6 +78,11 @@ async function wsReconnect() {
 onMounted(async () => {
   refreshTime();
 
+  // 如果没有配置哪吒版本，尝试载入 v1 版本配置
+  if (!config.init) {
+    await initConfig();
+  }
+
   /**
    * 初始化服务器信息
    */

src/config/index.js

@@ -1,16 +1,20 @@
 import {
   reactive,
 } from 'vue';
+import {
+  loadProfile as loadNezhaV1Profile,
+} from '@/utils/load-nezha-v1-config';
 
 const defaultNezhaVersion = import.meta.env.VITE_NEZHA_VERSION;
 
 const config = reactive({
+  init: false,
   nazhua: {
     title: '哪吒监控',
     // 如果打包禁用 Sarasa Term SC 字体，默认为禁用该字体的配置
     disableSarasaTermSC: import.meta.env.VITE_DISABLE_SARASA_TERM_SC === '1',
 
-    nezhaVersion: ['v0', 'v1'].includes(defaultNezhaVersion) ? defaultNezhaVersion : 'v0',
+    nezhaVersion: ['v0', 'v1'].includes(defaultNezhaVersion) ? defaultNezhaVersion : null,
     apiMonitorPath: '/api/v1/monitor/{id}',
     wsPath: '/ws',
     nezhaPath: '/nezha/',
@@ -25,6 +29,10 @@ const config = reactive({
   },
 });
 
+if (config.nazhua.nezhaVersion) {
+  config.init = true;
+}
+
 export function mergeNazhuaConfig(customConfig) {
   Object.keys(customConfig).forEach((key) => {
     config.nazhua[key] = customConfig[key];
@@ -34,3 +42,10 @@ export function mergeNazhuaConfig(customConfig) {
 window.$mergeNazhuaConfig = mergeNazhuaConfig;
 
 export default config;
+
+export const init = async () => {
+  await loadNezhaV1Profile(true).then((res) => {
+    config.nazhua.nezhaVersion = res ? 'v1' : 'v0';
+  });
+  config.init = true;
+};

src/layout/components/footer.vue

@@ -6,6 +6,7 @@
         <a
           ref="nofollow"
           href="https://nezha.wiki"
+          :title="'当前为哪吒监控' + $config.nazhua.nezhaVersion"
           target="_blank"
         >哪吒监控</a>
       </span>

src/utils/load-nezha-v0-config.js

@@ -1,5 +1,19 @@
 import config from '@/config';
 
+function getNezhaConfigUrl() {
+  const { nezhaPath } = config.nazhua;
+  if (nezhaPath.startsWith('http')) {
+    return nezhaPath;
+  }
+  const a = document.createElement('a');
+  if (nezhaPath === '/nezha/' && (import.meta.env.VITE_BASE_PATH && import.meta.env.VITE_BASE_PATH !== '/')) {
+    [a.href] = window.location.href.split(import.meta.env.VITE_BASE_PATH);
+  } else {
+    a.href = nezhaPath;
+  }
+  return a.href;
+}
+
 const configReg = (type) => new RegExp(`${type} = JSON.parse\\('(.*)'\\)`);
 // 格式化数据，保证JSON.parse能够正常解析
 const unescaped = (str) => {
@@ -9,7 +23,7 @@ const unescaped = (str) => {
   str2 = str2.replace(/\\\\/g, '\\');
   return str2;
 };
-export default async () => fetch(config.nazhua.nezhaPath).then((res) => res.text()).then((res) => {
+export default async () => fetch(getNezhaConfigUrl()).then((res) => res.text()).then((res) => {
   let resMatch = res?.match?.(configReg(config.nazhua.nezhaV0ConfigType));
   // 尝试兼容不同的nezha前台主题
   if (!resMatch) {

src/utils/load-nezha-v1-config.js

@@ -1,126 +1,11 @@
 /**
  * V1版数据加载
  */
-import store from '@/store';
 import config from '@/config';
 import request from '@/utils/request';
-import { Mapping } from '@/utils/object-mapping';
-
-/**
- * 字段映射
- */
-export const SERVER_FIELD_MAPS = {
-  ID: 'id',
-  CreatedAt: undefined,
-  UpdatedAt: undefined,
-  DeletedAt: undefined,
-  Name: 'name',
-  Tag: '_$function|queryGroup|id',
-  DisplayIndex: 'display_index',
-  HideForGuest: undefined,
-  EnableDDNS: undefined,
-  Host: '_$mapping|HOST_FIELD_MAPS',
-  State: '_$mapping|STATE_FIELD_MAPS',
-  LastActive: 'last_active',
-};
-export const HOST_FIELD_MAPS = {
-  Platform: 'host.platform',
-  PlatformVersion: 'host.platform_version',
-  CPU: 'host.cpu',
-  MemTotal: 'host.mem_total',
-  DiskTotal: 'host.disk_total',
-  SwapTotal: 'host.swap_total',
-  Arch: 'host.arch',
-  Virtualization: 'host.virtualization',
-  BootTime: 'host.boot_time',
-  CountryCode: 'country_code',
-  Version: 'host.version',
-  GPU: 'host.gpu',
-};
-export const STATE_FIELD_MAPS = {
-  CPU: 'state.cpu',
-  MemUsed: 'state.mem_used',
-  SwapUsed: 'state.swap_used',
-  DiskUsed: 'state.disk_used',
-  NetInTransfer: 'state.net_in_transfer',
-  NetOutTransfer: 'state.net_out_transfer',
-  NetInSpeed: 'state.net_in_speed',
-  NetOutSpeed: 'state.net_out_speed',
-  Uptime: 'state.uptime',
-  Load1: 'state.load_1',
-  Load5: 'state.load_5',
-  Load15: 'state.load_15',
-  TcpConnCount: 'state.tcp_conn_count',
-  UdpConnCount: 'state.udp_conn_count',
-  ProcessCount: 'state.process_count',
-  Temperatures: 'state.temperatures',
-  GPU: 'state.gpu',
-};
-
-/**
- * 魔法方法
- */
-const magics = {
-  HOST_FIELD_MAPS,
-  STATE_FIELD_MAPS,
-  queryGroup: (id) => {
-    const groupItem = store.state.serverGroup?.find?.((i) => {
-      if (i.servers) {
-        return i.servers.includes(id);
-      }
-      return false;
-    });
-    return groupItem?.name;
-  },
-};
-
-/**
- * 处理V1版数据
- * @param {Object} v1Data V1版数据
- * @return {Object} V0版数据
- */
-export const handelV1toV0 = (v1Data) => {
-  const v0Data = {};
-  Object.keys(SERVER_FIELD_MAPS).forEach((key) => {
-    if (SERVER_FIELD_MAPS[key] === undefined) {
-      return;
-    }
-    if (SERVER_FIELD_MAPS[key].includes('_$')) {
-      const $magic = SERVER_FIELD_MAPS[key].split('|');
-      switch ($magic[0]) {
-        case '_$function':
-          if ($magic.length >= 3 && magics[$magic[1]]) {
-            v0Data[key] = magics[$magic[1]](
-              Mapping.mapping(v1Data, $magic[2]),
-            );
-          } else {
-            v0Data[key] = undefined;
-          }
-          break;
-        case '_$mapping':
-          v0Data[key] = Mapping.each(magics[$magic[1]], v1Data);
-          break;
-        default:
-          break;
-      }
-      return;
-    }
-    v0Data[key] = Mapping.mapping(v1Data, SERVER_FIELD_MAPS[key]);
-  });
-  if (v1Data.public_note) {
-    try {
-      v0Data.PublicNote = JSON.parse(v1Data.public_note);
-    } catch (e) {
-      v1Data.PublicNote = null;
-    }
-  } else {
-    v1Data.PublicNote = null;
-  }
-  return v0Data;
-};
 
 export const loadServerGroup = async () => request({
-  // TODO: v1GroupPath 兼容 v1ApiGroupPath 到v0.6.0
+  // DELETE: v1GroupPath 兼容 v1ApiGroupPath 到v0.6.0
   url: config.nazhua.v1GroupPath || config.nazhua.v1ApiGroupPath,
   type: 'GET',
 }).then((res) => {
@@ -156,10 +41,13 @@ export const loadSetting = async () => request({
 /**
  * 加载个人信息
  */
-export const loadProfile = async () => request({
+export const loadProfile = async (check) => request({
   url: config.nazhua.v1ApiProfilePath,
   type: 'GET',
 }).then((res) => {
+  if (check) {
+    return res.status === 200;
+  }
   if (res.status === 200 && res.data?.success) {
     return res.data?.data || {};
   }

src/utils/request.js

@@ -13,11 +13,15 @@ const requestTagMap = {};
  * @return {Promise}
  */
 async function axiosRequest(options) {
-  return axios(options).then((res) => {
-    if (res.status === 200) {
-      return res;
+  return axios(options).then((res) => res).catch((err) => {
+    if (err.response) {
+      return err.response;
     }
-    throw new CustomError(`网络错误${res.status}`, res.status);
+    if (err.request) {
+      // 请求已经成功发起，但没有收到响应
+      return null;
+    }
+    throw new CustomError(err.message);
   });
 }
 

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

@@ -0,0 +1,118 @@
+/**
+ * V1版数据加载
+ */
+import store from '@/store';
+import { Mapping } from '@/utils/object-mapping';
+
+/**
+ * 字段映射
+ */
+export const SERVER_FIELD_MAPS = {
+  ID: 'id',
+  CreatedAt: undefined,
+  UpdatedAt: undefined,
+  DeletedAt: undefined,
+  Name: 'name',
+  Tag: '_$function|queryGroup|id',
+  DisplayIndex: 'display_index',
+  HideForGuest: undefined,
+  EnableDDNS: undefined,
+  Host: '_$mapping|HOST_FIELD_MAPS',
+  State: '_$mapping|STATE_FIELD_MAPS',
+  LastActive: 'last_active',
+};
+export const HOST_FIELD_MAPS = {
+  Platform: 'host.platform',
+  PlatformVersion: 'host.platform_version',
+  CPU: 'host.cpu',
+  MemTotal: 'host.mem_total',
+  DiskTotal: 'host.disk_total',
+  SwapTotal: 'host.swap_total',
+  Arch: 'host.arch',
+  Virtualization: 'host.virtualization',
+  BootTime: 'host.boot_time',
+  CountryCode: 'country_code',
+  Version: 'host.version',
+  GPU: 'host.gpu',
+};
+export const STATE_FIELD_MAPS = {
+  CPU: 'state.cpu',
+  MemUsed: 'state.mem_used',
+  SwapUsed: 'state.swap_used',
+  DiskUsed: 'state.disk_used',
+  NetInTransfer: 'state.net_in_transfer',
+  NetOutTransfer: 'state.net_out_transfer',
+  NetInSpeed: 'state.net_in_speed',
+  NetOutSpeed: 'state.net_out_speed',
+  Uptime: 'state.uptime',
+  Load1: 'state.load_1',
+  Load5: 'state.load_5',
+  Load15: 'state.load_15',
+  TcpConnCount: 'state.tcp_conn_count',
+  UdpConnCount: 'state.udp_conn_count',
+  ProcessCount: 'state.process_count',
+  Temperatures: 'state.temperatures',
+  GPU: 'state.gpu',
+};
+
+/**
+ * 魔法方法
+ */
+const magics = {
+  HOST_FIELD_MAPS,
+  STATE_FIELD_MAPS,
+  queryGroup: (id) => {
+    const groupItem = store.state.serverGroup?.find?.((i) => {
+      if (i.servers) {
+        return i.servers.includes(id);
+      }
+      return false;
+    });
+    return groupItem?.name;
+  },
+};
+
+/**
+ * 处理V1版数据
+ * @param {Object} v1Data V1版数据
+ * @return {Object} V0版数据
+ */
+export default function (v1Data) {
+  const v0Data = {};
+  Object.keys(SERVER_FIELD_MAPS).forEach((key) => {
+    if (SERVER_FIELD_MAPS[key] === undefined) {
+      return;
+    }
+    if (SERVER_FIELD_MAPS[key].includes('_$')) {
+      const $magic = SERVER_FIELD_MAPS[key].split('|');
+      switch ($magic[0]) {
+        case '_$function':
+          if ($magic.length >= 3 && magics[$magic[1]]) {
+            v0Data[key] = magics[$magic[1]](
+              Mapping.mapping(v1Data, $magic[2]),
+            );
+          } else {
+            v0Data[key] = undefined;
+          }
+          break;
+        case '_$mapping':
+          v0Data[key] = Mapping.each(magics[$magic[1]], v1Data);
+          break;
+        default:
+          break;
+      }
+      return;
+    }
+    v0Data[key] = Mapping.mapping(v1Data, SERVER_FIELD_MAPS[key]);
+  });
+  if (v1Data.public_note) {
+    try {
+      v0Data.PublicNote = JSON.parse(v1Data.public_note);
+    } catch (e) {
+      v1Data.PublicNote = null;
+    }
+  } else {
+    v1Data.PublicNote = null;
+  }
+  return v0Data;
+}

src/views/components/server-detail/server-info-box.vue

@@ -264,7 +264,7 @@ const gpuList = computed(() => {
 });
 
 const sysLoadInfo = computed(() => {
-  if (props.info?.State?.Load1) {
+  if (props.info?.State?.Load1 !== undefined) {
     return [
       props.info.State?.Load1,
       props.info.State?.Load5,

src/views/components/server-list/server-list-item.vue

@@ -49,6 +49,7 @@
       <server-real-time
         v-if="$config.nazhua.hideListItemStat !== true"
         :info="info"
+        :server-real-time-list-tpls="serverRealTimeListTpls"
       />
     </div>
     <server-list-item-bill
@@ -69,6 +70,7 @@ import {
 import {
   useRouter,
 } from 'vue-router';
+import config from '@/config';
 import * as hostUtils from '@/utils/host';
 
 import handleServerInfo from '@/views/composable/server-info';
@@ -94,6 +96,13 @@ const { cpuAndMemAndDisk } = handleServerInfo({
 
 const platformLogoIconClassName = computed(() => hostUtils.getPlatformLogoIconClassName(props.info?.Host?.Platform));
 
+const serverRealTimeListTpls = computed(() => {
+  if (config.nazhua?.listServerRealTimeShowLoad) {
+    return 'duration,load,transfer,speeds';
+  }
+  return 'duration,transfer,inSpeed,outSpeed';
+});
+
 function openDetail() {
   router.push({
     name: 'ServerDetail',

src/views/components/server/server-real-time.vue

@@ -7,10 +7,36 @@
       :class="`server-real-time--${item.key}`"
     >
       <div class="item-content">
-        <span class="item-value">{{ item?.value || '-' }}</span>
-        <span class="item-unit item-text">{{ item?.value ? item?.unit : '' }}</span>
+        <div
+          v-if="item.show && item.values"
+          class="item-content-sub-group"
+        >
+          <span
+            v-for="subItem in item.values"
+            :key="`${item.key}_${subItem.key}`"
+            class="item-content-sub-item"
+            :class="`item-content-sub-item--${item.key}-${subItem.key}`"
+          >
+            <span class="item-content-sub-label">
+              {{ subItem.label }}
+            </span>
+            <span class="item-content-sub-content">
+              <span class="item-value">{{ subItem.show ? subItem?.value : '-' }}</span>
+              <span class="item-unit item-text">{{ subItem.show ? subItem?.unit : '' }}</span>
+            </span>
+          </span>
+        </div>
+        <template v-else>
+          <span class="item-value">{{ item.show ? item?.value : '-' }}</span>
+          <span class="item-unit item-text">{{ item.show ? item?.unit : '' }}</span>
+        </template>
       </div>
-      <span class="item-label">{{ item.label }}</span>
+      <span
+        v-if="!item.values"
+        class="item-label"
+      >
+        {{ item.label }}
+      </span>
     </div>
   </div>
 </template>
@@ -29,6 +55,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  serverRealTimeListTpls: {
+    type: String,
+    default: undefined,
+  },
 });
 
 const currentTime = inject('currentTime', {
@@ -40,6 +70,7 @@ const {
 } = handleServerRealTime({
   props,
   currentTime,
+  serverRealTimeListTpls: props.serverRealTimeListTpls,
 });
 </script>
 
@@ -78,6 +109,51 @@ const {
       font-size: var(--real-time-label-font-size, 14px);
       color: #ddd;
     }
+
+    .item-content-sub-group {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .item-content-sub-item {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 2px;
+      }
+
+      .item-content-sub-content {
+        display: flex;
+        align-items: center;
+      }
+
+      .item-value {
+        line-height: 1em;
+        font-size: var(--real-time-label-font-size, 14px);
+      }
+
+      .item-text {
+        line-height: 1em;
+        font-size: var(--real-time-label-font-size, 14px);
+      }
+
+      .item-label {
+        line-height: 1em;
+        font-size: var(--real-time-label-font-size, 14px);
+      }
+
+      .item-content-sub-item--speeds-in {
+        .item-value {
+          color: var(--net-speed-in-color);
+        }
+      }
+      .item-content-sub-item--speeds-out {
+        .item-value {
+          color: var(--net-speed-out-color);
+        }
+      }
+    }
   }
 
   .server-real-time--duration {
@@ -90,7 +166,8 @@ const {
       color: var(--transfer-color);
     }
   }
-  .server-real-time--inSpeed {
+  .server-real-time--inSpeed,
+  .server-real-time--speed {
     .item-value {
       color: var(--net-speed-in-color);
     }

src/views/composable/server-bill-and-plan.js

@@ -60,6 +60,7 @@ export default (params) => {
             months = 6;
             break;
           default:
+            cycleLabel = billingDataMod.cycle;
             break;
         }
       }
@@ -69,12 +70,12 @@ export default (params) => {
         let label;
         if (billingDataMod.amount.toString() === '-1') {
           amountValue = '按量';
-          label = `每${cycleLabel}`;
+          label = cycleLabel ? `每${cycleLabel}` : '';
         } else if (billingDataMod.amount.toString() === '0') {
           amountValue = config.nazhua.freeAmount || '免费';
           isFree = true;
         } else {
-          label = `${cycleLabel}付`;
+          label = cycleLabel ? `${cycleLabel}付` : '';
         }
         obj.billing = {
           label,

src/views/composable/server-real-time.js

@@ -174,6 +174,7 @@ export default (params) => {
           label: '在线',
           value: duration.value?.value,
           unit: duration.value?.unit,
+          show: validate.isSet(duration.value?.value),
         };
       case 'transfer':
         return {
@@ -181,6 +182,7 @@ export default (params) => {
           label: `${transfer.value.statTypeLabel}流量`,
           value: transfer.value?.value,
           unit: transfer.value?.unit,
+          show: validate.isSet(transfer.value?.value),
         };
       case 'inSpeed':
         return {
@@ -188,6 +190,7 @@ export default (params) => {
           label: '入网',
           value: netInSpeed.value?.value,
           unit: netInSpeed.value?.unit,
+          show: validate.isSet(netInSpeed.value?.value),
         };
       case 'outSpeed':
         return {
@@ -195,6 +198,37 @@ export default (params) => {
           label: '出网',
           value: netOutSpeed.value?.value,
           unit: netOutSpeed.value?.unit,
+          show: validate.isSet(netOutSpeed.value?.value),
+        };
+      case 'speeds':
+        return {
+          key,
+          label: '网速',
+          values: [
+            {
+              key: 'in',
+              label: '入网',
+              value: netInSpeed.value?.value,
+              unit: netInSpeed.value?.unit,
+              show: validate.isSet(netInSpeed.value?.value),
+            },
+            {
+              key: 'out',
+              label: '出网',
+              value: netOutSpeed.value?.value,
+              unit: netOutSpeed.value?.unit,
+              show: validate.isSet(netOutSpeed.value?.value),
+            },
+          ],
+          show: validate.isSet(netInSpeed.value?.value) && validate.isSet(netOutSpeed.value?.value),
+        };
+      case 'load':
+        return {
+          key,
+          label: '负载',
+          value: (props.info.State?.Load1 || 0).toFixed(2) * 1,
+          unit: '',
+          show: validate.isSet(props.info.State?.Load1),
         };
       default:
     }

src/ws/index.js

@@ -1,8 +1,6 @@
 import config from '@/config';
 import MessageSubscribe from '@/utils/subscribe';
-import {
-  handelV1toV0,
-} from '@/utils/load-nezha-v1-config';
+import v1TransformV0 from '@/utils/transform-v1-2-v0';
 
 import WSService from './service';
 
@@ -10,9 +8,9 @@ import WSService from './service';
  * 获取不同版本的WebSocket路径
  */
 function getWsApiPath() {
-  let url = config.nazhua.wsPath;
-  if (config.nazhua.nezhaVersion === 'v1') {
-    url = config.nazhua.v1WsPath;
+  let url = config?.nazhua?.wsPath;
+  if (config?.nazhua?.nezhaVersion === 'v1') {
+    url = config?.nazhua?.v1WsPath;
   }
   const a = document.createElement('a');
   a.href = url;
@@ -38,7 +36,7 @@ const wsService = new WSService({
         msg.emit('servers', {
           now: data.now,
           servers: data?.servers?.map?.((server) => {
-            const item = handelV1toV0(server);
+            const item = v1TransformV0(server);
             return item;
           }) || [],
         });

vite.config.js

@@ -7,52 +7,63 @@ import eslintPlugin from 'vite-plugin-eslint';
 import svgLoader from 'vite-svg-loader';
 import packageJson from './package';
 
-dotenv.config({
-  path: '.env.development.local',
-});
+let proxy;
+if (process.env.NODE_ENV === 'development') {
+  dotenv.config({
+    path: '.env.development.local',
+  });
+
+  proxy = {
+    '/api': {
+      target: process.env.API_HOST,
+      changeOrigin: true,
+    },
+    '/ws': {
+      target: process.env.PROXY_WS_HOST || process.env.WS_HOST,
+      changeOrigin: true,
+      ws: true,
+      rewrite: (e) => {
+        if (process.env.PROXY_WS_HOST) {
+          return `/proxy?wsPath=${process.env.WS_HOST}`;
+        }
+        return e;
+      },
+    },
+    '/api/v1/ws/server': {
+      target: process.env.PROXY_WS_HOST || process.env.WS_HOST,
+      changeOrigin: true,
+      ws: true,
+      rewrite: (e) => {
+        if (process.env.PROXY_WS_HOST) {
+          return `/proxy?wsPath=${process.env.WS_HOST}`;
+        }
+        return e;
+      },
+    },
+  };
+
+  if (process.env.VITE_BASE_PATH === '/' || !process.env.VITE_BASE_PATH) {
+    proxy['/nezha/'] = {
+      target: process.env.NEZHA_HOST,
+      changeOrigin: true,
+      rewrite: (e) => e.replace(/^\/nezha/, ''),
+    };
+  }
+}
+
+// 读取版本号
 process.env.VITE_APP_VERSION = process.env.VERSION || packageJson.version;
 
 // https://vite.dev/config/
 export default defineConfig({
+  base: process.env.VITE_BASE_PATH || '/',
   server: {
     host: '0.0.0.0',
     port: 3000,
     hmr: {
       overlay: false,
     },
-    proxy: {
-      '/api': {
-        target: process.env.API_HOST,
-        changeOrigin: true,
-      },
-      '/ws': {
-        target: process.env.PROXY_WS_HOST || process.env.WS_HOST,
-        changeOrigin: true,
-        ws: true,
-        rewrite: (e) => {
-          if (process.env.PROXY_WS_HOST) {
-            return `/proxy?wsPath=${process.env.WS_HOST}`;
-          }
-          return e;
-        },
-      },
-      '/api/v1/ws/server': {
-        target: process.env.PROXY_WS_HOST || process.env.WS_HOST,
-        changeOrigin: true,
-        ws: true,
-        rewrite: (e) => {
-          if (process.env.PROXY_WS_HOST) {
-            return `/proxy?wsPath=${process.env.WS_HOST}`;
-          }
-          return e;
-        },
-      },
-      '/nezha/': {
-        target: process.env.NEZHA_HOST,
-        changeOrigin: true,
-        rewrite: (e) => (process.env.NEZHA_HOST_REPACE_PATH ? e.replace(/^\/nezha/, '') : e),
-      },
-    },
+    proxy,
   },
   css: {
     preprocessorOptions: {