MyfronyProject/src/index.vue

<template>
  <div class="elrow-top" :class="elrowtop">
    <el-row justify="center">
      <el-col :span="4" v-if="windowwidth">
        <div class="grid-content ep-bg-purple-dark">
          <div>清疯不颠</div>
        </div>
      </el-col>
      <el-col :span="14" justify="center">
        <div class="grid-content ep-bg-purple-dark">
          <el-menu :default-active="activeIndex" class="el-menu-demo" :collapse="false" @select="handleSelect">
            <el-menu-item index="/:type">
              首页
            </el-menu-item>
            <el-menu-item index="/aericle">
              文章
            </el-menu-item>
            <el-menu-item index="/nonsense">
              疯言疯语
            </el-menu-item>
            <el-menu-item index="/about">
              关于
            </el-menu-item>
            <el-menu-item index="/message">
              留言板
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="2" class="search-container" v-if="windowwidth">

      </el-col>
    </el-row>
  </div>
  <div class="hero" :class="{ 'newhero': classhero }" v-if="windowwidth">
    <h1 class="typewriter">{{ heroText }}</h1>
  </div>

  <div id="content-section" :class="{ 'visible': isconts }">
    <div class="nonsensetitle" v-if="classnonsenset">
      <div class="nonsensetitleconst" v-if="windowwidth">
        <h1>发癫中QAQ</h1>
      </div>
    </div>
    <!-- 状态模块 -->
    <leftmodlue class="leftmodluepage" :class="{ 'nonsensetmargintop': classnonsenset }" v-if="windowwidth" />
    <!-- 内容模块 -->
    <RouterView class="RouterViewpage" :class="{ 'nonsensetmargintop': classnonsenset }" />
  </div>
  <!-- 分页 -->
  <div class="Pagination">
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import leftmodlue from '@/views/leftmodlue.vue';

// hero 区域样式控制
const classhero = ref(false);
// 内容区可见性
const isconts = ref(false);
// 左侧模块滚动状态
const isScrollingleftmodlue = ref(false);
// 导航栏样式类名
const elrowtop = ref('transparent');
// 疯言疯语标题区显示
const classnonsenset = ref(false);
// 屏幕宽度标记（true为大屏，false为小屏）
const windowwidth = ref(true);
// 当前激活菜单
const activeIndex = ref('/:type');

// 打字机效果相关
const fullHeroText = '如果感到累了撸一管就好了';
const heroText = ref('');
let heroIndex = 0;
let heroTimer: number | undefined;

const startTypewriter = () => {
  heroText.value = '';
  heroIndex = 0;
  if (heroTimer) clearInterval(heroTimer);
  heroTimer = window.setInterval(() => {
    if (heroIndex < fullHeroText.length) {
      heroText.value += fullHeroText[heroIndex];
      heroIndex++;
    } else {
      clearInterval(heroTimer);
    }
  }, 100);
};

const router = useRouter();

/**
 * 菜单选择跳转
 */
const handleSelect = (key: string) => {
  router.push({ path: key });
};

/**
 * 根据路由路径设置页面状态
 */
const updatePageState = (url: string) => {
  classhero.value = url !== '/:type';
  classnonsenset.value = url === '/nonsense';
};

/**
 * 路由切换时处理页面状态和滚动
 */
router.beforeEach((to) => {
  updatePageState(to.path);
  setActiveIndex(to.path);
  // 跳转后回到顶部
  window.scrollTo({ top: 0, behavior: 'smooth' });
  // 首页内容区滚动动画仅大屏下生效
  if (to.path === '/:type') {
    isconts.value = window.innerWidth <= 768 ? true : false;
    // 首页时启动打字机
    startTypewriter();
  } else {
    isconts.value = true;
    heroText.value = '';
    if (heroTimer) clearInterval(heroTimer);
  }
});

/**
 * 滚动事件处理
 */
const handleScroll = () => {
  // 屏幕小于768时只切换导航栏样式，不做内容动画
  if (window.innerWidth < 768) {
    elrowtop.value = window.scrollY > 100 ? 'solid' : 'transparent';
    return;
  }
  // 导航栏样式切换
  if (window.scrollY > 1200) {
    elrowtop.value = 'hide';
  } else {
    elrowtop.value = window.scrollY > 100 ? 'solid' : 'transparent';
  }
  // 首页内容区滚动动画
  if (location.pathname === '/:type') {
    isconts.value = window.scrollY > 200;
    isScrollingleftmodlue.value = window.scrollY > 600;
  } else {
    isconts.value = true;
    isScrollingleftmodlue.value = true;
  }
};

/**
 * 添加滚动监听
 */
const addScrollListener = () => {
  window.addEventListener('scroll', handleScroll);
};

/**
 * 移除滚动监听
 */
const removeScrollListener = () => {
  window.removeEventListener('scroll', handleScroll);
};

/**
 * 屏幕尺寸变化处理
 * 小屏时移除滚动监听并设置相关状态
 * 大屏时添加滚动监听
 */
const handleResize = () => {
  if (window.innerWidth < 768) {
    windowwidth.value = false;
    isScrollingleftmodlue.value = true;
    classnonsenset.value = false;
    isconts.value = true;
    removeScrollListener();
  } else {
    windowwidth.value = true;
    addScrollListener();
  }
};

/**
 * 设置当前激活菜单
 */
const setActiveIndex = (locationpathname) => {
  activeIndex.value = locationpathname;
};

// 生命周期钩子
onMounted(() => {
  handleResize();
  window.addEventListener('resize', handleResize);
  // 初始进入时如果是首页，启动打字机
  if (window.location.pathname === '/:type') {
    startTypewriter();
  }
});

onUnmounted(() => {
  removeScrollListener();
  window.removeEventListener('resize', handleResize);
  if (heroTimer) clearInterval(heroTimer);
});
</script>
<style>
</style>