diff --git a/.github/images/remixicon-select.jpg b/.github/images/remixicon-select.jpg new file mode 100644 index 0000000..98a5bb9 Binary files /dev/null and b/.github/images/remixicon-select.jpg differ diff --git a/package.json b/package.json index d0b6154..1578e0d 100644 --- a/package.json +++ b/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", diff --git a/public/config.js b/public/config.js index 2b175ee..898ad91 100644 --- a/public/config.js +++ b/public/config.js @@ -4,6 +4,7 @@ window.$$nazhuaConfig = { // freeAmount: '白嫖', // 免费服务的费用名称 // infinityCycle: '长期有效', // 无限周期名称 // buyBtnText: '购买', // 购买按钮文案 + // buyBtnIcon: '', // 购买按钮图标,取自remixicon // customBackgroundImage: '', // 自定义的背景图片地址 // lightBackground: true, // 启用了浅色系背景图,会强制关闭点点背景 // showFireworks: true, // 是否显示烟花,建议开启浅色系背景 diff --git a/readme.md b/readme.md index 9ec9ec4..4bfd893 100644 --- a/readme.md +++ b/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`,**大小写敏感* diff --git a/src/views/components/server-detail/server-info-box.vue b/src/views/components/server-detail/server-info-box.vue index 29bd5ab..195601b 100644 --- a/src/views/components/server-detail/server-info-box.vue +++ b/src/views/components/server-detail/server-info-box.vue @@ -231,7 +231,7 @@ @click.stop="toBuy" > - + {{ buyBtnText }} @@ -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() { diff --git a/src/views/components/server-list/card/server-list-item-bill.vue b/src/views/components/server-list/card/server-list-item-bill.vue index f8586de..bace74b 100644 --- a/src/views/components/server-list/card/server-list-item-bill.vue +++ b/src/views/components/server-list/card/server-list-item-bill.vue @@ -63,7 +63,7 @@ @click.stop="toBuy" > - + {{ buyBtnText }} @@ -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() { diff --git a/src/views/components/server-list/row/server-list-item-bill.vue b/src/views/components/server-list/row/server-list-item-bill.vue index f9fc9ec..b652586 100644 --- a/src/views/components/server-list/row/server-list-item-bill.vue +++ b/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() { diff --git a/yarn.lock b/yarn.lock index 674189b..23da1de 100644 --- a/yarn.lock +++ b/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"