feat: 更新支持v1版本的维度，添加个人信息和设置加载功能，允许字体的加载开关

public/config.js

@@ -5,14 +5,15 @@ window.$$nazhuaConfig = {
   // buyBtnText: '购买', // 购买按钮文案
   // listServerStatusType: 'progress', // 服务器状态类型--列表
   // detailServerStatusType: 'progress', // 服务器状态类型--详情页
-  // hideNavbarServerCount: false, // 隐藏服务器数量
+  // disableSarasaTermSC: false, // 禁用Sarasa Term SC字体
-  // hideNavbarServerStat: false, // 隐藏服务器统计
-  // hideListItemStatusDonut: true, // 隐藏列表项的饼图
-  // hideListItemStat: true, // 隐藏列表项的统计信息
-  // hideListItemBill: false, // 隐藏列表项的账单信息
   // hideWorldMap: false, // 隐藏地图
   // hideHomeWorldMap: false, // 隐藏首页地图
   // hideDetailWorldMap: false, // 隐藏详情地图
+  // hideNavbarServerCount: false, // 隐藏服务器数量
+  // hideNavbarServerStat: false, // 隐藏服务器统计
+  // hideListItemStatusDonut: false, // 隐藏列表项的饼图
+  // hideListItemStat: false, // 隐藏列表项的统计信息
+  // hideListItemBill: false, // 隐藏列表项的账单信息
   // hideFilter: false, // 隐藏筛选
   // hideTag: false, // 隐藏标签
   // customCodeMap: {}, // 自定义的地图点信息
@@ -23,6 +24,10 @@ window.$$nazhuaConfig = {
   // nezhaV0ConfigType: 'servers', // 哪吒v0数据读取类型
   // v1ApiMonitorPath: '/api/v1/service/{id}',
   // v1WsPath: '/api/v1/ws/server',
-  // v1GroupPath: '/api/v1/server-group',
+  // v1ApiGroupPath: '/api/v1/server-group',
+  // v1ApiSettingPath: '/api/v1/setting',
+  // v1ApiProfilePath: '/api/v1/profile',
+  // v1DashboardUrl: '/dashboard', // v1版本控制台地址
+  // v1HideNezhaDashboardBtn: true, // v1版本导航栏控制台入口/登录按钮 在nezhaVersion为v1时有效
   // routeMode: 'h5', // 路由模式
 };

readme.md

@@ -164,25 +164,30 @@ window.$$nazhuaConfig = {
   buyBtnText: '购买', // 购买按钮文案
   listServerStatusType: 'progress', // 服务器状态类型--列表
   detailServerStatusType: 'progress', // 服务器状态类型--详情页
-  hideNavbarServerCount: false, // 隐藏服务器数量
+  disableSarasaTermSC: false, // 禁用Sarasa Term SC字体
-  hideNavbarServerStat: false, // 隐藏服务器统计
-  hideListItemStatusDonut: true, // 隐藏列表项的饼图
-  hideListItemStat: true, // 隐藏列表项的统计信息
-  hideListItemBill: false, // 隐藏列表项的账单信息
   hideWorldMap: false, // 隐藏地图
   hideHomeWorldMap: false, // 隐藏首页地图
   hideDetailWorldMap: false, // 隐藏详情地图
+  hideNavbarServerCount: false, // 隐藏服务器数量
+  hideNavbarServerStat: false, // 隐藏服务器统计
+  hideListItemStatusDonut: false, // 隐藏列表项的饼图
+  hideListItemStat: false, // 隐藏列表项的统计信息
+  hideListItemBill: false, // 隐藏列表项的账单信息
   hideFilter: false, // 隐藏筛选
   hideTag: false, // 隐藏标签
   customCodeMap: {}, // 自定义的地图点信息
-  nezhaVersion: 'v0', // 哪吒版本
+  nezhaVersion: 'v1', // 哪吒版本
-  apiMonitorPath: '/api/v1/monitor/{id}', // 监控数据API路径，不明白的就不要改
+  apiMonitorPath: '/api/v1/monitor/{id}',
-  wsPath: '/ws', // WebSocket路径，不明白的就不要改
+  wsPath: '/ws',
-  nezhaPath: '/nezha/', // 哪吒主页路径，不明白的就不要改
+  nezhaPath: '/nezha/',
   nezhaV0ConfigType: 'servers', // 哪吒v0数据读取类型
-  v1ApiMonitorPath: '/api/v1/service/{id}', // v1监控数据API路径，不明白的就不要改
+  v1ApiMonitorPath: '/api/v1/service/{id}',
-  v1WsPath: '/api/v1/ws/server', // v1WebSocket路径，不明白的就不要改
+  v1WsPath: '/api/v1/ws/server',
-  v1GroupPath: '/api/v1/server-group', // v1分组数据API路径，不明白的就不要改
+  v1ApiGroupPath: '/api/v1/server-group',
+  v1ApiSettingPath: '/api/v1/setting',
+  v1ApiProfilePath: '/api/v1/profile',
+  v1DashboardUrl: '/dashboard', // v1版本控制台地址
+  v1HideNezhaDashboardBtn: true, // v1版本导航栏控制台入口/登录按钮 在nezhaVersion为v1时有效
   routeMode: 'h5', // 路由模式
 };
 ```

src/App.vue

@@ -11,6 +11,8 @@ import {
   onMounted,
 } from 'vue';
 import { useStore } from 'vuex';
+import { useRoute } from 'vue-router';
+import config from '@/config';
 import sleep from '@/utils/sleep';
 import LayoutMain from './layout/main.vue';
 
@@ -21,6 +23,7 @@ import activeWebsocketService, {
 } from './ws';
 
 const store = useStore();
+const route = useRoute();
 
 const currentTime = ref(0);
 
@@ -36,11 +39,15 @@ function refreshTime() {
   }, 1000);
 }
 
-function handleSystem() {
+// 是否为Windows系统
-  const isWindows = /windows|win32/i.test(navigator.userAgent);
+const isWindows = /windows|win32/i.test(navigator.userAgent);
-  if (isWindows) {
+if (isWindows) {
-    document.body.classList.add('windows');
+  document.body.classList.add('windows');
-  }
+}
+// 是否加载Sarasa Term SC字体
+const loadSarasaTermSC = config.nazhua.disableSarasaTermSC !== true;
+if (loadSarasaTermSC) {
+  document.body.classList.add('sarasa-term-sc');
 }
 
 /**
@@ -59,13 +66,14 @@ async function wsReconnect() {
 }
 
 onMounted(async () => {
-  handleSystem();
   refreshTime();
 
   /**
    * 初始化服务器信息
    */
-  await store.dispatch('initServerInfo');
+  await store.dispatch('initServerInfo', {
+    route,
+  });
 
   /**
    * 初始化WS重连维护

src/assets/scss/base.scss

@@ -149,7 +149,7 @@ div:focus {
   font-display: swap;
 }
 
-body {
+body.sarasa-term-sc {
   font-family:
     "Sarasa Term SC",
     'Microsoft YaHei',

src/config/index.js

@@ -1,3 +1,5 @@
+const defaultNezhaVersion = import.meta.env.VITE_NEZHA_VERSION;
+
 const config = {
   request: {
     headers: {
@@ -12,14 +14,16 @@ const config = {
   },
   nazhua: {
     title: '哪吒监控',
-    nezhaVersion: 'v0',
+    nezhaVersion: ['v0', 'v1'].includes(defaultNezhaVersion) ? defaultNezhaVersion : 'v0',
     apiMonitorPath: '/api/v1/monitor/{id}',
     wsPath: '/ws',
     nezhaPath: '/nezha/',
     nezhaV0ConfigType: 'servers',
     v1ApiMonitorPath: '/api/v1/service/{id}',
     v1WsPath: '/api/v1/ws/server',
-    v1GroupPath: '/api/v1/server-group',
+    v1ApiGroupPath: '/api/v1/server-group',
+    v1ApiSettingPath: '/api/v1/setting',
+    v1ApiProfilePath: '/api/v1/profile',
     // 解构载入自定义配置
     ...(window.$$nazhuaConfig || {}),
   },

src/layout/components/header.vue

@@ -97,6 +97,25 @@
             </div>
           </div>
         </div>
+        <div
+          v-if="showDashboardBtn"
+          class="nezha-user-info-group"
+        >
+          <a
+            :href="dashboardUrl"
+            class="dashboard-url"
+            :title="userLogin ? '访问管理后台' : '登录管理后台'"
+            target="_blank"
+          >
+            <span
+              :class="{
+                'ri-dashboard-3-line': userLogin,
+                'ri-user-line': !userLogin,
+              }"
+            />
+            <span>{{ userLogin ? '管理后台' : '登录' }}</span>
+          </a>
+        </div>
       </div>
     </div>
   </div>
@@ -107,7 +126,6 @@
  * LayoutHeader
  */
 import {
-  ref,
   computed,
   onMounted,
 } from 'vue';
@@ -237,7 +255,15 @@ const serverStat = computed(() => {
   };
 });
 
-const title = ref(config.nazhua.title);
+const title = computed(() => {
+  if (window.$$nazhuaConfig?.title) {
+    return window.$$nazhuaConfig.title;
+  }
+  if (store.state.setting?.site_name) {
+    return store.state.setting.site_name;
+  }
+  return config.nazhua.title;
+});
 
 const headerClass = computed(() => {
   const classes = [];
@@ -261,6 +287,13 @@ function toHome() {
   }
 }
 
+const showDashboardBtn = [
+  config.nazhua.nezhaVersion === 'v1',
+  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;
 });
@@ -408,5 +441,23 @@ onMounted(() => {
       }
     }
   }
+
+  .nezha-user-info-group {
+    display: flex;
+    align-items: center;
+    gap: 0 20px;
+
+    .login-link {
+      display: flex;
+      align-items: center;
+      gap: 0 5px;
+      color: #ddd;
+      cursor: pointer;
+
+      &:hover {
+        color: #fff;
+      }
+    }
+  }
 }
 </style>

src/store/index.js

@@ -8,6 +8,8 @@ import loadNezhaV0Config, {
 } from '@/utils/load-nezha-v0-config';
 import {
   loadServerGroup as loadNezhaV1ServerGroup,
+  loadSetting as loadNezhaV1Setting,
+  loadProfile as loadNezhaV1Profile,
 } from '@/utils/load-nezha-v1-config';
 
 import {
@@ -23,6 +25,8 @@ const defaultState = () => ({
     online: 0,
     offline: 0,
   },
+  profile: {},
+  setting: {},
 });
 
 function isOnline(LastActive, currentTime = Date.now()) {
@@ -78,20 +82,46 @@ const store = createStore({
       state.serverCount = handleServerCount(newServers);
       state.init = true;
     },
+    SET_PROFILE(state, profile) {
+      state.profile = profile;
+    },
+    SET_SETTING(state, setting) {
+      state.setting = setting;
+    },
   },
   actions: {
     /**
      * 加载服务器列表
      */
-    async initServerInfo({ commit }) {
+    async initServerInfo({ commit }, params) {
       firstSetServers = true;
       // 如果是v1版本的话，加载v1版本的数据
       if (config.nazhua.nezhaVersion === 'v1') {
+        const {
+          route,
+        } = params || {};
         loadNezhaV1ServerGroup().then((res) => {
           if (res) {
             commit('SET_SERVER_GROUP', res);
           }
         });
+        loadNezhaV1Setting().then((res) => {
+          if (res) {
+            commit('SET_SETTING', res);
+            // 如果自定义配置没有设置title，使用站点名称
+            if (!window.$$nazhuaConfig.title) {
+              config.nazhua.title = res.site_name;
+              if (route?.name === 'Home' || !route) {
+                document.title = config.nazhua.title;
+              }
+            }
+          }
+        });
+        loadNezhaV1Profile().then((res) => {
+          if (res) {
+            commit('SET_PROFILE', res);
+          }
+        });
         return;
       }
       // 如果是v0版本的话，加载v0版本的数据

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

@@ -120,10 +120,11 @@ export const handelV1toV0 = (v1Data) => {
 };
 
 export const loadServerGroup = async () => request({
-  url: config.nazhua.v1GroupPath,
+  // TODO: v1GroupPath 兼容 v1ApiGroupPath 到v0.6.0
+  url: config.nazhua.v1GroupPath || config.nazhua.v1ApiGroupPath,
   type: 'GET',
 }).then((res) => {
-  if (res.status === 200) {
+  if (res.status === 200 && res.data?.success) {
     const list = res.data?.data || [];
     return list.map((i) => {
       const item = {
@@ -136,3 +137,31 @@ export const loadServerGroup = async () => request({
   }
   return null;
 }).catch(() => null);
+
+/**
+ * 加载网站配置
+ *
+ * 暂时只使用site_name
+ */
+export const loadSetting = async () => request({
+  url: config.nazhua.v1ApiSettingPath,
+  type: 'GET',
+}).then((res) => {
+  if (res.status === 200 && res.data?.success) {
+    return res.data?.data || {};
+  }
+  return null;
+}).catch(() => null);
+
+/**
+ * 加载个人信息
+ */
+export const loadProfile = async () => request({
+  url: config.nazhua.v1ApiProfilePath,
+  type: 'GET',
+}).then((res) => {
+  if (res.status === 200 && res.data?.success) {
+    return res.data?.data || {};
+  }
+  return null;
+}).catch(() => null);