refactor: 重构布局和组件结构

- 删除冗余的index.vue文件，将其功能整合到MainLayout.vue
- 修改LeftModule.vue中的菜单项文字从"文章"改为"目录"
- 更新打字机效果的默认文本为测试内容
- 优化jsconfig.json格式

jsconfig.json

@@ -1,4 +1,5 @@
 {
+
   "include": ["src/**/*"],
   "compilerOptions": {
     "paths": {

src/components/LeftModule.vue

@@ -23,7 +23,7 @@
           <el-menu-item index="/article-list">
             <el-icon>
             </el-icon>
-            <span>文章</span>
+            <span>目录</span>
           </el-menu-item>
           <el-menu-item index="/nonsense">
             <el-icon>

src/index.vue

@@ -1,210 +0,0 @@
-<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">
-        <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;
-  } else {
-    windowwidth.value = true;
-
-  }
-};
-
-/**
- * 设置当前激活菜单
- */
-const setActiveIndex = (locationpathname) => {
-  activeIndex.value = locationpathname;
-};
-
-// 生命周期钩子
-onMounted(() => {
-  handleResize(); addScrollListener();
-  window.addEventListener('resize', handleResize);
-  // 初始进入时如果是首页，启动打字机
-  if (window.location.pathname === '/:type') {
-    startTypewriter();
-  }
-});
-
-onUnmounted(() => {
-  // removeScrollListener();
-  window.removeEventListener('resize', handleResize);
-  if (heroTimer) clearInterval(heroTimer);
-});
-</script>
-<style></style>

src/layouts/MainLayout.vue

@@ -78,7 +78,7 @@ const windowwidth = ref(true);
 const activeIndex = ref('/:type');
 
 // 打字机效果相关
-const fullHeroText = '如果感到累了撸一管就好了';
+const fullHeroText = '测试打字机效果';
 const heroText = ref('');
 let heroIndex = 0;
 let heroTimer: number | undefined;