perf: 🧑‍💻 Improve application performance with VueRouter

.gitignore

@@ -28,5 +28,4 @@ dist
 dist-ssr
 dist-electron
 dist-release
-components.d.ts
-auto-imports.d.ts
+*.d.ts

control/App.vue

@@ -56,7 +56,7 @@
 </template>
 
 <script setup>
-import ControlBar from '$/components/Device/components/ControlBar/index.vue'
+import ControlBar from '$/components/ControlBar/index.vue'
 
 import { i18n } from '$/locales/index.js'
 

eslint.config.js

@@ -22,6 +22,7 @@ export default antfu(
   {
     languageOptions: {
       globals: {
+        definePage: 'readonly',
         ...autoImport.globals,
       },
     },

package.json

@@ -60,13 +60,15 @@
     "unocss": "0.62.3",
     "unplugin-auto-import": "0.18.3",
     "unplugin-vue-components": "0.27.4",
+    "unplugin-vue-router": "^0.10.9",
     "vite": "5.1.5",
     "vite-plugin-electron": "0.28.8",
     "vite-plugin-electron-renderer": "0.14.6",
     "vite-svg-loader": "5.1.0",
     "vue": "3.4.21",
     "vue-command": "35.2.1",
     "vue-i18n": "9.13.1",
+    "vue-router": "^4.5.0",
     "which": "4.0.0"
   }
 }

src/App.vue

@@ -1,53 +1,19 @@
 <template>
   <el-config-provider :locale="locale">
-    <div
-      class="absolute inset-0 h-full flex flex-col px-4 pb-4 pt-1 space-y-4 overflow-hidden"
-    >
-      <div
-        class="flex items-center flex-none border-b border-gray-200 dark:border-gray-700 pb-1"
-      >
-        <div class="flex-none">
-          <el-segmented
-            v-slot="{ item }"
-            v-model="activeTab"
-            :options="tabsModel"
-            @change="onTabChange"
-          >
-            <div class="">
-              {{ $t(item.label) }}
-            </div>
-          </el-segmented>
-        </div>
-        <div class="flex-1 w-0 flex items-center justify-end">
-          <Quick />
-        </div>
-      </div>
-
-      <div class="flex-1 h-0 overflow-auto">
-        <template v-for="item of tabsModel" :key="item.value">
-          <component
-            :is="item.component"
-            v-if="isRender(item)"
-            v-show="item.value === activeTab"
-          ></component>
-        </template>
-      </div>
-    </div>
+    <Layouts />
   </el-config-provider>
 </template>
 
 <script setup>
-import { i18n } from '$/locales/index.js'
+import { ElMessageBox } from 'element-plus'
 
+import { i18n } from '$/locales/index.js'
 import localeModel from '$/plugins/element-plus/locale.js'
-import { usePreferenceStore } from '$/store/preference/index.js'
 
+import { usePreferenceStore } from '$/store/preference/index.js'
 import { useThemeStore } from '$/store/theme/index.js'
-import { ElMessageBox } from 'element-plus'
-import About from './components/About/index.vue'
-import Device from './components/Device/index.vue'
-import Preference from './components/Preference/index.vue'
-import Quick from './components/Quick/index.vue'
+
+import Layouts from './layouts/index.vue'
 
 const locale = computed(() => {
   const i18nLocale = i18n.global.locale.value
@@ -57,31 +23,6 @@ const locale = computed(() => {
   return value
 })
 
-const tabsModel = [
-  {
-    label: 'device.list',
-    value: 'Device',
-    component: Device,
-  },
-  {
-    label: 'preferences.name',
-    value: 'Preference',
-    component: Preference,
-  },
-  {
-    label: 'about.name',
-    value: 'About',
-    component: About,
-  },
-]
-
-const activeTab = ref('Device')
-provide('activeTab', activeTab)
-
-const renderTab = ref('')
-const rendered = ref(true)
-const renderSign = ref(false)
-
 const themeStore = useThemeStore()
 const preferenceStore = usePreferenceStore()
 
@@ -110,54 +51,7 @@ async function showTips() {
     },
   )
 }
-
-function isRender(item) {
-  if (renderTab.value === item?.value) {
-    return rendered.value
-  }
-
-  return true
-}
-
-async function reRender(other) {
-  renderTab.value = other || activeTab.value
-
-  rendered.value = false
-  await nextTick()
-  rendered.value = true
-
-  renderTab.value = ''
-}
-
-function reRenderPost() {
-  renderSign.value = true
-}
-
-async function onTabChange(value) {
-  if (!renderSign.value) {
-    return false
-  }
-
-  if (['Device', 'Preference'].includes(value)) {
-    reRender()
-  }
-
-  renderSign.value = false
-}
-
-defineExpose({
-  reRenderPost,
-  reRender,
-})
 </script>
 
 <style lang="postcss" scoped>
-:deep() {
-  .el-segmented {
-    --el-border-radius-base: 5px;
-    --el-segmented-bg-color: transparent;
-    --el-segmented-item-selected-bg-color: var(--el-color-primary-light-9);
-    --el-segmented-item-selected-color: rgba(var(--color-primary-500), 1);
-  }
-}
 </style>

