Optimize guide page (#205)

README.md

@@ -20,7 +20,7 @@ Timer can
 - support to set the maximum time for browsing a specific website each day to help you keey away from time wasting.
 - support to export files formatted _.csv_ and _.json_.
 - support dark mode.
-- support to sync data with Github Gist across serveral browser clients.
+- support to sync data with GitHub Gist across serveral browser clients.
 
 ## Install
 

package.json

@@ -12,7 +12,11 @@
     "test": "jest --env=jsdom",
     "test-c": "jest --coverage --env=jsdom"
   },
-  "author": "zhy",
+  "author": {
+    "name": "zhy",
+    "email": "returnzhy1996@outlook.com",
+    "url": "https://www.github.com/sheepzh"
+  },
   "license": "MIT",
   "devDependencies": {
     "@crowdin/crowdin-api-client": "^1.22.1",
@@ -37,7 +41,7 @@
     "node-sass": "^8.0.0",
     "sass-loader": "^13.2.1",
     "style-loader": "^3.3.2",
-    "ts-jest": "^29.0.5",
+    "ts-jest": "^29.1.0",
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.2",

src/api/chrome/runtime.ts

@@ -38,4 +38,13 @@ export function getVersion(): string {
 
 export function setUninstallURL(url: string): Promise<void> {
     return new Promise(resolve => chrome.runtime.setUninstallURL(url, resolve))
+}
+
+/**
+ * Get the url of this extension
+ * 
+ * @param path The path relative to the root directory of this extension 
+ */
+export function getUrl(path: string): string {
+    return chrome.runtime.getURL(path)
 }

src/api/chrome/tab.ts

@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) 2023-present Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
 import { handleError } from "./common"
 
 export function getTab(id: number): Promise<ChromeTab> {
@@ -7,6 +14,13 @@ export function getTab(id: number): Promise<ChromeTab> {
     }))
 }
 
+export function getCurrentTab(): Promise<ChromeTab> {
+    return new Promise(resolve => chrome.tabs.getCurrent(tab => {
+        handleError("getCurrentTab")
+        resolve(tab)
+    }))
+}
+
 export function createTab(param: chrome.tabs.CreateProperties | string): Promise<ChromeTab> {
     const prop: chrome.tabs.CreateProperties = typeof param === 'string' ? { url: param } : param
     return new Promise(resolve => chrome.tabs.create(prop, tab => {
@@ -15,6 +29,27 @@ export function createTab(param: chrome.tabs.CreateProperties | string): Promise
     }))
 }
 
