cfc/docs/extract-dimension-components.md

extract-dimension-components - Work Plan

TL;DR (For humans)

What you'll get: A reusable DimensionArticles.vue component that any dimension page (身/智/心/行/富) can drop in to show dimension-filtered articles. It follows the exact same pattern as the existing DimensionTasks/DimensionActivities/DimensionProducts components — self-loading, configurable by dimensionCode, with "更多" link and article click events.

Why this approach: The article section is currently inline in wisdom/index.vue — duplicated logic that every other dimension page would need to copy. Extracting it into a component follows the consistent Dimension* pattern already used for tasks, activities, and products, which are already shared across 9-14+ files each. No changes needed to existing components.

What it will NOT do: Change the wisdom page layout (that's the companion plan redesign-wisdom-page). Modify existing components. Touch backend or routes.

Effort: Quick Risk: Low — straightforward new component following an established 10-file-strong pattern Decisions to sanity-check: Whether articles should load internally (self-contained) or receive data as props — default is self-loading consistent with DimensionTasks.vue

Your next move: Approve this plan, or run a high-accuracy review. Can run before or independently of the redesign-wisdom-page plan.

---

TL;DR (machine): Quick, Low — create DimensionArticles.vue following existing Dimension* pattern. Self-loads articles filtered by dimensionCode. 1 todo.

Scope

Must have

• Create cfc-frontend/components/DimensionArticles.vue
• Component accepts dimensionCode prop (String, required)
• Component loads articles on mount via getFeaturedArticles({size:5}) from ../../utils/api.js
• Component filters articles by relatedDimensions.indexOf(dimensionCode) !== -1
• Component displays max 5 articles with: category badge, title, summary, view count, date
• Component emits @moreArticles when "更多" is clicked
• Component emits @articleClick(article) when a card is tapped
• Vue 2 Options API, no CSS Grid, no ?.
• Component self-contained — works on any dimension page

Must NOT have (guardrails, anti-slop, scope boundaries)

• No changes to wisdom/index.vue or any other page (that's companion plan)
• No changes to existing Dimension* components
• No backend changes
• No pages.json changes
• No new dependencies
• No CSS Grid (flexbox only)
• No optional chaining ?.
• No inline external data loading beyond getFeaturedArticles

Verification strategy

Zero human intervention - all verification is agent-executed.

• Test decision: tests-after (file existence + grep-based assertions)
• Evidence: .omo/evidence/task-1-dimension-articles-created.txt

Execution strategy

Waves

• Wave 1 (1 todo): Create DimensionArticles.vue
• Wave 2 (1 todo): Verify compilation

Dependency matrix

Todo	Depends on	Blocks	Can parallelize with
T1. Create DimensionArticles.vue	—	T2	—
T2. Verify frontend compilation	T1	—	—

Todos

• [ ] 1. Create DimensionArticles.vue component What to do / Must NOT do: Create file /app/cfc/cfc-frontend/components/DimensionArticles.vue. Template: section with header "推荐阅读" + "更多" link → article card list. Each card shows: category badge (categoryName with color), title, summary (clamped), view count, publishedAt date. "更多" emits @moreArticles. Card tap emits @articleClick(article). Empty state when no articles. Script: props dimensionCode (String, required), data articles (Array), loading (Boolean). On mount call loadArticles() method that calls getFeaturedArticles({size: 5}), filters relatedDimensions by dimensionCode. Style: scoped, flexbox only, no CSS Grid. Must NOT use ?.. Must NOT use display: grid. Must NOT reference wisdom-specific data. Parallelization: Wave 1 | Blocked by: — | Blocks: T2 References:

  • Pattern to follow: /app/cfc/cfc-frontend/components/DimensionTasks.vue (1-148) — self-contained component, dimensionCode prop, loadTasks, emit pattern
  • Article data shape: wisdom/index.vue lines 478-504 — API returns array of {id, categoryName, title, summary, viewCount, publishedAt, relatedDimensions}
  • Existing article card UI: wisdom/index.vue lines 137-161 — category badge, title, summary, meta (views, date)
  • Existing filter logic: wisdom/index.vue lines 264-275 — relatedDimensions.indexOf('wisdom') !== -1
  • API import: /app/cfc/cfc-frontend/utils/api.js line 1175 — export const getFeaturedArticles Acceptance criteria (agent-executable):
  • File exists at cfc-frontend/components/DimensionArticles.vue
  • Grep \bprops\b and dimensionCode present in file
  • Grep getFeaturedArticles present in file
  • Grep relatedDimensions present in file
  • Grep moreArticles present in file (event emit)
  • Grep articleClick present in file (event emit)
  • Grep \?\. returns empty
  • Grep display:\s*grid returns empty QA scenarios:
  • Happy: Read file and verify props/computed/methods match established pattern
  • Structural: Verify template has section-header with "更多" link and article card loop
  • Evidence: .omo/evidence/task-1-dimension-articles-created.txt Commit: Y | feat(frontend): 创建 DimensionArticles 组件，可复用维度文章卡片

• [ ] 2. Verify frontend compilation What to do / Must NOT do: Run npm run build:mp-weixin from /app/cfc/cfc-frontend/. Exit 0. Parallelization: Wave 2 | Blocked by: T1 | Blocks: — References: cfc-frontend/AGENTS.md Acceptance criteria: build exits 0, no compilation errors QA: Capture output to .omo/evidence/task-2-build-output.txt Commit: N

Final verification wave

• F1. Plan compliance — DimensionArticles.vue exists with all required features
• F2. Code quality — no ?., no CSS Grid, Vue 2 Options API
• F3. Scope fidelity — no wisdom/index.vue or other page changes, no existing component changes

Commit strategy

• Todo 1: feat(frontend): 创建 DimensionArticles 组件，可复用维度文章卡片

Success criteria

1. cfc-frontend/components/DimensionArticles.vue exists
2. Component can be added to any dimension page via <DimensionArticles dimensionCode="X" />
3. Component renders dimension-filtered articles with "更多" link
4. Frontend builds without errors