update readme

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nazhua",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,7 +16,7 @@
     "echarts": "^5.5.1",
     "flag-icons": "^7.2.3",
     "font-logos": "^1.3.0",
-    "remixicon": "^4.5.0",
+    "remixicon": "^4.6.0",
     "uniqolor": "^1.1.1",
     "vue": "^3.5.12",
     "vue-echarts": "^7.0.3",

public/config.js

@@ -1,8 +1,10 @@
 window.$$nazhuaConfig = {
   // title: '哪吒监控', // 网站标题
+  // footerSlogan: '不要年付！不要年付！不要年付！<span style="color: #f00;">欢迎访问Nazhua探针</span>',
   // freeAmount: '白嫖', // 免费服务的费用名称
   // infinityCycle: '长期有效', // 无限周期名称
   // buyBtnText: '购买', // 购买按钮文案
+  // buyBtnIcon: '', // 购买按钮图标，取自remixicon
   // customBackgroundImage: '', // 自定义的背景图片地址
   // lightBackground: true, // 启用了浅色系背景图，会强制关闭点点背景
   // showFireworks: true, // 是否显示烟花，建议开启浅色系背景

readme.md

@@ -6,11 +6,40 @@
 考虑到多数国内直连用户无法访问jsdelivr，所以默认使用cdnjs的loli.net引用版本。  
 同时默认关闭SarasaTermSC字体，如果需要使用，请使用Docker镜像全量包。  
 
+## 赞助
+> 按服务商字母排序，不分先后。
+<table>
+  <tr>
+    <td align="center">
+      <a href="https://app.vmiss.com/aff.php?aff=1129" target="_blank" title="VMISS，加拿大企业，打造全球优质优化线路。提供香港、日本、韩国、美国、英国的云服务器">
+        <img src="./.github/images/vmiss-logo.jpg" width="200px;" alt="VMISS"/>
+      </a>
+      <br />
+      <span style="font-weight: bold;">VMISS</span>
+    </td>
+    <td align="center">
+      <a href="https://yxvm.com/aff.php?aff=644" target="_blank" title="YXVM，提供香港、新加坡、日本的云服务器与物理服务器">
+        <img src="./.github/images/yxvm-logo.jpg" width="200px;" alt="YXVM"/>
+      </a>
+      <br />
+      <span style="font-weight: bold;">YXVM</span>
+    </td>
+  </tr>
+</table>
+
 ## 劝退指南 用前必读
 1. 本主题是基于哪吒监控v0版本构建的，~~不确定能否完美v1版本~~。*v0.4.3的版本已适配*  
 2. 本主题是一个纯前端项目，需要解决跨域问题，通常需要一个nginx或者caddy反代请求解决跨域问题。  
 3. 我不会提供任何技术支持，如果你有问题，可以提issue，但是我不保证会回答，可能询问GPT会更快。  
 
+## 功能更新说明
+### v0.5.3更新
+新增：支持单独给服务器设置购买按钮的文案和图标，需要在公开备注的customData中添加`buyBtnText`和`buyBtnIcon`字段。  
+> 使用方法：`buyBtnText`用于设置购买按钮的文案，`buyBtnIcon`用于设置购买按钮的图标，图标支持Remixicon的图标名称，例如：`ri-gift-2-line`。  
+> 示例：点击复制图标名称，然后填写到`buyBtnIcon`字段中，补齐`ri-`前缀即可。  
+> ![remixicon使用方法](./.github/images/remixicon-select.jpg)
+> 在线图标网站：[www.remixicon.com](https://www.remixicon.com/) 目前支持版本为4.6.0
+
 ## V0/V1的使用区别  
 ### Docker版本的nazhua
 使用V1必须在`config.js`中指定`nezhaVersion`的版本为`v1`，**大小写敏感*  
@@ -189,17 +218,21 @@ server {
 ```javascript
 window.$$nazhuaConfig = {
   title: '哪吒监控', // 网站标题
+  footerSlogan: '不要年付！不要年付！不要年付！<span style="color: #f00;">欢迎访问Nazhua探针</span>',
   freeAmount: '白嫖', // 免费服务的费用名称
   infinityCycle: '长期有效', // 无限周期名称
   buyBtnText: '购买', // 购买按钮文案
   customBackgroundImage: '', // 自定义的背景图片地址
   lightBackground: true, // 启用了浅色系背景图，会强制关闭点点背景
-  listServerItemType: 'row', // 服务器列表项类型 card/row row列表模式目前不兼容移动端
+  showFireworks: true, // 是否显示烟花，建议开启浅色系背景
+  showLantern: true, // 是否显示灯笼
+  listServerItemTypeToggle: true, // 服务器列表项类型切换
+  listServerItemType: 'row', // 服务器列表项类型 card/row row列表模式移动端自动切换至card
   listServerStatusType: 'progress', // 服务器状态类型--列表
-  listServerRealTimeShowLoad: false, // 列表显示服务器实时负载
+  listServerRealTimeShowLoad: true, // 列表显示服务器实时负载
   detailServerStatusType: 'progress', // 服务器状态类型--详情页
   serverStatusLinear: true, // 服务器状态渐变线性显示
-  disableSarasaTermSC: false, // 禁用Sarasa Term SC字体
+  disableSarasaTermSC: true, // 禁用Sarasa Term SC字体
   hideWorldMap: false, // 隐藏地图
   hideHomeWorldMap: false, // 隐藏首页地图
   hideDetailWorldMap: false, // 隐藏详情地图

src/layout/components/footer.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="layout-footer">
+    <div
+      v-if="footerSlogan"
+      class="footer-slogan"
+    >
+      <div v-html="footerSlogan" />
+    </div>
     <div class="copyright-text">
       <span class="text">
         Powered by
@@ -40,9 +46,13 @@ import {
   nextTick,
 } from 'vue';
 import { useStore } from 'vuex';
+import config from '@/config';
 
 const version = import.meta.env.VITE_APP_VERSION;
 const store = useStore();
+
+const footerSlogan = computed(() => decodeURIComponent(config.nazhua?.footerSlogan || ''));
+
 const dynamicContentRef = ref();
 
 const dynamicContent = computed(() => {
@@ -93,6 +103,16 @@ onMounted(() => {
   font-size: 12px;
   color: #ccc;
 
+  .footer-slogan {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 5px;
+
+    font-size: 14px;
+    color: #fff;
+  }
+
   .copyright-text {
     display: flex;
     justify-content: center;

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

@@ -75,8 +75,15 @@
             :class="`temperature--${ttItem.type}`"
             :title="ttItem?.title || ''"
           >
-            <span class="server-info-item-label">{{ ttItem.label }}</span>
-            <span class="server-info-item-value">{{ ttItem.value }}</span>
+            <span
+              class="server-info-item-label"
+              :title="ttItem.label"
+            >
+              {{ ttItem.label }}
+            </span>
+            <span class="server-info-item-value">
+              {{ ttItem.value }}
+            </span>
           </span>
         </div>
       </div>
@@ -231,7 +238,7 @@
           @click.stop="toBuy"
         >
           <span class="icon">
-            <span class="ri-shopping-bag-3-line" />
+            <span :class="buyBtnIcon" />
           </span>
           <span class="text">{{ buyBtnText }}</span>
         </div>
@@ -260,7 +267,18 @@ const props = defineProps({
   },
 });
 
-const buyBtnText = computed(() => config.nazhua.buyBtnText || '购买');
+const buyBtnIcon = computed(() => {
+  if (props.info?.PublicNote?.customData?.buyBtnIcon) {
+    return props.info?.PublicNote?.customData?.buyBtnIcon;
+  }
+  return config.nazhua.buyBtnIcon || 'ri-shopping-bag-3-line';
+});
+const buyBtnText = computed(() => {
+  if (props.info?.PublicNote?.customData?.buyBtnText) {
+    return props.info?.PublicNote?.customData?.buyBtnText;
+  }
+  return config.nazhua.buyBtnText || '购买';
+});
 const showBuyBtn = computed(() => !!props.info?.PublicNote?.customData?.orderLink);
 
 function toBuy() {
@@ -387,11 +405,18 @@ const temperatureData = computed(() => {
       }
     }
     if (other.length) {
-      data.push({
-        type: 'other',
-        label: '其它',
-        value: '...',
-        title: other.map((i) => `${i.label}: ${i.value}`).join('\n'),
+      // data.push({
+      //   type: 'other',
+      //   label: '其它',
+      //   value: '...',
+      //   title: other.map((i) => `${i.label}: ${i.value}`).join('\n'),
+      // });
+      other.forEach((i) => {
+        data.push({
+          label: i.label,
+          value: i.value,
+          type: 'other',
+        });
       });
     }
   }
@@ -567,6 +592,17 @@ const processCount = computed(() => props.info?.State?.ProcessCount);
     }
   }
 
+  .server-info--temperature {
+    .server-info-item {
+      .server-info-item-label {
+        max-width: 4.5em;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+  }
+
   .server-info--order-link {
     padding: 10px 0 0;
   }

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

@@ -63,7 +63,7 @@
         @click.stop="toBuy"
       >
         <span class="icon">
-          <span class="ri-shopping-bag-3-line" />
+          <span :class="buyBtnIcon" />
         </span>
         <span class="text">{{ buyBtnText }}</span>
       </div>
@@ -96,7 +96,18 @@ const {
   props,
 });
 
-const buyBtnText = computed(() => config.nazhua.buyBtnText || '购买');
+const buyBtnIcon = computed(() => {
+  if (props.info?.PublicNote?.customData?.buyBtnIcon) {
+    return props.info?.PublicNote?.customData?.buyBtnIcon;
+  }
+  return config.nazhua.buyBtnIcon || 'ri-shopping-bag-3-line';
+});
+const buyBtnText = computed(() => {
+  if (props.info?.PublicNote?.customData?.buyBtnText) {
+    return props.info?.PublicNote?.customData?.buyBtnText;
+  }
+  return config.nazhua.buyBtnText || '购买';
+});
 const showBuyBtn = computed(() => !!props.info?.PublicNote?.customData?.orderLink);
 
 function toBuy() {

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

@@ -62,7 +62,12 @@ const {
   props,
 });
 
-const buyBtnText = computed(() => config.nazhua.buyBtnText || '购买');
+const buyBtnText = computed(() => {
+  if (props.info?.PublicNote?.customData?.buyBtnText) {
+    return props.info?.PublicNote?.customData?.buyBtnText;
+  }
+  return config.nazhua.buyBtnText || '购买';
+});
 const showBuyBtn = computed(() => !!props.info?.PublicNote?.customData?.orderLink);
 
 function toBuy() {

yarn.lock

@@ -2532,10 +2532,10 @@ regexp.prototype.flags@^1.5.2, regexp.prototype.flags@^1.5.3:
     es-errors "^1.3.0"
     set-function-name "^2.0.2"
 
-remixicon@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-4.5.0.tgz#75d625b89a98ae0322a5d39935366d59143172ee"
-  integrity sha512-IP/wNQGG3JCigaeFF3DERSTqMIZBlNu1yu8clNGB7wFe7ZN/ueKMplFHL5uEbnGpCzqfY6MlxIYn2vRzub+5cQ==
+remixicon@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-4.6.0.tgz#f2adafd18aaa983d61f8c9f7274fa17706da4ddc"
+  integrity sha512-bKM5odjqE1yzVxEZGJE7F79WHhNrJFIKHXR+GG+P1IWXn8AnJZhl8SbIRDJsNAvIqx4VPkNwjuHfc42tutMDpQ==
 
 resolve-from@^4.0.0:
   version "4.0.0"