Add dashboard menu item and deprecate router history (#94)

Author: sheepzh

src/app/components/dashboard/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2022 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { defineComponent, h } from "vue"
+import ContentContainer from "@app/components/common/content-container"
+
+const _default = defineComponent({
+    name: 'Dashboard',
+    setup() {
+        return () => h(ContentContainer)
+    }
+})
+
+export default _default

src/app/layout/menu.ts

@@ -11,10 +11,9 @@ import { RouteLocationNormalizedLoaded, Router, useRoute, useRouter } from "vue-
 import { I18nKey, t } from "@app/locale"
 import { MenuMessage } from "@app/locale/components/menu"
 import { GITHUB_ISSUE_ADD, HOME_PAGE, MEAT_URL, TU_CAO_PAGE } from "@util/constant/url"
-import { Aim, Calendar, ChatSquare, Folder, Food, HotWater, Rank, SetUp, Stopwatch, Sugar, Tickets, Timer } from "@element-plus/icons-vue"
+import { Aim, Calendar, ChatSquare, Folder, Food, HotWater, Rank, SetUp, Stopwatch, Sugar, Tickets, Timer, TrendCharts } from "@element-plus/icons-vue"
 import ElementIcon from "../element-ui/icon"
 import { locale } from "@util/i18n"
-import { IS_EDGE } from "@util/constant/environment"
 
 type _MenuItem = {
     title: keyof MenuMessage
@@ -68,6 +67,10 @@ const ALL_MENU: _MenuGroup[] = [
     {
         title: 'data',
         children: [{
+            title: 'dashboard',
+            route: '/data/dashboard',
+            icon: TrendCharts
+        }, {
             title: 'dataReport',
             route: '/data/report',
             icon: Calendar
@@ -171,7 +174,7 @@ const _default = defineComponent({
             current: useRoute()
         })
 
-        onMounted(() => document.title = t(msg => msg.menu.data))
+        onMounted(() => document.title = t(msg => msg.menu.dashboard))
 
         return () => h(ElMenu,
             { defaultActive: routeProps.current.path },

src/app/locale/components/menu.ts

@@ -8,6 +8,7 @@
 import { Messages } from "@util/i18n"
 
 export type MenuMessage = {
+    dashboard: string
     data: string
     dataReport: string
     dataHistory: string
@@ -27,6 +28,7 @@ export type MenuMessage = {
 }
 const _default: Messages<MenuMessage> = {
     zh_CN: {
+        dashboard: '仪表盘',
         data: '我的数据',
         dataReport: '报表明细',
         dataHistory: '历史趋势',
@@ -45,6 +47,7 @@ const _default: Messages<MenuMessage> = {
         meat: '请作者吃饭~'
     },
     zh_TW: {
+        dashboard: '儀錶盤',
         data: '我的數據',
         dataReport: '報表明細',
         dataHistory: '曆史趨勢',
@@ -63,6 +66,7 @@ const _default: Messages<MenuMessage> = {
         meat: '請作者吃飯~'
     },
     en: {
+        dashboard: "Dashboard",
         data: 'My Data',
         dataReport: 'Record',
         dataHistory: 'Trend',
@@ -81,6 +85,7 @@ const _default: Messages<MenuMessage> = {
         meat: 'Invite the author to dinner'
     },
     ja: {
+        dashboard: 'ダッシュボード',
         data: '私のデータ',
         dataReport: '報告する',
         dataHistory: '歴史傾向',

src/app/router/index.ts

@@ -7,16 +7,19 @@
 
 import { App } from "vue"
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
-import RouterDatabase from "@db/router-database"
 import { OPTION_ROUTE, TREND_ROUTE, LIMIT_ROUTE, REPORT_ROUTE } from "./constants"
 import metaService from "@service/meta-service"
 
 const dataRoutes: RouteRecordRaw[] = [
     {
         path: '/data',
-        redirect: '/data/report',
+        redirect: '/data/dashboard',
     },
     // Needn't nested router 
+    {
+        path: '/data/dashboard',
+        component: () => import('../components/dashboard')
+    },
     {
         path: REPORT_ROUTE,
         component: () => import('../components/report')
@@ -73,16 +76,12 @@ const router = createRouter({
     routes,
 })
 
-const db: RouterDatabase = new RouterDatabase(chrome.storage.local)
-
 async function handleChange() {
     await router.isReady()
     const current = router.currentRoute.value.fullPath
     current && metaService.increaseApp(current)
-    current && await db.update(current)
     router.afterEach((to, from, failure: Error | void) => {
         if (failure || to.fullPath === from.fullPath) return
-        db.update(to.fullPath)
         metaService.increaseApp(to.fullPath)
     })
 }

src/database/router-database.ts

@@ -9,16 +9,29 @@ import BaseDatabase from "./common/base-database"
 import { REMAIN_WORD_PREFIX } from "./common/constant"
 
 const KEY = REMAIN_WORD_PREFIX + "app_router"
+
+/**
+ * @deprecated since 0.9.3
+ */
 class RouterDatabase extends BaseDatabase {
+    /**
+     * @deprecated since 0.9.3
+     */
     async getHistory(): Promise<string | undefined> {
         const items = await this.storage.get(KEY)
         return items[KEY]
     }
 
+    /**
+     * @deprecated since 0.9.3
+     */
     update(newRoute: string): Promise<void> {
         return this.setByKey(KEY, newRoute)
     }
 
+    /**
+     * @deprecated since 0.9.3
+     */
     async importData(_data: any): Promise<void> {
         // Do nothing
     }

src/popup/components/footer/all-function.ts

@@ -4,16 +4,11 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
-
-import RouterDatabase from "@db/router-database"
 import { getAppPageUrl } from "@util/constant/url"
 import { t } from "@popup/locale"
 
-const db: RouterDatabase = new RouterDatabase(chrome.storage.local)
-
 const allFunctionLink = document.getElementById('all-function-link')
 allFunctionLink.onclick = async () => {
-    const historyRoute = await db.getHistory()
-    chrome.tabs.create({ url: getAppPageUrl(false, historyRoute || '/') })
+    chrome.tabs.create({ url: getAppPageUrl(false, '/') })
 }
 allFunctionLink.innerText = t(msg => msg.viewMore)

src/service/components/immigration.ts

@@ -13,7 +13,6 @@ import IconUrlDatabase from "@db/icon-url-database"
 import LimitDatabase from "@db/limit-database"
 import MergeRuleDatabase from "@db/merge-rule-database"
 import PeriodDatabase from "@db/period-database"
-import RouterDatabase from "@db/router-database"
 import TimerDatabase from "@db/timer-database"
 import WhitelistDatabase from "@db/whitelist-database"
 import HostAliasDatabase from "@db/host-alias-database"
@@ -36,7 +35,6 @@ function initDatabase(storage: chrome.storage.StorageArea): BaseDatabase[] {
         new LimitDatabase(storage),
         new MergeRuleDatabase(storage),
         new WhitelistDatabase(storage),
-        new RouterDatabase(storage),
         new HostAliasDatabase(storage)
     ]