refactor:抽取悬浮菜单组件

Author: Java-Edge

Diff for: src/components/common/FloatMenu.vue

@@ -0,0 +1,91 @@
+<template>
+  <ul id="menu">
+    <li 
+      v-for="(item, index) in menuItems" 
+      :key="index"
+      :title="item.name"
+      :class="item.name === activeTitle ? 'active' : ''"
+      @click.stop="onMenuClick(item, index)"
+    >
+      {{ item.name }}
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  menuItems: {
+    type: Array,
+    required: true
+  },
+  headerOffset: {
+    type: Number,
+    default: 45
+  }
+})
+
+const emit = defineEmits(['menuClick'])
+
+const activeTitle = ref(null)
+
+// 滚动到指定部分
+const onMenuClick = (item, index) => {
+  activeTitle.value = item.name
+  
+  if(item.id) {
+    const element = document.querySelector(item.id)
+    if(element) {
+      const elementPosition = element.getBoundingClientRect().top
+      const offsetPosition = elementPosition + window.pageYOffset - props.headerOffset
+      
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: "smooth"
+      })
+    }
+  }
+  
+  emit('menuClick', item, index)
+}
+</script>
+
+<style lang="scss" scoped>
+#menu {
+  position: fixed;
+  left: 0;
+  top: 50%;
+  width: 120px;
+  transform: translateY(-50%);
+  background-color: #fff;
+  box-shadow: 0 4px 8px 0 rgba(7, 17, 27, .1);
+  border-radius: 0 8px 8px 0;
+  text-align: center;
+  color: #6d7278;
+  z-index: 3;
+  user-select: none;
+}
+
+#menu li {
+  position: relative;
+  padding: 16px 0;
+  cursor: pointer;
+  transition: color .2s;
+}
+
+#menu li.active,
+#menu li:hover {
+  color: #e02020;
+}
+
+#menu li+li::after {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  margin-left: -30px;
+  content: '';
+  width: 60px;
+  border: 1px solid #f3f5f7;
+}
+</style> 

Diff for: src/views/course.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="main">
-    <ul id="menu">
-      <li :title="item.name" v-for="(item, index) in menuData" :key="index" @click.stop="rollTo(item, index)"
-        :class="item.name === heightTitle ? 'active' : ''">
-        {{ item.name }}
-      </li>
-    </ul>
+    <FloatMenu 
+      :menuItems="menuData"
+      @menuClick="onMenuClick"
+    />
 
     <!-- 学习路线 -->
     <div class="bg000" id="roadMap">
@@ -40,6 +38,7 @@
 
 <script setup>
 import { onMounted, ref } from "vue";
+import FloatMenu from "@/components/common/FloatMenu.vue";
 import CourseList from "./CourseList.vue";
 import study from "./home/study.vue";
 import { getCarouselData, getCourseList } from "@/api/videoCourse";
@@ -55,20 +54,10 @@ const heightTitle = ref(null);
 const courses = ref([]);
 const courseResp = ref([]);
 
-
-// 滚动到指定部分
-const rollTo = (selector) => {
-  heightTitle.value = selector.name;
-  const element = document.querySelector(selector.id);
-  const headerOffset = 45;
-  const elementPosition = element.getBoundingClientRect().top;
-  const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
-
-  window.scrollTo({
-    top: offsetPosition,
-    behavior: "smooth"
-  });
-};
+const onMenuClick = (item, index) => {
+  // 可以添加额外的点击处理逻辑
+  console.log('Menu clicked:', item.name)
+}
 
 // 获取并设置视频课程数据
 const getCourses = () => {