refactor(home): 将首页组件拆分为独立模块并优化代码结构

将首页的加载动画、介绍动画和英雄区域拆分为独立的组件文件移除index.vue中冗余的样式和逻辑，通过组件引用方式重构优化代码组织结构，提高可维护性
2026-04-26 23:07:37 +08:00
parent 8b5f6720cd
commit 1bc881994f
4 changed files with 400 additions and 350 deletions
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 定义 loader 相关的 DOM 引用
+const loaderRef = ref<HTMLElement | null>(null)
+const loaderBarRef = ref<HTMLElement | null>(null)
+
+// 暴露这两个 ref 供外部使用
+defineExpose({
+  loaderRef,
+  loaderBarRef
+})
+</script>
+
+<template>
+  <div ref="loaderRef" class="page-loader" aria-hidden="true" v-once>
+    <div class="page-loader-content">
+      <p>Loading</p>
+      <span class="page-loader-line">
+        <span ref="loaderBarRef" class="page-loader-line-inner" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-loader {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: #000;
+  will-change: transform;
+}
+
+.page-loader-content {
+  width: min(220px, calc(100vw - 48px));
+  font-size: 12px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.page-loader-content p {
+  margin: 0 0 14px;
+}
+
+.page-loader-line {
+  display: block;
+  width: 100%;
+  height: 1px;
+  overflow: hidden;
+  background: rgb(255 255 255 / 20%);
+}
+
+.page-loader-line-inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  transform: scaleX(0);
+  transform-origin: left center;
+}
+</style>