feat: layout

Author: allen

package-lock.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": {

package.json

@@ -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/Aside.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/components/layout/Header.vue

@@ -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/env.d.ts

@@ -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/layouts/default.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/404.vue renamed to src/pages/[...path].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>