feat: enhance ChronologyOfStellarTrails with localStorage integration for task navigation and improve button interactions

Author: minorcell

pages/TwelveOrderStars.html

@@ -123,7 +123,7 @@ <h4 class="detail">发射地点：酒泉卫星发射基地</h4>
                 </div>
             </div>
             <div class="video-player" id="video-player">
-                <video id="launch-video">
+                <video id="launch-video" autoplay loop controls>
                     <source src="../assets/videos/launch.mp4" type="video/mp4">
                     您的浏览器不支持视频播放
                 </video>

scripts/ChronologyOfStellarTrails/detail.js

@@ -547,12 +547,60 @@ function handleNavigation() {
   });
 }
 
+/**
+ * 根据localStorage中的ID初始化当前任务索引
+ */
+function initCurrentMissionIndex() {
+  const selectedCardId = localStorage.getItem('selectedCardId');
+
+  if (selectedCardId) {
+    // 根据ID查找对应的任务索引
+    const missionIndex = missionData.findIndex(mission => mission.id == selectedCardId);
+
+    if (missionIndex !== -1) {
+      currentMissionIndex = missionIndex;
+    } else {
+      // 如果找不到对应的ID，默认显示第一个
+      currentMissionIndex = 0;
+    }
+
+    // 清除localStorage中的数据，避免下次进入时还是这个ID
+    localStorage.removeItem('selectedCardId');
+  } else {
+    // 如果没有存储的ID，默认显示第一个
+    currentMissionIndex = 0;
+  }
+}
+
+/**
+ * 处理返回按钮点击
+ */
+function handleBackButton() {
+  const backButton = document.querySelector('.arrow');
+  if (backButton) {
+    backButton.addEventListener('click', (e) => {
+      e.preventDefault();
+
+      // 保存当前任务的ID到localStorage，用于返回时滚动定位
+      const currentMission = missionData[currentMissionIndex];
+      if (currentMission) {
+        localStorage.setItem('scrollToCardId', currentMission.id);
+      }
+
+      // 跳转回列表页
+      window.location.href = 'ChronologyOfStellarTrails.html';
+    });
+  }
+}
+
 // 初始化页面
 document.addEventListener("DOMContentLoaded", function () {
+  initCurrentMissionIndex(); // 根据localStorage初始化任务索引
   StartBackground(); // 初始化星空背景和流星效果
   initOrbitAnimation(); // 初始化轨道动画
-  updateMissionContent(currentMissionIndex, 'initial'); // 初始加载第一条任务数据
+  updateMissionContent(currentMissionIndex, 'initial'); // 初始加载对应的任务数据
   handleNavigation(); // 设置导航按钮的点击事件监听
+  handleBackButton(); // 设置返回按钮的点击事件监听
   // 初始化鼠标控制器
   new Mouse({
     defaultCursor: '../assets/images/common/MouseDefault.svg',

scripts/ChronologyOfStellarTrails/index.js

@@ -129,16 +129,16 @@ function renderCards(container, cardsData) {
 
     let btn = '';
     if (index % 2 === 0) {
-      btn = `<a href="ChronologyOfStellarTrailsDetails.html" class="detail-btn">
+      btn = `<button class="detail-btn" data-id="${card.id}">
             查看详情
             <svg xmlns="http://www.w3.org/2000/svg" style="margin-left: 2rem;" width="128" height="128" viewBox="0 0 24 24"><path fill="#ffffff" d="M16.175 13H4v-2h12.175l-5.6-5.6L12 4l8 8l-8 8l-1.425-1.4z"/></svg>
-          </a>`
+          </button>`
 
     } else {
-      btn = `<a href="ChronologyOfStellarTrailsDetails.html" class="detail-btn">
+      btn = `<button class="detail-btn" data-id="${card.id}">
             <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 2rem;" width="128" height="128" viewBox="0 0 24 24"><path fill="#ffffff" d="M16.175 13H4v-2h12.175l-5.6-5.6L12 4l8 8l-8 8l-1.425-1.4z"/></svg>
             查看详情
-          </a>`
+          </button>`
     }
 
 
@@ -161,6 +161,29 @@ function renderCards(container, cardsData) {
 
     container.appendChild(cardElement);
   });
+
+  // 添加详情按钮点击事件监听
+  addDetailButtonListeners();
+}
+
+/**
+ * 为详情按钮添加点击事件监听
+ */
+function addDetailButtonListeners() {
+  const detailButtons = document.querySelectorAll('.detail-btn');
+
+  detailButtons.forEach(button => {
+    button.addEventListener('click', (e) => {
+      e.preventDefault();
+      const cardId = button.getAttribute('data-id');
+
+      // 将选中的卡片ID存储到localStorage
+      localStorage.setItem('selectedCardId', cardId);
+
+      // 跳转到详情页
+      window.location.href = 'ChronologyOfStellarTrailsDetails.html';
+    });
+  });
 }
 
 /**
@@ -202,6 +225,41 @@ function observeTitles() {
   });
 }
 
+/**
+ * 滚动到指定ID的卡片
+ */
+function scrollToCard() {
+  const scrollToCardId = localStorage.getItem('scrollToCardId');
+
+  if (scrollToCardId) {
+    // 清除localStorage中的数据
+    localStorage.removeItem('scrollToCardId');
+
+    // 等待页面渲染完成后再滚动
+    setTimeout(() => {
+      const targetCard = document.querySelector(`[data-id="${scrollToCardId}"]`);
+
+      if (targetCard) {
+        // 滚动到目标卡片，并居中显示
+        targetCard.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'nearest'
+        });
+
+        // 添加高亮效果
+        targetCard.style.transition = 'all 0.5s ease';
+        targetCard.style.transform = 'scale(1.02)';
+
+        // 3秒后移除高亮效果
+        setTimeout(() => {
+          targetCard.style.transform = '';
+        }, 2000);
+      }
+    }, 200); // 等待500ms确保页面渲染完成
+  }
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   const header = document.querySelector('.header');
   const starContainer = document.querySelector('.star-bg');
@@ -239,6 +297,9 @@ document.addEventListener("DOMContentLoaded", () => {
   // 监听标题可见性
   observeTitles();
 
+  // 检查是否需要滚动到特定卡片
+  scrollToCard();
+
   // 初始化鼠标控制器
   new Mouse({
     defaultCursor: '../assets/images/common/MouseDefault.svg',

styles/ChronologyOfStellarTrails/index.css

@@ -67,6 +67,7 @@ body {
   padding: 2rem 0;
   display: flex;
   flex-direction: column;
+  overflow: visible;
 }
 
 /* 中轴线 */
@@ -86,9 +87,11 @@ body {
 .card {
   position: relative;
   width: 100%;
-  height: 64.7rem;
+  min-height: 64.7rem;
   opacity: 0;
   transition: opacity 0.8s ease, transform 0.8s ease;
+  z-index: 10;
+  overflow: visible;
 }
 
 .card.visible {
@@ -98,12 +101,14 @@ body {
 
 .card .left {
   width: 65.067rem;
+  position: relative;
 }
 
 /* 奇数卡片在左侧 */
 .card:nth-child(odd) .left {
   align-self: flex-start;
   margin-right: auto;
+  z-index: 100;
 }
 
 /* 偶数卡片在右侧 */
@@ -128,6 +133,8 @@ body {
   color: white;
   display: flex;
   flex-direction: column;
+  position: relative;
+  overflow: visible;
 }
 
 .card .left .card-year {
@@ -163,16 +170,33 @@ body {
   font-size: 2.4rem;
   font-family: fys, sans-serif;
   color: rgba(255, 255, 255, 1);
+  position: relative;
   z-index: 1000;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background-color: transparent;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.card .left .detail-btn:hover {
+  transform: scale(1.05);
+  filter: brightness(1.1);
 }
 
 .card:nth-child(odd) .detail-btn {
   align-self: flex-end;
-  z-index: 1000;
+  z-index: 999999;
+  margin-right: 0;
+  position: relative;
 }
 
 .card:nth-child(even) .detail-btn {
   align-self: flex-start;
+  z-index: 1000;
+  margin-left: 0;
+  position: relative;
 }
 
 .card .left .detail-btn svg {
@@ -224,7 +248,8 @@ body {
   transform: translateY(-50%);
   transition: opacity 0.5s ease, transform 0.5s ease;
   white-space: nowrap;
-  z-index: 2;
+  z-index: 1;
+  pointer-events: none;
 }
 
 .card:nth-child(odd) .card-title {