English Word Daily Tool Design

Goal

Build a standalone VuePress page tool named English Word Daily. It generates printable A4 spelling practice worksheets as PNG images from a user-provided daily word list.

The tool is intentionally narrow:

• It does word list formatting and worksheet rendering.
• It does not select words, schedule review, grade answers, or write back learning state.
• It does not generate PDF in V1.
• It does not modify or extract shared code from the existing pinyin helper.

Product Shape

Add a new page at /tools/english-word-daily/ with a dedicated component:

• docs/.vuepress/components/EnglishWordDailyTool.vue
• docs/07.工具/30.英语单词日课.md

Also add the tool to the existing Tools navigation and tools overview page.

The UI follows the existing pinyin helper pattern: a simple form, a generate button, preview cards, and per-page downloads.

Inputs

The first version uses plain form fields rather than JSON upload:

• Title, default Spelling Practice
• Subtitle, default Copy + Recall
• Date, default current browser date
• Student name, optional
• Level, optional
• Duration hint, default 10-15 min
• Word list textarea, one word per line
• Dictation count, default 5
• Max words per page, default 10

Default sample words:

cat
dog
sun
hat
pen
map
fish
bed
cake
milk

Rendering

Rendering is browser-side canvas, matching the existing pinyin helper deployment model.

Canvas target:

• A4 portrait ratio at 2480 x 3508
• White background, black text and lines
• 15 mm equivalent margins using fixed pixel constants
• System sans-serif font stack

Each generated page has:

• Header with title, subtitle, date, name line, optional level, optional time
• Main practice blocks
• Dictation block only on the final page

Each practice block uses the block layout:

1. cat
Copy:      cat
Recall 1:  ________________________
Recall 2:  ________________________

The word is bold. Labels align consistently. Recall lines use fixed length so long words do not compress writing space.

Pagination

V1 uses simple stable pagination:

• Preserve input order.
• Render at most maxWordsPerPage words per page.
• Put dictation only on the final page.
• If final-page words plus dictation do not fit, move excess final-page words to a new final page before drawing dictation.
• If the word list is empty after trimming blank lines, show an error and clear previews.

This keeps the behavior predictable without doing complex vertical packing.

Output

Preview pages are shown below the form. Downloads are PNG files named:

worksheet_YYYY-MM-DD_01.png
worksheet_YYYY-MM-DD_02.png

The tool does not add jspdf, reportlab, or any PDF dependency in V1.

Tracking And Feedback

Use the same local component style as the pinyin helper but keep event names separate:

• english_word_daily_tool_view
• english_word_daily_generate
• english_word_daily_generate_error
• english_word_daily_download

Do not add a message board in V1. The new tool stays focused on worksheet generation.

Error Handling

Validate in the component before rendering:

• Word list must not be empty.
• Dictation count must be an integer from 0 to 20.
• Max words per page must be an integer from 1 to 12.

Long words are allowed. In block layout they remain on their own text line and do not shorten recall lines.

Testing

Manual verification:

• 1 word
• 5 words
• 10 words
• 12 words
• 20 words across multiple pages
• Empty word list error
• dictation_count = 0
• Long words such as strawberry and beautiful

Build verification:

npm run build

If build is too slow locally, run the VuePress page in dev mode and verify the new route renders and the generated PNG downloads open.