docs(animation.vue): 添加函数注释以增强代码可读性

为关键函数添加详细注释，解释其实现逻辑和用途，以便于其他开发者理解代码功能

@@ -150,6 +150,11 @@ const pathData = computed(() => {
 });
 
 // 计算两点之间的贝塞尔曲线路径段
+// 该函数使用三次贝塞尔曲线算法生成平滑的曲线路径：
+// 1. 计算路径的方向向量和单位向量
+// 2. 添加垂直偏移以创建弧形效果
+// 3. 根据路径方向动态调整控制点
+// 4. 生成标准的SVG路径命令字符串
 // @param startPoint - 起始点坐标 {x, y}
 // @param endPoint - 结束点坐标 {x, y}
 // @returns 返回SVG路径字符串
@@ -211,8 +216,12 @@ const pathColor = computed(() => {
 // };
 
 // 处理下一步按钮点击事件
-// 激活下一个节点并创建新的高亮路径段
-// 当到达最后一个节点时，按钮将被禁用
+// 该函数实现了动画的核心交互逻辑：
+// 1. 按顺序激活下一个节点
+// 2. 创建新的高亮路径段并添加到动画序列
+// 3. 更新节点状态和路径显示
+// 4. 当到达最后一个节点时自动禁用按钮
+// 5. 确保动画流程的连贯性和用户体验
 const nextStep = () => {
   if (activeNodeIndex.value < points.value.length - 1) {
     activeNodeIndex.value++;
@@ -280,6 +289,9 @@ const svgObj = [
   },
 ];
 // 计算SVG容器尺寸
+// 该函数用于获取动画容器的实际尺寸，以便于后续计算SVG视图框
+// 返回一个包含容器宽度和高度的对象
+// 如果容器不存在，则返回默认值{width: 0, height: 0}
 const containerSize = computed(() => {
   const container = document.querySelector('.animation-container');
   if (!container) return { width: 0, height: 0 };
@@ -306,7 +318,12 @@ onUnmounted(() => {
   window.removeEventListener('resize', updateContainerSize);
 });
 
-// 更新svgViewBox计算属性
+// 计算并更新SVG视图框（viewBox）
+// 该函数动态计算SVG视图框的尺寸和位置，以确保：
+// 1. 所有节点都在可视区域内
+// 2. 保持适当的宽高比
+// 3. 根据容器尺寸自适应调整
+// 4. 在不同屏幕尺寸下保持良好的显示效果
 const svgViewBox = computed(() => {
   const maxX = Math.max(...points.value.map(p => p.x));
   const maxY = Math.max(...points.value.map(p => p.y));