sheepzh · sheepzh · Nov 24, 2022 · Jul 22, 2022 · Jul 23, 2022 · Jul 23, 2022
diff --git a/public/guide.html b/public/guide.html
@@ -0,0 +1,19 @@
+<!--
+ Copyright (c) 2022 Hengyang Zhang
+
+ This software is released under the MIT License.
+ https://opensource.org/licenses/MIT
+-->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" type="text/css" href="../guide.css" />
+  </head>
+
+  <body>
+    <div id="guide"></div>
+  </body>
+  <script src="../guide.js"></script>
+</html>
diff --git a/public/popup.html b/public/popup.html
@@ -1,3 +1,10 @@
+<!--
+ Copyright (c) 2022 Hengyang Zhang
+
+ This software is released under the MIT License.
+ https://opensource.org/licenses/MIT
+-->
+
 <!DOCTYPE html>
 <html>
 

diff --git a/src/app/components/common/button-filter-item.ts b/src/app/components/common/button-filter-item.ts
@@ -5,8 +5,8 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { ElementButtonType } from "@app/element-ui/button"
-import ElementIcon from "@app/element-ui/icon"
+import { ElementButtonType } from "@src/element-ui/button"
+import ElementIcon from "@src/element-ui/icon"
 import { ElButton } from "element-plus"
 import { defineComponent, PropType, h, Ref, computed } from "vue"
 

diff --git a/src/app/components/common/date-range-filter-item.ts b/src/app/components/common/date-range-filter-item.ts
@@ -7,7 +7,7 @@
 
 import { ElDatePicker } from "element-plus"
 import { defineComponent, h, PropType, ref, Ref } from "vue"
