feat: add donation link

Author: sheepzh

package.json

@@ -32,14 +32,14 @@
         "@emotion/babel-plugin": "^11.13.5",
         "@emotion/css": "^11.13.5",
         "@rsdoctor/rspack-plugin": "^1.4.0",
-        "@rspack/cli": "^1.7.1",
-        "@rspack/core": "^1.7.1",
+        "@rspack/cli": "^1.7.2",
+        "@rspack/core": "^1.7.2",
         "@swc/core": "^1.15.8",
         "@swc/jest": "^0.2.39",
-        "@types/chrome": "0.1.32",
+        "@types/chrome": "0.1.33",
         "@types/decompress": "^4.2.7",
         "@types/jest": "^30.0.0",
-        "@types/node": "^25.0.3",
+        "@types/node": "^25.0.7",
         "@types/punycode": "^2.1.4",
         "@vue/babel-plugin-jsx": "^2.0.1",
         "babel-loader": "^10.0.0",
@@ -54,7 +54,7 @@
         "postcss": "^8.5.6",
         "postcss-loader": "^8.2.0",
         "postcss-rtlcss": "^5.7.1",
-        "puppeteer": "^24.34.0",
+        "puppeteer": "^24.35.0",
         "ts-loader": "^9.5.4",
         "ts-node": "^10.9.2",
         "tsconfig-paths": "^4.2.0",
@@ -71,4 +71,4 @@
     "engines": {
         "node": ">=22"
     }
-}
+}

src/pages/app/components/About/Description.tsx

@@ -3,9 +3,11 @@ import { css } from '@emotion/css'
 import { MediaSize, useMediaSize } from "@hooks"
 import { locale } from "@i18n"
 import Flex from "@pages/components/Flex"
+import { CoffeeIcon } from '@pages/util/icon'
 import { saveFlag } from "@service/meta-service"
 import packageInfo, { AUTHOR_EMAIL } from "@src/package"
 import {
+    BUY_ME_A_COFFEE_PAGE,
     CHANGE_LOG_PAGE,
     CHROME_HOMEPAGE, EDGE_HOMEPAGE,
     FEEDBACK_QUESTIONNAIRE,
@@ -151,6 +153,11 @@ const _default = defineComponent<{}>(() => {
                         <DescLink href="https://element-plus.org/" icon={<ElementPlus />}>Element Plus</DescLink>
                     </div>
                 </ElDescriptionsItem>
+                {locale !== 'zh_CN' && (
+                    <ElDescriptionsItem label='Buy me a coffee' labelAlign="right">
+                        <DescLink icon={CoffeeIcon} href={BUY_ME_A_COFFEE_PAGE}>{BUY_ME_A_COFFEE_PAGE}</DescLink>
+                    </ElDescriptionsItem>
+                )}
             </ElDescriptions>
             <ElDivider />
             <Flex class={textContainerCls}>

src/pages/popup/components/Header/Coffee.tsx

@@ -0,0 +1,44 @@
+import { locale } from '@i18n'
+import { CoffeeIcon } from '@pages/util/icon'
+import { BUY_ME_A_COFFEE_PAGE } from '@util/constant/url'
+import { ElLink, ElTooltip } from 'element-plus'
+import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
+
+const useCoffee = () => {
+    const coffeeTip = ref<string>()
+
+    const resetTip = () => {
+        const now = new Date()
+        const hours = now.getHours()
+        let newVal = undefined
+        if (hours == 8) {
+            newVal = 'Buy me a coffee for a vibrant morning!'
+        } else if (hours == 13) {
+            newVal = 'Buy me a coffee for a pleasant afternoon!'
+        }
+        newVal !== coffeeTip.value && (coffeeTip.value = newVal)
+    }
+    const timer = setInterval(resetTip, 1000)
+
+    onMounted(resetTip)
+    onUnmounted(() => clearInterval(timer))
+
+    return coffeeTip
+}
+
+const Coffee = defineComponent(() => {
+    const tip = useCoffee()
+    return () => tip.value && locale !== 'zh_CN' ?
+        <ElTooltip
+            content={tip.value} offset={3}
+            placement='bottom' effect='light'
+        >
+            <ElLink
+                type='info' icon={CoffeeIcon} underline='never'
+                href={BUY_ME_A_COFFEE_PAGE} target='_blank'
+            />
+        </ElTooltip >
+        : null
+})
+
+export default Coffee

src/pages/popup/components/Header/index.tsx

@@ -7,6 +7,7 @@ import { IS_ANDROID } from "@util/constant/environment"
 import { getAppPageUrl } from "@util/constant/url"
 import { ElLink } from "element-plus"
 import { FunctionalComponent } from "vue"
+import Coffee from './Coffee'
 import DarkSwitch from "./DarkSwitch"
 import Github from "./Github"
 import Logo from "./Logo"
@@ -32,7 +33,10 @@ const openAppPage = async () => {
 
 const Header: FunctionalComponent = () => (
     <Flex justify="space-between" padding='0 10px' color='text-primary'>
-        <Logo />
+        <Flex gap={4}>
+            <Logo />
+            <Coffee />
+        </Flex>
         <Flex gap={10}>
             <Flex gap={10}>
                 <RateUs />

src/pages/util/icon.tsx

@@ -0,0 +1,5 @@
+export const CoffeeIcon = (
+    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <path d="M742.954667 682.666667H554.666667a42.666667 42.666667 0 0 1 0-85.333334h195.413333l14.208-170.666666H259.712l29.013333 348.416A85.333333 85.333333 0 0 0 373.76 853.333333h276.48a85.333333 85.333333 0 0 0 85.034667-78.250666l7.68-92.416z m67.2-341.333334H853.333333V256h-122.965333a119.850667 119.850667 0 0 1-107.178667-66.261333 34.517333 34.517333 0 0 0-30.890666-19.072h-160.597334a34.517333 34.517333 0 0 0-30.890666 19.072A119.850667 119.850667 0 0 1 293.632 256H170.666667v85.333333H810.154667z m39.765333 85.333334l-29.610667 355.498666A170.666667 170.666667 0 0 1 650.24 938.666667H373.76a170.666667 170.666667 0 0 1-170.069333-156.501334L174.08 426.666667H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333334V256a85.333333 85.333333 0 0 1 85.333334-85.333333h122.965333a34.517333 34.517333 0 0 0 30.890667-19.072A119.850667 119.850667 0 0 1 431.701333 85.333333h160.597334c45.397333 0 86.912 25.642667 107.178666 66.261334a34.517333 34.517333 0 0 0 30.890667 19.072H853.333333a85.333333 85.333333 0 0 1 85.333334 85.333333v85.333333a85.333333 85.333333 0 0 1-85.333334 85.333334h-3.413333z"></path>
+    </svg>
+)

src/util/constant/url.ts

@@ -128,3 +128,8 @@ export const WEBSTORE_PAGE = webstorePage
  * @since 2.2.4
  */
 export const REVIEW_PAGE = reviewPage
+
+/**
+ * @since 3.7.13
+ */
+export const BUY_ME_A_COFFEE_PAGE = 'https://buymeacoffee.com/sheepysheep'