吴雨瞳添加了注释

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

@@ -1,26 +1,40 @@
 <template>
+  <!-- 下拉菜单项容器
+    - @click.stop.prevent：阻止事件冒泡和默认行为，避免触发父组件的点击事件
+    - 样式设置：块级显示、鼠标指针样式、悬停效果、内边距和字体样式
+  -->
   <div
-    @click.stop.prevent="handleClick"
-    class="block cursor-pointer hover:bg-ob-trans my-1 px-4 py-1 font-medium hover:text-ob-bright">
+      @click.stop.prevent="handleClick"
+      class="block cursor-pointer hover:bg-ob-trans my-1 px-4 py-1 font-medium hover:text-ob-bright">
+    <!-- 插槽：用于插入下拉菜单项的内容（如文本、图标等） -->
     <slot />
   </div>
 </template>
 
 <script lang="ts">
+// 导入Vue的defineComponent用于定义组件
 import { defineComponent } from 'vue'
+// 导入下拉菜单状态管理，用于跨组件传递命令
 import { useDropdownStore } from '@/stores/dropdown'
 
+// 定义下拉菜单项组件
 export default defineComponent({
-  name: 'DropdownItem',
+  name: 'DropdownItem', // 组件名称
   props: {
+    // 菜单项标识名称，用于点击时传递命令
     name: String
   },
   setup(props) {
+    // 获取下拉菜单状态管理实例
     const dropdownStore = useDropdownStore()
+
+    // 处理菜单项点击事件：将当前项的name设置到状态管理中
     const handleClick = () => {
       dropdownStore.setCommand(String(props.name))
     }
+
+    // 暴露handleClick方法供模板使用
     return { handleClick }
   }
 })
-</script>
+</script>