2026-04-12-message-board-reuse

# Message Board Reuse Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Add a reusable message board component that can be enabled per page, and enable it for resume and pinyin tool.

Architecture: Extract the existing pinyin in-file message board into a shared Vue component, then wire that component into PinyinDictationTool.vue and ResumeLanding.vue. Resume visibility is controlled by frontmatter config in docs/index.md.

Tech Stack: VuePress 1 (Vue 2 single-file components), Node assert wiring tests.

# Task 1: Add Failing Wiring Test First

Files:

Create: scripts/test_message_board_wiring.js
[ ] Step 1: Write the failing test

const assert = require('assert')
const fs = require('fs')
const path = require('path')

const root = path.resolve(__dirname, '..')

function read(relativePath) {
  return fs.readFileSync(path.join(root, relativePath), 'utf8')
}

assert.ok(fs.existsSync(path.join(root, 'docs/.vuepress/components/MessageBoard.vue')))

const messageBoard = read('docs/.vuepress/components/MessageBoard.vue')
assert.match(messageBoard, /name:\s*'MessageBoard'/)
assert.match(messageBoard, /\/api\/message-board\/messages/)
assert.match(messageBoard, /v-model\.trim="messageContent"/)

const pinyin = read('docs/.vuepress/components/PinyinDictationTool.vue')
assert.match(pinyin, /<MessageBoard/)
assert.match(pinyin, /page-key="pinyin-helper"/)
assert.doesNotMatch(pinyin, /messageNickname/)
assert.doesNotMatch(pinyin, /submitBoardMessage/)
assert.doesNotMatch(pinyin, /loadBoardMessages/)

const resume = read('docs/.vuepress/components/ResumeLanding.vue')
assert.match(resume, /<MessageBoard/)
assert.match(resume, /messageBoardConfig/)

const indexPage = read('docs/index.md')
assert.match(indexPage, /messageBoard:/)
assert.match(indexPage, /enabled:\s*true/)
assert.match(indexPage, /pageKey:\s*resume-home/)

console.log('message board wiring tests passed')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

[ ] Step 2: Run test to verify it fails

Run: node scripts/test_message_board_wiring.js Expected: FAIL because MessageBoard.vue does not exist yet and resume/pinyin are not wired.

# Task 2: Implement Reusable Component and Integrate

Files:

Create: docs/.vuepress/components/MessageBoard.vue
Modify: docs/.vuepress/components/PinyinDictationTool.vue
Modify: docs/.vuepress/components/ResumeLanding.vue
Modify: docs/index.md
[ ] Step 1: Add MessageBoard.vue with API integration

<template>
  <section v-if="enabled" class="message-board">
    <h3>{{ title }}</h3>
    <p class="hint">{{ description }}</p>
    ...
  </section>
</template>

1
2
3
4
5
6
7

Key logic:

GET /api/message-board/messages?pageKey=...&limit=...
POST /api/message-board/messages
states: messageLoading, messageSubmitting, messageError, messageSuccess, boardMessages
local validation for missing pageKey and empty message
[ ] Step 2: Replace pinyin inline board with shared component

<section class="message-board-slot">
  <MessageBoard
    page-key="pinyin-helper"
    source="pinyin-helper-tool"
    title="留言板"
    description="欢迎反馈使用体验，我会在飞书收到留言并可通过接口回复。"
  />
</section>

1
2
3
4
5
6
7
8

Remove pinyin-specific message board fields and methods.

[ ] Step 3: Add resume integration with frontmatter-driven config

In ResumeLanding.vue:

import and register MessageBoard
add computed messageBoardConfig from this.$page.frontmatter.messageBoard
render <MessageBoard ... :enabled="messageBoardConfig.enabled" ... /> below contact section

In docs/index.md:

messageBoard:
  enabled: true
  pageKey: resume-home
  source: resume-landing
  title: 给我留言
  description: 如果你对我的经历、项目或合作方向有问题，可以在这里留言。

1
2
3
4
5
6

# Task 3: Verify and Finish

Files:

Modify: scripts/test_message_board_wiring.js (if assertion tuning needed after implementation)
[ ] Step 1: Run new wiring test

Run: node scripts/test_message_board_wiring.js Expected: PASS

[ ] Step 2: Run impacted existing wiring tests

Run:

node scripts/test_english_word_daily_wiring.js
node scripts/test_schulte_grid_wiring.js

Expected: PASS

[ ] Step 3: Commit

git add docs/.vuepress/components/MessageBoard.vue \
  docs/.vuepress/components/PinyinDictationTool.vue \
  docs/.vuepress/components/ResumeLanding.vue \
  docs/index.md \
  scripts/test_message_board_wiring.js \
  docs/superpowers/plans/2026-04-12-message-board-reuse.md
git commit -m "feat: add reusable message board for resume and tools"

1
2
3
4
5
6
7

上次更新: 2026/04/12, 02:53:34