feat: add GenerateMenuButton dropdown component

Implements a dropdown menu button component with generate and batch generate options. Includes click-outside and Escape-key menu closing behavior.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/GenerateMenuButton.test.ts

@@ -0,0 +1,62 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import GenerateMenuButton from './GenerateMenuButton.vue'
+
+describe('GenerateMenuButton', () => {
+  it('renders the toggle button with the menu closed by default', () => {
+    const wrapper = mount(GenerateMenuButton, { attachTo: document.body })
+    expect(wrapper.get('button[data-testid="generate-menu-toggle"]').text()).toContain('生成教案')
+    expect(wrapper.find('[data-testid="generate"]').exists()).toBe(false)
+    expect(wrapper.find('[data-testid="batch-generate"]').exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('opens the menu when the toggle button is clicked', async () => {
+    const wrapper = mount(GenerateMenuButton, { attachTo: document.body })
+    await wrapper.get('button[data-testid="generate-menu-toggle"]').trigger('click')
+    expect(wrapper.get('[data-testid="generate"]').isVisible()).toBe(true)
+    expect(wrapper.get('[data-testid="batch-generate"]').isVisible()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('emits generate and closes the menu when "生成一篇" is clicked', async () => {
+    const wrapper = mount(GenerateMenuButton, { attachTo: document.body })
+    await wrapper.get('button[data-testid="generate-menu-toggle"]').trigger('click')
+    await wrapper.get('button[data-testid="generate"]').trigger('click')
+    expect(wrapper.emitted('generate')).toHaveLength(1)
+    expect(wrapper.find('[data-testid="generate"]').exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('emits batchGenerate and closes the menu when "批量生成" is clicked', async () => {
+    const wrapper = mount(GenerateMenuButton, { attachTo: document.body })
+    await wrapper.get('button[data-testid="generate-menu-toggle"]').trigger('click')
+    await wrapper.get('button[data-testid="batch-generate"]').trigger('click')
+    expect(wrapper.emitted('batchGenerate')).toHaveLength(1)
+    expect(wrapper.find('[data-testid="batch-generate"]').exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('closes the menu when clicking outside the component', async () => {
+    const wrapper = mount(GenerateMenuButton, { attachTo: document.body })
+    await wrapper.get('button[data-testid="generate-menu-toggle"]').trigger('click')
+    expect(wrapper.find('[data-testid="generate"]').exists()).toBe(true)
+
+    document.body.click()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('[data-testid="generate"]').exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('closes the menu when Escape is pressed', async () => {
+    const wrapper = mount(GenerateMenuButton, { attachTo: document.body })
+    await wrapper.get('button[data-testid="generate-menu-toggle"]').trigger('click')
+    expect(wrapper.find('[data-testid="generate"]').exists()).toBe(true)
+
+    await wrapper.get('div.generate-menu').trigger('keydown', { key: 'Escape' })
+
+    expect(wrapper.find('[data-testid="generate"]').exists()).toBe(false)
+    wrapper.unmount()
+  })
+})

src/components/GenerateMenuButton.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const emit = defineEmits<{
+  generate: []
+  batchGenerate: []
+}>()
+
+const open = ref(false)
+const rootRef = ref<HTMLElement | null>(null)
+
+function toggle(): void {
+  open.value = !open.value
+}
+
+function close(): void {
+  open.value = false
+}
+
+function select(action: 'generate' | 'batchGenerate'): void {
+  emit(action)
+  close()
+}
+
+function handleDocumentClick(event: MouseEvent): void {
+  if (!rootRef.value) return
+  if (!rootRef.value.contains(event.target as Node)) {
+    close()
+  }
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (event.key === 'Escape') {
+    close()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleDocumentClick)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleDocumentClick)
+})
+</script>
+
+<template>
+  <div ref="rootRef" class="generate-menu" @keydown="handleKeydown">
+    <button
+      type="button"
+      data-testid="generate-menu-toggle"
+      :aria-expanded="open"
+      @click.stop="toggle"
+    >
+      生成教案 ▾
+    </button>
+    <ul v-if="open" class="generate-menu-list" role="menu">
+      <li role="menuitem">
+        <button type="button" data-testid="generate" @click="select('generate')">生成一篇</button>
+      </li>
+      <li role="menuitem">
+        <button type="button" data-testid="batch-generate" @click="select('batchGenerate')">
+          批量生成
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>