refactor: refactor the header of popup page

sheepzh · sheepzh · commit e601eb05d3ad · 2026-02-25T23:16:52.000+08:00
diff --git a/src/i18n/message/popup/header-resource.json b/src/i18n/message/popup/header-resource.json
@@ -1,60 +1,47 @@
 {
     "en": {
-        "rate": "Rate Us",
+        "rating": "Submit rating",
         "showSiteName": "Display site name",
         "showTopN": "Display top {n}",
         "donutChart": "Displayed as donut charts"
     },
     "zh_CN": {
-        "rate": "评分",
         "showSiteName": "显示网站名称",
         "showTopN": "显示前 {n} 名",
         "donutChart": "以圆环图显示"
     },
     "zh_TW": {
-        "rate": "評分",
         "showSiteName": "顯示網站名稱",
         "showTopN": "顯示前{n}个"
     },
     "ja": {
-        "rate": "評価する",
         "showSiteName": "サイト名を表示",
         "showTopN": "トップ {n} を表示"
     },
     "pt_PT": {
-        "rate": "Avaliar",
         "showSiteName": "Mostrar nome do site",
         "donutChart": "Mostrado como gráfico estilo donut"
     },
-    "uk": {
-        "rate": "Оцінити"
-    },
+    "uk": {},
     "es": {
-        "rate": "Calificar",
         "showSiteName": "Mostrar nombre del sitio",
         "showTopN": "Mostrar primeros {n}"
     },
     "de": {
-        "rate": "Bewerten",
         "showSiteName": "Seitenname anzeigen",
         "showTopN": "Top {n} anzeigen"
     },
     "fr": {
-        "rate": "Évaluez-nous",
         "showSiteName": "Afficher le nom du site",
         "showTopN": "Afficher les {n} premiers",
         "donutChart": "Affichés sous forme de graphiques en anneau"
     },
     "ru": {
-        "rate": "Оценить",
         "showSiteName": "Отобразить имя сайта",
         "showTopN": "Отображать заголовок {n}"
     },
-    "ar": {
-        "rate": "قيمنا"
-    },
+    "ar": {},
     "tr": {
-        "rate": "Bizi Değerlendirin",
         "showSiteName": "Site adını göster",
         "showTopN": "En iyi {n} göster",
         "donutChart": "Halka grafik olarak göster"
diff --git a/src/i18n/message/popup/header.ts b/src/i18n/message/popup/header.ts
@@ -8,8 +8,8 @@
 import resource from './header-resource.json'
 
 export type HeaderMessage = {
+    rating: string
     donutChart: string
-    rate: string
     showSiteName: string
     showTopN: string
 }
diff --git a/src/pages/app/components/About/Description.tsx b/src/pages/app/components/About/Description.tsx
@@ -3,7 +3,7 @@ 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 { Coffee, GitHub } from '@pages/util/icon'
 import { saveFlag } from "@service/meta-service"
 import packageInfo, { AUTHOR_EMAIL } from "@src/package"
 import {
@@ -22,7 +22,7 @@ import {
 import { type ComponentSize, ElCard, ElDescriptions, ElDescriptionsItem, ElDivider, ElText, useNamespace } from "element-plus"
 import { computed, defineComponent, reactive } from "vue"
 import DescLink from "./DescLink"
-import { Chrome, Echarts, Edge, ElementPlus, Firefox, GitHub, Vue } from './Icon'
+import { Chrome, Echarts, Edge, ElementPlus, Firefox, Vue } from './Icon'
 import InstallationLink from "./InstallationLink"
 
 const useStyle = () => {
@@ -155,7 +155,7 @@ const _default = defineComponent<{}>(() => {
                 </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>
+                        <DescLink icon={<Coffee />} href={BUY_ME_A_COFFEE_PAGE}>{BUY_ME_A_COFFEE_PAGE}</DescLink>
                     </ElDescriptionsItem>
                 )}
             </ElDescriptions>
diff --git a/src/pages/app/components/About/Icon.tsx b/src/pages/app/components/About/Icon.tsx
@@ -140,12 +140,6 @@ export const Firefox: FunctionalComponent<{}> = () => (
     </svg>
 )
 
-export const GitHub: FunctionalComponent<{}> = () => (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
-        <path d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z' />
-    </svg>
-)
-
 export const Vue: FunctionalComponent<{}> = () => (
     <svg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'>
         <path d='M615.6 123.6h165.5L512 589.7 242.9 123.6H63.5L512 900.4l448.5-776.9z' fill='#41B883' />
diff --git a/src/pages/popup/components/Header/Coffee.tsx b/src/pages/popup/components/Header/Coffee.tsx
diff --git a/src/pages/popup/components/Header/Github.tsx b/src/pages/popup/components/Header/Github.tsx
diff --git a/src/pages/popup/components/Header/MoreInfo.tsx b/src/pages/popup/components/Header/MoreInfo.tsx
@@ -0,0 +1,79 @@
+import { createTab } from "@api/chrome/tab"
+import { Collection, MoreFilled } from '@element-plus/icons-vue'
+import { locale } from '@i18n'
+import Flex from '@pages/components/Flex'
+import { Coffee, GitHub, Heart } from '@pages/util/icon'
+import { getColor, type ColorVariant } from '@pages/util/style'
+import { t } from '@popup/locale'
+import { saveFlag } from "@service/meta-service"
+import { BUY_ME_A_COFFEE_PAGE, CHANGE_LOG_PAGE, DONATION_PAGE, REVIEW_PAGE, SOURCE_CODE_PAGE } from "@util/constant/url"
+import { ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon } from "element-plus"
+import { defineComponent, type StyleValue } from "vue"
+import { type JSX } from 'vue/jsx-runtime'
+
+type Command = 'rate' | 'coffee' | 'donation' | 'github' | 'changelog'
+
+type ItemLinkProps = {
+    icon: JSX.Element
+    text: string
+    iconColor?: ColorVariant
+}
+const ItemLink = ({ icon, text, iconColor }: ItemLinkProps) => (
+    <Flex gap={2} align='center'>
+        <ElIcon color={iconColor ? getColor(iconColor) : undefined}>{icon}</ElIcon>
+        {text}
+    </Flex>
+)
+
+const MoreInfo = defineComponent<{}>(() => {
+    const handleCmd = async (cmd: Command) => {
+        if (cmd === 'rate') {
+            await saveFlag("rateOpen")
+            createTab(REVIEW_PAGE)
+        } else if (cmd === 'coffee') {
+            createTab(BUY_ME_A_COFFEE_PAGE)
+        } else if (cmd === 'github') {
+            createTab(SOURCE_CODE_PAGE)
+        } else if (cmd === 'changelog') {
+            createTab(CHANGE_LOG_PAGE)
+        } else if (cmd === 'donation') {
+            createTab(DONATION_PAGE)
+        }
+    }
+
+    return () => (
+        <ElDropdown
+            size='small'
+            trigger='click'
+            onCommand={handleCmd}
+            style={{ cursor: 'pointer' } satisfies StyleValue}
+            v-slots={{
+                default: () => <ElIcon><MoreFilled /></ElIcon>,
+                dropdown: () => (
+                    <ElDropdownMenu>
+                        <ElDropdownItem command={'github' satisfies Command}>
+                            <ItemLink icon={<GitHub />} text={t(msg => msg.base.sourceCode)} />
+                        </ElDropdownItem>
+                        <ElDropdownItem command={'changelog' satisfies Command}>
+                            <ItemLink icon={<Collection />} text={t(msg => msg.base.changeLog)} />
+                        </ElDropdownItem>
+                        <ElDropdownItem command={'rate' satisfies Command} divided>
+                            <ItemLink icon={<Heart />} text={t(msg => msg.header.rating)} iconColor="danger" />
+                        </ElDropdownItem>
+                        {locale === 'zh_CN' ? (
+                            <ElDropdownItem command={'donation' satisfies Command}>
+                                <ItemLink icon={<Coffee />} text="请他喝杯咖啡~" iconColor="warning" />
+                            </ElDropdownItem>
+                        ) : (
+                            <ElDropdownItem command={'coffee' satisfies Command}>
+                                <ItemLink icon={<Coffee />} text="Buy me a coffee" iconColor="warning" />
+                            </ElDropdownItem>
+                        )}
+                    </ElDropdownMenu >
+                )
+            }}>
+        </ElDropdown >
+    )
+})
+
+export default MoreInfo
diff --git a/src/pages/popup/components/Header/RateUs.tsx b/src/pages/popup/components/Header/RateUs.tsx
diff --git a/src/pages/popup/components/Header/index.tsx b/src/pages/popup/components/Header/index.tsx
@@ -7,12 +7,10 @@ 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"
+import MoreInfo from './MoreInfo'
 import Option from "./Option"
-import RateUs from './RateUs'
 
 const openAppPage = async () => {
     const appPageUrl = getAppPageUrl()
@@ -33,22 +31,16 @@ const openAppPage = async () => {
 
 const Header: FunctionalComponent = () => (
     <Flex justify="space-between" padding='0 10px' color='text-primary'>
-        <Flex gap={4}>
-            <Logo />
-            <Coffee />
-        </Flex>
+        <Logo />
         <Flex gap={10}>
-            <Flex gap={10}>
-                <RateUs />
-                <ElLink underline="never" onClick={openAppPage} icon={View} style={{ gap: '3px' }}>
-                    {t(msg => msg.base.allFunction)}
-                </ElLink>
-            </Flex>
+            <ElLink underline="never" onClick={openAppPage} icon={View} style={{ gap: '3px' }}>
+                {t(msg => msg.base.allFunction)}
+            </ElLink>
             <Flex align="center" gap={8} fontSize={30}>
                 <LangSelect />
                 <DarkSwitch />
                 <Option />
-                <Github />
+                <MoreInfo />
             </Flex>
         </Flex>
     </Flex>
diff --git a/src/pages/util/icon.tsx b/src/pages/util/icon.tsx
@@ -1,5 +1,19 @@
-export const CoffeeIcon = (
+import { type FunctionalComponent } from 'vue'
+
+export const Coffee: FunctionalComponent<{}> = () => (
     <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>
+)
+
+export const GitHub: FunctionalComponent<{}> = () => (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+        <path d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z' />
+    </svg>
+)
+
+export const Heart: FunctionalComponent<{}> = () => (
+    <svg viewBox="0 0 1024 1024">
+        <path d="M1000 248Q976.992 192 933.984 148.992 849.984 64 732.992 64q-64 0-121.504 28T512 171.008q-42.016-51.008-99.488-79.008T291.008 64Q174.016 64 90.016 150.016 47.008 193.024 24 249.024-0.992 308.032 0 371.04q0.992 68.992 28.992 130.496t79.008 104.512q4.992 4 8.992 8 14.016 12 112.992 102.016 208 191.008 256.992 235.008 11.008 8.992 24.992 8.992t24.992-8.992q32.992-30.016 180.992-164.992 158.016-144 196-179.008 52-43.008 80.992-104.992t28.992-132q0-64-24-122.016z" />
+    </svg >
 )
diff --git a/src/pages/util/style.ts b/src/pages/util/style.ts
@@ -8,6 +8,8 @@ import { camelize, type CSSProperties } from "vue"
 
 type Variant = "primary" | "success" | "warning" | "info" | "danger"
 
+export type ColorVariant = Variant
+
 type TextVariant = "primary" | "regular" | "secondary"
 
 type ColorUsage = 'fill'
diff --git a/src/util/constant/url.ts b/src/util/constant/url.ts
@@ -137,3 +137,10 @@ export const REVIEW_PAGE = reviewPage
  * @since 3.7.13
  */
 export const BUY_ME_A_COFFEE_PAGE = 'https://buymeacoffee.com/sheepysheep'
+
+/**
+ * Only available for simplified chinese users
+ *
+ * @since 4.0.0
+ */
+export const DONATION_PAGE = 'https://github.com/sheepzh/sheepzh?tab=contributing-ov-file'

Original file line number	Diff line number	Diff line change
`@@ -8,8 +8,8 @@`
`8`	`8`	`import resource from './header-resource.json'`
`9`	`9`
`10`	`10`	`export type HeaderMessage = {`
	`11`	`+ rating: string`
`11`	`12`	`donutChart: string`
`12`		`- rate: string`
`13`	`13`	`showSiteName: string`
`14`	`14`	`showTopN: string`
`15`	`15`	`}`