Support chart decals (#302)

Author: sheepzh

src/app/components/Option/Tabs.tsx

@@ -1,11 +1,11 @@
 import { t } from "@app/locale"
 import { Refresh } from "@element-plus/icons-vue"
+import { useShadow } from "@hooks/useShadow"
 import { ElIcon, ElMessage, ElTabPane, ElTabs } from "element-plus"
 import { defineComponent, h, ref } from "vue"
 import { useRouter } from "vue-router"
-import { changeQuery, OptionCategory, parseQuery } from "./common"
-import { useShadow } from "@hooks/useShadow"
 import ContentContainer from "../common/ContentContainer"
+import { changeQuery, OptionCategory, parseQuery } from "./common"
 
 const resetButtonName = "reset"
 
@@ -66,6 +66,12 @@ const _default = defineComponent({
                             {h(ctx.slots.dailyLimit)}
                         </ElTabPane>
                     )}
+                    <ElTabPane
+                        name={"accessibility" satisfies OptionCategory}
+                        label={t(msg => msg.option.accessibility.title)}
+                    >
+                        {h(ctx.slots.accessibility)}
+                    </ElTabPane>
                     <ElTabPane
                         name={"backup" satisfies OptionCategory}
                         label={t(msg => msg.option.backup.title)}

src/app/components/Option/common.tsx

@@ -7,7 +7,7 @@
 
 import { Router, useRoute } from "vue-router"
 
-export const ALL_CATEGORIES = ["appearance", "statistics", "popup", 'dailyLimit', 'backup'] as const
+export const ALL_CATEGORIES = ["appearance", "statistics", "popup", 'dailyLimit', 'accessibility', 'backup'] as const
 export type OptionCategory = typeof ALL_CATEGORIES[number]
 
 export type OptionInstance = {

src/app/components/Option/components/AccessibilityOption.tsx

@@ -0,0 +1,38 @@
+import { t } from "@app/locale"
+import optionService from "@service/option-service"
+import { defaultAccessibility } from "@util/constant/option"
+import { ElSwitch } from "element-plus"
+import { defineComponent, reactive, unref, watch } from "vue"
+import { OptionInstance } from "../common"
+import OptionItem from "./OptionItem"
+
+function copy(target: timer.option.AccessibilityOption, source: timer.option.AccessibilityOption) {
+    target.chartDecal = source.chartDecal
+}
+
+const _default = defineComponent((_, ctx) => {
+    const option = reactive(defaultAccessibility())
+    optionService.getAllOption()
+        .then(currentVal => {
+            copy(option, currentVal)
+            watch(option, () => optionService.setAccessibilityOption(unref(option)))
+        })
+    ctx.expose({
+        reset: () => copy(option, defaultAccessibility())
+    } satisfies OptionInstance)
+    return () => <>
+        <OptionItem
+            label={msg => msg.option.accessibility.chartDecal}
+            defaultValue={t(msg => msg.option.no)}
+            hideDivider
+            v-slots={{
+                default: () => <ElSwitch
+                    modelValue={option.chartDecal}
+                    onChange={(val: boolean) => option.chartDecal = val}
+                />
+            }}
+        />
+    </>
+})
+
+export default _default

src/app/components/Option/index.tsx

@@ -9,6 +9,7 @@ import { MediaSize } from "@hooks/useMediaSize"
 import { defineComponent, ref, type Ref } from "vue"
 import { JSX } from "vue/jsx-runtime"
 import { OptionCategory, OptionInstance } from "./common"
+import AccessibilityOption from "./components/AccessibilityOption"
 import AppearanceOption from "./components/AppearanceOption"
 import BackupOption from './components/BackupOption'
 import LimitOption from './components/LimitOption'
@@ -25,6 +26,7 @@ const _default = defineComponent(() => {
         popup: ref(),
         backup: ref(),
         dailyLimit: ref(),
+        accessibility: ref(),
     }
 
     const mediaSize = useMediaSize()
@@ -34,6 +36,7 @@ const _default = defineComponent(() => {
         statistics: () => <StatisticsOption ref={paneRefMap.statistics} />,
         popup: () => <PopupOption ref={paneRefMap.popup} />,
         dailyLimit: () => <LimitOption ref={paneRefMap.dailyLimit} />,
+        accessibility: () => <AccessibilityOption ref={paneRefMap.accessibility} />,
         backup: () => <BackupOption ref={paneRefMap.backup} />,
     }
 

src/hooks/useEcharts.ts

@@ -8,8 +8,57 @@
 
 import { ElLoading } from "element-plus"
 import { type Ref, onMounted, ref, isRef, watch } from "vue"
-import { init, type ECharts } from "echarts"
+import { AriaComponentOption, ComposeOption, init, ECharts } from "echarts"
 import { useWindowSize } from "@vueuse/core"
+import accessibilityHelper from "@service/components/accessibility-helper"
+
+type BaseEchartsOption = ComposeOption<AriaComponentOption>
+
+export const generateAriaOption = async (): Promise<AriaComponentOption> => {
+    const { chartDecal } = await accessibilityHelper.getOption() || {}
+    if (!chartDecal) {
+        return { enabled: false }
+    }
+    const color = "rgba(0, 0, 0, 0.2)"
+    return {
+        enabled: true,
+        decal: {
+            show: true,
+            decals: [{
+                color,
+                dashArrayX: [1, 0],
+                dashArrayY: [2, 5],
+                rotation: .5235987755982988,
+            }, {
+                color,
+                symbol: 'circle',
+                dashArrayX: [[8, 8], [0, 8, 8, 0]],
+                dashArrayY: [6, 0],
+                symbolSize: .8,
+            }, {
+                color,
+                dashArrayX: [1, 0],
+                dashArrayY: [4, 3],
+                rotation: -.7853981633974483
+            }, {
+                color,
+                dashArrayX: [[6, 6], [0, 6, 6, 0]],
+                dashArrayY: [6, 0],
+            }, {
+                color,
+                dashArrayX: [[1, 0], [1, 6]],
+                dashArrayY: [1, 0, 6, 0],
+                rotation: .7853981633974483,
+            }, {
+                color,
+                symbol: 'triangle',
+                dashArrayX: [[9, 9], [0, 9, 9, 0]],
+                dashArrayY: [7, 2],
+                symbolSize: .75,
+            }]
+        }
+    }
+}
 
 export abstract class EchartsWrapper<BizOption, EchartsOption> {
     protected instance: ECharts
@@ -32,8 +81,10 @@ export abstract class EchartsWrapper<BizOption, EchartsOption> {
 
     private async innerRender() {
         const biz = this.lastBizOption
-        const option = await this.generateOption(biz)
+        const option = await this.generateOption(biz) as (EchartsOption & BaseEchartsOption)
         if (!option) return
+        const aria = await generateAriaOption()
+        option.aria = aria
         this.instance.setOption(option, { notMerge: false })
     }
 

src/i18n/message/app/option-resource.json

@@ -121,6 +121,10 @@
                 "interval": "每 {input} 分钟备份一次"
             }
         },
+        "accessibility": {
+            "title": "无障碍功能",
+            "chartDecal": "{input} 是否显示图表的贴花图案"
+        },
         "resetButton": "恢复默认",
         "resetSuccess": "成功重置为默认值",
         "defaultValue": "默认值: {default}"
@@ -369,6 +373,10 @@
                 "interval": "and run every {input} minutes"
             }
         },
+        "accessibility": {
+            "title": "Accessibility",
+            "chartDecal": "{input} Whether to display the chart decal"
+        },
         "resetButton": "Reset",
         "resetSuccess": "Reset to default successfully!",
         "defaultValue": "Default: {default}"

src/i18n/message/app/option.ts

@@ -116,6 +116,10 @@ export type OptionMessage = {
             interval: string
         }
     }
+    accessibility: {
+        title: string
+        chartDecal: string
+    }
     resetButton: string
     resetSuccess: string
     defaultValue: string

src/service/components/accessibility-helper.ts

@@ -0,0 +1,15 @@
+import optionService from "@service/option-service"
+
+class AccessibilityHelper {
+    private option: timer.option.AccessibilityOption = null
+
+    public async getOption(): Promise<timer.option.AccessibilityOption> {
+        if (this.option == null) {
+            this.option = await optionService.getAllOption()
+            optionService.addOptionChangeListener(val => this.option = val)
+        }
+        return this.option
+    }
+}
+
+export default new AccessibilityHelper()

src/service/option-service.ts

@@ -6,48 +6,17 @@
  */
 
 import OptionDatabase from "@db/option-database"
-import {
-    defaultAppearance,
-    defaultPopup,
-    defaultStatistics,
-    defaultBackup,
-    defaultDailyLimit,
-} from "@util/constant/option"
+import { defaultOption } from "@util/constant/option"
 
 const db = new OptionDatabase(chrome.storage.local)
 
-const defaultOption = () => ({
-    ...defaultAppearance(),
-    ...defaultPopup(),
-    ...defaultStatistics(),
-    ...defaultDailyLimit(),
-    ...defaultBackup(),
-})
-
 async function getAllOption(): Promise<timer.option.AllOption> {
     const exist: Partial<timer.option.AllOption> = await db.getOption()
     const result: timer.option.AllOption = defaultOption()
     Object.entries(exist).forEach(([key, val]) => result[key] = val)
     return result
 }
 
-async function setPopupOption(option: timer.option.PopupOption): Promise<void> {
-    await setOption(option)
-}
-
-async function setAppearanceOption(option: timer.option.AppearanceOption): Promise<void> {
-    await setOption(option)
-}
-
-async function setStatisticsOption(option: timer.option.StatisticsOption): Promise<void> {
-    await setOption(option)
-}
-
-async function setDailyLimitOption(option: timer.option.DailyLimitOption): Promise<void> {
-    // Rewrite password
-    await setOption(option)
-}
-
 async function setBackupOption(option: Partial<timer.option.BackupOption>): Promise<void> {
     // Rewrite auths
     const existOption = await getAllOption()
@@ -105,13 +74,14 @@ async function isDarkMode(targetVal?: timer.option.AppearanceOption): Promise<bo
 
 class OptionService {
     getAllOption = getAllOption
-    setPopupOption = setPopupOption
-    setAppearanceOption = setAppearanceOption
-    setStatisticsOption = setStatisticsOption
+    setPopupOption = setOption
+    setAppearanceOption = setOption
+    setAccessibilityOption = setOption
+    setStatisticsOption = setOption
     /**
      * @since 1.9.0
      */
-    setDailyLimitOption = setDailyLimitOption
+    setDailyLimitOption = setOption
     /**
      * @since 1.2.0
      */

src/util/constant/option.ts

@@ -64,12 +64,19 @@ export function defaultBackup(): timer.option.BackupOption {
     }
 }
 
+export function defaultAccessibility(): timer.option.AccessibilityOption {
+    return {
+        chartDecal: false,
+    }
+}
+
 export function defaultOption(): timer.option.AllOption {
     return {
         ...defaultPopup(),
         ...defaultAppearance(),
         ...defaultStatistics(),
         ...defaultBackup(),
         ...defaultDailyLimit(),
+        ...defaultAccessibility(),
     }
 }