✨ 支持针对单个服务器设置购买按钮的文案和图标

package.json

@@ -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

@@ -4,6 +4,7 @@ window.$$nazhuaConfig = {
   // freeAmount: '白嫖', // 免费服务的费用名称
   // infinityCycle: '长期有效', // 无限周期名称
   // buyBtnText: '购买', // 购买按钮文案
+  // buyBtnIcon: '', // 购买按钮图标，取自remixicon
   // customBackgroundImage: '', // 自定义的背景图片地址
   // lightBackground: true, // 启用了浅色系背景图，会强制关闭点点背景
   // showFireworks: true, // 是否显示烟花，建议开启浅色系背景

readme.md

@@ -16,6 +16,14 @@
 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`，**大小写敏感*  

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

@@ -231,7 +231,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 +260,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() {

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:
+remixicon@^4.6.0:
-  version "4.5.0"
+  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-4.5.0.tgz#75d625b89a98ae0322a5d39935366d59143172ee"
+  resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-4.6.0.tgz#f2adafd18aaa983d61f8c9f7274fa17706da4ddc"
-  integrity sha512-IP/wNQGG3JCigaeFF3DERSTqMIZBlNu1yu8clNGB7wFe7ZN/ueKMplFHL5uEbnGpCzqfY6MlxIYn2vRzub+5cQ==
+  integrity sha512-bKM5odjqE1yzVxEZGJE7F79WHhNrJFIKHXR+GG+P1IWXn8AnJZhl8SbIRDJsNAvIqx4VPkNwjuHfc42tutMDpQ==
 
 resolve-from@^4.0.0:
   version "4.0.0"