add switch to desktop/mobile link

src/lib/version.js

@@ -16,3 +16,18 @@ export function getVersion() {
 export function getBuildTime() {
     return __EZBOOKKEEPING_BUILD_UNIX_TIME__; // eslint-disable-line
 }
+
+export function getMobileVersionPath() {
+    if (isProduction()) {
+        return '../mobile';
+    } else {
+        return 'mobile.html';
+    }
+}
+export function getDesktopVersionPath() {
+    if (isProduction()) {
+        return '../desktop';
+    } else {
+        return 'desktop.html';
+    }
+}

src/locales/en.js

@@ -1132,6 +1132,8 @@ export default {
     'Exchange rates data has been updated': 'Exchange rates data has been updated',
     'Exchange rates data is up to date': 'Exchange rates data is up to date',
     'Unable to get exchange rates data': 'Unable to get exchange rates data',
+    'Switch to Mobile Version': 'Switch to Mobile Version',
+    'Switch to Desktop Version': 'Switch to Desktop Version',
     'About': 'About',
     'Build Time': 'Build Time',
     'Official Website': 'Official Website',

src/locales/zh_Hans.js

@@ -1132,6 +1132,8 @@ export default {
     'Exchange rates data has been updated': '汇率数据已更新',
     'Exchange rates data is up to date': '汇率数据已是最新',
     'Unable to get exchange rates data': '无法获取汇率数据',
+    'Switch to Mobile Version': '切换到移动版',
+    'Switch to Desktop Version': '切换到桌面版',
     'About': '关于',
     'Build Time': '编译时间',
     'Official Website': '官方网站',

src/views/desktop/MainLayout.vue

@@ -16,10 +16,10 @@
                 @ps-scroll-y="handleNavScroll"
             >
                 <li class="nav-link">
-                    <RouterLink to="/">
+                    <router-link to="/">
                         <v-icon class="nav-item-icon" :icon="icons.overview"/>
                         <span class="nav-item-title">{{ $t('Overview') }}</span>
-                    </RouterLink>
+                    </router-link>
                 </li>
                 <li class="nav-section-title">
                     <div class="title-wrapper">
@@ -27,16 +27,16 @@
                     </div>
                 </li>
                 <li class="nav-link">
-                    <RouterLink to="/transactions">
+                    <router-link to="/transactions">
                         <v-icon class="nav-item-icon" :icon="icons.transactions"/>
                         <span class="nav-item-title">{{ $t('Transaction List') }}</span>
-                    </RouterLink>
+                    </router-link>
                 </li>
                 <li class="nav-link">
-                    <RouterLink to="/statistics/transaction">
+                    <router-link to="/statistics/transaction">
                         <v-icon class="nav-item-icon" :icon="icons.statistics"/>
                         <span class="nav-item-title">{{ $t('Statistics Data') }}</span>
-                    </RouterLink>
+                    </router-link>
                 </li>
                 <li class="nav-section-title">
                     <div class="title-wrapper">
@@ -44,22 +44,22 @@
                     </div>
                 </li>
                 <li class="nav-link">
-                    <RouterLink to="/accounts">
+                    <router-link to="/accounts">
                         <v-icon class="nav-item-icon" :icon="icons.accounts"/>
                         <span class="nav-item-title">{{ $t('Account List') }}</span>
-                    </RouterLink>
+                    </router-link>
                 </li>
                 <li class="nav-link">
-                    <RouterLink to="/categories">
+                    <router-link to="/categories">
                         <v-icon class="nav-item-icon" :icon="icons.categories"/>
                         <span class="nav-item-title">{{ $t('Transaction Categories') }}</span>
-                    </RouterLink>
+                    </router-link>
                 </li>
                 <li class="nav-link">
-                    <RouterLink to="/tags">
+                    <router-link to="/tags">
                         <v-icon class="nav-item-icon" :icon="icons.tags"/>
                         <span class="nav-item-title">{{ $t('Transaction Tags') }}</span>
-                    </RouterLink>
+                    </router-link>
                 </li>
                 <li class="nav-section-title">
                     <div class="title-wrapper">
@@ -67,16 +67,22 @@
                     </div>
                 </li>
                 <li class="nav-link">
-                    <RouterLink to="/exchange_rates">
+                    <router-link to="/exchange_rates">
                         <v-icon class="nav-item-icon" :icon="icons.exchangeRates"/>
                         <span class="nav-item-title">{{ $t('Exchange Rates Data') }}</span>
-                    </RouterLink>
+                    </router-link>
                 </li>
                 <li class="nav-link">
-                    <RouterLink to="/about">
+                    <a :href="mobileVersionPath">
+                        <v-icon class="nav-item-icon" :icon="icons.mobile"/>
+                        <span class="nav-item-title">{{ $t('Switch to Mobile Version') }}</span>
+                    </a>
+                </li>
+                <li class="nav-link">
+                    <router-link to="/about">
                         <v-icon class="nav-item-icon" :icon="icons.about"/>
                         <span class="nav-item-title">{{ $t('About') }}</span>
-                    </RouterLink>
+                    </router-link>
                 </li>
             </perfect-scrollbar>
         </div>
@@ -175,6 +181,7 @@ import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 
 import { getSystemTheme } from '@/lib/ui.js';
+import { getMobileVersionPath } from '@/lib/version.js';
 
 import {
     mdiMenu,
@@ -186,6 +193,7 @@ import {
     mdiChartPieOutline,
     mdiSwapHorizontal,
     mdiCogOutline,
+    mdiCellphone,
     mdiInformationOutline,
     mdiThemeLightDark,
     mdiWeatherSunny,
@@ -214,6 +222,7 @@ export default {
                 statistics: mdiChartPieOutline,
                 exchangeRates: mdiSwapHorizontal,
                 settings: mdiCogOutline,
+                mobile: mdiCellphone,
                 about: mdiInformationOutline,
                 themeAuto: mdiThemeLightDark,
                 themeLight: mdiWeatherSunny,
@@ -230,6 +239,9 @@ export default {
             const { mdAndDown } = useDisplay();
             return mdAndDown.value;
         },
+        mobileVersionPath() {
+            return getMobileVersionPath();
+        },
         currentNickName() {
             return this.userStore.currentUserNickname || this.$t('User');
         },

src/views/mobile/SettingsPage.vue

@@ -92,6 +92,8 @@
                 <f7-toggle :checked="isEnableAnimate" @toggle:change="isEnableAnimate = $event"></f7-toggle>
             </f7-list-item>
 
+            <f7-list-item external :title="$t('Switch to Desktop Version')" :link="desktopVersionPath"></f7-list-item>
+
             <f7-list-item :title="$t('About')" link="/about" :after="version"></f7-list-item>
         </f7-list>
     </f7-page>
@@ -105,6 +107,7 @@ import { useUserStore } from '@/stores/user.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
 import currencyConstants from '@/consts/currency.js';
+import { getDesktopVersionPath } from '@/lib/version.js';
 
 export default {
     props: [
@@ -123,6 +126,9 @@ export default {
         version() {
             return 'v' + this.$version;
         },
+        desktopVersionPath() {
+            return getDesktopVersionPath();
+        },
         allTimezones() {
             return this.$locale.getAllTimezones(true);
         },