feat: layout

package.json

@@ -60,8 +60,9 @@
     "unocss": "0.62.2",
     "unplugin-auto-import": "0.18.2",
     "unplugin-vue-components": "0.27.4",
+    "unplugin-vue-router": "0.10.8",
     "vite": "5.4.2",
-    "vite-plugin-pages": "0.32.3",
+    "vite-plugin-vue-layouts": "0.11.0",
     "vue-tsc": "2.0.29"
   },
   "resolutions": {

src/components/layout/Aside.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import { routes } from 'vue-router/auto-routes'
 import { APP_NAME } from '@/config/app'
-import router from '~pages'
 
 const route = useRoute()
 const { isCollapse } = useStore('app')
-const menus = getMenus(router, '')
+const menus = getMenus(routes, '')
 
 function getMenus(route: any, path: string) {
   return route

src/components/layout/Header.vue

@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import type { RouteRecordNameGeneric } from 'vue-router'
-import { onBeforeRouteUpdate } from 'vue-router'
-
 const { logout } = useStore('user')
 
 const {
   isCollapse,
   tabs,
   updateCollapse,
-  addTab,
   removeTab,
   removeOtherTab,
   removeRightTab,
@@ -20,21 +16,12 @@ const router = useRouter()
 
 // 面包屑
 const breadcrumbArr = computed(() => {
-  return route.matched.filter((item) => !['/', '/dashboard'].includes(item.path))
-})
-
-// 更新头部tabs
-onBeforeRouteUpdate((to, _from, next) => {
-  if (to.meta.title) {
-    const tab = { title: to.meta.title, name: to.name } as App.Tab
-    addTab(tab)
-  }
-  next()
+  return route.matched.filter((item) => !['/'].includes(item.path) && item.meta.title)
 })
 
 // 切换tabs
 function tabClick(val: number | string = 0, delay = true) {
-  let name: RouteRecordNameGeneric
+  let name: any
   if (typeof val === 'number') {
     name = tabs.value[val].name
   } else {

src/env.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="vite/client" />
-/// <reference types="vite-plugin-pages/client" />
+/// <reference types="unplugin-vue-router/client" />
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'

src/layouts/default.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+const { tabs } = useStore('app')
+
+const router = useRouter()
+const routes = router.getRoutes()
+const needCacheRouteNames = routes
+  .filter((item) => item.meta && !item.meta.notCache)
+  .map((item) => item.name)
+
+const cacheList = computed(() => {
+  const arr = tabs.value
+    .map((item) => item.name)
+    .filter((item) => needCacheRouteNames.includes(item))
+  return arr
+})
+</script>
+
+<template>
+  <el-container>
+    <el-aside>
+      <Aside />
+    </el-aside>
+    <el-container>
+      <el-header>
+        <Header />
+      </el-header>
+      <el-main>
+        <router-view v-slot="{ Component, route }">
+          <transition name="fade-transform" mode="out-in">
+            <keep-alive :include="cacheList">
+              <component :is="Component" :key="route.name" />
+            </keep-alive>
+          </transition>
+        </router-view>
+      </el-main>
+    </el-container>
+  </el-container>
+  <el-backtop target=".el-main" />
+</template>

src/pages/index.vue

@@ -1,39 +1,59 @@
+<route lang="json">
+{
+  "meta": {
+    "title": "dashboard",
+    "icon": "clarity:dashboard-solid",
+    "sort": 1
+  }
+}
+</route>
+
 <script lang="ts" setup>
-const { tabs } = useStore('app')
+import apiTest from '@/api/apiTest'
 
 const router = useRouter()
-const routes = router.getRoutes()
-const needCacheRouteNames = routes
-  .filter((item) => item.meta && !item.meta.notCache)
-  .map((item) => item.name)
-
-const cacheList = computed(() => {
-  const arr = tabs.value
-    .map((item) => item.name)
-    .filter((item) => needCacheRouteNames.includes(item))
-  return arr
-})
+function pushRouter(path: string) {
+  router.push(path)
+}
+
+const { name, fullName, updateName } = useStore('test')
+const { userInfo, setUserInfo } = useStore('user')
+
+const dateVal = ref(new Date())
+
+const icons = ['foundation-indent-more', 'foundation-indent-less']
+
+async function getTest() {
+  const res = await apiTest.getTest({ a: 1, isLoading: true })
+  if (!res) return
+  console.log(res, 111)
+  // res.data.age
+  // res.data.name
+}
+async function postTest() {
+  const res = await apiTest.postTest({ a: 2 })
+  if (!res) return
+  // res.data.val
+}
 </script>
 
 <template>
-  <el-container>
-    <el-aside>
-      <Aside />
-    </el-aside>
-    <el-container>
-      <el-header>
-        <Header />
-      </el-header>
-      <el-main>
-        <router-view v-slot="{ Component, route }">
-          <transition name="fade-transform" mode="out-in">
-            <keep-alive :include="cacheList">
-              <component :is="Component" :key="route.name" />
-            </keep-alive>
-          </transition>
-        </router-view>
-      </el-main>
-    </el-container>
-  </el-container>
-  <el-backtop target=".el-main" />
+  <div class="page-index">
+    <div>控制台</div>
+    <div @click="pushRouter('test1_1')">test1_1</div>
+    <div @click="pushRouter('test2')">test2</div>
+    <div>name:{{ name }}</div>
+    <div>fullName:{{ fullName }}</div>
+    <div @click="updateName('333')">updateName</div>
+    <el-button class="br-10 m-10 w-200 c-#387"> I am ElButton </el-button>
+    <el-date-picker v-model="dateVal" type="date" placeholder="Pick a day" />
+    <div v-for="icon in icons" :key="icon" :class="icon" />
+    <div @click="getTest">getTest</div>
+    <div @click="postTest">postTest</div>
+    <div @click="setUserInfo({ name: 'allen', token: String(Math.random()) })">setUserInfo</div>
+    <div>userInfo:{{ JSON.stringify(userInfo) }}</div>
+    <div v-for="i in 50" :key="i">test</div>
+  </div>
 </template>
+
+<style lang="scss" scoped></style>

src/pages/login.vue

@@ -1,3 +1,11 @@
+<route lang="json">
+{
+  "meta": {
+    "layout": false
+  }
+}
+</route>
+
 <script lang="ts" setup>
 const { setUserInfo } = useStore('user')
 const router = useRouter()
@@ -11,7 +19,5 @@ function login() {
 </script>
 
 <template>
-  <div @click="login">
-    login
-  </div>
+  <div @click="login">login</div>
 </template>

src/router/index.ts

@@ -2,36 +2,25 @@ import 'nprogress/nprogress.css'
 
 import NProgress from 'nprogress'
 import { createRouter, createWebHistory } from 'vue-router'
+import { setupLayouts } from 'virtual:generated-layouts'
 
-import routes from '~pages'
+import { routes } from 'vue-router/auto-routes'
 
 const router = createRouter({
   history: createWebHistory(),
-  routes: [
-    {
-      path: '/login',
-      name: 'login',
-      component: () => import('../pages/login.vue'),
-    },
-    {
-      path: '/',
-      name: 'index',
-      redirect: '/dashboard',
-      component: () => import('../pages/index.vue'),
-      children: [
-        ...routes,
-        { path: '/404', name: '404', component: () => import('../pages/404.vue') },
-        { path: '/:catchAll(.*)', redirect: '/404' },
-      ],
-    },
-  ],
+  routes: setupLayouts(routes),
 })
 
 router.beforeEach((to, _from, next) => {
   NProgress.start()
   if (to.path === '/login') return next()
   const { logged } = useStore('user')
   if (!logged.value) return next('/login')
+  const { addTab } = useStore('app')
+  if (to.meta.title) {
+    const tab = { title: to.meta.title, name: to.name } as App.Tab
+    addTab(tab)
+  }
   next()
 })
 

src/store/app.ts

@@ -1,4 +1,4 @@
-const defaultTab: App.Tab = { title: 'dashboard', name: 'dashboard' }
+const defaultTab: App.Tab = { title: 'dashboard', name: '/' }
 
 export default defineStore({
   id: 'app',

src/typed-router.d.ts

@@ -0,0 +1,32 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/[...path]': RouteRecordInfo<'/[...path]', '/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
+    '/login': RouteRecordInfo<'/login', '/login', Record<never, never>, Record<never, never>>,
+    '/test1': RouteRecordInfo<'/test1', '/test1', Record<never, never>, Record<never, never>>,
+    '/test1/test1_1': RouteRecordInfo<'/test1/test1_1', '/test1/test1_1', Record<never, never>, Record<never, never>>,
+    '/test1/test1_1/test1_1_1': RouteRecordInfo<'/test1/test1_1/test1_1_1', '/test1/test1_1/test1_1_1', Record<never, never>, Record<never, never>>,
+    '/test1/test1_2': RouteRecordInfo<'/test1/test1_2', '/test1/test1_2', Record<never, never>, Record<never, never>>,
+    '/test1/test1_3': RouteRecordInfo<'/test1/test1_3', '/test1/test1_3', Record<never, never>, Record<never, never>>,
+    '/test2': RouteRecordInfo<'/test2', '/test2', Record<never, never>, Record<never, never>>,
+    '/test3': RouteRecordInfo<'/test3', '/test3', Record<never, never>, Record<never, never>>,
+  }
+}

tsconfig.json

@@ -11,13 +11,13 @@
       "@/*": ["src/*"]
     },
     "resolveJsonModule": true,
-    "types": ["element-plus/global"],
+    "types": ["element-plus/global", "unplugin-vue-router/client", "vite-plugin-vue-layouts/client"],
     "strict": true,
     "sourceMap": true,
     "esModuleInterop": true,
     "isolatedModules": false,
     "skipLibCheck": true
   },
   "references": [{ "path": "./tsconfig.node.json" }],
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "./typed-router.d.ts"]
 }