From 81e2f3d33d13504b5585f582266b382902057816 Mon Sep 17 00:00:00 2001
From: 666ghj <670939375@qq.com>
Date: Wed, 10 Dec 2025 16:28:30 +0800
Subject: [PATCH] Implement scroll functionality and enhance button styling in
 Home.vue

- Added a scroll-to-bottom feature for improved navigation experience.
- Refactored the start simulation button layout by wrapping it in a new console section for better organization.
- Enhanced button styles with animations and improved disabled state appearance for a more engaging user interface.
---
 frontend/src/views/Home.vue | 63 ++++++++++++++++++++++++++++++-------
 1 file changed, 51 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index ba7ee0f..1bb9d7a 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -42,7 +42,7 @@
             <img src="../assets/logo/MiroFish_logo_left.jpeg" alt="MiroFish Logo" class="hero-logo" />
           </div>
           
-          <button class="scroll-down-btn">
+          <button class="scroll-down-btn" @click="scrollToBottom">
             ↓
           </button>
         </div>
@@ -178,15 +178,17 @@
             </div>
 
             <!-- 启动按钮 -->
-            <button 
-              class="start-engine-btn"
-              @click="startSimulation"
-              :disabled="!canSubmit || loading"
-            >
-              <span v-if="!loading">启动引擎</span>
-              <span v-else>初始化中...</span>
-              <span class="btn-arrow">→</span>
-            </button>
+            <div class="console-section btn-section">
+              <button 
+                class="start-engine-btn"
+                @click="startSimulation"
+                :disabled="!canSubmit || loading"
+              >
+                <span v-if="!loading">启动引擎</span>
+                <span v-else>初始化中...</span>
+                <span class="btn-arrow">→</span>
+              </button>
+            </div>
           </div>
         </div>
       </section>
@@ -268,6 +270,14 @@ const removeFile = (index) => {
   files.value.splice(index, 1)
 }
 
+// 滚动到底部
+const scrollToBottom = () => {
+  window.scrollTo({
+    top: document.body.scrollHeight,
+    behavior: 'smooth'
+  })
+}
+
 // 开始模拟
 const startSimulation = async () => {
   if (!canSubmit.value || loading.value) return
@@ -657,6 +667,10 @@ const startSimulation = async () => {
   padding: 20px;
 }
 
+.console-section.btn-section {
+  padding-top: 0;
+}
+
 .console-header {
   display: flex;
   justify-content: space-between;
@@ -803,17 +817,42 @@ const startSimulation = async () => {
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.3s ease;
   letter-spacing: 1px;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 可点击状态（非禁用） */
+.start-engine-btn:not(:disabled) {
+  background: var(--black);
+  border: 1px solid var(--black);
+  animation: pulse-border 2s infinite;
 }
 
 .start-engine-btn:hover:not(:disabled) {
   background: var(--orange);
+  border-color: var(--orange);
+  transform: translateY(-2px);
+}
+
+.start-engine-btn:active:not(:disabled) {
+  transform: translateY(0);
 }
 
 .start-engine-btn:disabled {
-  background: #CCC;
+  background: #E5E5E5;
+  color: #999;
   cursor: not-allowed;
+  transform: none;
+  border: 1px solid #E5E5E5;
+}
+
+/* 引导动画：微妙的边框脉冲 */
+@keyframes pulse-border {
+  0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); }
+  70% { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
 }
 
 /* 响应式适配 */