From 0e1202e1064dd09a6e39dc8f0dd4d536a998a265 Mon Sep 17 00:00:00 2001
From: viarotel <viarotel@qq.com>
Date: Tue, 26 Nov 2024 16:04:52 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20=20?=
 =?UTF-8?q?Add=20Sponsored=20entry?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README-CN.md                                  |   8 +--
 README-RU.md                                  |   8 +--
 README.md                                     |   8 +--
 .../{donate => sponsor}/viarotel-alipay.png   | Bin
 .../{donate => sponsor}/viarotel-paypal.png   | Bin
 .../{donate => sponsor}/viarotel-wepay.png    | Bin
 .../About/components/SponsorDialog/index.vue  |  56 ++++++++++++++++++
 src/components/About/index.vue                |  20 ++++++-
 src/locales/languages/en-US.json              |   4 +-
 src/locales/languages/ru-RU.json              |   4 +-
 src/locales/languages/zh-CN.json              |   4 +-
 src/locales/languages/zh-TW.json              |   4 +-
 12 files changed, 97 insertions(+), 19 deletions(-)
 rename src/assets/{donate => sponsor}/viarotel-alipay.png (100%)
 rename src/assets/{donate => sponsor}/viarotel-paypal.png (100%)
 rename src/assets/{donate => sponsor}/viarotel-wepay.png (100%)
 create mode 100644 src/components/About/components/SponsorDialog/index.vue

