Merge pull request #25 from Alystrasz/refactor/router-view

refactor: Router view

9 files changed, 85 insertions, 36 deletions

diff --git a/src-vue/package-lock.json b/src-vue/package-lock.json
index bcae0ab6..ace5d0db 100644
--- a/src-vue/package-lock.json
+++ b/src-vue/package-lock.json
@@ -12,6 +12,7 @@
         "element-plus": "^2.2.17",
         "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#dev",
         "vue": "^3.2.37",
+        "vue-router": "^4.1.5",
         "vuex": "^4.0.2"
       },
       "devDependencies": {
@@ -1131,6 +1132,20 @@
         "@vue/shared": "3.2.39"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.5.tgz",
+      "integrity": "sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.1.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "0.40.13",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.40.13.tgz",
@@ -1840,7 +1855,7 @@
     },
     "tauri-plugin-store-api": {
       "version": "git+ssh://git@github.com/tauri-apps/tauri-plugin-store.git#4326f75446b8b9e0cb9904c65f258b81e23e544e",
-      "from": "tauri-plugin-store-api@https://github.com/tauri-apps/tauri-plugin-store#dev",
+      "from": "tauri-plugin-store-api@github:tauri-apps/tauri-plugin-store#dev",
       "requires": {
         "@tauri-apps/api": "1.1.0",
         "tslib": "2.4.0"
@@ -1882,6 +1897,14 @@
         "@vue/shared": "3.2.39"
       }
     },
