chore: update

src/App.vue

-<script lang="ts" setup>
-// import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-// const breakpoints = useBreakpoints(breakpointsTailwind)
-// const isMobile = breakpoints.smaller('md')
-const isMobile = false
+<script setup lang="ts">
+import { useDevice } from '@/composables/useDevice'
+const { mobile } = useDevice()
 </script>
 
 <template>
-  <router-view :class="{ 'is-h5': isMobile, 'is-pc': !isMobile }" />
+  <router-view :class="{ 'is-h5': mobile, 'is-pc': !mobile }" />
 </template>

src/components/layout/Header.vue

@@ -5,6 +5,11 @@ import { useUserStore } from '@/stores/user'
 import { useRoute } from 'vue-router'
 import AppNav from './Nav.vue'
 
+interface Props {
+  fixed?: boolean
+}
+const props = defineProps<Props>()
+
 const route = useRoute()
 const user = useUserStore()
 const LOGIN_URL = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
@@ -22,6 +27,7 @@ watch(route, () => {
 const classNames = computed(() => {
   return {
     'has-menu': menuVisible.value,
+    'is-fixed': props.fixed,
     'is-scrolled': isScrolled.value
   }
 })
@@ -45,7 +51,7 @@ const isScrolled = computed(() => {
       <div class="app-header-left">
         <div class="logo">
           <router-link to="/">
-            <img src="@/assets/images/logo.png" v-if="isScrolled" />
+            <img src="@/assets/images/logo.png" v-if="isScrolled || !fixed" />
             <img src="@/assets/images/logo_white.png" v-else />
           </router-link>
         </div>
@@ -58,8 +64,8 @@ const isScrolled = computed(() => {
         <template v-if="user.isLogin">
           你好，{{ user.userName }}
           <div class="app-header-logout" @click="handleLogout">
-            <img v-if="isScrolled" src="https://webapp-pub.ezijing.com/project/saas/logout.png" />
-            <img v-else src="https://webapp-pub.ezijing.com/project_online/fi/logout_white.png" />
+            <img src="https://webapp-pub.ezijing.com/project/saas/logout.png" v-if="isScrolled || !fixed" />
+            <img src="https://webapp-pub.ezijing.com/project_online/fi/logout_white.png" v-else />
             退出
           </div>
         </template>
@@ -74,22 +80,25 @@ const isScrolled = computed(() => {
 
 <style lang="scss">
 .app-header {
-  position: fixed;
+  position: sticky;
+  top: 0;
   left: 0;
   right: 0;
-  color: #aa1941;
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
   z-index: 1000;
-  .cell {
-    color: #fff !important;
+  &.is-fixed {
+    position: fixed;
+    left: 0;
+    right: 0;
+    color: #fff;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
+    .button-default {
+      color: #fff;
+    }
   }
   &.is-scrolled {
-    color: #fff;
+    color: #333;
     background: #fff;
     box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
-    .cell {
-      color: #333 !important;
-    }
     .button-default {
       color: #333;
     }
@@ -114,8 +123,14 @@ const isScrolled = computed(() => {
   }
 }
 .app-header-right {
+  .study {
+    font-size: 18px;
+    line-height: 50px;
+    margin-right: 30px;
+    font-weight: 400;
+    cursor: pointer;
+  }
   display: flex;
-  color: #333;
 
   .app-header-logout {
     // background: url('https://webapp-pub.ezijing.com/project/saas/logout.png') no-repeat left center;
@@ -134,7 +149,7 @@ const isScrolled = computed(() => {
     padding: 0 10px;
     font-size: 14px;
     line-height: 24px;
-    color: #fff;
+    color: #333;
     text-align: center;
     border: 1px solid #eaeaea;
     box-sizing: border-box;

src/components/layout/Index.vue

+<script setup lang="ts">
+import AppHeader from './Header.vue'
+import AppFooter from './Footer.vue'
+const attrs = useAttrs()
+</script>
+
 <template>
   <div class="app-layout">
-    <AppHeader></AppHeader>
+    <AppHeader v-bind="attrs"></AppHeader>
     <section class="app-layout-container">
-      <router-view></router-view>
+      <router-view :key="$route.fullPath"></router-view>
     </section>
     <AppFooter></AppFooter>
   </div>
 </template>
-
-<script setup lang="ts">
-import AppHeader from './Header.vue'
-import AppFooter from './Footer.vue'
-</script>

src/components/layout/Nav.vue

@@ -32,7 +32,7 @@ const navList = [
     > .cell {
       font-size: 18px;
       line-height: 50px;
-      color: #333;
+      // color: #333;
     }
     > .tree-item-group {
       margin-top: -4px;

src/components/layout/TreeItem.vue

@@ -30,7 +30,7 @@ function toggleVisible(event: Event) {
   <li class="tree-item" :class="{ 'is-active': isActive }">
     <div class="cell" :class="{ bold: isFolder }" @click.capture="toggleVisible">
       <div class="cell-title">
-        <a :href="item.path">{{ item.name }}</a>
+        <router-link :to="item.path">{{ item.name }}</router-link>
       </div>
       <div class="cell-icon" v-if="isFolder">
         <i class="el-icon-arrow-up" v-if="isOpen"></i>

src/composables/useDevice.ts

+export function useDevice() {
+  const navigator = window.navigator
+
+  const userAgent = ref(navigator.userAgent)
+
+  const mobile = computed(() => {
+    return /iphone/i.test(userAgent.value) || (/android/i.test(userAgent.value) && /mobile/i.test(userAgent.value))
+  })
+
+  const wechat = computed(() => {
+    return /micromessenger/i.test(userAgent.value)
+  })
+
+  const alipay = computed(() => {
+    return /alipayclient/i.test(userAgent.value)
+  })
+
+  addEventListener('resize', () => {
+    if (navigator) userAgent.value = navigator.userAgent
+  })
+
+  return { userAgent, mobile, wechat, alipay }
+}

src/modules/home/index.ts

@@ -5,6 +5,7 @@ export const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     component: AppLayout,
+    props: { fixed: true },
     children: [{ path: '', component: () => import('./views/Index.vue') }]
   }
 ]

src/router/index.ts

@@ -2,12 +2,15 @@ import { createRouter, createWebHistory } from 'vue-router'
 // import { useUserStore } from '@/stores/user'
 
 const router = createRouter({
-  scrollBehavior() {
+  scrollBehavior(to) {
+    if (to.hash) {
+      return { el: to.hash, top: 94 }
+    }
     // 始终滚动到顶部
     return { top: 0 }
   },
   history: createWebHistory(),
-  routes: [{ path: '/:pathMatch(.*)*', redirect: '/' }]
+  routes: [{ path: '/:pathMatch(.*)*', redirect: '/home' }]
 })
 
 // router.beforeEach((to, from, next) => {