src/bootstrap/default/index.js

@@ -15,9 +15,13 @@ import '$/utils/console.js'
 import 'virtual:uno.css'
 import '$/styles/index.js'
 
-export default (App) => {
+export default (App, { router } = {}) => {
   const app = createApp(App)
 
+  if (router) {
+    app.use(router)
+  }
+
   app.use(store)
 
   app.use(plugins)
@@ -45,4 +49,6 @@ export default (App) => {
     // Remove Preload scripts loading
     postMessage({ payload: 'removeLoading' }, '*')
   })
+
+  return app
 }

src/components/Device/components/ControlBar/Tasks/index.vue → src/components/ControlBar/Tasks/index.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import TaskDialog from '$/components/Device/components/BatchActions/Tasks/components/TaskDialog/index.vue'
+import TaskDialog from '$/components/TaskDialog/index.vue'
 
 const props = defineProps({
   device: {

src/components/Quick/components/Task/index.vue → src/components/QuickBar/components/Task/index.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import TaskListDialog from './components/TaskListDialog/index.vue'
+import TaskListDialog from '$/components/TaskListDialog/index.vue'
 
 const taskListDialogRef = ref(null)
 

src/components/Device/components/BatchActions/Tasks/components/TaskDialog/index.vue → src/components/TaskDialog/index.vue

@@ -162,7 +162,7 @@
 </template>
 
 <script setup>
-import InputPath from '$/components/Preference/components/PreferenceForm/components/InputPath/index.vue'
+import InputPath from '$/components/PreferenceForm/components/InputPath/index.vue'
 
 import {
   timeUnit as intervalModel,

src/layouts/default/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    class="absolute inset-0 h-full flex flex-col px-4 pb-4 pt-1 space-y-4 overflow-hidden"
+  >
+    <div
+      class="flex items-center flex-none border-b border-gray-200 dark:border-gray-700 pb-1"
+    >
+      <div class="flex-none">
+        <el-segmented
+          v-slot="{ item }"
+          v-model="activeTab"
+          :options="tabsModel"
+        >
+          <div class="">
+            {{ $t(item.label) }}
+          </div>
+        </el-segmented>
+      </div>
+      <div class="flex-1 w-0 flex items-center justify-end">
+        <QuickBar />
+      </div>
+    </div>
+
+    <div class="flex-1 h-0 overflow-auto">
+      <RouterView v-slot="{ Component }">
+        <keep-alive>
+          <component :is="Component" />
+        </keep-alive>
+      </RouterView>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ElMessageBox } from 'element-plus'
+
+import QuickBar from '$/components/QuickBar/index.vue'
+import { computed } from 'vue'
+
+const router = useRouter()
+const route = useRoute()
+
+const tabsModel = [
+  {
+    label: 'device.list',
+    value: '/device',
+  },
+  {
+    label: 'preferences.name',
+    value: '/preference',
+  },
+  {
+    label: 'about.name',
+    value: '/about',
+  },
+]
+
+const activeTab = computed({
+  get() {
+    return route.path
+  },
+  set(value) {
+    router.push(value)
+  },
+})
+
+provide('activeTab', activeTab)
+</script>
+
+<style lang="postcss" scoped>
+:deep() {
+  .el-segmented {
+    --el-border-radius-base: 5px;
+    --el-segmented-bg-color: transparent;
+    --el-segmented-item-selected-bg-color: var(--el-color-primary-light-9);
+    --el-segmented-item-selected-color: rgba(var(--color-primary-500), 1);
+  }
+}
+</style>

src/layouts/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <component :is="activeLayout" class=""></component>
+</template>
+
+<script setup>
+import DefaultLayout from './default/index.vue'
+
+const LayoutMap = {
+  default: DefaultLayout,
+}
+
+const route = useRoute()
+
+const activeLayout = computed(() => LayoutMap[route.meta.layout || 'default'])
+</script>

src/main.js

@@ -1,5 +1,5 @@
 import bootstrap from './bootstrap/index.js'
-
+import { router } from './router'
 import App from './App.vue'
 
-bootstrap(App)
+bootstrap(App, { router })

src/components/About/index.vue → src/pages/about/index.vue

@@ -51,6 +51,7 @@ import { version } from '/package.json'
 import SponsorDialog from './components/SponsorDialog/index.vue'
 
 export default {
+  name: 'About',
   components: {
     SponsorDialog,
   },

src/components/Device/components/BatchActions/Tasks/index.vue → src/pages/device/components/BatchActions/Tasks/index.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import TaskDialog from './components/TaskDialog/index.vue'
+import TaskDialog from '$/components/TaskDialog/index.vue'
 
 const props = defineProps({
   devices: {

src/components/Device/components/MoreDropdown/components/Custom/components/DeployDialog/index.vue → src/pages/device/components/MoreDropdown/components/Custom/components/DeployDialog/index.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script setup>
-import PreferenceForm from '$/components/Preference/components/PreferenceForm/index.vue'
+import PreferenceForm from '$/components/PreferenceForm/index.vue'
 
 import { usePreferenceStore } from '$/store/index.js'