From ec3b91b68643716e37d00cf6804221d340ce85fb Mon Sep 17 00:00:00 2001
From: hakadao <a578457889743@gmail.com>
Date: Wed, 9 Nov 2022 00:29:07 +0800
Subject: [PATCH 1/9] chore: i have no idea...

---
 pnpm-lock.yaml                            | 221 +++++++++++------
 src/components/Topbar/HistoryDropdown.vue | 284 ++++++++++++++--------
 src/components/Topbar/index.vue           | 121 ++++-----
 3 files changed, 390 insertions(+), 236 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9f9e2b54..71a59516 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: 5.3
+lockfileVersion: 5.4
 
 specifiers:
   '@antfu/eslint-config': ^0.23.1
@@ -47,14 +47,14 @@ dependencies:
   vue-router: 4.0.13_vue@3.2.38
 
 devDependencies:
-  '@antfu/eslint-config': 0.23.1_eslint@8.23.0+typescript@4.8.2
+  '@antfu/eslint-config': 0.23.1_yqf6kl63nyoq5megxukfnom5rm
   '@ffflorian/jszip-cli': 3.1.6
   '@iconify/json': 2.1.103
   '@intlify/vite-plugin-vue-i18n': 6.0.1_vite@2.9.15+vue-i18n@9.1.9
   '@types/fs-extra': 9.0.13
   '@types/node': 17.0.45
   '@types/webextension-polyfill': 0.8.3
-  '@typescript-eslint/eslint-plugin': 5.36.2_eslint@8.23.0+typescript@4.8.2
+  '@typescript-eslint/eslint-plugin': 5.36.2_yqf6kl63nyoq5megxukfnom5rm
   '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.38
   '@vue/compiler-sfc': 3.2.38
   '@vue/test-utils': 2.0.2_vue@3.2.38
@@ -72,8 +72,8 @@ devDependencies:
   sass: 1.54.8
   tsup: 5.12.9_typescript@4.8.2
   typescript: 4.8.2
-  unplugin-auto-import: 0.7.2_@vueuse+core@8.9.4+vite@2.9.15
-  unplugin-icons: 0.14.9_8085575a03d8ca20ebacf707d7bb2cba
+  unplugin-auto-import: 0.7.2_tz26lugnys4zsg624icbm2tdye
+  unplugin-icons: 0.14.9_qccvowqd3dfcb25m64d5pozmxi
   unplugin-vue-components: 0.19.9_vite@2.9.15+vue@3.2.38
   vite: 2.9.15_sass@1.54.8
   vite-plugin-windicss: 1.8.7_vite@2.9.15
@@ -86,16 +86,16 @@ devDependencies:
 
 packages:
 
