Skip to content

Commit e86cf66

Browse files
author
sheepzh
committed
Semi
1 parent dd8a82b commit e86cf66

File tree

11 files changed

+139
-86
lines changed

11 files changed

+139
-86
lines changed

‎src/guide/component/common.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import type { VNode } from "vue"
44
import { t, tN } from "@guide/locale"
55
import { h } from "vue"
66

7-
export function h1(i18nKey: I18nKey): VNode {
8-
return h('h1', { class: 'guide-h1' }, t(i18nKey))
7+
export function h1(i18nKey: I18nKey, archorClz: string): VNode {
8+
return h('h1', { class: `guide-h1 archor-${archorClz}` }, t(i18nKey))
99
}
1010

11-
export function h2(i18nKey: I18nKey): VNode {
12-
return h('h2', { class: 'guide-h2' }, t(i18nKey))
11+
export function h2(i18nKey: I18nKey, archorClz: string): VNode {
12+
return h('h2', { class: `guide-h2 archor-${archorClz}` }, t(i18nKey))
1313
}
1414

1515
export function paragraph(i18nKey: I18nKey, param?: any): VNode {
@@ -20,7 +20,7 @@ export function link(href: string, text: string): VNode {
2020
return h('a', { class: 'guide-link', href, target: "_blank" }, text)
2121
}
2222

23-
export function list(...items: (I18nKey | [I18nKey, any])[]) {
23+
export function list(...items: (I18nKey | [I18nKey, any])[]): VNode {
2424
const children = items.map(item => {
2525
let param = undefined
2626
let i18nKey: I18nKey = undefined
@@ -32,4 +32,8 @@ export function list(...items: (I18nKey | [I18nKey, any])[]) {
3232
return h('li', { class: 'guide-list-item' }, tN(i18nKey, param))
3333
})
3434
return h('ul', { class: 'guide-list' }, children)
35+
}
36+
37+
export function section(...vnodes: VNode[]): VNode {
38+
return h('section', { class: 'guide-area' }, vnodes)
3539
}

‎src/guide/component/privacy.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { defineComponent } from "vue"
2-
import { h1, h2 } from "./common"
2+
import { h1, h2, section } from "./common"
33

44
const _default = defineComponent({
55
setup() {
6-
return () => [
7-
h1(msg => msg.layout.menu.privacy.title),
8-
h2(msg => msg.layout.menu.privacy.scope),
9-
h2(msg => msg.layout.menu.privacy.storage),
10-
]
6+
return () => section(
7+
h1(msg => msg.layout.menu.privacy.title, 'privacy'),
8+
h2(msg => msg.layout.menu.privacy.scope, 'scope'),
9+
h2(msg => msg.layout.menu.privacy.storage, 'storage'),
10+
)
1111
}
1212
})
1313

‎src/guide/component/profile.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,21 @@
99
import { EDGE_HOMEPAGE, CHROME_HOMEPAGE, FIREFOX_HOMEPAGE, SOURCE_CODE_PAGE } from "@util/constant/url"
1010
import { defineComponent } from "vue"
1111

12-
import { h1, paragraph, link } from "./common"
12+
import { h1, paragraph, link, section } from "./common"
1313

1414
const _default = defineComponent({
1515
name: 'GuideProfile',
1616
setup() {
17-
return () => [
18-
h1(msg => msg.layout.menu.profile),
17+
return () => section(
18+
h1(msg => msg.layout.menu.profile, 'profile'),
1919
paragraph(msg => msg.profile.p1, {
2020
edge: link(EDGE_HOMEPAGE, 'Edge'),
2121
chrome: link(CHROME_HOMEPAGE, 'Chrome'),
2222
firefox: link(FIREFOX_HOMEPAGE, 'Firefox'),
2323
github: link(SOURCE_CODE_PAGE, 'Github'),
2424
}),
2525
paragraph(msg => msg.profile.p2),
26-
]
26+
)
2727
}
2828
})
2929

‎src/guide/component/usage.ts‎

Lines changed: 45 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,53 @@
11
import { PSL_HOMEPAGE } from "@util/constant/url"
22
import { defineComponent } from "vue"
3-
import { h1, h2, paragraph, list, link } from "./common"
3+
import { h1, h2, paragraph, list, link, section } from "./common"
4+
5+
const quickstart = () => [
6+
h2(msg => msg.layout.menu.usage.quickstart, 'quickstart'),
7+
paragraph(msg => msg.usage.quickstart.p1),
8+
list(
9+
msg => msg.usage.quickstart.l1,
10+
msg => msg.usage.quickstart.l2,
11+
msg => msg.usage.quickstart.l3,
12+
),
13+
paragraph(msg => msg.usage.quickstart.p2),
14+
]
15+
16+
const background = () => [
17+
h2(msg => msg.layout.menu.usage.background, 'background'),
18+
paragraph(msg => msg.usage.background.p1),
19+
list(
20+
msg => msg.usage.background.l1,
21+
msg => msg.usage.background.l2,
22+
),
23+
paragraph(msg => msg.usage.background.p2),
24+
]
25+
26+
const advanced = () => [
27+
h2(msg => msg.layout.menu.usage.advanced, 'advanced'),
28+
paragraph(msg => msg.usage.advanced.p1),
29+
list(
30+
msg => msg.usage.advanced.l1,
31+
msg => msg.usage.advanced.l2,
32+
msg => msg.usage.advanced.l3,
33+
msg => msg.usage.advanced.l4,
34+
[msg => msg.usage.advanced.l5, {
35+
psl: link(PSL_HOMEPAGE, 'Public Suffix List')
36+
}],
37+
msg => msg.usage.advanced.l6,
38+
msg => msg.usage.advanced.l7,
39+
msg => msg.usage.advanced.l8,
40+
),
41+
]
442

543
const _default = defineComponent({
644
setup() {
7-
return () => [
8-
h1(msg => msg.layout.menu.usage.title),
9-
h2(msg => msg.layout.menu.usage.quickstart),
10-
paragraph(msg => msg.usage.quickstart.p1),
11-
list(
12-
msg => msg.usage.quickstart.l1,
13-
msg => msg.usage.quickstart.l2,
14-
msg => msg.usage.quickstart.l3,
15-
),
16-
h2(msg => msg.layout.menu.usage.background),
17-
paragraph(msg => msg.usage.background.p1),
18-
list(
19-
msg => msg.usage.background.l1,
20-
msg => msg.usage.background.l2,
21-
),
22-
paragraph(msg => msg.usage.background.p2),
23-
h2(msg => msg.layout.menu.usage.advanced),
24-
paragraph(msg => msg.usage.advanced.p1),
25-
list(
26-
msg => msg.usage.advanced.l1,
27-
msg => msg.usage.advanced.l2,
28-
msg => msg.usage.advanced.l3,
29-
msg => msg.usage.advanced.l4,
30-
[msg => msg.usage.advanced.l5, {
31-
psl: link(PSL_HOMEPAGE, 'Public Suffix List')
32-
}],
33-
msg => msg.usage.advanced.l6,
34-
msg => msg.usage.advanced.l7,
35-
msg => msg.usage.advanced.l8,
36-
),
37-
]
45+
return () => section(
46+
h1(msg => msg.layout.menu.usage.title, 'usage'),
47+
...quickstart(),
48+
...background(),
49+
...advanced(),
50+
)
3851
}
3952
})
4053

‎src/guide/index.ts‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,16 @@
44
* This software is released under the MIT License.
55
* https://opensource.org/licenses/MIT
66
*/
7-
8-
import type { Language } from "element-plus/lib/locale"
9-
107
import "./style"
118
import 'element-plus/theme-chalk/index.css'
129

13-
import { initLocale, locale as appLocale } from "@util/i18n"
10+
import { initLocale } from "@util/i18n"
1411
import { t } from "./locale"
1512
import { init as initTheme } from "@util/dark-mode"
1613
import { createApp } from "vue"
1714
import Main from "./layout"
18-
import ElementPlus from 'element-plus'
1915

2016

21-
const locales: { [locale in timer.Locale]: () => Promise<{ default: Language }> } = {
22-
zh_CN: () => import('element-plus/lib/locale/lang/zh-cn'),
23-
zh_TW: () => import('element-plus/lib/locale/lang/zh-tw'),
24-
en: () => import('element-plus/lib/locale/lang/en'),
25-
ja: () => import('element-plus/lib/locale/lang/ja')
26-
}
27-
2817
async function main() {
2918
initTheme()
3019
await initLocale()
@@ -33,7 +22,6 @@ async function main() {
3322
app.mount('#guide')
3423

3524
document.title = t(msg => msg.layout.title)
36-
locales[appLocale]?.()?.then(locale => app.use(ElementPlus, { locale: locale.default }))
3725
}
3826

3927
main()

‎src/guide/layout/content.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11

22
import { ElDivider } from "element-plus"
3-
import { watch, defineComponent, ref, h } from "vue"
3+
import { watch, defineComponent, h, onMounted } from "vue"
44
import Profile from "../component/profile"
55
import Usage from "../component/usage"
66
import Privacy from "../component/privacy"
77

8+
function scrolePosition(position: string) {
9+
document.querySelector(`.archor-${position}`)?.scrollIntoView?.()
10+
}
11+
812
const _default = defineComponent({
913
name: 'GuideContent',
1014
props: {
@@ -14,8 +18,8 @@ const _default = defineComponent({
1418
}
1519
},
1620
setup(props) {
17-
const myPosition = ref(props.position)
18-
watch(() => props.position, newVal => myPosition.value = newVal)
21+
onMounted(() => scrolePosition(props.position))
22+
watch(() => props.position, newVal => newVal && scrolePosition(newVal))
1923
return () => [
2024
h(Profile),
2125
h(ElDivider),

‎src/guide/layout/menu.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* https://opensource.org/licenses/MIT
66
*/
77

8-
import type { VNode } from "vue"
8+
import { ref, VNode } from "vue"
99

1010
import ElementIcon from "@src/element-ui/icon"
1111
import { I18nKey, t } from "@guide/locale"
@@ -105,9 +105,14 @@ const _default = defineComponent({
105105
group => renderGroup(handleClick, group)
106106
)
107107
]
108+
const menuRef = ref()
108109
return () => h(ElMenu, {
109110
defaultActive: profilePosition,
110-
defaultOpeneds: menus.map(group => group.position)
111+
defaultOpeneds: menus.map(group => group.position),
112+
ref: menuRef,
113+
onClose(index: string) {
114+
menuRef.value?.open?.(index)
115+
}
111116
}, menuItems)
112117
}
113118
})

‎src/guide/locale/components/profile.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,10 @@ const _default: Messages<ProfileMessage> = {
2727
p2: ''
2828
},
2929
en: {
30-
p1: '',
31-
p2: ''
30+
p1: appMessages.en.name + ' is a browser extension to track the time you spent on all websites.\
31+
And you can install it for {firefox}, {chrome} and {edge}. \
32+
You can also compile the source code on {github} and install it manually in Safari.',
33+
p2: 'On this page you will quickly learn how to use it, as well as the privacy policy.'
3234
},
3335
ja: {
3436
p1: '',

‎src/guide/locale/components/usage.ts‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,14 @@ export type UsageMessage = {
3333

3434
const en: UsageMessage = {
3535
quickstart: {
36-
p1: '',
37-
l1: '',
38-
l2: '',
39-
l3: '',
40-
p2: '',
36+
p1: 'First, you can quickly start using this extension by following these steps:',
37+
l1: '1. Pin the icon of this extension in the upper right corner of the browser. The specific operation method depends on your browser. \
38+
This step will not affect the normal behavior of it, but will greatly improve your interactive experience.',
39+
l2: '2. Visit any website and browse for a few seconds, then you will observe a number jumping on the icon.\
40+
it shows how much time you spent today browsing current website',
41+
l3: '3. Click the icon, and a page will pop up, showing your stat data for today or recent days.',
42+
p2: 'It is worth mentioning that since the duration data can only be counted in real time, \
43+
the history before installation will not be recorded.',
4144
},
4245
background: {
4346
p1: '',
@@ -69,8 +72,8 @@ const messages: Messages<UsageMessage> = {
6972
},
7073
background: {
7174
p1: '基于图标交互，插件提供了比较便捷的数据查看方式。但是如果您想要体验它的全部功能，就需要访问插件的后台页。进入后台页有以下两种方式：',
72-
l1: '其一，您可以右击插件的图标，在弹出的菜单中点击【' + chromeBase.zh_CN.allFunction + '】。',
73-
l2: '您在弹出页的下方也可以找到【' + chromeBase.zh_CN.allFunction + '】，同样点击它即可。',
75+
l1: '1. 您可以右击插件的图标，在弹出的菜单中点击【' + chromeBase.zh_CN.allFunction + '】。',
76+
l2: '2. 您在弹出页的下方也可以找到【' + chromeBase.zh_CN.allFunction + '】，同样点击它即可。',
7477
p2: '弹出页和后台页是这个插件最主要的交互方式，当你知道如何打开他们之后，就可以完整地使用它了。'
7578
},
7679
advanced: {
@@ -79,7 +82,7 @@ const messages: Messages<UsageMessage> = {
7982
l2: '2. 它可以统计您在每天的不同时间段里的上网频率，并以直方图展示。该数据不区分网站，最小的统计粒度为 15 分钟。您也可以选定一段时间区间，分析每天在不同时间段的平均上网时间。',
8083
l3: '3. 它可以统计您阅读本地文件的时间，不过该功能需要在选项中启用。',
8184
l4: '4. 它支持白名单功能，您可以将您不想要统计的网站加入白名单。',
82-
l5: '5. 它支持将几个相关的网站合并统计到同一个条目，您可以自定义合并的规则。默认按照 {PSL} 合并。',
85+
l5: '5. 它支持将几个相关的网站合并统计到同一个条目，您可以自定义合并的规则。默认按照 {psl} 合并。',
8386
l6: '6. 它支持限制每个网站的每日浏览时长，需要您手动添加限制规则。',
8487
l7: '7. 它支持夜间模式，同样需要在选项里启用。',
8588
l8: '8. 它支持使用 Github Gist 作为云端存储多个浏览器的数据，并进行聚合查询。需要您准备一个至少包含 gist 权限的 token。'

‎src/guide/style.sass‎

Lines changed: 44 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,51 @@
55
* https://opensource.org/licenses/MIT
66
*/
77

8+
body
9+
margin: 0px
10+
811
#guide
912
display: flex
1013
height: 100vh
1114
width: 100%
12-
.guide-container
13-
display: flex
14-
width: 100%
15-
.guide-header-container
16-
display: flex
17-
width: 100%
18-
text-align: center
19-
.guide-header
20-
width: 100%
21-
font-size: 30px
15+
scroll-behavior: smooth
16+
.el-menu
17+
height: 100%
18+
.el-main
19+
height: 100%
20+
padding: 10px 0
21+
.guide-area
22+
padding: 0 9vw
23+
padding-bottom: 10px
24+
h1
25+
color: #3c4043
26+
font-weight: 500
27+
font-size: 1.8rem
28+
letter-spacing: 0
29+
line-height: 1.333
30+
h2
31+
color: #3c4043
32+
font-weight: 500
33+
font-size: 1.4rem
34+
letter-spacing: 0
35+
line-height: 1.333
36+
margin: 40px 0
37+
margin-left: 2px
38+
.guide-paragragh,.guide-list
39+
color: rgba(0,0,0,.87)
40+
font-size: 0.9375rem
41+
font-weight: 400
42+
margin-left: 2px
43+
.guide-paragragh
44+
line-height: 1.714
45+
.guide-list
46+
line-height: 2
47+
list-style-type: none
48+
padding: 0
49+
li
50+
padding-left: 16px
51+
padding-top: 16px
52+
.guide-link
53+
text-decoration: none
54+
.guide-link,.guide-link:hover,.guide-link:visited
55+
color: #3367d6

0 commit comments

Comments
 (0)