From 4e2ff5b84e5b733e574bfb4962833310e3505ef9 Mon Sep 17 00:00:00 2001
From: hi2hi <code@hi2hi.cc>
Date: Fri, 6 Dec 2024 16:34:31 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=200.4.3=20=E6=8B=86=E5=88=86?=
 =?UTF-8?q?=E7=82=B9=E9=98=B5=E8=83=8C=E6=99=AF=E5=9B=BE=E4=B8=BA=E7=8B=AC?=
 =?UTF-8?q?=E7=AB=8B=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=8E=A7=E5=88=B6=EF=BC=9B=20config=E6=8C=82=E4=B8=8A?=
 =?UTF-8?q?reactive=EF=BC=8C=E6=94=AF=E6=8C=81=E5=8A=A8=E6=80=81=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=EF=BC=8C=E6=9C=AA=E6=9D=A5=E6=9B=B4=E4=BC=98=E9=9B=85?=
 =?UTF-8?q?=E7=9A=84=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE=EF=BC=9B=20?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8Csetting=E7=9A=84custom=5Fcode=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 public/config.js                              |  1 +
 src/components/dot-dot-box.vue                | 83 +++++++++++++++++++
 src/config/index.js                           | 19 ++---
 src/layout/components/footer.vue              | 53 ++++++++++++
 src/layout/components/header.vue              | 14 +---
 src/use.js                                    |  5 ++
 .../server-detail/server-info-box.vue         | 17 +---
 .../server-detail/server-monitor.vue          | 18 +---
 .../components/server-detail/server-name.vue  | 13 ++-
 .../server-detail/server-status-box.vue       | 32 +++----
 .../server-list/server-list-item-bill.vue     |  8 ++
 .../server-list/server-list-item.vue          | 25 +++---
 vite.config.js                                | 12 +++
 14 files changed, 212 insertions(+), 90 deletions(-)
 create mode 100644 src/components/dot-dot-box.vue

