refactor: rebuild GenerateMenuButton on top of ToolbarMenuButton

src/components/GenerateMenuButton.test.ts

@@ -54,7 +54,7 @@ describe('GenerateMenuButton', () => {
     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' })
+    await wrapper.get('div.toolbar-menu').trigger('keydown', { key: 'Escape' })
 
     expect(wrapper.find('[data-testid="generate"]').exists()).toBe(false)
     wrapper.unmount()

src/components/GenerateMenuButton.vue

@@ -1,68 +1,39 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+import ToolbarMenuButton from './ToolbarMenuButton.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">
+  <ToolbarMenuButton label="生成教案 ▾" toggle-testid="generate-menu-toggle">
-    <button
+    <template #default="{ close }">
-      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="batch-generate" @click="select('batchGenerate')">
+        <button
+          type="button"
+          data-testid="batch-generate"
+          @click="
+            emit('batchGenerate');
+            close()
+          "
+        >
           批量生成
         </button>
       </li>
       <li role="menuitem">
-        <button type="button" data-testid="generate" @click="select('generate')">生成一篇</button>
+        <button
+          type="button"
+          data-testid="generate"
+          @click="
+            emit('generate');
+            close()
+          "
+        >
+          生成一篇
+        </button>
       </li>
-    </ul>
+    </template>
-  </div>
+  </ToolbarMenuButton>
 </template>