-  /@antfu/eslint-config-basic/0.23.1_eslint@8.23.0+typescript@4.8.2:
+  /@antfu/eslint-config-basic/0.23.1_iurrlxgqcgk5svigzxakafpeuu:
     resolution: {integrity: sha512-9h0hqK+E/upIrSVTo2Nt2SQoKRqouDhiJcrdkOx3RgvQkcZItuZnpWI2WGDMWQ3WTjE4fYyd+F4p7Mx/QHvX8w==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
       eslint: 8.23.0
-      eslint-plugin-antfu: 0.23.1_eslint@8.23.0+typescript@4.8.2
+      eslint-plugin-antfu: 0.23.1_yqf6kl63nyoq5megxukfnom5rm
       eslint-plugin-eslint-comments: 3.2.0_eslint@8.23.0
       eslint-plugin-html: 6.2.0
-      eslint-plugin-import: 2.26.0_eslint@8.23.0
+      eslint-plugin-import: 2.26.0_iepzrjnvahcxaf6zc7cutko6om
       eslint-plugin-jsonc: 2.4.0_eslint@8.23.0
       eslint-plugin-markdown: 2.2.1_eslint@8.23.0
       eslint-plugin-n: 15.2.5_eslint@8.23.0
@@ -105,64 +105,73 @@ packages:
       jsonc-eslint-parser: 2.1.0
       yaml-eslint-parser: 0.5.0
     transitivePeerDependencies:
+      - '@typescript-eslint/parser'
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
       - supports-color
       - typescript
     dev: true
 
-  /@antfu/eslint-config-react/0.23.1_eslint@8.23.0+typescript@4.8.2:
+  /@antfu/eslint-config-react/0.23.1_yqf6kl63nyoq5megxukfnom5rm:
     resolution: {integrity: sha512-mg/wcl3AxvHljpnFGji6+7i2uyBqtL3YnCeLcjM6pvOq6DqhMkIsWUYiVonaqEOdTczcNGTvjwZpLlElBAOOgQ==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@antfu/eslint-config-ts': 0.23.1_eslint@8.23.0+typescript@4.8.2
+      '@antfu/eslint-config-ts': 0.23.1_yqf6kl63nyoq5megxukfnom5rm
       eslint: 8.23.0
       eslint-plugin-react: 7.31.7_eslint@8.23.0
     transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
       - supports-color
       - typescript
     dev: true
 
-  /@antfu/eslint-config-ts/0.23.1_eslint@8.23.0+typescript@4.8.2:
+  /@antfu/eslint-config-ts/0.23.1_yqf6kl63nyoq5megxukfnom5rm:
     resolution: {integrity: sha512-n/CZU17ZSbHKLKojX3QKuUxHhpbXXbxmOMQQP9W20/bsYo0ewpPotBwF0hjeN1B7D7uH8NGp+CoGzhnN7UyffA==}
     peerDependencies:
       eslint: '>=7.4.0'
       typescript: '>=3.9'
     dependencies:
-      '@antfu/eslint-config-basic': 0.23.1_eslint@8.23.0+typescript@4.8.2
-      '@typescript-eslint/eslint-plugin': 5.36.2_452315dcd01195d95506cdc0a015e4a5
-      '@typescript-eslint/parser': 5.36.2_eslint@8.23.0+typescript@4.8.2
+      '@antfu/eslint-config-basic': 0.23.1_iurrlxgqcgk5svigzxakafpeuu
+      '@typescript-eslint/eslint-plugin': 5.36.2_iurrlxgqcgk5svigzxakafpeuu
+      '@typescript-eslint/parser': 5.36.2_yqf6kl63nyoq5megxukfnom5rm
       eslint: 8.23.0
       typescript: 4.8.2
     transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
       - supports-color
     dev: true
 
-  /@antfu/eslint-config-vue/0.23.1_eslint@8.23.0+typescript@4.8.2:
+  /@antfu/eslint-config-vue/0.23.1_yqf6kl63nyoq5megxukfnom5rm:
     resolution: {integrity: sha512-rkOSQuHHoYuB64qRuIwGqK1cdKi6UabfUHxjZSQn586f8fKzcDGoLWFZkHx6e66lEAECKLlVc4VmrKIVuUX2jw==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@antfu/eslint-config-ts': 0.23.1_eslint@8.23.0+typescript@4.8.2
+      '@antfu/eslint-config-ts': 0.23.1_yqf6kl63nyoq5megxukfnom5rm
       eslint: 8.23.0
       eslint-plugin-vue: 8.7.1_eslint@8.23.0
     transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
       - supports-color
       - typescript
     dev: true
 
-  /@antfu/eslint-config/0.23.1_eslint@8.23.0+typescript@4.8.2:
+  /@antfu/eslint-config/0.23.1_yqf6kl63nyoq5megxukfnom5rm:
     resolution: {integrity: sha512-yHx9wiEnGrb22qil15U/2tIyFa+AbpHRdDn6xpyaONsRsa5FphrP/v1imbiF278HJZOzZ9qWvnrihKVtfOaPSw==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@antfu/eslint-config-react': 0.23.1_eslint@8.23.0+typescript@4.8.2
-      '@antfu/eslint-config-vue': 0.23.1_eslint@8.23.0+typescript@4.8.2
-      '@typescript-eslint/eslint-plugin': 5.36.2_452315dcd01195d95506cdc0a015e4a5
-      '@typescript-eslint/parser': 5.36.2_eslint@8.23.0+typescript@4.8.2
+      '@antfu/eslint-config-react': 0.23.1_yqf6kl63nyoq5megxukfnom5rm
+      '@antfu/eslint-config-vue': 0.23.1_yqf6kl63nyoq5megxukfnom5rm
+      '@typescript-eslint/eslint-plugin': 5.36.2_iurrlxgqcgk5svigzxakafpeuu
+      '@typescript-eslint/parser': 5.36.2_yqf6kl63nyoq5megxukfnom5rm
       eslint: 8.23.0
       eslint-plugin-eslint-comments: 3.2.0_eslint@8.23.0
       eslint-plugin-html: 6.2.0
-      eslint-plugin-import: 2.26.0_eslint@8.23.0
+      eslint-plugin-import: 2.26.0_iepzrjnvahcxaf6zc7cutko6om
       eslint-plugin-jsonc: 2.4.0_eslint@8.23.0
       eslint-plugin-n: 15.2.5_eslint@8.23.0
       eslint-plugin-promise: 6.0.1_eslint@8.23.0
@@ -172,6 +181,8 @@ packages:
       jsonc-eslint-parser: 2.1.0
       yaml-eslint-parser: 0.5.0
     transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
       - supports-color
       - typescript
     dev: true
@@ -194,11 +205,19 @@ packages:
       '@babel/highlight': 7.14.5
     dev: true
 
+  /@babel/helper-string-parser/7.19.4:
+    resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
+    engines: {node: '>=6.9.0'}
+
   /@babel/helper-validator-identifier/7.18.6:
     resolution: {integrity: sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==}
     engines: {node: '>=6.9.0'}
     dev: true
 
+  /@babel/helper-validator-identifier/7.19.1:
+    resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
+    engines: {node: '>=6.9.0'}
+
   /@babel/highlight/7.14.5:
     resolution: {integrity: sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==}
     engines: {node: '>=6.9.0'}
@@ -212,7 +231,8 @@ packages:
     resolution: {integrity: sha512-74bEXKX2h+8rrfQUfsBfuZZHzsEs6Eql4pqy/T4Nn6Y9wNPggQOqD6z6pn5Bl8ZfysKouFZT/UXEH94ummEeQw==}
     engines: {node: '>=6.0.0'}
     hasBin: true
-    dev: true
+    dependencies:
+      '@babel/types': 7.20.2
 
   /@babel/runtime/7.13.9:
     resolution: {integrity: sha512-aY2kU+xgJ3dJ1eU6FMB9EH8dIe8dmusF1xEku52joLvw6eAFN0AI+WxCLDnpev2LEejWBAy2sBvBOBAjI3zmvA==}
@@ -220,6 +240,14 @@ packages:
       regenerator-runtime: 0.13.9
     dev: true
 
+  /@babel/types/7.20.2:
+    resolution: {integrity: sha512-FnnvsNWgZCr232sqtXggapvlkk/tuwR/qhGzcmxI0GXLCjmPYQPzio2FbdlWuY6y1sHFfQKk+rRbUZ9VStQMog==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.19.4
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
+
   /@devicefarmer/adbkit-logcat/1.1.0:
     resolution: {integrity: sha512-K90P5gUXM/w+yzLvJIRQ+tJooNU6ipUPPQkljtPJ0laR66TGtpt4Gqsjm0n9dPHK1W5KGgU1R5wnCd6RTSlPNA==}
     engines: {node: '>= 0.10.4'}
@@ -244,6 +272,8 @@ packages:
       debug: 2.6.9
       node-forge: 0.10.0
       split: 0.3.3
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /@esbuild-kit/cjs-loader/2.3.3:
@@ -374,8 +404,8 @@ packages:
       - supports-color
     dev: true
 
-  /@intlify/bundle-utils/3.1.0_vue-i18n@9.1.9:
-    resolution: {integrity: sha512-ghlJ0kR2cCQ8D+poKknC0Xx0ncOt3J3os7CcIAqqIWVF7k6AtGoCDnIru+YzlZcvFRNmP9wEZ7jKliojCdAWNg==}
+  /@intlify/bundle-utils/3.2.1_vue-i18n@9.1.9:
+    resolution: {integrity: sha512-rf4cLBOnbqmpXVcCdcYHilZpMt1m82syh3WLBJlZvGxN2KkH9HeHVH4+bnibF/SDXCHNh6lM6wTpS/qw+PkcMg==}
     engines: {node: '>= 12'}
     peerDependencies:
       petite-vue-i18n: '*'
@@ -386,8 +416,8 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/message-compiler': 9.3.0-beta.3
-      '@intlify/shared': 9.3.0-beta.3
+      '@intlify/message-compiler': 9.3.0-beta.6
+      '@intlify/shared': 9.3.0-beta.6
       jsonc-eslint-parser: 1.4.1
       source-map: 0.6.1
       vue-i18n: 9.1.9_vue@3.2.38
@@ -404,14 +434,12 @@ packages:
       '@intlify/runtime': 9.1.9
       '@intlify/shared': 9.1.9
       '@intlify/vue-devtools': 9.1.9
-    dev: false
 
   /@intlify/devtools-if/9.1.9:
     resolution: {integrity: sha512-oKSMKjttG3Ut/1UGEZjSdghuP3fwA15zpDPcjkf/1FjlOIm6uIBGMNS5jXzsZy593u+P/YcnrZD6cD3IVFz9vQ==}
     engines: {node: '>= 10'}
     dependencies:
       '@intlify/shared': 9.1.9
-    dev: false
 
   /@intlify/message-compiler/9.1.9:
     resolution: {integrity: sha512-6YgCMF46Xd0IH2hMRLCssZI3gFG4aywidoWQ3QP4RGYQXQYYfFC54DxhSgfIPpVoPLQ+4AD29eoYmhiHZ+qLFQ==}
@@ -420,20 +448,18 @@ packages:
       '@intlify/message-resolver': 9.1.9
       '@intlify/shared': 9.1.9
       source-map: 0.6.1
-    dev: false
 
-  /@intlify/message-compiler/9.3.0-beta.3:
-    resolution: {integrity: sha512-j8OwToBQgs01RBMX4GCDNQfcnmw3AiDG3moKIONTrfXcf+1yt/rWznLTYH/DXbKcFMAFijFpCzMYjUmH1jVFYA==}
+  /@intlify/message-compiler/9.3.0-beta.6:
+    resolution: {integrity: sha512-3PJqRJoqvFHExA9DCkf7fZYKbvYne1tYQ0fptJAhUOZsELarh8wr4aPLKWCkQSRuutdrtZ/n5CcPgJgUmVthDw==}
     engines: {node: '>= 14'}
     dependencies:
-      '@intlify/shared': 9.3.0-beta.3
+      '@intlify/shared': 9.3.0-beta.6
       source-map: 0.6.1
     dev: true
 
   /@intlify/message-resolver/9.1.9:
     resolution: {integrity: sha512-Lx/DBpigeK0sz2BBbzv5mu9/dAlt98HxwbG7xLawC3O2xMF9MNWU5FtOziwYG6TDIjNq0O/3ZbOJAxwITIWXEA==}
     engines: {node: '>= 10'}
-    dev: false
 
   /@intlify/runtime/9.1.9:
     resolution: {integrity: sha512-XgPw8+UlHCiie3fI41HPVa/VDJb3/aSH7bLhY1hJvlvNV713PFtb4p4Jo+rlE0gAoMsMCGcsiT982fImolSltg==}
@@ -442,15 +468,13 @@ packages:
       '@intlify/message-compiler': 9.1.9
       '@intlify/message-resolver': 9.1.9
       '@intlify/shared': 9.1.9
-    dev: false
 
   /@intlify/shared/9.1.9:
     resolution: {integrity: sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw==}
     engines: {node: '>= 10'}
-    dev: false
 
-  /@intlify/shared/9.3.0-beta.3:
-    resolution: {integrity: sha512-Z/0TU4GhFKRxKh+0RbwJExik9zz57gXYgxSYaPn7YQdkQ/pabSioCY/SXnYxQHL6HzULF5tmqarFm6glbGqKhw==}
+  /@intlify/shared/9.3.0-beta.6:
+    resolution: {integrity: sha512-ITA1R4tvJYwZXT5x6QCSwxcwQ4dU52zrzVm/EUbgsp8oWzYS1xexBrxyNM80PSQudYvL2rvcZJKQ7yBh7b0LkQ==}
     engines: {node: '>= 14'}
     dev: true
 
@@ -469,8 +493,8 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/bundle-utils': 3.1.0_vue-i18n@9.1.9
-      '@intlify/shared': 9.3.0-beta.3
+      '@intlify/bundle-utils': 3.2.1_vue-i18n@9.1.9
+      '@intlify/shared': 9.3.0-beta.6
       '@rollup/pluginutils': 4.2.1
       debug: 4.3.4
       fast-glob: 3.2.11
@@ -488,7 +512,6 @@ packages:
       '@intlify/message-resolver': 9.1.9
       '@intlify/runtime': 9.1.9
       '@intlify/shared': 9.1.9
-    dev: false
 
   /@mdn/browser-compat-data/4.1.12:
     resolution: {integrity: sha512-y3Ntio6hb5+m6asxcA3nnIN6URjAFMji2EZZVYGd2Ag5On4mmvPhMnXdiIScCMXgHjFX+5qXuKaojLLhJHZPAg==}
@@ -564,6 +587,12 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
+  /@types/keyv/3.1.4:
+    resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
+    dependencies:
+      '@types/node': 17.0.45
+    dev: true
+
   /@types/mdast/3.0.10:
     resolution: {integrity: sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==}
     dependencies:
@@ -586,6 +615,12 @@ packages:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
     dev: true
 
+  /@types/responselike/1.0.0:
+    resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
+    dependencies:
+      '@types/node': 17.0.45
+    dev: true
+
   /@types/unist/2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: true
@@ -604,7 +639,7 @@ packages:
       '@types/node': 17.0.45
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.36.2_452315dcd01195d95506cdc0a015e4a5:
+  /@typescript-eslint/eslint-plugin/5.36.2_iurrlxgqcgk5svigzxakafpeuu:
     resolution: {integrity: sha512-OwwR8LRwSnI98tdc2z7mJYgY60gf7I9ZfGjN5EjCwwns9bdTuQfAXcsjSB2wSQ/TVNYSGKf4kzVXbNGaZvwiXw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -615,10 +650,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.36.2_eslint@8.23.0+typescript@4.8.2
+      '@typescript-eslint/parser': 5.36.2_yqf6kl63nyoq5megxukfnom5rm
       '@typescript-eslint/scope-manager': 5.36.2
-      '@typescript-eslint/type-utils': 5.36.2_eslint@8.23.0+typescript@4.8.2
-      '@typescript-eslint/utils': 5.36.2_eslint@8.23.0+typescript@4.8.2
+      '@typescript-eslint/type-utils': 5.36.2_yqf6kl63nyoq5megxukfnom5rm
+      '@typescript-eslint/utils': 5.36.2_yqf6kl63nyoq5megxukfnom5rm
       debug: 4.3.4
       eslint: 8.23.0
       functional-red-black-tree: 1.0.1
@@ -631,7 +666,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.36.2_eslint@8.23.0+typescript@4.8.2:
+  /@typescript-eslint/eslint-plugin/5.36.2_yqf6kl63nyoq5megxukfnom5rm:
     resolution: {integrity: sha512-OwwR8LRwSnI98tdc2z7mJYgY60gf7I9ZfGjN5EjCwwns9bdTuQfAXcsjSB2wSQ/TVNYSGKf4kzVXbNGaZvwiXw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -643,8 +678,8 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/scope-manager': 5.36.2
-      '@typescript-eslint/type-utils': 5.36.2_eslint@8.23.0+typescript@4.8.2
-      '@typescript-eslint/utils': 5.36.2_eslint@8.23.0+typescript@4.8.2
+      '@typescript-eslint/type-utils': 5.36.2_yqf6kl63nyoq5megxukfnom5rm
+      '@typescript-eslint/utils': 5.36.2_yqf6kl63nyoq5megxukfnom5rm
       debug: 4.3.4
       eslint: 8.23.0
       functional-red-black-tree: 1.0.1
@@ -657,7 +692,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.36.2_eslint@8.23.0+typescript@4.8.2:
+  /@typescript-eslint/parser/5.36.2_yqf6kl63nyoq5megxukfnom5rm:
     resolution: {integrity: sha512-qS/Kb0yzy8sR0idFspI9Z6+t7mqk/oRjnAYfewG+VN73opAUvmYL3oPIMmgOX6CnQS6gmVIXGshlb5RY/R22pA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -685,7 +720,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.36.2
     dev: true
 
-  /@typescript-eslint/type-utils/5.36.2_eslint@8.23.0+typescript@4.8.2:
+  /@typescript-eslint/type-utils/5.36.2_yqf6kl63nyoq5megxukfnom5rm:
     resolution: {integrity: sha512-rPQtS5rfijUWLouhy6UmyNquKDPhQjKsaKH0WnY6hl/07lasj8gPaH2UD8xWkePn6SC+jW2i9c2DZVDnL+Dokw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -696,7 +731,7 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/typescript-estree': 5.36.2_typescript@4.8.2
-      '@typescript-eslint/utils': 5.36.2_eslint@8.23.0+typescript@4.8.2
+      '@typescript-eslint/utils': 5.36.2_yqf6kl63nyoq5megxukfnom5rm
       debug: 4.3.4
       eslint: 8.23.0
       tsutils: 3.21.0_typescript@4.8.2
@@ -731,7 +766,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.36.2_eslint@8.23.0+typescript@4.8.2:
+  /@typescript-eslint/utils/5.36.2_yqf6kl63nyoq5megxukfnom5rm:
     resolution: {integrity: sha512-uNcopWonEITX96v9pefk9DC1bWMdkweeSsewJ6GeC7L6j2t0SJywisgkr9wUTtXk90fi2Eljj90HSHm3OGdGRg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -775,14 +810,12 @@ packages:
       '@vue/shared': 3.2.38
       estree-walker: 2.0.2
       source-map: 0.6.1
-    dev: true
 
   /@vue/compiler-dom/3.2.38:
     resolution: {integrity: sha512-zqX4FgUbw56kzHlgYuEEJR8mefFiiyR3u96498+zWPsLeh1WKvgIReoNE+U7gG8bCUdvsrJ0JRmev0Ky6n2O0g==}
     dependencies:
       '@vue/compiler-core': 3.2.38
       '@vue/shared': 3.2.38
-    dev: true
 
   /@vue/compiler-sfc/3.2.38:
     resolution: {integrity: sha512-KZjrW32KloMYtTcHAFuw3CqsyWc5X6seb8KbkANSWt3Cz9p2qA8c1GJpSkksFP9ABb6an0FLCFl46ZFXx3kKpg==}
@@ -797,18 +830,15 @@ packages:
       magic-string: 0.25.7
       postcss: 8.3.8
       source-map: 0.6.1
-    dev: true
 
   /@vue/compiler-ssr/3.2.38:
     resolution: {integrity: sha512-bm9jOeyv1H3UskNm4S6IfueKjUNFmi2kRweFIGnqaGkkRePjwEcfCVqyS3roe7HvF4ugsEkhf4+kIvDhip6XzQ==}
     dependencies:
       '@vue/compiler-dom': 3.2.38
       '@vue/shared': 3.2.38
-    dev: true
 
   /@vue/devtools-api/6.0.12:
     resolution: {integrity: sha512-iO/4FIezHKXhiDBdKySCvJVh8/mZPxHpiQrTy+PXVqJZgpTPTdHy4q8GXulaY+UKEagdkBb0onxNQZ0LNiqVhw==}
-    dev: false
 
   /@vue/reactivity-transform/3.2.38:
     resolution: {integrity: sha512-3SD3Jmi1yXrDwiNJqQ6fs1x61WsDLqVk4NyKVz78mkaIRh6d3IqtRnptgRfXn+Fzf+m6B1KxBYWq1APj6h4qeA==}
@@ -818,20 +848,17 @@ packages:
       '@vue/shared': 3.2.38
       estree-walker: 2.0.2
       magic-string: 0.25.7
-    dev: true
 
   /@vue/reactivity/3.2.38:
     resolution: {integrity: sha512-6L4myYcH9HG2M25co7/BSo0skKFHpAN8PhkNPM4xRVkyGl1K5M3Jx4rp5bsYhvYze2K4+l+pioN4e6ZwFLUVtw==}
     dependencies:
       '@vue/shared': 3.2.38
-    dev: true
 
   /@vue/runtime-core/3.2.38:
     resolution: {integrity: sha512-kk0qiSiXUU/IKxZw31824rxmFzrLr3TL6ZcbrxWTKivadoKupdlzbQM4SlGo4MU6Zzrqv4fzyUasTU1jDoEnzg==}
     dependencies:
       '@vue/reactivity': 3.2.38
       '@vue/shared': 3.2.38
-    dev: true
 
   /@vue/runtime-dom/3.2.38:
     resolution: {integrity: sha512-4PKAb/ck2TjxdMSzMsnHViOrrwpudk4/A56uZjhzvusoEU9xqa5dygksbzYepdZeB5NqtRw5fRhWIiQlRVK45A==}
@@ -839,7 +866,6 @@ packages:
       '@vue/runtime-core': 3.2.38
       '@vue/shared': 3.2.38
       csstype: 2.6.17
-    dev: true
 
   /@vue/server-renderer/3.2.38_vue@3.2.38:
     resolution: {integrity: sha512-pg+JanpbOZ5kEfOZzO2bt02YHd+ELhYP8zPeLU1H0e7lg079NtuuSB8fjLdn58c4Ou8UQ6C1/P+528nXnLPAhA==}
@@ -849,11 +875,9 @@ packages:
       '@vue/compiler-ssr': 3.2.38
       '@vue/shared': 3.2.38
       vue: 3.2.38
-    dev: true
 
   /@vue/shared/3.2.38:
     resolution: {integrity: sha512-dTyhTIRmGXBjxJE+skC8tTWCGLCVc4wQgRRLt8+O9p5ewBAjoBwtCAkLPrtToSr1xltoe3st21Pv953aOZ7alg==}
-    dev: true
 
   /@vue/test-utils/2.0.2_vue@3.2.38:
     resolution: {integrity: sha512-E2P4oXSaWDqTZNbmKZFVLrNN/siVN78YkEqs7pHryWerrlZR9bBFLWdJwRoguX45Ru6HxIflzKl4vQvwRMwm5g==}
@@ -1495,6 +1519,8 @@ packages:
       escape-string-regexp: 4.0.0
       is-wsl: 2.2.0
       lighthouse-logger: 1.3.0
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /ci-info/2.0.0:
@@ -1755,7 +1781,6 @@ packages:
 
   /csstype/2.6.17:
     resolution: {integrity: sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==}
-    dev: true
 
   /dashdash/1.14.1:
     resolution: {integrity: sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==}
@@ -1779,12 +1804,22 @@ packages:
 
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
     dependencies:
       ms: 2.0.0
     dev: true
 
   /debug/3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
     dependencies:
       ms: 2.1.3
     dev: true
@@ -2562,25 +2597,43 @@ packages:
     dependencies:
       debug: 3.2.7
       resolve: 1.22.1
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /eslint-module-utils/2.7.4_eslint@8.23.0:
+  /eslint-module-utils/2.7.4_jkckkukndwd4xurous7ym67tze:
     resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==}
     engines: {node: '>=4'}
     peerDependencies:
+      '@typescript-eslint/parser': '*'
       eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
     peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
       eslint:
         optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
     dependencies:
+      '@typescript-eslint/parser': 5.36.2_yqf6kl63nyoq5megxukfnom5rm
       debug: 3.2.7
       eslint: 8.23.0
+      eslint-import-resolver-node: 0.3.6
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /eslint-plugin-antfu/0.23.1_eslint@8.23.0+typescript@4.8.2:
+  /eslint-plugin-antfu/0.23.1_yqf6kl63nyoq5megxukfnom5rm:
     resolution: {integrity: sha512-GCc4hqHqPPVM4xIFHUKJFpOZbl9C48t9SupePiNjFisUHAxrZj/c1EHCt0LV0TONJHtSZDR53NNWMuB3O2USSg==}
     dependencies:
-      '@typescript-eslint/utils': 5.36.2_eslint@8.23.0+typescript@4.8.2
+      '@typescript-eslint/utils': 5.36.2_yqf6kl63nyoq5megxukfnom5rm
     transitivePeerDependencies:
       - eslint
       - supports-color
@@ -2615,19 +2668,24 @@ packages:
       htmlparser2: 7.2.0
     dev: true
 
-  /eslint-plugin-import/2.26.0_eslint@8.23.0:
+  /eslint-plugin-import/2.26.0_iepzrjnvahcxaf6zc7cutko6om:
     resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
     engines: {node: '>=4'}
     peerDependencies:
+      '@typescript-eslint/parser': '*'
       eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
     dependencies:
+      '@typescript-eslint/parser': 5.36.2_yqf6kl63nyoq5megxukfnom5rm
       array-includes: 3.1.5
       array.prototype.flat: 1.3.0
       debug: 2.6.9
       doctrine: 2.1.0
       eslint: 8.23.0
       eslint-import-resolver-node: 0.3.6
-      eslint-module-utils: 2.7.4_eslint@8.23.0
+      eslint-module-utils: 2.7.4_jkckkukndwd4xurous7ym67tze
       has: 1.0.3
       is-core-module: 2.10.0
       is-glob: 4.0.3
@@ -2635,6 +2693,10 @@ packages:
       object.values: 1.1.5
       resolve: 1.22.1
       tsconfig-paths: 3.14.1
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
     dev: true
 
   /eslint-plugin-jsonc/2.4.0_eslint@8.23.0:
@@ -2994,7 +3056,6 @@ packages:
 
   /estree-walker/2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
-    dev: true
 
   /esutils/2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@@ -3432,6 +3493,8 @@ packages:
     dependencies:
       '@sindresorhus/is': 0.14.0
       '@szmarczak/http-timer': 1.1.2
+      '@types/keyv': 3.1.4
+      '@types/responselike': 1.0.0
       cacheable-request: 6.1.0
       decompress-response: 3.3.0
       duplexer3: 0.1.4
@@ -4223,6 +4286,8 @@ packages:
     dependencies:
       debug: 2.6.9
       marky: 1.2.2
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /lilconfig/2.0.3:
@@ -4364,7 +4429,6 @@ packages:
     resolution: {integrity: sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==}
     dependencies:
       sourcemap-codec: 1.4.8
-    dev: true
 
   /magic-string/0.26.3:
     resolution: {integrity: sha512-u1Po0NDyFcwdg2nzHT88wSK0+Rih0N1M+Ph1Sp08k8yvFFU3KR72wryS7e1qMPJypt99WB7fIFVCA92mQrMjrg==}
@@ -4574,7 +4638,6 @@ packages:
 
   /nanocolors/0.2.12:
     resolution: {integrity: sha512-SFNdALvzW+rVlzqexid6epYdt8H9Zol7xDoQarioEFcFN0JHo4CYNztAxmtfgGTVRCmFlEOqqhBpoFGKqSAMug==}
-    dev: true
 
   /nanoevents/6.0.2:
     resolution: {integrity: sha512-FRS2otuFcPPYDPYViNWQ42+1iZqbXydinkRHTHFxrF4a1CpBfmydR9zkI44WSXAXCyPrkcGtPk5CnpW6Y3lFKQ==}
@@ -4585,7 +4648,6 @@ packages:
     resolution: {integrity: sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: true
 
   /nanoid/3.3.4:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
@@ -5094,7 +5156,6 @@ packages:
       nanocolors: 0.2.12
       nanoid: 3.1.25
       source-map-js: 0.6.2
-    dev: true
 
   /postcss/8.4.12:
     resolution: {integrity: sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==}
@@ -5633,7 +5694,6 @@ packages:
   /source-map-js/0.6.2:
     resolution: {integrity: sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
@@ -5667,7 +5727,6 @@ packages:
 
   /sourcemap-codec/1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
-    dev: true
 
   /spawn-sync/1.0.15:
     resolution: {integrity: sha512-9DWBgrgYZzNghseho0JOuh+5fg9u6QWhAWa51QC7+U5rCheZ/j1DrEZnyE0RBBRqZ9uEXGPgSSM0nky6burpVw==}
@@ -5992,6 +6051,10 @@ packages:
       rimraf: 3.0.2
     dev: true
 
+  /to-fast-properties/2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+
   /to-readable-stream/1.0.0:
     resolution: {integrity: sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==}
     engines: {node: '>=6'}
@@ -6233,7 +6296,7 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unplugin-auto-import/0.7.2_@vueuse+core@8.9.4+vite@2.9.15:
+  /unplugin-auto-import/0.7.2_tz26lugnys4zsg624icbm2tdye:
     resolution: {integrity: sha512-VzaYUa2VByUT70WSFlOXoovyWuwC/8ePKQUC9fhU+BRmvTC7qhCVgChH/NieWMEVgyT+HhacxM+W7xMEOmA+MA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -6256,7 +6319,7 @@ packages:
       - webpack
     dev: true
 
-  /unplugin-icons/0.14.9_8085575a03d8ca20ebacf707d7bb2cba:
+  /unplugin-icons/0.14.9_qccvowqd3dfcb25m64d5pozmxi:
     resolution: {integrity: sha512-vPyVfNREH88dP6gszdaoGkAEFPpiScXj1A8eWN905jQgT53A3tsiPEiqJjCHOUVcsUaREt2JSudzumFOsCA78A==}
     peerDependencies:
       '@svgr/core': '>=5.5.0'
@@ -6590,7 +6653,6 @@ packages:
       '@intlify/vue-devtools': 9.1.9
       '@vue/devtools-api': 6.0.12
       vue: 3.2.38
-    dev: false
 
   /vue-router/4.0.13_vue@3.2.38:
     resolution: {integrity: sha512-LmXrC+BkDRLak+d5xTMgUYraT3Nj0H/vCbP+7usGvIl9Viqd1UP6AsP0i69pSbn9O0dXK/xCdp4yPw21HqV9Jw==}
@@ -6609,7 +6671,6 @@ packages:
       '@vue/runtime-dom': 3.2.38
       '@vue/server-renderer': 3.2.38_vue@3.2.38
       '@vue/shared': 3.2.38
-    dev: true
 
   /w3c-hr-time/1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
diff --git a/src/components/Topbar/HistoryDropdown.vue b/src/components/Topbar/HistoryDropdown.vue
index 067c0f3f..224e0605 100644
--- a/src/components/Topbar/HistoryDropdown.vue
+++ b/src/components/Topbar/HistoryDropdown.vue
@@ -1,8 +1,9 @@
 <script lang="ts">
 import { isNewArticle, isNewVideo, setLastestOffsetID } from './notify'
 import { language } from '~/logic'
-import { getUserID, calcTimeSince } from '~/utils'
-import { MomentItem, MomentType, LanguageType } from '~/types'
+import { calcTimeSince, getUserID } from '~/utils'
+import type { MomentItem } from '~/types'
+import { LanguageType, MomentType } from '~/types'
 
 export default defineComponent({
   data() {
@@ -38,7 +39,8 @@ export default defineComponent({
   },
   watch: {
     selectedTab(newVal: number, oldVal: number) {
-      if (newVal === oldVal) return
+      if (newVal === oldVal)
+        return
 
       this.scrollToTop(this.$refs.momentsWrap as HTMLElement, 300)
       this.moments = []
@@ -59,8 +61,12 @@ export default defineComponent({
 
     const momentsWrap = this.$refs.momentsWrap as HTMLDivElement
     momentsWrap.addEventListener('scroll', () => {
-      if (momentsWrap.clientHeight + momentsWrap.scrollTop >= momentsWrap.scrollHeight
-        && this.moments.length > 0 && !this.isLoading) {
+      if (
+        momentsWrap.clientHeight + momentsWrap.scrollTop
+          >= momentsWrap.scrollHeight
+        && this.moments.length > 0
+        && !this.isLoading
+      ) {
         if (this.selectedTab === 0 && !this.noMoreContent)
           this.getHistoryMoments([MomentType.Video, MomentType.Bangumi])
         else if (this.selectedTab === 1 && !this.noMoreContent)
@@ -73,99 +79,139 @@ export default defineComponent({
   methods: {
     onClickTab(tabId: number) {
       // Prevent changing tab when loading, cuz it will cause a bug
-      if (this.isLoading) return
+      if (this.isLoading)
+        return
 
       this.selectedTab = tabId
       this.momentTabs.forEach((tab) => {
         tab.isSelected = tab.id === tabId
       })
     },
+    getHistoryList() {
+      this.isLoading = true
+      browser.runtime
+        .sendMessage({
+          contentScriptQuery: 'getHistoryList',
+          // uid: getUserID(),
+          // typeList,
+        })
+        .then((res) => {
+          if (res.code === 0) {
+            if (this.moments.length !== 0 && res.data.cards.length < 20) {
+              this.isLoading = false
+              this.noMoreContent = true
+              return
+            }
+
+            res.data.cards.forEach((item: any) => {
+              this.pushItemIntoMoments(item)
+            })
+
+            // set this lastest offset id, which will clear the new moment's marker point
+            // after you watch these moments.
+            if (this.selectedTab === 0)
+              setLastestOffsetID(MomentType.Video, this.moments[0].id)
+            else if (this.selectedTab === 2)
+              setLastestOffsetID(MomentType.Article, this.moments[0].id)
+
+            this.noMoreContent = false
+          }
+          this.isLoading = false
+        })
+    },
+
     getNewMoments(typeList: number[]) {
       this.isLoading = true
-      browser.runtime.sendMessage({
-        contentScriptQuery: 'getNewMoments',
-        uid: getUserID(),
-        typeList,
-      }).then((res) => {
-        if (res.code === 0) {
-          if (this.moments.length !== 0 && res.data.cards.length < 20) {
-            this.isLoading = false
-            this.noMoreContent = true
-            return
+      browser.runtime
+        .sendMessage({
+          contentScriptQuery: 'getNewMoments',
+          uid: getUserID(),
+          typeList,
+        })
+        .then((res) => {
+          if (res.code === 0) {
+            if (this.moments.length !== 0 && res.data.cards.length < 20) {
+              this.isLoading = false
+              this.noMoreContent = true
+              return
+            }
+
+            res.data.cards.forEach((item: any) => {
+              this.pushItemIntoMoments(item)
+            })
+
+            // set this lastest offset id, which will clear the new moment's marker point
+            // after you watch these moments.
+            if (this.selectedTab === 0)
+              setLastestOffsetID(MomentType.Video, this.moments[0].id)
+            else if (this.selectedTab === 2)
+              setLastestOffsetID(MomentType.Article, this.moments[0].id)
+
+            this.noMoreContent = false
           }
-
-          res.data.cards.forEach((item: any) => {
-            this.pushItemIntoMoments(item)
-          })
-
-          // set this lastest offset id, which will clear the new moment's marker point
-          // after you watch these moments.
-          if (this.selectedTab === 0)
-            setLastestOffsetID(MomentType.Video, this.moments[0].id)
-          else if (this.selectedTab === 2)
-            setLastestOffsetID(MomentType.Article, this.moments[0].id)
-
-          this.noMoreContent = false
-        }
-        this.isLoading = false
-      })
+          this.isLoading = false
+        })
     },
     getHistoryMoments(typeList: number[]) {
       this.isLoading = true
-      browser.runtime.sendMessage({
-        contentScriptQuery: 'getHistoryMoments',
-        uid: getUserID(),
-        typeList,
-        offsetDynamicID: this.moments[this.moments.length - 1].dynamic_id_str,
-      }).then((res) => {
-        if (res.code === 0) {
-          if (res.data.has_more === 0) {
-            this.isLoading = false
-            this.noMoreContent = true
-            return
-          }
+      browser.runtime
+        .sendMessage({
+          contentScriptQuery: 'getHistoryMoments',
+          uid: getUserID(),
+          typeList,
+          offsetDynamicID: this.moments[this.moments.length - 1].dynamic_id_str,
+        })
+        .then((res) => {
+          if (res.code === 0) {
+            if (res.data.has_more === 0) {
+              this.isLoading = false
+              this.noMoreContent = true
+              return
+            }
 
-          res.data.cards.forEach((item: any) => {
-            this.pushItemIntoMoments(item)
-          })
-          this.noMoreContent = false
-        }
-        this.isLoading = false
-      })
+            res.data.cards.forEach((item: any) => {
+              this.pushItemIntoMoments(item)
+            })
+            this.noMoreContent = false
+          }
+          this.isLoading = false
+        })
     },
     getLiveMoments(page: number) {
       this.isLoading = true
-      browser.runtime.sendMessage({
-        contentScriptQuery: 'getLiveMoments',
-        page,
-        pageSize: 10,
-      }).then((res) => {
-        if (res.code === 0) {
-          // if the length of this list is less then the pageSize, it means that it have no more contents
-          if (this.moments.length !== 0 && res.data.list.length < 10) {
-            this.isLoading = false
-            this.noMoreContent = true
-            return
-          }
+      browser.runtime
+        .sendMessage({
+          contentScriptQuery: 'getLiveMoments',
+          page,
+          pageSize: 10,
+        })
+        .then((res) => {
+          if (res.code === 0) {
+            // if the length of this list is less then the pageSize, it means that it have no more contents
+            if (this.moments.length !== 0 && res.data.list.length < 10) {
+              this.isLoading = false
+              this.noMoreContent = true
+              return
+            }
 
-          // if the length of this list is equal to the pageSize, this means that it may have the next page.
-          if (res.data.list.length === 10)
-            this.livePage++
-          res.data.list.forEach((item: any) => {
-            this.moments.push({
-              id: item.roomid,
-              uid: item.uid,
-              name: item.uname,
-              face: item.face,
-              url: item.link,
-              title: item.title,
-              cover: item.pic,
-            } as MomentItem)
-          })
-          this.noMoreContent = false
-        }
-        this.isLoading = false
-      })
+            // if the length of this list is equal to the pageSize, this means that it may have the next page.
+            if (res.data.list.length === 10)
+              this.livePage++
+            res.data.list.forEach((item: any) => {
+              this.moments.push({
+                id: item.roomid,
+                uid: item.uid,
+                name: item.uname,
+                face: item.face,
+                url: item.link,
+                title: item.title,
+                cover: item.pic,
+              } as MomentItem)
+            })
+            this.noMoreContent = false
+          }
+          this.isLoading = false
+        })
     },
     pushItemIntoMoments(item: any) {
       const card = JSON.parse(item.card)
@@ -224,8 +270,9 @@ export default defineComponent({
      * smooth scroll to the top of the html element
      */
     scrollToTop(element: HTMLElement, duration: number) {
-    // cancel if already on top
-      if (element.scrollTop === 0) return
+      // cancel if already on top
+      if (element.scrollTop === 0)
+        return
 
       const cosParameter = element.scrollTop / 2
       let scrollCount = 0
@@ -234,9 +281,11 @@ export default defineComponent({
       function step(newTimestamp: number) {
         if (oldTimestamp !== 0) {
           // if duration is 0 scrollCount will be Infinity
-          scrollCount += Math.PI * (newTimestamp - oldTimestamp) / duration
-          if (scrollCount >= Math.PI) return element.scrollTop = 0
-          element.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount)
+          scrollCount += (Math.PI * (newTimestamp - oldTimestamp)) / duration
+          if (scrollCount >= Math.PI)
+            return (element.scrollTop = 0)
+          element.scrollTop
+            = cosParameter + cosParameter * Math.cos(scrollCount)
         }
         oldTimestamp = newTimestamp
         window.requestAnimationFrame(step)
@@ -289,10 +338,15 @@ export default defineComponent({
     <!-- moments wrapper -->
     <div ref="momentsWrap" h="430px" overflow="y-scroll" p="x-4">
       <!-- loading -->
-      <loading v-if="isLoading && moments.length === 0" h="full" flex="~" items="center"></loading>
+      <loading
+        v-if="isLoading && moments.length === 0"
+        h="full"
+        flex="~"
+        items="center"
+      />
 
       <!-- empty -->
-      <empty v-if="!isLoading && moments.length === 0" w="full" h="full"></empty>
+      <empty v-if="!isLoading && moments.length === 0" w="full" h="full" />
 
       <!-- moments -->
       <transition-group name="list">
@@ -322,37 +376,69 @@ export default defineComponent({
             bg="$bew-theme-color"
             pos="absolute -top-10px -left-10px"
             style="box-shadow: 0 0 4px var(--bew-theme-color)"
-          ></div>
+          />
 
           <a
-            :href="moment.type === MomentType.Video ? 'https://space.bilibili.com/' + moment.uid : moment.url"
+            :href="
+              moment.type === MomentType.Video
+                ? `https://space.bilibili.com/${moment.uid}`
+                : moment.url
+            "
             target="_blank"
           >
-            <img :src="moment.face + '@60w_60h_1c'" rounded="$bew-radius" w="40px" h="40px" m="r-4" />
+            <img
+              :src="`${moment.face}@60w_60h_1c`"
+              rounded="$bew-radius"
+              w="40px"
+              h="40px"
+              m="r-4"
+            >
           </a>
 
           <div flex="~" justify="between" w="full">
             <div>
-              <span>{{ moment.name }}</span> {{ $t('topbar.moments_dropdown.uploaded') }}{{ moment.title }}
-              <div v-if="moment.type !== MomentType.Bangumi" text="$bew-text-2 sm" m="y-2">
+              <span>{{ moment.name }}</span>
+              {{ $t('topbar.moments_dropdown.uploaded') }}{{ moment.title }}
+              <div
+                v-if="moment.type !== MomentType.Bangumi"
+                text="$bew-text-2 sm"
+                m="y-2"
+              >
                 <!-- Videos and articles -->
                 <div v-if="selectedTab === 0 || selectedTab === 2">
-                  {{ calcTimeSince(new Date(moment.ctime * 1000)) }}{{ language === LanguageType.English ? ' ' + $t('common.ago') : $t('common.ago') }}
+                  {{ calcTimeSince(new Date(moment.ctime * 1000))
+                  }}{{
+                    language === LanguageType.English
+                      ? ` ${$t('common.ago')}`
+                      : $t('common.ago')
+                  }}
                 </div>
                 <!-- Live -->
-                <div v-else-if="selectedTab === 1" text="$bew-theme-color" font="bold" flex="~" items="center">
-                  <fluent:live-24-filled m="r-2" /> {{ $t('topbar.moments_dropdown.live_status') }}
+                <div
+                  v-else-if="selectedTab === 1"
+                  text="$bew-theme-color"
+                  font="bold"
+                  flex="~"
+                  items="center"
+                >
+                  <fluent:live-24-filled m="r-2" />
+                  {{ $t('topbar.moments_dropdown.live_status') }}
                 </div>
               </div>
-
             </div>
-            <img :src="moment.cover + '@128w_72h_1c'" w="82px" h="46px" m="l-4" rounded="$bew-radius" />
+            <img
+              :src="`${moment.cover}@128w_72h_1c`"
+              w="82px"
+              h="46px"
+              m="l-4"
+              rounded="$bew-radius"
+            >
           </div>
         </a>
       </transition-group>
 
       <!-- loading -->
-      <loading v-if="isLoading && moments.length !== 0" m="-t-4"></loading>
+      <loading v-if="isLoading && moments.length !== 0" m="-t-4" />
     </div>
   </div>
 </template>
diff --git a/src/components/Topbar/index.vue b/src/components/Topbar/index.vue
index 2d74e83d..c2ce8cf5 100644
--- a/src/components/Topbar/index.vue
+++ b/src/components/Topbar/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import MomentsDropdown from './MomentsDropdown.vue'
+import HistoryDropdown from './HistoryDropdown.vue'
 import { updateInterval } from './notify'
 import { getUserID } from '~/utils'
 
@@ -15,6 +16,7 @@ export default defineComponent({
       showNotificationsDropDown: false,
       showMomentsDropDown: false,
       showUploadDropDown: false,
+      showHistoryDropDown: false,
       isLogin: !!getUserID(),
       unReadmessage: {},
       unReadDm: {},
@@ -34,10 +36,8 @@ export default defineComponent({
     this.initUserPanel()
 
     document.addEventListener('scroll', () => {
-      if (window.scrollY > 0)
-        this.showTopbarMask = true
-      else
-        this.showTopbarMask = false
+      if (window.scrollY > 0) this.showTopbarMask = true
+      else this.showTopbarMask = false
     })
   },
   methods: {
@@ -82,38 +82,40 @@ export default defineComponent({
           contentScriptQuery: 'getUserInfo',
         })
         .then((res) => {
-          if (res.code === 0)
-            this.userInfo = res.data
+          if (res.code === 0) this.userInfo = res.data
         })
     },
     async getUnreadMessageCount() {
-      if (!this.isLogin)
-        return
+      if (!this.isLogin) return
 
       await browser.runtime
         .sendMessage({
           contentScriptQuery: 'getUnreadMsg',
-        }).then(res => this.unReadmessage = res.data)
+        })
+        .then((res) => (this.unReadmessage = res.data))
 
       await browser.runtime
         .sendMessage({
           contentScriptQuery: 'getUnreadDm',
-        }).then(res => this.unReadDm = res.data)
+        })
+        .then((res) => (this.unReadDm = res.data))
 
       this.unReadmessageCount = 0
-      for (const [key, value] of Object.entries(this.unReadmessage))
+      for (const [key, value] of Object.entries(this.unReadmessage)) {
         if (key !== 'up') this.unReadmessageCount += parseInt(`${value}`)
+      }
+
       for (const [, value] of Object.entries(this.unReadDm))
         this.unReadmessageCount += parseInt(`${value}`)
     },
     getNewMomentsCount() {
-      if (!this.isLogin)
-        return
+      if (!this.isLogin) return
 
       browser.runtime
         .sendMessage({
           contentScriptQuery: 'getNewMomentsCount',
-        }).then((res) => {
+        })
+        .then((res) => {
           this.newMomentsCount = res.data.update_info.item.count
         })
     },
@@ -138,7 +140,7 @@ export default defineComponent({
         opacity="100"
         pointer="none"
         style="background: linear-gradient(var(--bew-bg), transparent)"
-      ></div>
+      />
     </transition>
 
     <div
@@ -146,10 +148,7 @@ export default defineComponent({
       @mouseenter.self="showLogoMenuDropdown()"
       @mouseleave.self="closeLogoMenuDropdown()"
     >
-      <div
-        ref="logo"
-        class="logo"
-      >
+      <div ref="logo" class="logo">
         <svg
           t="1645466458357"
           class="icon"
@@ -166,7 +165,12 @@ export default defineComponent({
           />
         </svg>
 
-        <tabler:chevron-down w="!4" h="!4" m="l-4" icon="stroke-4 fill-$bew-text-1" />
+        <tabler:chevron-down
+          w="!4"
+          h="!4"
+          m="l-4"
+          icon="stroke-4 fill-$bew-text-1"
+        />
       </div>
       <transition name="slide">
         <logo-menu-dropdown
@@ -174,16 +178,12 @@ export default defineComponent({
           class="bew-popover"
           pos="!left-0 !top-70px"
           transform="!translate-x-0"
-        ></logo-menu-dropdown>
+        />
       </transition>
     </div>
 
     <!-- search bar -->
-    <div
-      flex="~"
-      w="full"
-      justify="md:center <md:end"
-    >
+    <div flex="~" w="full" justify="md:center <md:end">
       <!-- <button
         class="icon-btn"
         text="$bew-text-1 2xl"
@@ -192,16 +192,16 @@ export default defineComponent({
       >
         <tabler:search />
       </button> -->
-      <search-bar
-        ref="searchBar"
-      ></search-bar>
+      <search-bar ref="searchBar" />
     </div>
 
     <!-- right content -->
     <div class="right-side">
       <div v-if="!isLogin" class="right-side-item">
         <a href="https://passport.bilibili.com/login" class="login">
-          <ic-outline-account-circle class="text-base mr-2" />{{ $t('topbar.sign_in') }}
+          <ic-outline-account-circle class="text-base mr-2" />{{
+            $t('topbar.sign_in')
+          }}
         </a>
       </div>
       <template v-if="isLogin">
@@ -214,18 +214,28 @@ export default defineComponent({
           <a
             id="avatar-img"
             ref="avatarImg"
-            :href="'https://space.bilibili.com/' + mid"
+            :href="`https://space.bilibili.com/${mid}`"
             target="_blank"
             class="rounded-full z-1 w-40px h-40px bg-$bew-fill-3 bg-cover bg-center"
-            :style="{ backgroundImage: `url(${(userInfo.face + '').replace('http:', '')})` }"
-          ></a>
+            :style="{
+              backgroundImage: `url(${`${userInfo.face}`.replace(
+                'http:',
+                ''
+              )})`,
+            }"
+          />
           <div
             id="avatar-shadow"
             ref="avatarShadow"
             class="absolute top-0 rounded-full z-0 w-40px h-40px filter blur-sm bg-cover bg-center"
             opacity="80"
-            :style="{ backgroundImage: `url(${(userInfo.face + '').replace('http:', '')})` }"
-          ></div>
+            :style="{
+              backgroundImage: `url(${`${userInfo.face}`.replace(
+                'http:',
+                ''
+              )})`,
+            }"
+          />
           <transition name="slide">
             <user-panel-dropdown
               v-if="showUserPanel"
@@ -233,7 +243,7 @@ export default defineComponent({
               :user-info="userInfo"
               after:h="!0"
               class="bew-popover"
-            ></user-panel-dropdown>
+            />
           </transition>
         </div>
 
@@ -243,10 +253,7 @@ export default defineComponent({
           @mouseenter="showNotificationsDropDown = true"
           @mouseleave="showNotificationsDropDown = false"
         >
-          <div
-            v-if="unReadmessageCount !== 0"
-            class="unread-message"
-          >
+          <div v-if="unReadmessageCount !== 0" class="unread-message">
             {{ unReadmessageCount > 999 ? '999+' : unReadmessageCount }}
           </div>
           <a
@@ -262,7 +269,7 @@ export default defineComponent({
               v-if="showNotificationsDropDown"
               ref="notificationsDropdown"
               class="bew-popover"
-            ></notifications-dropdown>
+            />
           </transition>
         </div>
 
@@ -272,10 +279,7 @@ export default defineComponent({
           @mouseenter="showMomentsDropDown = true"
           @mouseleave="showMomentsDropDown = false"
         >
-          <div
-            v-if="newMomentsCount !== 0"
-            class="unread-message"
-          >
+          <div v-if="newMomentsCount !== 0" class="unread-message">
             {{ newMomentsCount > 999 ? '999+' : newMomentsCount }}
           </div>
           <a
@@ -287,18 +291,14 @@ export default defineComponent({
           </a>
 
           <transition name="slide">
-            <moments-dropdown
-              v-if="showMomentsDropDown"
-              class="bew-popover"
-            >
-            </moments-dropdown>
+            <MomentsDropdown v-if="showMomentsDropDown" class="bew-popover" />
           </transition>
         </div>
 
         <!-- Favorites -->
         <div class="right-side-item">
           <a
-            :href="'https://space.bilibili.com/' + mid + '/favlist'"
+            :href="`https://space.bilibili.com/${mid}/favlist`"
             target="_blank"
             :title="$t('topbar.favorites')"
           >
@@ -307,7 +307,11 @@ export default defineComponent({
         </div>
 
         <!-- History -->
-        <div class="right-side-item">
+        <div
+          class="right-side-item"
+          @mouseenter="showHistoryDropDown = true"
+          @mouseleave="showHistoryDropDown = false"
+        >
           <a
             href="https://www.bilibili.com/account/history"
             target="_blank"
@@ -315,6 +319,10 @@ export default defineComponent({
           >
             <tabler:clock />
           </a>
+
+          <transition name="slide">
+            <HistoryDropdown v-if="showHistoryDropDown" class="bew-popover" />
+          </transition>
         </div>
 
         <!-- Createive center -->
@@ -343,10 +351,9 @@ export default defineComponent({
             p="xl:auto <xl:unset"
           >
             <tabler:upload />
-            <span
-              m="l-2"
-              display="xl:block <xl:hidden"
-            >{{ $t('topbar.upload') }}</span>
+            <span m="l-2" display="xl:block <xl:hidden">{{
+              $t('topbar.upload')
+            }}</span>
           </a>
 
           <transition name="slide">
@@ -355,7 +362,7 @@ export default defineComponent({
               class="bew-popover"
               pos="!left-auto !-right-2"
               transform="!translate-x-0"
-            ></upload-dropdown>
+            />
           </transition>
         </div>
       </template>

From f7680bdaf856164fca2a6cd956f8d0373ffc3d07 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 14 Nov 2022 01:04:11 +0800
Subject: [PATCH 2/9] chore(background/idex): scroll bar style

---
 src/background/index.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/background/index.ts b/src/background/index.ts
index 95a0f687..99d60e9c 100644
--- a/src/background/index.ts
+++ b/src/background/index.ts
@@ -81,6 +81,7 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan
           css: `
             ::-webkit-scrollbar {
               width: 8px;
+              height: 8px;
             }
 
             ::-webkit-scrollbar-track {
@@ -95,6 +96,10 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan
               background-color: var(--bew-fill-3);
               border-radius: 20px;
             }
+
+            ::-webkit-scrollbar-corner {
+              background: var(--bew-bg)
+            }
           `,
           // runAt: 'document_start',
           target: { tabId },

From 0587f6a2667ff6e5aba6a72be745dc70976a634d Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 14 Nov 2022 01:06:50 +0800
Subject: [PATCH 3/9] refator(MomentsDropdown): move to composition API

---
 src/components/Topbar/MomentsDropdown.vue | 556 ++++++++++++----------
 1 file changed, 306 insertions(+), 250 deletions(-)

diff --git a/src/components/Topbar/MomentsDropdown.vue b/src/components/Topbar/MomentsDropdown.vue
index 8d5366a8..590bd5e4 100644
--- a/src/components/Topbar/MomentsDropdown.vue
+++ b/src/components/Topbar/MomentsDropdown.vue
@@ -1,255 +1,268 @@
-<script lang="ts">
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { Ref, UnwrapNestedRefs } from 'vue'
+import { onMounted, reactive, ref, watch } from 'vue'
 import { isNewArticle, isNewVideo, setLastestOffsetID } from './notify'
 import { language } from '~/logic'
 import { calcTimeSince, getUserID } from '~/utils'
 import type { MomentItem } from '~/types'
 import { LanguageType, MomentType } from '~/types'
+const { t } = useI18n()
 
-export default defineComponent({
-  data() {
-    return {
-      moments: [] as MomentItem[],
-      calcTimeSince,
-      MomentType,
-      momentTabs: [
-        {
-          id: 0,
-          name: this.$t('topbar.moments_dropdown.tabs.videos'),
-          isSelected: true,
-        },
-        {
-          id: 1,
-          name: this.$t('topbar.moments_dropdown.tabs.live'),
-          isSelected: false,
-        },
-        {
-          id: 2,
-          name: this.$t('topbar.moments_dropdown.tabs.articles'),
-          isSelected: false,
-        },
-      ],
-      selectedTab: 0,
-      isLoading: false,
-      // when noMoreContent is true, the user can't scroll down to load more content
-      noMoreContent: false,
-      livePage: 1,
-      LanguageType,
-      language,
-    }
+const moments = reactive<Array<MomentItem>>([]) as UnwrapNestedRefs<
+  Array<MomentItem>
+>
+const momentTabs = reactive([
+  {
+    id: 0,
+    name: t('topbar.moments_dropdown.tabs.videos'),
+    isSelected: true,
   },
-  watch: {
-    selectedTab(newVal: number, oldVal: number) {
-      if (newVal === oldVal)
-        return
-
-      this.scrollToTop(this.$refs.momentsWrap as HTMLElement, 300)
-      this.moments = []
-      if (newVal === 0) {
-        this.getNewMoments([MomentType.Video, MomentType.Bangumi])
-      }
-      else if (newVal === 1) {
-        this.livePage = 1
-        this.getLiveMoments(this.livePage)
-      }
-      else if (newVal === 2) {
-        this.getNewMoments([MomentType.Article])
-      }
-    },
+  {
+    id: 1,
+    name: t('topbar.moments_dropdown.tabs.live'),
+    isSelected: false,
   },
-  mounted() {
-    this.getNewMoments([MomentType.Video, MomentType.Bangumi])
+  {
+    id: 2,
+    name: t('topbar.moments_dropdown.tabs.articles'),
+    isSelected: false,
+  },
+])
+const selectedTab = ref<number>(0)
+const isLoading = ref<boolean>(false)
+// when noMoreContent is true, the user can't scroll down to load more content
+const noMoreContent = ref<boolean>(false)
+const livePage = ref<number>(1)
+const momentsWrap = ref<HTMLElement>() as Ref<HTMLElement>
 
-    const momentsWrap = this.$refs.momentsWrap as HTMLDivElement
-    momentsWrap.addEventListener('scroll', () => {
-      if (momentsWrap.clientHeight + momentsWrap.scrollTop >= momentsWrap.scrollHeight
-        && this.moments.length > 0 && !this.isLoading) {
-        if (this.selectedTab === 0 && !this.noMoreContent)
-          this.getHistoryMoments([MomentType.Video, MomentType.Bangumi])
-        else if (this.selectedTab === 1 && !this.noMoreContent)
-          this.getLiveMoments(this.livePage)
-        else if (this.selectedTab === 2 && !this.noMoreContent)
-          this.getHistoryMoments([MomentType.Article])
+watch(selectedTab, (newVal: number, oldVal: number) => {
+  if (newVal === oldVal)
+    return
+
+  if (momentsWrap.value)
+    scrollToTop(momentsWrap.value, 300)
+  moments.length = 0
+  if (newVal === 0) {
+    getNewMoments([MomentType.Video, MomentType.Bangumi])
+  }
+  else if (newVal === 1) {
+    livePage.value = 1
+    getLiveMoments(livePage.value)
+  }
+  else if (newVal === 2) {
+    getNewMoments([MomentType.Article])
+  }
+})
+
+onMounted(() => {
+  getNewMoments([MomentType.Video, MomentType.Bangumi])
+
+  if (momentsWrap.value) {
+    momentsWrap.value.addEventListener('scroll', () => {
+      if (
+        momentsWrap.value.clientHeight + momentsWrap.value.scrollTop
+          >= momentsWrap.value.scrollHeight - 20
+        && moments.length > 0
+        && !isLoading.value
+      ) {
+        if (selectedTab.value === 0 && !noMoreContent.value)
+          getHistoryMoments([MomentType.Video, MomentType.Bangumi])
+        else if (selectedTab.value === 1 && !noMoreContent.value)
+          getLiveMoments(livePage.value)
+        else if (selectedTab.value === 2 && !noMoreContent.value)
+          getHistoryMoments([MomentType.Article])
       }
     })
-  },
-  methods: {
-    onClickTab(tabId: number) {
-      // Prevent changing tab when loading, cuz it will cause a bug
-      if (this.isLoading)
-        return
-
-      this.selectedTab = tabId
-      this.momentTabs.forEach((tab) => {
-        tab.isSelected = tab.id === tabId
-      })
-    },
-    getNewMoments(typeList: number[]) {
-      this.isLoading = true
-      browser.runtime.sendMessage({
-        contentScriptQuery: 'getNewMoments',
-        uid: getUserID(),
-        typeList,
-      }).then((res) => {
-        if (res.code === 0) {
-          if (this.moments.length !== 0 && res.data.cards.length < 20) {
-            this.isLoading = false
-            this.noMoreContent = true
-            return
-          }
-
-          res.data.cards.forEach((item: any) => {
-            this.pushItemIntoMoments(item)
-          })
-
-          // set this lastest offset id, which will clear the new moment's marker point
-          // after you watch these moments.
-          if (this.selectedTab === 0)
-            setLastestOffsetID(MomentType.Video, this.moments[0].id)
-          else if (this.selectedTab === 2)
-            setLastestOffsetID(MomentType.Article, this.moments[0].id)
-
-          this.noMoreContent = false
-        }
-        this.isLoading = false
-      })
-    },
-    getHistoryMoments(typeList: number[]) {
-      this.isLoading = true
-      browser.runtime.sendMessage({
-        contentScriptQuery: 'getHistoryMoments',
-        uid: getUserID(),
-        typeList,
-        offsetDynamicID: this.moments[this.moments.length - 1].dynamic_id_str,
-      }).then((res) => {
-        if (res.code === 0) {
-          if (res.data.has_more === 0) {
-            this.isLoading = false
-            this.noMoreContent = true
-            return
-          }
-
-          res.data.cards.forEach((item: any) => {
-            this.pushItemIntoMoments(item)
-          })
-          this.noMoreContent = false
-        }
-        this.isLoading = false
-      })
-    },
-    getLiveMoments(page: number) {
-      this.isLoading = true
-      browser.runtime.sendMessage({
-        contentScriptQuery: 'getLiveMoments',
-        page,
-        pageSize: 10,
-      }).then((res) => {
-        if (res.code === 0) {
-          // if the length of this list is less then the pageSize, it means that it have no more contents
-          if (this.moments.length !== 0 && res.data.list.length < 10) {
-            this.isLoading = false
-            this.noMoreContent = true
-            return
-          }
-
-          // if the length of this list is equal to the pageSize, this means that it may have the next page.
-          if (res.data.list.length === 10)
-            this.livePage++
-          res.data.list.forEach((item: any) => {
-            this.moments.push({
-              id: item.roomid,
-              uid: item.uid,
-              name: item.uname,
-              face: item.face,
-              url: item.link,
-              title: item.title,
-              cover: item.pic,
-            } as MomentItem)
-          })
-          this.noMoreContent = false
-        }
-        this.isLoading = false
-      })
-    },
-    pushItemIntoMoments(item: any) {
-      const card = JSON.parse(item.card)
-
-      if (item.desc.type === MomentType.Video) {
-        // if this is a video moment
-        this.moments.push({
-          type: item.desc.type,
-          id: item.desc.dynamic_id,
-          uid: item.desc.uid,
-          name: item.desc.user_profile.info.uname,
-          face: item.desc.user_profile.info.face,
-          aid: card.aid,
-          bvid: item.desc.bvid,
-          url: card.short_link_v2,
-          ctime: card.ctime,
-          title: card.title,
-          cover: card.pic,
-          dynamic_id_str: item.desc.dynamic_id_str,
-          isNew: isNewVideo(item.desc.dynamic_id),
-        } as MomentItem)
-      }
-      else if (item.desc.type === MomentType.Bangumi) {
-        // bangumi moment
-        this.moments.push({
-          type: item.desc.type,
-          id: item.desc.dynamic_id,
-          name: card.apiSeasonInfo.title,
-          face: card.apiSeasonInfo.cover,
-          episode_id: card.episode_id,
-          url: card.url,
-          title: card.new_desc,
-          cover: card.cover,
-          dynamic_id_str: item.desc.dynamic_id_str,
-          isNew: isNewVideo(item.desc.dynamic_id),
-        } as MomentItem)
-      }
-      else if (item.desc.type === MomentType.Article) {
-        // article moment
-        this.moments.push({
-          type: item.desc.type,
-          id: item.desc.dynamic_id,
-          uid: item.desc.uid,
-          name: item.desc.user_profile.info.uname,
-          face: item.desc.user_profile.info.face,
-          url: `https://www.bilibili.com/read/cv${card.id}`,
-          ctime: card.publish_time,
-          title: card.title,
-          cover: card.image_urls[0],
-          dynamic_id_str: item.desc.dynamic_id_str,
-          isNew: isNewArticle(item.desc.dynamic_id),
-        } as MomentItem)
-      }
-    },
-    /**
-     * smooth scroll to the top of the html element
-     */
-    scrollToTop(element: HTMLElement, duration: number) {
-    // cancel if already on top
-      if (element.scrollTop === 0)
-        return
-
-      const cosParameter = element.scrollTop / 2
-      let scrollCount = 0
-      let oldTimestamp = 0
-
-      function step(newTimestamp: number) {
-        if (oldTimestamp !== 0) {
-          // if duration is 0 scrollCount will be Infinity
-          scrollCount += Math.PI * (newTimestamp - oldTimestamp) / duration
-          if (scrollCount >= Math.PI)
-            return element.scrollTop = 0
-          element.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount)
-        }
-        oldTimestamp = newTimestamp
-        window.requestAnimationFrame(step)
-      }
-      window.requestAnimationFrame(step)
-    },
-  },
+  }
 })
+
+function onClickTab(tabId: number) {
+  // Prevent changing tab when loading, cuz it will cause a bug
+  if (isLoading.value)
+    return
+
+  selectedTab.value = tabId
+  momentTabs.forEach((tab) => {
+    tab.isSelected = tab.id === tabId
+  })
+}
+
+function getNewMoments(typeList: number[]) {
+  isLoading.value = true
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getNewMoments',
+      uid: getUserID(),
+      typeList,
+    })
+    .then((res) => {
+      if (res.code === 0) {
+        if (moments.length !== 0 && res.data.cards.length < 20) {
+          isLoading.value = false
+          noMoreContent.value = true
+          return
+        }
+
+        res.data.cards.forEach((item: any) => {
+          pushItemIntoMoments(item)
+        })
+
+        // set this lastest offset id, which will clear the new moment's marker point
+        // after you watch these moments.
+        if (selectedTab.value === 0)
+          setLastestOffsetID(MomentType.Video, moments[0].id)
+        else if (selectedTab.value === 2)
+          setLastestOffsetID(MomentType.Article, moments[0].id)
+
+        noMoreContent.value = false
+      }
+      isLoading.value = false
+    })
+}
+
+function getHistoryMoments(typeList: number[]) {
+  isLoading.value = true
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getHistoryMoments',
+      uid: getUserID(),
+      typeList,
+      offsetDynamicID: moments[moments.length - 1].dynamic_id_str,
+    })
+    .then((res) => {
+      if (res.code === 0) {
+        if (res.data.has_more === 0) {
+          isLoading.value = false
+          noMoreContent.value = true
+          return
+        }
+
+        res.data.cards.forEach((item: any) => {
+          pushItemIntoMoments(item)
+        })
+        noMoreContent.value = false
+      }
+      isLoading.value = false
+    })
+}
+
+function getLiveMoments(page: number) {
+  isLoading.value = true
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getLiveMoments',
+      page,
+      pageSize: 10,
+    })
+    .then((res) => {
+      if (res.code === 0) {
+        // if the length of this list is less then the pageSize, it means that it have no more contents
+        if (moments.length !== 0 && res.data.list.length < 10) {
+          isLoading.value = false
+          noMoreContent.value = true
+          return
+        }
+
+        // if the length of this list is equal to the pageSize, this means that it may have the next page.
+        if (res.data.list.length === 10)
+          livePage.value++
+        res.data.list.forEach((item: any) => {
+          moments.push({
+            id: item.roomid,
+            uid: item.uid,
+            name: item.uname,
+            face: item.face,
+            url: item.link,
+            title: item.title,
+            cover: item.pic,
+          } as MomentItem)
+        })
+        noMoreContent.value = false
+      }
+      isLoading.value = false
+    })
+}
+
+function pushItemIntoMoments(item: any) {
+  const card = JSON.parse(item.card)
+
+  if (item.desc.type === MomentType.Video) {
+    // if this is a video moment
+    moments.push({
+      type: item.desc.type,
+      id: item.desc.dynamic_id,
+      uid: item.desc.uid,
+      name: item.desc.user_profile.info.uname,
+      face: item.desc.user_profile.info.face,
+      aid: card.aid,
+      bvid: item.desc.bvid,
+      url: card.short_link_v2,
+      ctime: card.ctime,
+      title: card.title,
+      cover: card.pic,
+      dynamic_id_str: item.desc.dynamic_id_str,
+      isNew: isNewVideo(item.desc.dynamic_id),
+    } as MomentItem)
+  }
+  else if (item.desc.type === MomentType.Bangumi) {
+    // bangumi moment
+    moments.push({
+      type: item.desc.type,
+      id: item.desc.dynamic_id,
+      name: card.apiSeasonInfo.title,
+      face: card.apiSeasonInfo.cover,
+      episode_id: card.episode_id,
+      url: card.url,
+      title: card.new_desc,
+      cover: card.cover,
+      dynamic_id_str: item.desc.dynamic_id_str,
+      isNew: isNewVideo(item.desc.dynamic_id),
+    } as MomentItem)
+  }
+  else if (item.desc.type === MomentType.Article) {
+    // article moment
+    moments.push({
+      type: item.desc.type,
+      id: item.desc.dynamic_id,
+      uid: item.desc.uid,
+      name: item.desc.user_profile.info.uname,
+      face: item.desc.user_profile.info.face,
+      url: `https://www.bilibili.com/read/cv${card.id}`,
+      ctime: card.publish_time,
+      title: card.title,
+      cover: card.image_urls[0],
+      dynamic_id_str: item.desc.dynamic_id_str,
+      isNew: isNewArticle(item.desc.dynamic_id),
+    } as MomentItem)
+  }
+}
+
+/**
+ * smooth scroll to the top of the html element
+ */
+function scrollToTop(element: HTMLElement, duration: number) {
+  // cancel if already on top
+  if (element.scrollTop === 0)
+    return
+
+  const cosParameter = element.scrollTop / 2
+  let scrollCount = 0
+  let oldTimestamp = 0
+
+  function step(newTimestamp: number) {
+    if (oldTimestamp !== 0) {
+      // if duration is 0 scrollCount will be Infinity
+      scrollCount += (Math.PI * (newTimestamp - oldTimestamp)) / duration
+      if (scrollCount >= Math.PI)
+        return (element.scrollTop = 0)
+      element.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount)
+    }
+    oldTimestamp = newTimestamp
+    window.requestAnimationFrame(step)
+  }
+  window.requestAnimationFrame(step)
+}
 </script>
 
 <template>
@@ -294,7 +307,12 @@ export default defineComponent({
     <!-- moments wrapper -->
     <div ref="momentsWrap" h="430px" overflow="y-scroll" p="x-4">
       <!-- loading -->
-      <loading v-if="isLoading && moments.length === 0" h="full" flex="~" items="center" />
+      <loading
+        v-if="isLoading && moments.length === 0"
+        h="full"
+        flex="~"
+        items="center"
+      />
 
       <!-- empty -->
       <empty v-if="!isLoading && moments.length === 0" w="full" h="full" />
@@ -330,28 +348,66 @@ export default defineComponent({
           />
 
           <a
-            :href="moment.type === MomentType.Video ? `https://space.bilibili.com/${moment.uid}` : moment.url"
+            :href="
+              moment.type === MomentType.Video
+                ? `https://space.bilibili.com/${moment.uid}`
+                : moment.url
+            "
             target="_blank"
           >
-            <img :src="`${moment.face}@60w_60h_1c`" rounded="$bew-radius" w="40px" h="40px" m="r-4">
+            <img
+              :src="`${moment.face}@60w_60h_1c`"
+              rounded="$bew-radius"
+              w="40px"
+              h="40px"
+              m="r-4"
+            >
           </a>
 
           <div flex="~" justify="between" w="full">
             <div>
-              <span>{{ moment.name }}</span> {{ $t('topbar.moments_dropdown.uploaded') }}{{ moment.title }}
-              <div v-if="moment.type !== MomentType.Bangumi" text="$bew-text-2 sm" m="y-2">
+              <span>{{ `${moment.name} ${t('topbar.moments_dropdown.uploaded')}` }}</span>
+              <div overflow="hidden" text="overflow-ellipsis">
+                {{ moment.title }}
+              </div>
+              <div
+                v-if="moment.type !== MomentType.Bangumi"
+                text="$bew-text-2 sm"
+                m="y-2"
+              >
                 <!-- Videos and articles -->
                 <div v-if="selectedTab === 0 || selectedTab === 2">
-                  {{ calcTimeSince(new Date(moment.ctime * 1000)) }}{{ language === LanguageType.English ? ` ${$t('common.ago')}` : $t('common.ago') }}
+                  {{
+                    moment.ctime
+                      ? calcTimeSince(new Date(moment.ctime * 1000))
+                      : moment.ctime
+                  }}{{
+                    language === LanguageType.English
+                      ? ` ${$t('common.ago')}`
+                      : $t('common.ago')
+                  }}
                 </div>
+
                 <!-- Live -->
-                <div v-else-if="selectedTab === 1" text="$bew-theme-color" font="bold" flex="~" items="center">
-                  <fluent:live-24-filled m="r-2" /> {{ $t('topbar.moments_dropdown.live_status') }}
+                <div
+                  v-else-if="selectedTab === 1"
+                  text="$bew-theme-color"
+                  font="bold"
+                  flex="~"
+                  items="center"
+                >
+                  <fluent:live-24-filled m="r-2" />
+                  {{ $t('topbar.moments_dropdown.live_status') }}
                 </div>
               </div>
-
             </div>
-            <img :src="`${moment.cover}@128w_72h_1c`" w="82px" h="46px" m="l-4" rounded="$bew-radius">
+            <img
+              :src="`${moment.cover}@128w_72h_1c`"
+              w="82px"
+              h="46px"
+              m="l-4"
+              rounded="$bew-radius"
+            >
           </div>
         </a>
       </transition-group>

From 4099bf59a2ca6d9dc4961a71444cf20d9c5b4331 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 14 Nov 2022 01:16:10 +0800
Subject: [PATCH 4/9] update: README

---
 README.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/README.md b/README.md
index dd163541..7161d185 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,9 @@
 
 <p align="center">Bringing you the suggested videos on the bilibili homepage, clean and simple.</p>
 
+<details>
+ <summary>開發中, 佛系更新 = =</summary>
+
 <p align="center">
 <img width="655" src="https://user-images.githubusercontent.com/33394391/160250313-6a3db903-53c5-431a-8ddd-80a50725087a.png"><br/>
 </p>
@@ -72,3 +75,5 @@ And then pack files under `extension`
 [Bilibili-Evolved](https://github.com/the1812/Bilibili-Evolved)
 
 [bilibili-API-collect](https://github.com/SocialSisterYi/bilibili-API-collect)
+
+</details>

From 623a5cc9d1e34a27c6ab37f87a2ad4a9191d0adf Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 4 Dec 2022 01:47:44 +0800
Subject: [PATCH 5/9] chore:

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                | 376 +++++++++-
 src/background/apis/history.ts                |   2 +-
 src/background/apis/index.ts                  |   2 +
 src/components/Progress.vue                   |  16 +
 src/components/Topbar/HistoryDropdown.vue     | 649 ++++++++----------
 src/components/Topbar/MomentsDropdown.vue     |   5 +-
 src/components/Topbar/index.vue               |  29 +-
 src/components/Topbar/notify.ts               |   4 +-
 src/components/Topbar/types.ts                |  57 ++
 .../views/Home/RecommendContent.vue           | 136 ++--
 src/{types/index.ts => enums/appEnums.ts}     |   2 -
 src/styles/main.scss                          |  16 +-
 src/types/topbar/moments.ts                   |  27 -
 src/utils/dataFormatter.ts                    |   4 +-
 volar.config.js                               |   5 +
 16 files changed, 853 insertions(+), 478 deletions(-)
 create mode 100644 src/components/Progress.vue
 create mode 100644 src/components/Topbar/types.ts
 rename src/{types/index.ts => enums/appEnums.ts} (78%)
 delete mode 100644 src/types/topbar/moments.ts
 create mode 100644 volar.config.js

diff --git a/package.json b/package.json
index adc54e08..af2f7415 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@types/webextension-polyfill": "^0.8.3",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@vitejs/plugin-vue": "^2.3.3",
+    "@volar-plugins/vetur": "^0.1.0",
     "@vue/compiler-sfc": "^3.2.35",
     "@vue/test-utils": "^2.0.0",
     "@vueuse/core": "^8.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 71a59516..377c158e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,6 +10,7 @@ specifiers:
   '@types/webextension-polyfill': ^0.8.3
   '@typescript-eslint/eslint-plugin': ^5.25.0
   '@vitejs/plugin-vue': ^2.3.3
+  '@volar-plugins/vetur': ^0.1.0
   '@vue/compiler-sfc': ^3.2.35
   '@vue/test-utils': ^2.0.0
   '@vueuse/core': ^8.5.0
@@ -56,6 +57,7 @@ devDependencies:
   '@types/webextension-polyfill': 0.8.3
   '@typescript-eslint/eslint-plugin': 5.36.2_yqf6kl63nyoq5megxukfnom5rm
   '@vitejs/plugin-vue': 2.3.4_vite@2.9.15+vue@3.2.38
+  '@volar-plugins/vetur': 0.1.0
   '@vue/compiler-sfc': 3.2.38
   '@vue/test-utils': 2.0.2_vue@3.2.38
   '@vueuse/core': 8.9.4_vue@3.2.38
@@ -198,6 +200,12 @@ packages:
     resolution: {integrity: sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==}
     dev: true
 
+  /@babel/code-frame/7.12.11:
+    resolution: {integrity: sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==}
+    dependencies:
+      '@babel/highlight': 7.14.5
+    dev: true
+
   /@babel/code-frame/7.14.5:
     resolution: {integrity: sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==}
     engines: {node: '>=6.9.0'}
@@ -315,6 +323,23 @@ packages:
     dev: true
     optional: true
 
+  /@eslint/eslintrc/0.4.3:
+    resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.3.4
+      espree: 7.3.1
+      globals: 13.17.0
+      ignore: 4.0.6
+      import-fresh: 3.3.0
+      js-yaml: 3.14.1
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@eslint/eslintrc/1.3.1:
     resolution: {integrity: sha512-OhSY22oQQdw3zgPOOwdoj01l/Dzl1Z+xyUP33tkSN+aqyEhymJCcPHyXt+ylW8FSe0TfRC2VG+ROQOapD0aZSQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -356,6 +381,17 @@ packages:
       - supports-color
     dev: true
 
+  /@humanwhocodes/config-array/0.5.0:
+    resolution: {integrity: sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==}
+    engines: {node: '>=10.10.0'}
+    dependencies:
+      '@humanwhocodes/object-schema': 1.2.1
+      debug: 4.3.4
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@humanwhocodes/config-array/0.9.5:
     resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==}
     engines: {node: '>=10.10.0'}
@@ -404,8 +440,8 @@ packages:
       - supports-color
     dev: true
 
-  /@intlify/bundle-utils/3.2.1_vue-i18n@9.1.9:
-    resolution: {integrity: sha512-rf4cLBOnbqmpXVcCdcYHilZpMt1m82syh3WLBJlZvGxN2KkH9HeHVH4+bnibF/SDXCHNh6lM6wTpS/qw+PkcMg==}
+  /@intlify/bundle-utils/3.4.0_vue-i18n@9.1.9:
+    resolution: {integrity: sha512-2UQkqiSAOSPEHMGWlybqWm4G2K0X+FyYho5AwXz6QklSX1EY5EDmOSxZmwscn2qmKBnp6OYsme5kUrnN9xrWzQ==}
     engines: {node: '>= 12'}
     peerDependencies:
       petite-vue-i18n: '*'
@@ -416,8 +452,8 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/message-compiler': 9.3.0-beta.6
-      '@intlify/shared': 9.3.0-beta.6
+      '@intlify/message-compiler': 9.3.0-beta.10
+      '@intlify/shared': 9.3.0-beta.10
       jsonc-eslint-parser: 1.4.1
       source-map: 0.6.1
       vue-i18n: 9.1.9_vue@3.2.38
@@ -449,11 +485,11 @@ packages:
       '@intlify/shared': 9.1.9
       source-map: 0.6.1
 
-  /@intlify/message-compiler/9.3.0-beta.6:
-    resolution: {integrity: sha512-3PJqRJoqvFHExA9DCkf7fZYKbvYne1tYQ0fptJAhUOZsELarh8wr4aPLKWCkQSRuutdrtZ/n5CcPgJgUmVthDw==}
+  /@intlify/message-compiler/9.3.0-beta.10:
+    resolution: {integrity: sha512-RoOC6yceOykLRhN0NlbkNOBUx1el6iphx3W8NfOx3jHVNtfT1FYokx14/5sU3F1F0uxeG4sp6q+ppKvaF8o+ww==}
     engines: {node: '>= 14'}
     dependencies:
-      '@intlify/shared': 9.3.0-beta.6
+      '@intlify/shared': 9.3.0-beta.10
       source-map: 0.6.1
     dev: true
 
@@ -473,8 +509,8 @@ packages:
     resolution: {integrity: sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw==}
     engines: {node: '>= 10'}
 
-  /@intlify/shared/9.3.0-beta.6:
-    resolution: {integrity: sha512-ITA1R4tvJYwZXT5x6QCSwxcwQ4dU52zrzVm/EUbgsp8oWzYS1xexBrxyNM80PSQudYvL2rvcZJKQ7yBh7b0LkQ==}
+  /@intlify/shared/9.3.0-beta.10:
+    resolution: {integrity: sha512-h93uAanbAt/XgjDHclrVB7xix6r7Uz11wx0iGNOCdHP7aA2LCJjUT3uNbekJjjbo+Fl5jzTSJZdm2SexzoqhRA==}
     engines: {node: '>= 14'}
     dev: true
 
@@ -493,8 +529,8 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/bundle-utils': 3.2.1_vue-i18n@9.1.9
-      '@intlify/shared': 9.3.0-beta.6
+      '@intlify/bundle-utils': 3.4.0_vue-i18n@9.1.9
+      '@intlify/shared': 9.3.0-beta.10
       '@rollup/pluginutils': 4.2.1
       debug: 4.3.4
       fast-glob: 3.2.11
@@ -803,6 +839,28 @@ packages:
       vue: 3.2.38
     dev: true
 
+  /@volar-plugins/vetur/0.1.0:
+    resolution: {integrity: sha512-Qaws7TI8d/kkjihSQrW/3YGqiLeLZ1dMjfxDBe4vJKhzXw82sN4+Wr8NwGf2s15KyVDPQTjkPHv6ukn4vFD9Og==}
+    dependencies:
+      '@volar/vue-language-service-types': 0.34.17
+      vls: 0.8.2
+      vscode-html-languageservice: 5.0.3
+      vscode-uri: 3.0.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@volar/vue-language-service-types/0.34.17:
+    resolution: {integrity: sha512-skDO8ZS6Vs0M+zbnYeoBWk7JX8WbCeCohOwnkstqYxXtcqEU4HTeTShhVxrfyWGS0FLHVE79VAhicxjul2EnHw==}
+    dependencies:
+      vscode-languageserver-protocol: 3.17.2
+      vscode-languageserver-textdocument: 1.0.7
+    dev: true
+
+  /@vscode/l10n/0.0.10:
+    resolution: {integrity: sha512-E1OCmDcDWa0Ya7vtSjp/XfHFGqYJfh+YPC1RkATU71fTac+j1JjCcB3qwSzmlKAighx2WxhLlfhS0RwAN++PFQ==}
+    dev: true
+
   /@vue/compiler-core/3.2.38:
     resolution: {integrity: sha512-/FsvnSu7Z+lkd/8KXMa4yYNUiqQrI22135gfsQYVGuh5tqEgOB0XqrUdb/KnCLa5+TmQLPwvyUnKMyCpu+SX3Q==}
     dependencies:
@@ -1091,12 +1149,26 @@ packages:
       uri-js: 4.4.1
     dev: true
 
+  /ajv/8.11.2:
+    resolution: {integrity: sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+    dev: true
+
   /ansi-align/3.0.0:
     resolution: {integrity: sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==}
     dependencies:
       string-width: 3.1.0
     dev: true
 
+  /ansi-colors/4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+    dev: true
+
   /ansi-regex/4.1.0:
     resolution: {integrity: sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==}
     engines: {node: '>=6'}
@@ -1162,6 +1234,12 @@ packages:
       zip-stream: 2.1.3
     dev: true
 
+  /argparse/1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+    dependencies:
+      sprintf-js: 1.0.3
+    dev: true
+
   /argparse/2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
@@ -1227,6 +1305,11 @@ packages:
     resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
     dev: true
 
+  /astral-regex/2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
+    dev: true
+
   /async/0.2.10:
     resolution: {integrity: sha512-eAkdoKxU6/LkKDBzLpT+t6Ff5EtfSF4wx1WfJiPEEV7WNLnDaRXk0oVysiEPm262roaachGexwUv94WhSgN5TQ==}
     dev: true
@@ -1355,6 +1438,11 @@ packages:
       ieee754: 1.2.1
     dev: true
 
+  /builtin-modules/1.1.1:
+    resolution: {integrity: sha512-wxXCdllwGhI2kCC0MnvTGYTMvnVZTvqgypkiTI8Pa5tcz2i6VqsqwYGgqwXji+4RgCzms6EajE4IxiUH6HH8nQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /builtin-modules/3.2.0:
     resolution: {integrity: sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==}
     engines: {node: '>=6'}
@@ -1464,6 +1552,12 @@ packages:
     resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
     dev: true
 
+  /character-parser/2.2.0:
+    resolution: {integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==}
+    dependencies:
+      is-regex: 1.1.4
+    dev: true
+
   /character-reference-invalid/1.1.4:
     resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
     dev: true
@@ -1932,6 +2026,11 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: true
 
+  /diff/4.0.2:
+    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
+    engines: {node: '>=0.3.1'}
+    dev: true
+
   /dir-glob/3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -2043,6 +2142,13 @@ packages:
       once: 1.4.0
     dev: true
 
+  /enquirer/2.3.6:
+    resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==}
+    engines: {node: '>=8.6'}
+    dependencies:
+      ansi-colors: 4.1.3
+    dev: true
+
   /entities/2.2.0:
     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
     dev: true
@@ -2803,6 +2909,21 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
+  /eslint-plugin-vue/7.20.0_eslint@7.32.0:
+    resolution: {integrity: sha512-oVNDqzBC9h3GO+NTgWeLMhhGigy6/bQaQbHS+0z7C4YEu/qK/yxHvca/2PTZtGNPsCrHwOTgKMrwu02A9iPBmw==}
+    engines: {node: '>=8.10'}
+    peerDependencies:
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      eslint: 7.32.0
+      eslint-utils: 2.1.0
+      natural-compare: 1.4.0
+      semver: 6.3.0
+      vue-eslint-parser: 7.11.0_eslint@7.32.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /eslint-plugin-vue/8.7.1_eslint@8.23.0:
     resolution: {integrity: sha512-28sbtm4l4cOzoO1LtzQPxfxhQABararUb1JtqusQqObJpWX2e/gmVyeYVfepizPFne0Q5cILkYGiBoV36L12Wg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2893,6 +3014,55 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /eslint/7.32.0:
+    resolution: {integrity: sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    hasBin: true
+    dependencies:
+      '@babel/code-frame': 7.12.11
+      '@eslint/eslintrc': 0.4.3
+      '@humanwhocodes/config-array': 0.5.0
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.3
+      debug: 4.3.4
+      doctrine: 3.0.0
+      enquirer: 2.3.6
+      escape-string-regexp: 4.0.0
+      eslint-scope: 5.1.1
+      eslint-utils: 2.1.0
+      eslint-visitor-keys: 2.1.0
+      espree: 7.3.1
+      esquery: 1.4.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      functional-red-black-tree: 1.0.1
+      glob-parent: 5.1.2
+      globals: 13.17.0
+      ignore: 4.0.6
+      import-fresh: 3.3.0
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      js-yaml: 3.14.1
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.1
+      progress: 2.0.3
+      regexpp: 3.2.0
+      semver: 7.3.7
+      strip-ansi: 6.0.1
+      strip-json-comments: 3.1.1
+      table: 6.8.1
+      text-table: 0.2.0
+      v8-compile-cache: 2.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /eslint/8.11.0:
     resolution: {integrity: sha512-/KRpd9mIRg2raGxHRGwW9ZywYNAClZrHjdueHcrVDuO3a6bj83eoTirCCk0M0yPwOjWYKHwRVRid+xK4F/GHgA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3001,6 +3171,15 @@ packages:
       eslint-visitor-keys: 1.3.0
     dev: true
 
+  /espree/7.3.1:
+    resolution: {integrity: sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      acorn: 7.4.1
+      acorn-jsx: 5.3.2_acorn@7.4.1
+      eslint-visitor-keys: 1.3.0
+    dev: true
+
   /espree/9.3.1:
     resolution: {integrity: sha512-bvdyLmJMfwkV3NCRl5ZhJf22zBFo1y8bYh3VYb+bfzqNB4Je68P2sSuXyuFquzWLebHpNd2/d5uv7yoP9ISnGQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3673,6 +3852,11 @@ packages:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: true
 
+  /ignore/4.0.6:
+    resolution: {integrity: sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==}
+    engines: {node: '>= 4'}
+    dev: true
+
   /ignore/5.2.0:
     resolution: {integrity: sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==}
     engines: {node: '>= 4'}
@@ -3864,6 +4048,13 @@ packages:
     hasBin: true
     dev: true
 
+  /is-expression/4.0.0:
+    resolution: {integrity: sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==}
+    dependencies:
+      acorn: 7.4.1
+      object-assign: 4.1.1
+    dev: true
+
   /is-extglob/2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -4047,6 +4238,14 @@ packages:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: true
 
+  /js-yaml/3.14.1:
+    resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
+    hasBin: true
+    dependencies:
+      argparse: 1.0.10
+      esprima: 4.0.1
+    dev: true
+
   /js-yaml/4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
@@ -4122,6 +4321,10 @@ packages:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
     dev: true
 
+  /json-schema-traverse/1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+    dev: true
+
   /json-schema/0.2.3:
     resolution: {integrity: sha512-a3xHnILGMtk+hDOqNwHzF6e2fNbiMrXZvxKQiEv2MlgQP+pjIOzqAmKYD2mDpXYE/44M7g+n9p2bKkYWDUcXCQ==}
     dev: true
@@ -4381,6 +4584,10 @@ packages:
     resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
     dev: true
 
+  /lodash.truncate/4.4.2:
+    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+    dev: true
+
   /lodash.union/4.6.0:
     resolution: {integrity: sha1-SLtQiECfFvGCFmZkHETdGqrjzYg=}
     dev: true
@@ -4575,7 +4782,6 @@ packages:
     dependencies:
       minimist: 1.2.6
     dev: true
-    optional: true
 
   /mkdirp/1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
@@ -5190,6 +5396,12 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /prettier/2.8.0:
+    resolution: {integrity: sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
   /process-nextick-args/2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
     dev: true
@@ -5226,6 +5438,18 @@ packages:
     resolution: {integrity: sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==}
     dev: true
 
+  /pug-error/2.0.0:
+    resolution: {integrity: sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==}
+    dev: true
+
+  /pug-lexer/5.0.1:
+    resolution: {integrity: sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==}
+    dependencies:
+      character-parser: 2.2.0
+      is-expression: 4.0.0
+      pug-error: 2.0.0
+    dev: true
+
   /pump/3.0.0:
     resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
     dependencies:
@@ -5421,6 +5645,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /require-from-string/2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /requires-port/1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
     dev: true
@@ -5685,6 +5914,15 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /slice-ansi/4.0.0:
+    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+    dev: true
+
   /sonic-boom/2.8.0:
     resolution: {integrity: sha512-kuonw1YOYYNOve5iHdSahXPOK49GqwA+LZhI6Wz/l0rP57iKyXXIHaRagOBHAPmGwJC6od2Z9zgvZ5loSgMlVg==}
     dependencies:
@@ -5769,6 +6007,10 @@ packages:
     engines: {node: '>= 10.x'}
     dev: true
 
+  /sprintf-js/1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+    dev: true
+
   /sshpk/1.16.1:
     resolution: {integrity: sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==}
     engines: {node: '>=0.10.0'}
@@ -5992,6 +6234,17 @@ packages:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
     dev: true
 
+  /table/6.8.1:
+    resolution: {integrity: sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==}
+    engines: {node: '>=10.0.0'}
+    dependencies:
+      ajv: 8.11.2
+      lodash.truncate: 4.4.2
+      slice-ansi: 4.0.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+    dev: true
+
   /tar-stream/2.2.0:
     resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
     engines: {node: '>=6'}
@@ -6129,6 +6382,30 @@ packages:
     resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
     dev: true
 
+  /tslint/6.1.3_typescript@4.8.2:
+    resolution: {integrity: sha512-IbR4nkT96EQOvKE2PW/djGz8iGNeJ4rF2mBfiYaR/nvUWYKJhLwimoJKgjIFEIDibBtOevj7BqCRL4oHeWWUCg==}
+    engines: {node: '>=4.8.0'}
+    deprecated: TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint/issues/4534 for more information.
+    hasBin: true
+    peerDependencies:
+      typescript: '>=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >=3.0.0-dev || >= 3.1.0-dev || >= 3.2.0-dev || >= 4.0.0-dev'
+    dependencies:
+      '@babel/code-frame': 7.14.5
+      builtin-modules: 1.1.1
+      chalk: 2.4.2
+      commander: 2.20.3
+      diff: 4.0.2
+      glob: 7.2.0
+      js-yaml: 3.14.1
+      minimatch: 3.1.2
+      mkdirp: 0.5.5
+      resolve: 1.22.1
+      semver: 5.7.1
+      tslib: 1.14.1
+      tsutils: 2.29.0_typescript@4.8.2
+      typescript: 4.8.2
+    dev: true
+
   /tsup/5.12.9_typescript@4.8.2:
     resolution: {integrity: sha512-dUpuouWZYe40lLufo64qEhDpIDsWhRbr2expv5dHEMjwqeKJS2aXA/FPqs1dxO4T6mBojo7rvo3jP9NNzaKyDg==}
     hasBin: true
@@ -6164,6 +6441,15 @@ packages:
       - ts-node
     dev: true
 
+  /tsutils/2.29.0_typescript@4.8.2:
+    resolution: {integrity: sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==}
+    peerDependencies:
+      typescript: '>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >= 3.0.0-dev || >= 3.1.0-dev'
+    dependencies:
+      tslib: 1.14.1
+      typescript: 4.8.2
+    dev: true
+
   /tsutils/3.21.0_typescript@4.8.2:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -6609,6 +6895,54 @@ packages:
       - supports-color
     dev: true
 
+  /vls/0.8.2:
+    resolution: {integrity: sha512-esrJmf7yRY5rlG7d5Jmucp7P2ZeWHOi7p1aADwxbPiN69SgNUq1Tp24YJ0vUXiEU8mgOW0tf0dL4f6LlSu6K/g==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      eslint: 7.32.0
+      eslint-plugin-vue: 7.20.0_eslint@7.32.0
+      prettier: 2.8.0
+      pug-lexer: 5.0.1
+      tslint: 6.1.3_typescript@4.8.2
+      typescript: 4.8.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /vscode-html-languageservice/5.0.3:
+    resolution: {integrity: sha512-6rfrtcHhXDMXmC5pR2WXrx02HiNCzQDynOBMn+53zLxr2hvZrDzoc0QgC0FaFGfcglf7GeOsfhkWvJBFC/a70g==}
+    dependencies:
+      '@vscode/l10n': 0.0.10
+      vscode-languageserver-textdocument: 1.0.7
+      vscode-languageserver-types: 3.17.2
+      vscode-uri: 3.0.6
+    dev: true
+
+  /vscode-jsonrpc/8.0.2:
+    resolution: {integrity: sha512-RY7HwI/ydoC1Wwg4gJ3y6LpU9FJRZAUnTYMXthqhFXXu77ErDd/xkREpGuk4MyYkk4a+XDWAMqe0S3KkelYQEQ==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
+  /vscode-languageserver-protocol/3.17.2:
+    resolution: {integrity: sha512-8kYisQ3z/SQ2kyjlNeQxbkkTNmVFoQCqkmGrzLH6A9ecPlgTbp3wDTnUNqaUxYr4vlAcloxx8zwy7G5WdguYNg==}
+    dependencies:
+      vscode-jsonrpc: 8.0.2
+      vscode-languageserver-types: 3.17.2
+    dev: true
+
+  /vscode-languageserver-textdocument/1.0.7:
+    resolution: {integrity: sha512-bFJH7UQxlXT8kKeyiyu41r22jCZXG8kuuVVA33OEJn1diWOZK5n8zBSPZFHVBOu8kXZ6h0LIRhf5UnCo61J4Hg==}
+    dev: true
+
+  /vscode-languageserver-types/3.17.2:
+    resolution: {integrity: sha512-zHhCWatviizPIq9B7Vh9uvrH6x3sK8itC84HkamnBWoDFJtzBf7SWlpLCZUit72b3os45h6RWQNC9xHRDF8dRA==}
+    dev: true
+
+  /vscode-uri/3.0.6:
+    resolution: {integrity: sha512-fmL7V1eiDBFRRnu+gfRWTzyPpNIHJTc4mWnFkwBUmO9U3KPgJAmTx7oxi2bl/Rh6HLdU7+4C9wlj0k2E4AdKFQ==}
+    dev: true
+
   /vue-demi/0.12.5_vue@3.2.38:
     resolution: {integrity: sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==}
     engines: {node: '>=12'}
@@ -6624,6 +6958,24 @@ packages:
       vue: 3.2.38
     dev: true
 
+  /vue-eslint-parser/7.11.0_eslint@7.32.0:
+    resolution: {integrity: sha512-qh3VhDLeh773wjgNTl7ss0VejY9bMMa0GoDG2fQVyDzRFdiU3L7fw74tWZDHNQXdZqxO3EveQroa9ct39D2nqg==}
+    engines: {node: '>=8.10'}
+    peerDependencies:
+      eslint: '>=5.0.0'
+    dependencies:
+      debug: 4.3.4
+      eslint: 7.32.0
+      eslint-scope: 5.1.1
+      eslint-visitor-keys: 1.3.0
+      espree: 6.2.1
+      esquery: 1.4.0
+      lodash: 4.17.21
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /vue-eslint-parser/8.3.0_eslint@8.23.0:
     resolution: {integrity: sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
diff --git a/src/background/apis/history.ts b/src/background/apis/history.ts
index a4795039..ed254cf8 100644
--- a/src/background/apis/history.ts
+++ b/src/background/apis/history.ts
@@ -4,7 +4,7 @@ import { API_URL } from '.'
 export const setupHistoryAPIs = () => {
   browser.runtime.onMessage.addListener((message) => {
     if (message.contentScriptQuery === 'getHistoryList') {
-      const url = `https://${API_URL}/x/web-interface/history/cursor`
+      const url = `${API_URL}/x/web-interface/history/cursor?ps=20&type=${message.type}&view_at=${message.viewAt}`
       return fetch(url)
         .then(response => response.json())
         .then(data => (data))
diff --git a/src/background/apis/index.ts b/src/background/apis/index.ts
index 4a44ad24..115307b1 100644
--- a/src/background/apis/index.ts
+++ b/src/background/apis/index.ts
@@ -4,6 +4,7 @@ import { setupUserAPIs } from './user'
 import { setupSearchAPIs } from './search'
 import { setupNotificationsAPIs } from './notifications'
 import { setupMomentsAPIs } from './moments'
+import { setupHistoryAPIs } from './history'
 
 export const APP_URL = 'https://app.bilibili.com'
 export const API_URL = 'https://api.bilibili.com'
@@ -15,4 +16,5 @@ export const setupAllAPIs = () => {
   setupSearchAPIs()
   setupNotificationsAPIs()
   setupMomentsAPIs()
+  setupHistoryAPIs()
 }
diff --git a/src/components/Progress.vue b/src/components/Progress.vue
new file mode 100644
index 00000000..65d6fe56
--- /dev/null
+++ b/src/components/Progress.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  percentage: number
+}>()
+</script>
+
+<template>
+  <div
+    bg="$bew-theme-color"
+    h="6px"
+    border="rounded-$bew-radius"
+    :style="{ width: `${percentage}%` }"
+  />
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/Topbar/HistoryDropdown.vue b/src/components/Topbar/HistoryDropdown.vue
index 224e0605..2629117c 100644
--- a/src/components/Topbar/HistoryDropdown.vue
+++ b/src/components/Topbar/HistoryDropdown.vue
@@ -1,299 +1,161 @@
-<script lang="ts">
-import { isNewArticle, isNewVideo, setLastestOffsetID } from './notify'
-import { language } from '~/logic'
-import { calcTimeSince, getUserID } from '~/utils'
-import type { MomentItem } from '~/types'
-import { LanguageType, MomentType } from '~/types'
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { Ref } from 'vue'
+import { onMounted, reactive, ref, watch } from 'vue'
+import { useDateFormat } from '@vueuse/core'
+import type { HistoryItem } from './types'
+import { HistoryType } from './types'
+import { calcCurrentTime } from '~/utils'
+const { t } = useI18n()
 
-export default defineComponent({
-  data() {
-    return {
-      moments: [] as MomentItem[],
-      calcTimeSince,
-      MomentType,
-      momentTabs: [
-        {
-          id: 0,
-          name: this.$t('topbar.moments_dropdown.tabs.videos'),
-          isSelected: true,
-        },
-        {
-          id: 1,
-          name: this.$t('topbar.moments_dropdown.tabs.live'),
-          isSelected: false,
-        },
-        {
-          id: 2,
-          name: this.$t('topbar.moments_dropdown.tabs.articles'),
-          isSelected: false,
-        },
-      ],
-      selectedTab: 0,
-      isLoading: false,
-      // when noMoreContent is true, the user can't scroll down to load more content
-      noMoreContent: false,
-      livePage: 1,
-      LanguageType,
-      language,
-    }
+const historys = reactive<Array<HistoryItem>>([])
+const historyTabs = reactive([
+  {
+    id: 0,
+    name: t('topbar.moments_dropdown.tabs.videos'),
+    isSelected: true,
   },
-  watch: {
-    selectedTab(newVal: number, oldVal: number) {
-      if (newVal === oldVal)
-        return
-
-      this.scrollToTop(this.$refs.momentsWrap as HTMLElement, 300)
-      this.moments = []
-      if (newVal === 0) {
-        this.getNewMoments([MomentType.Video, MomentType.Bangumi])
-      }
-      else if (newVal === 1) {
-        this.livePage = 1
-        this.getLiveMoments(this.livePage)
-      }
-      else if (newVal === 2) {
-        this.getNewMoments([MomentType.Article])
-      }
-    },
+  {
+    id: 1,
+    name: t('topbar.moments_dropdown.tabs.live'),
+    isSelected: false,
   },
-  mounted() {
-    this.getNewMoments([MomentType.Video, MomentType.Bangumi])
+  {
+    id: 2,
+    name: t('topbar.moments_dropdown.tabs.articles'),
+    isSelected: false,
+  },
+])
+const selectedTab = ref<number>(0)
+const isLoading = ref<boolean>(false)
+// when noMoreContent is true, the user can't scroll down to load more content
+const noMoreContent = ref<boolean>(false)
+const livePage = ref<number>(1)
+const historysWrap = ref<HTMLElement>() as Ref<HTMLElement>
 
-    const momentsWrap = this.$refs.momentsWrap as HTMLDivElement
-    momentsWrap.addEventListener('scroll', () => {
+watch(selectedTab, (newVal: number, oldVal: number) => {
+  if (newVal === oldVal)
+    return
+
+  historys.length = 0
+  if (historysWrap.value)
+    scrollToTop(historysWrap.value, 300)
+
+  if (newVal === 0) {
+    getHistoryList(HistoryType.Archive)
+  }
+  else if (newVal === 1) {
+    livePage.value = 1
+    getHistoryList(HistoryType.Live)
+  }
+  else if (newVal === 2) {
+    getHistoryList(HistoryType.Article)
+  }
+})
+
+onMounted(() => {
+  getHistoryList(HistoryType.Archive)
+
+  if (historysWrap.value) {
+    historysWrap.value.addEventListener('scroll', () => {
+      // When you scroll to the bottom, they will automatically
+      // add the next page of data to the history list
       if (
-        momentsWrap.clientHeight + momentsWrap.scrollTop
-          >= momentsWrap.scrollHeight
-        && this.moments.length > 0
-        && !this.isLoading
+        historysWrap.value.clientHeight + historysWrap.value.scrollTop
+          >= historysWrap.value.scrollHeight - 20
+        && historys.length > 0
+        && !isLoading.value
       ) {
-        if (this.selectedTab === 0 && !this.noMoreContent)
-          this.getHistoryMoments([MomentType.Video, MomentType.Bangumi])
-        else if (this.selectedTab === 1 && !this.noMoreContent)
-          this.getLiveMoments(this.livePage)
-        else if (this.selectedTab === 2 && !this.noMoreContent)
-          this.getHistoryMoments([MomentType.Article])
+        if (selectedTab.value === 0 && !noMoreContent.value) {
+          getHistoryList(
+            HistoryType.Archive,
+            historys[historys.length - 1].view_at,
+          )
+        }
+        else if (selectedTab.value === 1 && !noMoreContent.value) {
+          getHistoryList(
+            HistoryType.Live,
+            historys[historys.length - 1].view_at,
+          )
+        }
+        else if (selectedTab.value === 2 && !noMoreContent.value) {
+          getHistoryList(
+            HistoryType.Article,
+            historys[historys.length - 1].view_at,
+          )
+        }
       }
     })
-  },
-  methods: {
-    onClickTab(tabId: number) {
-      // Prevent changing tab when loading, cuz it will cause a bug
-      if (this.isLoading)
-        return
-
-      this.selectedTab = tabId
-      this.momentTabs.forEach((tab) => {
-        tab.isSelected = tab.id === tabId
-      })
-    },
-    getHistoryList() {
-      this.isLoading = true
-      browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'getHistoryList',
-          // uid: getUserID(),
-          // typeList,
-        })
-        .then((res) => {
-          if (res.code === 0) {
-            if (this.moments.length !== 0 && res.data.cards.length < 20) {
-              this.isLoading = false
-              this.noMoreContent = true
-              return
-            }
-
-            res.data.cards.forEach((item: any) => {
-              this.pushItemIntoMoments(item)
-            })
-
-            // set this lastest offset id, which will clear the new moment's marker point
-            // after you watch these moments.
-            if (this.selectedTab === 0)
-              setLastestOffsetID(MomentType.Video, this.moments[0].id)
-            else if (this.selectedTab === 2)
-              setLastestOffsetID(MomentType.Article, this.moments[0].id)
-
-            this.noMoreContent = false
-          }
-          this.isLoading = false
-        })
-    },
-
-    getNewMoments(typeList: number[]) {
-      this.isLoading = true
-      browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'getNewMoments',
-          uid: getUserID(),
-          typeList,
-        })
-        .then((res) => {
-          if (res.code === 0) {
-            if (this.moments.length !== 0 && res.data.cards.length < 20) {
-              this.isLoading = false
-              this.noMoreContent = true
-              return
-            }
-
-            res.data.cards.forEach((item: any) => {
-              this.pushItemIntoMoments(item)
-            })
-
-            // set this lastest offset id, which will clear the new moment's marker point
-            // after you watch these moments.
-            if (this.selectedTab === 0)
-              setLastestOffsetID(MomentType.Video, this.moments[0].id)
-            else if (this.selectedTab === 2)
-              setLastestOffsetID(MomentType.Article, this.moments[0].id)
-
-            this.noMoreContent = false
-          }
-          this.isLoading = false
-        })
-    },
-    getHistoryMoments(typeList: number[]) {
-      this.isLoading = true
-      browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'getHistoryMoments',
-          uid: getUserID(),
-          typeList,
-          offsetDynamicID: this.moments[this.moments.length - 1].dynamic_id_str,
-        })
-        .then((res) => {
-          if (res.code === 0) {
-            if (res.data.has_more === 0) {
-              this.isLoading = false
-              this.noMoreContent = true
-              return
-            }
-
-            res.data.cards.forEach((item: any) => {
-              this.pushItemIntoMoments(item)
-            })
-            this.noMoreContent = false
-          }
-          this.isLoading = false
-        })
-    },
-    getLiveMoments(page: number) {
-      this.isLoading = true
-      browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'getLiveMoments',
-          page,
-          pageSize: 10,
-        })
-        .then((res) => {
-          if (res.code === 0) {
-            // if the length of this list is less then the pageSize, it means that it have no more contents
-            if (this.moments.length !== 0 && res.data.list.length < 10) {
-              this.isLoading = false
-              this.noMoreContent = true
-              return
-            }
-
-            // if the length of this list is equal to the pageSize, this means that it may have the next page.
-            if (res.data.list.length === 10)
-              this.livePage++
-            res.data.list.forEach((item: any) => {
-              this.moments.push({
-                id: item.roomid,
-                uid: item.uid,
-                name: item.uname,
-                face: item.face,
-                url: item.link,
-                title: item.title,
-                cover: item.pic,
-              } as MomentItem)
-            })
-            this.noMoreContent = false
-          }
-          this.isLoading = false
-        })
-    },
-    pushItemIntoMoments(item: any) {
-      const card = JSON.parse(item.card)
-
-      if (item.desc.type === MomentType.Video) {
-        // if this is a video moment
-        this.moments.push({
-          type: item.desc.type,
-          id: item.desc.dynamic_id,
-          uid: item.desc.uid,
-          name: item.desc.user_profile.info.uname,
-          face: item.desc.user_profile.info.face,
-          aid: card.aid,
-          bvid: item.desc.bvid,
-          url: card.short_link_v2,
-          ctime: card.ctime,
-          title: card.title,
-          cover: card.pic,
-          dynamic_id_str: item.desc.dynamic_id_str,
-          isNew: isNewVideo(item.desc.dynamic_id),
-        } as MomentItem)
-      }
-      else if (item.desc.type === MomentType.Bangumi) {
-        // bangumi moment
-        this.moments.push({
-          type: item.desc.type,
-          id: item.desc.dynamic_id,
-          name: card.apiSeasonInfo.title,
-          face: card.apiSeasonInfo.cover,
-          episode_id: card.episode_id,
-          url: card.url,
-          title: card.new_desc,
-          cover: card.cover,
-          dynamic_id_str: item.desc.dynamic_id_str,
-          isNew: isNewVideo(item.desc.dynamic_id),
-        } as MomentItem)
-      }
-      else if (item.desc.type === MomentType.Article) {
-        // article moment
-        this.moments.push({
-          type: item.desc.type,
-          id: item.desc.dynamic_id,
-          uid: item.desc.uid,
-          name: item.desc.user_profile.info.uname,
-          face: item.desc.user_profile.info.face,
-          url: `https://www.bilibili.com/read/cv${card.id}`,
-          ctime: card.publish_time,
-          title: card.title,
-          cover: card.image_urls[0],
-          dynamic_id_str: item.desc.dynamic_id_str,
-          isNew: isNewArticle(item.desc.dynamic_id),
-        } as MomentItem)
-      }
-    },
-    /**
-     * smooth scroll to the top of the html element
-     */
-    scrollToTop(element: HTMLElement, duration: number) {
-      // cancel if already on top
-      if (element.scrollTop === 0)
-        return
-
-      const cosParameter = element.scrollTop / 2
-      let scrollCount = 0
-      let oldTimestamp = 0
-
-      function step(newTimestamp: number) {
-        if (oldTimestamp !== 0) {
-          // if duration is 0 scrollCount will be Infinity
-          scrollCount += (Math.PI * (newTimestamp - oldTimestamp)) / duration
-          if (scrollCount >= Math.PI)
-            return (element.scrollTop = 0)
-          element.scrollTop
-            = cosParameter + cosParameter * Math.cos(scrollCount)
-        }
-        oldTimestamp = newTimestamp
-        window.requestAnimationFrame(step)
-      }
-      window.requestAnimationFrame(step)
-    },
-  },
+  }
 })
+
+function onClickTab(tabId: number) {
+  // Prevent changing tab when loading, cuz it will cause a bug
+  if (isLoading.value)
+    return
+
+  selectedTab.value = tabId
+  historyTabs.forEach((tab) => {
+    tab.isSelected = tab.id === tabId
+  })
+}
+
+/**
+ * Get history list
+ * @param {HistoryType} type
+ * @param {number} viewAt Last viewed timestamp
+ */
+function getHistoryList(type: HistoryType, viewAt = 0 as number) {
+  isLoading.value = true
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getHistoryList',
+      type,
+      viewAt,
+    })
+    .then((res) => {
+      if (res.code === 0) {
+        if (historys.length !== 0 && res.data.list.length < 20) {
+          isLoading.value = false
+          noMoreContent.value = true
+          return
+        }
+
+        res.data.list.forEach((item: HistoryItem) => {
+          historys.push(item)
+        })
+
+        noMoreContent.value = false
+      }
+      isLoading.value = false
+    })
+}
+
+/**
+ * smooth scroll to the top of the html element
+ */
+function scrollToTop(element: HTMLElement, duration: number) {
+  // cancel if already on top
+  if (element.scrollTop === 0)
+    return
+
+  const cosParameter = element.scrollTop / 2
+  let scrollCount = 0
+  let oldTimestamp = 0
+
+  function step(newTimestamp: number) {
+    if (oldTimestamp !== 0) {
+      // if duration is 0 scrollCount will be Infinity
+      scrollCount += (Math.PI * (newTimestamp - oldTimestamp)) / duration
+      if (scrollCount >= Math.PI)
+        return (element.scrollTop = 0)
+      element.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount)
+    }
+    oldTimestamp = newTimestamp
+    window.requestAnimationFrame(step)
+  }
+  window.requestAnimationFrame(step)
+}
 </script>
 
 <template>
@@ -303,6 +165,7 @@ export default defineComponent({
     rounded="$bew-radius"
     pos="relative"
     style="box-shadow: var(--bew-shadow-2)"
+    overflow="hidden"
   >
     <!-- top bar -->
     <div
@@ -312,13 +175,13 @@ export default defineComponent({
       pos="fixed top-0 left-0"
       w="full"
       bg="$bew-content-1"
-      z="1"
+      z="2"
       border="!rounded-t-$bew-radius"
       style="backdrop-filter: var(--bew-filter-glass)"
     >
       <div flex="~">
         <div
-          v-for="tab in momentTabs"
+          v-for="tab in historyTabs"
           :key="tab.id"
           m="r-4"
           transition="all duration-300"
@@ -335,110 +198,156 @@ export default defineComponent({
       </a>
     </div>
 
-    <!-- moments wrapper -->
-    <div ref="momentsWrap" h="430px" overflow="y-scroll" p="x-4">
+    <!-- historys wrapper -->
+    <div
+      ref="historysWrap"
+      flex="~ col gap-4"
+      h="430px"
+      overflow="y-scroll"
+      p="x-4"
+    >
       <!-- loading -->
-      <loading
-        v-if="isLoading && moments.length === 0"
+      <Loading
+        v-if="isLoading && historys.length === 0"
+        pos="absolute left-0"
+        bg="$bew-content-1"
+        z="1"
+        w="full"
         h="full"
         flex="~"
         items="center"
       />
 
       <!-- empty -->
-      <empty v-if="!isLoading && moments.length === 0" w="full" h="full" />
+      <Empty v-if="!isLoading && historys.length === 0" w="full" h="full" />
 
-      <!-- moments -->
+      <!-- historys -->
       <transition-group name="list">
         <a
-          v-for="(moment, index) in moments"
-          :key="index"
-          :href="moment.url"
+          v-for="historyItem in historys"
+          :key="historyItem.kid"
+          :href="
+            historyItem.history.bvid
+              ? historyItem.history.bvid
+              : `/read/cv${historyItem.history.oid}`
+          "
           target="_blank"
-          flex="~"
-          justify="between"
-          m="b-4"
-          first:m="t-16"
-          p="2"
-          rounded="$bew-radius"
           hover:bg="$bew-fill-2"
-          transition="all duration-300"
-          cursor="pointer"
-          pos="relative"
+          border="rounded-$bew-radius"
+          p="2"
+          m="first:t-50px last:b-4"
+          class="group"
+          transition="duration"
         >
-          <!-- new moment dot -->
-          <div
-            v-if="moment.isNew"
-            rounded="full"
-            w="8px"
-            h="8px"
-            m="t-2 l-2"
-            bg="$bew-theme-color"
-            pos="absolute -top-10px -left-10px"
-            style="box-shadow: 0 0 4px var(--bew-theme-color)"
-          />
-
-          <a
-            :href="
-              moment.type === MomentType.Video
-                ? `https://space.bilibili.com/${moment.uid}`
-                : moment.url
-            "
-            target="_blank"
-          >
-            <img
-              :src="`${moment.face}@60w_60h_1c`"
-              rounded="$bew-radius"
-              w="40px"
-              h="40px"
-              m="r-4"
+          <section flex="~ gap-4" align="item-start">
+            <!-- Video cover, live cover, ariticle cover -->
+            <div
+              bg="$bew-fill-1"
+              w="150px"
+              flex="shrink-0"
+              border="rounded-$bew-radius-half"
+              overflow="hidden"
             >
-          </a>
+              <!-- Video -->
+              <template v-if="selectedTab === 0">
+                <div pos="relative">
+                  <img
+                    w="150px"
+                    class="aspect-video"
+                    :src="`${historyItem.cover}@256w_144h_1c`"
+                    :alt="historyItem.title"
+                    bg="contain"
+                  >
+                  <div
+                    pos="absolute bottom-0 right-0"
+                    bg="black opacity-60"
+                    m="1"
+                    p="x-2 y-1"
+                    text="white xs"
+                    border="rounded-full"
+                    opacity="0"
+                    group-hover:opacity="100"
+                  >
+                    {{
+                      `${calcCurrentTime(historyItem.progress)} /
+                    ${calcCurrentTime(historyItem.duration)}`
+                    }}
+                  </div>
+                </div>
+                <Progress
+                  :percentage="
+                    (historyItem.progress / historyItem.duration) * 100
+                  "
+                />
+              </template>
 
-          <div flex="~" justify="between" w="full">
-            <div>
-              <span>{{ moment.name }}</span>
-              {{ $t('topbar.moments_dropdown.uploaded') }}{{ moment.title }}
-              <div
-                v-if="moment.type !== MomentType.Bangumi"
-                text="$bew-text-2 sm"
-                m="y-2"
-              >
-                <!-- Videos and articles -->
-                <div v-if="selectedTab === 0 || selectedTab === 2">
-                  {{ calcTimeSince(new Date(moment.ctime * 1000))
-                  }}{{
-                    language === LanguageType.English
-                      ? ` ${$t('common.ago')}`
-                      : $t('common.ago')
-                  }}
+              <!-- Live -->
+              <template v-else-if="selectedTab === 1">
+                <div pos="relative">
+                  <img
+                    w="150px"
+                    class="aspect-video"
+                    :src="`${historyItem.cover}@256w_144h_1c`"
+                    :alt="historyItem.title"
+                    bg="contain"
+                  >
                 </div>
-                <!-- Live -->
-                <div
-                  v-else-if="selectedTab === 1"
-                  text="$bew-theme-color"
-                  font="bold"
-                  flex="~"
-                  items="center"
+              </template>
+
+              <!-- Article -->
+              <div v-else-if="selectedTab === 2">
+                <img
+                  w="150px"
+                  class="aspect-video"
+                  :src="`${
+                    Array.isArray(historyItem.covers)
+                      ? historyItem.covers[0]
+                      : ''
+                  }@256w_144h_1c`"
+                  :alt="historyItem.title"
+                  bg="contain"
                 >
-                  <fluent:live-24-filled m="r-2" />
-                  {{ $t('topbar.moments_dropdown.live_status') }}
-                </div>
               </div>
             </div>
-            <img
-              :src="`${moment.cover}@128w_72h_1c`"
-              w="82px"
-              h="46px"
-              m="l-4"
-              rounded="$bew-radius"
-            >
-          </div>
+
+            <!-- Description -->
+            <div>
+              <h3
+                style="
+                  -webkit-line-clamp: 2;
+                  -webkit-box-orient: vertical;
+                  display: -webkit-box;
+                "
+                overflow="hidden"
+                text="overflow-ellipsis"
+              >
+                {{ historyItem.title }}
+              </h3>
+              <div text="$bew-text-2 sm" m="t-4" flex="~" align="items-center">
+                {{ historyItem.author_name }}
+                <span
+                  v-if="historyItem.live_status === 1"
+                  text="$bew-theme-color"
+                  m="l-2"
+                ><tabler:live-photo />
+                  Live
+                </span>
+              </div>
+              <p text="$bew-text-2 sm">
+                {{
+                  useDateFormat(
+                    historyItem.view_at * 1000,
+                    'YYYY-MM-DD HH:mm:ss',
+                  ).value
+                }}
+              </p>
+            </div>
+          </section>
         </a>
       </transition-group>
 
       <!-- loading -->
-      <loading v-if="isLoading && moments.length !== 0" m="-t-4" />
+      <loading v-if="isLoading && historys.length !== 0" m="-t-4" />
     </div>
   </div>
 </template>
diff --git a/src/components/Topbar/MomentsDropdown.vue b/src/components/Topbar/MomentsDropdown.vue
index 590bd5e4..deaceff6 100644
--- a/src/components/Topbar/MomentsDropdown.vue
+++ b/src/components/Topbar/MomentsDropdown.vue
@@ -3,10 +3,11 @@ import { useI18n } from 'vue-i18n'
 import type { Ref, UnwrapNestedRefs } from 'vue'
 import { onMounted, reactive, ref, watch } from 'vue'
 import { isNewArticle, isNewVideo, setLastestOffsetID } from './notify'
+import { MomentType } from './types'
+import type { MomentItem } from './types'
 import { language } from '~/logic'
 import { calcTimeSince, getUserID } from '~/utils'
-import type { MomentItem } from '~/types'
-import { LanguageType, MomentType } from '~/types'
+import { LanguageType } from '~/enums/appEnums'
 const { t } = useI18n()
 
 const moments = reactive<Array<MomentItem>>([]) as UnwrapNestedRefs<
diff --git a/src/components/Topbar/index.vue b/src/components/Topbar/index.vue
index c2ce8cf5..a899061d 100644
--- a/src/components/Topbar/index.vue
+++ b/src/components/Topbar/index.vue
@@ -5,7 +5,7 @@ import { updateInterval } from './notify'
 import { getUserID } from '~/utils'
 
 export default defineComponent({
-  components: { MomentsDropdown },
+  components: { MomentsDropdown, HistoryDropdown },
   data() {
     return {
       mid: getUserID() || '',
@@ -16,7 +16,7 @@ export default defineComponent({
       showNotificationsDropDown: false,
       showMomentsDropDown: false,
       showUploadDropDown: false,
-      showHistoryDropDown: false,
+      showHistoryDropDown: true,
       isLogin: !!getUserID(),
       unReadmessage: {},
       unReadDm: {},
@@ -36,7 +36,8 @@ export default defineComponent({
     this.initUserPanel()
 
     document.addEventListener('scroll', () => {
-      if (window.scrollY > 0) this.showTopbarMask = true
+      if (window.scrollY > 0)
+        this.showTopbarMask = true
       else this.showTopbarMask = false
     })
   },
@@ -82,34 +83,38 @@ export default defineComponent({
           contentScriptQuery: 'getUserInfo',
         })
         .then((res) => {
-          if (res.code === 0) this.userInfo = res.data
+          if (res.code === 0)
+            this.userInfo = res.data
         })
     },
     async getUnreadMessageCount() {
-      if (!this.isLogin) return
+      if (!this.isLogin)
+        return
 
       await browser.runtime
         .sendMessage({
           contentScriptQuery: 'getUnreadMsg',
         })
-        .then((res) => (this.unReadmessage = res.data))
+        .then(res => (this.unReadmessage = res.data))
 
       await browser.runtime
         .sendMessage({
           contentScriptQuery: 'getUnreadDm',
         })
-        .then((res) => (this.unReadDm = res.data))
+        .then(res => (this.unReadDm = res.data))
 
       this.unReadmessageCount = 0
       for (const [key, value] of Object.entries(this.unReadmessage)) {
-        if (key !== 'up') this.unReadmessageCount += parseInt(`${value}`)
+        if (key !== 'up')
+          this.unReadmessageCount += parseInt(`${value}`)
       }
 
       for (const [, value] of Object.entries(this.unReadDm))
         this.unReadmessageCount += parseInt(`${value}`)
     },
     getNewMomentsCount() {
-      if (!this.isLogin) return
+      if (!this.isLogin)
+        return
 
       browser.runtime
         .sendMessage({
@@ -220,7 +225,7 @@ export default defineComponent({
             :style="{
               backgroundImage: `url(${`${userInfo.face}`.replace(
                 'http:',
-                ''
+                '',
               )})`,
             }"
           />
@@ -232,7 +237,7 @@ export default defineComponent({
             :style="{
               backgroundImage: `url(${`${userInfo.face}`.replace(
                 'http:',
-                ''
+                '',
               )})`,
             }"
           />
@@ -310,7 +315,7 @@ export default defineComponent({
         <div
           class="right-side-item"
           @mouseenter="showHistoryDropDown = true"
-          @mouseleave="showHistoryDropDown = false"
+          @mouseleave="showHistoryDropDown = true"
         >
           <a
             href="https://www.bilibili.com/account/history"
diff --git a/src/components/Topbar/notify.ts b/src/components/Topbar/notify.ts
index f9be49e2..4afc45e3 100644
--- a/src/components/Topbar/notify.ts
+++ b/src/components/Topbar/notify.ts
@@ -1,5 +1,5 @@
-import { MomentType } from '~/types'
-import { getUserID, getCookie, setCookie } from '~/utils'
+import { MomentType } from './types'
+import { getCookie, getUserID, setCookie } from '~/utils'
 
 /** Update the time interval of topbar notifications and moments counts */
 export const updateInterval = 1000 * 60 * 5 // Updated every 5 minutes
diff --git a/src/components/Topbar/types.ts b/src/components/Topbar/types.ts
new file mode 100644
index 00000000..8bd91b7f
--- /dev/null
+++ b/src/components/Topbar/types.ts
@@ -0,0 +1,57 @@
+export enum MomentType {
+  Video = 8,
+  Article = 64,
+  Bangumi = 512,
+  PGC = 4097,
+  Movie = 4098,
+  TvShow = 4099,
+  ChineseAnime = 4100,
+  Documentary = 4101,
+}
+
+export interface MomentItem {
+  type?: MomentType
+  id: number
+  uid: number
+  name: string
+  face: string
+  aid?: number
+  bvid?: string
+  episode_id?: number
+  url: string
+  ctime?: number
+  title: string
+  cover: string
+  dynamic_id_str?: string
+  isNew: boolean
+}
+
+// https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/history&toview/history.md#%E8%8E%B7%E5%8F%96%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%E5%88%97%E8%A1%A8_web%E7%AB%AF
+export enum HistoryType {
+  Archive = 'archive', // archive：稿件
+  PGC = 'pgc', // pgc：剧集 (番剧 / 影视)
+  Live = 'live', // live：直播
+  ArticleList = 'article-list', // article-list：文集
+  Article = 'article', // article：文章
+}
+
+export interface HistoryItem {
+  title: string
+  cover: string
+  covers: Array<string> | null
+  history: {
+    business: HistoryType
+    epid?: number
+    bvid?: string
+    part?: string
+    oid: number
+  }
+  author_name: string
+  author_face: string
+  author_mid: string
+  view_at: number
+  progress: number
+  duration: number
+  kid: number
+  live_status: 0 | 1 // 0：未开播 1：已开播
+}
diff --git a/src/contentScripts/views/Home/RecommendContent.vue b/src/contentScripts/views/Home/RecommendContent.vue
index 7ed6fb57..82d57996 100644
--- a/src/contentScripts/views/Home/RecommendContent.vue
+++ b/src/contentScripts/views/Home/RecommendContent.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { accessKey, language } from '~/logic/index'
 import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils'
-import { LanguageType } from '~/types'
+import { LanguageType } from '~/enums/appEnums'
 
 export default defineComponent({
   data() {
@@ -25,13 +25,17 @@ export default defineComponent({
     }, 2000)
 
     window.onscroll = async () => {
-      if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
+      if (window.innerHeight + window.scrollY >= document.body.scrollHeight) {
         if (!this.isLoading)
           return
 
-        if (this.videoList.length <= (this.MAX_LIMIT - 20)) {
-          await this.getRecommendVideos(this.videoList[this.videoList.length - 1]?.idx)
-          await this.getRecommendVideos(this.videoList[this.videoList.length - 1]?.idx)
+        if (this.videoList.length <= this.MAX_LIMIT - 20) {
+          await this.getRecommendVideos(
+            this.videoList[this.videoList.length - 1]?.idx,
+          )
+          await this.getRecommendVideos(
+            this.videoList[this.videoList.length - 1]?.idx,
+          )
         }
         else {
           this.isLoading = false
@@ -41,12 +45,11 @@ export default defineComponent({
   },
   methods: {
     async getRecommendVideos(idx?: number) {
-      const response = await browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'getRecommendVideos',
-          idx,
-          accessKey: this.accessKey,
-        })
+      const response = await browser.runtime.sendMessage({
+        contentScriptQuery: 'getRecommendVideos',
+        idx,
+        accessKey: this.accessKey,
+      })
 
       if (response.code === 0) {
         const resData = [] as any[]
@@ -72,7 +75,15 @@ export default defineComponent({
     gotoVideo(uri: string) {
       window.open(`/video/av${uri.split('/')[3]}`)
     },
-    submitDislike(videoIndex: number, reasonID: number, goto: string, id: string, mid: string, rid: string, tagID: string) {
+    submitDislike(
+      videoIndex: number,
+      reasonID: number,
+      goto: string,
+      id: string,
+      mid: string,
+      rid: string,
+      tagID: string,
+    ) {
       browser.runtime
         .sendMessage({
           contentScriptQuery: 'submitDislike',
@@ -91,7 +102,15 @@ export default defineComponent({
           }
         })
     },
-    undoDislike(videoIndex: number, reasonID: number, goto: string, id: string, mid: string, rid: string, tagID: string) {
+    undoDislike(
+      videoIndex: number,
+      reasonID: number,
+      goto: string,
+      id: string,
+      mid: string,
+      rid: string,
+      tagID: string,
+    ) {
       browser.runtime
         .sendMessage({
           contentScriptQuery: 'undoDislike',
@@ -121,12 +140,14 @@ export default defineComponent({
       done()
     },
   },
-
 })
 </script>
 
 <template>
-  <div m="lg:x-22 <lg:x-16 b-0 t-0" grid="~ xl:cols-4 lg:cols-3 md:cols-2 gap-4">
+  <div
+    m="lg:x-22 <lg:x-16 b-0 t-0"
+    grid="~ xl:cols-4 lg:cols-3 md:cols-2 gap-4"
+  >
     <transition-group name="list" @enter="onEnter">
       <div
         v-for="(video, index) in videoList"
@@ -148,22 +169,24 @@ export default defineComponent({
             border="solid $bew-fill-1"
             text="$bew-text-3 sm center"
             rounded="$bew-radius"
-            style="aspect-ratio: 16/9;"
+            style="aspect-ratio: 16/9"
           >
             {{ $t('home.video_removed') }}
             <button
               text="$bew-theme-color base"
               font="bold"
               m="t-4"
-              @click="undoDislike(
-                index,
-                video.selectedReasonID,
-                video.goto,
-                video.param,
-                video.mid,
-                video.tid,
-                video.tag.tag_id,
-              )"
+              @click="
+                undoDislike(
+                  index,
+                  video.selectedReasonID,
+                  video.goto,
+                  video.param,
+                  video.mid,
+                  video.tid,
+                  video.tag.tag_id,
+                )
+              "
             >
               {{ $t('common.undo') }}
             </button>
@@ -177,16 +200,28 @@ export default defineComponent({
                 class="overflow-hidden w-full relative rounded-$bew-radius z-1"
                 style="aspect-ratio: 16/9"
               >
-                <img class="cover" :src="`${video.cover.replace('http:', '')}@672w_378h_1c`" loading="lazy">
+                <img
+                  class="cover"
+                  :src="`${video.cover.replace('http:', '')}@672w_378h_1c`"
+                  loading="lazy"
+                >
               </div>
-              <img class="cover-shadow" :src="`${video.cover.replace('http:', '')}@672w_378h_1c`" loading="lazy">
+              <img
+                class="cover-shadow"
+                :src="`${video.cover.replace('http:', '')}@672w_378h_1c`"
+                loading="lazy"
+              >
             </div>
           </a>
           <div class="detail">
             <div class="flex">
-              <a class="avatar" cursor="pointer" @click="gotoChannel(video.mid)">
+              <a
+                class="avatar"
+                cursor="pointer"
+                @click="gotoChannel(video.mid)"
+              >
                 <img
-                  :src="`${(`${video.face}`).replace('http:', '')}@60w_60h_1c`"
+                  :src="`${`${video.face}`.replace('http:', '')}@60w_60h_1c`"
                   width="48"
                   height="48"
                   loading="lazy"
@@ -232,7 +267,10 @@ export default defineComponent({
                     w="180px"
                     bg="$bew-content-1"
                     rounded="$bew-radius"
-                    style="box-shadow: var(--bew-shadow-2); backdrop-filter: var(--bew-filter-glass);"
+                    style="
+                      box-shadow: var(--bew-shadow-2);
+                      backdrop-filter: var(--bew-filter-glass);
+                    "
                   >
                     <p p="2" text="$bew-text-3">
                       {{ $t('home.not_interested_in') }}
@@ -247,13 +285,17 @@ export default defineComponent({
                         hover:bg="$bew-fill-2"
                         transition="all duration-300"
                         rounded="$bew-radius"
-                        @click.stop="submitDislike(index,
-                                                   reason.reason_id,
-                                                   video.goto,
-                                                   video.param,
-                                                   video.mid,
-                                                   video.tid,
-                                                   video.tag.tag_id)"
+                        @click.stop="
+                          submitDislike(
+                            index,
+                            reason.reason_id,
+                            video.goto,
+                            video.param,
+                            video.mid,
+                            video.tid,
+                            video.tag.tag_id,
+                          )
+                        "
                       >
                         {{ reason.reason_name }}
                       </li>
@@ -265,13 +307,19 @@ export default defineComponent({
                 {{ video.name }}
               </div>
               <div class="video-info">
-                {{ numFormatter(video.play) }}{{ language === LanguageType.English
-                  ? ` ${$t('common.view', video.play)}`
-                  : $t('common.view', video.play) }}
+                {{ numFormatter(video.play)
+                }}{{
+                  language === LanguageType.English
+                    ? ` ${$t('common.view', video.play)}`
+                    : $t('common.view', video.play)
+                }}
                 <span class="text-xs font-light">•</span>
-                {{ calcTimeSince(new Date(video.ctime * 1000)) }}{{ language === LanguageType.English
-                  ? ` ${$t('common.ago')}`
-                  : $t('common.ago') }}
+                {{ calcTimeSince(new Date(video.ctime * 1000))
+                }}{{
+                  language === LanguageType.English
+                    ? ` ${$t('common.ago')}`
+                    : $t('common.ago')
+                }}
               </div>
             </div>
           </div>
@@ -292,7 +340,7 @@ export default defineComponent({
     justify="center"
   >
     <button
-      style="box-shadow: var(--bew-shadow-1);"
+      style="box-shadow: var(--bew-shadow-1)"
       bg="!$bew-theme-color"
       w="60px"
       h="60px"
diff --git a/src/types/index.ts b/src/enums/appEnums.ts
similarity index 78%
rename from src/types/index.ts
rename to src/enums/appEnums.ts
index e8587d65..f1600538 100644
--- a/src/types/index.ts
+++ b/src/enums/appEnums.ts
@@ -1,5 +1,3 @@
-export * from './topbar/moments'
-
 export enum LanguageType {
   English = 'en',
   Mandarin_SC = 'cmn-SC',
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 38c56165..df0bf625 100755
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,11 +1,15 @@
 :root {
   --bew-radius: 12px;
+  --bew-radius-half: calc(var(--bew-radius) / 2);
 
   --bew-filter-glass: blur(20px) saturate(180%);
 
-  --bew-shadow-1: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --bew-shadow-2: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --bew-shadow-3: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --bew-shadow-1: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --bew-shadow-2: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --bew-shadow-3: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1);
   --bew-shadow-4: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 
   --bew-theme-color: rgb(0, 161, 214);
@@ -47,7 +51,7 @@
 @supports not (backdrop-filter: blur(15px)) {
   :root,
   :root.dark {
-    --bew-content-1:  var(--bew-content-solid-1);
+    --bew-content-1: var(--bew-content-solid-1);
   }
 }
 
@@ -58,6 +62,10 @@ body,
   padding: 0;
 }
 
+html {
+  filter: none !important;
+}
+
 body {
   background: var(--bew-bg);
   color: var(--bew-text-1);
diff --git a/src/types/topbar/moments.ts b/src/types/topbar/moments.ts
deleted file mode 100644
index 78ba515a..00000000
--- a/src/types/topbar/moments.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export enum MomentType {
-  Video = 8,
-  Article = 64,
-  Bangumi = 512,
-  PGC = 4097,
-  Movie = 4098,
-  TvShow = 4099,
-  ChineseAnime = 4100,
-  Documentary = 4101,
-}
-
-export interface MomentItem {
-  type?: MomentType
-  id: number
-  uid: number
-  name: string
-  face: string
-  aid?: number
-  bvid?: string
-  episode_id?: number
-  url: string
-  ctime?: number
-  title: string
-  cover: string
-  dynamic_id_str?: string
-  isNew: boolean
-}
diff --git a/src/utils/dataFormatter.ts b/src/utils/dataFormatter.ts
index 52fec3e5..ed31ed19 100644
--- a/src/utils/dataFormatter.ts
+++ b/src/utils/dataFormatter.ts
@@ -36,8 +36,8 @@ export const numFormatter = (num: number) => {
   return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol : '0'
 }
 
-export const calcTimeSince = (date: any) => {
-  const seconds = Math.floor(((new Date() as any) - date) / 1000)
+export const calcTimeSince = (date: number | string) => {
+  const seconds = Math.floor(((Number(new Date())) - Number(date)) / 1000)
   let interval = seconds / 31536000
   if (interval > 1)
     return `${Math.floor(interval)} ${t('common.year', Math.floor(interval))}`
diff --git a/volar.config.js b/volar.config.js
new file mode 100644
index 00000000..e238545f
--- /dev/null
+++ b/volar.config.js
@@ -0,0 +1,5 @@
+const vetur = require('@volar-plugins/vetur')
+
+module.exports = {
+  plugins: [vetur()],
+}

From 18adbc51491a1a304f1adfeb6b24c105618656e5 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 4 Dec 2022 18:35:55 +0800
Subject: [PATCH 6/9] feat(HistoryDropDown): live tab

---
 src/components/Topbar/HistoryDropdown.vue | 71 ++++++++++++++++++-----
 src/components/Topbar/index.vue           |  4 +-
 2 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/src/components/Topbar/HistoryDropdown.vue b/src/components/Topbar/HistoryDropdown.vue
index 2629117c..0a3fa9da 100644
--- a/src/components/Topbar/HistoryDropdown.vue
+++ b/src/components/Topbar/HistoryDropdown.vue
@@ -26,14 +26,17 @@ const historyTabs = reactive([
     isSelected: false,
   },
 ])
-const selectedTab = ref<number>(0)
+/**
+ * Active tab (0: archive, 1: live, 2: article)
+ */
+const activatedTab = ref<number>(0)
 const isLoading = ref<boolean>(false)
 // when noMoreContent is true, the user can't scroll down to load more content
 const noMoreContent = ref<boolean>(false)
 const livePage = ref<number>(1)
 const historysWrap = ref<HTMLElement>() as Ref<HTMLElement>
 
-watch(selectedTab, (newVal: number, oldVal: number) => {
+watch(activatedTab, (newVal: number, oldVal: number) => {
   if (newVal === oldVal)
     return
 
@@ -66,19 +69,19 @@ onMounted(() => {
         && historys.length > 0
         && !isLoading.value
       ) {
-        if (selectedTab.value === 0 && !noMoreContent.value) {
+        if (activatedTab.value === 0 && !noMoreContent.value) {
           getHistoryList(
             HistoryType.Archive,
             historys[historys.length - 1].view_at,
           )
         }
-        else if (selectedTab.value === 1 && !noMoreContent.value) {
+        else if (activatedTab.value === 1 && !noMoreContent.value) {
           getHistoryList(
             HistoryType.Live,
             historys[historys.length - 1].view_at,
           )
         }
-        else if (selectedTab.value === 2 && !noMoreContent.value) {
+        else if (activatedTab.value === 2 && !noMoreContent.value) {
           getHistoryList(
             HistoryType.Article,
             historys[historys.length - 1].view_at,
@@ -94,12 +97,31 @@ function onClickTab(tabId: number) {
   if (isLoading.value)
     return
 
-  selectedTab.value = tabId
+  activatedTab.value = tabId
   historyTabs.forEach((tab) => {
     tab.isSelected = tab.id === tabId
   })
 }
 
+/**
+ * Return the URL of the history item
+ * @param item history item
+ * @return {string} url
+ */
+function getHistoryUrl(item: HistoryItem) {
+  // Video
+  if (activatedTab.value === 0)
+    return item.history.bvid
+  // Live
+  else if (activatedTab.value === 1)
+    return `//live.bilibili.com/${item.history.oid}`
+  // Article
+  else if (activatedTab.value === 2)
+    return `/read/cv${item.history.oid}`
+
+  return ''
+}
+
 /**
  * Get history list
  * @param {HistoryType} type
@@ -165,7 +187,6 @@ function scrollToTop(element: HTMLElement, duration: number) {
     rounded="$bew-radius"
     pos="relative"
     style="box-shadow: var(--bew-shadow-2)"
-    overflow="hidden"
   >
     <!-- top bar -->
     <div
@@ -216,6 +237,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
         h="full"
         flex="~"
         items="center"
+        border="rounded-$bew-radius"
       />
 
       <!-- empty -->
@@ -226,11 +248,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
         <a
           v-for="historyItem in historys"
           :key="historyItem.kid"
-          :href="
-            historyItem.history.bvid
-              ? historyItem.history.bvid
-              : `/read/cv${historyItem.history.oid}`
-          "
+          :href="getHistoryUrl(historyItem)"
           target="_blank"
           hover:bg="$bew-fill-2"
           border="rounded-$bew-radius"
@@ -249,7 +267,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
               overflow="hidden"
             >
               <!-- Video -->
-              <template v-if="selectedTab === 0">
+              <template v-if="activatedTab === 0">
                 <div pos="relative">
                   <img
                     w="150px"
@@ -282,7 +300,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
               </template>
 
               <!-- Live -->
-              <template v-else-if="selectedTab === 1">
+              <template v-else-if="activatedTab === 1">
                 <div pos="relative">
                   <img
                     w="150px"
@@ -291,11 +309,34 @@ function scrollToTop(element: HTMLElement, duration: number) {
                     :alt="historyItem.title"
                     bg="contain"
                   >
+                  <div
+                    v-if="historyItem.live_status === 1"
+                    pos="absolute top-0 left-0"
+                    bg="rose-600"
+                    text="xs white"
+                    p="x-2 y-1"
+                    m="1"
+                    border="rounded-$bew-radius-half"
+                    font="semibold"
+                  >
+                    LIVE
+                  </div>
+                  <div
+                    v-else
+                    pos="absolute top-0 left-0"
+                    bg="gray-500 opacity-55"
+                    text="xs white"
+                    p="x-2 y-1"
+                    m="1"
+                    border="rounded-$bew-radius-half"
+                  >
+                    Offline
+                  </div>
                 </div>
               </template>
 
               <!-- Article -->
-              <div v-else-if="selectedTab === 2">
+              <div v-else-if="activatedTab === 2">
                 <img
                   w="150px"
                   class="aspect-video"
diff --git a/src/components/Topbar/index.vue b/src/components/Topbar/index.vue
index a899061d..f3b3c76f 100644
--- a/src/components/Topbar/index.vue
+++ b/src/components/Topbar/index.vue
@@ -16,7 +16,7 @@ export default defineComponent({
       showNotificationsDropDown: false,
       showMomentsDropDown: false,
       showUploadDropDown: false,
-      showHistoryDropDown: true,
+      showHistoryDropDown: false,
       isLogin: !!getUserID(),
       unReadmessage: {},
       unReadDm: {},
@@ -315,7 +315,7 @@ export default defineComponent({
         <div
           class="right-side-item"
           @mouseenter="showHistoryDropDown = true"
-          @mouseleave="showHistoryDropDown = true"
+          @mouseleave="showHistoryDropDown = false"
         >
           <a
             href="https://www.bilibili.com/account/history"

From c970450cba449368e4caec090aa6e48d508acb51 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 4 Dec 2022 18:42:36 +0800
Subject: [PATCH 7/9] fix: misaligment of loading animation

---
 src/components/Topbar/MomentsDropdown.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/Topbar/MomentsDropdown.vue b/src/components/Topbar/MomentsDropdown.vue
index deaceff6..6750bd04 100644
--- a/src/components/Topbar/MomentsDropdown.vue
+++ b/src/components/Topbar/MomentsDropdown.vue
@@ -316,7 +316,17 @@ function scrollToTop(element: HTMLElement, duration: number) {
       />
 
       <!-- empty -->
-      <empty v-if="!isLoading && moments.length === 0" w="full" h="full" />
+      <empty
+        v-if="!isLoading && moments.length === 0"
+        pos="absolute left-0"
+        bg="$bew-content-1"
+        z="1"
+        w="full"
+        h="full"
+        flex="~"
+        items="center"
+        border="rounded-$bew-radius"
+      />
 
       <!-- moments -->
       <transition-group name="list">

From 8e98c617e81e0386c5f307521fb3dc5653238687 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 4 Dec 2022 19:23:34 +0800
Subject: [PATCH 8/9] refactor: adjusting folders and components naming

---
 src/components/Loading.vue                    |  2 +-
 .../SearchBar/{index.vue => SearchBar.vue}    |  0
 .../Topbar/{index.vue => Topbar.vue}          | 40 +++++-----
 src/contentScripts/views/App.vue              | 76 +++++++++----------
 .../views/Home/{index.vue => Home.vue}        |  0
 5 files changed, 58 insertions(+), 60 deletions(-)
 rename src/components/SearchBar/{index.vue => SearchBar.vue} (100%)
 rename src/components/Topbar/{index.vue => Topbar.vue} (96%)
 rename src/contentScripts/views/Home/{index.vue => Home.vue} (100%)

diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index 86c04970..2955c291 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -17,7 +17,7 @@ const imgURL = browser.runtime.getURL('/assets/loading.gif')
       w="46px"
       h="46px"
       m="r-2"
-    />
+    >
     {{ $t('common.loading') }}
   </div>
 </template>
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/SearchBar.vue
similarity index 100%
rename from src/components/SearchBar/index.vue
rename to src/components/SearchBar/SearchBar.vue
diff --git a/src/components/Topbar/index.vue b/src/components/Topbar/Topbar.vue
similarity index 96%
rename from src/components/Topbar/index.vue
rename to src/components/Topbar/Topbar.vue
index f3b3c76f..6edb0049 100644
--- a/src/components/Topbar/index.vue
+++ b/src/components/Topbar/Topbar.vue
@@ -136,7 +136,7 @@ export default defineComponent({
     p="lg:x-23 <lg:x-16 y-2"
     w="screen"
   >
-    <transition name="topbar">
+    <Transition name="topbar">
       <div
         v-show="showTopbarMask"
         class="fixed top-0 left-0"
@@ -146,7 +146,7 @@ export default defineComponent({
         pointer="none"
         style="background: linear-gradient(var(--bew-bg), transparent)"
       />
-    </transition>
+    </Transition>
 
     <div
       class="left-side"
@@ -177,14 +177,14 @@ export default defineComponent({
           icon="stroke-4 fill-$bew-text-1"
         />
       </div>
-      <transition name="slide">
-        <logo-menu-dropdown
+      <Transition name="slide">
+        <LogoMenuDropdown
           v-if="showLogoDropDown"
           class="bew-popover"
           pos="!left-0 !top-70px"
           transform="!translate-x-0"
         />
-      </transition>
+      </Transition>
     </div>
 
     <!-- search bar -->
@@ -197,14 +197,14 @@ export default defineComponent({
       >
         <tabler:search />
       </button> -->
-      <search-bar ref="searchBar" />
+      <SearchBar ref="searchBar" />
     </div>
 
     <!-- right content -->
     <div class="right-side">
       <div v-if="!isLogin" class="right-side-item">
         <a href="https://passport.bilibili.com/login" class="login">
-          <ic-outline-account-circle class="text-base mr-2" />{{
+          <ic:outline-account-circle class="text-base mr-2" />{{
             $t('topbar.sign_in')
           }}
         </a>
@@ -241,15 +241,15 @@ export default defineComponent({
               )})`,
             }"
           />
-          <transition name="slide">
-            <user-panel-dropdown
+          <Transition name="slide">
+            <UserPanelDropdown
               v-if="showUserPanel"
               ref="userPanelDropdown"
               :user-info="userInfo"
               after:h="!0"
               class="bew-popover"
             />
-          </transition>
+          </Transition>
         </div>
 
         <!-- Notifications -->
@@ -269,13 +269,13 @@ export default defineComponent({
             <tabler:bell />
           </a>
 
-          <transition name="slide">
-            <notifications-dropdown
+          <Transition name="slide">
+            <NotificationsDropdown
               v-if="showNotificationsDropDown"
               ref="notificationsDropdown"
               class="bew-popover"
             />
-          </transition>
+          </Transition>
         </div>
 
         <!-- Moments -->
@@ -295,9 +295,9 @@ export default defineComponent({
             <tabler:windmill />
           </a>
 
-          <transition name="slide">
+          <Transition name="slide">
             <MomentsDropdown v-if="showMomentsDropDown" class="bew-popover" />
-          </transition>
+          </Transition>
         </div>
 
         <!-- Favorites -->
@@ -325,9 +325,9 @@ export default defineComponent({
             <tabler:clock />
           </a>
 
-          <transition name="slide">
+          <Transition name="slide">
             <HistoryDropdown v-if="showHistoryDropDown" class="bew-popover" />
-          </transition>
+          </Transition>
         </div>
 
         <!-- Createive center -->
@@ -361,14 +361,14 @@ export default defineComponent({
             }}</span>
           </a>
 
-          <transition name="slide">
-            <upload-dropdown
+          <Transition name="slide">
+            <UploadDropdown
               v-if="showUploadDropDown"
               class="bew-popover"
               pos="!left-auto !-right-2"
               transform="!translate-x-0"
             />
-          </transition>
+          </Transition>
         </div>
       </template>
     </div>
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index c7ce7c03..44e4eba2 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -1,9 +1,40 @@
+<script setup lang="ts">
+import { useDark, useToggle } from '@vueuse/core'
+import { apperance, isShowTopbar } from '~/logic/storage'
+import { language } from '~/logic'
+import 'virtual:windi.css'
+import '~/styles/index.ts'
+import Home from './home/Home.vue'
+import { useI18n } from 'vue-i18n'
+
+const [showSettings, toggle] = useToggle(false)
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+const { locale } = useI18n()
+
+window.onload = () => {
+  // if there is first-time load extension, set the default language by browser display language
+  if (language.value === '') {
+    if (browser.i18n.getUILanguage() === 'zh-CN')
+      language.value = 'cmn-SC'
+    else if (browser.i18n.getUILanguage() === 'zh-TW')
+      language.value = 'cmn-TC'
+    else
+      language.value = 'en'
+  }
+
+  locale.value = language.value
+
+  // locale.value = language.value
+}
+</script>
+
 <template>
-  <transition>
-    <topbar v-if="isShowTopbar" class="fixed z-50"></topbar>
-  </transition>
+  <Transition>
+    <Topbar v-if="isShowTopbar" class="fixed z-50" />
+  </Transition>
   <!-- is home page -->
-  <home></home>
+  <Home />
   <!-- button -->
   <div
     flex="~ col"
@@ -40,44 +71,12 @@
       style="box-shadow: var(--bew-shadow-2); backdrop-filter: var(--bew-filter-glass);"
       @click="toggle()"
     >
-      <tabler-settings />
+      <tabler:settings />
     </button>
   </div>
-  <settings v-if="showSettings" @close="showSettings = false"></settings>
+  <Settings v-if="showSettings" @close="showSettings = false" />
 </template>
 
-<script setup lang="ts">
-import { useToggle, useDark } from '@vueuse/core'
-import { apperance, isShowTopbar } from '~/logic/storage'
-import { language } from '~/logic'
-import 'virtual:windi.css'
-import '~/styles/index.ts'
-import Home from './Home/index.vue'
-import { useI18n } from 'vue-i18n'
-
-const [showSettings, toggle] = useToggle(false)
-const isDark = useDark()
-const toggleDark = useToggle(isDark)
-const { locale } = useI18n()
-
-window.onload = () => {
-  // if there is first-time load extension, set the default language by browser display language
-  if (language.value === '') {
-    if (browser.i18n.getUILanguage() === 'zh-CN')
-      language.value = 'cmn-SC'
-    else if (browser.i18n.getUILanguage() === 'zh-TW')
-      language.value = 'cmn-TC'
-    else
-      language.value = 'en'
-  }
-
-  locale.value = language.value
-
-  // locale.value = language.value
-}
-
-</script>
-
 <style lang="scss">
 .v-enter-active,
 .v-leave-active {
@@ -88,5 +87,4 @@ window.onload = () => {
 .v-leave-to {
   @apply opacity-0 transform -translate-y-full;
 }
-
 </style>
diff --git a/src/contentScripts/views/Home/index.vue b/src/contentScripts/views/Home/Home.vue
similarity index 100%
rename from src/contentScripts/views/Home/index.vue
rename to src/contentScripts/views/Home/Home.vue

From 1c4dab8d92e528f76957b7b6b8b0f4cf1230b446 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 7 Dec 2022 22:24:22 +0800
Subject: [PATCH 9/9] refactor: Option API to Composition API

---
 src/components/Topbar/Topbar.vue | 253 ++++++++++++++++---------------
 src/components/Topbar/types.ts   |  49 +++++-
 2 files changed, 180 insertions(+), 122 deletions(-)

diff --git a/src/components/Topbar/Topbar.vue b/src/components/Topbar/Topbar.vue
index 6edb0049..a1ec5af2 100644
--- a/src/components/Topbar/Topbar.vue
+++ b/src/components/Topbar/Topbar.vue
@@ -1,131 +1,142 @@
-<script lang="ts">
+<script setup lang="ts">
+import type { Ref, UnwrapNestedRefs } from 'vue'
+import { Transition, onMounted, watch } from 'vue'
+import type { UnReadDm, UnReadMessage, UserInfo } from '../topbar/types'
 import MomentsDropdown from './MomentsDropdown.vue'
 import HistoryDropdown from './HistoryDropdown.vue'
 import { updateInterval } from './notify'
 import { getUserID } from '~/utils'
 
-export default defineComponent({
-  components: { MomentsDropdown, HistoryDropdown },
-  data() {
-    return {
-      mid: getUserID() || '',
-      userInfo: {} as any,
-      showLogoDropDown: false,
-      showUserPanel: false,
-      showTopbarMask: false,
-      showNotificationsDropDown: false,
-      showMomentsDropDown: false,
-      showUploadDropDown: false,
-      showHistoryDropDown: false,
-      isLogin: !!getUserID(),
-      unReadmessage: {},
-      unReadDm: {},
-      unReadmessageCount: 0,
-      newMomentsCount: 0,
-    }
+const mid = getUserID() || ''
+const userInfo = reactive<UserInfo | {}>({}) as UnwrapNestedRefs<UserInfo>
+const showLogoDropDown = ref<boolean>(false)
+const showUserPanel = ref<boolean>(false)
+const showTopbarMask = ref<boolean>(false)
+const showNotificationsDropDown = ref<boolean>(false)
+const showMomentsDropDown = ref<boolean>(false)
+const showUploadDropDown = ref<boolean>(false)
+const showHistoryDropDown = ref<boolean>(false)
+const isLogin = ref<boolean>(!!getUserID())
+const unReadMessage = reactive<UnReadMessage | {}>({}) as UnwrapNestedRefs<UnReadMessage>
+const unReadDm = reactive<UnReadDm | {}>({} as UnwrapNestedRefs<UnReadDm>)
+const unReadMessageCount = ref<number>(0)
+const newMomentsCount = ref<number>(0)
+
+const logo = ref<HTMLElement>() as Ref<HTMLElement>
+const avatarImg = ref<HTMLImageElement>() as Ref<HTMLImageElement>
+const avatarShadow = ref<HTMLImageElement>() as Ref<HTMLImageElement>
+
+watch(
+  () => showNotificationsDropDown,
+  (newValue, oldValue) => {
+    getUnreadMessageCount()
   },
-  watch: {
-    showNotificationsDropDown(val) {
-      this.getUnreadMessageCount()
-    },
-    showMomentsDropDown(val) {
-      this.getNewMomentsCount()
-    },
+)
+
+watch(
+  () => showMomentsDropDown,
+  (newValue, oldValue) => {
+    getNewMomentsCount()
   },
-  mounted() {
-    this.initUserPanel()
+)
 
-    document.addEventListener('scroll', () => {
-      if (window.scrollY > 0)
-        this.showTopbarMask = true
-      else this.showTopbarMask = false
-    })
-  },
-  methods: {
-    initUserPanel() {
-      this.getUserInfo()
-      this.getUnreadMessageCount()
-      this.getNewMomentsCount()
+onMounted(() => {
+  initUserPanel()
 
-      // automatically update notifications and moments count
-      setInterval(() => {
-        this.getUnreadMessageCount()
-        this.getNewMomentsCount()
-      }, updateInterval)
-    },
-    showLogoMenuDropdown() {
-      const logo = this.$refs.logo as HTMLElement
-      logo.classList.add('hover')
-      this.showLogoDropDown = true
-    },
-    closeLogoMenuDropdown() {
-      const logo = this.$refs.logo as HTMLElement
-      logo.classList.remove('hover')
-      this.showLogoDropDown = false
-    },
-    openUserPanel() {
-      this.showUserPanel = true
-      const avatarImg = this.$refs.avatarImg as HTMLImageElement
-      const avatarShadow = this.$refs.avatarShadow as HTMLImageElement
-      avatarImg.classList.add('hover')
-      avatarShadow.classList.add('hover')
-    },
-    closeUserPanel() {
-      this.showUserPanel = false
-      const avatarImg = this.$refs.avatarImg as HTMLImageElement
-      const avatarShadow = this.$refs.avatarShadow as HTMLImageElement
-      avatarImg.classList.remove('hover')
-      avatarShadow.classList.remove('hover')
-    },
-    getUserInfo() {
-      browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'getUserInfo',
-        })
-        .then((res) => {
-          if (res.code === 0)
-            this.userInfo = res.data
-        })
-    },
-    async getUnreadMessageCount() {
-      if (!this.isLogin)
-        return
-
-      await browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'getUnreadMsg',
-        })
-        .then(res => (this.unReadmessage = res.data))
-
-      await browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'getUnreadDm',
-        })
-        .then(res => (this.unReadDm = res.data))
-
-      this.unReadmessageCount = 0
-      for (const [key, value] of Object.entries(this.unReadmessage)) {
-        if (key !== 'up')
-          this.unReadmessageCount += parseInt(`${value}`)
-      }
-
-      for (const [, value] of Object.entries(this.unReadDm))
-        this.unReadmessageCount += parseInt(`${value}`)
-    },
-    getNewMomentsCount() {
-      if (!this.isLogin)
-        return
-
-      browser.runtime
-        .sendMessage({
-          contentScriptQuery: 'getNewMomentsCount',
-        })
-        .then((res) => {
-          this.newMomentsCount = res.data.update_info.item.count
-        })
-    },
-  },
+  document.addEventListener('scroll', () => {
+    if (window.scrollY > 0)
+      showTopbarMask.value = true
+    else showTopbarMask.value = false
+  })
 })
+
+function initUserPanel() {
+  getUserInfo()
+  getUnreadMessageCount()
+  getNewMomentsCount()
+
+  // automatically update notifications and moments count
+  setInterval(() => {
+    getUnreadMessageCount()
+    getNewMomentsCount()
+  }, updateInterval)
+}
+
+function showLogoMenuDropdown() {
+  logo.value.classList.add('hover')
+  showLogoDropDown.value = true
+}
+
+function closeLogoMenuDropdown() {
+  logo.value.classList.remove('hover')
+  showLogoDropDown.value = false
+}
+
+function openUserPanel() {
+  showUserPanel.value = true
+  avatarImg.value.classList.add('hover')
+  avatarShadow.value.classList.add('hover')
+}
+
+function closeUserPanel() {
+  showUserPanel.value = false
+  avatarImg.value.classList.remove('hover')
+  avatarShadow.value.classList.remove('hover')
+}
+
+function getUserInfo() {
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getUserInfo',
+    })
+    .then((res) => {
+      if (res.code === 0)
+        Object.assign(userInfo, res.data)
+    })
+}
+
+async function getUnreadMessageCount() {
+  if (!isLogin)
+    return
+
+  await browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getUnreadMsg',
+    })
+    .then((res) => {
+      Object.assign(unReadMessage, res.data)
+    })
+
+  await browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getUnreadDm',
+    })
+    .then(res => Object.assign(unReadDm, res.data))
+
+  unReadMessageCount.value = 0
+
+  Object.keys(unReadMessage).forEach((key) => {
+    if (key !== 'up')
+      unReadMessageCount.value += unReadMessage[key as keyof typeof unReadMessage]
+  })
+
+  Object.keys(unReadDm).forEach((key) => {
+    unReadMessageCount.value += unReadDm[key as keyof typeof unReadDm]
+  })
+}
+
+function getNewMomentsCount() {
+  if (!isLogin)
+    return
+
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getNewMomentsCount',
+    })
+    .then((res) => {
+      newMomentsCount.value = res.data.update_info.item.count
+    })
+}
 </script>
 
 <template>
@@ -258,8 +269,8 @@ export default defineComponent({
           @mouseenter="showNotificationsDropDown = true"
           @mouseleave="showNotificationsDropDown = false"
         >
-          <div v-if="unReadmessageCount !== 0" class="unread-message">
-            {{ unReadmessageCount > 999 ? '999+' : unReadmessageCount }}
+          <div v-if="unReadMessageCount !== 0" class="unread-message">
+            {{ unReadMessageCount > 999 ? '999+' : unReadMessageCount }}
           </div>
           <a
             href="https://message.bilibili.com"
@@ -463,7 +474,7 @@ export default defineComponent({
       @apply duration-300;
 
       &.hover {
-        @apply transform scale-230 translate-y-4;
+        @apply transform scale-230 "!translate-y-30px";
       }
     }
 
diff --git a/src/components/Topbar/types.ts b/src/components/Topbar/types.ts
index 8bd91b7f..4ac9821d 100644
--- a/src/components/Topbar/types.ts
+++ b/src/components/Topbar/types.ts
@@ -1,3 +1,50 @@
+export interface UserInfo {
+  face: string // avatar
+  level_info: {
+    current_level: number
+    current_min: number
+    current_exp: number
+    next_exp: string
+  }
+  mid: number
+  money: number // 硬幣
+  uname: string // username
+  wallet: {
+    mid: number
+    bcoin_balance: number // b幣
+  }
+}
+
+/**
+ * Number of follower, following and published posts by user
+ */
+export interface UserStat {
+  dynamic_count: number
+  follower: number
+  following: number
+}
+
+// https://github.com/SocialSisterYi/bilibili-API-collect/blob/63da4454309e2599269125e24a6940b1feecedef/message/msg.md#%E6%9C%AA%E8%AF%BB%E6%B6%88%E6%81%AF%E6%95%B0
+export interface UnReadMessage {
+  at: number
+  chat: number
+  like: number
+  reply: number
+  sys_msg: number
+  up: number
+}
+
+export interface UnReadDm {
+  // https://api.vc.bilibili.com/session_svr/v1/session_svr/single_unread?build=0&mobi_app=web&unread_type=0
+  unfollow_unread: number
+  follow_unread: number
+  unfollow_push_msg: number
+  dustbin_push_msg: number
+  dustbin_unread: number
+  biz_msg_unfollow_unread: number
+  biz_msg_follow_unread: number
+}
+
 export enum MomentType {
   Video = 8,
   Article = 64,
@@ -38,7 +85,7 @@ export enum HistoryType {
 export interface HistoryItem {
   title: string
   cover: string
-  covers: Array<string> | null
+  covers?: Array<string>
   history: {
     business: HistoryType
     epid?: number