diff --git a/README-CN.md b/README-CN.md
index ad35865..5d004bd 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -348,15 +348,15 @@ Windows 及 Linux 端内部集成了 Gnirehtet， 用于提供 PC 到安卓设
 - [vue](https://vuejs.org/)
 - [gnirehtet](https://github.com/Genymobile/gnirehtet/)
 
-## 支持项目
+## 赞助项目
 
 > 如果该项目帮到你的话，可以请我喝杯咖啡，让我更有精神完善该项目 😛
 
 <div style="display:flex;">
-  <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/donate/viarotel-wepay.png" alt="viarotel-wepay" width="30%">
-  <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/donate/viarotel-alipay.png" alt="viarotel-alipay" width="30%">
+  <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/sponsor/viarotel-wepay.png" alt="viarotel-wepay" width="30%">
+  <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/sponsor/viarotel-alipay.png" alt="viarotel-alipay" width="30%">
   <a href="https://www.paypal.com/paypalme/viarotel" target="_blank" rel="noopener noreferrer">
-    <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/donate/viarotel-paypal.png" alt="viarotel-paypal" width="30%">
+    <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/sponsor/viarotel-paypal.png" alt="viarotel-paypal" width="30%">
   </a>
 </div>
 
diff --git a/README-RU.md b/README-RU.md
index 11bcc4b..711ff2e 100644
--- a/README-RU.md
+++ b/README-RU.md
@@ -346,15 +346,15 @@ Gnirehtet встроен в приложения для Windows и Linux, что
 - [vue](https://vuejs.org/)
 - [gnirehtet](https://github.com/Genymobile/gnirehtet/)
 
-## Поддержка проекта
+## Спонсировать проектта
 
 > Если этот проект помог вам, вы можете купить мне кофе, чтобы поддержать меня в улучшении проекта! 😛
 
 <div style="display:flex;">
-  <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/donate/viarotel-wepay.png" alt="viarotel-wepay" width="30%">
-  <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/donate/viarotel-alipay.png" alt="viarotel-alipay" width="30%">
+  <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/sponsor/viarotel-wepay.png" alt="viarotel-wepay" width="30%">
+  <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/sponsor/viarotel-alipay.png" alt="viarotel-alipay" width="30%">
   <a href="https://www.paypal.com/paypalme/viarotel" target="_blank" rel="noopener noreferrer">
-    <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/donate/viarotel-paypal.png" alt="viarotel-paypal" width="30%">
+    <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/sponsor/viarotel-paypal.png" alt="viarotel-paypal" width="30%">
   </a>
 </div>
 
diff --git a/README.md b/README.md
index 74d54ee..c54a0ca 100644
--- a/README.md
+++ b/README.md
@@ -347,15 +347,15 @@ This project would not be possible without the following open source projects:
 - [vue](https://vuejs.org/)
 - [gnirehtet](https://github.com/Genymobile/gnirehtet/)
 
-## Support the Project
+## Sponsor Project
 
 > If this project has helped you, you can buy me a coffee to keep me energized and improving the project! 😛
 
 <div style="display:flex;">
-  <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/donate/viarotel-wepay.png" alt="viarotel-wepay" width="30%">
-  <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/donate/viarotel-alipay.png" alt="viarotel-alipay" width="30%">
+  <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/sponsor/viarotel-wepay.png" alt="viarotel-wepay" width="30%">
+  <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/sponsor/viarotel-alipay.png" alt="viarotel-alipay" width="30%">
   <a href="https://www.paypal.com/paypalme/viarotel" target="_blank" rel="noopener noreferrer">
-    <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/donate/viarotel-paypal.png" alt="viarotel-paypal" width="30%">
+    <img src="https://cdn.jsdelivr.net/gh/viarotel-org/escrcpy@main/src/assets/sponsor/viarotel-paypal.png" alt="viarotel-paypal" width="30%">
   </a>
 </div>
 
diff --git a/src/assets/donate/viarotel-alipay.png b/src/assets/sponsor/viarotel-alipay.png
similarity index 100%
rename from src/assets/donate/viarotel-alipay.png
rename to src/assets/sponsor/viarotel-alipay.png
diff --git a/src/assets/donate/viarotel-paypal.png b/src/assets/sponsor/viarotel-paypal.png
similarity index 100%
rename from src/assets/donate/viarotel-paypal.png
rename to src/assets/sponsor/viarotel-paypal.png
diff --git a/src/assets/donate/viarotel-wepay.png b/src/assets/sponsor/viarotel-wepay.png
similarity index 100%
rename from src/assets/donate/viarotel-wepay.png
rename to src/assets/sponsor/viarotel-wepay.png
diff --git a/src/components/About/components/SponsorDialog/index.vue b/src/components/About/components/SponsorDialog/index.vue
new file mode 100644
index 0000000..2753578
--- /dev/null
+++ b/src/components/About/components/SponsorDialog/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <el-dialog v-model="visible" :title="`♥ ${$t('about.sponsor.title')}`" width="800px" @closed="onClosed">
+    <div class="pt-4 pb-8">
+      {{ $t('about.sponsor.description') }}
+    </div>
+
+    <div class="flex space-x-4">
+      <el-image v-for="(item, index) of imageList" :key="index" :src="item.src" :alt="item.alt" preview-teleported :preview-src-list :initial-index="index" fit="contain" class="!flex-1 !w-0 !border !rounded-md !overflow-hidden" />
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import alipay from '$/assets/sponsor/viarotel-alipay.png'
+import wepay from '$/assets/sponsor/viarotel-wepay.png'
+import paypal from '$/assets/sponsor/viarotel-paypal.png'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      imageList: [
+        {
+          src: alipay,
+          alt: 'Alipay',
+        },
+        {
+          src: wepay,
+          alt: 'Wepay',
+        },
+        {
+          src: paypal,
+          alt: 'Paypal',
+        },
+      ],
+    }
+  },
+  computed: {
+    previewSrcList() {
+      return this.imageList.map(item => item.src)
+    },
+  },
+  methods: {
+    open() {
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    },
+    submit() {},
+    onClosed() {},
+  },
+}
+</script>
+
+<style></style>
diff --git a/src/components/About/index.vue b/src/components/About/index.vue
index 0aa0229..9022f19 100644
--- a/src/components/About/index.vue
+++ b/src/components/About/index.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="flex flex-col items-center justify-center h-full -mt-8">
+  <div class="flex flex-col items-center justify-center h-full -mt-8 space-y-4">
     <a class="block" :href="escrcpyURL" target="_blank">
       <img src="$electron/resources/build/logo.png" class="h-48" alt="" />
     </a>
 
-    <div class="pt-4 text-xl text-center italic text-gray-700 dark:text-white">
+    <div class="text-xl text-center italic text-gray-700 dark:text-white">
       {{ $t("about.description") }}
     </div>
 
-    <div class="pt-12 pb-4">
+    <div class="pt-8">
       <el-button
         :loading="loading"
         type="primary"
@@ -21,6 +21,11 @@
             : $t("about.update")
         }}
       </el-button>
+
+      <el-button size="large" class="group" @click="handleSponsor">
+        <span class="group-hover:animate-rubber-band">♥</span>
+        <span class="pl-1">{{ $t('about.sponsor.title') }}</span>
+      </el-button>
     </div>
 
     <div class="text-sm">
@@ -34,13 +39,19 @@
 
       v{{ version }}
     </div>
+
+    <SponsorDialog ref="sponsorDialogRef" />
   </div>
 </template>
 
 <script>
 import { version } from '/package.json'
+import SponsorDialog from './components/SponsorDialog/index.vue'
 
 export default {
+  components: {
+    SponsorDialog,
+  },
   data() {
     return {
       loading: false,
@@ -57,6 +68,9 @@ export default {
     this.onUpdateError()
   },
   methods: {
+    handleSponsor() {
+      this.$refs.sponsorDialogRef.open()
+    },
     handleUpdate() {
       this.loading = true
       this.$electron.ipcRenderer.send('check-for-update')
diff --git a/src/locales/languages/en-US.json b/src/locales/languages/en-US.json
index 9039dd1..c657ef1 100644
--- a/src/locales/languages/en-US.json
+++ b/src/locales/languages/en-US.json
@@ -412,5 +412,7 @@
   "about.update-downloaded.confirm": "Update",
   "about.update-available.title": "Update Available",
   "about.update-available.confirm": "Update",
-  "about.update.progress": "Updating..."
+  "about.update.progress": "Updating...",
+  "about.sponsor.title": "Sponsor Project",
+  "about.sponsor.description": "If this project has helped you, you can buy me a coffee to keep me energized to improve it 😛"
 }
diff --git a/src/locales/languages/ru-RU.json b/src/locales/languages/ru-RU.json
index 9840848..2321fe2 100644
--- a/src/locales/languages/ru-RU.json
+++ b/src/locales/languages/ru-RU.json
@@ -412,5 +412,7 @@
   "about.update-downloaded.confirm": "Обновить",
   "about.update-available.title": "Доступно обновление",
   "about.update-available.confirm": "Обновить",
-  "about.update.progress": "Обновление..."
+  "about.update.progress": "Обновление...",
+  "about.sponsor.title": "Спонсировать проект",
+  "about.sponsor.description": "Если этот проект помог вам, вы можете угостить меня кофе, чтобы у меня было больше энергии для его улучшения 😛"
 }
diff --git a/src/locales/languages/zh-CN.json b/src/locales/languages/zh-CN.json
index ae4cb25..3c34137 100644
--- a/src/locales/languages/zh-CN.json
+++ b/src/locales/languages/zh-CN.json
@@ -412,5 +412,7 @@
   "about.update-downloaded.confirm": "更新",
   "about.update-available.title": "发现新版本",
   "about.update-available.confirm": "更新",
-  "about.update.progress": "正在更新中"
+  "about.update.progress": "正在更新中",
+  "about.sponsor.title": "赞助项目",
+  "about.sponsor.description": "如果该项目帮到你的话，可以请我喝杯咖啡，让我更有精神完善该项目 😛"
 }
diff --git a/src/locales/languages/zh-TW.json b/src/locales/languages/zh-TW.json
index d12f453..9461146 100644
--- a/src/locales/languages/zh-TW.json
+++ b/src/locales/languages/zh-TW.json
@@ -412,5 +412,7 @@
   "about.update-downloaded.confirm": "更新",
   "about.update-available.title": "發現新版本",
   "about.update-available.confirm": "更新",
-  "about.update.progress": "正在更新"
+  "about.update.progress": "正在更新",
+  "about.sponsor.title": "贊助項目",
+  "about.sponsor.description": "如果該項目幫到你的話，可以請我喝杯咖啡，讓我更有精神完善該項目 😛"
 }