refactor(animation.vue): 调整布局和样式以提升响应性和可读性

将按钮位置固定在右上角，优化SVG容器尺寸以适应不同屏幕。调整节点大小和间距，提升用户体验。更新CSS单位以增强响应性。

 <!--
  * @Date: 2025-03-28 09:23:04
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-28 13:26:37
+ * @LastEditTime: 2025-03-28 13:44:59
  * @FilePath: /mlaj/src/views/animation.vue
  * @Description: 贝塞尔曲线动画路径组件
  *
@@ -14,8 +14,10 @@
 -->
 <template>
   <div class="animation-container">
-    <button class="next-button" @click="nextStep" :disabled="activeNodeIndex >= points.length - 1">下一步</button>
-    <svg width="1000" height="1000" viewBox="0 0 1000 1000">
+    <div style="position: fixed; top: 0; right: 0;">
+      <button class="next-button" @click="nextStep" :disabled="activeNodeIndex >= points.length - 1">下一步</button>
+    </div>
+    <svg width="100%" height="100%" viewBox="0 0 1000 1000" class="animation-svg">
       <!-- 定义箭头标记 -->
       <defs>
         <marker
@@ -74,7 +76,7 @@
         <circle
           :cx="point.x"
           :cy="point.y"
-          r="6"
+          r="12"
           :class="['node', { 'node-active': activeNodeIndex >= index - 1 }]"
           @click="activateNode(index)"
         />
@@ -89,11 +91,11 @@ import { ref, computed } from 'vue';
 // 定义节点坐标数组，每个节点包含x和y坐标
 // 这些点将用于生成贝塞尔曲线的路径
 const points = ref([
-  { x: 250, y: 50 },
-  { x: 10, y: 250 },
-  { x: 400, y: 500 },
-  { x: 50, y: 700 },
-  { x: 400, y: 950 }
+  { x: 700, y: 50 },
+  { x: 300, y: 300 },
+  { x: 700, y: 600 },
+  { x: 300, y: 800 },
+  { x: 700, y: 1000 }
 ]);
 
 // 当前激活的节点索引，初始值为-1表示没有节点被激活
@@ -132,7 +134,7 @@ const calculatePathSegment = (startPoint, endPoint) => {
 
   // 设置节点间的偏移距离（可以根据需要调整）
   const offset = 0;
-  const verticalOffset = -20; // 添加垂直偏移量参数
+  const verticalOffset = -30; // 添加垂直偏移量参数
 
   // 计算单位向量
   const unitX = dx / distance;
@@ -207,16 +209,42 @@ const nextStep = () => {
 <style scoped>
 .animation-container {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background: #f5f5f5;
+  padding: 1.25rem;
+  box-sizing: border-box;
 }
 
+.animation-svg {
+  max-width: 100%;
+  max-height: 100vh;
+  margin: 0 auto;
+}
+
+@media screen and (max-width: 768px) {
+  .animation-container {
+    padding: 0.9375rem;
+  }
+
+  .animation-svg {
+    height: 80vh;
+  }
+
+  .next-button {
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+  }
+
+  .node {
+  }
+}
 .node {
   fill: white;
   stroke: #ccc;
-  stroke-width: 2;
+  stroke-width: 0.125rem;
   cursor: pointer;
   transition: all 0.3s ease;
 }
@@ -236,19 +264,19 @@ const nextStep = () => {
 
 @keyframes dash {
   to {
-    stroke-dashoffset: -20;
+    stroke-dashoffset: -1.25rem;
   }
 }
 
 .next-button {
   position: absolute;
-  top: 20px;
-  right: 20px;
-  padding: 8px 16px;
+  top: 1.25rem;
+  right: 1.25rem;
+  padding: 0.5rem 1rem;
   background-color: #4CAF50;
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   cursor: pointer;
   transition: all 0.3s ease;
 }