吴雨瞳添加了注释

aurora-vue/aurora-blog/src/components/Dropdown/src/DropdownMenu.vue

@@ -1,32 +1,52 @@
 <template>
+  <!-- 下拉菜单内容过渡动画组件，使用指定的过渡名称 -->
   <transition name="dropdown-content">
+    <!-- 非展开模式下的下拉菜单容器
+      - v-if="!expand && active"：当非展开模式且菜单激活时显示
+      - 样式：绝对定位（右上角为原点）、距离顶部2px、宽度48、深色背景、圆角、内边距、阴影
+    -->
     <div
-      v-if="!expand && active"
-      class="origin-top-right absolute right-0 mt-2 w-48 bg-ob-deep-900 rounded-lg py-2 shadow-md">
+        v-if="!expand && active"
+        class="origin-top-right absolute right-0 mt-2 w-48 bg-ob-deep-900 rounded-lg py-2 shadow-md">
+      <!-- 插槽：用于插入下拉菜单项（DropdownItem） -->
       <slot />
     </div>
+    <!-- 展开模式下的下拉菜单容器
+      - v-else-if="expand && active"：当展开模式且菜单激活时显示
+      - 样式：弹性布局（垂直居中、水平居中）、距离顶部2px、宽度48、深色背景、圆角、内边距
+    -->
     <div
-      v-else-if="expand && active"
-      class="flex flex-col justify-center items-center mt-2 w-48 bg-ob-deep-900 rounded-lg py-2">
+        v-else-if="expand && active"
+        class="flex flex-col justify-center items-center mt-2 w-48 bg-ob-deep-900 rounded-lg py-2">
+      <!-- 插槽：用于插入下拉菜单项（DropdownItem） -->
       <slot />
     </div>
   </transition>
 </template>
 
 <script lang="ts">
+// 导入Vue相关API：计算属性、组件定义、依赖注入
 import { computed, defineComponent, inject } from 'vue'
 
+// 定义下拉菜单内容组件
 export default defineComponent({
-  name: 'DropdownMenu',
+  name: 'DropdownMenu', // 组件名称
   props: {
+    // 控制下拉菜单是否为展开模式（影响布局样式）
     expand: {
       type: Boolean,
-      default: false
+      default: false // 默认非展开模式
     }
   },
   setup() {
+    // 从父组件（Dropdown）注入共享状态（包含active属性控制菜单显示/隐藏）
+    // 若未注入则使用默认值{ active: false }
     const sharedState = inject('sharedState', { active: false })
+
+    // 计算属性：根据共享状态的active值确定当前菜单是否激活显示
     const active = computed(() => sharedState.active)
+
+    // 暴露active计算属性供模板使用
     return {
       active
     }
@@ -35,13 +55,17 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+// 下拉菜单过渡动画样式
+// 进入和离开动画的活跃状态（过渡过程中）
 .dropdown-content-enter-active,
 .dropdown-content-leave-active {
-  transition: all 0.2s;
+  transition: all 0.2s; // 所有属性过渡，时长0.2秒
 }
+
+// 进入动画的起始状态和离开动画的结束状态
 .dropdown-content-enter,
 .dropdown-content-leave-to {
-  opacity: 0;
-  transform: translateY(-5px);
+  opacity: 0; // 透明度为0（完全透明）
+  transform: translateY(-5px); // 向上偏移5px
 }
-</style>
+</style>