+/**
+ * Create one tab after current tab.
+ * 
+ * Must not be invocked in background.js
+ */
+export async function createTabAfterCurrent(url: string): Promise<ChromeTab> {
+    const tab = await getCurrentTab()
+    console.log(tab)
+    if (!tab) {
+        // Current tab not found
+        return createTab(url)
+    } else {
+        const { windowId, index: currentIndex } = tab
+        return createTab({
+            url,
+            windowId,
+            index: (currentIndex ?? -1) + 1
+        })
+    }
+}
+
 export function listTabs(query?: chrome.tabs.QueryInfo): Promise<ChromeTab[]> {
     query = query || {}
     return new Promise(resolve => chrome.tabs.query(query, tabs => {

src/app/components/limit/modify/form/url.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2021 Hengyang Zhang
+ * Copyright (c) 2021-present Hengyang Zhang
  * 
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
@@ -12,6 +12,7 @@ import { ElButton, ElFormItem, ElInput, ElOption, ElSelect } from "element-plus"
 import { checkPermission, requestPermission } from "@api/chrome/permissions"
 import { IS_FIREFOX } from "@util/constant/environment"
 import { parseUrl } from "./common"
+import { AUTHOR_EMAIL } from "@src/package"
 
 const ALL_PROTOCOLS: Protocol[] = ['http://', 'https://', '*://']
 
@@ -71,7 +72,7 @@ async function handlePaste(urlHandler: (newUrl: string) => void, protocolHandler
     }
 
     if (!granted) {
-        alert('Can\'t read the clipboard, please contact the developer via email to returnzhy1996@outlook.com')
+        alert(`Can\'t read the clipboard, please contact the developer via email to ${AUTHOR_EMAIL}`)
         return
     }
 

src/app/components/option/components/backup/index.ts

@@ -16,6 +16,7 @@ import { defineComponent, ref, h } from "vue"
 import { renderOptionItem, tooltip } from "../../common"
 import BackUpAutoInput from "./auto-input"
 import Footer from "./footer"
+import { AUTHOR_EMAIL } from "@src/package"
 
 const ALL_TYPES: timer.backup.Type[] = [
     'none',
@@ -128,7 +129,7 @@ const _default = defineComponent({
                 h(ElAlert, {
                     closable: false,
                     type: "warning",
-                    description: t(msg => msg.option.backup.alert)
+                    description: t(msg => msg.option.backup.alert, { email: AUTHOR_EMAIL })
                 }),
                 h(ElDivider),
                 renderOptionItem({

src/app/components/rule-merge/components/item.ts

@@ -4,23 +4,16 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
+import type { MergeTagType } from "@util/merge"
+import type { Ref } from "vue"
 
 import { t } from "@app/locale"
 import { Edit } from "@element-plus/icons-vue"
 import { tryParseInteger } from "@util/number"
 import { ElTag } from "element-plus"
-import { computed, defineComponent, h, ref, Ref, watch } from "vue"
+import { computed, defineComponent, h, ref, watch } from "vue"
 import ItemInput from "./item-input"
-
-function computeType(mergedVal: number | string): '' | 'info' | 'success' {
-    return typeof mergedVal === 'number' ? 'success' : mergedVal === '' ? 'info' : ''
-}
-
-function computeTxt(mergedVal: number | string) {
-    return typeof mergedVal === 'number'
-        ? t(msg => msg.mergeRule.resultOfLevel, { level: mergedVal + 1 })
-        : mergedVal === '' ? t(msg => msg.mergeRule.resultOfOrigin) : mergedVal
-}
+import { computeMergeTxt, computeMergeType } from "@util/merge"
 
 const _default = defineComponent({
     name: "MergeRuleItem",
@@ -47,8 +40,10 @@ const _default = defineComponent({
         const id: Ref<number> = ref(props.index || 0)
         watch(() => props.index, newVal => id.value = newVal)
         const editing: Ref<boolean> = ref(false)
-        const type: Ref<'' | 'info' | 'success'> = computed(() => computeType(merged.value))
-        const txt: Ref<string> = computed(() => computeTxt(merged.value))
+        const type: Ref<MergeTagType> = computed(() => computeMergeType(merged.value))
+        const tagTxt: Ref<string> = computed(() => computeMergeTxt(origin.value, merged.value,
+            (finder, param) => t(msg => finder(msg.mergeCommon), param)
+        ))
         ctx.expose({
             forceEdit() {
                 editing.value = true
@@ -77,7 +72,10 @@ const _default = defineComponent({
                 type: type.value,
                 closable: true,
                 onClose: () => ctx.emit("delete", origin.value)
-            }, () => [`${origin.value}  >>>  ${txt.value}`, h(Edit, { class: "edit-icon", onclick: () => editing.value = true })])
+            }, () => [
+                tagTxt.value,
+                h(Edit, { class: "edit-icon", onclick: () => editing.value = true })
+            ])
     }
 })
 

src/app/layout/menu.ts

@@ -1,26 +1,28 @@
 /**
- * Copyright (c) 2021 Hengyang Zhang
+ * Copyright (c) 2021-present Hengyang Zhang
  * 
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
 
 import type { UnwrapRef } from "vue"
 import type ElementIcon from "@src/element-ui/icon"
+import type { MenuItemRegistered } from "element-plus"
 import type { RouteLocationNormalizedLoaded, Router } from "vue-router"
 import type { I18nKey } from "@app/locale"
 import type { MenuMessage } from "@i18n/message/app/menu"
 
 import { defineComponent, h, onMounted, reactive } from "vue"
-import { ElIcon, ElMenu, ElMenuItem, ElMenuItemGroup, MenuItemRegistered } from "element-plus"
+import { ElIcon, ElMenu, ElMenuItem, ElMenuItemGroup } from "element-plus"
 import { useRoute, useRouter } from "vue-router"
 import { t } from "@app/locale"
 import { HOME_PAGE, FEEDBACK_QUESTIONNAIRE, getGuidePageUrl } from "@util/constant/url"
 import { Aim, Calendar, ChatSquare, Folder, HelpFilled, HotWater, Memo, Rank, SetUp, Stopwatch, Sugar, Tickets, Timer } from "@element-plus/icons-vue"
 import { locale } from "@i18n"
 import TrendIcon from "./icon/trend-icon"
 import { createTab } from "@api/chrome/tab"
-import { ANALYSIS_ROUTE } from "@app/router/constants"
+import { ANALYSIS_ROUTE, MERGE_ROUTE } from "@app/router/constants"
+import { START_ROUTE } from "@guide/router/constants"
 
 type _MenuItem = {
     title: keyof MenuMessage
@@ -46,7 +48,7 @@ type _RouteProps = {
 function generateMenus(): _MenuGroup[] {
     const otherMenuItems: _MenuItem[] = [{
         title: 'userManual',
-        href: getGuidePageUrl(false),
+        href: getGuidePageUrl(false, START_ROUTE),
         icon: Memo,
         index: '_guide',
     }, {
@@ -111,7 +113,7 @@ function generateMenus(): _MenuGroup[] {
             icon: Tickets
         }, {
             title: 'mergeRule',
-            route: '/additional/rule-merge',
+            route: MERGE_ROUTE,
             icon: Rank
         }, {
             title: 'option',
@@ -135,8 +137,8 @@ function openMenu(route: string, title: I18nKey, routeProps: UnwrapRef<_RoutePro
 
 const openHref = (href: string) => createTab(href)
 
-function handleClick(_MenuItem: _MenuItem, routeProps: UnwrapRef<_RouteProps>) {
-    const { route, title, href } = _MenuItem
+function handleClick(menuItem: _MenuItem, routeProps: UnwrapRef<_RouteProps>) {
+    const { route, title, href } = menuItem
     if (route) {
         openMenu(route, msg => msg.menu[title], routeProps)
     } else {

src/app/router/constants.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2021 Hengyang Zhang
+ * Copyright (c) 2021-present Hengyang Zhang
  * 
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
@@ -18,4 +18,9 @@ export const LIMIT_ROUTE = '/behavior/limit'
 /**
  * @since 0.9.1
  */
-export const REPORT_ROUTE = '/data/report'
+export const REPORT_ROUTE = '/data/report'
+
+/**
+ * @since 1.8.0
+ */
+export const MERGE_ROUTE = '/additional/rule-merge'

src/app/router/index.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2021 Hengyang Zhang
+ * Copyright (c) 2021-present Hengyang Zhang
  * 
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
@@ -9,7 +9,7 @@ import type { App } from "vue"
 import type { RouteRecordRaw } from "vue-router"
 
 import { createRouter, createWebHashHistory } from "vue-router"
-import { OPTION_ROUTE, ANALYSIS_ROUTE, LIMIT_ROUTE, REPORT_ROUTE } from "./constants"
+import { OPTION_ROUTE, ANALYSIS_ROUTE, LIMIT_ROUTE, REPORT_ROUTE, MERGE_ROUTE } from "./constants"
 import metaService from "@service/meta-service"
 
 const dataRoutes: RouteRecordRaw[] = [
@@ -58,7 +58,7 @@ const additionalRoutes: RouteRecordRaw[] = [
         path: '/additional/whitelist',
         component: () => import('../components/whitelist')
     }, {
-        path: '/additional/rule-merge',
+        path: MERGE_ROUTE,
         component: () => import('../components/rule-merge')
     }, {
         path: OPTION_ROUTE,

src/background/browser-action-menu-manager.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2021 Hengyang Zhang
+ * Copyright (c) 2021-present Hengyang Zhang
  * 
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
@@ -13,6 +13,7 @@ import { createTab } from "@api/chrome/tab"
 import { createContextMenu } from "@api/chrome/context-menu"
 import { getRuntimeId } from "@api/chrome/runtime"
 import { locale } from "@i18n"
+import { START_ROUTE } from "@guide/router/constants"
 
 const APP_PAGE_URL = getAppPageUrl(true)
 
@@ -64,7 +65,7 @@ const feedbackPageProps: ChromeContextMenuCreateProps = {
 const guidePageProps: ChromeContextMenuCreateProps = {
     id: getRuntimeId() + '_timer_menu_item_guide_link',
     title: titleOf('📖', t2Chrome(msg => msg.base.guidePage)),
-    onclick: () => createTab(getGuidePageUrl(true)),
+    onclick: () => createTab(getGuidePageUrl(true, START_ROUTE)),
     ...baseProps
 }
 

src/element-ui/table.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import type { TableColumnCtx } from "element-plus"
+
+export type ElTableRowScope<T> = {
+    row: T
+}
+
+export type ElTableSpanMethodProps<T> = {
+    row: T
+    column: TableColumnCtx<T>
+    rowIndex: number
+    columnIndex: number
+}

src/guide/component/app.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { defineComponent, h } from "vue"
+import Article from "./common/article"
+import { MERGE_ROUTE, PRIVACY_ROUTE } from "@guide/router/constants"
+import { p, ul, alert } from "./common/util"
+import { t } from "@guide/locale"
+
+const _default = defineComponent(() => {
+    return () => h(Article, {
+        previous: {
+            route: PRIVACY_ROUTE,
+            title: msg => msg.privacy.title,
+        },
+        next: {
+            route: MERGE_ROUTE,
+            title: msg => msg.merge.title,
+        },
+        title: msg => msg.app.title,
+    }, () => [
+        p(msg => msg.app.p1),
+        ul(
+            [msg => msg.app.l1, { button: t(msg => msg.base.allFunction) }],
+            [msg => msg.app.l2, { button: t(msg => msg.base.allFunction) }],
+        ),
+        alert(msg => msg.app.p2, 'success'),
+    ])
+})
+
+export default _default