-import { ElementDatePickerShortcut } from "@app/element-ui/date"
+import { ElementDatePickerShortcut } from "@src/element-ui/date"
 import { t } from "@app/locale"
 
 const _default = defineComponent({

diff --git a/src/app/components/common/popup-confirm-button.ts b/src/app/components/common/popup-confirm-button.ts
@@ -5,8 +5,8 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { ElementButtonType } from "@app/element-ui/button"
-import ElementIcon from "@app/element-ui/icon"
+import { ElementButtonType } from "@src/element-ui/button"
+import ElementIcon from "@src/element-ui/icon"
 import { t } from "@app/locale"
 import { ElButton, ElPopconfirm } from "element-plus"
 import { defineComponent, PropType, h, computed } from "vue"

diff --git a/src/app/components/data-manage/clear/filter/operation-button.ts b/src/app/components/data-manage/clear/filter/operation-button.ts
@@ -6,14 +6,14 @@
  */
 
 import { ElButton, ElMessage, ElMessageBox, ElTooltip } from "element-plus"
-import ElementIcon from "@src/app/element-ui/icon"
+import ElementIcon from "@src/element-ui/icon"
 import { Ref, h } from "vue"
 import TimerDatabase, { TimerCondition } from "@db/timer-database"
 import { ItemMessage } from "@util/i18n/components/item"
 import { t } from "@src/app/locale"
 import { DataManageMessage } from "@src/app/locale/components/data-manage"
 import { MILL_PER_DAY } from "@util/time"
-import { ElementButtonType } from "@app/element-ui/button"
+import { ElementButtonType } from "@src/element-ui/button"
 
 const timerDatabase = new TimerDatabase(chrome.storage.local)
 

diff --git a/src/app/components/habit/component/filter.ts b/src/app/components/habit/component/filter.ts
@@ -11,7 +11,7 @@ import { daysAgo } from "@util/time"
 import { t } from "@app/locale"
 import { HabitMessage } from "@app/locale/components/habit"
 import SwitchFilterItem from "@app/components/common/switch-filter-item"
-import { ElementDatePickerShortcut } from "@app/element-ui/date"
+import { ElementDatePickerShortcut } from "@src/element-ui/date"
 import DateRangeFilterItem from "@app/components/common/date-range-filter-item"
 
 export type HabitFilterOption = {

diff --git a/src/app/components/report/filter/index.ts b/src/app/components/report/filter/index.ts
@@ -6,7 +6,7 @@
  */
 import type { FileFormat } from "./download-file"
 import type { Ref, PropType } from "vue"
-import type { ElementDatePickerShortcut } from "@app/element-ui/date"
+import type { ElementDatePickerShortcut } from "@src/element-ui/date"
 import type { ReportMessage } from "@app/locale/components/report"
 
 import DownloadFile from "./download-file"

diff --git a/src/app/components/trend/components/filter.ts b/src/app/components/trend/components/filter.ts
@@ -14,7 +14,7 @@ import { t } from "@app/locale"
 import { TrendMessage } from "@app/locale/components/trend"
 import DateRangeFilterItem from "@app/components/common/date-range-filter-item"
 import SelectFilterItem from "@app/components/common/select-filter-item"
-import { ElementDatePickerShortcut } from "@app/element-ui/date"
+import { ElementDatePickerShortcut } from "@src/element-ui/date"
 import { labelOfHostInfo } from "./common"
 
 async function handleRemoteSearch(queryStr: string, trendDomainOptions: Ref<timer.app.trend.HostInfo[]>, searching: Ref<boolean>) {

diff --git a/src/app/layout/menu.ts b/src/app/layout/menu.ts
@@ -5,7 +5,7 @@
  * https://opensource.org/licenses/MIT
  */
 import type { UnwrapRef } from "vue"
-import type ElementIcon from "../element-ui/icon"
+import type ElementIcon from "../../element-ui/icon"
 import type { RouteLocationNormalizedLoaded, Router } from "vue-router"
 import type { I18nKey } from "@app/locale"
 import type { MenuMessage } from "@app/locale/components/menu"

diff --git a/src/background/browser-action-menu-manager.ts b/src/background/browser-action-menu-manager.ts
@@ -6,7 +6,7 @@
  */
 
 import { OPTION_ROUTE } from "../app/router/constants"
-import { getAppPageUrl, SOURCE_CODE_PAGE, TU_CAO_PAGE } from "@util/constant/url"
+import { getAppPageUrl, getGuidePageUrl, SOURCE_CODE_PAGE, TU_CAO_PAGE } from "@util/constant/url"
 import { t2Chrome } from "@util/i18n/chrome/t"
 import { IS_SAFARI } from "@util/constant/environment"
 
@@ -57,11 +57,19 @@ const feedbackPageProps: chrome.contextMenus.CreateProperties = {
     ...baseProps
 }
 
+const guidePageProps: chrome.contextMenus.CreateProperties = {
+    id: chrome.runtime.id + '_timer_menu_item_guide_link',
+    title: titleOf('📖', t2Chrome(msg => msg.contextMenus.guidePage)),
+    onclick: () => chrome.tabs.create({ url: getGuidePageUrl(true) }),
+    ...baseProps
+}
+
 function init() {
     create(allFunctionProps)
     create(optionPageProps)
     create(repoPageProps)
     create(feedbackPageProps)
+    create(guidePageProps)
 }
 
 function create(props: chrome.contextMenus.CreateProperties) {

diff --git a/src/background/index.ts b/src/background/index.ts
@@ -15,6 +15,7 @@ import ActiveTabListener from "./active-tab-listener"
 import badgeTextManager from "./badge-text-manager"
 import metaService from "@service/meta-service"
 import UninstallListener from "./uninstall-listener"
+import { getGuidePageUrl } from "@util/constant/url"
 import MessageDispatcher from "./message-dispatcher"
 import initLimitProcesser from "./limit-processor"
 import initCsHandler from "./content-script-handler"
@@ -55,7 +56,10 @@ new ActiveTabListener()
 
 // Collect the install time
 chrome.runtime.onInstalled.addListener(async detail => {
-    detail.reason === "install" && await metaService.updateInstallTime(new Date())
+    if (detail.reason === "install") {
+        chrome.tabs.create({ url: getGuidePageUrl(true) })
+        await metaService.updateInstallTime(new Date())
+    }
     // Questionnaire for uninstall
     new UninstallListener().listen()
 })

diff --git a/src/app/element-ui/button.ts → src/element-ui/button.ts b/src/app/element-ui/button.ts → src/element-ui/button.ts
diff --git a/src/app/element-ui/date.ts → src/element-ui/date.ts b/src/app/element-ui/date.ts → src/element-ui/date.ts
diff --git a/src/app/element-ui/icon.ts → src/element-ui/icon.ts b/src/app/element-ui/icon.ts → src/element-ui/icon.ts
diff --git a/src/guide/component/common.ts b/src/guide/component/common.ts
@@ -0,0 +1,46 @@
+import type { I18nKey } from "@guide/locale"
+import type { VNode } from "vue"
+
+import { t, tN } from "@guide/locale"
+import { h } from "vue"
+
+export function h1(i18nKey: I18nKey, archorClz: string): VNode {
+    return h('h1', { class: `guide-h1 archor-${archorClz}` }, t(i18nKey))
+}
+
+export function h2(i18nKey: I18nKey, archorClz: string): VNode {
+    return h('h2', { class: `guide-h2 archor-${archorClz}` }, t(i18nKey))
+}
+
+export function paragraph(i18nKey: I18nKey, param?: any): VNode {
+    return h('div', { class: 'guide-paragragh' }, tN(i18nKey, param))
+}
+
+export function link(href: string, text: string): VNode {
+    return h('a', { class: 'guide-link', href, target: "_blank" }, text)
+}
+
+export function linkInner(extensionUrl: string, text: string): VNode {
+    return h('a', {
+        class: 'guide-link',
+        onClick: () => chrome.tabs.create({ url: extensionUrl }),
+    }, text)
+}
+
+export function list(...items: (I18nKey | [I18nKey, any])[]): VNode {
+    const children = items.map(item => {
+        let param = undefined
+        let i18nKey: I18nKey = undefined
+        if (Array.isArray(item)) {
+            [i18nKey, param] = item
+        } else {
+            i18nKey = item
+        }
+        return h('li', { class: 'guide-list-item' }, tN(i18nKey, param))
+    })
+    return h('ul', { class: 'guide-list' }, children)
+}
+
+export function section(...vnodes: VNode[]): VNode {
+    return h('section', { class: 'guide-area' }, vnodes)
+}
diff --git a/src/guide/component/privacy.ts b/src/guide/component/privacy.ts
@@ -0,0 +1,23 @@
+import { defineComponent } from "vue"
+import { h1, h2, list, paragraph, section } from "./common"
+
+const _default = defineComponent({
+    setup() {
+        return () => section(
+            h1(msg => msg.layout.menu.privacy.title, 'privacy'),
+            h2(msg => msg.layout.menu.privacy.scope, 'scope'),
+            paragraph(msg => msg.privacy.scope.p1),
+            list(
+                msg => msg.privacy.scope.l1,
+                msg => msg.privacy.scope.l2,
+                msg => msg.privacy.scope.l3,
+            ),
+            h2(msg => msg.layout.menu.privacy.storage, 'storage'),
+            paragraph(msg => msg.privacy.storage.p1),
+            paragraph(msg => msg.privacy.storage.p2),
+            paragraph(msg => msg.privacy.storage.p3),
+        )
+    }
+})
+
+export default _default
diff --git a/src/guide/component/profile.ts b/src/guide/component/profile.ts
@@ -0,0 +1,30 @@
+
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { EDGE_HOMEPAGE, CHROME_HOMEPAGE, FIREFOX_HOMEPAGE, SOURCE_CODE_PAGE } from "@util/constant/url"
+import { defineComponent } from "vue"
+
+import { h1, paragraph, link, section } from "./common"
+
+const _default = defineComponent({
+    name: 'GuideProfile',
+    setup() {
+        return () => section(
+            h1(msg => msg.layout.menu.profile, 'profile'),
+            paragraph(msg => msg.profile.p1, {
+                edge: link(EDGE_HOMEPAGE, 'Edge'),
+                chrome: link(CHROME_HOMEPAGE, 'Chrome'),
+                firefox: link(FIREFOX_HOMEPAGE, 'Firefox'),
+                github: link(SOURCE_CODE_PAGE, 'Github'),
+            }),
+            paragraph(msg => msg.profile.p2),
+        )
+    }
+})
+
+export default _default
diff --git a/src/guide/component/usage.ts b/src/guide/component/usage.ts
@@ -0,0 +1,59 @@
+import { getAppPageUrl, PSL_HOMEPAGE } from "@util/constant/url"
+import { defineComponent } from "vue"
+import { h1, h2, paragraph, list, link, section, linkInner } from "./common"
+import { t } from "../locale"
+
+const quickstart = () => [
+    h2(msg => msg.layout.menu.usage.quickstart, 'quickstart'),
+    paragraph(msg => msg.usage.quickstart.p1),
+    list(
+        msg => msg.usage.quickstart.l1,
+        msg => msg.usage.quickstart.l2,
+        msg => msg.usage.quickstart.l3,
+    ),
+    paragraph(msg => msg.usage.quickstart.p2),
+]
+
+const backgroundPageUrl = getAppPageUrl(false)
+
+const background = () => [
+    h2(msg => msg.layout.menu.usage.background, 'background'),
+    paragraph(msg => msg.usage.background.p1, {
+        background: linkInner(backgroundPageUrl, t(msg => msg.usage.background.backgroundPage))
+    }),
+    list(
+        msg => msg.usage.background.l1,
+        msg => msg.usage.background.l2,
+    ),
+    paragraph(msg => msg.usage.background.p2),
+]
+
+const advanced = () => [
+    h2(msg => msg.layout.menu.usage.advanced, 'advanced'),
+    paragraph(msg => msg.usage.advanced.p1),
+    list(
+        msg => msg.usage.advanced.l1,
+        msg => msg.usage.advanced.l2,
+        msg => msg.usage.advanced.l3,
+        msg => msg.usage.advanced.l4,
+        [msg => msg.usage.advanced.l5, {
+            psl: link(PSL_HOMEPAGE, 'Public Suffix List')
+        }],
+        msg => msg.usage.advanced.l6,
+        msg => msg.usage.advanced.l7,
+        msg => msg.usage.advanced.l8,
+    ),
+]
+
+const _default = defineComponent({
+    setup() {
+        return () => section(
+            h1(msg => msg.layout.menu.usage.title, 'usage'),
+            ...quickstart(),
+            ...background(),
+            ...advanced(),
+        )
+    }
+})
+
+export default _default
diff --git a/src/guide/index.ts b/src/guide/index.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+import "./style"
+import 'element-plus/theme-chalk/index.css'
+
+import { initLocale } from "@util/i18n"
+import { t } from "./locale"
+import { init as initTheme } from "@util/dark-mode"
+import { createApp } from "vue"
+import Main from "./layout"
+
+
+async function main() {
+    initTheme()
+    await initLocale()
+
+    const app = createApp(Main)
+    app.mount('#guide')
+
+    document.title = t(msg => msg.layout.title)
+}
+
+main()
diff --git a/src/guide/layout/content.ts b/src/guide/layout/content.ts
@@ -0,0 +1,33 @@
+
+import { ElDivider } from "element-plus"
+import { watch, defineComponent, h, onMounted } from "vue"
+import Profile from "../component/profile"
+import Usage from "../component/usage"
+import Privacy from "../component/privacy"
+
+function scrolePosition(position: string) {
+    document.querySelector(`.archor-${position}`)?.scrollIntoView?.()
+}
+
+const _default = defineComponent({
+    name: 'GuideContent',
+    props: {
+        position: {
+            type: String,
+            required: false,
+        }
+    },
+    setup(props) {
+        onMounted(() => scrolePosition(props.position))
+        watch(() => props.position, newVal => newVal && scrolePosition(newVal))
+        return () => [
+            h(Profile),
+            h(ElDivider),
+            h(Usage),
+            h(ElDivider),
+            h(Privacy),
+        ]
+    }
+})
+
+export default _default