# 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