docs: 🧑‍💻 Add Sponsored entry

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>
 

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>
 

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>
 

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>

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')

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 😛"
 }

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": "Если этот проект помог вам, вы можете угостить меня кофе, чтобы у меня было больше энергии для его улучшения 😛"
 }

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": "如果该项目帮到你的话，可以请我喝杯咖啡，让我更有精神完善该项目 😛"
 }

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": "如果該項目幫到你的話，可以請我喝杯咖啡，讓我更有精神完善該項目 😛"
 }