feat: merge print/export buttons into a single dropdown in WorkspaceToolbar

This commit is contained in:
2026-06-22 19:28:09 -06:00
parent 78a082b273
commit 5723470f65
3 changed files with 21 additions and 5 deletions

View File

@@ -42,10 +42,25 @@ describe('WorkspaceToolbar', () => {
expect(wrapper.get('button[data-testid="back"]').attributes('disabled')).toBeUndefined() expect(wrapper.get('button[data-testid="back"]').attributes('disabled')).toBeUndefined()
}) })
it('disables print, export and clear when there are no lessons', () => { it('disables the export menu toggle and clear button when there are no lessons', () => {
const wrapper = mountToolbar(0) const wrapper = mountToolbar(0)
expect(wrapper.get('button[data-testid="print"]').attributes('disabled')).toBeDefined() expect(
expect(wrapper.get('button[data-testid="export"]').attributes('disabled')).toBeDefined() wrapper.get('button[data-testid="export-menu-toggle"]').attributes('disabled'),
).toBeDefined()
expect(wrapper.get('button[data-testid="clear"]').attributes('disabled')).toBeDefined() expect(wrapper.get('button[data-testid="clear"]').attributes('disabled')).toBeDefined()
}) })
it('emits print when the print menu item is clicked', async () => {
const wrapper = mountToolbar(3)
await wrapper.get('button[data-testid="export-menu-toggle"]').trigger('click')
await wrapper.get('button[data-testid="print"]').trigger('click')
expect(wrapper.emitted('print')).toHaveLength(1)
})
it('emits export when the export menu item is clicked', async () => {
const wrapper = mountToolbar(3)
await wrapper.get('button[data-testid="export-menu-toggle"]').trigger('click')
await wrapper.get('button[data-testid="export"]').trigger('click')
expect(wrapper.emitted('export')).toHaveLength(1)
})
}) })

View File

@@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { SaveStatus } from '../composables/useTeachingBook' import type { SaveStatus } from '../composables/useTeachingBook'
import ExportMenuButton from './ExportMenuButton.vue'
import GenerateMenuButton from './GenerateMenuButton.vue' import GenerateMenuButton from './GenerateMenuButton.vue'
const props = defineProps<{ const props = defineProps<{
@@ -30,8 +31,7 @@ const saveStatusLabel: Record<SaveStatus, string> = {
<header class="workspace-toolbar"> <header class="workspace-toolbar">
<button type="button" data-testid="back" @click="$emit('back')">返回列表</button> <button type="button" data-testid="back" @click="$emit('back')">返回列表</button>
<GenerateMenuButton @generate="$emit('generate')" @batch-generate="$emit('batchGenerate')" /> <GenerateMenuButton @generate="$emit('generate')" @batch-generate="$emit('batchGenerate')" />
<button type="button" data-testid="print" :disabled="lessonCount === 0" @click="$emit('print')">打印整册</button> <ExportMenuButton :disabled="lessonCount === 0" @print="$emit('print')" @export="$emit('export')" />
<button type="button" data-testid="export" :disabled="lessonCount === 0" @click="$emit('export')">导出 MD</button>
<button type="button" data-testid="clear" :disabled="lessonCount === 0" @click="$emit('clear')">清空</button> <button type="button" data-testid="clear" :disabled="lessonCount === 0" @click="$emit('clear')">清空</button>
<span class="workspace-toolbar-count"> {{ lessonCount }} </span> <span class="workspace-toolbar-count"> {{ lessonCount }} </span>

View File

@@ -204,6 +204,7 @@ describe('WorkspaceView', () => {
const wrapper = mount(WorkspaceView, { props: { bookId: 'b1' } }) const wrapper = mount(WorkspaceView, { props: { bookId: 'b1' } })
await flushPromises() await flushPromises()
await wrapper.get('[data-testid="export-menu-toggle"]').trigger('click')
await wrapper.get('[data-testid="export"]').trigger('click') await wrapper.get('[data-testid="export"]').trigger('click')
await flushPromises() await flushPromises()