Add feedback for dashboard (#94)

Author: sheepzh

src/app/components/dashboard/feedback.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { t } from "@app/locale"
+import { Headset } from "@element-plus/icons-vue"
+import { DASHBOARD_FEEDBACK_PAGE } from "@util/constant/url"
+import { Effect, ElButton, ElTooltip } from "element-plus"
+import { defineComponent, h } from "vue"
+
+const style: Partial<CSSStyleDeclaration> = {
+    width: '100%',
+    paddingTop: '10px',
+    paddingRight: '40px',
+    height: '100px',
+    textAlign: 'right'
+}
+
+const _default = defineComponent({
+    name: "DashboardFeedback",
+    render: () => h('div', {
+        style
+    }, h(ElTooltip, {
+        placement: 'top',
+        content: t(msg => msg.dashboard.feedback.tooltip),
+        effect: Effect.LIGHT,
+    }, () => h(ElButton, {
+        type: "info",
+        size: "mini",
+        icon: Headset,
+        round: true,
+        onClick: () => chrome.tabs.create({
+            url: DASHBOARD_FEEDBACK_PAGE
+        })
+    }, () => t(msg => msg.dashboard.feedback.button))))
+})
+
+export default _default

src/app/components/dashboard/index.ts

@@ -9,15 +9,21 @@ import { defineComponent, h } from "vue"
 import ContentContainer from "@app/components/common/content-container"
 import DashboardRow1 from './row1'
 import DashboardRow2 from './row2'
+import DashboardFeedback from "./feedback"
 import "./style/index"
+import { locale } from "@util/i18n"
 
 const _default = defineComponent({
     name: 'Dashboard',
     setup() {
-        return () => h(ContentContainer, {}, () => [
-            h(DashboardRow1),
-            h(DashboardRow2)
-        ])
+        return () => h(ContentContainer, {}, () => {
+            const items = [
+                h(DashboardRow1),
+                h(DashboardRow2)
+            ]
+            locale === "zh_CN" && (items.push(h(DashboardFeedback)))
+            return items
+        })
     }
 })
 

src/app/locale/components/dashboard.ts

@@ -31,9 +31,19 @@ export type DashboardMessage = {
         wow: string
         increase: string
         decline: string
+    },
+    feedback: {
+        button: string
+        tooltip: string
     }
 }
 
+// Not display if not zh_CN
+const EMPTY_FEEDBACK = {
+    button: '',
+    tooltip: ''
+}
+
 const _default: Messages<DashboardMessage> = {
     zh_CN: {
         heatMap: {
@@ -59,7 +69,11 @@ const _default: Messages<DashboardMessage> = {
             wow: '环比{state} {delta}',
             increase: '增长',
             decline: '减少',
-        }
+        },
+        feedback: {
+            button: '反馈',
+            tooltip: '告诉作者您对仪表盘新功能的感受~'
+        },
     },
     zh_TW: {
         heatMap: {
@@ -85,7 +99,8 @@ const _default: Messages<DashboardMessage> = {
             wow: '環比{state} {delta}',
             increase: '增長',
             decline: '減少',
-        }
+        },
+        feedback: EMPTY_FEEDBACK
     },
     en: {
         heatMap: {
@@ -111,7 +126,8 @@ const _default: Messages<DashboardMessage> = {
             wow: 'week-on-week {state} {delta}',
             increase: 'growth',
             decline: 'decrease',
-        }
+        },
+        feedback: EMPTY_FEEDBACK
     },
     ja: {
         heatMap: {
@@ -136,8 +152,9 @@ const _default: Messages<DashboardMessage> = {
             thisBrowse: '今週は {time} で閲覧',
             wow: '毎週 {delta} の {state}',
             increase: '増加',
-            decline: '減らす'
-        }
+            decline: '減らす',
+        },
+        feedback: EMPTY_FEEDBACK
     },
 }
 

src/util/constant/url.ts

@@ -117,4 +117,9 @@ export const PSL_HOMEPAGE = 'https://publicsuffix.org/'
 /**
  * @since 0.9.3
  */
-export const TRANSLATION_ISSUE_PAGE = 'https://docs.google.com/forms/d/e/1FAIpQLSdZSmEZp6Xfmb5v-3H4hsubgeCReDayDOuWDWWU5C1W80exGA/viewform?usp=sf_link'
+export const TRANSLATION_ISSUE_PAGE = 'https://docs.google.com/forms/d/e/1FAIpQLSdZSmEZp6Xfmb5v-3H4hsubgeCReDayDOuWDWWU5C1W80exGA/viewform?usp=sf_link'
+
+/**
+ * @since 1.0.0
+ */
+export const DASHBOARD_FEEDBACK_PAGE = 'https://www.wjx.cn/vm/wn0tj2s.aspx'