diff --git a/package.json b/package.json
index 84494cc..1ef387d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nazhua",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/public/config.js b/public/config.js
index acdaeed..dd0a90b 100644
--- a/public/config.js
+++ b/public/config.js
@@ -16,6 +16,7 @@ window.$$nazhuaConfig = {
   // hideListItemBill: false, // 隐藏列表项的账单信息
   // hideFilter: false, // 隐藏筛选
   // hideTag: false, // 隐藏标签
+  // hideDotBG: true, // 隐藏框框里面的点点背景
   // customCodeMap: {}, // 自定义的地图点信息
   // nezhaVersion: 'v1', // 哪吒版本
   // apiMonitorPath: '/api/v1/monitor/{id}',
diff --git a/src/components/dot-dot-box.vue b/src/components/dot-dot-box.vue
new file mode 100644
index 0000000..5d334e4
--- /dev/null
+++ b/src/components/dot-dot-box.vue
@@ -0,0 +1,83 @@
+<template>
+  <div
+    class="dot-dot-box"
+    :class="{
+      'dot-dot-box--hide': $config.nazhua?.hideDotBG === true,
+    }"
+    :style="boxStyle"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+/**
+ * 点格子背景盒子
+ */
+
+import { computed } from 'vue';
+
+const props = defineProps({
+  borderRadius: {
+    type: [String, Number],
+    default: 12,
+  },
+  padding: {
+    type: [String, Number],
+    default: 20,
+  },
+  color: {
+    type: String,
+    default: '#eee',
+  },
+});
+
+const boxStyle = computed(() => {
+  const style = {};
+  if (props.borderRadius) {
+    if (typeof props.borderRadius === 'number') {
+      style['--border-radius'] = `${props.borderRadius}px`;
+    } else {
+      style['--border-radius'] = `${props.borderRadius}`;
+    }
+  }
+  if (props.padding) {
+    if (typeof props.padding === 'number') {
+      style.padding = `${props.padding}px`;
+    } else {
+      style.padding = props.padding;
+    }
+  }
+  if (props.color) {
+    style.color = props.color;
+  }
+  return style;
+});
+
+</script>
+
+<style lang="scss" scoped>
+.dot-dot-box {
+  --border-radius: 12px;
+  color: #eee;
+  border-radius: var(--border-radius);
+  box-shadow: 2px 4px 6px rgba(#000, 0.4);
+
+  background-image: radial-gradient(transparent 1px, rgba(#000, 0.6) 1px);
+  background-size: 3px 3px;
+  backdrop-filter: saturate(50%) blur(3px);
+
+  &--hide {
+    background-color: rgba(#000, 0.8);
+    background-image: none;
+    backdrop-filter: none;
+  }
+
+  @media screen and (max-width: 768px) {
+    background-color: rgba(#000, 0.8);
+    background-image: none;
+    backdrop-filter: none;
+  }
+}
+
+</style>
diff --git a/src/config/index.js b/src/config/index.js
index cfcd36d..b136110 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,17 +1,10 @@
+import {
+  reactive,
+} from 'vue';
+
 const defaultNezhaVersion = import.meta.env.VITE_NEZHA_VERSION;
 
-const config = {
-  request: {
-    headers: {
-      // 如果设置的是json请求。api的defaultContentType为false的时候，contentType为form请求，反之亦如此
-      'Content-Type': 'application/json',
-    },
-    codeField: 'code', // code字段
-    dataField: 'result', // 数据字段
-    msgField: 'message', // 消息字段
-    okCode: '0', // 数据通过code
-    limit: 10,
-  },
+const config = reactive({
   nazhua: {
     title: '哪吒监控',
     nezhaVersion: ['v0', 'v1'].includes(defaultNezhaVersion) ? defaultNezhaVersion : 'v0',
@@ -27,7 +20,7 @@ const config = {
     // 解构载入自定义配置
     ...(window.$$nazhuaConfig || {}),
   },
-};
+});
 
 export function mergeNazhuaConfig(customConfig) {
   Object.keys(customConfig).forEach((key) => {
diff --git a/src/layout/components/footer.vue b/src/layout/components/footer.vue
index bde3134..83e9ec5 100644
--- a/src/layout/components/footer.vue
+++ b/src/layout/components/footer.vue
@@ -19,6 +19,10 @@
         {{ version }}
       </span>
     </div>
+    <div
+      ref="dynamicContentRef"
+      v-html="dynamicContent"
+    />
   </div>
 </template>
 
@@ -27,7 +31,56 @@
  * Footer
  */
 
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  nextTick,
+} from 'vue';
+import { useStore } from 'vuex';
+
 const version = import.meta.env.VITE_APP_VERSION;
+const store = useStore();
+const dynamicContentRef = ref();
+
+const dynamicContent = computed(() => {
+  if (store.state.setting?.custom_code) {
+    return store.state.setting.custom_code;
+  }
+  return '';
+});
+
+// 执行动态脚本的方法
+const executeScripts = () => {
+  nextTick(() => {
+    if (!dynamicContentRef.value) return;
+    const scripts = dynamicContentRef.value.querySelectorAll('script');
+    scripts.forEach((script) => {
+      const newScript = document.createElement('script');
+      newScript.type = 'text/javascript';
+      if (script.src) {
+        newScript.src = script.src; // 拷贝外部脚本的 src
+      } else {
+        newScript.textContent = script.textContent; // 拷贝内联脚本
+      }
+      document.body.appendChild(newScript);
+      document.body.removeChild(newScript); // 可选：移除以保持整洁
+    });
+  });
+};
+
+watch(dynamicContent, () => {
+  if (dynamicContent.value) {
+    executeScripts();
+  }
+});
+
+onMounted(() => {
+  if (dynamicContent.value) {
+    executeScripts();
+  }
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layout/components/header.vue b/src/layout/components/header.vue
index ab4f040..ed9c6e0 100644
--- a/src/layout/components/header.vue
+++ b/src/layout/components/header.vue
@@ -255,15 +255,7 @@ const serverStat = computed(() => {
   };
 });
 
-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 title = computed(() => config.nazhua.title);
 
 const headerClass = computed(() => {
   const classes = [];
@@ -447,7 +439,7 @@ onMounted(() => {
     align-items: center;
     gap: 0 20px;
 
-    .login-link {
+    .dashboard-url {
       display: flex;
       align-items: center;
       gap: 0 5px;
@@ -455,7 +447,7 @@ onMounted(() => {
       cursor: pointer;
 
       &:hover {
-        color: #fff;
+        color: #ff9a00;
       }
     }
   }
diff --git a/src/use.js b/src/use.js
index 3179068..418bcde 100644
--- a/src/use.js
+++ b/src/use.js
@@ -4,8 +4,13 @@ import 'font-logos/assets/font-logos.css';
 import './assets/scss/base.scss';
 import router from './router';
 import store from './store';
+import config from './config';
+
+import DotDotBox from './components/dot-dot-box.vue';
 
 export default (app) => {
   app.use(router);
   app.use(store);
+  app.component('DotDotBox', DotDotBox);
+  app.config.globalProperties.$config = config;
 };
diff --git a/src/views/components/server-detail/server-info-box.vue b/src/views/components/server-detail/server-info-box.vue
index 9c4c159..2197796 100644
--- a/src/views/components/server-detail/server-info-box.vue
+++ b/src/views/components/server-detail/server-info-box.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="server-info-box">
+  <dot-dot-box class="server-info-box">
     <div class="server-info-group server-info--cpu">
       <div class="server-info-label">
         CPU
@@ -182,7 +182,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </dot-dot-box>
 </template>
 
 <script setup>
@@ -296,19 +296,6 @@ const processCount = computed(() => props.info?.State?.ProcessCount);
 .server-info-box {
   --server-info-item-size: 24px;
 
-  padding: 20px;
-  color: #eee;
-  border-radius: 12px;
-  background-image: radial-gradient(transparent 1px, rgba(#000, 0.6) 1px);
-  background-size: 3px 3px;
-  backdrop-filter: saturate(50%) blur(3px);
-  box-shadow: 2px 4px 6px rgba(#000, 0.4);
-
-  @media screen and (max-width: 768px) {
-    background-color: rgba(#000, 0.8);
-    background-image: none;
-    backdrop-filter: none;
-  }
   @media screen and (max-width: 480px) {
     --server-info-item-size: 30px;
   }
diff --git a/src/views/components/server-detail/server-monitor.vue b/src/views/components/server-detail/server-monitor.vue
index 3388283..104410f 100644
--- a/src/views/components/server-detail/server-monitor.vue
+++ b/src/views/components/server-detail/server-monitor.vue
@@ -1,7 +1,8 @@
 <template>
-  <div
+  <dot-dot-box
     v-if="monitorData.length"
     class="server-monitor-group"
+    padding="16px 20px"
   >
     <div class="module-head-group">
       <div class="left-box">
@@ -32,7 +33,7 @@
       :date-list="monitorChartData.dateList"
       :value-list="monitorChartData.valueList"
     />
-  </div>
+  </dot-dot-box>
 </template>
 
 <script setup>
@@ -168,20 +169,7 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .server-monitor-group {
-  padding: 16px 20px;
-  border-radius: 12px;
-  background-image: radial-gradient(transparent 1px, rgba(#000, 0.6) 1px);
-  background-size: 3px 3px;
-  backdrop-filter: saturate(50%) blur(3px);
-  box-shadow: 2px 4px 6px rgba(#000, 0.4);
-
   --line-chart-size: 270px;
-
-  @media screen and (max-width: 768px) {
-    background-color: rgba(#000, 0.8);
-    background-image: none;
-    backdrop-filter: none;
-  }
 }
 
 .module-head-group {
diff --git a/src/views/components/server-detail/server-name.vue b/src/views/components/server-detail/server-name.vue
index df469b2..73f2159 100644
--- a/src/views/components/server-detail/server-name.vue
+++ b/src/views/components/server-detail/server-name.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="server-head">
+  <dot-dot-box
+    class="server-head"
+    padding="16px"
+  >
     <div class="server-flag">
       <div class="server-flag-font">
         <span
@@ -59,7 +62,7 @@
         </span>
       </div>
     </div>
-  </div>
+  </dot-dot-box>
 </template>
 
 <script setup>
@@ -94,13 +97,7 @@ const cpuInfo = computed(() => hostUtils.getCPUInfo(props.info?.Host?.CPU?.[0]))
 .server-head {
   display: flex;
   gap: 12px;
-  padding: 16px;
-  border-radius: 12px;
-  background-image: radial-gradient(transparent 1px, rgba(#000, 0.8) 1px);
-  background-size: 3px 3px;
-  backdrop-filter: saturate(50%) blur(3px);
   transition: 0.3s;
-  box-shadow: 2px 4px 6px rgba(#000, 0.4);
 
   .server-flag {
     --flag-size: 72px;
diff --git a/src/views/components/server-detail/server-status-box.vue b/src/views/components/server-detail/server-status-box.vue
index bf6e135..783c023 100644
--- a/src/views/components/server-detail/server-status-box.vue
+++ b/src/views/components/server-detail/server-status-box.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="server-status-and-real-time">
+  <dot-dot-box
+    padding="15px"
+    class="server-status-and-real-time"
+    :class="{
+      'status-type--progress': componentName === 'progress',
+    }"
+  >
     <div
       class="server-status-group"
       :class="'type--' + componentName + ' status-list--' + serverStatusList.length"
@@ -17,7 +23,7 @@
       />
     </div>
     <server-list-item-real-time :info="info" />
-  </div>
+  </dot-dot-box>
 </template>
 
 <script setup>
@@ -64,25 +70,23 @@ const {
   display: flex;
   flex-direction: column;
   gap: 20px;
-  padding: 15px;
-  border-radius: 12px;
-  background-image: radial-gradient(transparent 1px, rgba(#000, 0.6) 1px);
-  background-size: 3px 3px;
-  backdrop-filter: saturate(50%) blur(3px);
-  box-shadow: 2px 4px 6px rgba(#000, 0.4);
 
   --real-time-value-font-size: 36px;
   --real-time-text-font-size: 16px;
   --real-time-label-font-size: 16px;
 
-  @media screen and (max-width: 1024px) {
-    --real-time-value-font-size: 30px;
+  &.status-type--progress {
+    --real-time-value-font-size: 24px;
+    --real-time-text-font-size: 14px;
+    --real-time-label-font-size: 14px;
+
+    @media screen and (max-width: 1024px) {
+      --real-time-value-font-size: 24px;
+    }
   }
 
-  @media screen and  (max-width: 768px) {
-    background-color: rgba(#000, 0.8);
-    background-image: none;
-    backdrop-filter: none;
+  @media screen and (max-width: 1024px) {
+    --real-time-value-font-size: 30px;
   }
 
   @media screen and (max-width: 720px) {
diff --git a/src/views/components/server-list/server-list-item-bill.vue b/src/views/components/server-list/server-list-item-bill.vue
index 10d037e..c8d6d25 100644
--- a/src/views/components/server-list/server-list-item-bill.vue
+++ b/src/views/components/server-list/server-list-item-bill.vue
@@ -2,6 +2,9 @@
   <div
     v-if="show"
     class="server-list-item-bill"
+    :class="{
+      'dot-dot-box--hide': $config.nazhua?.hideDotBG === true,
+    }"
   >
     <div class="left-box">
       <div
@@ -131,6 +134,11 @@ const show = computed(() => {
   background: rgba(#000, 0.3);
   box-shadow: 0 -2px 4px rgba(#000, 0.5);
 
+  &.dot-dot-box--hide {
+    box-shadow: none;
+    border-top: 1px solid rgba(#ddd, 0.1);
+  }
+
   .left-box {
     display: flex;
   }
diff --git a/src/views/components/server-list/server-list-item.vue b/src/views/components/server-list/server-list-item.vue
index b5e2e92..1024e7f 100644
--- a/src/views/components/server-list/server-list-item.vue
+++ b/src/views/components/server-list/server-list-item.vue
@@ -1,5 +1,7 @@
 <template>
-  <div
+  <dot-dot-box
+    border-radius="var(--list-item-border-radius)"
+    :padding="0"
     class="server-list-item"
     :class="{
       'server-list-item--offline': info.online === -1,
@@ -7,6 +9,9 @@
   >
     <div
       class="server-info-group server-list-item-head"
+      :class="{
+        'dot-dot-box--hide': $config.nazhua?.hideDotBG === true,
+      }"
       @click="openDetail"
     >
       <div class="server-name-group left-box">
@@ -53,7 +58,7 @@
       v-if="showBill"
       :info="info"
     />
-  </div>
+  </dot-dot-box>
 </template>
 
 <script setup>
@@ -107,18 +112,7 @@ const showBill = config.nazhua.hideListItemBill !== true;
   --list-item-border-radius: 12px;
   width: var(--list-item-width);
   color: #fff;
-  background-image: radial-gradient(transparent 1px, rgba(#000, 0.6) 1px);
-  background-size: 3px 3px;
-  backdrop-filter: saturate(50%) blur(3px);
-  border-radius: var(--list-item-border-radius);
   transition: 0.3s;
-  box-shadow: 2px 4px 6px rgba(#000, 0.4);
-
-  @media screen and (max-width: 768px) {
-    background-color: rgba(#000, 0.8);
-    background-image: none;
-    backdrop-filter: none;
-  }
 
   .server-info-group {
     display: flex;
@@ -137,6 +131,11 @@ const showBill = config.nazhua.hideListItemBill !== true;
       cursor: default;
     }
 
+    &.dot-dot-box--hide {
+      box-shadow: none;
+      border-bottom: 1px solid rgba(#ddd, 0.1);
+    }
+
     &.server-list-item-head {
       flex-wrap: wrap;
       overflow: hidden;
diff --git a/vite.config.js b/vite.config.js
index cfaecc2..714228d 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -28,11 +28,23 @@ export default defineConfig({
         target: process.env.WS_HOST,
         changeOrigin: true,
         ws: true,
+        rewrite: (e) => {
+          if (process.env.REWRITE_WS_HOST) {
+            return `/proxy?wsPath=${process.env.REWRITE_WS_HOST}`;
+          }
+          return e;
+        },
       },
       '/api/v1/ws/server': {
         target: process.env.WS_HOST,
         changeOrigin: true,
         ws: true,
+        rewrite: (e) => {
+          if (process.env.REWRITE_WS_HOST) {
+            return `/proxy?wsPath=${process.env.REWRITE_WS_HOST}`;
+          }
+          return e;
+        },
       },
       '/nezha/': {
         target: process.env.NEZHA_HOST,