From 6c477d923b2928ae77feaf68addd5863aadfd386 Mon Sep 17 00:00:00 2001
From: fmk1023 <fmk1023@noreply.gitcode.com>
Date: Thu, 11 Dec 2025 10:08:18 +0800
Subject: [PATCH] =?UTF-8?q?Tcode=E5=B9=B3=E5=8F=B0=E6=94=B9=E9=80=A0?=
 =?UTF-8?q?=E5=8D=87=E7=BA=A7-LinePage=E9=A1=B5=E9=9D=A2=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Jyh/LinePage/index.vue | 82 ++++++++++++++++++++++++++++----
 1 file changed, 73 insertions(+), 9 deletions(-)

diff --git a/src/views/Jyh/LinePage/index.vue b/src/views/Jyh/LinePage/index.vue
index e900d33..5f01ec0 100644
--- a/src/views/Jyh/LinePage/index.vue
+++ b/src/views/Jyh/LinePage/index.vue
@@ -20,7 +20,7 @@
           <div class="descBox"><p class="desc1">分布式协作开发</p>
             <p class="desc2">基于Git打造分布式代码托管环境，提供免费公、私有代码仓库；</p>
             <p class="desc3">支持在线文件编辑、代码分支管理、协作贡献统计、代码仓库复刻（Fork）、贡献合并请求（PR）、群智贡献审阅等功能；</p></div>
-          <div class="hadoopCode activeCode">
+          <div class="hadoopCode"  :ref="(el) => setTargetRef(el, 'hadoop')">
 <!--            <li>-->
 <!--              <pre class="word-item" style="animation-delay: 0.2s;"><span class="codenum">1</span><span><span-->
 <!--                class="code-green">git remote</span> add origin https://git.trustie.net/Gitlink/Gitlink.git</span></pre>-->
@@ -68,7 +68,7 @@
             <img src="@/assets/v3/Line/codeafter.c3088c74.png" alt="运行结果" class="activeImg"></div>
         </div>
         <p class="hadoopdesc">让您的项目在这里健康、快速的成长！</p></div>
-      <div class="oneStop activeCode" id="oneStop">
+      <div class="oneStop"  :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
         <div class="oneStopContent">
           <div class="osLeftMain"><img src="@/assets/v3/Line/2-2-1.afd0f2f5.png" alt="" width="520px"
                                        class="osleftPosi"><img src="@/assets/v3/Line/2-2-head.5e69dbb2.png" alt=""
@@ -83,7 +83,7 @@
         <img
           src="data:image/png;base64,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"
           alt="" height="83px" class="imgring"></div>
-      <div class="highDevops activeCode" id="highDevops">
+      <div class="highDevops" :ref="(el) => setTargetRef(el, 'highDevops')" id="highDevops">
         <div class="highDoTitle"><span>高效流水线运维</span></div>
         <div class="highDoSubtitle">融合DevOps思想，提供轻量级的工作流引擎（Engine），<span>打通编码、测试、构建、部署</span>等开发运维环节；支持<span>自定义配置、代码静态扫描、构建自动触发、容器镜像托管</span>等功能，同时支持接入第三方运维工具。
         </div>
@@ -95,12 +95,12 @@
               src="@/assets/v3/Line/2-3-4.339b2f1c.png" alt="" width="413px" class="highImg1"></div>
           <p class="highDoBottondesc">让您的代码更加快速、可靠地形成高质量的产品！</p></div>
       </div>
-      <div class="multipleAnalyse activeCode" id="multipleAnalyse"><span class="title">多层次代码分析</span>
+      <div class="multipleAnalyse" :ref="(el) => setTargetRef(el, 'multipleAnalyse')" id="multipleAnalyse"><span class="title">多层次代码分析</span>
         <div class="maContent"></div>
         <p class="desc">提供软件软代码和芯片RTL代码的溯源分析、文件级和组件级许可证识别及风险分析、输入性开源漏洞检测和加固建议，支持分析结果的多层次可视化展示。</p></div>
       <div class="multidimensional" style="opacity: 1">
         <div style="height: 168px;"></div>
-        <div class="activeCode" id="multidimensional">
+        <div class="" :ref="(el) => setTargetRef(el, 'multidimensional')" id="multidimensional">
           <div class="multidimensinalhalf">
             <div><p class="halfTitle">多维度用户画像</p>
               <p class="halfsubTitle"><span>实时采集和分析平台中的各类开源资源数据，</span>搭建多维度用户画像评估系统；</p></div>
@@ -119,10 +119,74 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "index"
-}
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+
+// 1. 定义响应式对象存储所有目标元素（键：标识，值：DOM元素）
+const targetElements = ref({});
+// 2. 存储交叉观察者实例
+let observer = null;
+
+// 3. 规范的 ref 收集函数：处理元素挂载/卸载
+const setTargetRef = (el, key) => {
+  if (el) {
+    // 元素挂载：存入对象
+    targetElements.value[key] = el;
+  } else {
+    // 元素卸载：从对象中移除
+    delete targetElements.value[key];
+  }
+};
+
+// 4. 初始化交叉观察者（批量监听）
+const initObserver = () => {
+  // 获取所有元素的数组
+  const elements = Object.values(targetElements.value);
+  if (elements.length === 0) return;
+
+  const observerOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.1,
+  };
+
+  const observerCallback = (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('activeCode');
+      } else {
+        // 可选：离开视口时移除类
+        // entry.target.classList.remove('activeCode');
+      }
+    });
+  };
+
+  observer = new IntersectionObserver(observerCallback, observerOptions);
+  // 批量监听所有元素
+  elements.forEach((el) => {
+    observer.observe(el);
+  });
+};
+
+// 5. 组件挂载时：等待DOM渲染完成后初始化
+onMounted(async () => {
+  // 清空原有元素（防止重渲染重复）
+  targetElements.value = {};
+  await nextTick(); // 等待DOM渲染完成
+  initObserver();
+});
+
+// 6. 组件卸载时：批量销毁观察者
+onUnmounted(() => {
+  if (observer) {
+    // 停止监听所有元素
+    Object.values(targetElements.value).forEach((el) => {
+      observer.unobserve(el);
+    });
+    observer.disconnect();
+    observer = null;
+  }
+});
 </script>
 
 <style lang="scss" scoped>