+    "vue-router": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.5.tgz",
+      "integrity": "sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.1.4"
+      }
+    },
     "vue-tsc": {
       "version": "0.40.13",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.40.13.tgz",
diff --git a/src-vue/package.json b/src-vue/package.json
index 8f53ad27..186c44e0 100644
--- a/src-vue/package.json
+++ b/src-vue/package.json
@@ -13,6 +13,7 @@
     "element-plus": "^2.2.17",
     "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#dev",
     "vue": "^3.2.37",
+    "vue-router": "^4.1.5",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 2a2a176f..68372fc7 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -19,13 +19,6 @@ export default {
   },
   mounted: () => {
     store.commit('initialize');
-
-    // Enable dragging entire app by dragging menu bar.
-    // https://github.com/tauri-apps/tauri/issues/1656#issuecomment-1161495124
-    document.querySelector(".el-tabs__nav-scroll")!.addEventListener("mousedown", async e => {
-        if ((e.target as Element).closest(".el-tabs__item")) return; // Disable drag when clicking menu items.
-        await tauriWindow.appWindow.startDragging();
-    });
   },
   methods: {
     minimize() {
@@ -40,15 +33,22 @@ export default {
 
 <template>
     <div id="fc_bg__container" />
-    <el-tabs v-model="$store.state.current_tab" class="fc_menu__tabs" type="card">
-        <el-tab-pane name="Play" label="Play"><PlayView /></el-tab-pane>
-        <el-tab-pane name="Changelog" label="Changelog"><ChangelogView /></el-tab-pane>
-        <!-- <el-tab-pane label="Mods">Mods</el-tab-pane> -->
-        <el-tab-pane name="Settings" label="Settings"><SettingsView/></el-tab-pane>
-        <el-tab-pane v-if="$store.state.developer_mode" name="Dev" label="Dev">
-          <DeveloperView/>
-        </el-tab-pane>
-    </el-tabs>
+
+    <el-menu
+        default-active="/"
+        router
+        mode="horizontal"
+        id="fc__menu_bar"
+        data-tauri-drag-region
+    >
+        <el-menu-item index="/">Play</el-menu-item>
+        <el-menu-item index="/changelog">Changelog</el-menu-item>
+        <el-menu-item index="/settings">Settings</el-menu-item>
+        <el-menu-item index="/dev" v-if="$store.state.developer_mode">Dev</el-menu-item>
+    </el-menu>
+
+    <router-view></router-view>
+
     <div id="fc_window__controls">
         <el-button color="white" icon="SemiSelect" @click="minimize" circle />
         <el-button color="white" icon="CloseBold" @click="close" circle />
@@ -57,34 +57,36 @@ export default {
 
 <style>
 /* Borders reset */
-.fc_menu__tabs .el-tabs__nav, .fc_menu__tabs .el-tabs__header {
-  border: none !important;
+#fc__menu_bar {
+    border: none !important;
 }
 
 /* Header item */
-.fc_menu__tabs .el-tabs__item {
+#fc__menu_bar .el-menu-item {
   color: #b4b6b9;
   text-transform: uppercase;
   border: none !important;
   font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
   font-weight: bold;
   font-size: large;
-  margin: 10px 0;
 }
 
-.fc_menu__tabs .el-tabs__item:hover {
+#fc__menu_bar .el-menu-item:hover {
   color: #c6c9ce;
+  background-color: transparent;
 }
 
-.fc_menu__tabs .is-active {
+#fc__menu_bar .el-menu-item.is-active, #fc__menu_bar .el-menu-item:focus {
   color: white !important;
+  background-color: transparent;
 }
 
 /* Header menu */
-.fc_menu__tabs .el-tabs__header {
+#fc__menu_bar {
   background-image: radial-gradient(transparent 1px);
   backdrop-filter: saturate(50%) blur(4px);
-  height: auto !important;
+  background-color: transparent;
+  height: var(--fc-menu_height);
 }
 
 /* Window controls */
@@ -93,7 +95,7 @@ export default {
   position: absolute;
   top: 0;
   right: 0;
-  height: var(--el-tabs-header-height);
+  height: var(--fc-menu_height);
 }
 
 #fc_window__controls > button {
diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts
index 0ac31a2d..dc18b443 100644
--- a/src-vue/src/main.ts
+++ b/src-vue/src/main.ts
@@ -2,14 +2,21 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import ElementPlus from "element-plus";
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { store } from './plugins/store';
+import PlayView from "./views/PlayView.vue";
+import ChangelogView from "./views/ChangelogView.vue";
+import SettingsView from "./views/SettingsView.vue";
+import DeveloperView from "./views/DeveloperView.vue";
+import {createRouter, createWebHashHistory} from "vue-router";
+
+
+const app = createApp(App);
 
 
 // styles
 import 'element-plus/theme-chalk/index.css';
 import './style.css'
-import { store } from './plugins/store';
 
-const app = createApp(App);
 app.use(ElementPlus);
 
 // icons
@@ -20,4 +27,19 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 // style
 app.use( store, '$store' );
 
+
+// routes
+const routes = [
+    { path: '/', name: 'Main', component: async () => PlayView},
+    { path: '/changelog', name: 'Changelog', component: async () => ChangelogView},
+    { path: '/settings', name: 'Settings', component: async () => SettingsView},
+    { path: '/dev', name: 'Dev', component: async () => DeveloperView}
+];
+export const router = createRouter({
+    history: createWebHashHistory(),
+    routes, // short for `routes: routes`
+});
+app.use(router);
+
+
 app.mount('#app')
diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index ce0b0ded..4fdf50a3 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -10,12 +10,12 @@ import { NorthstarState } from '../utils/NorthstarState';
 import { appDir } from '@tauri-apps/api/path';
 import { open } from '@tauri-apps/api/dialog';
 import { Store } from 'tauri-plugin-store-api';
+import {router} from "../main";
 
 const persistentStore = new Store('flight-core-settings.json');
 
 
 export interface FlightCoreStore {
-    current_tab: Tabs,
     developer_mode: boolean,
     game_path: string,
     install_type: InstallType,
@@ -35,7 +35,6 @@ let notification_handle: NotificationHandle;
 export const store = createStore<FlightCoreStore>({
     state (): FlightCoreStore {
         return {
-            current_tab: Tabs.PLAY,
             developer_mode: false,
             game_path: undefined as unknown as string,
             install_type: undefined as unknown as InstallType,
@@ -68,7 +67,7 @@ export const store = createStore<FlightCoreStore>({
             _initializeListeners(state);
         },
         updateCurrentTab(state: any, newTab: Tabs) {
-            state.current_tab = newTab;
+            router.push({path: newTab});
         },
         async updateGamePath(state: FlightCoreStore) {
             // Open a selection dialog for directories
diff --git a/src-vue/src/style.css b/src-vue/src/style.css
index eee68edd..6fd4a793 100644
--- a/src-vue/src/style.css
+++ b/src-vue/src/style.css
@@ -1,7 +1,7 @@
 body {
   margin: 0;
   font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  --el-tabs-header-height: 60px;
+  --fc-menu_height: 50px;
   user-select: none;
 }
 
diff --git a/src-vue/src/utils/Tabs.ts b/src-vue/src/utils/Tabs.ts
index 5266da81..48320950 100644
--- a/src-vue/src/utils/Tabs.ts
+++ b/src-vue/src/utils/Tabs.ts
@@ -1,6 +1,6 @@
 export enum Tabs {
-    PLAY = 'Play',
-    CHANGELOG = 'Changelog',
-    SETTINGS = 'Settings',
-    DEV = 'Dev'
+    PLAY = '/',
+    CHANGELOG = '/changelog',
+    SETTINGS = '/settings',
+    DEV = '/dev'
 }
diff --git a/src-vue/src/views/DeveloperView.vue b/src-vue/src/views/DeveloperView.vue
index e1f9eb7c..dcc0c477 100644
--- a/src-vue/src/views/DeveloperView.vue
+++ b/src-vue/src/views/DeveloperView.vue
@@ -121,5 +121,6 @@ export default defineComponent({
 .fc__developer__container {
     padding: 20px 30px;
     color: white;
+    position: relative;
 }
 </style>
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
index acc1874d..0b0e52e4 100644
--- a/src-vue/src/views/SettingsView.vue
+++ b/src-vue/src/views/SettingsView.vue
@@ -47,6 +47,7 @@ export default defineComponent({
     padding: 20px 30px;
     margin: 0 auto;
     color: white;
+    position: relative;
 }
 
 h3:first-of-type {